☰

Fandom | Modern Full Width Theme

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

  1. /* ==UserStyle==
  2.  -- THEME STUFF --
  3. @name           Fandom | Modern Full Width Theme
  4. @version        1.0.1
  5. @description    Makes the wiki page full-width and adds a sidebar with a sticky header and fixed search bar.
  6.  
  7.  -- AUTHOR STUFF --
  8. @namespace      Freeplay
  9. @author         Freeplay (https://pages.codeberg.org/freeplay/)
  10. @homepageURL    https://codeberg.org/Freeplay/UserStyles
  11. @supportURL     https://codeberg.org/Freeplay/UserStyles/issues
  12. @preprocessor   stylus
  13.  
  14.  
  15. ==/UserStyle== */
  16.  
  17.  
  18. @media only screen and (min-width: 1225px) {
  19. 	 div {
  20. 		 scrollbar-color: darkorange #0000 !important;
  21. 	 }
  22. 	 
  23. 	.banner-notifications-placeholder {
  24. 		z-index: 0;
  25. 	}
  26. 	.wds-banner-notification__container {
  27. 		width: calc(100% - 350px);
  28. 		right: 0;
  29. 		margin: 0;
  30. 		margin-left: auto;
  31. 	}
  32. 	.WikiaTopAds {
  33. 		width: calc(100% - 350px);
  34. 		right: 0;
  35. 		margin: 0;
  36. 		margin-left: auto;
  37. 		padding: 0;
  38. 	}
  39.  
  40. 	/* Fandom Header */
  41. 	.wds-global-navigation {
  42. 		position: relative;
  43. 		margin-right: 0px;
  44. 		margin-left: auto;
  45. 		width: calc(100% - 350px)
  46. 	}
  47.  
  48.  
  49. 	/* Wiki Header */
  50. 	.wds-community-header {
  51. 		margin-right: 0px;
  52. 		position: sticky;
  53. 		height: 125px;
  54. 		top: -70px;
  55. 		width: calc(100% - 350px);
  56. 		opacity: 0.95;
  57. 	}
  58. 	.wds-community-header__wordmark {
  59. 		height: 55px;
  60. 		margin-bottom: 0px;
  61. 		position: sticky;
  62. 		top: 0;
  63. 	}
  64.  
  65.  
  66. 	.wds-community-header__local-navigation {
  67. 		justify-content: center;
  68. 		position: absolute;
  69. 		bottom: 5px;
  70. 		width: 100%;
  71. 	}
  72.  
  73.  
  74. 	/* Page */
  75. 	.WikiaPage {
  76. 		margin-right: 0px;
  77. 		padding: 0px;
  78. 		width: calc(100% - 350px);
  79. 		box-shadow: -150px 0px 140px rgba(255, 255, 255, .875);
  80. 		border: none;
  81. 	}
  82. 	.WikiaPageContentWrapper {
  83. 		padding: 20px;
  84. 	}
  85. 	.WikiaMainContent {
  86. 		width: 100%;
  87. 	}
  88. 	#WikiaPageBackground {
  89. 		opacity: 0.95;
  90. 	}
  91. 	.community-background {
  92. 		top: 0;
  93. 		width: 100%;
  94. 		object-fit: fill;
  95. 	}
  96. 	 body.skin-oasis.background-not-tiled{
  97. 		 background-size: cover;
  98. 	 }
  99.  
  100. 	/* Fan Feed */
  101. 	 #mixed-content-footer {
  102. 		 margin: 0;
  103. 	 }
  104. 	.mcf-column {
  105. 		width: 33.33%;
  106. 	}
  107. 	.mcf-card {
  108. 		width: 99%;
  109. 	}
  110.  
  111.  
  112.  
  113. 		/*** Sidebar ***/
  114. 	.WikiaRail {
  115. 		position: fixed;
  116. 		top: 55px;
  117. 		left: 0;
  118. 		margin: 0px;
  119. 		height: calc(100% - 55px);
  120. 		width: 350px;
  121. 		color: orange;
  122. 		background-color: #002a32;
  123. 		z-index: 0;
  124. 	}
  125. 	.wikia-rail-inner {
  126. 		overflow: auto;
  127. 		padding-top: 45px;
  128. 	}
  129. 	 .WikiaRail .rail-module h2.has-icon svg {
  130. 		 fill: orange;
  131. 	 }
  132. 	/* Pages i'm following */
  133. 	 .WikiaRail .module {
  134. 		 background-color: transparent;
  135. 		 border: none;
  136. 	 }
  137. 	 .FollowedPagesModule a {
  138. 		 color: cyan;
  139. 	 }
  140. 	 
  141. 	/* Recent Wiki Activities */
  142. 	.WikiaRail .activity-module .page-title > a {
  143. 		color: cyan;
  144. 		font-weight: bold;
  145. 	}
  146. 	.WikiaRail .activity-module .edit-info {
  147. 		color: rgba(255, 255, 255, 0.75);
  148. 	}
  149. 	.WikiaRail .activity-module .edit-info .edit-info-user {
  150. 		color: white;
  151. 	}
  152. 	/* Help grow the wiki */
  153. 	.WikiaRail .rail-module .wds-button.wds-is-secondary {
  154. 		border-color: gray;
  155. 		border-radius: 10px;
  156. 		color: cyan;
  157. 	}
  158. 	.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 {
  159. 		color: lightblue;
  160. 		border-radius: 5px;
  161. 	}
  162.  
  163. 	/* Popular Pages */
  164. 	#WikiaAdInContentPlaceHolder.rail-sticky-module {
  165. 		position: relative;
  166. 		top: 0;
  167. 	}
  168. 	.WikiaRail .premium-recirculation-rail a {
  169. 		color: lightgrey;
  170. 	}
  171.  
  172. 	/*Top Pages*/
  173. 	.Search.this-wiki .SearchAdsTopWrapper {
  174. 		margin-top: 0;
  175. 		padding: 20px;
  176. 		padding-top: 0;
  177. 		width: 310px;
  178. 		height: calc(100% - 70px);
  179. 		overflow-y: auto;
  180. 	}
  181. 	.WikiaRail .side-articles {
  182. 		height: auto;
  183. 		overflow: auto;
  184. 		width: 320px;
  185. 		min-height: 800px;
  186. 		padding-right: 10px;
  187. 	}
  188. 	.Search .result {
  189. 		border: none !important;
  190. 	}
  191.  
  192. 	/* Search Bar */
  193. 	.wds-global-navigation__search-container {
  194. 		position: fixed;
  195. 		left: 0;
  196. 		margin: 0px;
  197. 		width: 310px;
  198. 		height: 55px;
  199. 		background-color: #002a32;
  200. 		padding-left: 20px;
  201. 		padding-right: 20px;
  202. 	}
  203. 	.wds-dropdown.wds-has-dark-shadow .wds-dropdown__content {
  204. 		width: 350px;
  205. 		margin-left: -55px;
  206. 	}
  207.  
  208. 	/* Contents */
  209. 	#toc {
  210. 		position: fixed;
  211. 		left: 0;
  212. 		top: 55px;
  213. 		margin: 0px;
  214. 		width: 350px;
  215. 		padding: 0px;
  216. 		border: none;
  217. 		background-color: #002a32;
  218. 		color: white;
  219. 		box-shadow: 0px 0px 20px rgb(255, 255, 255, .35);
  220. 		height: 30px;
  221. 		overflow: auto;
  222. 		z-index: 10;
  223. 	}
  224. 	nav.toc.show > ol {
  225. 		z-index: 10;
  226. 		overflow: auto;
  227. 		position: fixed;
  228. 		width: 310px;
  229. 		padding-left: 20px;
  230. 		padding-right: 20px;
  231. 		background-color: #002a32;
  232. 		height: calc(100% - 90px);
  233. 		max-height: calc(100% - 90px);
  234. 		color: white;
  235. 	}
  236.  
  237.  
  238.  
  239.  
  240.  
  241. 		/* Footer */
  242. 	.wds-global-footer {
  243. 		z-index: 10;
  244. 		margin-left: auto;
  245. 		margin: 0;
  246. 	}
  247. }