diff --git a/resources/components/darkmode.less b/resources/components/darkmode.less index 01862299..0374630d 100644 --- a/resources/components/darkmode.less +++ b/resources/components/darkmode.less @@ -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; + } + } + } +} \ No newline at end of file