MediaWiki:Common.css: Difference between revisions

From RollerCoaster Tycoon Wiki Wiki, the RollerCoaster Tycoon encyclopedia that anyone can edit.
Content added Content deleted
(Make sideboxes red, fix tabs and style user links)
(Make footer more easily readable)
Line 176: Line 176:
{
{
color: white;
color: white;
}

/* Footer */
body.skin-vector .mw-footer li
{
color: #999999
}

body.skin-vector .mw-footer li a
{
color: #66a5ff
}
}

Revision as of 18:32, 1 June 2021

:root {
    --rct-indian-red: #b34f4f;
    --rct-indian-red-lighter: #c76767;
    --rct-indian-red-darker: #7b1312;
    --rct-dark-indian-red: #530000;
    --rct-light-grey: #839797;
    --rct-light-grey-lighter: #9fafaf;
    --rct-light-grey-darker: #5b7373;
    --rct-dark-grey: #3f5353;
    --rct-white: #d3dbdb;
    --rct-white-lighter: #eff3f3;
    --rct-white-darker: #9fafaf;
    --rct-white-inactive-tab-background: #b7c3c3;
    --rct-white-inactive-tab-darker: #839797;
    --rct-gold: #a76f07;
    --rct-gold-lighter: #bf8b0f;
    --rct-gold-darker: #773f00;
    --rct-dark-gold: #4b2200;
}

body.skin-vector
{
    /*background-color: var(--rct-indian-red);*/
    background: url('https://static.miraheze.org/rctwiki/0/01/Mowedgrass.png');
}

body.skin-vector #mw-page-base
{
    /*background-color: var(--rct-indian-red);
    background-image: none;*/
    background: none;
}

body.skin-vector .mw-body
{
    background-color: var(--rct-white);
    border-top: 1px solid var(--rct-white-lighter);
    border-left-color: var(--rct-white-lighter);
    border-right-color: var(--rct-white-darker);
    border-bottom-color: var(--rct-white-darker);
}

body.skin-vector #body-content
{

}

/* Tabs like Main page, Discussion, etc. */
body.skin-vector #left-navigation,
body.skin-vector #right-navigation
{
    margin-top: calc(2.5em - 2px);
}

body.skin-vector #left-navigation
{
    padding-left: 3px;
}


body.skin-vector #left-navigation .vector-menu-tabs,
body.skin-vector #right-navigation .vector-menu-tabs
{
    background-image: none;
}


body.skin-vector #left-navigation ul.vector-menu-content-list li,
body.skin-vector #right-navigation ul.vector-menu-content-list li,
body.skin-vector #right-navigation .vector-menu-dropdown h3
{
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

body.skin-vector #left-navigation ul.vector-menu-content-list li.selected,
body.skin-vector #right-navigation ul.vector-menu-content-list li.selected
{
    background-color: var(--rct-white);
    border-left: 1px solid var(--rct-white-lighter);
    border-top: 1px solid var(--rct-white-lighter);
    border-right: 1px solid var(--rct-white-darker);
    border-bottom: 1px solid var(--rct-white);
}

body.skin-vector #left-navigation ul.vector-menu-content-list li:not(.selected),
body.skin-vector #right-navigation ul.vector-menu-content-list li:not(.selected),
body.skin-vector #right-navigation .vector-menu-dropdown h3
{
    background-color: var(--rct-white-inactive-tab-background);
    border-left: 1px solid var(--rct-white-lighter);
    border-top: 1px solid var(--rct-white-lighter);
    border-right: 1px solid var(--rct-white-inactive-tab-darker);
    border-bottom: 1px solid var(--rct-white-inactive-tab-background);
    background-image: none;
}

body.skin-vector #left-navigation ul.vector-menu-content-list li a,
body.skin-vector #right-navigation ul.vector-menu-content-list li a,
body.skin-vector #right-navigation .vector-menu-dropdown h3
{
    background-image: none;
    padding-top: 0.8em;
}

body.skin-vector #right-navigation .vector-menu-dropdown h3::after
{
    top: 0.3em;
}

body.skin-vector #right-navigation .vector-menu-dropdown h3
{
    height: calc(3.07692308em + 2px);
}

body.skin-vector .mw-watchlink a
{
    height: 3.07692308em !important;
    color: transparent;
    padding-top: 0;
}

/* Navigation boxes on the left */
body.skin-vector #mw-panel nav
{
    background-color: var(--rct-indian-red);
    border: 1px solid;
    border-top-color: var(--rct-indian-red-lighter);
    border-left-color: var(--rct-indian-red-lighter);
    border-right-color: var(--rct-indian-red-darker);
    border-bottom-color: var(--rct-indian-red-darker);
    padding-top: 0;
}

body.skin-vector #mw-panel nav + nav
{
    margin-top: 15px;
}

body.skin-vector #mw-panel nav h3
{
    height: 12px;
    margin: 0;
    border: 1px solid;
    border-top-color: var(--rct-indian-red-darker);
    border-left-color: var(--rct-indian-red-darker);
    border-right-color: var(--rct-indian-red-lighter);
    border-bottom-color: var(--rct-indian-red-lighter);
    background-color: var(--rct-dark-indian-red);
    color: white;
    font-weight: bold;
    text-align: center;
    background-image: none;
    line-height: 12px;
}

/* User links (top right) */
body.skin-vector #p-personal li
{
    background-color: var(--rct-light-grey);
    border: 1px solid;
    border-top-color: var(--rct-light-grey-lighter);
    border-left-color: var(--rct-light-grey-lighter);
    border-right-color: var(--rct-light-grey-darker);
    border-bottom-color: var(--rct-light-grey-darker);
    color: white;
    font-weight: bold;
    min-height: 28px;
    box-sizing: border-box;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
}

body.skin-vector #p-personal li a
{
    color: white;
}

/* Footer */
body.skin-vector .mw-footer li
{
    color: #999999
}

body.skin-vector .mw-footer li a
{
    color: #66a5ff
}