/* ============================================================ * Sun-Panel 风格主题 —— 克莱因蓝渐变（高端深蓝 + 香槟金点缀） * 通过 启用（右上角"切换风格"按钮） * 原风格（glass）保持明亮暖色，与本主题形成明暗对比 * ============================================================ */ /* ---------- 配色变量：克莱因蓝 + 香槟金 ---------- */ html[data-theme="sun"] { --bg-1: #002fa7; /* 克莱因蓝 */ --bg-2: #001a5e; /* 深蓝 */ --accent: #e8c36a; /* 香槟金 */ --accent-2: #f5d98b; --card-bg: rgba(255, 255, 255, .08); --card-border: rgba(255, 255, 255, .14); --text: #eef2ff; --text-dim: #a5b4fc; --radius: 16px; } /* ---------- 背景：克莱因蓝多色渐变 + 靛蓝/紫/青光晕（层次丰富不单调） ---------- */ html[data-theme="sun"] body { background: radial-gradient(1100px 560px at 12% -8%, rgba(79, 70, 229, .55), transparent 62%), radial-gradient(900px 500px at 88% -4%, rgba(168, 85, 247, .38), transparent 62%), radial-gradient(1100px 620px at 50% 118%, rgba(14, 165, 233, .30), transparent 62%), linear-gradient(150deg, #2440c8 0%, #0033b3 32%, #002fa7 58%, #19195e 100%); background-attachment: fixed; } /* 配置了背景图（SITE_BG）时：图片 + 深蓝遮罩，保证卡片可读 */ html[data-theme="sun"].has-bg body { background-image: radial-gradient(1100px 560px at 12% -8%, rgba(79, 70, 229, .35), transparent 62%), linear-gradient(rgba(2, 10, 40, .72), rgba(2, 10, 40, .80)), var(--site-bg); background-size: auto, auto, cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; } /* 彩色光斑：靛蓝 / 紫 / 青，增加背景层次 */ html[data-theme="sun"] .bg-decor { display: block; } html[data-theme="sun"] .blob-1 { background: #4f46e5; opacity: .5; } html[data-theme="sun"] .blob-2 { background: #7c3aed; opacity: .42; } html[data-theme="sun"] .blob-3 { background: #0ea5e9; opacity: .38; } /* ---------- 顶部标题 / 时钟 ---------- */ html[data-theme="sun"] .brand-text h1 { color: #ffffff; text-shadow: 0 2px 20px rgba(64, 120, 255, .45); } html[data-theme="sun"] .brand-text .clock { color: #a5b4fc; } /* ---------- 搜索框 ---------- */ html[data-theme="sun"] #searchInput { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; } html[data-theme="sun"] #searchInput::placeholder { color: #93a4e8; } html[data-theme="sun"] #searchInput:focus { border-color: rgba(232, 195, 106, .65); box-shadow: 0 0 0 3px rgba(232, 195, 106, .18); } /* ---------- 分类胶囊 ---------- */ html[data-theme="sun"] .pill { background: linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04)); border-color: rgba(255, 255, 255, .14); } html[data-theme="sun"] .pill:hover { border-color: rgba(232, 195, 106, .55); color: var(--text); } html[data-theme="sun"] .pill.active { background: linear-gradient(135deg, #d4af37, #f5d98b); color: #1a1a2e; border-color: transparent; font-weight: 600; box-shadow: 0 6px 18px rgba(212, 175, 55, .30); } /* ---------- 分类分区标题 ---------- */ html[data-theme="sun"] .cat-head { margin-bottom: 18px; } html[data-theme="sun"] .cat-name { font-weight: 600; } html[data-theme="sun"] .cat-count { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); } /* ---------- 卡片：深蓝玻璃渐变 + 白色装饰圆 + 悬停金光 ---------- */ html[data-theme="sun"] .card { background: linear-gradient(140deg, rgba(45, 74, 190, .55), rgba(12, 38, 110, .45)); border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; overflow: hidden; backdrop-filter: blur(8px); box-shadow: 0 6px 20px rgba(0, 0, 0, .25); } /* 右上角半透明白色装饰圆 */ html[data-theme="sun"] .card::before { content: ""; position: absolute; width: 90px; height: 90px; border-radius: 50%; right: -30px; top: -34px; background: rgba(255, 255, 255, .08); box-shadow: -8px 21px rgba(255, 255, 255, .05); z-index: 0; pointer-events: none; } /* 左下角描边装饰圆 */ html[data-theme="sun"] .card::after { content: ""; position: absolute; width: 54px; height: 54px; border: 3px solid rgba(255, 255, 255, .10); border-radius: 50%; bottom: -16px; left: 44px; box-shadow: -16px -38px rgba(255, 255, 255, .06); z-index: 0; pointer-events: none; } /* 内容盖在装饰圆之上 */ html[data-theme="sun"] .card > * { position: relative; z-index: 1; } html[data-theme="sun"] .card:hover { transform: translateY(-3px); border-color: rgba(232, 195, 106, .45); box-shadow: 0 12px 30px rgba(0, 0, 0, .35), 0 0 20px rgba(232, 195, 106, .15); } /* ---------- 卡片图标块 ---------- */ html[data-theme="sun"] .card-icon { border-radius: 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); } /* ---------- 主色按钮：香槟金 ---------- */ html[data-theme="sun"] .btn.primary { background: linear-gradient(135deg, #d4af37, #f5d98b); color: #1a1a2e; } /* ---------- 弹窗 / Toast / 表单（深蓝） ---------- */ html[data-theme="sun"] .modal { background: #0b1e56; border-color: rgba(255, 255, 255, .14); } html[data-theme="sun"] .modal-close { background: rgba(255, 255, 255, .10); color: #a5b4fc; } html[data-theme="sun"] .modal-close:hover { background: rgba(255, 255, 255, .18); color: #ffffff; } html[data-theme="sun"] #toast { background: #0b1e56; color: #eef2ff; border-color: rgba(255, 255, 255, .14); } html[data-theme="sun"] .cat-mgr-row { background: rgba(255, 255, 255, .06); } html[data-theme="sun"] .form-row input, html[data-theme="sun"] .form-row textarea, html[data-theme="sun"] .form-row select { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #eef2ff; } html[data-theme="sun"] .cat-add-row input { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #eef2ff; } /* 「🔒 私密」开关在深色主题下：未开启用半透明白底，开启用香槟金底深色字 */ html[data-theme="sun"] .cat-add-row .priv-toggle { border-color: rgba(255, 255, 255, .35); color: #c7d2fe; } html[data-theme="sun"] .cat-add-row .priv-toggle:hover { border-color: #e8c36a; color: #e8c36a; } html[data-theme="sun"] .cat-add-row .priv-toggle.on { background: #e8c36a; color: #3a2f0f; box-shadow: 0 4px 12px rgba(232, 195, 106, .35); } /* ---------- 生日卡翻页控件：深色主题适配（浅色半透明底 + 香槟金高亮） ---------- */ html[data-theme="sun"] .birthday-card .bc-btn { background: rgba(255, 255, 255, .14); color: #c7d2fe; } html[data-theme="sun"] .birthday-card .bc-btn:hover { background: rgba(255, 255, 255, .24); color: #ffffff; } html[data-theme="sun"] .birthday-card .bc-dot { background: rgba(255, 255, 255, .28); } html[data-theme="sun"] .birthday-card .bc-dot.active { background: var(--accent, #e8c36a); } html[data-theme="sun"] .birthday-card .bc-toggle { background: rgba(255, 255, 255, .14); color: #c7d2fe; } html[data-theme="sun"] .birthday-card .bc-toggle:hover { background: rgba(255, 255, 255, .24); color: #ffffff; } /* ---------- 搜索框引擎按钮 / 提示行：深色主题适配 ---------- */ html[data-theme="sun"] #searchEng { background: rgba(255, 255, 255, .16); color: var(--accent, #e8c36a); } html[data-theme="sun"] #searchEng:hover { background: rgba(255, 255, 255, .26); }