User:Fen/MainPage.css: Difference between revisions

← Older edit

@@ Line 1: / Line 1: @@
-@media (prefers-color-scheme: dark) {
+/* Light mode styles */
-  .infobox {
+.header-box a.external {
-     float: right;
+     background-image: none;
-    clear: right;
-  }
 }
 .header-box {
-   background: var(--crw-title-bg);
+   background: #e3f2fd;
-   border: 1px solid var(--crw-border);
+   border: 1px solid #ccc;
    border-radius: 8px;
    padding: 0.5em;
-   color: var(--crw-text);
+   color: #000;
+  text-align: center;
+}
+.crw-button {
+  background: #004080;
+  color: #fff;
+  padding: 0.4em 0.8em;
+  border-radius: 4px;
+  font-weight: bold;
+  text-decoration: none;
+  display: inline-block;
+}
+.crw-button.secondary {
+  background: #e0e0e0;
+  color: #000;
+}
+.content-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 1rem;
+  margin-top: 1em;
+  font-family: sans-serif;
+  color: #000;
+}
+.content-section {
+  background: #f9f9f9;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  padding: 1em;
+}
+.content-section > div:first-child {
+  font-size: 1.5em;
+  font-weight: bold;
+  color: #2f4770;
+  border-bottom: 2px solid #9bb9df;
+  padding-bottom: 0.2em;
+  margin-top: 1em;
+}
+/* Forced dark mode */
+@media screen {
+  html.skin-theme-clientpref-night .header-box {
+    background: #5d68bb;
+    border-color: #444;
+    color: #d0d8ff;
+  }
+  html.skin-theme-clientpref-night .content-section {
+    background: #2b2f3a;
+    border-color: #444;
+    color: #e0e0e0;
+  }
+  html.skin-theme-clientpref-night .crw-button {
+    background: #517bc0;
+    color: #fff;
+  }
+  html.skin-theme-clientpref-night .crw-button.secondary {
+    background: #333;
+    color: #ccc;
+  }
+  html.skin-theme-clientpref-night .content-section > div:first-child {
+    color: #8ba4d4;
+    border-color: #536d9d;
+  }
+}
+/* OS dark mode */
+@media screen and (prefers-color-scheme: dark) {
+  html.skin-theme-clientpref-os .header-box {
+    background: #5d68bb;
+    border-color: #444;
+    color: #d0d8ff;
+  }
+  html.skin-theme-clientpref-os .content-section {
+    background: #2b2f3a;
+    border-color: #444;
+    color: #e0e0e0;
+  }
+  html.skin-theme-clientpref-os .crw-button {
+    background: #517bc0;
+    color: #fff;
+  }
+  html.skin-theme-clientpref-os .crw-button.secondary {
+    background: #333;
+    color: #ccc;
+  }
+  html.skin-theme-clientpref-os .content-section > div:first-child {
+    color: #8ba4d4;
+    border-color: #536d9d;
+  }
 }