打开/关闭菜单
打开/关闭外观设置菜单
User Avatar 打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

MediaWiki:Vector-2022.css

MediaWiki界面页面

注意:在发布之后,您可能需要清除浏览器缓存才能看到所作出的更改的影响。

  • Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5Ctrl-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;
}