MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| (28 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
@import url("https://cdnjs.cloudflare.com/ajax/libs/fork-awesome/1.2.0/css/fork-awesome.min.css"); | @import url("https://cdnjs.cloudflare.com/ajax/libs/fork-awesome/1.2.0/css/fork-awesome.min.css"); | ||
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"); | |||
@import url(https://fonts.googleapis.com/css?family=Playfair+Display|Droid+Sans+Mono|Roboto:400,400italic,700italic,700); | @import url(https://fonts.googleapis.com/css?family=Playfair+Display|Droid+Sans+Mono|Roboto:400,400italic,700italic,700); | ||
@import url("https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.default.css"); | @import url("https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.default.css"); | ||
| Line 55: | Line 56: | ||
div#p-Contribute a::before, | div#p-Contribute a::before, | ||
div#p-Community a::before, | div#p-Community a::before, | ||
div#p-Videos a::before, | |||
nav#p-Prototypes a::before, | nav#p-Prototypes a::before, | ||
nav#p-Contribute a::before, | nav#p-Contribute a::before, | ||
| Line 75: | Line 77: | ||
} | } | ||
li#n-\.\.-visually a::before { | li#n-\.\.-visually a::before, a#n-\.\.-visually .minerva-icon::before { | ||
content: "\f06e"; | content: "\f06e"; | ||
font: var(--fa-font-solid) | |||
} | } | ||
li#n-\.\.-as-a-table a::before { | li#n-\.\.-as-a-table a::before, a#n-\.\.-as-a-table .minerva-icon::before { | ||
content: "\f0ce"; | content: "\f0ce"; | ||
font: var(--fa-font-solid) | |||
} | } | ||
li#n-\.\.-by-lot a::before { | li#n-\.\.-by-lot a::before, a#n-\.\.-by-lot .minerva-icon::before { | ||
content: "\f187"; | content: "\f187"; | ||
font: var(--fa-font-solid) | |||
} | } | ||
li#n-How-to-contribute a::before { | li#n-\.\.-by-hardware a::before, a#n-\.\.-by-hardware .minerva-icon::before { | ||
content: "\f2db"; | |||
font: var(--fa-font-solid) | |||
} | |||
li#n-How-to-contribute a::before, a#n-How-to-contribute .minerva-icon::before { | |||
content: "\f059"; | content: "\f059"; | ||
font: var(--fa-font-solid) | |||
} | } | ||
li#n-Add-a-prototype a::before { | li#n-Add-a-prototype a::before, a#n-Add-a-prototype .minerva-icon::before { | ||
content: "\f067"; | content: "\f067"; | ||
font: var(--fa-font-solid) | |||
} | } | ||
li#n-To-do a::before { | li#n-Add-a-video a::before, a#n-Add-a-video .minerva-icon::before { | ||
content: "\f067"; | |||
font: var(--fa-font-solid) | |||
} | |||
li#n-Add-assets a::before, a#n-Add-assets .minerva-icon::before { | |||
content: "\f067"; | |||
font: var(--fa-font-solid) | |||
} | |||
li#n-To-do a::before, a#n-To-do .minerva-icon::before { | |||
content: "\f0ca"; | content: "\f0ca"; | ||
font: var(--fa-font-solid) | |||
} | } | ||
li#n-Forums a::before { | li#n-Forums a::before, a#n-Forums .minerva-icon::before { | ||
content: "\f086"; | content: "\f086"; | ||
font: var(--fa-font-solid) | |||
} | } | ||
li#n-Discord a::before { | li#n-Discord a::before, a#n-Discord .minerva-icon::before { | ||
content: "\f2ee"; | content: "\f2ee"; | ||
} | } | ||
li#n-IRC a::before { | li#n-IRC a::before, a#n-IRC .minerva-icon::before { | ||
content: "\f292"; | content: "\f292"; | ||
font: var(--fa-font-solid) | |||
} | } | ||
li#n-Twitter a::before { | li#n-Twitter a::before, a#n-Twitter .minerva-icon::before { | ||
content: "\f081"; | content: "\f081"; | ||
font: var(--fa-font-brands) | |||
} | |||
li#n-BlueSky a::before, a#n-BlueSky .minerva-icon::before { | |||
content: "\e6a3"; | |||
font: var(--fa-font-brands) | |||
} | } | ||
li#n-Facebook a::before { | |||
li#n-Facebook a::before, a#n-Facebook .minerva-icon::before { | |||
content: "\f082"; | content: "\f082"; | ||
font: var(--fa-font-brands) | |||
} | } | ||
li#n-Tumblr a::before { | li#n-Tumblr a::before, a#n-Tumblr .minerva-icon::before { | ||
content: "\f174"; | content: "\f174"; | ||
font: var(--fa-font-brands) | |||
} | } | ||
li#n-YouTube a::before { | li#n-YouTube a::before, a#n-YouTube .minerva-icon::before { | ||
content: "\f166"; | content: "\f166"; | ||
font: var(--fa-font-brands) | |||
} | } | ||
li#n-Discord a:hover::before { color: #738adb; } | li#n-Discord a:hover::before, a#n-Discord:hover .minerva-icon::before { color: #738adb; } | ||
li#n-Twitter a:hover::before { color: #55acee; } | li#n-Twitter a:hover::before, a#n-Twitter:hover .minerva-icon::before { color: #55acee; } | ||
li#n-Facebook a:hover::before { color: #3b5998; } | li#n-Facebook a:hover::before, a#n-Facebook:hover .minerva-icon::before { color: #3b5998; } | ||
li#n-Tumblr a:hover::before { color: #35465c; } | li#n-BlueSky a:hover::before, a#n-BlueSky:hover .minerva-icon::before { color: #208bfe; } | ||
li#n-YouTube a:hover::before { color: #e52d27; } | li#n-Tumblr a:hover::before, a#n-Tumblr:hover .minerva-icon::before { color: #35465c; } | ||
li#n-YouTube a:hover::before, a#n-YouTube:hover .minerva-icon::before { color: #e52d27; } | |||
pre, span.hex-snippet, span.pre | pre, span.hex-snippet, span.pre | ||
| Line 183: | Line 219: | ||
background-color:#DA7D2E; | background-color:#DA7D2E; | ||
} | } | ||
tr.infobox-title.infobox-demo | |||
{ | |||
background-color:#933; | |||
} | |||
tr.infobox-title.infobox-assets | |||
{ | |||
background-color:#14B53F; | |||
} | |||
tr.infobox-title > th | tr.infobox-title > th | ||
| Line 212: | Line 259: | ||
float: left; | float: left; | ||
width: 50%; | width: 50%; | ||
} | |||
div.panel.wata div.panel-body { | |||
text-align: left; | |||
} | } | ||
div.panel-heading | div.panel-heading | ||
{ | { | ||
background-color: # | background-color: #999; | ||
color: #f8f8f8; | color: #f8f8f8; | ||
padding: 0.25em 0.5em; | padding: 0.25em 0.5em; | ||
} | |||
div.panel-heading:first-child { | |||
background-color: #666; | |||
} | |||
:where(div.panel.navbox) div.panel-heading:first-child { | |||
border-top-left-radius: 3px; | border-top-left-radius: 3px; | ||
border-top-right-radius: 3px; | border-top-right-radius: 3px; | ||
} | |||
:where(div.panel.navbox ~ div.panel.navbox) div.panel-heading:first-child { | |||
border-top-left-radius: 0px; | |||
border-top-right-radius: 0px; | |||
} | |||
div.panel.navbox:last-of-type div.panel-body:last-child { | |||
border-bottom-left-radius: 3px; | |||
border-bottom-right-radius: 3px; | |||
} | } | ||
div.panel-body | div.panel-body | ||
| Line 225: | Line 288: | ||
background-color: #eee; | background-color: #eee; | ||
padding: 0.25em 0.5em; | padding: 0.25em 0.5em; | ||
} | } | ||
| Line 235: | Line 296: | ||
float: none; | float: none; | ||
clear: both; | clear: both; | ||
margin: 0 | margin: 0 auto; | ||
padding: 1em; | padding: 0; | ||
} | |||
div.panel.navbox:first-of-type | |||
{ | |||
padding-top: 2em; | |||
} | |||
div.panel.navbox:last-of-type | |||
{ | |||
padding-bottom: 1em; | |||
} | } | ||
div.panel.navbox ul | div.panel.navbox ul | ||
| Line 365: | Line 434: | ||
padding: 1em 1.5em; | padding: 1em 1.5em; | ||
} | } | ||
pre, .mw-code { | |||
overflow-x: auto !important; | |||
} | |||
li > .smw-field { | |||
padding-left: 4px; | |||
padding-right: 2px; | |||
} | |||
.msgbox { | |||
border-radius: 4px; | |||
padding: 10px 20px; | |||
} | |||
/* News items */ | |||
.front-page .cell dd b { | |||
min-width: 100px; | |||
display: inline-block; | |||
text-align: right; | |||
} | |||
.masonry { | |||
display: grid; | |||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); | |||
grid-auto-rows: 1px; | |||
gap: 4px; | |||
} | |||
.masonry-item { | |||
align-self: start; | |||
text-align: center; | |||
font-size: 12px; | |||
} | |||
/* Page Forms: stack labels above fields on narrow screens instead of a two-column table */ | |||
@media screen and (max-width: 720px) { | |||
table.formtable, | |||
table.formtable tbody, | |||
table.formtable tr, | |||
table.formtable th, | |||
table.formtable td { | |||
display: block; | |||
width: auto; | |||
box-sizing: border-box; | |||
} | |||
table.formtable th { | |||
text-align: left; | |||
padding: 0.8em 0 0.2em; | |||
} | |||
table.formtable th[colspan] { | |||
text-align: center; | |||
} | |||
table.formtable td { | |||
padding: 0 0 0.4em; | |||
} | |||
table.formtable .createboxInput { | |||
width: 100%; | |||
} | |||
#pfForm input[type="text"], | |||
#pfForm select, | |||
#pfForm textarea { | |||
max-width: 100%; | |||
} | |||
/* Page Forms gives the combobox an inline pixel width and a negative top margin | |||
meant to line it up with the label cell beside it */ | |||
#pfForm .oo-ui-comboBoxInputWidget { | |||
width: 100% !important; | |||
min-width: 0 !important; | |||
margin-top: 0 !important; | |||
} | |||
} | |||
/* Main Page: stack the front page columns on narrow screens, latest articles first */ | |||
@media screen and (max-width: 720px) { | |||
div.front-page { | |||
display: flex; | |||
flex-direction: column; | |||
} | |||
div.front-page > div[style*="display:flex"] { | |||
flex-direction: column; | |||
} | |||
div.front-page > div.right { | |||
float: none; | |||
width: auto; | |||
order: 1; | |||
} | |||
div.front-page > div.left { | |||
margin-right: 0; | |||
} | |||
/* The equal-height padding trick is not needed once the columns stack */ | |||
div.front-page div.last-cell.cell { | |||
padding-bottom: 0.3em; | |||
margin-bottom: 0; | |||
} | |||
} | |||
/* Text inputs here carry no type attribute, so match every input */ | |||
#pfForm input, | |||
#pfForm select, | |||
#pfForm textarea { | |||
max-width: 100%; | |||
box-sizing: border-box; | |||
} | |||
#pfForm .oo-ui-comboBoxInputWidget { | |||
width: 100% !important; | |||
min-width: 0 !important; | |||
margin: 0 !important; | |||
} | |||