Difference between revisions of "MediaWiki:Common.css"

Latest revision as of 06:58, 14 May 2022

/* CSS placed here will be applied to all skins */

/* Use awesomefont */
@import url("https://use.fontawesome.com/releases/v5.6.3/css/all.css");

/* Colors of namespaces */
/*.ns-3000 #content, .ns-3001 #content { background-color: #f5f5ff; }*/
/*.ns-3010 #content, .ns-3011 #content { background-color: #f7fcfa; }*/
/*.ns-4000 #content, .ns-4001 #content { background-color: #e2d2c6; }*/

.ns-3000 #p-logo a, .ns-3001 #p-logo a, .ns-3002 #p-logo a, .ns-3003 #p-logo a { background-image: url(./a/olekdia/wiki_resources/magic_intuition_logo.png) !important; }
.ns-3010 #p-logo a, .ns-3011 #p-logo a, .ns-3012 #p-logo a, .ns-3013 #p-logo a { background-image: url(./a/olekdia/wiki_resources/time_planner_logo.png) !important; }
.ns-4000 #p-logo a, .ns-4001 #p-logo a { background-image: url(./a/olekdia/wiki_resources/dev_logo.png) !important; }

.ns-2 #p-logo a, .ns-4 #p-logo a, .ns-6 #p-logo a, .ns-8 #p-logo a, .ns-12 #p-logo a, .ns-14 #p-logo a { background-image: url(./a/olekdia/wiki_resources/olekdia_logo.png) !important; }

/* Remove main tab */
#ca-nstab-main, #ca-nstab-prana_breath_news, 
#ca-nstab-project, #ca-nstab-image, 
#ca-nstab-category, #ca-nstab-help,
#ca-nstab-mediawiki, #ca-nstab-template,
#ca-nstab-time_planner, #ca-nstab-time_planner_news,
#ca-nstab-magic_intuition, #ca-nstab-magic_intuition_news,
#ca-nstab-development
{ display: none !important; }
/* Remove talk tab */
#ca-talk { display: none !important; }

/* Remove last modification in the footer */
#viewcount { display: none !important; }
#lastmod { display: none !important; }

.hidden-sp { display: none !important; }

.square-btn { padding: 2px 5px !important; }
/* Table for sound styles, two last cells should be minimal with buttons */
.fittable td:nth-child(2) { width:1px; }
.fittable td:nth-child(3) { width:1px; }
th h2 { margin-top: 0.5em !important; }
th h3 { margin-top: 0.25em !important; margin-bottom: 0.25em !important; }

.long-code code { word-break: break-all; }
.api-table h3 { 
    font-size: 1.1em !important;
    font-family: 'Consolas','Courier','Nimbus Mono','Liberation Mono','Courier New',monospace;
}

.api-table table td { vertical-align:top !important; }
/* REMOVE
.api-table td:nth-child(1) { width:1px !important; }
.api-table td:nth-child(2) { width:99% !important; }
.api-table table { table-layout: fixed; }
*/

/* Horizontal scroll box */
.horizontal-scroll {
    overflow-x: auto !important;  
    overflow-y: hidden !important; 
    white-space: nowrap !important; 
    width: 100% !important;
}
.horizontal-scroll .tleft {
    float: none !important;
    margin: 0px 8px 0px 0px;
    padding: 0px;
    display: inline-block !important;
}
.horizontal-scroll .thumbcaption {
    display: none !important;
}
.horizontal-scroll .thumbinner {
    padding: 0px !important;
    border-width: 0px !important;
}

.responsive-thumb-float {
    clear: both;
}

.responsive-thumb-float .thumb {
    clear: none;
}

.responsive-full-img img {
    max-width: 100% !important;
    height: auto !important;
}

.responsive-img img {
    max-width: 90%;
    height: auto;
}

@media only screen and (min-width: 1024px) {
    .responsive-img img {
        max-width: 85%;
        height: auto;
    }
}

@media only screen and (min-width: 1280px) {
    .responsive-img img {
        max-width: 55%;
        height: auto;
    }
}

.responsive-img-float {
    float: none;
}
/*This will cause the img receive float none rule when screen is smaller than 700px*/
@media only screen and (min-width: 700px) {
    .responsive-img-float {
        float: left;
        padding-right: 25px; 
        padding-bottom: 5px;
    }
}

.responsive-vid-float {
    float: none;
}
@media only screen and (min-width: 850px) {
    .responsive-vid-float {
        float: left;
        padding-right: 25px; 
        padding-bottom: 5px;
    }
}


/************************/
/* Timeless adjustments */

/* Hide Wiki name */
#p-banner { display: none !important; }

body { 
    font-size: 1em;
    line-height: 1.6; 
}

.mw-body {
    font-size: 1.1em;
}

.mw-pt-languages {
    font-size: 0.8em;
}

.mw-body h2 {
    font-weight: 500;
}

a {
    color: #0645ad;
}

a:visited {
    color: #0b0080;
}

/* For medium devices */
@media screen and (max-width: 1099px) and (min-width: 851px) {
    #simpleSearch {
        margin-left: -14em;
    }
}

/* For small devices, reset entire container, because its buttons got fixed position  */
@media screen and (max-width: 850px) and (min-width: 480px) {
    #mw-header-container {
        padding: 0.78em 10.7em 0.75em 6.2em;
    }
}

/* Headers strips */
#mw-content h1, #mw-content h2 {
    border-bottom: solid 2px #3366cc;
}
#mw-content h1.firstHeading {
    border-bottom: solid 3px #676e9f;
}
.color-middle {
    background: #676e9f;
}

/* Selected tabs */
#mw-page-header-links li.selected {
    border-bottom-color: #3366cc;
}

/* Left strip color */
.color-left {
    background: #7a64a0;
}
.ns-0 .color-left, .ns-1 .color-left {
    background: #7a64a0;
}
.ns-3000 .color-left, .ns-3001 .color-left, .ns-3002 .color-left, .ns-3003 .color-left {
    background: #563a56;
}
.ns-3010 .color-left, .ns-3011 .color-left {
    background: #743C71;
}
.ns-4000 .color-left, .ns-4001 .color-left {
    background: #000;
}

/* Right strip color */
.color-right {
    background: #7a64a0;
}
.ns-0 .color-right, .ns-1 .color-right {
    background: #7a64a0;
}
.ns-3000 .color-right, .ns-3001 .color-right, .ns-3002 .color-right, .ns-3003 .color-right {
    background: #563a56;
}
.ns-3010 .color-right, .ns-3011 .color-right {
    background: #743C71;
}
.ns-4000 .color-right, .ns-4001 .color-right {
    background: #000;
}

/* Bottom strip color */
#mw-content-container {
    border-bottom: solid 4px #7a64a0;
}
.ns-0 #mw-content-container, .ns-1 #mw-content-container {
    border-bottom: solid 4px #7a64a0;
}
.ns-3000 #mw-content-container, .ns-3001 #mw-content-container, .ns-3002 #mw-content-container, .ns-3003 #mw-content-container {
    border-bottom: solid 4px #563a56;
}
.ns-3010 #mw-content-container, .ns-3011 #mw-content-container {
    border-bottom: solid 4px #743C71;
}
.ns-4000 #mw-content-container, .ns-4001 #mw-content-container {
    border-bottom: solid 4px #000;
}