☰

GreasyFork | Modernized ( Optional Dark Theme )

A much cleaner and more modern version of GreasyFork!

目前为 2020-10-19 提交的版本，查看 最新版本。

  1. /* ==UserStyle==
  2.  -- THEME STUFF --
  3. @name           GreasyFork | Modernized ( Optional Dark Theme )
  4. @version        1.3.5
  5. @description    A much cleaner and more modern version of GreasyFork!
  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. --- SETTINGS ---
  16. @var checkbox darkmode "Dark Mode" 0 
  17.  
  18. ==/UserStyle== */
  19. /* Oct, 19 / 20
  20. - Nicer font
  21. - Fixed spacing in some areas
  22. - Fixed alerts box on Dark Mode
  23. - Better sortof seperators
  24. - Transparent blurred header, can be removed by making color-primary var opaque.
  25. - More Tweaks
  26. - Now works with 'Greasy Fork Tweaks'! https://greasyfork.org/en/scripts/368183
  27. /* Oct, 15 / 20
  28. - Added max-width to alerts
  29. - Added boxes around forms and comments
  30. - Added scrollbar-color to firefox
  31. - Added max-heights to script lists
  32. - More stylized buttons
  33. - More fixes
  34. - Made stat charts on Dark Mode light
  35. /* Aug, 31 / 20
  36. - Fixed ad placement in Script Details page
  37. - Less saturated topbar on light theme, You can always change the colors inside of :root{}
  38. - Moved some buttons on scripts list page
  39. /* Aug, 23 / 20
  40. - Properly modernised the Script Details page! :D
  41. /* Aug, 20 / 20
  42. - Softened Shadows
  43. - Changed script details page a bit
  44. - Fixed header on homepage
  45. - Fixed forums on Dark Mode
  46. - Moved search bar to header
  47. - Fixed some textboxes
  48. - More fixes
  49. /* Aug, 16 / 20
  50. - Better positioning & look
  51. - Better sidebar
  52. - Forums support
  53. - Added max-width to some pages
  54. - Better Metadata
  55. */
  56. /* Jul, 6 / 20
  57. - Dark Mode!
  58. */
  59. /* Jun, 7 / 20 
  60. - Changed links back to underlines, Didn't work too well in some areas
  61. */
  62. /* Jun, 5 / 20 
  63. - Minor changes - AKA other things I forgot to log.
  64. - Modern TextBox
  65. - Sortof Modern Dropdown
  66. - Links are now shown by the blue color instead of the underline, hovering displays underline
  67. - Tweaked Header
  68. */
  69. @-moz-document domain("greasyfork.org") {
  70. 	:root {
  71. 		if darkmode {
  72. 			/* DARK MODE COLORS */
  73. 			--color-primary: #272b36bd;
  74. 			--color-secondary: #072b3a ;
  75. 			--color-tertiary: #2c3242;
  76. 			--color-bg: #1c1f28;
  77. 			--color-text: #d1d1d1;
  78. 			--color-link: #00b3ff;
  79. 			--color-link-visited: cyan;
  80. 			--color-highlighted #287721;
  81. 			--shadow-normal: 0 0 5px rgba(0,0,0,0.1);
  82. 			--shadow-button: 0px 0px 2px rgba(150,150,150,0);
  83. 			--border-button:  1px solid rgba(150,150,150,0.1);
  84. 		} else {
  85. 			/* LIGHT MODE COLORS */
  86. 			--color-primary: #980000bd;
  87. 			--color-secondary: white;
  88. 			--color-tertiary: white;
  89. 			--color-bg: #F6F6F6;
  90. 			--color-text: black;
  91. 			--color-link: #0265be;
  92. 			--color-link-visited: #cf2525;
  93. 			--color-highlighted: #9fefa3;
  94. 			--shadow-normal: 0 0 20px rgba(221, 221, 221, 1);
  95. 			--shadow-button: 0px 0px 2px rgba(0,0,0,0.3);
  96. 			--border-button:  1px solid rgba(0,0,0,0.2);
  97. 		}
  98. 	}
  99. 	* {
  100. 		transition: background .2s;
  101. 	}
  102. 		
  103. 		/* TEXT */
  104. 		h3, h2 {
  105. 			color: var(--color-text);
  106. 		}
  107. 		p {
  108. 			color: var(--color-text);
  109. 		}
  110. 		pre.prettyprint {
  111. 			background-color: white;
  112. 			max-height: none;
  113. 		}
  114. 		
  115. 		/* BUTTONS/LINKS */
  116. 		select, option, input, button, code, #user-control-panel > li, 
  117. 		.pagination > *, .script-list + .pagination > *, .user-list + .pagination > *, 
  118. 		a.list-option-button, #script-links > li > *, #script-feedback-suggestion a, .discussion-actions a, .report-link, .edit-comment,
  119. 		#about-user > p:last-child > *, #about-user > a:first-child,
  120.  		#install-area a, .expander, #contribution > a,  #support-url > a, .script-in-sets > a,
  121.  		.sidebarred-main-content > p:last-child a, .sidebarred-main-content > p:first-of-type a {
  122. 			border: none;
  123. 			
  124. 			border: var(--border-button);
  125. 			text-decoration: none;
  126. 			border-radius: .3rem;
  127. 			padding: 5px 14px;
  128. 			font-size: 14px;
  129. 			/*font-family: Segoe UI, Helvetica, Arial, sans-serif, Segoe UI Emoji !important;*/
  130. 			transition: all .2s;
  131. 			background-color: var(--color-secondary);
  132. 			color: var(--color-text) !important;
  133. 		}
  134. 		select:hover, input:hover, input:focus, button:hover, #user-control-panel > li:hover, 
  135. 		a.list-option-button:hover, #script-links > li > *:hover, #script-feedback-suggestion a:hover, #script-links .current span, .discussion-actions a:hover, .report-link:hover, .edit-comment:hover,
  136. 		#about-user > p:last-child > *:hover, #about-user > a:first-child:hover,
  137. 		.pagination > *:hover, .script-list + .pagination > *:hover, .user-list + .pagination > *:hover, .pagination > *:focus, .script-list + .pagination > *:focus, .user-list + .pagination > *:focus, 
  138.  		#install-area a:hover, .expander:hover, #contribution > a:hover, #support-url > a:hover, .script-in-sets > a:hover,
  139.  		.sidebarred-main-content > p:last-child a:hover, .sidebarred-main-content > p:first-of-type a:hover {
  140. 			box-shadow: 0px 0px 8px rgba(0,0,0,0.1) !important;
  141. 			background: var(--color-tertiary) !important;
  142. 			text-decoration: none !important;
  143. 		}
  144. 		
  145. 		nav > li > a, .pagination > a, #user-control-panel > li > a, #script-links > li > a, div[class="list-option-group"] > ul > li > a, h2 > a ,
  146. 		.comment-meta-item-main a {
  147. 			text-decoration: none;
  148. 			color: var(--color-text);
  149. 		}
  150. 		a {
  151. 			display: inline-block;
  152. 		}
  153. 		a, a.discussion-title, a.discussion-title:hover {
  154. 			text-underline-offset: .25em;
  155. 			color: var(--color-link);
  156. 		}
  157. 		a:hover, a.discussion-title:hover {
  158. 			text-decoration: underline;
  159. 		}
  160. 		a:visited {
  161. 			color: var(--color-link-visited);
  162. 		}
  163. 		body {
  164. 			background-color: var(--color-bg);
  165. 			font-family: Segoe UI, Helvetica, Arial, sans-serif, Segoe UI Emoji !important;
  166. 		}
  167. 		body > .width-constraint {
  168. 			max-width: 100% !important;
  169. 			margin: 0;
  170. 			padding: 10px;
  171. 			display: flex;
  172. 			flex-wrap: wrap;
  173. 		}
  174. 		body > .width-constraint > * {
  175. 			width: 100%;
  176. 		}
  177. 		body > .width-constraint > section, .notice, .alert {
  178. 			max-width: 80rem;
  179. 			margin: auto !important;
  180. 		}
  181. 		body > .width-constraint > section:first-child, .notice, .alert {
  182. 			margin-top: 20px !important;
  183. 		}
  184. 		body > .width-constraint > section:last-of-type {
  185. 			margin-bottom: 40px !important;
  186. 		}
  187. 		.alert {
  188. 			background-color: var(--color-secondary);
  189. 			margin-bottom: 20px !important;
  190. 		}
  191. 		.alert * {
  192. 			color: var(--color-text) !important;
  193. 		}
  194. 		
  195. 		section {
  196. 			border: none !important;
  197. 		}
  198. 		
  199. 		.notice {
  200. 			background-color: var(--color-secondary);
  201. 		}
  202. 		
  203. 		
  204. 		.text-content, .discussion-list, #browse-user-list, 
  205. 		#script-meta, #additional-info, #script-show-info-ad, #script-content .script-discussion-list, canvas, 
  206. 		/*.multiform-page*/, #script-content form:not(.script-in-sets), table, .comment {
  207. 			padding: 1rem !important;
  208. 			margin: 0 !important;
  209. 			margin-bottom: 20px !important;
  210. 			border: none;
  211. 			box-shadow: var(--shadow-normal) !important;
  212. 			background-color: var(--color-tertiary);
  213. 			color: var(--color-text);
  214. 			border-radius: 5px;
  215. 		}
  216. 		.text-content > *:first-child {
  217. 			margin-top: 0 !important;
  218. 		}
  219. 		.text-content > *:last-child, #script-meta > *:last-child {
  220. 			margin-bottom: 0 !important;
  221. 		}
  222. 		
  223. 		
  224. 	@media only screen and (min-width: 940px) { 
  225. 		
  226. 		
  227. 		body {
  228. 			margin-top: 44px;
  229. 		}
  230. 		
  231. 		
  232. 		
  233. 		
  234.  
  235. 		/* HEADER */
  236. 		#main-header {
  237. 			position: fixed;
  238. 			top: 0;
  239. 			width: 100%;
  240. 			height: 44px;
  241. 			padding: 0;
  242. 			z-index: 5;
  243. 			background-image: none;
  244. 			background-color: var(--color-primary);
  245. 			backdrop-filter: blur(10px);
  246. 		}
  247. 		#main-header > .width-constraint {
  248. 			max-width: 100%;
  249. 			padding-left: 10px;
  250. 			padding-right: 10px;
  251. 			display: flex !important;
  252. 			align-items: center;
  253. 			margin: auto !important;
  254. 		}
  255. 		#site-name {
  256. 			position: absolute;
  257. 			width: 200px;
  258. 			min-width: 200px;
  259. 			height: 30px;
  260. 			margin-top: auto;
  261. 			margin-bottom: auto;
  262. 		}
  263. 		#site-name img {
  264. 			height: 30px;
  265. 		}
  266. 		#site-name-text {
  267. 			margin-top: 0 !important;
  268. 		}
  269. 		#site-name-text > h1 {
  270. 			height: 30px;
  271. 			font-size: 25px;
  272. 			font-weight: 600;
  273. 		}
  274.  
  275. 		#site-nav {
  276. 			display: flex !important;
  277. 			height: 40px;
  278. 			padding-top: 1px;
  279. 			width: auto;
  280. 			align-items: center;
  281. 			margin-left: auto;
  282. 			margin-top: 0 !important;
  283. 		}
  284. 		#site-nav > * {
  285. 			position: relative !important;
  286. 		}
  287. 		#site-nav > nav {
  288. 			width: 250px !important;
  289. 			min-width: 250px;
  290. 		}
  291. 		#nav-user-info {
  292. 			width: 100%;
  293. 			min-width: 300px;
  294. 		}
  295. 		#nav-user-info > form > select {
  296. 			margin: 0 10px;
  297. 		}
  298. 		
  299. 		.with-submenu > nav {
  300. 			background-color: var(--color-primary);
  301. 		}
  302. 		
  303. 		/* SIDEBAR */
  304. 		.sidebar ~ div {
  305. 			max-width: 50rem;
  306. 		}
  307. 		.sidebar {
  308. 			position: sticky;
  309. 			top: 44px;
  310. 			order: -1;
  311. 			margin: -10px 15px -10px -10px;
  312. 			padding: 20px 0 20px 10px;
  313. 			height: calc(100vh - 84px);
  314. 			max-height: calc(100vh - 84px);
  315. 			overflow-y: auto;
  316. 			overflow-x: hidden;
  317. 			z-index: 6;
  318. 			text-decoration: none !important;
  319. 			
  320. 			scrollbar-color: var(--color-primary) var(--color-bg);
  321. 		}
  322. 			.sidebar-search {
  323. 				position: fixed;
  324. 				top: 7px;
  325. 				left: 200px;
  326. 				height: 29px;
  327. 			}
  328. 				.sidebar-search input[type="search"] {
  329. 					height: 30px;
  330. 					border: none;
  331. 					border-radius: .3rem;
  332. 					width: 200px;
  333. 					max-width: calc(100vw - 300px);
  334. 					color: var(--color-text) !important;
  335. 					padding-inline-end: 30px;
  336. 					box-shadow: 0px 0px 2px rgba(0,0,0,0.1);
  337. 					background-color: var(--color-tertiary);
  338. 					transition: width .2s; 
  339. 				}
  340. 				.sidebar-search input[type="search"]:focus, .sidebar-search input[type="search"]:hover {
  341. 					width: 500px;
  342. 					transition: width .5s; 
  343. 				}
  344. 				.sidebar-search input[type="submit"] {
  345. 					padding-inline-start: 6px !important;
  346. 				}
  347. 			#script-list-option-groups > div, .list-option-group {
  348. 				padding: 10px;
  349. 				color: var(--color-text);
  350. 				
  351. 				background-color: var(--color-secondary);
  352. 				border-radius: .3rem;
  353. 				box-shadow: 0px 0px 2px rgba(0,0,0,0.1);
  354. 			}
  355. 				#script-list-option-groups > div > ul, .list-option-group > ul {
  356. 					background-color: transparent;
  357. 					box-shadow: none;
  358. 					border: none;
  359. 					margin: -10px;
  360. 				}
  361. 				.list-current {
  362. 					border-left-color: var(--color-primary) !important;
  363. 					border-left-width: 4px !important;
  364. 				}
  365. 				if darkmode {
  366. 					.list-current {
  367. 						background: none !important;
  368. 						background-color: var(--color-tertiary) !important;
  369. 						color: var(--color-text);
  370. 					}
  371. 					.list-option-group a:hover, .list-option-group a:focus {
  372. 						background: none !important;
  373. 						background-color: var(--color-tertiary) !important;
  374. 						box-shadow: none !important;
  375. 					}
  376. 				}
  377. 					
  378. 					
  379. 	
  380. 					
  381. 					
  382. 					
  383. 		/* LISTS */
  384. 		#browse-script-list, #user-script-list, #user-deleted-script-list {
  385. 			display: grid;
  386. 			grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  387. 			grid-gap: 10px;
  388. 			border: none;
  389. 			box-shadow: none;
  390. 			background-color: transparent;
  391. 		}
  392. 		
  393. 		
  394. 	}
  395. 		
  396. 		
  397. 			#browse-script-list > li, #user-script-list > li, #user-deleted-script-list > li {
  398. 				border: none !important;
  399. 				border-radius: .3rem;
  400. 				background-color: var(--color-secondary);
  401. 				transition: box-shadow .2s;
  402. 				color: var(--color-text);
  403. 			}
  404. 			#browse-script-list > li:hover, #user-script-list > li:hover, #user-deleted-script-list > li:hover {
  405. 				box-shadow: 0px 2px 20px rgba(0,0,0,0.1);
  406. 			}
  407. 				#browse-script-list > li > article, #user-script-list > li > article, #user-deleted-script-list > li > article {
  408. 					height: 100%;
  409. 					display: flex;
  410. 					flex-wrap: wrap;
  411. 				}
  412. 					#browse-script-list > li > article > h2 {
  413. 						overflow: hidden;
  414. 						max-height: 100px;
  415. 					}
  416. 					.inline-script-stats {
  417. 						margin-top: auto;
  418. 						width: 100%;
  419. 					}
  420. 					#browse-script-list > li > article > h2 > a {
  421. 						font-weight: 600;
  422. 					}
  423. 					#browse-script-list > li > article > h2::before {
  424. 						content: "";
  425. 						display: flex;
  426. 						position: relative;
  427. 						z-index: 2;
  428. 						width: 100%;
  429. 						height: 40px;
  430. 						color: var(--color-secondary);
  431. 						background: linear-gradient(transparent, currentColor);
  432. 						box-shadow: 0 10px 0 var(--color-secondary);
  433. 						margin-top: -40px;
  434. 						transform: translateY(100px);
  435. 						pointer-events: none;
  436. 					}
  437. 					/* Greasy Fork Tweaks Thumbnail Images */
  438. 					#browse-script-list > li > article ~ div {
  439. 						height: auto !important;
  440. 					}
  441. 					#browse-script-list > li > article ~ div > img {
  442. 						max-width: 100% !important;
  443. 					}
  444. 				
  445. 			.script-list li:not(.ad-entry) {
  446. 				border-right: 1px solid #DDDDDD;
  447. 			}
  448. 			.ad-entry, #codefund {
  449. 				grid-column: 1/-1;
  450. 			}
  451. 			.ad-entry > div {
  452. 				height: auto !important;
  453. 				padding: 0 !important;
  454. 			}
  455. 			[data-ea-publisher].loaded .ea-content a:link, [data-ea-type].loaded .ea-content a:link {
  456. 				color: var(--color-link) !important;
  457. 			}
  458. 			
  459. 			
  460. 		.sidebarred-main-content {
  461. 			display: flex;
  462. 			flex-wrap: wrap;
  463. 			height: min-content;
  464. 		}
  465. 		.sidebarred-main-content > * {
  466. 			width: 100%;
  467. 			
  468. 		}
  469. 		.sidebarred-main-content > p {
  470. 			width: auto;
  471. 			margin: 1em 4px 0;
  472. 		}
  473. 		.sidebarred-main-content > p:last-child {
  474. 			order: -1;
  475. 		}
  476. 			
  477. 		/*** FILTER BY SITES PAGE ***/
  478. 		
  479. 		/*** SCRIPT DETAILS PAGE ***/
  480. 		
  481. 		#script-info {
  482. 			display: flex;
  483. 			flex-wrap: wrap;
  484. 			
  485. 			background: none !important;
  486. 		}
  487. 		#script-info > * {
  488. 			width: 100%;
  489. 		}
  490. 		#script-info, #additional-info, #user-profile {
  491. 			background: none;
  492. 			background-color: var(--color-tertiary);
  493. 			box-shadow: none;
  494. 			color: var(--color-text);
  495. 		}
  496. 		#script-info > header {
  497. 			order: -1;
  498. 			width: 100%;
  499. 		}
  500. 		#script-info header h2 {
  501. 			font-weight: 600;
  502. 		}
  503. 		#script-links {
  504. 			margin: 12px 0;
  505. 			margin-top: 12px !important;
  506. 			padding: 0;
  507. 			display: flex;
  508. 			flex-wrap: wrap;
  509. 			
  510. 			position: sticky;
  511. 			top: 58px;
  512. 			display: inline;
  513. 			width: 150px;
  514. 			height: min-content;
  515. 		}
  516. 		#script-links .current {
  517. 			border: none !important;
  518. 			box-shadow: none;
  519. 		}
  520. 		#script-links li {
  521. 			margin: 8px 0px;
  522. 		}
  523. 		.script-show-applies-to .inline-list {
  524. 			display: flex;
  525. 			flex-wrap: wrap;
  526. 		}
  527. 		#script-content {
  528. 			margin: 20px;
  529. 			width: calc(100% - 200px);
  530. 			display: flex;
  531. 			flex-wrap: wrap;
  532. 			height: min-content;
  533. 		}
  534. 		#script-content > * {
  535. 			width: 100%;
  536. 		}
  537. 		.install-link {
  538. 			background-color: var(--color-highlighted) !important;
  539. 		}
  540. 		#script-feedback-suggestion, .script-in-sets, #install-area {
  541. 			margin: 0;
  542. 			width: auto !important;
  543. 			display: flex;
  544. 			flex-wrap: wrap;
  545. 			margin-bottom: 1rem;
  546. 			font-size: 0;
  547. 		}
  548. 		#script-feedback-suggestion a, .script-in-sets *, #install-area a {
  549. 			font-size: 14px;
  550. 			margin: 0 4px;
  551. 		}
  552. 		.discussion-snippet {
  553. 			white-space: normal !important;
  554. 		}
  555. 		.script-in-sets {
  556. 			order: 1;
  557. 			width: 100% !important;
  558. 			margin-bottom: 1rem;
  559. 		}
  560. 		#script-meta {
  561. 			order: 2;
  562. 			max-width: none;
  563. 			flex: 1 1 400px;
  564. 		}
  565. 		#script-meta dt {
  566. 			max-width: 100px;
  567. 		}
  568. 		
  569. 		#script-show-info-ad {
  570. 			order: 3;
  571. 			margin-left: 1em !important;
  572. 			flex: 1 1 200px;
  573. 		}
  574. 		#additional-info {
  575. 			order: 3;
  576. 			display: flex;
  577. 			flex-wrap: wrap;
  578. 		}
  579. 		#additional-info > * {
  580. 			width: 100%;
  581. 		}
  582. 		.user-screenshots {
  583. 			order: -1;
  584. 			margin-top: 0 !important;
  585. 			margin-bottom: 1em;
  586. 			width: 100%;
  587. 		}
  588. 		.post-discussion {
  589. 			width: 100%;
  590. 		}
  591. 		
  592. 		section > *:first-child, #script-content > *:first-child, #script-content p, #script-content h3, form > p:first-of-type {
  593. 			margin-top: 0 !important;
  594. 		}
  595. 		.multiform-page {
  596. 			padding: 0 !important;
  597. 		}
  598. 		
  599. 		canvas {
  600. 			background-color: white !important;
  601. 		}
  602. 		/*** FORUMS ***/
  603. 		.discussion-read {
  604. 			background-color: var(--color-secondary) !important;
  605. 		}
  606. 		.discussion-list-item {
  607. 			border-top: var(--border-button) !important;
  608. 			border-bottom: var(--border-button) !important;
  609. 		}
  610. 		.user-content {
  611. 			background: none;
  612. 		}
  613. 			
  614. 		/*** USER PAGE ***/
  615. 		/* About User */
  616. 		
  617. 		.report-link-abs {
  618. 			position: relative;
  619. 		}
  620. 		/* Control Panel */
  621. 		#user-control-panel {
  622. 			display: flex;
  623. 			flex-wrap: wrap;
  624. 			grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  625. 			grid-gap: 10px;
  626. 			padding: 10px;
  627. 		}
  628. 			#user-control-panel > li {
  629. 				text-decoration: none;
  630. 				list-style: none;
  631. 				text-align: center;
  632. 				background-color: var(--color-secondary);
  633. 				padding: 5px 16px;
  634. 				border-radius: .3rem;
  635. 			}
  636. 		
  637. 	}