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
|
// https://starcitizen.tools
|
||||||
//
|
//
|
||||||
|
|
||||||
@media ( prefers-color-scheme: dark ) {
|
@media (prefers-color-scheme: dark) {
|
||||||
html,
|
|
||||||
body {
|
|
||||||
background: @dark-bg-0;
|
|
||||||
color: @dark-text-90;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
html,
|
||||||
background-color: @dark-bg-60;
|
body {
|
||||||
}
|
background: @dark-bg-0;
|
||||||
|
color: @dark-text-90;
|
||||||
|
}
|
||||||
|
|
||||||
* {
|
::-webkit-scrollbar-thumb {
|
||||||
scrollbar-color: @dark-bg-60 transparent;
|
background-color: @dark-bg-60;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre,
|
* {
|
||||||
code,
|
scrollbar-color: @dark-bg-60 transparent;
|
||||||
.mw-code {
|
}
|
||||||
color: @dark-text-90;
|
|
||||||
background-color: @dark-bg-10;
|
|
||||||
border: 1px solid @dark-bg-20;
|
|
||||||
}
|
|
||||||
|
|
||||||
input,
|
pre,
|
||||||
select,
|
code,
|
||||||
textarea {
|
.mw-code {
|
||||||
border: 1px solid @dark-bg-50;
|
color: @dark-text-90;
|
||||||
background: @dark-bg-40;
|
background-color: @dark-bg-10;
|
||||||
color: @dark-text-80;
|
border: 1px solid @dark-bg-20;
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset {
|
input,
|
||||||
color: @dark-text-90;
|
select,
|
||||||
border-color: @dark-bg-20;
|
textarea {
|
||||||
}
|
border: 1px solid @dark-bg-50;
|
||||||
|
background: @dark-bg-40;
|
||||||
|
color: @dark-text-80;
|
||||||
|
}
|
||||||
|
|
||||||
legend {
|
fieldset {
|
||||||
color: @dark-text-100;
|
color: @dark-text-90;
|
||||||
}
|
border-color: @dark-bg-20;
|
||||||
|
}
|
||||||
|
|
||||||
a,
|
legend {
|
||||||
a:visited,
|
color: @dark-text-100;
|
||||||
a.external,
|
}
|
||||||
.mw-body-content #mw-content-text .mw-parser-output #toc li.active {
|
|
||||||
color: @dark-color-link;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mw-body-content #mw-content-text .mw-parser-output #toc li.active {
|
a,
|
||||||
color: @dark-color-link !important;
|
a:visited,
|
||||||
}
|
a.external,
|
||||||
|
.mw-body-content #mw-content-text .mw-parser-output #toc li.active {
|
||||||
|
color: @dark-color-link;
|
||||||
|
}
|
||||||
|
|
||||||
a.new {
|
.mw-body-content #mw-content-text .mw-parser-output #toc li.active {
|
||||||
color: @dark-color-link-new !important;
|
color: @dark-color-link !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.catlinks .mw-normal-catlinks > ul li a {
|
a.new {
|
||||||
background-color: @dark-bg-10;
|
color: @dark-color-link-new !important;
|
||||||
border-color: @dark-bg-10;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
#p-namespaces ul li a {
|
.catlinks .mw-normal-catlinks>ul li a {
|
||||||
background-color: @dark-bg-10;
|
background-color: @dark-bg-10;
|
||||||
border-color: @dark-bg-20;
|
border-color: @dark-bg-10;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
#p-namespaces ul li a {
|
||||||
background-color: @dark-bg-20;
|
background-color: @dark-bg-10;
|
||||||
}
|
border-color: @dark-bg-20;
|
||||||
}
|
|
||||||
|
|
||||||
.mw-header-menu-drawer-container {
|
&:hover {
|
||||||
.mw-nav-links,
|
background-color: @dark-bg-20;
|
||||||
.mw-user-links {
|
}
|
||||||
a {
|
}
|
||||||
&:hover {
|
|
||||||
background-color: @dark-bg-60;
|
|
||||||
color: @dark-text-90 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active,
|
.mw-header-menu-drawer-container {
|
||||||
&:focus {
|
|
||||||
color: @dark-text-100 !important;
|
|
||||||
background-color: @accent-10;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
table.wikitable tr:hover {
|
.mw-nav-links,
|
||||||
background-color: @dark-bg-10;
|
.mw-user-links {
|
||||||
}
|
a {
|
||||||
|
&:hover {
|
||||||
|
background-color: @dark-bg-60;
|
||||||
|
color: @dark-text-90 !important;
|
||||||
|
}
|
||||||
|
|
||||||
table.wikitable tr th,
|
&:active,
|
||||||
table.wikitable tr td {
|
&:focus {
|
||||||
border-color: @dark-bg-20;
|
color: @dark-text-100 !important;
|
||||||
}
|
background-color: @accent-10;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.mw-header-menu-drawer {
|
table.wikitable tr:hover {
|
||||||
background: @dark-bg-40;
|
background-color: @dark-bg-10;
|
||||||
}
|
}
|
||||||
|
|
||||||
#page-tools #p-actions > nav ul {
|
table.wikitable tr th,
|
||||||
background: @dark-bg-50;
|
table.wikitable tr td {
|
||||||
}
|
border-color: @dark-bg-20;
|
||||||
|
}
|
||||||
|
|
||||||
.suggestions-dropdown,
|
.mw-header-menu-drawer {
|
||||||
#site-search #search-form #search-input {
|
background: @dark-bg-40;
|
||||||
background: @dark-bg-50 !important;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.mw-header-menu-drawer-container .mw-header-banner,
|
#page-tools #p-actions>nav ul {
|
||||||
.mw-header-menu-drawer-container .mw-user-links #p-personal {
|
background: @dark-bg-50;
|
||||||
border-color: @dark-bg-50;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.suggestion-link,
|
.suggestions-dropdown,
|
||||||
#site-search #search-form #search-input {
|
#site-search #search-form #search-input {
|
||||||
border-color: @dark-bg-60;
|
background: @dark-bg-50 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#site-search #search-toggle-icon-container #search-toggle-icon,
|
.mw-header-menu-drawer-container .mw-header-banner,
|
||||||
#site-search > input:checked:hover ~ #search-toggle-icon-container #search-toggle-icon {
|
.mw-header-menu-drawer-container .mw-user-links #p-personal {
|
||||||
border-color: @base-100;
|
border-color: @dark-bg-50;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mw-header-menu-toggle span,
|
.suggestion-link,
|
||||||
#site-search #search-toggle-icon-container #search-toggle-icon:before,
|
#site-search #search-form #search-input {
|
||||||
#site-search #search-toggle-icon-container #search-toggle-icon:after {
|
border-color: @dark-bg-60;
|
||||||
background: @base-100;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.mw-body .firstHeading,
|
#site-search #search-toggle-icon-container #search-toggle-icon,
|
||||||
.mw-body-content h1,
|
#site-search>input:checked:hover~#search-toggle-icon-container #search-toggle-icon {
|
||||||
.mw-body-content h2,
|
border-color: @base-100;
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
table.wikitable,
|
.mw-header-menu-toggle span,
|
||||||
.suggestion-title {
|
#site-search #search-toggle-icon-container #search-toggle-icon:before,
|
||||||
color: @dark-text-90;
|
#site-search #search-toggle-icon-container #search-toggle-icon:after {
|
||||||
}
|
background: @base-100;
|
||||||
|
}
|
||||||
|
|
||||||
.suggestion-link.active {
|
.mw-body .firstHeading,
|
||||||
background-color: @accent-10;
|
.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 {
|
table.wikitable,
|
||||||
color: @accent-90;
|
.suggestion-title {
|
||||||
}
|
color: @dark-text-90;
|
||||||
|
}
|
||||||
|
|
||||||
.mw-body-content #contentSub,
|
.suggestion-link.active {
|
||||||
.mw-body-content #contentSub2,
|
background-color: @accent-10;
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.mw-wiki-title,
|
.suggestion-link.active .suggestion-title {
|
||||||
.mw-body-content #mw-content-text .mw-parser-output #toc a {
|
color: @accent-90;
|
||||||
color: @dark-text-70;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.mw-body-content #mw-content-text .mw-parser-output #toc:before,
|
.mw-body-content #contentSub,
|
||||||
.mw-body-content #mw-content-text .mw-parser-output #toc:after {
|
.mw-body-content #contentSub2,
|
||||||
background: linear-gradient( @dark-bg-0, rgba( 0, 0, 0, 0.001 ) );
|
.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,
|
a.mw-wiki-title,
|
||||||
#page-tools #p-actions > nav:before,
|
.mw-body-content #mw-content-text .mw-parser-output #toc a {
|
||||||
.mw-header-menu-drawer-container .mw-nav-links a:after,
|
color: @dark-text-70;
|
||||||
.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 {
|
.mw-body-content #mw-content-text .mw-parser-output #toc:before,
|
||||||
.suggestion-title,
|
.mw-body-content #mw-content-text .mw-parser-output #toc:after {
|
||||||
.suggestion-description {
|
background: linear-gradient(@dark-bg-0, rgba(0, 0, 0, 0.001));
|
||||||
background: @dark-bg-20;
|
}
|
||||||
background: linear-gradient( to right, @dark-bg-40 8%, @dark-bg-30 38%, @dark-bg-40 54% );
|
|
||||||
}
|
#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,
|
@media only screen and (max-width: 1290px) and (prefers-color-scheme: dark) {
|
||||||
#site-search #search-toggle-icon-container #search-toggle-icon {
|
.mw-body-content #mw-content-text .mw-parser-output #toc {
|
||||||
opacity: 0.4;
|
background: @dark-bg-40;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mw-header-menu input:hover ~ .mw-header-menu-toggle > span,
|
@media only screen and (max-width: 1450px) and (prefers-color-scheme: dark) {
|
||||||
#site-search #search-toggle:hover ~ #search-toggle-icon-container #search-toggle-icon {
|
.mw-body-content #mw-content-text .mw-parser-output #toc {
|
||||||
opacity: 0.6;
|
.toctoggle a {
|
||||||
}
|
background-color: @dark-bg-50;
|
||||||
|
|
||||||
.mw-header-container:before {
|
&:before {
|
||||||
box-shadow: 0 0 50px @header-height rgba( 17, 21, 29, 1 );
|
filter: invert(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and ( max-width: 1290px ) and ( prefers-color-scheme: dark ) {
|
&:hover,
|
||||||
.mw-body-content #mw-content-text .mw-parser-output #toc {
|
&:focus {
|
||||||
background: @dark-bg-40;
|
background-color: @accent-10;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
@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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
Loading…
Reference in a new issue