MediaWiki:Common.css: Difference between revisions

mNo edit summary
Defined colors as variables.
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* CSS placed here will be applied to all skins */


/*
/* color definitions */
body.page-Main_Page .title, body.page-Main_Page #tagline
{
    display: none;
}


.tocnumber
:root {
{
    --rf-light-fg: #000;
     display: none;
    --rf-light-bg: #888;
    --rf-dark-fg: #eee;
     --rf-dark-bg: #000;
}
}
*/


/* source code */
/* style for displaying source code */
 
pre {
    --main-dark: #000;
    --main-light: #eee;
}


pre.code {
pre.code {
Line 34: Line 26:


span.code {
span.code {
     color: black;
     color: var(--rf-light-fg);
     background: #eee;
     background: var(--rf-light-bg);
     border-radius: 6px;
     border-radius: 6px;
     padding-left: 4px;
     padding-left: 4px;
Line 42: Line 34:
@media (prefers-color-scheme: dark) {
@media (prefers-color-scheme: dark) {
     span.code {
     span.code {
         color: #eee;
         color: var(--rf-dark-fg);
         background: black;
         background: var(--rf-dark-bg);
     }
     }
}
}


/* terminal commands */
/* style for displaying terminal commands */


pre.terminal {
pre.terminal {
     color: #ffe;
     color: var(--rf-light-fg);
     background: #888;
     background: var(--rf-light-bg);
     border: 0px solid #888;
     border: 0px solid black;
     border-radius: 6px;
     border-radius: 6px;
}
}
@media (prefers-color-scheme: dark) {
@media (prefers-color-scheme: dark) {
     pre.terminal {
     pre.terminal {
         color: #e0e0e0;
         color: var(--rf-dark-fg);
         background: #080808;
         background: var(--rf-dark-bg);
        border: 0px solid #080808;
     }
     }
}
}


span.terminal {
span.terminal {
     color: #ffe;
     color: var(--rf-light-fg);
     background: #888;
     background: var(--rf-light-bg);
     border-radius: 6px;
     border-radius: 6px;
     padding-left: 4px;
     padding-left: 4px;
Line 72: Line 63:
@media (prefers-color-scheme: dark) {
@media (prefers-color-scheme: dark) {
     span.terminal {
     span.terminal {
         color: #888;
         color: var(--rf-dark-fg);
         background: #ffe;
         background: var(--rf-dark-bg);
     }
     }
}
}
/* side note area
div.sidenote
{
    background: #f8f8f0;
    margin-left: 1em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    border-radius: 6px;
}
*/

Revision as of 2024-11-12T07:11:00

/* CSS placed here will be applied to all skins */

/* color definitions */

:root {
    --rf-light-fg: #000;
    --rf-light-bg: #888;
    --rf-dark-fg: #eee;
    --rf-dark-bg: #000;
}

/* style for displaying source code */

pre.code {
    color: var(--main-dark);
    background: var(--main-light);
    border: 0px
    border-radius: 6px;
}
@media (prefers-color-scheme: dark) {
    pre.code {
        color: var(--main-light);
        background: var(--main-dark);
    }
}

span.code {
    color: var(--rf-light-fg);
    background: var(--rf-light-bg);
    border-radius: 6px;
    padding-left: 4px;
    padding-right: 4px;
}
@media (prefers-color-scheme: dark) {
    span.code {
        color: var(--rf-dark-fg);
        background: var(--rf-dark-bg);
    }
}

/* style for displaying terminal commands */

pre.terminal {
    color: var(--rf-light-fg);
    background: var(--rf-light-bg);
    border: 0px solid black;
    border-radius: 6px;
}
@media (prefers-color-scheme: dark) {
    pre.terminal {
        color: var(--rf-dark-fg);
        background: var(--rf-dark-bg);
    }
}

span.terminal {
    color: var(--rf-light-fg);
    background: var(--rf-light-bg);
    border-radius: 6px;
    padding-left: 4px;
    padding-right: 4px;
}
@media (prefers-color-scheme: dark) {
    span.terminal {
        color: var(--rf-dark-fg);
        background: var(--rf-dark-bg);
    }
}