MediaWiki:Common.css: Difference between revisions

From RollerCoaster Tycoon Wiki Wiki, the RollerCoaster Tycoon encyclopedia that anyone can edit.
Content added Content deleted
(Try grass background)
(Make sideboxes red, fix tabs and style user links)
Line 1: Line 1:
:root {
:root {
--rct-indian-red: #b34f4f;
--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: #839797;
--rct-light-grey-lighter: #9fafaf;
--rct-light-grey-lighter: #9fafaf;
Line 10: Line 13:
--rct-white-inactive-tab-background: #b7c3c3;
--rct-white-inactive-tab-background: #b7c3c3;
--rct-white-inactive-tab-darker: #839797;
--rct-white-inactive-tab-darker: #839797;
--rct-gold: #a76f07;
--rct-gold-lighter: #bf8b0f;
--rct-gold-darker: #773f00;
--rct-dark-gold: #4b2200;
}
}


Line 40: Line 47:


/* Tabs like Main page, Discussion, etc. */
/* 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
body.skin-vector #left-navigation
{
{
padding-left: 3px;
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 #left-navigation ul.vector-menu-content-list li,
body.skin-vector #right-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-left-radius: 4px;
Line 59: Line 81:
border-top: 1px solid var(--rct-white-lighter);
border-top: 1px solid var(--rct-white-lighter);
border-right: 1px solid var(--rct-white-darker);
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 #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 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);
background-color: var(--rct-white-inactive-tab-background);
Line 68: Line 92:
border-top: 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-right: 1px solid var(--rct-white-inactive-tab-darker);
border-bottom: 1px solid var(--rct-white-inactive-tab-background);
background-image: none;
background-image: none;
}
}


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


Line 81: Line 124:
body.skin-vector #mw-panel nav
body.skin-vector #mw-panel nav
{
{
background-color: var(--rct-light-grey);
background-color: var(--rct-indian-red);
border: 1px solid;
border: 1px solid;
border-top-color: var(--rct-light-grey-lighter);
border-top-color: var(--rct-indian-red-lighter);
border-left-color: var(--rct-light-grey-lighter);
border-left-color: var(--rct-indian-red-lighter);
border-right-color: var(--rct-light-grey-darker);
border-right-color: var(--rct-indian-red-darker);
border-bottom-color: var(--rct-light-grey-darker);
border-bottom-color: var(--rct-indian-red-darker);
padding-top: 0;
padding-top: 0;
}
}
Line 100: Line 143:
margin: 0;
margin: 0;
border: 1px solid;
border: 1px solid;
border-top-color: var(--rct-light-grey-darker);
border-top-color: var(--rct-indian-red-darker);
border-left-color: var(--rct-light-grey-darker);
border-left-color: var(--rct-indian-red-darker);
border-right-color: var(--rct-light-grey-lighter);
border-right-color: var(--rct-indian-red-lighter);
border-bottom-color: var(--rct-light-grey-lighter);
border-bottom-color: var(--rct-indian-red-lighter);
background-color: var(--rct-dark-grey);
background-color: var(--rct-dark-indian-red);
color: white;
color: white;
font-weight: bold;
font-weight: bold;
Line 110: Line 153:
background-image: none;
background-image: none;
line-height: 12px;
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;
}
}

Revision as of 18:11, 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;
}