MediaWiki:Citizen.css: Difference between revisions
MediaWiki interface page
More actions
Removed identation of lists inside wikitables and portable infoboxes |
Applied mobile skin fixes |
||
| (6 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* All CSS here will be loaded for users of the Citizen skin */ | /* All CSS here will be loaded for users of the Citizen skin */ | ||
/* Disable image hover transformation */ | |||
:root { | :root { | ||
--transform-image-hover: none; | --transform-image-hover: none; | ||
} | } | ||
/* Adjust --color-destructive */ | |||
:root.skin-theme-clientpref-night { | :root.skin-theme-clientpref-night { | ||
--color- | --color-destructive__h: 360; | ||
--color-destructive__l: 67%; | |||
--color- | |||
} | } | ||
: | @media screen and (prefers-color-scheme: dark) { | ||
.skin-theme-clientpref-os { | |||
--color-destructive__h: 360; | |||
--color-destructive__l: 67%; | |||
} | |||
} | } | ||
/* Disable | /* Disable extra midnight theme */ | ||
#skin-client-prefs-citizen-feature-pure-black { | #skin-client-prefs-citizen-feature-pure-black { | ||
display: none !important; | display: none !important; | ||
} | } | ||
/* Background image handling */ | |||
/* Adapted from: https://tolkiengateway.net/ */ | |||
:root { | |||
--background-image: none; | |||
} | } | ||
@media screen { | |||
.skin-theme-clientpref-night .citizen-page-container:before { | |||
background-image: url(https://petitplanet.wiki/images/b/b4/Background_Dark.jpg); | |||
background-position: 70% center; | |||
} | |||
.skin-theme-clientpref-day .citizen-page-container:before { | |||
background-image: url(https://petitplanet.wiki/images/c/c3/Background_Light.jpg); | |||
background-position: 70% center; | |||
} | |||
} | |||
@media screen and (prefers-color-scheme: dark) { | |||
.skin-theme-clientpref-os .citizen-page-container:before { | |||
background-image: url(https://petitplanet.wiki/images/b/b4/Background_Dark.jpg); | |||
background-position: 70% center; | |||
} | |||
} | |||
.citizen-page-container, | |||
.citizen-body-container { | |||
position: relative; | |||
} | } | ||
.citizen- | .citizen-page-container { | ||
background-color: var(--color-surface-0); | background-color: var(--color-surface-0); | ||
} | } | ||
.citizen-body { | .citizen-page-container::before, | ||
.citizen-body-container::after { | |||
content: ""; | |||
position: absolute; | |||
inset: 0; | |||
pointer-events: none; | |||
} | |||
.citizen-page-container::before { | |||
background-repeat: no-repeat; | |||
} | } | ||
.citizen-page-container::before { | |||
height: 240px; | |||
background-size: cover; | |||
mask-image: linear-gradient( | |||
rgba(0, 0, 0, 0.85), | |||
rgba(0, 0, 0, 0.01) 66%, | |||
transparent 100% | |||
); | |||
-webkit-mask-image: linear-gradient( | |||
rgba(0, 0, 0, 0.85), | |||
rgba(0, 0, 0, 0.01) 66%, | |||
transparent 100% | |||
); | |||
} | |||
/* Transparent body container for main page */ | |||
.rootpage-Main_Page .citizen-body { | |||
background: transparent; | |||
} | |||
/* Adjust wordmark height */ | |||
img.mw-logo-wordmark { | |||
height: 2rem; | |||
} | } | ||
h2, h3 { | |||
font-weight: var(--font-weight-normal); | |||
} | } | ||
| Line 70: | Line 110: | ||
padding: 0; | padding: 0; | ||
} | } | ||
} | |||
/* Wikitable fixes */ | |||
.wikitable { | |||
border-collapse: separate; | |||
} | |||
.citizen-overflow-wrapper:has(.citizen-overflow-content > .wikitable) { | |||
box-shadow: none; | |||
} | |||
/* Reduce border from mbox */ | |||
.mbox { | |||
border-width: 1px; | |||
} | |||
/* Move quotation marks inside box for mobile users */ | |||
.pull-quote__text p:after { | |||
bottom: -16px; | |||
} | } | ||