☰

GreasyFork | Modernized ( Optional Dark Theme )

A much cleaner and more modern version of GreasyFork!

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

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