MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| (42 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
body { | |||
border-bottom-color: rgb(0, 203, 159); | |||
background-image: url("https://www.mediawiki.org/w/skins/Timeless/resources/images/cat.svg?558fd"); | |||
background-repeat: no-repeat; | |||
background-position: center 10em; | |||
} | |||
/* Make the font size a touch bigger on vector elements*/ | |||
.vector-pinnable-element, | |||
.vector-page-toolbar-container, | |||
.vector-user-links-main .vector-menu-content-list, | |||
.vector-search-box{ | |||
font-size:1rem; | |||
} | |||
/* disable the Dark Mode invert */ | |||
/* | |||
.client-darkmode, | |||
.client-darkmode img, | |||
.client-darkmode video, | |||
.client-darkmode svg, | |||
.client-darkmode iframe, | |||
.client-darkmode .mw-no-invert, | |||
.client-darkmode .mw-mmv-overlay, | |||
.client-darkmode .mw-mmv-pre-image, | |||
.client-darkmode .mw-kartographer-map, | |||
.client-darkmode .mw-kartographer-mapDialog-map, | |||
.client-darkmode:not(.mw-invert), | |||
.client-darkmode img:not(.mw-invert), | |||
.client-darkmode video:not(.mw-invert), | |||
.client-darkmode svg:not(.mw-invert), | |||
.client-darkmode iframe:not(.mw-invert), | |||
.client-darkmode .mw-no-invert:not(.mw-invert), | |||
.client-darkmode .cdx-no-invert:not(.mw-invert), | |||
.client-darkmode td .diffchange:not(.mw-invert), | |||
.client-darkmode .skin-minerva .mw-notification-visible .mw-notification-content:not(.mw-invert) | |||
{ | |||
filter: none; | |||
-webkit-filter: none; | |||
} | |||
*/ | |||
@media screen and (prefers-color-scheme: dark) { | |||
html.skin-theme-clientpref-os .skin-invert-image img, | |||
html.skin-theme-clientpref-os .oo-ui-iconElement-icon:not(.oo-ui-image-progressive):not(.oo-ui-image-destructive):not(.oo-ui-checkboxInputWidget-checkIcon):not(.oo-ui-image-invert):not(.mw-no-invert), | |||
html.skin-theme-clientpref-os .oo-ui-indicatorElement-indicator { | |||
color-scheme: light; | |||
filter: invert(1) hue-rotate(180deg); | |||
} | |||
html.skin-theme-clientpref-os .skin-invert { | |||
filter: none !important; | |||
} | |||
} | |||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
/*Set font to be more legible.*/ | /*Set font to be more legible.*/ | ||
| Line 340: | Line 398: | ||
.mainpage-contents a.mw-newpages-time, | .mainpage-contents a.mw-newpages-time, | ||
.mainpage-contents span.mw-newpages-length, | .mainpage-contents span.mw-newpages-length, | ||
mainpage-contents span.comment, | |||
.mainpage-contents span.mw-usertoollinks, | .mainpage-contents span.mw-usertoollinks, | ||
.mainpage-contents span.mw-tag-markers { display: none;} | .mainpage-contents span.mw-tag-markers { display: none;} | ||
| Line 371: | Line 429: | ||
text-decoration: none; | text-decoration: none; | ||
background: #5865F2; | background: #5865F2; | ||
margin-bottom: 4px; | |||
color: #fff !important; | color: #fff !important; | ||
} | } | ||
| Line 391: | Line 450: | ||
display: block; | display: block; | ||
} | } | ||
/* | |||
#mw-panel a[href="https://github.com/FULU-Foundation/CRW-Extension"]::after{ | #mw-panel a[href="https://github.com/FULU-Foundation/CRW-Extension"]::after{ | ||
content: "This extension is currently under development. Once complete,\00A0it will notify you when you're viewing a product,\00A0site,\00A0or\00A0service that has an article on our wiki."; | content: "This extension is currently under development. Once complete,\00A0it will notify you when you're viewing a product,\00A0site,\00A0or\00A0service that has an article on our wiki."; | ||
| Line 401: | Line 460: | ||
line-height: 1.2; | line-height: 1.2; | ||
} | } | ||
*/ | |||
/* Jake */ | /* Jake */ | ||
| Line 419: | Line 478: | ||
} | } | ||
/* FIX: dropdown text colors in explicit light theme (day) */ | |||
html.skin-theme-clientpref-day .vector-header .vector-dropdown-content, | |||
html.skin-theme-clientpref-day .vector-header .vector-dropdown-content *{ | |||
.vector-header .vector-dropdown-content, | |||
.vector-header .vector-dropdown-content *{ | |||
color: var(--color-base, #202122) !important; | color: var(--color-base, #202122) !important; | ||
} | } | ||
.vector-header .vector-dropdown-content{ | html.skin-theme-clientpref-day .vector-header .vector-dropdown-content{ | ||
background: #fff !important; | background: #fff !important; | ||
} | } | ||
.vector-header .vector-dropdown-content a{ | html.skin-theme-clientpref-day .vector-header .vector-dropdown-content a{ | ||
color: var(--color-progressive, #36c) !important; | color: var(--color-progressive, #36c) !important; | ||
} | } | ||
.vector-header .vector-dropdown-content a:visited{ | html.skin-theme-clientpref-day .vector-header .vector-dropdown-content a:visited{ | ||
color: var(--color-visited, #6b4ba1) !important; | color: var(--color-visited, #6b4ba1) !important; | ||
} | |||
.vector-header .vector-icon{ | |||
filter: invert(1) brightness(1.2); | |||
} | |||
/* Dropdown menus: light by default, dark in automatic OS dark and in night mode */ | |||
/* Light mode only */ | |||
@media screen and (prefers-color-scheme: light) { | |||
html.skin-theme-clientpref-os .vector-header .vector-dropdown-content { | |||
background: #fff !important; | |||
} | |||
html.skin-theme-clientpref-os .vector-header .vector-dropdown-content, | |||
html.skin-theme-clientpref-os .vector-header .vector-dropdown-content * { | |||
color: var(--color-base, #202122) !important; | |||
} | |||
html.skin-theme-clientpref-os .vector-header .vector-dropdown-content a { | |||
color: var(--color-progressive, #36c) !important; | |||
} | |||
html.skin-theme-clientpref-os .vector-header .vector-dropdown-content a:visited { | |||
color: var(--color-visited, #6b4ba1) !important; | |||
} | |||
} | |||
/* Automatic mode (OS dark) */ | |||
@media screen and (prefers-color-scheme: dark) { | |||
html.skin-theme-clientpref-os .vector-header .vector-dropdown-content { | |||
background: #202122 !important; | |||
border-color: rgba(255,255,255,0.18) !important; | |||
} | |||
html.skin-theme-clientpref-os .vector-header .vector-dropdown-content, | |||
html.skin-theme-clientpref-os .vector-header .vector-dropdown-content * { | |||
color: #f8f9fa !important; | |||
} | |||
html.skin-theme-clientpref-os .vector-header .vector-dropdown-content a { | |||
color: #8ab4f8 !important; | |||
} | |||
html.skin-theme-clientpref-os .vector-header .vector-dropdown-content a:visited { | |||
color: #c58af9 !important; | |||
} | |||
} | } | ||
| Line 693: | Line 796: | ||
} | } | ||
/* */ | /* */ | ||
/* | |||
#left-navigation{ | #left-navigation{ | ||
display: flex; | display: flex; | ||
| Line 705: | Line 809: | ||
gap: 8px; | gap: 8px; | ||
} | } | ||
*/ | |||
#p-associated-pages .vector-menu-content-list{ | #p-associated-pages .vector-menu-content-list{ | ||
display: flex; | display: flex; | ||
| Line 755: | Line 859: | ||
border: 1px solid #004080 !important; | border: 1px solid #004080 !important; | ||
border-top: 0 !important; | border-top: 0 !important; | ||
} | |||
.infobox{ | |||
color: var(--color-base, #202122); | |||
background-color: var(--background-color-interactive-subtle, #f8f9fa); | |||
border: 1px solid #004080 !important; | |||
float: right; | |||
margin: 0 0 1em 1em; | |||
padding: 0.5em; | |||
width: 24em; | |||
} | |||
/* */ | |||
#footer-social.crw-footer-social{ | |||
clear: both; | |||
width: 100%; | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 10px; | |||
margin: 6px 0 0 0; | |||
padding: 0; | |||
list-style: none; | |||
} | |||
#footer-social.crw-footer-social li{ | |||
margin: 0; | |||
padding: 0; | |||
} | |||
#footer-social.crw-footer-social a{ | |||
display: inline-flex; | |||
align-items: center; | |||
text-decoration: none; | |||
} | |||
@media screen and (prefers-color-scheme: dark) { | |||
/* Automatic mode search styles */ | |||
html.skin-theme-clientpref-os #p-search .cdx-text-input__input{ | |||
background: #202122 !important; | |||
color: #f8f9fa !important; | |||
border-color: rgba(255,255,255,0.18) !important; | |||
} | |||
html.skin-theme-clientpref-os #p-search .cdx-text-input__input::placeholder{ | |||
color: rgba(248,249,250,0.6) !important; | |||
} | |||
html.skin-theme-clientpref-os #p-search .cdx-text-input__start-icon{ | |||
filter: none !important; | |||
color: #f8f9fa !important; | |||
fill: #f8f9fa !important; | |||
} | |||
html.skin-theme-clientpref-os #p-search .cdx-typeahead-search__menu, | |||
html.skin-theme-clientpref-os #p-search .cdx-menu{ | |||
background: #202122 !important; | |||
border-color: rgba(255,255,255,0.18) !important; | |||
} | |||
html.skin-theme-clientpref-os #p-search .cdx-typeahead-search__menu, | |||
html.skin-theme-clientpref-os #p-search .cdx-typeahead-search__menu *, | |||
html.skin-theme-clientpref-os #p-search .cdx-menu, | |||
html.skin-theme-clientpref-os #p-search .cdx-menu *{ | |||
color: #f8f9fa !important; | |||
} | |||
html.skin-theme-clientpref-os #p-search .cdx-menu__item--highlighted, | |||
html.skin-theme-clientpref-os #p-search .cdx-menu-item--highlighted, | |||
html.skin-theme-clientpref-os #p-search .cdx-menu__item:hover, | |||
html.skin-theme-clientpref-os #p-search .cdx-menu-item:hover{ | |||
background: rgba(255,255,255,0.08) !important; | |||
} | |||
html.skin-theme-clientpref-os #p-search .cdx-menu a{ | |||
color: #8ab4f8 !important; | |||
} | |||
html.skin-theme-clientpref-os #p-search .cdx-menu a:visited{ | |||
color: #c58af9 !important; | |||
} | |||
} | |||
.vector-page-titlebar { | |||
--border-color-base: transparent; | |||
} | |||
#mw-panel a[href*="chromewebstore.google.com"] { | |||
display: flex; | |||
align-items: center; | |||
gap: 8px; | |||
padding: 10px 12px; | |||
border-radius: 6px; | |||
font-weight: 600; | |||
text-decoration: none; | |||
background: #1a73e8; | |||
color: #fff !important; | |||
margin-bottom: 4px; | |||
} | |||
#mw-panel a[href*="chromewebstore.google.com"]::before { | |||
content: ""; | |||
width: 18px; | |||
height: 18px; | |||
flex: 0 0 18px; | |||
background: url("/w/Special:FilePath/Chrome-white-icon2.png") center / contain no-repeat; | |||
} | |||
#mw-panel a[href*="chromewebstore.google.com"]:hover { | |||
filter: brightness(0.95); | |||
} | |||
#mw-panel a[href*="addons.mozilla.org"] { | |||
display: flex; | |||
align-items: center; | |||
gap: 8px; | |||
padding: 10px 12px; | |||
border-radius: 6px; | |||
font-weight: 600; | |||
text-decoration: none; | |||
background: #ff6611; | |||
color: #fff !important; | |||
} | |||
#mw-panel a[href*="addons.mozilla.org"]::before { | |||
content: ""; | |||
width: 18px; | |||
height: 18px; | |||
flex: 0 0 18px; | |||
background: url("/w/Special:FilePath/Firefox-white-icon3.png") center / contain no-repeat; | |||
} | |||
#mw-panel a[href*="addons.mozilla.org"]:hover { | |||
filter: brightness(0.95); | |||
} | |||
#mw-panel a[href*="zulip.consumerrights.wiki"]{ | |||
display: flex; | |||
align-items: center; | |||
gap: 8px; | |||
padding: 10px 12px; | |||
border-radius: 6px; | |||
font-weight: 600; | |||
text-decoration: none; | |||
background: #6492FE; | |||
color: #fff !important; | |||
margin-bottom: 4px; | |||
} | |||
#mw-panel a[href*="zulip.consumerrights.wiki"]::before{ | |||
content: ""; | |||
width: 18px; | |||
height: 18px; | |||
flex: 0 0 18px; | |||
background: url("/w/Special:FilePath/Zulip-white-icon.png") center / contain no-repeat; | |||
} | |||
#mw-panel a[href*="zulip.consumerrights.wiki"]:hover{ | |||
filter: brightness(0.95); | |||
} | } | ||