MediaWiki:Common.css: Difference between revisions
Appearance
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 */ | ||
:root { | |||
--rf-light-fg: #000; | |||
--rf-light-bg: #888; | |||
--rf-dark-fg: #eee; | |||
--rf-dark-bg: #000; | |||
} | } | ||
/* source code */ | /* style for displaying source code */ | ||
pre.code { | pre.code { | ||
Line 34: | Line 26: | ||
span.code { | span.code { | ||
color: | color: var(--rf-light-fg); | ||
background: | 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: | color: var(--rf-dark-fg); | ||
background: | background: var(--rf-dark-bg); | ||
} | } | ||
} | } | ||
/* terminal commands */ | /* style for displaying terminal commands */ | ||
pre.terminal { | pre.terminal { | ||
color: | color: var(--rf-light-fg); | ||
background: | background: var(--rf-light-bg); | ||
border: 0px solid | 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: | color: var(--rf-dark-fg); | ||
background: | background: var(--rf-dark-bg); | ||
} | } | ||
} | } | ||
span.terminal { | span.terminal { | ||
color: | color: var(--rf-light-fg); | ||
background: | 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: | color: var(--rf-dark-fg); | ||
background: | background: var(--rf-dark-bg); | ||
} | } | ||
} | } | ||
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);
}
}