MediaWiki:Fandomdesktop.css

From Stoneshard wiki
Revision as of 15:35, 12 August 2021 by old>Realpsojed (fix margins on list containers)
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;
	}
}

/* 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,
.page-content ul,
.page-content ol {
	margin: 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__main,
.theme-fandomdesktop-light .page__right-rail {
	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__main,
.theme-fandomdesktop-dark .page__right-rail {
	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 .rail-module,
.theme-fandomdesktop-dark code,
.theme-fandomdesktop-dark .mw-notification {
	background-color: var(--theme-accent-color);
}

.theme-fandomdesktop-light #filetoc,
.theme-fandomdesktop-light .ambox,
.theme-fandomdesktop-light .rail-module,
.theme-fandomdesktop-light code,
.theme-fandomdesktop-light .mw-notification {
	background-color: var(--theme-accent-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__main {
    border-width: 24px;
    border-style: solid;
    padding: 0 30px 0 30px;
    margin-right: 1em;
    margin-bottom: 1em;
}

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

.page__right-rail {
    border-width: 24px;
    border-style: solid;
    padding: 0;
    margin-bottom: 1em;
    min-height: 0;
}

.rail-module {
	background-color: #1e1a31;
}

/* 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;
}
Retrieved from "https://stoneshard.com/w/index.php?title=MediaWiki:Fandomdesktop.css&oldid=42826"