Skip to content

Commit 7bf5660

Browse files
author
Azek431
committed
style: 追加 v4 质感层 - 玻璃模糊、极光动效、噪点纹理、光泽扫过
Aurora 渐变背景、html::after SVG 噪点、卡片光泽扫过、标题/按钮渐变流光、内联代码玻璃药丸、滚动条渐变、侧边栏激活条、玻璃 Footer 与 NavBar，并兼容 prefers-reduced-motion。
1 parent 399a910 commit 7bf5660

1 file changed

Lines changed: 280 additions & 0 deletions

File tree

‎docs/.vitepress/theme/styles/cysj-ultimate.css‎

Lines changed: 280 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3043,3 +3043,283 @@ body {
30433043
}
30443044

30453045
/* Azek431 doc reading balance end */
3046+
3047+
/* ============================================================
3048+
* 4. CYSJ Ultimate V4 - Premium Glass Aurora Grain
3049+
* Loaded last, overrides earlier layers.
3050+
* ============================================================ */
3051+
3052+
:root {
3053+
--cysj-grain: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 200 200%27><filter id=%27n%27><feTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%272%27 stitchTiles=%27stitch%27/><feColorMatrix values=%270 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0%27/></filter><rect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/></svg>");
3054+
--cysj-glass-stroke: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.12) 38%, rgba(255,255,255,0) 60%, rgba(255,255,255,.18));
3055+
--cysj-aurora-1: radial-gradient(60% 50% at 18% 12%, rgba(99,102,241,.30), transparent 70%);
3056+
--cysj-aurora-2: radial-gradient(55% 45% at 82% 24%, rgba(14,165,233,.28), transparent 70%);
3057+
--cysj-aurora-3: radial-gradient(70% 55% at 50% 92%, rgba(236,72,153,.22), transparent 70%);
3058+
}
3059+
3060+
.dark {
3061+
--cysj-glass-stroke: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.04) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,.08));
3062+
--cysj-aurora-1: radial-gradient(60% 50% at 18% 12%, rgba(99,102,241,.45), transparent 70%);
3063+
--cysj-aurora-2: radial-gradient(55% 45% at 82% 24%, rgba(14,165,233,.38), transparent 70%);
3064+
--cysj-aurora-3: radial-gradient(70% 55% at 50% 92%, rgba(236,72,153,.30), transparent 70%);
3065+
}
3066+
3067+
/* 4.1 Global grain overlay */
3068+
html::after {
3069+
content: "";
3070+
position: fixed;
3071+
inset: 0;
3072+
pointer-events: none;
3073+
z-index: 9999;
3074+
background-image: var(--cysj-grain);
3075+
background-size: 200px 200px;
3076+
opacity: .045;
3077+
mix-blend-mode: overlay;
3078+
}
3079+
.dark html::after { opacity: .08; mix-blend-mode: soft-light; }
3080+
3081+
/* 4.2 Aurora animated background */
3082+
body::before {
3083+
content: "";
3084+
position: fixed;
3085+
inset: -10vh -10vw;
3086+
pointer-events: none;
3087+
z-index: -1;
3088+
background: var(--cysj-aurora-1), var(--cysj-aurora-2), var(--cysj-aurora-3);
3089+
filter: blur(40px) saturate(140%);
3090+
animation: cysjAurora 22s ease-in-out infinite alternate;
3091+
}
3092+
@keyframes cysjAurora {
3093+
0% { transform: translate3d(0,0,0) scale(1); }
3094+
50% { transform: translate3d(2vw,-1.5vh,0) scale(1.06); }
3095+
100% { transform: translate3d(-1.5vw,1vh,0) scale(0.97); }
3096+
}
3097+
3098+
/* 4.3 Premium glass card hairline */
3099+
.VPFeature, .VPHero .VPImage, .VPDoc aside, .VPBadge {
3100+
position: relative;
3101+
}
3102+
.VPFeature::before, .VPDoc aside::before {
3103+
content: "";
3104+
position: absolute;
3105+
inset: 0;
3106+
border-radius: inherit;
3107+
padding: 1px;
3108+
background: var(--cysj-glass-stroke);
3109+
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
3110+
-webkit-mask-composite: xor;
3111+
mask-composite: exclude;
3112+
pointer-events: none;
3113+
opacity: .9;
3114+
}
3115+
3116+
/* 4.4 Shimmer sweep on hover */
3117+
.VPFeature { overflow: hidden; isolation: isolate; }
3118+
.VPFeature::after {
3119+
content: "";
3120+
position: absolute;
3121+
inset: -2px;
3122+
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.28) 48%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.28) 52%, transparent 70%);
3123+
transform: translateX(-120%);
3124+
transition: transform .9s cubic-bezier(.16,.84,.32,1);
3125+
pointer-events: none;
3126+
mix-blend-mode: overlay;
3127+
}
3128+
.VPFeature:hover::after { transform: translateX(120%); }
3129+
.dark .VPFeature::after { background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.12) 48%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.12) 52%, transparent 70%); }
3130+
3131+
/* 4.5 Heading shine gradient */
3132+
.VPDoc h1, .VPDoc h2, .VPDoc h3 {
3133+
background: linear-gradient(120deg, #2563eb 0%, #0ea5e9 50%, #6366f1 100%);
3134+
-webkit-background-clip: text;
3135+
background-clip: text;
3136+
-webkit-text-fill-color: transparent;
3137+
position: relative;
3138+
background-size: 200% 100%;
3139+
animation: cysjHeadShine 8s linear infinite;
3140+
}
3141+
@keyframes cysjHeadShine {
3142+
0% { background-position: 0% 50%; }
3143+
100% { background-position: 200% 50%; }
3144+
}
3145+
3146+
/* 4.6 Link arrow micro-anim */
3147+
.vp-doc a:not(.VPButton):not(.no-icon):after,
3148+
.VPDoc a:not(.VPButton):not(.no-icon):after {
3149+
content: "2192";
3150+
display: inline-block;
3151+
margin-left: .25em;
3152+
font-weight: 600;
3153+
opacity: 0;
3154+
transform: translateX(-4px);
3155+
transition: opacity .25s ease, transform .25s ease;
3156+
color: var(--cysj-brand, #2563eb);
3157+
-webkit-text-fill-color: currentColor;
3158+
background: none;
3159+
}
3160+
.vp-doc a:not(.VPButton):not(.no-icon):hover:after,
3161+
.VPDoc a:not(.VPButton):not(.no-icon):hover:after { opacity: 1; transform: translateX(0); }
3162+
3163+
/* 4.7 Inline code glass pill */
3164+
.vp-doc :not(pre) > code, .VPDoc :not(pre) > code {
3165+
background: linear-gradient(180deg, rgba(99,102,241,.10), rgba(14,165,233,.08)) !important;
3166+
border: 1px solid rgba(99,102,241,.18);
3167+
border-radius: 6px;
3168+
padding: 0 .4em;
3169+
box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 0 rgba(15,23,42,.04);
3170+
transition: transform .15s ease, box-shadow .2s ease;
3171+
}
3172+
.vp-doc :not(pre) > code:hover, .VPDoc :not(pre) > code:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 10px -4px rgba(99,102,241,.35); }
3173+
.dark .vp-doc :not(pre) > code, .dark .VPDoc :not(pre) > code { background: linear-gradient(180deg, rgba(99,102,241,.18), rgba(14,165,233,.12)) !important; border-color: rgba(99,102,241,.30); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
3174+
3175+
/* 4.8 Selection tint */
3176+
::selection { background: linear-gradient(120deg, rgba(99,102,241,.35), rgba(14,165,233,.30)); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.2); }
3177+
::-moz-selection { background: rgba(99,102,241,.35); color: #fff; }
3178+
3179+
/* 4.9 Scrollbar gradient thumb */
3180+
::-webkit-scrollbar { width: 10px; height: 10px; }
3181+
::-webkit-scrollbar-track { background: transparent; }
3182+
::-webkit-scrollbar-thumb {
3183+
background: linear-gradient(180deg, rgba(99,102,241,.55), rgba(14,165,233,.55));
3184+
border-radius: 999px;
3185+
border: 2px solid transparent;
3186+
background-clip: padding-box;
3187+
}
3188+
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(99,102,241,.8), rgba(14,165,233,.8)); background-clip: padding-box; }
3189+
3190+
/* 4.10 Sidebar active gradient bar */
3191+
.VPSidebarItem.is-active > .item .link,
3192+
.VPSidebarItem.is-active > .item .link:hover {
3193+
background: linear-gradient(90deg, rgba(99,102,241,.18), rgba(14,165,233,.10) 60%, transparent) !important;
3194+
color: var(--cysj-brand, #2563eb) !important;
3195+
font-weight: 600;
3196+
box-shadow: inset 3px 0 0 var(--cysj-brand, #2563eb);
3197+
}
3198+
3199+
/* 4.11 Hero name gradient */
3200+
.VPHero .name, .VPHero .text .name {
3201+
background: linear-gradient(120deg, #2563eb 0%, #6366f1 30%, #0ea5e9 55%, #ec4899 90%);
3202+
-webkit-background-clip: text;
3203+
background-clip: text;
3204+
-webkit-text-fill-color: transparent;
3205+
background-size: 250% 100%;
3206+
animation: cysjHeroName 10s ease-in-out infinite;
3207+
filter: drop-shadow(0 6px 20px rgba(99,102,241,.25));
3208+
}
3209+
@keyframes cysjHeroName {
3210+
0%,100% { background-position: 0% 50%; }
3211+
50% { background-position: 100% 50%; }
3212+
}
3213+
3214+
/* 4.12 Hero crystal float */
3215+
.VPHero .VPImage, .VPHomeHero .image, .VPHero .container .image, .VPHero img.image {
3216+
animation: cysjFloat 6s ease-in-out infinite;
3217+
}
3218+
@keyframes cysjFloat {
3219+
0%,100% { transform: translateY(0) rotate(0); }
3220+
50% { transform: translateY(-10px) rotate(0.6deg); }
3221+
}
3222+
3223+
/* 4.13 Tag chips */
3224+
.VPBadge, .vp-doc .badge, .VPHero .VPBadge {
3225+
background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.2)) !important;
3226+
border: 1px solid rgba(99,102,241,.25) !important;
3227+
backdrop-filter: blur(6px) saturate(160%);
3228+
box-shadow: 0 2px 6px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.5);
3229+
color: var(--cysj-brand, #2563eb) !important;
3230+
}
3231+
.dark .VPBadge, .dark .vp-doc .badge { background: linear-gradient(180deg, rgba(99,102,241,.18), rgba(14,165,233,.10)) !important; border-color: rgba(99,102,241,.40) !important; }
3232+
3233+
/* 4.14 Tables premium header */
3234+
.vp-doc table thead th, .VPDoc table thead th {
3235+
background: linear-gradient(180deg, rgba(99,102,241,.10), rgba(14,165,233,.05)) !important;
3236+
color: var(--cysj-brand, #2563eb) !important;
3237+
font-weight: 700;
3238+
letter-spacing: .02em;
3239+
border-bottom: 2px solid rgba(99,102,241,.25) !important;
3240+
}
3241+
3242+
/* 4.15 Blockquote gradient bar */
3243+
.vp-doc blockquote, .VPDoc blockquote {
3244+
position: relative;
3245+
background:
3246+
linear-gradient(180deg, rgba(99,102,241,.06), rgba(14,165,233,.04)),
3247+
var(--cysj-surface, #f8fafc) !important;
3248+
border-left: 4px solid transparent;
3249+
border-image: linear-gradient(180deg, #6366f1, #0ea5e9) 1;
3250+
box-shadow: 0 4px 18px -8px rgba(99,102,241,.35);
3251+
}
3252+
3253+
/* 4.16 Custom containers */
3254+
.vp-doc .custom-block, .VPDoc .custom-block {
3255+
background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.4)) !important;
3256+
backdrop-filter: blur(8px) saturate(160%);
3257+
border: 1px solid rgba(99,102,241,.18);
3258+
box-shadow: 0 6px 24px -10px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.6);
3259+
}
3260+
.dark .vp-doc .custom-block, .dark .VPDoc .custom-block { background: linear-gradient(180deg, rgba(30,41,59,.55), rgba(15,23,42,.45)) !important; border-color: rgba(99,102,241,.30); }
3261+
3262+
/* 4.17 Footer glass */
3263+
.VPFooter {
3264+
position: relative;
3265+
background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.35)) !important;
3266+
backdrop-filter: blur(10px) saturate(160%);
3267+
border-top: 1px solid rgba(99,102,241,.18);
3268+
box-shadow: 0 -8px 24px -16px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.5);
3269+
}
3270+
.VPFooter::before {
3271+
content: "";
3272+
position: absolute; top: 0; left: 0; right: 0; height: 1px;
3273+
background: linear-gradient(90deg, transparent, rgba(99,102,241,.6), rgba(14,165,233,.6), transparent);
3274+
}
3275+
.dark .VPFooter { background: linear-gradient(180deg, rgba(15,23,42,.6), rgba(15,23,42,.4)) !important; border-top-color: rgba(99,102,241,.3); }
3276+
3277+
/* 4.18 Nav glass */
3278+
.VPNavBar {
3279+
background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.55)) !important;
3280+
backdrop-filter: saturate(180%) blur(18px) !important;
3281+
-webkit-backdrop-filter: saturate(180%) blur(18px) !important;
3282+
border-bottom: 1px solid rgba(99,102,241,.18) !important;
3283+
box-shadow: 0 6px 24px -16px rgba(15,23,42,.22), inset 0 -1px 0 rgba(99,102,241,.18);
3284+
}
3285+
.dark .VPNavBar { background: linear-gradient(180deg, rgba(15,23,42,.7), rgba(15,23,42,.5)) !important; border-bottom-color: rgba(99,102,241,.3) !important; }
3286+
3287+
/* 4.19 Pager glass */
3288+
.pager-link, .VPPager a {
3289+
background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.35)) !important;
3290+
backdrop-filter: blur(8px) saturate(160%);
3291+
border: 1px solid rgba(99,102,241,.18) !important;
3292+
box-shadow: 0 4px 14px -8px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.55);
3293+
position: relative;
3294+
overflow: hidden;
3295+
}
3296+
.dark .pager-link, .dark .VPPager a { background: linear-gradient(180deg, rgba(30,41,59,.55), rgba(15,23,42,.45)) !important; border-color: rgba(99,102,241,.30) !important; }
3297+
3298+
/* 4.20 Outline active */
3299+
.outline-link.active, .VPDocOutline .outline-link.active {
3300+
color: var(--cysj-brand, #2563eb) !important;
3301+
font-weight: 600;
3302+
background: linear-gradient(90deg, rgba(99,102,241,.16), transparent) !important;
3303+
box-shadow: inset 2px 0 0 var(--cysj-brand, #2563eb) !important;
3304+
}
3305+
3306+
/* 4.21 Brand button shine */
3307+
.VPButton.brand, button.VPButton.brand {
3308+
background-image: linear-gradient(135deg, #6366f1, #2563eb 50%, #0ea5e9) !important;
3309+
background-size: 200% 200% !important;
3310+
box-shadow: 0 10px 24px -10px rgba(99,102,241,.55), inset 0 1px 0 rgba(255,255,255,.4) !important;
3311+
animation: cysjBtnShine 5s ease-in-out infinite;
3312+
border: 1px solid rgba(255,255,255,.25) !important;
3313+
}
3314+
.VPButton.brand:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(99,102,241,.7), inset 0 1px 0 rgba(255,255,255,.5) !important; }
3315+
@keyframes cysjBtnShine {
3316+
0%,100% { background-position: 0% 50%; }
3317+
50% { background-position: 100% 50%; }
3318+
}
3319+
3320+
/* 4.22 Reduced motion */
3321+
@media (prefers-reduced-motion: reduce) {
3322+
body::before, .VPFeature::after, .VPHero .VPImage, .VPHomeHero .image, .VPHero img.image,
3323+
.VPHero .name, .VPHero .text .name, .VPDoc h1, .VPDoc h2, .VPDoc h3, .VPButton.brand { animation: none !important; }
3324+
html::after { display: none; }
3325+
}

0 commit comments

Comments
 (0)