NextDNS - custom theme by tidy-easy-stockade

NextDNS - custom theme screenshot
Install Get Stylus Write a review

Details

Authortidy-easy-stockade

LicenseNo License

Created atFebruary 22, 2022 05:30

Updated atMarch 24, 2022 09:09

Applies tonextdns

Statistics

Learn how we calculate statistics in the FAQ.

Total views1018

Total installs314

Weekly installs28

Description

Custom theme for NextDNS.io with configurable colors.

Notes

Work in Progress

Please reinstall Style if you have installed previous setup (v2022.x.x).

Done mainly for me, but you are welcome to suggest changes: gritty.flag9090@fastmail.com

History

Daily snapshots of style statistics.

2022-02-222022-02-252022-02-272022-03-012022-03-032022-03-052022-03-082022-03-102022-03-122022-03-142022-03-162022-03-18Date0.0048.0095.00143.00190.00238.00285.00333.00380.00Daily countDaily installsDaily updatesDaily views
2022-02-222022-02-252022-02-272022-03-012022-03-032022-03-052022-03-082022-03-102022-03-122022-03-142022-03-162022-03-18Date0.00112.00223.00334.00445.00557.00668.00779.00890.00Total countTotal installsTotal views

Source code

/* ==UserStyle==
@name         NextDNS.io
@version      1.0.17
@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 {
		background-color: var(--base-10);
		color: var(--text-color);
		border-bottom-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
	**/
	.Header {
		background-color: var(--background);
		border-bottom-color: var(--base-10);
		position: relative;
	}
	.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[style] {
		background-color: lighten(baseColor, 7%) !important;
		transition: background-color .3s;
	}
	.list-group-item[style]:hover {
		background-color: var(--base-5) !important;
	}
	.list-group-item[style] .btn-link[style] {
		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[style] {
		background-color: var(--base-10) !important;
		border-color: var(--base-20) !important;
	}
	#setup-guide .list-group-item .mt-2[style] .notranslate[style] {
		color: var(--text-color) !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[style] > .container > .row:nth-of-type(2) .col-md-4:nth-of-type(2) .card-body > div:first-child,
	.Analytics[style] > .container > .row:nth-of-type(2) .col-md-4:nth-of-type(3) .card-body > div:first-child,
	.Analytics[style] > .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[style] .recharts-layer.recharts-area:first-of-type .recharts-curve.recharts-area-area:nth-of-type(1) {
		fill: var(--base-20);
	}
	.Analytics[style] .recharts-layer.recharts-area:first-of-type .recharts-curve.recharts-area-curve:nth-of-type(2) {
		stroke: var(--base-5);
	}

	.Analytics[style] .recharts-layer.recharts-area:nth-of-type(2) .recharts-curve.recharts-area-area:nth-of-type(1),
	.Analytics[style] .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[style] .recharts-layer.recharts-area:nth-of-type(2) .recharts-curve.recharts-area-curve:nth-of-type(2),
	.Analytics[style] .recharts-layer.recharts-area:nth-of-type(3) .recharts-curve.recharts-area-curve:nth-of-type(2) {
		stroke: var(--base-50);
	}

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

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

	.Analytics[style] .list-group-item[style*="border-left"] {
		border-left-color: var(--base-20) !important;
	}
	
	.Analytics[style] .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(--base-30);
	}

	.Analytics[style] .rsm-geographies {
		filter: grayscale(100%);
	}
	
	/**
	* Logs
	**/
	.Logs .fa-search,
	.Logs a[href="#clear"] {
		color: var(--text-color) !important;
		opacity: 1 !important;
	}

	.settings-button path,
	.stream-button path {
		fill: var(--text-color);
	}

	.Logs > .container > .row:nth-of-type(2) .list-group-flush .px-3 .d-md-flex {
		background-color: var(--base-10);
		padding: 10px;
	}
	.Logs > .container > .row:nth-of-type(2) .list-group-flush .px-3 .d-md-flex > .d-flex {
		margin-top: 0 !important;
	}

	.Logs .log.list-group-item {
		border-bottom-color: var(--base-10);
		transition: background-color .3s;
	}
		.Logs .log.list-group-item:hover {
			background-color: var(--base-5) !important;
		}
	.Logs .log.list-group-item[style*="65"] {
		border-left-color: var(--base-20) !important;
	}
	.Logs .log.list-group-item[style*="204"] {
		border-left-color: var(--base-30) !important;
	}
	.Logs .log.list-group-item .fa-lock {
		color: var(--base-50) !important;
	}
	.Logs .log.list-group-item .d-flex .d-flex .mr-2 + .notranslate[style*="238"],
	.Logs .log.list-group-item .d-flex .text-right .notranslate[style*="238"] {
		background-color: var(--base-20) !important;
	}
	.Logs .log.list-group-item a[href*="show-more"] svg {
		color: var(--base-40) !important;
		opacity: 1 !important;
	}
	.Logs .log.list-group-item .mt-3 .notranslate span[style*="238"],
	.tooltip.bs-tooltip-bottom .tooltip-inner .mt-2 svg + span {
		background-color: var(--base-20) !important;
	}
	.tooltip.bs-tooltip-bottom {
		opacity: 1 !important;
	}
	.tooltip.bs-tooltip-bottom .tooltip-inner {
		background-color: var(--base-5) !important;
	}
	
	/**
	* Settings
	**/
	.Header + .mt-4 > .container .card-body .d-flex.align-items-center.flex-wrap {
		filter: brightness(0) saturate(100%) invert(81%) sepia(92%) saturate(2981%) hue-rotate(184deg) brightness(120%) contrast(105%);
	}

	/**
	* Footer
	**/
	.px-3.text-center span[style] {
		color: var(--text-color);
		opacity: 1 !important;
	}
}

Reviews

No reviews yet.