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,
+:root.skin-theme-clientpref-night {
-:root.skin-theme-clientpref-os {
+     --color-destructive__h: 360;
-     --color-surface-0: var(--page-background-color);
+     --color-destructive__l: 67%;
-    --color-surface-1: var(--theme-color-1);
-    --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) {
-:root.skin-theme-clientpref-os {
+    .skin-theme-clientpref-os {
-    --color-destructive__h: 360;
+    	--color-destructive__h: 360;
-    --color-destructive__l: 67%;
+        --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,
+     .skin-theme-clientpref-night .citizen-page-container:before {
-    .skin-theme-clientpref-os .citizen-page-container:before {
          background-image: url(https://petitplanet.wiki/images/b/b4/Background_Dark.jpg);
          background-position: 70% center;
@@ Line 48: / 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 72: / Line 69: @@
 .citizen-page-container::before {
-     height: 120px;
+     height: 240px;
      background-size: cover;
      mask-image: linear-gradient(
@@ Line 92: / Line 89: @@
 /* 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);
-}
-h2 {
-    border-color: var(--theme-border-color);
-    border-bottom-width: 2px;
-    padding-bottom: 2px;
-}
-.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 162: / Line 121: @@
 }
-/* Remove border from mbox */
+/* Reduce border from mbox */
 .mbox {
-     border-width: 0;
+     border-width: 1px;
 }