/* ============================================================================ Juss UI — 自研静态 CSS(无外部 CDN / 无运行时 JIT) 文件结构: 1) 设计 token :root 变量(slate/sky/red/emerald 等色板) 2) 原子工具层 display / flex / spacing / typography / 状态前缀 3) 暗色原子层 .dark .dark\:xxx 4) 复合伪类工具层 peer / after / read-only(toggle 开关用) 5) 语义令牌层 :root + .dark 切 --surface-* / --text-* / --accent 6) 语义组件层 .card / .btn-* / .alert-* / .badge-* / .data-table / .input-* / .toggle / .navtop / .tab-item / .alt-login 暗色模式:.dark 挂在 (_dark_store.html 提供防闪白同步脚本), 语义组件类只引用 var(--xx),令牌一处切换,组件全站联动。 ============================================================================ */ /* ────────── 1. 设计 token(颜色/间距/字号 — slate/sky/gray 等常用色板) ────────── */ :root { --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1; --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155; --slate-800:#1e293b; --slate-900:#0f172a; --gray-50:#f9fafb; --gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-300:#d1d5db; --gray-400:#9ca3af; --gray-500:#6b7280; --gray-600:#4b5563; --gray-700:#374151; --gray-800:#1f2937; --gray-900:#111827; --sky-50:#f0f9ff; --sky-100:#e0f2fe; --sky-300:#7dd3fc; --sky-400:#38bdf8; --sky-500:#0ea5e9; --sky-600:#0284c7; --sky-700:#0369a1; --sky-900:#0c4a6e; --emerald-50:#ecfdf5; --emerald-100:#d1fae5; --emerald-200:#a7f3d0; --emerald-300:#6ee7b7; --emerald-400:#34d399; --emerald-500:#10b981; --emerald-600:#059669; --emerald-700:#047857; --emerald-900:#064e3b; --red-50:#fef2f2; --red-100:#fee2e2; --red-200:#fecaca; --red-300:#fca5a5; --red-400:#f87171; --red-500:#ef4444; --red-600:#dc2626; --red-700:#b91c1c; --red-800:#991b1b; --red-900:#7f1d1d; /* rose 偏粉调("温柔危险"),与 red("硬核危险")视觉一深一浅区分 */ --rose-300:#fda4af; --rose-400:#fb7185; --rose-600:#e11d48; --rose-700:#be123c; --blue-50:#eff6ff; --blue-100:#dbeafe; --blue-200:#bfdbfe; --blue-300:#93c5fd; --blue-700:#1d4ed8; --blue-800:#1e40af; --blue-900:#1e3a8a; --amber-50:#fffbeb; --amber-100:#fef3c7; --amber-200:#fde68a; --amber-300:#fcd34d; --amber-600:#d97706; --amber-700:#b45309; --amber-900:#78350f; --green-50:#f0fdf4; --green-100:#dcfce7; --green-200:#bbf7d0; --green-300:#86efac; --green-500:#22c55e; --green-600:#16a34a; --green-700:#15803d; --green-900:#14532d; --yellow-300:#fde047; --yellow-500:#eab308; --yellow-600:#ca8a04; --yellow-700:#a16207; --orange-500:#f97316; --orange-600:#ea580c; --white:#fff; --black:#000; } /* ────────── 2. 全局基础(scrollbar-gutter 防居中容器抖动 + 字体栈) ────────── */ *, *::before, *::after { box-sizing: border-box; border:0 solid var(--slate-200); } html { scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin:0; line-height:1.5; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif; } hr { border-top-width:1px; } button, input, select, textarea { font-family:inherit; font-size:100%; color:inherit; margin:0; padding:0; } button { background:transparent; border:0; cursor:pointer; } a { color:inherit; text-decoration:inherit; } img, svg, video, canvas { display:block; max-width:100%; } [x-cloak] { display:none !important; } .juss-honeypot { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ────────── 3. 布局:display / position / inset / z ────────── */ .block { display:block; } .inline { display:inline; } .inline-block { display:inline-block; } .flex { display:flex; } .inline-flex { display:inline-flex; } .grid { display:grid; } .relative { position:relative; } .absolute { position:absolute; } .fixed { position:fixed; } .sticky { position:sticky; } .inset-0 { top:0; right:0; bottom:0; left:0; } .top-0 { top:0; } .top-4 { top:1rem; } .right-0 { right:0; } .right-4 { right:1rem; } .bottom-0 { bottom:0; } .left-0 { left:0; } .z-10 { z-index:10; } .z-40 { z-index:40; } .z-50 { z-index:50; } .-z-10 { z-index:-10; } .overflow-hidden { overflow:hidden; } .overflow-x-auto { overflow-x:auto; } .overflow-y-auto { overflow-y:auto; } /* ────────── 4. flex / grid ────────── */ .flex-1 { flex:1 1 0%; } .flex-col { flex-direction:column; } .flex-row-reverse { flex-direction:row-reverse; } .flex-wrap { flex-wrap:wrap; } .flex-grow { flex-grow:1; } .shrink-0 { flex-shrink:0; } .self-start { align-self:flex-start; } .items-start { align-items:flex-start; } .items-center { align-items:center; } .items-end { align-items:flex-end; } .justify-center { justify-content:center; } .justify-between { justify-content:space-between; } .justify-end { justify-content:flex-end; } .gap-1 { gap:.25rem; } .gap-1\.5 { gap:.375rem; } .gap-2 { gap:.5rem; } .gap-3 { gap:.75rem; } .gap-4 { gap:1rem; } .gap-5 { gap:1.25rem; } .gap-6 { gap:1.5rem; } .gap-x-6 { column-gap:1.5rem; } .gap-y-4 { row-gap:1rem; } .grid-cols-1 { grid-template-columns:repeat(1,minmax(0,1fr)); } .grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); } .grid-cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); } .space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left:1rem; } .space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top:.25rem; } .space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top:.5rem; } .space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top:.75rem; } .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top:1rem; } .space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top:1.25rem; } .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top:1.5rem; } .divide-y > :not([hidden]) ~ :not([hidden]) { border-top-width:1px; } .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color:var(--slate-200); } .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color:var(--gray-100); } /* ────────── 5. 间距:padding / margin ────────── */ .p-0 { padding:0; } .p-2 { padding:.5rem; } .p-3 { padding:.75rem; } .p-4 { padding:1rem; } .p-5 { padding:1.25rem; } .p-6 { padding:1.5rem; } .px-1 { padding-left:.25rem; padding-right:.25rem; } .px-2 { padding-left:.5rem; padding-right:.5rem; } .px-2\.5 { padding-left:.625rem; padding-right:.625rem; } .px-3 { padding-left:.75rem; padding-right:.75rem; } .px-4 { padding-left:1rem; padding-right:1rem; } .px-5 { padding-left:1.25rem; padding-right:1.25rem; } .px-6 { padding-left:1.5rem; padding-right:1.5rem; } .px-8 { padding-left:2rem; padding-right:2rem; } .py-0\.5 { padding-top:.125rem; padding-bottom:.125rem; } .py-1 { padding-top:.25rem; padding-bottom:.25rem; } .py-1\.5 { padding-top:.375rem; padding-bottom:.375rem; } .py-2 { padding-top:.5rem; padding-bottom:.5rem; } .py-2\.5 { padding-top:.625rem; padding-bottom:.625rem; } .py-3 { padding-top:.75rem; padding-bottom:.75rem; } .py-4 { padding-top:1rem; padding-bottom:1rem; } .py-6 { padding-top:1.5rem; padding-bottom:1.5rem; } .py-8 { padding-top:2rem; padding-bottom:2rem; } .py-10 { padding-top:2.5rem; padding-bottom:2.5rem; } .py-12 { padding-top:3rem; padding-bottom:3rem; } .py-16 { padding-top:4rem; padding-bottom:4rem; } .py-24 { padding-top:6rem; padding-bottom:6rem; } .pt-1 { padding-top:.25rem; } .pb-1\.5 { padding-bottom:.375rem; } .mx-auto { margin-left:auto; margin-right:auto; } .mx-3 { margin-left:.75rem; margin-right:.75rem; } .-mx-6 { margin-left:-1.5rem; margin-right:-1.5rem; } .my-2 { margin-top:.5rem; margin-bottom:.5rem; } .my-4 { margin-top:1rem; margin-bottom:1rem; } .mt-0\.5 { margin-top:.125rem; } .mt-1 { margin-top:.25rem; } .mt-2 { margin-top:.5rem; } .mt-3 { margin-top:.75rem; } .mt-4 { margin-top:1rem; } .mt-5 { margin-top:1.25rem; } .mt-6 { margin-top:1.5rem; } .mt-7 { margin-top:1.75rem; } .mt-8 { margin-top:2rem; } .-mt-2 { margin-top:-.5rem; } .mb-1 { margin-bottom:.25rem; } .mb-1\.5 { margin-bottom:.375rem; } .mb-2 { margin-bottom:.5rem; } .mb-3 { margin-bottom:.75rem; } .mb-4 { margin-bottom:1rem; } .mb-5 { margin-bottom:1.25rem; } .mb-6 { margin-bottom:1.5rem; } .mb-8 { margin-bottom:2rem; } .mb-10 { margin-bottom:2.5rem; } .ml-1 { margin-left:.25rem; } .ml-1\.5 { margin-left:.375rem; } .ml-6 { margin-left:1.5rem; } .ml-9 { margin-left:2.25rem; } .ml-auto { margin-left:auto; } .mr-1 { margin-right:.25rem; } .mr-8 { margin-right:2rem; } .first\:mt-0:first-child { margin-top:0; } /* ────────── 6. 尺寸:width / height / min / max ────────── */ .w-2 { width:.5rem; } .w-4 { width:1rem; } .w-5 { width:1.25rem; } .w-7 { width:1.75rem; } .w-8 { width:2rem; } .w-9 { width:2.25rem; } .w-10 { width:2.5rem; } .w-16 { width:4rem; } .w-28 { width:7rem; } .w-36 { width:9rem; } .w-44 { width:11rem; } .w-60 { width:15rem; } .w-64 { width:16rem; } .w-72 { width:18rem; } .w-full { width:100%; } .h-2 { height:.5rem; } .h-4 { height:1rem; } .h-5 { height:1.25rem; } .h-7 { height:1.75rem; } .h-8 { height:2rem; } .h-10 { height:2.5rem; } .h-36 { height:9rem; } .h-44 { height:11rem; } .h-64 { height:16rem; } .h-96 { height:24rem; } .h-full { height:100%; } .h-screen { height:100vh; } .min-h-screen { min-height:100vh; } .min-w-0 { min-width:0; } .max-w-xs { max-width:20rem; } .max-w-md { max-width:28rem; } .max-w-2xl { max-width:42rem; } .max-w-3xl { max-width:48rem; } .max-w-5xl { max-width:64rem; } /* ────────── 7. 字体:size / weight / leading / tracking / align / color ────────── */ .text-xs { font-size:.75rem; line-height:1rem; } .text-sm { font-size:.875rem; line-height:1.25rem; } .text-base { font-size:1rem; line-height:1.5rem; } .text-lg { font-size:1.125rem; line-height:1.75rem; } .text-xl { font-size:1.25rem; line-height:1.75rem; } .text-2xl { font-size:1.5rem; line-height:2rem; } .text-3xl { font-size:1.875rem; line-height:2.25rem; } .text-4xl { font-size:2.25rem; line-height:2.5rem; } .text-5xl { font-size:3rem; line-height:1; } .text-6xl { font-size:3.75rem; line-height:1; } .font-medium { font-weight:500; } .font-semibold { font-weight:600; } .font-bold { font-weight:700; } .font-mono { font-family:ui-monospace,SFMono-Regular,Menlo,"Cascadia Code",Consolas,monospace; } .leading-none { line-height:1; } .leading-snug { line-height:1.375; } .leading-relaxed { line-height:1.625; } .tracking-tight { letter-spacing:-.025em; } .tracking-wide { letter-spacing:.025em; } .tracking-wider { letter-spacing:.05em; } .tracking-widest { letter-spacing:.1em; } .text-left { text-align:left; } .text-center { text-align:center; } .text-right { text-align:right; } .uppercase { text-transform:uppercase; } .truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .whitespace-nowrap { white-space:nowrap; } .whitespace-pre-wrap { white-space:pre-wrap; } .tabular-nums { font-variant-numeric:tabular-nums; } .align-middle { vertical-align:middle; } .text-white { color:var(--white); } .text-slate-200 { color:var(--slate-200); } .text-slate-300 { color:var(--slate-300); } .text-slate-400 { color:var(--slate-400); } .text-slate-500 { color:var(--slate-500); } .text-slate-600 { color:var(--slate-600); } .text-slate-700 { color:var(--slate-700); } .text-slate-800 { color:var(--slate-800); } .text-slate-900 { color:var(--slate-900); } .text-gray-300 { color:var(--gray-300); } .text-gray-400 { color:var(--gray-400); } .text-gray-500 { color:var(--gray-500); } .text-gray-600 { color:var(--gray-600); } .text-gray-700 { color:var(--gray-700); } .text-gray-800 { color:var(--gray-800); } .text-sky-500 { color:var(--sky-500); } .text-sky-600 { color:var(--sky-600); } .text-sky-700 { color:var(--sky-700); } .text-emerald-500 { color:var(--emerald-500); } .text-emerald-600 { color:var(--emerald-600); } .text-emerald-700 { color:var(--emerald-700); } .text-red-500 { color:var(--red-500); } .text-red-600 { color:var(--red-600); } .text-red-700 { color:var(--red-700); } .text-rose-600 { color:var(--rose-600); } .text-rose-700 { color:var(--rose-700); } .text-blue-800 { color:var(--blue-800); } .text-blue-900 { color:var(--blue-900); } .text-amber-600 { color:var(--amber-600); } .text-amber-700 { color:var(--amber-700); } .text-green-300 { color:var(--green-300); } .text-green-600 { color:var(--green-600); } .text-green-700 { color:var(--green-700); } /* ────────── 8. 背景色(含透明度变体 /20 /30 /40 /50 /60 /70 /80 /85 /90 /95) ────────── */ .bg-white { background-color:var(--white); } .bg-white\/80 { background-color:rgb(255 255 255 / .8); } .bg-white\/90 { background-color:rgb(255 255 255 / .9); } .bg-white\/95 { background-color:rgb(255 255 255 / .95); } .bg-slate-50 { background-color:var(--slate-50); } .bg-slate-100 { background-color:var(--slate-100); } .bg-slate-900 { background-color:var(--slate-900); } .bg-gray-50 { background-color:var(--gray-50); } .bg-gray-100 { background-color:var(--gray-100); } .bg-gray-200 { background-color:var(--gray-200); } .bg-sky-50 { background-color:var(--sky-50); } .bg-sky-50\/50 { background-color:rgb(240 249 255 / .5); } .bg-sky-100 { background-color:var(--sky-100); } .bg-emerald-50 { background-color:var(--emerald-50); } .bg-emerald-100 { background-color:var(--emerald-100); } .bg-emerald-300 { background-color:var(--emerald-300); } .bg-emerald-500 { background-color:var(--emerald-500); } .bg-emerald-600 { background-color:var(--emerald-600); } .bg-red-50 { background-color:var(--red-50); } .bg-red-100 { background-color:var(--red-100); } .bg-red-300 { background-color:var(--red-300); } .bg-red-500 { background-color:var(--red-500); } .bg-red-700 { background-color:var(--red-700); } .bg-blue-50 { background-color:var(--blue-50); } .bg-amber-50 { background-color:var(--amber-50); } .bg-amber-100 { background-color:var(--amber-100); } .bg-green-50 { background-color:var(--green-50); } .bg-green-100 { background-color:var(--green-100); } .bg-green-500 { background-color:var(--green-500); } .bg-yellow-300 { background-color:var(--yellow-300); } .bg-yellow-500 { background-color:var(--yellow-500); } .bg-yellow-600 { background-color:var(--yellow-600); } .bg-orange-500 { background-color:var(--orange-500); } /* 渐变(沿用 --tw-gradient-* 变量约定): - from-* 设 --tw-gradient-from,默认 to fallback 为同色透明(单 from 时淡出,叠加 to-* 时无中间断点) - via-* 重定义 stops 为三色,插入中间停留点 - to-* 只设 --tw-gradient-to,被 stops 中的 var() 自动取值 */ .bg-gradient-to-b { background-image:linear-gradient(to bottom, var(--tw-gradient-stops)); } .bg-gradient-to-r { background-image:linear-gradient(to right, var(--tw-gradient-stops)); } .from-slate-100 { --tw-gradient-from:var(--slate-100); --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to, rgb(241 245 249 / 0)); } .from-blue-500 { --tw-gradient-from:#3b82f6; --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to, rgb(59 130 246 / 0)); } .from-green-500 { --tw-gradient-from:var(--green-500); --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to, rgb(34 197 94 / 0)); } .from-purple-500 { --tw-gradient-from:#a855f7; --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to, rgb(168 85 247 / 0)); } .from-orange-500 { --tw-gradient-from:var(--orange-500); --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to, rgb(249 115 22 / 0)); } .from-teal-500 { --tw-gradient-from:#14b8a6; --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to, rgb(20 184 166 / 0)); } .from-yellow-500 { --tw-gradient-from:var(--yellow-500); --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to, rgb(234 179 8 / 0)); } .from-red-500 { --tw-gradient-from:var(--red-500); --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to, rgb(239 68 68 / 0)); } .via-slate-50 { --tw-gradient-stops:var(--tw-gradient-from), var(--slate-50), var(--tw-gradient-to, rgb(248 250 252 / 0)); } .to-white { --tw-gradient-to:var(--white); } .to-cyan-500 { --tw-gradient-to:#06b6d4; } .to-emerald-500 { --tw-gradient-to:var(--emerald-500); } .to-emerald-600 { --tw-gradient-to:var(--emerald-600); } .to-pink-500 { --tw-gradient-to:#ec4899; } .to-red-500 { --tw-gradient-to:var(--red-500); } .to-blue-500 { --tw-gradient-to:#3b82f6; } .to-orange-500 { --tw-gradient-to:var(--orange-500); } /* ────────── 9. 边框 ────────── */ .border { border-width:1px; } .border-t { border-top-width:1px; } .border-b { border-bottom-width:1px; } .border-r { border-right-width:1px; } .border-l-\[3px\] { border-left-width:3px; } .border-transparent { border-color:transparent; } .border-slate-200 { border-color:var(--slate-200); } .border-slate-300 { border-color:var(--slate-300); } .border-gray-200 { border-color:var(--gray-200); } .border-gray-300 { border-color:var(--gray-300); } .border-sky-500 { border-color:var(--sky-500); } .border-sky-400\/60 { border-color:rgb(56 189 248 / .6); } .border-emerald-200 { border-color:var(--emerald-200); } .border-emerald-300 { border-color:var(--emerald-300); } .border-red-200 { border-color:var(--red-200); } .border-red-300 { border-color:var(--red-300); } .border-blue-200 { border-color:var(--blue-200); } .border-amber-200 { border-color:var(--amber-200); } .border-amber-300 { border-color:var(--amber-300); } .border-green-200 { border-color:var(--green-200); } /* ────────── 10. 圆角 / 阴影 / ring ────────── */ .rounded { border-radius:.25rem; } .rounded-lg { border-radius:.5rem; } .rounded-xl { border-radius:.75rem; } .rounded-full { border-radius:9999px; } .shadow-sm { box-shadow:0 1px 2px 0 rgb(0 0 0 / .05); } .shadow { box-shadow:0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); } .shadow-lg { box-shadow:0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); } .shadow-xl { box-shadow:0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); } .ring-1 { box-shadow:0 0 0 1px var(--tw-ring-color, var(--slate-200)); } .ring-slate-200 { --tw-ring-color:var(--slate-200); } .ring-gray-200 { --tw-ring-color:var(--gray-200); } .backdrop-blur { backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } /* ────────── 11. 透明度 / transform / 动画 ────────── */ .opacity-0 { opacity:0; } .opacity-50 { opacity:.5; } .opacity-90 { opacity:.9; } .opacity-100 { opacity:1; } .scale-95 { transform:scale(.95); } .scale-100 { transform:scale(1); } .translate-y-0 { transform:translateY(0); } .-translate-y-0\.5 { transform:translateY(-.125rem); } .-translate-y-4 { transform:translateY(-1rem); } .hover\:scale-105:hover { transform:scale(1.05); } .origin-top-right { transform-origin:top right; } .pointer-events-none { pointer-events:none; } .pointer-events-auto { pointer-events:auto; } .cursor-pointer { cursor:pointer; } .cursor-default { cursor:default; } .cursor-not-allowed { cursor:not-allowed; } .select-none { user-select:none; } .resize-y { resize:vertical; } .accent-sky-500 { accent-color:var(--sky-500); } @keyframes juss-pulse { 0%,100% { opacity:1; } 50% { opacity:.5; } } @keyframes juss-bounce { 0%,100% { transform:translateY(-25%); animation-timing-function:cubic-bezier(.8,0,1,1); } 50% { transform:translateY(0); animation-timing-function:cubic-bezier(0,0,.2,1); } } .animate-pulse { animation:juss-pulse 2s cubic-bezier(.4,0,.6,1) infinite; } .animate-bounce { animation:juss-bounce 1s infinite; } /* ────────── 12. 过渡 ────────── */ .transition { transition:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter 150ms cubic-bezier(.4,0,.2,1); } .transition-all { transition:all 150ms cubic-bezier(.4,0,.2,1); } .transition-colors { transition:color,background-color,border-color,fill,stroke 150ms cubic-bezier(.4,0,.2,1); } .transition-opacity { transition:opacity 150ms cubic-bezier(.4,0,.2,1); } .transition-transform { transition:transform 150ms cubic-bezier(.4,0,.2,1); } .transition-\[opacity\,transform\] { transition:opacity,transform 150ms cubic-bezier(.4,0,.2,1); } .duration-150 { transition-duration:150ms; } .duration-200 { transition-duration:200ms; } .duration-300 { transition-duration:300ms; } .ease-out { transition-timing-function:cubic-bezier(0,0,.2,1); } /* ────────── 13. 状态前缀:hover / focus / read-only ────────── */ .outline-none { outline:2px solid transparent; outline-offset:2px; } .focus\:outline-none:focus { outline:2px solid transparent; outline-offset:2px; } .focus\:border-sky-400:focus { border-color:var(--sky-400); } .focus\:ring-2:focus { box-shadow:0 0 0 2px var(--tw-ring-color, var(--sky-400)); } .focus\:ring-sky-400:focus { --tw-ring-color:var(--sky-400); } .hover\:underline:hover { text-decoration-line:underline; } .hover\:opacity-90:hover { opacity:.9; } .hover\:-translate-y-0\.5:hover { transform:translateY(-.125rem); } .hover\:shadow-md:hover { box-shadow:0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); } .hover\:shadow-lg:hover { box-shadow:0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); } .hover\:bg-white:hover { background-color:var(--white); } .hover\:bg-slate-50:hover { background-color:var(--slate-50); } .hover\:bg-slate-100:hover { background-color:var(--slate-100); } .hover\:bg-slate-900:hover { background-color:var(--slate-900); } .hover\:bg-gray-50:hover { background-color:var(--gray-50); } .hover\:bg-gray-100:hover { background-color:var(--gray-100); } .hover\:bg-sky-50:hover { background-color:var(--sky-50); } .hover\:bg-sky-100:hover { background-color:var(--sky-100); } .hover\:bg-sky-500:hover { background-color:var(--sky-500); } .hover\:bg-sky-600:hover { background-color:var(--sky-600); } .hover\:bg-emerald-50:hover { background-color:var(--emerald-50); } .hover\:bg-emerald-700:hover { background-color:var(--emerald-700); } .hover\:bg-red-100:hover { background-color:var(--red-100); } .hover\:bg-red-600:hover { background-color:var(--red-600); } .hover\:bg-red-800:hover { background-color:var(--red-800); } .hover\:bg-green-600:hover { background-color:var(--green-600); } .hover\:bg-yellow-600:hover { background-color:var(--yellow-600); } .hover\:bg-yellow-700:hover { background-color:var(--yellow-700); } .hover\:bg-orange-600:hover { background-color:var(--orange-600); } .hover\:border-sky-400:hover { border-color:var(--sky-400); } .hover\:border-emerald-400:hover { border-color:var(--emerald-400); } .hover\:border-red-400:hover { border-color:var(--red-400); } .hover\:border-slate-900:hover { border-color:var(--slate-900); } .hover\:text-sky-500:hover { color:var(--sky-500); } .hover\:text-sky-600:hover { color:var(--sky-600); } .hover\:text-sky-700:hover { color:var(--sky-700); } .hover\:text-slate-700:hover { color:var(--slate-700); } .hover\:text-gray-600:hover { color:var(--gray-600); } .hover\:text-emerald-600:hover { color:var(--emerald-600); } .hover\:text-emerald-700:hover { color:var(--emerald-700); } .hover\:text-red-500:hover { color:var(--red-500); } .hover\:text-red-600:hover { color:var(--red-600); } .hover\:text-rose-700:hover { color:var(--rose-700); } .hover\:text-slate-900:hover { color:var(--slate-900); } /* button disabled 全局兜底::where() 把 specificity 降到 0, 显式 .opacity-* / .cursor-* 都能覆盖此兜底 */ :where(button:disabled, button[disabled]) { opacity:.5; cursor:not-allowed; } /* 文件上传按钮:统一覆盖 ::file-selector-button(Chrome 89+/Firefox 82+/Safari 14.1+), 不写时浏览器原生按钮接管,跨平台样式差异大 */ input[type="file"]::file-selector-button { margin-right:.5rem; padding:.25rem .75rem; border-radius:.25rem; border:0; font-size:.75rem; background:var(--slate-100); color:var(--slate-700); cursor:pointer; transition:background-color 150ms; } input[type="file"]:hover::file-selector-button { background:var(--slate-200); } .dark input[type="file"]::file-selector-button { background:var(--slate-700); color:var(--slate-200); } .dark input[type="file"]:hover::file-selector-button { background:var(--slate-600); } /* ────────── 14. 任意值类 ────────── */ .text-\[11px\] { font-size:11px; } .text-\[13px\] { font-size:13px; } .min-h-\[80px\] { min-height:80px; } .max-w-\[1440px\] { max-width:1440px; } /* ────────── 15. 响应式断点(sm 640 / md 768 / lg 1024) ────────── */ @media (min-width:640px) { .sm\:grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); } .sm\:grid-cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); } } @media (min-width:768px) { .md\:flex-row { flex-direction:row; } .md\:items-start { align-items:flex-start; } .md\:grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); } .md\:grid-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); } .md\:grid-cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); } .md\:gap-4 { gap:1rem; } .md\:h-56 { height:14rem; } .md\:h-80 { height:20rem; } .md\:text-6xl { font-size:3.75rem; line-height:1; } .md\:w-56 { width:14rem; } .md\:w-72 { width:18rem; } } @media (min-width:1024px) { .lg\:col-span-2 { grid-column:span 2 / span 2; } .lg\:grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); } .lg\:grid-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); } .lg\:grid-cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); } } /* ════════════════════════════════════════════════════════════════════════════ ━━━━━━━━━━━━━━━━━━━━ 暗色模式(.dark 类挂在 上) ━━━━━━━━━━━━━━━━━━━━ ════════════════════════════════════════════════════════════════════════════ */ /* 文字 */ .dark .dark\:text-white { color:var(--white); } .dark .dark\:text-slate-100 { color:var(--slate-100); } .dark .dark\:text-slate-200 { color:var(--slate-200); } .dark .dark\:text-slate-300 { color:var(--slate-300); } .dark .dark\:text-slate-400 { color:var(--slate-400); } .dark .dark\:text-slate-500 { color:var(--slate-500); } .dark .dark\:text-slate-600 { color:var(--slate-600); } .dark .dark\:text-slate-700 { color:var(--slate-700); } .dark .dark\:text-slate-900 { color:var(--slate-900); } .dark .dark\:text-gray-200 { color:var(--gray-200); } .dark .dark\:text-gray-300 { color:var(--gray-300); } .dark .dark\:text-gray-400 { color:var(--gray-400); } .dark .dark\:text-gray-500 { color:var(--gray-500); } .dark .dark\:text-sky-300 { color:var(--sky-300); } .dark .dark\:text-sky-400 { color:var(--sky-400); } .dark .dark\:text-emerald-300 { color:var(--emerald-300); } .dark .dark\:text-emerald-400 { color:var(--emerald-400); } .dark .dark\:text-red-300 { color:var(--red-300); } .dark .dark\:text-red-400 { color:var(--red-400); } .dark .dark\:text-rose-300 { color:var(--rose-300); } .dark .dark\:text-rose-400 { color:var(--rose-400); } .dark .dark\:text-blue-200 { color:var(--blue-200); } .dark .dark\:text-blue-300 { color:var(--blue-300); } .dark .dark\:text-amber-300 { color:var(--amber-300); } .dark .dark\:text-amber-400 { color:#fbbf24; } /* amber-400, 仅暗色用 */ .dark .dark\:text-green-300 { color:var(--green-300); } .dark .dark\:text-green-400 { color:#4ade80; } /* green-400, 仅暗色用 */ /* 背景 */ .dark .dark\:bg-white { background-color:var(--white); } .dark .dark\:bg-slate-700 { background-color:var(--slate-700); } .dark .dark\:bg-slate-700\/40 { background-color:rgb(51 65 85 / .4); } .dark .dark\:bg-slate-700\/50 { background-color:rgb(51 65 85 / .5); } .dark .dark\:bg-slate-800 { background-color:var(--slate-800); } .dark .dark\:bg-slate-800\/60 { background-color:rgb(30 41 59 / .6); } .dark .dark\:bg-slate-800\/70 { background-color:rgb(30 41 59 / .7); } .dark .dark\:bg-slate-800\/85 { background-color:rgb(30 41 59 / .85); } .dark .dark\:bg-slate-900 { background-color:var(--slate-900); } .dark .dark\:bg-gray-700 { background-color:var(--gray-700); } .dark .dark\:bg-gray-700\/50 { background-color:rgb(55 65 81 / .5); } .dark .dark\:bg-gray-800 { background-color:var(--gray-800); } .dark .dark\:bg-gray-900 { background-color:var(--gray-900); } .dark .dark\:bg-gray-900\/90 { background-color:rgb(17 24 39 / .9); } .dark .dark\:bg-sky-900\/20 { background-color:rgb(12 74 110 / .2); } .dark .dark\:bg-sky-900\/30 { background-color:rgb(12 74 110 / .3); } .dark .dark\:bg-sky-900\/40 { background-color:rgb(12 74 110 / .4); } .dark .dark\:bg-emerald-900\/20 { background-color:rgb(6 78 59 / .2); } .dark .dark\:bg-emerald-900\/30 { background-color:rgb(6 78 59 / .3); } .dark .dark\:bg-emerald-900\/40 { background-color:rgb(6 78 59 / .4); } .dark .dark\:bg-red-900\/20 { background-color:rgb(127 29 29 / .2); } .dark .dark\:bg-red-900\/30 { background-color:rgb(127 29 29 / .3); } .dark .dark\:bg-red-900\/40 { background-color:rgb(127 29 29 / .4); } .dark .dark\:bg-amber-900 { background-color:var(--amber-900); } .dark .dark\:bg-amber-900\/30 { background-color:rgb(120 53 15 / .3); } .dark .dark\:bg-amber-900\/40 { background-color:rgb(120 53 15 / .4); } .dark .dark\:bg-blue-900\/20 { background-color:rgb(30 58 138 / .2); } .dark .dark\:bg-blue-900\/30 { background-color:rgb(30 58 138 / .3); } .dark .dark\:bg-green-900\/30 { background-color:rgb(20 83 45 / .3); } .dark .dark\:bg-green-900\/40 { background-color:rgb(20 83 45 / .4); } /* 边框 */ .dark .dark\:border-slate-600 { border-color:var(--slate-600); } .dark .dark\:border-slate-700 { border-color:var(--slate-700); } .dark .dark\:border-slate-800 { border-color:var(--slate-800); } .dark .dark\:border-gray-600 { border-color:var(--gray-600); } .dark .dark\:border-gray-700 { border-color:var(--gray-700); } .dark .dark\:border-amber-700 { border-color:var(--amber-700); } .dark .dark\:border-blue-800 { border-color:var(--blue-800); } .dark .dark\:border-emerald-700 { border-color:var(--emerald-700); } .dark .dark\:border-green-700 { border-color:var(--green-700); } .dark .dark\:border-red-700 { border-color:var(--red-700); } .dark .dark\:border-sky-400\/60 { border-color:rgb(56 189 248 / .6); } .dark .dark\:divide-slate-700 > :not([hidden]) ~ :not([hidden]) { border-color:var(--slate-700); } .dark .dark\:divide-gray-700 > :not([hidden]) ~ :not([hidden]) { border-color:var(--gray-700); } .dark .dark\:divide-gray-800 > :not([hidden]) ~ :not([hidden]) { border-color:var(--gray-800); } /* ring */ .dark .dark\:ring-slate-700 { --tw-ring-color:var(--slate-700); } .dark .dark\:ring-gray-700 { --tw-ring-color:var(--gray-700); } /* 渐变 — 与亮色 from-* 同套 stops 双色 + 同色透明 fallback */ .dark .dark\:from-slate-800 { --tw-gradient-from:var(--slate-800); --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to, rgb(30 41 59 / 0)); } .dark .dark\:to-slate-900 { --tw-gradient-to:var(--slate-900); } /* hover (暗色) */ .dark .dark\:hover\:bg-slate-600:hover { background-color:var(--slate-600); } .dark .dark\:hover\:bg-slate-700:hover { background-color:var(--slate-700); } .dark .dark\:hover\:bg-slate-700\/30:hover { background-color:rgb(51 65 85 / .3); } .dark .dark\:hover\:bg-gray-700:hover { background-color:var(--gray-700); } .dark .dark\:hover\:bg-gray-700\/30:hover { background-color:rgb(55 65 81 / .3); } .dark .dark\:hover\:bg-emerald-900\/30:hover { background-color:rgb(6 78 59 / .3); } .dark .dark\:hover\:bg-red-900\/50:hover { background-color:rgb(127 29 29 / .5); } .dark .dark\:hover\:bg-sky-500:hover { background-color:var(--sky-500); } .dark .dark\:hover\:bg-sky-900\/50:hover { background-color:rgb(12 74 110 / .5); } .dark .dark\:hover\:border-white:hover { border-color:var(--white); } .dark .dark\:hover\:text-white:hover { color:var(--white); } .dark .dark\:hover\:text-slate-200:hover { color:var(--slate-200); } .dark .dark\:hover\:text-gray-200:hover { color:var(--gray-200); } .dark .dark\:hover\:text-sky-300:hover { color:var(--sky-300); } .dark .dark\:hover\:text-sky-400:hover { color:var(--sky-400); } .dark .dark\:hover\:text-rose-300:hover { color:var(--rose-300); } /* focus / read-only (暗色) */ .dark .dark\:focus\:border-sky-500:focus { border-color:var(--sky-500); } .dark .dark\:read-only\:bg-gray-900:read-only { background-color:var(--gray-900); } /* ════════════════════════════════════════════════════════════════════════════ 深色规范 — admin 后台弹窗专用命名空间 dialog 内输入控件深色配色统一:背景比 dialog 底色深一档(gray-900)形成凹陷, 边框 gray-600 从 input 中"跳"出,文字白色覆盖原生 CanvasText 黑字。 登录弹窗(dialog.juss-login-dlg)不带此类,独立配色不受影响。 ════════════════════════════════════════════════════════════════════════════ */ .dark dialog.juss-dlg input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .dark dialog.juss-dlg textarea, .dark dialog.juss-dlg select { background-color:var(--gray-900); border-color:var(--gray-600); color:var(--white); } /* read-only 字段(锁定 key)与 dialog 同色融入,提示"不可编辑" */ .dark dialog.juss-dlg input:read-only:not([type="checkbox"]):not([type="radio"]) { background-color:var(--gray-800); } /* native 进场动画:对齐 JussModal 0.22s cubic-bezier 节奏 @starting-style + transition allow-discrete 让 display:none → block 也能播放; 浏览器支持 Chrome 117+ / Safari 17.5+ / Firefox 129+,旧浏览器静默降级为瞬现 */ dialog.juss-dlg { opacity: 0; transform: scale(0.94); transition: opacity 0.16s ease-in, transform 0.16s ease-in, overlay 0.16s ease-in allow-discrete, display 0.16s ease-in allow-discrete; } dialog.juss-dlg[open] { opacity: 1; transform: scale(1); transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1); } @starting-style { dialog.juss-dlg[open] { opacity: 0; transform: scale(0.94); } } dialog.juss-dlg::backdrop { background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 0.16s ease-in, overlay 0.16s ease-in allow-discrete, display 0.16s ease-in allow-discrete; } dialog.juss-dlg[open]::backdrop { opacity: 1; transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1); } @starting-style { dialog.juss-dlg[open]::backdrop { opacity: 0; } } .dark dialog.juss-dlg::backdrop { background: rgba(0, 0, 0, 0.65); } /* htmx-indicator:HTMX 请求中显示 loading 指示器 */ .htmx-indicator { opacity:0; transition:opacity 200ms; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity:1; } /* ════════════════════════════════════════════════════════════════════════════ 复合伪类工具层(纯 CSS 实现,无 JS): - toggle 开关:peer + ::after 圆球 + checked/focus 联动 - 只读 input :read-only 背景色锁定 实现走相邻兄弟选择器 + ::after 伪元素 ════════════════════════════════════════════════════════════════════════════ */ .read-only\:bg-gray-100:read-only { background-color:var(--gray-100); } /* toggle 开关:::after 圆球 + 默认位置/尺寸/过渡 */ .after\:content-\[\'\'\]::after { content:''; } .after\:absolute::after { position:absolute; } .after\:top-0\.5::after { top:.125rem; } .after\:left-\[2px\]::after { left:2px; } .after\:bg-white::after { background-color:#fff; } .after\:border::after { border-width:1px; } .after\:rounded-full::after { border-radius:9999px; } .after\:h-4::after { height:1rem; } .after\:w-4::after { width:1rem; } .after\:transition-all::after { transition:all 150ms cubic-bezier(.4,0,.2,1); } /* peer 联动:.peer 元素状态变化 → 相邻 .peer-* 元素响应 */ .peer:checked ~ .peer-checked\:bg-sky-500 { background-color:var(--sky-500); } .peer:checked ~ .peer-checked\:after\:translate-x-4::after { transform:translateX(1rem); } .peer:checked ~ .peer-checked\:after\:border-white::after { border-color:#fff; } .peer:focus ~ .peer-focus\:ring-2 { box-shadow:0 0 0 2px var(--tw-ring-color, var(--sky-300)); } .peer:focus ~ .peer-focus\:ring-sky-300 { --tw-ring-color:var(--sky-300); } /* ════════════════════════════════════════════════════════════════════════════ 语义组件层:基础态 + 修饰类组合;组件不引用 .dark 选择器, 通过 var(--xx) 引用语义令牌,顶部 :root.dark 一处切换驱动全站翻面 ════════════════════════════════════════════════════════════════════════════ */ /* 语义令牌:亮暗共用一个语义名(--surface-1 / --text-primary / --accent ...), 组件类只引用语义名,切换 .dark 一键反转 */ :root { --surface-0:#f8fafc; /* 页面底色(slate-50) */ --surface-1:#fff; /* 卡片/侧栏/顶栏底色 */ --surface-1-soft:rgb(255 255 255 / .95); --surface-2:var(--slate-100); /* 二级面板(选中/hover) */ --surface-hover:var(--sky-50); --border-1:var(--slate-200); /* 主分隔 */ --border-2:var(--slate-300); /* 输入框边框 */ --text-primary:var(--slate-900); --text-secondary:var(--slate-600); --text-muted:var(--slate-400); --text-on-accent:#fff; --accent:var(--sky-500); --accent-hover:var(--sky-600); --accent-soft:var(--sky-50); --accent-text:var(--sky-600); } .dark { --surface-0:var(--slate-900); --surface-1:var(--slate-800); --surface-1-soft:rgb(30 41 59 / .85); --surface-2:var(--slate-700); --surface-hover:var(--slate-700); --border-1:var(--slate-700); --border-2:var(--slate-600); --text-primary:#fff; --text-secondary:var(--slate-300); --text-muted:var(--slate-500); --accent-soft:rgb(12 74 110 / .3); --accent-text:var(--sky-300); } /* ────────── 第三方插件暗色适配 ────────── 不动插件源码(JussModal.css 用 prefers-color-scheme 自处理),宿主覆盖插件暴露的 CSS 变量,让插件跟随站内 .dark 切换。覆盖值与 JussModal.css §8 / preset @media 一致 */ .dark { /* JussModal 容器层(对应 JussModal.css §8) */ --juss-modal-overlay-bg: rgba(0, 0, 0, 0.65); --juss-modal-content-bg: #1f2937; --juss-modal-content-color: #f3f4f6; --juss-modal-content-shadow: 0 20px 48px rgba(0, 0, 0, 0.55), 0 8px 16px rgba(0, 0, 0, 0.3); --juss-modal-close-bg: #374151; --juss-modal-close-color: #d1d5db; --juss-modal-close-border: 1px solid #4b5563; --juss-modal-close-hover-bg: #4b1d1d; --juss-modal-close-hover-color: #fca5a5; --juss-modal-close-hover-border: #b91c1c; --juss-modal-close-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2); /* JussModal preset 层(对应 JussModal.css §10 暗色) */ --juss-modal-preset-text-primary: #f1f5f9; --juss-modal-preset-text-secondary: #94a3b8; --juss-modal-preset-border: #334155; --juss-modal-preset-border-hover: #475569; --juss-modal-preset-cancel-bg: #1e293b; --juss-modal-preset-cancel-bg-hover: #334155; --juss-modal-preset-cancel-text: #e2e8f0; --juss-modal-preset-cancel-shadow: 0 1px 2px rgba(0,0,0,0.2); --juss-modal-preset-cancel-shadow-hover: 0 2px 6px rgba(0,0,0,0.3); --juss-modal-preset-input-bg: #0f172a; --juss-modal-preset-input-border: #334155; --juss-modal-preset-error-bg: rgba(220,38,38,0.12); --juss-modal-preset-error-border: rgba(220,38,38,0.3); --juss-modal-preset-warning-bg: rgba(217,119,6,0.18); --juss-modal-preset-danger-bg: rgba(220,38,38,0.18); --juss-modal-preset-info-bg: rgba(37,99,235,0.18); --juss-modal-preset-success-bg: rgba(5,150,105,0.18); --juss-modal-preset-question-bg: rgba(99,102,241,0.18); } /* JussModal 内的 .htmx-request 加载遮罩,暗色变深(选择器特异性需高于插件默认) */ .dark .juss-modal-body.htmx-request::after { background: rgba(0, 0, 0, 0.55); } /* 改密 partial 的"取消"按钮:整页模式默认 hidden,弹窗模式显示 JussModal.js 打开时给 body 加 .juss-modal-open(配置 bodyLockClass)→ selector 命中 → 按钮显示; 关闭时类被移除 → 按钮自动隐藏。纯 CSS 联动,无 JS 介入 */ body.juss-modal-open .juss-modal-cancel-btn { display:inline-block; } /* 弹窗模式给 #app-modal-body 补默认 24px 内边距 —— JussModal 设计哲学:.juss-modal-body 不预置 padding,内容由调用方决定;高级预设 (.juss-modal-preset)自带 28px,低级 hx-target swap 没有自描述能力,宿主补一份默认值。 body.juss-modal-open 联动:整页模式(无该 class)不命中,不会与 layout 的 p-6 双重内边距。 */ body.juss-modal-open #app-modal-body { padding: 1.5rem; } /* ────────── 后台侧栏防闪锚点 ────────── admin/layout.html 的 .juss-sidebar 宽度由 Jusspine 通过 :class 切换; 接管前需 CSS 直接给定首屏宽度,否则浏览器按内容自然宽度撑开,接管后突变 → 闪烁。 _dark_store.html 同步脚本在 打 .sidebar-collapsed,与 Jusspine 切换值一致。 */ .juss-sidebar { width:15rem; } html.sidebar-collapsed .juss-sidebar { width:4rem; } html.sidebar-collapsed .juss-sidebar [x-show="sidebar"] { display:none; } /* ────────── 按钮(全站统一) ────────── */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:.375rem; padding:.375rem 1rem; border-radius:.5rem; font-weight:500; font-size:.875rem; line-height:1.5rem; border:1px solid transparent; transition:background-color 150ms, color 150ms, border-color 150ms, opacity 150ms; cursor:pointer; } .btn-primary { background:var(--accent); color:var(--text-on-accent); } .btn-primary:hover { background:var(--accent-hover); } .btn-ghost { background:var(--slate-100); color:var(--slate-700); border-color:var(--slate-200); } .btn-ghost:hover { background:#fff; border-color:var(--sky-400); color:var(--sky-600); } .dark .btn-ghost { background:var(--slate-700); color:var(--slate-200); border-color:var(--slate-600); } .dark .btn-ghost:hover { background:var(--slate-600); color:var(--sky-300); } .btn-danger { background:var(--red-500); color:#fff; } .btn-danger:hover { background:var(--red-600); } /* 圆形图标按钮(月亮 / 关闭 ×) */ .icon-btn { width:2rem; height:2rem; border-radius:9999px; display:flex; align-items:center; justify-content:center; color:var(--text-secondary); transition:background-color 150ms, color 150ms; cursor:pointer; } .icon-btn:hover { background:var(--slate-100); } .dark .icon-btn:hover { background:var(--slate-700); } /* ────────── 头像 ────────── */ .avatar { width:1.75rem; height:1.75rem; border-radius:9999px; display:flex; align-items:center; justify-content:center; font-size:.75rem; line-height:1rem; background:var(--slate-900); color:#fff; } .dark .avatar { background:#fff; color:var(--slate-900); } /* ────────── 卡片(全站统一) ────────── */ .card { background:var(--surface-1); border-radius:.75rem; box-shadow:0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); } .card-pad { padding:1.25rem; } .card-head { display:flex; align-items:center; justify-content:space-between; padding:.75rem 1.25rem; border-bottom:1px solid var(--border-1); } .card-head h2 { font-weight:600; margin:0; font-size:1rem; line-height:1.5rem; } .card-link { display:block; padding:1.25rem; background:var(--surface-1); border-radius:.75rem; box-shadow:0 1px 3px 0 rgb(0 0 0 / .1); transition:transform 200ms, box-shadow 200ms; } .card-link:hover { transform:translateY(-2px); box-shadow:0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); } /* ────────── 表单(input/select/textarea/label/help) ────────── */ .label { display:block; font-size:.75rem; line-height:1rem; color:var(--text-secondary); margin-bottom:.25rem; } .label-row { display:block; font-size:.875rem; line-height:1.25rem; color:var(--text-primary); } .input, .select, .textarea { width:100%; padding:.375rem .625rem; font-size:.875rem; line-height:1.25rem; border:1px solid var(--border-1); border-radius:.25rem; background:var(--surface-1); color:var(--text-primary); transition:border-color 150ms, box-shadow 150ms; } .dark .input, .dark .select, .dark .textarea { background:var(--slate-800); border-color:var(--slate-700); } .input:focus, .select:focus, .textarea:focus { outline:none; border-color:var(--sky-400); } .dark .input:focus, .dark .select:focus, .dark .textarea:focus { border-color:var(--sky-500); } .input-mono, .textarea-mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } .input-narrow { width:7rem; } .input-medium { width:11rem; } .input-wide { width:18rem; } .select-auto { width:auto; } .input:read-only { background:var(--gray-100); } .dark .input:read-only { background:var(--gray-900); } .field-help { font-size:11px; color:var(--text-muted); margin-top:.125rem; line-height:1.375; } .field-help-warn { font-size:11px; color:var(--red-500); margin-top:.125rem; line-height:1.375; font-weight:500; } .field-row { display:flex; align-items:flex-start; gap:1rem; padding:.5rem 0; } .field-row-main { flex:1; min-width:0; padding-top:.25rem; } .field-row-control { width:18rem; flex-shrink:0; } /* Toggle 开关(settings 板块的开/关字段)*/ .toggle { display:inline-flex; align-items:center; cursor:pointer; } .toggle-input { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .toggle-track { position:relative; width:2.25rem; height:1.25rem; background:var(--gray-200); border-radius:9999px; transition:background-color 150ms; } .dark .toggle-track { background:var(--gray-700); } .toggle-track::after { content:''; position:absolute; top:.125rem; left:2px; width:1rem; height:1rem; background:#fff; border:1px solid var(--border-1); border-radius:9999px; transition:transform 150ms, border-color 150ms; } .toggle-input:checked + .toggle-track { background:var(--sky-500); } .toggle-input:checked + .toggle-track::after { transform:translateX(1rem); border-color:#fff; } .toggle-input:focus + .toggle-track { box-shadow:0 0 0 2px var(--sky-300); } /* ────────── 通用按钮变体 ────────── */ .btn-dark { background:var(--slate-900); color:#fff; } .btn-dark:hover { opacity:.9; } .dark .btn-dark { background:#fff; color:var(--slate-900); } .btn-link { font-size:.875rem; line-height:1.25rem; color:var(--text-secondary); transition:color 150ms; } .btn-link:hover { color:var(--sky-500); } .btn-outline-success { display:inline-block; padding:.375rem .75rem; font-size:.75rem; line-height:1rem; border-radius:.25rem; border:1px solid var(--emerald-300); color:var(--emerald-600); transition:background-color 150ms; } .btn-outline-success:hover { background:var(--emerald-50); } .dark .btn-outline-success { border-color:var(--emerald-700); color:var(--emerald-400); } .dark .btn-outline-success:hover { background:rgb(6 78 59 / .3); } .btn-sm { padding:.25rem .75rem; font-size:.75rem; line-height:1rem; } /* ────────── 横幅 / Alert ────────── */ .alert { padding:.5rem .75rem; border-radius:.25rem; font-size:.75rem; line-height:1rem; margin-bottom:.75rem; } .alert-success { background:var(--emerald-50); color:var(--emerald-700); } .dark .alert-success { background:rgb(6 78 59 / .3); color:var(--emerald-300); } .alert-error { background:var(--red-50); color:var(--red-700); } .dark .alert-error { background:rgb(127 29 29 / .3); color:var(--red-300); } .alert-warn { background:var(--amber-50); color:var(--amber-700); } .dark .alert-warn { background:rgb(120 53 15 / .3); color:var(--amber-300); } .alert-bordered { border:1px solid; padding:.625rem .75rem; font-size:.875rem; line-height:1.25rem; } .alert-bordered.alert-error { border-color:var(--red-300); } .dark .alert-bordered.alert-error { border-color:var(--red-700); } .alert-bordered.alert-warn { border-color:var(--amber-300); } .dark .alert-bordered.alert-warn { border-color:var(--amber-700); } /* ────────── 状态标签 / Badge ────────── */ .badge { display:inline-block; padding:.125rem .5rem; font-size:.75rem; line-height:1; border-radius:.25rem; background:var(--slate-100); color:var(--slate-500); } .dark .badge { background:var(--slate-700); color:var(--slate-300); } .badge-success { background:var(--emerald-100); color:var(--emerald-700); } .dark .badge-success { background:rgb(6 78 59 / .4); color:var(--emerald-300); } .badge-warn { background:var(--amber-100); color:var(--amber-700); } .dark .badge-warn { background:rgb(120 53 15 / .4); color:var(--amber-300); } .badge-danger { background:var(--red-100); color:var(--red-700); } .dark .badge-danger { background:rgb(127 29 29 / .4); color:var(--red-300); } .badge-info { background:var(--blue-100); color:var(--blue-800); } .dark .badge-info { background:rgb(30 58 138 / .3); color:var(--blue-200); } .text-status-success { color:var(--green-600); } .text-status-fail { color:var(--red-500); } /* ────────── 数据表 ────────── */ .data-table { width:100%; font-size:.875rem; line-height:1.25rem; } .data-table thead { background:var(--gray-50); font-size:.75rem; line-height:1rem; color:var(--text-secondary); } .dark .data-table thead { background:rgb(55 65 81 / .5); } .data-table th { text-align:left; padding:.5rem 1rem; font-weight:normal; } .data-table td { padding:.5rem 1rem; } .data-table tbody tr { border-top:1px solid var(--border-1); } .dark .data-table tbody tr { border-color:var(--gray-700); } .data-table tbody tr:first-child { border-top:none; } .data-table tbody tr:hover { background:var(--gray-50); } .dark .data-table tbody tr:hover { background:rgb(55 65 81 / .3); } .data-table-cell-narrow { padding-left:.75rem; padding-right:.75rem; } .empty-cell { text-align:center; padding:2rem 0; color:var(--text-muted); } /* ────────── 分页 ────────── */ .pagination { display:flex; justify-content:center; align-items:center; gap:.5rem; padding:1rem; border-top:1px solid var(--border-1); } .dark .pagination { border-color:var(--gray-700); } .pagination-link { padding:.25rem .75rem; border-radius:.25rem; border:1px solid var(--border-1); color:var(--text-primary); transition:background-color 150ms; } .pagination-link:hover { background:var(--gray-50); } .dark .pagination-link:hover { background:var(--gray-700); } .pagination-info { padding:.25rem .75rem; color:var(--text-muted); } /* ────────── Section 标题(settings 用) ────────── */ .section-title { display:flex; align-items:center; gap:.375rem; font-size:.875rem; line-height:1.25rem; font-weight:600; color:var(--slate-700); margin-bottom:.375rem; padding-bottom:.375rem; border-bottom:1px solid var(--border-1); } .dark .section-title { color:var(--slate-200); } .section-title-mt { margin-top:1.25rem; } .section-title-mt:first-child { margin-top:0; } .section-subtitle { margin-top:.75rem; margin-bottom:.25rem; font-size:11px; line-height:1rem; font-weight:500; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; } /* ────────── Sticky 底部保存条(settings) ────────── */ .save-bar { position:sticky; bottom:0; margin:0 -1.5rem; padding:.625rem 1.5rem; background:rgb(255 255 255 / .9); backdrop-filter:blur(8px); border-top:1px solid var(--border-1); display:flex; justify-content:flex-end; align-items:center; gap:.75rem; } .dark .save-bar { background:rgb(17 24 39 / .9); border-color:var(--gray-700); } .save-bar-hint { font-size:.75rem; line-height:1rem; color:var(--text-muted); } /* ────────── 工具:文字辅助 / 链接 / 分隔 ────────── */ .muted { color:var(--text-muted); } .muted-2 { color:var(--text-secondary); } .text-link { color:var(--accent-text); transition:color 150ms; } .text-link:hover { color:var(--sky-700); } .divider-light { border:0; border-top:1px solid var(--border-1); margin:.5rem 0; } .code-mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.75rem; line-height:1rem; } /* ────────── Flash 成功 / 错误条(account 顶部) ────────── */ .flash { margin-bottom:1rem; border-radius:.5rem; padding:.5rem 1rem; font-size:.875rem; line-height:1.25rem; } .flash-success { background:var(--emerald-50); color:var(--emerald-700); } .dark .flash-success { background:rgb(6 78 59 / .3); color:var(--emerald-300); } .flash-error { background:var(--red-50); color:var(--red-700); padding:.75rem 1rem; } .dark .flash-error { background:rgb(127 29 29 / .3); color:var(--red-300); } /* ────────── 字段行(详情页 dl) ────────── */ .field-list { display:grid; grid-template-columns:8rem 1fr; gap:.5rem 1rem; font-size:.875rem; line-height:1.25rem; } .field-list dt { color:var(--text-muted); } .field-list dd { color:var(--text-primary); margin:0; } /* ════════════════════════════════════════════════════════════════════════════ Auth / Account 舞台风(登录/注册等单卡片场景):比 admin .input 更大、更圆, focus 用 ring + border 双重反馈,匹配"重要表单"的视觉权重 ════════════════════════════════════════════════════════════════════════════ */ .input-stage { width:100%; padding:.5rem .75rem; border:1px solid var(--slate-300); border-radius:.5rem; background:var(--surface-1); color:var(--text-primary); transition:border-color 150ms, box-shadow 150ms; } .dark .input-stage { background:var(--slate-700); border-color:var(--slate-600); color:#fff; } .input-stage:focus { outline:none; border-color:var(--sky-400); box-shadow:0 0 0 2px var(--sky-400); } .label-stage { display:block; font-size:.875rem; line-height:1.25rem; font-weight:500; color:var(--slate-700); margin-bottom:.25rem; } .dark .label-stage { color:var(--slate-300); } /* 主提交按钮(登录/注册/重置等舞台主操作) */ .btn-submit { width:100%; padding:.625rem 1rem; font-weight:500; font-size:.875rem; line-height:1.25rem; border-radius:.5rem; background:var(--slate-900); color:#fff; transition:background-color 150ms, box-shadow 150ms, transform 150ms; cursor:pointer; } .dark .btn-submit { background:#fff; color:var(--slate-900); } .btn-submit:hover { box-shadow:0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); transform:translateY(-1px); } .btn-submit-blue:hover { background:var(--sky-500); transform:none; box-shadow:none; } .dark .btn-submit-blue:hover { background:var(--sky-500); color:#fff; } /* "或使用以下方式登录" 分隔条 */ .divider-or { position:relative; display:flex; align-items:center; margin:1rem 0; } .divider-or::before, .divider-or::after { content:''; flex:1; border-top:1px solid var(--slate-200); } .dark .divider-or::before, .dark .divider-or::after { border-color:var(--slate-700); } .divider-or-text { margin:0 .75rem; font-size:.75rem; line-height:1rem; color:var(--slate-400); } /* 替代登录方式按钮(SMS / 微信 / Apple 等) */ .alt-login { display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%; padding:.625rem 1rem; font-size:.875rem; line-height:1.25rem; background:var(--surface-1); border:1px solid var(--slate-200); border-radius:.5rem; transition:border-color 150ms, color 150ms; } .dark .alt-login { background:var(--slate-700); border-color:var(--slate-600); } .alt-login:hover { border-color:var(--sky-400); color:var(--sky-600); } .dark .alt-login:hover { color:var(--sky-400); } .alt-login-emerald:hover { border-color:var(--emerald-400); color:var(--emerald-600); } .alt-login-mono:hover { border-color:var(--slate-900); } .dark .alt-login-mono:hover { border-color:#fff; } /* 顶栏(navbar/account_layout 顶部) */ .navtop { position:sticky; top:0; z-index:40; background:var(--surface-1); border-bottom:1px solid var(--border-1); transition:background-color 150ms, border-color 150ms; } .navtop-inner { max-width:64rem; margin:0 auto; padding:1rem; display:flex; align-items:center; } .brand { font-size:1.25rem; line-height:1.75rem; font-weight:700; letter-spacing:-.025em; } .brand-domain { color:var(--sky-500); } /* Account 左侧 Tab(account_layout 用) */ .tab-item { display:flex; align-items:center; gap:.5rem; padding:.5rem .75rem; font-size:.875rem; line-height:1.25rem; border-radius:.25rem; color:var(--text-secondary); transition:background-color 150ms, color 150ms; } .tab-item:hover { background:var(--slate-50); } .dark .tab-item:hover { background:var(--slate-700); } .tab-item.is-active { background:var(--accent-soft); color:var(--accent-text); font-weight:500; } /* ════════════════════════════════════════════════════════════════════════════ 语义组件:跨页通用控件(按钮 / 输入 / 标签 / 提示 / 分隔 / 横幅) ════════════════════════════════════════════════════════════════════════════ */ /* admin 区主操作按钮(深底悬停转 sky-500) line-height:1.25rem 锁定,避免行高继承 body 1.5 让按钮变"高大" */ .btn-pill { display:inline-flex; align-items:center; justify-content:center; gap:.375rem; padding:.5rem 1.25rem; border-radius:.5rem; font-size:.875rem; line-height:1.25rem; font-weight:500; background:var(--slate-900); color:#fff; transition:background-color 150ms, color 150ms; cursor:pointer; } .btn-pill:hover { background:var(--sky-500); color:#fff; } .dark .btn-pill { background:#fff; color:var(--slate-900); } .dark .btn-pill:hover { background:var(--sky-500); color:#fff; } /* 中等表单输入框(account/admin 通用,focus 双反馈:border + ring) */ .input-form { width:100%; padding:.5rem .75rem; font-size:.875rem; line-height:1.25rem; background:var(--surface-1); color:var(--text-primary); border:1px solid var(--slate-300); border-radius:.5rem; outline:2px solid transparent; outline-offset:2px; transition:background-color 150ms, border-color 150ms, box-shadow 150ms; } .dark .input-form { background:var(--slate-700); border-color:var(--slate-600); color:#fff; } .input-form:focus { border-color:var(--sky-400); box-shadow:0 0 0 2px var(--sky-400); } .dark .input-form:focus { border-color:var(--sky-500); box-shadow:0 0 0 2px var(--sky-500); } /* admin 小输入框(暗色用 gray 系,与 dialog 内输入控件视觉对齐) */ .input-mini { padding:.5rem .75rem; font-size:.875rem; line-height:1.25rem; border:1px solid var(--border-1); border-radius:.5rem; background:var(--surface-1); color:var(--text-primary); transition:border-color 150ms; } .dark .input-mini { background:var(--gray-700); border-color:var(--gray-600); color:#fff; } .input-mini:focus { outline:none; border-color:var(--sky-400); } /* 紧凑标签:gray-500 在亮暗模式不翻面,line-height:1rem 锁定避免继承 body 1.5 */ .label-tight { display:block; font-size:.75rem; line-height:1rem; color:var(--gray-500); margin-bottom:.25rem; } /* 字段说明文本:slate-400 偏浅灰,亮暗模式不翻面 */ .text-help { margin-top:.25rem; font-size:.75rem; line-height:1rem; color:var(--slate-400); } /* 错误列表(垂直堆叠多条) */ .text-errors { font-size:.875rem; line-height:1.25rem; color:var(--red-700); } .dark .text-errors { color:var(--red-300); } .text-errors > :not([hidden]) ~ :not([hidden]) { margin-top:.25rem; } /* 表头/单元格(.th-cell-wide 用于列宽较大的表) */ .th-cell { padding:.5rem 1rem; text-align:left; } .th-cell-wide { padding:.5rem 1.25rem; text-align:left; } /* 代码块 */ .code-block { padding:.75rem; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.75rem; line-height:1rem; background:var(--gray-50); color:var(--text-primary); border-radius:.25rem; overflow-x:auto; } .dark .code-block { background:var(--gray-900); color:var(--slate-300); } /* 段落说明(板块顶部一段灰色描述文字) */ .section-hint { margin-bottom:1.25rem; font-size:.875rem; line-height:1.25rem; color:var(--text-secondary); } /* 横向分隔线 */ .divider-line { border-bottom:1px solid var(--border-1); } .dark .divider-line { border-color:var(--gray-700); } /* 大块横幅(配 .alert-error / .alert-warn / .alert-success / .alert-info 修饰类) */ .alert-block { margin-bottom:1rem; padding:.75rem 1rem; border-radius:.5rem; font-size:.875rem; line-height:1.25rem; } .alert-block.alert-error { background:var(--red-50); color:var(--red-700); } .dark .alert-block.alert-error { background:rgb(127 29 29 / .3); color:var(--red-300); } .alert-block.alert-warn { background:var(--amber-50); color:var(--amber-700); } .dark .alert-block.alert-warn { background:rgb(120 53 15 / .3); color:var(--amber-300); } .alert-block.alert-success { background:var(--emerald-50); color:var(--emerald-700); } .dark .alert-block.alert-success { background:rgb(6 78 59 / .3); color:var(--emerald-300); } .alert-block.alert-info { background:var(--blue-50); color:var(--blue-800); } .dark .alert-block.alert-info { background:rgb(30 58 138 / .3); color:var(--blue-200); } /* 首页 hero 渐变(home.html 独有) */ .home-hero { background-image:linear-gradient(to bottom, var(--slate-100), var(--white)); max-width:1440px; } .dark .home-hero { background-image:linear-gradient(to bottom, var(--slate-800), var(--slate-900)); }