CurseForge.com - Dark Theme

Dark Theme for curseforge.com

当前为 2021-05-31 提交的版本,查看 最新版本

  1. /* ==UserStyle==
  2. @name CurseForge.com - Dark Theme
  3. @namespace https://greasyfork.org/en/users/124677-pabli
  4. @homepageURL https://github.com/pabli24/CurseForge-Dark
  5. @supportURL https://github.com/pabli24/CurseForge-Dark/issues
  6. @version 1.0.4
  7. @description Dark Theme for curseforge.com
  8. @author Pabli
  9. @license CC-BY-NC-4.0
  10. ==/UserStyle== */
  11.  
  12. @-moz-document url-prefix("https://www.curseforge.com") {
  13.  
  14. /* background */
  15. .root-content {
  16. background-color: #19171c;
  17. }
  18.  
  19. /* /account/subscriptions background */
  20. .box, .ui-dialog, .listing-container:not(.custom-formatting) .alert.no-results, .project-list-bubble-item, .u-dropDown:hover .u-dropDownMenu, .spoiler, body[class*="body-user-my"] .listing-user .user-list-item, body[class*="body-user-my"] .listing-user-profile .user-list-item, .body-user-followers .listing-user .user-list-item, .body-user-followers .listing-user-profile .user-list-item, .e-settings-container, .body-publicprojectsettings-members .field-errors, .body-publicprojectsettings-filedefaultrelations .field-errors, .body-publicprojectsettings-clientmatchexclusions span.field-errors:not(#field-path-error) {
  21. box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0,0,0,.06);
  22. background-color: #17141b;
  23. border-color: #232323;
  24. }
  25. .form-gray-footer, .body-privatemessage-create .form-submit {
  26. background-color: #130f19;
  27. border-color: #232323;
  28. }
  29. .border-gray--100 {
  30. border-color: #232323;
  31. }
  32. .project-list-bubble-item .project-stats {
  33. color: #9e95ab;
  34. }
  35. /* /account/notifications followers total post thanks background */
  36. .bg-gray--200 {
  37. background-color: #130f19;
  38. }
  39. /* top bar */
  40. .bg-primary-500 {
  41. background-color: #322052;
  42. }
  43.  
  44. /* footer */
  45. .bg-charcoal {
  46. background-color: #000000;
  47. }
  48.  
  49. /* text */
  50. body {
  51. background: #19171c;
  52. color: #eee;
  53. }
  54. a, .tw-root--theme-light a, a:hover,
  55. .listing th .asc, .listing th .desc,
  56. nav.box a, nav.ui-dialog a, .listing-container:not(.custom-formatting) nav.alert.no-results a, nav.project-list-bubble-item a, .u-dropDown:hover nav.u-dropDownMenu a, nav.spoiler a, body[class*="body-user-my"] .listing-user nav.user-list-item a, body[class*="body-user-my"] .listing-user-profile nav.user-list-item a, .body-user-followers .listing-user nav.user-list-item a, .body-user-followers .listing-user-profile nav.user-list-item a, nav.e-settings-container a, .body-publicprojectsettings-members nav.field-errors a, .body-publicprojectsettings-filedefaultrelations nav.field-errors a {
  57. color: #cab3f5;
  58. }
  59. .text-primary-500,
  60. .b-userAction .b-userAction-item *,
  61. .forum-post-body a,
  62. .icon,
  63. .pagination .pagination-prev:not(.pagination-prev--inactive):not(.pagination-next--inactive) path, .pagination .pagination-next:not(.pagination-prev--inactive):not(.pagination-next--inactive) path,
  64. .button.button--hollow .icon, .form-gray-footer button.button--hollow .icon, .body-privatemessage-create .form-submit button.button--hollow .icon, .user-profile-buttons a.button--hollow .icon, .input > button.button--hollow .icon, .body-privatemessage-details .bcc-form .container-div-recipients .field > button.button--hollow .icon, .body-privatemessage-create .field > button.button--hollow .icon {
  65. color: #cab3f5;
  66. }
  67. .text-gray-500,
  68. .body-publicprojectsettings-general label:not([for="field-donation-attribute"]) {
  69. color: #ccc;
  70. }
  71.  
  72. .button.button--hollow, .form-gray-footer button.button--hollow, .body-privatemessage-create .form-submit button.button--hollow, .user-profile-buttons a.button--hollow, .input>button.button--hollow, .body-privatemessage-details .bcc-form .container-div-recipients .field>button.button--hollow, .body-privatemessage-create .field>button.button--hollow {
  73. background-color: transparent;
  74. color: #eee;
  75. border-color: #4e3b71;
  76. }
  77. .button, .form-gray-footer button, .body-privatemessage-create .form-submit button, .user-profile-buttons a, .input>button, .body-privatemessage-details .bcc-form .container-div-recipients .field>button, .body-privatemessage-create .field>button {
  78. background-color: #322052;
  79. color: #eee;
  80. }
  81. .button[style*="background-color: #F16436"] {
  82. background-color: #322052 !important;
  83. color: #eee;
  84. }
  85.  
  86. .game-header {
  87. background: linear-gradient(180deg,rgba(130, 130, 130, 0.3) 0,rgba(35, 35, 35, 0.9) 74.03%,#19171c 100%);
  88. }
  89.  
  90. .author-upsell__layer {
  91. background-color: rgba(23, 20, 27, 0.8);
  92. }
  93.  
  94. /* black */
  95. [style*="color:#000"] {
  96. color: #fff !important;
  97. }
  98. /* blue */
  99. [style*="color:#36f"] {
  100. color: #8aa8ff !important;
  101. }
  102. [style*="color:#00f"] {
  103. color: #8aa8ff !important;
  104. }
  105. [style*="color:#3030ff"] {
  106. color: #8aa8ff !important;
  107. }
  108. /* red */
  109. [style*="color:#f00"] {
  110. color: #f88 !important;
  111. }
  112. [style*="#ff0000"] {
  113. color: #f88 !important;
  114. }
  115. /* orange */
  116. [style*="color:#f60"] {
  117. color: #ffbb8d !important;
  118. }
  119.  
  120. /* unreaded notification /my-notifications */
  121. .bg-primary--100 {
  122. background-color: rgb(48, 44, 53);
  123. }
  124. .post-notification a, .reply-notification a, .other-notiifcation a, .warning-notification a, .project-notification a {
  125. color: #eee;
  126. }
  127.  
  128. .user-menu__item {
  129. color: #eee;
  130. }
  131.  
  132. .bg-white {
  133. background-color: rgb(0, 0, 0);
  134. }
  135. .bg-accent {
  136. background-color: rgba(20, 20, 20, 1);
  137. }
  138.  
  139. .border-gray-200 {
  140. border-color: #232323;
  141. }
  142. *, *::before, *::after {
  143. border-color: #55525d;
  144. }
  145.  
  146.  
  147.  
  148. .listing.listing-comments.listing-comments-with-indent li.p-comments .comment-indentation, .body-publicproject-details .listing.listing-comments li.p-comments .comment-indentation {
  149. border-color: #434246;
  150. }
  151. .p-comment-actionsAdmin .label {
  152. color: #ff9999;
  153. }
  154. .pagination .pagination-prev.pagination-prev--inactive, .pagination .pagination-prev.pagination-next--inactive, .pagination .pagination-next.pagination-prev--inactive, .pagination .pagination-next.pagination-next--inactive {
  155. background-color: rgba(255, 255, 255, 0.05);
  156. border-color: #232323;
  157. }
  158. .p-comment-post pre {
  159. background-color: #130f19;
  160. color: #bbb;
  161. }
  162. .source-quote {
  163. background-color: #201d25;
  164. }
  165.  
  166. .input input[type="text"], .body-privatemessage-details .bcc-form .container-div-recipients .field input[type="text"], .body-privatemessage-create .field input[type="text"], .input input[type="number"], .body-privatemessage-details .bcc-form .container-div-recipients .field input[type="number"], .body-privatemessage-create .field input[type="number"], .input input[type="search"], .body-privatemessage-details .bcc-form .container-div-recipients .field input[type="search"], .body-privatemessage-create .field input[type="search"], .input input[type="email"], .body-privatemessage-details .bcc-form .container-div-recipients .field input[type="email"], .body-privatemessage-create .field input[type="email"], .input input[type="tel"], .body-privatemessage-details .bcc-form .container-div-recipients .field input[type="tel"], .body-privatemessage-create .field input[type="tel"],
  167. .textarea textarea {
  168. border-color: #232323;
  169. background: #100e13;
  170. }
  171.  
  172.  
  173. .select2-container .select2-choice {
  174. border: 1px solid #232323;
  175. color: #ccc;
  176. background-color: #100e13;
  177. background-image: -webkit-linear-gradient(center bottom,#1c1527 0,#100e13 50%);
  178. background-image: -moz-linear-gradient(center bottom,#1c1527 0,#100e13 50%);
  179. background-image: linear-gradient(to top,#1c1527 0,#100e13 50%);
  180. }
  181. .select2-container .select2-choice .select2-arrow {
  182. border-left: 1px solid #232323;
  183. background: #100e13;
  184. background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0,#1c1527),color-stop(0.6,#100e13));
  185. background-image: -webkit-linear-gradient(center bottom,#1c1527 0,#100e13 60%);
  186. background-image: -moz-linear-gradient(center bottom,#1c1527 0,#100e13 60%);
  187. background-image: linear-gradient(to top,#1c1527 0,#100e13 60%);
  188. }
  189. .select2-container-multi .select2-choices {
  190. background-color: #100e13;
  191. border-color: #232323;
  192. color: #ccc;
  193. }
  194. .select2-container-multi .select2-choices .select2-search-field input {
  195. color: #ccc;
  196. }
  197. .select:not(.is-select2-select), .select .select2-choice {
  198. background-color: #100e13;
  199. border-color: #232323;
  200. color: #e8dff7;
  201. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg' fill='%236e6779'%3E%3Cpath d='M6 1l4 4H2zM6 11l4-4H2z'/%3E%3C/svg%3E");
  202. }
  203. .select2-drop {
  204. border-color: #232323;
  205. }
  206. .select2-drop {
  207. background: #100e13;
  208. color: #ccc;
  209. border: 1px solid #232323;
  210. }
  211. .select2-search input {
  212. border: 1px solid #232323;
  213. background: #100e13 url(https://www.curseforge.com/Content/2-0-7375-30488/Skins/Blocks/images/select2/select2.png) no-repeat 100% -22px;
  214. background: url(https://www.curseforge.com/Content/2-0-7375-30488/Skins/Blocks/images/select2/select2.png) no-repeat 100% -22px,-webkit-gradient(linear,left bottom,left top,color-stop(0.85,#100e13),color-stop(0.99,#232323));
  215. background: url(https://www.curseforge.com/Content/2-0-7375-30488/Skins/Blocks/images/select2/select2.png) no-repeat 100% -22px,-webkit-linear-gradient(center bottom,#100e13 85%,#232323 99%);
  216. background: url(https://www.curseforge.com/Content/2-0-7375-30488/Skins/Blocks/images/select2/select2.png) no-repeat 100% -22px,-moz-linear-gradient(center bottom,#100e13 85%,#232323 99%);
  217. background: url(https://www.curseforge.com/Content/2-0-7375-30488/Skins/Blocks/images/select2/select2.png) no-repeat 100% -22px,linear-gradient(to bottom,#100e13 85%,#232323 99%) 0 0;
  218. }
  219. .select2-dropdown-open .select2-choice {
  220. -webkit-box-shadow: 0 1px 0 #232323 inset;
  221. box-shadow: 0 1px 0 #232323 inset;
  222. }
  223. .select2-results .select2-no-results, .select2-results .select2-searching, .select2-results .select2-ajax-error, .select2-results .select2-selection-limit {
  224. background: #100e13;
  225. }
  226.  
  227. span.field-errors {
  228. color: #ff9999;
  229. }
  230.  
  231. .body-privatemessage-index .p-pm-filter .user-actions .user-action.selected {
  232. background-color: #2a2533;
  233. }
  234.  
  235.  
  236. .border-accent {
  237. border-color: #130f19;
  238. }
  239. .bg-gray--100 {
  240. background-color: #130f19;
  241. }
  242.  
  243. .ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick:before, .ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick:after {
  244. border-color: #fff;
  245. }
  246. .ui-dialog-titlebar {
  247. border-color: #232323;
  248. }
  249.  
  250. /* left menu buttons /minecraft/modpacks */
  251. .bg-primary-0 {
  252. background-color: #311e4e;
  253. }
  254. [class*="hover:bg-primary-0"]:hover {
  255. background-color: #2e253c !important;
  256. }
  257.  
  258. /* recent files table */
  259. .listing-container.listing-container-table:not(.custom-formatting) table thead tr th {
  260. background-color: #1f1b25;
  261. border-color: #212122;
  262. }
  263. .listing-container.listing-container-table:not(.custom-formatting) table tbody tr td {
  264. border-color: #212122;
  265. }
  266. .listing-container.listing-container-table:not(.custom-formatting) table tbody tr {
  267. border-color: #212122;
  268. background-color: #17141b;
  269. }
  270. .text-charcoal {
  271. color: #ccc;
  272. }
  273. .border-primary-100 {
  274. border-color: #212122;
  275. }
  276. .tag {
  277. background-color: #141414;
  278. border-color: #212122;
  279. }
  280.  
  281. /* screenshots gallery */
  282. .featherlight .featherlight-content {
  283. background: #000;
  284. }
  285. .featherlight .featherlight-close-icon {
  286. background: #000;
  287. color: #fff;
  288. }
  289.  
  290. /* TinyMCE editor */
  291. /* div.mce-edit-area {
  292. filter: invert(1) brightness(5) hue-rotate(180deg);
  293. transition: 0.5s;
  294. } */
  295. div.mce-edit-area:hover {
  296. filter: none;
  297. }
  298. body#tinymce {
  299. background: #17141b;
  300. }
  301. html[stylus-iframe$="https://www.curseforge.com"] body {
  302. background: #17141b;
  303. }
  304. .mce-panel {
  305. border: 0 solid #212122;
  306. background-color: #130f19;
  307. }
  308. .mce-btn {
  309. background-color: #130f19;
  310. }
  311. .mce-btn:hover, .mce-btn:focus,
  312. .mce-btn.mce-active, .mce-btn.mce-active:hover {
  313. color: #fff;
  314. background-color: #2e253c;
  315. }
  316. .mce-menu-item-normal.mce-active {
  317. background-color: #311e4e;
  318. }
  319. .mce-menu-item:hover, .mce-menu-item.mce-selected, .mce-menu-item:focus {
  320. color: #fff;
  321. background-color: #2e253c;
  322. }
  323. [style*="border-width: 1px 0px 0px;"] {
  324. border-width: 0px !important;
  325. }
  326.  
  327. .mce-btn i {
  328. text-shadow: 1px 1px #000;
  329. }
  330. .mce-ico,
  331. .mce-menubtn span,
  332. .mce-menu-item .mce-ico, .mce-menu-item .mce-text {
  333. color: #ccc !important;
  334. }
  335. .mce-caret {
  336. border-top: 4px solid #ccc;
  337. }
  338. .mce-container, .mce-container *, .mce-widget, .mce-widget *, .mce-reset {
  339. color: #ccc;
  340. }
  341. .mce-textbox {
  342. background: #0b0a0c;
  343. border: 1px solid #232323;
  344. color: #ccc;
  345. }
  346. .mce-combobox input {
  347. border: 1px solid #232323;
  348. border-right-color: #232323;
  349. }
  350. .mce-window-head {
  351. border-bottom: 1px solid #232323;
  352. }
  353.  
  354.  
  355. .featured-games a, .body-games main a, tbody a, article a, .username a, .user-list-item a, .project-message a, .forum-post-body a, .j-comment-body a, .user-content a, .help-block a, .project-detail__content a, a[rel="modal:open"], a[data-action="post"], #tinymce a, .project-message p a {
  356. text-decoration: none;
  357. }
  358. .border-primary-500 {
  359. border-color: #9e95ab;
  360. }
  361.  
  362.  
  363. .listing th .asc:hover::before, .listing th .desc:hover::before {
  364. border-top-color: rgba(255, 255, 255, .8);
  365. }
  366. .listing th .asc:hover::after, .listing th .desc:hover::after {
  367. border-bottom-color: rgba(255, 255, 255, .8);
  368. }
  369. .listing th .desc.selected::after {
  370. border-bottom-color: #b2b2b2;
  371. }
  372.  
  373. .user-menu__item:hover {
  374. background-color: #2e253c;
  375. color: #fff;
  376. }
  377.  
  378. }