MediaWiki:Mobile.css: Difference between revisions
Jump to navigation
Jump to search
(Created page with "→CSS placed here will affect users of the mobile site: →Main content panel: #content { background-color: #F2ECCE; } →Top of screen: #mw-head-base { ba...") |
No edit summary |
||
(3 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
/* CSS placed here will | /* 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: fondamento; font-weight: 600; font-size: 2em; padding: 2em 0.2em 0em 0em; border-bottom-style: none; clear: both; } | |||
/* removes redirected from main page message from main page */ | |||
.page-Epic_Path #contentSub { display: none } | |||
h1 { | |||
color: #584500; | |||
font-size: 2em; | |||
border-bottom-style: solid; | |||
border-bottom-color: #584500; | |||
} | |||
h2 { | |||
color: #584500; | |||
font-size: 2em; | |||
border-bottom-style: solid; | |||
border-bottom-color: #584500; | |||
} | |||
h3 { | |||
color: #584500; | |||
font-size: 2em; | |||
} | |||
h4 { | |||
color: #584500; | |||
} | |||
h5 { | |||
color: #584500; | |||
} | |||
h6 { | |||
color: #000000; | |||
} | |||
@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: 1em 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 th, .ep-default td { | |||
border: 1px solid #000; | |||
padding: 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; | |||
font-size: 110%; | |||
} | |||
/* Table Formatting - No Default Header Colors */ | |||
.ep-default2 th, .ep-default2 td { | |||
border: 1px solid #000; | |||
padding: 5px; | |||
} | |||
.ep-default2 tr {background-color: #EBE7D2;} | |||
.ep-default2 tr:nth-child(even) {background-color: #FFFBE6;} | |||
.ep-default2 th { | |||
font-size: 110%; | |||
} | |||
/* Background Colors */ | |||
/* Main content panel */ | /* Main content panel */ | ||
#content { | #content { | ||
background-color: #F2ECCE; | background-color: #F2ECCE; | ||
} | } | ||
/* | /* Logo Space */ | ||
# | #p-logo { | ||
background-color: #FFFBE6; | 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; | background-color: #FFFBE6; | ||
} | } | ||
Line 30: | Line 190: | ||
background-color: #FFFBE6; | background-color: #FFFBE6; | ||
} | } | ||
#mw-page-base { | |||
background-color: #FFFBE6; | |||
} | |||
/* Everywhere else */ | /* Everywhere else */ | ||
body { | body { | ||
background-color: #FFFBE6; | background-color: #FFFBE6; | ||
} | |||
/* Mobile-Friendly Two Column Display (Full Page)*/ | |||
#page-2column-left { | |||
float: left; | |||
width: 48%; | |||
} | |||
#page-2column-right { | |||
float: right; | |||
width: 48%; | |||
} | |||
@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: 16em; /* Firefox */ | |||
-webkit-column-width: 16em; /* webkit, Safari, Chrome */ | |||
column-width: 16em; | |||
margin-right: 2px; | |||
} | |||
.columns ul { | |||
white-space: nowrap; | |||
} | |||
.clear { | |||
clear: left; | |||
height: 1px; | |||
margin-top: -1px; | |||
} | |||
/* Bestiary Header Formatting */ | |||
h2.bestiary_main { | |||
color: #584500; | |||
font-family: fondamento; | |||
font-weight: 600; | |||
font-size: 2.5em; | |||
padding: 2px; | |||
text-align: center; | |||
border-bottom-style: solid; | |||
border-bottom-color: #584500; | |||
} | |||
h2.bestiary { | |||
color: #584500; | |||
font-weight: bold; | |||
font-size: 2em; | |||
padding: 2em 0.2em 0.2em 0em; | |||
border-bottom-style: none; | |||
} | |||
h3.bestiary { | |||
color: #000000; | |||
font-weight: bold; | |||
font-size: 1.75em; | |||
padding-top: 2em 0.2em 0.2em 0em; | |||
border-bottom-style: none; | |||
} | } |
Latest revision as of 22:35, 11 September 2017
/* 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: fondamento; font-weight: 600; font-size: 2em; padding: 2em 0.2em 0em 0em; border-bottom-style: none; clear: both; }
/* removes redirected from main page message from main page */
.page-Epic_Path #contentSub { display: none }
h1 {
color: #584500;
font-size: 2em;
border-bottom-style: solid;
border-bottom-color: #584500;
}
h2 {
color: #584500;
font-size: 2em;
border-bottom-style: solid;
border-bottom-color: #584500;
}
h3 {
color: #584500;
font-size: 2em;
}
h4 {
color: #584500;
}
h5 {
color: #584500;
}
h6 {
color: #000000;
}
@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: 1em 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 th, .ep-default td {
border: 1px solid #000;
padding: 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;
font-size: 110%;
}
/* Table Formatting - No Default Header Colors */
.ep-default2 th, .ep-default2 td {
border: 1px solid #000;
padding: 5px;
}
.ep-default2 tr {background-color: #EBE7D2;}
.ep-default2 tr:nth-child(even) {background-color: #FFFBE6;}
.ep-default2 th {
font-size: 110%;
}
/* 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: 48%;
}
#page-2column-right {
float: right;
width: 48%;
}
@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: 16em; /* Firefox */
-webkit-column-width: 16em; /* webkit, Safari, Chrome */
column-width: 16em;
margin-right: 2px;
}
.columns ul {
white-space: nowrap;
}
.clear {
clear: left;
height: 1px;
margin-top: -1px;
}
/* Bestiary Header Formatting */
h2.bestiary_main {
color: #584500;
font-family: fondamento;
font-weight: 600;
font-size: 2.5em;
padding: 2px;
text-align: center;
border-bottom-style: solid;
border-bottom-color: #584500;
}
h2.bestiary {
color: #584500;
font-weight: bold;
font-size: 2em;
padding: 2em 0.2em 0.2em 0em;
border-bottom-style: none;
}
h3.bestiary {
color: #000000;
font-weight: bold;
font-size: 1.75em;
padding-top: 2em 0.2em 0.2em 0em;
border-bottom-style: none;
}