MediaWiki:Fandomdesktop.css

From Stoneshard wiki
Revision as of 02:44, 22 August 2021 by old>Realpsojed (replace right margin for main page area with left margin for right rail, should fix any pages without right rail (recent changes, etc.))
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) {
    .page__right-rail {
        margin-left: 1em;
    }
}

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

.lcs-container>p+ol,
.lcs-container>p+ul,
.lcs-container>section+ol,
.lcs-container>section+ul,
.mw-parser-output>p+ol,
.mw-parser-output>p+ul,
.mw-parser-output>section+ol,
.mw-parser-output>section+ul,
.rcs-container>p+ol,
.rcs-container>p+ul,
.rcs-container>section+ol,
.rcs-container>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__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-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=42830"