dark.css

/*
    Theme Name:  Dark
    Author:      Kristan Kenney (@kristankenney)
    Website:     www.hestiacp.com
*/

@import url("../media_queries");

:root {
	--color-text: #cdcdcd;
	--color-text-link: #4fabe9;
	--color-text-link-hover: #ff3478;
	--color-background: #282828;
	--alert-border-color: #212121;

	/* Alerts */
	--alert-danger-color: #d13535;

	/* Icons */
	--icon-color-purple: #c364ff;
	--icon-color-maroon: #ff3478;
	--icon-color-green: #37cf39;
	--icon-color-blue: #0092f4;

	/* Charts */
	--chart-label-color: #cdcdcd;
	--chart-grid-color: #434343;
}

b,
strong {
	color: #cacaca;
}

/* Top bar
   ========================================================================== */

.top-bar {
	background: #454545;
	border-bottom: 1px solid #505050;
	box-shadow: 0 8px 15px rgb(0 0 0 / 25%);
}

.top-bar-usage-inner {
	color: #909090;
}

.top-bar-notifications-list {
	background-color: rgb(50 50 50 / 99%);
	border: 1px solid #404040;
}

.top-bar-notification-item {
	text-shadow: 0 1px rgb(0 0 0 / 50%);
	color: #dadada;
	border-bottom: 1px solid #282828;

	&.empty {
		& .fas {
			color: #dadada;
		}
	}

	&.unseen .top-bar-notification-title {
		color: #fff;
	}
}

.top-bar-notification-delete {
	& .fas {
		color: #ff3478;
	}
}

.top-bar-menu-list {
	background-color: #454545;
}

.top-bar-menu-link {
	&:hover {
		color: #dadada;
		text-shadow: 1px 1px rgb(0 0 0 / 50%);
		background: linear-gradient(
			to bottom,
			rgb(15 15 15 / 60%) 0%,
			rgb(45 45 45 / 75%) 30%,
			rgb(60 60 60 / 100%) 95%
		);
		box-shadow: none;
	}

	&:active {
		background: linear-gradient(
			to bottom,
			rgb(15 15 15 / 70%) 0%,
			rgb(45 45 45 / 85%) 30%,
			rgb(50 50 50 / 100%) 95%
		);
		color: #fff;
		text-shadow: 0 -1px 1px rgb(0 0 0 / 50%);
	}

	&.active {
		color: #dadada;
		background: linear-gradient(
			to bottom,
			rgb(15 15 15 / 60%) 0%,
			rgb(45 45 45 / 75%) 30%,
			rgb(60 60 60 / 100%) 95%
		);
		text-shadow: 0 1px rgb(0 0 0 / 50%);
		border-left-color: #353535;
		border-right-color: #353535;
	}
}

.top-bar-menu-link-logout {
	color: #e7e7e7;
}

/* Main menu
   ========================================================================== */

.main-menu-toggle {
	&:hover {
		& .main-menu-toggle-label {
			color: #d7d7d7;
		}
	}

	& .fas {
		color: #d7d7d7;
	}
}

.main-menu-toggle-label {
	color: #bcbcbc;
}

.main-menu-list {
	border-top-color: #454545;
}

.main-menu-item-link {
	&:hover {
		& .main-menu-item-label {
			color: #d7d7d7;
		}
	}

	&.active {
		& .main-menu-item-label {
			color: #c36;

			& .fas {
				color: #d7d7d7;
			}
		}
	}

	@media (--viewport-medium) {
		border-bottom-color: #282828;

		&:hover {
			border-bottom-color: #d7d7d7;
		}

		&.active {
			border-bottom-color: #c36;
		}
	}
}

.main-menu-item-label {
	font-weight: 500;
	color: #bcbcbc;

	& .fas {
		color: #707070;
	}
}

/* Toolbar
   ========================================================================== */

.toolbar {
	border-color: #454545;
	background-color: #282828;

	&.active {
		box-shadow: 0 4px 6px rgb(0 0 0 / 25%);
	}

	& .form-select {
		border-color: #454545;
		background-color: #212121;

		&:hover {
			background-color: #212121;
		}
	}

	& .form-control {
		border-color: #454545;
		background-color: #212121;

		&:hover {
			background-color: #212121;
			border-right-color: #0090ff;
		}

		&:focus {
			border-right-color: #0080df;
		}
	}
}

.toolbar-sorting-toggle {
	&:hover {
		color: #bcbcbc;

		& b {
			color: #bcbcbc;
		}
	}
}

.toolbar-sorting-menu {
	background-color: rgb(40 40 40 / 95%);
	box-shadow: 0 2px 16px 0 rgb(20 20 20 / 65%);
	border-color: rgb(90 90 90 / 100%);

	& li {
		border-bottom: 1px solid #454545;
		color: #dadada;
	}

	& span {
		&:hover {
			color: #fff;
			background: linear-gradient(
				to bottom,
				rgb(25 25 25 / 60%) 0%,
				rgb(55 55 55 / 75%) 30%,
				rgb(70 70 70 / 100%) 95%
			);
			text-shadow: 0 -1px 1px rgb(0 0 0 / 50%);
			box-shadow: inset 0 0 1px rgb(0 0 0 / 40%), inset -1px -1px 4px rgb(40 40 40 / 40%);
		}

		&:active,
		&:focus {
			background: linear-gradient(
				to bottom,
				rgb(35 35 35 / 60%) 0%,
				rgb(65 65 65 / 75%) 30%,
				rgb(80 80 80 / 100%) 95%
			);
			color: #fff;
			text-shadow: 0 -1px 1px rgb(0 0 0 / 50%);
			box-shadow: inset 0 0 1px rgb(0 0 0 / 40%), inset -1px -1px 4px rgb(40 40 40 / 40%);
		}

		&.active {
			background-color: #454545 !important;
			color: #fff;
			background: linear-gradient(
				to bottom,
				rgb(15 15 15 / 60%) 0%,
				rgb(45 45 45 / 75%) 30%,
				rgb(60 60 60 / 100%) 95%
			);
			text-shadow: 0 1px rgb(0 0 0 / 80%);
		}
	}
}

.toolbar-input-submit {
	border-color: #454545;
	background-color: #424242;
	text-shadow: 1px 1px rgb(0 0 0 / 90%);
	box-shadow: 0 1px 1px rgb(0 0 0 / 40%);
	color: #cacaca;

	&:hover {
		color: #09f;
		background-color: #454545;
	}

	&:active {
		color: #0074c2;
		text-shadow: 0 -1px rgb(255 255 255 / 20%);
		box-shadow: inset 1px 1px 0 rgb(0 0 0 / 20%);
	}
}

.toolbar-link {
	color: #dadada;

	&.selected {
		color: #ff3478;
	}

	&:hover {
		color: #ff3478;
	}
}

/* Cards
   ========================================================================== */

.card {
	background-color: #454545;
	border-color: #606060;
	box-shadow: 0 1px 4px rgb(0 0 0 / 20%), inset 0 0 60px rgb(0 0 0 / 25%);
}

.card-content {
	color: #fafafa;
	text-shadow: 0 1px rgb(0 0 0 / 95%);
}

/* Server summary component
   ========================================================================== */

.server-summary-icon {
	color: #707070;
}

.server-summary-title {
	color: #fafafa;
}

/* Panel component
		========================================================================== */

.panel {
	background-color: #454545;
	border-color: #606060;
	box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
}

/* Collapse component
		========================================================================== */

.collapse-header {
	background: #454545;
	border-color: #505050;
	text-shadow: 0 1px rgb(0 0 0 / 40%);
	box-shadow: inset 0 0 2px rgb(0 0 0 / 50%), 0 2px 6px rgb(0 0 0 / 40%);
	color: #fff;
}

.units-header {
	background: #404040;
	border-left: 1px solid #212121;
	border-right: 1px solid #212121;
	border-bottom: 1px solid #212121;
	text-shadow: 0 1px rgb(0 0 0 / 95%);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	color: #dadada;
	box-shadow: inset 0 1px 1px rgb(0 0 0 / 30%);
}

.l-unit {
	color: #dadada;
}

.units .l-unit {
	background-color: #303030;
	border-bottom: 1px solid #282828;
	border-left: 1px solid #212121;
	border-right: 1px solid #212121;
}

.l-unit:hover,
.units .l-unit:hover {
	box-shadow: 0 2px 10px rgb(20 20 20 / 20%);
	background-color: #353535;
	text-shadow: 0 1px rgb(0 0 0 / 50%);
	border-left: 1px solid #212121;
	border-right: 1px solid #212121;
}

.units .l-unit.l-unit--starred {
	border-left: 2px solid #ff3478;
}

.units .l-unit.focus {
	background-color: #353535;
}

.l-unit--suspended {
	background: #252525 !important;
	color: #606060 !important;
	text-shadow: 0 -1px rgb(0 0 0 / 40%) !important;
	box-shadow: inset 0 0 2px rgb(0 0 0 / 20%);
}

.l-unit--suspended a {
	color: #606060 !important;
	text-shadow: 0 -1px rgb(0 0 0 / 40%) !important;
}

.units .l-unit.l-unit--outdated {
	color: #d4d4d4;
	background-color: #981111;
}

.l-unit--outdated.selected {
	background: #b70000 !important;
	color: #fff !important;
	text-shadow: none !important;
}

.l-unit--outdated.selected b {
	color: #fff !important;
}

.l-unit--suspended b,
.l-unit--outdated b {
	color: #606060;
}

.l-unit--outdated b {
	color: #d4d4d4;
}

.l-unit--suspended.selected {
	background-color: #454545 !important;
	color: #707070 !important;
}

.l-unit__stat-col--left {
	& a,
	& a:visited {
		color: #fafafa;
	}

	& a:hover {
		color: #fff;
	}
}

/* Statistics
   ========================================================================== */

.stats-item {
	border-bottom-color: #404040;

	@media (--viewport-large) {
		&:hover {
			background-color: #353535;
			border-left-color: #353535;
			border-right-color: #353535;
			box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
		}
	}
}

.stats-item-header-title {
	color: #eee;
}

.stats-item-summary-title {
	border-bottom-color: #585858;
}

/* Forms
   ========================================================================== */

.form-title {
	color: #e8e8e8;
}

.form-label,
.form-check label {
	color: #d4d4d4;
}

.form-control {
	background-color: #454545;
	border-color: #606060;
	color: #d4d4d4;
	box-shadow: 0 1px 4px rgb(0 0 0 / 35%);

	&:hover {
		border-color: #0090ff;
		background-color: #494949;
	}

	&:focus {
		background-color: #222;
		border-color: #0080df;
		color: #fff;
		box-shadow: 0 1px 6px rgb(0 52 91 / 75%);
	}

	&.list-editor:focus {
		background-color: #222;
		box-shadow: none;
	}
}

.form-select {
	background-color: #454545;
	border-color: #606060;
	color: #d4d4d4;
	text-shadow: 0 0 0 #d4d4d4;
	box-shadow: 0 1px 4px rgb(0 0 0 / 35%);

	&:hover {
		border-color: #0090ff;
		background-color: #494949;
	}

	&:focus {
		background-color: #222;
		border-color: #0080df;
		color: #fff;
		box-shadow: 0 1px 6px rgb(0 52 91 / 75%);
	}
}

.form-control:disabled,
.form-select:disabled {
	background-color: #303030;
	text-shadow: 1px 1px rgb(0 0 0 / 30%);
	color: #acacac;
	border-color: #606060;

	&:hover {
		border-color: #606060;
	}
}

.form-link {
	color: #09f;

	&:hover {
		background-color: #3b9de8;
	}

	&:active {
		background-color: #54a6e5;
	}
}

.form-link-danger {
	&:hover {
		background-color: #ff3478;
	}

	&:active {
		background-color: #be1f54;
	}
}

.unlimited-toggle {
	& .fas {
		color: #d4d4d4;
	}
}

.hint {
	color: #a2a2a2;
}

.section-title {
	color: #d4d4d4;
	border-bottom-color: #484848;
}

/* Buttons
   ========================================================================== */

.button {
	color: #eee;
	text-shadow: 0 1px 1px rgb(0 0 0 / 35%);
	font-weight: 400;
	border-color: #707070;
	background: #303030;
	background: linear-gradient(
		0deg,
		rgb(48 48 48 / 100%) 0%,
		rgb(53 53 53 / 100%) 35%,
		rgb(69 69 69 / 100%) 100%
	);
	box-shadow: 0 1px 4px rgb(0 0 0 / 20%), inset 0 0 1px rgb(20 20 20 / 100%),
		inset 0 0 3px rgb(0 0 0 / 50%);

	&:hover {
		color: #fff;
		text-shadow: 1px 1px rgb(0 0 0 / 25%);
		border-color: #0098ff;
		background: linear-gradient(
			0deg,
			rgb(58 58 58 / 100%) 0%,
			rgb(68 68 68 / 100%) 35%,
			rgb(79 79 79 / 100%) 100%
		);
		background-color: #454545;
		box-shadow: 0 1px 3px rgb(0 0 0 / 35%), inset 0 0 1px rgb(0 0 0 / 100%),
			inset 0 0 3px rgb(0 0 0 / 65%);
	}

	&:active {
		color: #d4d4d4;
		text-shadow: 0 -1px 1px rgb(0 0 0 / 55%);
		border-color: #0066b4;
		background: linear-gradient(
			0deg,
			rgb(69 69 69 / 100%) 0%,
			rgb(53 53 53 / 100%) 35%,
			rgb(48 48 48 / 100%) 100%
		);
		box-shadow: 0 1px 3px rgb(0 0 0 / 30%), inset 0 0 1px rgb(0 0 0 / 100%),
			inset -1px -1px 4px rgb(30 30 30 / 40%);
	}
}

.button-secondary {
	border-color: #454545;
	background-color: #343434;
	background: linear-gradient(
		0deg,
		rgb(48 48 48 / 100%) 0%,
		rgb(53 53 53 / 100%) 100%,
		rgb(69 69 69 / 100%) 100%
	);

	&:hover {
		background-color: #343434;
		background: linear-gradient(
			0deg,
			rgb(48 48 48 / 100%) 0%,
			rgb(53 53 53 / 100%) 100%,
			rgb(69 69 69 / 100%) 100%
		);
	}
}

.button-danger {
	&:hover {
		background: rgb(133 0 0);
		background: linear-gradient(0deg, rgb(133 0 0 / 100%) 0%, rgb(203 0 0 / 100%) 100%);
		color: #fff;
		text-shadow: 0 1px rgb(0 0 0 / 45%);
		border-color: rgb(170 0 0);
	}

	&:active,
	&:focus {
		background: rgb(133 0 0);
		background: linear-gradient(180deg, rgb(133 0 0 / 100%) 0%, rgb(203 0 0 / 100%) 100%);
		color: #4d0000;
		text-shadow: 0 -1px 1px rgb(255 255 255 / 30%);
		border-color: rgb(251 71 51);
	}
}

/* Login
   ========================================================================== */

.body-login,
.body-reset {
	background: #303030;
	background: radial-gradient(circle, rgb(77 77 77 / 100%) 0%, rgb(31 31 31 / 100%) 100%);
}

.login {
	& .error {
		color: #f864fa;
	}

	@media (--viewport-small) {
		background-color: #282828;
		box-shadow: 0 8px 25px rgb(0 0 0 / 30%), inset 0 0 2px rgb(0 0 0 / 25%);

		& .form-label {
			color: #fff;
		}
	}
}

.login-title {
	color: #fff;
}

.login-form-link {
	color: #eee;
	text-transform: initial;
	font-weight: 400;

	&:hover {
		color: #ff3478;
	}
}

.qr-code {
	border: 1px solid #3b3b3b;
	box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
}

.l-unit.selected {
	background-color: #454545;
	color: #d4d4d4;
	box-shadow: 0 2px 10px rgb(30 30 30 / 35%);
	text-shadow: 0 1px rgb(0 0 0 / 50%);
	border-left: 1px solid #212121;
	border-right: 1px solid #212121;
}

.l-unit.selected:hover {
	background-color: #555;
	color: #d4d4d4;
	box-shadow: none !important;
	text-shadow: 0 1px rgb(0 0 0 / 40%);
}

.l-unit.selected b,
.l-unit.selected strong {
	color: #d4d4d4;
}

.console-output {
	color: #dadada;
}

#vstobjects.suspended {
	background-color: #282828;
}

/* Spinner
   ========================================================================== */

.spinner-overlay {
	background-color: rgb(0 0 0 / 50%);
}

/* Badge component
   ========================================================================== */

.badge {
	color: #dadada;
	border-color: #212121;
	box-shadow: 0 1px 2px rgb(70 70 70 / 50%), inset 0 2px 2px rgb(0 0 0 / 65%);
	text-shadow: 0 1px rgb(0 0 0 / 70%);
	background-color: #252525;
}

.l-unit--suspended .badge {
	background-color: #303030;
	color: #808080;
	text-shadow: 0 -1px rgb(0 0 0 / 40%);
	box-shadow: 0 1px 2px rgb(25 25 25 / 30%);
}

/* Icon component
   ========================================================================== */

.icon-highlight {
	color: #dadada;

	&:hover {
		color: #dadada;
	}
}

.icon-dim {
	color: #808080;
	text-shadow: 1px 1px rgb(0 0 0 / 30%);
}

.l-unit--suspended .icon-dim {
	color: #808080;
}

/* Modals
   ========================================================================== */

.modal {
	background-color: #2c2c2c;
	border-color: rgb(80 80 80 / 97%);
	box-shadow: inset 0 1px 3px rgb(0 0 0 / 25%), 0 8px 25px rgb(0 0 0 / 90%);
}

.modal-title {
	color: #f12569;
}

.modal-message {
	color: #dadada;
}

.modal-options {
	border-top: 1px solid #404040;
}

/* Shortcuts panel
   ========================================================================== */

.shortcuts {
	background: rgb(30 30 30 / 95%);
	border: 1px solid rgb(255 255 255 / 25%);
	box-shadow: 0 0 20px rgb(0 0 0 / 50%);
}

.shortcuts-header {
	border-bottom: 1px solid #353535;
}

/* Tabs component
   ========================================================================== */

.tabs {
	box-shadow: 0 1px 4px rgb(0 0 0 / 25%);
	border-color: #606060;
	background-color: #454545;
}

.tabs-item {
	color: #cacaca;

	&:hover,
	&[aria-selected="true"] {
		color: #ff3478;
	}

	&:active {
		color: #3b9de8;
	}
}

.server-console-output {
	background-color: #282828;
}

.body-stats .units .l-unit {
	background-color: #282828;
	border-bottom: 1px solid #404040;
	border-left: 1px solid #282828;
	border-right: 1px solid #282828;
}

.body-stats .units:hover .l-unit:hover {
	background-color: #303030 !important;
	color: #fff !important;
}

.body-stats .units:hover .l-unit:hover b,
.body-stats .units:hover .l-unit:hover strong {
	color: #fff !important;
}

/* App footer
   ========================================================================== */

.app-footer {
	color: #cdcdcd;
	border-color: #454545;
}

/* Inline alerts
   ========================================================================== */

.inline-alert-success {
	& a {
		color: #fff;

		&:hover {
			color: #ff3478;
		}
	}
}

/* Debug panel
   ========================================================================== */

.debug-panel-content {
	background-color: #282828;
}