Brink Modification - Edit Overlay by Scheherazade05

/* ==UserStyle==
@name           Brink Modification - Edit Overlay
@namespace      V.L
@description    An addition for MyAnimeList lists using the "Brink" theme that changes the look of the edit overlay.
@version        1.1.1
@author         Valerio Lyndon
@homepageURL    https://github.com/ValerioLyndon/MAL-Public-List-Designs
@supportURL     https://github.com/ValerioLyndon/MAL-Public-List-Designs/issues
@license        MIT
@preprocessor   uso

@var select theme "Switch theme." {
	"Dark:Dark": `
	:root {
		--bg: 240, 100%, 0%;
		--bgAlt: 240, 100%, 0%;
		--btn: 0, 100%, 35%;
		--btnLight: 0, 100%, 0%;
		--btnAccent: 0, 100%, 35%;
		--border: 0, 100%, 0%;
		
		--textBright: 0, 0%, 100%;
		--textMid: 0, 0%, 100%;
		--textDim: 0, 0%, 100%;
		--textProminent: 0, 100%, 35%;
		--textLinkHov: 0, 0%, 0%;
		--textIcon: 0, 0%, 100%;
		
		--arrowUp: url(https://files.catbox.moe/uure2q.svg);
		--arrowRt: url(https://files.catbox.moe/lqi5fy.svg);
		--arrowDn: url(https://files.catbox.moe/m9ot24.svg);
		--arrowLt: url(https://files.catbox.moe/68o5bn.svg);
		--checkmark: url(https://files.catbox.moe/wvc642.svg);
		--resize: url(https://files.catbox.moe/hbzcq9.svg);
	}`,
	
	"light:Light": `
	:root {
		--bg: 0, 0%, 100%;
		--bgAlt: 0, 0%, 100%;
		--btn: 240, 3%, 100%;
		--btnLight: 240, 3%, 100%;
		--btnAccent: 240, 70%, 100%;
		--border: 240, 3%, 100%;
		
		--textBright: 0, 0%, 0%;
		--textMid: 0, 0%, 0%;
		--textDim: 0, 0%, 0%;
		--textProminent: 27, 94%, 0%;
		--textLinkHov: 240, 50%, 0%;
		--textIcon: 0, 0%, 0%;
		
		--arrowUp: url(https://files.catbox.moe/iph712.svg);
		--arrowRt: url(https://files.catbox.moe/4m6un3.svg);
		--arrowDn: url(https://files.catbox.moe/wb6rq1.svg);
		--arrowLt: url(https://files.catbox.moe/7xccvf.svg);
		--checkmark: url(https://files.catbox.moe/gfdj8s.svg);
		--resize: url(https://files.catbox.moe/xicpo1.svg);
	}
	
	.page-common select.inputtext:disabled {
		background-blend-mode: darken;
	}`
}

@var select advancedToggle "Always show the advanced menu." {
	"yes:Yes": `
		#advanced-button {
			display: none;
		}
		
		.advanced {
			display: block !important;
		}`,
	"no:No": ""
}

@var select hidePriority "Hide priority." {
	"no:No": "",
	"yes:Yes": ".advanced tr:nth-of-type(2) { display: none !important; }"
}

@var select hideStorage "Hide storage." {
	"no:No": "",
	"yes:Yes": ".advanced tr:nth-of-type(3) { display: none !important; }"
}

@var select hideRewatchValue "Hide rewatch value." {
	"no:No": "",
	"yes:Yes": ".advanced tr:nth-of-type(5) { display: none !important; }"
}

@var select hideExtras "Hide Discussion & SNS options." {
	"no:No": "",
	"yes:Yes": ".advanced tr:nth-of-type(7), .advanced tr:nth-of-type(8) { display: none !important; }"
}

@var select hideHelp "Hide information tips." {
	"yes:Yes": ".fa-question-circle { display: none; }",
	"no:No": ""
}
==/UserStyle== */

@-moz-document regexp("https:\\/\\/myanimelist\\.net\\/ownlist\\/(anime|manga)\\/([0-9]+\\/edit|add).*") {
	/*==============================*\
	  !FONTS
	\*------------------------------*/
	
	/* from https://fonts.googleapis.com/css?family=Sarabun:400,700 */
	
	/* latin */
	@font-face {
		font-family: 'Sarabun';
		font-style: normal;
		font-weight: 400;
		src: local('Sarabun Regular'), local('Sarabun-Regular'), url(https://fonts.gstatic.com/s/sarabun/v6/DtVjJx26TKEr37c9aBVJnw.woff2) format('woff2');
		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}
	/* latin-ext */
	@font-face {
		font-family: 'Sarabun';
		font-style: normal;
		font-weight: 400;
		src: local('Sarabun Regular'), local('Sarabun-Regular'), url(https://fonts.gstatic.com/s/sarabun/v6/DtVjJx26TKEr37c9aBtJn2QN.woff2) format('woff2');
		unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
	}
	/* latin */
	@font-face {
		font-family: 'Sarabun';
		font-style: normal;
		font-weight: 700;
		src: local('Sarabun Bold'), local('Sarabun-Bold'), url(https://fonts.gstatic.com/s/sarabun/v6/DtVmJx26TKEr37c9YK5silss6w.woff2) format('woff2');
		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}
	/* latin-ext */
	@font-face {
		font-family: 'Sarabun';
		font-style: normal;
		font-weight: 700;
		src: local('Sarabun Bold'), local('Sarabun-Bold'), url(https://fonts.gstatic.com/s/sarabun/v6/DtVmJx26TKEr37c9YK5silUs6zDX.woff2) format('woff2');
		unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
	}
	
	
	/*==============================*\
	  !VARIABLES
	\*------------------------------*/
	
	:root {
		--font: "Sarabun", "Segoe UI", "Arial", "FontAwesome", sans-serif;
		
		--timeText: 60ms;
		--timeButton: 160ms;
		--timeButtonLarge: 260ms;
		--timeItem: 120ms;
		--timeMenu: 350ms;
		--bezierFast: cubic-bezier(.38,.32,.25,1);
		--bezierSmooth: cubic-bezier(.45,.32,.25,1);
		--bezierItemBounce: cubic-bezier(.6,.48,.7,1.45);
		--delayMenu: 333.4ms;
		
		/* THEME */
		
		--accent: 0, 100%, 35%;
		--current: 35, 49%, 46%;
		--completed: 324, 49%, 46%;
		--paused: 80, 91%, 23%;
		--dropped: 6, 44%, 46%;
		--planned: 56, 18%, 56%;
	}
	
	/*[[theme]]*/
	
	
	/*==============================*\
	  !EXTERNAL
	  when hideLayout is not enabled
	\*------------------------------*/
	
	.page-common #content {
		background: hsl(var(--bg));
		padding: 40px 40px;
		border-radius: 6px;
		margin: 30px 0 0;
	}
	
	
	/*==============================*\
	  !PAGE-BASE @Scrollbars
	\*------------------------------*/
	
	/* Firefox */
	
	* {
		scrollbar-color: hsl(var(--accent)) hsl(var(--bgAlt));
	}
	
	/* Chrome */
	
	*::-webkit-scrollbar {
		background: hsl(var(--bgAlt));
	}
	
	*::-webkit-scrollbar-button:vertical {
		background: transparent center / 10px auto no-repeat;
	} *::-webkit-scrollbar-button:vertical:start {
		background-image: var(--arrowUp);
	} *::-webkit-scrollbar-button:vertical:end {
		background-image: var(--arrowDn);
	} *::-webkit-scrollbar-button:horizontal {
		background: transparent center / auto 10px no-repeat;
	} *::-webkit-scrollbar-button:horizontal:start {
		background-image: var(--arrowLt);
	} *::-webkit-scrollbar-button:horizontal:end {
		background-image: var(--arrowRt);
	}
	
	*::-webkit-scrollbar-corner {
		background: hsl(var(--bgAlt));
	} *::-webkit-resizer {
		background: var(--resize) center / auto no-repeat hsl(var(--bgAlt));
		border: none;
	}
	
	*::-webkit-scrollbar-thumb {
		background: hsl(var(--accent)) content-box;
		border: 0 solid transparent;
	} *::-webkit-scrollbar-thumb:vertical {
		border-width: 0 2px;
	} *::-webkit-scrollbar-thumb:horizontal {
		border-width: 2px 0;
	} *::-webkit-scrollbar-thumb:hover {
		background-color: hsla(var(--accent), 70%);
	} 
	
	*::-webkit-scrollbar-track {
		width: 5px;
	}
	
	
	/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\
	  @Generic
	\*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */
	
	#dialog {
		box-sizing: border-box;
	} #dialog *, #dialog *::before, #dialog *::after {
		box-sizing: inherit;
	}
	
	#dialog a, #dialog a:visited {
		color: hsl(var(--textDim));
		text-decoration: none !important;
		transition: color var(--timeText) var(--bezierFast);
	} #dialog a:hover {
		color: hsl(var(--textLinkHov)) !important;
	}
	
	/*==============================*\
	  !TABLE
	\*------------------------------*/
	
	#dialog {
		display: block;
		width: 100% !important;
		min-width: 560px;
		max-width: 700px;
		background: hsl(var(--bg));
		padding: 0 20px;
		border: none;
		margin: 0 auto;
		color: hsl(var(--textMid));
		font: 13px var(--font);
	}
	
	#dialog :is(tbody,tr,td) {
		display: block;
	}
	
	#dialog td {
		padding: 0;
		border: none;
		font-size: 13px;
	}
	
	#dialog .normal_header {
		display: none;
	}
	
	#main-form table,
	#main-form td:first-child {
		display: block;
	}
	
	#main-form tbody {
		display: flex;
		flex-flow: row wrap;
	}
	
	#main-form tr {
		display: flex;
		padding: 12px 6px 0;
		width: 33.3334%;
		flex-flow: column nowrap;
		flex: 1 1 auto;
	}
	
	#main-form td:first-child {
		width: 100%;
		height: 26px;
		color: hsl(var(--textDim));
		font-size: 13px;
		line-height: 22px;
	}
	
	#main-form td:last-child {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		height: auto;
	}
	
	#main-form td {
		padding: 0;
	}
	
	/* Advanced Button Toggle */
	
	#main-form #advanced-button {
		height: 44px !important;
		padding: 12px 6px 0;
	}
	
	#main-form #advanced-button .separator {
		display: none;
	}
	
	#main-form #advanced-button .toggle-button {
		width: 130px;
		height: 24px;
		padding: 0 4px 0 8px;
		background: hsl(var(--btn));
		border: 2px solid hsl(var(--btn));
		border-radius: 3px;
		margin-top: 4px;
		
		color: hsl(var(--textBright));
		font: 12px/18px var(--font);
		text-align: center;
		vertical-align: top;
		
		transition: all var(--timeButton) var(--bezierFast);
	} #main-form #advanced-button:hover .toggle-button {
		border-color: hsl(var(--btnAccent));
		color: hsl(var(--accent));
	}
	
	/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\
	  @Fields
	\*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */
	
	#dialog .textarea,
	#dialog .inputtext {
		height: 24px;
		padding: 4px;
		background: hsl(var(--btn)) calc(100% - 5px) center / auto no-repeat;
		border: none !important;
		border-radius: 3px;
		margin-right: 6px;
		
		color: hsl(var(--textMid));
		font: 12px/1 var(--font);
		
		transition: all var(--timeButton) var(--bezierFast);
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	} #dialog select.inputtext {
		padding: 4px 20px 4px 4px;
		background-image: var(--arrowDn);
	} #dialog select.inputtext:disabled {
		background-blend-mode: soft-light;
		opacity: .57;
	}
	
	/* Checkboxes */
	
	#dialog label {
		display: inline-block;
		margin-top: 6px;
		font-size: 12px !important;
		line-height: 18px;
	}
	
	#dialog label * {
		font-size: 12px;
		vertical-align: top;
	}
	
...