Difference between revisions of "MediaWiki:Vector.css"

Latest revision as of 06:02, 9 July 2023

/* Update: 2023-07-06.1
/* Main Vector Components Style */

/*********************************************\
*                Global Changes               *
\*********************************************/

#content h1 {
        font-family: var(--header-font);
        color: var(--header-color);
        background-color: var(--header-background-color);
    }
  
/* Use the SapiensLight font for other headers */
#content h2, #content h3, #content h4, #content h5, #content h6 {
        font-family: var(--sub-header-font);
        color: var(--header-color);
        background-color: var(--header-background-color);
    }

.mw-broken-media {
        background-color: var(--game-bad-red);
        font-family: var(--code-font-family);
        font-size: var(--main-font-size);
        color: var(--main-color);
    }

/*The caption underneath an image. */
figure[typeof~='mw:File/Thumb'] > figcaption, figure[typeof~='mw:File/Frame'] > figcaption {
        background-color: var(--header-background-color);
        font-family: var(--main-font);
        font-size: 0.8em;
        font-style: italic;
        color: var(--main-color);      
    }
    
/* Hyperlink Colors */
a {
    color: var(--unvisited-link-color);
}
a:visited {
    color: var(--visited-link-color);
}
a:hover {
    color:var(--mouseover-link-color);
}
a:active {
    color: var(--selected-link-color);
}
a.new, a.new:visited, a.new:hover, a.new:active {
    color: var(--non-existent-link-color);
}
a.external.text {
    color: var(--ext-link-color); /* replace with your desired color */
}
a.external.text:visited {
    color: var(--ext-link-visited-color); /* replace with your desired color for visited links */
}


/*********************************************\
*                 Header Section                *
\*********************************************/

#mw-head {
    font-family: var(--main-font);
    background-color: var(--background-color);
    color: var(--main-color);
}

#p-personal .vector-menu-content-list a {
    color: var(--unvisited-link-color); 
    background-color: var(--background-color);
}

.vector-menu-tabs li a {
    color: var(--unvisited-link-color);
    background-color: var(--background-color);
    font-family: var(--main-font);
    /*font-size: calc(1em*0.7);*/
}

.vector-menu-tabs li.selected a {
    color: var(--unvisited-link-color);
    font-family: var(--main-font);
}

.vector-menu-tabs-legacy .selected a, .vector-menu-tabs-legacy .selected a:visited {
    color: var(--dark-header-color);
    background-color: var(--background-color);
    font-family: var(--main-font);
}

.vector-menu-tabs-legacy .new a, .vector-menu-tabs-legacy .new a:visited {
    color: var(--unvisited-link-color);
}

.vector-search-box-input {
    background-color: white;
    color: black;
}

#searchInput {
    background-color: white;
    color: black;
}

.vector-menu-tabs .selected a, .vector-menu-tabs .selected a:visited {
    color: var(--dark-header-color);
    background-color: var(--background-color);
    font-family: var(--main-font);
}

/*********************************************\
*                 Body Section                *
\*********************************************/

.page-Main_Page .firstHeading {
        display: none;
}

  /* Use the main font for content */
body, p, li, td, th {
        font-family: var(--main-font);
        /* font-size: var(--main-font-size); */
        color: var(--main-color);
        background-color: var(--background-color);
    }

/* Table of Contents */
.toc, .tocnumber {
        font-family: var(--main-font);
        background-color: var(--background-color);
        color: var(--main-color);
}

#content{
        font-family: var(--main-font);
        background-color: var(--background-color);
        color: var(--main-color);
        font-size: var(--main-font-size);
    }


#mw-content-text {
        font-family: var(--main-font);
        background-color: var(--background-color);
        color: var(--main-color);
        font-size: var(--main-font-size);
    }

/* The code preview box on css editing pages like Common.css */
pre.mw-code.mw-css {
        background-color:  var(--background-color);
        font-family: var(--code-font-family);
        font-size: var(--main-font-size);
        color: var(--code-color);
    }

pre, code, .mw-code {
        background-color:  var(--background-color);
        font-family: var(--code-font-family);
        font-size: var(--main-font-size);
        color: var(--code-color);
    }

.catlinks {
        background-color: var(--background-color);
    }

    /* File Page Menu */
#filetoc {
        background-color: var(--background-color);
    }

/* Styles for the wikitable */
.wikitable {
        background-color: var(--background-color); /* replace with your table's background color */
        font-family: var(--main-font); /* replace with your font family */
        font-size: var(--main-font-size); /* replace with your font size */
    }

    /* Styles for the header row in the wikitable */
.wikitable > tr > th, .wikitable > * > tr > th {
        background-color: var(--header-background-color); /* replace with your header's background color */
        font-family: var(--sub-header-font); /* replace with your header's font family */
        color: var(--header-color);
        font-size: var(--main-font-size); /* replace with your header's font size */
    }

/* Styles for the other cells in the wikitable */
.wikitable td {
        background-color: var(--background-color); /* replace with your data row's background color */
        font-family: var(--main-font); /* replace with your data row's font family */
        font-size: var(--main-font-size); /* replace with your data row's font size */
    }

/*********************************************\
*                Navigation Bar               *
\*********************************************/

#mw-panel {
    background-color: var(--background-color); /* replace with your table's background color */
    font-family: var(--main-font); /* replace with your font family */
    font-size: var(--main-font-size); /* replace with your font size */
}

/* Side Menu Headers */
.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading {
    font-family: var(--sub-header-font);
    color: var(--header-color);
    font-size: 1em;
}

.vector-menu-portal h3 {
    font-family: var(--sub-header-font);
    color: var(--header-color);
    font-size: 1em;
}

.vector-menu-content {
    background-color: var(--background-color); /* replace with your table's background color */
    font-family: var(--main-font); /* replace with your font family */
    font-size: var(--main-font-size); /* replace with your font size */
}

#mw-panel a {
    color: var(--unvisited-link-color); /* Set the color of the text for regular, unvisited links. Change color as per your requirement. */
}

#mw-panel a:visited {
    color: var(--visited-link-color); /* Set the color of the text for visited links. Change color as per your requirement. */
}

#mw-panel a:hover {
    color: var(--mouseover-link-color); /* Set the color of the text for links when mouse hovers over them. Change color as per your requirement. */
}

#mw-panel a:active {
    color: var(--visited-link-color); /* Set the color of the text for active links. Change color as per your requirement. */
}


/*********************************************\
*                     Footer                  *
\*********************************************/

.mw-footer li{
    color: var(--main-color);
}