/* ========== 主题色变量：亮/暗两套 ========== */ :root { --nav-bg: #3d85c6; /* 导航栏（白天） */ --page-bg: #ffffff; /* 页面背景（白天） */ --text: #111827; /* 文字（白天） */ --muted: #6b7280; /* 次级文字（白天） */ --card-bg: #ffffff; /* 卡片背景（白天） */ --card-bd: #e5e7eb; /* 卡片边框（白天） */ --accent: #3498db; /* 主色按钮 */ --accent-2: #2ecc71; /* 成功按钮 */ --chip-bg: #f3f4f6; /* 轻灰背景 */ } /* @media (prefers-color-scheme: dark) { :root { --nav-bg: #1f3144; --page-bg: #0b0f14; --text: #e5e7eb; --muted: #94a3b8; --card-bg: #0f1419; --card-bd: #22303c; --chip-bg: #111820; } } */ /* 你的主题可能会在 上加 data-user-color-scheme="dark" 开关，下面再覆盖一次以确保一致 */ html[data-user-color-scheme='dark'] { --nav-bg: #1f3144; --page-bg: #0b0f14; --text: #e5e7eb; --muted: #94a3b8; --card-bg: #0f1419; --card-bd: #22303c; --chip-bg: #111820; } /* ========== 导航栏配色与“黑白页间隔”（亮/暗强对比） ========== */ .navbar { background-color: var(--nav-bg) !important; transition: background-color 0.3s ease; } /* ========== 页面容器与留白（与导航栏有明显垂直间距） ========== */ .color-lab-wrap { max-width: 1100px; margin: 50px auto 80px; /* 顶部 100px 间距，底部 80px 透气 */ padding: 20px; /* background: var(--page-bg); */ color: var(--text); font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; } body { padding-top: 40px; /* 假设导航栏高度 + 内边距 ≈ 80px */ } /* ========== 每一排统一行高/对齐 ========== */ .row { display: flex; align-items: center; gap: 14px; margin: 28px 0; /* 按你的要求：上下都有间隔 */ } /* .row label { width: 90px; font-weight: 600; color: var(--text); } */ .row label { min-width: 50px; /* 最小 92px */ white-space: nowrap; /* 不换行 */ } .row-huishao { text-align: center; } .row .field { flex: 1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* ========== 通用输入控件 ========== */ input[type='color'], input[type='text'], input[type='number'], .search-oval { height: 36px; padding: 0 12px; border: 1px solid var(--card-bd); border-radius: 10px; background: var(--card-bg); color: var(--text); outline: none; } input[type='color'] { padding: 0; width: 60px; min-width: 60px; } input[type='number'] { width: 120px; } .search-oval { width: 100%; border-radius: 999px; } /* ========== 拖拽上传框（第三排） ========== */ .drop-zone { flex: 1; padding: 28px 16px; border: 2px dashed var(--card-bd); border-radius: 12px; background: var(--chip-bg); text-align: center; color: var(--muted); cursor: pointer; transition: 0.2s; } .drop-zone.dragover { background: rgba(52, 152, 219, 0.1); border-color: var(--accent); color: var(--accent); } #dropZone { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; /* 让文字和文件名上下排列 */ gap: 8px; } #fileName { color: var(--text); font-weight: 600; } /* ========== 第四（1）排：图片预览（默认隐藏） ========== */ #imgPreview { display: none; width: 100%; max-height: 420px; object-fit: contain; border: 1px solid var(--card-bd); border-radius: 12px; /* margin: 6px 0 12px 120px; */ margin: 6px auto 12px auto; /* 上右下左 → auto 水平居中 */ /* 和左侧 label 对齐（120px） */ } .clear-btn { display: none; /* 初始隐藏 */ background: #ef4444; color: #fff; border: none; border-radius: 8px; padding: 8px 14px; cursor: pointer; margin: 12px auto; } .row.center { justify-content: center; /* 水平居中 */ } /* ========== 第四排：颜色代码框（默认隐藏） ========== */ #colorBox { display: none; margin: auto 18px; margin-left: 120px; /* 与左列文字对齐 */ padding: 12px; border: 1px solid var(--card-bd); border-radius: 12px; background: var(--card-bg); } .color-info { display: flex; align-items: center; gap: 12px; } #colorSample { width: 42px; height: 42px; border-radius: 8px; border: 1px solid var(--card-bd); } .copy-btn, .apply-btn { height: 32px; padding: 0 12px; border: none; border-radius: 8px; color: #fff; cursor: pointer; } .copy-btn { background: #374151; } .copy-btn:hover { background: #111827; } .apply-btn { background: #6d28d9; } .apply-btn:hover { background: #5b21b6; } /* ========== 单选按钮组（第五排） ========== */ .radio-group { display: flex; gap: 18px; } .radio-group label { width: auto; font-weight: normal; } /* ========== 第八排：操作按钮 + 下载链接 ========== */ .btn { height: 36px; padding: 0 14px; border: none; border-radius: 10px; cursor: pointer; color: #fff; font-weight: 600; } .btn-primary { background: var(--accent); } .btn-primary:hover { filter: brightness(0.95); } .btn-success { background: var(--accent-2); text-decoration: none; display: inline-flex; align-items: center; } .btn-success:hover { filter: brightness(0.95); } /* ========== 第九排：小预览画布（仅示意，不是原尺寸） ========== */ .preview-box { margin: 22px 0 40px; display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中（保持不变） */ gap: 12px; } #previewCanvas { border: 1px solid var(--card-bd); border-radius: 12px; width: 320px; /* 小预览宽 */ height: 200px; /* 小预览高（随比例变化并不关键） */ } /* ========== 第十排：配色大全标题与搜索 ========== */ h2.palette-title { margin: 32px 0 12px; font-size: 22px; } /* ========== 颜色网格：自动填充 ========== */ .palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-top: 14px; } .swatch { position: relative; height: 74px; border-radius: 12px; color: #fff; padding: 10px; display: flex; justify-content: space-between; align-items: flex-end; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* 不换行，超出显示省略号 */ } .swatch .ops { position: absolute; right: 8px; top: 8px; display: flex; gap: 6px; } .small-btn { height: 26px; padding: 0 8px; border: none; border-radius: 6px; color: #fff; background: rgba(0, 0, 0, 0.35); cursor: pointer; } .small-btn:hover { background: rgba(0, 0, 0, 0.55); } /* ========== 响应式：小屏时每排仍上下有间距并对齐 ========== */ @media (max-width: 720px) { .row { align-items: flex-start; } .row label { width: 92px; } #imgPreview, #colorBox, .clear-btn { margin-left: 92px; } } /* 固定蓝色导航栏（覆盖全局透明/渐变逻辑） */ #kopf-bar { background: linear-gradient(90deg, #3D85C6 0%, #52A2E6 100%) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.25); transition: none !important; } /* 暗色模式下使用深蓝渐变 */ html[data-user-color-scheme='dark'] #kopf-bar { background: linear-gradient(90deg, #1f3144 0%, #2b82cf 100%) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.5); } /* 确保文字/图标颜色在白底页也清晰 */ #kopf-bar .kopf-btn, #kopf-bar .kopf-icon { color: #ffffff !important; fill: #ffffff !important; }