MediaWiki:Common.css: Difference between revisions

Revision as of 05:36, 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 Enhancements: YouTube & SoundCloud (Optimized for External Hosts)
   ========================================================================== */

/* 1. Global Container Reset */
.embedvideo {
    margin: 1.5em auto;
    max-width: 100%;
    clear: both;
}

/* 2. YouTube Specific Styling (16:9 Video Canvas) */
.embedvideo[data-service="youtube"] {
    background-color: #000000;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

/* Ensure the inner YouTube iframe inherits the rounded corners cleanly */
.embedvideo[data-service="youtube"] iframe {
    border: 0 !important;
    border-radius: 8px;
}

/* 3. SoundCloud Specific Styling (Sleek Audio Strip) */
.embedvideo[data-service="soundcloud"] {
    background: #f8f9fa !important;
    border: 1px solid #a2a9b1 !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden;
    max-width: 600px; /* Keeps the audio strip tightly bound on large desktop monitors */
}

/* Force standard, predictable height for the classic SoundCloud widget */
.embedvideo[data-service="soundcloud"] iframe {
    border: 0 !important;
    height: 166px !important; 
    width: 100% !important;
    display: block;
}

/* 4. Layout Alignment Engine */
/* Respects the extension's alignment syntax while maintaining proper margins */
.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;
}