GreasyFork Modern (W/ Dark Mode) by Freeplay

/* ==UserStyle==
 -- THEME STUFF --
@name           GreasyFork | Modernized ( Optional Dark Theme )
@version        1.3.16
@description    A much cleaner and more modern version of GreasyFork!

 -- AUTHOR STUFF --
@namespace      Freeplay
@author         Freeplay (https://freeplay.codeberg.org/)
@homepageURL    https://codeberg.org/Freeplay/UserStyles
@supportURL     https://codeberg.org/Freeplay/UserStyles/issues
@preprocessor   stylus


--- SETTINGS ---
@var checkbox darkmode "Dark Mode" 0 

==/UserStyle== */


@-moz-document domain("greasyfork.org") {
	:root {
		if darkmode {
			/* DARK MODE COLORS */
			--color-primary: #272b36bd;
			--color-secondary: #072b3a ;
			--color-tertiary: #2c3242;
			--color-bg: #1c1f28;
			--color-text: #d1d1d1;
			--color-link: #00b3ff;
			--color-link-visited: cyan;
			--color-highlighted #287721;
			--shadow-normal: 0 0px 3px rgba(0,0,0,0.5);
			--shadow-button: none;
			--border-button:  1px solid rgba(150,150,150,.1);
		} else {
			/* LIGHT MODE COLORS */
			--color-primary: #980000bd;
			--color-secondary: white;
			--color-tertiary: white;
			--color-bg: #F6F6F6;
			--color-text: black;
			--color-link: #0265be;
			--color-link-visited: #cf2525;
			--color-highlighted: #9fefa3;
			--shadow-normal: 0 0 10px rgba(0, 0, 0, .01);
			--shadow-button: 0px 0px 0px 20px var(--color-bg) inset;
			--border-button:  1px #dcdcdc solid;
		}
	}
	* {
		transition: background .2s;
	}
		
		/* TEXT */
		h3, h2 {
			color: var(--color-text);
		}
		h3 {
			margin-bottom: 1em !important;
		}
		p {
			color: var(--color-text);
		}
		pre, textarea, .preview-results {
			background-color: var(--color-secondary) !important;
			border: var(--border-button) !important;
			border-radius: .3rem;
			color: var(--color-text);
		}
		.code-container, .diff {
			max-height: none !important;
			border: none !important;
			border-radius: 4px !important;
			filter invert(90%) hue-rotate(180deg)
			.unchanged {
				color grey !important
			}
		}
		pre.prettyprint {
			background-color: white !important;
			max-height: none;
			margin-top: 0;
			color: black;
		}
		
		.post-discussion > p:first-child,
		.sidebarred-main-content > p,
		{
			font-size: 0;
		}
		.sidebarred-main-content > h2 + p {
			font-size: inherit !important;
			margin-top: 0 !important;
		}
		
		/* BUTTONS/LINKS */
		select, option, input, button:not(.lum-gallery-button), code, #user-control-panel > li, .sign-in-link a,
		.pagination > *, .script-list + .pagination > *, .user-list + .pagination > *, 
		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,
		#script-content > ul li a,
		#about-user > p:last-child > *, #about-user > a:first-child,
 		#install-area a, .expander, #contribution > a,  #support-url > a, .script-in-sets > a,
 		.sidebarred-main-content > p:last-child a, .sidebarred-main-content > p:first-of-type a,
 		#home-top-sites a,
 		#by-site-list > li > a {			
			border: var(--border-button) !important;
			text-decoration: none !important;
			border-radius: .3rem !important;
			padding: 5px 14px;
			font-size: 14px;
			font-family: Segoe UI, Helvetica, Arial, sans-serif, Segoe UI Emoji !important;
			transition: all .2s;
			background-color: var(--color-secondary) !important;
			color: var(--color-text) !important;
			list-style: none;
			outline: none !important;
		}
		code {
			padding: 2px 4px !important;
		}
		select:hover, input:hover, input:focus, button:not(.lum-gallery-button):hover, #user-control-panel > li:hover,  .sign-in-link a:hover,
		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,
		#script-content > ul li a:hover,
		#about-user > p:last-child > *:hover, #about-user > a:first-child:hover,
		.pagination > *:hover, .script-list + .pagination > *:hover, .user-list + .pagination > *:hover, .pagination > *:focus, .script-list + .pagination > *:focus, .user-list + .pagination > *:focus, 
 		#install-area a:hover, .expander:hover, #contribution > a:hover, #support-url > a:hover, .script-in-sets > a:hover,
 		.sidebarred-main-content > p:last-child a:hover, .sidebarred-main-content > p:first-of-type a:hover,
 		#home-top-sites a:hover,
 		#by-site-list > li > a:hover {
			box-shadow: var(--shadow-button) !important;
			background-color: var(--color-tertiary) !important;
			text-decoration: none !important;
		}
		
		select:not(#remove-scripts-included) { /* Contributed by https://codeberg.org/Riedler */
			appearance:none;
			background-image:url("https://riedler.wien/sfto/darklearning/double_triangles_top_bottom_AAA.svg");
			background-repeat:no-repeat;
			background-position:center right 7px !important;
			background-size:auto 50%;
		}
		
		
		nav > li > a, .pagination > a, #user-control-panel > li > a, #script-links > li > a, div[class="list-option-group"] > ul > li > a, h2 > a ,
		.comment-meta-item-main a {
			text-decoration: none;
			color: var(--color-text);
		}
		.pagination {
			margin-bottom: 20px;
		}
		a {
			display: inline-block;
		}
		a, a.discussion-title, a.discussion-title:hover {
			text-underline-offset: .25em;
			color: var(--color-link);
		}
		a:hover, a.discussion-title:hover {
			text-decoration: underline;
		}
		a:visited {
			color: var(--color-link-visited);
		}
		body, html {
			background-color: var(--color-bg);
			font-family: Segoe UI, Helvetica, Arial, sans-serif, Segoe UI Emoji !important;
		}
		body > .width-constraint {
			max-width: 100% !important;
			margin: 0;
			padding: 10px;
			display: flex;
			flex-direction column
			// flex-wrap: wrap;
		}
		body > .width-constraint > * {
			width: 100%;
		}
		body > .width-constraint > section, .notice, .alert, .announcement {
			max-width: 80rem;
			margin: auto !important;
		}
		body > .width-constraint > section:first-child, .notice, .alert {
			margin-top: 20px !important;
		}
		body > .width-constraint > section:last-of-type {
			margin-bottom: 40px !important;
		}
		.alert, .announcement {
			background-color: var(--color-secondary);
			margin-bottom: 20px !important;
		}
		.alert *, .announcement {
			color: var(--color-text) !important;
			padding: 10px;
		}
		.announcement {
			margin-top: 10px !important;
			border-radius: .3rem;
		}
		section {
			border: none !important;
		}
		
		.notice {
			background-color: var(--color-secondary);
		}
		
		
		.text-content, .discussion-list, #browse-user-list, .inline-form, #new_user,
		#script-meta, #additional-info, #script-show-info-ad, #script-content .script-discussion-list, canvas, 
		/*.multiform-page*/, #script-content form:not(.script-in-sets), table, .comment,
 		#script-content > ul {
			padding: 1rem !important;
			margin: 0 auto !important;
			margin-bottom: 20px !important;
			border: var(--border-button) !important;
			box-shadow: var(--shadow-normal) !important;
			background-color: var(--color-tertiary) !important;
			color: var(--color-text);
			border-radius: .5rem;
		}
		.text-content > *:first-child {
			margin-top: 0 !important;
		}
		.text-content > *:last-child, #script-meta > *:last-child {
			margin-bottom: 0 !important;
		}
		
		
	@media only screen and (min-width: 940px) { 
		
		
		body {
			margin-top: 44px;
		}
		
		
		
		

		/* HEADER */
		#main-header {
			position: fixed;
			top: 0;
			width: 100%;
			height: 44px;
			padding: 0;
			z-index: 5;
			background-image: none;
			background-color: var(--color-primary);
			backdrop-filter: blur(10px);
		}
		#main-header > .width-constraint {
			max-width: 100%;
			padding-left: 10px;
			padding-right: 10px;
			display: flex !important;
			align-items: center;
			margin: auto !important;
		}
		#site-name {
			position: absolute;
			width: 200px;
			min-width: 200px;
			height: 30px;
			margin-top: auto;
			margin-bottom: auto;
		}
		#site-name img {
			height: 30px;
		}
		#site-name-text {
			margin-top: 0 !important;
		}
		#site-name-text > h1 {
			height: 30px;
			font-size: 25px;
			font-weight: 600;
		}

		#site-nav {
			display: flex !important;
			height: 40px;
			padding-top: 1px;
			width: auto;
			align-items: center;
			margin-top: 0 !important;
			width: 100%;
			justify-content: flex-end;
		}
		#site-nav > * {
			position: relative !important;
		}
		#site-nav > nav {
			width: 100% !important;
			height: 20px;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
		#nav-user-info {
			width: auto;
			order: 2;
			height: 20px;
			display: flex;
			align-items: center;
		}
		#nav-user-info .sign-out-link, #nav-user-info .sign-in-link {
			width: max-content !important;
		}
		#nav-user-info > form > select {
			margin: 0 0 0 26px;
			height: 32px;
		}
		
		#site-nav > nav > li + li {
			margin-left: 1em;
		}
		#nav-user-info .user-profile-link a, #nav-user-info .sign-out-link a {
			text-decoration: none;
			font-size: 16px;
		}
		#nav-user-info .sign-out-link {
			font-size: 0;
			margin-left: 16px;
		}
		#nav-user-info .with-submenu {
			padding-right: 16px;
		}
		#nav-user-info a:hover {
			text-decoration: underline;
		}
		.with-submenu > nav {
			background-color: var(--color-primary);
			backdrop-filter: blur(10px);
		}
		
		/* SIDEBAR */
		.sidebar ~ div {
			max-width: 50rem;
		}
		.sidebar {
			position: sticky;
			top: 44px;
			order: -1;
			margin: -10px 15px -10px -10px;
			padding: 20px 0 20px 10px;
			height: calc(100vh - 84px);
			max-height: calc(100vh - 84px);
			overflow-y: auto;
			overflow-x: hidden;
			z-index: 6;
			text-decoration: none !important;
			
			scrollbar-color: var(--color-primary) transparent;
			scrollbar-width: thin;
		}
			.sidebar-search {
				position: fixed;
				top: 5px;
				left: 180px;
				
	...