Initial
This commit is contained in:
Alexey Berezhok
810
web/css/src/themes/dark.css
Normal file
810
web/css/src/themes/dark.css
Normal file
@@ -0,0 +1,810 @@
|
||||
/*
|
||||
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-text-heading: #e8e8e8;
|
||||
--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;
|
||||
}
|
||||
|
||||
/* 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-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: #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: #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%
|
||||
);
|
||||
background-color: #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%);
|
||||
}
|
||||
|
||||
/* 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%);
|
||||
}
|
||||
|
||||
/* 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 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;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
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%);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Inline alerts
|
||||
========================================================================== */
|
||||
|
||||
.inline-alert-success {
|
||||
& a {
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
color: #ff3478;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Debug panel
|
||||
========================================================================== */
|
||||
|
||||
.debug-panel-content {
|
||||
background-color: #282828;
|
||||
}
|
||||
2530
web/css/src/themes/default.css
Normal file
2530
web/css/src/themes/default.css
Normal file
File diff suppressed because it is too large
Load Diff
186
web/css/src/themes/flat.css
Normal file
186
web/css/src/themes/flat.css
Normal file
@@ -0,0 +1,186 @@
|
||||
/*
|
||||
Theme Name: Flat
|
||||
Author: Robert Zollner (@Lupul)
|
||||
Website: www.hestiacp.com
|
||||
*/
|
||||
|
||||
@import url("../media_queries");
|
||||
|
||||
:root {
|
||||
/* Alerts */
|
||||
--alert-box-shadow: none;
|
||||
--alert-text-shadow: none;
|
||||
}
|
||||
|
||||
/* Top bar
|
||||
========================================================================== */
|
||||
|
||||
.top-bar {
|
||||
box-shadow: none;
|
||||
background: #5070a6;
|
||||
}
|
||||
|
||||
.top-bar-usage-inner {
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.top-bar-notifications-panel {
|
||||
@media (--viewport-small) {
|
||||
box-shadow: none;
|
||||
border-color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.top-bar-menu-link {
|
||||
text-shadow: none;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/* Toolbar
|
||||
========================================================================== */
|
||||
|
||||
.toolbar-sorting-menu {
|
||||
box-shadow: none;
|
||||
border-color: #ccc;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* Units table
|
||||
========================================================================== */
|
||||
|
||||
.units-table-row {
|
||||
@media (--viewport-large) {
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.units-table-cell {
|
||||
& a {
|
||||
color: #5f7eb3;
|
||||
|
||||
&:hover {
|
||||
color: #5f7eb3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.units-table-badge {
|
||||
@media (--viewport-large) {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Statistics
|
||||
========================================================================== */
|
||||
|
||||
.stats-item {
|
||||
@media (--viewport-large) {
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Spinner
|
||||
========================================================================== */
|
||||
|
||||
.spinner-overlay {
|
||||
& .fas {
|
||||
box-shadow: 0 2px 11px 0 rgb(0 0 0 / 50%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Collapse component
|
||||
========================================================================== */
|
||||
|
||||
.collapse-header {
|
||||
background: #fafafa;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
.form-control,
|
||||
.form-select {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Buttons
|
||||
========================================================================== */
|
||||
|
||||
.button {
|
||||
box-shadow: none;
|
||||
background: linear-gradient(to bottom, rgb(235 243 249 / 100%) 0%, rgb(223 235 245 / 100%) 100%);
|
||||
|
||||
&:hover {
|
||||
color: #6986b7;
|
||||
box-shadow: none;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgb(241 248 253 / 100%) 0%,
|
||||
rgb(227 240 251 / 100%) 100%
|
||||
);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgb(210 232 250 / 100%) 0%,
|
||||
rgb(194 224 248 / 100%) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
box-shadow: none;
|
||||
background: linear-gradient(to bottom, rgb(250 250 250 / 100%) 0%, rgb(241 241 241 / 100%) 100%);
|
||||
}
|
||||
|
||||
.button-danger {
|
||||
&:hover {
|
||||
background: #fcd3cf;
|
||||
color: #f4301a;
|
||||
border-color: #f27e71;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #a91200;
|
||||
color: #fff;
|
||||
border-color: #f4301a;
|
||||
}
|
||||
}
|
||||
|
||||
/* Modals
|
||||
========================================================================== */
|
||||
|
||||
.modal {
|
||||
box-shadow: 0 2px 11px 0 rgb(0 0 0 / 50%);
|
||||
}
|
||||
|
||||
/* Login
|
||||
========================================================================== */
|
||||
|
||||
.body-login,
|
||||
.body-reset {
|
||||
background: #5f7eb3;
|
||||
}
|
||||
|
||||
.login {
|
||||
@media (--viewport-small) {
|
||||
background-color: rgb(255 255 255 / 80%);
|
||||
box-shadow: 0 2px 10px rgb(0 0 0 / 30%), inset 0 0 2px rgb(255 255 255 / 100%);
|
||||
}
|
||||
}
|
||||
459
web/css/src/themes/vestia.css
Normal file
459
web/css/src/themes/vestia.css
Normal file
@@ -0,0 +1,459 @@
|
||||
/*
|
||||
Theme Name: Vestia
|
||||
Author: Kristan Kenney (@kristankenney)
|
||||
Website: www.hestiacp.com
|
||||
*/
|
||||
|
||||
@import url("../media_queries");
|
||||
|
||||
:root {
|
||||
--animate-duration: 0s;
|
||||
--font-family: "Arial", system-ui;
|
||||
--color-text-link: #444;
|
||||
--color-text-link-hover: #ff791f;
|
||||
|
||||
/* Alerts */
|
||||
--alert-box-shadow: none;
|
||||
--alert-text-shadow: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Top bar
|
||||
========================================================================== */
|
||||
|
||||
.top-bar {
|
||||
box-shadow: none;
|
||||
background: #5d5d5d;
|
||||
}
|
||||
|
||||
.top-bar-notifications-panel {
|
||||
@media (--viewport-small) {
|
||||
box-shadow: 0 2px 10px 0 rgb(0 0 0 / 25%);
|
||||
border-color: #ccc;
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.top-bar-notification-item {
|
||||
&.unseen .top-bar-notification-title {
|
||||
color: #111;
|
||||
}
|
||||
}
|
||||
|
||||
.top-bar-notification-delete {
|
||||
& .fas {
|
||||
color: #ff6701;
|
||||
}
|
||||
}
|
||||
|
||||
.top-bar-menu-panel {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* Toolbar
|
||||
========================================================================== */
|
||||
|
||||
.toolbar {
|
||||
& .form-control {
|
||||
&:hover {
|
||||
border-right-color: #e95e00;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-right-color: #e95e00;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-sorting-menu {
|
||||
box-shadow: none;
|
||||
border-color: #ccc;
|
||||
background-color: #fff;
|
||||
|
||||
& span {
|
||||
&:hover {
|
||||
color: #ff6701;
|
||||
background: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: none;
|
||||
font-weight: bold;
|
||||
color: #ff6701;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-input-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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
& .button-back {
|
||||
color: #326b9b;
|
||||
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 {
|
||||
color: #ff6701;
|
||||
background: none;
|
||||
text-shadow: none;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Units table
|
||||
========================================================================== */
|
||||
|
||||
.units-table-row {
|
||||
@media (--viewport-large) {
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.units-table-cell {
|
||||
& a:hover {
|
||||
color: #ff6701;
|
||||
}
|
||||
}
|
||||
|
||||
.units-table-badge {
|
||||
@media (--viewport-large) {
|
||||
border-color: #eaeaea;
|
||||
box-shadow: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Statistics
|
||||
========================================================================== */
|
||||
|
||||
.stats-item {
|
||||
@media (--viewport-large) {
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Spinner
|
||||
========================================================================== */
|
||||
|
||||
.spinner-overlay {
|
||||
& .fas {
|
||||
box-shadow: 0 2px 11px 0 rgb(0 0 0 / 50%);
|
||||
}
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
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: var(--color-text-link);
|
||||
text-shadow: none;
|
||||
text-transform: none;
|
||||
border-color: #bbb;
|
||||
background: #fff;
|
||||
|
||||
&:hover {
|
||||
color: #326b9b;
|
||||
text-shadow: none;
|
||||
border-color: #bbb;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: #326b9b;
|
||||
text-shadow: none;
|
||||
border-color: #aaa;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
.button-danger:hover {
|
||||
color: #f4301a;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.button-floating {
|
||||
& .fas {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Modals
|
||||
========================================================================== */
|
||||
|
||||
.modal {
|
||||
box-shadow: 0 2px 11px 0 rgb(0 0 0 / 50%);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.modal-message {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
.form-control,
|
||||
.form-select {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
|
||||
&:hover {
|
||||
border-color: #e95e00;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: #ff6701;
|
||||
background-color: #fff4ed;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-select:focus {
|
||||
border-color: #ff6701;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.password-meter {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Shortcuts panel
|
||||
========================================================================== */
|
||||
|
||||
.shortcuts {
|
||||
border-color: #111;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 3px 12px rgb(0 0 0 / 80%);
|
||||
}
|
||||
|
||||
.shortcuts-title,
|
||||
.shortcuts .key {
|
||||
color: #b5da0b;
|
||||
}
|
||||
|
||||
/* Panel component
|
||||
========================================================================== */
|
||||
|
||||
.panel {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* Collapse component
|
||||
========================================================================== */
|
||||
|
||||
.collapse-header {
|
||||
background: #fafafa;
|
||||
box-shadow: none;
|
||||
color: #444;
|
||||
|
||||
&:hover {
|
||||
color: #ff791f;
|
||||
}
|
||||
|
||||
& .fas {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tabs component
|
||||
========================================================================== */
|
||||
|
||||
.tabs {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.tabs-item {
|
||||
color: #777;
|
||||
|
||||
&:hover,
|
||||
&[aria-selected="true"] {
|
||||
color: #ff6701;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: #e95e00;
|
||||
}
|
||||
}
|
||||
|
||||
/* Login
|
||||
========================================================================== */
|
||||
|
||||
.body-login,
|
||||
.body-reset {
|
||||
background: #ededed;
|
||||
}
|
||||
|
||||
.login {
|
||||
& .form-label {
|
||||
color: #4b4b4b;
|
||||
}
|
||||
|
||||
@media (--viewport-small) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.login-title {
|
||||
color: #4b4b4b;
|
||||
}
|
||||
|
||||
.login-form-link {
|
||||
color: #326b9b;
|
||||
}
|
||||
Reference in New Issue
Block a user