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-19 提交的版本。查看 最新版本

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

QingJ © 2025

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