MediaWiki:Common.css：修订间差异
信息框样式 |
无编辑摘要 |
||
| （未显示同一用户的17个中间版本） | |||
| 第6行： | 第6行： | ||
.fuzzy { | .fuzzy { | ||
filter: blur(3px); | filter: blur(3px); | ||
text-shadow: 0px 0px 5px white; | text-shadow: 0px 0px 5px white;s | ||
transition: all 0.1s ease-in-out; | transition: all 0.1s ease-in-out; | ||
} | } | ||
| 第133行： | 第133行： | ||
.hlist li li li { | .hlist li li li { | ||
font-size: x-small; | font-size: x-small; | ||
} | |||
/* 无序列表 */ | |||
.plainlist ol, | |||
.plainlist ul { | |||
line-height: inherit; | |||
list-style: none; | |||
margin: 0; | |||
padding: 0; /* Reset Minerva default */ | |||
} | |||
.plainlist ol li, | |||
.plainlist ul li { | |||
margin-bottom: 0; | |||
} | } | ||
/* [[Template:SimpleNavbox]] */ | /* [[Template:SimpleNavbox]] */ | ||
| 第230行： | 第243行： | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
max-width: 40em; | max-width: 40em; | ||
margin: 12px 0; | |||
} | } | ||
.wm-msg-bar { | .wm-msg-bar { | ||
| 第237行： | 第251行： | ||
.wm-msg-side { | .wm-msg-side { | ||
color: #eee; | color: #eee; | ||
padding: 0.5em 0; | padding: 0.5em 0; | ||
font-size: 1.5em; | font-size: 1.5em; | ||
| 第243行： | 第256行： | ||
width: 2.5em; | width: 2.5em; | ||
justify-content: center; | justify-content: center; | ||
} | |||
.wm-msg-main { | |||
margin: 0.75em 0.25em; | |||
position: relative; | |||
display: block; | |||
width: calc(100% - 5em); | |||
align-self: baseline; | |||
} | } | ||
.wm-msg-title { | .wm-msg-title { | ||
| 第253行： | 第273行： | ||
padding-top: 0.5em; | padding-top: 0.5em; | ||
display: block; | display: block; | ||
} | |||
/* [[Template:Column]] */ | |||
.div-col { | |||
margin-top: 0.3em; | |||
column-width: 30em; | |||
} | |||
.div-col-small { | |||
font-size: 90%; | |||
} | |||
.div-col-rules { | |||
column-rule: 1px solid #aaa; | |||
} | |||
/* Reset top margin for lists in div col */ | |||
.div-col dl, | |||
.div-col ol, | |||
.div-col ul { | |||
margin-top: 0; | |||
} | |||
/* Avoid elements breaking between columns | |||
See also Template:No col break */ | |||
.div-col li, | |||
.div-col dd { | |||
page-break-inside: avoid; /* Removed from CSS in favor of break-inside c. 2020 */ | |||
break-inside: avoid-column; | |||
} | |||
/* Unbulleted lists */ | |||
.plainlist ol, | |||
.plainlist ul { | |||
line-height: inherit; | |||
list-style: none; | |||
margin: 0; | |||
} | |||
.plainlist ol li, | |||
.plainlist ul li { | |||
margin-bottom: 0; | |||
} | |||
/* 文章翻译表 */ | |||
.article-table { | |||
width: 100%; | |||
border-spacing: 20px 10px; | |||
} | |||
.article-table th:not([colspan="2"]) { | |||
width: 5%; | |||
text-align: left; | |||
word-break: keep-all; | |||
} | |||
.article-table td:nth-child(2):not(:last-child), | |||
.article-table td:nth-child(4) { | |||
width: 45%; | |||
} | |||
@media screen and (max-width: 719px) { | |||
.article-table th, | |||
.article-table td { | |||
display: block; | |||
padding-top: 1em; | |||
word-break: normal; | |||
width: 100% !important; | |||
} | |||
} | |||
.article-table .gallerytext { | |||
display: none; | |||
} | |||
/* exlink 设置 favicon 尺寸 */ | |||
.exlink-ico img { | |||
width: 16px; | |||
} | |||
.keep-all { | |||
word-break: keep-all; | |||
} | |||
/* 歌单 */ | |||
.setlist, .tracklist { | |||
width: 100%; | |||
max-width: 600px; | |||
} | |||
.setlist th, .setlist td:last-child, | |||
.tracklist th, .tracklist td:last-child { | |||
padding: 0 0.4em; | |||
} | |||
.setlist td:first-child:not(:last-child), | |||
.tracklist td:first-child:not(:last-child) { | |||
width: 24px; | |||
text-align: center; | |||
vertical-align: top; | |||
} | |||
.setlist td:only-child, | |||
.tracklist td:only-child { | |||
background: #E3E6EA; | |||
} | |||
/* 歌词系列模板 */ | |||
.Lyrics-has-ruby .Lyrics-original, | |||
.Lyrics-has-ruby .Lyrics-translated, | |||
.Lyrics-has-ruby .Lyrics-column { | |||
line-height: 2.1; | |||
} | |||
.Lyrics-no-ruby .Lyrics-original, | |||
.Lyrics-no-ruby .Lyrics-translated, | |||
.Lyrics-no-ruby .Lyrics-column { | |||
vertical-align: top; | |||
} | |||
.Lyrics .Lyrics-original, | |||
.Lyrics .Lyrics-translated { | |||
width: 100%; | |||
display: inline-block; | |||
white-space: pre-wrap; | |||
} | |||
.Lyrics .Lyrics-column { | |||
white-space: pre-wrap; | |||
} | |||
.Lyrics .Lyrics-column-suppressed { | |||
display: inline-block; | |||
} | |||
.Lyrics .Lyrics-column-wrapped { | |||
width: 100%; | |||
display: none; | |||
} | |||
@media all and ( min-width: 720px ) { | |||
.Lyrics { | |||
display: flow-root; | |||
min-width: 480px; | |||
} | |||
.Lyrics-has-translate .Lyrics-original, | |||
.Lyrics-has-translate .Lyrics-translated { | |||
width: 49.85%; | |||
} | |||
} | |||
@media all and ( max-width: 900px ) { | |||
.Lyrics { | |||
min-width: 100%; | |||
} | |||
.Lyrics .Lyrics-column-suppressed { | |||
display: none; | |||
} | |||
.Lyrics .Lyrics-column-wrapped { | |||
display: block; | |||
} | |||
} | |||
.Lyrics-gradient ruby, .Lyrics-gradient rb, .Lyrics-gradient rt { | |||
background: inherit; | |||
} | |||
@media screen and (max-device-width: 720px){ | |||
.Lyrics-original span[title]:not(.NoTitlebox):hover, | |||
.Lyrics-translated span[title]:not(.NoTitlebox):hover, | |||
.Lyrics-column span[title]:not(.NoTitlebox):hover { | |||
position: relative; | |||
} | |||
/* title="全员"自带class="NoTitlebox" */ | |||
.Lyrics-original span[title]:not(.NoTitlebox):hover::before, | |||
.Lyrics-translated span[title]:not(.NoTitlebox):hover::before, | |||
.Lyrics-column span[title]:not(.NoTitlebox):hover::before { | |||
content: attr(title); | |||
position: absolute; | |||
bottom: 100%; | |||
left: 0; | |||
background-color: white; | |||
white-space: nowrap; | |||
font-size: 13px; | |||
text-shadow: none; | |||
border: 1px #666 solid; | |||
box-sizing: border-box; | |||
padding: 1px 2px; | |||
box-shadow: 1px 1px 1px #ccc; | |||
color: black; | |||
} | |||
} | |||
/* 按钮 */ | |||
.photrans-button { | |||
display: flow-root; | |||
margin-bottom: 0.5em; | |||
} | |||
.photrans-button > div { | |||
position: relative; | |||
width: calc(4em + 2ch); | |||
height: 1em; | |||
line-height: 1; | |||
} | |||
.photrans-button > div > span { | |||
position: absolute; | |||
top: 0; | |||
width: 100%; | |||
} | |||
.photrans-button .mw-collapsed { | |||
display: none; /* 移动版提前加载样式 */ | |||
} | |||
/* 歌词 */ | |||
.photrans-button ~ .Lyrics ruby, | |||
.photrans-button ~ .Tabs .Lyrics ruby { | |||
white-space: normal; /* Safari */ | |||
} | |||
.photrans-button ~ .Lyrics rt, | |||
.photrans-button ~ .Tabs .Lyrics rt { | |||
font-size: 0.75em; | |||
font-feature-settings: normal; | |||
-webkit-user-select: none; | |||
user-select: none; | |||
} | |||
.photrans-button ~ .Lyrics ruby > span, | |||
.photrans-button ~ .Tabs .Lyrics ruby > span { | |||
display: inline-block; | |||
font-size: 0; | |||
width: 0; | |||
} | |||
/* 开关注音 */ | |||
.photrans-button + .mw-collapsed ~ .Lyrics rb span, | |||
.photrans-button + .mw-collapsed ~ .Tabs .Lyrics rb span { | |||
letter-spacing: 0 !important; | |||
margin-left: 0 !important; | |||
} | |||
.photrans-button + .mw-collapsed ~ .Lyrics rt > span:first-child, | |||
.photrans-button + .mw-collapsed ~ .Tabs .Lyrics rt > span:first-child, | |||
.photrans-off { | |||
font-size: 0; | |||
} | |||
.photrans-s { | |||
visibility: hidden; | |||
font-size: 1.333em; | |||
} | |||
.mw-collapsed ~ .Lyrics .photrans-off { | |||
font-size: 1em; | |||
} | |||
/*-------------------------< P R O T E C T I O N I C O N >-------------------- | |||
the following line controls the page-protection icon in the upper right corner | |||
it must remain within this comment | |||
{{sandbox other||}} | |||
*/ | |||
/*-------------------------< O V E R R I D E S >-------------------------------- | |||
cs1|2 references are wrapped in <cite>...</cite> tags. Some wikis have not | |||
chosen to override the generic user agent italic styling as en.wiki has. This | |||
(untested) styling should override the user agent default when cs1|2 templates | |||
are rendered. | |||
Similarly, some languages use different quotation punctuation so that setting | |||
is also made available here. | |||
*/ | |||
cite.citation { | |||
font-style: inherit; /* Remove italics for <cite> */ | |||
/* Break long urls, etc., rather than overflowing box */ | |||
word-wrap: break-word; | |||
} | |||
.citation q { | |||
/* Straight quote marks for <q>; keep same as [[MediaWiki:Common.css]] */ | |||
quotes: '"' '"' "'" "'"; | |||
} | |||
/* Highlight linked elements (such as clicked references) in blue */ | |||
.citation:target { | |||
/* ignore the linter - all browsers of interest implement this */ | |||
background-color: rgba(0, 127, 255, 0.133); | |||
} | |||
/* ID and URL access | |||
Both core and Common.css have selector .mw-parser-output a[href$=".pdf"].external | |||
for PDF pages. All TemplateStyles pages are hoisted to .mw-parser-output. We need | |||
to have specificity equal to a[href$=".pdf"].external for locks to override PDF icon. | |||
That's essentially 2 classes and 1 element. | |||
the .id-lock-... selectors are for use by non-citation templates like | |||
{{Catalog lookup link}} | |||
bg-size `contain` in Minerva and Timeless is too large, so we set a size for them | |||
and then exclude them later | |||
*/ | |||
.id-lock-free.id-lock-free a { | |||
background: url(//upload.wikimedia.org/wikipedia/commons/6/65/Lock-green.svg) | |||
right 0.1em center/9px no-repeat; | |||
} | |||
.id-lock-limited.id-lock-limited a, | |||
.id-lock-registration.id-lock-registration a { | |||
background: url(//upload.wikimedia.org/wikipedia/commons/d/d6/Lock-gray-alt-2.svg) | |||
right 0.1em center/9px no-repeat; | |||
} | |||
.id-lock-subscription.id-lock-subscription a { | |||
background: url(//upload.wikimedia.org/wikipedia/commons/a/aa/Lock-red-alt-2.svg) | |||
right 0.1em center/9px no-repeat; | |||
} | |||
/* Wikisource | |||
Wikisource icon when |chapter= or |title= is wikilinked to Wikisource | |||
as in cite wikisource | |||
*/ | |||
.cs1-ws-icon a { | |||
background: url(//upload.wikimedia.org/wikipedia/commons/4/4c/Wikisource-logo.svg) | |||
right 0.1em center/12px no-repeat; | |||
} | |||
body:not(.skin-timeless):not(.skin-minerva) .id-lock-free a, | |||
body:not(.skin-timeless):not(.skin-minerva) .id-lock-limited a, | |||
body:not(.skin-timeless):not(.skin-minerva) .id-lock-registration a, | |||
body:not(.skin-timeless):not(.skin-minerva) .id-lock-subscription a, | |||
body:not(.skin-timeless):not(.skin-minerva) .cs1-ws-icon a { | |||
background-size: contain; | |||
/* Common.css has a padding set for PDF URLs. bg-contain expands to the | |||
* size of the padding which makes the icons very large. we "reset" the | |||
* padding here. 1em picked out of a hat based on console having a similar | |||
* rule from elsewhere | |||
*/ | |||
padding: 0 1em 0 0; | |||
} | |||
/* Errors and maintenance */ | |||
.cs1-code { | |||
/* <code>...</code> style override: mediawiki's css definition is specified here: | |||
https://git.wikimedia.org/blob/mediawiki%2Fcore.git/ | |||
69cd73811f7aadd093050dbf20ed70ef0b42a713/skins%2Fcommon%2FcommonElements.css#L199 | |||
*/ | |||
color: inherit; | |||
background: inherit; | |||
border: none; | |||
padding: inherit; | |||
} | |||
.cs1-hidden-error { | |||
display: none; | |||
color: var(--color-error, #d33); | |||
} | |||
.cs1-visible-error { | |||
color: var(--color-error, #d33); | |||
} | |||
.cs1-maint { | |||
display: none; | |||
color: #085; | |||
margin-left: 0.3em; | |||
} | |||
/* kerning */ | |||
.cs1-kern-left { | |||
padding-left: 0.2em; | |||
} | |||
.cs1-kern-right { | |||
padding-right: 0.2em; | |||
} | |||
/* selflinks – avoid bold font style when cs1|2 template links to the current page */ | |||
.citation .mw-selflink { | |||
font-weight: inherit; | |||
} | |||
@media screen { | |||
/* Small text size | |||
Set small text size in one place. 0.95 (here) * 0.9 (from references list) is | |||
~0.85, which is the lower bound for size for accessibility. Old styling for this | |||
was just 0.85. We could write the rule so that when this template is inside | |||
references/reflist, only then does it multiply by 0.95; else multiply by 0.85 */ | |||
.cs1-format { | |||
font-size: 95%; | |||
} | |||
html.skin-theme-clientpref-night .cs1-maint { | |||
color: #18911f; | |||
} | |||
} | |||
@media screen and (prefers-color-scheme: dark) { | |||
html.skin-theme-clientpref-os .cs1-maint { | |||
color: #18911f; | |||
} | |||
} | } | ||