MediaWiki:Common.css

From Wildermyth Wiki
Revision as of 23:22, 15 November 2022 by Pbelanger (talk | contribs) (First attempt at implementing styling for the "Timeless" wiki skin (all currently specifically bound to the .skin-timeless class, so it shouldn't affect the Vector skin styling))

Note: After saving, 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 */

@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;
    }
}

/* 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;
}

.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;
}