☰

GreasyFork | Modernized ( Optional Dark Theme )

A much cleaner and more modern version of GreasyFork!

Nainstalovat jako uživatelský styl?
Skript doporučený autorem

Mohlo by se vám také líbit Greasy Fork tweaks.

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