: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 . */ 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%; }