MediaWiki:Common.css: Difference between revisions

Content deleted Content added
Keep video gallery frames within narrow mobile content widths
Redesign Main Page with local search, topic directory and weekly featured destinations
Line 346:
.elite-video-gallery .embedvideo { box-sizing: border-box; }
.elite-video-gallery .embedvideo iframe { max-width: 100%; }
/* BEGIN Elite Main Page shell 20261101: scoped to the home page only. */
body.page-Main_Page.skin-vector-2022 .mw-body-header { display:none; }
body.page-Main_Page.skin-vector-2022 .vector-page-toolbar { border:0; border-radius:4px; margin-bottom:1rem; }
body.page-Main_Page.skin-vector-2022 #bodyContent { background:transparent; border:0; padding:0; box-shadow:none; }
body.page-Main_Page.skin-vector-2022 .mw-body { padding-top:0; }
/* END Elite Main Page shell 20261101 */
 
/* BEGIN Elite Main Page components 20261101 */
/* Main Page only. Theme-aware panels, local media and no client-side carousel. */
.mw-parser-output .elite-home-v2 { --ed-panel:var(--elite-panel,var(--elite-surface,#fff)); --ed-text:var(--elite-text,var(--elite-ink,#202122)); --ed-line:var(--elite-line,var(--elite-border,#a2a9b1)); --ed-accent:var(--elite-hud,var(--elite-accent,#a54400)); color:var(--ed-text); }
.mw-parser-output .elite-home-v2 * { box-sizing:border-box; }
.mw-parser-output .elite-home-v2 p { margin:0; }
.mw-parser-output .elite-home-v2 .ed-home-hero { padding:clamp(1.5rem,4vw,3rem); border-radius:5px; color:#f5f6f7!important; background:linear-gradient(100deg,rgba(6,12,20,.94),rgba(6,12,20,.4)),url('/w/images/wiki-theme/galaxy-1920.webp') center/cover!important; border:1px solid #46505a; border-top:3px solid #ff9d42; }
.mw-parser-output .elite-home-v2 .ed-home-hero h1 { margin:.35rem 0 .75rem; padding:0; border:0; color:#fff!important; background:transparent!important; font-size:clamp(2rem,4vw,3.5rem); line-height:1.1; font-weight:700; }
.mw-parser-output .elite-home-v2 .ed-kicker { font-size:.73rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ed-accent)!important; }
.mw-parser-output .elite-home-v2 .ed-home-hero .ed-kicker { color:#ffb16b!important; background:transparent!important; }
.mw-parser-output .elite-home-v2 .ed-home-lead { max-width:42em; color:#e0e5eb!important; background:transparent!important; line-height:1.6; }
.mw-parser-output .elite-home-v2 .ed-home-search { margin:1.4rem 0 1rem; max-width:43rem; background:transparent!important; }
.mw-parser-output .elite-home-v2 .ed-home-search .mw-inputbox-centered { text-align:left; }
.mw-parser-output .elite-home-v2 .ed-home-search form { display:flex; align-items:stretch; flex-wrap:wrap; gap:.5rem; margin:0; background:transparent!important; }
.mw-parser-output .elite-home-v2 .ed-home-search .mw-inputbox-input { width:100%; min-width:0; margin:0; }
.mw-parser-output .elite-home-v2 .ed-home-search input[type="text"] { flex:1 1 20rem; width:auto!important; min-width:0; border:1px solid #97a4b2; border-radius:3px; padding:.8rem 1rem; background:#111820!important; color:#fff!important; font-size:1rem; }
.mw-parser-output .elite-home-v2 .ed-home-search input::placeholder { color:#b8c4d1; opacity:1; }
.mw-parser-output .elite-home-v2 .ed-home-search input[type="submit"] { padding:.8rem 1.15rem; border:1px solid #ffb66f; border-radius:3px; background:#ff9d42!important; color:#17120e!important; font-size:1rem; font-weight:700; cursor:pointer; }
.mw-parser-output .elite-home-v2 .ed-quick { display:flex; flex-wrap:wrap; gap:.4rem .75rem; align-items:center; font-size:.9rem; background:transparent!important; }
.mw-parser-output .elite-home-v2 .ed-quick a { color:#ffbc80!important; background:transparent!important; text-decoration:underline; text-underline-offset:3px; }
.mw-parser-output .elite-home-v2 .ed-quick span { color:#8494a4!important; background:transparent!important; }
.mw-parser-output .elite-home-v2 .ed-section-heading { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:.4rem 1rem; margin:2rem 0 .9rem; }
.mw-parser-output .elite-home-v2 .ed-section-heading h2 { margin:0; padding:0; border:0; font-size:1.8rem; color:var(--ed-text)!important; }
.mw-parser-output .elite-home-v2 .ed-section-heading p { font-size:.9rem; color:var(--ed-text)!important; }
.mw-parser-output .elite-home-v2 .ed-featured-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.mw-parser-output .elite-home-v2 .ed-feature-card { min-width:0; overflow:hidden; border:1px solid var(--ed-line); border-radius:4px; background:var(--ed-panel)!important; }
.mw-parser-output .elite-home-v2 .ed-feature-image { aspect-ratio:16/9; overflow:hidden; background:#070c13!important; }
.mw-parser-output .elite-home-v2 .ed-feature-image span, .mw-parser-output .elite-home-v2 .ed-feature-image a { display:block; width:100%; height:100%; }
.mw-parser-output .elite-home-v2 .ed-feature-image img { display:block; width:100%; height:100%; max-width:100%; object-fit:cover; }
.mw-parser-output .elite-home-v2 .ed-feature-copy { padding:1.15rem; border-top:2px solid var(--ed-accent); }
.mw-parser-output .elite-home-v2 .ed-feature-copy h3 { margin:.35rem 0 .5rem; font-size:1.65rem; line-height:1.15; }
.mw-parser-output .elite-home-v2 .ed-feature-copy h3 a { color:var(--ed-text)!important; }
.mw-parser-output .elite-home-v2 .ed-feature-copy>p:not(.ed-kicker) { min-height:4.6em; font-size:.92rem; line-height:1.55; color:var(--ed-text)!important; }
.mw-parser-output .elite-home-v2 .ed-read { display:block; margin-top:1rem; font-size:.9rem; font-weight:600; }
.mw-parser-output .elite-home-v2 .ed-read a { color:var(--ed-accent)!important; }
.mw-parser-output .elite-home-v2 .ed-directory { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--ed-line); border-left:1px solid var(--ed-line); }
.mw-parser-output .elite-home-v2 .ed-topic { position:relative; min-width:0; padding:1.3rem; border-right:1px solid var(--ed-line); border-bottom:1px solid var(--ed-line); background:var(--ed-panel)!important; }
.mw-parser-output .elite-home-v2 .ed-topic-number { font-size:.7rem; font-family:monospace; color:var(--ed-accent)!important; }
.mw-parser-output .elite-home-v2 .ed-topic h3 { margin:.2rem 0 .5rem; font-size:1.45rem; color:var(--ed-text)!important; }
.mw-parser-output .elite-home-v2 .ed-topic p { font-size:.9rem; line-height:1.5; color:var(--ed-text)!important; }
.mw-parser-output .elite-home-v2 .ed-topic-links { display:flex; flex-wrap:wrap; gap:.45rem .8rem; margin-top:.85rem; }
.mw-parser-output .elite-home-v2 .ed-topic-links a { font-size:.9rem; text-decoration:underline; text-underline-offset:3px; }
.mw-parser-output .elite-home-v2 .ed-bottom-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:1.75rem; }
.mw-parser-output .elite-home-v2 .ed-bottom-grid>div { padding:1.4rem; background:var(--ed-panel)!important; border-left:3px solid var(--ed-accent); }
.mw-parser-output .elite-home-v2 .ed-bottom-grid h2 { padding:0; border:0; font-size:1.6rem; margin:.4rem 0 .7rem; color:var(--ed-text)!important; }
.mw-parser-output .elite-home-v2 .ed-bottom-grid p { line-height:1.6; color:var(--ed-text)!important; }
.mw-parser-output .elite-home-v2 .ed-bottom-grid .ed-kicker { color:var(--ed-accent)!important; }
.mw-parser-output .elite-home-v2 .ed-bottom-links { display:flex; flex-wrap:wrap; gap:.55rem .9rem; margin-top:1rem; font-size:.9rem; }
.mw-parser-output .elite-home-v2 a:focus-visible, .mw-parser-output .elite-home-v2 input:focus-visible { outline:2px solid var(--ed-accent); outline-offset:4px; }
@media (max-width:900px) { .mw-parser-output .elite-home-v2 .ed-directory { grid-template-columns:repeat(2,minmax(0,1fr)); } .mw-parser-output .elite-home-v2 .ed-featured-grid { gap:.65rem; } .mw-parser-output .elite-home-v2 .ed-feature-copy { padding:.9rem; } }
@media (max-width:600px) { .mw-parser-output .elite-home-v2 .ed-featured-grid, .mw-parser-output .elite-home-v2 .ed-directory, .mw-parser-output .elite-home-v2 .ed-bottom-grid { grid-template-columns:1fr; } .mw-parser-output .elite-home-v2 .ed-feature-copy>p:not(.ed-kicker) { min-height:0; } .mw-parser-output .elite-home-v2 .ed-home-hero { padding:1.25rem; } .mw-parser-output .elite-home-v2 .ed-home-search form { flex-direction:column; } .mw-parser-output .elite-home-v2 .ed-home-search input[type="text"] { flex:auto; width:100%!important; } .mw-parser-output .elite-home-v2 .ed-quick span { display:none; } .mw-parser-output .elite-home-v2 .ed-quick { gap:.65rem 1rem; } .mw-parser-output .elite-home-v2 .ed-section-heading { margin-top:1.5rem; } }
@media print { .mw-parser-output .elite-home-v2 .ed-home-hero { background:#fff!important; color:#000!important; } .mw-parser-output .elite-home-v2 .ed-home-hero h1,.mw-parser-output .elite-home-v2 .ed-home-lead { color:#000!important; } .mw-parser-output .elite-home-v2 .ed-home-search { display:none; } }
@media (forced-colors:active) { .mw-parser-output .elite-home-v2 .ed-home-hero, .mw-parser-output .elite-home-v2 .ed-home-search input { background:Canvas!important; color:CanvasText!important; } .mw-parser-output .elite-home-v2 .ed-home-hero h1,.mw-parser-output .elite-home-v2 .ed-home-lead,.mw-parser-output .elite-home-v2 .ed-home-hero a { color:CanvasText!important; } }
 
/* END Elite Main Page components 20261101 */