Pablo Vazquez 964e9cb1a3 Tables: Align status-filter-bars with action-bars
Saves some space and they are related actions anyway.
2022-07-05 18:31:13 +02:00

512 lines
12 KiB
CSS

:root {
--spacer: 1rem;
--spacer-sm: .66rem;
--spacer-xs: .33rem;
--color-background: #111;
--color-background-column: #202020;
--color-accent: hsl(226, 100%, 73%);
--color-accent-text: hsl(226 100% 84%);
--color-accent-background: hsl(226 18% 28%);
--color-text: #ddd;
--color-text-highlight: #fff;
--color-text-muted: #999;
--color-text-hint: #555;
--color-border: #282828;
--color-button: #bbb;
--color-button-background: #555;
--border-width: 2px;
--border-radius: 4px;
--font-family-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--font-family-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro","Fira Mono", "Droid Sans Mono", "Courier New", monospace;
--font-size-base: 14px;
--font-size-sm: 12px;
--table-color-background-row: #303030;
--table-color-background-row-odd: #2b2b2b;
--table-color-background-row-selected: hsl(226, 44%, 36%);
--table-color-background-row-active: hsl(226, 54%, 43%);
--table-color-border: var(--color-border);
--header-height: 25px;
--footer-height: 25px;
--grid-gap: 6px;
--transition-speed: 240ms;
--transition-speed-fast: 60ms;
--color-status-active: hsl(166 100% 46%);
--color-status-completed: hsl(166 100% 46%);
--color-status-archived: hsl(0 0% 25%);
--color-status-archiving: hsl(0 50% 50%);
--color-status-construction-failed: hsl(356 100% 59%);
--color-status-failed: hsl(356 100% 59%);
--color-status-soft-failed: hsl(356 70% 40%);
--color-status-queued: hsl(194 100% 46%);
--color-status-requeueing: hsl(194 100% 46%);
--color-status-canceled: hsl(0 0% 46%);
--color-status-paused: hsl(0 0% 66%);
--color-status-cancel-requested: hsl(194 30% 50%);
--color-status-under-construction: hsl(194 30% 50%);
--color-worker-status-starting: hsl(68, 100%, 30%);
--color-worker-status-awake: var(--color-status-active);
--color-worker-status-asleep: hsl(194, 100%, 19%);
--color-worker-status-error: var(--color-status-failed);
--color-worker-status-shutdown: var(--color-status-paused);
--color-worker-status-testing: hsl(166 100% 46%);
--color-worker-status-offline: var(--color-status-canceled);
--color-connection-lost-text: hsl(17, 65%, 65%);
--color-connection-lost-bg: hsl(17, 65%, 20%);
}
html,
body {
background-color: #111;
color: var(--color-text);
color-scheme: dark;
font-family: var(--font-family-body);
font-size: var(--font-size-base);
height: calc(100vh);
margin: 0;
padding: 0;
}
#app {
display: grid;
grid-gap: var(--grid-gap);
grid-template-areas:
"header header header"
"col-1 col-2 col-3"
"footer footer footer";
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: var(--header-height) 1fr var(--footer-height);
padding: var(--grid-gap);
height: calc(100% - calc(var(--grid-gap) * 2));
width: calc(100% - calc(var(--grid-gap) * 2));
}
@media (max-width: 1280px) {
#app {
grid-template-areas:
"header header"
"col-1 col-2"
"col-3 col-3"
"footer footer";
grid-template-columns: 1fr 1fr;
grid-template-rows: var(--header-height) 1fr 1fr var(--footer-height);
}
}
.col {
background-color: var(--color-background-column);
border-radius: var(--border-radius);
padding: var(--spacer-sm);
/* These two are necessary for the automatic resizing of the tasks table: */
/* Ensures that the table cannot push down the bottom of the column element,
* and thus the column height is a stable reference. */
overflow-y: auto;
/* Ensures the offsetParent of the table is the column itself; without this,
* offsetParent would be <body>. */
position: relative;
}
.col-1 {
grid-area: col-1;
}
.col-2 {
grid-area: col-2;
}
.col-3 {
grid-area: col-3;
}
.app-version {
font-family: var(--font-family-mono);
font-size: var(--font-size-sm);
}
a {
color: currentColor;
text-decoration: none;
}
a:hover {
color: var(--color-accent);
text-decoration: underline;
}
a.router-link-active {
color: var(--color-accent-text);
}
header {
align-items: center;
color: var(--color-text-muted);
display: flex;
grid-area: header;
padding: 0 var(--spacer-sm);
}
header nav {
margin-right: auto;
}
.navbar-brand {
margin-right: var(--spacer);
}
nav > ul {
align-items: center;
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
}
nav > ul > li > a {
display: block;
padding: var(--spacer-xs) var(--spacer-sm);
}
h2.column-title {
border-bottom: var(--border-width) solid var(--color-border);
color: var(--color-text-hint);
font-size: var(--font-size-base);
margin-bottom: var(--spacer-sm);
margin-top: 0;
padding-bottom: var(--spacer-xs);
}
h3.sub-title {
border-bottom: var(--border-width) solid var(--color-border);
color: var(--color-text-hint);
font-size: var(--font-size-base);
margin: var(--spacer) 0 var(--spacer-sm);
padding: 0 0 var(--spacer-sm);
}
dl {
display: grid;
font-family: var(--font-family-mono);
font-size: var(--font-size-sm);
grid-template-columns: max-content auto;
}
dl dt {
font-weight: bold;
text-align: right;
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
dl dd {
margin-bottom: .133rem;
margin-left: var(--spacer-sm);
padding-bottom: .133rem;
transition: color var(--transition-speed-fast) ease-out;
word-break: break-word;
}
dl dd:hover {
color: var(--color-text-highlight);
}
dl dd:empty {
border-color: transparent;
}
footer {
align-items: center;
color: var(--color-text-muted);
display: flex;
font-size: var(--font-size-sm);
grid-area: footer;
padding: var(--spacer-sm);
background-color: var(--color-background-column);
}
.btn-bar {
align-items: center;
display: flex;
padding: var(--spacer-sm) 0;
}
.btn-bar .align-right,
.btn-bar-group .align-right {
margin-left: auto;
}
.btn-bar-group {
align-items: center;
display: flex;
}
.btn {
align-items: center;
background-color: var(--color-button-background);
border-radius: var(--border-radius);
border: var(--border-width) solid var(--color-button-background);
color: var(--color-button);
cursor: pointer;
display: inline-flex;
font-size: var(--font-size-sm);
justify-content: center;
padding: var(--spacer-xs) var(--spacer-sm);
touch-action: manipulation;
transition-duration: var(--transition-speed);
transition-property: color, background-color, border-color;
}
.btn-bar .btn+.btn {
margin-left: var(--spacer-sm);
}
.btn[disabled] {
background-color: transparent;
border-color: var(--color-button);
color: var(--color-text-muted);
opacity: .5;
pointer-events: none;
}
.btn:hover:not([disabled]) {
transition: all 100ms;
color: white;
}
.btn:focus {
/* Make sure the outline is clearly visible inside the button. */
outline-offset: -0.5em;
}
.btn-bar .btn.dangerous {
background-color: #7c4d41;
color: #e4c5c0;
margin-left: 1rem;
}
.btn-bar .btn.dangerous[disabled] {
background-color: #53413e;
}
.details-no-item-selected {
align-items: center;
color: var(--color-text-hint);
display: flex;
user-select: none;
height: 50%;
justify-content: center;
}
.indicator {
--indicator-color: var(--color-background);
--indicator-size: 6px;
background-color: var(--indicator-color);
border: calc(var(--indicator-size)/2) solid var(--indicator-color);
border-radius: 50%;
display: inline-block;
height: var(--indicator-size);
vertical-align: middle;
width: var(--indicator-size);
}
ul.status-filter-bar {
align-items: center;
display: flex;
list-style-type: none;
padding: 0;
margin: 0.3rem 0;
}
ul.status-filter-bar .status-filter-indicator {
margin: 2px;
opacity: 33%;
cursor: pointer;
}
ul.status-filter-bar .status-filter-indicator.active {
opacity: 100%;
}
ul.status-filter-bar .status-filter-indicator .indicator {
--indicator-size: 15px;
}
.status-active {
--indicator-color: var(--color-status-active);
}
.status-canceled {
--indicator-color: var(--color-status-canceled);
}
.status-completed {
--indicator-color: var(--color-status-completed);
}
.status-construction-failed {
--indicator-color: var(--color-status-construction-failed);
}
.status-failed {
--indicator-color: var(--color-status-failed);
}
.status-soft-failed {
--indicator-color: var(--color-status-soft-failed);
}
.status-paused {
--indicator-color: var(--color-status-paused);
}
.status-queued {
--indicator-color: var(--color-status-queued);
}
.status-archived {
--indicator-color: var(--color-status-archived);
}
.status-archiving {
--indicator-color: var(--color-status-archiving);
}
.status-cancel-requested {
--indicator-color: var(--color-status-cancel-requested);
}
.status-requeueing {
--indicator-color: var(--color-status-requeueing);
}
.status-under-construction {
--indicator-color: var(--color-status-under-construction);
}
.worker-status-starting {
--indicator-color: var(--color-worker-status-starting);
}
.worker-status-awake {
--indicator-color: var(--color-worker-status-awake);
}
.worker-status-asleep {
--indicator-color: var(--color-worker-status-asleep);
}
.worker-status-error {
--indicator-color: var(--color-worker-status-error);
}
.worker-status-shutdown {
--indicator-color: var(--color-worker-status-shutdown);
}
.worker-status-testing {
--indicator-color: var(--color-worker-status-testing);
}
.worker-status-offline {
--indicator-color: var(--color-worker-status-offline);
}
.status-archiving,
.status-active,
.status-queued,
.status-under-construction,
.status-cancel-requested {
background-color: transparent;
}
.with-clickable-row .tabulator-row {
cursor: pointer;
}
.tabulator-row.active-row,
.tabulator-row.tabulator-row-even.active-row {
background-color: var(--table-color-background-row-active);
font-weight: bold;
}
footer.window-footer {
cursor: pointer;
}
section.footer-popup {
position: absolute;
bottom: var(--grid-gap);
left: var(--grid-gap);
right: var(--grid-gap);
height: 20vh;
z-index: 42;
padding: 0.2rem 0.5rem;
background-color: var(--color-background-column);
border-radius: 0.3rem;
border: thin solid var(--color-border);
box-shadow: 0 0 2rem black;
}
section.footer-popup header {
display: flex;
}
section.footer-popup header h3 {
margin: 0 auto 0 0;
}
section.footer-popup button.footer-tab {
border: none;
margin-right: 2rem;
}
section.footer-popup button.footer-tab.active-tab {
color: var(--color-accent-text);
background-color: var(--color-accent-background);
}
section.footer-popup .tabulator-tableholder {
/* Force a visible scroll bar, so that the notification history table always
* has the same available width. Without this, Tabulator won't properly act on
* the reduction in width when the scrollbar appears, and will show a
* horizontal scrollbar as well. */
overflow-y: scroll;
}
section.footer-popup .tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents {
font-size: var(--font-size);
font-weight: normal;
color: var(--color-text-hint);
user-select: none;
}
span.state-transition-arrow {
font-weight: bold;
font-size: 110%;
color: var(--color-accent);
}
span.state-transition-arrow.lazy {
color: var(--color-text-muted);
}
.job-details-column .last-rendered {
width: 200px;
height: 112px;
float: right;
}
.global-last-rendered {
grid-column-start: col-1;
grid-column-end: col-3;
/* FIXME: the positioning of the image & sizing of the container DIV doesn't
work well yet. */
height: 100%;
}
.global-last-rendered .last-rendered {
max-height: 100%;
}