Difference between revisions of "MediaWiki:Common.css"

From Drawn to Life Wiki
(Created page with "→‎CSS placed here will be applied to all skins: →‎This governs the sections on the Community portal: .cpbox { display: flex; flex-direction: row-reverse; fle...")
 
(Blanked the page)
Tag: Blanking
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
 
/* This governs the sections on the Community portal */
 
.cpbox {
 
    display: flex;
 
    flex-direction: row-reverse;
 
    flex-wrap: wrap;
 
}
 
  
.cpbox #admins {
 
    box-sizing: border-box;
 
    width: calc(33% - 10px);
 
    margin: 5px;
 
    flex-grow: 1;
 
    min-width: 300px;
 
}
 
 
.cpbox #help {
 
    box-sizing: border-box;
 
    width: calc(67% - 10px);
 
    margin: 5px;
 
    flex-grow: 1;
 
}
 
 
/* Template documentation styles */
 
/* If modifying these styles, be sure to update the mobile skin! */
 
.doc {
 
    margin: 0em auto 1em;
 
    background-color: rgba(0, 0, 0, 0.1);
 
    border: 2px solid #BDCAC3;
 
    border-radius: 1em;
 
    padding: 1em;
 
}
 
 
.doc-header {
 
    padding-bottom: 3px;
 
    border-bottom: 1px solid #BDCAC3;
 
    margin-bottom: 1ex;
 
}
 
 
.doc-footer {
 
    margin: 0;
 
    background-color: rgba(0, 0, 0, 0.1);
 
    border: 2px solid #BDCAC3;
 
    border-radius: 1em;
 
    padding: 1em;
 
}
 
 
/* Classes permitting setting of alignment on desktop only or differently on desktop and mobile */
 
/* (See .mobileleft, .mobilecenter, .mobileright in MediaWiki:Mobile.css for the mobile equivalents */
 
.desktopleft {
 
    text-align: left;
 
}
 
 
.desktopcenter {
 
    text-align: center;
 
}
 
 
.desktopright {
 
    text-align: right;
 
}
 
 
/* Front page structure */
 
#fp-container {
 
display: grid;
 
grid-template-areas: "a" "b" "c" "d";
 
grid-template-columns: 100%;
 
}
 
@media screen and (min-width:990px) {
 
#fp-container {
 
grid-template-areas: "a b" "c b" "d b";
 
grid-template-columns: 50% 50%;
 
}
 
}
 
@media screen and (min-width:1350px) {
 
#fp-container {
 
grid-template-areas: "a b c" "d b c";
 
grid-template-columns: 33.3% 33.3% 33.3%;
 
}
 
}
 
 
.fp-section {
 
display: flex;
 
flex-wrap: wrap;
 
}
 
 
.fp-section .fpbox {
 
width: calc(100% - 2px);
 
}
 
 
#fp-1 {
 
grid-area: a;
 
}
 
 
#fp-2 {
 
grid-area: b;
 
}
 
 
#fp-3 {
 
grid-area: c;
 
}
 
 
#fp-4 {
 
grid-area: d;
 
}
 
 
.fpbox {
 
    margin: 5px;
 
    padding: 5px;
 
    overflow: auto;
 
}
 
 
.fpbox.plain {
 
    background: transparent;
 
    border: none;
 
    box-shadow: none;
 
}
 
 
.fpbox .heading,
 
.fpbox .mainheading,
 
.fpbox .welcome {
 
    margin: 0 0 10px;
 
    padding: 0 0 5px;
 
    overflow: auto;
 
}
 
 
.fpbox .mainheading,
 
.fpbox .welcome {
 
    font-size: 150%;
 
    font-weight: bold;
 
}
 
 
.fpbox .heading {
 
    text-align: center;
 
    font-size: 132%;
 
}
 
 
.linkslabel {
 
    margin: 15px 5px 5px;
 
    padding: 0 0 5px;
 
}
 
 
/* Template:FP links styles */
 
.fplinks {
 
    display: flex;
 
    flex-wrap: wrap;
 
    justify-content: space-evenly;
 
    align-items: stretch;
 
    text-align: center;
 
}
 
 
.fplink-outer {
 
    padding: 5px;
 
    flex-basis: calc(25% - 10px);
 
    width: calc(25% - 15px);
 
    min-width: 115px;
 
    display: inline-block;
 
    vertical-align: middle;
 
}
 
 
.fplink-wide {
 
    flex-basis: calc(33% - 10px);
 
    width: calc(33% - 15px);
 
}
 
 
.fplink-fullwidth {
 
    flex-basis: 100%;
 
    width: calc(100% - 15px);
 
    font-weight: bold;
 
}
 
 
.fplink {
 
    padding: 0.5em;
 
    box-sizing: border-box;
 
    width: 100%;
 
    height: 100%;
 
    display: table;
 
}
 
 
.fplink-plain {
 
    background: transparent;
 
    border-radius: 0;
 
    border: 0;
 
    box-shadow: none;
 
}
 
 
.fplink-inner {
 
    display: table-row;
 
}
 
 
.fplink a {
 
    display: table-cell;
 
    vertical-align: middle;
 
}
 
 
.fplink img {
 
    max-width: 150px;
 
    width: 100%;
 
    height: auto;
 
}
 
/* Auto-resize front page video to fit smaller columns */
 
.fpbox .embedvideowrap {
 
    width: 100%!important;
 
    max-width: 480px;
 
    margin: 0 auto;
 
}
 
 
.fpbox .embedvideowrap iframe {
 
    width: 100%!important;
 
}
 
 
/* This CSS governs the responsive 3 column main page layout */
 
.fpmidsections {
 
    float: left;
 
    width: 100%;
 
    overflow: hidden;
 
}
 
 
.fpsection1,
 
.fpsection2,
 
.fpsection3,
 
.fpsection4 {
 
    float: left;
 
    clear: both;
 
    width: 100%;
 
}
 
 
.fpmain .columns .leftcol,
 
.fpmain .columns .rightcol {
 
    width: 100%;
 
    margin: 0;
 
    padding: 0;
 
}
 
 
@media (min-width: 790px) {
 
    .fpsection1,
 
    .fpsection4 {
 
        float: left;
 
        clear: none;
 
        width: 50%;
 
    }
 
 
    .fpmidsections {
 
        float: right;
 
        clear: none;
 
        width: 50%;
 
    }
 
}
 
 
@media (min-width: 990px) {
 
    .fpmain .columns .leftcol {
 
        float: left;
 
        width: 50%;
 
    }
 
 
    .fpmain .columns .rightcol {
 
        float: right;
 
        width: 50%;
 
    }
 
}
 
 
@media (min-width: 1390px) {
 
    .fpmidsections {
 
        clear: none;
 
        float: right;
 
        width: 66.667%;
 
    }
 
 
    .fpsection1 {
 
        clear: none;
 
        width: 33.333%;
 
    }
 
 
    .fpsection2,
 
    .fpsection3 {
 
        clear: none;
 
        width: 50%;
 
    }
 
 
    .fpsection4 {
 
        clear: left;
 
        width: 33.333%;
 
    }
 
}
 
 
/* Gallery tweak */
 
ul.mw-gallery-nolines li.gallerybox div.thumb {
 
  background:none;
 
  box-shadow:none;
 
  border:none;
 
}
 
 
/***************************
 
* Used by [[Template:Key]] *
 
****************************/
 
/* Dark Wiki Variation */
 
.keysDark {
 
color:black;
 
border: 1px solid rgb(170, 170, 170);
 
box-shadow: 0.1em 0.2em 0.2em rgb(221, 221, 221);
 
border-radius: .2em;
 
background-image: linear-gradient(to bottom, rgb(238, 238, 238), rgb(249, 249, 249), rgb(238, 238, 238));
 
background-color: rgb(249, 249, 249);
 
padding: 0.1em 0.6em 0.1em 0.6em;
 
margin-right:2px;
 
font-size:85%;
 
font-family:inherit;
 
font-style:normal;
 
}
 
 
/* Light Wiki Variation */
 
.keysLight {
 
color:white;
 
border: 1px solid rgb(0, 0, 0);
 
box-shadow: 0.1em 0.2em 0.2em rgb(0, 0, 0);
 
border-radius: .2em;
 
background-image: linear-gradient(to bottom, rgb(0, 0, 0), rgb(15, 15, 15), rgb(30, 30, 30));
 
background-color: rgb(30, 30, 30);
 
padding: 0.1em 0.6em 0.1em 0.6em;
 
margin-right:2px;
 
font-size:85%;
 
font-family:inherit;
 
font-style:normal;
 
}
 
 
/******************************
 
* End Template:Key coloration *
 
*******************************/
 

Revision as of 02:09, 17 November 2020