Fandom | Modern Full Width Theme

Makes the wiki page full-width and adds a sidebar with a sticky header and fixed search bar.

As of 2020-07-29. See the latest version.

/* ==UserStyle==
 -- THEME STUFF --
@name           Fandom | Modern Full Width Theme
@version        1.0.1
@description    Makes the wiki page full-width and adds a sidebar with a sticky header and fixed search bar.

 -- AUTHOR STUFF --
@namespace      Freeplay
@author         Freeplay (https://pages.codeberg.org/freeplay/)
@homepageURL    https://codeberg.org/Freeplay/UserStyles
@supportURL     https://codeberg.org/Freeplay/UserStyles/issues
@preprocessor   stylus


==/UserStyle== */


@media only screen and (min-width: 1225px) {
	 div {
		 scrollbar-color: darkorange #0000 !important;
	 }
	 
	.banner-notifications-placeholder {
		z-index: 0;
	}
	.wds-banner-notification__container {
		width: calc(100% - 350px);
		right: 0;
		margin: 0;
		margin-left: auto;
	}
	.WikiaTopAds {
		width: calc(100% - 350px);
		right: 0;
		margin: 0;
		margin-left: auto;
		padding: 0;
	}

	/* Fandom Header */
	.wds-global-navigation {
		position: relative;
		margin-right: 0px;
		margin-left: auto;
		width: calc(100% - 350px)
	}


	/* Wiki Header */
	.wds-community-header {
		margin-right: 0px;
		position: sticky;
		height: 125px;
		top: -70px;
		width: calc(100% - 350px);
		opacity: 0.95;
	}
	.wds-community-header__wordmark {
		height: 55px;
		margin-bottom: 0px;
		position: sticky;
		top: 0;
	}


	.wds-community-header__local-navigation {
		justify-content: center;
		position: absolute;
		bottom: 5px;
		width: 100%;
	}


	/* Page */
	.WikiaPage {
		margin-right: 0px;
		padding: 0px;
		width: calc(100% - 350px);
		box-shadow: -150px 0px 140px rgba(255, 255, 255, .875);
		border: none;
	}
	.WikiaPageContentWrapper {
		padding: 20px;
	}
	.WikiaMainContent {
		width: 100%;
	}
	#WikiaPageBackground {
		opacity: 0.95;
	}
	.community-background {
		top: 0;
		width: 100%;
		object-fit: fill;
	}
	 body.skin-oasis.background-not-tiled{
		 background-size: cover;
	 }

	/* Fan Feed */
	 #mixed-content-footer {
		 margin: 0;
	 }
	.mcf-column {
		width: 33.33%;
	}
	.mcf-card {
		width: 99%;
	}



		/*** Sidebar ***/
	.WikiaRail {
		position: fixed;
		top: 55px;
		left: 0;
		margin: 0px;
		height: calc(100% - 55px);
		width: 350px;
		color: orange;
		background-color: #002a32;
		z-index: 0;
	}
	.wikia-rail-inner {
		overflow: auto;
		padding-top: 45px;
	}
	 .WikiaRail .rail-module h2.has-icon svg {
		 fill: orange;
	 }
	/* Pages i'm following */
	 .WikiaRail .module {
		 background-color: transparent;
		 border: none;
	 }
	 .FollowedPagesModule a {
		 color: cyan;
	 }
	 
	/* Recent Wiki Activities */
	.WikiaRail .activity-module .page-title > a {
		color: cyan;
		font-weight: bold;
	}
	.WikiaRail .activity-module .edit-info {
		color: rgba(255, 255, 255, 0.75);
	}
	.WikiaRail .activity-module .edit-info .edit-info-user {
		color: white;
	}
	/* Help grow the wiki */
	.WikiaRail .rail-module .wds-button.wds-is-secondary {
		border-color: gray;
		border-radius: 10px;
		color: cyan;
	}
	.WikiaRail .rail-module .wds-button.wds-is-secondary:focus:not(:disabled), .WikiaRail .rail-module .wds-button.wds-is-secondary:hover:not(:disabled), .WikiaRail .rail-module .wds-button.wds-is-secondary:active, .WikiaRail .rail-module .wds-button.wds-is-secondary.wds-is-active {
		color: lightblue;
		border-radius: 5px;
	}

	/* Popular Pages */
	#WikiaAdInContentPlaceHolder.rail-sticky-module {
		position: relative;
		top: 0;
	}
	.WikiaRail .premium-recirculation-rail a {
		color: lightgrey;
	}

	/*Top Pages*/
	.Search.this-wiki .SearchAdsTopWrapper {
		margin-top: 0;
		padding: 20px;
		padding-top: 0;
		width: 310px;
		height: calc(100% - 70px);
		overflow-y: auto;
	}
	.WikiaRail .side-articles {
		height: auto;
		overflow: auto;
		width: 320px;
		min-height: 800px;
		padding-right: 10px;
	}
	.Search .result {
		border: none !important;
	}

	/* Search Bar */
	.wds-global-navigation__search-container {
		position: fixed;
		left: 0;
		margin: 0px;
		width: 310px;
		height: 55px;
		background-color: #002a32;
		padding-left: 20px;
		padding-right: 20px;
	}
	.wds-dropdown.wds-has-dark-shadow .wds-dropdown__content {
		width: 350px;
		margin-left: -55px;
	}

	/* Contents */
	#toc {
		position: fixed;
		left: 0;
		top: 55px;
		margin: 0px;
		width: 350px;
		padding: 0px;
		border: none;
		background-color: #002a32;
		color: white;
		box-shadow: 0px 0px 20px rgb(255, 255, 255, .35);
		height: 30px;
		overflow: auto;
		z-index: 10;
	}
	nav.toc.show > ol {
		z-index: 10;
		overflow: auto;
		position: fixed;
		width: 310px;
		padding-left: 20px;
		padding-right: 20px;
		background-color: #002a32;
		height: calc(100% - 90px);
		max-height: calc(100% - 90px);
		color: white;
	}





		/* Footer */
	.wds-global-footer {
		z-index: 10;
		margin-left: auto;
		margin: 0;
	}
}