Jump to content

MediaWiki:Common.css: Difference between revisions

From THS Wiki
No edit summary
No edit summary
Tag: Manual revert
 
(49 intermediate revisions by the same user not shown)
Line 1: Line 1:


.mw-logo-wordmark {
    display: none !important;
}
.mw-anon-user #vector-page-tools-dropdown,
.mw-anon-user #p-tb,
.mw-anon-user .vector-column-end {
    display: none !important;
}
.mw-page-container,
.mw-content-container,
.vector-sticky-header {
    max-width: none !important;
}
.mw-logo-icon {
    width: 160px !important;
    height: 160px !important;
}
/* Full-width banner at the absolute top, behind everything */
body {
    background-image: url('https://wiki.thehumanserver.org/images/9/9e/Wiki_background_top.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto; /* Forces image to fit screen width */
    background-attachment: scroll; /* Use 'fixed' if you want it to stay when scrolling */
}
/* Vector-2022 Specific: Make the skin's main containers transparent to reveal the banner */
.mw-page-container,
.mw-header,
.vector-sticky-header {
    background-color: transparent !important;
}
.mw-header {
    margin-top: 10px;
}
#content {
    background-color: #2f2f2f;
}
.vector-user-links {
    position: fixed;
    top: 10px;       
    right: 20px;   
    z-index: 1000;   
    transform: scale(1.2);
    transform-origin: top right;
    background: rgba(0, 0, 0, 0.5);
    padding: 5px 10px;
    border-radius: 8px;
}
.vector-user-links .vector-icon {
    width: 24px;
    height: 24px;
}


:root {
a {
color-scheme: dark;
     color: #d1d1d1 !important;
/*------------------
}
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 */
a:visited {
    --messagebox-notice-border: #eab759;
     color: #A8A9AD !important;
   
    /* 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");
}
}


/* --------------------
a:hover {
          body
    color: #e0e0e0 !important;
  -------------------- */
    text-decoration: underline;
}
 
 
@media screen and (max-width: 1919px) {
 
    .mobile-card-table,
    .mobile-card-table tbody,
    .mobile-card-table tr,
    .mobile-card-table td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        border: none !important;
    }
 
    .mobile-card-table tr {
 
        padding: 10px;
        background: rgba(255, 255, 255, 0.05);
                border: none !important;
    }


}


.portable-infobox {
    float: right;       
    clear: right;         
    margin-top: 1% !important; 
    margin-right: 2.5% !important;
    margin-left: 20px;           
    margin-bottom: 10px;
    border-radius: 1.2%; 
    border: 6px solid #aaa;
    overflow: hidden;     
    width: 350px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    background-color: 232323 !important;
}


.mw-logo-wordmark {
.portable-infobox .pi-title {
     display: none !important;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
@media screen and (max-width: 1219px) {
.portable-infobox {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 1em 0 !important;
    box-sizing: border-box !important;
     display: block !important;
}
}
/* Hides the burger menu button in the header */
 
#vector-main-menu-dropdown-label {
 
     display: none !important;
.portable-infobox .wds-tabs__wrapper {
    overflow-x: auto !important;
    white-space: nowrap !important;
     width: 100% !important;
}
}
/* Hide the Tools menu for anonymous users only */
 
.mw-anon-user #vector-page-tools-dropdown,
.portable-infobox .pi-image img {
.mw-anon-user #p-tb,
    max-width: 100% !important;
.mw-anon-user .vector-column-end {
    height: auto !important;
     display: none !important;
     width: auto !important;
}
}
/* Hides TOC globally for all users and all skins */
 
.toc, #toc, .vector-toc, #vector-toc-pinned-container {
@media screen and (max-width: 450px) {
     display: none !important;
    .portable-infobox .pi-data {
        display: block !important;
    }
    .portable-infobox .pi-data-label {
        width: 100% !important;
        text-align: left !important;
        padding-bottom: 2px;
    }
     .portable-infobox .pi-data-value {
        width: 100% !important;
        text-align: left !important;
        padding-left: 10px;
    }
}
}
/* Forces full width across all pages in Vector 2022 */
.mw-page-container,
.mw-content-container,
.vector-sticky-header {
    max-width: none !important;
}
}

Latest revision as of 20:22, 24 February 2026


.mw-logo-wordmark {
    display: none !important;
}

.mw-anon-user #vector-page-tools-dropdown,
.mw-anon-user #p-tb, 
.mw-anon-user .vector-column-end {
    display: none !important;
}

.mw-page-container, 
.mw-content-container, 
.vector-sticky-header {
    max-width: none !important;
}

.mw-logo-icon {
    width: 160px !important;
    height: 160px !important;
}

/* Full-width banner at the absolute top, behind everything */
body {
    background-image: url('https://wiki.thehumanserver.org/images/9/9e/Wiki_background_top.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto; /* Forces image to fit screen width */
    background-attachment: scroll; /* Use 'fixed' if you want it to stay when scrolling */
}

/* Vector-2022 Specific: Make the skin's main containers transparent to reveal the banner */
.mw-page-container, 
.mw-header, 
.vector-sticky-header {
    background-color: transparent !important;
}


.mw-header {
    margin-top: 10px;
}
#content {
    background-color: #2f2f2f;
}
.vector-user-links {
    position: fixed; 
    top: 10px;        
    right: 20px;     
    z-index: 1000;     
    transform: scale(1.2); 
    transform-origin: top right; 
    background: rgba(0, 0, 0, 0.5); 
    padding: 5px 10px;
    border-radius: 8px;
}

.vector-user-links .vector-icon {
    width: 24px;
    height: 24px;
}

a {
    color: #d1d1d1 !important;
}


a:visited {
    color: #A8A9AD !important;
}

a:hover {
    color: #e0e0e0 !important;
    text-decoration: underline;
}


@media screen and (max-width: 1919px) {

    .mobile-card-table, 
    .mobile-card-table tbody, 
    .mobile-card-table tr, 
    .mobile-card-table td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        border: none !important;
    }

    .mobile-card-table tr {

        padding: 10px;
        background: rgba(255, 255, 255, 0.05); 
                border: none !important;
    }

}

.portable-infobox {
    float: right;         
    clear: right;           
    margin-top: 1% !important;  
    margin-right: 2.5% !important; 
    margin-left: 20px;             
    margin-bottom: 10px;
    border-radius: 1.2%;   
    border: 6px solid #aaa;
    overflow: hidden;      
    width: 350px !important; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    background-color: 232323 !important;
}

.portable-infobox .pi-title {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
@media screen and (max-width: 1219px) {
.portable-infobox {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 1em 0 !important;
    box-sizing: border-box !important;
    display: block !important;
}


.portable-infobox .wds-tabs__wrapper {
    overflow-x: auto !important;
    white-space: nowrap !important;
    width: 100% !important;
}

.portable-infobox .pi-image img {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
}

@media screen and (max-width: 450px) {
    .portable-infobox .pi-data {
        display: block !important;
    }
    .portable-infobox .pi-data-label {
        width: 100% !important;
        text-align: left !important;
        padding-bottom: 2px;
    }
    .portable-infobox .pi-data-value {
        width: 100% !important;
        text-align: left !important;
        padding-left: 10px;
    }
}
}