Main Page.css: Difference between revisions

← Older edit

@@ Line 1: / Line 1: @@
+/* Light mode styles */
+.header-box a.external {
+  background-image: none;
+}
+.header-box p {
+  font-size: inherit;
+}
 .header-box {
    background: #e3f2fd;
@@ Line 4: / Line 13: @@
    border-radius: 8px;
    padding: 0.5em;
+  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;
 }
-@media (prefers-color-scheme: dark) {
+.content-grid {
-   .header-box  {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr;
+  margin-top: 1em;
+  overflow: hidden;
+  min-width: 0;
+}
+@media screen and (min-width: 720px) {
+  .content-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+.content-header {
+  font-size: 1.5em;
+  font-weight: bold;
+  color: #2f4770;
+  border-bottom: 2px solid #9bb9df;
+  padding-bottom: 0.2em;
+  margin-bottom: 0.5em;
+  margin-top: 0 !important;
+}
+.content-section {
+  background: #f9f9f9;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  padding: 1em;
+  box-sizing: border-box;
+  overflow: hidden;
+  min-width: 0;
+}
+.content-section.wide {
+  grid-column: 1 / -1;
+}
+.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;
+  }
+  html.skin-theme-clientpref-os .content-header {
+    color: #aabbee;
+    border-bottom-color: #7881c7;
+  }
+}
+/* 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: 1px solid #444;
+     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;
+  }
+  html.skin-theme-clientpref-os .content-header {
+    color: #aabbee;
+    border-bottom-color: #7881c7;
    }
 }