update at 2025-10-10 19:13:38
This commit is contained in:
douboer
173
styles.css
173
styles.css
@@ -84,22 +84,14 @@
|
||||
.wechat-preview-container:not([style*="display: none"]),
|
||||
.xiaohongshu-preview-container:not([style*="display: none"]) {
|
||||
flex: 1;
|
||||
display: grid !important;
|
||||
grid-template-rows: auto 1fr;
|
||||
display: flex !important;
|
||||
min-height: 0; /* 允许内部滚动区域正确计算高度 */
|
||||
}
|
||||
|
||||
.render-div {
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
-webkit-user-select: text;
|
||||
user-select: text;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* 文章包裹：模拟公众号编辑器阅读宽度 */
|
||||
.wechat-article-wrapper {
|
||||
max-width: 720px;
|
||||
width: 100%;
|
||||
max-width: clamp(360px, 80vw, 760px);
|
||||
margin: 0 auto;
|
||||
padding: 12px 18px 80px 18px; /* 底部留白方便滚动到底部操作 */
|
||||
box-sizing: border-box;
|
||||
@@ -110,19 +102,6 @@
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.preview-toolbar {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, max-content));
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
min-height: auto;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid #e8eaed;
|
||||
background: var(--grad-toolbar);
|
||||
box-shadow: var(--shadow-overlay);
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
margin-right: 10px;
|
||||
padding: 6px 14px;
|
||||
@@ -312,23 +291,6 @@ label:hover { color: var(--c-primary); }
|
||||
/* Toolbar 行样式 */
|
||||
/* =========================================================== */
|
||||
|
||||
.toolbar-line {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 8px 12px;
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
margin: 8px 10px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.toolbar-line.flex-wrap {
|
||||
grid-auto-flow: row;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, max-content));
|
||||
}
|
||||
|
||||
.platform-selector-line {
|
||||
background: linear-gradient(135deg, #fff3e0 0%, #ffffff 100%) !important;
|
||||
border-left: 4px solid var(--c-primary);
|
||||
@@ -367,13 +329,125 @@ label:hover { color: var(--c-primary); }
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* =========================================================== */
|
||||
/* 微信公众号预览布局 */
|
||||
/* =========================================================== */
|
||||
|
||||
.wechat-preview-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.wechat-board {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
grid-template-rows: auto auto auto minmax(0, 1fr);
|
||||
grid-template-areas:
|
||||
"account-select account-select account-select account-back-export account-back-export account-back-export"
|
||||
"cover-select cover-select cover-select cover-select cover-input cover-input"
|
||||
"style-label style-select highlight-label highlight-select highlight-select highlight-select"
|
||||
"content content content content content content";
|
||||
gap: 5px;
|
||||
background: var(--grad-toolbar);
|
||||
border-radius: 12px;
|
||||
padding: 5px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.wechat-cell {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
padding: 12px 16px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.wechat-cell[data-area="account-select"] {
|
||||
grid-area: account-select;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.wechat-cell[data-area="account-back-export"] {
|
||||
grid-area: account-back-export;
|
||||
justify-content: flex-center;
|
||||
}
|
||||
|
||||
.wechat-cell[data-area="account-select"] .style-label {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wechat-cell[data-area="account-select"] .wechat-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wechat-cell[data-area="account-back-export"] .wechat-action-button { white-space: nowrap; }
|
||||
|
||||
.wechat-cell[data-area="cover-select"] {
|
||||
grid-area: cover-select;
|
||||
justify-content: flex-start;
|
||||
gap: 18px;
|
||||
}
|
||||
.wechat-cell[data-area="cover-input"] { grid-area: cover-input; }
|
||||
|
||||
.wechat-cell[data-area="cover-select"] label {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wechat-cell[data-area="cover-input"] .upload-input {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wechat-cell[data-area="style-label"] { grid-area: style-label; white-space: nowrap; justify-content: flex-start; }
|
||||
.wechat-cell[data-area="style-select"] { grid-area: style-select; width: 100%; }
|
||||
.wechat-cell[data-area="highlight-label"] { grid-area: highlight-label; white-space: nowrap; justify-content: flex-start; }
|
||||
.wechat-cell[data-area="highlight-select"] { grid-area: highlight-select; width: 100%; }
|
||||
|
||||
.wechat-cell[data-area="style-select"] .style-select,
|
||||
.wechat-cell[data-area="style-select"] .wechat-style-select,
|
||||
.wechat-cell[data-area="highlight-select"] .style-select,
|
||||
.wechat-cell[data-area="highlight-select"] .wechat-style-select {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.wechat-cell[data-area="content"] {
|
||||
grid-area: content;
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
-webkit-user-select: text;
|
||||
user-select: text;
|
||||
min-height: 0;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wechat-cell-placeholder {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.wechat-cell-placeholder .toolbar-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* =========================================================== */
|
||||
/* 微信公众号选择器样式 */
|
||||
/* =========================================================== */
|
||||
|
||||
.wechat-select {
|
||||
padding: 6px 12px;
|
||||
min-width: 200px;
|
||||
min-width: 100px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* =========================================================== */
|
||||
@@ -397,17 +471,6 @@ label:hover { color: var(--c-primary); }
|
||||
|
||||
.toolbar-button.purple-gradient:hover { box-shadow: var(--shadow-purple-4); }
|
||||
|
||||
/* =========================================================== */
|
||||
/* 分隔线样式 */
|
||||
/* =========================================================== */
|
||||
|
||||
.toolbar-separator {
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
background: var(--c-border);
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
/* =========================================================== */
|
||||
/* Doc Modal 样式 */
|
||||
/* =========================================================== */
|
||||
@@ -485,11 +548,11 @@ label:hover { color: var(--c-primary); }
|
||||
"content content content content content content"
|
||||
"content content content content content content"
|
||||
"pagination pagination pagination slice slice slice";
|
||||
gap: 12px;
|
||||
gap: 5px;
|
||||
width: 100%;
|
||||
background: var(--grad-xhs-bg);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
padding: 5px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user