跳转到内容

MediaWiki:Common.css

来自CountryHumans中文百科
Maitian MaiLin留言 | 贡献2025年1月21日 (二) 00:47的版本 (复制粘贴……)
(差异) ←上一版本 | 最后版本 (差异) | 下一版本→ (差异)

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

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