@xingwangzhe/stalux 1.29.8 → 1.30.1

package/src/styles/base.css

@@ -0,0 +1,287 @@
+@layer base {
+    /* 全局设置 */
+    html,
+    body {
+        margin: 0;
+        width: 100%;
+        height: 100%;
+        color: white;
+        main {
+            flex: 1;
+        }
+        scrollbar-color: #4a4a4a #2a2a2a;
+        display: block;
+        font-family:
+            var(--font-body), "Noto Sans SC", "Noto Sans CJK SC", system-ui, -apple-system,
+            sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        text-rendering: optimizeLegibility;
+    }
+
+    html[data-clarity-id] {
+        opacity: 1 !important;
+    }
+    /* 将所有链接初始化为无视觉状态，但保留键盘可见焦点 */
+    a {
+        color: inherit;
+        text-decoration: none;
+        background-color: transparent;
+        cursor: pointer;
+        text-decoration-skip-ink: auto;
+        position: relative;
+        transition:
+            color 0.2s ease,
+            text-shadow 0.2s ease;
+    }
+
+    .a-none {
+        color: inherit !important;
+        text-decoration: none !important;
+        background-color: transparent;
+        cursor: pointer;
+        text-decoration-skip-ink: auto;
+    }
+
+    .a-none::after {
+        display: none !important;
+    }
+
+    /* 下划线动画 */
+    a::after {
+        content: "";
+        position: absolute;
+        left: 0;
+        bottom: -2px;
+        height: 1px;
+        width: 100%;
+        background: linear-gradient(90deg, var(--stalux-accent-color), var(--accent-50p));
+        transform: scaleX(0);
+        transform-origin: left;
+        transition: transform 0.25s cubic-bezier(0.25, 0.9, 0.2, 1);
+        pointer-events: none;
+    }
+
+    a:hover::after,
+    a:focus-visible::after,
+    a:active::after {
+        transform: scaleX(1);
+    }
+
+    a:hover,
+    a:active,
+    a:focus-visible {
+        text-decoration: none;
+        /* 保持颜色不变，避免 hover 时颜色跳变 */
+    }
+
+    a:focus {
+        outline: none;
+    }
+
+    a:focus-visible {
+        outline: 2px solid var(--stalux-accent-color);
+        outline-offset: 2px;
+    }
+    ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+    .none {
+        display: none;
+    }
+    /* 布局：使 body 成为列 flex 容器，并让 main 填充可用高度 */
+    .stalux-root {
+        min-height: 100vh;
+        color: white;
+    }
+
+    /* 主内容至少撑满视口高度
+ * - 内容不足视口时：min-height 让 main = 100vh，页脚紧跟在视口下方
+ * - 内容超过视口时：main 自然撑高，页脚在内容末尾
+ * 不使用 flex，避免 flex-basis 限制导致内容溢出 main */
+    .stalux-main {
+        min-height: 100vh;
+    }
+
+    /* 默认 stalux 背景的 CSS 变量（非动态默认值） */
+    :root {
+        --stalux-bg-color: #202020;
+        --stalux-bg-filter: none;
+        --stalux-text-shadow: var(--stalux-accent-color) 0.08rem 0.08rem 0.18rem;
+        --stalux-accent-color: #eab308;
+        --stalux-accent-rgb: 234, 179, 8;
+        --surface-glass: var(--black-05p);
+        --surface-glass-shadow: var(--shadow-sidebar);
+
+        /* 卡片和标签颜色 Token（可在这里统一调整主题色/透明度） */
+        --card-bg: var(--surface-glass);
+        --card-border: rgba(255, 255, 255, 0.1);
+        --card-box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
+        --card-box-shadow-hover: 0 14px 28px rgba(0, 0, 0, 0.12);
+
+        --tag-bg: rgba(255, 255, 255, 0.12);
+        --tag-bg-hover: rgba(255, 255, 255, 0.18);
+        --category-bg: rgba(255, 255, 255, 0.08);
+        --category-bg-hover: rgba(255, 255, 255, 0.14);
+
+        --date-bg: rgba(66, 160, 255, 0.18);
+        --date-border: rgba(66, 160, 255, 0.25);
+        --updated-bg: rgba(255, 201, 71, 0.2);
+        --updated-border: rgba(255, 201, 71, 0.3);
+
+        /* 常用颜色值 */
+        --white-full: #ffffff;
+        --white-95p: rgba(255, 255, 255, 0.95);
+        --white-90p: rgba(255, 255, 255, 0.9);
+        --white-85p: rgba(255, 255, 255, 0.85);
+        --white-80p: rgba(255, 255, 255, 0.9);
+        --white-78p: rgba(255, 255, 255, 0.78);
+        --white-75p: rgba(255, 255, 255, 0.75);
+        --white-70p: rgba(255, 255, 255, 0.86);
+        --white-60p: rgba(255, 255, 255, 0.6);
+        --white-50p: rgba(255, 255, 255, 0.5);
+        --white-30p: rgba(255, 255, 255, 0.3);
+        --white-20p: rgba(255, 255, 255, 0.2);
+        --white-15p: rgba(255, 255, 255, 0.15);
+        --white-10p: rgba(255, 255, 255, 0.1);
+        --white-05p: rgba(255, 255, 255, 0.05);
+
+        --black-30p: rgba(0, 0, 0, 0.3);
+        --black-20p: rgba(0, 0, 0, 0.2);
+        --black-15p: rgba(0, 0, 0, 0.15);
+        --black-10p: rgba(0, 0, 0, 0.1);
+        --black-05p: rgba(0, 0, 0, 0.05);
+
+        /* 强调色变体 */
+        --accent-90p: rgba(var(--stalux-accent-rgb), 0.9);
+        --accent-85p: rgba(var(--stalux-accent-rgb), 0.85);
+        --accent-80p: rgba(var(--stalux-accent-rgb), 0.8);
+        --accent-70p: rgba(var(--stalux-accent-rgb), 0.7);
+        --accent-60p: rgba(var(--stalux-accent-rgb), 0.6);
+        --accent-50p: rgba(var(--stalux-accent-rgb), 0.5);
+        --accent-40p: rgba(var(--stalux-accent-rgb), 0.4);
+        --accent-30p: rgba(var(--stalux-accent-rgb), 0.3);
+        --accent-20p: rgba(var(--stalux-accent-rgb), 0.2);
+
+        /* 常用过渡和动画 */
+        --transition-fast: 0.18s ease;
+        --transition-medium: 0.2s ease;
+        --transition-normal: 0.25s ease;
+        --transition-slow: 0.3s ease;
+        --transition-slower: 0.5s ease;
+        --transition-slowest: 0.6s ease;
+
+        --easing-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+        /* 常用间距值 */
+        --space-2xs: 0.25rem;
+        --space-xs: 0.75rem;
+        --space-sm: 0.5rem;
+        --space-md: 1rem;
+        --space-lg: 1.5rem;
+        --space-xl: 2rem;
+        --space-2xl: 3rem;
+        --space-3xl: 4rem;
+
+        /* 常用圆角半径值 */
+        --radius-sm: 4px;
+        --radius-md: 6px;
+        --radius-lg: 8px;
+        --radius-full: 9999px;
+
+        /* 常用阴影 */
+        --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.1);
+        --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.2);
+        --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.3);
+        --shadow-xl: 0 12px 26px rgba(0, 0, 0, 0.28);
+        --shadow-sidebar:
+            0 16px 20px -12px rgba(0, 0, 0, 0.84),
+            10px 4px 16px -12px rgba(0, 0, 0, 0.58),
+            -10px 4px 16px -12px rgba(0, 0, 0, 0.58);
+        --shadow-raised-hover:
+            0 20px 24px -13px rgba(0, 0, 0, 0.9),
+            12px 5px 18px -13px rgba(0, 0, 0, 0.68),
+            -12px 5px 18px -13px rgba(0, 0, 0, 0.68);
+        --shadow-dark: rgba(0, 0, 0, 0.753);
+
+        /* 语义化颜色 */
+        --muted-text: #bbb;
+
+        /* 字体族栈 */
+        --font-body: "Noto Sans SC", "Noto Sans CJK SC", system-ui, sans-serif;
+        /* --font-code 由 Astro Fonts API 提供；构建时将页面 CJK 子集追加为其回退。 */
+
+        /* 字体大小系统 */
+        --font-size-subtitle: 1.35rem;
+        --font-size-base: 1.1rem;
+        --font-size-small: 0.95rem;
+        --font-size-smaller: 0.9rem;
+        --font-size-tiny: 0.85rem;
+
+        /* 边框宽度 */
+        --border-thin: 1px;
+        --border-medium: 2px;
+        --border-thick: 3px;
+    }
+    ::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+    }
+
+    ::-webkit-scrollbar-track {
+        background: #2a2a2a;
+        border-radius: 4px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background: #4a4a4a;
+        border-radius: 4px;
+        transition: background 0.3s ease-out;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+        background: #5a5a5a;
+    }
+
+    ::-webkit-scrollbar-corner {
+        background: #2a2a2a;
+    }
+
+    /* 背景层 - 双层随机背景，在路由切换时交叉淡入淡出 */
+    .bg-layer {
+        position: fixed;
+        inset: 0;
+        z-index: -10;
+        background-repeat: repeat;
+        background-size: auto;
+        background-position: center;
+        background-color: var(--stalux-bg-color, transparent);
+        filter: var(--stalux-bg-filter, none);
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 650ms ease-in-out;
+        /* 禁止浏览器强制色彩模式（高对比度/暗黑模式）调整背景图颜色 */
+        forced-color-adjust: none;
+        /* 关键：防止 Safari/WebKit 在暗色模式下自动调整 SVG 背景图颜色 */
+        color-scheme: only light;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .bg-layer {
+            transition-duration: 0ms;
+        }
+    }
+
+    /* footer 基础样式，保证页脚始终可见且不覆盖内容 */
+    footer {
+        padding: var(--space-lg) var(--space-md);
+        text-align: center;
+        color: var(--muted-text);
+        background: linear-gradient(180deg, rgba(12, 14, 18, 0.18), rgba(12, 14, 18, 0.72));
+        border-top: 1px solid var(--white-10p);
+        backdrop-filter: blur(16px);
+        -webkit-backdrop-filter: blur(16px);
+    }
+}

package/src/styles/categories.css

@@ -0,0 +1 @@
+@import "./generated-categories.css";