MediaWiki:Common.css: Difference between revisions

Revision as of 12:02, 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 Clean Config - Fixed Rounding & Transparent Text
   ========================================================================== */

/* SoundCloud Specific Layout Fix */
/* Forces the SoundCloud widget into a standard, clean 166px audio strip layout */
.embedvideo[data-service="soundcloud"] iframe {
    height: 166px !important;
    width: 100% !important;
    display: block !important;
}

/* 1. Outer container stays transparent so text area matches your light theme */
.embedvideo {
    margin: 1.5em auto;
    max-width: 100%;
    clear: both;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2. Apply the black backdrop AND the 8px rounding directly to the player elements */
.embedvideo iframe,
.embedvideo-container,
.embedvideo-responsive,
.embedvideo-player {
    background-color: #000000 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);

    /* FIX: Forces Chrome/Safari/Edge to respect rounded corners on video iframes */
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

/* 3. Universal Caption/Label Text Visibility (Adaptive Light/Dark Theme Engine) */
.embedvideo .thumbcaption,
.embedvideo-caption,
.embedvideo + div {
    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;
    
    /* Default: Highly visible dark slate for Light Browser Themes */
    color: #202122 !important; 
    transition: color 0.2s ease-in-out;
}

/* Auto-switch to Orange when System/Browser Dark Mode is enabled */
@media (prefers-color-scheme: dark) {
    .embedvideo .thumbcaption,
    .embedvideo-caption,
    .embedvideo + div {
        color: #ff9900 !important; 
    }
}

/* Auto-switch to Orange when MediaWiki's native Dark Theme toggle is used */
html.skin-theme-clientpref-dark .embedvideo .thumbcaption,
html.skin-theme-clientpref-dark .embedvideo-caption,
html.skin-theme-clientpref-dark .embedvideo + div {
    color: #ff9900 !important;
}

/* 4. 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;
}