@xingwangzhe/stalux 1.29.7 → 1.30.0

package/src/styles/theme/base.css

@@ -0,0 +1,290 @@
+@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;
+    }
+
+    .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 {
+        position: relative;
+        transition:
+            color 0.2s ease,
+            text-shadow 0.2s ease;
+    }
+
+    /* 下划线动画 */
+    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/theme/categories.css

@@ -0,0 +1,54 @@
+@layer components {
+    /* categoriesList */
+
+    .stalux-categories > li {
+        content-visibility: auto;
+        contain-intrinsic-block-size: auto 180px;
+        overflow-clip-margin: 30px;
+    }
+
+    @supports not (content-visibility: auto) {
+        .stalux-categories > li {
+            contain-intrinsic-block-size: auto;
+        }
+    }
+
+    /* categoriesCard */
+
+    .stalux-category-card::before {
+        @apply absolute;
+        content: "";
+        inset: 0;
+        background: linear-gradient(
+            120deg,
+            rgba(255, 255, 255, 0),
+            rgba(255, 255, 255, 0.05),
+            rgba(255, 255, 255, 0)
+        );
+        transform: translateX(-100%);
+        transition: transform 360ms ease;
+        z-index: 1;
+    }
+
+    .stalux-category-card:hover {
+        transform: translateY(-3px);
+        background-color: var(--white-05p);
+        box-shadow: var(--card-box-shadow-hover);
+    }
+
+    .stalux-category-card:hover::before {
+        transform: translateX(100%);
+    }
+
+    .stalux-category-card:hover .stalux-category-icon {
+        transform: rotate(-15deg) translateY(-3px);
+        background: var(--accent-30p);
+        color: var(--white-90p);
+        box-shadow: 0 3px 8px var(--accent-30p);
+        opacity: 1;
+    }
+
+    .stalux-category-icon svg {
+        @apply w-full h-full;
+    }
+}

package/src/styles/theme/common.css

@@ -0,0 +1,79 @@
+@layer components {
+    #stalux-to-archive-archs {
+        margin-top: 2em;
+    }
+    /* textType */
+
+    /* date */
+    #stalux-date-date-time {
+        @apply stalux-stack items-center;
+        margin-top: 2em;
+        @apply stalux-glow;
+        color: var(--white-full);
+        #stalux-date-date {
+            font-size: 2em;
+            margin-bottom: 0.5em;
+        }
+        #stalux-date-time {
+            font-size: 3em;
+        }
+    }
+
+    /* author */
+
+    .stalux-author-figure {
+        @apply stalux-flex-center;
+
+        img {
+            @apply rounded-full;
+            transition: transform 1s ease;
+            box-shadow: 0 0 10px var(--stalux-accent-color);
+        }
+
+        img:hover {
+            transform: rotate(360deg);
+        }
+
+        figcaption {
+            @apply font-bold;
+            margin-left: 1em;
+            font-size: 2.5em;
+            @apply stalux-glow;
+            color: var(--white-full);
+        }
+    }
+
+    .stalux-author-figure-column figcaption {
+        @apply text-center;
+        margin-left: 0;
+        margin-top: 0.5em;
+    }
+    @media (max-width: 768px) {
+        .stalux-author {
+            @apply w-full box-border;
+            margin-top: 2em;
+            padding: 1em 0.5em;
+            max-width: 95vw;
+        }
+        .stalux-author-figure {
+            flex-direction: column !important;
+            gap: 0.5em;
+        }
+        .stalux-author-figure img {
+            width: 64px !important;
+            height: 64px !important;
+            max-width: 20vw;
+            max-height: 20vw;
+        }
+        .stalux-author-figure figcaption {
+            @apply text-center;
+            font-size: 1.5em;
+            margin-left: 0;
+            margin-top: 0.5em;
+            word-break: break-all;
+            max-width: 90vw;
+            overflow-wrap: break-word;
+            white-space: normal;
+        }
+    }
+}

package/src/styles/theme/footer.css

@@ -0,0 +1,26 @@
+@layer components {
+    /* footer */
+    @media (max-width: 768px) {
+        .stalux-footer {
+            padding: 1.2rem 0;
+            font-size: 0.8rem;
+        }
+
+        .stalux-footer-content {
+            gap: 0.6rem;
+            padding: 0 0.8rem;
+        }
+    }
+
+    @media (max-width: 480px) {
+        .stalux-footer {
+            padding: 1rem 0;
+            font-size: 0.8rem;
+        }
+
+        .stalux-footer-content {
+            gap: 0.6rem;
+            padding: 0 0.8rem;
+        }
+    }
+}

package/src/styles/theme/inline.css

@@ -0,0 +1,153 @@
+@layer components {
+    /* index.astro */
+
+    .agent-home-summary {
+        @apply absolute p-0 overflow-hidden;
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+        clip: rect(0, 0, 0, 0);
+        white-space: normal;
+        border: 0;
+    }
+
+    /* 404.astro */
+
+    .stalux-404-error-content h1 {
+        @apply font-bold m-0;
+        font-size: 6rem;
+        color: var(--white-90p);
+    }
+
+    .stalux-404-error-content p {
+        font-size: 1.5rem;
+        margin: 1rem 0 2rem 0;
+        color: var(--white-70p);
+    }
+
+    .stalux-404-countdown-text {
+        font-size: 0.95rem !important;
+        color: var(--white-50p) !important;
+        margin: -0.5rem 0 1.5rem 0 !important;
+    }
+
+    .agent-recovery {
+        max-width: 42rem;
+        margin: 0 auto 1.5rem !important;
+        font-size: 1rem !important;
+        line-height: 1.7;
+    }
+
+    .agent-recovery a {
+        @apply text-inherit underline;
+    }
+
+    .stalux-404-home-btn:hover {
+        background: var(--accent-20p);
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px var(--shadow-dark);
+    }
+
+    @media (max-width: 768px) {
+        .stalux-404-error-content h1 {
+            font-size: 4rem;
+        }
+
+        .stalux-404-error-content p {
+            font-size: 1.2rem;
+        }
+    }
+
+    /* Stalux.astro */
+
+    /* postToc.astro */
+
+    @keyframes fadeSlideDown {
+        from {
+            opacity: 0;
+            transform: translateY(-8px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    /* FooterThemeInfo.astro */
+
+    .stalux-theme-info span {
+        @apply m-0;
+    }
+
+    .stalux-theme-info a {
+        @apply no-underline;
+        color: rgba(255, 255, 255, 0.8);
+        transition: color 0.3s ease;
+        margin: 0 0.2em;
+    }
+
+    .stalux-theme-info a:hover {
+        @apply no-underline;
+        color: rgba(255, 255, 255, 1);
+    }
+
+    /* FooterStats.astro */
+
+    /* FooterCopyright.astro */
+
+    .stalux-copyright span {
+        @apply m-0;
+    }
+
+    /* FooterBeian.astro */
+
+    .stalux-beian-beian-info a {
+        @apply no-underline;
+        color: rgba(255, 255, 255, 0.7);
+        transition: color 0.3s ease;
+        font-size: 0.9rem;
+    }
+
+    .stalux-beian-beian-info a:hover {
+        @apply no-underline;
+        color: rgba(255, 255, 255, 0.9);
+    }
+
+    .stalux-beian-public-security-beian:hover {
+        @apply no-underline;
+        color: rgba(255, 255, 255, 0.9);
+    }
+
+    .stalux-beian-public-security-beian img {
+        @apply inline-block;
+        width: 15px;
+        height: 15px;
+    }
+
+    /* FooterBadges.astro */
+    .stalux-badges-wrapper .stalux-badge {
+        width: auto;
+    }
+    .stalux-badge-group-summary:hover {
+        color: var(--white-70p);
+    }
+    .stalux-badge-group-summary::-webkit-details-marker {
+        @apply hidden;
+    }
+    .stalux-badge-group[open] .stalux-badge-group-arrow {
+        transform: rotate(90deg);
+    }
+    .stalux-badge-group[open] .stalux-badge-group-hint[data-hint="collapsed"],
+    .stalux-badge-group:not([open]) .stalux-badge-group-hint[data-hint="expanded"] {
+        @apply hidden;
+    }
+
+    @media (max-width: 768px) {
+        .stalux-badges {
+            gap: 0.3rem;
+        }
+        .stalux-badge {
+            width: auto;
+        }
+    }
+}