☰

GreasyFork | Modernized ( Optional Dark Theme )

A much cleaner and more modern version of GreasyFork!

安装为用户样式？
作者推荐脚本

您可能也喜欢Greasy Fork tweaks。

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