MediaWiki:Common.css:修订间差异
MediaWiki界面页面
更多操作
无编辑摘要 |
无编辑摘要 |
||
| 第148行: | 第148行: | ||
/* 正文背景*/ | /* 正文背景*/ | ||
.card_content-background { | .card_content-background { | ||
position: relative; | |||
width: 100%; | width: 100%; | ||
/* | /* 玻璃主体层(冷白渐变) */ | ||
background: | background: | ||
linear-gradient( | linear-gradient( | ||
to bottom, | to bottom, | ||
rgba(255,255,255,0.72), | rgba(255,255,255,0.82) 0%, | ||
rgba(255,255,255,0. | rgba(255,255,255,0.72) 35%, | ||
rgba(255,255,255,0.65) 100% | |||
); | ); | ||
backdrop-filter: blur( | backdrop-filter: blur(22px) saturate(150%); | ||
-webkit-backdrop-filter: blur( | -webkit-backdrop-filter: blur(22px) saturate(150%); | ||
border-radius: 100vw 100vw 0 0 / 2. | border-radius: 100vw 100vw 0 0 / 2.4em 2.4em 0 0; | ||
/* | /* 顶部极细主描边 */ | ||
border-top: 1px solid rgba(255,255,255,0. | border-top: 1px solid rgba(255,255,255,0.75); | ||
/* | /* 多层阴影系统 */ | ||
box-shadow: | box-shadow: | ||
0 - | /* 外部浮起感 */ | ||
0 -40px 80px -45px rgba(0,0,0,0.25), | |||
/* 边缘冷光扩散 */ | |||
0 -2px 6px rgba(255,255,255,0.35), | |||
/* | /* 内顶部高光 */ | ||
inset 0 1px 0 rgba(255,255,255,0. | inset 0 1px 0 rgba(255,255,255,0.85), | ||
/* | /* 内部弧线压暗(制造厚度) */ | ||
inset 0 - | inset 0 -30px 60px rgba(0,0,0,0.04); | ||
} | } | ||
.card_content-background::before{ | .card_content-background::before{ | ||
| 第184行: | 第189行: | ||
pointer-events:none; | pointer-events:none; | ||
/* 弧线顶部流光 */ | |||
background: | background: | ||
radial-gradient( | radial-gradient( | ||
120% | 120% 70% at 50% -15%, | ||
rgba(255,255,255,0. | rgba(255,255,255,0.9) 0%, | ||
rgba(255,255,255,0) | rgba(255,255,255,0.6) 20%, | ||
rgba(255,255,255,0.25) 35%, | |||
rgba(255,255,255,0) 55% | |||
); | ); | ||
opacity:0.6; | mix-blend-mode: screen; | ||
opacity: 0.55; | |||
} | |||
.card_content-background::after{ | |||
content:""; | |||
position:absolute; | |||
inset:0; | |||
border-radius:inherit; | |||
pointer-events:none; | |||
box-shadow: | |||
0 -1px 0 rgba(255,255,255,0.95), /* 主亮线 */ | |||
0 -2px 4px rgba(255,255,255,0.4); /* 柔扩散 */ | |||
opacity: 0.6; | |||
} | |||
.card_content{ | |||
color:#1a1a1f; | |||
} | } | ||
2026年3月3日 (二) 18:34的版本
/* 这里放置的CSS将应用于所有皮肤 */
/* 全局 */
:root {
color-scheme: dark;
/* 色相:暖粉 */
--color-progressive-oklch__h: 15 !important;
/* 正文字亮度 */
--color-base-oklch__l: 92% !important;
--color-base-oklch__c: 0.03 !important;
/* 次级文字 */
--color-subtle-oklch__l: 75% !important;
--color-subtle-oklch__c: 0.025 !important;
/* 强调文字 */
--color-emphasized-oklch__l: 98% !important;
--color-emphasized-oklch__c: 0.04 !important;
}
/* 背景相关 */
html {
background-image: url("/images/b/b5/Banner.jpg");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment:fixed;
}
body {
background: radial-gradient(
circle at 50% 30%,
rgba(0, 0, 0, 0) 35%,
rgba(0, 0, 0, 0.4) 100%
);
}
/* 遮罩 */
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
/* 用遮罩控制模糊范围 */
mask-image: radial-gradient(
circle at 50% 30%,
rgba(0,0,0,0) 40%,
rgba(0,0,0,0.6) 75%,
rgba(0,0,0,1) 100%
);
-webkit-mask-image: radial-gradient(
circle at 50% 30%,
rgba(0,0,0,0) 40%,
rgba(0,0,0,0.6) 75%,
rgba(0,0,0,1) 100%
);
}
/* 修复编辑背景 */
.editor.ace_editor.ace-tm {
background: black;
/* 恢复原来的冷色调 */
--color-progressive-oklch__h: 262.29;
--color-base-oklch__l: 20%;
--color-base-oklch__c: 0.09;
--color-subtle-oklch__l: 35%;
--color-subtle-oklch__c: 0.11;
--color-emphasized-oklch__l: 5%;
--color-emphasized-oklch__c: 0.07;
}
.mw-body-content .CodeMirror {
background-color:var(--color-surface-0);
}
/* 侧边栏 */
.citizen-header {
background-color:rgba(255,255,255,0.2);
backdrop-filter:blur(10px);
}
/* footer */
.citizen-footer {
background-color:unset;
}
/* --------------------------------------------------卡面界面相关--------------------------------------------------- */
/** card_ **/
/* 全屏卡面 */
.card_fullscreen-img {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.card_fullscreen-img img {
width: 105%;
height: 105%;
object-fit: cover;
display: block;
transform: translateY(0px) scale(1);
transition: transform 0.8s cubic-bezier(.22,.61,.36,1);
}
.card_fullscreen-img.scrolled img {
transform: translateY(-10px) scale(1.015);
}
/* 暗角 */
.card_fullscreen-img::after{
content:"";
position:absolute;
inset:0;
background: radial-gradient(
circle at center,
rgba(0,0,0,0) 45%,
rgba(0,0,0,0) 100%
);
transition: opacity 0.8s ease;
opacity: 0;
}
.card_fullscreen-img.scrolled::after{
opacity: 0.25;
}
/* 正文背景*/
.card_content-background {
position: relative;
width: 100%;
/* 玻璃主体层(冷白渐变) */
background:
linear-gradient(
to bottom,
rgba(255,255,255,0.82) 0%,
rgba(255,255,255,0.72) 35%,
rgba(255,255,255,0.65) 100%
);
backdrop-filter: blur(22px) saturate(150%);
-webkit-backdrop-filter: blur(22px) saturate(150%);
border-radius: 100vw 100vw 0 0 / 2.4em 2.4em 0 0;
/* 顶部极细主描边 */
border-top: 1px solid rgba(255,255,255,0.75);
/* 多层阴影系统 */
box-shadow:
/* 外部浮起感 */
0 -40px 80px -45px rgba(0,0,0,0.25),
/* 边缘冷光扩散 */
0 -2px 6px rgba(255,255,255,0.35),
/* 内顶部高光 */
inset 0 1px 0 rgba(255,255,255,0.85),
/* 内部弧线压暗(制造厚度) */
inset 0 -30px 60px rgba(0,0,0,0.04);
}
.card_content-background::before{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
pointer-events:none;
/* 弧线顶部流光 */
background:
radial-gradient(
120% 70% at 50% -15%,
rgba(255,255,255,0.9) 0%,
rgba(255,255,255,0.6) 20%,
rgba(255,255,255,0.25) 35%,
rgba(255,255,255,0) 55%
);
mix-blend-mode: screen;
opacity: 0.55;
}
.card_content-background::after{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
pointer-events:none;
box-shadow:
0 -1px 0 rgba(255,255,255,0.95), /* 主亮线 */
0 -2px 4px rgba(255,255,255,0.4); /* 柔扩散 */
opacity: 0.6;
}
.card_content{
color:#1a1a1f;
}