更新全站样式至萌百2020年2月29日版本
imported>=海豚= 無編輯摘要 |
imported>=海豚= (更新全站样式至萌百2020年2月29日版本) |
||
| 第1行: | 第1行: | ||
/* | /* | ||
* | * 放置于这里的CSS将应用于所有皮肤 | ||
* 请尊重萌娘百科版权,以下代码除非注明均是管理员手敲出来的!!!复制需要注明源自萌娘百科,并且附上URL地址http://zh.moegirl.org/MediaWiki:Common.css | * 请尊重萌娘百科版权,以下代码除非注明均是管理员手敲出来的!!!复制需要注明源自萌娘百科,并且附上URL地址http://zh.moegirl.org/MediaWiki:Common.css | ||
* 版权协定:知识共享 署名-非商业性使用-相同方式共享 3.0 | * 版权协定:知识共享 署名-非商业性使用-相同方式共享 3.0 | ||
* 复制之后请把图片换成自己网站 | * 复制之后请把图片换成自己网站 上URL地址 ! | ||
*/ | */ | ||
/* | /* | ||
* vector界面定制 | * vector界面 、主标题字体 定制 ,参考Github添加了Emoji支持 | ||
* | * 更 改后 要同步到 [[MediaWiki:Gadget-GothicMoe.css]] | ||
*/ | */ | ||
body, | |||
#firstHeading { | |||
font-family: sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; | |||
font-family: | |||
} | } | ||
/* 主标题 | /* 主标题字型调整*/ | ||
#firstHeading { | #firstHeading { | ||
font-weight: 500; | font-weight: 500; | ||
padding-left: 0.25em; | padding-left: 0.25em; | ||
| 第42行: | 第38行: | ||
.clear-div { | .clear-div { | ||
clear: both; | clear: both; | ||
} | |||
/* 提升背景颜色纯度 */ | |||
div.vectorTabs ul li, | |||
#p-variants, | |||
#p-cactions { | |||
background-image: url(//img.moegirl.org/skin/tab-normal-fade.png); | |||
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5) 30%, rgba(255, 255, 255, 1)); | |||
background-color: transparent; | |||
} | |||
div.vectorTabs li.selected { | |||
background-image: url(//img.moegirl.org/skin/tab-current-fade.png); | |||
background-image:-webkit-linear-gradient(top, rgba(167, 215, 249, 0), rgba(167, 215, 249, .5) 30%, rgba(167, 215, 249, 1));/* rgba(167, 215, 249, 1) = #a7d7f9 */ | |||
background-color: transparent; | |||
} | |||
#p-variants-label, | |||
div.vectorTabs, | |||
div.vectorTabs span, | |||
div.vectorTabs ul, | |||
div#mw-head div.vectorMenu h3 { | |||
background-image: none; | |||
} | |||
/* 右上个人链接栏 */ | |||
div#p-personal { | |||
background-color: rgba(255, 255, 255, 0.8); | |||
padding: 5px 10px 5px 0; | |||
box-shadow: #666 0 1px 5px; | |||
} | |||
/* 右上通知处奇怪的数字移除 */ | |||
#pt-notifications-alert .mw-echo-notifications-badge, | |||
#pt-notifications-notice .mw-echo-notifications-badge { | |||
text-indent: -99999px; | |||
} | |||
#pt-notifications-alert .mw-echo-notifications-badge:after, | |||
#pt-notifications-notice .mw-echo-notifications-badge:after { | |||
text-indent: 0; | |||
} | |||
/* MW自带10em宽度,应该是留给测试链接的吧萌百没有就去掉 */ | |||
#p-personal ul { | |||
padding-left: 0; | |||
} | |||
/* 对齐搜索按钮 */ | |||
div#simpleSearch button#searchButton { | |||
padding-top: .1em; | |||
padding-bottom: .2em; | |||
padding-right: .1em; | |||
} | } | ||
/* 以下是使用flex模型的首页样式,用以应对float模式下容器高度不能统一的问题 */ | |||
.mainpage-container { | |||
display: flex; | |||
} | |||
.mainpage-container .mainpage-newsbox, | |||
.mainpage-container .mainpage-box { | |||
display: flex; | |||
flex-direction: column; | |||
} | |||
.mainpage-container .mainpage-newsbox { | |||
flex: 2 1 calc(200% / 3); | |||
} | |||
.mainpage-container .mainpage-box { | |||
flex: 1 1 calc(100% / 3); | |||
} | |||
.mainpage-container .mainpage-content, | |||
.mainpage-container .mainpage-1stcontent { | |||
flex: auto; | |||
} | |||
.mainpage-container .mainpage-title { | |||
flex: none; | |||
margin-right: -1px; | |||
} | |||
/* 调整侧边栏字体 */ | |||
div#mw-panel { | |||
font-size: 18px; | |||
/* mw-panel的宽度是10em,改了font-size以后也需要修改一下 */ | |||
width: 10.5rem; | |||
} | |||
/* 副标题 */ | /* 副标题 */ | ||
#siteSub { | #siteSub { | ||
| 第52行: | 第122行: | ||
text-align: right; | text-align: right; | ||
} | } | ||
/* 被点过的外部链接不变色 */ | /* 被点过的外部链接不变色 。采取和默认皮肤相同写法,以便override */ | ||
.mw-body a.external:visited { | |||
color: #36b; | color: #36b; | ||
} | } | ||
| 第60行: | 第130行: | ||
margin-right: 3px; | margin-right: 3px; | ||
} | } | ||
/* Extension:MultimediaViewer的半透明化修改 */ | |||
.mw-mmv-overlay { | |||
position: fixed; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
bottom: 0; | |||
background-color: rgba(0,0,0,0.8); | |||
opacity: 0.73; | |||
} | |||
body.mediawiki.mw-mmv-lightbox-open #mw-page-base, | |||
body.mediawiki.mw-mmv-lightbox-open #mw-head-base, | |||
body.mediawiki.mw-mmv-lightbox-open #mw-navigation, | |||
body.mediawiki.mw-mmv-lightbox-open #content, | |||
body.mediawiki.mw-mmv-lightbox-open #footer, | |||
body.mediawiki.mw-mmv-lightbox-open #globalWrapper { | |||
display: inherit; | |||
} | |||
body.mediawiki.mw-mmv-lightbox-open > * { | |||
display: inherit; | |||
} | |||
body.mediawiki.mw-mmv-lightbox-open > script, | |||
body.mediawiki.mw-mmv-lightbox-open > style { | |||
display: none; | |||
} | |||
body.mediawiki.mw-mmv-lightbox-open { | |||
overflow: hidden; | |||
} | |||
body .mw-mmv-wrapper { | |||
position: fixed; | |||
} | |||
/* mutilmediaViewer 信息栏修复 */ | |||
.mw-mmv-image-metadata-column.mw-mmv-image-metadata-desc-column { | |||
width: 30%; | |||
} | |||
.mw-mmv-image-metadata-column.mw-mmv-image-metadata-links-column { | |||
width: 70%; | |||
max-width: 70%; | |||
} | |||
ul.mw-mmv-image-links li { | |||
float: left; | |||
padding: .3em 1em; | |||
} | |||
div.mw-mmv-image-desc-div, | |||
div.mw-mmv-image-links-div{ | |||
display:block | |||
} | |||
div.metadata-panel-is-closed .mw-mmv-image-links li.mw-mmv-license-li { | |||
height:inherit; | |||
line-height:inherit; | |||
} | |||
/* 通用圆角框 */ | |||
.common-box { | |||
padding: .2em .4em; | |||
border: 1px solid #ddd; | |||
-moz-border-radius: 10px; | |||
-webkit-border-radius: 10px; | |||
-khtml-border-radius: 10px; | |||
-o-border-radius: 10px; | |||
-webkit-box-shadow: #666 0 2px 3px; | |||
-moz-box-shadow: #666 0 2px 3px; | |||
border-radius: 10px; | |||
box-shadow: #666 0 2px 3px; | |||
} | |||
/* info类模板 */ | /* info类模板 */ | ||
.infoBox { | .infoBox { | ||
| 第98行: | 第231行: | ||
word-wrap: break-word; | word-wrap: break-word; | ||
} | } | ||
/* 隐藏首页标题,空行,讨论、查看源代码tab */ | /* 隐藏首页标题,空行,讨论、查看源代码tab */ | ||
.page-Mainpage h1.firstHeading, | .page-Mainpage h1.firstHeading, | ||
| 第106行: | 第240行: | ||
display: none; | display: none; | ||
} | } | ||
/* 黑幕模板配合CSS */ | /* 黑幕模板配合CSS */ | ||
/* 把这几行单独拎出来写,否则会被Firefox合并到“.heimu a”这条规则,然后又被上面的“点过外链不变色”规则override */ | /* 把这几行单独拎出来写,否则会被Firefox合并到“.heimu a”这条规则,然后又被上面的“点过外链不变色”规则override */ | ||
| 第126行: | 第259行: | ||
body:not(.heimu_toggle_on) .heimu:active, | body:not(.heimu_toggle_on) .heimu:active, | ||
body:not(.heimu_toggle_on) .heimu.off { | body:not(.heimu_toggle_on) .heimu.off { | ||
transition: color .13s linear; | |||
color: white; | color: white; | ||
} | } | ||
| 第132行: | 第266行: | ||
body:not(.heimu_toggle_on) .heimu.off a, | body:not(.heimu_toggle_on) .heimu.off a, | ||
body:not(.heimu_toggle_on) a:hover .heimu.off { | body:not(.heimu_toggle_on) a:hover .heimu.off { | ||
transition: color .13s linear; | |||
color: lightblue; | color: lightblue; | ||
} | } | ||
| 第140行: | 第275行: | ||
body:not(.heimu_toggle_on) .heimu.off .new:hover, | body:not(.heimu_toggle_on) .heimu.off .new:hover, | ||
body:not(.heimu_toggle_on) .new:hover .heimu.off { | body:not(.heimu_toggle_on) .new:hover .heimu.off { | ||
transition: color .13s linear; | |||
color: #BA0000; | color: #BA0000; | ||
} | } | ||
/* 名字空间改变背景色 */ | |||
.ns-0 div#content, | |||
.ns-0 div#p-cactions li a:hover, | |||
.ns-0 div#p-cactions li.selected a, | |||
.ns-0 div#content div.thumb { | |||
background-color: rgba(255,255,255,0.8); | |||
} | |||
div#content, | |||
div#p-cactions li a:hover, | |||
div#p-cactions li.selected a, | |||
div#content div.thumb { | |||
background-color: rgba(247,251,255,0.8); | |||
} | |||
/* 导航条(完全没有apple风格的apple风面包屑orz) 来源:http://www.jankoatwarpspeed.com/examples/breadcrumb/ */ | |||
#breadcrumb { | |||
background-image: url(//img.moegirl.org/breadcrumb/bc_bg.png); | |||
color: red; | |||
border: solid 1px #cacaca; | |||
border-radius: 10px; | |||
overflow: hidden; | |||
} | |||
#breadcrumb span { | |||
float: left; | |||
padding-left: 10px; | |||
} | |||
#breadcrumb a { | |||
display: block; | |||
background: url(//img.moegirl.org/breadcrumb/bc_separator.png) no-repeat right; | |||
padding-right: 15px; | |||
color: #454545; | |||
} | |||
#breadcrumb a:hover { | |||
color: #35acc5; | |||
} | |||
/* 回到顶部 */ | /* 回到顶部 */ | ||
.backToTop { | .backToTop { | ||
| 第162行: | 第329行: | ||
opacity: .6; | opacity: .6; | ||
filter: Alpha(opacity=60); | filter: Alpha(opacity=60); | ||
z-index: 73; | |||
} | } | ||
/* | .mw-mmv-lightbox-open .backToTop { | ||
display: none !important; | |||
} | |||
/* 信息模板的css */ | |||
.infotemplatebox { | .infotemplatebox { | ||
float: right; | float: right; | ||
| 第174行: | 第345行: | ||
word-break: break-all; | word-break: break-all; | ||
clear: right; | clear: right; | ||
} | } | ||
/* 编辑区样式 */ | /* 编辑区样式 */ | ||
| 第271行: | 第426行: | ||
.navbox .collapseButton { | .navbox .collapseButton { | ||
width: 6em; | width: 6em; | ||
} | |||
/* Fix by case : Rev 1327309 ([[Special:Permalink/1327309]]) | |||
Address alignment issue of nested tabs in Navbox */ | |||
.navbox .TabLabel { | |||
text-align: left; | |||
} | } | ||
/* Tabs */ | /* Tabs */ | ||
.tab .TabLabelText { | .tab .TabLabelText { | ||
border-top: 3px solid transparent; | |||
padding: 1px; | padding: 1px; | ||
background: #fff; | |||
border-left: 1px solid transparent; | |||
border-right: 1px solid transparent; | |||
cursor: pointer; | cursor: pointer; | ||
flex: none; | |||
} | } | ||
.tab .TabLabel { | .tab .TabLabel { | ||
| 第286行: | 第450行: | ||
-o-user-select: none; | -o-user-select: none; | ||
user-select: none; | user-select: none; | ||
display: flex; | |||
flex-wrap: wrap; | |||
} | } | ||
.tab .TabLabelText.selected { | .tab .TabLabelText.selected { | ||
| 第322行: | 第488行: | ||
.sysop-show, | .sysop-show, | ||
.accountcreator-show { | .accountcreator-show { | ||
display: none; | display: none !important; | ||
} | } | ||
/* wikitable green */ | /* wikitable green */ | ||
| 第348行: | 第514行: | ||
body.ns-2 div#catlinks { | body.ns-2 div#catlinks { | ||
display: none !important; | display: none !important; | ||
} | |||
/* 仅手机版显示支持 */ | |||
.mobileonly { | |||
display: none !important; | |||
} | |||
/* 编辑请求 */ | |||
.editRequest { | |||
text-align: center; | |||
border: 1px solid #ddd; | |||
border-radius: 3px; | |||
margin:1em 2.5em; | |||
padding: 1em; | |||
background: white; | |||
} | |||
.editRequest .newComment { | |||
white-space: nowrap; | |||
background: #347bff; | |||
color: #fff; | |||
border: 1px solid #347bff; | |||
text-shadow: 0 1px rgba(0,0,0,0.1); | |||
font-family: inherit; | |||
font-size: 1em; | |||
min-width: 4em; | |||
max-width: 28.75em; | |||
padding: .5em 1em; | |||
margin: 0; | |||
border-radius: 2px; | |||
-webkit-box-sizing: border-box; | |||
-moz-box-sizing: border-box; | |||
box-sizing: border-box; | |||
-webkit-appearance: none; | |||
zoom: 1; | |||
vertical-align: middle; | |||
text-align: center; | |||
font-weight: bold; | |||
cursor: pointer; | |||
} | |||
/* 注释里的列表 */ | |||
.reference-text > ul.listInRef, | |||
.reference-text > ol.listInRef { | |||
margin: -1.5em 0 0 2em; | |||
} | } | ||
/* | /* | ||
| 第540行: | 第747行: | ||
margin-left: 52%; | margin-left: 52%; | ||
} | } | ||
} | |||
/* | |||
* 感谢[[User:Great Brightstar]]的贡献,源码来自[[special:diff/834104]] | |||
* 以下是原注释: | |||
* 在这里使用 font-feature-settings 属性会让使用“lang”标签的元素强制使用 OpenType 技术显示本地化的变体字(通过激活 locl 标签,即便浏览器本身不直接激活)。 | |||
* 如果你使用思源黑体(非 CN、JP、KO、TW 版)、Noto Sans CJK 显示文字的话就有可能看到效果。 | |||
* 关于上述这个 CSS 属性的用法,参阅:https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings 注意:此文引用的 OpenType Feature Tags list 同样需要关注。 | |||
* 如有任何问题请即刻禁用之 | |||
* Nbdd0121: 将原来的[lang]改为span[lang],这样就不会影响非{{lang}}的[lang]了 (e.g. div#mw-content-text) | |||
*/ | |||
span[lang] { | |||
font-family: initial; | |||
font-feature-settings: "locl" on; | |||
-webkit-font-feature-settings: "locl" on; | |||
} | |||
[style*="font"] span[lang] { | |||
font-family: inherit; | |||
} | |||
/* 日语斜体 */ | |||
@font-face { | |||
font-family: JapaneseItalic; | |||
src: local(meiryo); | |||
} | |||
i span[lang=ja i], | |||
span[lang=ja i] i, | |||
[style*=italic i] span[lang=ja i], | |||
span[lang=ja i] [style*=italic i] { | |||
font-family: JapaneseItalic; | |||
} | |||
[style*="font"] i span[lang=ja i], | |||
[style*="font"] span[lang=ja i] i, | |||
[style*="font"] [style*=italic i] span[lang=ja i], | |||
[style*="font"] span[lang=ja i] [style*=italic i] { | |||
font-family: inherit; | |||
} | |||
/* 折叠表格的定位处理 | |||
body:not(.ns--1):not(.ns--2) .mw-collapsible > tbody > tr:first-child > th:last-child { | |||
position: relative; | |||
padding-right: 0; | |||
} | |||
body:not(.ns--1):not(.ns--2) .mw-collapsible:not(.mw-collapsed) > tbody > tr:first-child > th:last-child { | |||
position: relative; | |||
padding-left: 4em; | |||
padding-right: 4em; | |||
} | |||
body:not(.ns--1):not(.ns--2) .mw-collapsible > tbody > tr:first-child > th:last-child > .mw-collapsible-toggle { | |||
margin: 0 .5em; | |||
} | |||
body:not(.ns--1):not(.ns--2) .mw-collapsible:not(.mw-collapsed) > tbody > tr:first-child > th:last-child > .mw-collapsible-toggle { | |||
position: absolute; | |||
right: .5em; | |||
top: .15em; | |||
float: none; | |||
margin: 0; | |||
} */ | |||
/* 大家族模板下折叠表格的定位处理 | |||
body:not(.ns--1):not(.ns--2) .navbox .mw-collapsible > tbody > tr:first-child > th:last-child { | |||
position: relative; | |||
padding-right: 0; | |||
padding-left: 0; | |||
} | |||
body:not(.ns--1):not(.ns--2) .navbox .mw-collapsible .mw-collapsible-toggle { | |||
margin-left: 0; | |||
} | |||
body:not(.ns--1):not(.ns--2) .navbox .mw-collapsible > tbody > tr:first-child > th:last-child > [style*="float:left"] { | |||
position: absolute; | |||
left: 1em; | |||
top: 0; | |||
float: none; | |||
} | |||
body:not(.ns--1):not(.ns--2) .navbox .mw-collapsible > tbody > tr:first-child > th:last-child > .mw-collapsible-toggle { | |||
position: absolute; | |||
right: 1em; | |||
top: 0; | |||
float: none; | |||
margin-left: 0; | |||
} | |||
body:not(.ns--1):not(.ns--2) .navbox .mw-collapsible:not(.mw-collapsed) > tbody > tr:first-child > th:last-child > .mw-collapsible-toggle:last-child { | |||
position: static; | |||
float: right; | |||
margin-right: -3.5em; | |||
} */ | |||
/* wikitable 的 caption */ | |||
.wikitable.mw-collapsible caption { | |||
border: 1px solid rgba(170, 170, 170, 0.37); | |||
border-bottom-width: 0; | |||
background-color: rgb(249,249,249); | |||
} | |||
.wikitable.mw-collapsible.mw-collapsed caption { | |||
border-bottom-width: 1px; | |||
} | |||
/* vectorMenu 的排序 */ | |||
div.vectorMenu ul { | |||
display: flex; | |||
flex-flow: column; | |||
} | |||
/* 分类页同开头的页面的列表不分段 */ | |||
.mw-category-group { | |||
-webkit-column-break-inside: avoid; | |||
page-break-inside: avoid; | |||
break-inside: avoid; | |||
} | |||
.mw-category-group:nth-child(1):nth-last-child(1), /* 只有一个列表时 */ | |||
.mw-category-group:nth-child(1):nth-last-child(2), /* 只有两个列表时 */ | |||
.mw-category-group:nth-child(2):nth-last-child(1) { /* 只有两个列表时 */ | |||
-webkit-column-break-inside: auto; | |||
page-break-inside: auto; | |||
break-inside: auto; | |||
} | } | ||
/* R18模板 */ | /* R18模板 */ | ||