MediaWiki:Common.css: Difference between revisions

Revision as of 06:01, 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 & Skin Agnostic)
   ========================================================================== */

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

/* 2. YouTube Media Frame (Isolates black canvas strictly to the video) */
.embedvideo[data-service="youtube"] iframe {
    background-color: #000000;
    border: 0 !important;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: block;
}

/* 3. SoundCloud Media Frame */
.embedvideo[data-service="soundcloud"] iframe {
    border: 1px solid #a2a9b1 !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
    height: 166px !important; 
    width: 100% !important;
    display: block;
}

/* 4. Universal Caption/Label Styling */
/* Uses a vivid safety-orange that meets high-contrast visibility on both white and black */
.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;
}

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