NextDNS - custom theme by tidy-easy-stockade

/* ==UserStyle==
@name         NextDNS.io
@version      1.1.2
@namespace    userstyles.world/user/tidy-easy-stockade
@description  Dark theme for NextDNS.io
@author       tidy-easy-stockade
@license      No License
@preprocessor stylus

@var color baseColor "Base Theme Color" #000c1a
@var color accentColor "Accent Theme Color" #0d7dff
==/UserStyle== */
@-moz-document domain("my.nextdns.io") {
	/**
	* Config 
	**/
	:root {
		--accent: accentColor;
		--accent-darken: lighten(accentColor, 30%);
		--accent-5: lighten(accentColor, 5%);
		--accent-10: lighten(accentColor, 10%);
		--accent-20: lighten(accentColor, 20%);
		--accent-30: lighten(accentColor, 30%);
		--accent-40: lighten(accentColor, 40%);
		--accent-50: lighten(accentColor, 50%);
		--accent-60: lighten(accentColor, 60%);
		--accent-70: lighten(accentColor, 70%);
		--accent-80: lighten(accentColor, 80%);
		--accent-90: lighten(accentColor, 90%);
		--accent-100: lighten(accentColor, 100%);
		
		if dark(baseColor) {
			--base-0: lighten(baseColor, 0%);
			--base-5: lighten(baseColor, 5%);
			--base-10: lighten(baseColor, 10%);
			--base-20: lighten(baseColor, 20%);
			--base-30: lighten(baseColor, 30%);
			--base-40: lighten(baseColor, 40%);
			--base-50: lighten(baseColor, 50%);
			--base-60: lighten(baseColor, 60%);
			--base-70: lighten(baseColor, 70%);
			--base-80: lighten(baseColor, 80%);
			--base-90: lighten(baseColor, 90%);
			--base-100: lighten(baseColor, 100%);
		} else {
			--base-0: darken(baseColor, 0%);
			--base-5: darken(baseColor, 5%);
			--base-10: darken(baseColor, 10%);
			--base-20: darken(baseColor, 20%);
			--base-30: darken(baseColor, 30%);
			--base-40: darken(baseColor, 40%);
			--base-50: darken(baseColor, 50%);
			--base-60: darken(baseColor, 60%);
			--base-70: darken(baseColor, 70%);
			--base-80: darken(baseColor, 80%);
			--base-90: darken(baseColor, 90%);
			--base-100: darken(baseColor, 100%);
		}

		--background: baseColor;	

		--card-background: var(--base-5);
		--card-footer-background: var(--base-10);

		--button-background: var(--card-background);
		--button-border: var(--base-10);
		--dropdown-background-hover: var(--accent-20);

		--nav-background: var(--card-background);

		--text-color: var(--base-70);
	}
}

@-moz-document domain("my.nextdns.io") {
	/**
	* Global
	**/
	body {
		background-color: var(--background);
		color: var(--text-color);
	}
	
	a {
		color: var(--accent-20);
		
		&:hover {
			color: var(--accent-50);
		}
	}

	/**
	* Buttons
	*/
	.btn-primary {
		background-color: var(--accent);
		color: var(--accent-90);
		border-color: var(--accent);
		
		&:hover {
			background-color: darken(accentColor, 20%);
			border-color: darken(accentColor, 20%);
		}
		
		&.focus,
		&:focus {
			box-shadow: none;
		}
	}
	.btn-outline-primary {
		color: var(--accent);
		border-color: var(--accent);
		
		&:hover {
			background-color: var(--accent);
			color: var(--accent-90);
		}
	}
	
	.btn-light,
	.btn-light:disabled {
		background-color: var(--button-background);
		color: var(--text-color);
		border-color: var(--button-border);
		transition: border .3s, opacity .3s;
	}
		.btn-light:disabled {
			opacity: .5;
		}
	.btn-light.focus, .btn-light:focus, .btn-light:hover,
	.btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, .show > .btn-light.dropdown-toggle,
	.dropdown-menu {
		background-color: var(--button-background);
		color: var(--text-color);
		border-color: var(--accent-darken);
	}
	.btn-light:not(:disabled):not(.disabled).active:focus, .btn-light:not(:disabled):not(.disabled):active:focus, .show > .btn-light.dropdown-toggle:focus {
		box-shadow: none;
		border-width: 2px;
	}
	.dropdown-item, .dropdown-item.text-primary, .dropdown-item.active, .dropdown-item:active, .dropdown-item:focus, .dropdown-item:hover, .text-primary.dropdown-item:focus, .text-primary.dropdown-item:hover {
		color: var(--text-color) !important;	
	}
	.dropdown-item.active, .dropdown-item:active {
		background-color: var(--accent-30);		
	}
	.dropdown-item:focus, .dropdown-item:hover {
		background-color: var(--dropdown-background-hover);
	}
	.dropdown-divider {
		border-color: var(--accent-darken);
	}

	/**
	* Forms
	**/
	.form-control,
	.form-control:focus,
	.custom-select,
	.custom-select:focus {
		background-color: var(--base-10);
	}
	.form-control,
	.custom-select {
		color: var(--base-60);
		border-color: var(--base-20)
	}
	.form-control:focus,
	.custom-select:focus {
		color: var(--text-color);
		border-color: var(--accent-darken);
		box-shadow: none;
	}

	.custom-control-label::before {
		background-color: var(--base-5);
		border-color: var(--accent);
	}
	.custom-control-label::after {
		background-color: var(--accent-5) !important;
	}

	.custom-control-input:checked ~ .custom-control-label::before {
		background-color: var(--accent-60);
		border-color: var(--accent-10);
	}
	
	/**
	* Helpers
	**/
	.text-muted {
		color: var(--base-70) !important;
	}
	
	.list-group-item img[src*="data"] {
		filter: brightness(0) invert(1);
	}
	
	/**
	* Modal
	**/
	.modal-content {
		background-color: var(--base-5);
	}
	.modal-header {
		color: var(--text-color);
		border-bottom-color: var(--base-20);
		
		html:not(.tw) &,
		& {
			background-color: var(--base-20);			
		}
	}
		.modal-header .close {
			color: var(--text-color);			
		}
	.modal-footer {
		border-top-color: var(--base-10);
	}
}

@-moz-document domain("my.nextdns.io") {
	/**
	* my.nextdns.io
	**/
	[data-bs-theme] .Header {
		background-color: var(--background);
		border-bottom-color: var(--base-10);
		position: relative;
	}
	[data-bs-theme] .Header::after {
		content: "";
		display: block;
		border-bottom: 1px solid hsl(0, 0%, 15%);
		position: absolute;
		bottom: -2px;
		right: 0;
		left: 0;
	}

	.Header img {
		if dark(baseColor) {
			filter: brightness(0) invert(1);
		} else {
			filter: brightness(0) saturate(100%);
		}
	}
	
	/**
	* Navigation
	**/
	.nav {
		background: var(--nav-background) !important;
		border: none;
	}
	.nav .nav-link {
		color: var(--text-color);
		border: 2px solid transparent;
		transition: border .3s;
	}
	.nav .nav-link:focus {
		border-color: var(--accent);
	}
	.nav .nav-link:hover {
		border: 2px solid transparent;
		border-bottom-color: var(--accent);
	}
	.nav .nav-link.active {
		background-color: transparent;
		color: var(--text-color);
		border: 2px solid transparent;
		border-bottom-color: var(--accent-darken);
	}
	
	/**
	* Content
	**/
	.card,
	.list-group-item {
		background-color: var(--card-background);
		color: var(--text-color);
	}
	.list-group-item {
		background-color: lighten(baseColor, 7%) !important;
		transition: background-color .3s;
	}
	.list-group-item:hover {
		background-color: var(--base-5) !important;
	}
	.list-group-item .btn-link {
		color: var(--text-color) !important;
	}
	
	/**
	* Setup Guide
	**/
	#setup-guide .nav-link {
		color: var(--text-color);
		border-bottom: 2px solid transparent;
		border-radius: 0;
		transition: border .3s;
	}
	#setup-guide .nav-link:hover {
		border-bottom-color: var(--accent-darken);
	}
	#setup-guide .nav-link.active {
		background-color: transparent;
		border-bottom-color: var(--accent);
	}

	#setup-guide .d-inline-block,
	#setup-guide .list-group-item .mt-2 {
		background-color: var(--base-10) !important;
		border-color: var(--base-20) !important;
	}
	#setup-guide .list-group-item .mt-2 .notranslate {
		color: var(--text-color) !important;
	}
	
	/**
	* Privacy
	**/
	.list-group-flush {
		.list-group-item[style^="border-left:"] {
			border-left-color: var(--base-30) !important;
		}
	}
	
	/**
	* Parental Control
	**/
	.list-group-flush .list-group-item[style*="65"] {
		border-left-color: var(--base-20) !important;
	}
	.list-group-flush .list-group-item[style*="204"] {
		border-left-color: var(--base-30) !important;
	}
	.recreation-button,
	.recreation-button:hover,
	.recreation-icon {
		opacity: 1 !important;
	}
	.recreation-button path {
		fill: var(--base-20);
		transition: fill .3s;
	}
	.recreation-button:hover path {
		fill: var(--base-30);
	}
	.recreation-icon path {
		fill: var(--base-40);
	}
	
	/**
	* Analytics
	**/
	.Analytics > .container > .row:nth-of-type(2) .col-md-4:nth-of-type(2) .card-body > div:first-child,
	.Analytics > .container > .row:nth-of-type(2) .col-md-4:nth-of-type(3) .card-body > div:first-child,
	.Analytics > .container > .row:nth-of-type(2) .col:nth-of-type(1) .card-body > div .d-inline-block:nth-of-type(2) div:first-of-type {
		color: var(--text-color) !important;
		opacity: 1 !important;
	}

	.Analytics .recharts-layer.recharts-area:first-of-type .recharts-curve.recharts-area-area:nth-of-type(1) {
		fill: var(--base-20);
	}
	.Analytics .recharts-layer.recharts-area:first-of-type .recharts-curve.recharts-area-curve:nth-of-type(2) {
		stroke: var(--base-5);
	}

	.Analytics .recharts-layer.recharts-area:nth-of-type(2) .recharts-curve.recharts-area-area:nth-of-type(1),
	.Analytics .recharts-layer.recharts-area:nth-of-type(3) .recharts-curve.recharts-area-area:nth-of-type(1) {
		fill: var(--base-10) !important;
		fill-opacity: 1;
	}
	.Analytics .recharts-layer.recharts-area:nth-of-type(2) .recharts-curve.recharts-area-curve:nth-of-type(2),
	.Analytics .recharts-layer.recharts-area:nth-of-type(3) .recharts-curve.recharts-area-curve:nth-of-type(2) {
		stroke: var(--base-50);
	}

	.Analytics .recharts-dot[fill="#98caff"] {
		fill: var(--base-20);
		stroke: var(--base-5);
	}
	.Analytics .recharts-dot[fill="#ff4136"] {
		fill: var(--base-10);
		stroke: var(--base-50);
	}

	.Analytics .recharts-tooltip-wrapper .card-body span:nth-last-of-type(2) {
		color: var(--base-80) !important;
	}

	.Analytics .list-group-item[style*="border-left"] {
		border-left-color: var(--base-20) !important;
	}
	
	.Analytics .list-group-item img[src*="data"] {
		filter: brightness(0) invert(1);
	}
	
	/* Graphs */
	.progress {
		background-color: var(--base-20);
	}

	.recharts-sector {
		stroke: var(--base-0);
	}
	.recharts-sector[name="others"] {
		fill: var(--bas...