注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
- Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
- Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。
/* 这里的任何CSS将为使用Citizen皮肤的用户加载 */
*,
::before,
::after {
-webkit-tap-highlight-color: transparent;
}
:root {
--color-progressive-hsl__h: 345;
--color-progressive-hsl__s: 81%;
--color-progressive-hsl__l: 69%;
--color-progressive-oklch__l: 70.21%;
--color-progressive-oklch__c: 0.1623;
--color-progressive-oklch__h: 6.8;
--background-color-interactive-subtle: var(--color-surface-2);
--transition-timing-function-ease: var(--ease-out-expo);
--transition-timing-function-ease-in: var(--ease-in-smooth);
--transition-timing-function-ease-out: var(--ease-out-smooth);
}
/* MAKE LIGHT THEME GREAT AGAIN (get rid of Material You styles) */
/* 强制指定浅色时 */
:root.skin-citizen-light {
--color-surface-0: #fff;
--color-surface-1: #fff;
--color-surface-2: #f9fafb;
--color-surface-3: #eaecf0;
--color-surface-4: #c7ccd1;
--color-base--emphasized: #54595d;
--color-base: #202122;
--color-subtle: #72777d;
--color-placeholder: var(--color-subtle);
--background-color-base-fixed: white;
--opacity-icon-base: 0.67;
--color-surface-0-oklch__l: 100%;
--color-surface-0-oklch__c: 0;
--color-surface-1-oklch__c: 0;
--color-surface-2-oklch__c: 0;
--color-surface-3-oklch__c: 0;
--color-surface-4-oklch__c: 0;
--color-base-oklch__c: 0;
--color-subtle-oklch__c: 0;
--color-placeholder-oklch__c: 0;
}
:root.skin-citizen-light #skin-client-prefs-skin-theme .citizen-client-prefs-radio__label[for='skin-client-pref-skin-theme-value-day'] {
background: var(--color-surface-0);
}
/* 跟随系统为浅色时 */
@media (prefers-color-scheme: light) {
:root.skin-theme-clientpref-os {
--color-surface-0: #fff;
--color-surface-1: #fff;
--color-surface-2: #f9fafb;
--color-surface-3: #eaecf0;
--color-surface-4: #c7ccd1;
--color-base--emphasized: #54595d;
--color-base: #202122;
--color-subtle: #72777d;
--color-placeholder: var(--color-subtle);
--background-color-base-fixed: white;
--opacity-icon-base: 0.67;
--color-surface-0-oklch__l: 100%;
--color-surface-0-oklch__c: 0;
--color-surface-1-oklch__c: 0;
--color-surface-2-oklch__c: 0;
--color-surface-3-oklch__c: 0;
--color-surface-4-oklch__c: 0;
--color-base-oklch__c: 0;
--color-subtle-oklch__c: 0;
--color-placeholder-oklch__c: 0;
}
:root.skin-theme-clientpref-os #skin-client-prefs-skin-theme .citizen-client-prefs-radio__label[for='skin-client-pref-skin-theme-value-day'] {
background: var(--color-surface-0);
}
}
/* 强制指定深色时 */
:root.skin-citizen-dark #skin-client-prefs-skin-theme .citizen-client-prefs-radio__label[for='skin-client-pref-skin-theme-value-day'] {
background: white;
}
:root.skin-citizen-dark {
--opacity-icon-base: 1;
--opacity-icon-base--hover: 1;
--opacity-icon-base--active: 1;
}
/* 跟随系统为深色时 */
@media (prefers-color-scheme: dark) {
:root.skin-theme-clientpref-os #skin-client-prefs-skin-theme .citizen-client-prefs-radio__label[for='skin-client-pref-skin-theme-value-day'] {
background: white;
}
:root.skin-theme-clientpref-os {
--opacity-icon-base: 1;
--opacity-icon-base--hover: 1;
--opacity-icon-base--active: 1;
}
}
a {
--color-link: #008ac5;
--color-link--hover: #00aeec;
--color-link--active: #36c;
}
#footer-sitetitle img.mw-logo-wordmark {
filter: none;
}
#footer-icons a {
background-color: var(--background-color-base);
}
/* 恢复图标不透明度 */
.citizen-ui-icon::before,
.mw-list-item a::before,
.citizen-search .citizen-dropdown-summary .citizen-ui-icon,
.citizen-drawer .citizen-dropdown-summary .citizen-ui-icon {
opacity: var(--opacity-icon-base);
}
.citizen-menu .mw-list-item a:hover .citizen-ui-icon::before,
.citizen-menu .mw-list-item a:hover::before,
.citizen-search:hover .citizen-dropdown-summary .citizen-ui-icon,
.citizen-drawer:hover .citizen-dropdown-summary .citizen-ui-icon {
opacity: var(--opacity-icon-base--hover);
}
.citizen-menu .mw-list-item a:active .citizen-ui-icon::before,
.citizen-menu .mw-list-item a:active::before,
.citizen-search:active .citizen-dropdown-summary .citizen-ui-icon,
.citizen-drawer:active .citizen-dropdown-summary .citizen-ui-icon {
opacity: var(--opacity-icon-base--active);
}
#ca-edit .citizen-ui-icon::before,
#ca-ve-edit .citizen-ui-icon::before {
opacity: 1;
}
/* 修改动画风格 */
.citizen-animations-ready {
--transition-duration-base: 250ms;
--transition-duration-medium: 300ms;
/* 因为CSS变量的原理所以这里需要重新覆盖 */
--transition-hover: var(--transition-duration-base) var(--transition-timing-function-ease);
--transition-menu: var(--transition-duration-medium) var(--transition-timing-function-ease-out);
}
/* 桌面端侧栏 / 移动端底栏 */
.citizen-header {
box-shadow: 0 0 24px hsl(var(--color-primary__h),var(--color-primary__s),var(--color-primary__l),30%);
border: 0;
}
/* 页脚图标 */
#footer-icons ul {
gap: var(--space-md);
flex-direction: row-reverse;
}
/* 在当前主题下强制显示首页的搜索，默认状态下是display: none; */
.home-header__search {
display: block !important;
}
/* 用户头像显示 */
.omw-user-menu-avatar {
border-radius: 50%;
width: 40px;
height: 40px;
aspect-ratio: 1 / 1;
object-fit: cover;
pointer-events: none;
user-select: none;
}
/* 修改桌面端左侧菜单底部为KIRAKIRA风格 */
.citizen-header .citizen-dropdown-summary,
.citizen-header__button {
border-radius: var(--border-radius-circle);
}
/* Logo */
@media screen and (min-width: 1120px) and (min-height: 740px) {
.citizen-header__inner::before {
content: '';
background-image: url(/kawaii/logo/text-animated.svg);
width: 160px;
height: 20px;
background-size: contain;
background-repeat: no-repeat;
position: absolute;
transform: rotate(-0.25turn);
left: -100%;
top: 50%;
margin-left: -8px;
pointer-events: none;
}
}
/* 襟线 */
@media screen and (min-width: 1120px) and (min-height: 430px) {
.citizen-header__end::before,
.citizen-header__end::after {
content: '';
width: -webkit-fill-available;
width: -moz-available;
height: 8px;
background-color: var(--color-progressive);
position: absolute;
left: 0;
transform: skewY(-30deg);
pointer-events: none;
}
.citizen-header__end::before {
bottom: 220px;
}
.citizen-header__end::after {
bottom: 240px;
}
}
@media screen and (min-width: 1120px) {
/* 大小 */
:root {
--header-size: 3rem;
}
.citizen-header {
--header-icon-size: 1.75rem;
--header-button-size: 2.5rem;
padding: var(--space-xs) var(--space-xxs);
}
.citizen-header,
.citizen-header__start,
.citizen-header__end,
#p-notifications ul {
gap: var(--space-xs);
}
/* 底部按钮顺序 */
.citizen-header__end {
flex-direction: column-reverse;
}
/* 激活指示器 */
.citizen-header .citizen-dropdown-details::before {
content: '';
position: absolute;
background-color: var(--color-progressive);
height: 24px;
width: 3px;
border-radius: var(--border-radius-pill) 0 0 var(--border-radius-pill);
right: 0;
transform: translateY(8px) scaleY(0);
transition: transform 0.25s var(--ease-out-expo);
}
.citizen-header .citizen-dropdown-details[open]::before {
transform: translateY(8px) scaleY(1);
}
.citizen-header .citizen-dropdown-details[open] > .citizen-dropdown-summary {
background-color: unset;
}
.citizen-header .citizen-dropdown-details[open] > .citizen-dropdown-summary:hover {
background-color: color-mix(in oklab, var(--color-progressive), #0000 92%);
}
.citizen-header .citizen-dropdown-details[open] > .citizen-dropdown-summary:active {
background-color: color-mix(in oklab, var(--color-progressive), #0000 85%);
}
.citizen-header .citizen-dropdown-details[open] > .citizen-dropdown-summary > .citizen-ui-icon,
.citizen-header .citizen-dropdown-details[open] > .citizen-dropdown-summary > .citizen-ui-icon::before {
opacity: 1;
}
.citizen-header .citizen-dropdown-details[open] > .citizen-dropdown-summary > .citizen-ui-icon > span {
color: var(--color-progressive);
}
.citizen-header .citizen-drawer .citizen-dropdown-details[open] > .citizen-dropdown-summary > .citizen-ui-icon > span,
.citizen-header .citizen-dropdown-details[open] > .citizen-dropdown-summary > .citizen-ui-icon::before {
background-color: var(--color-progressive);
}
}
/* 主菜单图标 */
.citizen-main-menu .mw-list-item a::before {
/* Material 图标基础 */
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
user-select: none;
font-size: calc(var(--size-icon) + 1px);
margin: -1px;
}
#n-listfiles a::before {
content: 'folder';
}
#n-messageboard a::before {
content: 'forum';
}
#n-概念和教程 a::before {
content: 'school';
}
#n-PV效果速查 a::before {
content: 'movie_filter';
}
#n-素材介绍 a::before {
content: 'face';
}
#n-常见原曲 a::before {
content: 'audiotrack';
}
#n-教程视频 a::before {
content: 'cast_for_education';
}
#n-合作推广 a::before {
content: 'campaign';
}
#n-用户列表 a::before {
content: 'contacts';
}
#n-创作热潮 a::before {
content: 'whatshot';
}
#n-创作活动 a::before {
content: 'emoji_events';
}
#n-周报记录 a::before {
content: 'newspaper';
}
#n-沙盒 a::before {
content: 'science';
}
#n-规划 a::before {
content: 'route';
}
#n-编辑规范 a::before {
content: 'rule';
}
#n-createpage a::before {
content: 'add';
}
#n-使用方法与帮助 a::before {
content: 'help';
}