MediaWiki:Common.css: Difference between revisions

Latest revision as of 12: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 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;
}

/* Persistent Audio Controller Button Styles */
#soundcloud-popup-trigger {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 50px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, background-color 0.2s ease;
    
    /* Inherit core colors natively from the Citizen Theme System */
    background-color: var(--background-color-interactive-subtle, #f8f9fa);
    color: var(--color-base, #202122);
    border: 1px solid var(--border-color-base, #a2a9b1);
}

#soundcloud-popup-trigger:hover {
    transform: translateY(-2px);
    background-color: var(--background-color-button-quiet--hover, #edf2f7);
    border-color: #ff9900; /* Subtle brand matching highlight accent */
}

/* Hide text context on mobile devices so it collapses into a tidy floating music icon */
@media (max-width: 768px) {
    #soundcloud-popup-trigger .player-text {
        display: none;
    }
    #soundcloud-popup-trigger {
        padding: 12px;
        bottom: 16px;
        right: 16px;
    }
}