/** TSO Monitor Prototype CSS. */
* {
box-sizing: border-box;
}
& {
--font-main: 'Inter',sans-serif;
--font-mono: 'Inconsolata', monospace;
--color-black: #282C34;
--color-blue: #59A1DB;
--color-cyan: #57B7C4;
--color-green: rgb(152,195,121);
--color-purple: #BB72D1;
--color-red: reg(217,105,113);
--color-white: #DBDEE3;
--color-yellow: rgb(209,175,112);
--color-bright-black: #5A6374;
--color-bright-blue: #66B9FC;
--color-bright-cyan: #6DE6F5;
--color-bright-green: #BBF095;
--color-bright-purple: #DB85F5;
--color-bright-red: #FA7883;
--color-bright-white: #F1F4FA;
--color-bright-yellow: #F5CD83;
--color-dark-black: #181C24;
--color-dark-blue: #3981BB;
--color-dark-cyan: #3797A4;
--color-dark-green: #78A359;
--color-dark-purple: #9B52B1;
--color-dark-red: rgb(185,73,81);
--color-dark-white: rgb(187,190,195);
--color-dark-yellow: rgb(177,143,80);
--color-xdark-black: #080C14;
--color-xdark-blue: #19619B;
--color-xdark-cyan: #177784;
--color-xdark-green: #588339;
--color-xdark-purple: #7B3291;
--color-xdark-red: #992931;
--color-xdark-white: rgb(155,158,163);
--color-xdark-yellow: #916F20;
--color-xxdark-black: #030810;
--color-xxdark-blue: #05417B;
--color-xxdark-cyan: #055764;
--color-xxdark-green: #386319;
--color-xxdark-purple: #5B1271;
--color-xxdark-red: #790911;
--color-xxdark-white: rgb(113,116,121);
--color-xxdark-yellow: #714F06;
--color-darkest-black: #020708;
--color-darkest-blue: #04215B;
--color-darkest-cyan: #043744;
--color-darkest-green: #184306;
--color-darkest-purple: #3B0461;
--color-darkest-red: #590205;
--color-darkest-white: #4B4E53;
--color-darkest-yellow: #512F01;
--color-stransparent-black: rgba(0,0,0,0.65);
--color-transparent-black: rgba(0,0,0,0.5);
--color-xtransparent-black: rgba(0,0,0,0.25);
--color-xxtransparent-black: rgba(0,0,0,0.15);
--color-transparent-green: rgba(152,195,121,0.5);
--color-xtransparent-green: rgba(152,195,121,0.25);
--color-xxtransparent-green: rgba(152,195,121,0.15);
--color-transparent-red: rgba(217,105,133,0.5);
--color-xtransparent-red: rgba(217,105,133,0.25);
--color-xxtransparent-red: rgba(217,105,133,0.15);
--color-transparent-white: rgba(241,244,250,0.8);
--color-halftransparent-white: rgba(241,244,250,0.5);
--color-xtransparent-white: rgba(241,244,250,0.25);
--color-xxtransparent-white: rgba(241,244,250,0.15);
--color-transparent-xxdark-cyan: rgba(5,87,100,0.0);
--color-transparent-xxdark-green: rgba(58,99,25,0.0);
--color-transparent-xxdark-purple: rgba(91,18,113,0.0);
--color-main-bg: var(--color-dark-black);
--color-main-fg: var(--color-bright-white);
}
html {
display: flex;
flex-direction: column;
height: 100%;
}
body {
display: flex;
background-color: var(--color-main-bg);
color: var(--color-main-fg);
margin: 0px 0px;
height: 100%;
font-size: 18px;
font-family: var(--font-main);
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
input {
font-family: var(--font-main);
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
.monospaced {
font-family: var(--font-mono);
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings:
"wdth" 100;
}
.black {
color: var(--color-black);
}
.blue {
color: var(--color-blue);
}
.cyan {
color: var(--color-cyan);
}
.green {
color: var(--color-green);
}
.purple {
color: var(--color-purple);
}
.red {
color: var(--color-red);
}
.white {
color: var(--color-white);
}
.yellow {
color: var(--color-yellow);
}
.black_bright {
color: var(--color-bright-black);
}
.blue_bright {
color: var(--color-bright-blue);
}
.cyan_bright {
color: var(--color-bright-cyan);
}
.green_bright {
color: var(--color-bright-green);
}
.purple_bright {
color: var(--color-bright-purple);
}
.red_bright {
color: var(--color-bright-red);
}
.white_bright {
color: var(--color-bright-white);
}
.yellow_bright {
color: var(--color-bright-yellow);
}
button, .button {
font-size: 14px;
border: 2px solid var(--color-blue);
background-color: var(--color-xxtransparent-black);
color: var(--color-bright-white);
font-weight: 500;
padding: 2px 6px;
border-radius: 3px;
cursor: pointer;
user-select: none;
&:hover {
border-color: var(--color-bright-blue);
background-color: var(--color-dark-blue);
}
&.active {
border-color: var(--color-bright-yellow);
background-color: var(--color-yellow);
color: var(--color-dark-black);
box-shadow: 0px 0px 4px 1px var(--color-bright-yellow);
}
&.hidden {
display: none;
}
}
mon-dashboard {
display: flex;
flex-direction: column;
background-color: var(--color-main-bg);
flex-grow: 1;
overflow-y: scroll;
}
mon-service-collection {
display: flex;
flex-direction: column;
background-color: var(--color-black);
padding: 10px 20px 20px 20px;
flex-grow: 1;
gap: 24px;
}
mon-service-group {
display: flex;
flex-direction: column;
gap: 12px;
.service-group-banner {
display: flex;
flex-direction: row;
gap: 6px;
align-items: center;
.short-line {
background-color: var(--color-xdark-white);
height: 1px;
width: 20px;
}
.name {
font-size: 16px;
color: var(--color-white);
text-wrap: nowrap;
}
.line {
background-color: var(--color-xxdark-white);
background: linear-gradient(to right, var(--color-xdark-white), var(--color-darkest-white)) ;
height: 1px;
width: 100%;
flex: 1 0 0;
}
}
}
mon-service, cc-service {
display: flex;
flex-direction: column;
gap: 0px;
border-radius: 6px;
position: relative;
transition: all 0.5s;
mon-grid-animation, mon-service-animation {
z-index: 0;
}
.overlay {
position: absolute;
z-index: 100;
width: 100%;
height: 100%;
pointer-events: none;
border-radius: 6px;
}
&.expanded {
.synopsis {
height: 222px;
.controls, .additional-stats {
display: flex;
opacity: 1;
pointer-events: auto;
}
}
}
.event-details {
display: none;
z-index: 1;
.banner {
background-color: var(--color-xxtransparent-white);
padding: 2px 16px;
font-size: 11px;
text-transform: uppercase;
color: var(--color-yellow);
}
.event-record {
display: flex;
flex-direction: column;
padding: 12px 16px;
gap: 8px;
}
.standard-fields {
display: flex;
flex-direction: row;
gap: 8px 16px;
}
.pair {
display: flex;
flex-direction: column;
gap: 0px;
.label {
font-size: 10px;
color: var(--color-dark-white);
text-transform: uppercase;
}
.value {
font-size: 13px;
font-weight: 500;
max-width: 300px;
color: var(--color-white);
}
}
.custom {
display: none;
color: var(--color-white);
max-height: 300px;
overflow-y: auto;
padding-top: 8px;
flex-direction: column;
gap: 8px;
&.visible {
display: flex;
}
.fields {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 8px 16px;
}
.stacktrace {
white-space: pre-wrap;
}
}
&.expanded {
display: flex;
flex-direction: column;
gap: 0px;
}
}
&.prod {
background-color: var(--color-darkest-purple);
background-image: linear-gradient(-45deg,
var(--color-transparent-xxdark-purple),
var(--color-xxdark-purple) 100px,
var(--color-transparent-xxdark-purple) 300px,
var(--color-transparent-xxdark-purple) 400px,
var(--color-xxdark-purple) 500px,
var(--color-transparent-xxdark-purple) 600px
);
.overlay {
box-shadow: 0px 0px 4px inset var(--color-dark-purple),
0px 0px 4px var(--color-bright-black);
}
.code-name, .status, .memory, .additional-stats {
text-shadow: 0px 0px 2px var(--color-darkest-purple),
0px 0px 4px var(--color-darkest-purple),
0px 0px 6px var(--color-darkest-purple);
}
.deploy-status .deploy {
background-color: var(--color-purple);
color: var(--color-transparent-black);
}
mon-log-view, .event-details, .custom {
border-top: 1px solid var(--color-xxdark-purple);
}
.env-color {
color: var(--color-purple);
}
.env-bright-color {
color: var(--color-bright-purple);
}
}
&.stage {
background-color: var(--color-darkest-green);
background-image: linear-gradient(-45deg,
var(--color-transparent-xxdark-green),
var(--color-xxdark-green) 100px,
var(--color-transparent-xxdark-green) 300px,
var(--color-transparent-xxdark-green) 400px,
var(--color-xxdark-green) 500px,
var(--color-transparent-xxdark-green) 600px
);
.overlay {
box-shadow: 0px 0px 4px inset var(--color-dark-green),
0px 0px 4px var(--color-bright-black);
}
.code-name, .status, .memory, .additional-stats {
text-shadow: 0px 0px 2px var(--color-darkest-green),
0px 0px 4px var(--color-darkest-green),
0px 0px 6px var(--color-darkest-green);
}
.deploy-status .deploy {
background-color: var(--color-green);
color: var(--color-transparent-black);
}
mon-log-view, .event-details, .custom {
border-top: 1px solid var(--color-xxdark-green);
}
.env-color {
color: var(--color-green);
}
.env-bright-color {
color: var(--color-bright-green);
}
}
&.dev {
background-color: var(--color-darkest-cyan);
background-image: linear-gradient(-45deg,
var(--color-transparent-xxdark-cyan),
var(--color-xxdark-cyan) 100px,
var(--color-transparent-xxdark-cyan) 300px,
var(--color-transparent-xxdark-cyan) 400px,
var(--color-xxdark-cyan) 500px,
var(--color-transparent-xxdark-cyan) 600px
);
.overlay {
box-shadow: 0px 0px 4px inset var(--color-dark-cyan),
0px 0px 4px var(--color-bright-black);
}
.code-name, .status, .memory, .additional-stats {
text-shadow: 0px 0px 2px var(--color-darkest-cyan),
0px 0px 4px var(--color-darkest-cyan),
0px 0px 6px var(--color-darkest-cyan);
}
.deploy-status .deploy {
background-color: var(--color-cyan);
color: var(--color-transparent-black);
}
mon-log-view, .event-details, .custom {
border-top: 1px solid var(--color-xxdark-cyan);
}
.env-color {
color: var(--color-cyan);
}
.env-bright-color {
color: var(--color-bright-cyan);
}
}
&.any {
background-color: var(--color-darkest-white);
background-image: linear-gradient(-45deg,
var(--color-transparent-xxdark-white),
var(--color-xxdark-white) 100px,
var(--color-transparent-xxdark-white) 300px,
var(--color-transparent-xxdark-white) 400px,
var(--color-xxdark-white) 500px,
var(--color-transparent-xxdark-white) 600px
);
.overlay {
box-shadow: 0px 0px 4px inset var(--color-dark-white),
0px 0px 4px var(--color-bright-black);
}
.code-name, .status, .memory, .additional-stats {
text-shadow: 0px 0px 2px var(--color-darkest-white),
0px 0px 4px var(--color-darkest-white),
0px 0px 6px var(--color-darkest-white);
}
.deploy-status .deploy {
background-color: var(--color-white);
color: var(--color-transparent-black);
}
mon-log-view, .event-details, .custom {
border-top: 1px solid var(--color-xxdark-white);
}
.env-color {
color: var(--color-white);
}
.env-bright-color {
color: var(--color-bright-white);
}
}
&.offline.prod, &.offline.stage, &.offline.dev {
background-image: linear-gradient(-45deg,
var(--color-darkest-red),
var(--color-xxdark-red) 100px,
var(--color-darkest-red) 300px,
var(--color-darkest-red) 400px,
var(--color-xxdark-red) 500px,
var(--color-darkest-red) 600px
);
.overlay {
box-shadow: 0px 0px 4px inset var(--color-dark-red),
0px 0px 4px var(--color-red);
}
}
&.shutdown.prod, &.shutdown.stage, &.shutdown.dev {
background-image: linear-gradient(-45deg,
var(--color-dark-black),
var(--color-black) 100px,
var(--color-dark-black) 200px
);
.deploy-status {
.status {
color: var(--color-white);
}
}
}
&.unknown.prod, &.unknown.stage, &.unknown.dev {
background-image: linear-gradient(-45deg,
var(--color-dark-black),
var(--color-black) 100px,
var(--color-dark-black) 200px
);
.deploy-status {
.status {
color: var(--color-xdark-white);
}
}
}
.synopsis {
position: relative;
display: flex;
flex-direction: row;
gap: 12px;
padding: 12px 16px 12px 16px;
height: 102px;
overflow-y: hidden;
transition: height 0.1s;
cursor: n-resize;
}
.counters {
display: flex;
flex-direction: column;
gap: 8px;
}
.controls {
display: flex;
pointer-events: none;
position: absolute;
left: 16px;
top: 186px;
flex-direction: row;
gap: 6px;
opacity: 0;
transition: opacity 0.3s;
}
.additional-stats {
display: flex;
flex-direction: column;
pointer-events: none;
position: absolute;
left: 16px;
top: 90px;
font-size: 13px;
line-height: 15px;
color: var(--color-dark-white);
opacity: 0;
transition: opacity 0.3s;
}
.code-name {
display: flex;
flex-direction: column;
gap: 0px;
width: 225px;
min-width: 225px;
margin: -4px 0px 0px 0px;
align-self: start;
justify-content: center;
height: 78px;
user-select: none;
.code {
font-size: 36px;
line-height: 42px;
overflow: hidden;
text-overflow: ellipsis;
text-wrap: nowrap;
}
.name {
font-size: 14px;
line-height: 17px;
overflow: hidden;
text-overflow: ellipsis;
text-wrap: nowrap;
color: var(--color-transparent-white);
font-style: italic;
}
}
.deploy-status {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 140px;
align-self: start;
justify-content: center;
height: 78px;
.deploy {
font-size: 15px;
line-height: 15px;
padding: 4px 8px;
align-self: start;
border-radius: 2px;
overflow: hidden;
text-overflow: ellipsis;
text-wrap: nowrap;
text-transform: uppercase;
font-weight: 800;
}
.status {
font-size: 13px;
line-height: 13px;
color: var(--color-bright-white);
}
.memory {
font-size: 13px;
line-height: 15px;
color: var(--color-dark-white);
&.hidden {
display: none;
}
}
}
}
mon-log-item, .fixedwidth {
font-family: var(--font-mono);
font-size: 14px;
line-height: 17px;
font-style: normal;
font-weight: 400;
font-variation-settings: "wdth" 100;
}
mon-log-view {
background-color: var(--color-black);
display: flex;
flex-direction: column;
padding: 8px 16px;
z-index: 1;
.log-container {
display: flex;
flex-direction: column;
height: 304px;
max-height: 304px;
overflow-y: scroll;
}
mon-log-item {
display: flex;
flex-direction: row;
gap: 8px;
.timestamp {
color: var(--color-bright-cyan);
}
.prefix {
width: 28px;
white-space: pre;
}
.request {
color: var(--color-cyan);
}
.proc-thread {
color: var(--color-cyan);
}
.text {
white-space: pre-wrap;
}
}
.divider {
display: flex;
flex-direction: row;
gap: 6px;
align-items: center;
font-size: 14px;
color: var(--color-bright-yellow);
.connect {
color: var(--color-bright-cyan);
}
.line-left {
background-color: var(--color-xxdark-white);
background: linear-gradient(to left, var(--color-xdark-white), var(--color-darkest-white)) ;
height: 1px;
width: 100%;
flex: 1 0 0;
}
.line-right {
background-color: var(--color-xxdark-white);
background: linear-gradient(to right, var(--color-xdark-white), var(--color-darkest-white)) ;
height: 1px;
width: 100%;
flex: 1 0 0;
}
}
}
mon-event-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 6px;
align-items: start;
align-self: start;
flex: 1 0 0;
}
mon-counter {
display: flex;
flex-direction: column;
align-items: center;
.counter-label {
font-size: 9px;
line-height: 12px;
text-transform: uppercase;
text-overflow: ellipsis;
}
.counter-value {
font-size: 14px;
line-height: 16px;
}
}
mon-event {
display: flex;
flex-direction: column;
gap: 0px;
color: var(--color-bright-white);
cursor: pointer;
box-shadow: 0px 0px 4px 1px var(--color-black);
transition: opacity 0.7s, width 0.7s, box-shadow 0.7s;
opacity: 1;
user-select: none;
max-width: 200px;
&.new {
opacity: 0;
width: 0px;
}
&.selected {
outline: 2px solid var(--color-bright-yellow);
box-shadow: 0px 0px 6px 2px var(--color-bright-yellow);
}
&.attention {
box-shadow: 0px 0px 6px 2px var(--color-bright-white);
}
&.alert {
.titlebar {
background-color: var(--color-xtransparent-red);
}
.label {
background-color: var(--color-xxdark-red);
}
}
&.event {
.titlebar {
}
.label {
background-color: var(--color-xdark-yellow);
}
}
&.recovery {
.titlebar {
background-color: var(--color-xtransparent-green);
}
.label {
background-color: var(--color-xdark-green);
}
}
.titlebar {
display: flex;
flex-direction: row;
gap: 6px;
justify-content: space-between;
background-color: var(--color-xxtransparent-black);
border-top: 1px solid var(--color-darkest-white);
border-right: 1px solid var(--color-darkest-white);
border-left: 1px solid var(--color-darkest-white);
padding: 1px 6px 1px 6px;
font-size: 9px;
line-height: 12px;
border-radius: 2px 2px 0px 0px;
backdrop-filter: blur(4px);
.category {
text-transform: uppercase;
text-overflow: ellipsis;
}
mon-relative-time {
display: flex;
min-width: 22px;
justify-content: end;
}
}
.label {
background-color: var(--color-darkest-white);
padding: 2px 6px 2px 6px;
font-size: 14px;
line-height: 16px;
border-radius: 0px 0px 3px 3px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
truncate-toggle {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
cursor: pointer;
&.expanded {
overflow: unset;
white-space: unset;
}
}
mon-event-text {
font-size: 14px;
}
mon-login, mon-connecting {
position: fixed;
z-index: 100;
display: flex;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: end;
background: radial-gradient(circle at bottom 8vh left 12vw,
var(--color-xtransparent-white) 0,
var(--color-xxtransparent-white) 40%,
var(--color-xxtransparent-white) 100%
);
/* background-color: var(--color-xxtransparent-white); */
backdrop-filter: blur(6px);
color: var(--color-white);
text-shadow:
0px 0px 2px var(--color-darkest-white),
0px 0px 4px var(--color-darkest-white),
0px 0px 8px var(--color-black);
.content {
padding-left: 8vw;
padding-bottom: 8vh;
}
}
mon-login {
.version-indicator {
display: flex;
position: absolute;
left: 8vw;
bottom: 4vh;
font-size: 12px;
color: var(--color-yellow);
}
.form-container {
display: flex;
flex-direction: column;
gap: 12px;
.message {
font-size: 32px;
font-weight: 200;
}
.login-form {
display: flex;
flex-direction: row;
gap: 20px;
.pair {
display: flex;
gap: 8px;
flex-direction: row;
align-self: end;
label {
font-size: 14px;
flex-basis: 70px;
align-self: end;
font-weight: 400;
}
input {
border: none;
border-bottom: 1px solid var(--color-halftransparent-white);
background-color: transparent;
font-size: 36px;
width: 10vw;
color: var(--color-bright-white);
text-shadow:
0px 0px 2px var(--color-darkest-white),
0px 0px 4px var(--color-darkest-white),
0px 0px 8px var(--color-black);
font-weight: 200;
padding: 0px 6px;
&.wide {
width: 18vw;
}
&:focus {
outline: none;
}
}
}
.controls {
display: flex;
align-self: end;
button {
border: 1px solid var(--color-halftransparent-white);
padding: 2px 12px;
border-radius: 0px;
}
}
}
}
}
mon-connecting {
display: flex;
gap: 12px;
.banner {
font-size: 36px;
font-weight: 200;
}
.status {
display: flex;
flex-direction: row;
gap: 24px;
.attempts, .delay {
display: flex;
flex-direction: column;
gap: 0px;
&.hidden {
display: none;
}
.label {
font-size: 12px;
text-transform: uppercase;
}
.counter {
display: flex;
align-self: end;
font-size: 20px;
font-weight: 200;
}
}
}
}
mon-grid-animation, mon-service-animation {
display: flex;
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
canvas {
position: absolute;
top: 0px;
}
}
mon-footer {
position: fixed;
display: flex;
flex-direction: row;
align-items: center;
justify-content: end;
z-index: 1;
bottom: 0px;
right: 0px;
font-size: 14px;
background-color: var(--color-stransparent-black);
padding: 1px 16px;
gap: 16px;
text-shadow: 0px 0px 1px var(--color-black);
.build {
color: var(--color-dark-blue);
font-weight: 500;
font-size: 10px;
text-transform: uppercase;
}
mon-current-time {
color: var(--color-yellow);
}
.session-count {
color: var(--color-yellow);
&.hidden {
display: none;
}
}
.user {
color: var(--color-blue);
gap: 6px;
display: flex;
flex-direction: row;
.code {
}
.name {
}
.admin {
color: var(--color-yellow);
cursor: pointer;
}
}
}