Difference between revisions of "MediaWiki:Common.css"
From Wildermyth Wiki
(Added background images, changed some other styling things) |
(Fixed left side padding on infoboxes) |
||
(33 intermediate revisions by 3 users not shown) | |||
Line 8: | Line 8: | ||
background-attachment: fixed; | background-attachment: fixed; | ||
background-size: cover; | background-size: cover; | ||
} | |||
h1 { | |||
color: #252525; | |||
} | |||
/* Top navigation header BG */ | |||
#mw-page-base { | |||
background-image: none; | |||
background-color: transparent; | |||
} | } | ||
/* Main content body */ | /* Main content body */ | ||
.skin-vector .mw-body { | |||
background-image: url(images/b/bc/PaperTextureTile.png); | /* background-image: url(/w/images/b/bc/PaperTextureTile.png); */ | ||
margin-right: | margin-right: 1em; | ||
/* border: 1px solid #9a7d5d; */ | |||
background-color: floralwhite; | |||
background-color: transparent; | |||
border: 10px solid transparent; | |||
border-image-source: url(/w/images/lightPanel_600x800.png); | |||
border-image-slice: 10 fill; | |||
border-image-repeat: round; | |||
-webkit-transform: translate3d(0,0,1px); /* Use hardware acceleration, to make scrolling a bit smoother on larger screens when possible */ | |||
} | } | ||
/* Side navigation panel*/ | /* Side navigation panel*/ | ||
#mw-panel { | |||
background-image: url(images/f/fd/TextboxSpeech.png); | background-image: url(images/f/fd/TextboxSpeech.png); | ||
background-size: cover; | background-size: cover; | ||
background-position: right; | background-position: right; | ||
padding-bottom: 1em; | padding-bottom: 1em; | ||
} | |||
/* Specifically for the "Tools" menu on the side panel */ | |||
.vector-menu-portal h3 span { | |||
color: #54595d; | |||
} | } | ||
/* Footer */ | /* Footer */ | ||
footer#footer { | |||
margin-right: | margin-right: 1em; | ||
margin-top: 1em; | |||
padding-bottom: 4em; | |||
background-image: url(images/c/cb/TextboxThought.png); | background-image: url(images/c/cb/TextboxThought.png); | ||
background-size: cover; | background-size: cover; | ||
Line 32: | Line 57: | ||
/* Headers */ | /* Headers */ | ||
h1 { | .mw-body h1 { | ||
font-family: "Alegreya","Linux Libertine",Georgia,Times,serif; | font-family: "Alegreya","Linux Libertine",Georgia,Times,serif; | ||
} | |||
.mw-body h4, .mw-body h5, .mw-body h6 { | |||
color: #5f564d; | |||
} | |||
/* Make the first header bold */ | |||
.mw-body .firstHeading { | |||
font-weight: bold; | |||
} | |||
/* User account actions (in top right corner) */ | |||
.skin-vector #p-personal { | |||
background-image: url(images/c/cb/TextboxThought.png); | |||
background-size: cover; | |||
background-position: bottom; | |||
margin: -0.5em; | |||
padding: 0.5em; | |||
} | |||
/* Top bar navigation tabs (remove backgrounds, colors, etc.) */ | |||
.vector-menu-tabs { | |||
background-image: none; | |||
background-color: transparent; | |||
} | |||
.vector-menu-tabs ul { | |||
background-image: none; | |||
} | |||
.vector-menu-tabs ul li { | |||
background-image: none; | |||
background-color: transparent; | |||
} | |||
.vector-menu-tabs li.selected { | |||
background-image: none; | |||
background-color: #937a60; /* Fallback for browsers that don't support transparency */ | |||
background-color: #faebd726; | |||
} | |||
/* Links (selected) on the top navigation bar */ | |||
.vector-menu-tabs li.selected a, .vector-menu-tabs li.selected a:visited { | |||
color: #eaeaea; | |||
} | |||
/* Links (unvisited) on the top navigation bar */ | |||
.vector-menu-tabs li a { | |||
color: #84b2ff; | |||
} | |||
/* Links (visited) on the top navigation bar */ | |||
.vector-menu-tabs li a:visited { | |||
color: #e48888; | |||
} | |||
/* "More" button text on the top navigation bar */ | |||
.vector-menu h3 span { | |||
color: #e4e4e4; | |||
} | |||
/* Remove link button side bars on the top navigation bar */ | |||
.vector-menu-tabs span { | |||
background-image: none; | |||
} | |||
div#mw-head .vector-menu h3 { | |||
background-image: none; | |||
} | |||
/* "Timeless" wiki skin */ | |||
.skin-timeless #mw-content-container { | |||
background: transparent; | |||
border: none; | |||
} | |||
.skin-timeless .mw-body { | |||
margin-right: 0; | |||
} | |||
/* Main content */ | |||
.skin-timeless #mw-content { | |||
background-color: floralwhite; | |||
background-color: transparent; | |||
border: 10px solid transparent; | |||
border-image-source: url(/w/images/lightPanel_600x800.png); | |||
border-image-slice: 10 fill; | |||
border-image-repeat: round; | |||
border-top-width: 0; | |||
-webkit-transform: translate3d(0,0,1px); /* Use hardware acceleration, to make scrolling a bit smoother on larger screens when possible */ | |||
} | |||
/* For smaller screens, no papery border, go right up to the edges */ | |||
@media screen and (max-width: 1099px) { | |||
.skin-timeless #mw-content { | |||
border-width: 0; | |||
} | |||
/* Reduce margins */ | |||
.skin-timeless .mw-content-ltr dd { | |||
margin-left: 0.5em; | |||
} | |||
} | |||
/* Side bar navigation */ | |||
.skin-timeless #mw-site-navigation .sidebar-chunk, .skin-timeless #mw-related-navigation .sidebar-chunk { | |||
background-color: transparent; | |||
border: none; | |||
padding: 0.2em 0.2em 0; | |||
} | |||
/* Dropdowns (including user information in top-right, and tools and navigation in mobile mode) */ | |||
.skin-timeless .dropdown, .skin-timeless #mw-site-navigation .sidebar-inner, .skin-timeless #personal-inner, .skin-timeless #mw-related-navigation .sidebar-inner { | |||
background-color: transparent; | |||
border: 10px solid transparent; | |||
border-image-source: url(/w/images/buttonRip_192x1_over_lessSaturated.png); | |||
border-image-slice: 18 fill; | |||
border-image-repeat: round; | |||
padding: 10px 1em 0; | |||
} | |||
/* Header */ | |||
.skin-timeless #mw-header-container { | |||
background: transparent; | |||
border: 12px solid transparent; | |||
border-width: 0; | |||
border-image-source: url(/w/images/buttonRip_192x1_over_lessSaturated.png); | |||
border-image-slice: 19 fill; | |||
border-image-repeat: repeat; | |||
} | |||
@media screen and (min-width: 851px) { | |||
.skin-timeless #mw-header-container { | |||
border-bottom-width: 10px; | |||
min-height: 3.9em; | |||
} | |||
} | |||
.skin-timeless .color-middle, .skin-timeless .color-left, .skin-timeless .color-right { | |||
background: transparent; | |||
} | |||
/* Images generally should resize to be smaller if they're wider than the screen */ | |||
img { | |||
max-width:100%; | |||
height: auto; | |||
} | |||
/* Adjust quote, category link, thumbnail, table of contents, and wikitable backgrounds to be slightly-transparent off-white */ | |||
pre, .catlinks, div.thumbinner, #toc, .toc, table.wikitable { | |||
background-color: #eae6db; /* Fallback for browsers that don't support transparency */ | |||
background-color: #f9f9f999; | |||
} | |||
/* Wikitable header */ | |||
table.wikitable tr th { | |||
background-color: #edece7; /* Fallback for browsers that don't support transparency */ | |||
background-color: #f2f2f299; | |||
} | |||
/* Infobox styling */ | |||
.infoboxEvent, .infoboxEquipment, .infoboxAbility, table.floatright.infoboxEvent, table.floatright.infoboxEquipment, table.floatright.infoboxAbility { | |||
width:200px; | |||
border-spacing: 2px; | |||
border:1px solid #BBB; | |||
background-color: #eae6db; /* Fallback for browsers that don't support transparency */ | |||
background-color: #f9f9f999; | |||
text-align:center; | |||
padding:0; | |||
} | |||
.infoboxEvent th { | |||
background: SkyBlue; | |||
} | |||
.infoboxEquipment th { | |||
background: Coral; | |||
} | |||
.infoboxAbility th { | |||
background: MediumSeaGreen; | |||
} | |||
/* Diff styling */ | |||
td.diff-deletedline, td.diff-addedline, table.diff { | |||
background-color: #ffffff; | |||
} | |||
/* Centered columns for tables */ | |||
table.col-1-center td:nth-child(1) { text-align: center; } | |||
table.col-2-center td:nth-child(2) { text-align: center; } | |||
table.col-3-center td:nth-child(3) { text-align: center; } | |||
table.col-4-center td:nth-child(4) { text-align: center; } | |||
table.col-5-center td:nth-child(5) { text-align: center; } | |||
table.col-6-center td:nth-child(6) { text-align: center; } | |||
table.col-7-center td:nth-child(7) { text-align: center; } | |||
table.col-8-center td:nth-child(8) { text-align: center; } | |||
table.col-9-center td:nth-child(9) { text-align: center; } | |||
table.col-1-right td:nth-child(1) { text-align: right; } | |||
table.col-2-right td:nth-child(2) { text-align: right; } | |||
table.col-3-right td:nth-child(3) { text-align: right; } | |||
table.col-4-right td:nth-child(4) { text-align: right; } | |||
table.col-5-right td:nth-child(5) { text-align: right; } | |||
table.col-6-right td:nth-child(6) { text-align: right; } | |||
table.col-7-right td:nth-child(7) { text-align: right; } | |||
table.col-8-right td:nth-child(8) { text-align: right; } | |||
table.col-9-right td:nth-child(9) { text-align: right; } | |||
/* Invert ability icons from light to dark */ | |||
.img--invert { | |||
filter: invert(100%); | |||
-webkit-filter: invert(100%); | |||
} | |||
/* Ability tooltip styling */ | |||
.tooltip-ability { | |||
width:500px; | |||
border-spacing: 0; | |||
border-collapse: collapse; | |||
font-size: 1.1em; | |||
} | |||
.tooltip-ability td { | |||
padding: 0; | |||
} | |||
.tooltip-ability__action-points { | |||
color: white; | |||
background-color: #9E9083; | |||
padding: 4px 10px 4px 10px; | |||
} | |||
.tooltip-ability__details { | |||
background-color: #E3D5BA; | |||
line-height: 1.2em; | |||
} | |||
.tooltip-ability__details p { | |||
padding: 0 5px 0 10px; | |||
} | |||
.tooltip-ability__name { | |||
font-size: 1.3em; | |||
font-weight: bold; | |||
} | |||
.tooltip-ability__formula { | |||
color: #555555; /* 5:1 Contrast ratio */ | |||
font-style: italic; | |||
} | |||
.tooltip-ability__status-effect { | |||
color: #834433; /* 5:1 Contrast ratio */ | |||
font-weight: bold; | |||
} | |||
/* Default style for navigation boxes */ | |||
/* Revision of import is //en.wikipedia.org/w/index.php?title=MediaWiki:Common.css&oldid=588108879 */ | |||
.navbox { /* Navbox container style */ | |||
border: 1px solid #a2a9b1; | |||
width: 100%; | |||
margin: auto; | |||
clear: both; | |||
font-size: 88%; | |||
text-align: center; | |||
padding: 1px; | |||
} | |||
.navbox-inner, | |||
.navbox-subgroup { | |||
width: 100%; | |||
} | |||
.navbox-group, | |||
.navbox-title, | |||
.navbox-abovebelow { | |||
padding: 0.25em 1em; /* Title, group and above/below styles */ | |||
line-height: 1.5em; | |||
text-align: center; | |||
} | |||
th.navbox-group { /* Group style */ | |||
white-space: nowrap; | |||
/* @noflip */ | |||
text-align: right; | |||
} | |||
.navbox, | |||
.navbox-subgroup { | |||
background: #fdfdfd; /* Background color */ | |||
} | |||
.navbox-list { | |||
line-height: 1.8em; | |||
border-color: #fdfdfd; /* Must match background color */ | |||
} | |||
.navbox th, | |||
.navbox-title { | |||
background: #ccccff; /* Level 1 color */ | |||
} | |||
.navbox-abovebelow, | |||
th.navbox-group, | |||
.navbox-subgroup .navbox-title { | |||
background: #ddddff; /* Level 2 color */ | |||
} | |||
.navbox-subgroup .navbox-group, | |||
.navbox-subgroup .navbox-abovebelow { | |||
background: #e6e6ff; /* Level 3 color */ | |||
} | |||
.navbox-even { | |||
background: #f7f7f7; /* Even row striping */ | |||
} | |||
.navbox-odd { | |||
background: transparent; /* Odd row striping */ | |||
} | |||
table.navbox + table.navbox { /* Single pixel border between adjacent navboxes */ | |||
margin-top: -1px; /* (doesn't work for IE6, but that's okay) */ | |||
} | |||
.navbox .hlist td dl, | |||
.navbox .hlist td ol, | |||
.navbox .hlist td ul, | |||
.navbox td.hlist dl, | |||
.navbox td.hlist ol, | |||
.navbox td.hlist ul { | |||
padding: 0.125em 0; /* Adjust hlist padding in navboxes */ | |||
} | |||
ol + table.navbox, | |||
ul + table.navbox { | |||
margin-top: 0.5em; /* Prevent lists from clinging to navboxes */ | |||
} | |||
/* Prevent line breaks in silly places where desired (nowrap) | |||
and links when we don't want them to (nowraplinks a) */ | |||
.nowrap, | |||
.nowraplinks a { | |||
white-space: nowrap; | |||
} | |||
/* But allow wrapping where desired: */ | |||
.wrap, | |||
.wraplinks a { | |||
white-space: normal; | |||
} | } |
Revision as of 12:38, 21 March 2023
/* CSS placed here will be applied to all skins */
@import url('https://fonts.googleapis.com/css?family=Alegreya:400,700&display=swap');
/* Background image */
body {
background-image: url(images/5/58/CreditsBG.jpg);
background-attachment: fixed;
background-size: cover;
}
h1 {
color: #252525;
}
/* Top navigation header BG */
#mw-page-base {
background-image: none;
background-color: transparent;
}
/* Main content body */
.skin-vector .mw-body {
/* background-image: url(/w/images/b/bc/PaperTextureTile.png); */
margin-right: 1em;
/* border: 1px solid #9a7d5d; */
background-color: floralwhite;
background-color: transparent;
border: 10px solid transparent;
border-image-source: url(/w/images/lightPanel_600x800.png);
border-image-slice: 10 fill;
border-image-repeat: round;
-webkit-transform: translate3d(0,0,1px); /* Use hardware acceleration, to make scrolling a bit smoother on larger screens when possible */
}
/* Side navigation panel*/
#mw-panel {
background-image: url(images/f/fd/TextboxSpeech.png);
background-size: cover;
background-position: right;
padding-bottom: 1em;
}
/* Specifically for the "Tools" menu on the side panel */
.vector-menu-portal h3 span {
color: #54595d;
}
/* Footer */
footer#footer {
margin-right: 1em;
margin-top: 1em;
padding-bottom: 4em;
background-image: url(images/c/cb/TextboxThought.png);
background-size: cover;
}
/* Headers */
.mw-body h1 {
font-family: "Alegreya","Linux Libertine",Georgia,Times,serif;
}
.mw-body h4, .mw-body h5, .mw-body h6 {
color: #5f564d;
}
/* Make the first header bold */
.mw-body .firstHeading {
font-weight: bold;
}
/* User account actions (in top right corner) */
.skin-vector #p-personal {
background-image: url(images/c/cb/TextboxThought.png);
background-size: cover;
background-position: bottom;
margin: -0.5em;
padding: 0.5em;
}
/* Top bar navigation tabs (remove backgrounds, colors, etc.) */
.vector-menu-tabs {
background-image: none;
background-color: transparent;
}
.vector-menu-tabs ul {
background-image: none;
}
.vector-menu-tabs ul li {
background-image: none;
background-color: transparent;
}
.vector-menu-tabs li.selected {
background-image: none;
background-color: #937a60; /* Fallback for browsers that don't support transparency */
background-color: #faebd726;
}
/* Links (selected) on the top navigation bar */
.vector-menu-tabs li.selected a, .vector-menu-tabs li.selected a:visited {
color: #eaeaea;
}
/* Links (unvisited) on the top navigation bar */
.vector-menu-tabs li a {
color: #84b2ff;
}
/* Links (visited) on the top navigation bar */
.vector-menu-tabs li a:visited {
color: #e48888;
}
/* "More" button text on the top navigation bar */
.vector-menu h3 span {
color: #e4e4e4;
}
/* Remove link button side bars on the top navigation bar */
.vector-menu-tabs span {
background-image: none;
}
div#mw-head .vector-menu h3 {
background-image: none;
}
/* "Timeless" wiki skin */
.skin-timeless #mw-content-container {
background: transparent;
border: none;
}
.skin-timeless .mw-body {
margin-right: 0;
}
/* Main content */
.skin-timeless #mw-content {
background-color: floralwhite;
background-color: transparent;
border: 10px solid transparent;
border-image-source: url(/w/images/lightPanel_600x800.png);
border-image-slice: 10 fill;
border-image-repeat: round;
border-top-width: 0;
-webkit-transform: translate3d(0,0,1px); /* Use hardware acceleration, to make scrolling a bit smoother on larger screens when possible */
}
/* For smaller screens, no papery border, go right up to the edges */
@media screen and (max-width: 1099px) {
.skin-timeless #mw-content {
border-width: 0;
}
/* Reduce margins */
.skin-timeless .mw-content-ltr dd {
margin-left: 0.5em;
}
}
/* Side bar navigation */
.skin-timeless #mw-site-navigation .sidebar-chunk, .skin-timeless #mw-related-navigation .sidebar-chunk {
background-color: transparent;
border: none;
padding: 0.2em 0.2em 0;
}
/* Dropdowns (including user information in top-right, and tools and navigation in mobile mode) */
.skin-timeless .dropdown, .skin-timeless #mw-site-navigation .sidebar-inner, .skin-timeless #personal-inner, .skin-timeless #mw-related-navigation .sidebar-inner {
background-color: transparent;
border: 10px solid transparent;
border-image-source: url(/w/images/buttonRip_192x1_over_lessSaturated.png);
border-image-slice: 18 fill;
border-image-repeat: round;
padding: 10px 1em 0;
}
/* Header */
.skin-timeless #mw-header-container {
background: transparent;
border: 12px solid transparent;
border-width: 0;
border-image-source: url(/w/images/buttonRip_192x1_over_lessSaturated.png);
border-image-slice: 19 fill;
border-image-repeat: repeat;
}
@media screen and (min-width: 851px) {
.skin-timeless #mw-header-container {
border-bottom-width: 10px;
min-height: 3.9em;
}
}
.skin-timeless .color-middle, .skin-timeless .color-left, .skin-timeless .color-right {
background: transparent;
}
/* Images generally should resize to be smaller if they're wider than the screen */
img {
max-width:100%;
height: auto;
}
/* Adjust quote, category link, thumbnail, table of contents, and wikitable backgrounds to be slightly-transparent off-white */
pre, .catlinks, div.thumbinner, #toc, .toc, table.wikitable {
background-color: #eae6db; /* Fallback for browsers that don't support transparency */
background-color: #f9f9f999;
}
/* Wikitable header */
table.wikitable tr th {
background-color: #edece7; /* Fallback for browsers that don't support transparency */
background-color: #f2f2f299;
}
/* Infobox styling */
.infoboxEvent, .infoboxEquipment, .infoboxAbility, table.floatright.infoboxEvent, table.floatright.infoboxEquipment, table.floatright.infoboxAbility {
width:200px;
border-spacing: 2px;
border:1px solid #BBB;
background-color: #eae6db; /* Fallback for browsers that don't support transparency */
background-color: #f9f9f999;
text-align:center;
padding:0;
}
.infoboxEvent th {
background: SkyBlue;
}
.infoboxEquipment th {
background: Coral;
}
.infoboxAbility th {
background: MediumSeaGreen;
}
/* Diff styling */
td.diff-deletedline, td.diff-addedline, table.diff {
background-color: #ffffff;
}
/* Centered columns for tables */
table.col-1-center td:nth-child(1) { text-align: center; }
table.col-2-center td:nth-child(2) { text-align: center; }
table.col-3-center td:nth-child(3) { text-align: center; }
table.col-4-center td:nth-child(4) { text-align: center; }
table.col-5-center td:nth-child(5) { text-align: center; }
table.col-6-center td:nth-child(6) { text-align: center; }
table.col-7-center td:nth-child(7) { text-align: center; }
table.col-8-center td:nth-child(8) { text-align: center; }
table.col-9-center td:nth-child(9) { text-align: center; }
table.col-1-right td:nth-child(1) { text-align: right; }
table.col-2-right td:nth-child(2) { text-align: right; }
table.col-3-right td:nth-child(3) { text-align: right; }
table.col-4-right td:nth-child(4) { text-align: right; }
table.col-5-right td:nth-child(5) { text-align: right; }
table.col-6-right td:nth-child(6) { text-align: right; }
table.col-7-right td:nth-child(7) { text-align: right; }
table.col-8-right td:nth-child(8) { text-align: right; }
table.col-9-right td:nth-child(9) { text-align: right; }
/* Invert ability icons from light to dark */
.img--invert {
filter: invert(100%);
-webkit-filter: invert(100%);
}
/* Ability tooltip styling */
.tooltip-ability {
width:500px;
border-spacing: 0;
border-collapse: collapse;
font-size: 1.1em;
}
.tooltip-ability td {
padding: 0;
}
.tooltip-ability__action-points {
color: white;
background-color: #9E9083;
padding: 4px 10px 4px 10px;
}
.tooltip-ability__details {
background-color: #E3D5BA;
line-height: 1.2em;
}
.tooltip-ability__details p {
padding: 0 5px 0 10px;
}
.tooltip-ability__name {
font-size: 1.3em;
font-weight: bold;
}
.tooltip-ability__formula {
color: #555555; /* 5:1 Contrast ratio */
font-style: italic;
}
.tooltip-ability__status-effect {
color: #834433; /* 5:1 Contrast ratio */
font-weight: bold;
}
/* Default style for navigation boxes */
/* Revision of import is //en.wikipedia.org/w/index.php?title=MediaWiki:Common.css&oldid=588108879 */
.navbox { /* Navbox container style */
border: 1px solid #a2a9b1;
width: 100%;
margin: auto;
clear: both;
font-size: 88%;
text-align: center;
padding: 1px;
}
.navbox-inner,
.navbox-subgroup {
width: 100%;
}
.navbox-group,
.navbox-title,
.navbox-abovebelow {
padding: 0.25em 1em; /* Title, group and above/below styles */
line-height: 1.5em;
text-align: center;
}
th.navbox-group { /* Group style */
white-space: nowrap;
/* @noflip */
text-align: right;
}
.navbox,
.navbox-subgroup {
background: #fdfdfd; /* Background color */
}
.navbox-list {
line-height: 1.8em;
border-color: #fdfdfd; /* Must match background color */
}
.navbox th,
.navbox-title {
background: #ccccff; /* Level 1 color */
}
.navbox-abovebelow,
th.navbox-group,
.navbox-subgroup .navbox-title {
background: #ddddff; /* Level 2 color */
}
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
background: #e6e6ff; /* Level 3 color */
}
.navbox-even {
background: #f7f7f7; /* Even row striping */
}
.navbox-odd {
background: transparent; /* Odd row striping */
}
table.navbox + table.navbox { /* Single pixel border between adjacent navboxes */
margin-top: -1px; /* (doesn't work for IE6, but that's okay) */
}
.navbox .hlist td dl,
.navbox .hlist td ol,
.navbox .hlist td ul,
.navbox td.hlist dl,
.navbox td.hlist ol,
.navbox td.hlist ul {
padding: 0.125em 0; /* Adjust hlist padding in navboxes */
}
ol + table.navbox,
ul + table.navbox {
margin-top: 0.5em; /* Prevent lists from clinging to navboxes */
}
/* Prevent line breaks in silly places where desired (nowrap)
and links when we don't want them to (nowraplinks a) */
.nowrap,
.nowraplinks a {
white-space: nowrap;
}
/* But allow wrapping where desired: */
.wrap,
.wraplinks a {
white-space: normal;
}