update at 2025-10-09 12:39:24
This commit is contained in:
douboer
349
styles.css
349
styles.css
@@ -2,26 +2,94 @@
|
||||
|
||||
/* =========================================================== */
|
||||
/* UI 样式 */
|
||||
/* 共用样式与去重 */
|
||||
/* =========================================================== */
|
||||
|
||||
/* 主题变量统一常用色值/阴影/渐变 */
|
||||
:root {
|
||||
--c-bg: #ffffff;
|
||||
--c-border: #dadce0;
|
||||
--c-text-muted: #5f6368;
|
||||
--c-primary: #1e88e5;
|
||||
--c-primary-dark: #1565c0;
|
||||
--c-purple: #667eea;
|
||||
--c-purple-dark: #764ba2;
|
||||
--c-blue-2: #42a5f5;
|
||||
|
||||
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
|
||||
--shadow-overlay: 0 2px 4px rgba(0,0,0,0.04);
|
||||
--shadow-primary-2: 0 2px 6px rgba(30, 136, 229, 0.3);
|
||||
--shadow-primary-4: 0 4px 8px rgba(30, 136, 229, 0.4);
|
||||
--shadow-purple-2: 0 2px 6px rgba(102, 126, 234, 0.3);
|
||||
--shadow-purple-4: 0 4px 8px rgba(102, 126, 234, 0.4);
|
||||
|
||||
--grad-primary: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
|
||||
--grad-purple: linear-gradient(135deg, var(--c-purple) 0%, var(--c-purple-dark) 100%);
|
||||
--grad-blue: linear-gradient(135deg, var(--c-blue-2) 0%, var(--c-primary) 100%);
|
||||
--grad-toolbar: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
|
||||
--grad-toolbar-bottom: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
|
||||
--grad-xhs-bg: linear-gradient(135deg, #f5f7fa 0%, #e8eaf6 100%);
|
||||
}
|
||||
|
||||
/* 通用按钮外观（不含背景与尺寸） */
|
||||
.copy-button,
|
||||
.refresh-button,
|
||||
.toolbar-button,
|
||||
.msg-ok-btn,
|
||||
.xhs-slice-btn {
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* 通用按钮 hover 的位移效果（各自保留独立阴影） */
|
||||
.copy-button:hover,
|
||||
.refresh-button:hover,
|
||||
.toolbar-button:hover,
|
||||
.msg-ok-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* 下拉选择的通用外观（各自保留尺寸差异） */
|
||||
.platform-select,
|
||||
.wechat-select,
|
||||
.style-select {
|
||||
border: 1px solid var(--c-border);
|
||||
border-radius: 6px;
|
||||
background: white;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
/* 平台与公众号选择的相同 hover/focus 效果（style-select 单独增强） */
|
||||
.platform-select:hover,
|
||||
.wechat-select:hover { border-color: var(--c-primary); }
|
||||
.platform-select:focus,
|
||||
.wechat-select:focus { outline: none; border-color: var(--c-primary); }
|
||||
.note-preview {
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-columns: 1fr;
|
||||
display: grid;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--c-bg);
|
||||
}
|
||||
|
||||
/* 预览内部平台容器需要可伸缩： */
|
||||
.wechat-preview-container, .xiaohongshu-preview-container {
|
||||
.wechat-preview-container:not([style*="display: none"]),
|
||||
.xiaohongshu-preview-container:not([style*="display: none"]) {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: grid !important;
|
||||
grid-template-rows: auto 1fr;
|
||||
min-height: 0; /* 允许内部滚动区域正确计算高度 */
|
||||
}
|
||||
|
||||
.render-div {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
-webkit-user-select: text;
|
||||
@@ -44,55 +112,43 @@
|
||||
|
||||
.preview-toolbar {
|
||||
position: relative;
|
||||
min-height: 100px;
|
||||
padding: 4px 0;
|
||||
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: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.04);
|
||||
background: var(--grad-toolbar);
|
||||
box-shadow: var(--shadow-overlay);
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
margin-right: 10px;
|
||||
padding: 6px 14px;
|
||||
background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%);
|
||||
background: var(--grad-primary);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 6px rgba(30, 136, 229, 0.3);
|
||||
box-shadow: var(--shadow-primary-2);
|
||||
}
|
||||
|
||||
.copy-button:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px rgba(30, 136, 229, 0.4);
|
||||
}
|
||||
.copy-button:hover { box-shadow: var(--shadow-primary-4); }
|
||||
|
||||
.refresh-button {
|
||||
margin-right: 10px;
|
||||
padding: 6px 14px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
background: var(--grad-purple);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
|
||||
box-shadow: var(--shadow-purple-2);
|
||||
}
|
||||
|
||||
.refresh-button:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
.refresh-button:hover { box-shadow: var(--shadow-purple-4); }
|
||||
|
||||
.upload-input {
|
||||
margin-left: 10px;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid #dadce0;
|
||||
border: 1px solid var(--c-border);
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
transition: all 0.2s ease;
|
||||
@@ -102,9 +158,10 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.upload-input:focus {
|
||||
.upload-input:focus,
|
||||
.style-select:focus {
|
||||
outline: none;
|
||||
border-color: #1e88e5;
|
||||
border-color: var(--c-primary);
|
||||
box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.1);
|
||||
}
|
||||
|
||||
@@ -114,26 +171,24 @@
|
||||
height: 16px;
|
||||
margin: 0 6px 0 0;
|
||||
cursor: pointer;
|
||||
accent-color: #1e88e5;
|
||||
accent-color: var(--c-primary);
|
||||
}
|
||||
|
||||
/* Label 标签样式 */
|
||||
label {
|
||||
font-size: 13px;
|
||||
color: #5f6368;
|
||||
color: var(--c-text-muted);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
label:hover {
|
||||
color: #1e88e5;
|
||||
}
|
||||
label:hover { color: var(--c-primary); }
|
||||
|
||||
.style-label {
|
||||
margin-right: 10px;
|
||||
font-size: 13px;
|
||||
color: #5f6368;
|
||||
color: var(--c-text-muted);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -142,25 +197,14 @@ label:hover {
|
||||
margin-right: 10px;
|
||||
width: 120px;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid #dadce0;
|
||||
border-radius: 6px;
|
||||
background: white;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.style-select:hover {
|
||||
border-color: #1e88e5;
|
||||
border-color: var(--c-primary);
|
||||
box-shadow: 0 2px 6px rgba(30, 136, 229, 0.2);
|
||||
}
|
||||
|
||||
.style-select:focus {
|
||||
outline: none;
|
||||
border-color: #1e88e5;
|
||||
box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.1);
|
||||
}
|
||||
/* focus 规则见与 .upload-input:focus 的组合声明 */
|
||||
|
||||
.msg-view {
|
||||
position: absolute;
|
||||
@@ -186,22 +230,14 @@ label:hover {
|
||||
.msg-ok-btn {
|
||||
padding: 10px 24px;
|
||||
margin: 0 8px;
|
||||
background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%);
|
||||
background: var(--grad-primary);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 6px rgba(30, 136, 229, 0.3);
|
||||
box-shadow: var(--shadow-primary-2);
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.msg-ok-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px rgba(30, 136, 229, 0.4);
|
||||
}
|
||||
.msg-ok-btn:hover { box-shadow: var(--shadow-primary-4); }
|
||||
|
||||
.msg-ok-btn:active {
|
||||
transform: translateY(0);
|
||||
@@ -214,7 +250,9 @@ label:hover {
|
||||
border-radius: 10px;
|
||||
}
|
||||
.note-mpcard-content {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
align-items: center;
|
||||
}
|
||||
.note-mpcard-headimg {
|
||||
border: none !important;
|
||||
@@ -246,11 +284,10 @@ label:hover {
|
||||
}
|
||||
|
||||
.loading-wrapper {
|
||||
display: flex;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
@@ -276,23 +313,38 @@ label:hover {
|
||||
/* =========================================================== */
|
||||
|
||||
.toolbar-line {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 8px 12px;
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
margin: 8px 10px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.toolbar-line.flex-wrap {
|
||||
flex-wrap: 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 #1e88e5;
|
||||
border-left: 4px solid var(--c-primary);
|
||||
}
|
||||
|
||||
/* 平台选择容器：单层 Grid 排列 */
|
||||
.platform-chooser-container.platform-chooser-grid {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 8px 12px;
|
||||
background: white; /* 被 .platform-selector-line 的背景覆写 */
|
||||
border-radius: 6px;
|
||||
margin: 8px 10px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
/* =========================================================== */
|
||||
@@ -301,81 +353,39 @@ label:hover {
|
||||
|
||||
.platform-select {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #dadce0;
|
||||
border-radius: 6px;
|
||||
background: white;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
min-width: 150px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.platform-select:hover {
|
||||
border-color: #1e88e5;
|
||||
}
|
||||
|
||||
.platform-select:focus {
|
||||
outline: none;
|
||||
border-color: #1e88e5;
|
||||
}
|
||||
|
||||
/* =========================================================== */
|
||||
/* 微信公众号选择器样式 */
|
||||
/* =========================================================== */
|
||||
|
||||
.wechat-select {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #dadce0;
|
||||
border-radius: 6px;
|
||||
background: white;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.wechat-select:hover {
|
||||
border-color: #1e88e5;
|
||||
}
|
||||
|
||||
.wechat-select:focus {
|
||||
outline: none;
|
||||
border-color: #1e88e5;
|
||||
}
|
||||
|
||||
/* =========================================================== */
|
||||
/* 按钮样式 */
|
||||
/* =========================================================== */
|
||||
|
||||
.toolbar-button {
|
||||
padding: 6px 14px;
|
||||
background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%);
|
||||
background: var(--grad-primary);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 6px rgba(30, 136, 229, 0.3);
|
||||
box-shadow: var(--shadow-primary-2);
|
||||
}
|
||||
|
||||
.toolbar-button:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px rgba(30, 136, 229, 0.4);
|
||||
}
|
||||
.toolbar-button:hover { box-shadow: var(--shadow-primary-4); }
|
||||
|
||||
.toolbar-button.purple-gradient {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
|
||||
background: var(--grad-purple);
|
||||
box-shadow: var(--shadow-purple-2);
|
||||
}
|
||||
|
||||
.toolbar-button.purple-gradient:hover {
|
||||
box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
.toolbar-button.purple-gradient:hover { box-shadow: var(--shadow-purple-4); }
|
||||
|
||||
/* =========================================================== */
|
||||
/* 分隔线样式 */
|
||||
@@ -384,7 +394,7 @@ label:hover {
|
||||
.toolbar-separator {
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
background: #dadce0;
|
||||
background: var(--c-border);
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
@@ -398,8 +408,10 @@ label:hover {
|
||||
}
|
||||
|
||||
.doc-modal-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: grid;
|
||||
grid-template-rows: auto auto 1fr;
|
||||
row-gap: 8px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.doc-modal-title {
|
||||
@@ -413,7 +425,7 @@ label:hover {
|
||||
}
|
||||
|
||||
.doc-modal-iframe {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* =========================================================== */
|
||||
@@ -421,9 +433,10 @@ label:hover {
|
||||
/* =========================================================== */
|
||||
|
||||
.setting-help-section {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
align-items: center;
|
||||
column-gap: 10px;
|
||||
}
|
||||
|
||||
.setting-help-title {
|
||||
@@ -449,40 +462,36 @@ label:hover {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.xhs-preview-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.xhs-preview-container:not([style*="display: none"]) {
|
||||
display: grid !important;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #e8eaf6 100%);
|
||||
background: var(--grad-xhs-bg);
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.xhs-page-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
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; /* 允许 flex 子项正确收缩和滚动 */
|
||||
min-height: 0; /* 允许子项正确收缩和滚动 */
|
||||
}
|
||||
|
||||
/* 小红书单页包裹器：为缩放后的页面预留正确的布局空间 */
|
||||
.xhs-page-wrapper {
|
||||
/* 显示尺寸（缩放后）：540 × 720 */
|
||||
width: 540px;
|
||||
height: 720px;
|
||||
margin: 0px auto;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 小红书单页样式：实际尺寸 1080×1440，通过 scale 缩放到 540×720 */
|
||||
.xhs-page {
|
||||
/* 实际尺寸由 renderPage 设置（1080×1440） */
|
||||
/* 实际尺寸与缩放由代码在运行时设置 */
|
||||
transform-origin: top left;
|
||||
transform: scale(0.5); /* 540/1080 = 0.5 */
|
||||
background: white;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
border-radius: 8px;
|
||||
@@ -494,26 +503,26 @@ label:hover {
|
||||
}
|
||||
|
||||
.xhs-top-toolbar {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, max-content));
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 8px 12px;
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
|
||||
background: var(--grad-toolbar);
|
||||
border-bottom: 1px solid #e8eaed;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.04);
|
||||
flex-wrap: wrap;
|
||||
box-shadow: var(--shadow-overlay);
|
||||
}
|
||||
|
||||
.toolbar-label {
|
||||
font-size: 11px;
|
||||
color: #5f6368;
|
||||
color: var(--c-text-muted);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.xhs-select {
|
||||
padding: 4px 8px;
|
||||
border: 1px solid #dadce0;
|
||||
border: 1px solid var(--c-border);
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
font-size: 11px;
|
||||
@@ -522,20 +531,21 @@ label:hover {
|
||||
}
|
||||
|
||||
.xhs-select:hover {
|
||||
border-color: #1e88e5;
|
||||
border-color: var(--c-primary);
|
||||
}
|
||||
|
||||
.xhs-select:focus {
|
||||
outline: none;
|
||||
border-color: #1e88e5;
|
||||
border-color: var(--c-primary);
|
||||
}
|
||||
|
||||
.font-size-group {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: white;
|
||||
border: 1px solid #dadce0;
|
||||
border: 1px solid var(--c-border);
|
||||
border-radius: 4px;
|
||||
padding: 2px;
|
||||
}
|
||||
@@ -565,7 +575,8 @@ label:hover {
|
||||
}
|
||||
|
||||
.xhs-page-navigation {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
@@ -577,20 +588,20 @@ label:hover {
|
||||
.xhs-nav-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: 1px solid #dadce0;
|
||||
border: 1px solid var(--c-border);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
background: white;
|
||||
color: #5f6368;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.xhs-nav-btn:hover {
|
||||
background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%);
|
||||
background: var(--grad-primary);
|
||||
color: white;
|
||||
border-color: #1e88e5;
|
||||
border-color: var(--c-primary);
|
||||
}
|
||||
|
||||
.xhs-page-number {
|
||||
@@ -602,26 +613,22 @@ label:hover {
|
||||
}
|
||||
|
||||
.xhs-bottom-toolbar {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
|
||||
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: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%);
|
||||
background: var(--grad-primary);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 6px rgba(30, 136, 229, 0.3);
|
||||
box-shadow: var(--shadow-primary-2);
|
||||
}
|
||||
|
||||
.xhs-slice-btn:hover {
|
||||
@@ -630,7 +637,7 @@ label:hover {
|
||||
}
|
||||
|
||||
.xhs-slice-btn.secondary {
|
||||
background: linear-gradient(135deg, #42a5f5 0%, #1e88e5 100%);
|
||||
background: var(--grad-blue);
|
||||
box-shadow: 0 2px 6px rgba(66, 165, 245, 0.3);
|
||||
}
|
||||
|
||||
@@ -660,7 +667,8 @@ label:hover {
|
||||
}
|
||||
|
||||
.xhs-code-container {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
@@ -704,7 +712,8 @@ label:hover {
|
||||
}
|
||||
|
||||
.xhs-button-container {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
margin-top: 20px;
|
||||
|
||||
Reference in New Issue
Block a user