MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* Template:Hero: one wide photo across the top of a project or theme page, cropped to the
   front door's hero proportions (16:7, and 4:3 on phones). In the Citizen skin MediaWiki:Citizen.js
   lifts it above the page title so it spans the page; other skins show it at the top of the text. */
.okc-hero { margin: 0 0 1.5rem; overflow: hidden; border-radius: 8px; background: #0b3a4a; line-height: 0; }
.okc-hero p { margin: 0; }
.okc-hero span, .okc-hero a { display: block; }
.okc-hero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; max-height: 70vh; object-fit: cover; object-position: center; }
.okc-hero--top img { object-position: center top; }
.okc-hero--bottom img { object-position: center bottom; }
@media (max-width: 720px) { .okc-hero img { aspect-ratio: 4 / 3; } }

/* Citizen, reading view: hold the hero back until the script has lifted it, so it does not jump.
   In the editor it stays in place, where it can be clicked and changed. */
html.client-js:not(.ve-activated) body.skin-citizen.action-view #mw-content-text .okc-hero { display: none; }
.okc-hero--lifted { border-radius: 0; margin: 0 0 1rem; }
html.ve-activated .okc-hero--lifted { display: none; }