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 */ | ||
: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); } }