nimi.li - Gruvbox by lensdeer

/* ==UserStyle==
@name nimi.li - Gruvbox
@version 1.1
@namespace userstyles.world/user/lensdeer
@description Gruvbox color scheme for nimi.li
@author lensdeer
@license OQL (http://oql.avris.it/license/v1.1)
@supportURL http://github.com/MarshDeer/nimi.li_gruvbox/issues/new
==/UserStyle== */

@-moz-document domain("nimi.li") {
	/* Variables */
	:root{
		/*Gruvbox Light*/
		--gblbg0h:#f9f5d7;--gblbg0:#fbf1c7;--gblbg0s:#f2e5bc;--gblbg1:#ebdbb2;--gblbg2:#d5c4a1;--gblbg3:#bdae93;--gblbg4:#a89984;--gblgray:#928374;--gblfg0:#282828;--gblfg1:#3c3836;--gblfg2:#504945;--gblfg3:#665c54;--gblfg4:#7c6f64;--gblred:#9d0006;--gblgreen:#79740e;--gblyellow:#b57614;--gblblue:#076678;--gblpurple:#8f3f71;--gblaqua:#427b58;--gblorange:#af3a03;--gbldred:#cc241d;--gbldgreen:#98971a;--gbldyellow:#d79921;--gbldblue:#458588;--gbldpurple:#b16286;--gbldaqua:#689d6a;--gbldorange:#d65d0e;
		/* Gruvbox Dark */
		--gbdbg0h:#1d2021;--gbdbg0:#282828;--gbdbg0s:#32302f;--gbdbg1:#3c3836;--gbdbg2:#504945;--gbdbg3:#665c54;	--gbdbg4:#7c6f64;--gbdgray:#928374;--gbdfg0:#fbf1c7;--gbdfg1:#ebdbb2;--gbdfg2:#d5c4a1;--gbdfg3:#bdae93;--gbdfg4:	#a89984;--gbred:#fb4934;--gbdgreen:#b8bb26;--gbdyellow:#fabd2f;--gbdblue:#83a598;--gbdpurple:#d3869b;--gbdaqua:#8ec07c;	--gbdorange:#fe8019;--gbddred:#cc241d;--gbddgreen:#98971a;--gbddyellow:#d79921;--gbddblue:#458588;--gbddpurple:#b16286;	--gbddaqua:#689d6a;--gbddorange:#d65d0e;
	}

	/* Light Theme */
		/* Background */
			body
				{background-color: var(--gblbg0)}

		/* Scrollbar */
			html {
				--scrollbar-bg: var(--gblbg0);
				--scrollbar-thumb: var(--gblgray);
			}

		/* Text */
			/* Main Content */
			p,
			h1,
			h2,
			h3,
			h4,
			h5,
			h6,
			input
				{color: var(--gblfg0)}

			/* Gray */
			.faded,
			li,
			input::placeholder
				{color: var(--gblgray)}
			/* Links */
			.hocus\:text-blue-600
				{color: var(--gblblue)}
			li .hocus\:text-blue-600
				{color: var(--gbldblue)}

			/* Musi */
			.text-pink-400
				{color: var(--gblpurple)}

		/* Filter colors */
			.bg-emerald-400
				{background-color: var(--gblaqua)}
			.bg-sky-400
				{background-color: var(--gblblue)}
			.bg-violet-400
				{background-color: var(--gblpurple)}
			.bg-yellow-500
				{background-color: var(--gblyellow)}
			.bg-red-500
				{background-color: var(--gblred)}
			.bg-zinc-500
				{background-color: var(--gblgray)}

		/* Entries/Navigation */
			/* Entries/Filters */
				.interactable {
					background-color: var(--gblbg1);
					border-color: var(--gblbg2)
				}
				.interactable:hover
					{border-color: var(--gblaqua)}

			/* Info popup */
				.bottom-0 {
					background-color: var(--gblbg1);
					border-color: var(--gblbg0h)
				}

			/* Nav buttons */
				.sm\:rounded-t-none {
					color: var(--gblgray);
					border-color: var(--gblbg1)
				}
				.sm\:rounded-t-none:hover {
					color: var(--gblfg2);
					border-color: var(--gblaqua)
				}
			/* Search */
				.shadow-lg {background-color: var(--gblbg0h)}

	/* Dark theme */
		/* Background */

		/* Scrollbar */
			html.dark {
				--scrollbar-bg: var(--gbdbg0);
				--scrollbar-thumb: var(--gbdgray)
			}

		/* Text */
			/* Main Content */
			.dark p,
			.dark h1,
			.dark h2,
			.dark h3,
			.dark h4,
			.dark h5,
			.dark h6,
			.dark input
				{color: var(--gbdfg1)}

			/* Gray */
				.dark .faded,
				.dark li,
				.dark input::placeholder
					{color: var(--gbdgray)}

			/* Links */
				.dark li .hocus\:text-blue-600
					{color: var(--gbddblue)}
				.dark .hocus\:text-blue-600
					{color: var(--gbdblue)}

			/* Musi */
				.dark .text-pink-400
					{color: var(--gbpurple)}

		/* Filter Colors */
			.dark .dark\:bg-black
				{background-color: var(--gbdbg0)}
			.dark .dark\:bg-emerald-600
				{background-color: var(--gbdaqua);}
			.dark .dark\:bg-sky-600
				{background-color: var(--gbdblue)}
			.dark .dark\:bg-violet-600
				{background-color: var(--gbddpurple)}
			.dark .dark\:bg-yellow-600
				{background-color: var(--gbdyellow)}
			.dark .dark\:bg-red-600
				{background-color: var(--gbdred)}
			.dark .dark\:bg-zinc-600
				{background-color: var(--gbdgray)}

		/* Entries/Navigation */
			/* Entries/Filters */
				.dark .interactable {
					background-color: var(--gbdbg1);
					border-color: var(--gbdbg0h)
				}
				.dark .interactable:hover {
					border-color: var(--gbdaqua)}

			/* Info popup */
				.dark .bottom-0 {
					background-color: var(--gbdbg1);
					border-color: var(--gbdbg0h)
				}

			/* Nav buttons */
				.dark .sm\:rounded-t-none {
					color: var(--gbdgray);
					border-color: var(--gbdbg1)
				}
				.dark .sm\:rounded-t-none:hover {
					color: var(--gbdfg2);
					border-color: var(--gbdaqua)
				}

			/* Search */
				.dark .shadow-lg
					{background-color: var(--gbdbg2)}
}