MediaWiki:Fandomdesktop.css
Jump to navigation
Jump to search
CSS and Javascript changes must comply with the wiki design rules.
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: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Clear the cache in Tools → Preferences
/* CSS placed here will affect users of the Fandomdesktop skin */
/* Fonts */
@font-face {
font-family: 'Franklin Gothic';
}
/* Prevent automatic font-size resizing for bigger screens */
@media only screen and (min-width: 1500px) {
body {
font-size: 14px;
}
}
@media only screen and (min-width: 1024px) {
html:not(.ve-activated) .page.has-right-rail .page__right-rail.is-rail-hidden {
width: 0px;
}
}
/* For elements which only display in the mobile view */
.mobileonly {
display: none;
}
/*ThemeDesigner Over-rides*/
.theme-fandomdesktop-dark {
--theme-page-background-color--secondary: #231f36;
--fandom-global-nav-background-color: #272340;
--fandom-global-nav-text-color: #fff;
--fandom-global-nav-link-color: #ffc500;
--fandom-global-nav-link-color--hover: #997600;
--fandom-global-nav-icon-color: #f5f3f5;
--fandom-global-nav-icon-background-color: rgba(89,83,88,0.5);
--fandom-global-nav-icon-background-color--hover: #595358;
--fandom-global-nav-icon-background-color--active: #595358;
--fandom-global-nav-icon-border-color: #f5f3f5;
--fandom-global-nav-icon-border-color--hover: hsla(0,0%,100%,0.5);
--fandom-global-nav-icon-border-color--active: #f5f3f5;
--fandom-global-nav-bottom-icon-color: #f5f3f5;
--fandom-global-nav-counter-background-color: #f5f3f5;
--fandom-global-nav-counter-label-color: #520044;
--fandom-global-nav-mobile-logo: url(https://stoneshard.fandom.com/resources-ucp/dist/svg/wds-brand-fandom-logo-light.svg);
--fandom-global-nav-search-active-link-background-color: #595358;
--fandom-global-nav-search-active-link-border-color: #fff;
}
.theme-fandomdesktop-light {
--theme-body-text-color: #000000;
--theme-page-text-color: #000000;
}
/* Generic wiki looks */
html,
body,
body.skin-fandomdesktop {
font-family: sans-serif;
}
.page-content p {
margin: 0;
}
.page-content p+ol,
.page-content p+ul,
.page-content section+ol,
.page-content section+ul {
margin-top: 0;
}
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6 {
display:block;
}
.theme-fandomdesktop-light .page {
border-image: url(https://static.wikia.nocookie.net/stoneshard_gamepedia_en/images/4/4a/Content_border_light.jpg/revision/latest) 24 fill round;
}
.theme-fandomdesktop-dark .page {
border-image: url(https://static.wikia.nocookie.net/stoneshard_gamepedia_en/images/6/6a/Content_border.jpg/revision/latest) 24 fill round;
}
.theme-fandomdesktop-dark #filetoc,
.theme-fandomdesktop-dark .ambox,
.theme-fandomdesktop-dark code,
.theme-fandomdesktop-dark .mw-notification {
background-color: var(--theme-accent-color);
}
.theme-fandomdesktop-dark .page__right-rail,
.theme-fandomdesktop-dark .rail-module {
background-color: var(--theme-page-background-color);
}
.theme-fandomdesktop-light #filetoc,
.theme-fandomdesktop-light .ambox,
.theme-fandomdesktop-light code,
.theme-fandomdesktop-light .mw-notification {
background-color: var(--theme-accent-color);
}
.theme-fandomdesktop-light .page__right-rail,
.theme-fandomdesktop-light .rail-module {
background-color: var(--theme-page-background-color);
}
/* Fix text color and X-icon color in "edit saved" notification on dark theme */
.theme-fandomdesktop-dark .postedit-container {
color: var(--theme-page-text-color);
}
.theme-fandomdesktop-dark .postedit:after {
filter: invert(100%);
}
.page {
border-width: 24px;
border-style: solid;
}
.page__main {
padding: 0 30px 0 30px;
}
.is-rail-hidden .right-rail-toggle {
right: -17px;
}
.right-rail-toggle {
right: -18px;
}
.page-header,
.page__main h2 {
border-color: #9c9c9c;
border-bottom: 2px solid;
padding: 0;
margin-bottom: 10px;
}
.page__main h1,
.page__main h2 {
font-family: 'Franklin Gothic';
}
/* file menu bar bg*/
#filetoc {
border: 0;
font-size: 100%;
}
fieldset {
border: 1px solid #2a4b8d;
margin: 1em 0 1em 0;
padding: 0 1em 1em;
}
code {
font-family: monospace;
border: 2px solid black;
padding: 1px 4px;
}
/* front page title removal */
.page-Stoneshard_Wiki .page-header {
border-bottom: 0;
}
.page-Stoneshard_Wiki .page-header__bottom {
height: 10px;
justify-content: flex-end;
}
.page-Stoneshard_Wiki .page-header__title-wrapper {
display: none;
}
.page-Stoneshard_Wiki .page-header__actions {
position: relative;
left: 50px;
top: -1.8em;
}
/* old front page styles */
.fpbox .heading,
.fpbox .mainheading {
border: 0;
border-bottom: 2px solid #9c9c9c;
font-family: 'Franklin Gothic';
text-transform: uppercase;
font-size: 18px;
letter-spacing: 1px;
}
.theme-fandomdesktop-dark .fpbox {
background: #161527;
}
.theme-fandomdesktop-light .fpbox {
background: var(--theme-accent-color);
}
.fpbox {
border: 2px solid #000;
}
.fplink {
background-color: rgba(255, 255, 255, 0.05);
border: 2px solid #000;
}
.table-scrollable {
overflow-x: visible;
}
/* old ambox styles */
.ambox {
border-collapse: collapse;
font-size: 95%;
margin: 0 auto 2px auto;
width: 80%;
}
.ambox-gray {
border-left-color: #383838;
}
.ambox.ambox-tiny {
font-size: 90%;
margin: 2px 0;
width: auto;
}
.ambox + .ambox {
margin-top: -2px;
}
.ambox-text {
padding: 0.25em 0.5em;
}
.ambox-image {
padding: 2px 0px 2px 0.5em;
text-align: center;
width: 60px;
}
.ambox-tiny .ambox-image {
padding: 2px 0.5em;
text-align: left;
width: auto;
}
/* Ambox colors */
.ambox-blue {
border-left: 10px solid #1e90ff;
}
.ambox-red {
border-left: 10px solid #b22222;
}
.ambox-orange {
border-left: 10px solid #f28500;
}
.ambox-yellow {
border-left: 10px solid #f4c430;
}
.ambox-purple {
border-left: 10px solid #9932cc;
}
.ambox-gray {
border-left: 10px solid #bba;
}
.ambox-green {
border-left: 10px solid #228b22;
}
/* Ambox small text */
.amsmalltext {
font-size: smaller;
margin-left: 0.8em;
margin-top: 0.5em;
}
/* Navbox template style */
table.navbox {
border: 1px solid #505050;
clear: both;
font-size: 88%;
margin: auto;
padding: 1px;
text-align: center;
width: 100%;
}
/* Border between adjacent navboxes */
table.navbox + table.navbox {
margin-top: -1px;
}
.navbox-title,
.navbox-abovebelow,
table.navbox th {
padding-left: 1em;
padding-right: 1em;
text-align: center;
}
.navbox-group {
font-weight: bold;
padding-left: 1em;
padding-right: 1em;
white-space: nowrap;
}
/* Base background */
.navbox, .navbox-subgroup {
background: rgba(0, 0, 0, 0.1);
}
.navbox-list {
border-color: rgba(0, 0, 0, 0.1); /* Must match background color */
}
/* Level 1 color */
.navbox-title,
table.navbox th {
background: rgba(0, 0, 0, 0.2);
color: #fff;
}
/* Level 2 styling */
.navbox-abovebelow,
.navbox-group,
.navbox-subgroup .navbox-title {
background: rgba(0, 0, 0, 0.2);
color: #fff;
}
/* Level 3 styling */
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
background: rgba(0, 0, 0, 0.1);
color: #fff;
}
/* Even row striping */
.navbox-even {
background: rgba(255, 255, 255, 0.05);
color: #fff;
}
/* Odd row striping */
.navbox-odd {
background: transparent;
}
.collapseButton {
font-weight: normal;
width: auto;
}
.navbox .collapseButton {
width: 6em;
}
.navbar {
font-size: 88%;
font-weight: normal;
}
.navbox .navbar {
font-size: 100%;
}
table.collapsed tr.collapsible {
display: none;
}
/* End of new Navbox styling */
/* custom tables for use on our wiki */
table.stoneshard th,
table.stoneshard td,
table.stoneshard {
border: 5px solid var(--theme-page-background-color);
border-collapse: collapse;
}
table.stoneshard {background-color: var(--theme-accent-color);}
table.stoneshard th {background-color: var(--theme-accent-color);}
table.stoneshard tr:nth-child(even){background-color: var(--theme-page-background-color--secondary);}
table.row-hover th:hover,
table.row-hover tr:hover {background-color: var(--theme-accent-color--hover);}
table.cell-hover th:hover,
table.cell-hover td:hover {background-color: var(--theme-accent-color--hover);}
table.valign-bottom td,
table.valign-bottom th,
table.valign-bottom {
vertical-align: bottom;
}
/* table column highlighting
- I'll comment this out since it's ugly, we don't really need it anyway.
table.column-hover {
background-color: #231f36;
overflow: hidden;
}
table.column-hover td,
table.column-hover th {position: relative;}
table.column-hover td:hover::after,
table.column-hover th:hover::after {
background-color: #34306f;
background-color: rgba(52, 48, 111, 0.5);
content: '\00a0';
height: 200vh;
left: 0;
position: absolute;
top: -100vh;
width: 100%;
}
*/
/* Tooltip: [[File:Tooltip Border.png]] */
.theme-fandomdesktop-dark .tooltip {
border-image-source: url(https://static.wikia.nocookie.net/stoneshard_gamepedia_en/images/b/bc/Tooltip_Border.png/revision/latest);
background: #1b1926;
color: var(--theme-page-text-color);
}
.theme-fandomdesktop-light .tooltip {
border-image-source: url(https://static.wikia.nocookie.net/stoneshard_gamepedia_en/images/3/3b/Tooltip_Border_light.png/revision/latest);
background-color: #ffffff;
color: var(--theme-page-text-color);
}
.tooltip {
border-image-slice: 32;
border-image-repeat: round;
border-width: 24px;
border-style: solid;
display: inline-block;
font-size: 14px;
line-height: 1.6;
}
/* Hide elements that should be collapsed and elements that collapse them in the tooltips */
.to_tooltip .mw-collapsed,
.to_tooltip span[id^="mw-customcollapsible-"] {
display: none;
}
.infoboxtable {
border: 1px solid #505050;
color: var(--theme-page-text-color);
float: right;
font-size: 89%;
margin-bottom: 0.5em;
margin-left: 1em;
padding: 0.2em;
width: 300px;
}