MediaWiki:Common.css: Difference between revisions

From Drama Chaser
(Created page with "→‎CSS placed here will be applied to all skins: .infobox { border: 1px solid #a2a9b1; border-spacing: 3px; background-color: #f8f9fa; color: black; →‎@noflip: margin: 0.5em 0 0.5em 1em; padding: 0.2em; →‎@noflip: float: right; →‎@noflip: clear: right; font-size: 88%; line-height: 1.5em; width: 22em; } .infobox-header, .infobox-label, .infobox-above, .infobox-full-data, .infobox-data, .infobox-below, .infobox-subheader, .infobox-image, .infobox...")
 
No edit summary
 
(120 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* CSS placed here will be applied to all skins */
/* infobox styling */


.infobox {
.infobox {
border: 1px solid #a2a9b1;
    border: 2px solid #272d2d;
border-spacing: 3px;
    background-color: #e9dfc9;
background-color: #f8f9fa;
    float: right;
color: black;
    margin: 0 0 1em 1em;
/* @noflip */
    padding: 1em;
margin: 0.5em 0 0.5em 1em;
    width: 30%;
padding: 0.2em;
}
/* @noflip */
 
float: right;
.infobox-title {
/* @noflip */
    font-size: 2em;
clear: right;
    text-align: center;
font-size: 88%;
    }
line-height: 1.5em;
 
width: 22em;
.infobox-image {
    text-align: center;
    max-width: 100%;
    height: auto;
}
 
.infobox-table th {
    text-align: right;
    vertical-align: top;
    width: 120px;
}
 
.infobox-table td {
    vertical-align: top;
}
 
 
/* character-infobox */
 
.infobox-character {
    border: 2px solid #272d2d;
    background-color: #e9dfc9;
    float: right;
    margin: 0 0 1em 1em;
    padding: 1em 1em 1em 1em;
    width: 30%;
}
}


.infobox-header,
.infobox-title {
.infobox-label,
    font-size: 2em;
.infobox-above,
    text-align: center;
.infobox-full-data,
    }
.infobox-data,
 
.infobox-below,
.infobox-image {
.infobox-subheader,
    text-align: center;
.infobox-image,
    max-width: 95%;
.infobox-navbar,
    height: auto;
/* Remove element selector when every .infobox thing is using the standard module/templates  */
    padding-bottom: 30px;
.infobox th,
.infobox td {
vertical-align: top;
}
}


.infobox-label,
.infobox-table th {
.infobox-data,
    text-align: right;
/* Remove element selector when every .infobox thing is using the standard module/templates  */
    vertical-align: top;
.infobox th,
    padding: 5px;
.infobox td {
/* @noflip */
text-align: left;
}
}


/* Remove .infobox when element selectors above are removed */
.infobox-table td {
.infobox .infobox-above,
    vertical-align: top;
.infobox .infobox-title,
    padding: 5px;
/* Remove element selector when every .infobox thing is using the standard module/templates  */
.infobox caption {
font-size: 125%;
font-weight: bold;
text-align: center;
}
}


.infobox-title,
.infobox-table {
/* Remove element selector when every .infobox thing is using the standard module/templates  */
    align: center;
.infobox caption {
    margin: auto;
padding: 0.2em;
}
}


/* Remove .infobox when element selectors above are removed */
/* body of the article—VECTOR SPECIFIC */
.infobox .infobox-header,
 
.infobox .infobox-subheader,
.vector-body {
.infobox .infobox-image,
    background-color: #ece2d0;
.infobox .infobox-full-data,
    padding: 2% !important;
.infobox .infobox-below {
    border: 2px solid #272d2d !important;
text-align: center;
}
}


/* Remove .infobox when element selectors above are removed */
/* body background. hacky as hell. whatever. */
.infobox .infobox-navbar {
 
/* @noflip */
.mw-page-container {
text-align: right;
    background-color: #8d6345 !important;
}
 
 
/* header with banner */
 
.vector-header-container {
    background-color: #8d6345 !important;
    background-image: url('https://dramachaser.com/images/a/a0/Dummy.gif');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    height: 230px;
}
 
/* links */
a:link { color: #06560e !important; }
 
a:visited { color: #732e1c !important; }
 
a:hover { text-decoration: underline !important; }
 
/* zebra tables */
 
tr:nth-child(even) { background-color: #f8f4ed; }
 
tr:nth-child(odd) { background-color: #f1e9dc; }
 
tr:hover { background-color: #ecd7d0; }
 
/* cleaning things up */
 
#mw-teleport-target { display:none; }
 
/* no more ugly gradients */
.vector-feature-zebra-design-disabled #vector-page-tools-pinned-container .vector-page-tools::after { display: none; }
.vector-feature-zebra-design-disabled #vector-toc-pinned-container .vector-toc::after { display: none; }
 
/* make the background colour of the left sidebar match everything else */
.vector-feature-zebra-design-disabled .vector-toc { background-color:#ece2d0; }
.vector-feature-zebra-design-disabled #vector-main-menu-pinned-container .vector-main-menu { background-color:#ece2d0; }
 
 
/* messing around with episode picker tables; this is very much a wip */
 
#episodes {
display: grid;
  grid: auto / auto auto auto auto auto;
  gap: 10px;
  background-color: #f1e9dc;
  padding: 10px;
}
 
#episodes div {
  background-color: rgba(255, 255, 255, 0.6);
  text-align: center;
  padding: 10px 0;
  font-size: medium;
  box-shadow: 1px 1px 1px 1px;
}
}

Latest revision as of 05:02, 4 June 2024

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

/* infobox styling */

.infobox {
    border: 2px solid #272d2d;
    background-color: #e9dfc9;
    float: right;
    margin: 0 0 1em 1em;
    padding: 1em;
    width: 30%;
}

.infobox-title {
    font-size: 2em;
    text-align: center;
    }

.infobox-image {
    text-align: center;
    max-width: 100%;
    height: auto;
}

.infobox-table th {
    text-align: right;
    vertical-align: top;
    width: 120px;
}

.infobox-table td {
    vertical-align: top;
}


/* character-infobox */

.infobox-character {
    border: 2px solid #272d2d;
    background-color: #e9dfc9;
    float: right;
    margin: 0 0 1em 1em;
    padding: 1em 1em 1em 1em;
    width: 30%;
}

.infobox-title {
    font-size: 2em;
    text-align: center;
    }

.infobox-image {
    text-align: center;
    max-width: 95%;
    height: auto;
    padding-bottom: 30px;
}

.infobox-table th {
    text-align: right;
    vertical-align: top;
    padding: 5px;
}

.infobox-table td {
    vertical-align: top;
    padding: 5px;
}

.infobox-table {
    align: center;
    margin: auto;
}

/* body of the article—VECTOR SPECIFIC */

.vector-body {
    background-color: #ece2d0;
    padding: 2% !important;
    border: 2px solid #272d2d !important;
}

/* body background. hacky as hell. whatever. */

.mw-page-container {
    background-color: #8d6345 !important;
}


/* header with banner */ 

.vector-header-container {
    background-color: #8d6345 !important;
    background-image: url('https://dramachaser.com/images/a/a0/Dummy.gif');
    background-repeat: no-repeat;
    background-position: 50% 50%; 
    height: 230px; 
}

/* links */
a:link { color: #06560e !important; }

a:visited { color: #732e1c !important; }

a:hover { text-decoration: underline !important; }

/* zebra tables */

tr:nth-child(even) { background-color: #f8f4ed; }

tr:nth-child(odd) { background-color: #f1e9dc; }

tr:hover { background-color: #ecd7d0; }

/* cleaning things up */

#mw-teleport-target { display:none; }

/* no more ugly gradients */
.vector-feature-zebra-design-disabled #vector-page-tools-pinned-container .vector-page-tools::after { display: none; }
.vector-feature-zebra-design-disabled #vector-toc-pinned-container .vector-toc::after { display: none; }

/* make the background colour of the left sidebar match everything else */
.vector-feature-zebra-design-disabled .vector-toc { background-color:#ece2d0; }
.vector-feature-zebra-design-disabled #vector-main-menu-pinned-container .vector-main-menu { background-color:#ece2d0; }


/* messing around with episode picker tables; this is very much a wip */

#episodes {
display: grid;
  grid: auto / auto auto auto auto auto;
  gap: 10px;
  background-color: #f1e9dc;
  padding: 10px;
}
  
#episodes div {
  background-color: rgba(255, 255, 255, 0.6);
  text-align: center;
  padding: 10px 0;
  font-size: medium;
  box-shadow: 1px 1px 1px 1px;
}