MediaWiki:Common.css: Difference between revisions

Revision as of 03:28, 27 October 2025

/** * Custom CSS for Right Column Ad Banner.
 * * The ad element (#right-column-banner-ad) is injected after the main 
 * content using the SkinAfterContent hook in LocalSettings.php.
 * * This CSS uses a Media Query to ensure the ad is ONLY displayed 
 * when the viewport is wide enough to prevent content overlap.
 */

/* ---------------------------------------------------------------------- */
/* 1. DEFAULT STATE: Hide the ad element by default on small screens.     */
/* ---------------------------------------------------------------------- */
#right-column-banner-ad {
    display: none; /* Hidden by default */
}

/* ---------------------------------------------------------------------- */
/* 2. MEDIA QUERY: Show the ad only on wide screens (Desktop/Full-screen) */
/* ---------------------------------------------------------------------- */
/* MediaWiki's Vector skin often uses ~1200px or ~1400px as a breakpoint 
   for the side column. Adjust 1400px if needed for your specific layout. 
*/
@media screen and (min-width: 1400px) {
    
    #right-column-banner-ad {
        /* Re-enable visibility */
        display: block; 

        /* Positioning as defined before */
        position: absolute; 
        
        /* Adjust these values based on your specific skin layout. */
        /* 15px is a safe padding from the right edge. */
        right: 15px;   
        
        /* Vertical position: Controls how far down it appears. 
           Adjust 300px based on how far below the page tools you want it. */
        top: 450px; 
        
        /* Size */
        width: 200px; 
        
        /* Visuals */
        padding: 10px;
        background-color: white; 
        border: 1px solid #ddd;
        border-radius: 6px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        
        /* Ensure it layers correctly (if it was overlapping the toolbox) */
        z-index: 10; 
    }
    
    #right-column-banner-ad h2 {
        font-size: 1.1em;
        border-bottom: 1px solid #eee;
        padding-bottom: 5px;
        margin-bottom: 5px;
    }
}

.mw-plusminus-pos {
    color: #12CAA2;
}

#pagehistory li.selected {
    background: #070605;
    color: #dddddd;
}

.mw-datatable td {
    background: #070605;
}

.mw-datatable th {
    background-color: #150c00;
}

.mw-datatable tr:hover td {
    background-color: #002a62;
}

.mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, .mw-changeslist-legend, .mw-body .mw-search-profile-tabs, .mw-body fieldset#mw-searchoptions, .mw_metadata, .wikitable, .mw-datatable {
    background: #070605;
    border: solid #15130f;
    color: #F0F0F0;
}

.mw_metadata, .mw-datatable, .wikitable {
    border-color: #37332e;
    color: #F0F0F0;
}

.wikitable > tr > th, .wikitable > * > tr > th {
    background-color: #15130f;
    border: 1px solid #37332e;
    color: #F0F0F0;
}

#mw-content-container { background-color: #15130f; }
#mw-header-container { 
    background-color: #000000; 
    color: #F0F0F0;
    }

#p-logo-text a { color: #F0F0F0; }

#mw-related-navigation .sidebar-chunk {
    border: 1px solid #7F7F7F;
}

#mw-site-navigation .sidebar-chunk { 
    background-color: #070605; 
    border: 1px solid #7F7F7F;
    box-shadow: 0 1px 2px 1px rgba(255,255,255,0.02);
    }

#mw-site-navigation .sidebar-chunk label, #mw-site-navigation .sidebar-chunk h3 {
    border-bottom: solid 2px #37332e;
    color: #F0F0F0;
    }

#mw-site-navigation .sidebar-chunk {
    background: #070605;
    }

#mw-content {
    background: #15130f;
    color: #F0F0F0;
    border: 1px solid #7F7F7F;
    }

.tools-inline li.selected a {
    color: #fff;
    }

.toc {
    border: 1px solid #7F7F7F;
}

.toctogglelabel {
    color: #97d6ffff;
}

code, pre, .mw-code {
    background-color: #070605;
    color: #fff;
    }

ul#filetoc, .toc, .toccolours, .mw-warning {
    background-color: #070605;
    }

.tocnumber {
    color: #aba6a2;
    }

@media screen {
  a {
    color: #97d6ffff;
    }
  a:visited {
    color: #52a4ffff;
    } 
  a:hover {
    color: #b8dcffff;
    }
  a:visited:hover {
    color: #1f85ffff;
    }
}

@media screen {
  body {
  color: #F0F0F0;
  }
}

.mw-parser-output a.extiw, .mw-parser-output a.extiw:active, .mw-parser-output a.external {
   color: #97d6ffff;
}

.mw-parser-output a.extiw:visited, .mw-parser-output a.extiw:active:visited, .mw-parser-output a.external:visited {
    color: #52a4ffff;
}

#mw-related-navigation .sidebar-chunk {
    background-color: #070605;
    }

#mw-site-navigation .sidebar-chunk label, #mw-site-navigation .sidebar-chunk h3 {
    border-bottom: solid 2px #F0F0F0;
    }

#site-navigation h2 {
background-image: url('skins/Timeless/resources/images/menu-large-grey2.svg');    
}

.sidebar-inner, .dropdown {
    background-color: #070605;
}

#mw-wrapper .dropdown-active .pokey, #mw-wrapper .dropdown-active .dropdown, #mw-wrapper .dropdown-active .sidebar-inner {
    background-color: #070605;
}

#ca-edit a {
   background-image: url('skins/Timeless/resources/images/page-grey2.svg');
}

#ca-talk a {
   background-image: url('skins/Timeless/resources/images/talk-grey2.svg');
}

#ca-history a {
   background-image: url('skins/Timeless/resources/images/clock-grey2.svg');
}

#ca-viewsource a {
   background-image: url('skins/Timeless/resources/images/brackets-grey2.svg');
}

#site-tools h2 {
   background-image: url('skins/Timeless/resources/images/gear-grey2.svg');
}

.tools-inline li[id^='ca-nstab-'] a {
   background-image: url('skins/Timeless/resources/images/page-grey2.svg');
}

.mw-editsection {
   background-image: url('skins/Timeless/resources/images/pencil-grey2.svg');
}

/* carousel */
.jcarousel {
    position: relative;
    overflow: hidden;
}
 
.jcarousel-wrapper {
	max-width: 1125px;
    margin: 0;
    position: relative;
}
 
.jcarousel .jcarousel-list {
    width: 20000em;
    position: relative;
    margin: 0;
    padding: 0;
}
 
.jcarousel .jcarousel-item {
    float: left;
}
 
.jcarousel-item img {
    display: block;
    max-width: 100%;
    height: auto !important;
}
 
.jcarousel-control-prev,
.jcarousel-control-next {
    position: absolute;
    top: 45%;
    width: 30px;
    height: 30px;
    text-align: center;
    background: #fff;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 1px #000;
    font: 24px/27px Arial, sans-serif;
    border-radius: 30px;
    box-shadow: 0 0 2px #999;
}
 
.jcarousel-control-prev {
    left: -15px;
}
 
.jcarousel-control-next {
    right: -15px;
}
 
.jcarousel-control-prev:hover span,
.jcarousel-control-next:hover span {
    display: block;
}
 
.jcarousel-control-prev.inactive,
.jcarousel-control-next.inactive {
    opacity: .5;
    cursor: default;
}
 
.jcarousel-pagination {
    position: absolute;
    bottom: 10px;
    left: 15px;
}
 
.jcarousel-pagination a {
    text-decoration: none;
    display: inline-block;
    font-size: 11px;
    line-height: 14px;
    min-width: 14px;
    background: #fff;
    color: #4E443C;
    border-radius: 14px;
    padding: 3px;
    text-align: center;
    margin-right: 2px;
    opacity: .75;
}
 
.jcarousel-pagination a.active {
    background: #4E443C;
    color: #fff;
    opacity: 1;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
}