☰

GreasyFork | Modernized ( Optional Dark Theme )

A much cleaner and more modern version of GreasyFork!

目前為 2020-11-15 提交的版本，檢視 最新版本。

  1. /* ==UserStyle==
  2.  -- THEME STUFF --
  3. @name           GreasyFork | Modernized ( Optional Dark Theme )
  4. @version        1.3.11
  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. /* Btw I didn't know how version numbers properly worked before when I first started making this so... */
  20. /* Nov, 15 / 20
  21. - Added borders to sections
  22. - More fixes
  23. /* Nov, 12 / 20
  24. - Changed header to accommodate for other languages & Username lengths (I didn't think about that stuff before, woops!)
  25. - Added border around script list items 
  26. /* Nov, 11 / 20
  27. - Fixed login screen
  28. - Modernised login button in header
  29. - More fixes & Tweaks
  30. - Better thumbnails with Greasy Fork镜像 Tweaks https://gf.qytechs.cn/en/scripts/368183
  31. /* Nov, 7 / 20
  32. - Modernised Favorites List
  33. - Tweaked sidebar scrollbar
  34. - Improved Header & Search bar!
  35. /* Nov, 4 / 20
  36. - Modernised dropdown, contributed by: https://codeberg.org/Riedler
  37. /* Oct, 23 / 20
  38. - Changed card color in Dark Mode
  39. - More fixes
  40. - More tweaks
  41. - More links to buttons...
  42. - Changed button color on hover in light theme
  43. /* Oct, 19 / 20
  44. - Nicer font
  45. - Fixed spacing in some areas
  46. - Fixed alerts box on Dark Mode
  47. - Better sortof seperators
  48. - Transparent blurred header, can be removed by making color-primary var opaque.
  49. - More Tweaks
  50. - Now works with 'Greasy Fork镜像 Tweaks'! https://gf.qytechs.cn/en/scripts/368183
  51. /* Oct, 15 / 20
  52. - Added max-width to alerts
  53. - Added boxes around forms and comments
  54. - Added scrollbar-color to firefox
  55. - Added max-heights to script lists
  56. - More stylized buttons
  57. - More fixes
  58. - Made stat charts on Dark Mode light
  59. /* Aug, 31 / 20
  60. - Fixed ad placement in Script Details page
  61. - Less saturated topbar on light theme, You can always change the colors inside of :root{}
  62. - Moved some buttons on scripts list page
  63. /* Aug, 23 / 20
  64. - Properly modernised the Script Details page! :D
  65. /* Aug, 20 / 20
  66. - Softened Shadows
  67. - Changed script details page a bit
  68. - Fixed header on homepage
  69. - Fixed forums on Dark Mode
  70. - Moved search bar to header
  71. - Fixed some textboxes
  72. - More fixes
  73. /* Aug, 16 / 20
  74. - Better positioning & look
  75. - Better sidebar
  76. - Forums support
  77. - Added max-width to some pages
  78. - Better Metadata
  79. */
  80. /* Jul, 6 / 20
  81. - Dark Mode!
  82. */
  83. /* Jun, 7 / 20 
  84. - Changed links back to underlines, Didn't work too well in some areas
  85. */
  86. /* Jun, 5 / 20 
  87. - Minor changes - AKA other things I forgot to log.
  88. - Modern TextBox
  89. - Sortof Modern Dropdown
  90. - Links are now shown by the blue color instead of the underline, hovering displays underline
  91. - Tweaked Header
  92. */
  93. @-moz-document domain("gf.qytechs.cn") {
  94. 	:root {
  95. 		if darkmode {
  96. 			/* DARK MODE COLORS */
  97. 			--color-primary: #272b36bd;
  98. 			--color-secondary: #072b3a ;
  99. 			--color-tertiary: #2c3242;
  100. 			--color-bg: #1c1f28;
  101. 			--color-text: #d1d1d1;
  102. 			--color-link: #00b3ff;
  103. 			--color-link-visited: cyan;
  104. 			--color-highlighted #287721;
  105. 			--shadow-normal: 0 0px 3px rgba(0,0,0,0.5);
  106. 			--shadow-button: none;
  107. 			--border-button:  1px solid rgba(150,150,150,.1);
  108. 		} else {
  109. 			/* LIGHT MODE COLORS */
  110. 			--color-primary: #980000bd;
  111. 			--color-secondary: white;
  112. 			--color-tertiary: white;
  113. 			--color-bg: #F6F6F6;
  114. 			--color-text: black;
  115. 			--color-link: #0265be;
  116. 			--color-link-visited: #cf2525;
  117. 			--color-highlighted: #9fefa3;
  118. 			--shadow-normal: 0 0 10px rgba(0, 0, 0, .01);
  119. 			--shadow-button: 0px 0px 0px 20px var(--color-bg) inset;
  120. 			--border-button:  1px #dcdcdc solid;
  121. 		}
  122. 	}
  123. 	* {
  124. 		transition: background .2s;
  125. 	}
  126. 		
  127. 		/* TEXT */
  128. 		h3, h2 {
  129. 			color: var(--color-text);
  130. 		}
  131. 		h3 {
  132. 			margin-bottom: 1em !important;
  133. 		}
  134. 		p {
  135. 			color: var(--color-text);
  136. 		}
  137. 		pre, textarea, .preview-results {
  138. 			background-color: var(--color-secondary) !important;
  139. 			border: var(--border-button) !important;
  140. 			border-radius: .3rem;
  141. 			color: var(--color-text);
  142. 		}
  143. 		pre.prettyprint {
  144. 			background-color: white !important;
  145. 			max-height: none;
  146. 			margin-top: 0;
  147. 		}
  148. 		
  149. 		.post-discussion > p:first-child,
  150.  		.sidebarred-main-content > p,
  151. 		.post-discussion > div:last-of-type ,
  152.  		{
  153. 			font-size: 0;
  154. 		}
  155. 		.sidebarred-main-content > h2 + p {
  156. 			font-size: inherit !important;
  157. 			margin-top: 0 !important;
  158. 		}
  159. 		
  160. 		/* BUTTONS/LINKS */
  161. 		select, option, input, button, code, #user-control-panel > li, .sign-in-link a,
  162. 		.pagination > *, .script-list + .pagination > *, .user-list + .pagination > *, 
  163. 		a.list-option-button, #script-links > li > *, #script-feedback-suggestion a, .discussion-actions a, .report-link, .edit-comment, .post-discussion > p:first-of-type a, .discussion-up-level a, .post-discussion > div > .inline-list > li a,
  164. 		#script-content > ul li a,
  165. 		#about-user > p:last-child > *, #about-user > a:first-child,
  166.  		#install-area a, .expander, #contribution > a,  #support-url > a, .script-in-sets > a,
  167.  		.sidebarred-main-content > p:last-child a, .sidebarred-main-content > p:first-of-type a,
  168.  		#home-top-sites a,
  169.  		#by-site-list > li > a {			
  170. 			border: var(--border-button) !important;
  171. 			text-decoration: none !important;
  172. 			border-radius: .3rem !important;
  173. 			padding: 5px 14px;
  174. 			font-size: 14px;
  175. 			font-family: Segoe UI, Helvetica, Arial, sans-serif, Segoe UI Emoji !important;
  176. 			transition: all .2s;
  177. 			background-color: var(--color-secondary) !important;
  178. 			color: var(--color-text) !important;
  179. 			list-style: none;
  180. 			outline: none !important;
  181. 		}
  182. 		code {
  183. 			padding: 2px 4px !important;
  184. 		}
  185. 		select:hover, input:hover, input:focus, button:hover, #user-control-panel > li:hover,  .sign-in-link a:hover,
  186. 		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, .post-discussion > p:first-of-type a:hover, .discussion-up-level a:hover, .post-discussion > div > .inline-list > li a:hover,
  187. 		#script-content > ul li a:hover,
  188. 		#about-user > p:last-child > *:hover, #about-user > a:first-child:hover,
  189. 		.pagination > *:hover, .script-list + .pagination > *:hover, .user-list + .pagination > *:hover, .pagination > *:focus, .script-list + .pagination > *:focus, .user-list + .pagination > *:focus, 
  190.  		#install-area a:hover, .expander:hover, #contribution > a:hover, #support-url > a:hover, .script-in-sets > a:hover,
  191.  		.sidebarred-main-content > p:last-child a:hover, .sidebarred-main-content > p:first-of-type a:hover,
  192.  		#home-top-sites a:hover,
  193.  		#by-site-list > li > a:hover {
  194. 			box-shadow: var(--shadow-button) !important;
  195. 			background-color: var(--color-tertiary) !important;
  196. 			text-decoration: none !important;
  197. 		}
  198. 		
  199. 		select:not(#remove-scripts-included) { /* Contributed by https://codeberg.org/Riedler */
  200. 			appearance:none;
  201. 			background-image:url("https://riedler.wien/sfto/darklearning/double_triangles_top_bottom_AAA.svg");
  202. 			background-repeat:no-repeat;
  203. 			background-position:center right 7px !important;
  204. 			background-size:auto 50%;
  205. 		}
  206. 		
  207. 		
  208. 		nav > li > a, .pagination > a, #user-control-panel > li > a, #script-links > li > a, div[class="list-option-group"] > ul > li > a, h2 > a ,
  209. 		.comment-meta-item-main a {
  210. 			text-decoration: none;
  211. 			color: var(--color-text);
  212. 		}
  213. 		.pagination {
  214. 			margin-bottom: 20px;
  215. 		}
  216. 		a {
  217. 			display: inline-block;
  218. 		}
  219. 		a, a.discussion-title, a.discussion-title:hover {
  220. 			text-underline-offset: .25em;
  221. 			color: var(--color-link);
  222. 		}
  223. 		a:hover, a.discussion-title:hover {
  224. 			text-decoration: underline;
  225. 		}
  226. 		a:visited {
  227. 			color: var(--color-link-visited);
  228. 		}
  229. 		body, html {
  230. 			background-color: var(--color-bg);
  231. 			font-family: Segoe UI, Helvetica, Arial, sans-serif, Segoe UI Emoji !important;
  232. 		}
  233. 		body > .width-constraint {
  234. 			max-width: 100% !important;
  235. 			margin: 0;
  236. 			padding: 10px;
  237. 			display: flex;
  238. 			flex-wrap: wrap;
  239. 		}
  240. 		body > .width-constraint > * {
  241. 			width: 100%;
  242. 		}
  243. 		body > .width-constraint > section, .notice, .alert, .announcement {
  244. 			max-width: 80rem;
  245. 			margin: auto !important;
  246. 		}
  247. 		body > .width-constraint > section:first-child, .notice, .alert {
  248. 			margin-top: 20px !important;
  249. 		}
  250. 		body > .width-constraint > section:last-of-type {
  251. 			margin-bottom: 40px !important;
  252. 		}
  253. 		.alert, .announcement {
  254. 			background-color: var(--color-secondary);
  255. 			margin-bottom: 20px !important;
  256. 		}
  257. 		.alert *, .announcement {
  258. 			color: var(--color-text) !important;
  259. 			padding: 10px;
  260. 		}
  261. 		.announcement {
  262. 			margin-top: 10px !important;
  263. 			border-radius: .3rem;
  264. 		}
  265. 		section {
  266. 			border: none !important;
  267. 		}
  268. 		
  269. 		.notice {
  270. 			background-color: var(--color-secondary);
  271. 		}
  272. 		
  273. 		
  274. 		.text-content, .discussion-list, #browse-user-list, .inline-form, #new_user,
  275. 		#script-meta, #additional-info, #script-show-info-ad, #script-content .script-discussion-list, canvas, 
  276. 		/*.multiform-page*/, #script-content form:not(.script-in-sets), table, .comment,
  277.  		#script-content > ul {
  278. 			padding: 1rem !important;
  279. 			margin: 0 auto !important;
  280. 			margin-bottom: 20px !important;
  281. 			border: var(--border-button) !important;
  282. 			box-shadow: var(--shadow-normal) !important;
  283. 			background-color: var(--color-tertiary) !important;
  284. 			color: var(--color-text);
  285. 			border-radius: .5rem;
  286. 		}
  287. 		.text-content > *:first-child {
  288. 			margin-top: 0 !important;
  289. 		}
  290. 		.text-content > *:last-child, #script-meta > *:last-child {
  291. 			margin-bottom: 0 !important;
  292. 		}
  293. 		
  294. 		
  295. 	@media only screen and (min-width: 940px) { 
  296. 		
  297. 		
  298. 		body {
  299. 			margin-top: 44px;
  300. 		}
  301. 		
  302. 		
  303. 		
  304. 		
  305.  
  306. 		/* HEADER */
  307. 		#main-header {
  308. 			position: fixed;
  309. 			top: 0;
  310. 			width: 100%;
  311. 			height: 44px;
  312. 			padding: 0;
  313. 			z-index: 5;
  314. 			background-image: none;
  315. 			background-color: var(--color-primary);
  316. 			backdrop-filter: blur(10px);
  317. 		}
  318. 		#main-header > .width-constraint {
  319. 			max-width: 100%;
  320. 			padding-left: 10px;
  321. 			padding-right: 10px;
  322. 			display: flex !important;
  323. 			align-items: center;
  324. 			margin: auto !important;
  325. 		}
  326. 		#site-name {
  327. 			position: absolute;
  328. 			width: 150px;
  329. 			min-width: 150px;
  330. 			height: 30px;
  331. 			margin-top: auto;
  332. 			margin-bottom: auto;
  333. 		}
  334. 		#site-name img {
  335. 			height: 30px;
  336. 		}
  337. 		#site-name-text {
  338. 			margin-top: 0 !important;
  339. 		}
  340. 		#site-name-text > h1 {
  341. 			height: 30px;
  342. 			font-size: 25px;
  343. 			font-weight: 600;
  344. 		}
  345.  
  346. 		#site-nav {
  347. 			display: flex !important;
  348. 			height: 40px;
  349. 			padding-top: 1px;
  350. 			width: auto;
  351. 			align-items: center;
  352. 			margin-top: 0 !important;
  353. 			width: 100%;
  354. 			justify-content: flex-end;
  355. 		}
  356. 		#site-nav > * {
  357. 			position: relative !important;
  358. 		}
  359. 		#site-nav > nav {
  360. 			width: 100% !important;
  361. 			height: 20px;
  362. 			display: flex;
  363. 			align-items: center;
  364. 			justify-content: flex-end;
  365. 		}
  366. 		#nav-user-info {
  367. 			width: auto;
  368. 			order: 2;
  369. 			height: 20px;
  370. 			display: flex;
  371. 			align-items: center;
  372. 		}
  373. 		#nav-user-info .sign-out-link, #nav-user-info .sign-in-link {
  374. 			width: max-content !important;
  375. 		}
  376. 		#nav-user-info > form > select {
  377. 			margin: 0 0 0 26px;
  378. 			height: 32px;
  379. 		}
  380. 		
  381. 		#site-nav > nav > li + li {
  382. 			margin-left: 1em;
  383. 		}
  384. 		#nav-user-info .user-profile-link a, #nav-user-info .sign-out-link a {
  385. 			text-decoration: none;
  386. 			font-size: 16px;
  387. 		}
  388. 		#nav-user-info .sign-out-link {
  389. 			font-size: 0;
  390. 			margin-left: 16px;
  391. 		}
  392. 		#nav-user-info .with-submenu {
  393. 			padding-right: 16px;
  394. 		}
  395. 		#nav-user-info a:hover {
  396. 			text-decoration: underline;
  397. 		}
  398. 		.with-submenu > nav {
  399. 			background-color: var(--color-primary);
  400. 			backdrop-filter: blur(10px);
  401. 		}
  402. 		
  403. 		/* SIDEBAR */
  404. 		.sidebar ~ div {
  405. 			max-width: 50rem;
  406. 		}
  407. 		.sidebar {
  408. 			position: sticky;
  409. 			top: 44px;
  410. 			order: -1;
  411. 			margin: -10px 15px -10px -10px;
  412. 			padding: 20px 0 20px 10px;
  413. 			height: calc(100vh - 84px);
  414. 			max-height: calc(100vh - 84px);
  415. 			overflow-y: auto;
  416. 			overflow-x: hidden;
  417. 			z-index: 6;
  418. 			text-decoration: none !important;
  419. 			
  420. 			scrollbar-color: var(--color-primary) transparent;
  421. 			scrollbar-width: thin;
  422. 		}
  423. 			.sidebar-search {
  424. 				position: fixed;
  425. 				top: 5px;
  426. 				left: 180px;
  427. 				
  428. 			}
  429. 				.sidebar-search input[type="search"] {
  430. 					height: 32px;
  431. 					border: none !important;
  432. 					border-radius: .3rem !important;
  433. 					width: 170px;
  434. 					text-align: center;
  435. 					color: var(--color-text) !important;
  436. 					padding-inline-end: 30px;
  437. 					box-shadow: 0px 0px 2px rgba(0,0,0,0.1) !important;
  438. 					background-color: var(--color-primary) !important;
  439. 					color: white !important;
  440. 					font-weight: 700;
  441. 					filter: opacity(.5);
  442. 					transition: width .2s, background-color .5s, color .5s, filter .2s; 
  443. 				}
  444. 				.sidebar-search input[type="search"]:focus, .sidebar-search input[type="search"]:hover {
  445. 					width: calc(100vw - 450px);
  446. 					transition: width .5s, background-color .2s, color .2s, filter .2s; 
  447. 					filter: opacity(1);
  448. 					background-color: var(--color-secondary) !important;
  449. 					color: var(--color-text) !important;
  450. 				}
  451. 				.sidebar-search input[type="submit"] {
  452. 					display: none;
  453. 				}
  454. 			#script-list-option-groups > div, .list-option-group {
  455. 				padding: 10px;
  456. 				color: var(--color-text);
  457. 				
  458. 				background-color: var(--color-secondary);
  459. 				border-radius: .3rem;
  460. 				box-shadow: 0px 0px 2px rgba(0,0,0,0.1);
  461. 			}
  462. 				#script-list-option-groups > div > ul, .list-option-group > ul {
  463. 					background-color: transparent;
  464. 					box-shadow: none;
  465. 					border: none;
  466. 					margin: -10px;
  467. 				}
  468. 				.list-current {
  469. 					border-left-color: var(--color-primary) !important;
  470. 					border-left-width: 4px !important;
  471. 				}
  472. 				if darkmode {
  473. 					.list-current {
  474. 						background: none !important;
  475. 						background-color: var(--color-tertiary) !important;
  476. 						color: var(--color-text);
  477. 					}
  478. 					.list-option-group a:hover, .list-option-group a:focus {
  479. 						background: none !important;
  480. 						background-color: var(--color-tertiary) !important;
  481. 						box-shadow: none !important;
  482. 					}
  483. 				}
  484. 					
  485. 					
  486. 	
  487. 					
  488. 					
  489. 					
  490. 		/* LISTS */
  491. 		.sidebarred-main-content {
  492. 			margin-top: 10px !important;
  493. 		}
  494. 		.sidebarred-main-content > h2 {
  495. 			margin-top: 0;
  496. 		}
  497. 		#browse-script-list {
  498. 			margin-top: 0;
  499. 		}
  500. 		#browse-script-list, #user-script-list, #user-deleted-script-list {
  501. 			display: grid;
  502. 			grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  503. 			grid-gap: 10px;
  504. 			border: none;
  505. 			box-shadow: none;
  506. 			background-color: transparent;
  507. 		}
  508. 		
  509. 		
  510. 	}
  511. 		
  512. 		
  513. 			#browse-script-list > li, #user-script-list > li, #user-deleted-script-list > li {
  514. 				border: var(--border-button) !important;
  515. 				border-radius: .5rem;
  516. 				background-color: var(--color-tertiary);
  517. 				transition: box-shadow .2s;
  518. 				color: var(--color-text);
  519. 				display: flex;
  520. 			}
  521. 			#browse-script-list > li:hover, #user-script-list > li:hover, #user-deleted-script-list > li:hover {
  522. 				box-shadow: 0px 2px 20px rgba(0,0,0,0.1);
  523. 			}
  524. 				#browse-script-list > li > article, #user-script-list > li > article, #user-deleted-script-list > li > article {
  525. 					height: 100%;
  526. 					display: flex;
  527. 					flex-wrap: wrap;
  528. 					width: auto !important;
  529. 					flex-grow: 1 !important;
  530. 					max-width: 100% !important;
  531. 				}
  532. 					#browse-script-list > li > article > h2 {
  533. 						overflow: hidden;
  534. 						max-height: 100px;
  535. 					}
  536. 					.inline-script-stats {
  537. 						margin-top: auto;
  538. 						width: 100%;
  539. 					}
  540. 					.inline-script-stats dd {
  541. 						max-width: 100%;
  542. 					}
  543. 					#browse-script-list > li > article > h2 > a {
  544. 						font-weight: 600;
  545. 					}
  546. 					#browse-script-list > li > article > h2::before {
  547. 						content: "";
  548. 						display: flex;
  549. 						position: relative;
  550. 						z-index: 2;
  551. 						width: 100%;
  552. 						height: 40px;
  553. 						color: var(--color-tertiary);
  554. 						background: linear-gradient(transparent, currentColor);
  555. 						box-shadow: 0 10px 0 var(--color-tertiary);
  556. 						margin-top: -40px;
  557. 						transform: translateY(100px);
  558. 						pointer-events: none;
  559. 					}
  560. 					/* Greasy Fork镜像 Tweaks Thumbnail Images */
  561. 					#browse-script-list > li > article ~ div,
  562.  					#user-script-list > li > article ~ div,
  563. 					#user-deleted-script-list > li > article ~ div {
  564. 						max-height: 185px !important;
  565. 						height: calc(100% + 2em) !important;
  566. 						width: auto !important;
  567. 						max-width: 40% !important;
  568. 						margin-right: -1em !important;
  569. 						margin-top: -1em !important;
  570. 						margin-bottom: -1em !important;
  571. 						margin-left: 1em !important;
  572. 						border-top-right-radius: .5rem !important;
  573. 						border-bottom-right-radius: .5rem !important;
  574. 						padding: 0 !important;
  575. 						transition: max-width .5s, width .5s;
  576. 						display: flex !important;
  577. 						transition: max-width .5s;
  578. 						justify-content: center;
  579. 					}
  580. 					#browse-script-list > li > article ~ div > img,
  581.  					#user-script-list > li > article ~ div > img,
  582. 					#user-deleted-script-list > li > article ~ div > img {
  583. 						max-width: 100% !important;
  584. 						width: 100% !important;
  585. 						align-self: center;
  586. 					}
  587. 					#browse-script-list #script-list-ea {
  588. 						width: 100%;
  589. 					}
  590. 					#browse-script-list #script-list-ea + div:last-of-type {
  591. 						display: none !important;
  592. 						width: 0 !important;
  593. 					}
  594. 				
  595. 			.script-list li:not(.ad-entry) {
  596. 				border-right: 1px solid #DDDDDD;
  597. 			}
  598. 			.ad-entry, #codefund {
  599. 				grid-column: 1/-1;
  600. 			}
  601. 			.ad-entry > div {
  602. 				height: auto !important;
  603. 				padding: 0 !important;
  604. 			}
  605. 			[data-ea-publisher].loaded .ea-content a:link, [data-ea-type].loaded .ea-content a:link {
  606. 				color: var(--color-link) !important;
  607. 			}
  608. 			
  609. 			
  610. 		.sidebarred-main-content {
  611. 			display: flex;
  612. 			flex-wrap: wrap;
  613. 			height: min-content;
  614. 		}
  615. 		.sidebarred-main-content > * {
  616. 			width: 100%;
  617. 			
  618. 		}
  619. 		.sidebarred-main-content > p {
  620. 			width: auto;
  621. 			margin: 1em 0 0;
  622. 		}
  623. 		.sidebarred-main-content > p:last-child {
  624. 			order: -1;
  625. 		}
  626. 			
  627. 		/*** FILTER BY SITES PAGE ***/
  628. 		
  629. 		#by-site-list > li > a {
  630. 			font-size: inherit !important;
  631. 		}
  632.  
  633. 		/*** SCRIPT DETAILS PAGE ***/
  634. 		
  635. 		#script-info {
  636. 			display: flex;
  637. 			flex-wrap: wrap;
  638. 			
  639. 			background: none !important;
  640. 		}
  641. 		#script-info > * {
  642. 			width: 100%;
  643. 		}
  644. 		#script-info, #additional-info, #user-profile {
  645. 			background: none;
  646. 			background-color: var(--color-tertiary);
  647. 			box-shadow: none;
  648. 			color: var(--color-text);
  649. 		}
  650. 		#script-info > header {
  651. 			order: -1;
  652. 			width: 100%;
  653. 		}
  654. 		#script-info header h2 {
  655. 			font-weight: 600;
  656. 		}
  657. 		#script-links {
  658. 			margin: 12px 0;
  659. 			padding-top: 12px !important;
  660. 			padding: 0;
  661. 			display: flex;
  662. 			flex-wrap: wrap;
  663. 			
  664. 			position: sticky;
  665. 			top: 45px;
  666. 			display: inline;
  667. 			width: 150px;
  668. 			height: min-content;
  669. 			max-height: calc(100vh - 58px);
  670. 			overflow-y: auto;
  671. 		}
  672. 		#script-links .current {
  673. 			border: none !important;
  674. 			box-shadow: none;
  675. 		}
  676. 		#script-links li {
  677. 			margin: 8px 0px;
  678. 		}
  679. 		.script-show-applies-to .inline-list {
  680. 			display: flex;
  681. 			flex-wrap: wrap;
  682. 		}
  683. 		#script-content {
  684. 			margin: 20px;
  685. 			width: calc(100% - 200px);
  686. 			display: flex;
  687. 			flex-wrap: wrap;
  688. 			height: min-content;
  689. 		}
  690. 		#script-content > * {
  691. 			width: 100%;
  692. 		}
  693. 		.install-link {
  694. 			background-color: var(--color-highlighted) !important;
  695. 		}
  696. 		#script-feedback-suggestion, .script-in-sets, #install-area {
  697. 			margin: 0;
  698. 			width: auto !important;
  699. 			display: flex;
  700. 			flex-wrap: wrap;
  701. 			font-size: 0;
  702. 		}
  703. 		#script-feedback-suggestion a, .script-in-sets *, #install-area a,
  704.  		.post-discussion > p:first-child a,
  705.  		.sidebarred-main-content > p a {
  706. 			font-size: 14px;
  707. 			margin: 0;
  708. 			margin-right: 8px;
  709. 			margin-bottom: 1em;
  710. 		}
  711. 		.discussion-snippet {
  712. 			white-space: normal !important;
  713. 		}
  714. 		.script-in-sets {
  715. 			order: 1;
  716. 			width: 100% !important;
  717. 		}
  718. 		#script-meta {
  719. 			order: 2;
  720. 			max-width: none;
  721. 			flex: 1 1 400px;
  722. 		}
  723. 		#script-meta dt {
  724. 			max-width: 100px;
  725. 		}
  726. 		
  727. 		#script-show-info-ad {
  728. 			order: 3;
  729. 			margin-left: 1em !important;
  730. 			flex: 1 1 200px;
  731. 		}
  732. 		#additional-info {
  733. 			order: 3;
  734. 			display: flex;
  735. 			flex-wrap: wrap;
  736. 		}
  737. 		#additional-info > * {
  738. 			width: 100%;
  739. 		}
  740. 		.user-screenshots {
  741. 			order: -1;
  742. 			margin-top: 0 !important;
  743. 			margin-bottom: 1em;
  744. 			width: 100%;
  745. 		}
  746. 		.post-discussion {
  747. 			width: 100%;
  748. 		}
  749. 		
  750. 		section > *:first-child, #script-content > *:first-child, #script-content p, #script-content h3, form > p:first-of-type,
  751.  		.discussion-header {
  752. 			margin-top: 0 !important;
  753. 		}
  754. 		.multiform-page {
  755. 			padding: 0 !important;
  756. 		}
  757. 		
  758. 		canvas {
  759. 			background-color: white !important;
  760. 		}
  761. 		/*** FORUMS ***/
  762. 		.discussion-read {
  763. 			background-color: var(--color-secondary) !important;
  764. 		}
  765. 		.discussion-list-item {
  766. 			border-top: var(--border-button) !important;
  767. 			border-bottom: var(--border-button) !important;
  768. 		}
  769. 		.user-content {
  770. 			background: none;
  771. 		}
  772. 		.comment-meta-item a {
  773. 			margin-bottom: -100px;
  774. 		}
  775. 		.discussion-header h2 {
  776. 			margin-top: .5rem;
  777. 		}
  778. 		
  779. 		/* FAVORITES LIST */
  780. 		.post-discussion > div:last-of-type {
  781. 			order: 5;
  782. 		}
  783. 			
  784. 		/*** USER PAGE ***/
  785. 		/* About User */
  786. 		
  787. 		a.report-link.report-link-abs {
  788. 			margin-top: 1em !important;
  789. 		}
  790. 		/* Control Panel */
  791. 		#user-control-panel, #script-content > ul {
  792. 			display: flex;
  793. 			flex-wrap: wrap;
  794. 			grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  795. 			grid-gap: 10px;
  796. 			padding: 10px;
  797. 			list-style: none;
  798. 		}
  799. 			#user-control-panel > li {
  800. 				text-decoration: none;
  801. 				list-style: none;
  802. 				text-align: center;
  803. 				background-color: var(--color-secondary);
  804. 				padding: 5px 16px;
  805. 				border-radius: .3rem;
  806. 			}
  807. 			
  808. 		.post-discussion > div > .inline-list {
  809. 			display: grid;
  810. 			grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  811. 			grid-gap: 4px 6px;
  812. 		}
  813. 			.post-discussion > div > .inline-list > li a {
  814. 				display: block;
  815. 				white-space: nowrap;
  816. 				overflow: hidden;
  817. 				text-overflow: ellipsis;
  818. 			}
  819. 		
  820.  
  821.  
  822. 		/*** HOMEPAGE ***/
  823. 		body .width-constraint > .text-content > h2 {
  824. 			z-index: 2;
  825. 			position: relative;
  826. 			margin-bottom: 1rem;
  827. 			margin-top: 2rem !important;
  828. 		}
  829. 		#home-script-nav {
  830. 			margin-bottom: 60px;
  831. 			z-index: 1;
  832. 			width: max-content;
  833. 			max-width: none;
  834. 			border: none !important;
  835. 		}
  836. 		
  837. 		#home-top-sites {
  838. 			margin-top: 1rem;
  839. 			z-index: 2;
  840. 			position: relative;
  841. 			font-size: 0;
  842. 		}
  843.  
  844. 		/*** POPUPS ***/
  845. 		.lum-lightbox {
  846. 			z-index: 100;
  847. 		}
  848.  
  849.  
  850. 		
  851. 	}

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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