MediaWiki:Common.css
MediaWiki界面页面
更多操作
注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
- Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
- Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。
/* 这里放置的CSS将应用于所有皮肤 */
/* 全局 */
/* 字体 */
/* Regular */
@font-face {
font-family: 'AlibabaPuHuiTi';
src: url('/resources/assets/fonts/AlibabaPuHuiTi-3-55-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Bold */
@font-face {
font-family: 'AlibabaPuHuiTi';
src: url('/resources/assets/fonts/AlibabaPuHuiTi-3-85-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
: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: none;
/* 禁止整个页面横向滚动 */
overflow-x: clip;
}
body {
background-image:
radial-gradient(
circle at 50% 30%,
rgba(0, 0, 0, 0) 35%,
rgba(0, 0, 0, 0.4) 100%
),
url("/images/5/50/Background_1.png");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
font-family: 'AlibabaPuHuiTi', sans-serif;
/* 禁止横向滚动 */
overflow-x: clip;
}
/* 遮罩 */
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%
);
}
/* 去掉主题偏移 */
.citizen-page-container {
padding-inline:unset!important;
}
/* 修复编辑背景 */
.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);
}
/* 四星卡面多为立绘比例：第一屏优先看全身，底部停在内容白底上沿。 */
.ron-card--rarity-4 .card_fullscreen-img {
display: block;
}
.ron-card--rarity-4 .card_fullscreen-img > a,
.ron-card--rarity-4 .card_fullscreen-img > .mw-file-description,
.ron-card--rarity-4 .card_fullscreen-img figure,
.ron-card--rarity-4 .card_fullscreen-img .mw-halign-none {
position: absolute;
top: clamp(14px, 2.4vh, 26px);
right: 0;
bottom: calc(30vh + clamp(12px, 2.2vh, 24px));
left: 0;
display: flex;
align-items: flex-end;
justify-content: center;
width: 100%;
height: auto;
transform: translateX(clamp(18px, 4vw, 72px));
}
.ron-card--rarity-4 .card_fullscreen-img img {
width: auto;
height: 100%;
max-width: 94vw;
max-height: 100%;
object-fit: contain;
object-position: center bottom;
transform-origin: center bottom;
}
.ron-card--rarity-4 .card_fullscreen-img.scrolled img {
transform: translateY(-6px) scale(1.01);
}
/* 暗角 */
.card_fullscreen-img::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
radial-gradient(
ellipse at center,
rgba(0,0,0,0.2) 35%,
rgba(0,0,0,0.65) 100%
);
opacity: 0; /* 默认没有 */
transition: opacity 0.8s cubic-bezier(.22,.61,.36,1);
}
.card_fullscreen-img.scrolled::after{
opacity: 1;
}
.card_fullscreen-img--switchable .card_face {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.5s cubic-bezier(.22,.61,.36,1);
}
.card_fullscreen-img--switchable .card_face.is-active {
opacity: 1;
}
.card_fullscreen-img--switchable .card_face > a,
.card_fullscreen-img--switchable .card_face > .mw-file-description,
.card_fullscreen-img--switchable .card_face figure,
.card_fullscreen-img--switchable .card_face .mw-halign-none {
display: block;
width: 100%;
height: 100%;
}
.card_hero {
position: relative;
z-index: 1;
pointer-events: auto;
cursor: default;
}
.card_hero .card_face-switch {
cursor: auto;
}
html.card_lightbox-hover,
html.card_lightbox-hover body,
html.card_lightbox-hover .ron-card,
html.card_lightbox-hover .card_hero,
html.card_lightbox-hover .card_fullscreen-img,
html.card_lightbox-hover .card_fullscreen-img * {
cursor: zoom-in !important;
}
.card_face-switch {
position: absolute;
right: clamp(24px, 6vw, 96px);
bottom: calc(30vh + clamp(16px, 3vh, 32px));
z-index: 5;
display: flex;
gap: 6px;
padding: 5px;
border: 1px solid rgba(255, 255, 255, 0.42);
border-radius: 999px;
background: rgba(0, 0, 0, 0.28);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
pointer-events: auto;
}
.card_face-switch-btn {
width: 34px;
height: 34px;
border-radius: 50%;
background: transparent;
color: rgba(255, 255, 255, 0.72);
font-family: Georgia, serif;
font-size: 0.9rem;
line-height: 34px;
text-align: center;
cursor: pointer;
user-select: none;
}
.card_face-switch-btn.is-active {
background: rgba(255, 255, 255, 0.88);
color: #2a1518;
}
/* 正文背景*/
.card_content-background {
position: relative;
padding: 120px 0 0; /* 左右 padding 交由 inner 处理 */
width: 100%;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.66) 0%, rgba(255, 255, 255, 0.62) 35%, rgba(255, 255, 255, 0.54) 100%);
backdrop-filter: blur(15px) saturate(155%);
-webkit-backdrop-filter: blur(22px) saturate(155%);
border-radius: 100vw 100vw 0 0 / 2.4em 2.4em 0 0;
border-top: thin solid rgb(255 235 240 / 68%);
box-shadow: 0 -40px 80px -45px rgba(0, 0, 0, 0.25), 0 -2px 6px rgb(255 255 255 / 13%), 0 -4px 14px rgba(255, 180, 200, 0.18), inset 0 1px 0 rgb(255 255 255 / 0%), 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% -18%,
rgba(255,255,255,0.95) 0%,
rgba(255,230,235,0.65) 18%,
rgba(255,200,215,0.35) 30%,
rgba(255,200,215,0.15) 40%,
rgba(255,200,215,0) 55%
);
mix-blend-mode: screen;
opacity: 0.6;
}
.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,220,230,0.6), /* 柔粉扩散 */
0 -4px 10px rgba(255,180,200,0.25); /* 外围粉光 */
opacity: 0.7;
}
/* 居中包裹层 */
/* 大屏：max-width 限制 + 轻微偏左（margin 右多于左），左右自适应边距 */
.card_content-inner {
max-width: 1900px;
margin: 0 auto 0 clamp(0px, 4vw, 160px); /* 超宽时整体偏左 */
padding: 0 clamp(40px, 10vw, 240px) 120px;
}
.card_content{
color:#1a1a1f;
margin:0;
}
/* 卡面名&信息 */
.card_content_name-icon {
width: 32px;
height: 32px;
flex: 0 0 32px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 2px;
background: rgba(18, 17, 20, 0.56);
}
.card_content_name-icon > span[typeof~="mw:File"],
.card_content_name-icon > a,
.card_content_name-icon .mw-file-description,
.card_content_name-icon figure,
.card_content_name-icon .mw-halign-none {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
background: transparent;
}
.card_content_name-icon > a.new {
display: none;
}
.card_content_name-icon img {
display: block;
width: auto !important;
height: auto !important;
max-width: 100%;
max-height: 100%;
object-fit: contain;
object-position: center;
filter: brightness(1.24) contrast(1.14) saturate(1.32);
background: transparent;
}
.card_content_name-icon--ml img {
max-width: none;
max-height: none;
}
/* 情报 */
.card_content_info{
display: flex;
align-items: center; /* 垂直居中 */
width:100%;
gap:18px;
margin-left:2px;
}
.card_content_info-item{
display: flex;
flex-direction: column;
position: relative;
}
/* 给除了最后一个以外的 item 加竖线 */
.card_content_info-item:not(:last-child)::after{
content: "";
position: absolute;
left:40px;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 60%; /* 控制线的高度 */
background: linear-gradient(
to bottom,
rgba(0,0,0,0),
rgba(0,0,0,0.25),
rgba(0,0,0,0)
);
}
/* --------------------------------------------------卡面界面相关（续）--------------------------------------------------- */
/* 全局强调色 */
.card_accent { color: #ed4141; }
.card_accent--type { color: #ed4141; margin-left: 4px; }
/* 大框架容器 */
.card_content-container {
width: 100vw;
margin-top: -30vh;
position: relative;
z-index: 2;
transform: translate(-50%);
left: 50%;
/* 防止内容撑出横向滚动 */
overflow-x: clip;
}
/* 正文布局 */
.card_content--layout {
display: flex;
align-items: flex-start;
gap: 60px;
flex-wrap: wrap; /* 小屏自动折叠 */
}
/* 左栏：默认 sticky */
.card_content_left {
position: sticky;
top: 320px;
transform: translateY(-220px);
flex: 0 0 380px;
min-width: 0;
}
/* 卡名区域 */
.card_content_name-container { width: 100%; }
.card_content_name-row { display: flex; align-items: center; min-height: 32px; margin-left: 2px; }
.card_content_name-classtext { display: flex; align-items: center; min-height: 32px; font-size: 1rem; line-height: 32px; margin-left: 6px; }
.card_content_name-icon--ml { margin-left: 8px; }
.card_content_name-icon--ml {
width: 32px;
height: 32px;
flex-basis: 32px;
overflow: visible;
}
.card_content_name-text {
font-family: serif;
font-weight: bold;
font-size: xx-large;
margin-top: 4px;
}
/* 区块标题通用 */
.card_content-item-title {
font-size: x-large;
font-family: serif;
font-weight: bold;
}
.card_content-item-title--mt { margin-top: 36px; }
.card_content-item-subtitle {
font-size: small;
margin-left: 8px;
}
/* 区块分隔线 */
.card_content-item-hr {
width: 50px;
height: 2px;
background: #ff7676;
margin-bottom: 4px;
}
.card_content-item-hr--mb12 { margin-bottom: 12px; }
/* 属性 */
.card_content_attribute-item {
width: 240px;
display: flex;
justify-content: space-between;
}
.card_content_attribute-title {
display: flex;
gap: 4px;
align-items: center;
}
.card_content_attribute-icon {
width: 12px;
height: 12px;
background: rgba(255, 255, 255, 0.6);
}
/* ---- 风格等级属性成长 ---- */
.style_attr-growth {
width: 100%;
max-width: 280px;
}
.style_attr-title {
width: 240px;
}
.style_attr-level-row {
width: 240px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 8px 0 6px;
}
.style_attr-level-display {
display: inline-flex;
align-items: baseline;
gap: 3px;
min-width: 0;
font-family: Georgia, "Times New Roman", serif;
}
.style_attr-title-level {
display: inline-block;
min-width: 3ch;
text-align: left;
font-family: inherit;
font-size: 1.08rem;
font-weight: 400;
font-variant-numeric: tabular-nums lining-nums;
font-feature-settings: "tnum";
}
.style_attr-title-lv {
display: inline-block;
color: inherit;
font-family: inherit;
font-size: 0.86rem;
font-weight: 700;
}
.style_attr-break {
padding: 3px 7px;
border-radius: 1px;
background: rgba(34, 24, 27, 0.58);
color: rgba(255, 255, 255, 0.94);
font-size: 0.72rem;
font-weight: 500;
line-height: 1.2;
}
.style_attr-break--title {
flex: 0 0 auto;
font-family: 'AlibabaPuHuiTi', sans-serif;
}
.style_attr-slider {
position: relative;
width: 240px;
height: 28px;
margin: 2px 0 6px;
cursor: pointer;
touch-action: none;
outline: none;
}
.style_attr-slider:focus-visible .style_attr-slider-track {
position: absolute;
left: 0;
right: 0;
top: 12px;
height: 4px;
overflow: hidden;
border-radius: 2px 0 0 2px;
background: rgba(0, 0, 0, 0.14);
}
.style_attr-slider-track {
position: absolute;
left: 0;
right: 0;
top: 12px;
height: 4px;
background: rgba(0, 0, 0, 0.16);
}
.style_attr-slider-fill {
width: 100%;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.74) 0%, rgba(255, 198, 198, 0.74) 55%, rgba(255, 124, 124, 0.68) 100%);
}
.style_attr-slider-thumb {
position: absolute;
top: 5px;
left: 100%;
width: 18px;
height: 18px;
transform: translateX(-50%);
border: 0;
background: var(--style-attr-thumb-color, rgba(255, 132, 132, 0.76));
box-shadow: 0 2px 4px rgba(72, 28, 34, 0.14);
transition: background-color 0.16s ease;
}
.style_attr-presets {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 4px;
width: 240px;
margin-bottom: 10px;
}
.style_attr-preset {
min-height: 24px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(0, 0, 0, 0.14);
background: rgba(255, 255, 255, 0.28);
color: rgba(42, 21, 24, 0.72);
font-size: 0.68rem;
cursor: pointer;
user-select: none;
}
.style_attr-preset.is-active {
border-color: rgba(237, 65, 65, 0.72);
background: rgba(237, 65, 65, 0.12);
color: #481c22;
font-weight: 700;
}
.style_attr-stat-row {
min-height: 26px;
align-items: center;
line-height: 1.35;
}
.style_attr-stat-value {
min-width: 72px;
display: inline-flex;
align-items: center;
justify-content: flex-end;
text-align: right;
font-family: inherit;
font-variant-numeric: tabular-nums lining-nums;
font-feature-settings: "tnum";
font-size: 0.95rem;
font-weight: 500;
line-height: 1.25;
color: rgba(36, 21, 25, 0.88);
}
.style_attr-empty {
width: 240px;
margin-top: 8px;
color: rgba(42, 21, 24, 0.56);
font-size: 0.75rem;
line-height: 1.35;
}
/* 右栏 */
.card_content_right {
flex: 1 1 520px;
min-width: 0;
}
/* ---- 技能卡片 ---- */
/* 默认上下排列（描述在上，升级在下），到足够宽时才切换为左右 */
.card_content_skill-card {
width: 100%;
max-width: 1100px; /* 超宽屏给更大空间 */
display: flex;
flex-direction: column; /* 默认上下 */
gap: 20px;
align-items: flex-start;
background: #ffffff14;
padding: 12px;
border-radius: 5px;
}
.card_content_skill-gap { height: 18px; }
/* 技能卡左侧描述区 */
.card_content_skill-left {
width: 100%; /* 上下排时占满 */
flex-shrink: 0;
display: flex;
flex-direction: column;
}
/* 技能标题行 */
.card_content_skill-title {
display: flex;
gap: 12px;
align-items: flex-start;
}
.card_content_skill-icon {
width: 48px;
height: 48px;
background: #252525;
border-radius: 2px;
overflow: hidden;
flex-shrink: 0;
}
.card_content_skill-icon > span[typeof~="mw:File"],
.card_content_skill-icon > a,
.card_content_skill-icon .mw-file-description,
.card_content_skill-icon figure,
.card_content_skill-icon .mw-halign-none {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
background: transparent;
}
.card_content_skill-icon img {
display: block;
width: auto !important;
height: auto !important;
max-width: 100%;
max-height: 100%;
object-fit: contain;
object-position: center;
}
.card_content_skill-title-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.card_content_skill-name {
font-family: serif;
font-weight: bold;
}
.card_content_skill-meta {
font-size: small;
color: grey;
margin-top: -2px;
}
.card_content_skill-meta-val { margin-left: 6px; }
/* 技能标签（群攻/单体等） */
.card_content_skill-tags {
display: flex;
gap: 4px;
line-height: 0.9;
margin-top: 6px;
}
.card_content_skill-tag {
font-size: small;
background: #000000a3;
color: #ffffff;
padding: 4px;
}
.card_content_style-tags {
margin-top: 16px;
margin-left: 2px;
flex-wrap: wrap;
gap: 5px;
line-height: 1.2;
}
.card_content_style-tag {
padding: 3px 7px;
border-radius: 1px;
background: rgba(34, 24, 27, 0.58);
color: rgba(255, 255, 255, 0.94);
font-size: 0.72rem;
font-weight: 500;
line-height: 1.2;
}
.card_content_availability {
width: min(100%, 300px);
margin: 6px 0 4px 2px;
color: rgba(32, 18, 22, 0.86);
font-size: 0.78rem;
line-height: 1.25;
}
.card_content_availability-top {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
margin-top: 8px;
}
.card_content_availability-badge {
display: inline-flex;
align-items: center;
min-height: 22px;
padding: 3px 8px;
background: rgba(26, 19, 22, 0.72);
color: rgba(255, 255, 255, 0.94);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0;
}
.card_content_availability--limited .card_content_availability-badge {
background: linear-gradient(135deg, rgba(99, 17, 25, 0.92), rgba(214, 48, 49, 0.82));
box-shadow: 0 1px 8px rgba(164, 26, 36, 0.24);
}
.card_content_availability-date {
display: inline-flex;
align-items: baseline;
gap: 6px;
color: rgba(42, 21, 24, 0.7);
font-variant-numeric: tabular-nums lining-nums;
font-feature-settings: "tnum";
}
.card_content_availability-date-label {
color: rgba(42, 21, 24, 0.52);
font-size: 0.68rem;
font-weight: 600;
}
.card_content_availability-date-value {
color: rgba(42, 21, 24, 0.78);
font-family: Georgia, "Times New Roman", serif;
font-size: 0.82rem;
font-weight: 500;
}
.card_content_availability-pool {
display: flex;
align-items: center;
gap: 9px;
margin-top: 8px;
}
.card_content_availability-pool-image {
width: min(100%, 200px);
aspect-ratio: 768 / 436;
margin-left:12px;
display: flex;
align-items: center;
justify-content: flex-start;
overflow: hidden;
}
.card_content_availability-pool-image > span[typeof~="mw:File"],
.card_content_availability-pool-image > a,
.card_content_availability-pool-image .mw-file-description,
.card_content_availability-pool-image figure,
.card_content_availability-pool-image .mw-halign-none {
display: flex;
align-items: center;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
background: transparent;
}
.card_content_availability-pool-image img {
display: block;
width: 100% !important;
height: 100% !important;
object-fit: contain;
object-position: left center;
}
.card_content_availability-pool-name {
color: rgba(42, 21, 24, 0.72);
font-family: Georgia, "Times New Roman", serif;
font-size: 0.86rem;
font-weight: 700;
}
/* 技能效果描述 */
.card_content_skill_effect {
margin-top: 8px;
line-height: 1.3;
font-size: 0.9rem;
}
.card_content_skill-param {
display: inline;
position: static;
color: #ed4141;
font-weight: inherit;
white-space: nowrap;
}
.card_content_skill-param-index {
display: inline;
margin-left: 0;
transform: none;
color: #1a1a1f;
font-family: inherit;
font-size: 0.72em;
font-weight: 400;
line-height: 0;
vertical-align: super;
}
.card_content_skill-effect-term {
text-decoration: underline dotted rgba(117, 40, 46, 0.46);
text-underline-offset: 3px;
cursor: help;
}
/* ---- 技能升级表格（通用） ---- */
.card_content_skill-upgrade {
width: 100%; /* 上下排时占满宽度 */
min-width: 0;
/* 内容超出卡片宽度时才出现横向滚动条 */
overflow-x: auto;
display: flex;
flex-direction: column;
gap: 6px;
}
/* 默认 8 列（终结技 Lv.2~9）；每列最小 44px */
.card_content_skill-upgrade-grid {
display: grid;
grid-template-columns: auto repeat(8, minmax(44px, 1fr));
gap: 2px;
font-size: 0.78rem;
align-items: center;
min-width: max-content; /* 防止列被压缩，超出时由父级滚动条处理 */
}
/* 9 列变体（普攻 / 被动 Lv.2~10） */
.card_content_skill-upgrade-grid--10 {
grid-template-columns: auto repeat(9, minmax(44px, 1fr));
}
/* 表头等级数字 */
.card_content_skill-upgrade-lv {
display: flex;
justify-content: center;
color: #aaa;
font-size: 0.75rem;
font-weight: bold;
}
/* 行首角标标签容器 */
.card_content_skill-upgrade-row-label {
display: flex;
align-items: center;
white-space: nowrap;
position: relative;
padding-right: 18px;
}
/* 行首角标圆圈数字 */
.card_content_skill-upgrade-badge {
width: 18px;
height: 18px;
background: #ff7676b3;
border-radius: 50%;
font-size: 0.72rem;
font-weight: 700;
color: #fff;
text-align: center;
line-height: 18px;
display: inline-block;
flex-shrink: 0;
font-family:serif;
padding-left:6px;
}
/* 行首角标文字 */
.card_content_skill-upgrade-badge-text {
margin-left: 4px;
color:#4b2424;
font-size: 0.75rem;
}
/* 行首角标箭头（错位） */
.card_content_skill-upgrade-arrow {
position: absolute;
right: 0;
top: 8px;
color: #ff7676;
font-size: 0.8rem;
line-height: 1;
}
/* 数值格 */
.card_content_skill-upgrade-val {
text-align: center;
padding: 4px 0;
}
/* 无变化格 */
.card_content_skill-upgrade-val--null { color: #aaa; }
/* ---- 觉醒 ---- */
.card_content_feat-ul {
list-style: none;
padding: 0;
margin-left: 0;
}
.card_content_feat-list {
padding: 0.8rem 0;
margin-bottom: 0.8rem;
}
.card_content_feat-row {
display: flex;
align-items: center;
}
.card_content_feat-stage-wrap {
position: relative;
margin-right: 2rem;
}
.card_content_feat-stage {
position: absolute;
top: -12px;
left: 2px;
font-size: 0.7rem;
letter-spacing: 1px;
}
.card_content_feat-number {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
.card_content_feat-stage-cn {
font-size: 0.8rem;
margin-right: 0.5rem;
font-family: serif;
}
/* ---- 小传 ---- */
.card_content_story { margin-top: 80px; }
/* 小传 header：默认横排（标题在左，时间轴在右） */
.card_content_story-header {
display: flex;
align-items: flex-start;
gap: 0;
}
.card_content_story-header-left {
display: flex;
flex-direction: column;
flex-shrink: 0; /* 不压缩标题区 */
}
.card_content_story-header-spacer { margin-top: 36px; }
.card_content_story-toggle {
font-size: 1rem;
color: #ff7676;
cursor: pointer;
user-select: none;
letter-spacing: 0.5px;
}
.card_content_story-timeline {
position: relative;
max-width: 820px;
padding-left: 44px;
overflow: hidden;
transition: opacity .25s ease, transform .25s ease, max-height .35s ease;
opacity: 1;
transform: translateY(0);
max-height: none;
}
/* ---- 时间轴 ---- */
.card_timeline { position: relative; }
.card_timeline-line {
position: absolute;
left: 16px;
top: 6px;
bottom: 6px;
width: 1px;
background: rgba(0, 0, 0, 0.06);
}
.card_timeline-item {
position: relative;
margin-bottom: 60px;
}
.card_timeline-item--last { margin-bottom: 0; }
.card_timeline-dot {
position: absolute;
left: -30px;
top: 8px;
width: 8px;
height: 8px;
border: 2px solid #ff7676;
background: #fff;
border-radius: 50%;
}
.card_timeline-unlock {
font-size: 0.78rem;
color: #999;
margin-bottom: 8px;
letter-spacing: 0.5px;
}
.card_timeline-title { margin-bottom: 14px; }
.card_timeline-numeral {
font-family: serif;
font-size: 1.15rem;
font-weight: bold;
color: #ff7676;
}
.card_timeline-chapter {
margin: 0 6px;
font-weight: 600;
}
.card_timeline-label {
font-size: 0.75rem;
color: #aaa;
margin-left: 6px;
}
.card_timeline-body {
line-height: 1.5;
font-size: 0.95rem;
color: #292929;
text-align: justify;
}
/* 小传标题 sticky 吸顶 */
.card_content_story-header-left.is-sticky {
position: sticky;
top: 20px;
align-self: flex-start;
z-index: 10;
}
/* ================================================== */
/* ---- 邀约模块（card_content_date-*） ---- */
/* ================================================== */
/* 邀约区块容器 */
.card_content_date {
margin-top: 80px;
}
/* 票券轨道 */
.card_content_date-track {
position: relative;
padding: 8px 0 40px;
}
/* ---- 票券列表 ---- */
/* align-items: flex-start，高低起伏靠每张卡的 margin-top 实现 */
.card_content_date-list {
display: flex;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
list-style: none;
margin: 0;
padding: 0;
}
/* ---- 单张邀约卡片（基础样式，所有卡片共用） ---- */
.card_content_date-item {
width: calc(20% - 10px);
min-width: 100px;
max-width: 190px;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.38);
backdrop-filter: blur(10px) saturate(130%);
-webkit-backdrop-filter: blur(10px) saturate(130%);
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: 4px;
box-shadow:
0 4px 18px rgba(0, 0, 0, 0.10),
0 1px 3px rgba(255, 255, 255, 0.4) inset;
position: relative;
overflow: hidden;
color: #1a1a1f;
cursor: pointer;
}
/* 清空伪元素默认，各方案自行定义 */
.card_content_date-item::before,
.card_content_date-item::after {
content: none;
}
/* 选中态高亮 */
.card_content_date-item.is-active {
border-color: rgba(237, 65, 65, 0.5);
box-shadow:
0 4px 18px rgba(237, 65, 65, 0.15),
0 1px 3px rgba(255, 255, 255, 0.4) inset;
}
/* ---- 卡片内容区（基础） ---- */
.card_content_date-body {
padding: 10px 10px 12px;
position: relative;
min-height: 64px;
}
/* ---- 图片区域 ---- */
.card_content_date-img {
width: 100%;
aspect-ratio: 3 / 2;
overflow: hidden;
flex-shrink: 0;
display: block;
position: relative;
background: linear-gradient(
135deg,
rgba(200, 185, 210, 0.55) 0%,
rgba(160, 140, 180, 0.35) 50%,
rgba(120, 100, 140, 0.25) 100%
);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
/* 图片本体：填满容器，居中裁切 */
.card_content_date-img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
/* MediaWiki 生成的图片包裹层 */
.card_content_date-img .thumb,
.card_content_date-img figure {
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: none !important;
width: 100% !important;
height: 100% !important;
}
.card_content_date-img .thumbinner,
.card_content_date-img figcaption {
display: none !important;
}
.card_content_date-img .thumbimage {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center top !important;
display: block !important;
}
/* 序号基础 */
.card_content_date-num {
display: block;
font-family: 'Georgia', serif;
font-size: 1.6rem;
font-weight: 700;
font-style: italic;
color: rgba(237, 65, 65, 0.18);
line-height: 1;
user-select: none;
letter-spacing: -0.5px;
}
/* Story/END 标签基础 */
.card_content_date-label {
display: block;
font-size: 0.58rem;
color: rgba(80, 60, 100, 0.4);
letter-spacing: 2px;
text-transform: uppercase;
margin-top: 2px;
}
/* ================================================== */
/* ---- 方案 A：左上角极小红色方块 + 序号 ---- */
/* ================================================== */
.card_content_date-item--style-a {
border-top: 1px solid rgba(255, 255, 255, 0.55);
}
.card_content_date-item--style-a::before {
content: "";
position: absolute;
top: 8px;
left: 8px;
width: 6px;
height: 6px;
background: #ed4141;
border-radius: 1px;
z-index: 1;
}
.card_content_date-item--style-a .card_content_date-body {
padding-left: 20px;
}
.card_content_date-item--style-a .card_content_date-num {
color: rgba(237, 65, 65, 0.22);
font-size: 1.5rem;
}
.card_content_date-item--style-a .card_content_date-label {
color: rgba(80, 60, 100, 0.38);
}
/* ================================================== */
/* ---- 方案 B：像素风进度条（有图卡片使用） ---- */
/* ================================================== */
.card_content_date-item--style-b {
display: flex;
flex-direction: column;
border-top: 1px solid rgba(255, 255, 255, 0.55);
}
.card_content_date-pixels {
display: flex;
gap: 2px;
align-items: center;
margin-top: 6px;
}
.card_content_date-pixels .px {
display: inline-block;
width: 5px;
height: 5px;
background: rgba(0, 0, 0, 0.10);
border-radius: 1px;
flex-shrink: 0;
}
.card_content_date-pixels .px.on {
background: #ed4141;
}
.card_content_date-item--end .card_content_date-pixels .px.on {
background: #c0392b;
}
.card_content_date-item--style-b .card_content_date-num {
color: rgba(237, 65, 65, 0.15);
font-size: 1.4rem;
}
.card_content_date-item--style-b .card_content_date-label {
color: rgba(80, 60, 100, 0.4);
}
.card_content_date-item--end .card_content_date-label {
color: rgba(237, 65, 65, 0.55);
font-weight: 600;
letter-spacing: 2.5px;
}
/* ================================================== */
/* ---- 方案 C：两端小色块夹住文字 ---- */
/* ================================================== */
.card_content_date-item--style-c {
border-top: 2px solid rgba(237, 65, 65, 0.25);
}
.card_content_date-bracket {
display: flex;
align-items: center;
gap: 5px;
padding: 10px 8px;
}
.bracket-block {
display: inline-block;
width: 5px;
height: 14px;
background: #ed4141;
border-radius: 1px;
flex-shrink: 0;
opacity: 0.7;
}
.bracket-block--r {
width: 3px;
height: 10px;
opacity: 0.4;
}
.bracket-num {
font-family: 'Georgia', serif;
font-size: 1.3rem;
font-weight: 700;
font-style: italic;
color: rgba(237, 65, 65, 0.5);
line-height: 1;
letter-spacing: -0.5px;
}
.bracket-label {
font-size: 0.55rem;
color: rgba(80, 60, 100, 0.4);
letter-spacing: 2px;
text-transform: uppercase;
flex: 1;
}
/* ================================================== */
/* ---- 方案 D：右上角单个小红方块点缀 ---- */
/* ================================================== */
.card_content_date-item--style-d {
border-top: 1px solid rgba(255, 255, 255, 0.55);
}
.card_content_date-item--style-d::after {
content: "";
position: absolute;
top: 8px;
right: 8px;
width: 6px;
height: 6px;
background: #ed4141;
border-radius: 1px;
z-index: 1;
}
.card_content_date-item--style-d .card_content_date-num {
color: rgba(237, 65, 65, 0.20);
font-size: 1.5rem;
}
.card_content_date-item--style-d .card_content_date-label {
color: rgba(80, 60, 100, 0.38);
}
/* ================================================== */
/* ---- 邀约故事区（card_date_story-*） ---- */
/* ================================================== */
/* 故事面板容器：默认隐藏，点击卡片后出现 */
/* 极度透明，与正文白色大背景几乎无缝融合，仅起氛围区分作用 */
.card_date_story {
display: none;
margin-top: 28px;
padding: 36px 28px 40px;
/* 极淡白底：几乎看不出，只有一点点氛围感 */
background: rgba(255, 255, 255, 0.18);
border-top: 1px solid rgba(237, 65, 65, 0.08);
border-radius: 2px;
/* 去掉 box-shadow，不要明显的卡片感 */
}
/* 显示态：加上淡入动画 */
.card_date_story.is-visible {
display: block;
animation: card_date_story-fadein 0.4s ease;
}
@keyframes card_date_story-fadein {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* 场景标签：轻盈深色，可读但不抢眼 */
.card_date_story-scene {
text-align: center;
color: rgba(40, 28, 55, 0.5);
font-size: 11px;
letter-spacing: 5px;
padding-bottom: 16px;
margin-bottom: 28px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
font-family: 'Georgia', 'Noto Serif SC', serif;
text-transform: uppercase;
}
/* 各故事内容块：默认隐藏，JS控制显示 */
.card_date_story-content {
display: none;
}
.card_date_story-content.is-active {
display: block;
}
/* 旁白：斜体，深色系，清晰可读 */
.card_date_story-narration {
text-align: center;
color: rgba(40, 32, 55, 0.62);
font-style: italic;
font-size: 13px;
margin: 24px 40px;
line-height: 2.1;
font-family: 'Georgia', 'Noto Serif SC', serif;
}
/* 对话行 */
.card_date_story-dialogue {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 18px 0;
}
/* 右侧（"我"）：整行翻转 */
.card_date_story-dialogue--right {
flex-direction: row-reverse;
}
/* 头像区域（左侧角色用） */
.card_date_story-avatar {
flex-shrink: 0;
width: 44px;
height: 44px;
}
/* [[file:xxx.png]] 生成的 img */
.card_date_story-avatar img {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
display: block;
}
/* 暂无图片时的占位圆圈（左侧角色） */
.card_date_story-avatar-placeholder {
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(237, 65, 65, 0.05);
border: 1px solid rgba(237, 65, 65, 0.12);
}
/* 右侧「我」的头像完全隐藏，不占空间 */
.card_date_story-dialogue--right .card_date_story-avatar {
display: none;
}
/* 对话内容列 */
.card_date_story-dialogue-content {
display: flex;
flex-direction: column;
gap: 3px;
max-width: 65%;
}
/* 右侧对话：内容靠右对齐 */
.card_date_story-dialogue--right .card_date_story-dialogue-content {
align-items: flex-end;
}
/* 角色名（仅左侧显示） */
.card_date_story-charname {
font-size: 11px;
letter-spacing: 2px;
color: rgba(237, 65, 65, 0.7);
font-family: 'Georgia', 'Noto Serif SC', serif;
}
/* 对话正文：加深加粗，保证可读性 */
.card_date_story-text {
color: rgba(20, 14, 30, 0.82); /* 深色，接近纯黑但不死板 */
line-height: 2;
font-family: 'Georgia', 'Noto Serif SC', serif;
font-weight: 500; /* 稍微加一点字重 */
}
/* ================================================== */
/* ---- 响应式断点 ---- */
/* ================================================== */
/* ≤1399px：左栏取消 sticky，两栏上下排列 */
@media (max-width: 1399px) {
.card_content_left {
position: static;
transform: none;
flex: 1 1 100%;
}
.card_content_right {
flex: 1 1 100%;
}
}
/* ≤900px：小传 header 从左右改为上下排列 */
@media (max-width: 900px) {
.card_content_story-header {
flex-direction: column;
}
.card_content_story-header-spacer {
display: none;
}
.card_content_story-timeline {
max-width: 100%;
margin-top: 16px;
}
}
/* ≤600px：极小屏，边距收窄；邀约改为两列 */
@media (max-width: 600px) {
.card_content-inner {
padding: 0 20px 80px;
}
.card_content_date-list {
flex-wrap: wrap;
justify-content: flex-start;
gap: 10px;
align-items: flex-start;
}
.card_content_date-item {
width: calc(50% - 5px);
min-width: unset;
max-width: unset;
margin-top: 0 !important;
}
.card_date_story-narration {
margin: 20px 12px;
}
}
/* ≥1400px：右栏有足够宽度，技能卡内部切换为左右布局 */
@media (min-width: 1400px) {
.card_content_skill-card {
flex-direction: row;
align-items: flex-start;
}
.card_content_skill-left {
width: 340px;
flex-shrink: 0;
}
.card_content_skill-upgrade {
flex: 1;
}
}
/* 礼物 认知 */
.card_content_cognition-gift {
width:48px;
height:48px;
background:rgba(255,255,255,0.3);
border-radius:3px
}
/* Character archive sandbox immersion spacing.
* Scoped to prototype pages while testing Citizen skin top-gap removal.
*/
body.page-Sandbox_角色档案沉浸式原型 .citizen-page-header,
body.page-Sandbox_角色档案定点翻页原型 .citizen-page-header,
body.page-Sandbox_角色档案沉浸式原型 #citizen-page-header-sticky-sentinel,
body.page-Sandbox_角色档案定点翻页原型 #citizen-page-header-sticky-sentinel,
body.page-Sandbox_角色档案沉浸式原型 #contentSub,
body.page-Sandbox_角色档案定点翻页原型 #contentSub {
display: none;
}
body.page-Sandbox_角色档案沉浸式原型 .mw-body,
body.page-Sandbox_角色档案定点翻页原型 .mw-body,
body.page-Sandbox_角色档案沉浸式原型 .citizen-body-container,
body.page-Sandbox_角色档案定点翻页原型 .citizen-body-container,
body.page-Sandbox_角色档案沉浸式原型 .citizen-body,
body.page-Sandbox_角色档案定点翻页原型 .citizen-body,
body.page-Sandbox_角色档案沉浸式原型 #mw-content-text,
body.page-Sandbox_角色档案定点翻页原型 #mw-content-text,
body.page-Sandbox_角色档案沉浸式原型 .mw-parser-output,
body.page-Sandbox_角色档案定点翻页原型 .mw-parser-output,
body.page-Sandbox_角色档案沉浸式原型 .citizen-section,
body.page-Sandbox_角色档案定点翻页原型 .citizen-section {
margin-top: 0 !important;
padding-top: 0 !important;
}
body.page-Sandbox_角色档案沉浸式原型 .mw-parser-output > .citizen-section:first-child > p:first-child,
body.page-Sandbox_角色档案定点翻页原型 .mw-parser-output > .citizen-section:first-child > p:first-child,
body.page-Sandbox_角色档案沉浸式原型 .mw-parser-output > p:first-child,
body.page-Sandbox_角色档案定点翻页原型 .mw-parser-output > p:first-child {
display: none;
margin: 0 !important;
padding: 0 !important;
}
body.page-Sandbox_角色档案沉浸式原型 .character_archive-fullbleed,
body.page-Sandbox_角色档案定点翻页原型 .character_archive-fullbleed {
margin-top: 0 !important;
}
/* Character archive sandbox relaxed reading mode.
* Keeps the prototype immersive while removing the Citizen bottom tail.
*/
body.page-Sandbox_角色档案沉浸式原型 .citizen-page-footer,
body.page-Sandbox_角色档案定点翻页原型 .citizen-page-footer {
display: none;
}
body.page-Sandbox_角色档案沉浸式原型 .mw-body,
body.page-Sandbox_角色档案定点翻页原型 .mw-body,
body.page-Sandbox_角色档案沉浸式原型 .citizen-body-container,
body.page-Sandbox_角色档案定点翻页原型 .citizen-body-container,
body.page-Sandbox_角色档案沉浸式原型 .citizen-body,
body.page-Sandbox_角色档案定点翻页原型 .citizen-body,
body.page-Sandbox_角色档案沉浸式原型 #mw-content-text,
body.page-Sandbox_角色档案定点翻页原型 #mw-content-text,
body.page-Sandbox_角色档案沉浸式原型 .mw-parser-output,
body.page-Sandbox_角色档案定点翻页原型 .mw-parser-output,
body.page-Sandbox_角色档案沉浸式原型 .citizen-section,
body.page-Sandbox_角色档案定点翻页原型 .citizen-section {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
body.page-Sandbox_角色档案沉浸式原型 .character_archive-fullbleed,
body.page-Sandbox_角色档案定点翻页原型 .character_archive-fullbleed {
margin-bottom: 0 !important;
}
/* Character archive sandbox page background and bottom coverage. */
html:has(body.page-Sandbox_角色档案沉浸式原型),
html:has(body.page-Sandbox_角色档案定点翻页原型),
body.page-Sandbox_角色档案沉浸式原型,
body.page-Sandbox_角色档案定点翻页原型,
body.page-Sandbox_角色档案沉浸式原型 .citizen-page-container,
body.page-Sandbox_角色档案定点翻页原型 .citizen-page-container,
body.page-Sandbox_角色档案沉浸式原型 .mw-body,
body.page-Sandbox_角色档案定点翻页原型 .mw-body,
body.page-Sandbox_角色档案沉浸式原型 .citizen-body-container,
body.page-Sandbox_角色档案定点翻页原型 .citizen-body-container,
body.page-Sandbox_角色档案沉浸式原型 .citizen-body,
body.page-Sandbox_角色档案定点翻页原型 .citizen-body,
body.page-Sandbox_角色档案沉浸式原型 #mw-content-text,
body.page-Sandbox_角色档案定点翻页原型 #mw-content-text,
body.page-Sandbox_角色档案沉浸式原型 .mw-parser-output,
body.page-Sandbox_角色档案定点翻页原型 .mw-parser-output,
body.page-Sandbox_角色档案沉浸式原型 .citizen-section,
body.page-Sandbox_角色档案定点翻页原型 .citizen-section {
background: #070706 !important;
}
body.page-Sandbox_角色档案沉浸式原型 .citizen-footer,
body.page-Sandbox_角色档案定点翻页原型 .citizen-footer,
body.page-Sandbox_角色档案沉浸式原型 .mw-footer,
body.page-Sandbox_角色档案定点翻页原型 .mw-footer,
body.page-Sandbox_角色档案沉浸式原型 .catlinks,
body.page-Sandbox_角色档案定点翻页原型 .catlinks,
body.page-Sandbox_角色档案沉浸式原型 .printfooter,
body.page-Sandbox_角色档案定点翻页原型 .printfooter {
display: none !important;
}
body.page-Sandbox_角色档案沉浸式原型 .citizen-sticky-header,
body.page-Sandbox_角色档案定点翻页原型 .citizen-sticky-header,
body.page-Sandbox_角色档案沉浸式原型 .citizen-sticky-header-background,
body.page-Sandbox_角色档案定点翻页原型 .citizen-sticky-header-background {
background: rgba(7, 7, 6, 0.92) !important;
}
body.page-Sandbox_角色档案沉浸式原型 .character_archive-fullbleed,
body.page-Sandbox_角色档案定点翻页原型 .character_archive-fullbleed {
min-height: 100dvh;
}
/* Character archive landing sandbox coverage. */
body.page-Sandbox_角色档案落地原型 .citizen-page-header,
body.page-Sandbox_角色档案落地原型 #citizen-page-header-sticky-sentinel,
body.page-Sandbox_角色档案落地原型 #contentSub {
display: none;
}
html:has(body.page-Sandbox_角色档案落地原型),
body.page-Sandbox_角色档案落地原型,
body.page-Sandbox_角色档案落地原型 .citizen-page-container,
body.page-Sandbox_角色档案落地原型 .mw-body,
body.page-Sandbox_角色档案落地原型 .citizen-body-container,
body.page-Sandbox_角色档案落地原型 .citizen-body,
body.page-Sandbox_角色档案落地原型 #mw-content-text,
body.page-Sandbox_角色档案落地原型 .mw-parser-output,
body.page-Sandbox_角色档案落地原型 .citizen-section {
background: #070706 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
body.page-Sandbox_角色档案落地原型 .mw-parser-output > .citizen-section:first-child > p:first-child,
body.page-Sandbox_角色档案落地原型 .mw-parser-output > p:first-child,
body.page-Sandbox_角色档案落地原型 .citizen-page-footer,
body.page-Sandbox_角色档案落地原型 .citizen-footer,
body.page-Sandbox_角色档案落地原型 .mw-footer,
body.page-Sandbox_角色档案落地原型 .catlinks,
body.page-Sandbox_角色档案落地原型 .printfooter {
display: none !important;
}
body.page-Sandbox_角色档案落地原型 .citizen-sticky-header,
body.page-Sandbox_角色档案落地原型 .citizen-sticky-header-background {
background: rgba(7, 7, 6, 0.92) !important;
}
body.page-Sandbox_角色档案落地原型 .character_archive-fullbleed {
min-height: 100dvh;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Character archive information-density sandbox coverage. */
body.page-Sandbox_角色档案信息密度原型 .citizen-page-header,
body.page-Sandbox_角色档案信息密度原型 #citizen-page-header-sticky-sentinel,
body.page-Sandbox_角色档案信息密度原型 #contentSub {
display: none;
}
html:has(body.page-Sandbox_角色档案信息密度原型),
body.page-Sandbox_角色档案信息密度原型,
body.page-Sandbox_角色档案信息密度原型 .citizen-page-container,
body.page-Sandbox_角色档案信息密度原型 .mw-body,
body.page-Sandbox_角色档案信息密度原型 .citizen-body-container,
body.page-Sandbox_角色档案信息密度原型 .citizen-body,
body.page-Sandbox_角色档案信息密度原型 #mw-content-text,
body.page-Sandbox_角色档案信息密度原型 .mw-parser-output,
body.page-Sandbox_角色档案信息密度原型 .citizen-section {
background: #070706 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
body.page-Sandbox_角色档案信息密度原型 .mw-parser-output > .citizen-section:first-child > p:first-child,
body.page-Sandbox_角色档案信息密度原型 .mw-parser-output > p:first-child,
body.page-Sandbox_角色档案信息密度原型 .citizen-page-footer,
body.page-Sandbox_角色档案信息密度原型 .citizen-footer,
body.page-Sandbox_角色档案信息密度原型 .mw-footer,
body.page-Sandbox_角色档案信息密度原型 .catlinks,
body.page-Sandbox_角色档案信息密度原型 .printfooter {
display: none !important;
}
body.page-Sandbox_角色档案信息密度原型 .citizen-sticky-header,
body.page-Sandbox_角色档案信息密度原型 .citizen-sticky-header-background {
background: rgba(7, 7, 6, 0.92) !important;
}
body.page-Sandbox_角色档案信息密度原型 .character_archive-fullbleed {
min-height: 100dvh;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Character profile renderer.
Lua emits structure and data; this block owns the visual system. */
.character_profile-root {
position: relative;
isolation: isolate;
margin-left: calc(50% - 50vw);
width: 100vw;
min-height: 100dvh;
overflow: visible;
background: #070706;
color: #f0ebe3;
font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
}
.character_profile-bg {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(circle at 24% 46%, rgba(238,231,213,.30) 0 7%, rgba(175,164,148,.15) 8% 18%, transparent 19%),
radial-gradient(ellipse at 31% 75%, rgba(229,226,218,.12) 0 17%, transparent 18%),
linear-gradient(90deg, rgba(12,13,14,.88) 0%, rgba(20,21,22,.42) 34%, rgba(8,8,8,.91) 70%, rgba(6,5,5,.98) 100%),
repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 82px),
linear-gradient(180deg, #151617 0%, #090909 72%, #070706 100%);
}
.character_profile-shell {
position: relative;
z-index: 1;
width: min(1760px, 100vw);
margin: 0 auto;
padding: clamp(86px, 13vh, 148px) clamp(22px, 3.4vw, 58px) clamp(56px, 7vw, 100px);
box-sizing: border-box;
}
.character_profile-root[data-character-profile-art-mode="figure"] .character_profile-shell {
z-index: auto !important;
}
.character_profile-layout {
display: grid;
grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
gap: clamp(32px, 4vw, 68px);
align-items: stretch;
}
.character_profile-sidebar {
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 22px;
align-self: stretch;
}
.character_profile-overview {
min-height: calc(100dvh - clamp(86px, 13vh, 148px) - 46px);
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
padding: 8px 0 28px;
}
.character_profile-overview-head {
text-align: center;
}
.character_profile-overview-label {
margin-bottom: 14px;
color: #e6d8cf;
font-size: 16px;
font-weight: 800;
letter-spacing: .18em;
}
.character_profile-portrait {
width: min(318px, 84vw);
height: 236px;
margin: 0 auto;
border: 0;
background: transparent;
box-shadow: none;
}
.character_profile-name {
margin-top: 18px;
font-size: 56px;
line-height: .92;
font-weight: 800;
text-shadow: 0 4px 22px rgba(0,0,0,.94);
}
.character_profile-latin {
margin-top: 8px;
color: #e4d8cf;
font-size: 14px;
letter-spacing: .40em;
text-shadow: 0 2px 12px rgba(0,0,0,.90);
}
.character_profile-rule {
width: min(260px, 80%);
height: 1px;
margin: 16px auto 0;
background: linear-gradient(90deg, transparent, #d8cbc1, rgba(154,20,27,.82), transparent);
}
.character_profile-facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 18px;
margin-top: 22px;
text-align: center;
font-size: 17px;
line-height: 1.38;
}
.character_profile-fact-label {
display: block;
color: #d7c8bf;
font-size: 13px;
}
.character_profile-fact-value {
color: #fff4ec;
}
.character_profile-sticky-nav {
position: sticky;
top: calc(50dvh - var(--archive-nav-half-height, 240px));
display: flex;
flex-direction: column;
gap: 12px;
overflow: visible;
padding-bottom: 24px;
}
.character_profile-nav-panel {
border-left: 1px solid rgba(255,255,255,.24);
background: linear-gradient(90deg, rgba(8,8,8,.72), rgba(10,9,9,.45) 68%, rgba(10,9,9,.08));
padding: 13px 14px 12px 17px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.character_profile-nav-heading {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
margin-bottom: 9px;
}
.character_profile-nav-title {
color: #fff4ec;
font-size: 18px;
font-weight: 850;
letter-spacing: .16em;
}
.character_profile-nav-kicker {
color: #d0bdb3;
font-size: 11px;
letter-spacing: .12em;
}
.character_profile-nav-tree {
display: flex;
flex-direction: column;
gap: 0;
}
.character_profile-nav-children {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 14px;
margin: 1px 0 10px 24px;
padding: 4px 0 6px 12px;
border-left: 1px solid rgba(255,255,255,.10);
}
.character_profile-nav-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border-top: 1px solid rgba(255,255,255,.14);
cursor: pointer;
user-select: none;
transition: background .18s ease, color .18s ease, border-color .18s ease, padding-left .18s ease;
}
.character_profile-nav-item--main {
min-height: 58px;
padding: 12px 8px;
background: linear-gradient(90deg, rgba(255,255,255,.055), rgba(255,255,255,.020), rgba(255,255,255,0));
}
.character_profile-nav-item--sub {
min-height: 44px;
padding: 8px 6px;
border-top-color: rgba(255,255,255,.075);
background: linear-gradient(90deg, rgba(255,255,255,.035), rgba(255,255,255,.012), rgba(255,255,255,0));
}
.character_profile-nav-item[data-archive-active="1"] {
border-top-color: rgba(216,61,67,.58);
background: linear-gradient(90deg, rgba(145,24,31,.46), rgba(255,255,255,.10), rgba(255,255,255,.02));
}
.character_profile-nav-item--main[data-archive-active="1"] {
padding-left: 12px;
}
.character_profile-nav-item--sub[data-archive-active="1"] {
padding-left: 10px;
}
.character_profile-nav-main {
display: flex;
align-items: center;
gap: 11px;
min-width: 0;
}
.character_profile-nav-item--sub .character_profile-nav-main {
gap: 8px;
}
.character_profile-nav-number {
min-width: 40px;
color: #ffe7dc;
font-size: 21px;
font-style: italic;
font-weight: 850;
line-height: 1;
}
.character_profile-nav-item--sub .character_profile-nav-number {
min-width: 31px;
font-size: 17px;
}
.character_profile-nav-label {
overflow: hidden;
color: #fffaf4;
font-size: 19px;
line-height: 1.25;
font-weight: 760;
white-space: nowrap;
text-overflow: ellipsis;
}
.character_profile-nav-item--sub .character_profile-nav-label {
font-size: 14px;
}
.character_profile-nav-meta {
flex: 0 0 auto;
color: #f1ded4;
font-size: 12px;
line-height: 1;
font-weight: 760;
}
.character_profile-nav-item--sub .character_profile-nav-meta {
font-size: 11px;
}
.character_profile-nav-item[data-archive-active="1"] .character_profile-nav-number {
color: #fff0e4;
}
.character_profile-nav-item[data-archive-active="1"] .character_profile-nav-label {
color: #fff;
font-weight: 850;
}
.character_profile-nav-item[data-archive-active="1"] .character_profile-nav-meta {
color: #ffdacf;
}
.character_profile-content {
padding-top: clamp(26px, 4vh, 46px);
}
.character_profile-intro {
margin: 0 4px 18px 0;
padding: 0 0 13px;
border-bottom: 1px solid rgba(168,21,29,.40);
text-align: right;
}
.character_profile-intro-title {
color: #fff4ec;
font-size: clamp(30px, 2.5vw, 42px);
font-weight: 800;
line-height: 1.1;
text-shadow: 0 3px 18px rgba(0,0,0,.86);
}
.character_profile-intro-subtitle {
margin-top: 6px;
color: #c7b9b0;
font-size: 13px;
letter-spacing: .22em;
}
.character_profile-intro-text {
max-width: 62em;
margin-top: 10px;
margin-left: auto;
color: #e2d6cf;
font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", "Source Han Sans SC", sans-serif;
font-size: 16px;
line-height: 1.78;
}
.character_profile-section {
position: relative;
display: grid;
grid-template-columns: 82px minmax(0, 1fr);
gap: 18px;
align-items: start;
border-top: 1px solid rgba(255,255,255,.12);
}
.character_profile-section--archive {
padding: 20px 0;
}
.character_profile-section--module {
padding: 24px 0;
}
.character_profile-section-rail {
position: sticky;
top: 96px;
}
.character_profile-section-number {
color: rgba(244,232,220,.34);
font-size: 38px;
font-style: italic;
line-height: .9;
font-weight: 800;
}
.character_profile-section--light .character_profile-section-number {
color: rgba(238,231,220,.36);
}
.character_profile-section-number--module {
display: inline-flex;
align-items: baseline;
gap: .045em;
color: rgba(166,22,30,.44);
font-size: clamp(10px, .72vw, 12px);
font-style: normal;
letter-spacing: 0;
}
.character_profile-section--light .character_profile-section-number--module {
color: rgba(166,22,30,.40);
}
.character_profile-section-rule {
width: 45px;
height: 2px;
margin-top: 8px;
background: #9f171f;
}
.character_profile-section-subtitle {
margin-top: 9px;
color: #f0e5dd;
font-size: clamp(16px, 1.08vw, 19px);
line-height: 1.32;
font-weight: 800;
letter-spacing: .03em;
}
.character_profile-section--light .character_profile-section-subtitle {
color: #6b5751;
}
.character_profile-surface {
border-left: 1px solid rgba(183,32,39,.50);
background: linear-gradient(90deg, rgba(8,8,8,.52), rgba(8,8,8,.16));
padding: 18px 22px 20px;
}
.character_profile-section--module .character_profile-surface {
border-left-color: rgba(183,32,39,.52);
background: linear-gradient(90deg, rgba(8,8,8,.58), rgba(8,8,8,.20));
padding: 19px 22px 21px;
color: #efe7df;
}
.character_profile-section--light .character_profile-surface {
border-left-color: rgba(128,24,28,.55);
background: linear-gradient(90deg, rgba(238,231,220,.88), rgba(220,210,198,.72));
color: #241d1b;
}
.character_profile-section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 20px;
margin-bottom: 10px;
}
.character_profile-section--module .character_profile-section-head {
margin-bottom: 12px;
}
.character_profile-section-title {
color: #fff4ec;
font-size: clamp(22px, 1.72vw, 30px);
font-weight: 800;
line-height: 1.22;
}
.character_profile-section--module .character_profile-section-title {
color: inherit;
font-size: clamp(23px, 1.75vw, 31px);
}
.character_profile-section-code {
color: #a6161e;
font-size: 28px;
font-style: italic;
font-weight: 800;
line-height: 1;
}
.character_profile-section--module .character_profile-section-code {
color: rgba(166,22,30,.52);
font-size: clamp(11px, .82vw, 13px);
font-style: normal;
font-weight: 700;
letter-spacing: .12em;
text-align: right;
}
.character_profile-section-code-initial {
color: #a6161e;
font-size: clamp(21px, 1.35vw, 28px);
font-weight: 850;
line-height: .9;
}
.character_profile-section-code-rest {
color: rgb(213 188 189 / 59%);
font-size: 18px;
font-weight: 600;
letter-spacing: .06em;
line-height: 1;
}
.character_profile-paragraph {
margin: 1em 0 0;
color: #eee8e2;
font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", "Source Han Sans SC", sans-serif;
font-size: clamp(16px, 1.03vw, 18px);
line-height: 1.92;
}
.character_profile-paragraph:first-child {
margin-top: 0;
}
.character_profile-paragraph--shadow {
text-shadow: 0 2px 8px rgba(0,0,0,.72);
}
.character_profile-module-body {
color: inherit;
font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", "Source Han Sans SC", sans-serif;
font-size: clamp(15px, 1vw, 17px);
line-height: 1.78;
}
.character_profile-voice-grid,
.character_profile-rumor-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 18px;
}
.character_profile-voice-row {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
gap: 10px;
align-items: start;
border-top: 1px solid rgba(255,255,255,.14);
padding-top: 9px;
}
.character_profile-voice-number {
color: #b11b23;
font-style: italic;
font-weight: 800;
}
.character_profile-voice-label,
.character_profile-rumor-title {
display: block;
font-size: 16px;
}
.character_profile-voice-text,
.character_profile-rumor-text {
color: #d8c9c0;
}
.character_profile-gift-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.character_profile-gift-row {
display: grid;
grid-template-columns: 88px minmax(0, 1fr);
gap: 14px;
align-items: start;
border-top: 1px solid rgba(128,24,28,.45);
padding-top: 12px;
}
.character_profile-gift-image {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 88px;
height: 88px;
border: 1px solid rgba(128,24,28,.34);
background: linear-gradient(135deg, rgba(245,242,235,.96), rgba(213,205,194,.72));
color: #6f5850;
font-size: 12px;
font-weight: 800;
padding: 8px;
}
.character_profile-gift-row:first-child .character_profile-gift-image {
background: radial-gradient(circle at 50% 38%, rgba(245,242,235,.96) 0 18%, rgba(138,45,80,.62) 19% 44%, rgba(34,27,34,.74) 45% 100%);
}
.character_profile-gift-name,
.character_profile-memory-title,
.character_profile-whisper-title {
display: block;
font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
font-size: 19px;
line-height: 1.35;
}
.character_profile-gift-description,
.character_profile-memory-description {
color: #6f5850;
}
.character_profile-memory-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.character_profile-memory-row {
display: grid;
grid-template-columns: 132px minmax(0, 1fr);
gap: 18px;
align-items: center;
border-top: 1px solid rgba(128,24,28,.36);
padding-top: 13px;
}
.character_profile-memory-image {
display: flex;
align-items: center;
justify-content: center;
min-height: 116px;
border: 1px solid rgba(128,24,28,.22);
background: rgba(255,255,255,.18);
}
.character_profile-memory-row:first-child .character_profile-memory-image {
background: rgba(255,255,255,.22);
}
.character_profile-memory-condition {
display: block;
margin: .35em 0;
color: #7d2b2d;
font-weight: 400;
}
.character_profile-style-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.character_profile-style-card {
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 92px;
border: 1px solid rgba(255,255,255,.14);
background: linear-gradient(135deg, rgba(120,15,20,.86), rgba(12,12,12,.78));
padding: 12px;
}
.character_profile-style-name {
font-size: 17px;
}
.character_profile-style-desc {
color: #d6c8bf;
}
.character_profile-rumor-row {
border-top: 1px solid rgba(255,255,255,.13);
padding-top: 9px;
}
.character_profile-rumor-title {
color: #f3dfd6;
}
.character_profile-section--light .character_profile-paragraph,
.character_profile-section--light .character_profile-module-body {
color: inherit;
text-shadow: none;
}
.character_profile-whisper-title {
margin-bottom: .4em;
}
@media (max-width: 980px) {
.character_profile-shell {
padding-right: clamp(18px, 5vw, 32px);
padding-left: clamp(18px, 5vw, 32px);
}
.character_profile-layout {
grid-template-columns: 1fr;
}
.character_profile-overview {
min-height: auto;
padding-top: 44px;
}
.character_profile-sticky-nav,
.character_profile-section-rail {
position: static;
}
.character_profile-nav-children {
margin-left: 10px;
}
.character_profile-section {
grid-template-columns: 1fr;
}
.character_profile-section-rail {
display: flex;
align-items: center;
gap: 10px;
}
.character_profile-section-rule {
margin-top: 0;
}
.character_profile-gift-grid,
.character_profile-voice-grid,
.character_profile-rumor-grid,
.character_profile-style-grid {
grid-template-columns: 1fr;
}
}
/* character profile mobile figure staging */
@media (max-width: 700px) {
.character_profile-root .character_profile-bg-art {
padding-left: 0 !important;
padding-right: 0 !important;
justify-content: center !important;
transform: translate3d(0, 1dvh, 0) scale(.92);
transform-origin: 50% 100%;
}
.character_profile-bg-art > span[typeof~="mw:File"],
.character_profile-bg-art > a,
.character_profile-bg-art .mw-file-description,
.character_profile-bg-art figure,
.character_profile-bg-art .mw-halign-none {
width: 100vw;
max-width: 100vw;
justify-content: center;
}
.character_profile-bg-art img {
max-width: min(86vw, 430px);
max-height: min(78dvh, 700px);
object-position: center bottom;
}
.character_profile-root[data-character-profile-art-mode="figure"] .character_profile-bg-art {
padding-left: 0 !important;
padding-right: 0 !important;
align-items: flex-end !important;
justify-content: center !important;
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
transform-origin: 50% 100%;
}
.character_profile-root[data-character-profile-art-mode="figure"] .character_profile-bg-art > span[typeof~="mw:File"],
.character_profile-root[data-character-profile-art-mode="figure"] .character_profile-bg-art > a,
.character_profile-root[data-character-profile-art-mode="figure"] .character_profile-bg-art .mw-file-description,
.character_profile-root[data-character-profile-art-mode="figure"] .character_profile-bg-art figure,
.character_profile-root[data-character-profile-art-mode="figure"] .character_profile-bg-art .mw-halign-none {
width: 100vw;
max-width: 100vw;
justify-content: center;
}
.character_profile-root[data-character-profile-art-mode="figure"] .character_profile-bg-art img {
max-width: min(96vw, 520px);
max-height: min(88dvh, 760px);
object-position: center bottom;
}
.character_profile-root[data-character-profile-art-mode="figure"] .character_profile-art-toggle {
left: clamp(16px, 5vw, 28px) !important;
bottom: clamp(18px, 5dvh, 42px) !important;
}
}
/* /character profile mobile figure staging */
@media (max-width: 620px) {
.character_profile-nav-children {
grid-template-columns: 1fr;
}
.character_profile-facts {
grid-template-columns: 1fr;
}
.character_profile-memory-row,
.character_profile-gift-row {
grid-template-columns: 1fr;
}
}
.character_profile-gift-title-line {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.character_profile-gift-title-line .character_profile-gift-name {
min-width: 0;
}
.character_profile-gift-meta {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
padding: 4px 6px;
background: #000000a3;
color: #ffffff;
font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
font-size: 12px;
font-weight: 760;
line-height: 1;
}
.character_profile-gift-description {
display: block;
margin-top: 8px;
color: #6f5850;
line-height: 1.72;
}
/* 卡面灯箱 */
body.card_lightbox-open {
overflow: hidden;
}
.card_lightbox {
position: fixed;
inset: 0;
z-index: 10000;
display: grid;
place-items: center;
padding: clamp(18px, 4vw, 48px);
background:
radial-gradient(circle at 50% 46%, rgba(255, 236, 230, 0.10), transparent 34%),
rgba(5, 4, 5, 0);
opacity: 0;
pointer-events: none;
transition:
opacity 0.28s cubic-bezier(.22,.61,.36,1),
background-color 0.28s cubic-bezier(.22,.61,.36,1);
}
.card_lightbox.is-open {
background:
radial-gradient(circle at 50% 46%, rgba(255, 236, 230, 0.13), transparent 36%),
rgba(5, 4, 5, 0.88);
opacity: 1;
pointer-events: auto;
}
.card_lightbox-stage {
position: relative;
display: grid;
place-items: center;
width: 100%;
height: 100%;
overflow: hidden;
cursor: grab;
touch-action: none;
transform: translateY(14px) scale(.982);
opacity: .78;
transition:
transform 0.30s cubic-bezier(.22,.61,.36,1),
opacity 0.30s cubic-bezier(.22,.61,.36,1);
}
.card_lightbox.is-open .card_lightbox-stage {
transform: translateY(0) scale(1);
opacity: 1;
}
.card_lightbox.is-dragging .card_lightbox-stage {
cursor: grabbing;
}
.card_lightbox-img {
display: block;
max-width: min(96vw, 1800px);
max-height: 92vh;
width: auto;
height: auto;
object-fit: contain;
user-select: none;
-webkit-user-drag: none;
transform: translate3d(var(--card-lightbox-x, 0px), var(--card-lightbox-y, 0px), 0) scale(var(--card-lightbox-scale, 1));
transform-origin: center center;
transition:
transform 0.18s cubic-bezier(.22,.61,.36,1),
filter 0.24s ease,
box-shadow 0.24s ease;
will-change: transform;
filter: drop-shadow(0 28px 58px rgba(0, 0, 0, 0.58));
}
.card_lightbox.is-dragging .card_lightbox-img {
transition: none;
}
.card_lightbox-tools {
position: fixed;
left: 50%;
bottom: clamp(16px, 3vw, 34px);
z-index: 10001;
display: flex;
align-items: center;
gap: 7px;
padding: 7px;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 999px;
background: linear-gradient(180deg, rgba(44, 39, 39, 0.48), rgba(8, 7, 7, 0.44));
box-shadow:
0 18px 46px rgba(0, 0, 0, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
transform: translateX(-50%) translateY(8px);
opacity: 0;
backdrop-filter: blur(16px) saturate(150%);
-webkit-backdrop-filter: blur(16px) saturate(150%);
transition:
opacity 0.22s ease,
transform 0.24s cubic-bezier(.22,.61,.36,1);
}
.card_lightbox.is-open .card_lightbox-tools {
transform: translateX(-50%) translateY(0);
opacity: .96;
}
.card_lightbox-tool,
.card_lightbox-close {
display: grid;
place-items: center;
min-width: 42px;
height: 38px;
border: 1px solid transparent;
border-radius: 999px;
background: rgba(255, 255, 255, 0.07);
color: rgba(255, 250, 246, 0.92);
font-family: "AlibabaPuHuiTi", "Microsoft YaHei", sans-serif;
font-size: 18px;
line-height: 1;
cursor: pointer;
user-select: none;
transition:
background 0.18s ease,
border-color 0.18s ease,
color 0.18s ease,
transform 0.18s ease;
}
.card_lightbox-tool[data-card-lightbox-action="reset"] {
min-width: 56px;
padding: 0 10px;
font-size: 12px;
letter-spacing: .05em;
}
.card_lightbox-close {
position: fixed;
top: clamp(16px, 3vw, 34px);
right: clamp(16px, 3vw, 34px);
z-index: 10001;
width: 42px;
min-width: 42px;
height: 42px;
border-color: rgba(255, 255, 255, 0.34);
background: rgba(0, 0, 0, 0.32);
font-size: 28px;
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
}
.card_lightbox-tool:hover,
.card_lightbox-tool:focus-visible,
.card_lightbox-close:hover,
.card_lightbox-close:focus-visible {
border-color: rgba(255, 255, 255, 0.65);
background: rgba(255, 255, 255, 0.88);
color: #2a1518;
outline: none;
transform: translateY(-1px);
}
/* Item backpack sandbox fullbleed coverage. */
body.page-Sandbox_道具背包页面原型 .citizen-page-header,
body.page-Sandbox_道具背包页面原型 #citizen-page-header-sticky-sentinel,
body.page-Sandbox_道具背包页面原型 #contentSub {
display: none;
}
html:has(body.page-Sandbox_道具背包页面原型),
body.page-Sandbox_道具背包页面原型,
body.page-Sandbox_道具背包页面原型 .citizen-page-container,
body.page-Sandbox_道具背包页面原型 .mw-body,
body.page-Sandbox_道具背包页面原型 .citizen-body-container,
body.page-Sandbox_道具背包页面原型 .citizen-body,
body.page-Sandbox_道具背包页面原型 #mw-content-text,
body.page-Sandbox_道具背包页面原型 .mw-parser-output,
body.page-Sandbox_道具背包页面原型 .citizen-section {
max-width: none !important;
margin-top: 0 !important;
padding-top: 0 !important;
padding-inline: 0 !important;
}
body.page-Sandbox_道具背包页面原型 .mw-parser-output > .citizen-section:first-child > p:first-child,
body.page-Sandbox_道具背包页面原型 .mw-parser-output > p:first-child,
body.page-Sandbox_道具背包页面原型 .citizen-page-footer,
body.page-Sandbox_道具背包页面原型 .citizen-footer,
body.page-Sandbox_道具背包页面原型 .mw-footer,
body.page-Sandbox_道具背包页面原型 .catlinks,
body.page-Sandbox_道具背包页面原型 .printfooter {
display: none;
margin: 0 !important;
padding: 0 !important;
}
body.page-Sandbox_道具背包页面原型 .item_backpack-prototype--fullbleed {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Homepage arc navigation sandbox. */
body.page-Sandbox_首页弧形导航原型 .citizen-page-header,
body.page-Sandbox_首页弧形导航原型 #citizen-page-header-sticky-sentinel,
body.page-Sandbox_首页弧形导航原型 #contentSub {
display: none;
}
html:has(body.page-Sandbox_首页弧形导航原型),
body.page-Sandbox_首页弧形导航原型,
body.page-Sandbox_首页弧形导航原型 .citizen-page-container,
body.page-Sandbox_首页弧形导航原型 .mw-body,
body.page-Sandbox_首页弧形导航原型 .citizen-body-container,
body.page-Sandbox_首页弧形导航原型 .citizen-body,
body.page-Sandbox_首页弧形导航原型 #mw-content-text,
body.page-Sandbox_首页弧形导航原型 .mw-parser-output,
body.page-Sandbox_首页弧形导航原型 .citizen-section {
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Sandbox_首页弧形导航原型 .mw-parser-output > .citizen-section:first-child > p:first-child,
body.page-Sandbox_首页弧形导航原型 .mw-parser-output > p:first-child,
body.page-Sandbox_首页弧形导航原型 .citizen-page-footer,
body.page-Sandbox_首页弧形导航原型 .citizen-footer,
body.page-Sandbox_首页弧形导航原型 .mw-footer,
body.page-Sandbox_首页弧形导航原型 .catlinks,
body.page-Sandbox_首页弧形导航原型 .printfooter {
display: none;
margin: 0 !important;
padding: 0 !important;
}
body.page-Sandbox_首页弧形导航原型 {
background-image:
radial-gradient(
circle at 50% 30%,
rgba(0, 0, 0, 0) 35%,
rgba(0, 0, 0, 0.4) 100%
),
url("/images/5/50/Background_1.png");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
.wiki_home-root {
position: relative;
isolation: isolate;
width: 100vw;
min-height: 100dvh;
overflow: clip;
color: #f7f1ee;
font-family: 'AlibabaPuHuiTi', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
}
.wiki_home-bg {
position: fixed;
z-index: 1;
inset: 0;
pointer-events: none;
background:
radial-gradient(46% 38% at 50% 100%, rgba(255,235,241,0.24), rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 74%),
radial-gradient(24% 46% at 0% 58%, rgba(255,226,232,0.12), rgba(255,255,255,0) 74%),
radial-gradient(26% 48% at 100% 58%, rgba(255,226,232,0.12), rgba(255,255,255,0) 74%),
linear-gradient(0deg, rgba(5,6,9,0.70) 0%, rgba(8,10,14,0.48) 28%, rgba(10,12,16,0.24) 54%, rgba(10,12,16,0.06) 74%, rgba(10,12,16,0) 100%);
backdrop-filter: blur(13px) saturate(132%);
-webkit-backdrop-filter: blur(13px) saturate(132%);
mask-image: radial-gradient(
ellipse 68vw 95vh at 50% -20vh,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 96%,
rgba(0,0,0,0.08) 100%,
rgba(0,0,0,0.28) 105%,
rgba(0,0,0,0.62) 112%,
rgba(0,0,0,1) 122%
);
-webkit-mask-image: radial-gradient(
ellipse 68vw 95vh at 50% -20vh,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 96%,
rgba(0,0,0,0.08) 100%,
rgba(0,0,0,0.28) 105%,
rgba(0,0,0,0.62) 112%,
rgba(0,0,0,1) 122%
);
}
.wiki_home-bg::before,
.wiki_home-bg::after {
display: none;
}
.wiki_home-bg > a,
.wiki_home-bg > .mw-file-description,
.wiki_home-bg figure,
.wiki_home-bg .mw-halign-none,
.wiki_home-bg img {
display: none !important;
}
.wiki_home-root::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background:
linear-gradient(90deg, rgba(5,6,9,0.42) 0%, rgba(5,6,9,0.10) 30%, rgba(5,6,9,0.06) 62%, rgba(5,6,9,0.34) 100%),
linear-gradient(180deg, rgba(5,6,9,0.08) 0%, rgba(5,6,9,0.02) 48%, rgba(5,6,9,0.54) 100%);
}
.wiki_home-root::after {
content: "";
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: 0.26;
background-image:
linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.020) 1px, transparent 1px);
background-size: 74px 74px;
mask-image: radial-gradient(
ellipse 68vw 95vh at 50% -20vh,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 96%,
rgba(0,0,0,0.08) 100%,
rgba(0,0,0,0.28) 105%,
rgba(0,0,0,0.62) 112%,
rgba(0,0,0,1) 122%
);
-webkit-mask-image: radial-gradient(
ellipse 68vw 95vh at 50% -20vh,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 96%,
rgba(0,0,0,0.08) 100%,
rgba(0,0,0,0.28) 105%,
rgba(0,0,0,0.62) 112%,
rgba(0,0,0,1) 122%
);
}
.wiki_home-topbar {
position: fixed;
z-index: 5;
top: clamp(18px, 2.8vh, 34px);
left: clamp(18px, 3.6vw, 64px);
right: clamp(18px, 3.2vw, 58px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
pointer-events: none;
}
.wiki_home-profile {
pointer-events: auto;
display: grid;
grid-template-columns: 70px minmax(140px, 250px);
align-items: center;
min-width: min(330px, 42vw);
}
.wiki_home-avatar {
position: relative;
z-index: 1;
width: 72px;
aspect-ratio: 1;
border-radius: 50%;
border: 2px solid rgba(230, 61, 61, 0.88);
background: radial-gradient(circle at 48% 32%, #4d5562 0 18%, #171b22 45%, #090a0d 100%);
box-shadow: 0 0 0 4px rgba(15,17,23,0.46), 0 14px 28px rgba(0,0,0,0.34);
}
.wiki_home-avatar::before {
content: "";
position: absolute;
inset: 10px;
border-radius: inherit;
background:
radial-gradient(circle at 48% 34%, rgba(241,214,200,0.86) 0 16%, transparent 17%),
linear-gradient(145deg, transparent 0 34%, rgba(206,205,219,0.74) 35% 58%, transparent 59%);
}
.wiki_home-avatar-level {
position: absolute;
left: 50%;
bottom: -18px;
transform: translateX(-50%);
font-family: Georgia, 'Times New Roman', serif;
font-weight: 700;
font-size: 26px;
color: #fff;
text-shadow: 0 2px 7px rgba(0,0,0,0.75);
}
.wiki_home-nameplate {
min-height: 48px;
display: flex;
align-items: center;
padding: 8px 22px 8px 46px;
margin-left: -34px;
background: linear-gradient(90deg, rgba(13,13,16,0.82), rgba(13,13,16,0.54), rgba(13,13,16,0));
border-left: 1px solid rgba(255,255,255,0.14);
font-family: Georgia, 'Noto Serif SC', serif;
font-size: clamp(22px, 2.4vw, 34px);
font-weight: 700;
line-height: 1;
}
.wiki_home-resource-row {
pointer-events: auto;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
min-width: 0;
}
.wiki_home-resource {
display: grid;
grid-template-columns: 28px auto 24px;
align-items: center;
gap: 10px;
min-width: clamp(132px, 13vw, 184px);
height: 40px;
padding: 0 9px 0 12px;
background: linear-gradient(90deg, rgba(20,22,28,0.60), rgba(20,22,28,0.42));
border: 1px solid rgba(255,255,255,0.10);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 12px 24px rgba(0,0,0,0.24);
backdrop-filter: blur(12px) saturate(132%);
-webkit-backdrop-filter: blur(12px) saturate(132%);
}
.wiki_home-resource-icon {
width: 26px;
aspect-ratio: 1;
border: 1px solid rgba(255,255,255,0.24);
background:
linear-gradient(135deg, rgba(255,255,255,0.36), transparent 38%),
radial-gradient(circle at 50% 45%, #d8b46a, #765d42 62%, #27222a 63%);
}
.wiki_home-resource-value {
font-family: Georgia, 'Times New Roman', serif;
font-weight: 700;
font-size: clamp(18px, 1.9vw, 28px);
white-space: nowrap;
}
.wiki_home-resource-add {
color: rgba(255,255,255,0.86);
font-size: 28px;
line-height: 1;
}
.wiki_home-left-nav {
position: fixed;
z-index: 4;
left: clamp(30px, 4.8vw, 82px);
top: 50%;
transform: translateY(-34%);
display: grid;
gap: clamp(22px, 4vh, 42px);
width: min(210px, 22vw);
}
.wiki_home-side-link,
.wiki_home-arc-link,
.wiki_home-bottom-link,
.wiki_home-interact {
color: inherit !important;
text-decoration: none !important;
cursor: pointer;
}
.wiki_home-side-link {
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
align-items: center;
gap: 14px;
min-height: 58px;
transition: transform 0.24s cubic-bezier(.22,.61,.36,1), opacity 0.24s ease;
}
.wiki_home-side-link:hover,
.wiki_home-side-link:focus-visible {
transform: translateX(7px);
}
.wiki_home-side-icon {
position: relative;
width: 44px;
aspect-ratio: 1;
border-left: 3px solid rgba(255,255,255,0.92);
background:
linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.02)),
rgba(8,10,14,0.18);
clip-path: polygon(0 4%, 100% 18%, 76% 100%, 0 88%);
filter: drop-shadow(0 10px 16px rgba(0,0,0,0.34));
}
.wiki_home-side-icon::before {
content: "";
position: absolute;
inset: 11px 9px;
border: 2px solid rgba(255,255,255,0.86);
border-left: 0;
transform: skewX(-12deg);
}
.wiki_home-side-cn {
font-family: Georgia, 'Noto Serif SC', serif;
font-size: clamp(23px, 2.1vw, 32px);
font-weight: 700;
line-height: 0.96;
text-shadow: 0 3px 12px rgba(0,0,0,0.58);
}
.wiki_home-side-en {
display: block;
margin-top: 3px;
font-family: Georgia, 'Times New Roman', serif;
font-size: 12px;
font-weight: 700;
color: rgba(255,255,255,0.82);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.wiki_home-center-callout {
position: fixed;
z-index: 4;
left: clamp(210px, 22vw, 380px);
bottom: clamp(82px, 12vh, 132px);
display: flex;
align-items: center;
gap: 12px;
color: rgba(255,255,255,0.92);
text-shadow: 0 2px 12px rgba(0,0,0,0.8);
}
.wiki_home-interact-mark {
width: clamp(42px, 4.2vw, 62px);
aspect-ratio: 0.82;
background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(205,209,218,0.82));
clip-path: polygon(50% 100%, 0 0, 100% 0);
filter: drop-shadow(0 8px 18px rgba(0,0,0,0.42));
}
.wiki_home-interact-dot {
width: 28px;
aspect-ratio: 1;
border-radius: 50%;
margin-left: -14px;
background: #c61724;
box-shadow: -20px 0 0 rgba(255,255,255,0.92);
}
.wiki_home-interact-title {
font-family: Georgia, 'Noto Serif SC', serif;
font-size: clamp(24px, 2.7vw, 40px);
font-weight: 700;
}
.wiki_home-interact-more {
margin-left: 4px;
color: rgba(255,255,255,0.62);
letter-spacing: 0.18em;
}
.wiki_home-quote {
position: fixed;
z-index: 3;
left: 38%;
right: 24%;
bottom: clamp(52px, 7.5vh, 86px);
text-align: center;
font-size: clamp(15px, 1.45vw, 21px);
font-weight: 700;
color: rgba(255,255,255,0.92);
text-shadow: 0 2px 10px rgba(0,0,0,0.78);
}
.wiki_home-arc-panel {
position: fixed;
z-index: 4;
right: clamp(42px, 6vw, 108px);
bottom: clamp(108px, 17vh, 190px);
width: clamp(318px, 31vw, 510px);
aspect-ratio: 1.18;
pointer-events: none;
}
.wiki_home-arc-line {
position: absolute;
inset: 6% 0 0 3%;
border-right: 1px solid rgba(239,64,70,0.72);
border-bottom: 1px solid rgba(239,64,70,0.42);
border-radius: 0 0 42% 0;
opacity: 0.62;
}
.wiki_home-arc-link {
pointer-events: auto;
position: absolute;
display: block;
min-width: 170px;
padding: 10px 18px 14px 18px;
background:
linear-gradient(90deg, rgba(10,11,14,0.82), rgba(10,11,14,0.44) 70%, rgba(10,11,14,0)),
radial-gradient(80% 160% at 18% 52%, rgba(187,19,23,0.64), transparent 58%);
border-left: 2px solid rgba(237,55,61,0.84);
box-shadow: 0 16px 34px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.10);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
clip-path: polygon(0 16%, 82% 0, 100% 42%, 87% 100%, 0 92%);
transition: transform 0.24s cubic-bezier(.22,.61,.36,1), filter 0.24s ease;
}
.wiki_home-arc-link:hover,
.wiki_home-arc-link:focus-visible {
transform: translateX(-8px) translateY(-2px);
filter: brightness(1.08);
}
.wiki_home-arc-link--primary {
top: 0;
right: 4%;
min-width: 270px;
padding: 12px 24px 18px;
}
.wiki_home-arc-link--style {
top: 36%;
right: 0;
min-width: 160px;
}
.wiki_home-arc-link--contract {
left: 1%;
bottom: 3%;
min-width: 245px;
}
.wiki_home-arc-chapter {
display: inline-block;
margin-bottom: 5px;
padding: 1px 8px 2px;
background: rgba(14,16,19,0.82);
font-family: Georgia, 'Times New Roman', serif;
font-size: 18px;
font-weight: 700;
}
.wiki_home-arc-cn {
display: block;
font-family: Georgia, 'Noto Serif SC', serif;
font-size: clamp(28px, 3vw, 48px);
font-weight: 700;
line-height: 0.95;
text-shadow: 0 3px 8px rgba(0,0,0,0.7);
}
.wiki_home-arc-link--style .wiki_home-arc-cn {
font-size: clamp(25px, 2.4vw, 38px);
}
.wiki_home-arc-en {
display: block;
margin-top: 5px;
font-family: Georgia, 'Times New Roman', serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(255,255,255,0.82);
}
.wiki_home-arc-orbit {
position: absolute;
right: -2%;
top: -4%;
width: 46px;
aspect-ratio: 1;
border-radius: 50%;
background: #050507;
box-shadow: -24px 86px 0 8px rgba(5,5,7,0.88), -80px 206px 0 5px rgba(5,5,7,0.74);
}
.wiki_home-bottom-nav {
position: fixed;
z-index: 4;
right: clamp(38px, 4.6vw, 82px);
bottom: clamp(28px, 4vh, 54px);
display: grid;
grid-template-columns: repeat(3, minmax(82px, 132px));
align-items: end;
gap: clamp(18px, 3.2vw, 52px);
}
.wiki_home-bottom-link {
position: relative;
display: grid;
justify-items: center;
gap: 5px;
opacity: 0.72;
transition: opacity 0.22s ease, transform 0.22s cubic-bezier(.22,.61,.36,1);
}
.wiki_home-bottom-link:hover,
.wiki_home-bottom-link:focus-visible {
opacity: 1;
transform: translateY(-4px);
}
.wiki_home-bottom-icon {
width: 34px;
aspect-ratio: 1;
border-bottom: 4px solid rgba(170,18,24,0.88);
border-left: 1px solid rgba(255,255,255,0.38);
transform: skewX(-14deg);
}
.wiki_home-bottom-cn {
font-family: Georgia, 'Noto Serif SC', serif;
font-size: clamp(20px, 1.9vw, 31px);
font-weight: 700;
}
.wiki_home-bottom-en {
margin-top: -5px;
font-family: Georgia, 'Times New Roman', serif;
font-size: 10px;
color: rgba(255,255,255,0.52);
text-transform: uppercase;
}
.wiki_home-surface {
position: fixed;
z-index: 2;
inset: 0;
pointer-events: none;
background:
radial-gradient(46% 26% at 50% 82%, rgba(255,236,242,0.24), rgba(255,255,255,0.06) 48%, rgba(255,255,255,0) 76%),
linear-gradient(0deg, rgba(255,235,241,0.10) 0%, rgba(255,235,241,0.05) 34%, rgba(255,235,241,0.015) 62%, rgba(255,235,241,0) 100%);
mask-image: radial-gradient(
ellipse 68vw 95vh at 50% -20vh,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 96%,
rgba(0,0,0,0.08) 100%,
rgba(0,0,0,0.28) 105%,
rgba(0,0,0,0.62) 112%,
rgba(0,0,0,1) 122%
);
-webkit-mask-image: radial-gradient(
ellipse 68vw 95vh at 50% -20vh,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 96%,
rgba(0,0,0,0.08) 100%,
rgba(0,0,0,0.28) 105%,
rgba(0,0,0,0.62) 112%,
rgba(0,0,0,1) 122%
);
}
.wiki_home-mobile-menu {
display: none;
}
@media (max-width: 980px) {
.wiki_home-root {
min-height: 100dvh;
padding: 18px;
display: grid;
align-items: end;
}
.wiki_home-bg img {
object-position: 50% 22%;
}
.wiki_home-topbar {
top: 14px;
left: 14px;
right: 14px;
align-items: flex-start;
}
.wiki_home-profile {
grid-template-columns: 54px minmax(112px, 1fr);
min-width: 0;
}
.wiki_home-avatar {
width: 54px;
}
.wiki_home-avatar-level {
font-size: 20px;
bottom: -14px;
}
.wiki_home-nameplate {
min-height: 40px;
padding-left: 36px;
margin-left: -26px;
font-size: 21px;
}
.wiki_home-resource-row {
display: none;
}
.wiki_home-left-nav,
.wiki_home-center-callout,
.wiki_home-quote,
.wiki_home-arc-panel,
.wiki_home-bottom-nav {
display: none;
}
.wiki_home-surface {
inset: 0;
}
.wiki_home-mobile-menu {
position: relative;
z-index: 5;
display: grid;
gap: 10px;
width: min(100%, 560px);
margin: 0 auto 18px;
padding: 18px;
background: rgba(10,12,16,0.58);
border: 1px solid rgba(255,255,255,0.14);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
box-shadow: 0 24px 52px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.10);
}
.wiki_home-mobile-title {
font-family: Georgia, 'Noto Serif SC', serif;
font-size: 28px;
font-weight: 700;
line-height: 1.05;
}
.wiki_home-mobile-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.wiki_home-mobile-grid .wiki_home-side-link {
min-height: 48px;
grid-template-columns: 32px 1fr;
gap: 8px;
padding: 8px;
background: rgba(255,255,255,0.07);
}
.wiki_home-mobile-grid .wiki_home-side-icon {
width: 28px;
}
.wiki_home-mobile-grid .wiki_home-side-icon::before {
inset: 7px 6px;
}
.wiki_home-mobile-grid .wiki_home-side-cn {
font-size: 18px;
}
.wiki_home-mobile-grid .wiki_home-side-en {
font-size: 9px;
}
}
/* Homepage style button formal prototype. */
body.page-Sandbox_首页弧形导航原型 .citizen-page-header,
body.page-首页 .citizen-page-header,
body.page-Sandbox_首页弧形导航原型 #citizen-page-header-sticky-sentinel,
body.page-首页 #citizen-page-header-sticky-sentinel,
body.page-Sandbox_首页弧形导航原型 #contentSub,
body.page-首页 #contentSub {
display: none;
}
html:has(body.page-Sandbox_首页弧形导航原型),
html:has(body.page-首页),
body.page-Sandbox_首页弧形导航原型,
body.page-首页,
body.page-Sandbox_首页弧形导航原型 .citizen-page-container,
body.page-首页 .citizen-page-container,
body.page-Sandbox_首页弧形导航原型 .mw-body,
body.page-首页 .mw-body,
body.page-Sandbox_首页弧形导航原型 .citizen-body-container,
body.page-首页 .citizen-body-container,
body.page-Sandbox_首页弧形导航原型 .citizen-body,
body.page-首页 .citizen-body,
body.page-Sandbox_首页弧形导航原型 #mw-content-text,
body.page-首页 #mw-content-text,
body.page-Sandbox_首页弧形导航原型 .mw-parser-output,
body.page-首页 .mw-parser-output,
body.page-Sandbox_首页弧形导航原型 .citizen-section,
body.page-首页 .citizen-section {
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Sandbox_首页弧形导航原型 .mw-parser-output > .citizen-section:first-child > p:first-child,
body.page-首页 .mw-parser-output > .citizen-section:first-child > p:first-child,
body.page-Sandbox_首页弧形导航原型 .mw-parser-output > p:first-child,
body.page-首页 .mw-parser-output > p:first-child,
body.page-Sandbox_首页弧形导航原型 .citizen-page-footer,
body.page-首页 .citizen-page-footer,
body.page-Sandbox_首页弧形导航原型 .citizen-footer,
body.page-首页 .citizen-footer,
body.page-Sandbox_首页弧形导航原型 .mw-footer,
body.page-首页 .mw-footer,
body.page-Sandbox_首页弧形导航原型 .catlinks,
body.page-首页 .catlinks,
body.page-Sandbox_首页弧形导航原型 .printfooter,
body.page-首页 .printfooter {
display: none;
margin: 0 !important;
padding: 0 !important;
}
body.page-Sandbox_首页弧形导航原型,
body.page-首页 {
background-color: #111419;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-root[data-wiki-home-prototype="style-only"],
body.page-首页 .wiki_home-root[data-wiki-home-prototype="style-only"] {
position: relative;
width: 100vw;
max-width: none;
min-height: 100dvh;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
overflow-x: clip;
color: #f7f1ee;
font-family: 'AlibabaPuHuiTi', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-hero,
body.page-首页 .wiki_home-hero {
position: relative;
min-height: 100dvh;
overflow: clip;
isolation: isolate;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-hero::before,
body.page-首页 .wiki_home-hero::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(72% 70% at 48% 34%, rgba(255,255,255,0.02), rgba(11,13,18,0.14) 54%, rgba(5,7,11,0.68) 100%),
linear-gradient(90deg, rgba(5,6,9,0.72) 0%, rgba(5,6,9,0.16) 32%, rgba(5,6,9,0.06) 56%, rgba(5,6,9,0.42) 100%),
linear-gradient(180deg, rgba(5,6,9,0.16) 0%, rgba(5,6,9,0.06) 44%, rgba(5,6,9,0.72) 100%);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-hero::after,
body.page-首页 .wiki_home-hero::after {
content: "";
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: 0.36;
background-image:
linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
background-size: 74px 74px;
mask-image: linear-gradient(90deg, rgba(0,0,0,0.9), transparent 34%, transparent 66%, rgba(0,0,0,0.72));
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-surface,
body.page-首页 .wiki_home-surface {
position: absolute;
z-index: 2;
left: 50%;
bottom: -29vh;
transform: translateX(-50%);
width: 124vw;
height: 48vh;
min-height: 310px;
border-radius: 100% 100% 0 0 / 18% 18% 0 0;
background:
radial-gradient(88% 86% at 50% 0%, rgba(255,240,244,0.82), rgba(255,255,255,0.16) 31%, rgba(255,255,255,0.05) 64%),
linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0.05));
border-top: 1px solid rgba(255,235,240,0.72);
box-shadow: 0 -35px 78px -48px rgba(255,166,178,0.68), inset 0 1px 0 rgba(255,255,255,0.32);
backdrop-filter: blur(16px) saturate(135%);
-webkit-backdrop-filter: blur(16px) saturate(135%);
pointer-events: none;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-intro,
body.page-首页 .wiki_home-intro {
position: absolute;
z-index: 6;
left: clamp(28px, 5vw, 88px);
top: clamp(92px, 18vh, 176px);
width: min(420px, 32vw);
color: rgba(255, 248, 244, 0.94);
text-shadow: 0 3px 18px rgba(0,0,0,0.72);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-intro-kicker,
body.page-首页 .wiki_home-intro-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
color: rgba(237,65,65,0.88);
font-family: Georgia, 'Times New Roman', serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-intro-kicker::before,
body.page-首页 .wiki_home-intro-kicker::before {
content: "";
width: 34px;
height: 1px;
background: rgba(237,65,65,0.72);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-intro-title,
body.page-首页 .wiki_home-intro-title {
margin-top: 10px;
font-family: Georgia, 'Noto Serif SC', serif;
font-size: clamp(34px, 4vw, 66px);
font-weight: 700;
line-height: 1;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-intro-body,
body.page-首页 .wiki_home-intro-body {
margin-top: 18px;
max-width: 32em;
color: rgba(255, 248, 244, 0.82);
font-size: clamp(14px, 1vw, 17px);
line-height: 1.8;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-intro-meta,
body.page-首页 .wiki_home-intro-meta {
display: grid;
gap: 7px;
margin-top: 22px;
padding-left: 14px;
border-left: 1px solid rgba(237,65,65,0.48);
color: rgba(255, 248, 244, 0.64);
font-family: Georgia, 'Times New Roman', serif;
font-size: 12px;
line-height: 1.25;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-style-entry,
body.page-首页 .wiki_home-style-entry {
position: absolute;
z-index: 5;
right: clamp(28px, 7.9vw, 132px);
top: 50%;
width: clamp(258px, 23vw, 386px);
aspect-ratio: 13 / 8;
transform: translateY(-31%);
color: #fff;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-style-entry a,
body.page-首页 .wiki_home-style-entry a,
body.page-Sandbox_首页弧形导航原型 .wiki_home-style-entry .mw-file-description,
body.page-首页 .wiki_home-style-entry .mw-file-description,
body.page-Sandbox_首页弧形导航原型 .wiki_home-style-entry figure,
body.page-首页 .wiki_home-style-entry figure,
body.page-Sandbox_首页弧形导航原型 .wiki_home-style-entry .mw-halign-none,
body.page-首页 .wiki_home-style-entry .mw-halign-none {
display: block;
margin: 0;
padding: 0;
border: 0;
background: transparent;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-style-entry img,
body.page-首页 .wiki_home-style-entry img {
display: block;
width: 100%;
height: auto;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-style-layer,
body.page-首页 .wiki_home-style-layer {
position: absolute;
pointer-events: none;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-style-line,
body.page-首页 .wiki_home-style-line {
left: 1%;
top: 22%;
width: 78%;
opacity: 0.82;
filter: drop-shadow(0 12px 18px rgba(0,0,0,0.32));
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-style-glow,
body.page-首页 .wiki_home-style-glow {
left: 43.2%;
top: 41.5%;
width: 19.5%;
opacity: 0.32;
mix-blend-mode: screen;
animation: wiki-home-style-glow 2.55s ease-in-out infinite;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-style-noise,
body.page-首页 .wiki_home-style-noise {
right: 9.2%;
top: 14.5%;
width: 31%;
opacity: 0.13;
mix-blend-mode: screen;
animation: wiki-home-style-noise 5.1s linear infinite;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-style-card,
body.page-首页 .wiki_home-style-card {
position: absolute;
z-index: 4;
right: 8.4%;
top: 13.2%;
width: 33.2%;
pointer-events: auto;
filter:
drop-shadow(0 18px 30px rgba(0,0,0,0.42))
drop-shadow(0 0 14px rgba(150,18,18,0.18));
animation: wiki-home-style-card-glow 5.6s ease-in-out infinite;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-style-card a,
body.page-首页 .wiki_home-style-card a {
cursor: pointer;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-style-card a:hover img,
body.page-首页 .wiki_home-style-card a:hover img,
body.page-Sandbox_首页弧形导航原型 .wiki_home-style-card a:focus-visible img,
body.page-首页 .wiki_home-style-card a:focus-visible img {
filter: brightness(1.08);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-style-title,
body.page-首页 .wiki_home-style-title {
left: 35.0%;
top: 40.2%;
width: 26.2%;
filter: brightness(1.28) contrast(1.12) drop-shadow(0 9px 16px rgba(0,0,0,0.72));
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-style-label,
body.page-首页 .wiki_home-style-label {
right: 9.3%;
top: 61.0%;
width: 9.2%;
opacity: 0.95;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-style-flame,
body.page-首页 .wiki_home-style-flame {
z-index: 6;
right: 6.6%;
width: 5.4%;
opacity: 0.76;
mix-blend-mode: screen;
filter: drop-shadow(0 0 8px rgba(255,255,255,0.25));
animation: wiki-home-style-flame 2.35s ease-in-out infinite;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-style-flame--one,
body.page-首页 .wiki_home-style-flame--one {
top: 39.5%;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-style-flame--two,
body.page-首页 .wiki_home-style-flame--two {
top: 48.5%;
animation-delay: -0.55s;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-style-flame--three,
body.page-首页 .wiki_home-style-flame--three {
top: 56.8%;
animation-delay: -1.05s;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-admin-entry,
body.page-首页 .wiki_home-admin-entry {
position: absolute;
z-index: 6;
right: clamp(28px, 8vw, 132px);
bottom: clamp(34px, 7vh, 82px);
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas:
"mark title"
"mark sub";
align-items: center;
column-gap: 12px;
min-width: 190px;
padding: 12px 18px 13px 14px;
border-left: 2px solid rgba(237,65,65,0.82);
background:
linear-gradient(90deg, rgba(10,11,14,0.82), rgba(10,11,14,0.42) 82%, rgba(10,11,14,0));
color: rgba(255,248,244,0.92) !important;
text-decoration: none !important;
box-shadow: 0 16px 34px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.08);
clip-path: polygon(0 12%, 91% 0, 100% 42%, 91% 100%, 0 92%);
transition: transform 0.24s cubic-bezier(.22,.61,.36,1), filter 0.24s ease;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-admin-entry:hover,
body.page-首页 .wiki_home-admin-entry:hover,
body.page-Sandbox_首页弧形导航原型 .wiki_home-admin-entry:focus-visible,
body.page-首页 .wiki_home-admin-entry:focus-visible {
transform: translateY(-3px);
filter: brightness(1.08);
outline: none;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-admin-mark,
body.page-首页 .wiki_home-admin-mark {
grid-area: mark;
padding: 3px 6px;
background: rgba(237,65,65,0.86);
color: rgba(255,255,255,0.96);
font-family: Georgia, 'Times New Roman', serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-admin-title,
body.page-首页 .wiki_home-admin-title {
grid-area: title;
font-family: Georgia, 'Noto Serif SC', serif;
font-size: clamp(20px, 1.8vw, 30px);
font-weight: 700;
line-height: 1.05;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-admin-sub,
body.page-首页 .wiki_home-admin-sub {
grid-area: sub;
margin-top: 3px;
color: rgba(255,248,244,0.58);
font-size: 11px;
letter-spacing: 0.08em;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-scroll-cue,
body.page-首页 .wiki_home-scroll-cue {
position: absolute;
z-index: 6;
left: 50%;
bottom: clamp(20px, 4vh, 42px);
transform: translateX(-50%);
color: rgba(255,248,244,0.54);
font-family: Georgia, 'Times New Roman', serif;
font-size: 11px;
letter-spacing: 0.16em;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-scroll-cue::after,
body.page-首页 .wiki_home-scroll-cue::after {
content: "";
display: block;
width: 1px;
height: 34px;
margin: 8px auto 0;
background: linear-gradient(180deg, rgba(255,248,244,0.74), rgba(255,248,244,0));
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper-screen,
body.page-首页 .wiki_home-paper-screen {
position: relative;
z-index: 8;
min-height: 100dvh;
margin-top: -12vh;
padding-top: clamp(64px, 10vh, 112px);
color: #1a1a1f;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper,
body.page-首页 .wiki_home-paper {
position: relative;
width: 100vw;
min-height: calc(100dvh + 12vh);
padding: clamp(96px, 12vh, 148px) 0 clamp(86px, 10vh, 128px);
border-radius: 100vw 100vw 0 0 / 2.4em 2.4em 0 0;
border-top: thin solid rgb(255 235 240 / 68%);
background: linear-gradient(to bottom, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.66) 42%, rgba(255,255,255,0.58) 100%);
box-shadow:
0 -40px 80px -45px rgba(0,0,0,0.25),
0 -2px 6px rgb(255 255 255 / 13%),
0 -4px 14px rgba(255,180,200,0.18),
inset 0 1px 0 rgb(255 255 255 / 0%),
inset 0 -30px 60px rgba(0,0,0,0.04);
backdrop-filter: blur(18px) saturate(155%);
-webkit-backdrop-filter: blur(18px) saturate(155%);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper::before,
body.page-首页 .wiki_home-paper::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background:
radial-gradient(120% 70% at 50% -18%, rgba(255,255,255,0.95) 0%, rgba(255,230,235,0.65) 18%, rgba(255,200,215,0.35) 30%, rgba(255,200,215,0.15) 40%, rgba(255,200,215,0) 55%);
mix-blend-mode: screen;
opacity: 0.6;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper::after,
body.page-首页 .wiki_home-paper::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,220,230,0.6),
0 -4px 10px rgba(255,180,200,0.25);
opacity: 0.7;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper-inner,
body.page-首页 .wiki_home-paper-inner {
position: relative;
z-index: 1;
width: min(1480px, calc(100vw - 72px));
margin: 0 auto;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper-head,
body.page-首页 .wiki_home-paper-head {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 430px);
gap: clamp(28px, 6vw, 96px);
align-items: end;
margin-bottom: clamp(34px, 6vh, 72px);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper-kicker,
body.page-首页 .wiki_home-paper-kicker {
color: rgba(117,40,46,0.56);
font-family: Georgia, 'Times New Roman', serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper-title,
body.page-首页 .wiki_home-paper-title {
margin-top: 8px;
color: rgba(31,24,26,0.96);
font-family: Georgia, 'Noto Serif SC', serif;
font-size: clamp(34px, 4.4vw, 78px);
font-weight: 700;
line-height: 1;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper-note,
body.page-首页 .wiki_home-paper-note {
color: rgba(42,21,24,0.62);
font-size: clamp(14px, 0.96vw, 17px);
line-height: 1.85;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper-grid,
body.page-首页 .wiki_home-paper-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-top: 1px solid rgba(44,28,32,0.16);
border-left: 1px solid rgba(44,28,32,0.10);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper-link,
body.page-首页 .wiki_home-paper-link {
min-height: 220px;
display: grid;
grid-template-rows: auto auto 1fr;
gap: 13px;
padding: clamp(22px, 2.2vw, 34px);
border-right: 1px solid rgba(44,28,32,0.10);
border-bottom: 1px solid rgba(44,28,32,0.12);
color: rgba(29,24,25,0.88) !important;
text-decoration: none !important;
background: rgba(255,255,255,0.16);
transition: background 0.22s cubic-bezier(.22,.61,.36,1), color 0.22s cubic-bezier(.22,.61,.36,1);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper-link:hover,
body.page-首页 .wiki_home-paper-link:hover,
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper-link:focus-visible,
body.page-首页 .wiki_home-paper-link:focus-visible {
background: rgba(237,65,65,0.08);
color: rgba(116,24,28,0.96) !important;
outline: none;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper-link-index,
body.page-首页 .wiki_home-paper-link-index {
color: rgba(237,65,65,0.72);
font-family: Georgia, 'Times New Roman', serif;
font-size: 18px;
font-weight: 700;
line-height: 1;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper-link-title,
body.page-首页 .wiki_home-paper-link-title {
font-family: Georgia, 'Noto Serif SC', serif;
font-size: clamp(22px, 1.8vw, 32px);
font-weight: 700;
line-height: 1.1;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper-link-text,
body.page-首页 .wiki_home-paper-link-text {
align-self: end;
color: rgba(42,21,24,0.58);
font-size: 14px;
line-height: 1.7;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper-footer,
body.page-首页 .wiki_home-paper-footer {
display: flex;
flex-wrap: wrap;
gap: 10px 26px;
margin-top: 34px;
padding-top: 18px;
border-top: 1px solid rgba(44,28,32,0.12);
color: rgba(42,21,24,0.5);
font-family: Georgia, 'Times New Roman', serif;
font-size: 12px;
}
@keyframes wiki-home-style-glow {
0%, 100% {
opacity: 0.20;
transform: translate3d(-2px, 2px, 0) scale(0.96);
filter: saturate(0.85) brightness(0.84) blur(0.5px);
}
48% {
opacity: 0.58;
transform: translate3d(4px, -1px, 0) scale(1.08);
filter: saturate(1.18) brightness(1.24) blur(0);
}
}
@keyframes wiki-home-style-card-glow {
0%, 100% {
filter:
drop-shadow(0 18px 30px rgba(0,0,0,0.42))
drop-shadow(0 0 10px rgba(160,18,18,0.18));
}
48% {
filter:
drop-shadow(0 19px 32px rgba(0,0,0,0.42))
drop-shadow(0 0 22px rgba(220,35,28,0.36));
}
}
@keyframes wiki-home-style-noise {
from {
transform: rotate(0deg) scale(0.98);
opacity: 0.08;
}
45% {
opacity: 0.19;
}
to {
transform: rotate(360deg) scale(1.02);
opacity: 0.08;
}
}
@keyframes wiki-home-style-flame {
0%, 100% {
opacity: 0.18;
transform: translateY(2px) scale(0.92);
}
50% {
opacity: 0.64;
transform: translateY(-2px) scale(1.08);
}
}
@media (max-width: 1180px) {
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper-grid,
body.page-首页 .wiki_home-paper-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 980px) {
body.page-Sandbox_首页弧形导航原型 .wiki_home-root[data-wiki-home-prototype="style-only"],
body.page-首页 .wiki_home-root[data-wiki-home-prototype="style-only"] {
display: block;
min-height: 100dvh;
padding: 0;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-intro,
body.page-首页 .wiki_home-intro {
left: 22px;
right: 22px;
top: 78px;
width: auto;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-intro-title,
body.page-首页 .wiki_home-intro-title {
font-size: 34px;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-intro-body,
body.page-首页 .wiki_home-intro-body {
max-width: 28em;
font-size: 13px;
line-height: 1.65;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-intro-meta,
body.page-首页 .wiki_home-intro-meta {
gap: 5px;
margin-top: 14px;
font-size: 11px;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-style-entry,
body.page-首页 .wiki_home-style-entry {
right: 50%;
top: auto;
bottom: clamp(128px, 22vh, 174px);
width: min(92vw, 430px);
transform: translateX(50%);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-admin-entry,
body.page-首页 .wiki_home-admin-entry {
right: 18px;
bottom: 22px;
min-width: 168px;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-scroll-cue,
body.page-首页 .wiki_home-scroll-cue {
display: none;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper-screen,
body.page-首页 .wiki_home-paper-screen {
margin-top: -8vh;
padding-top: 58px;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper,
body.page-首页 .wiki_home-paper {
min-height: 100dvh;
padding: 86px 0 86px;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper-inner,
body.page-首页 .wiki_home-paper-inner {
width: calc(100vw - 36px);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper-head,
body.page-首页 .wiki_home-paper-head {
grid-template-columns: 1fr;
gap: 18px;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper-grid,
body.page-首页 .wiki_home-paper-grid {
grid-template-columns: 1fr;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper-link,
body.page-首页 .wiki_home-paper-link {
min-height: 160px;
}
}
/* ---- 风格奖励 ---- */
.card_content_rewards-section {
margin-top: 34px;
}
.card_content_rewards {
width: 100%;
max-width: 100%;
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 10px;
}
.card_content_reward {
--card-reward-image-width: 72px;
display: flex;
flex-direction: column;
gap: 8px;
min-height: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.card_content_reward-header {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.card_content_reward-display,
.card_content_reward-icon,
.card_content_reward-visual {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
min-height: 0;
border-radius: 0;
overflow: visible;
background: transparent;
}
.card_content_reward-display[data-card-lightbox-image],
.card_content_reward-icon[data-card-lightbox-image] {
cursor: zoom-in;
}
.card_content_reward-display a,
.card_content_reward-display .mw-file-description,
.card_content_reward-display figure,
.card_content_reward-display .mw-halign-none,
.card_content_reward-icon a,
.card_content_reward-icon .mw-file-description,
.card_content_reward-icon figure,
.card_content_reward-icon .mw-halign-none {
display: block;
margin: 0;
padding: 0;
border: 0;
background: transparent;
}
.card_content_reward-display img,
.card_content_reward-icon img {
display: block;
width: var(--card-reward-image-width);
height: var(--card-reward-image-width);
max-width: var(--card-reward-image-width);
max-height: var(--card-reward-image-width);
object-fit: contain;
}
.card_content_reward-display img {
width: min(100%, var(--card-reward-image-width));
height: auto;
max-width: 100%;
}
.card_content_reward-visual--empty {
min-width: var(--card-reward-image-width);
min-height: var(--card-reward-image-width);
color: rgba(64, 35, 43, 0.48);
font-family: serif;
font-size: 1rem;
letter-spacing: 0.08em;
}
.card_content_reward-heading {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
}
.card_content_reward-title-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
min-width: 0;
}
.card_content_reward-name {
min-width: 0;
font-family: serif;
font-weight: 700;
font-size: 1.02rem;
line-height: 1.18;
color: #231319;
}
.card_content_reward-type {
flex: 0 0 auto;
padding: 3px 6px;
border-radius: 2px;
background: rgba(0, 0, 0, 0.74);
color: #fff;
font-size: 0.72rem;
line-height: 1;
}
.card_content_reward-obtain {
font-size: 0.78rem;
line-height: 1.28;
color: rgba(77, 43, 51, 0.64);
}
.card_content_reward-description {
line-height: 1.5;
font-size: 0.9rem;
color: #30252a;
}
/* Atlas frame sandbox prototype. */
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .citizen-page-header,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) #citizen-page-header-sticky-sentinel,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) #contentSub {
display: none;
}
html:has(:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴)),
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴),
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .citizen-page-container,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .mw-body,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .citizen-body-container,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .citizen-body,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) #mw-content-text,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .mw-parser-output,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .citizen-section {
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .mw-parser-output > p:first-child,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .citizen-page-footer,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .citizen-footer,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .mw-footer,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .catlinks,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .printfooter {
display: none;
margin: 0 !important;
padding: 0 !important;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) {
background: #0f0d0e;
}
.atlas_frame-root {
--atlas-red: #b72b2d;
--atlas-ink: #1d1819;
--atlas-paper: rgba(255, 251, 246, 0.84);
--atlas-title-top: -8px;
--atlas-status-top: clamp(110px, 14.2vh, 144px);
--atlas-surface-sticky-top: clamp(154px, 19.8vh, 196px);
position: relative;
isolation: isolate;
width: 100vw;
max-width: none;
min-height: 220dvh;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
overflow-x: clip;
background: transparent;
color: #f7f1ee;
font-family: 'AlibabaPuHuiTi', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
}
.atlas_frame-hero {
position: relative;
z-index: 1;
width: 100vw;
min-height: 100dvh;
pointer-events: auto;
cursor: default;
}
.atlas_frame-hero-art {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.atlas_frame-hero-art > span[typeof~="mw:File"],
.atlas_frame-hero-art a,
.atlas_frame-hero-art .mw-file-description,
.atlas_frame-hero-art figure,
.atlas_frame-hero-art .mw-halign-none {
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
}
.atlas_frame-hero-art img {
width: 105% !important;
height: 105% !important;
max-width: none !important;
object-fit: cover;
object-position: 50% 32%;
display: block;
filter: brightness(1.14) saturate(1.02) contrast(1.02);
transform: translateY(0px) scale(1);
transition: transform 0.8s cubic-bezier(.22,.61,.36,1);
}
.atlas_frame-hero::after {
content: none;
}
.atlas_frame-hero-inner {
position: sticky;
z-index: 6;
top: var(--atlas-title-top);
width: min(1720px, calc(100vw - clamp(48px, 8vw, 144px)));
margin: clamp(126px, 18vh, 196px) auto 0;
padding-top: 0;
pointer-events: none;
}
.atlas_frame-kicker {
color: rgba(255, 247, 241, 0.48);
font-family: Georgia, 'Times New Roman', serif;
font-size: clamp(11px, 0.9vw, 14px);
font-style: italic;
letter-spacing: 0;
line-height: 1.2;
transition: opacity 0.28s cubic-bezier(.22,.61,.36,1), transform 0.34s cubic-bezier(.22,.61,.36,1);
}
.atlas_frame-kicker::before {
content: "";
width: 34px;
height: 1px;
background: rgba(183, 43, 45, 0.84);
}
.atlas_frame-title {
margin-top: 18px;
color: rgba(255, 250, 244, 0.96);
font-family: Georgia, 'Noto Serif SC', 'Source Han Serif SC', serif;
font-size: clamp(30px, 3.35vw, 56px);
font-weight: 700;
line-height: 1.02;
letter-spacing: 0;
text-shadow: 0 8px 30px rgba(0, 0, 0, 0.68);
}
.atlas_frame-title-sub {
display: block;
margin-top: 6px;
color: rgba(183, 43, 45, 0.7);
font-family: Georgia, 'Times New Roman', serif;
font-size: clamp(13px, 1.05vw, 20px);
font-style: italic;
font-weight: 400;
}
.atlas_frame-status {
position: sticky;
z-index: 7;
top: var(--atlas-status-top);
width: min(1720px, calc(100vw - clamp(48px, 8vw, 144px)));
margin: clamp(20px, 2.8vh, 34px) auto 0;
display: flex;
align-items: flex-end;
gap: clamp(24px, 4vw, 58px);
}
.atlas_frame-status-item {
position: relative;
display: grid;
grid-template-columns: auto auto;
align-items: baseline;
gap: 10px;
color: rgba(255, 247, 241, 0.74);
font-family: Georgia, 'Noto Serif SC', serif;
font-size: clamp(20px, 2vw, 31px);
line-height: 1;
}
.atlas_frame-status-item.is-active {
color: rgba(255, 248, 242, 0.98);
}
.atlas_frame-status-item.is-active::after {
content: "";
position: absolute;
left: 0;
right: 8px;
bottom: -13px;
height: 2px;
background: linear-gradient(90deg, var(--atlas-red), rgba(183, 43, 45, 0));
}
.atlas_frame-status-num {
color: #c94647;
font-size: 0.82em;
}
.atlas_frame-surface-wrap {
position: relative;
z-index: 2;
width: 100vw;
min-height: 150dvh;
margin-top: -66vh;
left: 50%;
transform: translate(-50%);
overflow-x: clip;
}
.atlas_frame-surface {
position: sticky;
top: var(--atlas-surface-sticky-top);
width: 100%;
height: calc(100dvh - var(--atlas-surface-sticky-top));
min-height: 0;
box-sizing: border-box;
overflow: hidden;
padding: 76px clamp(32px, 5vw, 96px) 38px;
color: var(--atlas-ink);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.66) 0%, rgba(255, 255, 255, 0.62) 35%, rgba(255, 255, 255, 0.54) 100%);
backdrop-filter: blur(15px) saturate(155%);
-webkit-backdrop-filter: blur(22px) saturate(155%);
border-radius: 100vw 100vw 0 0 / 2.4em 2.4em 0 0;
border-top: thin solid rgb(255 235 240 / 68%);
box-shadow: 0 -40px 80px -45px rgba(0, 0, 0, 0.25), 0 -2px 6px rgb(255 255 255 / 13%), 0 -4px 14px rgba(255, 180, 200, 0.18), inset 0 1px 0 rgb(255 255 255 / 0%), inset 0 -30px 60px rgba(0, 0, 0, 0.04);
}
.atlas_frame-surface::before {
content: none;
}
.atlas_frame-shell {
position: relative;
z-index: 1;
width: min(1640px, 100%);
height: 100%;
min-height: 0;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.atlas_frame-toolbar {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
align-items: stretch;
flex: 0 0 auto;
margin-bottom: 18px;
}
.atlas_frame-search,
.atlas_frame-sort {
min-height: 38px;
display: flex;
align-items: center;
border: 1px solid rgba(40, 30, 32, 0.1);
border-radius: 6px;
background: rgba(255, 255, 255, 0.42);
color: rgba(29, 24, 25, 0.62);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}
.atlas_frame-search {
width: min(330px, 24vw);
justify-content: flex-start;
padding: 0 16px;
}
.atlas_frame-chip-row {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.atlas_frame-chip,
.atlas_frame-sort {
padding: 0 16px;
white-space: nowrap;
}
.atlas_frame-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(290px, 340px);
gap: clamp(20px, 2.2vw, 34px);
align-items: stretch;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
.atlas_frame-filter,
.atlas_frame-preview {
min-height: 420px;
border-left: 1px solid rgba(38, 30, 32, 0.1);
border-right: 1px solid rgba(255, 255, 255, 0.5);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.08));
}
.atlas_frame-filter {
display: none;
}
.atlas_frame-filter-title,
.atlas_frame-preview-title {
font-family: Georgia, 'Noto Serif SC', serif;
font-size: 25px;
font-weight: 700;
}
.atlas_frame-filter-line {
height: 42px;
display: flex;
align-items: center;
margin-top: 20px;
border-bottom: 1px solid rgba(38, 30, 32, 0.08);
color: rgba(29, 24, 25, 0.58);
}
.atlas_frame-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px 16px;
height: 100%;
min-height: 0;
overflow-y: auto;
align-content: start;
padding-right: 8px;
overscroll-behavior: contain;
}
.atlas_frame-placeholder-card {
aspect-ratio: 1348 / 692;
border-radius: 5px;
background:
linear-gradient(145deg, rgba(24, 20, 23, 0.82) 0 48%, rgba(255, 255, 255, 0.72) 49% 100%),
rgba(255, 255, 255, 0.2);
box-shadow: 0 10px 22px rgba(55, 42, 45, 0.08);
}
.atlas_frame-placeholder-card.is-active {
outline: 1px solid rgba(183, 43, 45, 0.72);
outline-offset: 3px;
}
.atlas_frame-preview {
padding: 28px 28px 32px;
border-radius: 8px;
}
.atlas_frame-preview-art {
height: 260px;
margin-top: 24px;
border-radius: 6px;
background:
radial-gradient(80% 80% at 50% 36%, rgba(72, 58, 62, 0.28), transparent 64%),
linear-gradient(180deg, rgba(20, 17, 19, 0.88), rgba(20, 17, 19, 0.64));
}
.atlas_frame-preview-copy {
margin-top: 22px;
color: rgba(29, 24, 25, 0.62);
line-height: 1.8;
}
@media (max-width: 1160px) {
.atlas_frame-root {
--atlas-surface-sticky-top: clamp(164px, 21vh, 208px);
}
.atlas_frame-filter-row--primary {
align-items: stretch;
flex-direction: column;
}
.atlas_frame-search {
width: 100%;
}
.atlas_frame-layout {
grid-template-columns: 1fr;
overflow: auto;
}
.atlas_frame-filter,
.atlas_frame-preview {
min-height: 0;
}
.atlas_frame-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
height: auto;
overflow: visible;
}
}
@media (max-width: 680px) {
.atlas_frame-root {
--atlas-title-top: -4px;
--atlas-status-top: 116px;
--atlas-surface-sticky-top: 178px;
min-height: auto;
}
.atlas_frame-hero {
min-height: 92dvh;
}
.atlas_frame-hero-inner {
width: calc(100vw - 36px);
margin-top: 96px;
}
.atlas_frame-status {
width: calc(100vw - 36px);
margin-top: 20px;
left: auto;
right: auto;
gap: 18px;
overflow-x: auto;
padding-bottom: 4px;
}
.atlas_frame-surface-wrap {
margin-top: -60vh;
min-height: auto;
}
.atlas_frame-surface {
position: relative;
top: auto;
height: auto;
min-height: 100dvh;
overflow: visible;
padding: 72px 18px 72px;
}
.atlas_frame-shell {
height: auto;
display: block;
}
.atlas_frame-filter-row,
.atlas_frame-filter-left {
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: 3px;
}
.atlas_frame-filter-group {
flex: 0 0 auto;
}
.atlas_frame-grid {
grid-template-columns: 1fr;
height: auto;
overflow: visible;
padding-right: 0;
}
}
.atlas_frame-hero-art::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(90deg, rgba(5, 4, 5, 0.84), rgba(5, 4, 5, 0.38) 42%, rgba(5, 4, 5, 0.6) 100%),
radial-gradient(
ellipse at center,
rgba(0,0,0,0.38) 24%,
rgba(0,0,0,0.88) 100%
);
opacity: 0.76;
transition: opacity 0.8s cubic-bezier(.22,.61,.36,1);
}
.atlas_frame-hero-art.scrolled::after {
opacity: 1;
}
.atlas_frame-hero-art.scrolled img {
transform: translateY(-10px) scale(1.015);
}
.atlas_frame-grid::-webkit-scrollbar {
width: 7px;
}
.atlas_frame-grid::-webkit-scrollbar-thumb {
background: rgba(80, 44, 48, 0.28);
border-radius: 999px;
}
.atlas_frame-filter-strip {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 14px;
min-width: 0;
}
.atlas_frame-filter-group {
display: flex;
align-items: center;
gap: 6px;
min-height: 42px;
padding: 0 10px;
border-left: 1px solid rgba(40, 30, 32, 0.1);
}
.atlas_frame-filter-label {
margin-right: 2px;
color: rgba(29, 24, 25, 0.5);
font-size: 13px;
white-space: nowrap;
}
.atlas_frame-filter-option {
min-width: 34px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 10px;
border: 1px solid rgba(40, 30, 32, 0.1);
border-radius: 5px;
background: rgba(255, 255, 255, 0.32);
color: rgba(29, 24, 25, 0.58);
font-size: 13px;
line-height: 1;
white-space: nowrap;
cursor: pointer;
}
.atlas_frame-filter-option.is-active {
border-color: rgba(183, 43, 45, 0.34);
background: rgba(183, 43, 45, 0.11);
color: rgba(116, 24, 28, 0.88);
}
.atlas_frame-root.atlas_frame-is-pinned .atlas_frame-kicker {
opacity: 0;
transform: translateY(-18px);
}
.atlas_frame-filter-row {
display: flex;
align-items: center;
gap: 10px 14px;
min-width: 0;
}
.atlas_frame-filter-row--primary {
justify-content: space-between;
}
.atlas_frame-filter-left {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 14px;
min-width: 0;
}
.atlas_frame-filter-row--desire {
flex-wrap: wrap;
padding-top: 2px;
}
.atlas_frame-filter-row--tags {
display: block;
padding-top: 2px;
}
.atlas_frame-tag-toggle {
display: grid;
grid-template-columns: auto minmax(80px, 1fr) auto;
align-items: center;
gap: 12px;
min-height: 28px;
color: rgba(29, 24, 25, 0.48);
font-size: 13px;
cursor: pointer;
}
.atlas_frame-tag-toggle-line {
height: 1px;
background: linear-gradient(90deg, rgba(116, 24, 28, 0.24), rgba(38, 30, 32, 0.08));
}
.atlas_frame-tag-toggle-mark {
color: rgba(116, 24, 28, 0.64);
font-size: 16px;
line-height: 1;
}
.atlas_frame-tag-panel {
max-height: 0;
overflow: hidden;
display: flex;
flex-wrap: wrap;
gap: 8px;
opacity: 0;
transform: translateY(-4px);
transition: max-height 0.34s cubic-bezier(.22,.61,.36,1), opacity 0.24s cubic-bezier(.22,.61,.36,1), transform 0.34s cubic-bezier(.22,.61,.36,1);
}
.atlas_frame-root.atlas_frame-tags-expanded .atlas_frame-tag-panel {
max-height: 96px;
opacity: 1;
transform: translateY(0);
padding-top: 8px;
}
.atlas_frame-root.atlas_frame-tags-expanded .atlas_frame-tag-toggle-mark {
transform: rotate(45deg);
}
.atlas_frame-tag-option {
height: 28px;
display: inline-flex;
align-items: center;
padding: 0 10px;
border: 1px solid rgba(40, 30, 32, 0.09);
border-radius: 5px;
background: rgba(255, 255, 255, 0.26);
color: rgba(29, 24, 25, 0.56);
font-size: 13px;
white-space: nowrap;
cursor: pointer;
}
@keyframes atlas_frame-pin-settle {
0% { transform: translateY(6px); }
58% { transform: translateY(-2px); }
100% { transform: translateY(0); }
}
.atlas_frame-root.atlas_frame-pin-kick .atlas_frame-hero-inner,
.atlas_frame-root.atlas_frame-pin-kick .atlas_frame-status,
.atlas_frame-root.atlas_frame-pin-kick .atlas_frame-surface {
animation: atlas_frame-pin-settle 0.46s cubic-bezier(.22,1.18,.36,1) both;
}
/* atlas filter sandbox ui polish */
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-kicker,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-title,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-status,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-toolbar,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-layout {
text-rendering: geometricPrecision;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-status-item {
color: rgba(255, 247, 241, 0.88);
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.64);
transition: color 0.2s cubic-bezier(.22,.61,.36,1), opacity 0.2s cubic-bezier(.22,.61,.36,1);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-status-item:hover,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-status-item:focus-visible {
color: rgba(255, 251, 246, 1);
outline: none;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-filter-left {
gap: 10px 24px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-filter-group {
border-left: 0;
padding: 0;
gap: 7px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-filter-label {
position: relative;
display: inline-flex;
align-items: center;
min-height: 32px;
margin-right: 4px;
padding: 0 10px 0 0;
color: rgba(29, 24, 25, 0.92);
font-family: Georgia, 'Noto Serif SC', serif;
font-size: 15px;
font-weight: 700;
line-height: 1;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-filter-label::after {
content: "";
width: 18px;
height: 1px;
margin-left: 8px;
background: rgba(237, 65, 65, 0.7);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-filter-option,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-tag-option {
position: relative;
min-width: 34px;
height: 32px;
gap: 5px;
padding: 0 8px;
border: 0;
border-radius: 0;
background: transparent;
color: rgba(29, 24, 25, 0.78);
font-weight: 600;
box-shadow: none;
transition: color 0.18s cubic-bezier(.22,.61,.36,1), opacity 0.18s cubic-bezier(.22,.61,.36,1);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-filter-option::before,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-tag-option::before {
content: "";
width: 4px;
height: 4px;
flex: 0 0 4px;
border-radius: 50%;
background: rgba(237, 65, 65, 0);
transition: background 0.18s cubic-bezier(.22,.61,.36,1);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-filter-option::after,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-tag-option::after {
content: "";
position: absolute;
left: 8px;
right: 8px;
bottom: 1px;
height: 1px;
background: rgba(237, 65, 65, 0);
transition: background 0.18s cubic-bezier(.22,.61,.36,1);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-filter-option:hover,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-filter-option:focus-visible,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-tag-option:hover,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-tag-option:focus-visible {
color: #ed4141;
outline: none;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-filter-option:hover::after,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-filter-option:focus-visible::after,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-tag-option:hover::after,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-tag-option:focus-visible::after {
background: rgba(237, 65, 65, 0.45);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-filter-option.is-active,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-tag-option.is-active {
background: linear-gradient(180deg, rgba(237, 65, 65, 0.08), rgba(237, 65, 65, 0));
border-color: transparent;
color: #ed4141;
box-shadow: none;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-filter-option.is-active::before,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-tag-option.is-active::before {
background: #ed4141;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-filter-option.is-active::after,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-tag-option.is-active::after {
background: rgba(237, 65, 65, 0.95);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-filter-icon {
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 22px;
margin-left: -2px;
background: transparent;
overflow: visible;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-filter-icon > span,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-filter-icon a,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-filter-icon .mw-file-description,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-filter-icon figure {
display: contents;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-filter-icon img {
width: 22px !important;
height: 22px !important;
max-width: none !important;
object-fit: contain;
filter: brightness(0.88) contrast(1.1) saturate(0.95);
opacity: 0.84;
transition: opacity 0.18s cubic-bezier(.22,.61,.36,1), filter 0.18s cubic-bezier(.22,.61,.36,1);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-filter-option:hover .atlas_frame-filter-icon img,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-filter-option.is-active .atlas_frame-filter-icon img {
opacity: 1;
filter: brightness(1.12) contrast(1.14) saturate(1.18);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-search {
width: min(330px, 24vw);
justify-content: flex-start;
min-height: 34px;
padding: 0 0 3px;
border: 0;
border-bottom: 1px solid rgba(60, 42, 45, 0.24);
border-radius: 0;
background: transparent;
color: rgba(29, 24, 25, 0.7);
font-weight: 600;
box-shadow: none;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-search-mark {
width: 13px;
height: 13px;
position: relative;
margin-right: 8px;
border: 2px solid rgba(237, 65, 65, 0.62);
border-radius: 999px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-search-mark::after {
content: "";
position: absolute;
width: 6px;
height: 2px;
right: -5px;
bottom: -3px;
background: rgba(237, 65, 65, 0.62);
transform: rotate(45deg);
transform-origin: left center;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-tag-toggle {
color: rgba(29, 24, 25, 0.7);
font-weight: 700;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-tag-toggle-line {
background: linear-gradient(90deg, rgba(237, 65, 65, 0.58), rgba(38, 30, 32, 0.18));
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-tag-toggle-mark {
color: #ed4141;
transition: transform 0.24s cubic-bezier(.22,.61,.36,1);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-tag-option {
height: 28px;
padding: 0 8px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-placeholder-card {
box-shadow: none;
transition: outline-color 0.2s cubic-bezier(.22,.61,.36,1), filter 0.2s cubic-bezier(.22,.61,.36,1);
outline: 1px solid rgba(90, 56, 60, 0);
outline-offset: 0;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-placeholder-card:hover,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-placeholder-card.is-active {
transform: none;
filter: saturate(1.02) contrast(1.02);
box-shadow: none;
outline-color: rgba(237, 65, 65, 0.62);
}
/* /atlas filter sandbox ui polish */
/* atlas filter sandbox readability tuning */
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-toolbar {
font-size: clamp(14px, 0.84vw, 16px);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-filter-label {
min-height: 36px;
font-size: clamp(16px, 0.98vw, 18px);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-filter-option {
height: 36px;
font-size: clamp(14px, 0.82vw, 16px);
padding-right: 10px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-tag-option {
height: 32px;
font-size: clamp(14px, 0.78vw, 15px);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-search {
min-height: 38px;
font-size: clamp(14px, 0.82vw, 16px);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-filter-icon {
width: 24px;
height: 24px;
flex-basis: 24px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-filter-icon img {
width: 24px !important;
height: 24px !important;
}
/* /atlas filter sandbox readability tuning */
/* atlas card list prototype variants */
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px 18px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto {
--atlas-card-base: #060505;
--atlas-card-edge: #c72d38;
--atlas-card-edge-size: 3px;
position: relative;
aspect-ratio: 1348 / 692;
overflow: hidden;
border: 1px solid rgba(42, 32, 34, 0.18);
border-radius: 3px;
background: var(--atlas-card-base);
cursor: pointer;
color: rgba(255, 250, 244, 0.96);
isolation: isolate;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-img {
position: relative;
z-index: 1;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-img,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-img > span,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-img a,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-img .mw-file-description,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-img figure {
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-img img {
display: block;
width: 100% !important;
height: auto !important;
max-width: none !important;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto--r6-crop-edge-3 .atlas_card-proto-img img,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto--r6-crop-edge-6 .atlas_card-proto-img img,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto--r5-crop-edge-4 .atlas_card-proto-img img,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto--r4-crop-edge-4 .atlas_card-proto-img img {
transform: translateY(-5.2%) scale(1.055);
transform-origin: 50% 0;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: var(--atlas-card-base);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto::after {
content: "";
position: absolute;
z-index: 2;
right: 0;
bottom: 0;
left: 0;
height: var(--atlas-card-edge-size);
background: var(--atlas-card-edge);
pointer-events: none;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-info {
position: absolute;
z-index: 3;
right: clamp(6px, calc(1.05vw - 2px), 12px);
bottom: calc(var(--atlas-card-edge-size) + 4px);
left: 39%;
display: flex;
flex-direction: column;
align-items: flex-end;
text-align: right;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-meta {
display: inline-flex;
max-width: 100%;
align-items: center;
justify-content: flex-end;
gap: 7px;
margin: 0 0 1px;
color: rgba(255,255,255,.72);
font-family: 'AlibabaPuHuiTi', 'Noto Sans SC', sans-serif;
font-size: clamp(11px, .76vw, 13px);
line-height: 1;
white-space: nowrap;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-prof,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-character {
color: rgba(255, 245, 238, 0.72);
font-family: 'AlibabaPuHuiTi', 'Noto Sans SC', sans-serif;
font-size: clamp(11px, .76vw, 13px);
font-weight: 500;
line-height: 1;
text-shadow: 0 1px 1px rgba(12, 6, 6, 0.28);
transform: translate(4px, -4px);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-character {
color: rgba(255, 246, 240, 0.72);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-title-row {
display: inline-flex;
max-width: 100%;
align-items: center;
justify-content: flex-end;
gap: 5px;
line-height: .98;
white-space: nowrap;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-title {
min-width: 0;
color: rgba(255,250,244,.98);
font-family: Georgia, 'Noto Serif SC', serif;
font-size: clamp(19px, 1.28vw, 24px);
font-weight: 700;
line-height: .96;
text-shadow: 0 1px 1px rgba(10, 4, 5, 0.42);
white-space: nowrap;
transform: translateX(-1px);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-title-row .atlas_card-proto-prof {
color: rgba(255, 246, 240, 0.74);
font-family: 'AlibabaPuHuiTi', 'Noto Sans SC', sans-serif;
font-size: clamp(11px, .68vw, 12px);
font-weight: 500;
line-height: 1;
align-items: center;
transform: translateY(1px);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-prof-icon,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-prof-icon > span,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-prof-icon a,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-prof-icon .mw-file-description,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-prof-icon figure {
display: inline-flex;
width: 22px;
height: 22px;
align-items: center;
justify-content: center;
flex: 0 0 22px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-prof-icon img {
width: 22px !important;
height: 22px !important;
max-width: none !important;
object-fit: contain;
transform: translateY(0);
filter: brightness(1.14) contrast(1.08) saturate(1.12);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-desire,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-desire-icon,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-desire-icon > span,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-desire-icon a,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-desire-icon .mw-file-description,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-desire-icon figure {
display: inline-flex;
width: 29px;
height: 29px;
align-items: center;
justify-content: center;
flex: 0 0 29px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-desire-icon img {
width: 29px !important;
height: 29px !important;
max-width: none !important;
object-fit: contain;
transform: translateY(0);
filter: brightness(1.2) contrast(1.12) saturate(1.22);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-info p,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-meta p,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-title-row p {
display: contents;
margin: 0;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto--r6-keep-edge-3,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto--r6-crop-edge-3,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto--r6-keep-edge-6,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto--r6-crop-edge-6 {
--atlas-card-base:
radial-gradient(15% 6% at 86% 98%, rgba(255, 164, 166, 0.18) 0%, rgba(232, 54, 64, 0.12) 42%, rgba(232, 54, 64, 0) 76%),
radial-gradient(8% 4% at 96% 94%, rgba(255, 205, 207, 0.12) 0%, rgba(255, 205, 207, 0.07) 34%, rgba(255, 205, 207, 0) 72%),
radial-gradient(12% 4% at 75% 103%, rgba(185, 38, 49, 0.18) 0%, rgba(185, 38, 49, 0.1) 45%, rgba(185, 38, 49, 0) 78%),
radial-gradient(124% 96% at 101% 104%, rgba(232, 42, 53, 0.6) 0%, rgba(184, 35, 47, 0.46) 20%, rgba(94, 18, 28, 0.32) 38%, rgba(22, 7, 9, 0.96) 58%, rgba(8, 5, 5, 1) 80%),
linear-gradient(135deg, #080505 0%, #130708 54%, #070505 100%);
--atlas-card-edge: #c92d39;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto--r5-keep-edge-4,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto--r5-crop-edge-4 {
--atlas-card-base:
radial-gradient(15% 6% at 86% 98%, rgba(255, 228, 164, 0.16) 0%, rgba(213, 169, 70, 0.11) 42%, rgba(213, 169, 70, 0) 76%),
radial-gradient(8% 4% at 96% 94%, rgba(255, 240, 196, 0.11) 0%, rgba(255, 240, 196, 0.06) 34%, rgba(255, 240, 196, 0) 72%),
radial-gradient(12% 4% at 75% 103%, rgba(142, 101, 33, 0.16) 0%, rgba(142, 101, 33, 0.09) 45%, rgba(142, 101, 33, 0) 78%),
radial-gradient(124% 96% at 101% 104%, rgba(218, 170, 62, 0.56) 0%, rgba(154, 111, 34, 0.4) 20%, rgba(76, 50, 16, 0.28) 38%, rgba(22, 16, 8, 0.96) 58%, rgba(8, 7, 6, 1) 80%),
linear-gradient(135deg, #080706 0%, #121009 54%, #070606 100%);
--atlas-card-edge: #d4ab4a;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto--r4-keep-edge-4,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto--r4-crop-edge-4 {
--atlas-card-base:
radial-gradient(15% 6% at 86% 98%, rgba(221, 185, 255, 0.15) 0%, rgba(166, 111, 212, 0.1) 42%, rgba(166, 111, 212, 0) 76%),
radial-gradient(8% 4% at 96% 94%, rgba(238, 219, 255, 0.1) 0%, rgba(238, 219, 255, 0.06) 34%, rgba(238, 219, 255, 0) 72%),
radial-gradient(12% 4% at 75% 103%, rgba(102, 59, 143, 0.15) 0%, rgba(102, 59, 143, 0.08) 45%, rgba(102, 59, 143, 0) 78%),
radial-gradient(124% 96% at 101% 104%, rgba(160, 99, 210, 0.54) 0%, rgba(104, 57, 145, 0.38) 20%, rgba(51, 28, 76, 0.27) 38%, rgba(15, 11, 21, 0.96) 58%, rgba(7, 6, 9, 1) 80%),
linear-gradient(135deg, #070609 0%, #100b16 54%, #070609 100%);
--atlas-card-edge: #a974d6;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto:hover,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto.is-active {
border-color: color-mix(in srgb, var(--atlas-card-edge) 72%, rgba(255,255,255,.4));
}
@media (max-width: 1320px) {
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* atlas preview toggle and panel */
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-filter-row--primary {
align-items: center;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
height: 34px;
margin-left: auto;
color: rgba(41, 29, 32, 0.62);
font-size: clamp(13px, 0.76vw, 14px);
cursor: pointer;
user-select: none;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-toggle:focus-visible {
outline: none;
color: #ed4141;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-toggle-track {
position: relative;
width: 34px;
height: 18px;
border-radius: 999px;
background: rgba(48, 36, 39, 0.14);
box-shadow: inset 0 0 0 1px rgba(48, 36, 39, 0.12);
transition: background 0.2s cubic-bezier(.22,.61,.36,1), box-shadow 0.2s cubic-bezier(.22,.61,.36,1);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-toggle-thumb {
position: absolute;
left: 2px;
top: 2px;
width: 14px;
height: 14px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 1px 4px rgba(38, 26, 29, 0.22);
transition: transform 0.22s cubic-bezier(.22,.61,.36,1);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-toggle.is-active {
color: #ed4141;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-toggle.is-active .atlas_frame-preview-toggle-track {
background: rgba(237, 65, 65, 0.72);
box-shadow: inset 0 0 0 1px rgba(237, 65, 65, 0.28), 0 4px 12px rgba(237, 65, 65, 0.16);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-toggle.is-active .atlas_frame-preview-toggle-thumb {
transform: translateX(16px);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview {
display: flex;
flex-direction: column;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-mode {
color: rgba(43, 32, 35, 0.48);
font-size: 12px;
text-align: right;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art {
position: relative;
overflow: hidden;
background-size: cover;
background-position: center;
transition: background-image 0.2s ease, filter 0.24s ease;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(255,255,255,0.06), rgba(12,10,11,0.16)),
linear-gradient(135deg, transparent 0 42%, rgba(255,255,255,0.12) 48%, transparent 58% 100%);
mix-blend-mode: screen;
pointer-events: none;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-meta {
margin-top: 20px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-name {
color: rgba(33, 23, 26, 0.92);
font-family: Georgia, 'Noto Serif SC', serif;
font-size: clamp(24px, 1.7vw, 30px);
font-weight: 700;
line-height: 1.08;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-sub {
margin-top: 5px;
color: rgba(43, 32, 35, 0.58);
font-size: 13px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 12px;
margin-top: 18px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-stat {
display: grid;
gap: 3px;
min-width: 0;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-stat span {
color: rgba(43, 32, 35, 0.44);
font-size: 12px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-stat b {
color: rgba(33, 23, 26, 0.82);
font-size: 14px;
font-weight: 600;
line-height: 1.3;
}
/* /atlas preview toggle and panel */
/* atlas collapsed filter groups */
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-root.atlas_frame-tags-expanded .atlas_frame-tag-panel {
max-height: clamp(180px, 23vh, 240px);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-tag-panel {
align-content: flex-start;
gap: 8px 10px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-tag-section {
flex: 1 0 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 7px 8px;
min-width: 0;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-tag-section + .atlas_frame-tag-section {
padding-top: 2px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-tag-section-label {
display: inline-flex;
align-items: center;
min-width: 68px;
height: 30px;
color: rgba(36, 26, 29, 0.66);
font-size: clamp(14px, 0.82vw, 15px);
font-weight: 600;
white-space: nowrap;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-tag-section-label::after {
content: "";
width: 14px;
height: 1px;
margin-left: 8px;
background: rgba(237, 65, 65, 0.58);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-panel-option {
height: 30px;
padding: 0 8px;
font-size: clamp(13px, 0.76vw, 14px);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-tag-section--character .atlas_frame-panel-option {
min-width: 42px;
}
/* /atlas collapsed filter groups */
/* atlas black top edge correction */
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto {
border: 0;
box-shadow:
0 8px 18px rgba(38, 28, 30, 0.10),
0 1px 0 rgba(255, 255, 255, 0.18);
transition:
box-shadow 0.28s cubic-bezier(.22,.61,.36,1),
transform 0.28s cubic-bezier(.22,.61,.36,1);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto:hover,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto:focus-visible,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto.is-active {
border-color: transparent;
box-shadow:
0 14px 30px rgba(38, 28, 30, 0.16),
0 2px 0 rgba(255, 255, 255, 0.18);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto::before {
transition:
filter 0.30s cubic-bezier(.22,.61,.36,1),
opacity 0.30s cubic-bezier(.22,.61,.36,1);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto::after {
transition:
height 0.24s cubic-bezier(.22,.61,.36,1),
box-shadow 0.26s cubic-bezier(.22,.61,.36,1),
filter 0.26s cubic-bezier(.22,.61,.36,1);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto:hover::before,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto:focus-visible::before,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto.is-active::before {
filter: brightness(1.18) saturate(1.32);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto:hover::after,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto:focus-visible::after,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto.is-active::after {
height: calc(var(--atlas-card-edge-size) + 1px);
box-shadow:
0 -5px 18px color-mix(in srgb, var(--atlas-card-edge) 62%, transparent),
0 -1px 5px color-mix(in srgb, var(--atlas-card-edge) 78%, white 8%);
filter: brightness(1.14) saturate(1.24);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-info {
right: clamp(14px, 1.3vw, 18px);
left: 32%;
transition: transform 0.30s cubic-bezier(.22,.61,.36,1);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto:hover .atlas_card-proto-info,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto:focus-visible .atlas_card-proto-info,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto.is-active .atlas_card-proto-info {
transform: translate3d(-2px, -2px, 0);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-title-row {
width: max-content;
max-width: 100%;
min-width: max-content;
box-sizing: border-box;
padding-right: 0;
gap: 6px;
transform: none;
overflow: visible;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-title-row .atlas_card-proto-prof {
flex: 0 0 auto;
font-size: clamp(12px, .78vw, 13.5px);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-title-row .atlas_card-proto-desire {
flex: 0 0 auto;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-title-row .atlas_card-proto-title {
flex: 0 0 auto;
min-width: max-content;
max-width: none;
text-align: right;
transform: none;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-prof-icon,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-prof-icon > span,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-prof-icon a,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-prof-icon .mw-file-description,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-prof-icon figure {
width: 25px;
height: 25px;
flex-basis: 25px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-prof-icon img {
width: 25px !important;
height: 25px !important;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-desire,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-desire-icon,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-desire-icon > span,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-desire-icon a,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-desire-icon .mw-file-description,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-desire-icon figure {
width: 34px;
height: 34px;
flex-basis: 34px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-desire-icon img {
width: 34px !important;
height: 34px !important;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-img {
position: relative;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-img::after {
content: "";
position: absolute;
z-index: 2;
inset: 0;
pointer-events: none;
opacity: .62;
background:
linear-gradient(90deg,
rgba(255,255,255,.28) 0,
rgba(255,255,255,.10) 1px,
transparent 2px,
transparent calc(100% - 3px),
rgba(255,255,255,.11) calc(100% - 2px),
rgba(255,255,255,.24) 100%),
linear-gradient(180deg,
rgba(255,255,255,.24) 0,
rgba(255,255,255,.08) 1px,
transparent 18%,
transparent 78%,
rgba(255,255,255,.08) 100%),
linear-gradient(135deg,
transparent 0 30%,
rgba(255,255,255,.10) 42%,
rgba(255,255,255,.02) 49%,
transparent 58% 100%);
mix-blend-mode: screen;
transition:
opacity 0.26s cubic-bezier(.22,.61,.36,1),
filter 0.26s cubic-bezier(.22,.61,.36,1);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto:hover .atlas_card-proto-img::after,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto:focus-visible .atlas_card-proto-img::after,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto.is-active .atlas_card-proto-img::after {
opacity: .86;
filter: brightness(1.18) saturate(1.08);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-img img {
transition:
transform 0.34s cubic-bezier(.22,.61,.36,1),
filter 0.24s cubic-bezier(.22,.61,.36,1);
will-change: transform;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto--r5-crop-edge-4 .atlas_card-proto-img img,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto--r6-crop-edge-3 .atlas_card-proto-img img,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto--r6-crop-edge-6 .atlas_card-proto-img img {
transform: translateY(-10.2%) scale(1.118);
transform-origin: 50% 0;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto:hover .atlas_card-proto-img img,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto:focus-visible .atlas_card-proto-img img,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto.is-active .atlas_card-proto-img img {
transform: scale(1.075);
filter: brightness(1.06) contrast(1.035) saturate(1.04);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto--r5-crop-edge-4:hover .atlas_card-proto-img img,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto--r5-crop-edge-4:focus-visible .atlas_card-proto-img img,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto--r5-crop-edge-4.is-active .atlas_card-proto-img img,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto--r6-crop-edge-3:hover .atlas_card-proto-img img,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto--r6-crop-edge-3:focus-visible .atlas_card-proto-img img,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto--r6-crop-edge-3.is-active .atlas_card-proto-img img,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto--r6-crop-edge-6:hover .atlas_card-proto-img img,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto--r6-crop-edge-6:focus-visible .atlas_card-proto-img img,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto--r6-crop-edge-6.is-active .atlas_card-proto-img img {
transform: translateY(-10.2%) scale(1.19);
}
@media (prefers-reduced-motion: reduce) {
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto-img img {
transition: none;
}
}
/* /atlas black top edge correction */
/* atlas Directus search and empty state */
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-search-input {
flex: 1 1 auto;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
color: rgba(36, 24, 27, 0.88);
font: inherit;
line-height: 1.2;
min-height: 1.2em;
white-space: nowrap;
overflow: hidden;
cursor: text;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-search-input:empty::before {
content: attr(data-atlas-placeholder);
color: rgba(36, 24, 27, 0.52);
pointer-events: none;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto[hidden],
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-empty[hidden] {
display: none !important;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-empty {
grid-column: 1 / -1;
min-height: 120px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(45, 28, 31, 0.56);
font-size: 15px;
}
/* /atlas Directus search and empty state */
/* /atlas card list prototype variants */
/* Homepage paper postage-cut background tuning. */
body.page-Sandbox_首页弧形导航原型 .wiki_home-root[data-wiki-home-prototype="style-only"],
body.page-首页 .wiki_home-root[data-wiki-home-prototype="style-only"] {
--wiki-home-paper-rail: clamp(250px, 34%, 360px);
--wiki-home-paper: #f2ecdf;
--wiki-home-paper-red: rgba(237, 65, 65, 0.72);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-scroll-cue,
body.page-首页 .wiki_home-scroll-cue {
display: none;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper-screen,
body.page-首页 .wiki_home-paper-screen {
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
min-height: 0;
margin-top: -2vh;
padding: clamp(22px, 3vh, 36px) clamp(24px, 5vw, 96px) clamp(30px, 3.8vh, 48px);
background: transparent;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper-screen::before,
body.page-首页 .wiki_home-paper-screen::before,
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper-screen::after,
body.page-首页 .wiki_home-paper-screen::after {
content: none;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper,
body.page-首页 .wiki_home-paper {
isolation: isolate;
overflow: hidden;
position: relative;
width: min(1040px, 100%);
min-height: 0 !important;
height: clamp(286px, 31vh, 342px) !important;
max-height: 342px;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
border-radius: 3px 24px 30px 3px;
border-top: 0;
clip-path: none !important;
mask-image: none !important;
-webkit-mask-image: none !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
background:
repeating-linear-gradient(92deg, rgba(84, 65, 54, 0.016) 0 1px, transparent 1px 10px),
repeating-linear-gradient(0deg, rgba(66, 47, 40, 0.012) 0 1px, transparent 1px 9px),
linear-gradient(180deg, rgba(252, 248, 241, 0.99) 0%, rgba(241, 235, 224, 0.98) 100%);
box-shadow:
0 22px 58px rgba(0, 0, 0, 0.28),
0 0 0 1px rgba(255, 255, 255, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper::before,
body.page-首页 .wiki_home-paper::before {
content: "";
position: absolute;
z-index: 1;
left: 0;
top: 0;
bottom: 0;
width: var(--wiki-home-paper-rail);
pointer-events: none;
background:
radial-gradient(86% 62% at 50% 72%, rgba(194, 149, 78, 0.2), transparent 66%),
linear-gradient(90deg, rgba(255,255,255,0.032) 0 1px, transparent 1px 100%),
linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 100%),
linear-gradient(155deg, rgba(31, 30, 27, 0.98), rgba(14, 14, 13, 0.99) 58%, rgba(33, 22, 19, 0.96));
background-size: auto, 82px 82px, 82px 82px, auto;
box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.12);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper::after,
body.page-首页 .wiki_home-paper::after {
content: none;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper-inner,
body.page-首页 .wiki_home-paper-inner {
position: relative;
z-index: 5;
display: grid;
grid-template-columns: var(--wiki-home-paper-rail) minmax(0, 1fr);
height: 100%;
width: 100%;
max-width: none;
margin: 0;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-activity-panel,
body.page-首页 .wiki_home-activity-panel {
min-width: 0;
padding: clamp(20px, 2.6vh, 28px) clamp(18px, 2.5vw, 30px);
color: rgba(255, 248, 232, 0.9);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-activity-kicker,
body.page-首页 .wiki_home-activity-kicker,
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper-kicker,
body.page-首页 .wiki_home-paper-kicker {
color: rgba(237,65,65,0.82);
font-family: 'AlibabaPuHuiTi', 'Noto Sans SC', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-activity-banner,
body.page-首页 .wiki_home-activity-banner {
position: relative;
height: clamp(72px, 9.4vh, 104px);
margin: 13px 0 16px;
overflow: hidden;
background:
radial-gradient(76% 90% at 68% 38%, rgba(237,65,65,0.26), transparent 62%),
linear-gradient(135deg, rgba(255,255,255,0.068), rgba(255,255,255,0.012)),
linear-gradient(90deg, rgba(50,22,22,0.66), rgba(18,18,17,0.22));
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-activity-banner-mark,
body.page-首页 .wiki_home-activity-banner-mark {
position: absolute;
left: 14px;
bottom: 12px;
color: rgba(255,255,255,0.48);
font-size: 10px;
letter-spacing: 0.12em;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-activity-title,
body.page-首页 .wiki_home-activity-title {
color: rgba(255,250,240,0.94);
font-family: Georgia, 'Noto Serif SC', serif;
font-size: clamp(18px, 1.5vw, 23px);
font-weight: 700;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-activity-text,
body.page-首页 .wiki_home-activity-text {
max-width: 24ch;
margin-top: 7px;
color: rgba(255,245,226,0.7);
font-size: 12px;
line-height: 1.55;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-update-panel,
body.page-首页 .wiki_home-update-panel {
min-width: 0;
padding: clamp(20px, 2.6vh, 28px) clamp(24px, 3.6vw, 46px);
background: rgba(255, 252, 246, 0.18);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper-head,
body.page-首页 .wiki_home-paper-head {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
gap: clamp(14px, 2vw, 28px);
align-items: end;
padding-bottom: 10px;
border-bottom: 1px solid rgba(44, 28, 32, 0.16);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper-title,
body.page-首页 .wiki_home-paper-title {
margin-top: 4px;
color: rgba(35,23,22,0.92);
font-family: Georgia, 'Noto Serif SC', serif;
font-size: clamp(20px, 1.8vw, 27px);
font-weight: 700;
line-height: 1.1;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper-note,
body.page-首页 .wiki_home-paper-note {
color: rgba(43,30,27,0.66);
font-size: clamp(11px, 0.78vw, 13px);
line-height: 1.5;
max-height: 3.1em;
overflow: hidden;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-update-list,
body.page-首页 .wiki_home-update-list {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
margin-top: 12px;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-update-item,
body.page-首页 .wiki_home-update-item {
display: grid;
grid-template-columns: minmax(0, 1fr) 82px;
gap: 14px;
align-items: center;
min-height: 58px;
padding: 0 0 8px;
border-bottom: 1px solid rgba(44,28,32,0.13);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-update-item > p,
body.page-首页 .wiki_home-update-item > p {
display: contents;
margin: 0;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-update-copy,
body.page-首页 .wiki_home-update-copy {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 2px 9px;
min-width: 0;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-update-type,
body.page-首页 .wiki_home-update-type {
color: rgba(237,65,65,0.82);
font-family: 'AlibabaPuHuiTi', 'Noto Sans SC', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-update-title,
body.page-首页 .wiki_home-update-title {
color: rgba(35,23,22,0.9);
font-family: Georgia, 'Noto Serif SC', serif;
font-size: 15px;
font-weight: 700;
line-height: 1.15;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-update-text,
body.page-首页 .wiki_home-update-text {
grid-column: 1 / -1;
color: rgba(43,30,27,0.55);
font-size: 11px;
line-height: 1.35;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-update-thumb,
body.page-首页 .wiki_home-update-thumb {
display: flex;
align-items: center;
justify-content: flex-end;
width: 82px;
height: 48px;
overflow: hidden;
background: transparent;
box-shadow: none;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-update-thumb a,
body.page-首页 .wiki_home-update-thumb a {
display: block;
width: 82px;
height: 48px;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-update-thumb img,
body.page-首页 .wiki_home-update-thumb img {
display: block;
width: 82px;
height: 48px;
object-fit: cover;
}
@media (max-width: 980px) {
body.page-Sandbox_首页弧形导航原型 .wiki_home-root[data-wiki-home-prototype="style-only"],
body.page-首页 .wiki_home-root[data-wiki-home-prototype="style-only"] {
--wiki-home-paper-rail: 0px;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper,
body.page-首页 .wiki_home-paper {
height: auto !important;
max-height: none;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper-inner,
body.page-首页 .wiki_home-paper-inner {
grid-template-columns: 1fr;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-activity-panel,
body.page-首页 .wiki_home-activity-panel {
display: none;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper-head,
body.page-首页 .wiki_home-paper-head {
grid-template-columns: 1fr;
}
}
/* Homepage today and status modules. */
body.page-Sandbox_首页弧形导航原型 .wiki_home-today,
body.page-首页 .wiki_home-today {
position: absolute;
z-index: 18;
left: clamp(64px, 8vw, 148px);
top: 51%;
transform: translateY(-50%);
width: min(430px, calc(100vw - 96px));
color: rgba(255, 250, 244, 0.94);
text-shadow: 0 2px 10px rgba(0,0,0,0.32);
pointer-events: none;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-today::before,
body.page-首页 .wiki_home-today::before {
content: none;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-today-line,
body.page-首页 .wiki_home-today-line {
display: flex;
align-items: baseline;
gap: 11px;
min-width: 0;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-today-line::before,
body.page-首页 .wiki_home-today-line::before {
content: "";
align-self: center;
width: 8px;
height: 8px;
background: #ed4141;
transform: translateY(1px);
flex: 0 0 auto;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-greeting,
body.page-首页 .wiki_home-greeting {
color: rgba(255, 126, 126, 0.96);
font-family: Georgia, 'Noto Serif SC', serif;
font-size: clamp(16px, 1.45vw, 22px);
font-weight: 700;
line-height: 1;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-date-time,
body.page-首页 .wiki_home-date-time {
display: inline-flex;
align-items: baseline;
gap: 8px;
color: rgba(255, 245, 234, 0.82);
font-family: Georgia, 'Times New Roman', serif;
font-size: clamp(12px, 0.92vw, 15px);
font-variant-numeric: tabular-nums lining-nums;
line-height: 1;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-date-time span + span,
body.page-首页 .wiki_home-date-time span + span {
color: rgba(255, 245, 234, 0.68);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-daily,
body.page-首页 .wiki_home-daily {
max-width: 430px;
margin-top: 9px;
padding: 9px 12px 10px;
background: rgba(24, 18, 17, 0.22);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-daily-meta,
body.page-首页 .wiki_home-daily-meta {
display: flex;
gap: 10px;
color: rgba(255, 239, 222, 0.7);
font-family: 'AlibabaPuHuiTi', 'Noto Sans SC', sans-serif;
font-size: 11px;
font-weight: 500;
line-height: 1.35;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-daily-meta span:last-child,
body.page-首页 .wiki_home-daily-meta span:last-child {
color: rgba(255, 126, 126, 0.96);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-daily-text,
body.page-首页 .wiki_home-daily-text {
margin-top: 4px;
max-width: 50ch;
color: rgba(255, 252, 247, 0.94);
font-family: Georgia, 'Noto Serif SC', serif;
font-size: clamp(13px, 0.96vw, 15px);
font-weight: 500;
line-height: 1.7;
text-wrap: pretty;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-intro-meta,
body.page-首页 .wiki_home-intro-meta {
gap: 8px;
padding-left: 16px;
border-left-color: rgba(255,118,118,0.58);
color: rgba(255, 248, 242, 0.78);
font-family: 'AlibabaPuHuiTi', 'Noto Sans SC', sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 1.42;
}
@media (max-width: 980px) {
body.page-Sandbox_首页弧形导航原型 .wiki_home-today,
body.page-首页 .wiki_home-today {
left: 24px;
right: 24px;
top: auto;
bottom: 96px;
transform: none;
width: auto;
}
}
/* ---- 武器普攻节奏弹层 ---- */
.card_weapon-popover-root {
position: relative;
}
.card_weapon-trigger {
display: inline;
color: inherit;
text-decoration: none;
cursor: pointer;
outline: none;
}
.card_weapon-trigger:hover,
.card_weapon-trigger:focus-visible,
.card_weapon-popover-root.is-open .card_weapon-trigger[aria-expanded="true"] {
color: #ed4141;
}
.card_weapon-popover {
position: absolute;
left: 0;
top: calc(100% + 8px);
z-index: 8;
width: min(340px, calc(100vw - 40px));
display: none;
padding: 12px 13px 11px;
background: rgba(20, 18, 20, 0.96);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
color: rgba(255, 255, 255, 0.9);
font-size: 0.78rem;
line-height: 1.35;
}
.card_weapon-popover.is-open,
.card_weapon-popover-root:has(.card_weapon-trigger:hover) .card_weapon-popover,
.card_weapon-popover-root:focus-within .card_weapon-popover {
display: block;
}
.card_weapon-popover-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding-bottom: 7px;
margin-bottom: 7px;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.card_weapon-popover-title {
color: #fff;
font-family: Georgia, "Times New Roman", serif;
font-size: 0.96rem;
font-weight: 700;
}
.card_weapon-popover-subtitle {
color: rgba(255, 181, 181, 0.86);
font-size: 0.72rem;
white-space: nowrap;
}
.card_weapon-popover-row {
display: grid;
grid-template-columns: 6.8em 1fr;
gap: 10px;
padding: 3px 0;
}
.card_weapon-popover-label {
color: rgba(255, 255, 255, 0.54);
}
.card_weapon-popover-value {
color: rgba(255, 255, 255, 0.9);
font-variant-numeric: tabular-nums lining-nums;
font-feature-settings: "tnum";
}
.card_weapon-popover-value--accent {
color: #ff9b9b;
font-weight: 700;
}
.card_weapon-popover-note {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 218, 218, 0.72);
font-size: 0.72rem;
}
@media (max-width: 720px) {
.card_weapon-popover {
width: min(300px, calc(100vw - 32px));
}
}
/* Homepage clock readability and paper edge refinement. */
body.page-Sandbox_首页弧形导航原型 .wiki_home-today,
body.page-首页 .wiki_home-today {
z-index: 80;
width: min(470px, calc(100vw - 96px));
color: rgba(255, 252, 247, 0.98);
opacity: 1;
filter: none;
text-shadow:
0 2px 12px rgba(0, 0, 0, 0.72),
0 0 1px rgba(0, 0, 0, 0.88);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-today-line,
body.page-首页 .wiki_home-today-line {
display: block;
position: relative;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-today-line::before,
body.page-首页 .wiki_home-today-line::before {
position: absolute;
left: -15px;
top: 0.28em;
width: 8px;
height: 8px;
background: #ed4141;
box-shadow: 0 0 0 4px rgba(237, 65, 65, 0.16);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-today-line > p,
body.page-首页 .wiki_home-today-line > p {
display: flex;
align-items: baseline;
gap: clamp(20px, 2.5vw, 34px);
margin: 0;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-greeting,
body.page-首页 .wiki_home-greeting {
flex: 0 0 auto;
color: rgba(255, 142, 137, 1);
font-size: clamp(19px, 1.7vw, 27px);
line-height: 1.08;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-date-time,
body.page-首页 .wiki_home-date-time {
display: inline-flex;
align-items: baseline;
gap: clamp(20px, 2.4vw, 32px);
color: rgba(255, 248, 240, 0.92);
font-size: clamp(14px, 1.08vw, 17px);
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-date-time span,
body.page-首页 .wiki_home-date-time span {
display: inline-block;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-date-time span + span,
body.page-首页 .wiki_home-date-time span + span {
position: relative;
color: rgba(255, 238, 225, 0.86);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-date-time span + span::before,
body.page-首页 .wiki_home-date-time span + span::before {
content: "";
position: absolute;
left: calc(-1 * clamp(13px, 1.35vw, 18px));
top: 50%;
width: 4px;
height: 4px;
background: rgba(237, 65, 65, 0.92);
transform: translateY(-50%);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-daily,
body.page-首页 .wiki_home-daily {
max-width: 470px;
margin-top: 11px;
padding: 10px 13px 11px;
background: rgba(13, 10, 10, 0.42);
box-shadow:
0 10px 28px rgba(0, 0, 0, 0.18),
inset 0 0 0 1px rgba(255, 235, 220, 0.08);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-daily-meta,
body.page-首页 .wiki_home-daily-meta {
color: rgba(255, 238, 222, 0.82);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-daily-text,
body.page-首页 .wiki_home-daily-text {
color: rgba(255, 253, 248, 0.98);
font-size: clamp(14px, 1.02vw, 16px);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper,
body.page-首页 .wiki_home-paper {
clip-path: none !important;
mask-image: none !important;
-webkit-mask-image: none !important;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper::after,
body.page-首页 .wiki_home-paper::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
radial-gradient(circle at calc(var(--wiki-home-paper-rail) - 1px) 30px, rgba(250, 244, 234, 0.99) 0 7px, transparent 8px),
radial-gradient(circle at calc(var(--wiki-home-paper-rail) - 1px) 68px, rgba(250, 244, 234, 0.99) 0 11px, transparent 12px),
radial-gradient(circle at calc(var(--wiki-home-paper-rail) - 1px) 122px, rgba(250, 244, 234, 0.99) 0 8px, transparent 9px),
radial-gradient(circle at calc(var(--wiki-home-paper-rail) - 1px) 176px, rgba(250, 244, 234, 0.99) 0 13px, transparent 14px),
radial-gradient(circle at calc(var(--wiki-home-paper-rail) - 1px) 238px, rgba(250, 244, 234, 0.99) 0 9px, transparent 10px),
radial-gradient(circle at calc(var(--wiki-home-paper-rail) - 1px) 292px, rgba(250, 244, 234, 0.99) 0 12px, transparent 13px),
linear-gradient(90deg, transparent 0 calc(var(--wiki-home-paper-rail) - 1px), rgba(255, 255, 255, 0.44) calc(var(--wiki-home-paper-rail) - 1px) var(--wiki-home-paper-rail), rgba(63, 44, 38, 0.13) var(--wiki-home-paper-rail) calc(var(--wiki-home-paper-rail) + 1px), transparent calc(var(--wiki-home-paper-rail) + 1px));
}
@media (max-width: 980px) {
body.page-Sandbox_首页弧形导航原型 .wiki_home-today,
body.page-首页 .wiki_home-today {
z-index: 80;
width: auto;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-today-line > p,
body.page-首页 .wiki_home-today-line > p {
flex-wrap: wrap;
row-gap: 8px;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-date-time,
body.page-首页 .wiki_home-date-time {
gap: 22px;
}
}
/* Homepage time/date quote composition. */
body.page-Sandbox_首页弧形导航原型 .wiki_home-today,
body.page-首页 .wiki_home-today {
z-index: 86;
width: min(520px, calc(100vw - 96px));
color: rgba(255, 252, 247, 0.98);
text-shadow:
0 2px 13px rgba(0, 0, 0, 0.72),
0 0 1px rgba(0, 0, 0, 0.9);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-today-line,
body.page-首页 .wiki_home-today-line {
display: grid;
grid-template-columns: max-content max-content;
align-items: end;
gap: clamp(24px, 3.4vw, 52px);
min-width: 0;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-today-line::before,
body.page-首页 .wiki_home-today-line::before {
content: none;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-today-line > p,
body.page-首页 .wiki_home-today-line > p {
display: contents;
margin: 0;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-clock-main,
body.page-首页 .wiki_home-clock-main {
display: inline-flex;
align-items: baseline;
gap: clamp(11px, 1.2vw, 18px);
min-width: 0;
white-space: nowrap;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-greeting,
body.page-首页 .wiki_home-greeting {
color: rgba(255, 142, 137, 1);
font-family: Georgia, 'Noto Serif SC', serif;
font-size: clamp(20px, 1.8vw, 29px);
font-weight: 700;
line-height: 1.05;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-clock-time,
body.page-首页 .wiki_home-clock-time {
color: rgba(255, 248, 240, 0.96);
font-family: Georgia, 'Times New Roman', serif;
font-size: clamp(22px, 2vw, 32px);
font-weight: 700;
line-height: 0.98;
font-variant-numeric: tabular-nums lining-nums;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-date-card,
body.page-首页 .wiki_home-date-card {
display: inline-flex;
align-items: baseline;
gap: 8px;
min-width: 0;
white-space: nowrap;
transform: translateY(1px);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-date-month,
body.page-首页 .wiki_home-date-month {
color: rgba(255, 224, 213, 0.9);
font-family: 'Noto Serif SC', Georgia, serif;
font-size: clamp(15px, 1.1vw, 18px);
font-weight: 700;
line-height: 1;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-date-day,
body.page-首页 .wiki_home-date-day {
color: rgba(255, 251, 244, 0.98);
font-family: Georgia, 'Times New Roman', serif;
font-size: clamp(30px, 3.1vw, 47px);
font-weight: 700;
line-height: 0.9;
font-variant-numeric: tabular-nums lining-nums;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-date-year,
body.page-首页 .wiki_home-date-year {
color: rgba(237, 65, 65, 0.92);
font-family: Georgia, 'Times New Roman', serif;
font-size: clamp(11px, 0.78vw, 13px);
font-weight: 700;
line-height: 1;
transform: translateY(-0.18em);
font-variant-numeric: tabular-nums lining-nums;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-date-time,
body.page-首页 .wiki_home-date-time,
body.page-Sandbox_首页弧形导航原型 .wiki_home-daily-meta,
body.page-首页 .wiki_home-daily-meta {
display: none;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-daily,
body.page-首页 .wiki_home-daily {
max-width: 430px;
margin-top: clamp(9px, 1.2vw, 14px);
padding: 0;
background: transparent;
box-shadow: none;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-daily-text,
body.page-首页 .wiki_home-daily-text {
margin-top: 0;
color: rgba(255, 252, 247, 0.94);
font-family: Georgia, 'Noto Serif SC', serif;
font-size: clamp(14px, 1.04vw, 16px);
font-weight: 500;
line-height: 1.68;
text-wrap: pretty;
}
@media (max-width: 980px) {
body.page-Sandbox_首页弧形导航原型 .wiki_home-today,
body.page-首页 .wiki_home-today {
width: auto;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-today-line,
body.page-首页 .wiki_home-today-line {
grid-template-columns: 1fr;
gap: 8px;
}
}
/* Homepage compact layered date refinement. */
body.page-Sandbox_首页弧形导航原型 .wiki_home-today,
body.page-首页 .wiki_home-today {
z-index: 86;
width: min(430px, calc(100vw - 96px));
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-today-line,
body.page-首页 .wiki_home-today-line {
display: grid;
grid-template-columns: max-content 74px;
align-items: end;
gap: clamp(18px, 2.2vw, 32px);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-today-line > p,
body.page-首页 .wiki_home-today-line > p {
display: contents;
margin: 0;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-clock-main,
body.page-首页 .wiki_home-clock-main {
display: inline-flex;
align-items: baseline;
gap: clamp(9px, 0.9vw, 13px);
white-space: nowrap;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-greeting,
body.page-首页 .wiki_home-greeting {
color: rgba(255, 142, 137, 0.98);
font-size: clamp(15px, 1.12vw, 19px);
font-weight: 700;
line-height: 1.05;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-clock-time,
body.page-首页 .wiki_home-clock-time {
color: rgba(255, 248, 240, 0.95);
font-family: Georgia, 'Times New Roman', serif;
font-size: clamp(17px, 1.32vw, 22px);
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums lining-nums;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-date-card,
body.page-首页 .wiki_home-date-card {
position: relative;
display: block;
width: 74px;
height: 30px;
transform: translateY(1px);
white-space: nowrap;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-date-day,
body.page-首页 .wiki_home-date-day {
position: absolute;
left: 0;
bottom: 0;
z-index: 2;
color: rgba(255, 251, 244, 0.97);
font-family: Georgia, 'Times New Roman', serif;
font-size: clamp(21px, 1.65vw, 27px);
font-weight: 700;
line-height: 0.9;
font-variant-numeric: tabular-nums lining-nums;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-date-month,
body.page-首页 .wiki_home-date-month {
position: absolute;
left: 31px;
top: 1px;
z-index: 3;
color: rgba(255, 168, 160, 0.96);
font-family: 'Noto Serif SC', Georgia, serif;
font-size: clamp(12px, 0.9vw, 15px);
font-weight: 700;
line-height: 1;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-date-year,
body.page-首页 .wiki_home-date-year {
position: absolute;
left: 38px;
bottom: 1px;
z-index: 1;
color: rgba(255, 232, 220, 0.6);
font-family: Georgia, 'Times New Roman', serif;
font-size: clamp(9px, 0.66vw, 11px);
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums lining-nums;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-daily,
body.page-首页 .wiki_home-daily {
max-width: 380px;
margin-top: 7px;
padding: 0;
background: transparent;
box-shadow: none;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-daily-text,
body.page-首页 .wiki_home-daily-text {
color: rgba(255, 252, 247, 0.9);
font-size: clamp(13px, 0.92vw, 15px);
line-height: 1.58;
}
@media (max-width: 980px) {
body.page-Sandbox_首页弧形导航原型 .wiki_home-today,
body.page-首页 .wiki_home-today {
width: auto;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-today-line,
body.page-首页 .wiki_home-today-line {
grid-template-columns: max-content 74px;
gap: 18px;
}
}
/* Homepage time and month fine tune. */
body.page-Sandbox_首页弧形导航原型 .wiki_home-clock-time,
body.page-首页 .wiki_home-clock-time {
font-size: clamp(13px, 0.96vw, 16px);
font-weight: 500;
color: rgba(255, 244, 236, 0.84);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-clock-main,
body.page-首页 .wiki_home-clock-main {
gap: clamp(7px, 0.72vw, 10px);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-date-card,
body.page-首页 .wiki_home-date-card {
width: 80px;
height: 31px;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-date-card::before,
body.page-首页 .wiki_home-date-card::before {
content: none;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-date-card::after,
body.page-首页 .wiki_home-date-card::after {
content: none;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-date-day,
body.page-首页 .wiki_home-date-day {
bottom: 1px;
font-size: clamp(19px, 1.45vw, 24px);
text-shadow:
10px -5px 0 rgba(237, 65, 65, 0.22),
-3px 3px 0 rgba(255, 248, 238, 0.08),
0 2px 9px rgba(0, 0, 0, 0.46);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-date-year,
body.page-首页 .wiki_home-date-year {
left: 38px;
bottom: 2px;
font-size: clamp(8px, 0.6vw, 10px);
color: rgba(255, 232, 220, 0.58);
text-shadow: 5px 2px 0 rgba(237, 65, 65, 0.16);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-date-month,
body.page-首页 .wiki_home-date-month {
left: 32px;
top: 0;
font-size: clamp(11px, 0.82vw, 14px);
text-shadow:
-11px 4px 0 rgba(255, 250, 244, 0.14),
4px -2px 0 rgba(237, 65, 65, 0.12),
0 1px 0 rgba(34, 18, 16, 0.5),
0 2px 8px rgba(0, 0, 0, 0.34);
}
/* Homepage license footer. */
body.page-Sandbox_首页弧形导航原型 .wiki_home-license,
body.page-首页 .wiki_home-license {
position: relative;
z-index: 7;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 12px;
width: min(1040px, calc(100% - 48px));
margin: -10px auto clamp(34px, 5vh, 72px);
color: rgba(255, 239, 225, 0.56);
font-family: 'AlibabaPuHuiTi', 'Noto Sans SC', sans-serif;
font-size: clamp(10px, 0.74vw, 12px);
font-weight: 400;
line-height: 1.7;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.36);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-license-icons,
body.page-首页 .wiki_home-license-icons {
display: inline-flex;
gap: 4px;
padding-top: 3px;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-license-icon,
body.page-首页 .wiki_home-license-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border: 1px solid rgba(255, 229, 212, 0.28);
border-radius: 50%;
color: rgba(255, 234, 220, 0.72);
font-family: Georgia, 'Times New Roman', serif;
font-size: 8px;
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums lining-nums;
box-sizing: border-box;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-license-copy,
body.page-首页 .wiki_home-license-copy {
display: grid;
gap: 1px;
max-width: 72ch;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-license a,
body.page-首页 .wiki_home-license a {
color: rgba(255, 152, 144, 0.78);
text-decoration: none;
border-bottom: 1px solid rgba(237, 65, 65, 0.3);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-license a:hover,
body.page-首页 .wiki_home-license a:hover {
color: rgba(255, 186, 176, 0.92);
border-bottom-color: rgba(237, 65, 65, 0.56);
}
@media (max-width: 720px) {
body.page-Sandbox_首页弧形导航原型 .wiki_home-license,
body.page-首页 .wiki_home-license {
grid-template-columns: 1fr;
width: calc(100% - 40px);
margin-top: 0;
}
}
/* Homepage license spacing and paper contrast. */
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper,
body.page-首页 .wiki_home-paper {
border-radius: 0 0 24px 0;
background:
repeating-linear-gradient(92deg, rgba(84, 65, 54, 0.014) 0 1px, transparent 1px 10px),
repeating-linear-gradient(0deg, rgba(66, 47, 40, 0.01) 0 1px, transparent 1px 9px),
linear-gradient(90deg, rgba(20, 17, 16, 0.98) 0 var(--wiki-home-paper-rail), rgba(252, 247, 238, 0.99) var(--wiki-home-paper-rail) 100%);
box-shadow:
0 24px 58px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.48);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper::before,
body.page-首页 .wiki_home-paper::before {
background:
radial-gradient(86% 62% at 52% 70%, rgba(157, 104, 65, 0.18), transparent 66%),
linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 100%),
linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 100%),
linear-gradient(155deg, rgba(30, 28, 25, 0.96), rgba(13, 13, 12, 0.99) 58%, rgba(34, 22, 20, 0.96));
background-size: auto, 82px 82px, 82px 82px, auto;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-activity-panel,
body.page-首页 .wiki_home-activity-panel {
position: relative;
border-radius: 0;
background:
radial-gradient(82% 74% at 52% 70%, rgba(128, 75, 52, 0.2), transparent 68%),
linear-gradient(155deg, rgba(33, 30, 27, 0.98), rgba(13, 13, 12, 1) 60%, rgba(37, 23, 21, 0.98));
box-shadow:
inset -12px 0 18px rgba(0, 0, 0, 0.18);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-update-panel,
body.page-首页 .wiki_home-update-panel {
position: relative;
--wiki-home-edge-slice: clamp(26px, 2.7vw, 36px);
padding-left: clamp(28px, 3.6vw, 46px);
padding-right: clamp(56px, 5.4vw, 76px);
overflow: hidden;
background:
linear-gradient(90deg, transparent 0 calc(100% - var(--wiki-home-edge-slice)), rgba(12, 13, 13, 0.98) calc(100% - var(--wiki-home-edge-slice)) 100%),
linear-gradient(180deg, rgb(249, 243, 232), rgb(249, 243, 232));
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper::after,
body.page-首页 .wiki_home-paper::after {
content: none;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-update-panel::before,
body.page-首页 .wiki_home-update-panel::before,
body.page-Sandbox_首页弧形导航原型 .wiki_home-update-panel::after,
body.page-首页 .wiki_home-update-panel::after {
content: "";
position: absolute;
left: 0;
right: 0;
z-index: 2;
background:
repeating-linear-gradient(90deg, rgba(72, 51, 43, 0.014) 0 1px, transparent 1px 12px),
linear-gradient(180deg, rgb(249, 243, 232), rgb(249, 243, 232));
box-shadow: none;
pointer-events: none;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-update-panel::before,
body.page-首页 .wiki_home-update-panel::before {
top: 0;
height: calc(50% + 1px);
border-top-right-radius: 0;
border-bottom-right-radius: 20px;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-update-panel::after,
body.page-首页 .wiki_home-update-panel::after {
bottom: 0;
height: calc(50% + 1px);
border-top-right-radius: 20px;
border-bottom-right-radius: 24px;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper-head,
body.page-首页 .wiki_home-paper-head,
body.page-Sandbox_首页弧形导航原型 .wiki_home-update-list,
body.page-首页 .wiki_home-update-list {
position: relative;
z-index: 4;
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper-title,
body.page-首页 .wiki_home-paper-title,
body.page-Sandbox_首页弧形导航原型 .wiki_home-update-title,
body.page-首页 .wiki_home-update-title {
color: rgba(35, 23, 22, 0.96);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-paper-note,
body.page-首页 .wiki_home-paper-note,
body.page-Sandbox_首页弧形导航原型 .wiki_home-update-text,
body.page-首页 .wiki_home-update-text {
color: rgba(43, 30, 27, 0.62);
}
body.page-Sandbox_首页弧形导航原型 .wiki_home-license,
body.page-首页 .wiki_home-license {
margin: clamp(14px, 2.4vh, 30px) auto clamp(40px, 5.6vh, 78px);
}
@media (max-width: 720px) {
body.page-Sandbox_首页弧形导航原型 .wiki_home-license,
body.page-首页 .wiki_home-license {
margin-top: 16px;
}
}
/* atlas preview detail expansion */
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-body {
grid-template-columns: minmax(0, 1fr) minmax(360px, 32vw);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview {
min-width: min(100%, 360px);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art-wrap {
position: relative;
margin-top: 16px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art {
aspect-ratio: 1348 / 692;
width: 100%;
min-height: 0;
border-radius: 0;
background-color: #141010;
background-size: cover;
background-position: center;
box-shadow: 0 12px 28px rgba(42, 30, 33, 0.16);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-face-switch {
position: absolute;
right: 10px;
bottom: 10px;
z-index: 3;
display: flex;
gap: 4px;
padding: 3px;
background: rgba(18, 14, 15, 0.72);
backdrop-filter: blur(8px);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-face {
min-width: 28px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(255, 245, 240, 0.62);
font: 700 12px/1 Georgia, serif;
cursor: pointer;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-face.is-active {
color: #fff8f2;
background: rgba(237, 65, 65, 0.72);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-stat b {
display: inline-flex;
align-items: center;
gap: 6px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-stat-icon {
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 22px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-stat-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-attrs {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
margin-top: 16px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-attr {
min-width: 0;
padding: 8px 8px 7px;
background: rgba(40, 30, 33, 0.055);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-attr span {
display: block;
color: rgba(43, 32, 35, 0.46);
font-size: 11px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-attr b {
display: block;
margin-top: 3px;
color: rgba(35, 25, 28, 0.88);
font-size: 15px;
line-height: 1.1;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-skills {
display: grid;
gap: 8px;
margin-top: 16px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-skill {
padding: 10px 11px;
background: rgba(26, 20, 22, 0.055);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-skill-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-skill-type {
flex: 0 0 auto;
color: #ed4141;
font-size: 11px;
font-weight: 700;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-skill-name {
min-width: 0;
color: rgba(34, 24, 27, 0.9);
font-size: 14px;
font-weight: 700;
text-align: right;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-skill-meta {
margin-top: 4px;
color: rgba(43, 32, 35, 0.48);
font-size: 11px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-skill-desc {
margin-top: 5px;
color: rgba(39, 28, 31, 0.72);
font-size: 12px;
line-height: 1.45;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-copy {
margin-top: 12px;
}
@media (max-width: 1100px) {
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-body {
grid-template-columns: 1fr;
}
}
/* /atlas preview detail expansion */
/* atlas preview final interaction polish */
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview:not(.is-filled) .atlas_frame-preview-face-switch {
display: none;
}
/* /atlas preview final interaction polish */
/* atlas preview cardface thumbnail layout */
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-layout {
grid-template-columns: minmax(0, 1fr);
overflow: visible;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-grid {
min-width: 0;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview {
width: auto;
max-width: none;
justify-self: start;
position: relative;
z-index: 2;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-preview-cache {
display: none;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art-wrap {
margin-top: 14px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1348 / 692;
width: 100%;
min-height: 0;
overflow: hidden;
border-radius: 0;
background: #181314;
box-shadow: 0 10px 22px rgba(45, 34, 36, 0.14);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art::after {
content: none;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art > span,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art > a,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art .mw-file-description,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art figure,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art .mw-halign-none {
display: block;
width: 100%;
height: 100%;
margin: 0 !important;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art img {
display: block;
width: 100% !important;
height: 100% !important;
object-fit: contain;
object-position: center;
border: 0;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-face-switch {
background: rgb(24 19 20 / 82%);
backdrop-filter: none;
}
@media (max-width: 1320px) {
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview {
width: auto;
}
}
@media (max-width: 1100px) {
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-layout {
grid-template-columns: 1fr;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview {
width: 100%;
max-width: none;
}
}
/* /atlas preview cardface thumbnail layout */
/* Homepage style entry hover polish. */
body.page-首页 .wiki_home-style-entry {
perspective: 900px;
}
body.page-首页 .wiki_home-style-card,
body.page-首页 .wiki_home-style-line,
body.page-首页 .wiki_home-style-glow,
body.page-首页 .wiki_home-style-title,
body.page-首页 .wiki_home-style-label,
body.page-首页 .wiki_home-style-flame,
body.page-首页 .wiki_home-style-card img {
transition:
transform 260ms cubic-bezier(.2,.72,.22,1),
opacity 220ms cubic-bezier(.2,.72,.22,1),
filter 260ms cubic-bezier(.2,.72,.22,1);
}
body.page-首页 .wiki_home-style-card {
transform-origin: 54% 58%;
will-change: transform, filter;
}
body.page-首页 .wiki_home-style-card a {
outline: none;
}
body.page-首页 .wiki_home-style-card a:focus-visible {
outline: 1px solid rgba(237, 65, 65, 0.76);
outline-offset: 5px;
}
body.page-首页 .wiki_home-style-entry:hover .wiki_home-style-card,
body.page-首页 .wiki_home-style-entry:focus-within .wiki_home-style-card {
transform: translate3d(-3px, -7px, 0) rotate(-1.2deg) scale(1.035);
filter:
drop-shadow(0 24px 34px rgba(0,0,0,0.46))
drop-shadow(0 0 24px rgba(220,35,28,0.32));
}
body.page-首页 .wiki_home-style-entry:hover .wiki_home-style-card img,
body.page-首页 .wiki_home-style-entry:focus-within .wiki_home-style-card img {
filter: brightness(1.08) saturate(1.06) contrast(1.03);
}
body.page-首页 .wiki_home-style-entry:hover .wiki_home-style-line,
body.page-首页 .wiki_home-style-entry:focus-within .wiki_home-style-line {
transform: translate3d(-5px, -2px, 0) scale(1.018);
opacity: 0.96;
filter: drop-shadow(0 15px 22px rgba(0,0,0,0.36)) brightness(1.1);
}
body.page-首页 .wiki_home-style-entry:hover .wiki_home-style-glow,
body.page-首页 .wiki_home-style-entry:focus-within .wiki_home-style-glow {
animation-play-state: paused;
transform: translate3d(3px, -2px, 0) scale(1.16);
opacity: 0.68;
filter: saturate(1.18) brightness(1.28) blur(0);
}
body.page-首页 .wiki_home-style-entry:hover .wiki_home-style-title,
body.page-首页 .wiki_home-style-entry:focus-within .wiki_home-style-title {
transform: translate3d(-2px, -3px, 0);
filter: brightness(1.42) contrast(1.14) drop-shadow(0 12px 18px rgba(0,0,0,0.78));
}
body.page-首页 .wiki_home-style-entry:hover .wiki_home-style-label,
body.page-首页 .wiki_home-style-entry:focus-within .wiki_home-style-label {
transform: translate3d(4px, 1px, 0);
opacity: 1;
filter: brightness(1.12);
}
body.page-首页 .wiki_home-style-entry:hover .wiki_home-style-flame,
body.page-首页 .wiki_home-style-entry:focus-within .wiki_home-style-flame {
animation-play-state: paused;
transform: translate3d(2px, -4px, 0) scale(1.1);
opacity: 0.86;
filter: drop-shadow(0 0 11px rgba(255,255,255,0.3)) brightness(1.14);
}
body.page-首页 .wiki_home-style-entry:hover .wiki_home-style-noise,
body.page-首页 .wiki_home-style-entry:focus-within .wiki_home-style-noise {
opacity: 0.2;
}
body.page-首页 .wiki_home-style-card a:active img {
transform: translate3d(0, 1px, 0) scale(0.985);
}
@media (prefers-reduced-motion: reduce) {
body.page-首页 .wiki_home-style-card,
body.page-首页 .wiki_home-style-line,
body.page-首页 .wiki_home-style-glow,
body.page-首页 .wiki_home-style-title,
body.page-首页 .wiki_home-style-label,
body.page-首页 .wiki_home-style-flame,
body.page-首页 .wiki_home-style-card img {
transition: none;
}
}
/* atlas preview compact mode refinements */
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-grid--card-protos {
transition: grid-template-columns 0.28s cubic-bezier(.22,.61,.36,1), gap 0.28s cubic-bezier(.22,.61,.36,1);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-proto {
transition:
transform 0.28s cubic-bezier(.22,.61,.36,1),
opacity 0.22s cubic-bezier(.22,.61,.36,1),
box-shadow 0.22s cubic-bezier(.22,.61,.36,1);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) [data-atlas-preview-mode="1"] .atlas_card-proto {
transform: translate3d(0, 0, 0) scale(0.985);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art {
background: transparent;
border-radius: 2px;
box-shadow: 0 10px 22px rgba(45, 34, 36, 0.16);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art::after {
content: "";
position: absolute;
inset: 0;
border-radius: 2px;
background:
linear-gradient(115deg, transparent 0 46%, rgba(255,255,255,.22) 50%, transparent 57% 100%),
linear-gradient(180deg, rgba(255,255,255,.10), transparent 34%);
mix-blend-mode: screen;
pointer-events: none;
opacity: .48;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-meta {
margin-top: 14px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-meta-top,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-meta-sub {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 14px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-taxonomy {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
min-width: max-content;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-taxonomy-item {
display: inline-flex;
align-items: center;
gap: 5px;
color: rgba(42, 30, 33, .72);
font-size: 13px;
font-weight: 650;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-acquisition {
flex: 0 0 auto;
color: #ed4141;
font-size: 12px;
font-weight: 700;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-stats {
grid-template-columns: 84px minmax(0, 1fr);
align-items: start;
gap: 8px;
margin-top: 12px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-stat--tags {
min-width: 0;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin: 0;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-tag {
font-size: 11px;
line-height: 1.2;
padding: 3px 7px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-attrs.card_content_info {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
margin-top: 12px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-attr.card_content_info-item {
padding: 6px 4px;
background: transparent;
min-width: 0;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-attr.card_content_info-item > div:first-child {
color: rgba(43,32,35,.46);
font-size: 11px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-attr.card_content_info-item > div:last-child {
margin-top: 2px;
color: rgba(35,25,28,.86);
font-size: 13px;
font-weight: 700;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-skill-preview-cache {
display: none;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-skills {
gap: 6px;
margin-top: 12px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-skill {
padding: 8px 9px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-skill-desc .card_content_skill_effect {
color: rgba(39,28,31,.74);
font-size: 12px;
line-height: 1.44;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-skill-desc .card_content_skill-param {
color: #ed4141;
font-weight: 750;
}
@media (max-width: 1100px) {
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) [data-atlas-preview-mode="1"] .atlas_frame-grid--card-protos {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* /atlas preview compact mode refinements */
/* atlas preview stateful layout */
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-layout {
grid-template-columns: minmax(0, 1fr);
overflow: visible;
transition: grid-template-columns 0.28s cubic-bezier(.22,.61,.36,1);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) [data-atlas-preview-mode="1"] .atlas_frame-layout {
grid-template-columns: minmax(500px, 57%) clamp(520px, 40vw, 700px);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-grid--card-protos {
grid-template-columns: repeat(5, minmax(0, 1fr));
transition: grid-template-columns 0.28s cubic-bezier(.22,.61,.36,1), gap 0.28s cubic-bezier(.22,.61,.36,1);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview {
display: none;
width: auto;
max-width: none;
min-width: 0;
justify-self: stretch;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) [data-atlas-preview-mode="1"] .atlas_frame-preview {
display: block;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) [data-atlas-preview-mode="1"][data-atlas-has-selection="0"] .atlas_frame-preview {
min-height: clamp(220px, 34vh, 360px);
display: flex;
align-items: center;
justify-content: center;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-empty {
display: none;
color: rgba(43, 32, 35, 0.48);
font-size: clamp(15px, 1vw, 18px);
font-weight: 650;
letter-spacing: 0;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) [data-atlas-preview-mode="1"][data-atlas-has-selection="0"] .atlas_frame-preview-empty {
display: block;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) [data-atlas-preview-mode="1"][data-atlas-has-selection="0"] .atlas_frame-preview > :not(.atlas_frame-preview-empty) {
display: none;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) [data-atlas-preview-mode="1"][data-atlas-has-selection="1"] .atlas_frame-preview-empty {
display: none;
}
@media (max-width: 1320px) {
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) [data-atlas-preview-mode="1"] .atlas_frame-layout {
grid-template-columns: minmax(420px, 54%) minmax(480px, 1fr);
}
}
@media (max-width: 1100px) {
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-layout,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) [data-atlas-preview-mode="1"] .atlas_frame-layout {
grid-template-columns: 1fr;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-grid--card-protos {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) [data-atlas-preview-mode="1"] .atlas_frame-grid--card-protos {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* /atlas preview stateful layout */
/* atlas preview density correction */
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) [data-atlas-preview-mode="1"] .atlas_frame-layout {
grid-template-columns: clamp(520px, 38vw, 660px) minmax(540px, 1fr);
column-gap: clamp(16px, 1.6vw, 24px);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) [data-atlas-preview-mode="1"] .atlas_frame-grid--card-protos {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-meta-top,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-meta-sub {
justify-content: flex-start;
align-items: baseline;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-name {
flex: 0 0 auto;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-taxonomy {
justify-content: flex-start;
min-width: 0;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-acquisition {
margin-left: 2px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art {
overflow: visible;
background: transparent;
box-shadow: none;
border-radius: 0;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art::after {
content: none;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art img {
border-radius: 2px;
box-shadow:
0 10px 22px rgba(45, 34, 36, 0.16),
inset 0 1px 0 rgba(255,255,255,0.18);
filter: saturate(1.03) contrast(1.02);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-info-line.card_content_info {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0;
margin-top: 10px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-info-item.card_content_info-item {
min-width: 0;
padding: 5px 4px;
background: transparent;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-info-item.card_content_info-item > div:first-child {
color: rgba(43,32,35,.46);
font-size: 11px;
line-height: 1.1;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-info-item.card_content_info-item > div:last-child {
margin-top: 2px;
color: rgba(35,25,28,.88);
font-size: 13px;
font-weight: 750;
line-height: 1.1;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-attrs,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-stats {
display: none;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-tags-line {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 8px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-tags-label {
flex: 0 0 auto;
color: rgba(43,32,35,.46);
font-size: 11px;
line-height: 1.8;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-skills {
margin-top: 10px;
gap: 5px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-skill {
padding: 7px 9px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-skill-head {
display: flex;
align-items: baseline;
justify-content: flex-start;
gap: 7px;
min-width: 0;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-skill-name {
flex: 0 1 auto;
min-width: 0;
color: rgba(34,24,27,.92);
font-size: 14px;
font-weight: 760;
text-align: left;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-skill-type {
flex: 0 0 auto;
color: #ed4141;
font-size: 12px;
font-weight: 700;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-skill-meta {
flex: 1 1 auto;
min-width: 0;
margin-top: 0;
color: rgba(43,32,35,.52);
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-skill-desc {
margin-top: 4px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-skill-desc .card_content_skill_effect {
font-size: 13.5px;
line-height: 1.5;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-skill-desc .card_content_skill-param-index {
display: none;
}
@media (max-width: 1320px) {
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) [data-atlas-preview-mode="1"] .atlas_frame-layout {
grid-template-columns: clamp(480px, 42vw, 620px) minmax(500px, 1fr);
}
}
/* /atlas preview density correction */
/* atlas preview final density tune */
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) [data-atlas-preview-mode="1"] .atlas_frame-layout {
grid-template-columns: minmax(0, clamp(500px, 34vw, 590px)) minmax(620px, 1fr);
column-gap: clamp(16px, 1.6vw, 24px);
align-items: start;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) [data-atlas-preview-mode="1"] .atlas_frame-grid--card-protos {
grid-template-columns: repeat(3, minmax(0, 1fr));
width: 100%;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-meta-top,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-meta-sub {
display: flex;
justify-content: flex-start;
align-items: baseline;
gap: 6px;
flex-wrap: wrap;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-name,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-sub {
flex: 0 0 auto;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-taxonomy {
display: inline-flex;
justify-content: flex-start;
align-items: center;
flex: 0 1 auto;
gap: 8px;
min-width: 0;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-acquisition {
margin-left: 2px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art {
overflow: visible;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art::after {
content: none !important;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art img {
border-radius: 2px;
outline: 1px solid rgba(255, 255, 255, 0.38);
outline-offset: -1px;
box-shadow:
0 10px 22px rgba(45, 34, 36, 0.15),
0 1px 0 rgba(255, 255, 255, 0.32);
filter: saturate(1.03) contrast(1.02) brightness(1.01);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-info-line.card_content_info {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0;
margin-top: 9px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-info-item.card_content_info-item {
min-width: 0;
padding: 5px 4px;
background: transparent;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-tags-line {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 7px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-skills {
margin-top: 10px;
gap: 5px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-skill {
padding: 7px 9px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-skill-head {
display: flex;
align-items: baseline;
justify-content: flex-start;
gap: 7px;
min-width: 0;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-skill-name {
flex: 0 1 auto;
min-width: 0;
color: rgba(34, 24, 27, .92);
font-size: 14px;
font-weight: 760;
text-align: left;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-skill-type {
flex: 0 0 auto;
color: #ed4141;
font-size: 12px;
font-weight: 700;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-skill-meta {
flex: 1 1 auto;
min-width: 0;
margin-top: 0;
color: rgba(43, 32, 35, .56);
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-skill-desc {
margin-top: 4px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-skill-desc .card_content_skill_effect {
font-size: 14.5px;
line-height: 1.48;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-skill-desc .card_content_skill-param-index {
display: none;
}
@media (max-width: 1320px) {
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) [data-atlas-preview-mode="1"] .atlas_frame-layout {
grid-template-columns: minmax(0, clamp(460px, 40vw, 540px)) minmax(500px, 1fr);
}
}
/* /atlas preview final density tune */
/* atlas preview preserve card width */
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-layout {
--atlas-preview-layout-gap: clamp(16px, 1.6vw, 24px);
--atlas-preview-card-gap: 10px;
column-gap: var(--atlas-preview-layout-gap);
transition:
grid-template-columns 0.36s cubic-bezier(.22,.61,.36,1),
column-gap 0.36s cubic-bezier(.22,.61,.36,1);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-grid--card-protos {
gap: var(--atlas-preview-card-gap);
transition:
grid-template-columns 0.36s cubic-bezier(.22,.61,.36,1),
gap 0.36s cubic-bezier(.22,.61,.36,1);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) [data-atlas-preview-mode="1"] .atlas_frame-layout {
grid-template-columns: calc(60% - 4px) minmax(0, 1fr);
column-gap: var(--atlas-preview-layout-gap);
align-items: start;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) [data-atlas-preview-mode="1"] .atlas_frame-grid--card-protos {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--atlas-preview-card-gap);
width: 100%;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) [data-atlas-preview-mode="1"] .atlas_card-proto {
transform: none;
}
@media (max-width: 1320px) {
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) [data-atlas-preview-mode="1"] .atlas_frame-layout {
grid-template-columns: calc(60% - 4px) minmax(0, 1fr);
}
}
@media (max-width: 1100px) {
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) [data-atlas-preview-mode="1"] .atlas_frame-layout {
grid-template-columns: 1fr;
}
}
/* /atlas preview preserve card width */
/* atlas preview no wrapper readable metadata */
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art-wrap,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art > span,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art > a,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art .mw-file-description,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art figure,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art .mw-halign-none {
display: block;
width: 100%;
margin: 0 !important;
padding: 0 !important;
min-height: 0 !important;
height: auto !important;
aspect-ratio: auto !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
border-radius: 0 !important;
overflow: visible;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art::before,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art::after,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art-wrap::before,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art-wrap::after {
content: none !important;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art img {
display: block;
width: 100%;
height: auto;
margin: 0 !important;
border: 0 !important;
border-radius: 2px;
outline: 1px solid rgba(255,255,255,.32);
outline-offset: -1px;
box-shadow: 0 10px 22px rgba(45,34,36,.14), 0 1px 0 rgba(255,255,255,.30);
filter: saturate(1.04) contrast(1.02) brightness(1.01);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-name {
font-size: clamp(24px, 1.72vw, 31px);
line-height: 1.05;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-taxonomy-item,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-sub,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-acquisition {
font-size: clamp(14px, .98vw, 16px);
line-height: 1.35;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-taxonomy-item {
gap: 6px;
font-weight: 720;
color: rgba(34,24,27,.78);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-stat-icon img {
width: 24px;
height: 24px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-sub {
color: rgba(34,24,27,.70);
font-weight: 650;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-acquisition {
color: #ed4141;
font-weight: 760;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-meta-sub {
align-items: center;
gap: 8px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-meta-sub .atlas_frame-preview-tags {
display: inline-flex;
flex: 0 1 auto;
align-items: center;
flex-wrap: wrap;
gap: 5px;
margin: 0;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-tag {
font-size: 12px;
line-height: 1.25;
padding: 3px 8px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-tags-line,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-tags-label,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-copy {
display: none !important;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-info-line.card_content_info {
display: flex;
align-items: center;
gap: 16px;
margin-top: 10px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-info-item.card_content_info-item {
display: inline-flex;
align-items: baseline;
flex: 0 0 auto;
gap: 4px;
min-width: 0;
padding: 0;
background: transparent;
border: 0;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-info-item.card_content_info-item > div:first-child {
order: 2;
margin: 0;
color: rgba(43,32,35,.50);
font-size: 12px;
line-height: 1;
font-weight: 650;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-info-item.card_content_info-item > div:last-child {
order: 1;
margin: 0;
color: rgba(35,25,28,.92);
font-size: 17px;
line-height: 1;
font-weight: 780;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-info-item--danger.card_content_info-item {
gap: 0;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-info-item--danger.card_content_info-item > div:first-child {
display: none;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-stars {
color: #ed4141 !important;
font-size: clamp(16px, 1.08vw, 19px) !important;
letter-spacing: 1px;
font-weight: 780 !important;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-skills {
margin-top: 11px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-skill-desc .card_content_skill_effect {
font-size: 15.5px;
line-height: 1.52;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-face-switch {
right: 8px;
bottom: 8px;
}
/* /atlas preview no wrapper readable metadata */
/* atlas formal launch preview image and info tune */
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art img {
width: auto !important;
max-width: 100%;
height: clamp(220px, 20vw, 329px) !important;
max-height: min(42vh, 329px);
object-fit: contain;
cursor: zoom-in;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-stars {
color: rgba(35, 25, 28, .82) !important;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-info-line.card_content_info {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-info-item.card_content_info-item {
display: inline-flex !important;
flex-direction: row !important;
align-items: baseline;
gap: 4px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-info-item.card_content_info-item + .atlas_frame-preview-info-item.card_content_info-item::before {
content: "|";
margin: 0 12px 0 8px;
color: rgba(43, 32, 35, .28);
font-size: 13px;
font-weight: 400;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-info-item.card_content_info-item > div:first-child,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-info-item.card_content_info-item > div:last-child {
display: inline !important;
white-space: nowrap;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-info-item--danger.card_content_info-item + .atlas_frame-preview-info-item.card_content_info-item::before {
margin-left: 14px;
}
/* /atlas formal launch preview image and info tune */
/* atlas preview remove visible art frame */
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art-wrap {
position: relative;
display: inline-block !important;
width: auto !important;
max-width: 100%;
margin-top: 0 !important;
line-height: 0;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art {
position: static;
display: inline-block !important;
width: auto !important;
max-width: 100%;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: auto !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
overflow: visible !important;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art > span,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art > a,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art .mw-file-description,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art figure,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art .mw-halign-none {
display: inline-block !important;
width: auto !important;
max-width: 100%;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art img {
display: block !important;
width: auto !important;
max-width: 100%;
height: clamp(220px, 20vw, 329px) !important;
max-height: min(42vh, 329px);
margin: 0 !important;
}
/* /atlas preview remove visible art frame */
/* atlas preview push transition */
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-layout {
--atlas-preview-layout-gap: clamp(16px, 1.6vw, 24px);
--atlas-preview-card-gap: 10px;
--atlas-preview-card-width: calc((100cqw - (4 * var(--atlas-preview-card-gap))) / 5);
container-type: inline-size;
grid-template-columns: minmax(0, 1fr) 0px !important;
column-gap: 0 !important;
align-items: start;
overflow: visible;
transition: none !important;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) [data-atlas-preview-mode="1"] .atlas_frame-layout {
grid-template-columns: calc(60% - 4px) minmax(0, 1fr) !important;
column-gap: var(--atlas-preview-layout-gap) !important;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-grid--card-protos {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
gap: var(--atlas-preview-card-gap);
width: 100%;
max-width: 100%;
overflow-x: clip;
justify-content: start;
transition:
opacity 170ms cubic-bezier(.22,.61,.36,1),
filter 170ms cubic-bezier(.22,.61,.36,1);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) [data-atlas-preview-mode="1"] .atlas_frame-grid--card-protos {
grid-template-columns: repeat(3, minmax(0, var(--atlas-preview-card-width))) !important;
width: max-content;
max-width: 100%;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview {
display: flex !important;
flex-direction: column;
width: 100%;
max-width: 100%;
min-width: 0;
justify-self: stretch;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: none !important;
clip-path: none !important;
overflow: clip;
transition:
opacity 170ms cubic-bezier(.22,.61,.36,1),
visibility 0s linear 170ms;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) [data-atlas-preview-mode="1"] .atlas_frame-preview {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition:
opacity 190ms cubic-bezier(.22,.61,.36,1),
visibility 0s linear 0s;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview > * {
opacity: 1;
transform: none !important;
transition: none !important;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) [data-atlas-preview-mode="1"][data-atlas-has-selection="0"] .atlas_frame-preview {
min-height: clamp(220px, 34vh, 360px);
align-items: center;
justify-content: center;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) [data-atlas-preview-mode="1"][data-atlas-has-selection="0"] .atlas_frame-preview-empty {
display: block;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) [data-atlas-preview-mode="1"][data-atlas-has-selection="0"] .atlas_frame-preview > :not(.atlas_frame-preview-empty) {
display: none;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) [data-atlas-preview-mode="1"][data-atlas-has-selection="1"] .atlas_frame-preview-empty {
display: none;
}
@media (max-width: 1100px) {
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-layout,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) [data-atlas-preview-mode="1"] .atlas_frame-layout {
grid-template-columns: 1fr !important;
column-gap: 0 !important;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-grid--card-protos,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) [data-atlas-preview-mode="1"] .atlas_frame-grid--card-protos {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
width: 100%;
max-width: 100%;
}
}
/* /atlas preview push transition */
/* atlas preview requested cleanup */
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art-wrap,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art > span,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art > a,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art .mw-file-description,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art figure,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art .mw-halign-none {
background: transparent !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-art img {
outline: 0 !important;
border: 0 !important;
box-shadow: 0 10px 20px rgba(45, 34, 36, 0.13) !important;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-info-item.card_content_info-item + .atlas_frame-preview-info-item.card_content_info-item::before {
content: none !important;
display: none !important;
margin: 0 !important;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-info-line.card_content_info {
column-gap: 14px;
row-gap: 4px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-skill-type {
font-weight: 500 !important;
}
/* /atlas preview requested cleanup */
/* atlas preview close transition */
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-root.atlas_frame-preview-closing .atlas_frame-preview {
opacity: 0;
visibility: visible;
pointer-events: none;
transform: translate3d(42px, 0, 0);
clip-path: inset(0 0 0 100%);
transition:
opacity 0.18s cubic-bezier(.22,.61,.36,1),
transform 0.26s cubic-bezier(.18,.76,.18,1),
clip-path 0.26s cubic-bezier(.18,.76,.18,1),
visibility 0s linear 0.26s;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-root.atlas_frame-preview-closing .atlas_frame-preview > * {
opacity: 0;
transform: translate3d(12px, 0, 0);
transition:
opacity 0.14s cubic-bezier(.22,.61,.36,1),
transform 0.22s cubic-bezier(.18,.76,.18,1);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-root.atlas_frame-preview-closing .atlas_card-proto {
pointer-events: none;
}
/* /atlas preview close transition */
/* atlas preview crossfade mode switch */
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-root.atlas_frame-mode-crossfade .atlas_frame-grid--card-protos,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-root.atlas_frame-mode-crossfade .atlas_frame-preview {
opacity: 0 !important;
pointer-events: none !important;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-root.atlas_frame-mode-crossfade .atlas_frame-layout {
transition: none !important;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-root.atlas_frame-mode-crossfade .atlas_card-proto {
transition: opacity 170ms cubic-bezier(.22,.61,.36,1), filter 170ms cubic-bezier(.22,.61,.36,1) !important;
transform: none !important;
}
/* /atlas preview crossfade mode switch */
/* atlas preview open style action */
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 4px 12px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-title {
min-width: 0;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-open {
justify-self: end;
align-self: center;
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 0 2px;
border-bottom: 1px solid rgba(237,65,65,.38);
color: #ed4141;
font-size: clamp(13px, .9vw, 15px);
font-weight: 650;
line-height: 1;
cursor: pointer;
user-select: none;
transition:
color 160ms cubic-bezier(.22,.61,.36,1),
border-color 160ms cubic-bezier(.22,.61,.36,1),
opacity 160ms cubic-bezier(.22,.61,.36,1);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-open::after {
content: "↗";
margin-left: 5px;
font-size: .86em;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-open:hover,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-open:focus-visible {
color: #ff4d4d;
border-color: rgba(237,65,65,.74);
outline: none;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-open[aria-disabled="true"] {
opacity: .32;
cursor: default;
color: rgba(43,32,35,.46);
border-color: rgba(43,32,35,.16);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-mode {
grid-column: 1 / -1;
text-align: left;
}
/* /atlas preview open style action */
/* character profile portrait image slot */
body:has(.character_profile-root)::after {
display: none !important;
}
html:has(body .character_profile-root),
body:has(.character_profile-root),
body:has(.character_profile-root) .citizen-page-container,
body:has(.character_profile-root) .mw-body,
body:has(.character_profile-root) .citizen-body-container,
body:has(.character_profile-root) .citizen-body,
body:has(.character_profile-root) #mw-content-text,
body:has(.character_profile-root) .mw-parser-output {
background-color: #111216 !important;
background-image: url("/images/c/cc/%E8%A7%92%E8%89%B2%E6%A1%A3%E6%A1%88_%E8%83%8C%E6%99%AF.png") !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-attachment: fixed !important;
}
.character_profile-root {
z-index: 1;
background: transparent !important;
}
.character_profile-root .character_profile-bg {
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
z-index: 0 !important;
width: 100vw !important;
height: 100dvh !important;
min-height: 100dvh !important;
overflow: hidden !important;
pointer-events: none !important;
background-color: #111216 !important;
background-image: url("/images/c/cc/%E8%A7%92%E8%89%B2%E6%A1%A3%E6%A1%88_%E8%83%8C%E6%99%AF.png") !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
.character_profile-root[data-character-profile-art-mode="figure"] .character_profile-bg {
z-index: 1200 !important;
background-color: transparent !important;
background-image: none !important;
pointer-events: none !important;
}
.character_profile-shell {
z-index: 3;
}
.character_profile-bg-art {
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
width: 100vw !important;
height: 100dvh !important;
min-height: 100dvh !important;
display: flex !important;
align-items: flex-end !important;
justify-content: flex-start !important;
box-sizing: border-box !important;
padding-left: clamp(220px, 22vw, 430px) !important;
pointer-events: none !important;
opacity: .44;
transform: translate3d(clamp(-110px, -6vw, -42px), 1dvh, 0) scale(1.06);
transform-origin: 24% 100%;
filter: brightness(.50) contrast(1.06) saturate(.74);
transition:
opacity 280ms cubic-bezier(.22,.61,.36,1),
filter 280ms cubic-bezier(.22,.61,.36,1),
transform 420ms cubic-bezier(.18,.76,.18,1);
}
.character_profile-bg-art > span[typeof~="mw:File"],
.character_profile-bg-art > a,
.character_profile-bg-art .mw-file-description,
.character_profile-bg-art figure,
.character_profile-bg-art .mw-halign-none {
width: auto;
height: 100%;
margin: 0;
display: flex;
align-items: flex-end;
justify-content: flex-start;
}
.character_profile-bg-art img {
width: auto !important;
height: auto !important;
max-width: min(62vw, 900px);
max-height: min(98dvh, 1040px);
object-fit: contain;
object-position: left bottom;
filter: drop-shadow(0 36px 64px rgba(0, 0, 0, .46));
transition: filter 300ms cubic-bezier(.22,.61,.36,1);
}
.character_profile-root[data-character-profile-art-mode="figure"] .character_profile-bg-art img {
filter:
drop-shadow(0 34px 58px rgba(0, 0, 0, .62))
drop-shadow(18px 24px 34px rgba(0, 0, 0, .45))
drop-shadow(-12px 16px 28px rgba(0, 0, 0, .34));
}
.character_profile-root[data-character-profile-art-mode="figure"] .character_profile-bg-art {
z-index: 1210 !important;
opacity: 1;
transform: translate3d(clamp(-72px, -2.2vw, 8px), 0, 0) scale(1.16);
filter: brightness(1.08) contrast(1.05) saturate(1);
pointer-events: none !important;
}
.character_profile-portrait {
position: relative;
overflow: visible;
}
.character_profile-portrait--art {
width: min(330px, 86vw);
height: 244px;
margin: 0 auto;
display: flex;
align-items: flex-end;
justify-content: center;
border: 0;
background: transparent;
box-shadow: none;
transition:
opacity 260ms cubic-bezier(.22,.61,.36,1),
transform 360ms cubic-bezier(.18,.76,.18,1),
filter 260ms cubic-bezier(.22,.61,.36,1);
transform-origin: center bottom;
}
.character_profile-portrait-layer {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
justify-content: center;
transition:
opacity 240ms cubic-bezier(.22,.61,.36,1),
transform 340ms cubic-bezier(.18,.76,.18,1),
filter 240ms cubic-bezier(.22,.61,.36,1);
}
.character_profile-portrait-layer > span[typeof~="mw:File"],
.character_profile-portrait-layer > a,
.character_profile-portrait-layer .mw-file-description,
.character_profile-portrait-layer figure,
.character_profile-portrait-layer .mw-halign-none {
margin: 0;
display: flex;
align-items: flex-end;
justify-content: center;
}
.character_profile-portrait-layer--avatar > span[typeof~="mw:File"],
.character_profile-portrait-layer--avatar > a,
.character_profile-portrait-layer--avatar .mw-file-description,
.character_profile-portrait-layer--avatar figure,
.character_profile-portrait-layer--avatar .mw-halign-none {
width: 318px;
height: 234px;
background: transparent;
border: 0;
box-shadow: none;
}
.character_profile-portrait-layer--avatar img {
width: min(318px, 95%) !important;
height: auto !important;
max-width: none !important;
max-height: none !important;
object-fit: contain;
object-position: center bottom;
transform: translate3d(0, 0, 0);
transform-origin: center bottom;
}
.character_profile-root[data-character-profile-art-mode="figure"] .character_profile-portrait-layer--avatar {
cursor: zoom-in;
}
.character_profile-portrait-layer--avatar img {
cursor: zoom-in;
}
.character_profile-root[data-character-profile-art-mode="figure"] .character_profile-bg-art img {
pointer-events: auto !important;
cursor: zoom-in;
}
.character_profile-root[data-character-profile-art-mode="figure"] .character_profile-bg-art > span[typeof~="mw:File"],
.character_profile-root[data-character-profile-art-mode="figure"] .character_profile-bg-art > a,
.character_profile-root[data-character-profile-art-mode="figure"] .character_profile-bg-art .mw-file-description,
.character_profile-root[data-character-profile-art-mode="figure"] .character_profile-bg-art figure,
.character_profile-root[data-character-profile-art-mode="figure"] .character_profile-bg-art .mw-halign-none {
pointer-events: none !important;
}
.character_profile-art-toggle {
position: absolute;
left: -42px;
right: auto;
bottom: 10px;
z-index: 8;
width: 34px;
height: 34px;
border-radius: 999px;
border: 1px solid rgba(234, 223, 206, .62);
background: rgba(14, 13, 13, .18);
box-shadow: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: rgba(234, 223, 206, .94);
backdrop-filter: none;
transition:
transform 180ms cubic-bezier(.22,.61,.36,1),
border-color 180ms cubic-bezier(.22,.61,.36,1),
background 180ms cubic-bezier(.22,.61,.36,1),
opacity 180ms cubic-bezier(.22,.61,.36,1);
}
.character_profile-art-toggle:hover,
.character_profile-art-toggle:focus-visible {
transform: translate3d(-1px, -1px, 0);
border-color: rgba(255, 244, 224, .94);
background: rgba(234, 223, 206, .10);
box-shadow: none;
outline: none;
}
.character_profile-art-toggle::before {
left: 13px;
top: 10px;
border-width: 4px 6px 4px 0;
border-color: transparent currentColor transparent transparent;
}
.character_profile-art-toggle::after {
right: 13px;
bottom: 10px;
border-width: 4px 0 4px 6px;
border-color: transparent transparent transparent currentColor;
}
.character_profile-art-toggle::before,
.character_profile-art-toggle::after,
.character_profile-art-toggle-icon::before,
.character_profile-art-toggle-icon::after {
content: none !important;
}
.character_profile-art-toggle:active {
transform: translateY(1px) scale(.98);
}
.character_profile-art-toggle-icon {
position: relative;
width: 20px;
height: 20px;
display: block;
background-color: transparent;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eadfce' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m17 2 4 4-4 4'/%3E%3Cpath d='M3 11v-1a4 4 0 0 1 4-4h14'/%3E%3Cpath d='m7 22-4-4 4-4'/%3E%3Cpath d='M21 13v1a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
transform: none;
}
.character_profile-art-toggle-icon::before {
content: "";
position: absolute;
left: 1px;
top: 1px;
width: 14px;
height: 10px;
border-left: 2px solid currentColor;
border-top: 2px solid currentColor;
border-radius: 9px 0 0 0;
}
.character_profile-art-toggle-icon::after {
content: "";
position: absolute;
right: 1px;
bottom: 1px;
width: 14px;
height: 10px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
border-radius: 0 0 9px 0;
}
.character_profile-root[data-character-profile-art-mode="figure"] .character_profile-art-toggle {
position: fixed !important;
left: clamp(24px, 4vw, 72px) !important;
bottom: clamp(26px, 6vh, 76px) !important;
right: auto !important;
z-index: 1300 !important;
opacity: 1 !important;
filter: none !important;
transform: none;
width: 42px;
height: 42px;
border-radius: 999px;
color: rgba(250, 240, 222, .96);
background: rgba(11, 10, 10, .24);
border-color: rgba(250, 240, 222, .72);
box-shadow: none;
}
.character_profile-root[data-character-profile-art-mode="figure"] .character_profile-art-toggle-icon {
transform: rotate(180deg);
}
@media (max-width: 980px) {
.character_profile-bg-art {
opacity: .30;
padding-left: 0 !important;
transform: translate3d(-12vw, 1dvh, 0) scale(.98);
}
.character_profile-bg-art img {
max-width: min(96vw, 680px);
max-height: 76dvh;
}
.character_profile-root[data-character-profile-art-mode="figure"] .character_profile-bg-art {
opacity: .92;
transform: translate3d(-6vw, 0, 0) scale(1.04);
}
.character_profile-portrait--art {
width: min(176px, 72vw);
height: 204px;
}
.character_profile-portrait-layer--avatar > span[typeof~="mw:File"],
.character_profile-portrait-layer--avatar > a,
.character_profile-portrait-layer--avatar .mw-file-description,
.character_profile-portrait-layer--avatar figure,
.character_profile-portrait-layer--avatar .mw-halign-none {
width: 136px;
height: 136px;
}
}
/* /character profile portrait image slot */
/* character atlas prototype */
.character_atlas_proto {
position: relative;
min-height: 100dvh;
overflow: hidden;
isolation: isolate;
color: #f4e9df;
font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", "Source Han Sans SC", sans-serif;
}
.character_atlas_proto *,
.character_atlas_proto *::before,
.character_atlas_proto *::after {
box-sizing: border-box;
}
.character_atlas-bg {
position: fixed;
inset: 0;
z-index: -2;
background:
linear-gradient(90deg, rgba(18,17,18,.94), rgba(18,17,18,.64) 44%, rgba(18,17,18,.86)),
url("/images/c/cc/%E8%A7%92%E8%89%B2%E6%A1%A3%E6%A1%88_%E8%83%8C%E6%99%AF.png") center / cover no-repeat;
}
.character_atlas-bg::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0,0,0,.38), transparent 32%, rgba(0,0,0,.56)),
repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 92px);
opacity: .58;
}
.character_atlas-shell {
display: grid;
grid-template-columns: minmax(220px, 270px) minmax(0, 1fr);
gap: clamp(24px, 3vw, 48px);
width: min(1640px, 100%);
min-height: 100dvh;
margin: 0 auto;
padding: clamp(28px, 4vw, 58px);
}
.character_atlas-rail {
display: flex;
flex-direction: column;
gap: 28px;
padding: 6px 0;
}
.character_atlas-kicker,
.character_atlas-stage-label,
.character_atlas-board-code {
color: rgba(221, 193, 177, .74);
font-size: 11px;
font-weight: 760;
letter-spacing: .18em;
}
.character_atlas-title {
margin-top: 8px;
color: #fff7ee;
font-size: clamp(28px, 3vw, 44px);
font-weight: 850;
line-height: 1;
}
.character_atlas-filter-stack {
display: grid;
gap: 1px;
border-top: 1px solid rgba(255,255,255,.16);
border-bottom: 1px solid rgba(255,255,255,.16);
}
.character_atlas-filter {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 48px;
padding: 10px 4px;
border-top: 1px solid rgba(255,255,255,.08);
cursor: pointer;
transition: color .18s ease, padding-left .18s ease, background .18s ease;
}
.character_atlas-filter:first-child {
border-top: 0;
}
.character_atlas-filter span {
color: rgba(251,239,226,.88);
font-size: 15px;
font-weight: 720;
}
.character_atlas-filter b {
color: rgba(200, 55, 58, .78);
font-size: 11px;
letter-spacing: .16em;
}
.character_atlas-filter.is-active {
padding-left: 12px;
background: linear-gradient(90deg, rgba(166,22,30,.34), transparent);
}
.character_atlas-rail-strip {
margin-top: auto;
display: flex;
justify-content: space-between;
align-items: baseline;
border-top: 1px solid rgba(255,255,255,.16);
padding-top: 14px;
color: rgba(244,232,220,.66);
}
.character_atlas-rail-strip strong {
color: #fff4e8;
font-size: 34px;
line-height: 1;
}
.character_atlas-main {
display: grid;
gap: clamp(22px, 3vw, 38px);
}
.character_atlas-stage {
position: relative;
min-height: min(620px, calc(100dvh - 116px));
overflow: hidden;
border-left: 1px solid rgba(255,255,255,.18);
background:
linear-gradient(100deg, rgba(20,18,18,.22), rgba(20,18,18,.68) 52%, rgba(65,16,20,.44)),
linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.015));
}
.character_atlas-stage-art {
position: absolute;
left: clamp(0px, 4vw, 70px);
bottom: -4px;
z-index: 1;
width: min(48vw, 720px);
height: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
opacity: .95;
filter: drop-shadow(0 34px 48px rgba(0,0,0,.46));
}
.character_atlas-stage-art img {
width: auto !important;
height: auto !important;
max-width: 100%;
max-height: min(92dvh, 760px);
object-fit: contain;
object-position: center bottom;
}
.character_atlas-stage-copy {
position: relative;
z-index: 2;
margin-left: min(48vw, 680px);
min-height: inherit;
padding: clamp(32px, 5vw, 72px) clamp(28px, 5vw, 70px);
display: flex;
flex-direction: column;
justify-content: center;
text-shadow: 0 2px 18px rgba(0,0,0,.72);
}
.character_atlas-stage-copy h1 {
margin: 12px 0 0;
color: #fff8ef;
font-size: clamp(56px, 7vw, 116px);
font-weight: 900;
line-height: .88;
letter-spacing: 0;
}
.character_atlas-stage-latin {
margin-top: 14px;
color: rgba(255,239,222,.72);
font-size: clamp(14px, 1.2vw, 18px);
font-weight: 760;
letter-spacing: .42em;
}
.character_atlas-stage-facts {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 30px;
}
.character_atlas-stage-facts span,
.character_atlas-view-tabs div,
.character_atlas-card-tag {
border: 1px solid rgba(255,255,255,.18);
padding: 6px 9px;
color: rgba(255,241,226,.86);
font-size: 12px;
font-weight: 720;
line-height: 1;
}
.character_atlas-stage-portrait {
position: absolute;
right: clamp(18px, 3vw, 44px);
bottom: clamp(18px, 3vw, 44px);
z-index: 3;
width: min(220px, 28vw);
opacity: .92;
filter: drop-shadow(0 22px 30px rgba(0,0,0,.42));
}
.character_atlas-stage-portrait img {
width: 100% !important;
height: auto !important;
}
.character_atlas-board {
display: grid;
gap: 18px;
}
.character_atlas-board-head {
display: flex;
justify-content: space-between;
gap: 18px;
align-items: end;
border-top: 1px solid rgba(255,255,255,.16);
padding-top: 18px;
}
.character_atlas-board-head h2 {
margin: 6px 0 0;
color: #fff5ec;
font-size: clamp(26px, 2.3vw, 36px);
line-height: 1;
}
.character_atlas-view-tabs {
display: flex;
gap: 6px;
}
.character_atlas-view-tabs div {
cursor: pointer;
}
.character_atlas-view-tabs .is-active {
border-color: rgba(194, 42, 48, .62);
background: rgba(166,22,30,.28);
}
.character_atlas-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.character_atlas-card {
position: relative;
min-height: 228px;
overflow: hidden;
border: 1px solid rgba(255,255,255,.12);
background: rgba(15,14,14,.48);
cursor: pointer;
transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.character_atlas-card:hover,
.character_atlas-card:focus-visible,
.character_atlas-card.is-active {
transform: translate3d(0, -2px, 0);
border-color: rgba(219, 62, 66, .66);
background: rgba(32,24,24,.58);
outline: none;
}
.character_atlas-card-index {
position: absolute;
left: 10px;
top: 10px;
z-index: 3;
color: rgba(255,243,231,.58);
font-size: 12px;
font-weight: 760;
}
.character_atlas-card-media {
position: absolute;
inset: 0 0 48px;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 22px 14px 0;
}
.character_atlas-card-media img {
width: auto !important;
height: auto !important;
max-width: 112%;
max-height: 184px;
object-fit: contain;
object-position: center bottom;
filter: drop-shadow(0 18px 22px rgba(0,0,0,.42));
}
.character_atlas-card.is-compact .character_atlas-card-media img {
max-height: 128px;
}
.character_atlas-card-body {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
min-height: 58px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
align-items: end;
padding: 10px 12px;
background: linear-gradient(180deg, transparent, rgba(7,7,7,.82) 22%, rgba(7,7,7,.96));
}
.character_atlas-card-name {
color: #fff5eb;
font-size: 18px;
font-weight: 850;
line-height: 1.05;
}
.character_atlas-card-meta {
grid-column: 1;
color: rgba(232,214,201,.7);
font-size: 12px;
}
.character_atlas-card-tag {
grid-row: 1 / span 2;
grid-column: 2;
align-self: center;
white-space: nowrap;
}
@media (max-width: 1100px) {
.character_atlas-shell {
grid-template-columns: 1fr;
}
.character_atlas-rail {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 18px;
}
.character_atlas-filter-stack {
grid-column: 1 / -1;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-bottom: 0;
}
.character_atlas-filter {
min-height: 42px;
padding: 8px;
}
.character_atlas-rail-strip {
margin-top: 0;
}
.character_atlas-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
.character_atlas-shell {
padding: 18px;
}
.character_atlas-filter-stack {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.character_atlas-stage {
min-height: 72dvh;
}
.character_atlas-stage-art {
left: 50%;
width: min(92vw, 520px);
transform: translateX(-50%);
opacity: .72;
}
.character_atlas-stage-copy {
margin-left: 0;
min-height: 72dvh;
justify-content: flex-end;
padding: 28px 20px 34px;
}
.character_atlas-stage-copy h1 {
font-size: clamp(52px, 18vw, 82px);
}
.character_atlas-stage-portrait {
width: min(190px, 42vw);
right: 14px;
bottom: 18px;
opacity: .55;
}
.character_atlas-board-head {
align-items: stretch;
flex-direction: column;
}
.character_atlas-view-tabs {
overflow-x: auto;
}
.character_atlas-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.character_atlas-card {
min-height: 206px;
}
}
@media (max-width: 480px) {
.character_atlas-grid {
grid-template-columns: 1fr;
}
.character_atlas-card {
min-height: 218px;
}
}
/* /character atlas prototype */
/* character index atlas */
body.page-Sandbox_角色图鉴页面原型 .citizen-page-header,
body.page-Sandbox_角色图鉴页面原型 #citizen-page-header-sticky-sentinel,
body.page-Sandbox_角色图鉴页面原型 #contentSub,
body.page-Sandbox_角色图鉴页面原型 .citizen-page-footer,
body.page-Sandbox_角色图鉴页面原型 .citizen-footer,
body.page-Sandbox_角色图鉴页面原型 .mw-footer,
body.page-Sandbox_角色图鉴页面原型 .catlinks,
body.page-Sandbox_角色图鉴页面原型 .printfooter,
body.page-角色图鉴 .citizen-page-header,
body.page-角色图鉴 #citizen-page-header-sticky-sentinel,
body.page-角色图鉴 #contentSub {
display: none !important;
}
html:has(body.page-Sandbox_角色图鉴页面原型),
body.page-Sandbox_角色图鉴页面原型,
body.page-Sandbox_角色图鉴页面原型 .citizen-page-container,
body.page-Sandbox_角色图鉴页面原型 .mw-body,
body.page-Sandbox_角色图鉴页面原型 .citizen-body-container,
body.page-Sandbox_角色图鉴页面原型 .citizen-body,
body.page-Sandbox_角色图鉴页面原型 #mw-content-text,
body.page-Sandbox_角色图鉴页面原型 .mw-parser-output,
body.page-Sandbox_角色图鉴页面原型 .citizen-section,
html:has(body.page-角色图鉴),
body.page-角色图鉴,
body.page-角色图鉴 .citizen-page-container,
body.page-角色图鉴 .mw-body,
body.page-角色图鉴 .citizen-body-container,
body.page-角色图鉴 .citizen-body,
body.page-角色图鉴 #mw-content-text,
body.page-角色图鉴 .mw-parser-output,
body.page-角色图鉴 .citizen-section {
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Sandbox_角色图鉴页面原型 .mw-parser-output > p,
body.page-角色图鉴 .mw-parser-output > p {
display: none;
}
.character_index-root {
--character-index-red: #b9393f;
--character-index-ink: #151313;
--character-index-line: rgba(244, 226, 211, .18);
--character-index-text: #f7ede4;
position: relative;
isolation: isolate;
min-height: 100dvh;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
overflow-x: clip;
background: #171414;
color: var(--character-index-text);
font-family: 'AlibabaPuHuiTi', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
}
.character_index-root *,
.character_index-root *::before,
.character_index-root *::after {
box-sizing: border-box;
}
.character_index-bg {
position: fixed;
inset: 0;
z-index: -2;
background:
linear-gradient(90deg, rgba(18, 16, 16, .96), rgba(18, 16, 16, .72) 48%, rgba(18, 16, 16, .94)),
url("/images/c/cc/%E8%A7%92%E8%89%B2%E6%A1%A3%E6%A1%88_%E8%83%8C%E6%99%AF.png") center / cover no-repeat;
}
.character_index-bg::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(180deg, rgba(9, 8, 8, .18), rgba(9, 8, 8, .76)),
repeating-linear-gradient(90deg, rgba(255, 246, 235, .035) 0 1px, transparent 1px 96px);
opacity: .82;
}
.character_index-shell {
width: min(1760px, 100%);
margin: 0 auto;
padding: clamp(28px, 5vw, 72px);
}
.character_index-hero {
display: grid;
grid-template-columns: minmax(260px, .8fr) minmax(0, 1.6fr);
gap: clamp(28px, 5vw, 80px);
align-items: stretch;
min-height: min(820px, calc(100dvh - 80px));
}
.character_index-hero-copy {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 460px;
padding: clamp(20px, 2.2vw, 36px) 0;
}
.character_index-kicker,
.character_index-section-code,
.character_index-feature-code {
color: rgba(225, 196, 180, .72);
font-size: 11px;
font-weight: 760;
letter-spacing: .18em;
}
.character_index-title {
margin: 12px 0 0;
color: #fff7ef;
font-size: clamp(40px, 5vw, 78px);
font-weight: 880;
line-height: .96;
letter-spacing: 0;
}
.character_index-lede {
width: min(100%, 36em);
margin-top: 22px;
color: rgba(246, 230, 216, .76);
font-size: clamp(15px, 1vw, 17px);
line-height: 1.72;
}
.character_index-stats {
display: grid;
gap: 1px;
margin-top: auto;
border-top: 1px solid var(--character-index-line);
border-bottom: 1px solid var(--character-index-line);
}
.character_index-stats > div {
display: flex;
align-items: baseline;
justify-content: space-between;
min-height: 54px;
border-top: 1px solid rgba(244, 226, 211, .08);
}
.character_index-stats > div:first-child {
border-top: 0;
}
.character_index-stats span {
color: rgba(246, 230, 216, .62);
font-size: 13px;
font-weight: 650;
}
.character_index-stats strong {
color: #fff8ef;
font-size: clamp(20px, 2vw, 34px);
font-weight: 840;
line-height: 1;
}
.character_index-feature {
position: relative;
min-height: inherit;
overflow: hidden;
border-left: 1px solid var(--character-index-line);
background:
linear-gradient(115deg, rgba(244, 229, 215, .06), rgba(244, 229, 215, .015) 46%, rgba(115, 31, 34, .22)),
rgba(24, 21, 21, .46);
}
.character_index-feature::before {
content: "";
position: absolute;
inset: auto 0 0;
height: 42%;
pointer-events: none;
background: linear-gradient(180deg, transparent, rgba(12, 10, 10, .82));
z-index: 2;
}
.character_index-feature-art {
position: absolute;
left: clamp(-40px, 1vw, 24px);
bottom: -8px;
z-index: 1;
width: min(58vw, 860px);
height: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
filter: drop-shadow(0 38px 52px rgba(0, 0, 0, .48));
}
.character_index-feature-art > span[typeof~="mw:File"],
.character_index-feature-art > a,
.character_index-feature-art .mw-file-description,
.character_index-feature-art figure,
.character_index-feature-art .mw-halign-none {
display: flex;
align-items: flex-end;
justify-content: center;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.character_index-feature-art img {
width: auto !important;
height: auto !important;
max-width: 100%;
max-height: min(92dvh, 860px);
object-fit: contain;
object-position: center bottom;
}
.character_index-feature-panel {
position: absolute;
right: clamp(24px, 4vw, 72px);
bottom: clamp(28px, 5vw, 78px);
z-index: 3;
width: min(420px, 42%);
padding: 24px 0 0;
border-top: 1px solid rgba(246, 230, 216, .36);
text-shadow: 0 2px 16px rgba(0, 0, 0, .72);
}
.character_index-feature-name {
margin-top: 10px;
color: #fff8ef;
font-size: clamp(46px, 5.6vw, 92px);
font-weight: 900;
line-height: .9;
}
.character_index-feature-latin {
margin-top: 12px;
color: rgba(249, 232, 218, .68);
font-size: 13px;
font-weight: 760;
letter-spacing: .34em;
text-transform: uppercase;
}
.character_index-feature-facts {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 22px;
}
.character_index-feature-facts span,
.character_index-card-pheromone,
.character_index-card-count {
border: 1px solid rgba(244, 226, 211, .18);
padding: 5px 8px;
color: rgba(249, 235, 222, .82);
font-size: 12px;
font-weight: 700;
line-height: 1;
}
.character_index-feature-link {
display: inline-flex;
margin-top: 24px;
}
.character_index-feature-link a,
.character_index-card-link a {
color: #fff7ef;
text-decoration: none;
border-bottom: 1px solid rgba(185, 57, 63, .86);
font-size: 13px;
font-weight: 760;
line-height: 1.7;
}
.character_index-feature-link a:hover,
.character_index-card-link a:hover {
color: #ffb7b4;
}
.character_index-directory {
margin-top: clamp(36px, 7vw, 96px);
padding-bottom: clamp(64px, 9vw, 130px);
}
.character_index-directory-head {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(240px, 420px);
gap: 24px;
align-items: end;
border-top: 1px solid var(--character-index-line);
padding-top: 22px;
}
.character_index-directory-head h2 {
margin: 7px 0 0;
color: #fff7ef;
font-size: clamp(30px, 3vw, 48px);
line-height: 1;
}
.character_index-directory-note {
color: rgba(246, 230, 216, .62);
font-size: 13px;
line-height: 1.65;
}
.character_index-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
margin-top: 22px;
}
.character_index-card {
position: relative;
min-height: 320px;
overflow: hidden;
border: 1px solid rgba(244, 226, 211, .13);
background: rgba(18, 16, 16, .62);
transition: transform .22s cubic-bezier(.16, 1, .3, 1), border-color .22s ease, background .22s ease;
}
.character_index-card:hover,
.character_index-card:focus-within,
.character_index-card.is-active {
transform: translate3d(0, -2px, 0);
border-color: rgba(185, 57, 63, .76);
background: rgba(34, 25, 25, .7);
}
.character_index-card-media {
position: absolute;
inset: 0 0 104px;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 18px 14px 0;
}
.character_index-card-media > span[typeof~="mw:File"],
.character_index-card-media > a,
.character_index-card-media .mw-file-description,
.character_index-card-media figure,
.character_index-card-media .mw-halign-none {
display: flex;
align-items: flex-end;
justify-content: center;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.character_index-card-media img {
width: auto !important;
height: auto !important;
max-width: 118%;
max-height: 226px;
object-fit: contain;
object-position: center bottom;
filter: drop-shadow(0 20px 22px rgba(0, 0, 0, .42));
}
.character_index-card-body {
position: absolute;
inset: auto 0 0;
z-index: 2;
display: grid;
grid-template-columns: 1fr auto;
gap: 5px 8px;
min-height: 124px;
padding: 14px;
background: linear-gradient(180deg, transparent, rgba(9, 8, 8, .88) 18%, rgba(9, 8, 8, .98));
}
.character_index-card-number {
grid-column: 2;
grid-row: 1;
align-self: start;
color: rgba(246, 230, 216, .48);
font-size: 12px;
font-weight: 760;
letter-spacing: .08em;
}
.character_index-card-name {
grid-column: 1;
grid-row: 1;
color: #fff7ef;
font-size: 22px;
font-weight: 860;
line-height: 1;
}
.character_index-card-meta {
grid-column: 1 / -1;
color: rgba(246, 230, 216, .66);
font-size: 13px;
line-height: 1.2;
}
.character_index-card-pheromone,
.character_index-card-count {
width: max-content;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 4px 7px;
font-size: 11px;
}
.character_index-card-link {
grid-column: 1 / -1;
margin-top: 2px;
}
.character_index-empty {
width: min(720px, calc(100vw - 40px));
min-height: 100dvh;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
color: #f7ede4;
}
.character_index-empty-title {
font-size: clamp(30px, 5vw, 58px);
font-weight: 860;
}
.character_index-empty-text {
margin-top: 14px;
color: rgba(246, 230, 216, .68);
}
@media (max-width: 1280px) {
.character_index-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 980px) {
.character_index-shell {
padding: 24px;
}
.character_index-hero,
.character_index-directory-head {
grid-template-columns: 1fr;
}
.character_index-hero-copy {
min-height: auto;
}
.character_index-feature {
min-height: 72dvh;
}
.character_index-feature-art {
left: 50%;
width: min(98vw, 720px);
transform: translateX(-50%);
opacity: .78;
}
.character_index-feature-panel {
left: 24px;
right: 24px;
bottom: 28px;
width: auto;
}
.character_index-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 680px) {
.character_index-shell {
padding: 18px;
}
.character_index-feature {
min-height: 68dvh;
}
.character_index-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.character_index-card {
min-height: 286px;
}
.character_index-card-media {
bottom: 112px;
}
.character_index-card-name {
font-size: 20px;
}
}
@media (max-width: 440px) {
.character_index-grid {
grid-template-columns: 1fr;
}
}
/* character index style-atlas layout */
.character_index-root {
min-height: 150dvh;
background: #141112;
}
.character_index-root::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background:
linear-gradient(90deg, rgba(8, 7, 8, .88), rgba(8, 7, 8, .30) 42%, rgba(8, 7, 8, .72)),
radial-gradient(70% 70% at 70% 24%, rgba(139, 39, 44, .24), transparent 62%);
}
.character_index-hero {
position: relative;
display: block;
min-height: 100dvh;
z-index: 1;
overflow: hidden;
}
.character_index-hero-art {
z-index: 0;
opacity: .58;
background:
linear-gradient(90deg, rgba(16, 13, 14, .94), rgba(16, 13, 14, .28) 46%, rgba(16, 13, 14, .76)),
url("/images/c/cc/%E8%A7%92%E8%89%B2%E6%A1%A3%E6%A1%88_%E8%83%8C%E6%99%AF.png") center / cover no-repeat;
}
.character_index-hero-art > span[typeof~="mw:File"],
.character_index-hero-art > a,
.character_index-hero-art .mw-file-description,
.character_index-hero-art figure,
.character_index-hero-art .mw-halign-none {
position: absolute;
inset: clamp(18px, 3vh, 36px) 0 calc(30vh + clamp(10px, 2vh, 24px)) 0;
display: flex;
align-items: flex-end;
justify-content: center;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
.character_index-hero-art img {
width: auto !important;
height: 100% !important;
max-width: min(92vw, 1120px) !important;
max-height: 100% !important;
object-fit: contain;
object-position: center bottom;
transform: translateX(clamp(80px, 14vw, 260px)) scale(1);
filter: brightness(.56) saturate(.82) contrast(1.04) drop-shadow(0 42px 54px rgba(0, 0, 0, .44));
}
.character_index-hero-art::after {
opacity: .86;
background:
linear-gradient(180deg, rgba(11, 9, 10, .22), rgba(11, 9, 10, .30) 42%, rgba(11, 9, 10, .90)),
radial-gradient(ellipse at center, rgba(0, 0, 0, .02) 26%, rgba(0, 0, 0, .62) 100%);
}
.character_index-hero-inner {
position: sticky;
top: -10px;
z-index: 2;
width: min(1680px, 100%);
margin: 0 auto;
min-height: 72dvh;
padding: clamp(44px, 6vw, 86px) clamp(24px, 6vw, 88px) 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.character_index-kicker {
color: rgba(233, 204, 188, .72);
text-transform: none;
}
.character_index-title {
width: min(680px, 74vw);
margin: 12px 0 0;
color: #fff8ef;
font-size: clamp(48px, 7vw, 106px);
font-weight: 900;
line-height: .9;
}
.character_index-title-sub {
display: block;
margin-top: 12px;
color: rgba(235, 205, 188, .52);
font-size: clamp(13px, 1.1vw, 18px);
font-weight: 760;
letter-spacing: .42em;
}
.character_index-lede {
width: min(520px, 86vw);
margin-top: 22px;
color: rgba(246, 228, 213, .74);
text-shadow: 0 2px 18px rgba(0, 0, 0, .58);
}
.character_index-status {
position: absolute;
right: clamp(24px, 6vw, 96px);
bottom: calc(30vh + clamp(16px, 3vh, 32px));
z-index: 4;
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
.character_index-status-item {
min-width: 126px;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 18px;
padding: 9px 12px;
border: 1px solid rgba(241, 219, 204, .26);
background: rgba(12, 10, 11, .34);
backdrop-filter: blur(12px) saturate(130%);
-webkit-backdrop-filter: blur(12px) saturate(130%);
color: rgba(250, 237, 225, .78);
cursor: pointer;
}
.character_index-status-item.is-active {
border-color: rgba(190, 60, 67, .80);
background: rgba(119, 31, 36, .34);
color: #fff8ef;
}
.character_index-status-item span:first-child {
font-size: 13px;
font-weight: 760;
}
.character_index-status-num {
color: #fff8ef;
font-family: Georgia, "Times New Roman", serif;
font-size: 20px;
line-height: 1;
}
.character_index-surface-wrap {
position: relative;
z-index: 3;
width: 100vw;
margin-top: -30vh;
left: 50%;
transform: translateX(-50%);
overflow-x: clip;
}
.character_index-surface {
position: relative;
width: 100%;
min-height: 82dvh;
padding: 112px 0 0;
border-radius: 100vw 100vw 0 0 / 2.5em 2.5em 0 0;
border-top: 1px solid rgba(244, 222, 205, .34);
background:
linear-gradient(180deg, rgba(30, 25, 25, .82), rgba(20, 18, 18, .92) 38%, rgba(15, 14, 14, .98)),
radial-gradient(96% 64% at 50% -18%, rgba(180, 68, 72, .22), transparent 55%);
backdrop-filter: blur(18px) saturate(132%);
-webkit-backdrop-filter: blur(18px) saturate(132%);
box-shadow: 0 -42px 80px -50px rgba(0, 0, 0, .76), inset 0 1px 0 rgba(255, 246, 232, .16);
}
.character_index-surface::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background:
radial-gradient(100% 60% at 50% -16%, rgba(246, 224, 207, .18), transparent 52%),
repeating-linear-gradient(90deg, rgba(255, 246, 235, .035) 0 1px, transparent 1px 86px);
}
.character_index-shell {
position: relative;
z-index: 1;
width: min(1720px, 100%);
margin: 0 auto;
padding: 0 clamp(24px, 5vw, 88px) clamp(72px, 9vw, 136px);
}
.character_index-toolbar {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 28px;
align-items: end;
border-bottom: 1px solid rgba(244, 226, 211, .14);
padding-bottom: 18px;
}
.character_index-section-code,
.character_index-preview-code {
color: rgba(233, 204, 188, .58);
}
.character_index-toolbar h2 {
margin: 7px 0 0;
color: #fff7ef;
font-size: clamp(30px, 3.2vw, 52px);
line-height: 1;
}
.character_index-toolbar p {
max-width: 720px;
margin: 14px 0 0;
color: rgba(242, 222, 207, .64);
font-size: 14px;
line-height: 1.7;
}
.character_index-filter-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-end;
}
.character_index-filter {
min-height: 34px;
padding: 8px 12px;
border-bottom: 2px solid transparent;
color: rgba(244, 226, 211, .68);
font-size: 13px;
font-weight: 760;
cursor: pointer;
}
.character_index-filter.is-active {
color: #fff8ef;
border-bottom-color: #cf444b;
background: rgba(175, 50, 58, .14);
}
.character_index-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
gap: clamp(18px, 2.4vw, 36px);
align-items: start;
margin-top: 24px;
}
.character_index-grid {
margin-top: 0;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.character_index-card {
min-height: 292px;
border-color: rgba(244, 226, 211, .12);
background:
linear-gradient(180deg, rgba(37, 30, 31, .62), rgba(13, 12, 12, .92)),
radial-gradient(76% 58% at 50% 28%, rgba(202, 92, 82, .15), transparent 62%);
}
.character_index-card::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(135deg, rgba(255, 242, 226, .07), transparent 32%);
opacity: .72;
}
.character_index-card-media {
inset: 0 0 96px;
}
.character_index-card-media img {
max-height: 205px;
}
.character_index-card-body {
min-height: 112px;
background: linear-gradient(180deg, transparent, rgba(8, 7, 7, .88) 18%, rgba(8, 7, 7, .98));
}
.character_index-card-name {
font-size: 21px;
}
.character_index-card-pheromone,
.character_index-card-count {
border-color: rgba(244, 226, 211, .14);
color: rgba(249, 235, 222, .76);
}
.character_index-preview {
position: sticky;
top: 96px;
min-height: 560px;
padding: 22px;
border: 1px solid rgba(244, 226, 211, .14);
background:
linear-gradient(180deg, rgba(32, 26, 27, .76), rgba(13, 12, 12, .92)),
radial-gradient(90% 44% at 50% 0%, rgba(160, 48, 54, .24), transparent 60%);
}
.character_index-preview-art {
height: 260px;
display: flex;
align-items: flex-end;
justify-content: center;
overflow: hidden;
border-bottom: 1px solid rgba(244, 226, 211, .13);
margin: -2px -2px 20px;
}
.character_index-preview-art > span[typeof~="mw:File"],
.character_index-preview-art > a,
.character_index-preview-art .mw-file-description,
.character_index-preview-art figure,
.character_index-preview-art .mw-halign-none {
display: flex;
align-items: flex-end;
justify-content: center;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.character_index-preview-art img {
width: auto !important;
height: auto !important;
max-width: 112%;
max-height: 252px;
object-fit: contain;
object-position: center bottom;
filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .42));
}
.character_index-preview-name {
margin-top: 9px;
color: #fff8ef;
font-size: clamp(34px, 3.2vw, 48px);
font-weight: 900;
line-height: .96;
}
.character_index-preview-latin {
margin-top: 8px;
color: rgba(235, 205, 188, .54);
font-size: 12px;
font-weight: 760;
letter-spacing: .28em;
text-transform: uppercase;
}
.character_index-preview-facts {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
.character_index-preview-facts span {
border: 1px solid rgba(244, 226, 211, .16);
padding: 5px 8px;
color: rgba(249, 235, 222, .80);
font-size: 12px;
font-weight: 720;
}
.character_index-preview-counts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
margin-top: 20px;
border-top: 1px solid rgba(244, 226, 211, .14);
border-left: 1px solid rgba(244, 226, 211, .10);
}
.character_index-preview-count {
min-height: 58px;
padding: 10px;
border-right: 1px solid rgba(244, 226, 211, .10);
border-bottom: 1px solid rgba(244, 226, 211, .10);
}
.character_index-preview-count span {
display: block;
color: rgba(244, 226, 211, .56);
font-size: 12px;
}
.character_index-preview-count strong {
display: block;
margin-top: 2px;
color: #fff8ef;
font-family: Georgia, "Times New Roman", serif;
font-size: 24px;
line-height: 1;
}
.character_index-preview-link {
margin-top: 22px;
}
.character_index-preview-link a {
display: inline-flex;
color: #fff7ef;
text-decoration: none;
border-bottom: 1px solid rgba(207, 68, 75, .92);
font-size: 14px;
font-weight: 780;
line-height: 1.8;
}
@media (max-width: 1180px) {
.character_index-layout {
grid-template-columns: 1fr;
}
.character_index-preview {
position: relative;
top: auto;
min-height: 0;
}
.character_index-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
.character_index-hero-inner {
min-height: 64dvh;
padding: 32px 18px 0;
}
.character_index-title {
width: 92vw;
font-size: clamp(44px, 14vw, 72px);
}
.character_index-hero-art img {
transform: translateX(0) scale(.98);
max-width: 104vw !important;
}
.character_index-status {
left: 18px;
right: 18px;
bottom: calc(30vh + 18px);
justify-content: flex-start;
}
.character_index-status-item {
min-width: 0;
flex: 1 1 136px;
}
.character_index-surface {
padding-top: 86px;
}
.character_index-toolbar {
grid-template-columns: 1fr;
}
.character_index-filter-row {
justify-content: flex-start;
}
.character_index-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 460px) {
.character_index-grid {
grid-template-columns: 1fr;
}
}
/* character index framework correction: closer to Style Atlas, lighter dark tone */
.character_index-root {
--character-index-bg: #282225;
--character-index-panel: rgba(58, 50, 52, .76);
--character-index-panel-deep: rgba(38, 33, 35, .90);
--character-index-line-soft: rgba(255, 235, 224, .22);
--character-index-text-strong: #fff8f0;
--character-index-text: rgba(255, 244, 235, .84);
--character-index-text-muted: rgba(247, 224, 211, .62);
--character-index-red-soft: #cc5559;
min-height: 150dvh;
background: var(--character-index-bg);
}
.character_index-root::before {
background:
linear-gradient(180deg, rgba(42, 35, 38, .18), rgba(42, 35, 38, .78)),
radial-gradient(82% 64% at 64% 18%, rgba(170, 76, 78, .20), transparent 64%);
}
.character_index-hero {
min-height: 100dvh;
background: #2a2427;
}
.character_index-hero-art {
opacity: 1;
background-image:
linear-gradient(90deg, rgba(34, 29, 32, .86), rgba(34, 29, 32, .48) 48%, rgba(34, 29, 32, .78)),
linear-gradient(180deg, rgba(34, 29, 32, .10), rgba(34, 29, 32, .88)),
url("/images/5/50/Background_1.png");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.character_index-hero-art > span[typeof~="mw:File"],
.character_index-hero-art > a,
.character_index-hero-art .mw-file-description,
.character_index-hero-art figure,
.character_index-hero-art .mw-halign-none,
.character_index-hero-art img {
display: none !important;
}
.character_index-hero-art::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(58% 46% at 72% 30%, rgba(198, 109, 105, .18), transparent 64%),
repeating-linear-gradient(90deg, rgba(255, 244, 232, .035) 0 1px, transparent 1px 92px);
}
.character_index-hero-art::after {
opacity: .62;
background:
linear-gradient(180deg, rgba(33, 28, 31, .02), rgba(33, 28, 31, .72) 72%, rgba(33, 28, 31, .92)),
radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 32%, rgba(16, 13, 15, .34) 100%);
}
.character_index-hero-inner {
min-height: 70dvh;
padding-top: clamp(54px, 7vw, 108px);
}
.character_index-kicker,
.character_index-section-code,
.character_index-preview-code {
color: rgba(249, 222, 207, .66);
}
.character_index-title {
color: var(--character-index-text-strong);
text-shadow: 0 2px 20px rgba(56, 30, 32, .34);
}
.character_index-title-sub {
color: rgba(249, 222, 207, .50);
}
.character_index-lede {
color: var(--character-index-text);
}
.character_index-status {
bottom: calc(30vh + clamp(16px, 3vh, 32px));
}
.character_index-status-item {
border-color: rgba(255, 235, 224, .34);
background: rgba(72, 61, 64, .30);
color: rgba(255, 244, 235, .82);
box-shadow: inset 0 1px 0 rgba(255, 250, 240, .06);
}
.character_index-status-item.is-active {
border-color: rgba(218, 91, 94, .82);
background: rgba(146, 58, 62, .24);
}
.character_index-surface-wrap {
margin-top: -30vh;
}
.character_index-surface {
min-height: 84dvh;
padding-top: 108px;
border-color: rgba(255, 235, 224, .40);
background:
linear-gradient(180deg, rgba(79, 69, 71, .74), rgba(56, 49, 51, .82) 34%, rgba(42, 37, 39, .94)),
radial-gradient(110% 64% at 50% -18%, rgba(255, 219, 205, .18), transparent 58%);
box-shadow:
0 -42px 88px -56px rgba(37, 24, 26, .78),
0 -2px 10px rgba(255, 232, 220, .08),
inset 0 1px 0 rgba(255, 250, 240, .18);
}
.character_index-surface::before {
background:
radial-gradient(120% 68% at 50% -18%, rgba(255, 238, 226, .24), rgba(255, 218, 204, .12) 32%, transparent 58%),
repeating-linear-gradient(90deg, rgba(255, 244, 232, .035) 0 1px, transparent 1px 86px);
opacity: .86;
}
.character_index-toolbar {
border-bottom-color: rgba(255, 235, 224, .18);
}
.character_index-toolbar h2 {
color: var(--character-index-text-strong);
}
.character_index-toolbar p {
color: var(--character-index-text-muted);
}
.character_index-filter {
color: rgba(255, 238, 226, .66);
}
.character_index-filter.is-active {
color: var(--character-index-text-strong);
border-bottom-color: var(--character-index-red-soft);
background: rgba(202, 84, 89, .12);
}
.character_index-layout {
grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
}
.character_index-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.character_index-card {
min-height: 284px;
border-color: rgba(255, 235, 224, .18);
background:
linear-gradient(180deg, rgba(83, 72, 74, .50), rgba(40, 35, 37, .72)),
radial-gradient(72% 58% at 50% 24%, rgba(224, 134, 115, .14), transparent 64%);
}
.character_index-card:hover,
.character_index-card:focus-within,
.character_index-card.is-active {
border-color: rgba(218, 91, 94, .72);
background:
linear-gradient(180deg, rgba(94, 79, 81, .60), rgba(45, 38, 40, .82)),
radial-gradient(72% 58% at 50% 24%, rgba(224, 134, 115, .20), transparent 64%);
}
.character_index-card-media {
inset: 0 0 94px;
}
.character_index-card-body {
min-height: 110px;
background: linear-gradient(180deg, transparent, rgba(37, 31, 33, .78) 18%, rgba(32, 28, 30, .96));
}
.character_index-card-name,
.character_index-preview-name {
color: var(--character-index-text-strong);
}
.character_index-card-meta {
color: rgba(255, 238, 226, .64);
}
.character_index-card-pheromone,
.character_index-card-count,
.character_index-preview-facts span {
border-color: rgba(255, 235, 224, .18);
color: rgba(255, 240, 230, .78);
background: rgba(255, 235, 224, .035);
}
.character_index-card-link a,
.character_index-preview-link a {
color: var(--character-index-text-strong);
border-bottom-color: var(--character-index-red-soft);
}
.character_index-preview {
background:
linear-gradient(180deg, rgba(82, 70, 72, .58), rgba(43, 37, 39, .82)),
radial-gradient(90% 48% at 50% 0%, rgba(216, 108, 106, .16), transparent 64%);
border-color: rgba(255, 235, 224, .18);
}
.character_index-preview-art {
border-bottom-color: rgba(255, 235, 224, .16);
background: rgba(255, 235, 224, .025);
}
.character_index-preview-latin,
.character_index-preview-count span {
color: rgba(249, 222, 207, .56);
}
.character_index-preview-counts {
border-top-color: rgba(255, 235, 224, .16);
border-left-color: rgba(255, 235, 224, .10);
}
.character_index-preview-count {
border-right-color: rgba(255, 235, 224, .10);
border-bottom-color: rgba(255, 235, 224, .10);
}
.character_index-preview-count strong {
color: var(--character-index-text-strong);
}
@media (max-width: 1180px) {
.character_index-layout {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
.character_index-hero-inner {
min-height: 64dvh;
}
.character_index-status {
left: 18px;
right: 18px;
}
.character_index-surface {
padding-top: 86px;
}
}
/* /character index atlas */
/* character atlas copied style frame */
body.page-Sandbox_角色图鉴页面原型 .citizen-page-header,
body.page-Sandbox_角色图鉴页面原型 #citizen-page-header-sticky-sentinel,
body.page-Sandbox_角色图鉴页面原型 #contentSub,
body.page-Sandbox_角色图鉴页面原型 .citizen-page-footer,
body.page-Sandbox_角色图鉴页面原型 .citizen-footer,
body.page-Sandbox_角色图鉴页面原型 .mw-footer,
body.page-Sandbox_角色图鉴页面原型 .catlinks,
body.page-Sandbox_角色图鉴页面原型 .printfooter,
body.page-角色图鉴 .citizen-page-header,
body.page-角色图鉴 #citizen-page-header-sticky-sentinel,
body.page-角色图鉴 #contentSub {
display: none !important;
}
html:has(body.page-Sandbox_角色图鉴页面原型),
body.page-Sandbox_角色图鉴页面原型,
body.page-Sandbox_角色图鉴页面原型 .citizen-page-container,
body.page-Sandbox_角色图鉴页面原型 .mw-body,
body.page-Sandbox_角色图鉴页面原型 .citizen-body-container,
body.page-Sandbox_角色图鉴页面原型 .citizen-body,
body.page-Sandbox_角色图鉴页面原型 #mw-content-text,
body.page-Sandbox_角色图鉴页面原型 .mw-parser-output,
body.page-Sandbox_角色图鉴页面原型 .citizen-section,
html:has(body.page-角色图鉴),
body.page-角色图鉴,
body.page-角色图鉴 .citizen-page-container,
body.page-角色图鉴 .mw-body,
body.page-角色图鉴 .citizen-body-container,
body.page-角色图鉴 .citizen-body,
body.page-角色图鉴 #mw-content-text,
body.page-角色图鉴 .mw-parser-output,
body.page-角色图鉴 .citizen-section {
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-Sandbox_角色图鉴页面原型 .mw-parser-output > p,
body.page-角色图鉴 .mw-parser-output > p {
display: none;
}
.character_atlas-root {
--character-atlas-ink: #241f21;
--character-atlas-panel: rgba(65, 58, 59, .72);
--character-atlas-panel-deep: rgba(45, 39, 41, .88);
--character-atlas-line: rgba(255, 235, 224, .22);
--character-atlas-text: rgba(255, 244, 235, .88);
--character-atlas-muted: rgba(247, 224, 211, .62);
--character-atlas-red: #d45b5f;
background: #272123;
}
.character_atlas-root .atlas_frame-hero {
background: #272123;
}
.character_atlas-root .character_atlas-hero-bg {
opacity: 1;
background-image:
linear-gradient(90deg, rgba(36, 31, 33, .88), rgba(36, 31, 33, .42) 50%, rgba(36, 31, 33, .80)),
linear-gradient(180deg, rgba(36, 31, 33, .08), rgba(36, 31, 33, .86)),
url("/images/5/50/Background_1.png");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.character_atlas-root .character_atlas-hero-bg::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(54% 42% at 70% 30%, rgba(207, 119, 108, .16), transparent 64%),
repeating-linear-gradient(90deg, rgba(255, 244, 232, .032) 0 1px, transparent 1px 92px);
}
.character_atlas-root .atlas_frame-hero-art::after {
opacity: .58;
}
.character_atlas-root .atlas_frame-title,
.character_atlas-root .atlas_frame-preview-name {
color: #fff8f0;
}
.character_atlas-root .atlas_frame-title-sub,
.character_atlas-root .atlas_frame-kicker,
.character_atlas-root .atlas_frame-filter-label {
color: rgba(249, 222, 207, .64);
}
.character_atlas-hero-note {
width: min(520px, 86vw);
margin-top: 20px;
color: rgba(255, 242, 232, .74);
font-size: clamp(14px, .92vw, 16px);
line-height: 1.7;
text-shadow: 0 2px 18px rgba(44, 24, 26, .34);
}
.character_atlas-root .atlas_frame-status-item {
border-color: rgba(255, 235, 224, .34);
background: rgba(71, 62, 64, .30);
color: rgba(255, 244, 235, .82);
}
.character_atlas-root .atlas_frame-status-item.is-active {
border-color: rgba(212, 91, 95, .82);
background: rgba(150, 62, 66, .24);
}
.character_atlas-root .atlas_frame-surface {
border-top-color: rgba(255, 235, 224, .40);
background:
linear-gradient(180deg, rgba(78, 70, 71, .74), rgba(56, 49, 51, .82) 34%, rgba(42, 37, 39, .94)),
radial-gradient(110% 64% at 50% -18%, rgba(255, 219, 205, .18), transparent 58%);
box-shadow:
0 -42px 88px -56px rgba(37, 24, 26, .78),
0 -2px 10px rgba(255, 232, 220, .08),
inset 0 1px 0 rgba(255, 250, 240, .18);
}
.character_atlas-root .atlas_frame-surface::before {
background:
radial-gradient(120% 68% at 50% -18%, rgba(255, 238, 226, .24), rgba(255, 218, 204, .12) 32%, transparent 58%),
repeating-linear-gradient(90deg, rgba(255, 244, 232, .035) 0 1px, transparent 1px 86px);
}
.character_atlas-root .atlas_frame-filter-row--primary,
.character_atlas-root .atlas_frame-filter-row--tags {
color: var(--character-atlas-text);
}
.character_atlas-root .atlas_frame-filter-option {
color: rgba(255, 238, 226, .68);
}
.character_atlas-root .atlas_frame-filter-option.is-active {
color: #fff8f0;
border-bottom-color: var(--character-atlas-red);
background: rgba(202, 84, 89, .12);
}
.character_atlas-summary {
cursor: default;
}
.character_atlas-summary-count {
margin-left: auto;
color: var(--character-atlas-muted);
font-size: 13px;
font-weight: 700;
}
.character_atlas-root .atlas_frame-layout.character_atlas-layout {
grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
}
.character_atlas-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
align-content: start;
}
.character_atlas-card {
position: relative;
min-height: 284px;
overflow: hidden;
border: 1px solid rgba(255, 235, 224, .18);
background:
linear-gradient(180deg, rgba(83, 72, 74, .50), rgba(40, 35, 37, .72)),
radial-gradient(72% 58% at 50% 24%, rgba(224, 134, 115, .14), transparent 64%);
transition: transform .22s cubic-bezier(.16, 1, .3, 1), border-color .22s ease, background .22s ease;
}
.character_atlas-card:hover,
.character_atlas-card:focus-visible,
.character_atlas-card.is-active {
transform: translate3d(0, -2px, 0);
border-color: rgba(218, 91, 94, .72);
outline: none;
}
.character_atlas-card-index {
position: absolute;
left: 12px;
top: 10px;
z-index: 3;
color: rgba(255, 240, 230, .48);
font-size: 12px;
font-weight: 760;
}
.character_atlas-card-media {
position: absolute;
inset: 0 0 94px;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 18px 14px 0;
}
.character_atlas-card-media > span[typeof~="mw:File"],
.character_atlas-card-media > a,
.character_atlas-card-media .mw-file-description,
.character_atlas-card-media figure,
.character_atlas-card-media .mw-halign-none {
display: flex;
align-items: flex-end;
justify-content: center;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.character_atlas-card-media img {
width: auto !important;
height: auto !important;
max-width: 118%;
max-height: 205px;
object-fit: contain;
object-position: center bottom;
filter: drop-shadow(0 20px 22px rgba(0, 0, 0, .34));
}
.character_atlas-card-body {
position: absolute;
inset: auto 0 0;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
min-height: 112px;
padding: 14px;
background: linear-gradient(180deg, transparent, rgba(37, 31, 33, .78) 18%, rgba(32, 28, 30, .96));
}
.character_atlas-card-kicker,
.character_atlas-card-meta {
color: rgba(255, 238, 226, .64);
font-size: 12px;
}
.character_atlas-card-name {
color: #fff8f0;
font-size: 21px;
font-weight: 860;
line-height: 1;
}
.character_atlas-card-count {
grid-column: 2;
grid-row: 2;
color: rgba(255, 240, 230, .74);
font-size: 12px;
white-space: nowrap;
}
.character_atlas-card-link {
grid-column: 1 / -1;
}
.character_atlas-card-link a,
.character_atlas-preview .atlas_frame-preview-open a {
color: #fff8f0;
text-decoration: none;
border-bottom: 1px solid var(--character-atlas-red);
}
.character_atlas-preview {
background:
linear-gradient(180deg, rgba(82, 70, 72, .58), rgba(43, 37, 39, .82)),
radial-gradient(90% 48% at 50% 0%, rgba(216, 108, 106, .16), transparent 64%);
border-color: rgba(255, 235, 224, .18);
}
.character_atlas-preview-art {
height: 260px;
display: flex;
align-items: flex-end;
justify-content: center;
overflow: hidden;
border-bottom: 1px solid rgba(255, 235, 224, .16);
margin-bottom: 18px;
}
.character_atlas-preview-art > span[typeof~="mw:File"],
.character_atlas-preview-art > a,
.character_atlas-preview-art .mw-file-description,
.character_atlas-preview-art figure,
.character_atlas-preview-art .mw-halign-none {
display: flex;
align-items: flex-end;
justify-content: center;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.character_atlas-preview-art img {
width: auto !important;
height: auto !important;
max-width: 112%;
max-height: 252px;
object-fit: contain;
object-position: center bottom;
}
.character_atlas-preview-counts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
margin-top: 18px;
border-top: 1px solid rgba(255, 235, 224, .16);
border-left: 1px solid rgba(255, 235, 224, .10);
}
.character_atlas-preview-count {
min-height: 58px;
padding: 10px;
border-right: 1px solid rgba(255, 235, 224, .10);
border-bottom: 1px solid rgba(255, 235, 224, .10);
}
.character_atlas-preview-count span {
display: block;
color: rgba(249, 222, 207, .56);
font-size: 12px;
}
.character_atlas-preview-count strong {
display: block;
margin-top: 2px;
color: #fff8f0;
font-family: Georgia, "Times New Roman", serif;
font-size: 24px;
line-height: 1;
}
@media (max-width: 1180px) {
.character_atlas-root .atlas_frame-layout.character_atlas-layout {
grid-template-columns: 1fr;
}
.character_atlas-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
.character_atlas-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 460px) {
.character_atlas-grid {
grid-template-columns: 1fr;
}
}
/* /character atlas copied style frame */
/* character atlas profile background surface */
.character_atlas-root .atlas_frame-surface {
background-image: url("/images/c/cc/%E8%A7%92%E8%89%B2%E6%A1%A3%E6%A1%88_%E8%83%8C%E6%99%AF.png") !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-attachment: fixed !important;
}
.character_atlas-root .atlas_frame-surface::before {
content: none !important;
background: none !important;
}
.character_atlas-root .atlas_frame-layout.character_atlas-layout {
grid-template-columns: 1fr;
}
.character_atlas-root .character_atlas-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
padding-right: 8px;
scrollbar-width: thin;
scrollbar-color: rgba(255, 235, 224, .28) rgba(255, 235, 224, .06);
}
.character_atlas-root .character_atlas-grid::-webkit-scrollbar {
width: 8px;
}
.character_atlas-root .character_atlas-grid::-webkit-scrollbar-track {
background: rgba(255, 235, 224, .06);
}
.character_atlas-root .character_atlas-grid::-webkit-scrollbar-thumb {
background: rgba(255, 235, 224, .28);
}
.character_atlas-card {
border-radius: 2px !important;
border-color: rgba(255, 255, 255, .045) !important;
background: #6161610a !important;
}
.character_atlas-card:hover,
.character_atlas-card:focus-visible,
.character_atlas-card.is-active {
border-color: rgba(255, 255, 255, .12) !important;
}
.character_atlas-card-media {
isolation: isolate;
}
.character_atlas-card-portrait,
.character_atlas-card-hover {
position: absolute;
inset: 0;
transition: opacity .22s ease, transform .22s ease;
}
.character_atlas-card-portrait {
display: flex;
align-items: flex-end;
justify-content: center;
padding: 18px 14px 0;
opacity: 1;
transform: translate3d(0, 0, 0);
}
.character_atlas-card-portrait > span[typeof~="mw:File"],
.character_atlas-card-portrait > a,
.character_atlas-card-portrait .mw-file-description,
.character_atlas-card-portrait figure,
.character_atlas-card-portrait .mw-halign-none {
display: flex;
align-items: flex-end;
justify-content: center;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.character_atlas-card:hover .character_atlas-card-portrait,
.character_atlas-card:focus-visible .character_atlas-card-portrait {
opacity: .06;
transform: translate3d(0, 6px, 0);
}
.character_atlas-card-hover {
z-index: 2;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 10px;
padding: 38px 14px 16px;
opacity: 0;
transform: translate3d(0, 8px, 0);
pointer-events: none;
background: rgba(10, 10, 10, .50);
}
.character_atlas-card:hover .character_atlas-card-hover,
.character_atlas-card:focus-visible .character_atlas-card-hover {
opacity: 1;
transform: translate3d(0, 0, 0);
}
.character_atlas-card-facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px 10px;
}
.character_atlas-card-fact {
min-width: 0;
}
.character_atlas-card-fact-label,
.character_atlas-card-gifts-label {
display: block;
color: rgba(255, 244, 235, .44);
font-size: 11px;
line-height: 1.1;
}
.character_atlas-card-fact-value {
display: block;
margin-top: 2px;
color: rgba(255, 248, 242, .88);
font-size: 12px;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.character_atlas-card-gifts {
display: grid;
gap: 5px;
}
.character_atlas-card-gift-list {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.character_atlas-card-gift {
max-width: 100%;
padding: 4px 7px;
color: rgba(255, 247, 240, .88);
font-size: 12px;
line-height: 1.15;
background: rgba(0, 0, 0, .34);
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.character_atlas-card-body {
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .74) 20%, rgba(0, 0, 0, .94)) !important;
}
.character_atlas-card-media > span[typeof~="mw:File"],
.character_atlas-card-media > a,
.character_atlas-card-media .mw-file-description,
.character_atlas-card-media figure,
.character_atlas-card-media .mw-halign-none {
position: relative;
z-index: 1;
}
@media (max-width: 1180px) {
.character_atlas-root .atlas_frame-layout.character_atlas-layout {
grid-template-columns: 1fr;
overflow: visible;
}
.character_atlas-root .character_atlas-grid {
max-height: none;
overflow: visible;
padding-right: 0;
}
}
/* /character atlas profile background surface */
/* BEGIN STYLE_COLLECTION_SANDBOX */
/* Style collection sandbox prototype. Managed by create-style-collection-sandbox.mjs. */
.collection_sandbox{max-width:1180px;margin:0 auto;padding:34px 18px 60px;color:#2b211f;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans SC",sans-serif}
.collection_sandbox *{box-sizing:border-box}
.collection_sandbox-hero{border:1px solid rgba(94,42,42,.22);background:linear-gradient(180deg,#fffaf6,#f5eee8);padding:28px 30px;margin-bottom:18px}
.collection_sandbox-kicker{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#8a5757;margin-bottom:8px}
.collection_sandbox-title{font-size:34px;line-height:1.16;font-weight:700;margin:0 0 10px}
.collection_sandbox-sub{font-size:14px;color:#6f5c57;line-height:1.8;margin:0}
.collection_sandbox-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
.collection_sandbox-panel{border:1px solid rgba(94,42,42,.18);background:#fffdfb;padding:18px}
.collection_sandbox-panel--wide{grid-column:1/-1}
.collection_sandbox-h2{font-size:18px;margin:0 0 14px;font-weight:700}
.collection_sandbox-note{font-size:13px;line-height:1.75;color:#6f5c57;margin:0 0 12px}
.collection_sandbox-data{font-family:"SFMono-Regular",Consolas,monospace;font-size:12px;color:#6c4b47;background:#f7f1ec;border:1px solid rgba(94,42,42,.12);padding:10px;white-space:pre-wrap}
.collection_sandbox-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.collection_sandbox-slot{border:1px solid rgba(94,42,42,.16);padding:14px;background:#fbf7f3}
.collection_sandbox-slot-title{font-weight:700;margin-bottom:10px;color:#4d2727}
.collection_sandbox-attr{display:flex;justify-content:space-between;gap:12px;border-top:1px solid rgba(94,42,42,.1);padding:8px 0;font-size:13px}
.collection_sandbox-attr:first-of-type{border-top:0}
.collection_sandbox-value{font-weight:700;color:#8f272b}
.collection_sandbox-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.collection_sandbox-summary-item{border:1px solid rgba(94,42,42,.12);background:#fbf7f3;padding:12px}
.collection_sandbox-summary-name{font-size:13px;color:#5d403c}
.collection_sandbox-summary-value{font-size:20px;font-weight:700;color:#8f272b;margin-top:4px}
.collection_sandbox-summary-formula{font-size:12px;color:#816a65;margin-top:4px}
.collection_sandbox-terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.collection_sandbox-term{border:1px solid rgba(94,42,42,.13);padding:13px;background:#fffdfb}
.collection_sandbox-term-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.collection_sandbox-quality{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:24px;border-radius:2px;font-weight:800;font-size:12px}
.collection_sandbox-quality--c{color:#388EE9;background:rgba(56,142,233,.12)}
.collection_sandbox-quality--b{color:#9a82ff;background:rgba(154,130,255,.14)}
.collection_sandbox-quality--a{color:#cfa542;background:rgba(207,165,66,.16)}
.collection_sandbox-quality--s{color:#d02e32;background:rgba(208,46,50,.18)}
.collection_sandbox-term-name{font-weight:700}
.collection_sandbox-exclusive{color:#b52429}
.collection_sandbox-term-desc{font-size:13px;line-height:1.7;color:#594844;margin:0}
.collection_sandbox-term-meta{font-size:12px;color:#806b65;margin-top:8px}
.collection_sandbox-pill{display:inline-block;border:1px solid rgba(94,42,42,.18);padding:2px 6px;margin:0 4px 4px 0;font-size:12px;background:#f8f1ed}
@media (max-width:820px){.collection_sandbox-grid,.collection_sandbox-slots,.collection_sandbox-summary,.collection_sandbox-terms{grid-template-columns:1fr}.collection_sandbox-title{font-size:26px}}
/* END STYLE_COLLECTION_SANDBOX */
/* BEGIN STYLE_COLLECTION_CARD */
.style_collection{margin-top:36px;color:inherit}
.style_collection-summary{display:block;margin:10px 0 14px}
.style_collection-summary-row{margin:0;color:inherit}
.style_collection-summary-row + .style_collection-summary-row{margin-top:0}
.style_collection-summary-value{display:flex;align-items:baseline;justify-content:flex-end;gap:7px;min-width:96px;text-align:right}
.style_collection-summary-number{font-size:14px;line-height:1.25;font-weight:400;white-space:nowrap}
.style_collection-summary-count{order:-1;font-size:12px;line-height:1.2;color:rgba(42,21,24,.46);white-space:nowrap}
.style_collection-featured,.style_collection-extra-terms{display:grid;grid-template-columns:1fr;gap:4px}
.style_collection-featured{margin-top:10px}
.style_collection-extra-terms{margin-top:10px}
.style_collection-term{border:0;background:transparent;padding:5px 0}
.style_collection-term-head{display:flex;align-items:center;gap:7px;margin-bottom:3px;min-width:0}
.style_collection-quality{display:inline-flex;align-items:center;justify-content:center;width:24px;height:20px;border-radius:2px;border:1px solid currentColor;font-size:11px;font-weight:700;flex:0 0 auto;text-shadow:0 1px 1px rgba(255,255,255,.7),0 0 2px currentColor}
.style_collection-quality--s{color:#ed4141;background:rgba(237,65,65,.07)}
.style_collection-quality--a{color:#b77a22;background:rgba(183,122,34,.075)}
.style_collection-quality--b{color:#8469bd;background:rgba(132,105,189,.075)}
.style_collection-quality--c{color:#5c93bd;background:rgba(92,147,189,.075)}
.style_collection-term-title{display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:100%;flex:1 1 auto;white-space:nowrap}
.style_collection-term-name{font-size:13px;font-weight:500;color:rgba(42,21,24,.76);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.style_collection-term-default{font-size:11px;line-height:17px;padding:0 5px;border:1px solid rgba(237,65,65,.32);color:#ed4141;white-space:nowrap}
.style_collection-term-weight{margin-left:auto;display:inline-flex;align-items:baseline;gap:4px;flex:0 0 auto;font-size:12px;font-weight:400;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.style_collection-term-weight-label{color:rgba(42,21,24,.52)}
.style_collection-term-weight-value{color:#ed4141}
.style_collection-pill{font-size:10px;border:1px solid rgba(0,0,0,.12);padding:0 5px;line-height:16px}
.style_collection-term-desc{font-size:14px;line-height:1.6}
.style_collection-toggle{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin:12px 0 0;padding:6px 0;cursor:pointer;font-size:12px;letter-spacing:0;width:max-content;max-width:100%}
.style_collection-toggle:hover,.style_collection-toggle:focus-visible{color:#ed4141}
.style_collection-toggle:focus-visible{outline:1px solid rgba(237,65,65,.45);outline-offset:3px}
.style_collection-toggle-text{white-space:nowrap}
.style_collection-toggle-icon{font-size:14px;color:#ed4141;line-height:1}
.style_collection[data-style-collection-expanded="false"] [data-style-collection-extra]{display:none}
.style_collection[data-style-collection-expanded="true"] [data-style-collection-extra]{display:block}
.style_collection-detail-wrap{margin-top:8px}
.style_collection-attr-details{margin:8px 0 12px}
.style_collection-slots{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:12px}
.style_collection-slot{display:grid;grid-template-columns:70px repeat(3,minmax(0,1fr));align-items:center;gap:8px;background:#ffffff14;border-radius:5px;padding:10px 12px}
.style_collection-slot-title{font-weight:700;font-size:12px;color:#ed4141;white-space:nowrap}
.style_collection-slot-attr{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0;font-size:12px;min-width:0}
.style_collection-slot-value{font-weight:400;white-space:nowrap}
@media (max-width:820px){.style_collection-summary-value{min-width:86px;gap:6px}.style_collection-term-head{display:grid;grid-template-columns:24px minmax(0,1fr) auto;column-gap:7px;row-gap:3px;align-items:center}.style_collection-quality{grid-column:1;grid-row:1}.style_collection-term-title{grid-column:2;grid-row:1;display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:100%;white-space:nowrap}.style_collection-term-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}.style_collection-term-weight{grid-column:3;grid-row:1;width:auto;margin-left:0;text-align:right}.style_collection-term-default{flex:0 0 auto;font-size:10px;line-height:16px;padding:0 4px}.style_collection-slot{grid-template-columns:1fr;gap:5px}.style_collection-slot-attr{justify-content:space-between}}
/* END STYLE_COLLECTION_CARD */
/* BEGIN STYLE_CARD_LEFT_SCROLL */
@media (min-width:1400px){
.ron-card .card_content_left{
max-height:calc(100dvh - 120px);
overflow-y:auto;
overflow-x:hidden;
overscroll-behavior:contain;
padding-right:8px;
scrollbar-width:none;
-ms-overflow-style:none;
}
.ron-card .card_content_left::-webkit-scrollbar{
width:0;
height:0;
display:none;
}
}
/* END STYLE_CARD_LEFT_SCROLL */
/* BEGIN ATLAS_PREVIEW_COLLECTION_TERMS */
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview{
max-height: calc(100dvh - 128px);
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
scrollbar-width: none;
-ms-overflow-style: none;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview::-webkit-scrollbar{
width: 0;
height: 0;
display: none;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_card-collection-preview-cache{
display: none;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-collection{
display: grid;
gap: 8px;
margin-top: 14px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-collection-title{
color: rgba(42, 30, 33, .68);
font-size: 12px;
font-weight: 500;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-collection-list{
display: grid;
gap: 7px;
color: rgba(39, 28, 31, .72);
font-size: 12px;
line-height: 1.45;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-term{
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
gap: 7px;
align-items: start;
min-width: 0;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-term-body{
display: grid;
gap: 2px;
min-width: 0;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-term-name{
min-width: 0;
color: rgba(34, 24, 27, .86);
font-size: 13px;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview-term-desc{
color: rgba(39, 28, 31, .66);
font-size: 12px;
line-height: 1.45;
}
/* END ATLAS_PREVIEW_COLLECTION_TERMS */
/* BEGIN ATLAS_PREVIEW_SCROLL_FIX */
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-surface{
height: auto;
min-height: calc(100dvh - var(--atlas-surface-sticky-top) + 96px);
overflow: visible;
padding-top: 78px;
padding-bottom: 64px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-shell{
height: auto;
min-height: 0;
overflow: visible;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-layout{
flex: 1 1 auto;
height: auto;
min-height: 0;
overflow: visible;
align-items: start;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) [data-atlas-preview-mode="1"] .atlas_frame-layout{
align-items: stretch;
grid-template-columns: calc(60% - 4px) minmax(0, 1fr);
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-grid--card-protos{
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) [data-atlas-preview-mode="1"] .atlas_frame-grid--card-protos{
height: 100%;
max-height: 100%;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview{
box-sizing: border-box;
min-height: 0;
height: auto;
max-height: none;
align-self: stretch;
overflow-y: visible;
overflow-x: hidden;
overscroll-behavior: contain;
scrollbar-width: none;
-ms-overflow-style: none;
padding-top: 36px;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview::-webkit-scrollbar{
width: 0;
height: 0;
display: none;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) [data-atlas-preview-mode="1"] .atlas_frame-preview{
display: block;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) [data-atlas-preview-mode="1"][data-atlas-has-selection="0"] .atlas_frame-preview{
height: auto;
min-height: 0;
}
@media (max-width: 1100px){
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-surface{
height: auto;
min-height: calc(100dvh - var(--atlas-surface-sticky-top));
overflow: visible;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-shell,
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-layout{
height: auto;
overflow: visible;
}
:is(body.page-Sandbox_图鉴筛选页框架原型, body.page-风格图鉴) .atlas_frame-preview{
height: auto;
max-height: none;
overflow: visible;
}
}
/* END ATLAS_PREVIEW_SCROLL_FIX */
/* Homepage character atlas button. */
body.page-首页 .wiki_home-character-entry,
body.page-Sandbox_首页弧形导航原型 .wiki_home-character-entry {
position: absolute;
z-index: 11;
right: clamp(28px, 7.9vw, 132px);
top: calc(50% + clamp(130px, 14vw, 224px));
width: clamp(258px, 23vw, 386px);
transform: none;
}
body.page-首页 .wiki_home-character-entry a,
body.page-Sandbox_首页弧形导航原型 .wiki_home-character-entry a {
color: inherit;
text-decoration: none;
}
body.page-首页 .wiki_home-character-link,
body.page-Sandbox_首页弧形导航原型 .wiki_home-character-link {
display: inline-grid;
grid-template-columns: 82px auto;
align-items: center;
gap: 8px;
min-height: 64px;
padding: 0;
color: rgba(255, 239, 229, 0.82);
font-family: Georgia, 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', serif;
text-shadow:
0 2px 8px rgba(54, 10, 8, 0.76),
0 0 14px rgba(231, 70, 52, 0.2);
transition:
transform 180ms ease,
color 180ms ease,
text-shadow 180ms ease,
filter 180ms ease;
}
body.page-首页 .wiki_home-character-entry:hover .wiki_home-character-link,
body.page-首页 .wiki_home-character-entry:focus-within .wiki_home-character-link,
body.page-Sandbox_首页弧形导航原型 .wiki_home-character-entry:hover .wiki_home-character-link,
body.page-Sandbox_首页弧形导航原型 .wiki_home-character-entry:focus-within .wiki_home-character-link {
transform: translateY(-1px);
color: #fff5ef;
filter: drop-shadow(0 8px 14px rgba(84, 10, 6, 0.3));
text-shadow:
0 2px 10px rgba(82, 12, 8, 0.88),
0 0 18px rgba(255, 107, 78, 0.28);
}
body.page-首页 .wiki_home-character-apple,
body.page-Sandbox_首页弧形导航原型 .wiki_home-character-apple {
position: relative;
display: block;
width: 82px;
height: 62px;
pointer-events: none;
}
body.page-首页 .wiki_home-character-apple-normal,
body.page-首页 .wiki_home-character-apple-hover,
body.page-Sandbox_首页弧形导航原型 .wiki_home-character-apple-normal,
body.page-Sandbox_首页弧形导航原型 .wiki_home-character-apple-hover {
position: absolute;
inset: 0;
display: block;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
transition:
opacity 150ms ease,
transform 180ms ease;
}
body.page-首页 .wiki_home-character-apple-normal,
body.page-Sandbox_首页弧形导航原型 .wiki_home-character-apple-normal {
background-image: url("/index.php?title=Special:Redirect/file/主页UI-角色-苹果.png");
}
body.page-首页 .wiki_home-character-apple-hover,
body.page-Sandbox_首页弧形导航原型 .wiki_home-character-apple-hover {
opacity: 0;
transform: scale(0.98);
background-image: url("/index.php?title=Special:Redirect/file/主页UI-角色-苹果-hover.png");
}
body.page-首页 .wiki_home-character-entry:hover .wiki_home-character-apple-normal,
body.page-首页 .wiki_home-character-entry:focus-within .wiki_home-character-apple-normal,
body.page-Sandbox_首页弧形导航原型 .wiki_home-character-entry:hover .wiki_home-character-apple-normal,
body.page-Sandbox_首页弧形导航原型 .wiki_home-character-entry:focus-within .wiki_home-character-apple-normal {
opacity: 0;
transform: scale(1.02);
}
body.page-首页 .wiki_home-character-entry:hover .wiki_home-character-apple-hover,
body.page-首页 .wiki_home-character-entry:focus-within .wiki_home-character-apple-hover,
body.page-Sandbox_首页弧形导航原型 .wiki_home-character-entry:hover .wiki_home-character-apple-hover,
body.page-Sandbox_首页弧形导航原型 .wiki_home-character-entry:focus-within .wiki_home-character-apple-hover {
opacity: 1;
transform: scale(1.04);
}
body.page-首页 .wiki_home-character-title,
body.page-Sandbox_首页弧形导航原型 .wiki_home-character-title {
display: block;
padding-top: 4px;
font-size: clamp(15px, 1.15vw, 20px);
font-weight: 500;
letter-spacing: 0;
line-height: 1.15;
white-space: nowrap;
}
@media (max-width: 820px) {
body.page-首页 .wiki_home-character-entry,
body.page-Sandbox_首页弧形导航原型 .wiki_home-character-entry {
right: auto;
left: 50%;
top: clamp(560px, 74vh, 690px);
width: min(258px, calc(100vw - 48px));
transform: translateX(-50%);
}
}
/* Character atlas responsive card tuning. */
.character_atlas-root .character_atlas-card {
min-height: 304px;
}
.character_atlas-root .character_atlas-card-media {
inset: 0 0 96px;
padding: 10px 8px 0;
}
.character_atlas-root .character_atlas-card-portrait {
padding: 8px 8px 0;
}
.character_atlas-root .character_atlas-card-portrait img {
max-width: 132% !important;
max-height: 238px !important;
transform: scale(1.08);
transform-origin: center bottom;
}
.character_atlas-root .character_atlas-card-hover {
gap: 12px;
padding: 38px 16px 17px;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none;
}
.character_atlas-root .character_atlas-card-hover::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
.character_atlas-root .character_atlas-card-facts {
gap: 8px 12px;
}
.character_atlas-root .character_atlas-card-fact-label,
.character_atlas-root .character_atlas-card-gifts-label {
font-size: 12px;
line-height: 1.16;
}
.character_atlas-root .character_atlas-card-fact-value {
margin-top: 3px;
font-size: 14px;
line-height: 1.28;
}
.character_atlas-root .character_atlas-card-gift {
font-size: 13px;
line-height: 1.2;
}
@media (max-width: 1180px) {
.character_atlas-root .character_atlas-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.character_atlas-root .character_atlas-card {
min-height: 296px;
}
.character_atlas-root .character_atlas-card-portrait img {
max-height: 228px !important;
}
}
@media (max-width: 760px) {
.character_atlas-root .character_atlas-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.character_atlas-root .character_atlas-card {
min-height: 276px;
}
.character_atlas-root .character_atlas-card-media {
inset: 0 0 102px;
padding: 8px 5px 0;
}
.character_atlas-root .character_atlas-card-portrait {
padding: 6px 4px 0;
}
.character_atlas-root .character_atlas-card-portrait img {
max-width: 144% !important;
max-height: 186px !important;
transform: scale(1.1);
}
.character_atlas-root .character_atlas-card-hover {
gap: 9px;
padding: 30px 10px 13px;
}
.character_atlas-root .character_atlas-card-facts {
grid-template-columns: 1fr;
gap: 6px;
}
.character_atlas-root .character_atlas-card-fact-label,
.character_atlas-root .character_atlas-card-gifts-label {
font-size: 11.5px;
}
.character_atlas-root .character_atlas-card-fact-value {
font-size: 13px;
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.character_atlas-root .character_atlas-card-gift {
font-size: 12.5px;
max-width: 100%;
}
}
@media (max-width: 460px) {
.character_atlas-root .character_atlas-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.character_atlas-root .character_atlas-card {
min-height: 252px;
}
.character_atlas-root .character_atlas-card-media {
inset: 0 0 96px;
}
.character_atlas-root .character_atlas-card-portrait img {
max-width: 152% !important;
max-height: 164px !important;
}
.character_atlas-root .character_atlas-card-body {
min-height: 104px;
padding: 10px;
}
.character_atlas-root .character_atlas-card-name {
font-size: 17px;
}
.character_atlas-root .character_atlas-card-kicker,
.character_atlas-root .character_atlas-card-meta {
font-size: 11px;
}
.character_atlas-root .character_atlas-card-count,
.character_atlas-root .character_atlas-card-link a {
font-size: 11px;
}
.character_atlas-root .character_atlas-card-hover {
padding: 26px 9px 12px;
}
}
@media (hover: none), (pointer: coarse) {
.character_atlas-root .character_atlas-card:active .character_atlas-card-portrait,
.character_atlas-root .character_atlas-card:focus-visible .character_atlas-card-portrait {
opacity: .06;
transform: translate3d(0, 6px, 0);
}
.character_atlas-root .character_atlas-card:active .character_atlas-card-hover,
.character_atlas-root .character_atlas-card:focus-visible .character_atlas-card-hover {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
/* Character atlas bust and hover readability. */
.character_atlas-root .character_atlas-card-portrait {
transform: translate3d(0, 12px, 0);
}
.character_atlas-root .character_atlas-card:hover .character_atlas-card-portrait,
.character_atlas-root .character_atlas-card:focus-visible .character_atlas-card-portrait {
transform: translate3d(0, 18px, 0);
}
@media (hover: none), (pointer: coarse) {
.character_atlas-root .character_atlas-card:active .character_atlas-card-portrait,
.character_atlas-root .character_atlas-card:focus-visible .character_atlas-card-portrait {
transform: translate3d(0, 18px, 0);
}
}
.character_atlas-root .character_atlas-card-body {
min-height: 104px;
}
.character_atlas-root .character_atlas-card-kicker,
.character_atlas-root .character_atlas-card-meta {
overflow: visible;
text-overflow: clip;
white-space: normal;
line-height: 1.25;
}
.character_atlas-root .character_atlas-card-hover {
max-height: 100%;
pointer-events: none;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.character_atlas-root .character_atlas-card:hover .character_atlas-card-hover,
.character_atlas-root .character_atlas-card:focus-visible .character_atlas-card-hover {
pointer-events: auto;
}
.character_atlas-root .character_atlas-card-fact-value {
overflow: visible;
text-overflow: clip;
white-space: normal;
overflow-wrap: anywhere;
}
.character_atlas-root .character_atlas-card-gift {
overflow: visible;
text-overflow: clip;
white-space: normal;
overflow-wrap: anywhere;
}
@media (max-width: 760px) {
.character_atlas-root .character_atlas-card-hover {
padding-top: 22px;
padding-bottom: 10px;
}
.character_atlas-root .character_atlas-card-fact-value {
display: block;
-webkit-line-clamp: unset;
-webkit-box-orient: initial;
}
}
@media (max-width: 460px) {
.character_atlas-root .character_atlas-card-body {
min-height: 108px;
}
.character_atlas-root .character_atlas-card-hover {
padding: 20px 8px 10px;
}
.character_atlas-root .character_atlas-card-fact-label,
.character_atlas-root .character_atlas-card-gifts-label {
font-size: 11px;
}
.character_atlas-root .character_atlas-card-fact-value,
.character_atlas-root .character_atlas-card-gift {
font-size: 12px;
line-height: 1.25;
}
}
@media (hover: none), (pointer: coarse) {
.character_atlas-root .character_atlas-card:active .character_atlas-card-hover,
.character_atlas-root .character_atlas-card:focus-visible .character_atlas-card-hover {
pointer-events: auto;
}
}
/* Character atlas bust transparent-edge compensation. */
.character_atlas-root .character_atlas-card-portrait {
transform: translate3d(0, 0, 0);
}
.character_atlas-root .character_atlas-card-portrait img {
margin-bottom: -12px;
}
.character_atlas-root .character_atlas-card:hover .character_atlas-card-portrait,
.character_atlas-root .character_atlas-card:focus-visible .character_atlas-card-portrait {
transform: translate3d(0, 6px, 0);
}
@media (hover: none), (pointer: coarse) {
.character_atlas-root .character_atlas-card:active .character_atlas-card-portrait,
.character_atlas-root .character_atlas-card:focus-visible .character_atlas-card-portrait {
transform: translate3d(0, 6px, 0);
}
}
.character_atlas-root .character_atlas-card-kicker {
font-size: 13px;
}
.character_atlas-root .character_atlas-card-meta {
font-size: 13px;
}
@media (max-width: 460px) {
.character_atlas-root .character_atlas-card-kicker,
.character_atlas-root .character_atlas-card-meta {
font-size: 12px;
}
}
/* Homepage license notice line. */
body.page-首页 .wiki_home-license-notice,
body.page-Sandbox_首页弧形导航原型 .wiki_home-license-notice {
display: inline-block;
width: fit-content;
max-width: 100%;
margin-bottom: 3px;
padding-bottom: 2px;
border-bottom: 1px solid rgba(255, 195, 210, 0.62);
color: rgba(255, 232, 236, 0.78);
}
/* BEGIN TEAM_SIMULATOR_SANDBOX */
/* Team simulator sandbox prototype. Scoped to Sandbox/配队模拟器原型. */
body.page-Sandbox_配队模拟器原型 .citizen-page-header,
body.page-Sandbox_配队模拟器原型 #citizen-page-header-sticky-sentinel,
body.page-Sandbox_配队模拟器原型 #contentSub,
body.page-Sandbox_配队模拟器原型 .citizen-page-footer,
body.page-Sandbox_配队模拟器原型 .citizen-footer,
body.page-Sandbox_配队模拟器原型 .mw-footer,
body.page-Sandbox_配队模拟器原型 .catlinks,
body.page-Sandbox_配队模拟器原型 .printfooter {
display: none !important;
}
html:has(body.page-Sandbox_配队模拟器原型),
body.page-Sandbox_配队模拟器原型,
body.page-Sandbox_配队模拟器原型 .citizen-page-container,
body.page-Sandbox_配队模拟器原型 .mw-body,
body.page-Sandbox_配队模拟器原型 .citizen-body-container,
body.page-Sandbox_配队模拟器原型 .citizen-body,
body.page-Sandbox_配队模拟器原型 #mw-content-text,
body.page-Sandbox_配队模拟器原型 .mw-parser-output,
body.page-Sandbox_配队模拟器原型 .citizen-section {
background: #f4eee6 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
body.page-Sandbox_配队模拟器原型 .citizen-sticky-header,
body.page-Sandbox_配队模拟器原型 .citizen-sticky-header-background {
background: rgba(244, 238, 230, 0.92) !important;
backdrop-filter: blur(14px);
}
body.page-Sandbox_配队模拟器原型 .mw-parser-output > .citizen-section:first-child > p:first-child,
body.page-Sandbox_配队模拟器原型 .mw-parser-output > p:first-child {
display: none !important;
}
body.page-Sandbox_配队模拟器原型 .team_sim,
body.page-Sandbox_配队模拟器原型 .team_sim * {
box-sizing: border-box;
}
body.page-Sandbox_配队模拟器原型 .team_sim {
--paper: #f4eee6;
--paper-2: #fffaf3;
--paper-3: #ebe1d6;
--ink: #261d1b;
--muted: #725f58;
--soft: #a39186;
--rule: rgba(93, 45, 42, 0.18);
--rule-strong: rgba(118, 39, 39, 0.32);
--red: #9f2f32;
--red-dark: #702024;
--gold: #b58a43;
--teal: #3c7f7b;
color: var(--ink);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Microsoft YaHei", sans-serif;
min-height: 100dvh;
margin: 0 calc(50% - 50vw);
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 16% 8%, rgba(173, 65, 61, 0.12), transparent 26vw),
radial-gradient(circle at 86% 14%, rgba(181, 138, 67, 0.16), transparent 24vw),
linear-gradient(180deg, #fbf6ef 0%, #f3eadf 48%, #ede2d7 100%);
}
body.page-Sandbox_配队模拟器原型 .team_sim::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background:
linear-gradient(90deg, rgba(101, 43, 38, 0.06) 1px, transparent 1px),
linear-gradient(180deg, rgba(101, 43, 38, 0.045) 1px, transparent 1px);
background-size: 92px 92px;
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.62), transparent 72%);
}
body.page-Sandbox_配队模拟器原型 .team_sim-noise {
position: fixed;
inset: 0;
pointer-events: none;
opacity: 0.38;
background-image:
radial-gradient(rgba(73, 49, 42, 0.16) 0.7px, transparent 0.7px),
radial-gradient(rgba(255, 255, 255, 0.58) 0.7px, transparent 0.7px);
background-position: 0 0, 12px 12px;
background-size: 24px 24px;
}
body.page-Sandbox_配队模拟器原型 .team_sim-shell {
width: min(1880px, 100vw);
min-height: 100dvh;
margin: 0 auto;
padding: clamp(24px, 3vw, 52px) clamp(18px, 3.2vw, 64px) clamp(28px, 4vw, 72px);
position: relative;
}
body.page-Sandbox_配队模拟器原型 .team_sim-header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: clamp(18px, 3vw, 46px);
align-items: end;
margin-bottom: clamp(18px, 2vw, 30px);
}
body.page-Sandbox_配队模拟器原型 .team_sim-kicker,
body.page-Sandbox_配队模拟器原型 .team_sim-board-head span,
body.page-Sandbox_配队模拟器原型 .team_sim-output-head span,
body.page-Sandbox_配队模拟器原型 .team_sim-atlas-head span {
display: block;
color: var(--red);
font-size: 11px;
letter-spacing: 0.18em;
line-height: 1.2;
text-transform: uppercase;
margin-bottom: 8px;
}
body.page-Sandbox_配队模拟器原型 .team_sim-header h1 {
margin: 0;
font-size: clamp(42px, 5.6vw, 96px);
line-height: 0.92;
font-weight: 780;
letter-spacing: 0;
color: var(--ink);
}
body.page-Sandbox_配队模拟器原型 .team_sim-header p {
margin: 14px 0 0;
max-width: 720px;
color: #5f504b;
font-size: clamp(14px, 1.05vw, 17px);
line-height: 1.75;
}
body.page-Sandbox_配队模拟器原型 .team_sim-actions {
min-width: min(520px, 100%);
display: grid;
grid-template-columns: minmax(180px, 1fr) auto auto;
gap: 10px;
align-items: stretch;
}
body.page-Sandbox_配队模拟器原型 .team_sim-field,
body.page-Sandbox_配队模拟器原型 .team_sim-chip,
body.page-Sandbox_配队模拟器原型 .team_sim-board-tools div,
body.page-Sandbox_配队模拟器原型 .team_sim-filters span {
min-height: 42px;
border: 1px solid var(--rule);
background: rgba(255, 250, 243, 0.78);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 13px;
color: #453733;
font-size: 13px;
line-height: 1.2;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.84);
}
body.page-Sandbox_配队模拟器原型 .team_sim-field {
justify-content: space-between;
}
body.page-Sandbox_配队模拟器原型 .team_sim-field span {
color: var(--soft);
font-size: 12px;
}
body.page-Sandbox_配队模拟器原型 .team_sim-field strong {
color: var(--ink);
font-weight: 650;
}
body.page-Sandbox_配队模拟器原型 .team_sim-chip,
body.page-Sandbox_配队模拟器原型 .team_sim-board-tools div,
body.page-Sandbox_配队模拟器原型 .team_sim-filters span {
cursor: default;
user-select: none;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
body.page-Sandbox_配队模拟器原型 .team_sim-chip:active,
body.page-Sandbox_配队模拟器原型 .team_sim-board-tools div:active,
body.page-Sandbox_配队模拟器原型 .team_sim-filters span:active {
transform: translateY(1px);
}
body.page-Sandbox_配队模拟器原型 .team_sim-chip--active {
color: #fff8f0;
background: linear-gradient(180deg, #9f2f32, #7b2427);
border-color: rgba(91, 22, 26, 0.6);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.18);
}
body.page-Sandbox_配队模拟器原型 .team_sim-layout {
display: grid;
grid-template-columns: minmax(250px, 0.78fr) minmax(620px, 2.1fr) minmax(280px, 0.9fr);
gap: clamp(14px, 1.4vw, 22px);
align-items: start;
}
body.page-Sandbox_配队模拟器原型 .team_sim-panel,
body.page-Sandbox_配队模拟器原型 .team_sim-board,
body.page-Sandbox_配队模拟器原型 .team_sim-output-card,
body.page-Sandbox_配队模拟器原型 .team_sim-atlas {
border: 1px solid var(--rule);
background:
linear-gradient(180deg, rgba(255, 252, 247, 0.88), rgba(250, 244, 236, 0.82));
box-shadow:
0 18px 48px rgba(78, 43, 34, 0.08),
inset 0 1px rgba(255, 255, 255, 0.9);
}
body.page-Sandbox_配队模拟器原型 .team_sim-panel {
padding: 18px;
}
body.page-Sandbox_配队模拟器原型 .team_sim-analysis,
body.page-Sandbox_配队模拟器原型 .team_sim-editor {
position: sticky;
top: 68px;
}
body.page-Sandbox_配队模拟器原型 .team_sim-panel-head,
body.page-Sandbox_配队模拟器原型 .team_sim-board-head,
body.page-Sandbox_配队模拟器原型 .team_sim-output-head,
body.page-Sandbox_配队模拟器原型 .team_sim-atlas-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
body.page-Sandbox_配队模拟器原型 .team_sim-panel-head {
padding-bottom: 13px;
margin-bottom: 14px;
border-bottom: 1px solid var(--rule);
color: var(--ink);
font-size: 18px;
font-weight: 720;
}
body.page-Sandbox_配队模拟器原型 .team_sim-panel-head em {
color: var(--red);
font-size: 11px;
font-style: normal;
letter-spacing: 0.14em;
}
body.page-Sandbox_配队模拟器原型 .team_sim-meter {
margin-bottom: 16px;
}
body.page-Sandbox_配队模拟器原型 .team_sim-meter-label {
display: flex;
justify-content: space-between;
gap: 14px;
color: var(--muted);
font-size: 13px;
margin-bottom: 7px;
}
body.page-Sandbox_配队模拟器原型 .team_sim-meter-label b {
color: var(--red-dark);
font-weight: 720;
}
body.page-Sandbox_配队模拟器原型 .team_sim-meter-bar {
height: 7px;
background: #e5d8ca;
border: 1px solid rgba(93, 45, 42, 0.11);
overflow: hidden;
}
body.page-Sandbox_配队模拟器原型 .team_sim-meter-bar i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--red), var(--gold));
}
body.page-Sandbox_配队模拟器原型 .team_sim-analysis-list {
border-top: 1px solid var(--rule);
}
body.page-Sandbox_配队模拟器原型 .team_sim-analysis-list div {
display: grid;
grid-template-columns: 82px minmax(0, 1fr);
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid rgba(93, 45, 42, 0.12);
font-size: 13px;
line-height: 1.45;
}
body.page-Sandbox_配队模拟器原型 .team_sim-analysis-list span,
body.page-Sandbox_配队模拟器原型 .team_sim-alert span,
body.page-Sandbox_配队模拟器原型 .team_sim-reconstruct > span,
body.page-Sandbox_配队模拟器原型 .team_sim-note span {
color: var(--soft);
}
body.page-Sandbox_配队模拟器原型 .team_sim-analysis-list strong {
color: #332723;
font-weight: 650;
}
body.page-Sandbox_配队模拟器原型 .team_sim-alert {
margin-top: 14px;
padding: 14px;
border: 1px solid rgba(159, 47, 50, 0.18);
background: rgba(159, 47, 50, 0.055);
}
body.page-Sandbox_配队模拟器原型 .team_sim-alert p {
margin: 8px 0 0;
color: #59443e;
font-size: 13px;
line-height: 1.7;
}
body.page-Sandbox_配队模拟器原型 .team_sim-board {
min-height: 650px;
padding: clamp(18px, 2vw, 28px);
}
body.page-Sandbox_配队模拟器原型 .team_sim-board h2,
body.page-Sandbox_配队模拟器原型 .team_sim-output-head h2,
body.page-Sandbox_配队模拟器原型 .team_sim-atlas-head h2 {
margin: 0;
font-size: clamp(24px, 2vw, 34px);
line-height: 1.1;
font-weight: 760;
letter-spacing: 0;
}
body.page-Sandbox_配队模拟器原型 .team_sim-board-tools,
body.page-Sandbox_配队模拟器原型 .team_sim-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-end;
}
body.page-Sandbox_配队模拟器原型 .team_sim-front-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(10px, 1.1vw, 16px);
margin-top: 24px;
}
body.page-Sandbox_配队模拟器原型 .team_sim-slot {
min-height: 430px;
display: grid;
grid-template-rows: auto minmax(180px, 1fr) auto;
border: 1px solid rgba(81, 49, 43, 0.18);
background: linear-gradient(180deg, #fffaf3, #f2e8dd);
position: relative;
overflow: hidden;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.92);
}
body.page-Sandbox_配队模拟器原型 .team_sim-slot--lead {
border-color: rgba(159, 47, 50, 0.38);
}
body.page-Sandbox_配队模拟器原型 .team_sim-slot--drop {
border-color: rgba(60, 127, 123, 0.55);
background:
linear-gradient(180deg, rgba(255, 250, 243, 0.78), rgba(236, 244, 241, 0.86)),
repeating-linear-gradient(135deg, rgba(60, 127, 123, 0.12) 0 1px, transparent 1px 12px);
}
body.page-Sandbox_配队模拟器原型 .team_sim-slot-top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 12px 12px 10px;
border-bottom: 1px solid rgba(81, 49, 43, 0.13);
color: #473834;
font-size: 12px;
}
body.page-Sandbox_配队模拟器原型 .team_sim-slot-top b {
color: var(--red);
font-weight: 740;
}
body.page-Sandbox_配队模拟器原型 .team_sim-card-art,
body.page-Sandbox_配队模拟器原型 .team_sim-thumb,
body.page-Sandbox_配队模拟器原型 .team_sim-support-art {
background:
radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.74), transparent 20%),
linear-gradient(135deg, rgba(56, 45, 43, 0.12), rgba(159, 47, 50, 0.25)),
linear-gradient(180deg, #c9b6ab, #735654);
position: relative;
overflow: hidden;
}
body.page-Sandbox_配队模拟器原型 .team_sim-card-art::before,
body.page-Sandbox_配队模拟器原型 .team_sim-thumb::before,
body.page-Sandbox_配队模拟器原型 .team_sim-support-art::before {
content: "";
position: absolute;
width: 56%;
height: 92%;
left: 22%;
bottom: -12%;
border-radius: 48% 48% 16% 16%;
background:
radial-gradient(circle at 52% 14%, #f2d7c8 0 12%, transparent 13%),
linear-gradient(90deg, transparent 0 20%, rgba(67, 46, 47, 0.88) 21% 38%, rgba(229, 208, 196, 0.88) 39% 57%, rgba(75, 49, 54, 0.9) 58% 78%, transparent 79%),
linear-gradient(180deg, #654044, #2f2729);
}
body.page-Sandbox_配队模拟器原型 .team_sim-card-art::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 46%;
background: linear-gradient(180deg, transparent, rgba(47, 31, 29, 0.34));
}
body.page-Sandbox_配队模拟器原型 .team_sim-card-art--ash {
background:
radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.72), transparent 20%),
linear-gradient(135deg, rgba(85, 86, 88, 0.18), rgba(112, 126, 130, 0.34)),
linear-gradient(180deg, #d8d2c9, #7d7b78);
}
body.page-Sandbox_配队模拟器原型 .team_sim-card-art--rose {
background:
radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.72), transparent 20%),
linear-gradient(135deg, rgba(159, 47, 50, 0.18), rgba(181, 138, 67, 0.28)),
linear-gradient(180deg, #e8c8b9, #8d4f4c);
}
body.page-Sandbox_配队模拟器原型 .team_sim-card-body {
padding: 14px;
background: linear-gradient(180deg, rgba(255, 250, 243, 0.68), rgba(255, 250, 243, 0.96));
position: relative;
}
body.page-Sandbox_配队模拟器原型 .team_sim-card-body h3,
body.page-Sandbox_配队模拟器原型 .team_sim-support h3 {
margin: 0;
color: var(--ink);
font-size: clamp(17px, 1.2vw, 21px);
line-height: 1.25;
font-weight: 740;
}
body.page-Sandbox_配队模拟器原型 .team_sim-card-body p,
body.page-Sandbox_配队模拟器原型 .team_sim-support p,
body.page-Sandbox_配队模拟器原型 .team_sim-editor-title p {
margin: 6px 0 0;
color: var(--muted);
font-size: 13px;
line-height: 1.45;
}
body.page-Sandbox_配队模拟器原型 .team_sim-buildline {
display: grid;
gap: 6px;
margin-top: 12px;
color: var(--red-dark);
font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
font-size: 12px;
font-weight: 700;
}
body.page-Sandbox_配队模拟器原型 .team_sim-terms {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 11px;
}
body.page-Sandbox_配队模拟器原型 .team_sim-terms span {
border: 1px solid rgba(159, 47, 50, 0.18);
background: rgba(159, 47, 50, 0.065);
color: #723034;
padding: 4px 7px;
font-size: 12px;
line-height: 1.1;
}
body.page-Sandbox_配队模拟器原型 .team_sim-empty {
min-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 9px;
padding: 24px;
color: var(--teal);
text-align: center;
}
body.page-Sandbox_配队模拟器原型 .team_sim-empty strong {
font-size: 22px;
font-weight: 740;
}
body.page-Sandbox_配队模拟器原型 .team_sim-empty span {
color: #5f746f;
font-size: 13px;
line-height: 1.5;
}
body.page-Sandbox_配队模拟器原型 .team_sim-support-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(10px, 1.1vw, 16px);
margin-top: 16px;
}
body.page-Sandbox_配队模拟器原型 .team_sim-support {
min-height: 128px;
display: grid;
grid-template-columns: 112px minmax(0, 1fr);
gap: 14px;
align-items: center;
border: 1px solid rgba(81, 49, 43, 0.17);
background: rgba(255, 250, 243, 0.74);
padding: 12px;
}
body.page-Sandbox_配队模拟器原型 .team_sim-support-art {
height: 100%;
min-height: 98px;
}
body.page-Sandbox_配队模拟器原型 .team_sim-support-art--blue {
background:
radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.72), transparent 20%),
linear-gradient(135deg, rgba(60, 127, 123, 0.22), rgba(86, 101, 137, 0.32)),
linear-gradient(180deg, #c4d1cf, #52606f);
}
body.page-Sandbox_配队模拟器原型 .team_sim-support span {
display: block;
color: var(--red);
font-size: 12px;
margin-bottom: 7px;
}
body.page-Sandbox_配队模拟器原型 .team_sim-support--empty {
background:
repeating-linear-gradient(135deg, rgba(60, 127, 123, 0.08) 0 1px, transparent 1px 11px),
rgba(255, 250, 243, 0.6);
}
body.page-Sandbox_配队模拟器原型 .team_sim-editor-title {
margin-bottom: 15px;
}
body.page-Sandbox_配队模拟器原型 .team_sim-editor-title h2 {
margin: 0;
font-size: 28px;
line-height: 1.1;
}
body.page-Sandbox_配队模拟器原型 .team_sim-level-control {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 16px;
border: 1px solid var(--rule);
background: rgba(255, 250, 243, 0.7);
margin-bottom: 12px;
}
body.page-Sandbox_配队模拟器原型 .team_sim-level-control span {
color: var(--soft);
}
body.page-Sandbox_配队模拟器原型 .team_sim-level-control strong {
color: var(--red-dark);
font-size: 38px;
line-height: 0.9;
font-weight: 760;
}
body.page-Sandbox_配队模拟器原型 .team_sim-skill-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-bottom: 16px;
}
body.page-Sandbox_配队模拟器原型 .team_sim-skill-grid div {
min-height: 82px;
border: 1px solid var(--rule);
background: rgba(255, 250, 243, 0.62);
padding: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
body.page-Sandbox_配队模拟器原型 .team_sim-skill-grid span {
color: var(--soft);
font-size: 12px;
}
body.page-Sandbox_配队模拟器原型 .team_sim-skill-grid b {
color: var(--red-dark);
font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
font-size: 28px;
line-height: 1;
}
body.page-Sandbox_配队模拟器原型 .team_sim-reconstruct {
display: grid;
gap: 8px;
}
body.page-Sandbox_配队模拟器原型 .team_sim-reconstruct div {
border-left: 2px solid rgba(159, 47, 50, 0.42);
background: rgba(255, 250, 243, 0.72);
padding: 10px 12px;
color: #43332f;
font-size: 13px;
}
body.page-Sandbox_配队模拟器原型 .team_sim-note {
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--rule);
}
body.page-Sandbox_配队模拟器原型 .team_sim-note p {
color: var(--muted);
font-size: 13px;
line-height: 1.75;
margin: 8px 0 0;
}
body.page-Sandbox_配队模拟器原型 .team_sim-output {
display: grid;
grid-template-columns: minmax(240px, 0.55fr) minmax(0, 1.45fr);
gap: clamp(14px, 1.4vw, 22px);
align-items: stretch;
margin-top: clamp(16px, 1.6vw, 24px);
}
body.page-Sandbox_配队模拟器原型 .team_sim-output-head {
align-content: start;
padding: 18px 0;
}
body.page-Sandbox_配队模拟器原型 .team_sim-output-head p {
max-width: 360px;
margin: 14px 0 0;
color: var(--muted);
font-size: 14px;
line-height: 1.75;
}
body.page-Sandbox_配队模拟器原型 .team_sim-output-card {
padding: 18px;
background:
linear-gradient(135deg, rgba(255, 250, 243, 0.95), rgba(237, 225, 214, 0.88)),
linear-gradient(90deg, transparent, rgba(159, 47, 50, 0.06));
}
body.page-Sandbox_配队模拟器原型 .team_sim-output-title {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: end;
border-bottom: 1px solid var(--rule-strong);
padding-bottom: 12px;
margin-bottom: 12px;
}
body.page-Sandbox_配队模拟器原型 .team_sim-output-title h3 {
margin: 0;
font-size: 26px;
line-height: 1.1;
}
body.page-Sandbox_配队模拟器原型 .team_sim-output-title span {
color: var(--red-dark);
font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
font-size: 12px;
white-space: nowrap;
}
body.page-Sandbox_配队模拟器原型 .team_sim-output-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
body.page-Sandbox_配队模拟器原型 .team_sim-output-grid div {
min-height: 78px;
border: 1px solid rgba(81, 49, 43, 0.12);
background: rgba(255, 252, 248, 0.66);
padding: 10px;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 3px 9px;
align-content: start;
}
body.page-Sandbox_配队模拟器原型 .team_sim-output-grid b {
grid-row: span 2;
color: var(--red);
font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
font-size: 15px;
line-height: 1.3;
}
body.page-Sandbox_配队模拟器原型 .team_sim-output-grid strong {
color: var(--ink);
font-size: 14px;
line-height: 1.3;
}
body.page-Sandbox_配队模拟器原型 .team_sim-output-grid span {
color: var(--muted);
font-size: 12px;
line-height: 1.45;
}
body.page-Sandbox_配队模拟器原型 .team_sim-atlas {
margin-top: clamp(16px, 1.6vw, 24px);
padding: 18px;
}
body.page-Sandbox_配队模拟器原型 .team_sim-atlas-row {
display: grid;
grid-template-columns: repeat(6, minmax(150px, 1fr));
gap: 10px;
margin-top: 14px;
}
body.page-Sandbox_配队模拟器原型 .team_sim-atlas-card {
min-height: 176px;
border: 1px solid rgba(81, 49, 43, 0.14);
background: rgba(255, 250, 243, 0.68);
padding: 9px;
position: relative;
}
body.page-Sandbox_配队模拟器原型 .team_sim-atlas-card--drag {
transform: translateY(-10px);
border-color: rgba(60, 127, 123, 0.5);
box-shadow: 0 16px 30px rgba(60, 87, 84, 0.13);
}
body.page-Sandbox_配队模拟器原型 .team_sim-thumb {
height: 98px;
margin-bottom: 9px;
}
body.page-Sandbox_配队模拟器原型 .team_sim-thumb--gold {
background: linear-gradient(135deg, rgba(181, 138, 67, 0.36), rgba(115, 90, 62, 0.22)), #dac9ad;
}
body.page-Sandbox_配队模拟器原型 .team_sim-thumb--red {
background: linear-gradient(135deg, rgba(159, 47, 50, 0.34), rgba(70, 38, 38, 0.18)), #d2aaa2;
}
body.page-Sandbox_配队模拟器原型 .team_sim-thumb--pale {
background: linear-gradient(135deg, rgba(121, 128, 132, 0.32), rgba(255, 250, 243, 0.24)), #d7d3ca;
}
body.page-Sandbox_配队模拟器原型 .team_sim-thumb--green {
background: linear-gradient(135deg, rgba(60, 127, 123, 0.3), rgba(181, 138, 67, 0.18)), #c7d4cd;
}
body.page-Sandbox_配队模拟器原型 .team_sim-thumb--gray {
background: linear-gradient(135deg, rgba(86, 80, 80, 0.3), rgba(159, 47, 50, 0.12)), #c7c0b8;
}
body.page-Sandbox_配队模拟器原型 .team_sim-atlas-card strong {
display: block;
color: var(--ink);
font-size: 14px;
line-height: 1.25;
}
body.page-Sandbox_配队模拟器原型 .team_sim-atlas-card span {
display: block;
color: var(--muted);
font-size: 12px;
line-height: 1.45;
margin-top: 4px;
}
@media (max-width: 1380px) {
body.page-Sandbox_配队模拟器原型 .team_sim-layout {
grid-template-columns: minmax(0, 1fr) minmax(300px, 0.48fr);
}
body.page-Sandbox_配队模拟器原型 .team_sim-analysis {
grid-column: 1 / -1;
position: static;
}
body.page-Sandbox_配队模拟器原型 .team_sim-panel--analysis {
display: grid;
grid-template-columns: minmax(190px, 0.35fr) minmax(0, 0.65fr) minmax(220px, 0.35fr);
gap: 16px;
align-items: start;
}
body.page-Sandbox_配队模拟器原型 .team_sim-panel--analysis .team_sim-panel-head {
grid-column: 1 / -1;
margin-bottom: 0;
}
body.page-Sandbox_配队模拟器原型 .team_sim-front-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.page-Sandbox_配队模拟器原型 .team_sim-slot {
min-height: 380px;
}
body.page-Sandbox_配队模拟器原型 .team_sim-atlas-row {
grid-template-columns: repeat(3, minmax(160px, 1fr));
}
}
@media (max-width: 980px) {
body.page-Sandbox_配队模拟器原型 .team_sim {
overflow: visible;
}
body.page-Sandbox_配队模拟器原型 .team_sim-shell {
padding: 22px 14px 36px;
}
body.page-Sandbox_配队模拟器原型 .team_sim-header,
body.page-Sandbox_配队模拟器原型 .team_sim-layout,
body.page-Sandbox_配队模拟器原型 .team_sim-output {
grid-template-columns: 1fr;
}
body.page-Sandbox_配队模拟器原型 .team_sim-actions {
min-width: 0;
grid-template-columns: 1fr;
}
body.page-Sandbox_配队模拟器原型 .team_sim-analysis,
body.page-Sandbox_配队模拟器原型 .team_sim-editor {
position: static;
}
body.page-Sandbox_配队模拟器原型 .team_sim-panel--analysis {
display: block;
}
body.page-Sandbox_配队模拟器原型 .team_sim-front-grid,
body.page-Sandbox_配队模拟器原型 .team_sim-support-row,
body.page-Sandbox_配队模拟器原型 .team_sim-output-grid,
body.page-Sandbox_配队模拟器原型 .team_sim-atlas-row {
grid-template-columns: 1fr;
}
body.page-Sandbox_配队模拟器原型 .team_sim-slot {
min-height: 340px;
}
body.page-Sandbox_配队模拟器原型 .team_sim-output-title {
align-items: start;
flex-direction: column;
}
body.page-Sandbox_配队模拟器原型 .team_sim-output-title span {
white-space: normal;
}
}
/* END TEAM_SIMULATOR_SANDBOX */