MediaWiki:Common.css

From Epic Path
Jump to navigation Jump to search

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* CSS placed here will be applied to all skins */

/* removes header on main page */
body.page-Epic_Path.action-view h1.firstHeading, body.page-Epic_Path.action-submit h1.firstHeading { display: none; }

/* removes bottom border of h2 on main page */
body.page-Epic_Path.action-view h2, body.page-Epic_Path.action-submit h2 {
    color: #584500;
    font-family: Stonehenge;
    font-size: 225%;
    font-weight: bold;
    border-bottom-style: none;
    clear: both; 
}

/* removes redirected from main page message from main page */
.page-Epic_Path #contentSub { display: none }

.topbanner img {
    max-width: 100%;
    height: auto;
    width: auto\9;
}

h1.firstHeading {
    color: #584500;
    font-family: Stonehenge;
    font-size: 225%;
    font-weight: bold;
    border-bottom-style: solid;
    border-bottom-color: #584500;
}

h1 {
    color: #584500;
    font-family: Stonehenge;
    font-size: 225%;
    font-weight: bold;
    border-bottom-style: solid;
    border-bottom-color: #584500;
}

h2 {
    color: #584500;
    font-family: Stonehenge;
    font-size: 200%;
    font-weight: bold;
    border-bottom-style: solid;
    border-bottom-color: #584500;
}

h3 {
    color: #584500;
    font-weight: bold;
    font-size: 175%;
}

h4 {
    font-weight: bold;
    font-size: 150%;
    color: #584500;
}

h5 {
    font-weight: bold;
    font-size: 125%;
    color: #584500;
}

h6 {
    font-weight: bold;
    font-size: 125%; 
    color: #000000;
}


@font-face {
    font-family: 'Ferrum';
    src: url("/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Ferrum/Ferrum.otf");
    src: local('Ferrum.otf'), 
         url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Ferrum/Ferrum.otf') format('opentype'),
}

.ferrum {
    font-family: 'MarcellusSC';
}

@font-face {
    font-family: 'MarcellusSC';
    src: url("/extensions/UniversalLanguageSelector/data/fontrepo/fonts/MarcellusSC/MarcellusSC.ttf");
    src: local('MarcellusSC.ttf'), 
         url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/MarcellusSC/MarcellusSC.ttf') format('truetype'),
}

.marcellus {
    font-family: 'MarcellusSC';
}

@font-face {
    font-family: 'Stonehenge';
    src: url("/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Stonehenge/Stonehenge.ttf");
    src: local('Stonehenge.ttf'), 
         url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Stonehenge/Stonehenge.ttf') format('truetype'),
}

.stonehenge {
    font-family: 'Stonehenge';
}

@font-face {
    font-family: 'Ringbearer';
    src: url("/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Ringbearer/Ringbearer.ttf");
    src: local('Ringbearer.ttf'), 
         url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Ringbearer/Ringbearer.ttf') format('truetype'),
}

.ringbearer {
    font-family: 'Ringbearer';
}

@font-face {
    font-family: 'Alex Brush';
    src: url("/extensions/UniversalLanguageSelector/data/fontrepo/fonts/AlexBrush/AlexBrush-Regular.ttf");
    src: local('AlexBrush-Regular.ttf'), 
         url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/AlexBrush/AlexBrush-Regular.ttf') format('truetype'),
         url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/AlexBrush/AlexBrush-Regular.woff') format('woff'); 
         url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/AlexBrush/AlexBrush-Regular.woff2') format('woff2'); 
}

.alexbrush {
    font-family: 'Alex Brush';
}

@font-face {
    font-family: 'Bilbo Swash Caps';
    src: url("/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Bilbo_Swash_Caps/BilboSwashCaps-Regular.ttf");
    src: local('BilboSwashCaps-Regular.ttf'), 
         url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Bilbo_Swash_Caps/BilboSwashCaps-Regular.ttf') format('truetype'),
         url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Bilbo_Swash_Caps/BilboSwashCaps-Regular.woff') format('woff'); 
         url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Bilbo_Swash_Caps/BilboSwashCaps-Regular.woff2') format('woff2'); 
}

.bilbosc {
    font-family: 'Bilbo Swash Caps';
}

@font-face {
    font-family: 'Stonecross';
    src: url("/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Stonecross/stonecross.ttf");
    src: local('stonecross.ttf'), 
         url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Stonecross/stonecross.ttf') format('truetype'),
         url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Stonecross/stonecross.woff') format('woff'); 
         url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Stonecross/stonecross.woff2') format('woff2'); 
}

.stonecross {
    font-family: 'Stonecross';
}

@font-face {
    font-family: 'Fondamento';
    src: url("/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Fondamento/Fondamento-Regular.ttf");
    src: local('Fondamento-Regular.ttf'), 
         url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Fondamento/Fondamento-Regular.ttf') format('truetype'),
         url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Fondamento/Fondamento-Regular.woff') format('woff'); 
         url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Fondamento/Fondamento-Regular.woff2') format('woff2'); 
}

.fondamento {
    font-family: 'Fondamento';
}



/* Give a bit of space to the TOC */
#toc {
	margin: 10px 0;
}

/*
 * Allow limiting of which header levels are shown in a TOC;
 * <div class="toclimit-3">, for instance, will limit to
 * showing ==headings== and ===headings=== but no further.
 * Used in [[Template:TOC]]
 */
.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul,
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul {
	display: none;
}


/* Table Formatting - Standard */
.ep-default {box-shadow: 4px 4px 4px #8c775c;}

.ep-default th, .ep-default td {
   border: 1px solid #000;
   padding: 2px 5px 2px 5px;
}

.ep-default tr {background-color: #EBE7D2;}

.ep-default tr:nth-child(even) {background-color: #FFFBE6;}

.ep-default th {
   background-image: -moz-linear-gradient(top, #BB8E53, #FFEC8D); 
   background-image: -o-linear-gradient(top, #BB8E53, #FFEC8D);
   background-image: -webkit-linear-gradient(top, #BB8E53, #FFEC8D);
   background-image: linear-gradient(top, #BB8E53, #FFEC8D);
   color: #000;
}

/* Table Formatting - No Default Header Colors */
.ep-default2 {box-shadow: 4px 4px 4px #8c775c;}

.ep-default2 th, .ep-default2 td {
   border: 1px solid #000;
   padding: 2px 5px 2px 5px;
}

.ep-default2 tr {background-color: #EBE7D2;}

.ep-default2 tr:nth-child(even) {background-color: #FFFBE6;}



/* Background Colors */
/* Main content panel */
#content {
     background-color: #F2ECCE;
}

/* Logo Space */
#p-logo {
     background-color: #FFFBE6; 
/*     margin-left: -6px;  */
/*     width: 130px;       */
}

#p-logo a,
#p-logo a:hover {
     display: block;
     text-decoration: none;
}

/* Top of screen */
#mw-head {
     background-color: #FFFBE6; 
}

/* Sidebar */
#mw-panel {
     background-color: #FFFBE6; 
}

/* Bottom of screen */
#footer {
     background-color: #FFFBE6; 
}

/* Categories pane */
#catlinks {
     background-color: #FFFBE6; 
}

#mw-page-base { 
     background-color: #FFFBE6; 
}

/* Everywhere else */
body { 
     background-color: #FFFBE6; 
}



/* Mobile-Friendly Two Column Display (Full Page)*/
#page-2column-left {
    float: left;
    width: 49%;
}
#page-2column-right {
    float: right;
    width: 49%;
}
@media only screen and (max-width: 850px) {
    /* Decouple the columns on narrow screens */
    #page-2column-left,
    #page-2column-right {
        float: inherit;
        width: inherit;
    }
}



/* Responsive Columns on Main Page */
.section-content {
    box-sizing: border-box;
}

.columns {
    -moz-column-width: 200px; /* Firefox */
    -webkit-column-width: 200px; /* webkit, Safari, Chrome */
    column-width: 200px; 
    margin-right: 2px;
}

.columns ul {
    list-style-type: none;
    white-space: nowrap;
}

.columns2 {
    -moz-column-width: 35px; /* Firefox */
    -webkit-column-width: 35px; /* webkit, Safari, Chrome */
    column-width: 35px; 
    margin-right: 2px;
}

.columns2 ul {
    list-style-type: none;
    white-space: nowrap;
}

.clear {
   clear: left;
   height: 1px;
   margin-top: -1px;
}


/* Bestiary Header Formatting */
h2.bestiary_main {
    color: #584500;
    font-family: Stonehenge;
    font-size: 250%;
    font-weight: bold;
    text-align: center;
    border-bottom-style: none;
}

h2.bestiary {
    color: #584500;
    font-family: Stonehenge;
    font-size: 200%;
    font-weight: bold;
    border-bottom-style: none;
}

h3.bestiary {
    color: #584500;
    font-weight: bold;
    font-size: 125%;
    border-bottom-style: none;
}

/* Trap Header Formatting */
h2.trap_main {
    color: #232c71;
    font-family: Stonehenge;
    font-size: 250%;
    font-weight: bold;
    text-align: center;
    border-bottom-style: none;
}

h2.trap {
    color: #232c71;
    font-family: Stonehenge;
    font-size: 200%;
    font-weight: bold;
    border-bottom-style: none;
}

h3.trap {
    color: #232c71;
    font-weight: bold;
    font-size: 125%;
    border-bottom-style: none;
}


/* CSS for Point Buy Calculator */

input.ptby[type="number"] {
 width: 3em;
}

table.ptby {
 text-align: center;
 background-color: #F2ECCE;
}
table.ptby tr {
 background-color: #fffbe6;
}
table.ptby tr:nth-child(2n) {
 background-color: #ebe7d2;
}
table.ptby th, table.ptby td {
 border: 1px solid black;
 padding: 5px;
}

div.ptby-rowflex {
 flex-flow: row wrap;
 align-items: flex-start;
 display: flex;
 justify-content: space-between;
 position: fixed;
 top: 0;
 left: 0;
 width: 90vw;
}

div.ptby-rowflex > div, div.ptby-rowflex > table {
 flex: 0 0 auto;
}

div.ptby-rowflex > div {
 text-align: right;
}

div.ptby-colflex {
 display: flex;
 flex-flow: column nowrap;
 justify-content: space-around;
 min-height: 15em;
}

div.ptby-colflex > div {
 flex: 0 0 auto;
}

.ptby-bold {
 font-weight: bold;
}