1834 lines
26 KiB
CSS
1834 lines
26 KiB
CSS
:root {
|
|
--white: #fcfcfc;
|
|
--background: #eff0f1;
|
|
--dark: #31363b;
|
|
--dark90: #31363be0;
|
|
--dark75: #31363bb0;
|
|
--dark50: #31363b80;
|
|
--dark25: #31363b40;
|
|
--shadow: #23262940;
|
|
--glow: #eff0f180;
|
|
|
|
--light-gray: #d9dfe3;
|
|
--dim-gray: #bdc3c7;
|
|
--dark-gray: #7f8c8d;
|
|
--neutral-gray: #606060;
|
|
|
|
--primary: #3daee9;
|
|
--secondary: #bdc3c7;
|
|
|
|
--selected: #3daee9;
|
|
--selected50: #3daee980;
|
|
--selected25: #3daee940;
|
|
|
|
--gray: #4d4d4d;
|
|
--gray25: #4d4d4d40;
|
|
|
|
--red: #da4453;
|
|
--red25: #da445340;
|
|
--red50: #da445380;
|
|
|
|
--orange: #f47750;
|
|
--orange25: #f4775040;
|
|
|
|
--yellow: #fdbc4b;
|
|
--yellow25: #fdbc4b40;
|
|
--yellow50: #fdbc4b80;
|
|
|
|
--green: #2ecc71;
|
|
--green25: #2ecc7140;
|
|
|
|
--blue: #1d99f3;
|
|
--blue25: #1d99f340;
|
|
|
|
--success: #1cdc9a;
|
|
--success25: #1cdc9a40;
|
|
|
|
--danger: #ed1515;
|
|
--danger25: #ed151540;
|
|
--danger50: #ed151580;
|
|
|
|
--indigo: #8e44ad;
|
|
--indigo25: #8e44ad40;
|
|
|
|
--info: #3daee9;
|
|
--info25: #3daee940;
|
|
|
|
--nav: var(--background);
|
|
--nav-button-hover: var(--light-gray);
|
|
--nav-button-selected: var(--dark);
|
|
--nav-secondary: var(--neutral-gray);
|
|
--nav-secondary-button-hover: var(--gray);
|
|
--dark-border: var(--dark-gray);
|
|
--light-border: var(--light-gray);
|
|
--focused-border: var(--gray);
|
|
--button-hover: var(--background);
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#app {
|
|
height: 100%;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
body,
|
|
textarea,
|
|
input,
|
|
pre {
|
|
margin: 0;
|
|
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
body,
|
|
button,
|
|
a,
|
|
label {
|
|
color: var(--dark);
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
display: flex;
|
|
}
|
|
|
|
.cursor-default {
|
|
cursor: default;
|
|
}
|
|
|
|
.primary-text {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.success-text {
|
|
color: var(--success);
|
|
}
|
|
|
|
.blue-text {
|
|
color: var(--blue);
|
|
}
|
|
|
|
.green-text {
|
|
color: var(--green);
|
|
}
|
|
|
|
.gray-text {
|
|
color: var(--light-gray);
|
|
}
|
|
|
|
.darkgray-text {
|
|
color: var(--dark-gray);
|
|
}
|
|
|
|
.danger-text {
|
|
color: var(--danger);
|
|
}
|
|
|
|
.white-text {
|
|
color: var(--white);
|
|
}
|
|
|
|
.bold {
|
|
font-weight: bold;
|
|
}
|
|
|
|
h6.slim {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.relative {
|
|
position: relative;
|
|
}
|
|
|
|
input {
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: var(--light-border);
|
|
padding: 2px;
|
|
}
|
|
|
|
input[type="text"].h1,
|
|
input[type="number"].h1,
|
|
input[type="search"].h1 {
|
|
font-size: 32px;
|
|
}
|
|
|
|
input[type="text"].h2,
|
|
input[type="number"].h2,
|
|
input[type="search"].h2 {
|
|
font-size: 26px;
|
|
}
|
|
|
|
input[type="text"].h3,
|
|
input[type="number"].h3,
|
|
input[type="search"].h3 {
|
|
font-size: 22px;
|
|
}
|
|
|
|
input[type="text"].h4,
|
|
input[type="number"].h4,
|
|
input[type="search"].h4 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
input[type="text"].h5,
|
|
input[type="number"].h5,
|
|
input[type="search"].h5 {
|
|
font-size: 16px;
|
|
}
|
|
|
|
input[type="text"].h6,
|
|
input[type="number"].h6,
|
|
input[type="search"].h6 {
|
|
font-size: 14px;
|
|
}
|
|
|
|
input:invalid {
|
|
border-color: var(--danger);
|
|
}
|
|
|
|
input:read-only:not([type="range"]) {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
input.borderless {
|
|
border: none;
|
|
}
|
|
|
|
div.blue-25 {
|
|
background: var(--blue25);
|
|
}
|
|
|
|
div.green-25 {
|
|
background: var(--green25);
|
|
}
|
|
|
|
div.red-25 {
|
|
background: var(--red25);
|
|
}
|
|
|
|
div.selected {
|
|
background-color: var(--selected);
|
|
color: var(--white);
|
|
}
|
|
|
|
div.selectable svg.selectable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
button {
|
|
background-color: var(--background);
|
|
border: 1px solid var(--light-border);
|
|
border-radius: 2px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
button:disabled * {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
button:not(:disabled) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:focus,
|
|
input:focus,
|
|
select:focus,
|
|
textarea:focus {
|
|
outline: none;
|
|
}
|
|
|
|
button:focus {
|
|
border-color: var(--focused-border);
|
|
}
|
|
|
|
#app {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#app-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: auto;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
iframe {
|
|
border: 0;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
hr {
|
|
margin: 0;
|
|
border: 0;
|
|
border-top: 1px solid var(--light-border);
|
|
}
|
|
|
|
header {
|
|
background-color: var(--dark);
|
|
display: flex;
|
|
}
|
|
|
|
header>div,
|
|
nav>div {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
nav.right>div,
|
|
nav.left>div {
|
|
flex-direction: column;
|
|
}
|
|
|
|
header>div:first-child,
|
|
nav>div:first-child {
|
|
flex-grow: 0;
|
|
}
|
|
|
|
header>div:last-child,
|
|
nav>div:last-child {
|
|
flex-grow: 0;
|
|
}
|
|
|
|
header .margin {
|
|
margin: 4px;
|
|
}
|
|
|
|
header .margin>*:not(:last-child) {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
select {
|
|
border: 1px solid var(--light-gray);
|
|
}
|
|
|
|
div.disabled,
|
|
span.disabled {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/*
|
|
NAVIGATION
|
|
*/
|
|
nav {
|
|
background-color: var(--nav);
|
|
display: flex;
|
|
box-shadow: 0 0px 4px var(--shadow);
|
|
border-bottom: 1px solid var(--dim-gray);
|
|
z-index: 100;
|
|
flex-shrink: 0;
|
|
min-height: 46px;
|
|
border-bottom: 1px solid var(--light-border);
|
|
animation: slideToTop normal 0.25s;
|
|
}
|
|
|
|
nav.slideOverTop {
|
|
margin-top: -47px;
|
|
animation: slideOverTop ease 0.5s;
|
|
}
|
|
|
|
nav.right,
|
|
nav.left {
|
|
flex-direction: column;
|
|
background-color: var(--nav-secondary);
|
|
box-shadow: none;
|
|
border-bottom: 0;
|
|
}
|
|
|
|
nav label {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
nav>div>button,
|
|
nav .dropdown-activator button,
|
|
nav>div>a {
|
|
padding: 11px 12px;
|
|
font-size: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 0;
|
|
border-radius: 0;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
nav a.clear {
|
|
padding: 0;
|
|
}
|
|
|
|
nav.right button,
|
|
nav.right a {
|
|
background-color: var(--nav-secondary);
|
|
color: var(--white);
|
|
}
|
|
|
|
nav.right button.danger {
|
|
color: var(--danger);
|
|
}
|
|
|
|
nav.right button.primary {
|
|
color: var(--primary);
|
|
}
|
|
|
|
nav button svg,
|
|
nav a svg,
|
|
nav button img,
|
|
nav a img {
|
|
width: 24px !important;
|
|
height: 24px !important;
|
|
}
|
|
|
|
nav button>span,
|
|
nav a>span {
|
|
margin-left: 12px;
|
|
}
|
|
|
|
nav:not(.right) button:hover:not(.selected):not(.secondary):not(.primary):not(:disabled),
|
|
nav:not(.right) a:hover:not(.router-link-active):not(.primary):not(.secondary) {
|
|
background-color: var(--nav-button-hover);
|
|
}
|
|
|
|
nav.right button:hover:not(.selected):not(.primary):not(.secondary):not(:disabled),
|
|
nav.right a:hover:not(.selected):not(.primary):not(.secondary) {
|
|
background-color: var(--nav-secondary-button-hover);
|
|
}
|
|
|
|
nav select,
|
|
nav input {
|
|
border-radius: 0;
|
|
border: 0;
|
|
background-color: var(--white);
|
|
}
|
|
|
|
nav input {
|
|
padding: 0 12px;
|
|
width: 204px;
|
|
min-width: 0px;
|
|
}
|
|
|
|
nav>div>img,
|
|
nav>div>a.clear>img {
|
|
height: 46px;
|
|
width: auto;
|
|
}
|
|
|
|
nav:not(.right):not(.left)>button,
|
|
nav:not(.right):not(.left)>div:first-child>button,
|
|
nav:not(.right):not(.left)>div:first-child>a,
|
|
nav:not(.right):not(.left)>div:first-child>input,
|
|
nav:not(.right):not(.left)>div:first-child>img,
|
|
nav:not(.right):not(.left)>button:hover,
|
|
nav:not(.right):not(.left)>button:focus,
|
|
nav:not(.right):not(.left)>div:first-child>button:hover,
|
|
nav:not(.right):not(.left)>div:first-child>a:hover {
|
|
border-right: 1px solid var(--light-border);
|
|
}
|
|
|
|
nav:not(.right):not(.left)>div:last-child>button,
|
|
nav:not(.right):not(.left)>div:last-child .dropdown-activator>button,
|
|
nav:not(.right):not(.left)>div:last-child>a,
|
|
nav:not(.right):not(.left)>div:last-child>select,
|
|
nav:not(.right):not(.left)>div:last-child>input,
|
|
nav:not(.right):not(.left)>div:last-child>button:hover,
|
|
nav:not(.right):not(.left)>div:last-child>a:hover {
|
|
border-left: 1px solid var(--light-border);
|
|
}
|
|
|
|
nav .router-link-active:not(.clear),
|
|
nav .selected {
|
|
background-color: var(--nav-button-selected);
|
|
color: var(--white);
|
|
fill: var(--white);
|
|
}
|
|
|
|
/*
|
|
LABELS
|
|
*/
|
|
.label-header {
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/*
|
|
BUTTON
|
|
*/
|
|
button.flat {
|
|
background-color: transparent !important;
|
|
border: none;
|
|
}
|
|
|
|
button.red,
|
|
label.red {
|
|
background-color: var(--red);
|
|
color: var(--white);
|
|
}
|
|
|
|
button.red50,
|
|
label.red50 {
|
|
background-color: var(--red50) !important;
|
|
border-color: var(--red);
|
|
}
|
|
|
|
button.blue,
|
|
label.blue {
|
|
background-color: var(--blue) !important;
|
|
color: var(--white);
|
|
}
|
|
|
|
button.blue-border {
|
|
background-color: transparent !important;
|
|
border: 1px solid var(--blue);
|
|
color: var(--blue);
|
|
}
|
|
|
|
button.green,
|
|
label.green {
|
|
background-color: var(--green) !important;
|
|
color: var(--white);
|
|
}
|
|
|
|
button.gray,
|
|
label.gray {
|
|
background-color: var(--gray) !important;
|
|
color: var(--white);
|
|
}
|
|
|
|
button.gray-border {
|
|
background-color: transparent !important;
|
|
border: 1px solid var(--gray);
|
|
color: var(--gray);
|
|
}
|
|
|
|
button.yellow,
|
|
label.yellow {
|
|
background-color: var(--yellow) !important;
|
|
}
|
|
|
|
button.yellow50,
|
|
label.yellow50 {
|
|
background-color: var(--yellow50) !important;
|
|
border-color: var(--yellow);
|
|
}
|
|
|
|
button.faded {
|
|
opacity: 0.25;
|
|
}
|
|
|
|
button.faded:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
button.medium {
|
|
padding: 8px;
|
|
}
|
|
|
|
button.large {
|
|
padding: 12px;
|
|
}
|
|
|
|
/* BUTTON VARIANTEN */
|
|
|
|
/*
|
|
PRIMARY
|
|
*/
|
|
button.primary-border {
|
|
background-color: transparent !important;
|
|
border: 1px solid var(--primary);
|
|
color: var(--primary);
|
|
}
|
|
|
|
button.primary-border:hover:not(:disabled) {
|
|
background-color: var(--primary) !important;
|
|
color: var(--white);
|
|
}
|
|
|
|
button.primary,
|
|
a.primary {
|
|
background-color: var(--primary) !important;
|
|
border-color: var(--primary);
|
|
color: var(--white);
|
|
}
|
|
|
|
button.primary:hover:not(:disabled),
|
|
a.primary:hover:not(:disabled) {
|
|
background-color: transparent !important;
|
|
border-color: var(--primary);
|
|
color: var(--primary);
|
|
}
|
|
|
|
button.primary:hover:not(:disabled) *,
|
|
a.primary:hover:not(:disabled) * {
|
|
color: var(--primary);
|
|
}
|
|
|
|
/*
|
|
SECONDARY
|
|
*/
|
|
button.secondary-border {
|
|
background-color: transparent !important;
|
|
border: 1px solid var(--secondary);
|
|
color: var(--secondary);
|
|
}
|
|
|
|
button.secondary-border:hover:not(:disabled) {
|
|
background-color: var(--secondary) !important;
|
|
color: var(--secondary);
|
|
}
|
|
|
|
button.secondary {
|
|
background-color: var(--secondary) !important;
|
|
border-color: var(--secondary);
|
|
}
|
|
|
|
button.secondary:hover:not(:disabled) {
|
|
background-color: transparent !important;
|
|
border-color: var(--secondary);
|
|
color: var(--secondary);
|
|
}
|
|
|
|
/*
|
|
SUCCESS
|
|
*/
|
|
button.success-border,
|
|
button.accept-border {
|
|
background-color: transparent;
|
|
border: 1px solid var(--green);
|
|
color: var(--green);
|
|
}
|
|
|
|
button.success-border:hover:not(:disabled),
|
|
button.accept-border:hover:not(:disabled) {
|
|
background-color: var(--green);
|
|
color: var(--white);
|
|
}
|
|
|
|
button.success,
|
|
button.accept {
|
|
background-color: var(--green);
|
|
border-color: var(--green);
|
|
color: var(--white);
|
|
}
|
|
|
|
button.success:hover:not(:disabled),
|
|
button.accept:hover:not(:disabled) {
|
|
background-color: transparent;
|
|
border-color: var(--green);
|
|
color: var(--green);
|
|
}
|
|
|
|
/*
|
|
DANGER
|
|
*/
|
|
button.danger-border {
|
|
background-color: transparent !important;
|
|
border: 1px solid var(--danger);
|
|
color: var(--danger);
|
|
}
|
|
|
|
button.danger-border:hover:not(:disabled) {
|
|
background-color: var(--danger) !important;
|
|
color: var(--white);
|
|
}
|
|
|
|
button.danger {
|
|
background-color: var(--danger);
|
|
border-color: var(--danger);
|
|
color: var(--white);
|
|
}
|
|
|
|
button.danger svg {
|
|
color: var(--danger);
|
|
}
|
|
|
|
button.danger:hover:not(:disabled) {
|
|
background-color: transparent;
|
|
border-color: var(--danger);
|
|
color: var(--danger);
|
|
}
|
|
|
|
/*
|
|
WARNING
|
|
*/
|
|
button.warning-border {
|
|
background-color: transparent !important;
|
|
border: 1px solid var(--orange);
|
|
color: var(--orange);
|
|
}
|
|
|
|
button.warning-border:hover:not(:disabled) {
|
|
background-color: var(--orange) !important;
|
|
color: var(--white);
|
|
}
|
|
|
|
button.warning {
|
|
background-color: var(--orange) !important;
|
|
border-color: var(--orange);
|
|
color: var(--white);
|
|
}
|
|
|
|
button.warning:hover:not(:disabled) {
|
|
background-color: transparent !important;
|
|
border-color: var(--orange);
|
|
color: var(--orange);
|
|
}
|
|
|
|
/*
|
|
INFO
|
|
*/
|
|
button.info-border {
|
|
background-color: transparent !important;
|
|
border: 1px solid var(--indigo);
|
|
color: var(--indigo);
|
|
}
|
|
|
|
button.info-border:hover:not(:disabled) {
|
|
background-color: var(--indigo) !important;
|
|
color: var(--white);
|
|
}
|
|
|
|
button.info {
|
|
background-color: var(--indigo) !important;
|
|
border-color: var(--indigo);
|
|
color: var(--white);
|
|
}
|
|
|
|
button.info:hover:not(:disabled) {
|
|
background-color: transparent !important;
|
|
border-color: var(--indigo);
|
|
color: var(--indigo);
|
|
}
|
|
|
|
/*
|
|
LIGHT
|
|
*/
|
|
button.light-border {
|
|
background-color: transparent !important;
|
|
border: 1px solid var(--light-gray);
|
|
color: var(--light-gray);
|
|
}
|
|
|
|
button.light-border:hover:not(:disabled) {
|
|
background-color: var(--light-gray) !important;
|
|
color: var(--white);
|
|
}
|
|
|
|
button.light {
|
|
background-color: var(--light-gray) !important;
|
|
border-color: var(--light-gray);
|
|
color: var(--white);
|
|
}
|
|
|
|
button.light:hover:not(:disabled) {
|
|
background-color: transparent !important;
|
|
border-color: var(--light-gray);
|
|
color: var(--light-gray);
|
|
}
|
|
|
|
/*
|
|
DARK
|
|
*/
|
|
button.dark-border {
|
|
background-color: transparent !important;
|
|
border: 1px solid var(--gray);
|
|
color: var(--gray);
|
|
}
|
|
|
|
button.dark-border:hover:not(:disabled) {
|
|
background-color: var(--gray) !important;
|
|
color: var(--white);
|
|
}
|
|
|
|
button.dark {
|
|
background-color: var(--gray) !important;
|
|
border-color: var(--gray);
|
|
color: var(--white);
|
|
}
|
|
|
|
button.dark:hover:not(:disabled) {
|
|
background-color: transparent !important;
|
|
border-color: var(--gray);
|
|
color: var(--gray);
|
|
}
|
|
|
|
svg.danger,
|
|
svg.error {
|
|
color: var(--danger);
|
|
}
|
|
|
|
svg.success {
|
|
color: var(--success);
|
|
}
|
|
|
|
svg.warning {
|
|
color: var(--yellow);
|
|
}
|
|
|
|
svg.blue {
|
|
color: var(--blue);
|
|
}
|
|
|
|
svg.red {
|
|
color: var(--red);
|
|
}
|
|
|
|
svg.green {
|
|
color: var(--green);
|
|
}
|
|
|
|
svg.orange {
|
|
color: var(--orange);
|
|
}
|
|
|
|
svg.gray {
|
|
color: var(--gray);
|
|
}
|
|
|
|
svg.light-gray {
|
|
color: var(--light-gray);
|
|
}
|
|
|
|
svg.yellow {
|
|
color: var(--yellow);
|
|
}
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
ul.navigation {
|
|
border-right: 1px solid var(--light-border);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
ul.navigation li {
|
|
padding: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
ul.navigation li:hover:not(.selected) {
|
|
background-color: var(--selected25);
|
|
}
|
|
|
|
li {
|
|
list-style: none;
|
|
}
|
|
|
|
li:hover {
|
|
background-color: var(--nav);
|
|
}
|
|
|
|
li.selected,
|
|
li.active {
|
|
background-color: var(--selected);
|
|
color: var(--white);
|
|
}
|
|
|
|
li.selected label {
|
|
color: var(--white);
|
|
}
|
|
|
|
p.group {
|
|
margin: 4px 0;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
table.lined tr {
|
|
border-bottom: 1px solid var(--light-border);
|
|
}
|
|
|
|
table.border {
|
|
border: 1px solid var(--light-border);
|
|
}
|
|
|
|
table.lined td:not(:first-child),
|
|
table.lined th:not(:first-child) {
|
|
border-left: 1px solid var(--light-border);
|
|
}
|
|
|
|
table.lined th,
|
|
table.lined td,
|
|
table.padding th,
|
|
table.padding td {
|
|
padding: 2px;
|
|
}
|
|
|
|
tr.medium th,
|
|
tr.medium td {
|
|
padding: 4px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
tr.thin th {
|
|
font-weight: normal;
|
|
}
|
|
|
|
td {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
tr.nav,
|
|
th.nav,
|
|
td.nav {
|
|
background-color: var(--nav);
|
|
}
|
|
|
|
tr.red,
|
|
th.red,
|
|
td.red {
|
|
background-color: var(--red25);
|
|
}
|
|
|
|
tr.green,
|
|
th.green,
|
|
td.green {
|
|
background-color: var(--green25);
|
|
}
|
|
|
|
tr.blue,
|
|
th.blue,
|
|
td.blue {
|
|
background-color: var(--blue25);
|
|
}
|
|
|
|
tr.gray {
|
|
background-color: var(--dim-gray);
|
|
}
|
|
|
|
td.pointer {
|
|
cursor: pointer;
|
|
}
|
|
|
|
th.right,
|
|
td.right,
|
|
a.right {
|
|
text-align: right;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
th.center,
|
|
td.center {
|
|
text-align: center;
|
|
}
|
|
|
|
th.left,
|
|
td.left {
|
|
text-align: left;
|
|
}
|
|
|
|
th.slim,
|
|
td.slim {
|
|
width: 1px;
|
|
}
|
|
|
|
th.strech,
|
|
td.strech {
|
|
width: 100%;
|
|
}
|
|
|
|
/*
|
|
DROP DOWN
|
|
*/
|
|
.dropdown {
|
|
position: relative;
|
|
display: flex;
|
|
}
|
|
|
|
.dropdown-activator {
|
|
display: flex;
|
|
cursor: pointer;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.dropdown-content {
|
|
border-radius: 2px;
|
|
position: fixed;
|
|
background-color: var(--background);
|
|
min-width: 160px;
|
|
box-shadow: 0px 2px 8px 0px var(--shadow);
|
|
z-index: 1000;
|
|
animation: fadeIn ease 0.15s;
|
|
border: 1px solid var(--dim-gray);
|
|
max-height: 50%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.dropdown-content button {
|
|
border: 0;
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
padding: 8px;
|
|
}
|
|
|
|
.dropdown-content button:hover {
|
|
background-color: var(--white);
|
|
border: 0;
|
|
}
|
|
|
|
.dropdown-content button>svg {
|
|
margin-right: 8px;
|
|
color: var(--dark);
|
|
width: 16px !important;
|
|
height: 16px;
|
|
}
|
|
|
|
.dropdown-background {
|
|
position: fixed;
|
|
background-color: #00000000;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: 1000;
|
|
}
|
|
|
|
/*
|
|
POPOUP
|
|
*/
|
|
.popup-background {
|
|
display: flex;
|
|
position: absolute;
|
|
z-index: 1500;
|
|
}
|
|
|
|
.popup-background.bottom {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
bottom: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.popup-background.bottom .popup-window {
|
|
border-bottom: 0;
|
|
border-top-left-radius: 4px;
|
|
border-top-right-radius: 4px;
|
|
}
|
|
|
|
.popup-window {
|
|
background-color: var(--dark);
|
|
border: 1px solid var(--dark-border);
|
|
color: var(--white);
|
|
box-shadow: 0 0 2px var(--shadow);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
/*
|
|
MESSAGE SCREEN
|
|
*/
|
|
#message-screen {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-grow: 1;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: var(--neutral-gray);
|
|
position: relative;
|
|
}
|
|
|
|
#message-screen>div {
|
|
max-height: 90%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#message-screen-logo {
|
|
width: 140px;
|
|
position: absolute;
|
|
top: 12px;
|
|
right: 12px;
|
|
}
|
|
|
|
#message-screen-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
#message-screen-header svg,
|
|
#message-screen-header img {
|
|
margin-right: 24px;
|
|
height: 64px;
|
|
width: 64px;
|
|
}
|
|
|
|
#message-screen-header h1 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
#message-screen-header h1,
|
|
#message-screen-header h2 {
|
|
font-weight: 200;
|
|
}
|
|
|
|
#message-screen-body {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
#message-screen-body .margin-image {
|
|
margin-left: 88px;
|
|
}
|
|
|
|
.message-screen-command {
|
|
display: flex;
|
|
align-items: center;
|
|
border: 1px solid transparent;
|
|
padding: 4px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.message-screen-command:hover {
|
|
background-color: var(--nav);
|
|
border: 1px solid var(--nav-button-hover);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.message-screen-command h3 {
|
|
margin: 0 0 4px 0;
|
|
}
|
|
|
|
.message-screen-command svg,
|
|
.message-screen-command img {
|
|
margin-right: 12px;
|
|
height: 32px;
|
|
width: 32px;
|
|
}
|
|
|
|
.message-screen-list li {
|
|
cursor: pointer;
|
|
padding: 8px 4px;
|
|
}
|
|
|
|
.message-screen-list li:hover {
|
|
background-color: var(--nav);
|
|
}
|
|
|
|
/*
|
|
EXPANDER
|
|
*/
|
|
.expander-header {
|
|
display: flex;
|
|
align-content: center;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid var(--light-border);
|
|
}
|
|
|
|
.expander-header h3 {
|
|
flex-grow: 1;
|
|
margin: 0;
|
|
margin-left: 8px;
|
|
font-size: 0.9rem;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
align-self: center;
|
|
}
|
|
|
|
.expander-header svg {
|
|
width: 24px;
|
|
}
|
|
|
|
/*
|
|
TABLE FILTER
|
|
*/
|
|
.table-filter {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.table-filter-title {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.table-filter-title.sortable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.table-filter-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 4px;
|
|
}
|
|
|
|
.table-filter-body>button {
|
|
justify-content: center;
|
|
margin: 4px 0;
|
|
background-color: var(--selected50);
|
|
}
|
|
|
|
.table-filter button.filtered {
|
|
background-color: var(--selected);
|
|
}
|
|
|
|
.table-filter svg.filtered {
|
|
color: var(--selected);
|
|
}
|
|
|
|
.table-filter>svg {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
/*
|
|
STICKER
|
|
*/
|
|
.sticker {
|
|
display: flex;
|
|
border-radius: 4px;
|
|
margin: 12px;
|
|
align-items: stretch;
|
|
min-width: 180px;
|
|
}
|
|
|
|
.sticker-icon {
|
|
border-top-left-radius: 4px;
|
|
border-bottom-left-radius: 4px;
|
|
padding: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.sticker-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0 12px;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.sticker h3 {
|
|
font-size: 2rem;
|
|
font-weight: 200;
|
|
margin: 0;
|
|
}
|
|
|
|
.sticker p {
|
|
margin: 0;
|
|
font-weight: bold;
|
|
font-size: 1rem;
|
|
text-align: right;
|
|
}
|
|
|
|
.sticker svg {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
:not(svg).blue,
|
|
.sticker.blue,
|
|
.sticker.blue .sticker-icon {
|
|
background-color: var(--blue25);
|
|
}
|
|
|
|
:not(svg).yellow,
|
|
.sticker.yellow,
|
|
.sticker.yellow .sticker-icon {
|
|
background-color: var(--yellow25);
|
|
}
|
|
|
|
:not(svg).green,
|
|
.sticker.green,
|
|
.sticker.green .sticker-icon {
|
|
background-color: var(--green25);
|
|
}
|
|
|
|
:not(svg).success,
|
|
.sticker.success,
|
|
.sticker.success .sticker-icon {
|
|
background-color: var(--success25);
|
|
}
|
|
|
|
:not(svg).primary,
|
|
.sticker.primary,
|
|
.sticker.primary .sticker-icon {
|
|
background-color: var(--primary);
|
|
}
|
|
|
|
:not(svg).orange,
|
|
.sticker.orange,
|
|
.sticker.orange .sticker-icon {
|
|
background-color: var(--orange25);
|
|
}
|
|
|
|
:not(svg).gray,
|
|
.sticker.gray,
|
|
.sticker.gray .sticker-icon {
|
|
background-color: var(--gray25);
|
|
}
|
|
|
|
:not(svg).danger,
|
|
.sticker.danger,
|
|
.sticker.danger .sticker-icon {
|
|
background-color: var(--danger25);
|
|
}
|
|
|
|
.list-item {
|
|
cursor: pointer;
|
|
padding: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.list-item:hover:not(.selected) {
|
|
background-color: var(--selected25);
|
|
}
|
|
|
|
.showOnMobile,
|
|
.showOnMobilePortrait {
|
|
display: none !important;
|
|
}
|
|
|
|
/*
|
|
Snackbar
|
|
*/
|
|
|
|
.snackbar.primary {
|
|
background-color: var(--primary) !important;
|
|
}
|
|
|
|
.snackbar.secondary {
|
|
background-color: var(--secondary) !important;
|
|
}
|
|
|
|
.snackbar.success {
|
|
background-color: var(--success) !important;
|
|
}
|
|
|
|
.snackbar.info {
|
|
background-color: var(--info) !important;
|
|
}
|
|
|
|
.snackbar.danger {
|
|
background-color: var(--danger) !important;
|
|
}
|
|
|
|
.snackbar.blue {
|
|
background-color: var(--blue) !important;
|
|
}
|
|
|
|
.snackbar.gray {
|
|
background-color: var(--gray) !important;
|
|
}
|
|
|
|
.snackbar.green {
|
|
background-color: var(--green) !important;
|
|
}
|
|
|
|
.snackbar.indigo {
|
|
background-color: var(--indigo) !important;
|
|
}
|
|
|
|
.snackbar.orange {
|
|
background-color: var(--orange) !important;
|
|
}
|
|
|
|
.snackbar.yellow {
|
|
background-color: var(--yellow) !important;
|
|
}
|
|
|
|
.snackbar.white {
|
|
background-color: var(--white) !important;
|
|
}
|
|
|
|
/*
|
|
CARD
|
|
*/
|
|
.card.selected {
|
|
background-color: var(--selected);
|
|
color: var(--white);
|
|
}
|
|
|
|
.card-header {
|
|
border-bottom: 1px solid var(--light-border);
|
|
font-size: larger;
|
|
}
|
|
|
|
.card-header>div,
|
|
.card-footer>div {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 4px;
|
|
}
|
|
|
|
.card-header>.card-header-center,
|
|
.card-footer>.card-footer-center {
|
|
flex-grow: 1;
|
|
justify-content: center;
|
|
margin: 0 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.card-body {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.card-body-center {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.card-footer {
|
|
border-top: 1px solid var(--light-border);
|
|
}
|
|
|
|
.card-footer button svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
/* MARGINs */
|
|
.ma-off {
|
|
margin: 0px;
|
|
}
|
|
|
|
.ma-top {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.ma-bottom {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.ma-right {
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.ma-left {
|
|
margin-left: 12px;
|
|
}
|
|
|
|
.ma-horizontal {
|
|
margin: 0 12px;
|
|
}
|
|
|
|
.ma-vertical {
|
|
margin: 12px 0;
|
|
}
|
|
|
|
.ma {
|
|
margin: 12px;
|
|
}
|
|
|
|
.ma4-top {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.ma4-bottom {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.ma4-right {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.ma4-left {
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.ma4-vertical {
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.ma4-horizontal {
|
|
margin: 0 4px;
|
|
}
|
|
|
|
.ma4 {
|
|
margin: 4px;
|
|
}
|
|
|
|
.ma8-top {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.ma8-bottom {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.ma8-right {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.ma8-left {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.ma8-vertical {
|
|
margin: 8px 0;
|
|
}
|
|
|
|
.ma8-horizontal {
|
|
margin: 0 8px;
|
|
}
|
|
|
|
.ma8 {
|
|
margin: 8px;
|
|
}
|
|
|
|
.ma24-top {
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.ma24-bottom {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.ma24-right {
|
|
margin-right: 24px;
|
|
}
|
|
|
|
.ma24-left {
|
|
margin-left: 24px;
|
|
}
|
|
|
|
.ma24-vertical {
|
|
margin: 24px 0;
|
|
}
|
|
|
|
.ma24-horizontal {
|
|
margin: 0 24px;
|
|
}
|
|
|
|
.ma24 {
|
|
margin: 24px;
|
|
}
|
|
|
|
/*
|
|
OPACITY
|
|
*/
|
|
.opacity75 {
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.opacity50 {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.opacity25 {
|
|
opacity: 0.25;
|
|
}
|
|
|
|
/*
|
|
PADDINGs
|
|
*/
|
|
|
|
.pa {
|
|
padding: 12px;
|
|
}
|
|
|
|
.pa-vertical {
|
|
padding: 12px 0;
|
|
}
|
|
|
|
.pa-horizontal {
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.pa-left {
|
|
padding-left: 12px;
|
|
}
|
|
|
|
.pa-right {
|
|
padding-right: 12px;
|
|
}
|
|
|
|
.pa-top {
|
|
padding-top: 12px;
|
|
}
|
|
|
|
.pa-bottom {
|
|
padding-bottom: 12px;
|
|
}
|
|
|
|
.pa4 {
|
|
padding: 4px;
|
|
}
|
|
|
|
.pa4-vertical {
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.pa4-horizontal {
|
|
padding: 0 4px;
|
|
}
|
|
|
|
.pa4-left {
|
|
padding-left: 4px;
|
|
}
|
|
|
|
.pa4-right {
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.pa4-top {
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.pa4-bottom {
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.pa8 {
|
|
padding: 8px;
|
|
}
|
|
|
|
.pa8-vertical {
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.pa8-horizontal {
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.pa8-left {
|
|
padding-left: 8px;
|
|
}
|
|
|
|
.pa8-right {
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.pa8-top {
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.pa8-bottom {
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.pa12 {
|
|
padding: 12px;
|
|
}
|
|
|
|
.pa12-vertical {
|
|
padding: 12px 0;
|
|
}
|
|
|
|
.pa12-horizontal {
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.pa12-left {
|
|
padding-left: 12px;
|
|
}
|
|
|
|
.pa12-rigth {
|
|
padding-right: 12px;
|
|
}
|
|
|
|
.pa12-top {
|
|
padding-top: 12px;
|
|
}
|
|
|
|
.pa12-bottom {
|
|
padding-bottom: 12px;
|
|
}
|
|
|
|
.pa24 {
|
|
padding: 24px;
|
|
}
|
|
|
|
.pa24-vertical {
|
|
padding: 24px 0;
|
|
}
|
|
|
|
.pa24-horizontal {
|
|
padding: 0 24px;
|
|
}
|
|
|
|
.pa24-left {
|
|
padding-left: 24px;
|
|
}
|
|
|
|
.pa24-rigth {
|
|
padding-right: 24px;
|
|
}
|
|
|
|
.pa24-top {
|
|
padding-top: 24px;
|
|
}
|
|
|
|
.pa24-bottom {
|
|
padding-bottom: 24px;
|
|
}
|
|
|
|
.border {
|
|
border: 1px solid var(--dark-border);
|
|
}
|
|
|
|
.border-top {
|
|
border-top: 1px solid var(--light-border);
|
|
}
|
|
|
|
.border-left {
|
|
border-left: 1px solid var(--light-border);
|
|
}
|
|
|
|
.border-bottom {
|
|
border-bottom: 1px solid var(--light-border);
|
|
}
|
|
|
|
.border-right {
|
|
border-right: 1px solid var(--light-border);
|
|
}
|
|
|
|
/*
|
|
FLEXBOX
|
|
*/
|
|
.flex-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.flex-row.center-items,
|
|
.flex-center {
|
|
align-items: center;
|
|
}
|
|
|
|
.flex-row.flex-start-items {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.flex-start {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.flex-end {
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.flex-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.overflow-y {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.grow,
|
|
.grow-1 {
|
|
flex: 1;
|
|
}
|
|
|
|
.shadow {
|
|
box-shadow: 0 1px 4px var(--shadow);
|
|
}
|
|
|
|
.shadow-text {
|
|
text-shadow: 0 1px 4px var(--shadow);
|
|
}
|
|
|
|
.glow {
|
|
box-shadow: 0 1px 4px var(--glow);
|
|
}
|
|
|
|
.nowrap {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.pointer {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.center {
|
|
text-align: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.right {
|
|
text-align: right;
|
|
justify-content: right;
|
|
}
|
|
|
|
.blur4 {
|
|
filter: blur(4px);
|
|
}
|
|
|
|
.blur8 {
|
|
filter: blur(8px);
|
|
}
|
|
|
|
.transparent {
|
|
opacity: 0 !important;
|
|
}
|
|
|
|
@media (min-width: 481px) {
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #80808020;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: var(--nav);
|
|
border-radius: 4px;
|
|
border: 1px solid var(--dark-border);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 840px) {
|
|
|
|
nav button span,
|
|
nav a span {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.hideOnMobilePortrait {
|
|
display: none !important;
|
|
}
|
|
|
|
.showOnMobilePortrait {
|
|
display: flex !important;
|
|
}
|
|
|
|
nav input {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px),
|
|
(max-height: 480px) {
|
|
|
|
nav button,
|
|
nav a {
|
|
padding: 7px 8px;
|
|
}
|
|
|
|
.hideOnMobile {
|
|
display: none !important;
|
|
}
|
|
|
|
.showOnMobile {
|
|
display: flex !important;
|
|
}
|
|
}
|
|
|
|
@media (max-height: 480px) {
|
|
.hideOnMobileLandscape {
|
|
display: none !important;
|
|
}
|
|
} |