MediaWiki:Fandomdesktop.css

/* Centers Infobox Text */
.portable-infobox .wds-tabs__tab:first-child {
    margin-left: auto;
}
.portable-infobox .wds-tabs__tab:last-child {
    margin-right: auto;
}

/*** Infobox Header ***/
.portable-infobox .pi-title, .portable-infobox .pi-header { 
    background-color: var(--theme-accent-color); 
    color: #fff;
}

/*** Infobox Borders ***/
.portable-infobox {
	border-color: #d99100;
	border-width: 2.5px;
}

/*** Removes Infobox item borders ***/
.pi-item {
	border-color: transparent;
}

/*** Wikitables ***/
.page__main .wikitable{
    text-align: center;
    border-style: solid;
	border-color: #d99100;
	border-width: 2.5px;
}

.page__main .wikitable > * > tr > th,
.page__main .wikitable > tr > th {
    text-align: center;
    background-color: var(--theme-accent-color);
    color: #fff;
}

/*** Article Tables ***/
.page__main .article-table {
    text-align: center;
}

.page__main .article-table > * > tr > th,
.page__main .article-table > tr > th {
	text-align: center;
	color: #fff;
}

/*** Staff Username Colors ***/
/* Admin name colors */

a[href="/wiki/User:Xenephos"], a[href="/wiki/User:Super_trex_888"] {
    font-weight: bolder;
    color: #d60000 !important;
}

a[href="/wiki/User:XeneBOT"] {
    font-weight: bolder;
    color: #83BDF0 !important;
}
/*** Discord widget customization ***/
.discord-widget-container .discord-widget .widget-header {
    background-color: var(--theme-accent-color);
}

.discord-widget .widget-role-name {
	color: var(--theme-accent-color);
}

.discord-widget-container .discord-widget .widget-body {
    background-color: var(--table-background);
}

.discord-widget-container .discord-widget .widget-member .widget-member-name {
    background-color: var(--theme-accent-color);
    color: #fff;
}

.discord-widget-container .discord-widget .widget-member-avatar img {
    border: 2px solid var(--theme-accent-color);
    /* There's sometimes a little space between the avatar and the border, so this property fills the gap */
    background-color: var(--theme-accent-color);
}

.discord-widget-container .discord-widget .widget-footer {
    background-color: var(--table-background);
}

.discord-widget-container .discord-widget .widget-btn-connect {
    
    background-color: var(--theme-accent-color);
    border-color: var(--theme-accent-color);
    color: #fff;
}

/*** Lvl 40 Statboxes ***/

.statbox-theme {
	background-color: var(--theme-accent-color);
	color: var(--theme-accent-dynamic-color-2);
	border-style: solid;
	border-width: 2.5px;
	border-color: #d99100;	
}
.statbox-header {
	font-family: Bebas Neue;
	font-weight: Normal;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 24px;
}

.theme-fandomdesktop-light .statbox-row {
	background-color: var(--theme-page-background-color);
	color: #0E191A;
}

.theme-fandomdesktop-dark .statbox-row {
	background-color: var(--theme-page-background-color);
	color: #fff;
}

.theme-fandomdesktop-light .statbox-health {
	background-color:#3299CC;
	height: 15px; 
	overflow: hidden; 
	text-align:center;
}

.theme-fandomdesktop-light .statbox-attack {
	background-color:#CD4F39;
	height: 15px; 
	overflow: hidden; 
	text-align:center;
}

.theme-fandomdesktop-dark .statbox-health {
	background-color:#0863bd;
	height: 15px; 
	overflow: hidden; 
	text-align:center;
}

.theme-fandomdesktop-dark .statbox-attack {
	background-color:#ba160d;
	height: 15px; 
	overflow: hidden; 
	text-align:center;
}

/*** Navboxes ***/
.mw-collapsible, .mw-collapsed {
	border-style: solid;
	border-color: #d99100;
	border-width: 2.5px;
}
.navbox-head {
	background-color: var(--theme-accent-color);
	color: var(--theme-accent-dynamic-color-2);
	padding: 0.2em 0.5em;
	text-align: center;
}

/** Fixes Navbox header link color**/
.navbox-head a {
	color: #fff;
}

.theme-fandomdesktop-dark .navbox-body {
	background-color: var(--theme-page-background-color);
	color: var(--theme-accent-dynamic-color-1);
	padding:0.2em 0.5em;
}

.theme-fandomdesktop-light .navbox-body {
	background-color: var(--theme-page-background-color);
	color: #0E191A ;
	padding:0.2em 0.5em;
}

/**Changes Navbox [Expand] and [Collapse] button color **/
.mw-collapsible-toggle a {
    color: #fff;
}
.mw-collapsible-toggle a:hover {
    color: #e0e0e0;
}

/**Fixes "Fan Feed" Header Color **/
h1.mcf-header {
	color: #fff;
}

/*** Infobox CSS ***/
/**Changes Header font **/
.portable-infobox .pi-title, .portable-infobox .pi-header {
	font-family: Bebas Neue;
	font-weight: Normal;
	text-transform: uppercase;
	font-size: 30px;
}

/***Changes Title &Fonts ***/
.page-header__title {
	font-family: Bebas Neue;
	text-transform: uppercase;
}

/** New Scrollbar ***/

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: var(--theme-page-background-color);
}
 
::-webkit-scrollbar {
    width: 10px;
    background-color: var(--theme-page-background-color);
}
 
::-webkit-scrollbar-thumb {
    background-color: #1b2d63;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, transparent), to(transparent));
}

/***Header Styling for Main Page/Modules that use it***/

/***Styling specifially for {{MainPageContainer}} temoplate***/
.theme-fandomdesktop-light .MainPageContainer {
	font-family: Rubik; 
	font-size:14px; 
	text-shadow: none;
	background-color: #48679c;
	color: #fff;
}

.theme-fandomdesktop-dark .MainPageContainer {
	font-family: Rubik; 
	font-size:14px; 
	text-shadow: none;
	background-color: #171f4a;
	color: #fff;
}

.theme-fandomdesktop-light .header-body {
	padding-left:0.4em; 
	border:4px solid #d99100;
	background-color:#27426e;
	color:#EEE; 
	font-size:25px; 
	text-align:center; 
	text-shadow: 2px 2px 1px #000;
	font-family:Bebas Neue; 
	color: #fff;
}

.theme-fandomdesktop-dark .header-body {
	padding-left:0.4em; 
	background-color: #01144f;
	border:4px solid #d99100;
	color:#EEE; 
	font-size:30px; 
	text-align:center; 
	text-shadow: 2px 2px 1px #000;
	font-family:Bebas Neue; 
	color: #fff;
}

.theme-fandomdesktop-light .mainpage-container {
	background-color: #48679c;
	color: #fff;
}

.theme-fandomdesktop-dark .mainpage-container {
	background-color: #171f4a;
	color: #fff;
}

/*** Fixing Notfiication Popup ***/
.mw-notification {
	color:#fff;
	background-color:var(--theme-body-background-color);
}