MediaWiki:Common.css: Difference between revisions

← Older edit

@@ Line 693: / Line 693: @@
 }
-.mainpage-wrapper .info-box,.about-box,.intro-text,.search-area,.main-banner {
+.mainpage-wrapper .info-box,.about-box,.intro-text,.search-area{
 	color: var(--color-emphasized);
      background-color: var(--color-surface-2);
@@ Line 699: / Line 699: @@
      overflow: auto;
      border-radius: var(--border-radius-large);
-    font-family: var(--font-family-monospace);
-    font-size: var(--font-size-small);
      padding: 1em;
      margin: 1em;
 }
+/* The banner box */
+.main-banner {
+    position: relative;
+    height: 450px;
+    max-width: 2440px;          /* stop growing beyond image width */
+    margin: 1em auto;           /* centre the container */
+    overflow: hidden;           /* crop sides */
+    background-color: var(--color-surface-2);
+    border: var(--border-width-base) solid var(--border-color-base);
+    border-radius: var(--border-radius-large);
+    color: var(--color-emphasized);
+    padding: 0;
+}
+/* centre ANY img inside (not just mw-file-element) */
+.main-banner img {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    height: 100%;
+    width: auto;
+    max-width: none;
+}
+.main-banner > a { display:block; height:100%; }
 .mainpage-wrapper .lower-row {
@@ Line 792: / Line 819: @@
 }
-.github-issues-badge {
+.github-badge-row {
-  display: inline-block;
+    display: flex;
-  background: #24292e;
+    flex-direction: row;
-  color: #ffffff;
+    align-items: center;
-  font-size: 12px;
+    gap: 1em;
-  font-family: sans-serif;
+}
-  border-radius: 4px;
-  padding: 2px 6px;
+.github-badge-title {
-  margin: 2px;
-  text-decoration: none;
    white-space: nowrap;
 }
-.github-issues-badge a {
+/* Light mode (default) */
-   color: inherit;
+.patreon-logo-dark {
-   text-decoration: none;
+   display: none;
+}
+.patreon-logo-light {
+   display: inline;
 }
-.gh-badge-label::before {
+/* Dark mode (activated via root class) */
-   content: "🐛 ";
+:root.skin-theme-clientpref-night .patreon-logo-light {
-   margin-right: 2px;
+   display: none;
+}
+:root.skin-theme-clientpref-night .patreon-logo-dark {
+   display: inline;
 }