mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-27 15:50:34 +00:00
Fix header bg in light mode
This commit is contained in:
alistair3149
parent
c42c6523f6
commit
483a3c68bb
|
|
@ -3,235 +3,238 @@
|
|||
// https://starcitizen.tools
|
||||
//
|
||||
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
html,
|
||||
body {
|
||||
background: @dark-bg-0;
|
||||
color: @dark-text-90;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: @dark-bg-60;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
background: @dark-bg-0;
|
||||
color: @dark-text-90;
|
||||
}
|
||||
|
||||
* {
|
||||
scrollbar-color: @dark-bg-60 transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: @dark-bg-60;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
.mw-code {
|
||||
color: @dark-text-90;
|
||||
background-color: @dark-bg-10;
|
||||
border: 1px solid @dark-bg-20;
|
||||
}
|
||||
* {
|
||||
scrollbar-color: @dark-bg-60 transparent;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border: 1px solid @dark-bg-50;
|
||||
background: @dark-bg-40;
|
||||
color: @dark-text-80;
|
||||
}
|
||||
pre,
|
||||
code,
|
||||
.mw-code {
|
||||
color: @dark-text-90;
|
||||
background-color: @dark-bg-10;
|
||||
border: 1px solid @dark-bg-20;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
color: @dark-text-90;
|
||||
border-color: @dark-bg-20;
|
||||
}
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border: 1px solid @dark-bg-50;
|
||||
background: @dark-bg-40;
|
||||
color: @dark-text-80;
|
||||
}
|
||||
|
||||
legend {
|
||||
color: @dark-text-100;
|
||||
}
|
||||
fieldset {
|
||||
color: @dark-text-90;
|
||||
border-color: @dark-bg-20;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited,
|
||||
a.external,
|
||||
.mw-body-content #mw-content-text .mw-parser-output #toc li.active {
|
||||
color: @dark-color-link;
|
||||
}
|
||||
legend {
|
||||
color: @dark-text-100;
|
||||
}
|
||||
|
||||
.mw-body-content #mw-content-text .mw-parser-output #toc li.active {
|
||||
color: @dark-color-link !important;
|
||||
}
|
||||
a,
|
||||
a:visited,
|
||||
a.external,
|
||||
.mw-body-content #mw-content-text .mw-parser-output #toc li.active {
|
||||
color: @dark-color-link;
|
||||
}
|
||||
|
||||
a.new {
|
||||
color: @dark-color-link-new !important;
|
||||
}
|
||||
.mw-body-content #mw-content-text .mw-parser-output #toc li.active {
|
||||
color: @dark-color-link !important;
|
||||
}
|
||||
|
||||
.catlinks .mw-normal-catlinks > ul li a {
|
||||
background-color: @dark-bg-10;
|
||||
border-color: @dark-bg-10;
|
||||
}
|
||||
a.new {
|
||||
color: @dark-color-link-new !important;
|
||||
}
|
||||
|
||||
#p-namespaces ul li a {
|
||||
background-color: @dark-bg-10;
|
||||
border-color: @dark-bg-20;
|
||||
.catlinks .mw-normal-catlinks>ul li a {
|
||||
background-color: @dark-bg-10;
|
||||
border-color: @dark-bg-10;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: @dark-bg-20;
|
||||
}
|
||||
}
|
||||
#p-namespaces ul li a {
|
||||
background-color: @dark-bg-10;
|
||||
border-color: @dark-bg-20;
|
||||
|
||||
.mw-header-menu-drawer-container {
|
||||
.mw-nav-links,
|
||||
.mw-user-links {
|
||||
a {
|
||||
&:hover {
|
||||
background-color: @dark-bg-60;
|
||||
color: @dark-text-90 !important;
|
||||
}
|
||||
&:hover {
|
||||
background-color: @dark-bg-20;
|
||||
}
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
color: @dark-text-100 !important;
|
||||
background-color: @accent-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.mw-header-menu-drawer-container {
|
||||
|
||||
table.wikitable tr:hover {
|
||||
background-color: @dark-bg-10;
|
||||
}
|
||||
.mw-nav-links,
|
||||
.mw-user-links {
|
||||
a {
|
||||
&:hover {
|
||||
background-color: @dark-bg-60;
|
||||
color: @dark-text-90 !important;
|
||||
}
|
||||
|
||||
table.wikitable tr th,
|
||||
table.wikitable tr td {
|
||||
border-color: @dark-bg-20;
|
||||
}
|
||||
&:active,
|
||||
&:focus {
|
||||
color: @dark-text-100 !important;
|
||||
background-color: @accent-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mw-header-menu-drawer {
|
||||
background: @dark-bg-40;
|
||||
}
|
||||
table.wikitable tr:hover {
|
||||
background-color: @dark-bg-10;
|
||||
}
|
||||
|
||||
#page-tools #p-actions > nav ul {
|
||||
background: @dark-bg-50;
|
||||
}
|
||||
table.wikitable tr th,
|
||||
table.wikitable tr td {
|
||||
border-color: @dark-bg-20;
|
||||
}
|
||||
|
||||
.suggestions-dropdown,
|
||||
#site-search #search-form #search-input {
|
||||
background: @dark-bg-50 !important;
|
||||
}
|
||||
.mw-header-menu-drawer {
|
||||
background: @dark-bg-40;
|
||||
}
|
||||
|
||||
.mw-header-menu-drawer-container .mw-header-banner,
|
||||
.mw-header-menu-drawer-container .mw-user-links #p-personal {
|
||||
border-color: @dark-bg-50;
|
||||
}
|
||||
#page-tools #p-actions>nav ul {
|
||||
background: @dark-bg-50;
|
||||
}
|
||||
|
||||
.suggestion-link,
|
||||
#site-search #search-form #search-input {
|
||||
border-color: @dark-bg-60;
|
||||
}
|
||||
.suggestions-dropdown,
|
||||
#site-search #search-form #search-input {
|
||||
background: @dark-bg-50 !important;
|
||||
}
|
||||
|
||||
#site-search #search-toggle-icon-container #search-toggle-icon,
|
||||
#site-search > input:checked:hover ~ #search-toggle-icon-container #search-toggle-icon {
|
||||
border-color: @base-100;
|
||||
}
|
||||
.mw-header-menu-drawer-container .mw-header-banner,
|
||||
.mw-header-menu-drawer-container .mw-user-links #p-personal {
|
||||
border-color: @dark-bg-50;
|
||||
}
|
||||
|
||||
.mw-header-menu-toggle span,
|
||||
#site-search #search-toggle-icon-container #search-toggle-icon:before,
|
||||
#site-search #search-toggle-icon-container #search-toggle-icon:after {
|
||||
background: @base-100;
|
||||
}
|
||||
.suggestion-link,
|
||||
#site-search #search-form #search-input {
|
||||
border-color: @dark-bg-60;
|
||||
}
|
||||
|
||||
.mw-body .firstHeading,
|
||||
.mw-body-content h1,
|
||||
.mw-body-content h2,
|
||||
.mw-body-content h3,
|
||||
.mw-body-content h4,
|
||||
.mw-body-content h5,
|
||||
.mw-body-content h6,
|
||||
.mw-header-menu .mw-wiki-title,
|
||||
.mw-header-menu-drawer-container h3 {
|
||||
color: @dark-text-100;
|
||||
}
|
||||
#site-search #search-toggle-icon-container #search-toggle-icon,
|
||||
#site-search>input:checked:hover~#search-toggle-icon-container #search-toggle-icon {
|
||||
border-color: @base-100;
|
||||
}
|
||||
|
||||
table.wikitable,
|
||||
.suggestion-title {
|
||||
color: @dark-text-90;
|
||||
}
|
||||
.mw-header-menu-toggle span,
|
||||
#site-search #search-toggle-icon-container #search-toggle-icon:before,
|
||||
#site-search #search-toggle-icon-container #search-toggle-icon:after {
|
||||
background: @base-100;
|
||||
}
|
||||
|
||||
.suggestion-link.active {
|
||||
background-color: @accent-10;
|
||||
}
|
||||
.mw-body .firstHeading,
|
||||
.mw-body-content h1,
|
||||
.mw-body-content h2,
|
||||
.mw-body-content h3,
|
||||
.mw-body-content h4,
|
||||
.mw-body-content h5,
|
||||
.mw-body-content h6,
|
||||
.mw-header-menu .mw-wiki-title,
|
||||
.mw-header-menu-drawer-container h3 {
|
||||
color: @dark-text-100;
|
||||
}
|
||||
|
||||
.suggestion-link.active .suggestion-title {
|
||||
color: @accent-90;
|
||||
}
|
||||
table.wikitable,
|
||||
.suggestion-title {
|
||||
color: @dark-text-90;
|
||||
}
|
||||
|
||||
.mw-body-content #contentSub,
|
||||
.mw-body-content #contentSub2,
|
||||
.mw-body #siteSub,
|
||||
table.wikitable tr th,
|
||||
.mw-header-menu-drawer-container .mw-nav-links a,
|
||||
.mw-header-menu-drawer-container .mw-user-links a,
|
||||
.mw-body-content #mw-content-text .mw-parser-output #toc a:hover,
|
||||
.suggestion-description {
|
||||
color: @dark-text-80 !important;
|
||||
}
|
||||
.suggestion-link.active {
|
||||
background-color: @accent-10;
|
||||
}
|
||||
|
||||
a.mw-wiki-title,
|
||||
.mw-body-content #mw-content-text .mw-parser-output #toc a {
|
||||
color: @dark-text-70;
|
||||
}
|
||||
.suggestion-link.active .suggestion-title {
|
||||
color: @accent-90;
|
||||
}
|
||||
|
||||
.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 ) );
|
||||
}
|
||||
.mw-body-content #contentSub,
|
||||
.mw-body-content #contentSub2,
|
||||
.mw-body #siteSub,
|
||||
table.wikitable tr th,
|
||||
.mw-header-menu-drawer-container .mw-nav-links a,
|
||||
.mw-header-menu-drawer-container .mw-user-links a,
|
||||
.mw-body-content #mw-content-text .mw-parser-output #toc a:hover,
|
||||
.suggestion-description {
|
||||
color: @dark-text-80 !important;
|
||||
}
|
||||
|
||||
#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,
|
||||
#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 );
|
||||
}
|
||||
a.mw-wiki-title,
|
||||
.mw-body-content #mw-content-text .mw-parser-output #toc a {
|
||||
color: @dark-text-70;
|
||||
}
|
||||
|
||||
.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% );
|
||||
}
|
||||
}
|
||||
.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));
|
||||
}
|
||||
|
||||
#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,
|
||||
#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);
|
||||
}
|
||||
|
||||
.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%);
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.mw-header-menu-toggle span,
|
||||
#site-search #search-toggle-icon-container #search-toggle-icon {
|
||||
opacity: 0.4;
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
@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;
|
||||
|
||||
.mw-header-container:before {
|
||||
box-shadow: 0 0 50px @header-height rgba( 17, 21, 29, 1 );
|
||||
}
|
||||
&:before {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
@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 ) {
|
||||
.mw-body-content #mw-content-text .mw-parser-output #toc {
|
||||
.toctoggle a {
|
||||
background-color: @dark-bg-50;
|
||||
|
||||
&:before {
|
||||
filter: invert( 1 );
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @accent-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @accent-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue