MediaWiki:Minerva.css: Difference between revisions
No edit summary Tags: Mobile edit Mobile web edit |
No edit summary |
||
| (14 intermediate revisions by the same user not shown) | |||
| Line 16: | Line 16: | ||
display: none; | display: none; | ||
} | } | ||
/* Default styles */ | |||
:root { | |||
--mobile-header-background: url('images/essentials/Mobile-header.png'); | |||
--mobile-header-background-color: #698cff; | |||
--content-background-color: #ebeef2; | |||
--content-text-color: #202122; | |||
} | |||
/* Logo replacement for MinervaNeue */ | |||
.minerva-header .branding-box a span { | |||
font-size: 0; /* Hide text */ | |||
display: inline-block; | |||
} | |||
.minerva-header .branding-box a span::after { | |||
content: ""; | |||
display: inline-block; | |||
width: 135px; | |||
height: 50px; | |||
background-image: url('images/essentials/WikiLogoMobile.png'); | |||
background-size: contain; | |||
background-repeat: no-repeat; | |||
background-position: center; | |||
vertical-align: middle; | |||
} | |||
/* ------------------------------------------ DARK THEME -------------------------------------*/ | |||
:root .stw-theme-dark { | |||
--archive-box-background-color: #282828; | |||
--archive-box-border-color: #444; | |||
--mobile-header-background: url('images/essentials/Dark-mobile-header.png'); | |||
--mobile-header-background-color: #2b3162; | |||
--content-background-color: #2b2f39; | |||
--content-text-color: #e6e6e6; | |||
--base-background-color: #13191c; | |||
color: var(--content-text-color); | |||
} | |||
body.stw-theme-dark :not(.infobox-title) a:not(.new,.mw-selflink,.menu2-text a), | |||
body.stw-theme-dark .jslink, | |||
body.stw-theme-dark .toctogglelabel, | |||
body.stw-theme-dark .mw-collapsible-text, | |||
body.stw-theme-dark .vector-menu-dropdown .mw-list-item a, | |||
body.stw-theme-dark .mw-mmv-post-image a, | |||
body.stw-theme-dark #mw-mf-page-left ul.hlist li a{ | |||
color: #90c0fe; | |||
} | |||
body.stw-theme-dark .mw-body-content .hlist li:not(:last-child)::after { | |||
background-color: #FFF; | |||
} | |||
body.stw-theme-dark .mw-message-box, | |||
body.stw-theme-dark .mw-body, h1, h2, h3, h4, h5, h6, | |||
body.stw-theme-dark .mw-ui-input { | |||
color: var(--content-text-color); | |||
} | |||
body.stw-theme-dark .mw-body a.new, body.stw-theme-dark .mw-mmv-post-image a.new { | |||
color: #ffa4a4; | |||
} | |||
body.stw-theme-dark .branding-box img, | |||
body.stw-theme-dark .minerva-footer-logo img { | |||
filter: revert; | |||
} | |||
/* | |||
body.stw-theme-dark .client-js .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable), | |||
body.stw-theme-dark .jquery-tablesorter th.headerSort { | |||
background-image: url('images/essentials/Sort_both.svg'); | |||
} | |||
body.stw-theme-dark .jquery-tablesorter th.headerSortDown { | |||
background-image: url('images/essentials/Sort_down.svg'); | |||
} | |||
body.stw-theme-dark .jquery-tablesorter th.headerSortUp { | |||
background-image: url('images/essentials/Sort_up.svg'); | |||
} | |||
*/ | |||
/* CodeEditor search color fixes for dark theme */ | |||
body.stw-theme-dark .ace_search { | |||
background-color: #353535; | |||
border: 1px solid var(--ooui-border); | |||
border-top: 0; | |||
border-right: 0; | |||
color: #e6e6e6; | |||
} | |||
/* CodeEditor search input field color fixes for dark theme */ | |||
body.stw-theme-dark .ace_search_field { | |||
border-radius: 3px 0 0 3px; | |||
background-color: #414141; | |||
color: #e6e6e6; | |||
border: 1px solid var(--ooui-border); | |||
border-right: 0; | |||
} | |||
/* CodeEditor search button color fixes for dark theme */ | |||
body.stw-theme-dark .ace_searchbtn { | |||
border: 1px solid var(--ooui-border); | |||
background: #414141; | |||
color: #e6e6e6; | |||
border-right: 0; | |||
border-left: 1px solid var(--ooui-border); | |||
} | |||
body.stw-theme-dark .ace_button { | |||
border: 1px solid var(--ooui-border); | |||
color: #e6e6e6; | |||
} | |||
/*----------------------------------------------------------------------------------------*/ | |||
.minerva-footer { | |||
border-color: transparent; | |||
} | |||
.mw-footer > .post-content { | |||
margin-top: 32px; | |||
} | |||
.mw-footer > .post-content > .minerva-footer-logo { | |||
display: none; | |||
} | |||
/* | |||
footer, | |||
footer a:active, | |||
#footer, | |||
#footer a:active { | |||
color: #FFF; | |||
} | |||
footer a, | |||
#footer a, | |||
footer a:visited, | |||
#footer a:visited { | |||
color: #BFBFBF; | |||
} | |||
.last-modified-bar { | |||
background-color: #EAECF0; | |||
} | |||
*/ | |||
.content code { | |||
border-radius: 2px; | |||
} | |||
@media all and (max-width: 768px) { | |||
.gallerybox .thumb > div { | |||
margin: 15px !important; | |||
width: auto !important; | |||
} | |||
} | |||
@media all and (max-width: 720px) { | |||
.gallery.mw-gallery-traditional .gallerybox { | |||
width: 155px !important; | |||
} | |||
.gallery.mw-gallery-traditional .gallerybox .thumb { | |||
width: 150px !important; | |||
} | |||
.gallery.mw-gallery-nolines .gallerybox { | |||
width: 125px !important; | |||
} | |||
.gallery.mw-gallery-nolines .gallerybox .thumb { | |||
width: 120px !important; | |||
} | |||
} | |||
/* */ | |||
/** Mobile skin **/ | |||
.overlay.search-overlay, | |||
.overlay.editor-overlay { | |||
padding-top: 90px; | |||
} | |||
/* Mobile header background */ | |||
.skin-minerva #mw-mf-page-center .header-container, | |||
.skin-minerva .search-overlay .header-container { | |||
position: relative; | |||
background: var(--mobile-header-background) left bottom repeat-x,linear-gradient(0deg,var(--content-background-color) 50%,var(--mobile-header-background-color) 50%); | |||
background-size: 48px auto; | |||
right: 0; | |||
left: 0; | |||
height: 96px; | |||
} | |||
.skin-minerva .header-container { | |||
background-color: transparent; | |||
box-shadow: none; | |||
} | |||
.overlay-header, | |||
.minerva-header { | |||
padding-top: 7px; | |||
} | |||
/* Maximise editing space when editing on small screens */ | |||
@media all and (max-width: 999px) { | |||
.overlay-enabled .editor-overlay { | |||
padding-top: 3.35em; | |||
} | |||
.overlay-enabled .overlay.editor-overlay .header-container:after { | |||
bottom: 0; | |||
background-position: left bottom -29px; | |||
} | |||
} | |||
.overlay .overlay-header-container.header-container { | |||
z-index: 2; | |||
} | |||
.minerva-header .branding-box { | |||
opacity: 1; | |||
} | |||
.notification-count { | |||
background: none; | |||
} | |||
/* Background color */ | |||
.overlay-enabled, | |||
.overlay-content, | |||
.mw-body { | |||
background-color: var(--content-background-color); | |||
} | |||
/* Hide page title on all main pages */ | /* Hide page title on all main pages */ | ||
| Line 21: | Line 307: | ||
body.rootpage-Main_Page .page-heading { | body.rootpage-Main_Page .page-heading { | ||
display: none; | display: none; | ||
} | |||
body.page-Main_Page #firstHeading { | |||
display: none; | |||
} | |||
/* Margin is too big */ | |||
.page-heading { | |||
margin-bottom: 0; | |||
} | |||
/* Force collapsed navbox headers to full width */ | |||
.content table.navbox { | |||
display: table; | |||
border-collapse: separate; | |||
} | |||
/* Show TOC */ | |||
@media (max-width: 512px) { | |||
.skin-minerva .toc-mobile { | |||
display: block; | |||
} | |||
} | |||
/* Fix Footer*/ | |||
.footer-icons .cdx-button.cdx-button--fake-button--enabled, | |||
.footer-icons .cdx-button.cdx-button--fake-button--enabled:hover, | |||
.footer-icons .cdx-button.cdx-button--fake-button--enabled:active { | |||
background: none; | |||
border: none; | |||
padding: 0; | |||
margin: 0; | |||
} | |||
/* Fix footer hlist separator colour */ | |||
.footer-content .hlist-separated li:after { | |||
color: #FFF; | |||
} | |||
/* Fix hlist gaps being too wide */ | |||
.hlist > ul li { | |||
margin-right: 0; | |||
} | |||
/* Fix changes autocollapsing in recent changes */ | |||
.mw-changeslist-edit, .mw-changeslist-line { | |||
display: table-row !important; | |||
} | |||
.mw-changeslist-line-inner { | |||
padding-top: 1.5em; | |||
} | |||
.mw-enhanced-rc-nested { | |||
padding-top: 0.5em; | |||
} | |||
/* Rollback link as a button */ | |||
.mw-rollback-link a { | |||
padding: 5px 12px; | |||
border: 1px solid var(--border-color-base); | |||
font-weight: bold; | |||
} | |||
/* Width is based on existing minerva calculations */ | |||
@media all and (max-width: 639px) { | |||
/* Display rollback button on own line to stop clipping */ | |||
.mw-rollback-link { | |||
display: block; | |||
} | |||
} | |||
/* Alternating cell background */ | |||
.alternatecells:nth-child(odd) { | |||
background-color: #F9F9F9; | |||
} | |||
/* Add a background color to the overlay header and remove the padding */ | |||
.overlay-header { | |||
background-color: var(--content-background-color); | |||
padding-top: 0; | |||
} | |||
.content li { | |||
margin-bottom: 2px; | |||
} | |||
.content .mw-parser-output > h2, .content .section-heading { | |||
border-bottom: 1px solid #c8ccd1; | |||
} | |||
dl { | |||
margin-bottom: 5px; | |||
} | |||
/* Hide nomobile */ | |||
.nomobile, | |||
.msgbox .msgbox-image { | |||
display: none; | |||
} | |||
/* Remove blank space when editing */ | |||
.action-edit .overlay-header-container + .overlay-content { | |||
padding-top: 0; | |||
} | |||
.editor-overlay .content { | |||
margin-top: 0; | |||
} | |||
/* Hatnotes and disambiguation notices */ | |||
.hatnote { | |||
font-style: italic; | |||
} | |||
.hatnote i { | |||
font-style: normal; | |||
} | |||
div.hatnote { | |||
padding-left: 0; | |||
margin-bottom: 0.5em; | |||
font-size: 0.8125rem; | |||
} | |||
div.hatnote + div.hatnote { | |||
margin-top: -0.5em; | |||
} | |||
div.msgbox { | |||
font-size: 0.8125rem; | |||
max-width: revert !important; | |||
} | |||
@media all and (min-width: 511px) { | |||
div.msgbox-subtle { | |||
max-width: 306px !important; | |||
} | |||
} | |||
/* Fix animated infobox images shifting the screen when images have different dimensions */ | |||
.content span.animated a > img, | |||
.content span.animated a > .lazy-image-placeholder, | |||
.content noscript span.animated > img { | |||
max-width: initial !important; | |||
} | |||
/* Fix infobox text being way too large */ | |||
#mw-mf-viewport .notaninfobox p { | |||
font-size: 100%; | |||
padding: 0.2em 0; | |||
} | |||
body.page-Main_Page #firstHeading { | |||
display: none; | |||
} | |||
/* Turn a list into a tree view style */ | |||
.treeview { | |||
margin-top: 0.3em; | |||
} | |||
.treeview .treeview-header { | |||
padding-left: 3px; | |||
font-weight: bold; | |||
} | |||
.treeview .treeview-header:last-child { | |||
border-color: #636363 !important; | |||
border-left-style: dotted; | |||
} | |||
.treeview .treeview-header:not(:last-child):before { | |||
content: none; | |||
} | |||
.treeview .treeview-header:last-child:before { | |||
border-bottom: 0; | |||
} | |||
.treeview ul, | |||
.treeview li { | |||
margin: 0; | |||
padding: 0; | |||
list-style-type: none; | |||
list-style-image: none; | |||
} | |||
.treeview li li { | |||
position: relative; | |||
padding-left: 13px; | |||
margin-left: 7px; | |||
border-left: 1px solid #636363; | |||
} | |||
.treeview li li:before { | |||
content: ""; | |||
position: absolute; | |||
top: 0; | |||
left: -1px; | |||
width: 11px; | |||
height: 11px; | |||
border-bottom: 1px solid #636363; | |||
} | |||
.treeview li li:last-child:not(.treeview-continue) { | |||
border-color: transparent; | |||
} | |||
.treeview li li:last-child:not(.treeview-continue):before { | |||
border-left: 1px solid #636363; | |||
width: 10px; | |||
} | |||
.nbttree-inherited { | |||
background-color: #E6E6FA; | |||
} | } | ||