自定义 CSS 主题，Windows Vista Aero Glass × Frutiger Aero 风格

/* sb.sb · Vista Aero Glass / Frutiger Aero */

:root{
color-scheme:light;
--sky:#087fc4;
--aqua:#00d4ff;
--cyan:#00bddd;
--blue:#056b91;
--deep:#02384f;
--green:#2ecc71;
--green-deep:#087a4b;

--text:#073b57;
--text-2:#1f5e7d;
--muted:#4d7d95;
--disabled:#789bad;
--white:#fff;

--glass:
linear-gradient(180deg,
rgba(255,255,255,.28) 0,
rgba(163,239,255,.17) 18%,
rgba(0,157,202,.15) 52%,
rgba(1,65,91,.34) 100%);
--glass-soft:
linear-gradient(180deg,
rgba(255,255,255,.2),
rgba(103,225,248,.12) 46%,
rgba(0,66,91,.22));
--glass-dark:
linear-gradient(180deg,
rgba(17,73,96,.82),
rgba(2,42,62,.93));

--field:
linear-gradient(180deg,
rgba(255,255,255,.34),
rgba(185,239,251,.14) 20%,
rgba(0,64,88,.28));

--button:
linear-gradient(180deg,
rgba(255,255,255,.68) 0,
rgba(87,227,250,.82) 13%,
#00d4ff 46%,
#08a5d7 72%,
#056b91 100%);

--button-hot:
linear-gradient(180deg,
rgba(255,255,255,.77) 0,
rgba(134,238,255,.88) 13%,
#27dcff 46%,
#0cb5e8 72%,
#087ca8 100%);

--button-pressed:
linear-gradient(180deg,#056b91,#047da5 56%,#00a5d4);

--line:rgba(171,241,255,.36);
--line-soft:rgba(171,241,255,.19);
--line-dark:rgba(0,62,88,.34);

--shadow:
0 7px 20px rgba(0,28,43,.28),
0 1px 4px rgba(0,75,102,.18);

--inset:
inset 0 1px 0 rgba(255,255,255,.7),
inset 0 -2px 4px rgba(0,36,52,.34);

--focus:
0 0 0 1px rgba(0,177,224,.38),
0 0 9px rgba(0,212,255,.2);

--font:"Segoe UI","Microsoft YaHei","PingFang SC",Arial,sans-serif;
--mono:"Cascadia Mono","Consolas",monospace;
}

:root[data-theme=dark]{
color-scheme:dark;
--text:#e6f8fd;
--text-2:#c0e0eb;
--muted:#8db7c8;
--disabled:#648597;

--glass:
linear-gradient(180deg,
rgba(75,164,193,.23) 0,
rgba(16,91,119,.25) 21%,
rgba(3,60,85,.55) 58%,
rgba(1,31,49,.77) 100%);

--glass-soft:
linear-gradient(180deg,
rgba(101,194,219,.18),
rgba(9,77,103,.28) 46%,
rgba(1,34,52,.56));

--field:
linear-gradient(180deg,
rgba(33,91,118,.56),
rgba(7,48,69,.72));

--line:rgba(105,219,250,.27);
--line-soft:rgba(105,219,250,.13);
--line-dark:rgba(0,20,35,.5);
--shadow:
0 8px 24px rgba(0,0,0,.4),
0 1px 5px rgba(0,0,0,.3);
--inset:
inset 0 1px 0 rgba(190,242,255,.17),
inset 0 -2px 5px rgba(0,0,0,.37);
}

@media (prefers-color-scheme:dark){
:root:not([data-theme=light]){
color-scheme:dark;
--text:#e6f8fd;
--text-2:#c0e0eb;
--muted:#8db7c8;
--disabled:#648597;

--glass:
  linear-gradient(180deg,
    rgba(75,164,193,.23) 0,
    rgba(16,91,119,.25) 21%,
    rgba(3,60,85,.55) 58%,
    rgba(1,31,49,.77) 100%);

--glass-soft:
  linear-gradient(180deg,
    rgba(101,194,219,.18),
    rgba(9,77,103,.28) 46%,
    rgba(1,34,52,.56));

--field:
  linear-gradient(180deg,
    rgba(33,91,118,.56),
    rgba(7,48,69,.72));

--line:rgba(105,219,250,.27);
--line-soft:rgba(105,219,250,.13);
--line-dark:rgba(0,20,35,.5);
--shadow:
  0 8px 24px rgba(0,0,0,.4),
  0 1px 5px rgba(0,0,0,.3);
--inset:
  inset 0 1px 0 rgba(190,242,255,.17),
  inset 0 -2px 5px rgba(0,0,0,.37);

}
}

html{
background:#02384f;
scrollbar-width:thin;
scrollbar-color:#17afd9 rgba(1,45,64,.72);
}

body{
min-height:100vh;
margin:0;
color:var(--text);
font-family:var(--font);
background-color:#04709f;
background-image:
radial-gradient(360px 180px at 86% 1%,rgba(255,247,212,.34),transparent 72%),
radial-gradient(900px 330px at 56% -12%,rgba(165,241,255,.25),transparent 66%),
linear-gradient(116deg,transparent 31%,rgba(255,255,255,.09) 40%,transparent 50%),
linear-gradient(72deg,transparent 56%,rgba(255,255,255,.06) 63%,transparent 70%),
repeating-radial-gradient(
ellipse at 52% 110%,
transparent 0 35px,
rgba(183,248,255,.055) 37px 39px,
transparent 41px 76px),
radial-gradient(circle at 9% 66%,rgba(255,255,255,.08) 0 3px,transparent 4px),
radial-gradient(circle at 18% 78%,rgba(255,255,255,.1) 0 5px,transparent 6px),
radial-gradient(circle at 79% 51%,rgba(255,255,255,.09) 0 3px,transparent 4px),
radial-gradient(circle at 91% 73%,rgba(255,255,255,.08) 0 6px,transparent 7px),
linear-gradient(180deg,
#087fc4 0,
#056f96 27%,
#045675 49%,
#03415b 70%,
#023447 88%,
#022a3a 100%);
background-attachment:fixed;
overflow-x:hidden;
}

body::before,
body::after{
content:"";
position:fixed;
inset:0;
pointer-events:none;
z-index:0;
}

body::before{
opacity:.7;
background:
linear-gradient(110deg,transparent 0 42%,rgba(255,255,255,.035) 46%,transparent 52%),
linear-gradient(72deg,transparent 0 61%,rgba(153,241,255,.04) 67%,transparent 74%),
radial-gradient(ellipse at 12% 104%,rgba(31,145,91,.22),transparent 17%),
radial-gradient(ellipse at 27% 106%,rgba(46,204,113,.17),transparent 14%),
radial-gradient(ellipse at 52% 108%,rgba(12,118,74,.2),transparent 17%),
radial-gradient(ellipse at 74% 104%,rgba(46,204,113,.14),transparent 16%),
radial-gradient(ellipse at 93% 108%,rgba(16,126,81,.2),transparent 14%);
filter:blur(.2px);
}

body::after{
opacity:.42;
background:
radial-gradient(circle at 15% 58%,rgba(255,255,255,.1) 0 2px,transparent 3px),
radial-gradient(circle at 31% 72%,rgba(255,255,255,.08) 0 4px,transparent 5px),
radial-gradient(circle at 62% 63%,rgba(255,255,255,.1) 0 2px,transparent 3px),
radial-gradient(circle at 83% 38%,rgba(255,255,255,.08) 0 4px,transparent 5px),
repeating-linear-gradient(171deg,transparent 0 27px,rgba(170,244,255,.025) 28px 29px,transparent 30px 58px);
}

body>*{
position:relative;
z-index:1;
}

:root[data-theme=dark] body,
body[data-theme=dark]{
background-color:#03283f;
background-image:
radial-gradient(370px 190px at 86% 2%,rgba(155,230,255,.18),transparent 72%),
radial-gradient(900px 340px at 56% -12%,rgba(73,163,208,.15),transparent 66%),
linear-gradient(116deg,transparent 31%,rgba(188,240,255,.04) 40%,transparent 50%),
linear-gradient(72deg,transparent 56%,rgba(188,240,255,.03) 63%,transparent 70%),
repeating-radial-gradient(
ellipse at 52% 110%,
transparent 0 35px,
rgba(123,217,242,.03) 37px 39px,
transparent 41px 76px),
radial-gradient(circle at 10% 66%,rgba(177,235,255,.05) 0 3px,transparent 4px),
radial-gradient(circle at 29% 75%,rgba(177,235,255,.05) 0 4px,transparent 5px),
radial-gradient(circle at 78% 47%,rgba(177,235,255,.05) 0 3px,transparent 4px),
linear-gradient(180deg,#05638d 0,#044d70 27%,#033e5d 49%,#03334e 70%,#02273d 88%,#021e31 100%);
}

:root[data-theme=dark] body::before,
body[data-theme=dark]::before{
background:
linear-gradient(110deg,transparent 0 42%,rgba(185,238,255,.018) 46%,transparent 52%),
linear-gradient(72deg,transparent 0 61%,rgba(107,219,244,.025) 67%,transparent 74%),
radial-gradient(ellipse at 12% 104%,rgba(25,104,69,.25),transparent 17%),
radial-gradient(ellipse at 27% 106%,rgba(46,151,91,.18),transparent 14%),
radial-gradient(ellipse at 52% 108%,rgba(12,91,62,.22),transparent 17%),
radial-gradient(ellipse at 74% 104%,rgba(34,144,84,.15),transparent 16%),
radial-gradient(ellipse at 93% 108%,rgba(15,98,67,.22),transparent 14%);
}

::selection{
color:#003b50;
background:rgba(107,235,255,.66);
}

a{
color:#047fb8;
text-decoration-color:transparent;
text-underline-offset:2px;
text-shadow:0 1px 0 rgba(255,255,255,.3);
transition:color .14s,background .14s,box-shadow .14s,text-shadow .14s;
}

a:hover{
color:#056b91;
text-decoration-color:currentColor;
text-shadow:0 0 6px rgba(0,212,255,.22);
}

:root[data-theme=dark] a,
body[data-theme=dark] a{
color:#75dcff;
}

:root[data-theme=dark] a:hover,
body[data-theme=dark] a:hover{
color:#b1efff;
}

:focus-visible{
outline:1px solid rgba(77,224,255,.9);
outline-offset:1px;
box-shadow:var(--focus);
}

.top{
background:
linear-gradient(180deg,
rgba(255,255,255,.42) 0,
rgba(191,247,255,.22) 16%,
rgba(51,198,230,.1) 50%,
rgba(0,74,102,.22));
border-bottom:1px solid rgba(167,237,253,.42);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.75),
0 2px 8px rgba(0,42,63,.22);
backdrop-filter:blur(12px) saturate(130%);
-webkit-backdrop-filter:blur(12px) saturate(130%);
}

.forum-more-region,
.mobile-menu-drawer,
.post-list,
.topic-toolbar,
.reply-head,
.post-topic-title,
.forum-head,
.breadcrumb,
.reply-panel,
.form-panel,
.card,
.auth-panel,
.doc-head,
.error-panel,
.modal-panel,
.nav-user-menu,
.pin-menu-pop,
.mention-pop,
.smoji-panel,
.user-card-pop,
.quote-hover{
background:var(--glass);
border-color:var(--line);
box-shadow:var(--shadow),var(--inset);
backdrop-filter:blur(11px) saturate(125%);
-webkit-backdrop-filter:blur(11px) saturate(125%);
}

.forum-more-region{
border-top:1px solid rgba(255,255,255,.35);
}

.topic-toolbar,
.reply-head,
.post-topic-title,
.forum-head,
.breadcrumb{
background:var(--glass-soft);
border-color:var(--line-soft);
}

.mobile-menu-drawer{
background:var(--glass);
box-shadow:12px 0 28px rgba(0,23,36,.32),var(--inset);
}

.post-list,
.reply-panel,
.form-panel,
.card,
.auth-panel,
.doc-head,
.error-panel{
border:1px solid var(--line);
}

.search-form{
background:var(--field);
border:1px solid rgba(0,92,133,.34);
border-top-color:rgba(255,255,255,.65);
box-shadow:
inset 0 1px 3px rgba(0,52,80,.2),
0 1px 0 rgba(255,255,255,.46);
}

.search-form:focus-within{
border-color:rgba(0,192,235,.8);
box-shadow:
inset 0 1px 3px rgba(0,52,80,.16),
0 0 0 2px rgba(0,190,255,.16),
0 0 10px rgba(0,212,255,.18);
}

.search-form .search-input{
background:transparent;
border:0;
box-shadow:none;
}

.search-btn{
color:#087fb8;
}

.search-btn:hover{
color:#056b91;
text-decoration:none;
box-shadow:none;
}

.nav-mine,
.script-toggle button,
.locked-notice-action,
.verify-banner-btn,
.post-action-form button,
.pagination a,
.topic-pages a,
.post-tag,
.post-forum-badge,
.post-user-level{
border:1px solid rgba(0,104,148,.3);
border-top-color:rgba(255,255,255,.65);
border-radius:5px;
background:var(--glass-soft);
box-shadow:var(--inset);
}

.nav-mine:hover,
.script-toggle button:hover,
.locked-notice-action:hover,
.verify-banner-btn:hover,
.post-action-form button:hover,
.post-tag:hover,
.post-forum-badge:hover{
color:#056b91;
border-color:rgba(0,154,204,.55);
background:
linear-gradient(180deg,
rgba(255,255,255,.4),
rgba(79,220,247,.18),
rgba(0,87,116,.22));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.72),
0 0 8px rgba(0,212,255,.12);
}

.theme-toggle{
background:rgba(255,255,255,.22);
}

.theme-toggle:hover{
background:rgba(95,227,249,.14);
box-shadow:none;
}

.brand{
color:#5d4200;
background:
linear-gradient(180deg,
rgba(255,255,255,.7),
#ffe99a 15%,
#ffd95c 54%,
#efa900 100%);
border:1px solid rgba(184,130,0,.38);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.82),
inset 0 -2px 3px rgba(146,95,0,.15),
0 1px 3px rgba(92,68,0,.22);
}

button,
.btn,
.btn-post,
.tab-post,
.forum-link.active,
.side-auth a:first-child,
.pagination li.active a,
.poll-vote-btn,
.lottery-enter-btn,
.bounty-accept-btn,
.reply-login-box a,
.admin-head-add,
.invite-generate{
color:#fff;
border:1px solid rgba(0,69,103,.62);
border-top-color:rgba(255,255,255,.58);
border-radius:6px;
background:var(--button);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.68),
inset 0 -2px 3px rgba(0,49,71,.43),
0 2px 5px rgba(0,31,48,.28);
text-shadow:0 1px 2px rgba(0,43,63,.62);
transition:filter .12s,box-shadow .12s,transform .08s,background .12s;
}

button:hover,
.btn:hover,
.btn-post:hover,
.tab-post:hover,
.forum-link.active:hover,
.side-auth a:first-child:hover,
.pagination li.active a:hover,
.poll-vote-btn:hover,
.lottery-enter-btn:hover,
.bounty-accept-btn:hover,
.reply-login-box a:hover,
.admin-head-add:hover,
.invite-generate:hover{
color:#fff;
background:var(--button-hot);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.8),
inset 0 -2px 3px rgba(0,49,71,.38),
0 3px 8px rgba(0,34,50,.27),
0 0 10px rgba(0,212,255,.18);
filter:saturate(1.05);
}

button:active,
.btn:active,
.btn-post:active,
.tab-post:active,
.pagination li.active a:active,
.side-auth a:first-child:active{
transform:translateY(1px);
background:var(--button-pressed);
box-shadow:
inset 0 2px 5px rgba(0,29,45,.62),
inset 0 1px 1px rgba(0,25,40,.32),
0 1px 2px rgba(0,20,32,.18);
}

button:disabled,
.btn:disabled{
color:rgba(255,255,255,.82);
background:linear-gradient(180deg,#abc8d4,#7695a5);
border-color:rgba(74,101,115,.4);
box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
text-shadow:none;
opacity:.64;
}

.btn.alt,
button.alt,
.btn-block,
.side-auth a:not(:first-child){
color:var(--text);
background:var(--glass-soft);
border-color:rgba(0,104,148,.3);
box-shadow:var(--inset);
text-shadow:0 1px 0 rgba(255,255,255,.26);
}

.btn.alt:hover,
button.alt:hover,
.btn-block:hover,
.side-auth a:not(:first-child):hover{
color:#056b91;
background:var(--glass);
border-color:rgba(0,150,205,.48);
}

button.danger,
.invite-revoke-btn,
.bounty-refund-btn{
background:linear-gradient(180deg,#f18a81,#db5c54 48%,#b63835);
border-color:rgba(117,29,27,.62);
}

button.danger:hover,
.invite-revoke-btn:hover,
.bounty-refund-btn:hover{
background:linear-gradient(180deg,#ff9c93,#e66a61 48%,#c13f3b);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.47),
0 0 9px rgba(214,69,65,.2);
}

input:not([type]),
input[type=text],
input[type=password],
input[type=email],
input[type=url],
input[type=number],
input[type=search],
select,
textarea{
color:var(--text);
background:var(--field);
border:1px solid rgba(0,94,138,.36);
border-top-color:rgba(255,255,255,.68);
border-radius:5px;
box-shadow:
inset 0 1px 3px rgba(0,52,80,.22),
inset 0 1px 0 rgba(255,255,255,.56),
0 1px 0 rgba(255,255,255,.38);
text-shadow:0 1px 0 rgba(255,255,255,.12);
transition:border-color .12s,box-shadow .12s,background .12s;
}

input:not([type]):hover,
input[type=text]:hover,
input[type=password]:hover,
input[type=email]:hover,
input[type=url]:hover,
input[type=number]:hover,
input[type=search]:hover,
select:hover,
textarea:hover{
border-color:rgba(0,151,201,.55);
}

input:focus,
select:focus,
textarea:focus{
outline:none;
border-color:rgba(0,190,230,.86);
box-shadow:
inset 0 1px 3px rgba(0,47,71,.18),
inset 0 1px 0 rgba(255,255,255,.62),
0 0 0 2px rgba(0,190,255,.13),
0 0 9px rgba(0,212,255,.18);
}

input::placeholder,
textarea::placeholder{
color:var(--muted);
opacity:.82;
}

select option{
color:var(--text);
background:#075675;
}

input[type=checkbox],
input[type=radio],
input[type=range],
progress{
accent-color:#00bfdc;
}

input[type=file]::file-selector-button{
color:#fff;
border:1px solid rgba(0,69,103,.55);
border-top-color:rgba(255,255,255,.55);
border-radius:5px;
background:var(--button);
box-shadow:inset 0 1px 0 rgba(255,255,255,.62),inset 0 -2px 3px rgba(0,49,71,.38);
}

input[type=range]::-webkit-slider-runnable-track{
height:5px;
border-radius:4px;
background:
linear-gradient(180deg,
rgba(0,76,107,.38),
rgba(0,145,184,.28));
box-shadow:inset 0 1px 2px rgba(0,24,40,.45);
}

input[type=range]::-webkit-slider-thumb{
width:15px;
height:15px;
margin-top:-5px;
appearance:none;
border:1px solid rgba(0,71,104,.62);
border-radius:50%;
background:
linear-gradient(180deg,#d9faff 0,#68ddf7 23%,#08a8d5 65%,#05739a);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.76),
0 1px 4px rgba(0,38,56,.34);
}

input[type=range]::-moz-range-track{
height:5px;
border-radius:4px;
background:rgba(0,104,140,.3);
box-shadow:inset 0 1px 2px rgba(0,24,40,.45);
}

input[type=range]::-moz-range-thumb{
width:14px;
height:14px;
border:1px solid rgba(0,71,104,.62);
border-radius:50%;
background:linear-gradient(180deg,#d9faff,#68ddf7 25%,#08a8d5 65%,#05739a);
box-shadow:0 1px 4px rgba(0,38,56,.34);
}

.tab{
border-radius:7px 7px 0 0;
transition:background .12s,box-shadow .12s,color .12s;
}

.tab:hover{
color:var(--text);
background:rgba(96,229,250,.13);
}

.tab.active,
.smoji-tab.active{
color:var(--text);
background:
linear-gradient(180deg,
rgba(255,255,255,.42),
rgba(104,222,244,.2) 30%,
rgba(0,113,151,.18));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.76),
inset 0 -2px 4px rgba(0,45,64,.2),
0 -1px 8px rgba(0,190,235,.15);
text-shadow:0 1px 0 rgba(255,255,255,.3);
}

.tab.active::after{
content:none;
}

.pagination a,
.topic-pages a{
color:var(--text-2);
background:var(--glass-soft);
}

.pagination a:hover,
.topic-pages a:hover{
color:#fff;
background:var(--button-hot);
border-color:rgba(0,77,111,.56);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.76),
0 0 8px rgba(0,212,255,.18);
}

.pagination li.active a{
color:#fff;
}

.topic-pages-sep{
color:var(--disabled);
}

.forum-link:hover,
.forum-more-link:hover,
.mobile-forum-link:hover{
color:var(--text);
background:
linear-gradient(180deg,
rgba(255,255,255,.34),
rgba(100,223,245,.14),
rgba(0,92,123,.14));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.68),
0 0 7px rgba(0,190,235,.12);
}

.forum-link.active,
.forum-more-link.active,
.mobile-forum-link.active{
color:#fff;
background:
linear-gradient(180deg,
rgba(255,255,255,.48),
rgba(67,214,241,.4) 20%,
#0784b3 76%,
#056b91);
border-color:rgba(0,72,104,.62);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.76),
inset 0 -2px 3px rgba(0,40,58,.45),
0 0 9px rgba(0,190,235,.16);
}

.post-item{
transition:background .12s,box-shadow .12s;
}

.post-item:hover{
background:
linear-gradient(180deg,
rgba(202,248,255,.16),
rgba(45,207,236,.09));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.5),
inset 3px 0 0 rgba(48,216,244,.6),
0 0 10px rgba(0,170,220,.09);
}

.topic-pinned{
background:
linear-gradient(180deg,
rgba(255,235,157,.28),
rgba(255,211,76,.1));
}

.topic-pinned:hover{
background:
linear-gradient(180deg,
rgba(255,235,157,.4),
rgba(255,211,76,.16));
}

.list th,
.post-content th{
color:var(--text);
background:
linear-gradient(180deg,
rgba(255,255,255,.25),
rgba(0,168,212,.16),
rgba(0,88,116,.18));
box-shadow:inset 0 1px 0 rgba(255,255,255,.58);
}

.list tr:hover td,
.post-content tr:hover td{
background:rgba(83,220,244,.065);
}

.avatar-img{
border-radius:50%;
border:1px solid rgba(220,249,255,.55);
box-shadow:
0 0 0 1px rgba(255,255,255,.48),
0 2px 7px rgba(0,34,52,.3),
0 0 8px rgba(0,212,255,.1);
}

.visitor-avatar{
border-radius:50%;
background:
linear-gradient(180deg,