|
|
| Line 1: |
Line 1: |
| /* Prevent Chrome auto-boost weirdness */ | | /* Prevent Chrome auto-boost weirdness */ |
| html { -webkit-text-size-adjust: 100%; } | | html { -webkit-text-size-adjust: 100%; } |
|
| |
| /* ===== Infobox base (light theme default) ===== */
| |
| table.infobox{
| |
| width:22em; max-width:22em; box-sizing:border-box;
| |
| float:right; clear:right; margin:0 0 1em 1em;
| |
| border:1px solid #a2a9b1; background:#f8f9fa; color:inherit;
| |
| font-size:90%; line-height:1.5em;
| |
| /* use 'separate' so table padding works like enwiki */
| |
| border-collapse:separate; border-spacing:0; padding:.5em;
| |
| }
| |
|
| |
| table.infobox th, table.infobox td{
| |
| padding:.5em .45em; /* enwiki-ish cell padding */
| |
| vertical-align:top;
| |
| }
| |
| table.infobox th{ text-align:left; }
| |
|
| |
| /* Title — no background by default; 125% and centered */
| |
| table.infobox th.infobox-title{
| |
| text-align:center;
| |
| font-size:125%;
| |
| font-weight:bold;
| |
| background:transparent; /* default: none */
| |
| padding:.35em .45em .3em;
| |
| }
| |
|
| |
| /* Only apply color when |color= was set (module adds class + CSS var) */
| |
| table.infobox th.infobox-title.has-title-color{
| |
| background:var(--ib-title-bg);
| |
| }
| |
|
| |
| /* Image row: remove padding so image can touch the inner edges; make image 100% */
| |
| table.infobox td.infobox-image-cell{
| |
| padding:0;
| |
| }
| |
| table.infobox td.infobox-image-cell img{
| |
| display:block; width:100%; height:auto;
| |
| }
| |
|
| |
| /* Prevent long strings from breaking layout */
| |
| table.infobox td{ overflow-wrap:anywhere; word-break:break-word; }
| |
|
| |
| /* Explicit Dark (already present, keep yours) */
| |
| html.skin-theme-clientpref-night table.infobox { background:#1f2327; border-color:#3c4043; color:#e8eaed; }
| |
| html.skin-theme-clientpref-night table.infobox th { background:transparent; color:#e8eaed; }
| |
| html.skin-theme-clientpref-night table.infobox td { background:transparent; color:#e8eaed; }
| |
| html.skin-theme-clientpref-night table.infobox a { color:#8ab4f8; }
| |
| html.skin-theme-clientpref-night table.infobox a:visited { color:#c58af9; }
| |
|
| |
| /* Automatic + OS is dark */
| |
| @media (prefers-color-scheme: dark) {
| |
| html.skin-theme-clientpref-os table.infobox { background:#1f2327; border-color:#3c4043; color:#e8eaed; }
| |
| html.skin-theme-clientpref-os table.infobox th { background:transparent; color:#e8eaed; }
| |
| html.skin-theme-clientpref-os table.infobox td { background:transparent; color:#e8eaed; }
| |
| html.skin-theme-clientpref-os table.infobox a { color:#8ab4f8; }
| |
| html.skin-theme-clientpref-os table.infobox a:visited { color:#c58af9; }
| |
| /* keep title readable; no special bg unless |color= was set */
| |
| html.skin-theme-clientpref-os table.infobox th.infobox-title { background: transparent; }
| |
| }
| |
|
| |
|
| |
| /* — Light mode: improve infobox label/value contrast; title stays transparent — */
| |
| table.infobox th:not(.infobox-title) {
| |
| background: #f2f2f2;
| |
| font-weight: 600;
| |
| }
| |
|
| |
|
| |
| /* === Larger, comfortable article text on phones (Vector 2022) === */
| |
|
| |
| /* A) Override the tokens at the root for Vector (works whether Vector reads from :root or cascaded scopes) */
| |
| @media (max-width: 768px) {
| |
| html[class*="skin-vector"] {
| |
| --font-size-medium: 180px !important;
| |
| --line-height-medium: 1.65 !important;
| |
| }
| |
| }
| |
| @media (max-width: 480px) {
| |
| html[class*="skin-vector"] {
| |
| --font-size-medium: 190px !important;
| |
| --line-height-medium: 1.7 !important;
| |
| }
| |
| }
| |
|
| |
| /* B) Also override the computed value exactly where Vector applies it */
| |
| @media (max-width: 768px) {
| |
| html[class*="skin-vector"] .vector-body { font-size: 180px !important; line-height: 1.65 !important; }
| |
| }
| |
| @media (max-width: 480px) {
| |
| html[class*="skin-vector"] .vector-body { font-size: 190px !important; line-height: 1.7 !important; }
| |
| }
| |
|
| |
| @media (max-width: 768px) {
| |
| .vector-body { outline: 3px solid magenta !important; }
| |
| }
| |
