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);
-    --color-base: var(--page-text-color);
 }
-:root.skin-theme-clientpref-night {
+@media screen and (prefers-color-scheme: dark) {
-    --color-destructive__h: 360;
+    .skin-theme-clientpref-os {
-    --color-destructive__l: 67%;
+    	--color-destructive__h: 360;
+        --color-destructive__l: 67%;
+    }
 }
-/* Disable auto theme and extra midnight theme */
+/* Disable extra midnight theme */
-#skin-client-prefs-skin-theme .citizen-client-prefs-radio:has(input[value="os"]),
 #skin-client-prefs-citizen-feature-pure-black {
      display: none !important;
-}
-#skin-client-prefs-skin-theme form {
-    grid-template-columns:repeat(2,1fr);
 }
 /* Background image handling */
+/* Adapted from: https://tolkiengateway.net/ */
 :root {
      --background-image: none;
 }
- @media screen {
+@media screen {
      .skin-theme-clientpref-night .citizen-page-container:before {
          background-image: url(https://petitplanet.wiki/images/b/b4/Background_Dark.jpg);
@@ Line 45: / Line 40: @@
 }
+@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;
+    }
+}
-/* Background image handling */
 .citizen-page-container,
 .citizen-body-container {
@@ Line 69: / Line 69: @@
 .citizen-page-container::before {
-     height: 120px;
+     height: 240px;
      background-size: cover;
      mask-image: linear-gradient(
@@ Line 81: / Line 81: @@
          transparent 100%
      );
+}
+/* Transparent body container for main page */
+.rootpage-Main_Page .citizen-body {
+    background: transparent;
 }
 /* Adjust wordmark height */
-@media screen and (min-width: 640px) {
+img.mw-logo-wordmark {
-    img.mw-logo-wordmark {
+    height: 2rem;
-        height: 2rem;
-    }
 }
 h2, h3 {
      font-weight: var(--font-weight-normal);
-}
-.citizen-body {
-    background-color: var(--color-surface-0);
-    border-radius: var(--border-radius-large);
-}
-.citizen-body {
-    padding: var(--padding-page);
-}
-@media screen and (max-width: 640px) {
-    .citizen-body {
-        padding: 12px;
-    }
-}
-/* Only apply styling on wider screens */
-@media screen and (min-width: 1119px) {
-    #citizen-sidebar-lastmod,
-    #citizen-toc {
-        background-color: var(--color-surface-0);
-        border-radius: var(--border-radius-large);
-        padding: calc(0.5*var(--space-unit));
-    }
-}
-.citizen-toc .citizen-menu__heading,
-.citizen-toc-contents {
-    background-color: var(--color-surface-0);
 }
@@ Line 148: / Line 121: @@
 }
-/* Remove border from mbox */
+/* Reduce border from mbox */
 .mbox {
-     border-width: 0;
+     border-width: 1px;
 }