MediaWiki:Fandomdesktop.css

 /*** Imports */
 	@import url("/load.php?debug=false&&allinone=0&lang=en&mode=articles&articles=MediaWiki:Mainpage.css|MediaWiki:Badges.css&only=styles");
	@import url("/load.php?mode=articles&only=styles&articles=u:dev:MediaWiki:ModernProfile/Masthead.css|u:dev:MediaWiki:ModernProfile/Wall.css|u:dev:MediaWiki:FandomIcons.css");
	
/* Imports end */

 /*** Custom Fonts Start */
    @font-face {
        font-family: Amnesia;
        font-style: normal;
        src: url(https://dl.dropboxusercontent.com/s/mp8svk5bw43cr0d/amnesia_font__amnesiarip__by_pokemon_diamond-d6m5g2e.ttf);
    }
/* Custom Fonts End */

 /* Mark redirects in Special:Allpages and Special:Watchlist */
	.allpagesredirect a {
    color:#888;
    font-style:italic;
	}
	.watchlistredir a {
    	color:#888;
    	font-style:italic;
	}
/* End of redirects stylising */

 /*** Start of Hover images */
    .imgUnder {
        overflow: visible;
        display: inline-block;
        position: relative
    }
    .imgUnder.article-thumb {
        margin-top: 5px !important;
        margin-bottom: 5px !important; 
    }
    .imgOver {
        display: block;
        visibility: hidden;
        width: inherit;
        height: inherit;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0
    }
    .imgOver.article-thumb {
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }
    .imgUnder:hover .imgOver {
        visibility: visible !important;
    }
/* End of Hover images */

 /*** Start of Tabber */
    .tabbernav {
        font-family: inherit !important;
        font-weight: normal !important;
        font-size: 13px !important;
        border-bottom: 3px solid #002529 !important;
        padding: 0.3em 0 !important;
    }
    .tabbernav a {
        padding: 0.3em 0.5em !important;
        margin: 0 !important;
        color: #FFFFFF !important;
        border: none !important;
        background: transparent !important;
    }
    .tabberactive a {
        color: white !important;
        background: #002529 !important;
        border-radius: 5px 5px 0px 0px;
    }
    .tabbernav :not(.tabberactive) a:hover {
        background: rgba(42,161,152, 0.2) !important;
    }
    .tabbertab {
        border-top: none !important;
        border-bottom: 2px solid #002529 !important;
        border-left: none !important;
        border-right: none !important;
    }
/* End of Tabber */

/* Plainlinks */
	.plainlinks a.external {
		background: none !important;
		padding: 0 !important;
	}
	
	.plainlinks a.external::after {
		display: none;
	}
 /* Plainlinks end */

/*** Start of Wiki background */
    .WikiaPage .WikiaPageBackground {
        background: #000;
        background: rgba(0,0,0,0.87)!important;
        opacity: 0.99;
    }

    body.skin-oasis.background-fixed {
        background-attachment: fixed
    }

    body.background-dynamic.skin-oasis .background-image-gradient {
        display: none
    }

    .WikiaRail .module,
    .WikiaRail #RIGHT_SKYSCRAPER,
    .RelatedVideosModule,
    .WikiaActivityModule, 
    .WikiaImageModule, 
    #WikiaSpotlightsModule, 
    .HotSpotsModule, 
    .CommunityCornerModule, 
    .LatestPhotosModule, 
    .WikiaChatModule,
    .FollowedPagesModule,
    .ChatModule,
    .insights-module,
    .insights-dark.module,
    .community-page-card-module,
    .rail-module,
    .ChatRailModule,
    .ChatEntryPoint {
        background-attachment: fixed !important;
        border: 2px solid #002529 !important;
        border-radius: 4px !important;
        background: transparent !important;
        padding: 10px !important;
    }
/* End of Wiki background */

/* References */
	.references li:target, .reference:target {
		background-color: #27292b;
	}
	ol.references li:target, sup.reference:target {
		background-color: #27292b;
	}
 /* References end */
 
 /*** Box module */
    .Box {
        border: 2px solid #bd7039 !important;
        border-radius: 5px !important;
        padding: 10px !important;
    }
/* Box module end*/

 /*** Start of infobox stuff */
    .pi-europa .pi-image-collection-tabs, .pi-europa .pi-horizontal-group, .pi-horizontal-group-item.pi-data-value {
        text-align: center;
    }
    
    .portable-infobox {
        border-radius: 5px 5px 0px 0px;
        padding:.5em;
        width:40%;
        background-color: #030a07;
    }
 
    .portable-infobox {
        color: white !important;
        background-color: #030a07;
    }
 
    .portable-infobox > :last-child td.pi-horizontal-group-item.pi-data-value:first-child {
        border-bottom-left-radius: 0px;
    }
    .portable-infobox > :last-child td.pi-horizontal-group-item.pi-data-value:last-child {
        border-bottom-right-radius: 0px;
    }
 
    .pi-europa.pi-title, .pi-europa.pi-header {
        background-image: #002529;
        color: white;
    }

    .portable-infobox .pi-item {
        border-bottom: 0;
        border-top: 1px solid #002529;
        border-style: solid;
    }
/* End of infobox stuff */

 /*** Table of contents */
 /*
 * Allow limiting of which header levels are shown in a TOC;
 * <div class="toclimit-3">, for instance, will limit to
 * showing ==headings== and ===headings=== but no further.
 * Used in [[Template:TOC]]
 */
	.toclimit-2 .toclevel-1 ul,
	.toclimit-2 .toclevel-1 ol,
	.toclimit-3 .toclevel-2 ul,
	.toclimit-3 .toclevel-2 ol,
	.toclimit-4 .toclevel-3 ul,
	.toclimit-4 .toclevel-3 ol,
	.toclimit-5 .toclevel-4 ul,
	.toclimit-5 .toclevel-4 ol,
	.toclimit-6 .toclevel-5 ul,
	.toclimit-6 .toclevel-5 ol,
	.toclimit-7 .toclevel-6 ul,
	.toclimit-7 .toclevel-6 ol {
		display: none;
}
/* Table of contents end */

/* Collapsible list start */
    li.mw-collapsible.mw-collapsed.mw-made-collapsible .mw-collapsible-toggle.mw-collapsible-toggle-default.mw-collapsible-toggle-collapsed,
    li.mw-collapsible.mw-made-collapsible .mw-collapsible-toggle.mw-collapsible-toggle-default.mw-collapsible-toggle-expanded {
        float: right;
    }
    
    li.mw-collapsible.mw-collapsed.mw-made-collapsible .mw-collapsible-toggle.mw-collapsible-toggle-default.mw-collapsible-toggle-collapsed .mw-collapsible-text,
    li.mw-collapsible.mw-made-collapsible .mw-collapsible-toggle.mw-collapsible-toggle-default.mw-collapsible-toggle-expanded .mw-collapsible-text,
    .mw-collapsible.mw-collapsed.mw-made-collapsible .mw-collapsible-toggle.mw-collapsible-toggle-default.mw-collapsible-toggle-collapsed .mw-collapsible-text,
    .mw-collapsible.mw-made-collapsible .mw-collapsible-toggle.mw-collapsible-toggle-default.mw-collapsible-toggle-expanded .mw-collapsible-text {
    	color: #4c9c94;
    }
/* Collapsible list end */

/* Docparam start */
	.docparam {
		border: 1px solid white;
		border-radius: 3px;
		overflow: hidden;
		margin-bottom: 1rem;
	}
	.docparam__header {
		border-bottom: 1px solid white;
		padding: 0 5px;
		box-sizing: border-box;
	}
	.docparam__header__icon {
		display: inline-block;
	}
	.docparam__header__name {
		display: inline-block;
		position: relative;
		top: 2px;
	}
	.docparam__header__default {
		float: right;
		line-height: 2.5;
		font-size: 0.9rem;
		color: white;
	}
	.docparam__description {
		padding: 1rem;
		box-sizing: border-box;
	}
 /* Docparam end */

/* Mbox styles */
	.mbox {
		display: flex;
		position: relative;
		background-color: rgba(0, 0, 0, 0.7);
		border: 1px solid #444;
		border-left-width: 8px;
		border-left-color: #3d8f87;
		border-radius: 3px;
		margin-bottom: 5px;
		min-height: 32px;
	}
	.mbox__content {
		display: table;
		box-sizing: border-box;
		width: 100%;
		padding: 8px 15px;
	}
	.mbox__content__image {
		display: table-cell;
		width: 45px;
		height: 100%;
		text-align: center;
		vertical-align: middle;
		padding-right: 15px;
	}
	.mbox__content__wrapper {
		display: table-cell;
		vertical-align: middle;
	}
	.mbox__content__header {
		display: block;
		font-weight: bold;
	}
	.mbox__content__text {
		display: block;
	}
	.mbox__content__text__comment {
		font-size: small;
	}
	.mbox__content__aside {
		display: table-cell;
		width: 100px;
		vertical-align: middle;
		text-align: center;
		padding-left: 15px;
		border-left: 1px solid #3d8f87;
	}
	.mbox__close {
		position: absolute;
		right: 0;
		top: 0;
		padding: 2px 7px;
		font-weight: bold;
		font-size: 16px;
		color: #bbb;
		cursor: pointer;
		transition: all .15s ease-in;
	}
	.mbox__close:hover {
		color: #777;
	}
	.mbox__close:after {
		content: '×';
	}
	.mw-collapsed + .mbox__close {
		transform: rotate(45deg);
		padding: 4px 7px 5px 2px;
	}
	.mbox__content__image.fandom-icons {
		font-size: 2em;
	}
 /* Mbox styles end */
 
/* Navbox CSS start */
	.navbox {
		width: 100%;
		background: #000801;
		color: white;
		margin: 1em auto;
		font-size: 84%;
		clear: both;
		padding: 2px;
		border-spacing: 0;
		border: 1px solid #213a37;
		border-radius: 5px;
		font-family: 'Rubik';
	}

 /* Merges navboxes that are directly under eachother */
	.navbox + .navbox {
		margin-top: -11px;
	}

	.navbox .navbox-title {
		background: #07282b;
		color: #fff;
		font-weight: bold;
		font-size: 120%;
	}

	.navbox .navbox-vde {
		float:left;
		width:65px;
	}

	.navbox .navbox-title-padright {
		padding-right: 65px;
	}

	.navbox .navbox-title-padleft {
		padding-left: 65px;
	}

	.navbox .navbox-subgroup {
		border-spacing: 0;
		width: 100%;
	}

	.navbox .navbox-gutter {
		height: 2px;
	}

	.navbox .navbox-subgroup .navbox-gutter {
		background: #0e3236;
	}

	.navbox .navbox-section-row > td {
		padding: 0;
		height: 100%;
	}

	.navbox .navbox-section {
		width: 100%;
		border-spacing: 0;
	}

	.navbox .navbox-above,
	.navbox .navbox-below {
		background: #0e3236;
		text-align: center;
	}

	.navbox .navbox-image {
		background: #0e3236;
		text-align: center;
	}

	.navbox .navbox-group,
	.navbox .navbox-header {
		background: #0e3236;
		color: white;
		font-weight: bold;
		height: 100%;
		padding: 2px 4px;
	}

	.navbox .navbox-header-collapsible {
		padding-left: 65px;
	}

	.navbox .navbox-group {
		text-align: right;
		padding-right: 1em;
		min-width: 150px;
	}

	.navbox .navbox-group,
	.navbox .navbox-image-left {
		border-right: 2px solid #001617;
	}

	.navbox-image-right {
		border-left: 2px solid #001617;
	}

	.navbox .navbox-list {
		background: #000801;
		color: white;
		width: 100%;
		height: 100%;
		padding: 0;
	}

	.navbox .alt > .navbox-list {
		background: #000000;
	}

	.navbox .navbox-list div {
		padding: 0px 4px;
	}

	.navbox .navbox-list.no-group {
		text-align: center;
		padding-top: 2px;
		padding-bottom: 2px;
	}

	.navbox .mw-collapsible-toggle {
		width: 65px;
	}

  /* hlist */
	.hlist ul {
		margin: 0;
		list-style: none;
	}

	.hlist li, .hlist ul ul {
		display: inline;
	}

	.hlist li a {
		white-space: nowrap;
	}

	.hlist ul ul:before {
		content: "("
	}

	.hlist ul ul:after {
		content: ")"
	}

	.hlist li:after {
		content: " • ";
	}

	.hlist ul ul li:after {
		content: "/";
	}

	.hlist li:last-child:after, .hlist ul ul li:last-child:after {
		content: none;
	}
 /*** Navbox CSS end */
 


 /*** Note infobox ***/
	.portable-infobox.type-note {
		width: 600px;
		float: left;
	}
/*** Note infobox end ***/

 /* Custom Scrollbar */
	*::-webkit-scrollbar {
		width: 12px;
		height: 12px;
		transition: all .6s ease;
		-webkit-transition: all .6s ease;
		-moz-transition: all .6s ease;
		-o-transition: all .6s ease;
	}
 
	*::-webkit-scrollbar-track {
		background: #000000;
		border: rgb(18, 18, 22);
		border-radius: 1em;
		-webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, .1);
		-moz-box-shadow: inset 0 0 6px rgba(255, 255, 255, .1);
		-o-box-shadow: inset 0 0 6px rgba(255, 255, 255, .1);
		box-shadow: inset 0 0 8px rgba(255, 255, 255, .1);
	}
 
	*::-webkit-scrollbar-thumb {
		background: -webkit-linear-gradient(top, #1a4039, #1a4039);
		border-radius: 1em;
		border: 2px solid -webkit-linear-gradient(top, #1a4039, #1a4039);
	}
/* Custom Scrollbar end */

/* Quotes */
/* #content added as a parent selector to the following in order to override default blockquote styles. */

#content .pull-quote {
    display: flex;
    flex-wrap: wrap;
    max-width: 80%;
    margin: 1em auto;
    font-size: 1em;
    line-height: 1.8;
}

#content .pull-quote__text {
    flex-basis: 100%;
    position: relative;
    padding: 0 2em;
    hyphens: auto;
    color: rgba(255, 255, 255, .8);
    margin-bottom: 7px;
    line-height: 1.5;
}

#content .pull-quote__text::before, #content .pull-quote__text::after {
    position: absolute;
    font-size: 3em;
    font-family: "Times New Roman", serif;
    font-weight: 700;
    color: rgba(255, 255, 255, .15);
}

#content .pull-quote__text::before {
    content: "“";
    top: 0;
    left: 0;
    line-height: 1;
}

#content .pull-quote__text::after {
    content: "”";
    bottom: 0;
    right: 0;
    line-height: 0.2;
}

#content .pull-quote__source {
    margin-left: auto;
}

#content .pull-quote__source::before {
    content: "—"; 
}

#content .pull-quote--right, #content .pull-quote--left {
    border: 1px solid #bbb;
    border-left: 0;
    border-right: 0;
    padding: 0 0;
    text-align: justify;
}

#content .pull-quote--right {
    float: right;
    margin: 1em 0 1em 2em;
}

#content .pull-quote--left {
    float: left;
    margin: 1em 2em 1em 0;
}
 /* Quotes end */

/* light mode fixes */
.theme-fandomdesktop-light .mbox {
  background-color: #c4c4c4;
}

.theme-fandomdesktop-light .portable-infobox {
  background-color: #c4c4c4;
  color: #111111 !important;
}

.theme-fandomdesktop-light .navbox-list {
  background-color: #c4c4c4 !important;
}

.theme-fandomdesktop-light .navbox-row.alt td {
 background-color: #ababab !important;
}

 /* temp fix to make mainpage icons not blend into background */
.theme-fandomdesktop-light .mainpage-box-links .content .fandom-icons {
  background-color: #333333;
  padding: 5px;
}