916ea2015a
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.
416 lines
9.2 KiB
CSS
416 lines
9.2 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;
|
|
|
|
--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: var(--color-accent);
|
|
--table-color-background-row-active: hsla(276, 100%, 50%, 0.267);
|
|
--table-color-background-row-active-even: hsla(276, 98%, 58%, 0.267);
|
|
--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(276, 100%, 50%);
|
|
--color-status-requeued: hsl(276, 100%, 50%);
|
|
--color-status-canceled: hsl(194 100% 46%);
|
|
--color-status-paused: hsl(194 20% 46%);
|
|
|
|
--color-status-cancel-requested: hsl(194 30% 50%);
|
|
--color-status-under-construction: hsl(194 30% 50%);
|
|
|
|
--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);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
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 {
|
|
align-items: center;
|
|
background-color: var(--color-accent);
|
|
border-radius: var(--border-radius);
|
|
border: var(--border-width) solid var(--color-accent);
|
|
color: var(--color-background);
|
|
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-bar .btn[disabled] {
|
|
background-color: transparent;
|
|
border-color: var(--color-text-muted);
|
|
color: var(--color-text-muted);
|
|
opacity: .5;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.btn-bar .btn:hover:not([disabled]) {
|
|
transition: all 100ms;
|
|
color: white;
|
|
}
|
|
|
|
.btn-bar .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: 100%;
|
|
justify-content: center;
|
|
margin: auto;
|
|
}
|
|
|
|
.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: block;
|
|
height: var(--indicator-size);
|
|
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-requeued {
|
|
--indicator-color: var(--color-status-requeued);
|
|
}
|
|
.status-under-construction {
|
|
--indicator-color: var(--color-status-under-construction);
|
|
}
|
|
|
|
.status-archiving,
|
|
.status-active,
|
|
.status-queued,
|
|
.status-under-construction,
|
|
.status-cancel-requested {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.job-list .tabulator-row, .task-list .tabulator-row {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tabulator-row.active-row {
|
|
font-weight: bold;
|
|
background-color: var(--table-color-background-row-active);
|
|
}
|
|
.tabulator-row.active-row.tabulator-row-even {
|
|
background-color: var(--table-color-background-row-active-even);
|
|
}
|
|
|
|
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 {
|
|
float: right;
|
|
}
|
|
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;
|
|
}
|