hestiacp/web/css/src/themes/dark.css

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

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

:root {
	/* Colors */
	--color-text: #cdcdcd;
	--color-text-link: #4fabe9;
	--color-text-link-hover: #ff3478;
	--color-text-heading: #e8e8e8;
	--color-background: #282828;

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

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

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

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

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

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

.top-bar-usage-item {
	color: #cacaca;

	& .fas {
		color: #909090;
	}
}

.top-bar-notifications-panel {
	background-color: rgb(50 50 50 / 99%);

	@media (--viewport-small) {
		border-color: #404040;
	}
}

.top-bar-notifications-empty {
	color: #dadada;

	& .fas {
		color: #dadada;
	}
}

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

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

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

.top-bar-notifications-delete-all {
	border-top-color: #282828;
}

.top-bar-menu-panel {
	background-color: var(--top-bar-background);
}

.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: #aaa;

		& span {
			color: #aaa;
		}
	}
}

.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 {
			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%
				),
				#454545;
			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%);
}

/* Clipboard component
   ========================================================================== */

.clipboard {
	& .clipboard-input {
		border-color: #606060;
	}
}

.clipboard-button {
	background-color: #353535;
}

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

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

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

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

/* Box collapse component
		========================================================================== */

.box-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;
}

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

.collapse-header {
	border-bottom-color: #484848;
}

/* Units table
   ========================================================================== */

.units-table-header {
	@media (--viewport-large) {
		background: #404040;
		box-shadow: none;
		text-shadow: 0 1px rgb(0 0 0 / 95%);
		border-color: #212121;
	}
}

.units-table-row {
	border-color: #282828;
	background-color: #303030;

	&.selected {
		background-color: #454545;
		box-shadow: none;
	}

	&.disabled {
		color: #606060;
		background-color: #252525;

		&.selected {
			color: #333;
			background-color: #454545;
		}
	}

	&.focus {
		background-color: #353535;
	}

	@media (--viewport-large) {
		&:hover {
			background-color: #353535;
			border-color: #282828;
			box-shadow: none;
		}

		&.selected {
			border-left-color: #212121;
			border-right-color: #212121;

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

		&.disabled {
			&:hover {
				background-color: #252525;
			}

			&.selected:hover {
				color: #333;
				background-color: #454545;
			}
		}
	}
}

.units-table-cell {
	& a {
		color: #fafafa;

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

.units-table-row-action-link {
	border-color: #454545;
	background-color: #282828;

	@media (--viewport-large) {
		background-color: transparent;
	}
}

.units-table-badge {
	@media (--viewport-large) {
		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;
	}
}

/* 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-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;
}

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

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

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

.hint {
	color: #a2a2a2;
}

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

.button {
	color: #eee;
	text-shadow: 0 1px 1px rgb(0 0 0 / 35%);
	font-weight: 400;
	border-color: #707070;
	background: linear-gradient(
			0deg,
			rgb(48 48 48 / 100%) 0%,
			rgb(53 53 53 / 100%) 35%,
			rgb(69 69 69 / 100%) 100%
		),
		#303030;
	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%
			),
			#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: linear-gradient(
			0deg,
			rgb(48 48 48 / 100%) 0%,
			rgb(53 53 53 / 100%) 100%,
			rgb(69 69 69 / 100%) 100%
		),
		#343434;

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

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

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

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

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

.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%);
}

.console-output {
	color: #dadada;
}

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

.spinner-overlay {
	& .fas {
		box-shadow: 0 8px 25px rgb(0 0 0 / 90%);
	}
}

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

.icon-highlight {
	color: #dadada;

	&:hover {
		color: #dadada;
	}
}

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

/* 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 modal
   ========================================================================== */

.shortcuts {
	background-color: #2c2c2c;
	border-color: #404040;
	box-shadow: 0 8px 25px rgb(0 0 0 / 90%);
}

.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;
	}
}

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

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

.app-footer-link {
	color: #cdcdcd;
}

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

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

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

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

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