MediaWiki:Common.css: Difference between revisions

Line 706:

.main-banner {

position: relative;

height: 450px; ~~/* your image height */~~

height: 450px;

~~overflow~~: ~~hidden~~; /* ~~crop left & right~~ */

max-width: 2440px; /* stop growing beyond image width */

~~padding: 0;~~

margin: 1em auto; /* centre the container */

margin: 1em auto;

overflow: hidden; /* crop sides */

~~max-width~~: ~~2440px~~;

background-color: var(--color-surface-2);

Line 716:

Line 715:

border-radius: var(--border-radius-large);

color: var(--color-emphasized);

padding: 0;

}

/* ~~Make MW wrappers fill the box */~~

/* centre ANY img inside (not just mw-file-element) */

~~.main-banner .~~mw-~~default~~-~~size,~~

.main-banner img {

~~.main-banner .mw-default-size > span {~~

~~display: block;~~

~~height: 100%;~~

}

~~/* Centre the image and ignore MW’s responsive max-width~~ */

.main-banner img~~.mw-file-element~~ {

position: absolute;

top: 0;

left: 50%;

transform: translateX(-50%); ~~/* centres horizontally */~~

transform: translateX(-50%);

height: 100%; ~~/* keep full banner height */~~

height: 100%;

width: auto; ~~/* maintain aspect ratio */~~

width: auto;

max-width: none; ~~/* override skin’s max-width:100% */~~

max-width: none;

}

~~/* If the image is ever wrapped in a link, keep it filling */~~

.main-banner > a { display:block; height:100%; }

.main-banner a { display:block; height:100%; }

.mainpage-wrapper .lower-row {

@@ Line 706: / Line 706: @@
 .main-banner {
      position: relative;
-     height: 450px;                 /* your image height */
+     height: 450px;
-     overflow: hidden;              /* crop left & right */
+     max-width: 2440px;          /* stop growing beyond image width */
-    padding: 0;
+     margin: 1em auto;           /* centre the container */
-     margin: 1em auto;
+     overflow: hidden;           /* crop sides */
-     max-width: 2440px;
      background-color: var(--color-surface-2);
@@ Line 716: / Line 715: @@
      border-radius: var(--border-radius-large);
      color: var(--color-emphasized);
+    padding: 0;
 }
-/* Make MW wrappers fill the box */
+/* centre ANY img inside (not just mw-file-element) */
-.main-banner .mw-default-size,
+.main-banner img {
-.main-banner .mw-default-size > span {
-    display: block;
-    height: 100%;
-}
-/* Centre the image and ignore MW’s responsive max-width */
-.main-banner img.mw-file-element {
      position: absolute;
      top: 0;
      left: 50%;
-     transform: translateX(-50%);   /* centres horizontally */
+     transform: translateX(-50%);
-     height: 100%;                   /* keep full banner height */
+     height: 100%;
-     width: auto;                    /* maintain aspect ratio */
+     width: auto;
-     max-width: none;                /* override skin’s max-width:100% */
+     max-width: none;
 }
-/* If the image is ever wrapped in a link, keep it filling */
+.main-banner > a { display:block; height:100%; }
-.main-banner a { display:block; height:100%; }
 .mainpage-wrapper .lower-row {