Jump to content

MediaWiki:Common.css

From THS Wiki
Revision as of 01:55, 21 February 2026 by Closesttopurple (talk | contribs)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.


:root {
	color-scheme: dark;
	/*------------------
		BASE COLORS
	  ----------------*/
    --theme-sticky-nav-background-color: #666666;
    --theme-success-color: #0c742f;
    --theme-success-color--secondary: #0e8b38;
    --theme-sticky-nav-text-color: #fff;
    --theme-sticky-nav-text-color--hover: #cccccc;
    --theme-page-background-color: #3D3D3D;
    --theme-page-background-color--secondary: #352626;
    --theme-page-text-color: #e6e6e6;
    --theme-page-text-color--hover: #b3b3b3;
    --theme-page-text-mix-color: #7c7373;
    --theme-page-text-mix-color-95: #545454;
    --theme-page-accent-mix-color: #424242;
    --theme-page-headings-font: 'Inknut Antiqua';
    --theme-link-label-color: #000;
    --theme-accent-color: #a6a6a6;
    --theme-accent-color--hover: #ec4448;
    --theme-accent-label-color: #fff;
    --theme-border-color: #463a3a;
    --theme-alert-color: #bf0017;
    --theme-alert-color--hover: #fe2540;
    --theme-alert-color--secondary: #ec001c;
    --theme-alert-label: #fff;
    --theme-warning-color: #cf721c;
    --theme-warning-color--secondary: #cf721c;
    --theme-warning-label: #000;
    --theme-success-label: #fff;
    --theme-message-color: #913f82;
    --theme-message-label: #fff;
    --theme-community-header-color: #C8AA6E;
    --theme-community-header-color--hover: #8a5407;
	
	/*------------------
	   THEME VARIABLES
	  ------------------*/
    --body-main: #151414;
    --body-light: #222121;
    --body-mid: #171717;
    --body-dark: var(--body-mid);
    --body-border: #463a3a;
    --body-background-color: #65090b; /* Background color outside the main content div */
    --button-background: pink;
    --button-color: #980000;
    --button-border: #b00000;
    --button-dark: #65090b;
    --button-light: blue;
    --sidebar: #565656;
    --background-text-color: white;
    --background-link-color: var(--link-color);
    --heading-color: #E8E8EC;
    --notification: var(--body-main);
    --link-color: #adadad;
    --link-color--hover:#f7bb66; /*TODO*/
    --redlink-color: #e18284;
    --text-color: #ccc;
    --color-base: var(--text-color);
    --byline-color: grey;
    --subtle-color: grey;
    --thumb-bg: #282828;
    --thumb-caption-bg: var(--body-light);
    --sourceeditor-input-background: var(--body-dark);
    --sourceeditor-background: var(--body-light);
    --sourceeditor-background-secondary: var(--body-mid);
    --sourceeditor-border: var(--body-mid);
    --codemirror-gutter-background: var(--body-mid);
    --mw-code-background-color: var(--body-dark);
    --background-color-neutral-subtle: var(--body-light);
    
    /* Wikitables */
    --wikitable-header-bg: var(--body-light);
    --wikitable-header-bg-border: var(--body-border);
    --wikitable-bg: var(--body-main);
    --wikitable-bg-lighter: var(--body-mid);
    --wikitable-color: var(--text-color);
	--wikitable-border: var(--body-border);
    
    /* msgbox */
	--errorbox-bg: #9f261e;
    --errorbox-border: #65090b;
    --warningbox-bg: #342a14;
    --warningbox-border: #765816;
    --successbox-bg: #2e5e05;
    --successbox-border: #3c780a;

    /* diff */
    --diff-context-border-color: var(--body-mid);
    --diff-context-background: var(--body-mid);
    --diff-addedline-background: var(--rc-positive-color);
    --diff-addedline-border-color: var(--rc-positive-color);
    --diff-addedline-color: #fff;
    --diff-deletedline-background: var(--rc-negative-color);
    --diff-deletedline-border-color: var(--rc-negative-color);
    --diff-deletedline-color: #fff;
    --diff-inline-deletedline: #9f261e;
    
    /* Tabber */
    --tabber-tab-bg: var(--body-main);
    --tabber-tab-border-color: var(--link-color);
    --tabber-active-tab-bg: var(--body-main);
    --tabber-active-tab-color: var(--link-color);
    --tabber-active-tab-hover-bg: var(--body-light);
    --tabber-active-tab-hover-border-color: transparent;
    --tabber-active-tab-hover-color: var(--text-color);
    --tabber-active-tab-border-hider-color: var(--body-light);
    --tabber-inactive-tab-bg: var(--body-main);
    --tabber-inactive-tab-border-color: transparent;
    --tabber-inactive-tab-color: #7c7373;
    --tabber-inactive-tab-hover-bg: var(--body-light);
    --tabber-inactive-tab-hover-border-color: transparent;
    
	/* OOUI */    
    --ooui-text: var(--text-color);
    --ooui-interface: var(--body-light);
    --ooui-interface-border: var(--body-border);
    --ooui-window-background: rgba(0, 0, 0, 0.5); /* Overlay color when full screen popup occurs */
    --ooui-normal: var(--body-mid); /* Match body light to reduce contrast, this is used for "show preview" */
    --ooui-normal--hover: var(--body-light); /* Slightly lighter than above color */
    --ooui-normal-border: var(--body-border);
    --ooui-progressive: var(--button-color);
    --ooui-progressive--hover: var(--button-border); /* Slightly lighter than above color */
    --ooui-accent: var(--link-color);
    --ooui-input: var(--body-light); /* Text boxes, unchecked boxes */
    --ooui-input-border: var(--body-border);
    --ooui-input-border--hover: var(--body-border); /* Slightly lighter than above color */
    --ooui-disabled: #7c7373;
    --ooui-disabled-border: #c2b9ab;
    --ooui-disabled-text: var(--subtle-color);
    --ooui-destructive-text: white;
    --ooui-pending-background-image: repeating-linear-gradient(-45deg, var(--notification), var(--notification) 20px, var(--body-main) 20px, var(--body-main) 30px);
    
    /* 1.43 */
    --background-color-interactive-subtle: var(--ooui-interface);
    --border-color-base: var(--ooui-interface-border);
    --color-subtle: var(--subtle-color);
    --background-color-disabled-subtle: var(--ooui-interface);
    --background-color-base: var(--ooui-interface);
    --background-color-notice-subtle: var(--ooui-normal);

	/* Messageboxes */
    --messagebox-notice-border: #eab759;
    
    /* Template:Quote */
    --pull-quote-max-width: 80%;
    --pull-quote-text-color: var(--text-color);
    --pull-quote-mark-color: var(--messagebox-notice-border);
    --pull-quote-mark-font: "Times New Roman", serif;
    --pull-quote-hyphens: auto;
    --pull-quote-frame-color: #bbb;
    
    /* Recent changes */
    --rc-positive-color: #407813;
    --rc-negative-color: #b41e0f;
    --rc-highlight-c1: #232746; /* blue */
    --rc-highlight-c2: #143d31; /* green */
    --rc-highlight-c3: #594a2b; /* yellow */
    --rc-highlight-c4: #5c3a23; /* orange */
    --rc-highlight-c5: #4a1313; /* red */
    --rc-highlight-grey: #423636;
    
    /* Extra classes */
    --text-color-red: #f8948a;
    --text-color-orange: #f9b575;
    --text-color-yellow: #fbe062;
    --text-color-green: #a8de7a;
    --text-color-blue: #7cc5f0;
    --text-color-purple: #b097e6;
    --text-color-pink: #ed9ddd;
    --text-color-grey: #c5d2da;
    --table-bg-blue: #0b5884;
    --table-bg-green: #3c780a;
    --table-bg-yellow: #a48900;
    --table-bg-orange: #b55e0c;
    --table-bg-red: #9f261e;
    --table-bg-pink: #984c89;
    --table-bg-grey: #5d6773;
    
    /* SVG */
    --arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M11.05 3.996l-.965-1.053-4.035 3.86-3.947-3.86L1.05 3.996l5 5 5-5' fill='%23cbd9f4'/%3E%3C/svg%3E");
}

/* --------------------
           body
   -------------------- */


.toc, #toc { 
    display: none !important; 
}
.mw-logo-wordmark {
    display: none !important;
}
/* Hides the burger menu button in the header */
#vector-main-menu-dropdown-label {
    display: none !important;
}
/* Hide the Tools menu for anonymous users only */
.mw-anon-user #vector-page-tools-dropdown,
.mw-anon-user #p-tb, 
.mw-anon-user .vector-column-end {
    display: none !important;
}