vestia.css

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

@custom-media --viewport-medium (min-width: 768px);

:root {
	--animate-duration: 0s;
	--font-family: "Arial", system-ui;
	--alert-box-shadow: none;
	--alert-text-shadow: none;
}

b,
strong {
	font-weight: 600;
}

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

.top-bar {
	box-shadow: none;
	background: #5d5d5d;
}

.top-bar-notifications-list {
	border: 1px solid #ccc;
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	box-shadow: 0 2px 10px 0 rgb(0 0 0 / 25%);
}

.top-bar-notification-item.unseen {
	& .top-bar-notification-title,
	& .top-bar-notification-title a {
		color: #111;
	}
}

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

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

.top-bar-menu-link {
	&:hover,
	&:active {
		color: #fff;
		background: #f79b44;
		box-shadow: none;
		text-shadow: none;
		transition: none;
	}

	&.active {
		color: #ff6701;
		background: #fff;
	}
}

.table-header {
	box-shadow: none;
	background: #fafafa;
	line-height: 1.2rem;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.l-unit:hover {
	box-shadow: none;
}

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

.l-unit__stat-col--left a:hover {
	color: #ff6701;
}

.l-unit:hover,
.units .l-unit:hover {
	box-shadow: none;
}

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

.button {
	border-color: transparent;
	color: #fff;
	text-shadow: 0 1px 2px rgb(0 0 0 / 40%);
	text-transform: uppercase;
	font-weight: 600;
	padding-top: 6px;
	padding-bottom: 6px;
	background: #a0c105;
	background-color: #a0c105;
	border-radius: 2px;
	box-shadow: none;

	&:hover {
		border-color: transparent;
		color: #fff;
		background: #a9cc06;
		background-color: #a9cc06;
		text-shadow: 0 1px 2px rgb(0 0 0 / 30%);
		transition: none;
		box-shadow: none;
	}

	&:active,
	&:focus {
		border-color: transparent;
		color: #fff;
		background: #809c00;
		background-color: #809c00;
		text-shadow: 0 0 2px rgb(0 0 0 / 20%);
		box-shadow: none;
	}

	& .fas {
		display: none;
	}
}

.button-secondary {
	color: #414141;
	text-shadow: none;
	text-transform: none;
	border-color: #bbb;
	background: #fff;

	&:hover {
		color: #326b9b;
		text-shadow: none;
		border-color: #bbb;
		background: #f5f5f5;
	}

	&:active,
	&:focus {
		color: #326b9b;
		text-shadow: none;
		border-color: #aaa;
		background: #f5f5f5;
	}
}

.button-danger:hover {
	color: #f4301a;
	text-shadow: none;
}

.button-floating {
	& .fas {
		display: block;
	}
}

.ui-dialog {
	box-shadow: 0 2px 11px 0 rgb(0 0 0 / 50%);

	& .ui-dialog-buttonpane button {
		box-shadow: none;
	}
}

.context-menu.sort-order {
	box-shadow: none;
	border: 1px solid #ccc;
	font-size: 0.75rem;
	background: #fff;
}

.form-control,
.form-select {
	box-shadow: none;
	border-radius: 0;
}

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

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

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

	& .fas {
		display: none;
	}

	@media (--viewport-medium) {
		text-align: left;

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

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

.main-menu-item-label {
	font-size: 0.9rem;
}

.form-control:focus {
	border-color: #ff6701;
	background-color: #fff4ed;
	color: #333;
}

.form-select:focus {
	border-color: #ff6701;
	color: #333;
}

.form-control:hover,
.form-select:hover {
	border-color: #e95e00;
}

.form-title {
	font-weight: 600;
	font-size: 1.2rem;
}

.toolbar-submit {
	background-color: #cacaca;
	border-radius: 0;
	color: #fff;
	text-shadow: 0 1px 2px rgb(0 0 0 / 35%);

	&:hover {
		color: #777;
		background-color: #cacaca;
		text-shadow: 0 1px 2px rgb(255 255 255 / 45%);
	}

	&:active {
		text-shadow: none;
		color: #a9cc06;
	}
}

.ui-widget,
.ui-dialog,
.ui-dialog .ui-dialog-title {
	font-family: var(--font-family);
}

.ui-dialog .ui-dialog-title {
	color: #111;
}

.ui-dialog .ui-dialog-content {
	color: #333;
}

.toolbar-buttons {
	& .button {
		border-color: transparent;
		color: #fff;
		text-transform: uppercase;
		text-shadow: 0 1px 2px rgb(0 0 0 / 40%);
		background: #a0c105;
		background-color: #a0c105;

		&:hover {
			border-color: transparent;
			color: #fff;
			background: #a9cc06;
			background-color: #a9cc06;
			text-shadow: 0 1px 2px rgb(0 0 0 / 30%);
		}
	}

	& .button-danger:hover {
		color: #f4301a;
		text-shadow: none;
	}

	& #btn-back {
		color: #30659d;
		background: none;
		text-shadow: none;
		text-transform: none;
		font-size: 0.9rem;
		border: none;

		&:hover {
			color: #367ac1;
			background: none;
			text-shadow: none;
			text-transform: none;
		}

		&:active,
		&:focus {
			color: #ff6701;
			background: none;
			text-shadow: none;
			text-transform: none;
		}
	}
}

.toolbar .form-control {
	&:hover {
		border-right-color: #e95e00;
	}

	&:focus {
		border-right-color: #e95e00;
	}
}

.l-unit__name {
	letter-spacing: 0 !important;
}

.badge {
	border: none !important;
	background-color: none !important;
	box-shadow: none !important;
	border-radius: 4px !important;
}

.password-meter {
	border-radius: 0;
	box-shadow: none;
	margin-left: 0;
	margin-right: 0;
}

.server-info-data {
	line-height: 1rem !important;
}

.shortcuts {
	border-color: #111;
	border-radius: 2px;
	box-shadow: 0 3px 12px rgb(0 0 0 / 80%);
}

.shortcuts-title,
.shortcuts .key {
	color: #b5da0b;
}

.context-menu.sort-order span.active {
	background: none !important;
	font-weight: bold !important;
	color: #444 !important;
}

.context-menu.sort-order span:hover {
	color: #ff6701 !important;
	background: none !important;
}

.badge.gray {
	border: 1px solid rgb(255 255 255 / 40%) !important;
}

.body-login,
.body-reset {
	background: #ededed;
}

.login {
	background-color: rgb(255 255 255 / 100%);
	box-shadow: 0 2px 5px rgb(0 0 0 / 30%), inset 0 0 2px rgb(255 255 255);
	border-radius: 0;
}

.mail-infoblock {
	border-radius: 0 !important;
	box-shadow: none !important;
}

.helper-container {
	margin-top: 197px;
	border-radius: 0;
	box-shadow: none;
}

.cron-helper-tabs .ui-tabs-selected a,
li[aria-expanded="true"] a {
	color: #ff6701;
}

.cron-helper-tabs a:hover {
	color: #f79b44;
}

.cron-helper-tabs a:active {
	color: #e95e00;
}

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

.collapse-header {
	background: #fafafa;
	box-shadow: none;
	color: #444;

	&:hover {
		color: #ff791f;
	}

	& .fas {
		display: none;
	}
}