Anilist Modifications by slickboy

		/* ==UserStyle==
@name           Anilist Hossori
@namespace      USO Archive
@author         slickboy
@description    `A sleeker look for the already sleek anilist. Usable with automail. https://greasyfork.org/en/scripts/370473-aniscripts. I used some code by Reina. https://github.com/Reinachan/AniList-High-Contrast-Dark-ThemeCopyright notice: https://raw.githubusercontent.com/Reinachan/AniList-High-Contrast-Dark-Theme/main/LICENSE`
@version        0.4
@license        CC0-1.0
@preprocessor   stylus

@var select afont "font" ["default*", "share-tech-mono", "courier-new"]

@var select navbar "navigation bar" ["default*", "compact", "vertical", "vertical-floating"]

@var select sitetheme "site theme" ["default*", "dark-gray", "dark-high-contrast"]

@var checkbox compactlisteditor "compact list editor" 0

@var checkbox homefeedfilter "home: flattened feed filter" 0

@var checkbox userfeedfilter "user: flattened feed filter" 0

@var checkbox zeroborderradius "0 border radius" 0

@var checkbox alllowercase "all lowercase" 0

@var color maincolor "main color (for this to also work on your profile, set profile color to default blue in anilist settings)" #3db4f2

@var color maincolor2 "main color 2 (for this to also work on your profile, set profile color to default blue in anilist settings)" #8db2db

@var color mangacolor "manga color" #3db4f2
==/UserStyle== */
		@-moz-document regexp(".*anilist.co.*") {
			////////anilist
			rgb=() //override built-in rgb function
			rgba=() //override built-in rgba function
			url(input) {
				s('url(%s)', input)
			} //render svg files
			.container {
				padding-left: 0px!important;
				padding-right: 0px!important;
				max-width: 1140px!important;
			}
			*,
			div,
			html,
			canvas,
			:after,
			:before {
				box-shadow: none!important;
			}
			:root,
			.site-theme-contrast,
			.site-theme-dark {
				--color-blue: red(maincolor), green(maincolor), blue(maincolor);
				--color-blue-dim: red(maincolor2), green(maincolor2), blue(maincolor2);
			} //graphs get wonky with 0 border radius
			.line-chart-wrap {
				background: none!important;
			}
			::-webkit-scrollbar {
				width: 4px!important;
			}
			::-webkit-scrollbar-thumb {
				cursor: pointer!important;
				background: rgba(var(--color-blue))!important;
			}
			.text ::-webkit-scrollbar,
			.about ::-webkit-scrollbar,
			.activity-text ::-webkit-scrollbar,
			.input.el-textarea ::-webkit-scrollbar,
			.reply ::-webkit-scrollbar {
				width: 0px!important;
			}
			.shadow {
				display: none;
			}
			.banner {
				margin-top: 0!important;
			}
			.activity-entry .details .status:first-letter {
				text-transform: lowercase!important;
			}
			#app > div.wrap > div {
				background: rgba(var(--color-foreground-grey));
			}
			input::placeholder,
			textarea::placeholder {
				color: rgba(var(--color-text))!important;
			}
			.quick-search {
				background: rgba(var(--color-overlay), .9)!important;
			}
			.section-header,
			h2 {
				font-weight: 600!important;
			}
			.home .section-header,
			.user .overview .section-header {
				padding-left: 5px!important;
				text-transform: uppercase;
			}
			.feed-select {
				padding: 0;
				text-transform: initial;
				letter-spacing: initial;
			} //////all colored buttons
			if not maincolor==#3db4f2 {
				.button.save,
				.save-btn,
				.submit-btn,
				.review.button,
				.create-btn,
				.save:not(.save.delete),
				.button.comment,
				.media-anime .actions .list,
				.settings .button {
					background: maincolor;
					if luminosity(maincolor) < .3 {
						color: white !important;
						* {
							color: white !important;
						}
					}
					else {
						color: black !important;
						* {
							color: black !important;
						}
					}
				}
			} //////dropdowns
			.el-select-dropdown,
			.el-dropdown-menu,
			.el-dropdown-menu__item--divided::before {
				background: rgba(var(--color-foreground-grey))!important;
			}
			.el-select-dropdown__item.hover,
			.el-select-dropdown__item:hover {
				background: rgba(var(--color-foreground-grey-light));
			}
			.el-dropdown-menu__item--divided {
				border-color: rgba(var(--color-background));
			}
			.el-select-group__wrap:not(:last-of-type)::after {
				background: rgba(var(--color-foreground));
			}
			.el-popper[x-placement^="bottom"] .popper__arrow,
			.el-popper[x-placement^="bottom"] .popper__arrow::after {
				border-bottom-color: transparent;
			}
			.el-popper[x-placement^="top"] .popper__arrow,
			.el-popper[x-placement^="top"] .popper__arrow::after {
				border-top-color: transparent;
			}
			.el-select-dropdown.is-multiple .el-select-dropdown__item.selected,
			.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover {
				background: rgba(var(--color-foreground-grey-light));
			} ////user/browse dropdown
			.user .dropdown,
			.user .dropdown .footer,
			.browse-wrap .dropdown,
			.browse-wrap .dropdown .footer {
				background: rgba(var(--color-gray-300))!important;
			} //////markdown editor
			.markdown-editor {
				background: rgba(var(--color-foreground-grey));
			}
			.markdown-editor > div {
				color: rgba(var(--color-text))!important;
			}
			.markdown-editor > div:hover {
				color: rgba(var(--color-blue))!important;
			}
			.markdown-editor > [title="Youtube Video"]:hover {
				color: rgb(255, 0, 0)!important;
			} //////donator badge
			.details > .donator-badge {
				left: 109px!important;
				top: 100%!important;
				transform: translate(0px, -35px);
			} //////like button
			//////this mod is by Reina https://raw.githubusercontent.com/Reinachan/AniList-High-Contrast-Dark-Theme/main/LICENSE
			.action.likes:hover,
			.action.likes .fa-heart:hover {
				color: rgba(var(--color-red))!important;
				stroke: rgba(var(--color-red))!important;
				transition: .2s!important;
			}
			.action.likes .button .fa-heart {
				color: transparent;
				stroke: rgba(var(--color-blue-dim));
				stroke-width: 70;
				font-size: .87em;
				padding-bottom: 0.08em;
				padding-top: 0.05em;
				transition: .2s;
			}
			.actions .count {
				font-size: 1.2rem;
			}
			.like-wrap.thread_comment .button .fa-heart {
				color: transparent;
				stroke: rgba(var(--color-text-lighter));
				stroke-width: 70;
				font-size: 1em;
				padding-bottom: 0.0em;
				padding-top: 0.05em;
				transition: .2s;
			}
			.action.likes .button.liked .fa-heart {
				color: rgba(var(--color-red));
				stroke: rgba(0 0 0 0);
				stroke-width: 0;
				font-size: 0.875em;
				padding-bottom: 0;
				padding-top: 0;
			}
			.like-wrap.thread_comment .button.liked .fa-heart {
				color: rgba(var(--color-red));
				stroke: rgba(0 0 0 0);
				stroke-width: 0;
				font-size: 1em;
				padding-bottom: 0;
				padding-top: 0;
				transition: .2s;
			} //////activities
			.activity-entry,
			.activity-edit .input,
			.reply.preview {
				margin-bottom: 10px!important;
			}
			.activity-text .text {
				border-left: solid 2px rgba(var(--color-text));
			}
			.activity-message .text {
				border-left: solid 2px rgba(var(--color-blue));
			}
			.activity-manga_list > div > div > div > div > .title {
				color: mangacolor!important;
			}
			.home .activity-entry .status {
				display: inline-block!important;
				line-height: 1.6rem;
			}
			.reply {
				margin-bottom: 2px!important;
			}
			.activity-entry .list:not(.user .activity-entry .list) {
				min-height: 80px!important;
				grid-template-columns: 60px auto!important;
			}
			.activity-replies {
				margin-top: 2px!important;
			}
			.list .name {
				padding-bottom: 0!important;
				color: rgba(var(--color-text));
			}
			.activity-entry .name,
			.activity-entry .title {
				font-weight: 600;
			} //////list editor
			.el-dialog.list-editor {
				margin-top: 3%!important;
				margin-bottom: 3%!important;
			}
			.list-editor-wrap .list-editor .body {
				padding-top: 50px;
				padding-bottom: 20px;
			}
			.list-editor-wrap .header .title {
				letter-spacing: 2px!important;
			}
			.list-editor-wrap .list-editor .body .checkbox {
				margin-bottom: 5px;
			}
			.list-editor-wrap .list-editor .body .custom-lists {
				overflow: scroll!important;
				height: 280px;
			}
			.custom-lists .el-checkbox__label {
				display: inline !important;
				white-space: normal;
				word-wrap: anywhere;
				word-break: break-word;
			}
			.list-editor-wrap .list-editor .body .custom-lists::-webkit-scrollbar {
				width: 0px!important;
				height: 0px!important;
			}
			.list-editor-wrap .header .favourite {
				background: rgba(var(--color-red));
				padding: 0;
				height: 31px;
				width: 31px;
				margin-bottom: 15px;
				font-size: 1.3rem;
			}
			.outline.isFavourite {
				color: rgb(255, 174, 188)!important;
			} ////calender in list editor
			body > div.el-picker-panel.el-date-picker.el-popper,
			.el-date-picker__header-label {
				background: rgba(var(--color-foreground-grey));
				color: rgba(var(--color-text));
				border: none;
			}
			.el-date-table td {
				padding: 0;
			}
			.el-date-table th,
			.el-date-picker__header--bordered {
				padding: 0;
				border-color: rgba(var(--color-foreground-grey-light))!important;
			}
			.el-date-picker__header {
				margin: 0;
			}
			.el-picker-panel__content {
				margin-top: 0;
				margin-bottom: 0;
			}
			.el-popper[x-placement^=bottom] {
				margin-top: 0;
			}
			.el-date-table td.next-month,
			.el-date-table td.prev-month {
				color: rgba(var(--color-text), .3);
			}
			.el-picker-panel__icon-btn {
				color: rgba(var(--color-text));
			} //////anilist offline front page
			#app > div.page-content > div > div.landing {
				background: rgba(var(--color-foreground))!important;
			}
		}
		@-moz-document regexp(".*anilist.co.*") {
			////////custom options
			//////font
			////default font
			if afont=="default" {
				*,
				div,
				html,
				canvas,
				::placeholder {
					font-family:
				}
			} ////share tech mono
			if afont=="share-tech-mono" {
				*,
				div,
				html,
				canvas,
				::placeholder {
					font-family: 'Share Tech Mono', Mono...