MediaWiki:Common.css
外观
注意:在发布之后,您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5或Ctrl-R(Mac为⌘-R)
- Google Chrome:按Ctrl-Shift-R(Mac为⌘-Shift-R)
- Edge:按住Ctrl的同时单击刷新,或按Ctrl-F5。
/* 这里放置的CSS将应用于所有皮肤 */
@font-face{font-family:'Mongolian Baiti'; src:local('Mongolian Baiti'); size-adjust:135%}
@font-face{font-family:'Microsoft Himalaya'; src:local('Microsoft Himalaya'); size-adjust:150%}
@font-face{font-family:'Microsoft Yi Baiti'; src:local('Microsoft Yi Baiti'); size-adjust:145%}
/* 自定义变量 */
:root{
--color-1: #f1bf4e; /* 第一主题色 */
--color-2: #f1bf4e; /* 第一主题色-深色 */
--color-3: #f1bf4e; /* 第二主题色 */
--font-color-1: #ffffff; /* 彩色文本-搭配主题色 */
--font-color-2: #000000; /* 普通文本 */
--page-color-1: #ffffff; /* 页面背景色 */
--page-color-2: #f2f4f7; /* 页面容器背景色 */
--page-color-3: #dcdcdc; /* 页面边框色 */
--page-color-4: #dcc2a9; /* 皮肤页面背景色 */
--background-color: #ffffff; /* 模板背景色 */
}
/* 文章杂项 */
i, em{ /*斜体*/
margin-right: 2px;}
ol{ /*有序列表*/
margin-inline-start: 1.6em;
padding-inline-start: 0;}
pre{ /*预格式化文本(代码块)*/
line-height: 17px !important;}
code{ /*代码*/
margin: 0 1px;}
rt{ /*顶标*/
font-size: 85%;
}
/* 控件 */
@media (max-width:520px){
fieldset tr{ /*系统表单组*/
display:flex;
flex-direction: column;}}
fieldset input, fieldset textarea{ /*系统表单*/
box-sizing: border-box;
max-width: calc(100vw - 100px);}
body.mobile fieldset input, body.mobile fieldset textarea{ /*移动视图-系统表单*/
box-sizing: border-box;
max-width: calc(100vw - 80px);}
.searchresult{ /*搜索结果*/
word-break: break-word;
}
/* 编辑器 */
.wikiEditor-ui-toolbar .page-characters div span{ /*编辑器-特殊字符*/
height: unset;}
.wikiEditor-ui-text{ /*编辑器文本*/
word-break: break-all;}
.wikiEditor-ui .ace_editor{ /*代码编辑器文本*/
font-family: 'Menlo','Consolas','Liberation Mono','Fira Code','Courier New', monospace;}
.mw-highlight pre, .mono{ /*代码块*/
font-family: 'Menlo','Consolas','Liberation Mono','Fira Code','Courier New', sans-serif;}
body.mobile .mono{ /*移动视图-代码块*/
white-space: pre;}
body.mobile .wikiEditor-ui-toolbar .page-characters div span{ /*移动视图-编辑器-特殊字符*/
font-family: sans-serif}
body.mobile #msupload-div{ /*移动视图-上传文件栏*/
display: none
}
/* 图片 */
#content figure img{ /*图框图片*/
max-width: 100% !important;
width: -webkit-fill-available !important;
width: -moz-available !important;
height: auto;}
@media (max-width: 370px){ /*手机宽度下的图库片*/
#content .mw-gallery-traditional{
display: grid;
grid-template-columns: calc(50% - 4px) calc(50% - 4px);
margin: 0;
padding: 0;
column-gap: 8px;}
#content .gallerytext{
padding: 0.4em 1px 0.6em 1px;}
#content .thumb, #content .gallerybox{
margin: 0;
width: 100% !important;
box-sizing: border-box;}}
#mw-category-media .galleryfilename-truncate{ /*分类图库*/
white-space: normal;
overflow: visible;
}
/* 特殊:最近更改 */
@media (max-width: 850px){
.mw-changeslist-legend{ /*提示框*/
margin: 0;
float: none;}
.mw-enhanced-rc{ /*更改记录*/
margin: 0 !important;
font-size: 14px;}
.mw-changeslist-separator:empty:before{ /*两点*/
display: none;}
td.mw-enhanced-rc{ /*右侧类型和时间*/
font-family: inherit;}}
.comment--without-parentheses:before, .mw-changeslist-links:before, .mw-diff-bytes:before, .mw-tag-markers:before, .mw-uctop:before{ /*左括号*/
content: '(';
position: relative;
bottom: 1px;
margin-right: 1px;}
.comment--without-parentheses:after, .mw-changeslist-links:after, .mw-diff-bytes:after, .mw-tag-markers:after, .mw-uctop:after{ /*右括号*/
content: ')';
position: relative;
bottom: 1px;
margin-left: 1px;}
body.mobile .comment--without-parentheses:before, body.mobile .mw-changeslist-links:before, body.mobile .mw-diff-bytes:before, body.mobile .mw-tag-markers:before, body.mobile .mw-uctop:before,
body.mobile .comment--without-parentheses:after, body.mobile .mw-changeslist-links:after, body.mobile .mw-diff-bytes:after, body.mobile .mw-tag-markers:after, body.mobile .mw-uctop:after{ /*括号*/
font-family: sans-serif;}
.mw-changeslist-links > span:not(:first-child):before{ /*竖线*/
position: relative;
bottom: 1px;}
body.mobile .mw-changeslist-links > span:not(:first-child):before{ /*竖线*/
font-family: sans-serif;
}
/* PortableInfobox 便携式信息框 */
#content .portable-infobox{
width: 310px;}
#content .pi-item-spacing{ /*信息框元素块*/
padding: 10px 14px;}
#content .pi-title, #content .pi-header{ /*大标题与中标题*/
padding: 14px 14px;}
#content .pi-title p{ /*副标题*/
margin: 0;}
#content .portable-infobox figure a, #content .portable-infobox figure img{ /*图框*/
width: 100%;}
#content .pi-title .mw-collapsible-content{ /*折叠内容*/
padding: 0 16px;}
#content .pi-horizontal-group .pi-horizontal-group-item{ /*横向元素块*/
border-left: 0;
text-align: left;}
#content .pi-horizontal-group .pi-data-value{ /*横向元素块内容*/
padding-top: 0;
text-align: left;
}
/* TemplateData 模板数据 */
.mw-templatedata-caption, .mw-editsection-like{ /*模板参数*/
margin: 0 0 0.5em 0 !important;
line-height: inherit !important;
}
/* 悬浮标题 */
body.mobile abbr[title]:hover:after,
body.mobile .mw-parser-output span[title]:hover:after,
body.mobile .title-hover *[title]:hover:after,
body.mobile .title-hover[title]:hover:after{
content: attr(title);
padding: 3px 6px;
background: var(--page-color-1);
border: 1px solid var(--page-color-2);
position: absolute;
margin: 2px;
font-size: 12px;
text-align: start;
box-shadow: 1px 1px 4px #0003;
z-index: 1000;
word-break: normal;
}
/* 自定义预设组 */
/* 折叠 */
.mw-collapsible{ /*折叠对象*/
min-height: 1.5em;}
.mw-collapsible-toggle{ /*折叠按钮*/
color: inherit;
font-family: sans-serif;
margin: -1px 0 0 0;}
.mw-collapsible-toggle:before, .mw-collapsible-toggle:after{ /*左右括号*/
position: relative;
bottom: 1px;
line-height: 0;}
.collapse .mw-collapsible-toggle:before, .collapse-title .mw-collapsible-toggle:before{ /*图标*/
font-family: 'Cambria Math', math !important;
font-size: 10px;
padding: 0 5px;}
.collapse .mw-collapsible-toggle-default:before, .collapse-title .mw-collapsible-toggle-default:before{ /*默认图标*/
content: '▼';}
.collapse .mw-collapsible-toggle-collapsed:before, .collapse-title .mw-collapsible-toggle-collapsed:before{ /*折叠图标*/
content: '▼';}
.collapse .mw-collapsible-toggle-expanded:before, .collapse-title .mw-collapsible-toggle-expanded:before{ /*展开图标*/
content: '▲';}
.collapse .mw-collapsible-toggle:before{ /*只有图标的折叠-图标*/
position: relative; top: 0;}
.collapse .mw-collapsible-toggle:after, .collapse .mw-collapsible-text{ /*只有图标的折叠-其他部分*/
display: none;}
.collapse-title .mw-collapsible-toggle:after{ /*带有字样的折叠-图标*/
display: none;}
.collapse-title .mw-collapsible-text{ /*带有字样的折叠-其他部分*/
color: unset !important;
}
/* 页面非等距分栏 */
@media (min-width: 1084px){ /*电脑视图*/
.main-column-left{ /*主栏(在右)*/
float: left;
width: calc(100% - 320px);
margin-right: 15px;}}
@media (min-width: 1084px){ /*电脑视图*/
.main-column-right{ /*主栏(在左)*/
float: right;
width: calc(100% - 320px);
margin-right: 15px;}}
@media (min-width: 680px) and (max-width: 1083px){ /*平板视图*/
.side-column{ /*侧栏*/
column-count: 2;}}
.side-column{ /*侧栏*/
display: flow-root;
}
/* .column 分栏 */
@media (max-width: 600px){
.column.responsive{
column-count: 1 !important;
}
}
/* .non-at-style 干净的文字链接 */
#content .non-at-style a{ /*文字链接*/
padding-right: 0;
color: unset;
background-image: none;}
#content .non-at-style a:after{ /*图标*/
display: none;
}
/* .img-cover-fit 图片等比例填充 */
#content .img-cover-fit img{
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
/* .icon 行间图标*/
.icon img{
position: relative;
bottom: 1px;
}
/* .pictogram 形象图标 .img-px 像素图片*/
img[src*="%E5%BD%A2%E8%B1%A1"], .img-px{
image-rendering: pixelated;}
.skin-vector .pictogram img, .skin-vector .img-px{
image-rendering: auto;
}
/* .inner-box 嵌套盒子 */
.inner-box > *:first-child{
margin-top: 0;}
.inner-box > *:last-child{
margin-bottom: 0;}
.card .inner-box > ul, .card .inner-box > ol{
margin-inline-start: 18px;
}