注意:在发布之后,您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5或Ctrl-R(Mac为⌘-R)
- Google Chrome:按Ctrl-Shift-R(Mac为⌘-Shift-R)
- Edge:按住Ctrl的同时单击刷新,或按Ctrl-F5。
/* 便于开发 */
* {
box-sizing: border-box;
}
html {
interpolate-size: allow-keywords;
}
/* 修改配色 */
:root {
--omw-accent: #f06e8e;
--omw-accent--hover: color-mix(in oklab,var(--omw-accent),#fff 20%);
--omw-accent--active: color-mix(in oklab,var(--omw-accent),#000 10%);
--omw-accent--focus: color-mix(in oklab,var(--omw-accent),#fff 40%);
--omw-icon-color: #716869;
--omw-link-color: #008ac5;
--omw-link-color--hover: #00aeec;
--omw-link-color--active: #36c;
--color-progressive: var(--omw-accent);
--color-progressive--hover: var(--omw-accent--hover);
--color-progressive--active: var(--omw-accent--active);
--color-progressive--focus: var(--omw-accent--focus);
--color-destructive--focus: var(--omw-accent--focus);
--box-shadow-color-progressive--active: var(--omw-accent--active);
--box-shadow-color-progressive--focus: var(--omw-accent--focus);
--box-shadow-color-progressive-selected: var(--omw-accent);
--box-shadow-color-progressive-selected--hover: var(--omw-accent--hover);
--box-shadow-color-progressive-selected--active: var(--omw-accent--active);
--box-shadow-color-destructive--focus: var(--omw-accent--focus);
--background-color-progressive: var(--omw-accent);
--background-color-progressive--hover: var(--omw-accent--hover);
--background-color-progressive--active: var(--omw-accent--active);
--background-color-progressive--focus: var(--omw-accent--focus);
--background-color-destructive--focus: var(--omw-accent--focus);
--background-color-input-binary--checked: var(--omw-accent--focus);
--border-color-progressive: var(--omw-accent);
--border-color-progressive--hover: var(--omw-accent--hover);
--border-color-progressive--active: var(--omw-accent--active);
--border-color-progressive--focus: var(--omw-accent--focus);
--border-color-destructive--focus: var(--omw-accent--focus);
--outline-color-progressive--focus: var(--omw-accent--focus);
/* 减淡描边 */
--border-color-base: var(--border-color-muted);
--border-color-subtle: var(--border-color-muted);
}
html.skin-theme-clientpref-night {
--omw-icon-color: #f0e6e7;
--border-color-base: var(--border-color-muted);
--border-color-subtle: var(--border-color-muted);
}
/* 不要在深色模式给Logo添加滤镜 */
.mw-logo-container.skin-invert {
filter: unset !important;
}
/* 不要切换到旧外观 */
.vector-main-menu .vector-main-menu-action-opt-out {
display: none !important;
}
/* 防止侧栏被隐藏 */
.vector-pinnable-header-unpin-button {
display: none !important;
}
/* 隐藏不好看的分割线 */
.vector-page-titlebar::after {
content: none;
}
.vector-page-toolbar-container {
box-shadow: unset;
}
.mw-footer {
border-top: unset;
}
/* 卡片化 */
/*@media screen and (min-width: 1120px) {*/
/* .mw-page-container,*/
/* .vector-pinned-container {*/
/* background-color: unset;*/
/* }*/
/* .vector-pinned-container .mw-portlet {*/
/* background-color: var(--background-color-base, #fff);*/
/* padding: 12px;*/
/* margin: 8px 0;*/
/* border-radius: 4px;*/
/* box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.2);*/
/* }*/
/* .vector-pinnable-element .vector-menu-heading {*/
/* padding: 0;*/
/* margin: 0 12px;*/
/* border: unset;*/
/* }*/
/* .vector-body {*/
/* background-color: var(--background-color-base, #fff);*/
/* border-radius: 4px;*/
/* box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.2);*/
/* }*/
/*}*/
/* 标题不使用衬线字体,但要粗体 */
.mw-body h1, .mw-body .mw-heading1, .mw-body-content h1, .mw-body-content .mw-heading1, .mw-body-content h2, .mw-body-content .mw-heading2,
.vector-sticky-header-context-bar-primary {
font-family: inherit;
font-weight: bold;
}
/* 所有菜单,包含了页面顶部的横向TAB */
.vector-menu-content .mw-list-item a,
.vector-menu-content .mw-list-item a:visited {
color: var(--omw-icon-color) !important;
}
.vector-menu-content .mw-list-item a.new:hover {
color: var(--color-destructive) !important;
}
.vector-menu-content .mw-list-item a:hover {
background-color: var(--background-color-button-quiet--hover);
}
.vector-menu-content .mw-list-item a:active {
background-color: var(--background-color-button-quiet--active);
}
/* 页面顶部的横向TAB风格菜单 */
.vector-menu-tabs .mw-list-item.vector-tab-noicon,
.vector-page-toolbar-container .vector-dropdown {
margin: 0;
}
.vector-menu-tabs .mw-list-item.vector-tab-noicon > a,
.vector-page-toolbar-container .vector-dropdown.vector-tab-noicon > a,
.vector-menu-tabs .mw-list-item .vector-dropdown-label,
.vector-page-toolbar-container .vector-dropdown .vector-dropdown-label {
padding: 8px 12px;
}
.vector-menu-tabs .mw-list-item.selected a {
color: var(--omw-accent) !important;
}
/* 点亮已监视或者说取消监视按钮 */
#ca-unwatch .vector-icon {
background-color: var(--omw-accent);
}
/* 纵向列表菜单,例如左右的菜单和下拉菜单 */
.vector-pinnable-element .mw-list-item a,
.vector-dropdown-content .mw-list-item a {
text-decoration: none;
height: 36px;
border-radius: 4px;
transition: all var(--ease-out-expo) 1s;
margin-left: -8px;
margin-right: -8px;
padding-left: 8px;
padding-right: 8px;
}
.vector-pinnable-element .mw-list-item a:hover,
.vector-dropdown-content .mw-list-item a:hover {
padding-left: 12px;
transition: all var(--ease-out-expo) 250ms;
color: inherit !important;
}
/* 图标颜色和间距 */
.vector-icon {
background-color: var(--omw-icon-color);
}
.vector-pinnable-element .mw-list-item a .vector-icon,
.vector-dropdown-content .mw-list-item a .vector-icon {
margin-right: 8px;
background-color: currentColor;
}
/* 给左右的菜单添加图标 */
.vector-pinnable-element .mw-list-item a::before {
/* Material 图标基础 */
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* 图标大小 */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
user-select: none;
/* 额外样式 */
margin-right: 8px;
}
#n-mainpage-description a::before {
content: 'home';
}
#n-recentchanges a::before {
content: 'edit_note';
}
#n-randompage a::before {
content: 'casino';
}
#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';
}
#n-help-mediawiki a::before {
content: 'help_outline';
}
#ca-delete a::before {
content: 'delete';
}
#ca-move a::before {
content: 'open_with';
}
#ca-protect a::before {
content: 'lock';
}
#ca-unprotect a::before {
content: 'lock_open';
}
#t-whatlinkshere a::before {
content: 'file_open';
}
#t-recentchangeslinked a::before {
content: 'edit_note';
}
#t-upload a::before {
content: 'file_upload';
}
#t-specialpages a::before {
content: 'auto_awesome';
}
#t-print a::before {
content: 'print';
}
#t-permalink a::before {
content: 'link';
}
#t-info a::before {
content: 'info';
}
/* 下拉菜单 */
.vector-dropdown .vector-dropdown-content {
border-radius: 4px;
opacity: 1;
min-width: 128px;
max-height: 0;
padding: 0 16px;
transition-property: height, visibility, padding, max-height;
transition-timing-function: var(--ease-out-smooth);
transition-duration: 300ms;
overflow: hidden;
}
.vector-dropdown .vector-dropdown-checkbox:checked ~ .vector-dropdown-content {
transition-duration: 500ms;
height: max-content;
max-height: 75vh;
padding: 8px 16px;
}
/* 始终显示用户菜单里的用户页 */
.vector-user-links .vector-dropdown-content .mw-list-item#pt-userpage {
display: block;
}
/* 隐藏用户按钮右边的下拉箭头 */
.vector-user-menu-logged-in .vector-dropdown-label::after {
content: unset !important;
}
/* 隐藏顶栏在外边的用户名文字 */
#p-vector-user-menu-userpage {
display: none !important;
}
/* 隐藏顶栏的语言名 */
#ca-uls a {
padding-left: 5px;
padding-right: 5px;
}
#ca-uls a .vector-icon {
margin-right: unset;
}
#ca-uls a .vector-icon ~ * {
display: none;
}
/* 顶栏增加阴影和去掉描边 */
.vector-header-container .mw-header,
.client-js.vector-sticky-header-enabled .vector-sticky-header-visible .vector-sticky-header-container {
box-shadow: 0 0 24px hsl(345.23deg 81.25% 68.63% / 30%);
}
.vector-header-container .vector-sticky-header {
border: unset;
}
/* 修改顶栏动画 */
.vector-sticky-header-container {
transition-property: transform, box-shadow, visibility;
transition-duration: 200ms;
transition-timing-function: var(--ease-in-smooth);
opacity: 1;
visibility: hidden;
}
.client-js.vector-sticky-header-enabled .vector-sticky-header-visible .vector-sticky-header-container {
transition-duration: 600ms;
transition-timing-function: var(--ease-out-smooth);
visibility: visible;
}
/* 修改顶栏页面标题字体大小 */
.vector-sticky-header-context-bar-primary {
font-size: 1.25em;
}