MediaWiki:Common.css: Difference between revisions
From jugglingpatterns
No edit summary |
(Replaced content with "→CSS placed here will be applied to all skins: ") Tag: Replaced |
||
| Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ |
/* CSS placed here will be applied to all skins */ |
||
/*.content-container, .header-navigation-container, .header-container, .footer, #body, .content-header,.toc,.mw-editform, .mw-editfont-monospace { |
|||
color: #fff !important; |
|||
background: #000 !important; |
|||
} |
|||
.toctext { |
|||
color: #eee !important; |
|||
}*/ |
|||
@media screen and (min-width: 768px) { |
|||
.banner-container, .header, .page-header-bar, .overlay-header, .content, .overlay-content, .content-unstyled, .pre-content, .post-content, #mw-content-text > form, #mw-mf-page-center .pointer-overlay { |
|||
width: 100%; |
|||
max-width: 90%; |
|||
} |
|||
.page-heading { |
|||
width: calc(100% - 330px); |
|||
} |
|||
.thumbimage { |
|||
border-top-right-radius: 20px !important; |
|||
border-bottom-right-radius: 0px !important; |
|||
border-top-left-radius: 20px !important; |
|||
border-bottom-left-radius: 0px !important; |
|||
box-shadow: none !important; |
|||
} |
|||
.overlay .header-container.header-chrome { |
|||
top: 0 !important; |
|||
z-index: 2; |
|||
border: 0; |
|||
padding: 0 !important; |
|||
margin: 0 !important; |
|||
left: 0; |
|||
width: 100% !important; |
|||
right: inherit; |
|||
border-radius: 0px !important; |
|||
} |
|||
.header-container.header-chrome:hover { |
|||
width: 340px !important; |
|||
margin: 15px !important; |
|||
border-top-left-radius: 20px !important; |
|||
border-top-right-radius: 20px !important; |
|||
border-bottom-right-radius: 20px !important; |
|||
border-bottom-left-radius: 20px !important; |
|||
padding-top: 5px !important; |
|||
padding-bottom: 5px !important; |
|||
} |
|||
.header-chrome:hover .branding-box img { |
|||
width: 116px !important; |
|||
opacity: 1 !important; |
|||
} |
|||
.overlay.search-overlay .overlay-content { |
|||
max-width: 90%; |
|||
} |
|||
.overlay .header-container.header-chrome:hover { |
|||
width: 100% !important; |
|||
margin: 0px !important; |
|||
border-top-left-radius: 0px !important; |
|||
border-top-right-radius: 0px !important; |
|||
border-bottom-right-radius: 0px !important; |
|||
border-bottom-left-radius: 0px !important; |
|||
padding-top: 0px !important; |
|||
padding-bottom: 0px !important; |
|||
} |
|||
.header-container.header-chrome { |
|||
background: var(--menu-background); |
|||
/* |
|||
-webkit-backdrop-filter: blur(20px); |
|||
backdrop-filter: blur(20px); |
|||
*/ |
|||
position: fixed !important; |
|||
top: 0 !important; |
|||
z-index: 2; |
|||
padding-top: 5px; |
|||
width: 340px; |
|||
padding-bottom: 5px; |
|||
margin: 15px; |
|||
border: 0; |
|||
border-radius: 20px; |
|||
right: 0; |
|||
box-shadow: 3px 3px 6px rgba(0,0,0,0.20) !important; |
|||
} |
|||
.header-chrome.overlay-header-container + .overlay-content { |
|||
padding-top: 0; |
|||
margin-top: 3.375em !important; |
|||
} |
|||
.thumbimage { |
|||
border-top-right-radius: 20px; |
|||
border-top-left-radius: 20px; |
|||
} |
|||
.thumb { |
|||
box-shadow: 3px 3px 6px rgba(0,0,0,0.2); |
|||
border-radius: 20px; |
|||
} |
|||
.content figcaption, .content .thumbcaption { |
|||
padding-left: 15px !important; |
|||
padding-right: 15px !important; |
|||
padding-bottom: 15px !important; |
|||
box-sizing: border-box; |
|||
padding-top: 10px !important; |
|||
color: var(--caption); |
|||
} |
|||
.page-actions-menu__list-item > a { |
|||
font-weight: 400; |
|||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text","Helvetica Neue",sans-serif; |
|||
color: var(--grey-text-color); |
|||
} |
|||
#main-menu-input:checked .mw-body { |
|||
transform: translate(-300px, 0) !important; |
|||
transition: transform 250ms ease-in-out; |
|||
} |
|||
.toggle-list__checkbox .mw-body { |
|||
transform: translate(-300px, 0) !important; |
|||
transition: transform 250ms ease-in-out; |
|||
} |
|||
} |
|||
@media screen and (min-width: 1025px) { |
|||
.pre-content h1 { |
|||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text","Helvetica Neue",sans-serif; |
|||
font-weight: 900; |
|||
font-size: 3em; |
|||
color: var(--text-color); |
|||
} |
|||
} |
|||
.header .search-box { |
|||
display: none; |
|||
} |
|||
#mw-mf-page-left ul.hlist li a { |
|||
color: var(--link-color); |
|||
} |
|||
.overlay-header-container, .overlay-footer-container { |
|||
background: var(--translucent-background); |
|||
} |
|||
.content table.infobox { |
|||
background-color: #fff; |
|||
border: none; |
|||
} |
|||
#mw-mf-page-left { |
|||
right: 0; |
|||
top: 0; |
|||
left: inherit; |
|||
background: var(--translucent-background); |
|||
-webkit-transform: translate(100%,0); |
|||
-moz-transform: translate(100%,0); |
|||
-ms-transform: translate(100%,0); |
|||
transform: translate(100%,0); |
|||
} |
|||
#main-menu-input:checked ~ .main-menu-mask { |
|||
opacity: 1; |
|||
} |
|||
.mw-searchresults-has-iw .iw-resultset { |
|||
background: var(--infobox-background); |
|||
} |
|||
#main-menu-input:checked ~ body { |
|||
overflow: hidden !important; |
|||
} |
|||
.main-menu-mask { |
|||
background: rgba(0,0,0,0.2); |
|||
-webkit-backdrop-filter: blur(10px); |
|||
backdrop-filter: blur(10px); |
|||
} |
|||
/* Dark Mode */ |
|||
html, body, #content, .mw-body, #mw-mf-page-center { |
|||
background: var(--body-background); |
|||
color: var(--text-color); |
|||
} |
|||
.toggle-list__list { |
|||
background: var(--translucent-background); |
|||
-webkit-backdrop-filter: blur(20px); |
|||
backdrop-filter: blur(20px); |
|||
} |
|||
.toggle-list-item:hover { |
|||
background: var(--body-background); |
|||
} |
|||
.toggle-list-item__label { |
|||
color: var(--text-color); |
|||
} |
|||
#mw-usercssyoucanpreview { |
|||
background: #fff; |
|||
} |
|||
.mw-highlight { |
|||
background: var(--translucent-background); |
|||
border-radius: 20px; |
|||
border: 0; |
|||
} |
|||
.wikitable, table { |
|||
color: #000; |
|||
background: #fff; |
|||
} |
|||
.page-summary h2, .page-summary h3, .overlay.search-overlay li.page-summary .wikidata-description { |
|||
color: var(--text-color); |
|||
} |
|||
.unicode, .haudio { |
|||
filter: var(--filter); |
|||
} |
|||
.branding-box img { |
|||
filter: var(--filter); |
|||
} |
|||
.header .branding-box { |
|||
width: 0px; |
|||
transition: 100ms ease-in-out; |
|||
} |
|||
.header .branding-box h1 img, .header .branding-box a img { |
|||
transition: 250ms ease-in-out; |
|||
} |
|||
.mw-ui-icon-element, .mw-ui-icon-before:before { |
|||
filter: var(--filter); |
|||
} |
|||
.client-js .toc { |
|||
background-color: var(--body-background); |
|||
border-radius: 20px; |
|||
} |
|||
#pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read, #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read { |
|||
opacity: 1; |
|||
filter: var(--filter); |
|||
} |
|||
.minerva__tab-container .minerva__tab:visited, .minerva__tab-container .minerva__tab:hover, .minerva__tab-container .minerva__tab:active, .minerva__tab-container .minerva__tab.new, .minerva__tab-container .minerva__tab.new:visited, .minerva__tab-container .minerva__tab.new:active, .minerva__tab-container .minerva__tab.new:hover { |
|||
color: var(--text-color); |
|||
} |
|||
#mw-mf-page-left ul li a { |
|||
color: var(--text-color); |
|||
} |
|||
.content figure .thumbinner, .content .thumb .thumbinner { |
|||
border-radius: 20px; |
|||
border: none; |
|||
background: var(--infobox-background); |
|||
box-shadow: 3px 3px 6px rgba(0,0,0,0.2); |
|||
} |
|||
.overlay { |
|||
background: var(--translucent-background); |
|||
-webkit-backdrop-filter: blur(20px); |
|||
backdrop-filter: blur(20px); |
|||
} |
|||
.hatnote { |
|||
background: var(--translucent-background); |
|||
color: var(--caption); |
|||
border-radius: 10px; |
|||
} |
|||
a { |
|||
color: var(--link-color); |
|||
} |
|||
a:visited { |
|||
color: var(--visited-link-color); |
|||
} |
|||
.infobox a, .wikitable a, table a { |
|||
color: #3366cc; |
|||
} |
|||
.infobox a:visited, .wikitable a:visited, table a:visited { |
|||
color: #6b4ba1; |
|||
} |
|||
.infobox img { |
|||
border-top-right-radius: 0 !important; |
|||
border-top-left-radius: 0 !important; |
|||
border-bottom-left-radius: 0 !important; |
|||
border-bottom-right-radius: 0 !important; |
|||
} |
|||
.infobox .thumb { |
|||
border-top-right-radius: 0 !important; |
|||
border-top-left-radius: 0 !important; |
|||
border-bottom-left-radius: 0 !important; |
|||
border-bottom-right-radius: 0 !important; |
|||
} |
|||
.infobox .thumbimage { |
|||
border-top-right-radius: 0 !important; |
|||
border-top-left-radius: 0 !important; |
|||
border-bottom-left-radius: 0 !important; |
|||
border-bottom-right-radius: 0 !important; |
|||
} |
|||
:root { |
|||
--translucent-background: rgba(234, 236, 240, 0.8); |
|||
--infobox-background: rgba(255, 255, 255, 1); |
|||
--menu-background: rgba(234, 236, 240, 0.96); |
|||
--hatnote-background: rgba(234, 236, 240, 0.8); |
|||
--body-background: #ffffff; |
|||
--text-color: #000000; |
|||
--link-color: #3366cc; |
|||
--visited-link-color: #6b4ba1; |
|||
--filter: none; |
|||
--caption: #54595d; |
|||
--image-border: none; |
|||
} |
|||
@media (prefers-color-scheme: dark) { |
|||
:root { |
|||
--translucent-background: rgba(75, 75, 75, 0.8); |
|||
--infobox-background: rgba(75, 75, 75, 0.8); |
|||
--menu-background: rgba(75, 75, 75, 0.96); |
|||
--hatnote-background: rgba(75, 75, 75, 0.5); |
|||
--body-background: #000; |
|||
--text-color: #fff; |
|||
--link-color: #9eb6e7; |
|||
--visited-link-color: #c0b0da; |
|||
--filter: brightness(0) invert(1); |
|||
--caption: #fff; |
|||
--image-border: 2px solid #fff; |
|||
} |
|||
} |
|||
/* Banner */ |
|||
#searchInput { |
|||
border-radius: 10px; |
|||
} |
|||
@media screen and (min-width: 720px) { |
|||
} |
|||
.search-overlay { |
|||
z-index: 3; |
|||
} |
|||
#mw-mf-page-left ul { |
|||
padding-bottom: 0px; |
|||
padding-top: 22px; |
|||
} |
|||
#mw-mf-page-left { |
|||
z-index: 4; |
|||
} |
|||
#mw-mf-page-left ul li a { |
|||
color: var(--text-color); |
|||
} |
|||
#mw-mf-page-left ul li { |
|||
background: transparent; |
|||
border: none; |
|||
} |
|||
.overlay.search-overlay.visible { |
|||
overflow: scroll; |
|||
} |
|||
.overlay.search-overlay .results, .overlay.search-overlay .search-feedback { |
|||
background: transparent; |
|||
box-shadow: none; |
|||
} |
|||
.overlay.search-overlay li.page-summary { |
|||
margin-bottom: 20px; |
|||
margin-top: 10px; |
|||
border: 0; |
|||
box-shadow: 3px 3px 6px rgba(0,0,0,0.20); |
|||
border-radius: 20px; |
|||
} |
|||
.page-list, .topic-title-list, .site-link-list { |
|||
overflow: visible; |
|||
} |
|||
.list-thumb.list-thumb-y { |
|||
border-top-left-radius: 20px; |
|||
border-bottom-left-radius: 20px; |
|||
} |
|||
.overlay.search-overlay .search-content { |
|||
border-bottom: 0; |
|||
} |
|||
.overlay.search-overlay { |
|||
background: var(--translucent-background); |
|||
-webkit-backdrop-filter: blur(20px); |
|||
backdrop-filter: blur(20px); |
|||
} |
|||
.header-container.header-chrome { |
|||
background: var(--menu-background); |
|||
position: fixed; |
|||
top: 0; |
|||
right: 0; |
|||
z-index: 2; |
|||
box-sizing: border-box; |
|||
border: 0; |
|||
height: 65px; |
|||
box-shadow: 3px 3px 6px rgba(0,0,0,0.20) !important; |
|||
transition: all 250ms ease-in-out; |
|||
} |
|||
/* Targeting Safari for Backdrop Filter and Font size bug*/ |
|||
@media not all and (min-resolution:.001dpcm) { |
|||
@media { |
|||
.header-container.header-chrome { |
|||
background: var(--translucent-background) !important; |
|||
-webkit-backdrop-filter: blur(20px); |
|||
backdrop-filter: blur(20px); |
|||
} |
|||
@media screen and (min-width: 768px) { |
|||
body, p { |
|||
font-size: 1.1em !important; |
|||
} |
|||
.pre-content h1 { |
|||
font-size: 3em; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@media screen and (max-width: 767px) { |
|||
#mw-mf-viewport { |
|||
padding-top: 60px; |
|||
} |
|||
.header-container.header-chrome { |
|||
width: 100%; |
|||
} |
|||
.content figcaption, .content .thumbcaption { |
|||
color: var(--text-color); |
|||
padding: 15px !important; |
|||
} |
|||
.notifications-overlay.navigation-drawer { |
|||
top: 53px; |
|||
} |
|||
} |
|||
.header-chrome.overlay-header-container + .overlay-content { |
|||
padding-top: 0; |
|||
margin-top: 3.375em; |
|||
} |
|||
.overlay-content { |
|||
z-index: 1; |
|||
} |
|||
.page-actions-menu { |
|||
border-top: 0; |
|||
border-bottom: 0; |
|||
} |
|||
/* Fonts */ |
|||
.pre-content h1 { |
|||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text","Helvetica Neue",sans-serif; |
|||
font-weight: 900; |
|||
color: var(--text-color); |
|||
font-size: 2em; |
|||
} |
|||
@media screen and (min-width: 769px) { |
|||
.thumbinner img { |
|||
width: calc(100% + 2px); |
|||
} |
|||
} |
|||
h2 .mw-headline { |
|||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text","Helvetica Neue",sans-serif; |
|||
font-weight: 800; |
|||
font-size: 1.5em; |
|||
color: var(--text-color); |
|||
} |
|||
h3 .mw-headline{ |
|||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text","Helvetica Neue",sans-serif; |
|||
font-weight: 600; |
|||
font-size: 25px; |
|||
color: var(--text-color); |
|||
} |
|||
h4 .mw-headline{ |
|||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text","Helvetica Neue",sans-serif; |
|||
font-weight: 500; |
|||
font-size: 18px; |
|||
color: var(--text-color); |
|||
} |
|||
body, p { |
|||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text","Helvetica Neue",sans-serif; |
|||
font-weight: 300; |
|||
} |
|||
/* Visual Tweaks */ |
|||
footer .last-modified-bar, .minerva-footer, footer > .post-content > h2 { |
|||
border-bottom: none; |
|||
border-top: none; |
|||
} |
|||
.overlay.media-viewer .cancel { |
|||
top: 60px; |
|||
} |
|||
.infobox { |
|||
border-radius: 20px; |
|||
box-shadow: 3px 3px 12px rgba(0,0,0,0.3); |
|||
} |
|||
table { |
|||
border-radius: 0px; |
|||
box-shadow: 3px 3px 12px rgba(0,0,0,0.3); |
|||
} |
|||
input { |
|||
border-radius: 10px; |
|||
} |
|||
.thumbimage { |
|||
border-top-right-radius: 20px; |
|||
border-bottom-right-radius: 0px; |
|||
border-top-left-radius: 20px; |
|||
border-bottom-left-radius: 0px; |
|||
box-shadow: none; |
|||
} |
|||
.header { |
|||
border-top: none; |
|||
height: 100%; |
|||
} |
|||
.overlay.search-overlay .header input { |
|||
border-radius: 10px; |
|||
border: 0; |
|||
} |
|||
.client-js #searchIcon { |
|||
display: block; |
|||
} |
|||
#mw-clearyourcache { |
|||
display: none; |
|||
} |
|||
.skin-minerva-search-trigger { |
|||
display: none; |
|||
} |
|||
.list-thumb.list-thumb-none { |
|||
border-top-left-radius: 20px; |
|||
border-bottom-left-radius: 20px; |
|||
} |
|||
.content table.infobox { |
|||
background: var(--infobox-background) !important; |
|||
color: var(--text-color); |
|||
border-radius: 20px; |
|||
} |
|||
table.infobox { |
|||
max-width: 350px; |
|||
} |
|||
.content table.infobox a { |
|||
color: var(--link-color); |
|||
} |
|||
.content table.infobox a:visited { |
|||
color: var(--visited-link-color); |
|||
} |
|||
thead { |
|||
backdrop-filter: blur(20px); |
|||
-webkit-backdrop-filter: blur(20px); |
|||
border: 1px solid #54595d; |
|||
border-color: rgba(84,89,93,0.3); |
|||
} |
|||
thead th { |
|||
background-color: rgba(234, 236, 240, 0.8) !important; |
|||
} |
|||
.hatnote a, .dablink a, .rellink a { |
|||
color: var(--link-color); |
|||
} |
|||
/* Editor */ |
|||
.oo-ui-toolbar-bar { |
|||
background-color: var(--translucent-background); |
|||
-webkit-backdrop-filter: blur(20px); |
|||
backdrop-filter: blur(20px); |
|||
color: var(--text-color); |
|||
} |
|||
.oo-ui-iconElement-icon { |
|||
filter: var(--filter); |
|||
} |
|||
.oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon, .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator { |
|||
filter: var(--filter); |
|||
} |
|||
.client-js .mw-edittools-section input[type="button"] { |
|||
color: var(--text-color); |
|||
} |
|||
Revision as of 12:32, 16 November 2023
/* CSS placed here will be applied to all skins */
