☰

NordNet

A Nord themed style for nexus mods, a lot of tweaks, including one for easy access search filter. This is the first version, not all pages and sections have been modified yet, but the mostly used are. Hope you like it, and recommend any changes.

  1. /* ==UserStyle==
  2. @name           NordNet
  3. @namespace      github.com/openstyles/stylus
  4. @version        1.0.0
  5. @description    A Nord themed style for nexus mods, a lot of tweaks, including one for easy access search filter. This is the first version, not all pages and sections have been modified yet, but the mostly used are. Hope you like it, and recommend any changes.
  6. @author         TragicNet
  7. @license	MIT
  8. ==/UserStyle== */
  9. @-moz-document /* domain("next.nexusmods.com"), */
  10. domain("nexusmods.com") {
  11. 	/* Core */
  12. 	:root {
  13. 		--bg-0: #161a21;
  14. 		--bg-1: #1c2028;
  15. 		--fg-0: #eee;
  16. 		--fg-1: #d6d6d6;
  17. 		--ac-0: #a8afbd;
  18. 		--ac-1: #c5c9d3;
  19. 	}
  20.  
  21. 	body {
  22. 		--bg-0: #161a21;
  23. 		--bg-1: #1c2028;
  24. 		--fg-0: #eee;
  25. 		--fg-1: #d6d6d6;
  26. 		--ac-0: #a8afbd;
  27. 		--ac-1: #c5c9d3;
  28.  
  29. 		--bg-0t: #161a2180;
  30.  
  31. 		--theme-primary: var(--ac-0) !important;
  32. 		--theme-primary-translucent: var(--ac-0) !important;
  33. 		--theme-secondary: var(--ac-0) !important;
  34. 		--theme-dark: var(--ac-0) !important;
  35. 		--sm-breakpoint: 481px;
  36. 		--md-breakpoint: 769px;
  37. 		--lg-breakpoint: 1200px;
  38. 		--xl-breakpoint: 1461px;
  39. 		--md-max-width: 990px;
  40. 		--lg-max-width: 1240px;
  41. 		--xl-max-width: 1300px;
  42. 		--rj-header-height: 40px;
  43. 		--rj-mobile-header-height: 40px;
  44. 		--rj-mobile-menu-section-height: 72px;
  45. 		--rj-header-tray-height: 250px;
  46. 		--rj-nexusblack: var(--bg-0) !important;
  47. 		--rj-nexusblack-light: var(--bg-1) !important;
  48. 		--rj-nexusblack-high-contrast: var(--bg-1) !important;
  49. 		--rj-border: var(--bg-1) !important;
  50. 		--rj-white-80: rgba(255, 255, 255, 0.8);
  51. 		--rj-white-60: rgba(255, 255, 255, 0.6);
  52. 		--rj-white-38: rgba(255, 255, 255, 0.38);
  53. 		--rj-white-32: rgba(255, 255, 255, 0.32);
  54. 		--rj-white-30: rgba(255, 255, 255, 0.3);
  55. 		--rj-white-16: rgba(255, 255, 255, 0.16);
  56. 		--rj-white-10: rgba(255, 255, 255, 0.10);
  57. 		--rj-white-08: rgba(255, 255, 255, 0.08);
  58. 		--rj-white-05: rgba(255, 255, 255, 0.05);
  59. 		--rj-gray-16: rgba(221, 221, 221, 0.16);
  60. 		--rj-black-60: rgba(0, 0, 0, 0.6);
  61. 		--rj-black-40: rgba(0, 0, 0, 0.4);
  62. 		--rj-black-16: rgba(0, 0, 0, 0.16);
  63. 		--rj-black-08: rgba(0, 0, 0, 0.08);
  64. 		--rj-orange-font: var(--ac-0) !important;
  65. 		--rj-orange-dark: var(--ac-0) !important;
  66. 		--rj-button-focus: rgba(128, 128, 128, 0.32);
  67. 		--rj-button-focus-border: #388ffa;
  68. 		--rj-button-focus-blur: #0673fa;
  69. 		--rj-standard-button-hover: var(--bg-1) !important;
  70. 		--rj-standard-button-focus: var(--bg-1) !important;
  71. 		--rj-secondary-button-bg: #ddd;
  72. 		--rj-secondary-button-hover: #aaa;
  73. 		--rj-secondary-button-focus: #bbb;
  74. 		--colour-surface-low: var(--bg-0) !important;
  75. 		--colour-surface-translucent-mid: var(--bg-0t) !important;
  76.  
  77.  
  78. 		--header-height: 40px;
  79.  
  80. 		/* 		--bg-0: #ffe0e0;
  81. 	--fg-0: #ff7795;
  82. 	--fg-3: #ff7795; */
  83. 	}
  84. 	* {
  85. 		overscroll-behavior: none;
  86. 	}
  87.  
  88. 	.notifications-header-left {
  89. 		color: var(--fg-1);
  90. 	}
  91.  
  92. 	.theme-primary {
  93. 		fill: var(--ac-0) !important;
  94. 	}
  95.  
  96. 	body {
  97. 		margin: 0;
  98. 		padding: 0;
  99.  
  100. 		@media only screen and (min-width: 1240px) {
  101. 			margin: 0px !important;
  102. 		}
  103. 	}
  104.  
  105. 	body::before {
  106. 		background: var(--bg-0);
  107. 	}
  108.  
  109. 	input,
  110. 	select {
  111. 		background: var(--bg-1);
  112. 		color: var(--fg-0);
  113. 		outline: none;
  114.  
  115. 		option {
  116. 			background: var(--bg-1) !important;
  117. 			color: var(--fg-0);
  118. 		}
  119. 	}
  120.  
  121. 	.select2-dropdown,
  122. 	.select2-selection__rendered {
  123. 		background: var(--bg-0);
  124. 		color: var(--fg-0) !important;
  125. 		outline: none;
  126. 		border: none;
  127.  
  128. 		input {
  129. 			border: none !important;
  130. 		}
  131. 	}
  132.  
  133.  
  134. 	.select2-selection__rendered {
  135. 		background: var(--bg-1);
  136. 	}
  137.  
  138. 	header {
  139. 		box-shadow: none !important;
  140. 		background: var(--bg-0) !important;
  141. 		height: auto !important;
  142. 		padding: 0 1% !important;
  143.  
  144. 		a {
  145. /* 				height: 100% !important; */
  146. 		}
  147.  
  148. 		.headlogo {
  149. 			height: auto !important;
  150. 			* {
  151. 				height: 100% !important;
  152. 			}
  153. 			path {
  154. 				fill: var(--ac-0);
  155. 			}
  156. 		}
  157.  
  158. 		.rj-header-wrap {
  159. 			max-width: 100% !important;
  160. 			margin: 0 !important;
  161. 		}
  162.  
  163. 		.rj-nav {
  164. 			height: var(--header-height);
  165. 		}
  166. 		
  167. 		.nav-current-game * {
  168. 			border-color: var(--bg-1) !important;
  169. 			background: var(--bg-0) !important;
  170. 		}
  171.  
  172. /* 			.rj-nav-item.rj-nav-game {
  173. 			padding-right: 24px;
  174. 			border-color: transparent;
  175. 		}
  176.  
  177. 		.rj-nav-item:not(.rj-nav-game) {
  178. 			border-radius: 8px;
  179. 		} */
  180.  
  181. 		.rj-nav-item:hover {
  182. 			background: none;
  183. 		}
  184.  
  185. 		.rj-nav-item.active {
  186. 			background: var(--bg-1);
  187. 		}
  188.  
  189. 		.game-home-link {
  190. 			top: 0;
  191. 			background: none !important;
  192. 			left: -32px;
  193. 			height: 100%;
  194. 		}
  195.  
  196. 		.rj-header-tray,
  197. 		.rj-header-full-width-banner,
  198. 		.rj-mobile-menu-subsections,
  199. 		.rj-panel-inner {
  200. 			background: none !important;
  201. 		}
  202.  
  203. 		.rj-header-tray {
  204. 			a:hover {
  205. 				background: var(--bg-1);
  206. 			}
  207. 		}
  208.  
  209. 		.user-profile-menu-section--link .section-content:hover {
  210. 			background: var(--bg-1);
  211. 		}
  212.  
  213. 		.notifications-clear {
  214. 			color: var(--ac-0) !important;
  215. 		}
  216.  
  217. 		.rj-notifications-tray .arrow {
  218. 			right: 50px;
  219. 		}
  220.  
  221. 		.rj-right-tray,
  222. 		.rj-profile-tray-content {
  223. 			background: var(--bg-0);
  224.  
  225. 			div,
  226. 			li,
  227. 			a {
  228. 				background: none !important;
  229. 			}
  230.  
  231. 			li:hover {
  232. 				background: var(--bg-1) !important;
  233. 			}
  234. 		}
  235.  
  236. 		.rj-search {
  237. 			* {
  238. 				color: color: var(--fg-0);
  239. 			}
  240. 			outline: none !important;
  241. 			margin: 0;
  242.  
  243. 			.rj-search-input {
  244. 				max-width: 100% !important;
  245. 				background: var(--bg-1);
  246. 				color: var(--fg-0);
  247. 				outline: none;
  248. 				border: none;
  249. 			}
  250.  
  251.  
  252. 			.rj-search-category-wrapper {
  253. 				right: 0;
  254. 				border: none;
  255.  
  256. 				.rj-search-category-dropdown-toggle {
  257. 					background: var(--bg-1);
  258. 					color: var(--fg-0);
  259. 				}
  260.  
  261. 				.rj-search-category-dropdown-toggle:hover {
  262. 					background: var(--bg-1);
  263. 				}
  264.  
  265. 				.rj-search-category-dropdown {
  266. 					background: var(--bg-0);
  267.  
  268. 					li:hover {
  269. 						background: var(--bg-1);
  270. 					}
  271. 				}
  272. 			}
  273.  
  274. 			.search-button {
  275. 				display: none !important;
  276. 			}
  277.  
  278. 			#gsearch_results {
  279. 				/* 				display: block !important; */
  280. 				width: 100%;
  281. 				max-width: unset;
  282. 				background: var(--bg-0);
  283.  
  284. 				.gsearch_results_list h2,
  285. 				div {
  286. 					background: none;
  287. 				}
  288. 			}
  289. 		}
  290.  
  291. 		.ni-background {
  292. 			display: none;
  293. 		}
  294. 	}
  295.  
  296. 	.rj-header-wrap.rj-active-game:not(.rj-search-active) .rj-search {
  297. 		/* 		margin-left: 56px; */
  298. 	}
  299.  
  300. 	#maintenance_banner {
  301. 		position: fixed;
  302. 		top: 40px;
  303. 		left: 0px;
  304. 		width: 100%;
  305. 		z-index: 12;
  306. 	}
  307. 	
  308. 	body.mods #maintenance_banner {
  309. 		top: 80px;
  310. 	}
  311. 	
  312.  
  313. 	li {
  314. 		border-color: var(--bg-1) !important;
  315. 	}
  316.  
  317. 	ul.tags li a.btn,
  318. 	ul.tags li a.btn:visited {
  319. 		color: var(--ac-0);
  320. 		background-color: var(--bg-1) !important;
  321.  
  322. 		svg {
  323. 			fill: var(--ac-0);
  324. 		}
  325. 	}
  326.  
  327. 	.rj-btn-outline {
  328. 		border-color: var(--ac-0) !important;
  329. 	}
  330.  
  331. 	.btn {
  332. 		border-radius: 8px;
  333. 		/* 		border-radius: 20px; */
  334. 	}
  335.  
  336. 	.pip,
  337. 	.btn:not(.btn-inactive) {
  338. 		background: var(--ac-0);
  339. 		/* 		off blue highlight important */
  340. 	}
  341.  
  342. 	.btn-inactive {
  343. 		background: var(--bg-1) !important;
  344. 	}
  345.  
  346. 	#mainContent {
  347. 		max-width: 100%;
  348. 		width: 100%;
  349. 		margin: 0;
  350. 		margin-top: var(--header-height);
  351. 		padding: 0;
  352. 		padding-bottom: 20px;
  353. 		
  354. 		#featured h1 {
  355. 			margin: 0px;
  356. 		}
  357.  
  358. 		#feature::before {
  359. 			background: var(--bg-0);
  360. 		}
  361.  
  362. 		#nofeature {
  363. 			background: var(--bg-0) !important;
  364. 			#pagetitle {
  365. 				background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, var(--bg-0) 100%) !important;
  366. 			}
  367. 		}
  368.  
  369. 		#feature .gradient {
  370. 			background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, var(--bg-0) 100%);
  371. 		}
  372.  
  373. 		.collections-banner-outer-wrapper-trigger,
  374. 		.collections-banner-wrapper {
  375. 			display: none;
  376. 		}
  377. 		.collections-banner {
  378. 			background: var(--bg-1);
  379. 		}
  380.  
  381.  
  382. 		ul.modtabs {
  383. 			background: var(--bg-0);
  384.  
  385. 			li {
  386. 				background: var(--bg-0);
  387.  
  388. 				a {
  389. 					border: 0;
  390. 					padding: 13px 10px;
  391. 					height: 36px;
  392. 					min-width: 100px;
  393. 				}
  394. 			}
  395.  
  396. 			li a.selected,
  397. 			li a:hover {
  398. 				background: var(--bg-1);
  399. 			}
  400. 		}
  401.  
  402. 		.gameindex > .wrap {
  403. 			background: var(--bg-0);
  404.  
  405. 			#game-mods {
  406. 				background: var(--bg-0);
  407. 			}
  408.  
  409. 			.tabs {
  410.  
  411. 				.tabcontent {
  412. 					background: var(--bg-0);
  413.  
  414. 					a.mod-image {
  415. 						background: var(--bg-0);
  416. 					}
  417.  
  418. 					.mod-tile {
  419.  
  420. 						.mod-tile-left {
  421. 							background: var(--bg-1) !important;
  422. 							overflow: hidden;
  423.  
  424.  
  425.  
  426. 							.tile-data {
  427. 								background-color: var(--bg-1);
  428.  
  429. 								ul {
  430. 									display: flex;
  431. 									flex-direction: row;
  432. 									justify-content: space-between;
  433. 								}
  434. 							}
  435. 						}
  436. 					}
  437. 				}
  438. 			}
  439. 		}
  440.  
  441. 		.resultpage {
  442. 			margin-top: var(--header-height);
  443. 		}
  444.  
  445. 		.resultpage .wrap:first-of-type {
  446. 			background: var(--bg-0);
  447.  
  448. 			.tabcontent #mod-list {
  449. 				padding: 0;
  450. 				background: var(--bg-0);
  451.  
  452. 				.search-terms {
  453. 					margin-top: 10px;
  454.  
  455. 					li {
  456. 						color: var(--ac-0);
  457. 						background-color: var(--bg-1);
  458. 						border-radius: 8px;
  459. 					}
  460. 				}
  461.  
  462. 				.pagenav {
  463. 					.pagination li a {
  464. 						background-color: var(--bg-0);
  465. 						color: var(--fg-0);
  466. 					}
  467.  
  468. 					.pagination li a.page-selected {
  469. 						background-color: var(--bg-1);
  470. 					}
  471.  
  472. 					svg {
  473. 						fill: var(--fg-0);
  474. 					}
  475. 				}
  476.  
  477. 				ul[class="tiles"],
  478. 				ul[class="tiles "],
  479. 				ul[class="tiles big-tiles"] {
  480.  
  481. 					display: grid;
  482. 					grid-template-columns: repeat(5, 1fr);
  483.  
  484. 					a.mod-image {
  485. 						background: var(--bg-0);
  486. 					}
  487.  
  488. 					.mod-tile {
  489. 						width: 100%;
  490.  
  491. 						.mod-tile-left {
  492. 							background: var(--bg-1) !important;
  493. 							overflow: hidden;
  494. 							.mod-image {
  495. 								/* 								position: absolute; */
  496. 								/* 							top: 0;
  497. 						left: 0; */
  498. 								/* 									:hover {
  499. 									z-index: 3;
  500. 								} */
  501. 							}
  502.  
  503. 							.tile-desc {
  504. 								background: var(--bg-0t);
  505. 								backdrop-filter: blur(20px);
  506. 								/* 															top: 100px; */
  507. 								/* 								top: 145px; */
  508. 								/* 								min-height: 360px;
  509. 							max-height: 360px; */
  510. 							}
  511.  
  512. 							.tile-data {
  513. 								/* 								position: absolute; */
  514. 								background-color: var(--bg-1);
  515. 								/* 								z-index: 2; */
  516. 								bottom: 0;
  517. 								/* 								width: 100%; */
  518. 								ul {
  519. 									display: flex;
  520. 									flex-direction: row;
  521. 									justify-content: space-between;
  522. 								}
  523. 							}
  524. 						}
  525. 					}
  526. 				}
  527.  
  528. 				ul[class="tiles tile-list"] {
  529. 					display: grid;
  530. 					grid-template-columns: repeat(2, 1fr);
  531.  
  532. 					.mod-tile-right {
  533. 						background: var(--bg-1);
  534. 						overflow: hidden;
  535.  
  536. 						.tile-desc {
  537. 							min-height: 100%;
  538. 							max-height: 100%;
  539. 						}
  540. 					}
  541.  
  542. 					.tile-data {
  543. 						background-color: var(--bg-1);
  544.  
  545. 						ul {
  546. 							display: flex;
  547. 							flex-direction: row;
  548. 							justify-content: space-between;
  549. 						}
  550. 					}
  551. 				}
  552.  
  553. 				ul[class="tiles big-tiles"] {
  554. 					grid-template-columns: repeat(3, 1fr);
  555. 				}
  556. 			}
  557. 		}
  558. 	}
  559.  
  560. 	.modpage .wrap:first-of-type {
  561. 		background: var(--bg-0);
  562.  
  563. 		.modimages {
  564. 			background: var(--bg-0);
  565. 		}
  566.  
  567. 		.wrap > div {
  568. 			background: var(--bg-0);
  569.  
  570. 			#fileinfo {
  571. 				padding-top: 0;
  572. 				padding-bottom: 0;
  573. 				border: 0;
  574.  
  575. 				.sideitem:last-child {
  576. 					.result {
  577. 						top: 0 !important;
  578. 					}
  579. 				}
  580. 			}
  581.  
  582. 			.side-tags {
  583. 				display: inline-flex;
  584. 				padding: 5px 15px 15px 15px;
  585. 				border: 0;
  586. 				align-items: center;
  587. 				width: 100%;
  588.  
  589. 				h2 {
  590. 					visibility: hidden;
  591. 					white-space: nowrap;
  592. 					float: left;
  593. 					width: 0;
  594. 					margin: 0 40px 0 10px;
  595. 				}
  596.  
  597. 				h2::after {
  598. 					position: absolute;
  599. 					left: 20px;
  600. 					visibility: visible;
  601. 					content: 'Tags';
  602. 				}
  603.  
  604.  
  605. 				ul.tags li {
  606. 					margin: 0 10px 0 0;
  607. 				}
  608. 				a.btnsmall {
  609. 					margin: 0px 10px 0px 0px !important;
  610. 				}
  611.  
  612. 				a.btn.btnsmall.popup-btn-ajax {
  613. 					font-size: 0;
  614. 					line-height: 25px;
  615. 					height: 25px;
  616. 				}
  617.  
  618. 				.sideitem {
  619. 					display: inline-flex;
  620. 					flex-wrap: wrap;
  621. 					flex-direction: row;
  622. 					padding: 0;
  623. 					align-items: center;
  624. 				}
  625. 			}
  626.  
  627.  
  628. 			.tabs {
  629.  
  630. 				.tabcontent {
  631. 					background: var(--bg-0);
  632.  
  633. 					.tab-description {
  634. 						display: grid !important;
  635. 						/* 							grid-column-gap: 20px; */
  636. 						grid-template-columns: 50% 40% 1fr;
  637. 						grid-template-rows: 37px 1fr;
  638. 						grid-template-areas: "header history history" "body accordion accordion" "body buttons1 buttons2";
  639. 						padding: 20px;
  640. 						/* 							width: calc(100% - 40px); */
  641. 						/* 							background: #101010; */
  642. 						> h2 {
  643. 							grid-area: header;
  644. 							margin-top: 2px;
  645. 							padding: 0;
  646. 						}
  647. 						.modhistory.inline-flex {
  648. 							grid-area: history;
  649. 							align-items: center;
  650. 							align-self: end;
  651. 							margin-bottom: -2px;
  652. 						}
  653. 						.modhistory.inline-flex .icon-tickunsafe {
  654. 							width: 16px;
  655. 							height: 16px;
  656. 						}
  657. 						> p {
  658. 							grid-area: body;
  659. 							margin-top: 15px;
  660. 							text-align: left;
  661. 						}
  662. 						.accordionitems {
  663. 							grid-area: accordion;
  664. 							max-width: 100%;
  665. 							margin: 15px 0 20px 0;
  666. 							overflow-wrap: anywhere;
  667. 						}
  668. 						ul.actions {
  669. 							grid-area: buttons1;
  670. 							align-self: auto;
  671. 							justify-self: start;
  672. 							margin-right: 0;
  673. 						}
  674. 						.btn.inline-flex {
  675. 							grid-area: buttons2;
  676. 							align-self: end;
  677. 							justify-self: end;
  678. 							left: 10px !important;
  679. 						}
  680. 						ul.actions li {
  681. 							margin-bottom: 5px;
  682. 						}
  683. 					}
  684.  
  685. 					.mod_description_container {
  686. 						padding: 20px;
  687. 					}
  688.  
  689. 					.accordion {
  690. 						dt {
  691. 							background: var(--bg-0) !important;
  692. 						}
  693.  
  694. 						dd {
  695. 							background: var(--bg-1) !important;
  696. 						}
  697.  
  698. 						.tabbed-block .table {
  699. 							th {
  700. 								border: 0;
  701. 								background: var(--bg-0);
  702. 							}
  703.  
  704. 							td {
  705. 								border: 0;
  706. 								background: var(--bg-1);
  707. 							}
  708. 						}
  709. 					}
  710. 					.comments {
  711. 						.comment-nav {
  712. 							.pagination li a {
  713. 								background-color: var(--bg-0);
  714. 								color: var(--fg-0);
  715. 							}
  716.  
  717. 							.pagination li a.page-selected {
  718. 								background-color: var(--bg-1);
  719. 							}
  720. 						}
  721.  
  722. 						.comment {
  723. 							background: var(--bg-0);
  724. 							border-color: var(--bg-1);
  725. 						}
  726.  
  727. 						.comment-head,
  728. 						.comment-kids {
  729. 							background: var(--bg-0);
  730. 							border: 0;
  731. 						}
  732.  
  733. 						.comment-content {
  734. 							background: var(--bg-1);
  735. 						}
  736. 					}
  737. 				}
  738. 			}
  739. 		}
  740. 	}
  741.  
  742. 	.tile-desc .fadeoff {
  743. 		display: none;
  744. 	}
  745.  
  746. 	#rj-back-to-top {
  747. 		background-color: var(--ac-0) !important;
  748. 		position: fixed !important;
  749. 		z-index: 9;
  750. 		left: 20px;
  751. 		bottom: 20px !important;
  752. 		width: 24px;
  753. 		height: 24px;
  754. 	}
  755.  
  756. 	/* Hide Elements */
  757. 	.premium-block--upgrade,
  758. 	.premium-banner,
  759. 	.section,
  760. 	.ads,
  761. 	footer,
  762. 	#nonPremiumBanner {
  763. 		display: none !important;
  764. 	}
  765.  
  766. 	/* 		div[class="clearfix"]:not([id]) {
  767. 		display: none;
  768. 	} */
  769. 	.mfp-wrap {
  770. 		/* 			position: absolute; */
  771. 		/* 			top: 0px !important; */
  772. 		.popup-mod-tagging {
  773. 			background: var(--bg-0);
  774.  
  775. 			div:first-child {
  776. 				background: none !important;
  777. 			}
  778.  
  779. 			.vote-tag-section {
  780. 				background: none !important;
  781. 			}
  782. 		}
  783.  
  784. 		.popup-mod-requirements {
  785. 			background: var(--bg-0);
  786.  
  787. 			ul {
  788. 				background: none;
  789. 				border: 0;
  790. 			}
  791. 		}
  792. 	}
  793.  
  794. 	/* PORTED FROM DARKENED */
  795. }
  796.  
  797. @-moz-document domain("nexusmods.com") {
  798. 	/* Filter Section */
  799. 	.lg-toolbar {
  800. 		background-color: rgba(0, 0, 0, .5);
  801. 		background-color: var(--bg-0t);
  802. 		/* 		backdrop-filter: blur(2px); */
  803. 	}
  804.  
  805. 	#acc-advanced-collection {
  806.  
  807. 		dt {
  808. 			background-color: var(--bg-0);
  809. 			position: fixed;
  810. 			z-index: 99;
  811. 			left: 0;
  812. 			top: 40px;
  813. 			width: 100vw;
  814. 		}
  815.  
  816. 		dd.open {
  817. 			position: fixed;
  818. 			z-index: 99;
  819. 			left: 0;
  820. 			top: 80px;
  821. 			width: 100vw;
  822. 			height: calc(100vh - 80px);
  823. 			overflow-y: scroll;
  824. 			background-color: var(--bg-0);
  825. 			backdrop-filter: blur(10px);
  826.  
  827. 			div {
  828. 				border: none;
  829. 				padding-top: 2px;
  830. 				padding-bottom: 1px;
  831. 				max-height: calc(100vh - 220px);
  832. 			}
  833.  
  834. 			ul.choice-list,
  835. 			.range-area {
  836. 				background-color: var(--bg-1);
  837. 			}
  838.  
  839. 			.selection :first-child {
  840. 				background-color: var(--bg-1);
  841. 				color: var(--fg-0);
  842. 			}
  843. 		}
  844. 	}
  845. }
  846.  
  847. @-moz-document domain("next.nexusmods.com") {
  848. 	header,
  849. 	header > div {
  850. 		background: var(--bg-0) !important;
  851. 	}
  852. }