MediaWiki:Citizen.css: Difference between revisions

Browse history interactively

← Older edit Newer edit →

@@ Line 5: / Line 5: @@
 :root.skin-theme-clientpref-day,
-:root.skin-theme-clientpref-night {
+:root.skin-theme-clientpref-night,
-     --color-surface-0: var(--page-background-color);
+:root.skin-theme-clientpref-os {
-     --color-surface-1: var(--theme-color-1);
+     --color-surface-0: var(--background-color-base);
-     --color-surface-2: var(--theme-color-2);
+     --color-surface-1: var(--background-color-1);
-     --color-surface-3: var(--theme-color-3);
+     --color-surface-2: var(--background-color-2);
-     --color-surface-4: var(--theme-color-4);
+     --color-surface-3: var(--background-color-3);
+     --color-surface-4: var(--background-color-4);
      --color-base: var(--page-text-color);
 }
-:root.skin-theme-clientpref-night {
+:root.skin-theme-clientpref-night,
+:root.skin-theme-clientpref-os {
      --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 {
+/* Background image handling */
-     grid-template-columns:repeat(2,1fr);
+:root {
+    --background-image: none;
+}
+ @media screen {
+    .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;
+    }
+    .skin-theme-clientpref-day .citizen-page-container:before {
+        background-image: url(https://petitplanet.wiki/images/c/c3/Background_Light.jpg);
+        background-position: 70% center;
+    }
+}
+/* Background image handling */
+.citizen-page-container,
+.citizen-body-container {
+    position: relative;
+}
+.citizen-page-container {
+    background-color: var(--color-surface-0);
+}
+.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: 120px;
+    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 */
+@media screen and (min-width: 640px) {
+    img.mw-logo-wordmark {
+        height: 2rem;
+    }
 }
 h2, h3 {
      font-weight: var(--font-weight-normal);
+}
+h2 {
+    border-color: var(--theme-border-color);
+    border-bottom-width: 2px;
+    padding-bottom: 2px;
 }
@@ Line 40: / Line 110: @@
 .citizen-body {
      padding: var(--padding-page);
+}
+@media screen and (max-width: 640px) {
+    .citizen-body {
+        padding: 12px;
+    }
 }
@@ Line 70: / Line 146: @@
      padding: 0;
      }
+}
+/* Wikitable fixes */
+.wikitable {
+    border-collapse: separate;
+}
+.citizen-overflow-wrapper:has(.citizen-overflow-content > .wikitable) {
+    box-shadow: none;
+}
+/* Remove border from mbox */
+.mbox {
+    border-width: 0;
+}
+/* Move quotation marks inside box for mobile users */
+.pull-quote__text p:after {
+    bottom: -16px;
 }