StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-11-30 09:04:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix header bg in light mode

Browse source
This commit is contained in:
alistair3149 2020-03-16 01:08:51 -04:00
parent c42c6523f6
commit 483a3c68bb
No known key found for this signature in database
GPG key ID: 94D081060FD3DD9C
1 changed files with 197 additions and 194 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
resources/components/darkmode.less
View file

@ -3,7 +3,8 @@
// https://starcitizen.tools
//
@media ( prefers-color-scheme: dark ) {
@media (prefers-color-scheme: dark) {
html,
body {
background: @dark-bg-0;
@ -58,7 +59,7 @@
color: @dark-color-link-new !important;
}
.catlinks .mw-normal-catlinks > ul li a {
.catlinks .mw-normal-catlinks>ul li a {
background-color: @dark-bg-10;
border-color: @dark-bg-10;
}
@ -73,6 +74,7 @@
}
.mw-header-menu-drawer-container {
.mw-nav-links,
.mw-user-links {
a {
@ -103,7 +105,7 @@
background: @dark-bg-40;
}
#page-tools #p-actions > nav ul {
#page-tools #p-actions>nav ul {
background: @dark-bg-50;
}
@ -123,7 +125,7 @@
}
#site-search #search-toggle-icon-container #search-toggle-icon,
#site-search > input:checked:hover ~ #search-toggle-icon-container #search-toggle-icon {
#site-search>input:checked:hover~#search-toggle-icon-container #search-toggle-icon {
border-color: @base-100;
}
@ -176,56 +178,57 @@
.mw-body-content #mw-content-text .mw-parser-output #toc:before,
.mw-body-content #mw-content-text .mw-parser-output #toc:after {
background: linear-gradient( @dark-bg-0, rgba( 0, 0, 0, 0.001 ) );
background: linear-gradient(@dark-bg-0, rgba(0, 0, 0, 0.001));
}
#page-tools #p-views li > a:after,
#page-tools #p-actions > nav:before,
#page-tools #p-views li>a:after,
#page-tools #p-actions>nav:before,
.mw-header-menu-drawer-container .mw-nav-links a:after,
.mw-header-menu-drawer-container .mw-user-links a:after,
.mw-editsection > a:before,
.mw-editsection>a:before,
#pt-notifications-alert .mw-echo-notifications-badge:before,
#pt-notifications-notice .mw-echo-notifications-badge:before,
#p-namespaces ul li a:after {
filter: invert( 1 );
filter: invert(1);
}
.suggestion-placeholder {
.suggestion-title,
.suggestion-description {
background: @dark-bg-20;
background: linear-gradient( to right, @dark-bg-40 8%, @dark-bg-30 38%, @dark-bg-40 54% );
background: linear-gradient(to right, @dark-bg-40 8%, @dark-bg-30 38%, @dark-bg-40 54%);
}
}
}
.mw-header-menu-toggle span,
#site-search #search-toggle-icon-container #search-toggle-icon {
.mw-header-container:before {
box-shadow: 0 0 50px @header-height @dark-bg-0;
}
.mw-header-menu-toggle span,
#site-search #search-toggle-icon-container #search-toggle-icon {
opacity: 0.4;
}
}
.mw-header-menu input:hover ~ .mw-header-menu-toggle > span,
#site-search #search-toggle:hover ~ #search-toggle-icon-container #search-toggle-icon {
.mw-header-menu input:hover~.mw-header-menu-toggle>span,
#site-search #search-toggle:hover~#search-toggle-icon-container #search-toggle-icon {
opacity: 0.6;
}
}
.mw-header-container:before {
box-shadow: 0 0 50px @header-height rgba( 17, 21, 29, 1 );
}
@media only screen and ( max-width: 1290px ) and ( prefers-color-scheme: dark ) {
@media only screen and (max-width: 1290px) and (prefers-color-scheme: dark) {
.mw-body-content #mw-content-text .mw-parser-output #toc {
background: @dark-bg-40;
}
}
@media only screen and ( max-width: 1450px ) and ( prefers-color-scheme: dark ) {
@media only screen and (max-width: 1450px) and (prefers-color-scheme: dark) {
.mw-body-content #mw-content-text .mw-parser-output #toc {
.toctoggle a {
background-color: @dark-bg-50;
&:before {
filter: invert( 1 );
filter: invert(1);
}
&:hover,