MediaWiki:Cosmos.css

/* All CSS here will be loaded for users of the Cosmos skin */ /* Root var colors */


 * root {

--theme-body-background-color: #f7f7f7; --theme-body-background-image: url(''); --theme-body-text-color: #000; --theme-banner-background-color: #537d90; --theme-footer-background-color: #34495E; --theme-footer-links-list-color: #95A5A6; --theme-footer-links-list-link-color: #EAEDED; --theme-suggestions-results-background-color: #d6e2ef; --theme-suggestions-results-text-color: #000; --theme-suggestions-results-current-text-color: #fff; --theme-suggestions-results-special-child-hover-text-color: #000; --theme-suggestions-results-special-hover-background-color: #2a4b8d; --theme-suggestions-results-special-hover-text-color: #fff; --theme-diff-line-border-color: #aaffc7; --theme-diff-line-background-color: #d7d7d7; --theme-diff-addedline-diffchange-background-color: #aaffc7; --theme-diff-deletedline-border-color: #ef6881; --theme-diff-deletedline-diffchange-border-color: #ef6881; --theme-recentchanges-plusminus-pos: #00A400; --theme-recentchanges-plusminus-neg: #c5312d; --theme-discussion-button-text-color: #000; --theme-edit-button-background-color: #c0c0c0; --theme-edit-button-text-color: #000; --theme-gallery-image-background-color: #f8f9fa; --theme-containerTem-background-color: #537d90; }

/* ################## DARK  ####################### */ .theme-dark { --theme-body-text-color: #fff; --theme-body-background-color: #000; --theme-page-background-color: #5b5b5b; --theme-body-background-image: url(''); --theme-banner-background-color: #537d90; --theme-footer-background-color: #34495E;

--theme-link-color: #c1ae27; --theme-link-color--hover: #0b325c; --theme-link-label-color: #fff; --theme-link-color--visited: #57c3b9; --theme-link-color--external: #36b;

--theme-footer-links-list-color: #95A5A6; --theme-footer-links-list-link-color: #EAEDED; --theme-suggestions-results-background-color: #d6e2ef; --theme-suggestions-results-text-color: #000; --theme-suggestions-results-current-text-color: #fff; --theme-suggestions-results-special-child-hover-text-color: #000; --theme-suggestions-results-special-hover-background-color: #2a4b8d; --theme-suggestions-results-special-hover-text-color: #fff; --theme-diff-line-border-color: #aaffc7; --theme-diff-line-background-color: #d7d7d7; --theme-diff-addedline-diffchange-background-color: #aaffc7; --theme-diff-deletedline-border-color: #ef6881; --theme-diff-deletedline-diffchange-border-color: #ef6881; --theme-recentchanges-plusminus-pos: #00A400; --theme-recentchanges-plusminus-neg: #c5312d; --theme-discussion-button-text-color: #fff; --theme-gallery-image-background-color: transparent;/* #040404; */ --theme-containerTem-background-color: #ac826f; --theme-link-color: #f9ba52; --theme-link-color--visited: #71c4ff; --theme-page-containerTem-content-background-color: #70412c; --theme-page-toc-background-color: var(--theme-containerTem-background-color); --theme-page-toc-ul-background-color: var(--theme-page-containerTem-content-background-color); /*	--theme-body-dynamic-color-1: #fff; --theme-body-dynamic-color-2: #e6e6e6; --theme-page-dynamic-color-1: #000; --theme-page-dynamic-color-2: #3a3a3a; --theme-sticky-nav-dynamic-color-1: #fff; --theme-sticky-nav-dynamic-color-2: #e6e6e6; --theme-link-dynamic-color-1: #fff; --theme-link-dynamic-color-2: #e6e6e6; --theme-accent-dynamic-color-1: #fff; --theme-accent-dynamic-color-2: #e6e6e6; --theme-body-background-color: #090b0f; --theme-body-text-color: #fff; --theme-body-text-color--hover: #cccccc; --theme-sticky-nav-background-color: #182e44; --theme-sticky-nav-text-color: #fff; --theme-sticky-nav-text-color--hover: #cccccc; --theme-page-background-color: #feffff; --theme-page-background-color--secondary: #f1f2f2; --theme-page-text-color: #3a3a3a; --theme-page-text-color--rgb: 58,58,58; --theme-page-text-color--hover: #6d6d6d; --theme-page-text-mix-color: #9c9d9d; --theme-page-text-mix-color-95: #f4f5f5; --theme-page-accent-mix-color: #8f9598; --theme-page-headings-font: 'Work Sans'; --theme-link-color: #1764b7; --theme-link-color--hover: #0b325c; --theme-link-label-color: #fff; --theme-accent-color: #202a30; --theme-accent-color--hover: #485f6d; --theme-accent-label-color: #fff; --theme-border-color: #cdcece; --theme-alert-color: #bf0017; --theme-alert-color--hover: #59000a; --theme-alert-color--secondary: #bf0017; --theme-alert-label: #fff; --theme-warning-color: #cf721c; --theme-warning-color--secondary: #ce711b; --theme-warning-label: #000; --theme-success-color: #0c742f; --theme-success-color--secondary: #0c742f; --theme-success-label: #fff; --theme-message-color: #753369; --theme-message-label: #fff; --theme-community-header-color: #ffffff; --theme-community-header-color--hover: #ffffff; --theme-background-image-opacity: 76%; --theme-page-text-opacity-factor: 0.85; --theme-body-text-opacity-factor: 0.7; --theme-link-color--visited: #33806f; --theme-link-color--external: #3366bb; --theme-page-background-color--secondary: #e6f4fa; --theme-page-background-color--tertiary: #bfd2df; --theme-page-background-color--quaternary: #e1f2f5; --theme-page-background-color--quinary: #95b4ca; --theme-page-background-color--light: #f9f9f9; --theme-page-background-color--gray: #ddd; --theme-border-color-alt: #818181; */ }

.cosmos-header:before { border-radius: 10px 10px 0 0; }

.cosmos-button { padding: 8px 10px; }

height: 15px; }
 * 1) cosmos-articleHeader-actions .cosmos-button {

position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 55px; padding: 0; margin: 0; background-color: var(--theme-banner-background-color); font-size: 15px; }
 * 1) cosmos-banner {

display: flex; width: 100%; margin: 0 10px; background-color: var(--theme-banner-background-color); }
 * 1) cosmos-banner-search {

display: flex; align-items: center; margin: 0 10px; background-color: var(--theme-banner-background-color); }
 * 1) cosmos-banner-userOptions {

width: 100%; border: 0; margin: 0; background-color: var(--theme-footer-background-color); opacity: 0.7; }	#cosmos-footerContent-footerLinks { padding-top: 15px; }	#cosmos-footerLinks-info { padding: 0; margin: 0; }	.cosmos-footerLinks-list { padding: 0; margin: 0; color: var(--theme-footer-links-list-color); font-size: 10pt; list-style: none; }	.cosmos-footerLinks-list li a { color: var(--theme-footer-links-list-link-color); }	#cosmos-footerLinks-places > li { display: inline; padding: 0 0 5px 0; }	#cosmos-footerLinks-places > li:not( :first-child ):before { color: var(--theme-footer-links-list-link-color); content: ' | '; }
 * 1) cosmos-footer {
 * 1) cosmos-footer-footerContent {}

.va-documentation-links a { background-image: none !important; padding-right: 0 !important; }

section[data-item-name="images"] img { max-height: 300px; max-width: 270px !important; }

.thumbimage { background-color: transparent !important; border: 0 !important; }

.thumbcaption { border: 0 !important; padding: 0 !important; }

.thumbinner { background-color: transparent !important; }

.thumbinner .magnify a.internal { background-image: none !important; }

.thumbinner .magnify { display: none; }

.mw-highlight pre, #cosmos-pageBody-content pre { font-family: monospace !important; }

body > .suggestions .suggestions-results, body > .suggestions .suggestions-special { background-color: var(--theme-suggestions-results-background-color); color: var(--theme-suggestions-results-text-color); }

body > .suggestions .suggestions-result-current, body > .suggestions .suggestions-result-current .highlight { color: var(--theme-suggestions-results-current-text-color) !important; }

body > .suggestions .suggestions-special *:hover { color: var(--theme-suggestions-results-special-child-hover-text-color); }

body > .suggestions .suggestions-special:hover { background-color: var(--theme-suggestions-results-special-hover-background-color); color: var(--theme-suggestions-results-special-hover-text-color) !important; }

.mw-special-ApiSandbox .oo-ui-selectWidget { max-height:400px; }

max-width: 65%; }
 * 1) cosmos-articleHeader-title {

align-items: flex-start; }
 * 1) cosmos-header-articleHeader {

display: none !important; }
 * 1) cosmos-articleHeader-title .mw-indicators {

.CodeMirror-lines * { font-family: monospace; }

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { color: #FFFFFF !important; }

.diff-addedline, .diff-deletedline { border-color: var(--theme-diff-line-border-color) !important; background-color: var(--theme-diff-line-background-color) !important; }

.diff-addedline .diffchange { background: var(--theme-diff-addedline-diffchange-background-color) !important; }

.diff-deletedline { border-color: var(--theme-diff-deletedline-border-color) !important; }

.diff-deletedline .diffchange { background-color: var(--theme-diff-deletedline-diffchange-border-color) !important; }

.mw-rcfilters-ui-overlay { z-index: 100 !important; }

margin-right: 5px; }
 * 1) cosmos-articleHeader-title #cosmos-title-text {

.mw-specialpages-list { -webkit-columns: 16em 2; -moz-columns: 16em 2; columns: 16em 2; }

z-index: 2; }
 * 1) profile-image {

body * { font-family: 'Segoe UI', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; }

h2, h3, h4, h5 { margin-bottom: 4px !important; }

h4 { font-size: 1.07em; }

.cosmos-button-text { margin: 0 !important; }

background-color: var(--theme-body-background-color); background-size: 613px; background-image: var(--theme-body-background-image); }
 * 1) mw-content, .mw-content-banner {

.cosmos-userButton-label { margin-top: 0 !important; } .va-hatnote { display:flex; } .va-hatnote > div { line-height: 1.2em; }

.va-hatnote .va-hatnote-image img { vertical-align: baseline; margin-top: 0.1em; }

padding-top: 10px !important; position: relative; }
 * 1) catlinks {

position: relative; }
 * 1) catlinks > div {

/* Below is the code for the image on the right of the categories box  */ /* Written by Eckserah, inspired by Halopedia.org Nimbus skin categ box */ div#catlinks::before { content: ""; width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; background: var(--theme-page-background-color) url('') no-repeat top right; opacity: 0.25; background-size: 6%; background-position: 98% -10%; }

div.gallerytext { font-size: 75% !important; }

.ui-autocomplete { z-index: 3 !important; }

.anon-allowed-page .cosmos-header__local-navigation { visibility:hidden !important; }

.va-transcript-text { font-family: monospace !important; }

.va-transcript-text * { font-family: monospace !important; }

/* ################## DARK END  ####################### */

/* ############################################ */ /* ###      Recent changes byte drip       ### */ /* ############################################ */

.mw-plusminus-pos { color: var(--theme-recentchanges-plusminus-pos); }

.mw-plusminus-neg { color: var(--theme-recentchanges-plusminus-neg); }

/* ############################################ */ /* ###           Top Banner CSS            ### */ /* ###           User:Eckserah             ### */ /* ############################################ */

.mw-content-banner { height: auto; border-color: black; border-width: 2px 0; border-style: dashed solid; }

.topBannerMobile { display: none; }

/* ############################################ */ /* ###        Home page box alignment      ### */ /* ###           User:Eckserah             ### */ /* ############################################ */

.mainBoxContainer { width: 100%; display: flex; flex-wrap: wrap; }

.leftBoxContainer { flex: 70%; }

.rightBoxContainer { flex: 30%; }

/* ############################################ */ /* ###         Number of articles          ### */ /* ###           User:Kid Aces             ### */ /* ############################################ */

.cosmos-header__counter-label { display: block; margin-top: 3px; font-size: 12px; line-height: 1; text-transform: uppercase; }

.cosmos-header__counter-value { display: block; font-size: 20px; line-height: 1; }

/* ############################################ */ /* ###              Headings               ### */ /* ###           User:Kid Aces             ### */ /* ############################################ */ /* .mw-headline { font-family: 'Work Sans',sans-serif; text-transform: uppercase; padding-top: 3px; font-weight: 500; color: #000000; }*/

.snd_move_break { display: none; }

/* ############################################ */ /* ###          Dark mode stuff            ### */ /* ###           User:Eckserah             ### */ /* ############################################ */

body.theme-dark #mw-content-banner, body.theme-dark #mw-content, body.theme-dark .containerTem .containerContent, body.theme-dark #toc > ul { background-blend-mode: difference; }

body.theme-dark .containerTem .containerContent, body.theme-dark #toc > ul{ background-image: var(--theme-body-background-image); }

body.theme-dark #toc > ul { background-color: var(--theme-page-toc-ul-background-color); }

border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
 * 1) toc > ul {

overflow:hidden; }
 * 1) toc {

/* ############################################ */ /* ###     Vault boy image outline stuff   ### */ /* ###            User:Eckserah            ### */ /* ############################################ */

.theme-dark .vb-image img{ filter: none; filter: drop-shadow(0 0 0 white); }

body #mw-content-banner, body #mw-content, .mw-body h1.firstHeading, body h1, body h2, body h3, body h4, body h5, body h6, body #mw-content-text { color: var(--theme-body-text-color); }

color: var(--theme-discussion-button-text-color); stroke: var(--theme-discussion-button-text-color); }
 * 1) ca-talk.cosmos-button.cosmos-button-secondary {

background-color: var(--theme-edit-button-background-color); color: var(--theme-edit-button-text-color); stroke: var(--theme-edit-button-text-color) }
 * 1) cosmos-articleHeader-actions .cosmos-button-primary {

/* ############################################ */ /* ###       Dark mode gallery stuff       ### */ /* ###            User:Eckserah            ### */ /* ############################################ */

li.gallerybox div.thumb { background-color: var(--theme-gallery-image-background-color); }

.theme-dark li.gallerybox div.thumb img { filter: drop-shadow(0 0 0 white) drop-shadow(0 -1px 0 gray) drop-shadow(0 1px 0 gray); }

/* ############################################ */ /* ###           Interlang icons           ### */ /* ###            User:Eckserah            ### */ /* ############################################ */

margin: 0; }
 * 1) interlang-links p {

margin-left: 20px; }
 * 1) interlang-links {

border: 1px solid transparent; border-radius: 5px; }
 * 1) interlang-links .interlang-icon {