Home
Diffusion Flamenco Manager (master) Browse

flamenco-manager/static/main.css
cd7fa398e141master

Last Change
Raw File

main.css
View Options

:root {
/* Own variables. */
--body-color: var(--light);
--body-background: var(--gray-dark);
--border-separator: #404040;
--border-radius: 6px;
--gray-darker: #202020;
--font-size-small: 11px;
--font-family-dashboard: var(--font-family-monospace);
--font-size-dashboard: 12px;
--padding-sm: 5px;
--status-awake: var(--success);
--status-timeout: var(--info);
--status-offline: #888;
--status-testing: var(--warning);
--status-error: var(--danger);
--status-asleep: var(--status-offline);
--table-row-background: var(--gray-dark);
--table-row-background-odd: #363636;
--table-row-background-selected: #226abb;
/* Bootstrap overrides. */
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--gray-dark: #303030;
--secondary: #bbb;
}
html, body {
font-family: var(--font-family-sans-serif);
color: var(--light);
background-color: var(--body-background);
height: 100%;
}
select, input, button {
font-family: var(--font-family-sans-serif);
font-size: initial;
}
a, a:link { color: #809ec0; }
a:visited { color: #a88fca; }
a:hover, a:active { color: var(--primary); }
.btn {white-space: nowrap; border-radius: var(--border-radius)}
.btn-sm,
.form-control-sm,
.btn-link.btn-sm { font-size: var(--font-size-small);}
.btn-disabled {opacity: 0.33 !important;}
/* Status Indicators. Small circle with the color of the status. */
.status-indicator {
background-color: var(--gray);
border-radius: 50%;
display: inline-block;
height: 10px;
width: 10px;
}
.status-indicator.status-awake { background-color: var(--status-awake); }
.status-indicator.status-timeout { background-color: var(--status-timeout); }
.status-indicator.status-offline { background-color: var(--status-offline); }
.status-indicator.status-testing { background-color: var(--status-testing); }
.status-indicator.status-error { background-color: var(--status-error); }
/* Table Row Statuses. */
.status-requested.status-awake { color: var(--status-awake); }
.status-requested.status-asleep { color: var(--status-asleep); }
.status-requested.status-timeout, tbody.status-timeout .table-cell-status { color: var(--status-timeout); }
.status-requested.status-offline, tbody.status-offline { color: var(--status-offline); }
.status-requested.status-testing, tbody.status-testing .table-cell-status { color: var(--status-testing); }
.status-requested.status-error, tbody.status-error .table-cell-status { color: var(--status-error); }
/* Bootstrap overrides. */
hr { border-color: var(--border-separator); border-width: 2px;}
.table { color: var(--body-color);}
.table td, .table th { vertical-align: middle; }
.text-secondary { color: var(--secondary) !important; }
.btn-outline-secondary { border-color: var(--secondary) !important; color: var(--secondary) !important; }
.border-bottom, .border-top, .border-left, .border-right { border-color: var(--border-separator) !important; border-width: 2px !important;}
.modal-content, .card { background-color: var(--body-background); color: var(--body-color); }
.modal-dialog button.close { color: var(--body-color); }
.card { border-color: var(--border-separator); }
select.custom-select {
color: var(--body-color);
background-color: var(--gray-darker);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23888888' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
}
.form-control,
.form-control:focus,
.form-control:disabled,
.form-control[readonly],
.input-group-text {
background-color: var(--gray-darker);
border: none;
color: var(--body-color);
}
.form-control:disabled, .form-control[readonly] {
opacity: .5;
}
.form-control {
border-radius: var(--border-radius);
}
.form-control:focus {
box-shadow: 0 0 0 2px var(--primary);
}
.input-group-append .input-group-text {color: var(--gray); cursor: pointer; padding: initial;}
.input-group-append .input-group-text:hover {color: var(--white);}
.input-icon {font-size: 1.3rem;}
.modal-header,
.modal-footer {
border-color: var(--border-separator);
}
#toast-container > div, #toast-container:hover > div { box-shadow: none; }
/*
* Extra utility classes.
* Follow Bootstrap 4 naming style as much as possible.
*/
.img-icon {
height: 16px;
width: 16px;
}
.bg-darker {background-color: var(--gray-darker)}
.text-small {font-size: var(--font-size-small)}
.cursor-pointer {cursor: pointer}
.icon {
/* background-color: white; */
border-radius: 2px;
display: inline-block;
height: 12px;
margin: 0 5px;
position: relative;
top: 1px;
transition: transform ease-in-out 150ms;
width: 12px;
}
.icon:hover {
transform: scale(1.1);
}
.icon.i-asleep_immediate::after,
.icon.i-offline_immediate::after {
content: '!';
font-style: normal;
font-weight: bold;
font-size: 1.2em;
right: -15px;
position: absolute;
top: -3px;
}
.icon.i-wakeup {
border: 7px solid transparent;
border-left: 12px solid white;
background-color: transparent;
left: 5px;
}
.icon.i-offline_lazy,
.icon.i-offline_immediate {
border: 10px solid white;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
}
.icon.i-asleep_lazy,
.icon.i-asleep_immediate {
background-color: white;
border-radius: 0;
top: 3px;
}
.separator { color: var(--border-separator);}
/* Used for example when copying content to clipboard. */
.flash-on {
color: var(--primary) !important;
transition: color 100ms ease-in-out;
}
.flash-off {
transition: color 500ms ease-out;
}
.chevron::before {
border-style: solid;
border-width: 0.15em 0.15em 0 0;
content: '';
display: inline-block;
height: 0.5em;
left: 0.15em;
position: relative;
top: 0.15em;
transform: rotate(-45deg);
width: 0.5em;
}
.chevron.right:before {
left: 0;
transform: rotate(45deg);
}
.chevron.bottom:before {
top: 0;
transform: rotate(135deg);
}
.chevron.left:before {
left: 0.15em;
transform: rotate(-135deg);
}
@keyframes pulse {
0% {
opacity: 0.5;
}
100% {
opacity: 1.0;
}
}