☰

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.

目前为 2024-06-11 提交的版本。查看 最新版本。

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

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址