Difference between revisions of "Dark.css"
Stratonian (talk | contribs) (Adding class colors to Common.css instead) |
Stratonian (talk | contribs) m (color variables) |
||
Line 1: | Line 1: | ||
body { | body { | ||
− | background: #111217; | + | --background-color--primary: #262831; |
+ | --background-color--secondary: #111217; | ||
+ | |||
+ | background: var(--background-color--secondary); | ||
color: #f0f2f5; | color: #f0f2f5; | ||
font-size: 0.9rem; | font-size: 0.9rem; | ||
− | |||
} | } | ||
Line 42: | Line 44: | ||
.secondary-nav { | .secondary-nav { | ||
− | background: | + | background: var(--background-color--primary); |
border-bottom: 2px solid rgb(17 18 23 / 0.75); | border-bottom: 2px solid rgb(17 18 23 / 0.75); | ||
padding: 0.5rem 1rem; | padding: 0.5rem 1rem; | ||
Line 71: | Line 73: | ||
.p-navbar { | .p-navbar { | ||
− | background-color: | + | background-color: var(--background-color--primary); |
} | } | ||
Line 85: | Line 87: | ||
h1, h2, .h1, .h2 { | h1, h2, .h1, .h2 { | ||
− | border-bottom: 1px solid | + | border-bottom: 1px solid var(--background-color--primary); |
padding-bottom: 0.5rem; | padding-bottom: 0.5rem; | ||
} | } | ||
Line 95: | Line 97: | ||
#filetoc { | #filetoc { | ||
border: none; | border: none; | ||
− | background-color: | + | background-color: var(--background-color--primary); |
} | } | ||
Line 169: | Line 171: | ||
.toc, .mw-warning, .toccolours { | .toc, .mw-warning, .toccolours { | ||
border: none; | border: none; | ||
− | background-color: | + | background-color: var(--background-color--primary); |
/*box-shadow: 0 0.25rem 0.35rem -0.25rem rgb(17 18 23);*/ | /*box-shadow: 0 0.25rem 0.35rem -0.25rem rgb(17 18 23);*/ | ||
} | } | ||
Line 205: | Line 207: | ||
.skill-row { | .skill-row { | ||
padding: 0.75rem; | padding: 0.75rem; | ||
− | background: | + | background: var(--background-color--primary); |
margin-bottom: 1rem; | margin-bottom: 1rem; | ||
border-radius: 0.25rem; | border-radius: 0.25rem; | ||
Line 256: | Line 258: | ||
border: none!important; | border: none!important; | ||
padding: 0.25rem!important; | padding: 0.25rem!important; | ||
− | background-color: | + | background-color: var(--background-color--primary) !important; |
} | } | ||
.thumbimage { | .thumbimage { | ||
− | border: 1px solid | + | border: 1px solid var(--background-color--secondary) !important; |
− | background: | + | background: var(--background-color--secondary) !important; |
} | } | ||
Line 279: | Line 281: | ||
.wikitable { | .wikitable { | ||
− | background: | + | background: var(--background-color--primary); |
color: #f0f2f5; | color: #f0f2f5; | ||
width: auto; | width: auto; | ||
Line 291: | Line 293: | ||
position: relative; | position: relative; | ||
width: 302px; | width: 302px; | ||
− | background: | + | background: var(--background-color--primary); |
margin: 0 0 1em 1em; | margin: 0 0 1em 1em; | ||
padding: 0; | padding: 0; | ||
Line 319: | Line 321: | ||
pre, .mw-code { | pre, .mw-code { | ||
color: #f0f2f5; | color: #f0f2f5; | ||
− | background-color: | + | background-color: var(--background-color--primary); |
margin-top: 1rem; | margin-top: 1rem; | ||
border: none; | border: none; | ||
Line 329: | Line 331: | ||
.wikiEditor-ui-toolbar { | .wikiEditor-ui-toolbar { | ||
− | color: | + | color: var(--background-color--secondary); |
} | } | ||
Line 342: | Line 344: | ||
.stub-box { | .stub-box { | ||
padding: 0.5rem 0.75rem; | padding: 0.5rem 0.75rem; | ||
− | background: | + | background: var(--background-color--primary); |
margin: 0 auto; | margin: 0 auto; | ||
margin-bottom: 1rem; | margin-bottom: 1rem; | ||
Line 377: | Line 379: | ||
.dropdown-menu { | .dropdown-menu { | ||
− | background-color: | + | background-color: var(--background-color--secondary); |
} | } | ||
Line 386: | Line 388: | ||
.dropdown-item:hover, .p-navbar .navbar-nav .dropdown-menu > div > a:last-child:first-child:hover, .dropdown-item:focus, .p-navbar .navbar-nav .dropdown-menu > div > a:last-child:first-child:focus { | .dropdown-item:hover, .p-navbar .navbar-nav .dropdown-menu > div > a:last-child:first-child:hover, .dropdown-item:focus, .p-navbar .navbar-nav .dropdown-menu > div > a:last-child:first-child:focus { | ||
− | background: | + | background: var(--background-color--primary); |
color: #f0f2f5; | color: #f0f2f5; | ||
} | } | ||
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend { | .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend { | ||
− | background-color: | + | background-color: var(--background-color--primary); |
border: none; | border: none; | ||
} | } | ||
Line 400: | Line 402: | ||
.oo-ui-tabSelectWidget-framed { | .oo-ui-tabSelectWidget-framed { | ||
− | background-color: | + | background-color: var(--background-color--primary); |
} | } | ||
Line 413: | Line 415: | ||
.mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed { | .mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed { | ||
− | border-color: | + | border-color: var(--background-color--primary); |
} | } | ||
Line 425: | Line 427: | ||
.mw-prefs-buttons { | .mw-prefs-buttons { | ||
− | background-color: | + | background-color: var(--background-color--primary); |
border-top: none; | border-top: none; | ||
padding-left: 1rem; | padding-left: 1rem; | ||
Line 432: | Line 434: | ||
.oo-ui-panelLayout-framed { | .oo-ui-panelLayout-framed { | ||
border: none; | border: none; | ||
− | background: | + | background: var(--background-color--primary); |
} | } | ||
li.gallerybox div.thumb { | li.gallerybox div.thumb { | ||
border: none; | border: none; | ||
− | background-color: | + | background-color: var(--background-color--primary); |
} | } | ||
Line 500: | Line 502: | ||
.codeEditor-status { | .codeEditor-status { | ||
− | color: | + | color: var(--background-color--secondary); |
} | } | ||
Line 532: | Line 534: | ||
.mw-search-profile-tabs, #mw-searchoptions { | .mw-search-profile-tabs, #mw-searchoptions { | ||
− | background-color: | + | background-color: var(--background-color--primary); |
border: none; | border: none; | ||
} | } | ||
Line 545: | Line 547: | ||
#pagehistory li.selected { | #pagehistory li.selected { | ||
− | background-color: | + | background-color: var(--background-color--primary); |
color: #f0f2f5; | color: #f0f2f5; | ||
outline: 1px dashed #f0f2f5; | outline: 1px dashed #f0f2f5; | ||
Line 561: | Line 563: | ||
.diff-context { | .diff-context { | ||
− | background: | + | background: var(--background-color--primary); |
− | border-color: | + | border-color: var(--background-color--secondary); |
color: #f0f2f5; | color: #f0f2f5; | ||
} | } | ||
Line 572: | Line 574: | ||
.diff-addedline .diffchange { | .diff-addedline .diffchange { | ||
background: #5e9a6b; | background: #5e9a6b; | ||
− | color: | + | color: var(--background-color--secondary); |
} | } | ||
Line 581: | Line 583: | ||
.diff-deletedline .diffchange { | .diff-deletedline .diffchange { | ||
background: #9a5e5e; | background: #9a5e5e; | ||
− | color: | + | color: var(--background-color--secondary); |
} | } |
Revision as of 20:37, 27 February 2023
body { --background-color--primary: #262831; --background-color--secondary: #111217; background: var(--background-color--secondary); color: #f0f2f5; font-size: 0.9rem; } .full-width { width: 100%; } .p-navbar .navbar-brand img { height: 23px; top: -2px; transition: background-color 0.2s ease-in 0s, opacity 0.2s ease-in 0s, color 0.2s ease-in 0s; } .p-navbar .navbar-brand img:hover { opacity: 0.6; } #searchform .form-control:focus { background: #000; box-shadow: none; color: #fff; } .row { margin-left: 0; margin-right: 0; } .container { max-width: 1650px; padding-right: 0; padding-left: 0; } #mw-navigation { border-bottom: 1px solid rgb(17 18 23 / 0.4); } .secondary-nav { background: var(--background-color--primary); border-bottom: 2px solid rgb(17 18 23 / 0.75); padding: 0.5rem 1rem; } .secondary-nav > a { margin-right: 1.5rem; text-transform: uppercase; font-weight: 500; font-size: 0.8rem; transition: background-color 0.2s ease-in 0s, opacity 0.2s ease-in 0s, color 0.2s ease-in 0s; } .secondary-nav > a:hover, .secondary-nav > a:focus { color: #fff; text-decoration: none; } .mw-body { padding: 0; margin-bottom: 1rem; } .main-container { background: #1b1c23; /*box-shadow: 0 1px 5px 1px rgba(0,0,0,.4);*/ } .p-navbar { background-color: var(--background-color--primary); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: #fff; padding: 0; margin-top: 1rem!important; margin-bottom: 0.75rem!important; border: none; /*font-family: 'PT Serif', serif; font-weight: 700;*/ } h1, h2, .h1, .h2 { border-bottom: 1px solid var(--background-color--primary); padding-bottom: 0.5rem; } h2, .h2 { margin-top: 2rem!important; } #filetoc { border: none; background-color: var(--background-color--primary); } .mw-mmv-image-metadata { margin-top: 0; } .mw-mmv-post-image a, .mw-mmv-post-image a:visited, .warningbox a, .warningbox a:visited { color: #36c; } a, a[href].external, .mw-parser-output a.extiw:visited, .mw-parser-output a.external:visited { color: #f9a916; } a:hover, a[href].external:hover { color: #f9a916; } a:visited { color: #f9a916; } a[href].new { color: #ff0000; } a[href].new:hover { color: #ff0000; } .mw-parser-output a.external, .link-https { background-position: right center; background-repeat: no-repeat; background-image: url(https://corepunk.wiki/w/images/c/c1/External-link-icon.png); background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2213%22 height=%2213%22%3E %3Cpath fill=%22%2336b%22 d=%22M5.002 1.01h7v7l-2-2-3 2v-1l3-2.25 1 1V2.01h-3.75l1 1-2.25 3h-1l2-3z%22/%3E %3Cpath fill=%22%2336b%22 d=%22M7.002 3.01h-5v8h8v-5h-1v4h-6v-6h4z%22/%3E %3Cpath fill=%22%2315a5ea%22 d=%22M4.082 5.51c0-.621.621-.621.621-.621 1.864.621 3.107 1.864 3.728 3.728 0 0 0 .621-.62.621-1.245-1.864-1.866-2.485-3.73-3.728z%22/%3E %3C/svg%3E"); padding-right: 15px; } a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus { opacity: 1; } .navbar-light .navbar-nav .nav-link, .p-navbar .navbar-nav .nav-link, .navbar-light .navbar-nav .p-navbar .navbar-tool > a, .p-navbar .navbar-light .navbar-nav .navbar-tool > a, .p-navbar .navbar-nav .navbar-tool > a { color: #cacaca; text-transform: uppercase; font-size: 0.8rem; transition: background-color 0.2s ease-in 0s, opacity 0.2s ease-in 0s, color 0.2s ease-in 0s; } .navbar-light .navbar-nav .nav-link:hover, .p-navbar .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .p-navbar .navbar-tool > a:hover, .p-navbar .navbar-light .navbar-nav .navbar-tool > a:hover, .p-navbar .navbar-nav .navbar-tool > a:hover, .navbar-light .navbar-nav .nav-link:focus, .p-navbar .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .p-navbar .navbar-tool > a:focus, .p-navbar .navbar-light .navbar-nav .navbar-tool > a:focus, .p-navbar .navbar-nav .navbar-tool > a:focus { color: #fff; opacity: 1; } .fa-asterisk:before, .navbar-tool-link:before { content: ""; } #mw-indicators { display: none; } .text-muted { color: rgb(255 255 255 / 0.6) !important; } .toc { padding: 0.5rem 0.75rem; margin-bottom: 1rem; } .toc, .mw-warning, .toccolours { border: none; background-color: var(--background-color--primary); /*box-shadow: 0 0.25rem 0.35rem -0.25rem rgb(17 18 23);*/ } .mw-body .toc ul li a .tocnumber { display: none; } .toctogglelabel { color: #f9a916; } .toctogglelabel:hover { color: #f9a916; opacity: 0.6; text-decoration: none; } .toc .toctitle { text-align: left; } .mw-body .toc ul li ul { margin-left: 1.5rem; } .floatright { float: right; } .mw-body .firstHeading { border-bottom: 1px solid rgb(38 40 49); } .skill-row { padding: 0.75rem; background: var(--background-color--primary); margin-bottom: 1rem; border-radius: 0.25rem; } div.tright { margin: 0 0 1rem 1rem; } @media screen and (max-width: 768px) { div.tright, div.floatright, table.floatright { width: 100%!important; float: none!important; clear: none!important; margin: 1rem 0 1rem 0!important; } } @media screen and (max-width: 1104px) { #p-search { margin-top: 1rem; } } .right-sidebar { max-width: 270px; margin-left: 1rem; } @media screen and (max-width: 1024px){ .right-sidebar { display: none; } } @media screen and (max-width: 500px) { .infobox-right { float: none!important; margin: 0 auto!important; margin-bottom: 1rem!important; width: 100%!important; } } .thumb.tright { /*box-shadow: 0 0.25rem 0.35rem -0.25rem rgb(17 18 23);*/ } .thumbinner { border: none!important; padding: 0.25rem!important; background-color: var(--background-color--primary) !important; } .thumbimage { border: 1px solid var(--background-color--secondary) !important; background: var(--background-color--secondary) !important; } .table-responsive { width: auto; } .wikitable > tr > th, .wikitable > * > tr > th { background-color: #ffffff1a; text-align: left; } .wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { border: none; border-bottom: 1px solid #1b1c23; padding: 0.5rem 0.75rem; } .wikitable { background: var(--background-color--primary); color: #f0f2f5; width: auto; border: none; font-size: 0.9rem; margin: 0; } .infobox-right { float: right; position: relative; width: 302px; background: var(--background-color--primary); margin: 0 0 1em 1em; padding: 0; /*box-shadow: 0 0.25rem 0.35rem -0.25rem rgb(17 18 23);*/ } @media screen and (max-width: 1679px) { .footer-container { padding: 0 0.5rem; } } .footer-info > div { margin: 0.5rem 1rem 0 0; opacity: 0.5; } .footer-places > div { margin: 0.5rem 1rem 0.5rem 0; } .footer-info, .footer-places, .footer-icons { margin-left: 0; margin-right: 0; } pre, .mw-code { color: #f0f2f5; background-color: var(--background-color--primary); margin-top: 1rem; border: none; } dt { font-weight: 600; } .wikiEditor-ui-toolbar { color: var(--background-color--secondary); } .wikiEditor-ui { margin-bottom: 1rem; } dl { margin: 0.7rem 0; } .stub-box { padding: 0.5rem 0.75rem; background: var(--background-color--primary); margin: 0 auto; margin-bottom: 1rem; width: fit-content; border-left: 10px solid #dd9090; } #footer-toolbox { margin: 0.5rem 1rem 0 0; } .skill-infobox-row-heading { border-right: 3px solid #3c3e46!important; border-bottom: none!important; text-align: right; } .skill-infobox-row-data { word-break: break-word; border-bottom: none!important; } .jquery-tablesorter th.headerSortUp { background-image: url(/w/images/8/81/Sort_up.png)!important; } .jquery-tablesorter th.headerSortDown { background-image: url(/w/images/f/f3/Sort_down.png)!important; } .client-js .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable), .jquery-tablesorter th.headerSort { background-image: url(/w/images/a/a6/Sort_both.png); } .dropdown-menu { background-color: var(--background-color--secondary); } .dropdown-item, .p-navbar .navbar-nav .dropdown-menu > div > a:first-child:last-child { color: #f0f2f5; font-size: 0.9rem; } .dropdown-item:hover, .p-navbar .navbar-nav .dropdown-menu > div > a:last-child:first-child:hover, .dropdown-item:focus, .p-navbar .navbar-nav .dropdown-menu > div > a:last-child:first-child:focus { background: var(--background-color--primary); color: #f0f2f5; } .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend { background-color: var(--background-color--primary); border: none; } .mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout { border-color: transparent; } .oo-ui-tabSelectWidget-framed { background-color: var(--background-color--primary); } .oo-ui-tabOptionWidget { color: #f9a916; } .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected, .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:hover, .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:active, .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover { background-color: #1b1c23; color: #fff; } .mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed { border-color: var(--background-color--primary); } .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected .oo-ui-labelElement-label { border-bottom-color: #1b1c23; } .oo-ui-labelWidget.oo-ui-inline-help { color: rgb(255 255 255 / 0.5); } .mw-prefs-buttons { background-color: var(--background-color--primary); border-top: none; padding-left: 1rem; } .oo-ui-panelLayout-framed { border: none; background: var(--background-color--primary); } li.gallerybox div.thumb { border: none; background-color: var(--background-color--primary); } .form-control { background-color: #1b1c23; border: none; color: rgb(255 255 255 / 0.5); } .input-group-append { margin-left: 0; } #searchGoButton { display: none; } .p-navbar .navbar-nav .navbar-tools, .p-navbar .navbar-form { padding-left: 0.5rem; padding-right: 0.5rem; } .input-group > .form-control:not(:last-child), .input-group > .custom-select:not(:last-child) { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } .mw-special-Block .mw-htmlform > .oo-ui-panelLayout-padded { padding: 1rem; } button:focus { outline: none; } div.mw-warning-with-logexcerpt { padding: 0.5rem 1rem; margin-bottom: 1rem; border: none; } .warningbox { border-radius: 0; } .mw-editfooter-list { margin-bottom: 0; margin-left: 0; } .templatesUsed { margin-top: 1rem; } .templatesUsed p { margin-bottom: 0.25rem; } :focus { outline: none; } .codeEditor-status { color: var(--background-color--secondary); } .mw-mmv-image-links { margin: 0; } .mw-mmv-image-links-div ol, .mw-mmv-image-links-div ul { padding-left: 0; } .mw-mmv-image-metadata-links-column { width: auto; } .mw-mmv-about-links { width: 100%; } .mw-mmv-license { padding-right: 10px; } #searchform input { transition: background-color 0.2s ease-in 0s, opacity 0.2s ease-in 0s, color 0.2s ease-in 0s; } .mw-search-result-data { display: none; } .mw-search-profile-tabs, #mw-searchoptions { background-color: var(--background-color--primary); border: none; } #mw-searchoptions .divider { border: none; } .search-types .current a { color: #f0f2f5; } #pagehistory li.selected { background-color: var(--background-color--primary); color: #f0f2f5; outline: 1px dashed #f0f2f5; } #pagehistory { margin-top: 1rem; } #mw-history-compare { margin-top: 1rem; margin-bottom: 1rem; } .diff-context { background: var(--background-color--primary); border-color: var(--background-color--secondary); color: #f0f2f5; } .diff-addedline { border-color: #5e9a6b; } .diff-addedline .diffchange { background: #5e9a6b; color: var(--background-color--secondary); } .diff-deletedline { border-color: #9a5e5e; } .diff-deletedline .diffchange { background: #9a5e5e; color: var(--background-color--secondary); }