@xingwangzhe/stalux 1.42.0 → 1.43.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -5
- package/package.json +7 -1
- package/src/components/stalux/archives/archivesList.astro +0 -2
- package/src/components/stalux/archives/toArchive.astro +1 -5
- package/src/components/stalux/common/Typewriter.astro +1 -7
- package/src/components/stalux/common/author.astro +1 -6
- package/src/components/stalux/common/date.astro +1 -11
- package/src/components/stalux/layout/PageHeading.astro +2 -11
- package/src/components/stalux/layout/footer.astro +1 -6
- package/src/components/stalux/layout/head.astro +0 -2
- package/src/components/stalux/links/socialMedia.astro +1 -10
- package/src/components/stalux/posts/ArticleSummary.astro +2 -8
- package/src/components/stalux/posts/PostTaxonomy.astro +3 -14
- package/src/components/stalux/posts/postCC.astro +2 -2
- package/src/components/stalux/posts/postCard.astro +1 -5
- package/src/components/stalux/posts/postContent.astro +4 -23
- package/src/components/stalux/posts/postLeft.astro +4 -22
- package/src/components/stalux/posts/postRight.astro +5 -27
- package/src/components/stalux/posts/postToc.astro +3 -10
- package/src/components/stalux/posts/randomPost.astro +0 -1
- package/src/components/stalux/tags/tagHeader.astro +1 -5
- package/src/index.ts +20 -1
- package/src/internal/style-names.generated.ts +59 -69
- package/src/layouts/PostLayout.astro +1 -5
- package/src/layouts/Stalux.astro +3 -19
- package/src/pages/index.astro +1 -5
- package/src/scripts/navigation-client.ts +13 -0
- package/src/scripts/navigation-scripts.ts +191 -0
- package/src/scripts/route-motion.ts +82 -11
- package/src/scripts/route-out.ts +33 -0
- package/src/scripts/smooth-scroll.ts +52 -0
- package/src/scripts/swup-router.ts +381 -0
- package/src/scripts/tags-cloud.ts +1 -1
- package/src/scripts/view-transitions.ts +3 -233
- package/src/scripts/word-list.ts +9 -3
- package/src/styles/generated-words.css +1 -1
- package/src/styles/generated.css +1 -1
- package/src/styles/motion.css +7 -211
- package/src/utils/toc-scrollspy.ts +21 -14
- package/src/scripts/archive-reveal.ts +0 -76
package/src/styles/generated.css
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
@layer theme, base, components, utilities;
|
|
2
|
-
@layer components{.stalux-404-home-btn{background:var(--black-20p);border:var(--border-thin) solid var(--white-20p);transition:background-color var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal);border-radius:var(--radius-md);padding:var(--space-md) var(--space-lg);color:var(--white-90p);font-size:var(--font-size-base);text-decoration:none;display:inline-block}.stalux-ai-prompt{clip-path:inset(50%);white-space:pre-wrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.stalux-badge-group{border:none}.stalux-badge-group-arrow{font-size:.65rem;transition:transform .2s;display:inline-block}.stalux-badge-group-summary{user-select:none;cursor:pointer;color:var(--white-70p);gap:.4rem;padding:.2rem 0;font-size:.85rem;list-style-type:none;transition:color .2s}.stalux-beian-public-security-beian{color:#ffffffb3;gap:5px;font-size:.9rem;text-decoration:none;transition:color .3s;display:inline-flex}.stalux-card-post-categories,.stalux-card-post-tags{gap:.4rem}.stalux-card-post-category{background:var(--category-bg);color:#fff;border-radius:6px;padding:.18rem .5rem;font-size:.84rem;line-height:1;display:inline-block}.stalux-card-post-description{overflow-wrap:anywhere;color:var(--white-70p);line-height:1.6}.stalux-card-post-meta{gap:.6rem}.stalux-card-post-tag{background:var(--tag-bg);color:#fff;border-radius:9999px;padding:.22rem .7rem;font-size:.85rem;line-height:1;display:inline-block}.stalux-card-post-title{overflow-wrap:anywhere;margin:0;line-height:1.35}.stalux-card-read-more{align-self:flex-start;margin-top:.6rem}.stalux-card-time{gap:.45rem;display:inline-flex}.stalux-copyright{color:var(--white-70p);gap:.3em;font-weight:500}.stalux-footer{backdrop-filter:blur(10px);color:var(--white-full);background-color:#0000001a;margin-top:auto;padding:1.5rem 0;font-size:.9rem}.stalux-footer-content{gap:.8rem;max-width:1200px;margin:0 auto;padding:0 1rem}.stalux-nav-list{transform:scale(var(--nav-scale,1));transform-origin:50%;box-sizing:border-box;gap:2rem;max-width:100%;transition:transform .22s cubic-bezier(.22,.72,.22,1);overflow:visible}.stalux-nav-overlay{pointer-events:none;z-index:999;opacity:0;background:#0009;height:100%;transition:opacity .3s;display:none;position:fixed;top:0;left:0}.stalux-nav-scroll-btn{background:var(--black-30p);backdrop-filter:blur(8px);box-shadow:var(--shadow-md);pointer-events:none;z-index:10;cursor:pointer;width:36px;height:36px;color:var(--white-full);opacity:0;border:none;border-radius:9999px;padding:0;transition:opacity .25s;display:none;position:absolute;top:50%;transform:translateY(-50%)}.stalux-nav-toggle{z-index:998;cursor:pointer;min-width:48px;min-height:48px;color:inherit;background:0 0;border:none;padding:.75rem;display:none}.stalux-post-card{box-sizing:border-box;cursor:pointer;gap:var(--space-lg);border-radius:var(--radius-lg);background-color:var(--card-bg);height:100%;padding:var(--space-lg);box-shadow:var(--card-box-shadow);transition:transform .22s cubic-bezier(.22,.72,.22,1)}.stalux-stats-site-build-time{color:#fffc;margin-top:.5rem;font-size:.9rem}.stalux-stats-stats-separator{color:#ffffff80}.stalux-theme-info{color:var(--white-70p);gap:.3em;font-size:.85rem}.stalux-home-body{min-height:calc(100vh - var(--stalux-site-header-height));padding-bottom:var(--space-3xl);position:relative}.stalux-nav-container{box-sizing:border-box;max-width:100%;position:relative;overflow:hidden}.stalux-author{margin-top:4em}.stalux-card-post-cover{border-radius:var(--radius-md);flex-shrink:0;height:180px;margin-bottom:.5rem;overflow:hidden}.stalux-home-title{color:var(--white-full);text-shadow:var(--stalux-text-shadow);margin-top:1.5em;font-size:4em}.stalux-nav-item{text-shadow:var(--stalux-text-shadow);flex-shrink:0;margin-left:1em;margin-right:1em;font-size:1.3em}.stalux-page-description{color:var(--white-60p);margin-bottom:1.5em;font-size:1.2em}.stalux-page-title{text-shadow:var(--stalux-text-shadow);margin-top:1.5em;font-size:2.5em}.stalux-typewriter{min-height:2em;text-shadow:var(--stalux-text-shadow);margin-top:1.5em;font-size:2.5em}.stalux-404-error-container{min-height:60vh;padding:2rem}.stalux-badge,.stalux-badges-wrapper .stalux-badge{width:auto}.stalux-u-min-w-0{min-width:0}.stalux-u-w-full{width:100%}.stalux-u-flex{display:flex}.stalux-u-flex-col{flex-direction:column}.stalux-u-flex-wrap{flex-wrap:wrap}.stalux-u-items-center{align-items:center}.stalux-u-justify-center{justify-content:center}.stalux-badges,.stalux-badges-wrapper{gap:.5rem}.stalux-beian-beian-info{gap:1rem}.stalux-stats-site-stats{gap:.5rem;font-size:.9rem}.stalux-nav-text{white-space:nowrap;color:var(--white-full)}.stalux-badge-group-items{padding-top:.35rem}.stalux-u-text-center{text-align:center}.stalux-badge-group-hint{color:var(--white-70p);font-size:.7rem}.stalux-badge-group-title{color:var(--white-80p)}#stalux-home-show-post-list{cursor:pointer;text-shadow:var(--stalux-text-shadow);margin-top:3em;font-size:1.5em}.stalux-post-list-container{width:100%;height:auto;margin:5px 0}.stalux-post-list-container ul{flex-wrap:wrap;gap:2rem;margin:3em;padding:0;list-style-type:none;display:flex}.stalux-post-list-container ul>li{flex:min(22rem,100%);min-width:0;margin:0}.stalux-card-post-title a{color:inherit;text-decoration:none}.stalux-post-card>a:first-child{width:100%;min-width:0;display:block}.stalux-card-post-cover img{object-fit:cover;width:100%;max-width:100%;height:100%;transition:transform var(--transition-fast)}.stalux-card-post-date,.stalux-card-post-updated{color:#e8f2ff;border-radius:10px;align-items:center;gap:.35rem;width:fit-content;padding:.28rem .6rem;font-size:.9rem;line-height:1.1;display:inline-flex}.stalux-card-post-date{background:var(--date-bg);border:1px solid var(--date-border);color:#e8f2ff}.stalux-card-post-updated{background:var(--updated-bg);border:1px solid var(--updated-border);color:#fff7de}.stalux-card-post-tags a,.stalux-card-post-categories a{text-decoration:none}.stalux-card-post-tags a:focus-visible .stalux-card-post-tag{background:var(--tag-bg-hover)}.stalux-card-post-categories a:focus-visible .stalux-card-post-category{background:var(--category-bg-hover)}.stalux-social{margin-top:3em}.stalux-social ul{flex-wrap:wrap;justify-content:center;gap:1em;margin:0;padding:0;display:flex}.stalux-social ul li{box-sizing:border-box;text-align:center;background-color:var(--white-15p);border-radius:9999px;justify-content:center;align-items:center;width:2.5em;height:2.5em;font-size:large;display:inline-flex;overflow:hidden}.stalux-social ul a,.stalux-social ul .stalux-social-icon-container,.stalux-social ul .stalux-social-custom-icon{justify-content:center;align-items:center;width:100%;height:100%;line-height:1;display:inline-flex}.stalux-social[data-stalux-social-animate=true] li{animation:.28s cubic-bezier(.2,.8,.2,1) both stalux-social-stalux-social-arrive}.stalux-social[data-stalux-social-animate=true] li:nth-child(2){animation-delay:30ms}.stalux-social[data-stalux-social-animate=true] li:nth-child(3){animation-delay:60ms}.stalux-social[data-stalux-social-animate=true] li:nth-child(4){animation-delay:90ms}.stalux-social[data-stalux-social-animate=true] li:nth-child(5){animation-delay:.12s}.stalux-social[data-stalux-social-animate=true] li:nth-child(6){animation-delay:.15s}.stalux-social[data-stalux-social-animate=true] li:nth-child(n+7){animation-delay:.18s}nav{width:100%;min-width:0;max-width:100%}html{scroll-padding-top:var(--stalux-nav-offset,var(--stalux-site-header-height))}.stalux-site-header{z-index:990;width:100%;min-height:var(--stalux-site-header-min-height);isolation:isolate;justify-content:center;align-items:center;display:flex;position:sticky;top:0}.stalux-nav-scroll-btn[data-visible]{pointer-events:auto;opacity:1}.stalux-nav-scroll-btn[data-side=left]{left:4px}.stalux-nav-scroll-btn[data-side=right]{right:4px}.stalux-nav-scroll-btn svg{stroke:currentColor;stroke-width:2px;fill:none;width:20px;height:20px}.stalux-nav-link,.stalux-nav-link:visited{cursor:pointer;width:100%;color:inherit;min-height:44px;font:inherit;background:0 0;border:none;align-items:center;gap:.5rem;padding:.5rem .75rem;text-decoration:none;display:flex}.stalux-nav-link .nav-icon{stroke:var(--white-full)}.stalux-nav-toggle svg{width:32px;height:32px}.stalux-nav-overlay[data-state=show]{pointer-events:auto;opacity:1;display:block}#stalux-to-archive-archs{margin-top:2em}#stalux-date-date-time{text-shadow:var(--stalux-text-shadow);color:var(--white-full);flex-direction:column;align-items:center;margin-top:2em;display:flex}#stalux-date-date-time #stalux-date-date{min-height:1.25em;margin-bottom:.5em;font-size:2em;line-height:1.25}#stalux-date-date-time #stalux-date-time{font-variant-numeric:tabular-nums;min-height:1.25em;font-size:3em;line-height:1.25}.stalux-author-figure{justify-content:center;align-items:center;display:flex}.stalux-author-figure img{box-shadow:0 0 10px var(--stalux-accent-color);border-radius:9999px;transition:transform .65s ease-in-out}.stalux-author-figure figcaption{text-shadow:var(--stalux-text-shadow);color:var(--white-full);margin-left:1em;font-size:2.5em;font-weight:700}.stalux-author-figure-column figcaption{text-align:center;margin-top:.5em;margin-left:0}.agent-home-summary{clip-path:inset(50%);white-space:normal;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.stalux-404-error-content h1{color:var(--white-90p);margin:0;font-size:6rem;font-weight:700}.stalux-404-error-content p{color:var(--white-70p);margin:1rem 0 2rem;font-size:1.5rem}.stalux-404-countdown-text{color:var(--white-50p)!important;margin:-.5rem 0 1.5rem!important;font-size:.95rem!important}.agent-recovery{max-width:42rem;line-height:1.7;margin:0 auto 1.5rem!important;font-size:1rem!important}.agent-recovery a{color:inherit;text-decoration-line:underline}.stalux-theme-info span,.stalux-copyright span{margin:0}.stalux-theme-info a{color:#fffc;margin:0 .2em;text-decoration:none;transition:color .3s}.stalux-beian-beian-info a{color:#ffffffb3;font-size:.9rem;text-decoration:none;transition:color .3s}.stalux-beian-public-security-beian img{width:15px;height:15px;display:inline-block}.stalux-badge-group-summary::-webkit-details-marker,.stalux-badge-group[open] .stalux-badge-group-hint[data-hint=collapsed],.stalux-badge-group:not([open]) .stalux-badge-group-hint[data-hint=expanded]{display:none}.stalux-badge-group[open] .stalux-badge-group-arrow{transform:rotate(90deg)}@media (hover:hover) and (pointer:fine){.stalux-card-post-tags a:hover .stalux-card-post-tag{background:var(--tag-bg-hover)}.stalux-card-post-categories a:hover .stalux-card-post-category{background:var(--category-bg-hover)}.stalux-post-card-shell:hover .stalux-post-card .stalux-card-post-cover img{transform:scale(1.025)}.stalux-post-card-shell:hover .stalux-post-card{box-shadow:var(--card-box-shadow-hover)}.stalux-nav-scroll-btn:hover{background:0 0}.stalux-nav-container:hover .stalux-nav-scroll-btn[data-visible]{opacity:1}.stalux-nav-link:hover .nav-icon,.stalux-nav-link:hover .stalux-nav-text{stroke:var(--stalux-accent-color);color:var(--stalux-accent-color)}.stalux-author-figure>a:hover img{animation:.65s ease-in-out stalux-link-avatar-spin}.stalux-404-home-btn:hover{background:var(--accent-20p);box-shadow:0 4px 12px var(--shadow-dark)}.stalux-theme-info a:hover{color:#fff;text-decoration:none}.stalux-beian-beian-info a:hover,.stalux-beian-public-security-beian:hover{color:#ffffffe6;text-decoration:none}.stalux-badge-group-summary:hover{color:var(--white-70p)}}@media (width>=601px){.stalux-site-nav{isolation:isolate;border-radius:0 0 16px 16px;transition:background-color .18s,box-shadow .18s}.stalux-site-nav[data-scrolled]{backdrop-filter:blur(20px)saturate(140%);box-shadow:0 1px 0 var(--white-10p), 0 8px 24px #0000001f;background:#181818c7}}@media (width<=1100px){.stalux-nav-list{gap:1rem}.stalux-nav-item{margin-left:.6em;margin-right:.6em;font-size:1em}}@media (width<=900px){.stalux-nav-item{margin-left:.25em;margin-right:.25em;font-size:.95em}.stalux-nav-list{gap:.5rem}}@media (width<=768px){.stalux-home-body{box-sizing:border-box;width:100%;max-width:95vw;height:auto;padding:2rem .5rem 1.5rem}.stalux-home-title{word-break:break-all;margin-top:1em;font-size:2em}#stalux-home-show-post-list{margin-top:2em;font-size:1.1em}.stalux-post-list-container ul{margin:1rem}.stalux-footer{padding:1.2rem 0;font-size:.8rem}.stalux-footer-content{gap:.6rem;padding:0 .8rem}.stalux-author{box-sizing:border-box;width:100%;max-width:95vw;margin-top:2em;padding:1em .5em}.stalux-author-figure{gap:.5em;flex-direction:column!important}.stalux-author-figure img{max-width:20vw;max-height:20vw;width:64px!important;height:64px!important}.stalux-author-figure figcaption{text-align:center;word-break:break-all;overflow-wrap:break-word;white-space:normal;max-width:90vw;margin-top:.5em;margin-left:0;font-size:1.5em}.stalux-404-error-content h1{font-size:4rem}.stalux-404-error-content p{font-size:1.2rem}.stalux-badges{gap:.3rem}.stalux-badge{width:auto}}@media (width<=600px){html{--stalux-site-header-min-height:4rem}.stalux-nav-toggle[data-state=open]{visibility:hidden;pointer-events:none}.stalux-nav-toggle[data-scrolled]{backdrop-filter:blur(20px)saturate(140%);box-shadow:0 1px 0 var(--white-10p), 0 8px 24px #0000001f;background:#181818c7;border-radius:12px}.stalux-nav-toggle{display:block;position:fixed;top:.75rem;left:.75rem}.stalux-nav-container{overflow:visible}nav{width:auto}.stalux-nav-list{pointer-events:none;z-index:1000;background:var(--black-20p);backdrop-filter:blur(20px);flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:0;width:min(220px,100vw - 1rem);height:100vh;padding:.5rem 1rem 2rem;position:fixed;top:0;left:0;right:auto;overflow-y:auto;transform:translate(-100%)}.stalux-nav-list[data-state=open]{pointer-events:auto;transform:translate(0)}.stalux-nav-item{border-bottom:1px solid var(--white-10p);flex-shrink:0;width:100%;margin:0;font-size:.9em}.stalux-nav-text{display:inline}.stalux-nav-link{width:100%;min-height:44px;font-size:inherit;padding:.45rem .75rem}.stalux-nav-link .nav-icon{width:18px;height:18px}}@media (width<=480px){.stalux-footer{padding:1rem 0;font-size:.8rem}.stalux-footer-content{gap:.6rem;padding:0 .8rem}}@media (prefers-reduced-motion:reduce){.stalux-social[data-stalux-social-animate=true] li{animation:none}}.stalux-main,.stalux-post-page,.stalux-post-layout>*,.stalux-link-card-content,.stalux-word-list-item,.stalux-word-card{box-sizing:border-box;min-width:0;max-width:100%}.stalux-main{overflow-wrap:anywhere}.stalux-link-shell{min-width:0;max-width:100%;display:block}.stalux-link-card{box-sizing:border-box;width:100%;max-width:100%}.stalux-category-shell{width:100%;min-width:0}.stalux-author-figure>a{flex-shrink:0;display:inline-block}.stalux-author-figure img{display:block}.stalux-post-card-shell,.stalux-category-shell,.stalux-link-shell{position:relative}.stalux-post-card,.stalux-category-card,.stalux-link-card,.stalux-word-card{transition:transform .2s,background-color .2s,border-color .2s,box-shadow .2s}:is(.stalux-post-card-shell,.stalux-category-shell):focus-within>*,.stalux-link-shell:focus-visible>*{box-shadow:var(--card-box-shadow-hover)}:is(button,summary,[role=button]):focus-visible{outline:2px solid var(--stalux-accent-color);outline-offset:3px}@media (prefers-reduced-motion:reduce){.stalux-main *,.stalux-main :before,.stalux-main :after{transition-duration:0s!important;animation:none!important}.stalux-post-card,.stalux-category-card,.stalux-link-card,.stalux-link-card-content,.stalux-card-post-cover img,.stalux-category-icon,.stalux-author-figure img,.stalux-link-card-avatar img{transform:none!important}}@keyframes stalux-social-stalux-social-arrive{0%{opacity:0;transform:translateY(.75rem)rotate(-12deg)}to{opacity:1;transform:translateY(0)rotate(0)}}@keyframes stalux-random-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes stalux-link-avatar-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes stalux-word-word-glow{0%{box-shadow:0 0 30px var(--accent-50p), 0 0 80px var(--accent-30p), var(--shadow-lg);transform:scale(1.02)}to{box-shadow:0 0 20px var(--accent-40p), 0 0 60px var(--accent-20p), var(--shadow-lg);transform:scale(1)}}}@layer utilities{.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.visible{visibility:visible}.absolute{position:absolute}.static{position:static}.grid{display:grid}.block{display:block}.inline-block{display:inline-block}.hidden{display:none}.h-full{height:100%}.flex{display:flex}.flex-shrink{flex-shrink:1}.flex-wrap{flex-wrap:wrap}.transform{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.b,.border{border-width:1px}.text-inherit{color:inherit}.no-underline{text-decoration:none}.outline{outline-style:solid}}@layer theme;@layer base{html,body{color:#fff;width:100%;height:100%;margin:0;& main{flex:1}scrollbar-color:#4a4a4a #2a2a2a;font-family:var(--font-body), "Noto Sans SC", "Noto Sans CJK SC", system-ui, -apple-system, sans-serif;text-rendering:optimizelegibility;line-height:1.25;display:block}body{height:auto;min-height:100%}html{scrollbar-gutter:stable;background-color:var(--stalux-bg-color,#202020)}html[data-clarity-id]{opacity:1!important}a{color:inherit;cursor:pointer;text-decoration-skip-ink:auto;background-color:#0000;text-decoration:none;transition:color .2s,text-shadow .2s;position:relative}.a-none{cursor:pointer;text-decoration-skip-ink:auto;background-color:#0000;color:inherit!important;text-decoration:none!important}.a-none:after{display:none!important}a:not(.a-none):not([data-stalux-card]):not(.stalux-nav-link):after{content:"";background:linear-gradient(90deg, var(--stalux-accent-color), var(--accent-50p));transform-origin:0;pointer-events:none;width:100%;height:1px;transition:transform .25s cubic-bezier(.25,.9,.2,1);position:absolute;bottom:-2px;left:0;transform:scaleX(0)}a:not(.a-none):not([data-stalux-card]):not(.stalux-nav-link):focus-visible:after,a:not(.a-none):not([data-stalux-card]):not(.stalux-nav-link):active:after{transform:scaleX(1)}@media (hover:hover) and (pointer:fine){a:not(.a-none):not([data-stalux-card]):not(.stalux-nav-link):hover:after{transform:scaleX(1)}}a:active,a:focus-visible{text-decoration:none}@media (hover:hover) and (pointer:fine){a:hover{text-decoration:none}}a:focus{outline:none}a:focus-visible{outline:2px solid var(--stalux-accent-color);outline-offset:2px}ul{margin:0;padding:0;list-style:none}.none{display:none}.stalux-root{color:#fff;min-height:100vh}.stalux-main{min-height:calc(100vh - var(--stalux-site-header-height,3rem))}:root{--stalux-bg-color:#202020;--stalux-bg-filter:none;--stalux-site-header-min-height:3.75rem;--stalux-site-header-height:var(--stalux-site-header-min-height);--stalux-text-shadow:var(--stalux-accent-color) .08rem .08rem .18rem;--stalux-accent-color:#eab308;--stalux-accent-rgb:234 179 8;--surface-glass:var(--black-05p);--surface-glass-shadow:var(--shadow-sidebar);--card-bg:var(--surface-glass);--card-border:#ffffff1a;--card-box-shadow:0 10px 24px #00000014;--card-box-shadow-hover:0 14px 28px #0000001f;--tag-bg:#ffffff1f;--tag-bg-hover:#ffffff2e;--category-bg:#ffffff14;--category-bg-hover:#ffffff24;--date-bg:#42a0ff2e;--date-border:#42a0ff40;--updated-bg:#ffc94733;--updated-border:#ffc9474d;--white-full:#fff;--white-95p:#fffffff2;--white-90p:#ffffffe6;--white-85p:#ffffffd9;--white-80p:#ffffffe6;--white-78p:#ffffffc7;--white-75p:#ffffffbf;--white-70p:#ffffffdb;--white-60p:#fff9;--white-50p:#ffffff80;--white-30p:#ffffff4d;--white-20p:#fff3;--white-15p:#ffffff26;--white-10p:#ffffff1a;--white-05p:#ffffff0d;--black-30p:#0000004d;--black-20p:#0003;--black-15p:#00000026;--black-10p:#0000001a;--black-05p:#0000000d;--accent-90p:rgb(var(--stalux-accent-rgb) / .9);--accent-85p:rgb(var(--stalux-accent-rgb) / .85);--accent-80p:rgb(var(--stalux-accent-rgb) / .8);--accent-70p:rgb(var(--stalux-accent-rgb) / .7);--accent-60p:rgb(var(--stalux-accent-rgb) / .6);--accent-50p:rgb(var(--stalux-accent-rgb) / .5);--accent-40p:rgb(var(--stalux-accent-rgb) / .4);--accent-30p:rgb(var(--stalux-accent-rgb) / .3);--accent-20p:rgb(var(--stalux-accent-rgb) / .2);--transition-fast:.18s ease;--transition-medium:.2s ease;--transition-normal:.25s ease;--transition-slow:.3s ease;--transition-slower:.5s ease;--transition-slowest:.6s ease;--easing-bounce:cubic-bezier(.175, .885, .32, 1.275);--space-2xs:.25rem;--space-xs:.75rem;--space-sm:.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 #0000001a;--shadow-md:0 6px 16px #0003;--shadow-lg:0 8px 20px #0000004d;--shadow-xl:0 12px 26px #00000047;--shadow-sidebar:0 16px 20px -12px #000000d6, 10px 4px 16px -12px #00000094, -10px 4px 16px -12px #00000094;--shadow-raised-hover:0 20px 24px -13px #000000e6, 12px 5px 18px -13px #000000ad, -12px 5px 18px -13px #000000ad;--shadow-dark:#000000c0;--muted-text:#bbb;--font-body:"Noto Sans SC", "Noto Sans CJK SC", system-ui, sans-serif;--font-size-subtitle:1.35rem;--font-size-base:1.1rem;--font-size-small:.95rem;--font-size-smaller:.9rem;--font-size-tiny:.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 .3s ease-out}@media (hover:hover) and (pointer:fine){::-webkit-scrollbar-thumb:hover{background:#5a5a5a}}::-webkit-scrollbar-corner{background:#2a2a2a}.bg-layer{z-index:-10;background-position:50%;background-repeat:repeat;background-size:auto;background-color:var(--stalux-bg-color,transparent);filter:var(--stalux-bg-filter,none);pointer-events:none;opacity:0;forced-color-adjust:none;color-scheme:light only;transition:opacity .65s ease-in-out;position:fixed;inset:0}@media (prefers-reduced-motion:reduce){.bg-layer{transition-duration:0s}}footer{padding:var(--space-lg) var(--space-md);text-align:center;color:var(--muted-text);border-top:1px solid var(--white-10p);backdrop-filter:blur(16px);background:linear-gradient(#0c0e122e,#0c0e12b8)}}@media print{[data-stalux-offscreen-code],[data-stalux-offscreen-svg]{content-visibility:visible!important;contain-intrinsic-block-size:none!important}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.stagger-children>:first-child{animation-delay:.1s}.stagger-children>:nth-child(2){animation-delay:.15s}.stagger-children>:nth-child(3){animation-delay:.2s}.stagger-children>:nth-child(4){animation-delay:.25s}.stagger-children>:nth-child(5){animation-delay:.3s}.stagger-children>:nth-child(n+6){animation-delay:.35s}html,[data-astro-transition-persist],.stalux-main,.stalux-main *,.bg-layer,.bg-layer *,[data-stalux-scroll-sentinel],[data-stalux-back-to-top]{view-transition-name:none!important}html[data-stalux-vt-preset]{--stalux-vt-duration:.16s;--stalux-vt-distance:clamp(28px, 4vw, 40px);--stalux-vt-tilt:8deg;--stalux-vt-x:var(--stalux-vt-distance);--stalux-vt-y:0px;--stalux-vt-rx:0deg;--stalux-vt-ry:0deg;--stalux-vt-rz:-.35deg;--stalux-vt-scale:1}html[data-stalux-vt-preset]:not([data-stalux-vt-preset=none]) [data-stalux-motion-focus]{view-transition-name:stalux-focus!important}::view-transition{pointer-events:none}::view-transition-group(stalux-focus){animation:none!important}::view-transition-old(stalux-focus){display:none;animation:none!important}::view-transition-new(stalux-focus){mix-blend-mode:normal;transform-origin:50%;backface-visibility:hidden;animation:stalux-content-in var(--stalux-vt-duration,.16s) cubic-bezier(.22, .7, .2, 1) both paused}html[data-stalux-vt-phase=prepared] [data-stalux-motion-content],html[data-stalux-vt-phase=running] [data-stalux-motion-content]{transform-origin:50% min(42vh,400px);backface-visibility:hidden;animation:stalux-content-in var(--stalux-vt-duration,.16s) cubic-bezier(.22, .7, .2, 1) both paused}html[data-stalux-vt-phase=running] [data-stalux-motion-content],html[data-stalux-vt-phase=running]::view-transition-new(stalux-focus){animation-play-state:running}html[data-stalux-vt-phase] .stalux-article{overflow:clip}[data-stalux-home-content]{flex-direction:column;align-items:center;width:100%;display:flex}html[data-stalux-vt-preset=enter]{--stalux-vt-x:calc(var(--stalux-vt-distance) * 1.25);--stalux-vt-rz:0deg}html[data-stalux-vt-preset=article]{--stalux-vt-duration:.26s;--stalux-vt-distance:clamp(36px, 5vw, 56px);--stalux-vt-x:calc(var(--stalux-vt-distance) * 1.25);--stalux-vt-rz:0deg}html[data-stalux-vt-preset=next]{--stalux-vt-duration:.26s;--stalux-vt-distance:clamp(36px, 5vw, 56px);--stalux-vt-x:calc(var(--stalux-vt-distance) * 1.5);--stalux-vt-rz:0deg}html[data-stalux-vt-preset=previous]{--stalux-vt-duration:.26s;--stalux-vt-distance:clamp(36px, 5vw, 56px);--stalux-vt-x:calc(var(--stalux-vt-distance) * -1.5);--stalux-vt-rz:0deg}html[data-stalux-vt-preset=up]{--stalux-vt-duration:.14s;--stalux-vt-x:calc(var(--stalux-vt-distance) * -.75);--stalux-vt-y:-10px;--stalux-vt-rz:0deg}html[data-stalux-vt-preset=taxonomy]{--stalux-vt-duration:.14s;--stalux-vt-x:0px;--stalux-vt-y:18px;--stalux-vt-rx:calc(var(--stalux-vt-tilt) * -.5);--stalux-vt-rz:0deg}html[data-stalux-vt-preset=panel]{--stalux-vt-x:calc(var(--stalux-vt-distance) * .6);--stalux-vt-ry:calc(var(--stalux-vt-tilt) * -1);--stalux-vt-rz:0deg}html[data-stalux-vt-preset=panel][data-stalux-vt-to=links]{--stalux-vt-x:0px;--stalux-vt-y:12px;--stalux-vt-rx:calc(var(--stalux-vt-tilt) * .75);--stalux-vt-ry:0deg}html[data-stalux-vt-preset=panel][data-stalux-vt-to=words]{--stalux-vt-x:0px;--stalux-vt-y:16px;--stalux-vt-ry:0deg;--stalux-vt-rz:-1deg}html[data-stalux-vt-preset=home]{--stalux-vt-duration:.18s;--stalux-vt-x:0px;--stalux-vt-y:20px;--stalux-vt-rx:calc(var(--stalux-vt-tilt) * -.625);--stalux-vt-rz:0deg;--stalux-vt-scale:.985}html[data-stalux-vt-preset=restore]{--stalux-vt-duration:.1s;--stalux-vt-x:12px;--stalux-vt-rz:0deg}html[data-stalux-vt-preset=restore][data-stalux-vt-direction=back],html[data-stalux-vt-preset=restore][data-stalux-vt-direction=backward]{--stalux-vt-x:-12px}html[data-stalux-vt-preset=error]{--stalux-vt-duration:.12s;--stalux-vt-x:0px;--stalux-vt-y:12px;--stalux-vt-rz:-.7deg}@keyframes stalux-content-in{0%{opacity:.25;transform:perspective(1200px) translate3d(var(--stalux-vt-x), var(--stalux-vt-y), 0) rotateX(var(--stalux-vt-rx)) rotateY(var(--stalux-vt-ry)) rotateZ(var(--stalux-vt-rz)) scale(var(--stalux-vt-scale))}55%{opacity:1}to{opacity:1;transform:perspective(1200px)translate(0,0)rotateX(0)rotateY(0)rotate(0)scale(1)}}@keyframes stalux-page-exit{0%{opacity:1}to{opacity:1}}@keyframes stalux-page-enter{0%{opacity:.9}to{opacity:1}}@keyframes stalux-page-enter-back{0%{opacity:.96}to{opacity:1}}@keyframes stalux-taxonomy-enter{0%{opacity:.9}to{opacity:1}}@keyframes stalux-taxonomy-enter-back{0%{opacity:.96}to{opacity:1}}@keyframes stalux-article-enter{0%{opacity:.9}to{opacity:1}}@keyframes stalux-article-enter-back{0%{opacity:.96}to{opacity:1}}@keyframes stalux-sidebar-left-in{0%{opacity:.96}to{opacity:1}}@keyframes stalux-sidebar-left-out{0%{opacity:1}to{opacity:1}}@keyframes stalux-sidebar-left-back-in{0%{opacity:.96}to{opacity:1}}@keyframes stalux-sidebar-left-back-out{0%{opacity:1}to{opacity:1}}@keyframes stalux-sidebar-right-in{0%{opacity:.96}to{opacity:1}}@keyframes stalux-sidebar-right-out{0%{opacity:1}to{opacity:1}}@keyframes stalux-sidebar-right-back-in{0%{opacity:.96}to{opacity:1}}@keyframes stalux-sidebar-right-back-out{0%{opacity:1}to{opacity:1}}[data-stalux-scroll-sentinel]{visibility:hidden;pointer-events:none;width:1px;height:1px;position:absolute;top:240px;left:0}@media (width<=768px){html[data-stalux-vt-preset]:not([data-stalux-vt-preset=none]){--stalux-vt-distance:20px;--stalux-vt-tilt:4deg}html[data-stalux-vt-preset=restore]{--stalux-vt-x:8px}html[data-stalux-vt-preset=restore][data-stalux-vt-direction=back],html[data-stalux-vt-preset=restore][data-stalux-vt-direction=backward]{--stalux-vt-x:-8px}}@media (prefers-reduced-motion:reduce){html[data-stalux-vt-preset],html[data-stalux-vt-preset] [data-astro-transition-persist]{view-transition-name:none!important}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){filter:none!important;animation:none!important;transform:none!important}.stalux-main,.stalux-main *,.postLayout *{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}
|
|
2
|
+
@layer components{.stalux-404-home-btn{background:var(--black-20p);border:var(--border-thin) solid var(--white-20p);transition:background-color var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal);border-radius:var(--radius-md);padding:var(--space-md) var(--space-lg);color:var(--white-90p);font-size:var(--font-size-base);text-decoration:none;display:inline-block}.stalux-ai-prompt{clip-path:inset(50%);white-space:pre-wrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.stalux-badge-group{border:none}.stalux-badge-group-arrow{font-size:.65rem;transition:transform .2s;display:inline-block}.stalux-badge-group-summary{user-select:none;cursor:pointer;color:var(--white-70p);gap:.4rem;padding:.2rem 0;font-size:.85rem;list-style-type:none;transition:color .2s}.stalux-beian-public-security-beian{color:#ffffffb3;gap:5px;font-size:.9rem;text-decoration:none;transition:color .3s;display:inline-flex}.stalux-card-post-categories,.stalux-card-post-tags{gap:.4rem}.stalux-card-post-category{background:var(--category-bg);color:#fff;border-radius:6px;padding:.18rem .5rem;font-size:.84rem;line-height:1;display:inline-block}.stalux-card-post-description{overflow-wrap:anywhere;color:var(--white-70p);line-height:1.6}.stalux-card-post-meta{gap:.6rem}.stalux-card-post-tag{background:var(--tag-bg);color:#fff;border-radius:9999px;padding:.22rem .7rem;font-size:.85rem;line-height:1;display:inline-block}.stalux-card-post-title{overflow-wrap:anywhere;margin:0;line-height:1.35}.stalux-card-read-more{align-self:flex-start;margin-top:.6rem}.stalux-card-time{gap:.45rem;display:inline-flex}.stalux-copyright{color:var(--white-70p);gap:.3em;font-weight:500}.stalux-footer{backdrop-filter:blur(10px);color:var(--white-full);background-color:#0000001a;margin-top:auto;padding:1.5rem 0;font-size:.9rem}.stalux-footer-content{gap:.8rem;max-width:1200px;margin:0 auto;padding:0 1rem}.stalux-nav-list{transform:scale(var(--nav-scale,1));transform-origin:50%;box-sizing:border-box;gap:2rem;max-width:100%;transition:transform .22s cubic-bezier(.22,.72,.22,1);overflow:visible}.stalux-nav-overlay{pointer-events:none;z-index:999;opacity:0;background:#0009;height:100%;transition:opacity .3s;display:none;position:fixed;top:0;left:0}.stalux-nav-scroll-btn{background:var(--black-30p);backdrop-filter:blur(8px);box-shadow:var(--shadow-md);pointer-events:none;z-index:10;cursor:pointer;width:36px;height:36px;color:var(--white-full);opacity:0;border:none;border-radius:9999px;padding:0;transition:opacity .25s;display:none;position:absolute;top:50%;transform:translateY(-50%)}.stalux-nav-toggle{z-index:998;cursor:pointer;min-width:48px;min-height:48px;color:inherit;background:0 0;border:none;padding:.75rem;display:none}.stalux-post-card{box-sizing:border-box;cursor:pointer;gap:var(--space-lg);border-radius:var(--radius-lg);background-color:var(--card-bg);height:100%;padding:var(--space-lg);box-shadow:var(--card-box-shadow);transition:transform .22s cubic-bezier(.22,.72,.22,1)}.stalux-stats-site-build-time{color:#fffc;margin-top:.5rem;font-size:.9rem}.stalux-stats-stats-separator{color:#ffffff80}.stalux-theme-info{color:var(--white-70p);gap:.3em;font-size:.85rem}.stalux-home-body{min-height:calc(100vh - var(--stalux-site-header-height));padding-bottom:var(--space-3xl);position:relative}.stalux-nav-container{box-sizing:border-box;max-width:100%;position:relative;overflow:hidden}.stalux-author{margin-top:4em}.stalux-card-post-cover{border-radius:var(--radius-md);flex-shrink:0;height:180px;margin-bottom:.5rem;overflow:hidden}.stalux-home-title{color:var(--white-full);text-shadow:var(--stalux-text-shadow);margin-top:1.5em;font-size:4em}.stalux-nav-item{text-shadow:var(--stalux-text-shadow);flex-shrink:0;margin-left:1em;margin-right:1em;font-size:1.3em}.stalux-page-description{color:var(--white-60p);margin-bottom:1.5em;font-size:1.2em}.stalux-page-title{text-shadow:var(--stalux-text-shadow);margin-top:1.5em;font-size:2.5em}.stalux-typewriter{min-height:2em;text-shadow:var(--stalux-text-shadow);margin-top:1.5em;font-size:2.5em}.stalux-404-error-container{min-height:60vh;padding:2rem}.stalux-badge,.stalux-badges-wrapper .stalux-badge{width:auto}.stalux-u-min-w-0{min-width:0}.stalux-u-w-full{width:100%}.stalux-u-flex{display:flex}.stalux-u-flex-col{flex-direction:column}.stalux-u-flex-wrap{flex-wrap:wrap}.stalux-u-items-center{align-items:center}.stalux-u-justify-center{justify-content:center}.stalux-badges,.stalux-badges-wrapper{gap:.5rem}.stalux-beian-beian-info{gap:1rem}.stalux-stats-site-stats{gap:.5rem;font-size:.9rem}.stalux-nav-text{white-space:nowrap;color:var(--white-full)}.stalux-badge-group-items{padding-top:.35rem}.stalux-u-text-center{text-align:center}.stalux-badge-group-hint{color:var(--white-70p);font-size:.7rem}.stalux-badge-group-title{color:var(--white-80p)}#stalux-home-show-post-list{cursor:pointer;text-shadow:var(--stalux-text-shadow);margin-top:3em;font-size:1.5em}.stalux-post-list-container{width:100%;height:auto;margin:5px 0}.stalux-post-list-container ul{flex-wrap:wrap;gap:2rem;margin:3em;padding:0;list-style-type:none;display:flex}.stalux-post-list-container ul>li{flex:min(22rem,100%);min-width:0;margin:0}.stalux-card-post-title a{color:inherit;text-decoration:none}.stalux-post-card>a:first-child{width:100%;min-width:0;display:block}.stalux-card-post-cover img{object-fit:cover;width:100%;max-width:100%;height:100%;transition:transform var(--transition-fast)}.stalux-card-post-date,.stalux-card-post-updated{color:#e8f2ff;border-radius:10px;align-items:center;gap:.35rem;width:fit-content;padding:.28rem .6rem;font-size:.9rem;line-height:1.1;display:inline-flex}.stalux-card-post-date{background:var(--date-bg);border:1px solid var(--date-border);color:#e8f2ff}.stalux-card-post-updated{background:var(--updated-bg);border:1px solid var(--updated-border);color:#fff7de}.stalux-card-post-tags a,.stalux-card-post-categories a{text-decoration:none}.stalux-card-post-tags a:focus-visible .stalux-card-post-tag{background:var(--tag-bg-hover)}.stalux-card-post-categories a:focus-visible .stalux-card-post-category{background:var(--category-bg-hover)}.stalux-social{margin-top:3em}.stalux-social ul{flex-wrap:wrap;justify-content:center;gap:1em;margin:0;padding:0;display:flex}.stalux-social ul li{box-sizing:border-box;text-align:center;background-color:var(--white-15p);border-radius:9999px;justify-content:center;align-items:center;width:2.5em;height:2.5em;font-size:large;display:inline-flex;overflow:hidden}.stalux-social ul a,.stalux-social ul .stalux-social-icon-container,.stalux-social ul .stalux-social-custom-icon{justify-content:center;align-items:center;width:100%;height:100%;line-height:1;display:inline-flex}.stalux-social[data-stalux-social-animate=true] li{animation:.28s cubic-bezier(.2,.8,.2,1) both stalux-social-stalux-social-arrive}.stalux-social[data-stalux-social-animate=true] li:nth-child(2){animation-delay:30ms}.stalux-social[data-stalux-social-animate=true] li:nth-child(3){animation-delay:60ms}.stalux-social[data-stalux-social-animate=true] li:nth-child(4){animation-delay:90ms}.stalux-social[data-stalux-social-animate=true] li:nth-child(5){animation-delay:.12s}.stalux-social[data-stalux-social-animate=true] li:nth-child(6){animation-delay:.15s}.stalux-social[data-stalux-social-animate=true] li:nth-child(n+7){animation-delay:.18s}nav{width:100%;min-width:0;max-width:100%}html{scroll-padding-top:var(--stalux-nav-offset,var(--stalux-site-header-height))}.stalux-site-header{z-index:990;width:100%;min-height:var(--stalux-site-header-min-height);isolation:isolate;justify-content:center;align-items:center;display:flex;position:sticky;top:0}.stalux-nav-scroll-btn[data-visible]{pointer-events:auto;opacity:1}.stalux-nav-scroll-btn[data-side=left]{left:4px}.stalux-nav-scroll-btn[data-side=right]{right:4px}.stalux-nav-scroll-btn svg{stroke:currentColor;stroke-width:2px;fill:none;width:20px;height:20px}.stalux-nav-link,.stalux-nav-link:visited{cursor:pointer;width:100%;color:inherit;min-height:44px;font:inherit;background:0 0;border:none;align-items:center;gap:.5rem;padding:.5rem .75rem;text-decoration:none;display:flex}.stalux-nav-link .nav-icon{stroke:var(--white-full)}.stalux-nav-toggle svg{width:32px;height:32px}.stalux-nav-overlay[data-state=show]{pointer-events:auto;opacity:1;display:block}#stalux-to-archive-archs{margin-top:2em}#stalux-date-date-time{text-shadow:var(--stalux-text-shadow);color:var(--white-full);flex-direction:column;align-items:center;margin-top:2em;display:flex}#stalux-date-date-time #stalux-date-date{min-height:1.25em;margin-bottom:.5em;font-size:2em;line-height:1.25}#stalux-date-date-time #stalux-date-time{font-variant-numeric:tabular-nums;min-height:1.25em;font-size:3em;line-height:1.25}.stalux-author-figure{justify-content:center;align-items:center;display:flex}.stalux-author-figure img{box-shadow:0 0 10px var(--stalux-accent-color);border-radius:9999px;transition:transform .65s ease-in-out}.stalux-author-figure figcaption{text-shadow:var(--stalux-text-shadow);color:var(--white-full);margin-left:1em;font-size:2.5em;font-weight:700}.stalux-author-figure-column figcaption{text-align:center;margin-top:.5em;margin-left:0}.agent-home-summary{clip-path:inset(50%);white-space:normal;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.stalux-404-error-content h1{color:var(--white-90p);margin:0;font-size:6rem;font-weight:700}.stalux-404-error-content p{color:var(--white-70p);margin:1rem 0 2rem;font-size:1.5rem}.stalux-404-countdown-text{color:var(--white-50p)!important;margin:-.5rem 0 1.5rem!important;font-size:.95rem!important}.agent-recovery{max-width:42rem;line-height:1.7;margin:0 auto 1.5rem!important;font-size:1rem!important}.agent-recovery a{color:inherit;text-decoration-line:underline}.stalux-theme-info span,.stalux-copyright span{margin:0}.stalux-theme-info a{color:#fffc;margin:0 .2em;text-decoration:none;transition:color .3s}.stalux-beian-beian-info a{color:#ffffffb3;font-size:.9rem;text-decoration:none;transition:color .3s}.stalux-beian-public-security-beian img{width:15px;height:15px;display:inline-block}.stalux-badge-group-summary::-webkit-details-marker,.stalux-badge-group[open] .stalux-badge-group-hint[data-hint=collapsed],.stalux-badge-group:not([open]) .stalux-badge-group-hint[data-hint=expanded]{display:none}.stalux-badge-group[open] .stalux-badge-group-arrow{transform:rotate(90deg)}@media (hover:hover) and (pointer:fine){.stalux-card-post-tags a:hover .stalux-card-post-tag{background:var(--tag-bg-hover)}.stalux-card-post-categories a:hover .stalux-card-post-category{background:var(--category-bg-hover)}.stalux-post-card-shell:hover .stalux-post-card .stalux-card-post-cover img{transform:scale(1.025)}.stalux-post-card-shell:hover .stalux-post-card{box-shadow:var(--card-box-shadow-hover)}.stalux-nav-scroll-btn:hover{background:0 0}.stalux-nav-container:hover .stalux-nav-scroll-btn[data-visible]{opacity:1}.stalux-nav-link:hover .nav-icon,.stalux-nav-link:hover .stalux-nav-text{stroke:var(--stalux-accent-color);color:var(--stalux-accent-color)}.stalux-author-figure>a:hover img{animation:.65s ease-in-out stalux-link-avatar-spin}.stalux-404-home-btn:hover{background:var(--accent-20p);box-shadow:0 4px 12px var(--shadow-dark)}.stalux-theme-info a:hover{color:#fff;text-decoration:none}.stalux-beian-beian-info a:hover,.stalux-beian-public-security-beian:hover{color:#ffffffe6;text-decoration:none}.stalux-badge-group-summary:hover{color:var(--white-70p)}}@media (width>=601px){.stalux-site-nav{isolation:isolate;border-radius:0 0 16px 16px;transition:background-color .18s,box-shadow .18s}.stalux-site-nav[data-scrolled]{backdrop-filter:blur(20px)saturate(140%);box-shadow:0 1px 0 var(--white-10p), 0 8px 24px #0000001f;background:#181818c7}}@media (width<=1100px){.stalux-nav-list{gap:1rem}.stalux-nav-item{margin-left:.6em;margin-right:.6em;font-size:1em}}@media (width<=900px){.stalux-nav-item{margin-left:.25em;margin-right:.25em;font-size:.95em}.stalux-nav-list{gap:.5rem}}@media (width<=768px){.stalux-home-body{box-sizing:border-box;width:100%;max-width:95vw;height:auto;padding:2rem .5rem 1.5rem}.stalux-home-title{word-break:break-all;margin-top:1em;font-size:2em}#stalux-home-show-post-list{margin-top:2em;font-size:1.1em}.stalux-post-list-container ul{margin:1rem}.stalux-footer{padding:1.2rem 0;font-size:.8rem}.stalux-footer-content{gap:.6rem;padding:0 .8rem}.stalux-author{box-sizing:border-box;width:100%;max-width:95vw;margin-top:2em;padding:1em .5em}.stalux-author-figure{gap:.5em;flex-direction:column!important}.stalux-author-figure img{max-width:20vw;max-height:20vw;width:64px!important;height:64px!important}.stalux-author-figure figcaption{text-align:center;word-break:break-all;overflow-wrap:break-word;white-space:normal;max-width:90vw;margin-top:.5em;margin-left:0;font-size:1.5em}.stalux-404-error-content h1{font-size:4rem}.stalux-404-error-content p{font-size:1.2rem}.stalux-badges{gap:.3rem}.stalux-badge{width:auto}}@media (width<=600px){html{--stalux-site-header-min-height:4rem}.stalux-nav-toggle[data-state=open]{visibility:hidden;pointer-events:none}.stalux-nav-toggle[data-scrolled]{backdrop-filter:blur(20px)saturate(140%);box-shadow:0 1px 0 var(--white-10p), 0 8px 24px #0000001f;background:#181818c7;border-radius:12px}.stalux-nav-toggle{display:block;position:fixed;top:.75rem;left:.75rem}.stalux-nav-container{overflow:visible}nav{width:auto}.stalux-nav-list{pointer-events:none;z-index:1000;background:var(--black-20p);backdrop-filter:blur(20px);flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:0;width:min(220px,100vw - 1rem);height:100vh;padding:.5rem 1rem 2rem;position:fixed;top:0;left:0;right:auto;overflow-y:auto;transform:translate(-100%)}.stalux-nav-list[data-state=open]{pointer-events:auto;transform:translate(0)}.stalux-nav-item{border-bottom:1px solid var(--white-10p);flex-shrink:0;width:100%;margin:0;font-size:.9em}.stalux-nav-text{display:inline}.stalux-nav-link{width:100%;min-height:44px;font-size:inherit;padding:.45rem .75rem}.stalux-nav-link .nav-icon{width:18px;height:18px}}@media (width<=480px){.stalux-footer{padding:1rem 0;font-size:.8rem}.stalux-footer-content{gap:.6rem;padding:0 .8rem}}@media (prefers-reduced-motion:reduce){.stalux-social[data-stalux-social-animate=true] li{animation:none}}.stalux-main,.stalux-post-page,.stalux-post-layout>*,.stalux-link-card-content,.stalux-word-list-item,.stalux-word-card{box-sizing:border-box;min-width:0;max-width:100%}.stalux-main{overflow-wrap:anywhere}.stalux-link-shell{min-width:0;max-width:100%;display:block}.stalux-link-card{box-sizing:border-box;width:100%;max-width:100%}.stalux-category-shell{width:100%;min-width:0}.stalux-author-figure>a{flex-shrink:0;display:inline-block}.stalux-author-figure img{display:block}.stalux-post-card-shell,.stalux-category-shell,.stalux-link-shell{position:relative}.stalux-post-card,.stalux-category-card,.stalux-link-card,.stalux-word-card{transition:transform .2s,background-color .2s,border-color .2s,box-shadow .2s}:is(.stalux-post-card-shell,.stalux-category-shell):focus-within>*,.stalux-link-shell:focus-visible>*{box-shadow:var(--card-box-shadow-hover)}:is(button,summary,[role=button]):focus-visible{outline:2px solid var(--stalux-accent-color);outline-offset:3px}@media (prefers-reduced-motion:reduce){.stalux-main *,.stalux-main :before,.stalux-main :after{transition-duration:0s!important;animation:none!important}.stalux-post-card,.stalux-category-card,.stalux-link-card,.stalux-link-card-content,.stalux-card-post-cover img,.stalux-category-icon,.stalux-author-figure img,.stalux-link-card-avatar img{transform:none!important}}@keyframes stalux-social-stalux-social-arrive{0%{opacity:0;transform:translateY(.75rem)rotate(-12deg)}to{opacity:1;transform:translateY(0)rotate(0)}}@keyframes stalux-random-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes stalux-link-avatar-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes stalux-word-word-glow{0%{box-shadow:0 0 30px var(--accent-50p), 0 0 80px var(--accent-30p), var(--shadow-lg);transform:scale(1.02)}to{box-shadow:0 0 20px var(--accent-40p), 0 0 60px var(--accent-20p), var(--shadow-lg);transform:scale(1)}}}@layer utilities{.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.visible{visibility:visible}.absolute{position:absolute}.static{position:static}.grid{display:grid}.block{display:block}.inline-block{display:inline-block}.hidden{display:none}.h-full{height:100%}.flex{display:flex}.flex-shrink{flex-shrink:1}.flex-wrap{flex-wrap:wrap}.transform{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.b,.border{border-width:1px}.text-inherit{color:inherit}.no-underline{text-decoration:none}.outline{outline-style:solid}}@layer theme;@layer base{html,body{color:#fff;width:100%;height:100%;margin:0;& main{flex:1}scrollbar-color:#4a4a4a #2a2a2a;font-family:var(--font-body), "Noto Sans SC", "Noto Sans CJK SC", system-ui, -apple-system, sans-serif;text-rendering:optimizelegibility;line-height:1.25;display:block}body{height:auto;min-height:100%}html{scrollbar-gutter:stable;background-color:var(--stalux-bg-color,#202020)}html[data-clarity-id]{opacity:1!important}a{color:inherit;cursor:pointer;text-decoration-skip-ink:auto;background-color:#0000;text-decoration:none;transition:color .2s,text-shadow .2s;position:relative}.a-none{cursor:pointer;text-decoration-skip-ink:auto;background-color:#0000;color:inherit!important;text-decoration:none!important}.a-none:after{display:none!important}a:not(.a-none):not([data-stalux-card]):not(.stalux-nav-link):after{content:"";background:linear-gradient(90deg, var(--stalux-accent-color), var(--accent-50p));transform-origin:0;pointer-events:none;width:100%;height:1px;transition:transform .25s cubic-bezier(.25,.9,.2,1);position:absolute;bottom:-2px;left:0;transform:scaleX(0)}a:not(.a-none):not([data-stalux-card]):not(.stalux-nav-link):focus-visible:after,a:not(.a-none):not([data-stalux-card]):not(.stalux-nav-link):active:after{transform:scaleX(1)}@media (hover:hover) and (pointer:fine){a:not(.a-none):not([data-stalux-card]):not(.stalux-nav-link):hover:after{transform:scaleX(1)}}a:active,a:focus-visible{text-decoration:none}@media (hover:hover) and (pointer:fine){a:hover{text-decoration:none}}a:focus{outline:none}a:focus-visible{outline:2px solid var(--stalux-accent-color);outline-offset:2px}ul{margin:0;padding:0;list-style:none}.none{display:none}.stalux-root{color:#fff;min-height:100vh}.stalux-main{min-height:calc(100vh - var(--stalux-site-header-height,3rem))}:root{--stalux-bg-color:#202020;--stalux-bg-filter:none;--stalux-site-header-min-height:3.75rem;--stalux-site-header-height:var(--stalux-site-header-min-height);--stalux-text-shadow:var(--stalux-accent-color) .08rem .08rem .18rem;--stalux-accent-color:#eab308;--stalux-accent-rgb:234 179 8;--surface-glass:var(--black-05p);--surface-glass-shadow:var(--shadow-sidebar);--card-bg:var(--surface-glass);--card-border:#ffffff1a;--card-box-shadow:0 10px 24px #00000014;--card-box-shadow-hover:0 14px 28px #0000001f;--tag-bg:#ffffff1f;--tag-bg-hover:#ffffff2e;--category-bg:#ffffff14;--category-bg-hover:#ffffff24;--date-bg:#42a0ff2e;--date-border:#42a0ff40;--updated-bg:#ffc94733;--updated-border:#ffc9474d;--white-full:#fff;--white-95p:#fffffff2;--white-90p:#ffffffe6;--white-85p:#ffffffd9;--white-80p:#ffffffe6;--white-78p:#ffffffc7;--white-75p:#ffffffbf;--white-70p:#ffffffdb;--white-60p:#fff9;--white-50p:#ffffff80;--white-30p:#ffffff4d;--white-20p:#fff3;--white-15p:#ffffff26;--white-10p:#ffffff1a;--white-05p:#ffffff0d;--black-30p:#0000004d;--black-20p:#0003;--black-15p:#00000026;--black-10p:#0000001a;--black-05p:#0000000d;--accent-90p:rgb(var(--stalux-accent-rgb) / .9);--accent-85p:rgb(var(--stalux-accent-rgb) / .85);--accent-80p:rgb(var(--stalux-accent-rgb) / .8);--accent-70p:rgb(var(--stalux-accent-rgb) / .7);--accent-60p:rgb(var(--stalux-accent-rgb) / .6);--accent-50p:rgb(var(--stalux-accent-rgb) / .5);--accent-40p:rgb(var(--stalux-accent-rgb) / .4);--accent-30p:rgb(var(--stalux-accent-rgb) / .3);--accent-20p:rgb(var(--stalux-accent-rgb) / .2);--transition-fast:.18s ease;--transition-medium:.2s ease;--transition-normal:.25s ease;--transition-slow:.3s ease;--transition-slower:.5s ease;--transition-slowest:.6s ease;--easing-bounce:cubic-bezier(.175, .885, .32, 1.275);--space-2xs:.25rem;--space-xs:.75rem;--space-sm:.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 #0000001a;--shadow-md:0 6px 16px #0003;--shadow-lg:0 8px 20px #0000004d;--shadow-xl:0 12px 26px #00000047;--shadow-sidebar:0 16px 20px -12px #000000d6, 10px 4px 16px -12px #00000094, -10px 4px 16px -12px #00000094;--shadow-raised-hover:0 20px 24px -13px #000000e6, 12px 5px 18px -13px #000000ad, -12px 5px 18px -13px #000000ad;--shadow-dark:#000000c0;--muted-text:#bbb;--font-body:"Noto Sans SC", "Noto Sans CJK SC", system-ui, sans-serif;--font-size-subtitle:1.35rem;--font-size-base:1.1rem;--font-size-small:.95rem;--font-size-smaller:.9rem;--font-size-tiny:.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 .3s ease-out}@media (hover:hover) and (pointer:fine){::-webkit-scrollbar-thumb:hover{background:#5a5a5a}}::-webkit-scrollbar-corner{background:#2a2a2a}.bg-layer{z-index:-10;background-position:50%;background-repeat:repeat;background-size:auto;background-color:var(--stalux-bg-color,transparent);filter:var(--stalux-bg-filter,none);pointer-events:none;opacity:0;forced-color-adjust:none;color-scheme:light only;transition:opacity .65s ease-in-out;position:fixed;inset:0}@media (prefers-reduced-motion:reduce){.bg-layer{transition-duration:0s}}footer{padding:var(--space-lg) var(--space-md);text-align:center;color:var(--muted-text);border-top:1px solid var(--white-10p);backdrop-filter:blur(16px);background:linear-gradient(#0c0e122e,#0c0e12b8)}}@media print{[data-stalux-offscreen-code],[data-stalux-offscreen-svg]{content-visibility:visible!important;contain-intrinsic-block-size:none!important}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}[data-stalux-home-content]{flex-direction:column;align-items:center;width:100%;display:flex}@keyframes stalux-page-exit{0%{opacity:1}to{opacity:1}}@keyframes stalux-page-enter{0%{opacity:.9}to{opacity:1}}@keyframes stalux-page-enter-back{0%{opacity:.96}to{opacity:1}}@keyframes stalux-taxonomy-enter{0%{opacity:.9}to{opacity:1}}@keyframes stalux-taxonomy-enter-back{0%{opacity:.96}to{opacity:1}}@keyframes stalux-article-enter{0%{opacity:.9}to{opacity:1}}@keyframes stalux-article-enter-back{0%{opacity:.96}to{opacity:1}}@keyframes stalux-sidebar-left-in{0%{opacity:.96}to{opacity:1}}@keyframes stalux-sidebar-left-out{0%{opacity:1}to{opacity:1}}@keyframes stalux-sidebar-left-back-in{0%{opacity:.96}to{opacity:1}}@keyframes stalux-sidebar-left-back-out{0%{opacity:1}to{opacity:1}}@keyframes stalux-sidebar-right-in{0%{opacity:.96}to{opacity:1}}@keyframes stalux-sidebar-right-out{0%{opacity:1}to{opacity:1}}@keyframes stalux-sidebar-right-back-in{0%{opacity:.96}to{opacity:1}}@keyframes stalux-sidebar-right-back-out{0%{opacity:1}to{opacity:1}}[data-stalux-scroll-sentinel]{visibility:hidden;pointer-events:none;width:1px;height:1px;position:absolute;top:240px;left:0}@media (prefers-reduced-motion:reduce){.stalux-main,.stalux-main *,.postLayout *{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}html[data-stalux-motion-pending] main[data-stalux-route]{opacity:0}
|
|
3
3
|
/*$vite$:1*/
|
package/src/styles/motion.css
CHANGED
|
@@ -7,91 +7,8 @@
|
|
|
7
7
|
}
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
/*
|
|
11
|
-
|
|
12
|
-
.stagger-children > *:nth-child(1) {
|
|
13
|
-
animation-delay: 0.1s;
|
|
14
|
-
}
|
|
15
|
-
.stagger-children > *:nth-child(2) {
|
|
16
|
-
animation-delay: 0.15s;
|
|
17
|
-
}
|
|
18
|
-
.stagger-children > *:nth-child(3) {
|
|
19
|
-
animation-delay: 0.2s;
|
|
20
|
-
}
|
|
21
|
-
.stagger-children > *:nth-child(4) {
|
|
22
|
-
animation-delay: 0.25s;
|
|
23
|
-
}
|
|
24
|
-
.stagger-children > *:nth-child(5) {
|
|
25
|
-
animation-delay: 0.3s;
|
|
26
|
-
}
|
|
27
|
-
.stagger-children > *:nth-child(n + 6) {
|
|
28
|
-
animation-delay: 0.35s;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
/* Only a bounded heading is captured by native VT. Long article/list content
|
|
32
|
-
stays in the live DOM; sidebars, navigation, footer and backgrounds stay put. */
|
|
33
|
-
html,
|
|
34
|
-
[data-astro-transition-persist],
|
|
35
|
-
.stalux-main,
|
|
36
|
-
.stalux-main *,
|
|
37
|
-
.bg-layer,
|
|
38
|
-
.bg-layer *,
|
|
39
|
-
[data-stalux-scroll-sentinel],
|
|
40
|
-
[data-stalux-back-to-top] {
|
|
41
|
-
view-transition-name: none !important;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
html[data-stalux-vt-preset] {
|
|
45
|
-
--stalux-vt-duration: 160ms;
|
|
46
|
-
--stalux-vt-distance: clamp(28px, 4vw, 40px);
|
|
47
|
-
--stalux-vt-tilt: 8deg;
|
|
48
|
-
--stalux-vt-x: var(--stalux-vt-distance);
|
|
49
|
-
--stalux-vt-y: 0px;
|
|
50
|
-
--stalux-vt-rx: 0deg;
|
|
51
|
-
--stalux-vt-ry: 0deg;
|
|
52
|
-
--stalux-vt-rz: -0.35deg;
|
|
53
|
-
--stalux-vt-scale: 1;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
html[data-stalux-vt-preset]:not([data-stalux-vt-preset="none"]) [data-stalux-motion-focus] {
|
|
57
|
-
view-transition-name: stalux-focus !important;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
::view-transition {
|
|
61
|
-
pointer-events: none;
|
|
62
|
-
}
|
|
63
|
-
::view-transition-group(stalux-focus) {
|
|
64
|
-
animation: none !important;
|
|
65
|
-
}
|
|
66
|
-
::view-transition-old(stalux-focus) {
|
|
67
|
-
display: none;
|
|
68
|
-
animation: none !important;
|
|
69
|
-
}
|
|
70
|
-
::view-transition-new(stalux-focus) {
|
|
71
|
-
mix-blend-mode: normal;
|
|
72
|
-
transform-origin: 50% 50%;
|
|
73
|
-
backface-visibility: hidden;
|
|
74
|
-
animation: stalux-content-in var(--stalux-vt-duration, 160ms) cubic-bezier(0.22, 0.7, 0.2, 1)
|
|
75
|
-
both paused;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
/* The incoming document starts paused, before it can be painted. Native ready
|
|
79
|
-
releases both the small heading and live content in the same style update. */
|
|
80
|
-
html[data-stalux-vt-phase="prepared"] [data-stalux-motion-content],
|
|
81
|
-
html[data-stalux-vt-phase="running"] [data-stalux-motion-content] {
|
|
82
|
-
transform-origin: 50% min(42vh, 400px);
|
|
83
|
-
backface-visibility: hidden;
|
|
84
|
-
animation: stalux-content-in var(--stalux-vt-duration, 160ms) cubic-bezier(0.22, 0.7, 0.2, 1)
|
|
85
|
-
both paused;
|
|
86
|
-
}
|
|
87
|
-
html[data-stalux-vt-phase="running"] [data-stalux-motion-content],
|
|
88
|
-
html[data-stalux-vt-phase="running"]::view-transition-new(stalux-focus) {
|
|
89
|
-
animation-play-state: running;
|
|
90
|
-
}
|
|
91
|
-
html[data-stalux-vt-phase] .stalux-article {
|
|
92
|
-
/* Clip a sliding paragraph at its reading card, without a scroll container. */
|
|
93
|
-
overflow: clip;
|
|
94
|
-
}
|
|
10
|
+
/* Swup's JS plugin animates one visible heading through route-motion.ts.
|
|
11
|
+
There is no full-page snapshot, waiting body, stagger or native VT layer. */
|
|
95
12
|
[data-stalux-home-content] {
|
|
96
13
|
display: flex;
|
|
97
14
|
flex-direction: column;
|
|
@@ -99,104 +16,6 @@ html[data-stalux-vt-phase] .stalux-article {
|
|
|
99
16
|
width: 100%;
|
|
100
17
|
}
|
|
101
18
|
|
|
102
|
-
/* Reading follows a horizontal page sequence; prev/next articles are siblings
|
|
103
|
-
in that sequence, so they keep a lateral glide. Vertical travel is reserved
|
|
104
|
-
for hierarchical moves (list -> detail, back up to the archive). A slower
|
|
105
|
-
260ms window keeps the longer sibling travel legible instead of abrupt. */
|
|
106
|
-
html[data-stalux-vt-preset="enter"] {
|
|
107
|
-
--stalux-vt-x: calc(var(--stalux-vt-distance) * 1.25);
|
|
108
|
-
--stalux-vt-rz: 0deg;
|
|
109
|
-
}
|
|
110
|
-
html[data-stalux-vt-preset="article"] {
|
|
111
|
-
--stalux-vt-duration: 260ms;
|
|
112
|
-
--stalux-vt-distance: clamp(36px, 5vw, 56px);
|
|
113
|
-
--stalux-vt-x: calc(var(--stalux-vt-distance) * 1.25);
|
|
114
|
-
--stalux-vt-rz: 0deg;
|
|
115
|
-
}
|
|
116
|
-
html[data-stalux-vt-preset="next"] {
|
|
117
|
-
--stalux-vt-duration: 260ms;
|
|
118
|
-
--stalux-vt-distance: clamp(36px, 5vw, 56px);
|
|
119
|
-
--stalux-vt-x: calc(var(--stalux-vt-distance) * 1.5);
|
|
120
|
-
--stalux-vt-rz: 0deg;
|
|
121
|
-
}
|
|
122
|
-
html[data-stalux-vt-preset="previous"] {
|
|
123
|
-
--stalux-vt-duration: 260ms;
|
|
124
|
-
--stalux-vt-distance: clamp(36px, 5vw, 56px);
|
|
125
|
-
--stalux-vt-x: calc(var(--stalux-vt-distance) * -1.5);
|
|
126
|
-
--stalux-vt-rz: 0deg;
|
|
127
|
-
}
|
|
128
|
-
html[data-stalux-vt-preset="up"] {
|
|
129
|
-
--stalux-vt-duration: 140ms;
|
|
130
|
-
--stalux-vt-x: calc(var(--stalux-vt-distance) * -0.75);
|
|
131
|
-
--stalux-vt-y: -10px;
|
|
132
|
-
--stalux-vt-rz: 0deg;
|
|
133
|
-
}
|
|
134
|
-
html[data-stalux-vt-preset="taxonomy"] {
|
|
135
|
-
--stalux-vt-duration: 140ms;
|
|
136
|
-
--stalux-vt-x: 0px;
|
|
137
|
-
--stalux-vt-y: 18px;
|
|
138
|
-
--stalux-vt-rx: calc(var(--stalux-vt-tilt) * -0.5);
|
|
139
|
-
--stalux-vt-rz: 0deg;
|
|
140
|
-
}
|
|
141
|
-
html[data-stalux-vt-preset="panel"] {
|
|
142
|
-
--stalux-vt-x: calc(var(--stalux-vt-distance) * 0.6);
|
|
143
|
-
--stalux-vt-ry: calc(var(--stalux-vt-tilt) * -1);
|
|
144
|
-
--stalux-vt-rz: 0deg;
|
|
145
|
-
}
|
|
146
|
-
html[data-stalux-vt-preset="panel"][data-stalux-vt-to="links"] {
|
|
147
|
-
--stalux-vt-x: 0px;
|
|
148
|
-
--stalux-vt-y: 12px;
|
|
149
|
-
--stalux-vt-rx: calc(var(--stalux-vt-tilt) * 0.75);
|
|
150
|
-
--stalux-vt-ry: 0deg;
|
|
151
|
-
}
|
|
152
|
-
html[data-stalux-vt-preset="panel"][data-stalux-vt-to="words"] {
|
|
153
|
-
--stalux-vt-x: 0px;
|
|
154
|
-
--stalux-vt-y: 16px;
|
|
155
|
-
--stalux-vt-ry: 0deg;
|
|
156
|
-
--stalux-vt-rz: -1deg;
|
|
157
|
-
}
|
|
158
|
-
html[data-stalux-vt-preset="home"] {
|
|
159
|
-
--stalux-vt-duration: 180ms;
|
|
160
|
-
--stalux-vt-x: 0px;
|
|
161
|
-
--stalux-vt-y: 20px;
|
|
162
|
-
--stalux-vt-rx: calc(var(--stalux-vt-tilt) * -0.625);
|
|
163
|
-
--stalux-vt-rz: 0deg;
|
|
164
|
-
--stalux-vt-scale: 0.985;
|
|
165
|
-
}
|
|
166
|
-
/* History restores the actual reading position. Small mirrored translation
|
|
167
|
-
signals direction without re-playing the page-entry tilt at a deep scroll. */
|
|
168
|
-
html[data-stalux-vt-preset="restore"] {
|
|
169
|
-
--stalux-vt-duration: 100ms;
|
|
170
|
-
--stalux-vt-x: 12px;
|
|
171
|
-
--stalux-vt-rz: 0deg;
|
|
172
|
-
}
|
|
173
|
-
html[data-stalux-vt-preset="restore"][data-stalux-vt-direction="back"],
|
|
174
|
-
html[data-stalux-vt-preset="restore"][data-stalux-vt-direction="backward"] {
|
|
175
|
-
--stalux-vt-x: -12px;
|
|
176
|
-
}
|
|
177
|
-
html[data-stalux-vt-preset="error"] {
|
|
178
|
-
--stalux-vt-duration: 120ms;
|
|
179
|
-
--stalux-vt-x: 0px;
|
|
180
|
-
--stalux-vt-y: 12px;
|
|
181
|
-
--stalux-vt-rz: -0.7deg;
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
@keyframes stalux-content-in {
|
|
185
|
-
from {
|
|
186
|
-
opacity: 0.25;
|
|
187
|
-
transform: perspective(1200px) translate3d(var(--stalux-vt-x), var(--stalux-vt-y), 0)
|
|
188
|
-
rotateX(var(--stalux-vt-rx)) rotateY(var(--stalux-vt-ry)) rotateZ(var(--stalux-vt-rz))
|
|
189
|
-
scale(var(--stalux-vt-scale));
|
|
190
|
-
}
|
|
191
|
-
55% {
|
|
192
|
-
opacity: 1;
|
|
193
|
-
}
|
|
194
|
-
to {
|
|
195
|
-
opacity: 1;
|
|
196
|
-
transform: perspective(1200px) translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg)
|
|
197
|
-
rotateZ(0deg) scale(1);
|
|
198
|
-
}
|
|
199
|
-
}
|
|
200
19
|
/* Public transition helpers retain their names as opacity-only compatibility
|
|
201
20
|
frames. Theme layouts no longer use them to move large content/sidebars. */
|
|
202
21
|
@keyframes stalux-page-exit {
|
|
@@ -330,35 +149,7 @@ html[data-stalux-vt-preset="error"] {
|
|
|
330
149
|
pointer-events: none;
|
|
331
150
|
}
|
|
332
151
|
|
|
333
|
-
/* Phone routes keep direction and depth with smaller travel/angles. */
|
|
334
|
-
@media (max-width: 768px) {
|
|
335
|
-
html[data-stalux-vt-preset]:not([data-stalux-vt-preset="none"]) {
|
|
336
|
-
--stalux-vt-distance: 20px;
|
|
337
|
-
--stalux-vt-tilt: 4deg;
|
|
338
|
-
}
|
|
339
|
-
html[data-stalux-vt-preset="restore"] {
|
|
340
|
-
--stalux-vt-x: 8px;
|
|
341
|
-
}
|
|
342
|
-
html[data-stalux-vt-preset="restore"][data-stalux-vt-direction="back"],
|
|
343
|
-
html[data-stalux-vt-preset="restore"][data-stalux-vt-direction="backward"] {
|
|
344
|
-
--stalux-vt-x: -8px;
|
|
345
|
-
}
|
|
346
|
-
}
|
|
347
|
-
|
|
348
152
|
@media (prefers-reduced-motion: reduce) {
|
|
349
|
-
html[data-stalux-vt-preset],
|
|
350
|
-
html[data-stalux-vt-preset] [data-astro-transition-persist] {
|
|
351
|
-
view-transition-name: none !important;
|
|
352
|
-
}
|
|
353
|
-
|
|
354
|
-
::view-transition-group(*),
|
|
355
|
-
::view-transition-old(*),
|
|
356
|
-
::view-transition-new(*) {
|
|
357
|
-
animation: none !important;
|
|
358
|
-
filter: none !important;
|
|
359
|
-
transform: none !important;
|
|
360
|
-
}
|
|
361
|
-
|
|
362
153
|
.stalux-main,
|
|
363
154
|
.stalux-main *,
|
|
364
155
|
.postLayout * {
|
|
@@ -423,3 +214,8 @@ html[data-stalux-vt-preset="error"] {
|
|
|
423
214
|
}
|
|
424
215
|
}
|
|
425
216
|
}
|
|
217
|
+
|
|
218
|
+
/* Hide only the new content between DOM replacement and its first motion frame. */
|
|
219
|
+
html[data-stalux-motion-pending] main[data-stalux-route] {
|
|
220
|
+
opacity: 0;
|
|
221
|
+
}
|
|
@@ -55,7 +55,26 @@ export function initTocScrollSpy(activeClass: string): (() => void) | undefined
|
|
|
55
55
|
activeLink = link;
|
|
56
56
|
if (link && !sidebarHovered) {
|
|
57
57
|
link.classList.add(activeClass);
|
|
58
|
-
|
|
58
|
+
// Scroll only the TOC pane. scrollIntoView also scrolls the page,
|
|
59
|
+
// fighting anchor navigation and the reader's wheel/touch input.
|
|
60
|
+
const scrollPane = sidebar?.closest<HTMLElement>("[data-stalux-scroll-pane]");
|
|
61
|
+
if (scrollPane) {
|
|
62
|
+
const item = link.getBoundingClientRect();
|
|
63
|
+
const pane = scrollPane.getBoundingClientRect();
|
|
64
|
+
const delta =
|
|
65
|
+
item.top < pane.top
|
|
66
|
+
? item.top - pane.top
|
|
67
|
+
: item.bottom > pane.bottom
|
|
68
|
+
? item.bottom - pane.bottom
|
|
69
|
+
: 0;
|
|
70
|
+
if (delta)
|
|
71
|
+
scrollPane.scrollTo({
|
|
72
|
+
top: scrollPane.scrollTop + delta,
|
|
73
|
+
behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches
|
|
74
|
+
? "instant"
|
|
75
|
+
: "smooth",
|
|
76
|
+
});
|
|
77
|
+
}
|
|
59
78
|
} else if (link) {
|
|
60
79
|
// 用户正在操作侧边栏时只高亮,不自动滚动
|
|
61
80
|
link.classList.add(activeClass);
|
|
@@ -107,19 +126,7 @@ export function initTocScrollSpy(activeClass: string): (() => void) | undefined
|
|
|
107
126
|
|
|
108
127
|
for (const h of headings) observer.observe(h);
|
|
109
128
|
|
|
110
|
-
//
|
|
111
|
-
for (const link of tocLinks) {
|
|
112
|
-
link.addEventListener(
|
|
113
|
-
"click",
|
|
114
|
-
(event) => {
|
|
115
|
-
event.preventDefault();
|
|
116
|
-
const id = link.getAttribute("href")?.replace("#", "");
|
|
117
|
-
const target = id ? document.getElementById(id) : null;
|
|
118
|
-
target?.scrollIntoView({ behavior: "smooth", block: "start" });
|
|
119
|
-
},
|
|
120
|
-
{ signal: controller.signal },
|
|
121
|
-
);
|
|
122
|
-
}
|
|
129
|
+
// Swup owns anchor scrolling, history and interruption for TOC links too.
|
|
123
130
|
|
|
124
131
|
return () => {
|
|
125
132
|
controller.abort();
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
/** Enhance visible static months; never hide or collapse archive content. */
|
|
2
|
-
export function mountArchiveReveal() {
|
|
3
|
-
const months = [...document.querySelectorAll<HTMLElement>("[data-archive-month]")];
|
|
4
|
-
if (
|
|
5
|
-
!months.length ||
|
|
6
|
-
typeof IntersectionObserver === "undefined" ||
|
|
7
|
-
typeof months[0]?.animate !== "function"
|
|
8
|
-
)
|
|
9
|
-
return;
|
|
10
|
-
|
|
11
|
-
const motion = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
12
|
-
const print = window.matchMedia("print");
|
|
13
|
-
const visible = new Set<HTMLElement>();
|
|
14
|
-
const played = new Set<HTMLElement>();
|
|
15
|
-
const animations = new Map<Animation, () => void>();
|
|
16
|
-
let disposed = false;
|
|
17
|
-
|
|
18
|
-
const cancelAnimations = () => {
|
|
19
|
-
for (const [animation, finish] of animations) {
|
|
20
|
-
animation.removeEventListener("finish", finish);
|
|
21
|
-
animation.cancel();
|
|
22
|
-
}
|
|
23
|
-
animations.clear();
|
|
24
|
-
};
|
|
25
|
-
const reveal = () => {
|
|
26
|
-
if (disposed || document.hidden) return;
|
|
27
|
-
for (const month of visible) {
|
|
28
|
-
if (played.has(month)) continue;
|
|
29
|
-
played.add(month);
|
|
30
|
-
observer.unobserve(month);
|
|
31
|
-
if (motion.matches || print.matches) continue;
|
|
32
|
-
const animation = month.animate(
|
|
33
|
-
[
|
|
34
|
-
{ opacity: 0, transform: "translateY(8px)" },
|
|
35
|
-
{ opacity: 1, transform: "translateY(0)" },
|
|
36
|
-
],
|
|
37
|
-
{ duration: 280, easing: "cubic-bezier(0.22, 1, 0.36, 1)" },
|
|
38
|
-
);
|
|
39
|
-
const finish = () => {
|
|
40
|
-
animation.removeEventListener("finish", finish);
|
|
41
|
-
animations.delete(animation);
|
|
42
|
-
animation.cancel();
|
|
43
|
-
};
|
|
44
|
-
animations.set(animation, finish);
|
|
45
|
-
animation.addEventListener("finish", finish);
|
|
46
|
-
}
|
|
47
|
-
};
|
|
48
|
-
const observer = new IntersectionObserver((entries) => {
|
|
49
|
-
if (disposed) return;
|
|
50
|
-
for (const entry of entries) {
|
|
51
|
-
const month = entry.target as HTMLElement;
|
|
52
|
-
if (entry.isIntersecting) visible.add(month);
|
|
53
|
-
else visible.delete(month);
|
|
54
|
-
}
|
|
55
|
-
reveal();
|
|
56
|
-
});
|
|
57
|
-
const update = () => {
|
|
58
|
-
if (document.hidden || motion.matches || print.matches) cancelAnimations();
|
|
59
|
-
reveal();
|
|
60
|
-
};
|
|
61
|
-
for (const month of months) observer.observe(month);
|
|
62
|
-
document.addEventListener("visibilitychange", update);
|
|
63
|
-
window.addEventListener("beforeprint", cancelAnimations);
|
|
64
|
-
motion.addEventListener("change", update);
|
|
65
|
-
print.addEventListener("change", update);
|
|
66
|
-
return () => {
|
|
67
|
-
disposed = true;
|
|
68
|
-
observer.disconnect();
|
|
69
|
-
cancelAnimations();
|
|
70
|
-
visible.clear();
|
|
71
|
-
document.removeEventListener("visibilitychange", update);
|
|
72
|
-
window.removeEventListener("beforeprint", cancelAnimations);
|
|
73
|
-
motion.removeEventListener("change", update);
|
|
74
|
-
print.removeEventListener("change", update);
|
|
75
|
-
};
|
|
76
|
-
}
|