MediaWiki:Common.css: Difference between revisions

← Older edit

@@ Line 87: / Line 87: @@
    background:transparent;
 }
 /* show only the square icon in Vector 2022 */
@@ Line 93: / Line 95: @@
 /* size the icon neatly */
-.mw-logo-icon img { width: 180px; height: 180px; }
+.mw-logo-icon img { width: 200px; height: 200px; }
+.skin-vector-2022 .mw-logo-icon { width: 200px; height: 200px; }
-.skin-vector-2022 .mw-logo-icon { width: 180px; height: 180px; }
@@ Line 179: / Line 182: @@
-/* Non-clickable hero banner */
-.home-hero { margin: 0 0 1rem 0; }
-.home-hero .mw-file-element {
+/* Kill any box/border around the image banner */
+.mw-parser-output .home-banner-wrap{
+  background: transparent !important;
+  border: 0 !important;
+  padding: 0 !important;
+  margin: 0 0 1rem 0 !important;
+  box-shadow: none !important;
+}
+/* Banner image itself */
+.mw-parser-output .home-banner-wrap .home-banner .mw-file-element{
    display: block;
-   width: 100%;
+   max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
+}
+.client-darkmode .mw-parser-output .home-banner-wrap .home-banner .mw-file-element,
+.skin-theme-clientpref-night .mw-parser-output .home-banner-wrap .home-banner .mw-file-element{
+  box-shadow: 0 6px 18px rgba(0,0,0,.6);
+}
+/* Image banner with no surrounding box */
+.home-banner-wrap { margin:0 0 1rem 0; padding:0; background:transparent; border:0; }
+.home-banner-wrap .home-banner .mw-file-element {
+  display:block; max-width:100%; height:auto; border-radius:12px;
+  box-shadow:0 6px 18px rgba(0,0,0,.25);
+}
+.skin-theme-clientpref-night .home-banner-wrap .home-banner .mw-file-element,
+.client-darkmode .home-banner-wrap .home-banner .mw-file-element {
+  box-shadow:0 6px 18px rgba(0,0,0,.6);
+}
+/* Infobox: Royalty */
+.mw-parser-output .infobox.infobox-royalty {
+  float: right;
+  clear: right;
+  width: 300px;
+  margin: 0 0 1em 1em;
+  border: 1px solid #a2a9b1;
+  background: #fff;
+  font-size: 88%;
+  line-height: 1.4;
+  border-collapse: collapse;
+}
+.mw-parser-output .infobox.infobox-royalty th,
+.mw-parser-output .infobox.infobox-royalty td {
+  padding: 0.35em 0.5em;
+  vertical-align: top;
+}
+.mw-parser-output .infobox.infobox-royalty .infobox-title {
+  background: #f4b6c6; /* cherry blossom pink */
+  color: #000;
+  text-align: center;
+  font-weight: 700;
+  font-size: 125%;
+  padding: 0.5em 0.6em;
+}
+.mw-parser-output .infobox.infobox-royalty th[scope="row"] {
+  width: 35%;
+  text-align: left;
+  font-weight: 700;
+  background: #f8f9fa;
+}
+.mw-parser-output .infobox.infobox-royalty tr + tr th,
+.mw-parser-output .infobox.infobox-royalty tr + tr td {
+  border-top: 1px solid #eaecf0;
+}
+/* Image rows */
+.mw-parser-output .infobox.infobox-royalty .infobox-image {
+  text-align: center;
+  background: transparent;
+}
+.mw-parser-output .infobox.infobox-royalty .infobox-image img {
+  height: auto;
+  max-width: 100%;
+}
+.mw-parser-output .infobox.infobox-royalty .infobox-caption {
+  margin-top: 0.35em;
+  font-size: 90%;
+  color: #54595d;
+}
+/* Optional: tighten spacing for dense pages */
+.mw-parser-output .infobox.infobox-royalty br {
+  line-height: 1.2;
 }
-/* Dark mode tweaks (works with Vector night or DarkMode extension) */
+/* Optional: basic dark-mode tuning (if your skin honors prefers-color-scheme) */
-.skin-theme-clientpref-night .home-hero .mw-file-element,
+@media (prefers-color-scheme: dark) {
-.client-darkmode .home-hero .mw-file-element {
+  .mw-parser-output .infobox.infobox-royalty {
-   box-shadow: 0 6px 18px rgba(0,0,0,.6);
+    background: #1f2328;
+    border-color: #3a3f45;
+  }
+  .mw-parser-output .infobox.infobox-royalty .infobox-title {
+    background: #8b2f4a;
+    color: #fff;
+  }
+  .mw-parser-output .infobox.infobox-royalty th[scope="row"] {
+    background: #2a2f36;
+  }
+  .mw-parser-output .infobox.infobox-royalty tr + tr th,
+  .mw-parser-output .infobox.infobox-royalty tr + tr td {
+    border-top-color: #3a3f45;
+  }
+   .mw-parser-output .infobox.infobox-royalty .infobox-caption {
+    color: #c8ccd1;
+  }
 }