模板:裏番/styles.css
出自幻跡百科
更多操作
< 模板:裏番
/*
* BenWiki 裏番專用樣式
*
* 排版骨架（grid/flex/間距/互動狀態）位於 模板:UI/styles.css，本檔案
* 只負責裏番領域專屬的東西。
*
* 配色原則（決策 B）：
* - 背景／邊框／一般文字一律用 Citizen semantic token（跟通用層一致），
* 會自動跟著明暗切換，不另外處理。
* - 只有真正的「品牌強調色」（分類徽章、EPISODE 標籤、角色定位、
* 關聯分類裝飾邊條／漸層）才用字面色碼，並且分別寫深色版與淺色版：
* 預設（無 class 前綴）＝淺色版；`.skin-theme-clientpref-night` 前綴
* ＝深色版（沿用參考版型原始數值）；`.skin-theme-clientpref-os` 搭配
* `prefers-color-scheme: dark` media query，涵蓋「跟隨系統」剛好系統
* 是深色的情況。
* - 封面裝飾層（漸層／圓環）是疊在照片「上面」的裝飾，不是疊在頁面
* 背景上，跟明暗主題無關，維持單一版本、不用雙主題處理。
* - 分頁按鈕（話數選擇器／章節分頁）只調整外觀「形狀」（容器外框、
* 圓角、排列方式），顏色沿用通用層既有定義，不在此檔案另外覆寫。
*
* TemplateStyles 限制：不宣告 custom properties；border-color 一律拆成
* 四個 longhand；標題文字一律用 div（不用 h1-h6，詳見
* 模板:UI/styles.css 開頭註解）；font-weight 只能用標準值（100 的倍數／
* normal／bold，不能用像 750 這種非標準值）。
*
* 模板說明：模板:裏番
*/
/* ==========================================================
* Hero 標題列（大標題＋分類徽章），在 Hero 卡片外面、上方
* ========================================================== */
.benwiki-work-heading {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem;
margin: 0 0 1.25rem;
}
.benwiki-work-heading__title {
flex: 1 1 auto;
min-width: 0;
color: var(--color-emphasized);
font-size: clamp( 1.5rem, 4vw, 2.6rem );
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.25;
overflow-wrap: anywhere;
}
.benwiki-work__classification {
display: inline-flex;
flex: 0 0 auto;
margin-bottom: 0.35rem;
padding: 0.35rem 0.85rem;
border-width: 1px;
border-style: solid;
border-radius: 999px;
font-size: 0.68rem;
font-weight: 700;
/* 淺色版（預設） */
border-top-color: rgba(15, 122, 88, 0.3);
border-right-color: rgba(15, 122, 88, 0.3);
border-bottom-color: rgba(15, 122, 88, 0.3);
border-left-color: rgba(15, 122, 88, 0.3);
color: #0f7a58;
background-color: rgba(15, 122, 88, 0.08);
}
.skin-theme-clientpref-night .benwiki-work__classification {
border-top-color: rgba(107, 219, 173, 0.3);
border-right-color: rgba(107, 219, 173, 0.3);
border-bottom-color: rgba(107, 219, 173, 0.3);
border-left-color: rgba(107, 219, 173, 0.3);
color: #91e3c2;
background-color: rgba(107, 219, 173, 0.08);
}
@media ( prefers-color-scheme: dark ) {
.skin-theme-clientpref-os .benwiki-work__classification {
border-top-color: rgba(107, 219, 173, 0.3);
border-right-color: rgba(107, 219, 173, 0.3);
border-bottom-color: rgba(107, 219, 173, 0.3);
border-left-color: rgba(107, 219, 173, 0.3);
color: #91e3c2;
background-color: rgba(107, 219, 173, 0.08);
}
}
/* ==========================================================
* 封面裝飾層（疊在照片上，跟頁面主題無關，不分深淺色）
* ========================================================== */
.benwiki-ui-hero__poster {
position: relative;
isolation: isolate;
margin: 1.1rem;
overflow: hidden;
border-radius: 0.85rem;
background:
linear-gradient(145deg, rgba(255, 93, 104, 0.88), rgba(139, 55, 85, 0.5) 42%, rgba(12, 17, 26, 0.2) 67%),
#222b3b;
}
.benwiki-ui-hero__poster::before {
position: absolute;
top: 8%;
right: -24%;
z-index: -1;
width: 95%;
aspect-ratio: 1;
border-width: 46px;
border-style: solid;
border-color: rgba(255, 255, 255, 0.09);
border-radius: 50%;
content: "";
}
.benwiki-ui-hero__poster::after {
position: absolute;
inset: auto 0 0;
z-index: -1;
height: 45%;
background: linear-gradient(transparent, rgba(7, 10, 15, 0.7));
content: "";
}
@media ( max-width: 780px ) {
.benwiki-ui-hero__poster {
margin: 0.85rem;
}
}
/* ==========================================================
* Tabs：話數選擇器／章節分頁的「形狀」override
*
* 通用層（模板:UI/styles.css）的 .benwiki-ui-tab-button 是單顆浮動的
* 999px 全圓形藥丸，跟參考版型的兩種分頁組成方式都對不上：
* - 話數選擇器：有外框的膠囊「容器」，裡面是緊湊排列的方角小 chip。
* - 章節分頁：整條相連的分頁列，各分頁平分寬度、用分隔線區隔，
* 不是各自浮動、中間留空隙的藥丸。
*
* 這裡只調整形狀相關屬性（容器外框／圓角／排列方式／間距），顏色
* （含作用中狀態的填色與文字色）完全沿用通用層既有定義，不覆寫。
* ========================================================== */
.benwiki-ui-hero__footer .benwiki-ui-tabs__nav {
margin-bottom: 0;
padding: 0.3rem;
gap: 0.3rem;
border-width: 1px;
border-style: solid;
border-top-color: var(--border-color-base);
border-right-color: var(--border-color-base);
border-bottom-color: var(--border-color-base);
border-left-color: var(--border-color-base);
border-radius: 0.75rem;
}
.benwiki-ui-hero__footer .benwiki-ui-tab-button {
border-style: hidden;
min-width: 3.4rem;
padding: 0.4rem 0.6rem;
border-radius: 0.6rem;
text-align: center;
}
[data-benwiki-ui-tabs-group="sections"] .benwiki-ui-tabs__nav {
gap: 0;
border-width: 1px;
border-style: solid;
border-top-color: var(--border-color-base);
border-right-color: var(--border-color-base);
border-bottom-color: var(--border-color-base);
border-left-color: var(--border-color-base);
border-radius: 0.75rem;
overflow: hidden;
}
[data-benwiki-ui-tabs-group="sections"] .benwiki-ui-tab-button {
flex: 1 0 auto;
border-radius: 0;
border-top-width: 0;
border-right-width: 1px;
border-bottom-width: 0;
border-left-width: 0;
border-style: solid;
border-right-color: var(--border-color-base);
}
[data-benwiki-ui-tabs-group="sections"] .benwiki-ui-tab-button:last-child {
border-right-width: 0;
}
/* ==========================================================
* Episode panel
* ========================================================== */
.benwiki-work-episode__heading {
position: relative;
padding-bottom: 0.9rem;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: var(--border-color-subtle);
}
.benwiki-work-episode__heading::after {
position: absolute;
bottom: -1px;
left: 0;
width: 3.2rem;
height: 2px;
border-radius: 999px;
content: "";
/* 淺色版（預設） */
background-color: #7c5cbf;
}
.skin-theme-clientpref-night .benwiki-work-episode__heading::after {
background-color: #c3a2ee;
box-shadow: 0 0 18px rgba(195, 162, 238, 0.35);
}
@media ( prefers-color-scheme: dark ) {
.skin-theme-clientpref-os .benwiki-work-episode__heading::after {
background-color: #c3a2ee;
box-shadow: 0 0 18px rgba(195, 162, 238, 0.35);
}
}
.benwiki-work-episode__eyebrow {
display: inline-flex;
margin-bottom: 0.75rem;
padding: 0.2rem 0.55rem;
border-width: 1px;
border-style: solid;
border-radius: 999px;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.1em;
/* 淺色版（預設） */
border-top-color: rgba(124, 92, 191, 0.32);
border-right-color: rgba(124, 92, 191, 0.32);
border-bottom-color: rgba(124, 92, 191, 0.32);
border-left-color: rgba(124, 92, 191, 0.32);
color: #7c5cbf;
background-color: rgba(124, 92, 191, 0.08);
}
.skin-theme-clientpref-night .benwiki-work-episode__eyebrow {
border-top-color: rgba(195, 162, 238, 0.32);
border-right-color: rgba(195, 162, 238, 0.32);
border-bottom-color: rgba(195, 162, 238, 0.32);
border-left-color: rgba(195, 162, 238, 0.32);
color: #c3a2ee;
background-color: rgba(195, 162, 238, 0.12);
}
@media ( prefers-color-scheme: dark ) {
.skin-theme-clientpref-os .benwiki-work-episode__eyebrow {
border-top-color: rgba(195, 162, 238, 0.32);
border-right-color: rgba(195, 162, 238, 0.32);
border-bottom-color: rgba(195, 162, 238, 0.32);
border-left-color: rgba(195, 162, 238, 0.32);
color: #c3a2ee;
background-color: rgba(195, 162, 238, 0.12);
}
}
.benwiki-work-episode__title {
color: var(--color-emphasized);
font-size: clamp( 1.3rem, 2.4vw, 1.9rem );
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.25;
}
.benwiki-work-episode__facts {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
margin: 0.9rem 0;
}
.benwiki-work-episode__facts div {
display: flex;
align-items: baseline;
gap: 0.35rem;
}
.benwiki-work-episode__facts dt {
margin: 0;
color: var(--color-subtle);
font-size: 0.65rem;
font-weight: 700;
}
.benwiki-work-episode__facts dd {
margin: 0;
color: var(--color-base);
font-size: 0.8rem;
}
.benwiki-work-episode__summary {
color: var(--color-subtle);
font-size: 0.85rem;
line-height: 1.75;
}
/* ==========================================================
* Character card
* ========================================================== */
.benwiki-work-character {
display: grid;
grid-template-columns: 138px minmax( 0, 1fr );
overflow: hidden;
border-width: 1px;
border-style: solid;
border-top-color: var(--border-color-base);
border-right-color: var(--border-color-base);
border-bottom-color: var(--border-color-base);
border-left-color: var(--border-color-base);
border-radius: 0.75rem;
background-color: var(--background-color-neutral-subtle);
}
.benwiki-work-character__photo {
min-height: 100%;
background-color: var(--background-color-neutral);
}
.benwiki-work-character__photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
.benwiki-work-character__content {
min-width: 0;
padding: 1.1rem;
}
.benwiki-work-character__role {
/* 淺色版（預設） */
color: #d6304a;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.08em;
}
.skin-theme-clientpref-night .benwiki-work-character__role {
color: #ff5d68;
}
@media ( prefers-color-scheme: dark ) {
.skin-theme-clientpref-os .benwiki-work-character__role {
color: #ff5d68;
}
}
.benwiki-work-character__name {
margin: 0.3rem 0 0.5rem;
color: var(--color-emphasized);
font-size: 1rem;
font-weight: 700;
}
.benwiki-work-character__description {
margin: 0 0 0.75rem;
color: var(--color-subtle);
font-size: 0.78rem;
line-height: 1.65;
}
.benwiki-work-character__specs {
display: grid;
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
gap: 0.5rem 0.75rem;
margin: 0;
}
.benwiki-work-character__specs > div:last-child:nth-child(odd) {
grid-column: span 2;
}
.benwiki-work-character__specs dt {
margin: 0;
color: var(--color-subtle);
font-size: 0.6rem;
font-weight: 700;
}
.benwiki-work-character__specs dd {
margin: 0.1rem 0 0;
color: var(--color-base);
font-size: 0.72rem;
font-weight: 600;
}
.benwiki-work-character__source {
margin-top: 0.7rem;
font-size: 0.68rem;
}
/* ==========================================================
* Relation category cards
* ========================================================== */
.benwiki-ui-link-group__heading {
position: relative;
overflow: hidden;
/* 淺色版（預設） */
background:
linear-gradient(112deg, rgba(214, 48, 74, 0.10), rgba(124, 92, 191, 0.05) 52%, transparent 82%),
var(--background-color-neutral-subtle);
box-shadow:
inset 3px 0 0 rgba(214, 48, 74, 0.7),
inset 0 -1px 0 rgba(214, 48, 74, 0.08);
}
.skin-theme-clientpref-night .benwiki-ui-link-group__heading {
background:
linear-gradient(112deg, rgba(255, 93, 104, 0.12), rgba(195, 162, 238, 0.055) 52%, transparent 82%),
var(--background-color-neutral-subtle);
box-shadow:
inset 3px 0 0 rgba(255, 93, 104, 0.78),
inset 0 -1px 0 rgba(255, 93, 104, 0.08);
}
@media ( prefers-color-scheme: dark ) {
.skin-theme-clientpref-os .benwiki-ui-link-group__heading {
background:
linear-gradient(112deg, rgba(255, 93, 104, 0.12), rgba(195, 162, 238, 0.055) 52%, transparent 82%),
var(--background-color-neutral-subtle);
box-shadow:
inset 3px 0 0 rgba(255, 93, 104, 0.78),
inset 0 -1px 0 rgba(255, 93, 104, 0.08);
}
}