Initial
This commit is contained in:
Alexey Berezhok
127
web/css/src/base.css
Normal file
127
web/css/src/base.css
Normal file
@@ -0,0 +1,127 @@
|
||||
/* Base
|
||||
========================================================================== */
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
font-family: sans-serif;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
[x-cloak] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
html,
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
button {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-family);
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.5;
|
||||
height: 100%;
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-background);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-text-link);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-text-link-hover);
|
||||
}
|
||||
}
|
||||
|
||||
p,
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
.u-text-H1,
|
||||
h2,
|
||||
.u-text-H2,
|
||||
h3,
|
||||
.u-text-H3 {
|
||||
color: var(--color-text-heading);
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
.u-text-H1 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
h2,
|
||||
.u-text-H2 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
h3,
|
||||
.u-text-H3 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
dialog {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
|
||||
&::backdrop {
|
||||
background-color: rgb(0 0 0 / 50%);
|
||||
}
|
||||
}
|
||||
|
||||
summary {
|
||||
list-style: none;
|
||||
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
76
web/css/src/dependencies/animate.css
vendored
Normal file
76
web/css/src/dependencies/animate.css
vendored
Normal file
@@ -0,0 +1,76 @@
|
||||
/*
|
||||
* Some parts of Animate.css v4.1.1
|
||||
*/
|
||||
|
||||
:root {
|
||||
--animate-duration: 1s;
|
||||
--animate-delay: 1s;
|
||||
--animate-repeat: 1;
|
||||
}
|
||||
|
||||
.animate__animated {
|
||||
animation-duration: 1s;
|
||||
animation-duration: var(--animate-duration);
|
||||
animation-fill-mode: both;
|
||||
|
||||
&.animate__delay-1s {
|
||||
animation-delay: 1s;
|
||||
animation-delay: var(--animate-delay);
|
||||
}
|
||||
}
|
||||
|
||||
.animate__fadeIn {
|
||||
animation-name: fadeIn;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.animate__zoomIn {
|
||||
animation-name: zoomIn;
|
||||
}
|
||||
|
||||
@keyframes zoomIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.animate__swing {
|
||||
transform-origin: top center;
|
||||
animation-name: swing;
|
||||
}
|
||||
|
||||
@keyframes swing {
|
||||
20% {
|
||||
transform: rotate3d(0, 0, 1, 15deg);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: rotate3d(0, 0, 1, -10deg);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: rotate3d(0, 0, 1, 5deg);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: rotate3d(0, 0, 1, -5deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate3d(0, 0, 1, 0deg);
|
||||
}
|
||||
}
|
||||
126
web/css/src/fonts.css
Normal file
126
web/css/src/fonts.css
Normal file
@@ -0,0 +1,126 @@
|
||||
/* Exo primary font
|
||||
========================================================================== */
|
||||
|
||||
/* exo-300 - latin */
|
||||
@font-face {
|
||||
font-family: Exo;
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: local("Exo Light"), local("Exo-Light"),
|
||||
url("/webfonts/exo-v20-latin-300.woff2") format("woff2"),
|
||||
url("/webfonts/exo-v20-latin-300.woff") format("woff");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* exo-300italic - latin */
|
||||
@font-face {
|
||||
font-family: Exo;
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
src: local("Exo Light Italic"), local("Exo-LightItalic"),
|
||||
url("/webfonts/exo-v20-latin-300italic.woff2") format("woff2"),
|
||||
url("/webfonts/exo-v20-latin-300italic.woff") format("woff");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* exo-regular - latin */
|
||||
@font-face {
|
||||
font-family: Exo;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Exo Regular"), local("Exo-Regular"),
|
||||
url("/webfonts/exo-v20-latin-regular.woff2") format("woff2"),
|
||||
url("/webfonts/exo-v20-latin-regular.woff") format("woff");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* exo-italic - latin */
|
||||
@font-face {
|
||||
font-family: Exo;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local("Exo Italic"), local("Exo-Italic"),
|
||||
url("/webfonts/exo-v20-latin-italic.woff2") format("woff2"),
|
||||
url("/webfonts/exo-v20-latin-italic.woff") format("woff");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* exo-500 - latin */
|
||||
@font-face {
|
||||
font-family: Exo;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: local("Exo Medium"), local("Exo-Medium"),
|
||||
url("/webfonts/exo-v20-latin-500.woff2") format("woff2"),
|
||||
url("/webfonts/exo-v20-latin-500.woff") format("woff");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* exo-500italic - latin */
|
||||
@font-face {
|
||||
font-family: Exo;
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
src: local("Exo Medium Italic"), local("Exo-MediumItalic"),
|
||||
url("/webfonts/exo-v20-latin-500italic.woff2") format("woff2"),
|
||||
url("/webfonts/exo-v20-latin-500italic.woff") format("woff");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* exo-600 - latin */
|
||||
@font-face {
|
||||
font-family: Exo;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: local("Exo SemiBold"), local("Exo-SemiBold"),
|
||||
url("/webfonts/exo-v20-latin-600.woff2") format("woff2"),
|
||||
url("/webfonts/exo-v20-latin-600.woff") format("woff");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* exo-600italic - latin */
|
||||
@font-face {
|
||||
font-family: Exo;
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
src: local("Exo SemiBold Italic"), local("Exo-SemiBoldItalic"),
|
||||
url("/webfonts/exo-v20-latin-600italic.woff2") format("woff2"),
|
||||
url("/webfonts/exo-v20-latin-600italic.woff") format("woff");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* exo-700 - latin */
|
||||
@font-face {
|
||||
font-family: Exo;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local("Exo Bold"), local("Exo-Bold"),
|
||||
url("/webfonts/exo-v20-latin-700.woff2") format("woff2"),
|
||||
url("/webfonts/exo-v20-latin-700.woff") format("woff");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* exo-700italic - latin */
|
||||
@font-face {
|
||||
font-family: Exo;
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
src: local("Exo Bold Italic"), local("Exo-BoldItalic"),
|
||||
url("/webfonts/exo-v20-latin-700italic.woff2") format("woff2"),
|
||||
url("/webfonts/exo-v20-latin-700italic.woff") format("woff");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* Inconsolata console font
|
||||
========================================================================== */
|
||||
|
||||
/* inconsolata-regular - latin */
|
||||
@font-face {
|
||||
font-family: Inconsolata;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Inconsolata Regular"), local("Inconsolata-Regular"),
|
||||
url("/webfonts/inconsolata-regular.woff2") format("woff2"),
|
||||
url("/webfonts/inconsolata-regular.woff") format("woff");
|
||||
font-display: swap;
|
||||
}
|
||||
6
web/css/src/media_queries.css
Normal file
6
web/css/src/media_queries.css
Normal file
@@ -0,0 +1,6 @@
|
||||
/* Custom media queries
|
||||
========================================================================== */
|
||||
|
||||
@custom-media --viewport-small (min-width: 480px);
|
||||
@custom-media --viewport-medium (min-width: 768px);
|
||||
@custom-media --viewport-large (min-width: 1024px);
|
||||
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;
|
||||
}
|
||||
192
web/css/src/utilities.css
Normal file
192
web/css/src/utilities.css
Normal file
@@ -0,0 +1,192 @@
|
||||
/* Utilities
|
||||
========================================================================== */
|
||||
|
||||
.u-block {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.u-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.u-hidden-visually {
|
||||
border: 0 !important;
|
||||
clip: rect(1px, 1px, 1px, 1px) !important;
|
||||
height: 1px !important;
|
||||
overflow: hidden !important;
|
||||
padding: 0 !important;
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
}
|
||||
|
||||
.u-noselect {
|
||||
user-select: none !important;
|
||||
}
|
||||
|
||||
.u-text-right {
|
||||
text-align: right !important;
|
||||
}
|
||||
|
||||
.u-text-center {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.u-text-center-desktop {
|
||||
@media (--viewport-large) {
|
||||
text-align: center !important;
|
||||
}
|
||||
}
|
||||
|
||||
.u-text-small {
|
||||
font-size: 0.75rem !important;
|
||||
}
|
||||
|
||||
.u-text-bold {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
.u-text-truncate {
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.u-text-break {
|
||||
word-break: break-word !important;
|
||||
}
|
||||
|
||||
.u-text-no-wrap {
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.u-overflow {
|
||||
overflow: auto !important;
|
||||
}
|
||||
|
||||
.u-mt15 {
|
||||
margin-top: 15px !important;
|
||||
}
|
||||
|
||||
.u-mt10 {
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
|
||||
.u-mt20 {
|
||||
margin-top: 20px !important;
|
||||
}
|
||||
|
||||
.u-ml5 {
|
||||
margin-left: 5px !important;
|
||||
}
|
||||
|
||||
.u-ml10 {
|
||||
margin-left: 10px !important;
|
||||
}
|
||||
|
||||
.u-mr5 {
|
||||
margin-right: 5px !important;
|
||||
}
|
||||
|
||||
.u-mr10 {
|
||||
margin-right: 10px !important;
|
||||
}
|
||||
|
||||
.u-mb5 {
|
||||
margin-bottom: 5px !important;
|
||||
}
|
||||
|
||||
.u-mb10 {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
.u-mb20 {
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
|
||||
.u-mb40 {
|
||||
margin-bottom: 40px !important;
|
||||
}
|
||||
|
||||
.u-pt10 {
|
||||
padding-top: 10px !important;
|
||||
}
|
||||
|
||||
.u-pl30 {
|
||||
padding-left: 30px !important;
|
||||
}
|
||||
|
||||
.u-pr30 {
|
||||
padding-right: 30px !important;
|
||||
}
|
||||
|
||||
.u-pos-relative {
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.u-width-full {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.u-min-height100 {
|
||||
min-height: 100px !important;
|
||||
}
|
||||
|
||||
.u-min-height300 {
|
||||
min-height: 300px !important;
|
||||
}
|
||||
|
||||
.u-min-height600 {
|
||||
min-height: 600px !important;
|
||||
}
|
||||
|
||||
.u-max-width200 {
|
||||
max-width: 200px !important;
|
||||
}
|
||||
|
||||
.u-max-width300 {
|
||||
max-width: 300px !important;
|
||||
}
|
||||
|
||||
.u-max-height300 {
|
||||
max-height: 300px !important;
|
||||
}
|
||||
|
||||
.u-side-by-side {
|
||||
display: flex !important;
|
||||
justify-content: space-between !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.u-list-bulleted {
|
||||
list-style: disc !important;
|
||||
padding-left: 40px !important;
|
||||
}
|
||||
|
||||
.u-allow-resize {
|
||||
min-width: 100% !important;
|
||||
resize: both !important;
|
||||
}
|
||||
|
||||
.u-unstyled-button {
|
||||
border: 0 !important;
|
||||
padding: 0 !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.u-console {
|
||||
font-family: var(--font-family-monospace) !important;
|
||||
white-space: pre !important;
|
||||
line-height: 1.2 !important;
|
||||
}
|
||||
|
||||
.u-hide-tablet {
|
||||
@media (--viewport-medium) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.u-hide-desktop {
|
||||
@media (--viewport-large) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user