更多操作
小无编辑摘要 |
小无编辑摘要 |
||
(未显示同一用户的7个中间版本) | |||
第9行: | 第9行: | ||
/* 浅色模式 */ | /* 浅色模式 */ | ||
:root { | :root { | ||
--font-family-citizen-base: "Noto Sans SC"; | |||
--font-family-citizen-serif: "Noto Serif SC"; | |||
--font-family-citizen-monospace: "Noto Sans Mono"; | |||
--color-primary__h:38; | --color-primary__h:38; | ||
--color-primary__s:93.5%; | --color-primary__s:93.5%; | ||
第28行: | 第28行: | ||
:root.skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1 { | :root.skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1 { | ||
--color-surface-clear: hsl(var(--color-primary__h), 49.2%, 5%); | --color-surface-clear: hsl(var(--color-primary__h), 49.2%, 5%); | ||
} | |||
/* 基于Citizen的捷径式快速样式 */ | |||
.citizen-background-0 { | |||
background: var(--color-surface-0); | |||
} | |||
.citizen-background-1 { | |||
background: var(--color-surface-1); | |||
} | |||
.citizen-background-2 { | |||
background: var(--color-surface-2); | |||
} | |||
.citizen-background-3 { | |||
background: var(--color-surface-3); | |||
} | |||
.citizen-background-4 { | |||
background: var(--color-surface-4); | |||
} | |||
.citizen-background-clear { | |||
background: var(--color-surface-clear); | |||
} | |||
.citizen-border-radius-m { | |||
border-radius: var(--border-radius-medium); | |||
} | |||
.citizen-border-radius-l { | |||
border-radius: var(--border-radius-large); | |||
} | |||
.citizen-border { | |||
border: var(--border-width-base) solid var(--border-color-base); | |||
} | |||
.citizen-boxshadow-card { | |||
box-shadow: var(--box-shadow-card) | |||
} | } | ||
2024年12月22日 (日) 22:48的最新版本
/* 这里所有CSS都会加载给Citizen皮肤的用户 */
/* Citizen采用CSS变量模式自动计算最终颜色
以及适配深浅黑三种配色模式下的颜色。
请按照下列注释配置所需的基础样式颜色。*/
/* 颜色变量定义区 */
/* 覆盖顺序:纯黑 > 深色 > 浅色,使用最高覆盖层级的定义 */
/* 浅色模式 */
:root {
--font-family-citizen-base: "Noto Sans SC";
--font-family-citizen-serif: "Noto Serif SC";
--font-family-citizen-monospace: "Noto Sans Mono";
--color-primary__h:38;
--color-primary__s:93.5%;
--color-primary__l:42%;
--box-shadow-border: 0 2px 3px 0 var(--border-color-base);
--color-surface-clear: hsl(var(--color-primary__h), var(--color-primary__s), 98%);
}
/* 深色模式 */
:root.skin-theme-clientpref-night {
--color-primary__l: 46%;
--color-surface-clear: hsl(var(--color-primary__h), 49.2%, 8%);
}
/* 纯黑模式 */
:root.skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1 {
--color-surface-clear: hsl(var(--color-primary__h), 49.2%, 5%);
}
/* 基于Citizen的捷径式快速样式 */
.citizen-background-0 {
background: var(--color-surface-0);
}
.citizen-background-1 {
background: var(--color-surface-1);
}
.citizen-background-2 {
background: var(--color-surface-2);
}
.citizen-background-3 {
background: var(--color-surface-3);
}
.citizen-background-4 {
background: var(--color-surface-4);
}
.citizen-background-clear {
background: var(--color-surface-clear);
}
.citizen-border-radius-m {
border-radius: var(--border-radius-medium);
}
.citizen-border-radius-l {
border-radius: var(--border-radius-large);
}
.citizen-border {
border: var(--border-width-base) solid var(--border-color-base);
}
.citizen-boxshadow-card {
box-shadow: var(--box-shadow-card)
}
/* 颜色设定 */
/* [!]警告:确保已在上方定义了相应的变量 */
.wikitable th, .wikitable td {
border-right: 1px solid var(--border-color-base);
}
.wikitable thead {
background: var(--color-surface-3);
}
.citizen-overflow-wrapper {
background: var(--color-surface-clear);
}
/* 统一设置 */
/* [!]警告:只能放置与颜色无关的设置 */
.wikitable th, .wikitable td:last-child {
border-right: none;
}