MediaWiki:Citizen.css: Difference between revisions

Browse history interactively

← Older edit

@@ Line 1: / Line 1: @@
 /* All CSS here will be loaded for users of the Citizen skin */
+/* Disable image hover transformation */
 :root {
      --transform-image-hover: none;
 }
-:root.skin-theme-clientpref-day,
+/* Adjust --color-destructive */
 :root.skin-theme-clientpref-night {
-     --color-surface-0: var(--page-background-color);
+     --color-destructive__h: 360;
-     --color-surface-1: var(--theme-color-1);
+     --color-destructive__l: 67%;
-     --color-surface-2: var(--theme-color-2);
+}
-    --color-surface-3: var(--theme-color-3);
-     --color-surface-4: var(--theme-color-4);
+@media screen and (prefers-color-scheme: dark) {
-     --color-base: var(--page-text-color);
+     .skin-theme-clientpref-os {
+    	--color-destructive__h: 360;
+        --color-destructive__l: 67%;
+     }
+}
+/* Disable extra midnight theme */
+#skin-client-prefs-citizen-feature-pure-black {
+    display: none !important;
+}
+/* Background image handling */
+/* Adapted from: https://tolkiengateway.net/ */
+:root {
+     --background-image: none;
 }
-:root.skin-theme-clientpref-night {
+@media screen {
-     --color-destructive__h: 360;
+    .skin-theme-clientpref-night .citizen-page-container:before {
-     --color-destructive__l: 67%;
+        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;
+    }
 }
-h2, h3 {
+.citizen-page-container,
-     font-weight: var(--font-weight-normal);
+.citizen-body-container {
+     position: relative;
 }
-.citizen-body {
+.citizen-page-container {
      background-color: var(--color-surface-0);
-    border-radius: var(--border-radius-large);
 }
-.citizen-body {
+.citizen-page-container::before,
-     padding: var(--padding-page);
+.citizen-body-container::after {
+     content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
 }
-@media screen and (min-width: 1119px) {
+.citizen-page-container::before {
-     #citizen-sidebar-lastmod,
+     background-repeat: no-repeat;
-     #citizen-toc {
+}
-        background-color: var(--color-surface-0);
-        border-radius: var(--border-radius-large);
+.citizen-page-container::before {
-        padding: calc(0.5*var(--space-unit));
+    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);
+}
+/* Show mobile-only things on mobile (hidden in [[MediaWiki:Common.css]]) */
+.mobileHide,
+.mobile-only,
+.no-desktop {
+    display: block;
+}
+/* Remove identation of lists inside wikitables and portable infoboxes */
+.wikitable,
+.portable-infobox {
+    ol, ul {
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-left: 1.6em;
+    margin-right: 0;
+    -webkit-margin-start: 1.6em;
+    -webkit-margin-end: 0;
+    margin-inline-start: 1.6em;
+    margin-inline-end: 0;
+    padding: 0;
      }
 }
-.citizen-toc .citizen-menu__heading,
+/* Wikitable fixes */
-.citizen-toc-contents {
+.wikitable {
-     background-color: var(--color-surface-0);
+    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;
 }