Template:Tabber/styles.css:修订间差异
模板页面
更多操作
无编辑摘要 |
无编辑摘要 |
||
| 第19行: | 第19行: | ||
.tabber-wrap .tabber__header { | .tabber-wrap .tabber__header { | ||
margin-bottom: var(--tpl-divider-size); | margin-bottom: var(--tpl-divider-size); | ||
} | |||
/* ===== 边框美化(所有模式通用)===== */ | |||
.tabber-wrap > .tabber { | |||
border: 1px solid var(--tpl-label-border-color, var(--border-color-base, #a2a9b1)); | |||
border-radius: 4px; | |||
overflow: hidden; | |||
} | } | ||
| 第55行: | 第62行: | ||
.tabber-wrap.tabber-side-right > .tabber > .tabber__header .tabber__indicator { | .tabber-wrap.tabber-side-right > .tabber > .tabber__header .tabber__indicator { | ||
display: none; | display: none; | ||
} | } | ||
.tabber-wrap.tabber-side-left > .tabber > .tabber__section, | .tabber-wrap.tabber-side-left > .tabber > .tabber__section, | ||
| 第67行: | 第70行: | ||
} | } | ||
/* ===== LabelSide: | /* ===== LabelSide: left(indicator 在右侧靠近内容)===== */ | ||
.tabber-wrap.tabber-side-left > .tabber { | .tabber-wrap.tabber-side-left > .tabber { | ||
flex-direction: row; | flex-direction: row; | ||
} | } | ||
.tabber-wrap.tabber-side-left > .tabber > .tabber__header { | .tabber-wrap.tabber-side-left > .tabber > .tabber__header { | ||
border-right: 1px solid var(--tpl-label-border-color, # | border-right: 1px solid var(--tpl-label-border-color, var(--border-color-base, #a2a9b1)); | ||
} | |||
.tabber-wrap.tabber-side-left > .tabber > .tabber__header .tabber__tab[aria-selected="true"] { | |||
border-right: 3px solid var(--tpl-label-border-color, var(--color-progressive, #3366cc)); | |||
border-left: none; | |||
} | } | ||
/* ===== LabelSide: | /* ===== LabelSide: right(indicator 在左侧靠近内容)===== */ | ||
.tabber-wrap.tabber-side-right > .tabber { | .tabber-wrap.tabber-side-right > .tabber { | ||
flex-direction: row-reverse; | flex-direction: row-reverse; | ||
} | } | ||
.tabber-wrap.tabber-side-right > .tabber > .tabber__header { | .tabber-wrap.tabber-side-right > .tabber > .tabber__header { | ||
border-left: 1px solid var(--tpl-label-border-color, # | border-left: 1px solid var(--tpl-label-border-color, var(--border-color-base, #a2a9b1)); | ||
} | |||
.tabber-wrap.tabber-side-right > .tabber > .tabber__header .tabber__tab[aria-selected="true"] { | |||
border-left: 3px solid var(--tpl-label-border-color, var(--color-progressive, #3366cc)); | |||
border-right: none; | |||
} | } | ||
| 第89行: | 第100行: | ||
} | } | ||
.tabber-wrap.tabber-side-bottom > .tabber > .tabber__header { | .tabber-wrap.tabber-side-bottom > .tabber > .tabber__header { | ||
border-top: 1px solid var(--tpl-label-border-color, # | border-top: 1px solid var(--tpl-label-border-color, var(--border-color-base, #a2a9b1)); | ||
border-bottom: none; | border-bottom: none; | ||
} | |||
.tabber-wrap.tabber-side-bottom > .tabber > .tabber__header .tabber__indicator { | |||
bottom: auto; | |||
top: 0; | |||
} | } | ||
.tabber-wrap.tabber-side-bottom > .tabber > .tabber__section { | .tabber-wrap.tabber-side-bottom > .tabber > .tabber__section { | ||
height: unset !important; | height: unset !important; | ||
} | } | ||
2026年5月20日 (三) 08:42的版本
/* ===== 变量注入 ===== */
.tabber-wrap .tabber__tab {
padding: var(--tpl-label-padding);
color: var(--tpl-label-color);
background-color: var(--tpl-label-bg);
}
.tabber-wrap .tabber__tab[aria-selected="true"] {
color: var(--tpl-label-color);
background-color: var(--tpl-label-bg);
}
.tabber-wrap .tabber__indicator {
background-color: var(--tpl-label-border-color);
}
.tabber-wrap .tabber__panel {
border-color: var(--tpl-text-border-color);
background-color: var(--tpl-text-bg);
padding: var(--tpl-text-padding);
}
.tabber-wrap .tabber__header {
margin-bottom: var(--tpl-divider-size);
}
/* ===== 边框美化(所有模式通用)===== */
.tabber-wrap > .tabber {
border: 1px solid var(--tpl-label-border-color, var(--border-color-base, #a2a9b1));
border-radius: 4px;
overflow: hidden;
}
/* ===== AutoWidth / Float ===== */
.tabber-wrap.tabber-autowidth {
width: fit-content;
}
.tabber-wrap.tabber-float-left {
float: left;
}
.tabber-wrap.tabber-float-right {
float: right;
}
/* ===== LabelSide: left / right 公共部分 ===== */
.tabber-wrap.tabber-side-left > .tabber,
.tabber-wrap.tabber-side-right > .tabber {
display: flex;
align-items: flex-start;
}
.tabber-wrap.tabber-side-left > .tabber > .tabber__header,
.tabber-wrap.tabber-side-right > .tabber > .tabber__header {
flex-direction: column;
border-bottom: none;
flex-shrink: 0;
min-width: 8em;
}
.tabber-wrap.tabber-side-left > .tabber > .tabber__header > .tabber__tabs,
.tabber-wrap.tabber-side-right > .tabber > .tabber__header > .tabber__tabs {
flex-direction: column;
align-items: stretch;
overflow-x: unset;
overflow-y: auto;
}
.tabber-wrap.tabber-side-left > .tabber > .tabber__header .tabber__indicator,
.tabber-wrap.tabber-side-right > .tabber > .tabber__header .tabber__indicator {
display: none;
}
.tabber-wrap.tabber-side-left > .tabber > .tabber__section,
.tabber-wrap.tabber-side-right > .tabber > .tabber__section {
flex: 1;
min-width: 0;
height: unset !important;
}
/* ===== LabelSide: left(indicator 在右侧靠近内容)===== */
.tabber-wrap.tabber-side-left > .tabber {
flex-direction: row;
}
.tabber-wrap.tabber-side-left > .tabber > .tabber__header {
border-right: 1px solid var(--tpl-label-border-color, var(--border-color-base, #a2a9b1));
}
.tabber-wrap.tabber-side-left > .tabber > .tabber__header .tabber__tab[aria-selected="true"] {
border-right: 3px solid var(--tpl-label-border-color, var(--color-progressive, #3366cc));
border-left: none;
}
/* ===== LabelSide: right(indicator 在左侧靠近内容)===== */
.tabber-wrap.tabber-side-right > .tabber {
flex-direction: row-reverse;
}
.tabber-wrap.tabber-side-right > .tabber > .tabber__header {
border-left: 1px solid var(--tpl-label-border-color, var(--border-color-base, #a2a9b1));
}
.tabber-wrap.tabber-side-right > .tabber > .tabber__header .tabber__tab[aria-selected="true"] {
border-left: 3px solid var(--tpl-label-border-color, var(--color-progressive, #3366cc));
border-right: none;
}
/* ===== LabelSide: bottom ===== */
.tabber-wrap.tabber-side-bottom > .tabber {
display: flex;
flex-direction: column-reverse;
}
.tabber-wrap.tabber-side-bottom > .tabber > .tabber__header {
border-top: 1px solid var(--tpl-label-border-color, var(--border-color-base, #a2a9b1));
border-bottom: none;
}
.tabber-wrap.tabber-side-bottom > .tabber > .tabber__header .tabber__indicator {
bottom: auto;
top: 0;
}
.tabber-wrap.tabber-side-bottom > .tabber > .tabber__section {
height: unset !important;
}