MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 475: | Line 475: | ||
overflow-wrap: anywhere; /* or break-word */ | overflow-wrap: anywhere; /* or break-word */ | ||
white-space: normal; | white-space: normal; | ||
} | |||
/* mw-thumb-card: image sets width, caption wraps */ | |||
figure.mw-thumb-card[typeof~="mw:File/Thumb"], | |||
figure.mw-thumb-card[typeof~="mw:File/Frame"] { | |||
float: right; | |||
clear: right; | |||
display: block !important; /* get out of Vector’s table layout */ | |||
width: min-content; /* <- key: image drives width */ | |||
max-width: 100%; | |||
border: 1px solid rgba(0,0,0,0.15) !important; | |||
border-radius: 10px; | |||
background: none !important; | |||
padding: 0.45em; | |||
margin: 0.5em 0 1.3em 1.4em; | |||
line-height: normal !important; | |||
box-sizing: border-box; | |||
} | |||
figure.mw-thumb-card > a.mw-file-description { | |||
display: block; | |||
padding: 2px; | |||
border-radius: 9px; | |||
} | |||
/* Image: keep natural thumb width (348px in your case) */ | |||
figure.mw-thumb-card img.mw-file-element { | |||
display: block; | |||
width: auto !important; | |||
max-width: 100%; | |||
height: auto; | |||
background: transparent !important; /* turns off Vector’s img background */ | |||
border: 0 !important; | |||
outline: 0 !important; | |||
box-shadow: none !important; | |||
border-radius: 6px; | |||
} | |||
/* Caption wraps to the figure width */ | |||
figure.mw-thumb-card > figcaption { | |||
display: block !important; | |||
width: 100%; | |||
margin: 0.55em 0 0 0; | |||
padding: 0; | |||
background: none !important; | |||
border: 0 !important; | |||
text-align: left; | |||
line-height: 1.35; | |||
overflow-wrap: anywhere; /* never widen the box */ | |||
hyphens: none !important; | |||
} | } | ||
Revision as of 20:01, 5 February 2026
/* CSS placed here will be applied to all skins */
/* Keep images from escaping their enclosures */
img {
max-width: 100%;
height: auto;
}
/* Main page overrides */
body.page-Main_Page main header.mw-body-header {
display:none;
}
body.page-Main_Page div.vector-page-toolbar {
display:none;
}
/* Landing page styles */
.landing-page .section span.button a {
display: inline-block;
padding: 0.5em 1.5em;
background-color: rgb(177, 224, 223);
color: black;
text-decoration: none;
border-radius: 5px;
font-size: 1rem;
font-weight: bold;
}
.landing-page .section h1 {
font-family: Arial, Helvetica, sans-serif !important;
font-weight: bold;
border: 0;
margin: 0;
padding: 0;
}
.landing-page .section h2 {
font-family: Arial, Helvetica, sans-serif !important;
font-weight: bold;
border: 0;
margin: 0 0 .55em 0;
padding: 0;
display: block;
}
/* Section box base */
.landing-page .section {
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 8em 0;
padding-right: 3em;
}
.landing-page .section > div {
padding: 2em 0;
}
.landing-page .section .left {
flex: 3;
min-width: 350px;
}
.landing-page .section .right {
flex: 2;
min-width: 350px;
}
.landing-page .section p {
font-size: 1.2rem;
}
/* Hero box overrides */
.landing-page .hero-box {
padding-right: 0;
}
.landing-page .hero-box h1 {
font-size: 4rem;
line-height: 1.0;
margin: 0;
}
.landing-page .hero-box .tagline {
font-size: 1.2rem;
line-height: 1.8;
margin-top: 0;
color: rgba(50, 60, 60, 0.8);
}
/* Landing page intro box */
.landing-page .intro {
padding: 2em;
border: 2px solid rgb(177, 224, 223);
}
.landing-page .intro .label {
font-family: Arial, Helvetica, sans-serif !important;
font-weight: bold;
font-size: 1.2rem;
margin: 0;
padding: 0;
}
.landing-page .intro p {
font-size: 1.6rem;
}
/* Button strip */
.landing-page .button-strip {
padding: 0 !important;
margin: 1em 0;
}
.landing-page .button-strip ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
gap: 1em;
clear: both;
flex-wrap: wrap;
}
.landing-page .button-strip li {
display: inline-block;
padding: 0 1em;
margin: 0.5em 0;
}
.landing-page .button-strip li .mw-parser-output a.external {
background-image: none !important;
}
/* Section alts */
.landing-page .alt-1 {
clear: both;
margin: 2em 0;
background-color: rgba(40,60,60,0.05);
padding: 3em;
}
.landing-page .alt-1 p {
border-bottom: 2px solid rgb(230, 230, 230);
padding-bottom: 1em;
margin-bottom: 2em;
}
.landing-page .alt-2 {
padding: 3em;
}
.landing-page .section .alt-3 .left {
flex: 2;
min-width: 350px;
}
.landing-page .section .alt-3 .right {
flex: 3;
min-width: 350px;
}
/* New styles 2026+ ... need to organize these eventually */
.mw-page-lead {
font-size: 2.15em;
font-weight: 100;
line-height: 1.8;
color: #444;
margin: 0 0 1em 0;
}
/* Card row wrapper */
.mw-cardrow {
background: rgba(0,0,0,0.04);
padding: 1rem;
border-radius: 10px;
margin: 1.25rem 0;
}
/* Responsive grid */
.mw-cardgrid {
display: grid;
grid-template-columns: 1fr;
gap: 0.9rem;
}
/* Cards */
.mw-card {
background: rgba(255,255,255,0.7);
padding: 0.95rem 1rem;
border-radius: 10px;
border: 1px solid rgba(0,0,0,0.06);
}
.mw-card__title {
font-weight: 700;
margin: 0 0 0.5rem 0;
}
.mw-card__body {
line-height: 1.5;
}
/* 3 columns on larger screens */
@media (min-width: 900px) {
.mw-cardgrid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Card row title */
.mw-cardrow__title {
font-size: 1.3em;
font-weight: 700;
margin: 0 0 0.75rem 0;
padding-bottom: 0.4rem;
border-bottom: 1px solid rgba(0,0,0,0.15);
}
/* mw-thumb-card: image determines box width; caption wraps to fit */
figure.mw-thumb-card {
float: right;
clear: right;
display: inline-block !important;
width: fit-content;
max-width: 100%;
border: 1px solid rgba(0,0,0,0.15);
border-radius: 10px;
padding: 0.45em;
background: none;
text-align: center;
box-sizing: border-box;
}
figure.mw-thumb-card > a.mw-file-description {
display: block;
padding: 2px;
border-radius: 9px;
}
figure.mw-thumb-card img.mw-file-element {
display: block;
width: auto;
max-width: 100%;
height: auto;
border: 0 !important;
outline: 0 !important;
box-shadow: none;
border-radius: 6px;
margin: 0 auto;
}
figure.mw-thumb-card > figcaption {
display: block !important;
margin: 0.55em 0 0 0;
padding: 0;
text-align: left;
color: rgba(0,0,0,0.75);
font-size: 0.95em;
line-height: 1.35;
max-width: 100%;
overflow-wrap: anywhere;
word-break: normal !important;
hyphens: none !important;
white-space: normal;
}
/* --- Opt-in thumb cards: make the image set the width, caption wraps inside --- */
figure.mw-thumb-card[typeof~="mw:File/Thumb"],
figure.mw-thumb-card[typeof~="mw:File/Frame"] {
/* Beat Vector’s table-based thumb layout */
display: inline-block !important; /* shrink-to-fit */
line-height: normal !important; /* beat line-height: 0 */
border-collapse: separate !important;
/* Keep right alignment behavior */
float: right;
clear: right;
/* Your desired frame */
border: 1px solid rgba(0,0,0,0.15) !important;
border-radius: 10px;
background: none !important;
padding: 0.45em;
margin: 0.5em 0 1.3em 1.4em; /* match Vector spacing */
box-sizing: border-box;
text-align: center; /* centers the image */
}
/* Kill Vector’s “thumb background + border-bottom:0” styling on the container */
@media screen {
figure.mw-thumb-card[typeof~="mw:File/Thumb"],
figure.mw-thumb-card[typeof~="mw:File/Frame"] {
background-color: transparent !important;
border-bottom: 1px solid rgba(0,0,0,0.15) !important; /* undo border-bottom: 0 */
}
}
figure.mw-thumb-card > a.mw-file-description {
display: block;
}
/* Image: do NOT stretch; let the thumb width drive the box */
figure.mw-thumb-card img.mw-file-element {
display: block;
width: auto !important; /* important: beat any width rules */
max-width: 100%;
height: auto;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
border-radius: 6px;
margin: 0 auto;
}
/* Caption: inside the border, wraps to the image width */
figure.mw-thumb-card > figcaption {
display: block !important; /* beat table-caption */
caption-side: initial !important;
margin: 0.55em 0 0 0;
padding: 0;
background: none !important; /* beat Vector caption fill */
border: 0 !important; /* beat Vector caption borders */
color: rgba(0,0,0,0.75);
font-size: 0.95em;
line-height: 1.35;
/* Force wrap so caption never widens the figure */
max-width: 100%;
overflow-wrap: anywhere;
word-break: normal !important;
hyphens: none !important;
white-space: normal;
text-align: left; /* read naturally */
}
/* Final thumb-card layout: image defines width, caption wraps */
figure.mw-thumb-card[typeof~="mw:File/Thumb"],
figure.mw-thumb-card[typeof~="mw:File/Frame"] {
float: right;
clear: right;
/* Kill Vector table layout */
display: inline-flex !important;
flex-direction: column;
align-items: center;
line-height: normal !important;
border-collapse: separate !important;
/* Frame */
border: 1px solid rgba(0,0,0,0.15) !important;
border-radius: 10px;
background: none !important;
padding: 0.45em;
margin: 0.5em 0 1.3em 1.4em;
box-sizing: border-box;
max-width: 100%;
}
/* Remove Vector background from images */
@media screen {
figure.mw-thumb-card img.mw-file-element {
background: transparent !important;
}
}
figure.mw-thumb-card > a.mw-file-description {
display: block;
}
/* Image controls width */
figure.mw-thumb-card img.mw-file-element {
display: block;
width: auto !important;
max-width: 100%;
height: auto;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
border-radius: 6px;
}
/* Caption wraps to image width */
figure.mw-thumb-card > figcaption {
display: block !important;
margin: 0.55em 0 0 0;
padding: 0;
background: none !important;
border: 0 !important;
color: rgba(0,0,0,0.75);
font-size: 0.95em;
line-height: 1.35;
max-width: 100%;
overflow-wrap: break-word;
white-space: normal;
text-align: left;
align-self: stretch; /* match image width */
}
figure.mw-thumb-card[typeof~="mw:File/Thumb"],
figure.mw-thumb-card[typeof~="mw:File/Frame"] {
min-width: 0; /* allow container to shrink */
}
figure.mw-thumb-card > figcaption {
min-width: 0; /* allow caption to shrink */
width: 100%; /* make it match the figure’s width */
box-sizing: border-box;
}
figure.mw-thumb-card > figcaption {
overflow-wrap: anywhere; /* breaks long tokens instead of widening */
}
/* Container: shrink-wrap */
figure.mw-thumb-card[typeof~="mw:File/Thumb"],
figure.mw-thumb-card[typeof~="mw:File/Frame"] {
display: inline-flex !important;
flex-direction: column;
/* IMPORTANT: allow shrink-wrap to actually shrink */
align-items: flex-start; /* don't stretch the container */
min-width: 0;
}
/* Image sets width */
figure.mw-thumb-card img.mw-file-element {
width: auto !important;
max-width: 100%;
}
/* Caption must not “win” on width */
figure.mw-thumb-card > figcaption {
display: block !important;
/* Make caption match the image width */
width: 100%;
box-sizing: border-box;
/* Allow it to shrink and wrap */
min-width: 0;
overflow-wrap: anywhere; /* or break-word */
white-space: normal;
}
/* mw-thumb-card: image sets width, caption wraps */
figure.mw-thumb-card[typeof~="mw:File/Thumb"],
figure.mw-thumb-card[typeof~="mw:File/Frame"] {
float: right;
clear: right;
display: block !important; /* get out of Vector’s table layout */
width: min-content; /* <- key: image drives width */
max-width: 100%;
border: 1px solid rgba(0,0,0,0.15) !important;
border-radius: 10px;
background: none !important;
padding: 0.45em;
margin: 0.5em 0 1.3em 1.4em;
line-height: normal !important;
box-sizing: border-box;
}
figure.mw-thumb-card > a.mw-file-description {
display: block;
padding: 2px;
border-radius: 9px;
}
/* Image: keep natural thumb width (348px in your case) */
figure.mw-thumb-card img.mw-file-element {
display: block;
width: auto !important;
max-width: 100%;
height: auto;
background: transparent !important; /* turns off Vector’s img background */
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
border-radius: 6px;
}
/* Caption wraps to the figure width */
figure.mw-thumb-card > figcaption {
display: block !important;
width: 100%;
margin: 0.55em 0 0 0;
padding: 0;
background: none !important;
border: 0 !important;
text-align: left;
line-height: 1.35;
overflow-wrap: anywhere; /* never widen the box */
hyphens: none !important;
}