Changes

From Drawn to Life Wiki

MediaWiki:Common.css (view source)

Revision as of 02:06, 17 November 2020

5,804 bytes added ,  02:06, 17 November 2020
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..."
/* 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 *
*******************************/
Retrieved from "https://drawntolife.wiki/en/Special:MobileDiff/13"