MediaWiki:Common.css: Difference between revisions

Revision as of 07:07, 14 June 2026

/* CSS placed here will be applied to all skins */

/* Hide visual clutter for non-admin/casual readers */
#t-print, #t-permalink, #t-cite, #t-whatlinkshere, #t-recentchangeslinked {
    display: none !important;
}

/* Round off elements for a modern, software-as-a-service feel */
.mw-body {
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* Hide empty default navigation blocks or duplicate system columns */
#p-navigation, .mw-portlet-navigation:not([id*="REDESIGN"]):not([id*="TRACK"]) {
    display: none !important;
}

/* ==========================================================================
   EmbedVideo Production Config (Theme Agnostic & Bulletproof Rounding)
   ========================================================================== */

/* 1. Global Container Resets - Keeps text areas transparent to your wiki theme */
.embedvideo {
    margin: 1.5em auto;
    max-width: 100%;
    clear: both;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2. YouTube Specific Styling (Cinematic 16:9 Player Card) */
/* Targets the iframe AND any inner div wrapper that contains it */
.embedvideo[data-service="youtube"] iframe,
.embedvideo[data-service="youtube"] div:has(iframe) {
    border-radius: 8px !important;
    overflow: hidden !important;
    background-color: #000000 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    border: 0 !important;
    /* Forces the browser's rendering engine to strictly clip the video stream */
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
}

/* 3. SoundCloud Specific Styling (Sleek Audio Strip) */
.embedvideo[data-service="soundcloud"] iframe,
.embedvideo[data-service="soundcloud"] div:has(iframe) {
    border: 1px solid #a2a9b1 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
}

/* Keep the SoundCloud iframe constrained to a clean widget height profile */
.embedvideo[data-service="soundcloud"] iframe {
    height: 166px !important; 
    width: 100% !important;
    display: block;
}

/* 4. Universal Caption/Label Styling (High-Contrast Orange) */
.embedvideo .thumbcaption,
.embedvideo-caption,
.embedvideo + div {
    color: #e65c00 !important; 
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 0.95em !important;
    font-weight: 600 !important;
    text-align: center !important;
    padding-top: 10px !important;
    display: block !important;
    background: transparent !important;
}

/* 5. Layout Alignment Engine */
.embedvideo.align-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.embedvideo.align-left {
    float: left;
    margin-right: 1.5em;
    margin-bottom: 1em;
}

.embedvideo.align-right {
    float: right;
    margin-left: 1.5em;
    margin-bottom: 1em;
}

/* Failsafe to prevent text layout clipping after floated elements */
.mw-parser-output::after {
    content: "";
    display: table;
    clear: both;
}