update at 2025-10-09 21:19:57
This commit is contained in:
douboer
230
styles.css
230
styles.css
@@ -460,38 +460,142 @@ label:hover { color: var(--c-primary); }
|
||||
.xiaohongshu-preview-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.xhs-preview-container:not([style*="display: none"]) {
|
||||
display: grid !important;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
height: 100%;
|
||||
.xhs-board {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
grid-template-rows: auto auto auto 1fr auto;
|
||||
grid-template-areas:
|
||||
"platform platform platform refresh publish"
|
||||
"template template preview preview font"
|
||||
"content content content content content"
|
||||
"content content content content content"
|
||||
"pagination pagination slice slice slice";
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
background: var(--grad-xhs-bg);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.xhs-page-container {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
display: grid;
|
||||
align-content: start;
|
||||
justify-content: center;
|
||||
padding: 0px;
|
||||
background: radial-gradient(ellipse at top, rgba(255,255,255,0.1) 0%, transparent 70%);
|
||||
min-height: 0; /* 允许子项正确收缩和滚动 */
|
||||
.xhs-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
padding: 10px 14px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.xhs-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--c-text-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.xhs-select {
|
||||
flex: 1 1 auto;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid var(--c-border);
|
||||
border-radius: 6px;
|
||||
background: white;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.xhs-select:hover { border-color: var(--c-primary); }
|
||||
|
||||
.xhs-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--c-primary);
|
||||
box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.1);
|
||||
}
|
||||
|
||||
.font-size-group {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 2px;
|
||||
border: 1px solid var(--c-border);
|
||||
border-radius: 6px;
|
||||
background: #f7f9fb;
|
||||
}
|
||||
|
||||
.font-size-btn {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
color: #5f6368;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.font-size-btn:hover { background: #eaf1fe; }
|
||||
|
||||
.font-size-input {
|
||||
width: 60px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
text-align: center;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.font-size-input:focus { outline: none; }
|
||||
|
||||
.xhs-area-platform,
|
||||
.xhs-board .platform-chooser-container,
|
||||
.xhs-board .platform-selector-line {
|
||||
grid-area: platform;
|
||||
}
|
||||
|
||||
.xhs-area-template { grid-area: template; }
|
||||
.xhs-area-preview { grid-area: preview; }
|
||||
.xhs-area-refresh { grid-area: refresh; justify-content: center; }
|
||||
.xhs-area-publish { grid-area: publish; justify-content: center; }
|
||||
.xhs-area-font { grid-area: font; flex-wrap: wrap; }
|
||||
.xhs-area-pagination { grid-area: pagination; justify-content: center; gap: 16px; }
|
||||
.xhs-area-slice { grid-area: slice; justify-content: center; gap: 16px; }
|
||||
|
||||
.xhs-area-content {
|
||||
grid-area: content;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 0;
|
||||
box-shadow: var(--shadow-sm);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.xhs-page-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
background: radial-gradient(ellipse at top, rgba(255,255,255,0.1) 0%, transparent 70%);
|
||||
border-radius: 12px;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 小红书单页包裹器：为缩放后的页面预留正确的布局空间 */
|
||||
.xhs-page-wrapper {
|
||||
margin: 0px auto;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 小红书单页样式：实际尺寸 1080×1440，通过 scale 缩放到 540×720 */
|
||||
.xhs-page {
|
||||
/* 实际尺寸与缩放由代码在运行时设置 */
|
||||
transform-origin: top left;
|
||||
background: white;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
border-radius: 8px;
|
||||
@@ -502,87 +606,10 @@ label:hover { color: var(--c-primary); }
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.xhs-top-toolbar {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, max-content));
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 8px 12px;
|
||||
background: var(--grad-toolbar);
|
||||
border-bottom: 1px solid #e8eaed;
|
||||
box-shadow: var(--shadow-overlay);
|
||||
}
|
||||
|
||||
.toolbar-label {
|
||||
font-size: 11px;
|
||||
color: var(--c-text-muted);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.xhs-select {
|
||||
padding: 4px 8px;
|
||||
border: 1px solid var(--c-border);
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.xhs-select:hover {
|
||||
border-color: var(--c-primary);
|
||||
}
|
||||
|
||||
.xhs-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--c-primary);
|
||||
}
|
||||
|
||||
.font-size-group {
|
||||
.xhs-pagination {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: white;
|
||||
border: 1px solid var(--c-border);
|
||||
border-radius: 4px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.font-size-btn {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
color: #5f6368;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.font-size-btn:hover {
|
||||
background: #f1f3f4;
|
||||
}
|
||||
|
||||
.font-size-display {
|
||||
min-width: 24px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #202124;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.xhs-page-navigation {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 12px;
|
||||
background: white;
|
||||
border-bottom: 1px solid #e8eaed;
|
||||
}
|
||||
|
||||
.xhs-nav-btn {
|
||||
@@ -638,17 +665,6 @@ label:hover { color: var(--c-primary); }
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.xhs-bottom-toolbar {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
background: var(--grad-toolbar-bottom);
|
||||
border-top: 1px solid #e8eaed;
|
||||
box-shadow: 0 -2px 4px rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
.xhs-slice-btn {
|
||||
padding: 8px 20px;
|
||||
background: var(--grad-primary);
|
||||
|
||||
Reference in New Issue
Block a user