Something went wrong. Try again.
Backend environment for match hosting for lance.blue
Something went wrong. Try again.
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363/* * lance.blue theming for the Suramadu chrome. * * Loaded after the war's css/style.css and overriding it, rather than replacing * it: that file is ~1900 lines of layout we have no argument with, and copying * it here would mean re-copying it on every Suramadu bump. Only colour and * the loading page are ours. * * The palette is headquarters' web/src/styles.css. Kept as literal values * because this file is served to the browser by Suramadu, not built by * anything that could import them - if headquarters changes its palette, this * has to be changed by hand. * * --------------------------------------------------------------------------- * Every selector here starts with :root. That is not decoration. * * Loading later than upstream only wins ties, and upstream does not tie. It * paints the same card twice - once at .suramadu-element .ws-modal and again, * further down, at .suramadu-element .suramadu-element-content .ws-modal - so a * two-class override loses to the three-class one. Links are the same story: * upstream styles a:link/:visited/:hover/:active/:focus, and a plain `a` never * beats a pseudo-class. * * :root adds one class-level unit to every rule, which puts these above * anything in style.css without resorting to !important. Keep it on new rules, * and match upstream's deepest scoping rather than the shortest one that looks * like it should work. tests/shell/test-theme-css.sh enforces the prefix. */
:root { --lb-bg: #0b1017; --lb-panel: #131b26; --lb-line: #22303f; --lb-ink: #e6edf5; --lb-muted: #8ea0b5; --lb-accent: #4c8dff; --lb-brand: #4fc1d6; --lb-danger: #ff8a7a; --lb-radius: 6px; --lb-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --lb-display: "Chakra Petch", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; /* The insignia's hexagon, cut into the boot card's corners. One line because tests/shell/test-theme-css.sh reads any line ending in a comma as a selector, and a wrapped polygon() would trip it. */ --lb-notch: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);}
/* ---- the flash of white ------------------------------------------------- * Three separate surfaces are white by default and all of them show before * the canvas paints: the page, the full-screen modal backdrop, and the card. */
:root html,:root body,:root .suramadu-element,:root .suramadu-element .suramadu-element-content { background-color: var(--lb-bg); color: var(--lb-ink); font-family: var(--lb-font);}
:root .suramadu-element .ws-modal-container,:root .suramadu-element .suramadu-element-content .ws-modal-container { background-color: var(--lb-bg);}
/* ---- cards: modal, dialog, login, selector, file pickers ----------------- * Both scopings, because upstream declares the same background at two * different depths and only the deeper one takes effect. */
:root .suramadu-element .ws-modal,:root .suramadu-element .ws-login,:root .suramadu-element .suramadu-element-content .ws-modal,:root .suramadu-element .suramadu-element-content .ws-login,:root .suramadu-element .suramadu-element-content .ws-dialog,:root .suramadu-element .suramadu-element-content .ws-selector,:root .suramadu-element .suramadu-element-content .ws-files,:root .suramadu-element .suramadu-element-content .ws-paste,:root .suramadu-element .suramadu-element-content .ws-downloadlink,:root .suramadu-element .suramadu-element-content .ws-window-switcher { background-color: var(--lb-panel); border: 1px solid var(--lb-line); border-radius: var(--lb-radius); color: var(--lb-ink); /* Upstream's drop shadow is tuned for a white card on white; on a dark page it reads as a smudge. */ box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);}
/* The bars that sit over the canvas share the same white. */:root .suramadu-element .ws-toolbar,:root .suramadu-element .ws-touchbar,:root .suramadu-element .suramadu-element-content .ws-messagebar,:root .suramadu-element .suramadu-element-content .ws-networkbar,:root .suramadu-element .suramadu-element-content .ws-playback,:root .suramadu-element .suramadu-element-content .ws-filebar,:root .suramadu-element .suramadu-element-content .ws-clipboard { background: var(--lb-panel); border: 1px solid var(--lb-line); color: var(--lb-ink);}
/* ---- the orange --------------------------------------------------------- * #ff420e is Suramadu's accent. Everywhere it appears, use ours. */
:root .suramadu-element .ws-spinner-dot-1,:root .suramadu-element .ws-spinner-dot-2,:root .suramadu-element .suramadu-element-content .ws-spinner-dot-1,:root .suramadu-element .suramadu-element-content .ws-spinner-dot-2 { background-color: var(--lb-brand);}
/* Upstream styles every link state explicitly, so a bare `a` loses. */:root .suramadu-element a,:root .suramadu-element a:link,:root .suramadu-element a:visited,:root .suramadu-element a:hover,:root .suramadu-element a:active,:root .suramadu-element a:focus { color: var(--lb-accent);}
:root .suramadu-element ::selection { background-color: var(--lb-accent); color: var(--lb-bg);}
:root .suramadu-element .ws-btn:hover,:root .suramadu-element .ws-touchbar-btn:hover,:root .suramadu-element .suramadu-element-content .ws-messagebar-btn:hover,:root .suramadu-element .suramadu-element-content .ws-networkbar-btn:hover { background-color: var(--lb-accent); border-color: var(--lb-accent); color: var(--lb-bg);}
:root .suramadu-element .ws-btn--selected { color: var(--lb-accent);}
:root .suramadu-element .ws-form-field:focus,:root .suramadu-element .ws-form-field:hover { border-color: var(--lb-accent);}
:root .suramadu-element .ws-message--error,:root .suramadu-element .ws-login-message--error { color: var(--lb-danger);}
/* ---- text and separators ------------------------------------------------- */
:root .suramadu-element .ws-header,:root .suramadu-element .ws-login-header,:root .suramadu-element .suramadu-element-content .ws-clipboard-header,:root .suramadu-element .suramadu-element-content .ws-files-header,:root .suramadu-element .suramadu-element-content .ws-paste-header,:root .suramadu-element .suramadu-element-content .ws-downloadlink-header,:root .suramadu-element .suramadu-element-content .ws-window-switcher-header { border-bottom-color: var(--lb-line);}
:root .suramadu-element .ws-text,:root .suramadu-element .ws-login-instructions,:root .suramadu-element .suramadu-element-content .ws-dialog-content,:root .suramadu-element .suramadu-element-content .ws-files-instructions,:root .suramadu-element .suramadu-element-content .ws-paste-message,:root .suramadu-element .suramadu-element-content .ws-downloadlink-message { color: var(--lb-muted);}
:root .suramadu-element .ws-form-field { background-color: var(--lb-bg); border-color: var(--lb-line); color: var(--lb-ink);}
/* ---- the boot screen ---------------------------------------------------- * * Two frames, one look. index.html's own card (.lb-boot) paints from the first * byte and stands until the socket is up; then Suramadu replaces it with a * dialog it builds itself. Styling them together is what makes the handover * invisible - before this they were a wordmark and then a sentence in a box, * which read as two different products in a row. * * The dialog is not ours to write, so everything below is reached through the * five boxes upstream leaves: the card, the empty header, the content div and * its ::before, the spinner's two dots, and the one <p>. Making the content div * a flex column is what buys `order`, and `order` is what puts the mark above * the text without touching the markup. * * Why :has() rather than plain .ws-dialog: upstream builds every dialog from * the same template, including the ones with buttons and no spinner - the * reconnect and error cards. Those want the ordinary card, not a badge with a * status line under it. The one thing that separates them is whether the * injected content put a spinner in, so that is what this selects on. It has to * be `> .ws-spinner`, a direct child of the content div: the template also * carries a spinner inside #ajaxProgress, which would otherwise match on every * dialog and undo the distinction. A browser without :has() support falls back * to the plain card, which is the old behaviour rather than a broken one. */
:root .suramadu-element .lb-boot,:root .suramadu-element .suramadu-element-content .lb-boot,:root .suramadu-element .suramadu-element-content .ws-dialog:has(.ws-dialog-content > .ws-spinner) { max-width: 300px; padding: 26px 24px 24px; border: 0; border-top: 2px solid var(--lb-brand); border-radius: 0; box-shadow: none; background-color: var(--lb-panel); clip-path: var(--lb-notch);}
/* Upstream gives .ws-header 20px of padding and a bottom rule. On this dialog it holds nothing, so that is a divider drawn above nothing. */:root .suramadu-element .ws-header:empty,:root .suramadu-element .suramadu-element-content .ws-header:empty { display: none;}
:root .suramadu-element .lb-boot .ws-login-content,:root .suramadu-element .suramadu-element-content .lb-boot .ws-login-content,:root .suramadu-element .suramadu-element-content .ws-dialog-content:has(> .ws-spinner) { display: flex; flex-direction: column; align-items: center; padding-bottom: 0;}
/* The mark. An <img> in the frame we write, a background in the one we do not; `content: ""` on the <img> would blank the image rather than decorate it. */:root .lb-mark { order: 1; display: block; width: 84px; height: 105px;}
:root .suramadu-element .suramadu-element-content .ws-dialog-content:has(> .ws-spinner)::before { content: ""; order: 1; display: block; width: 84px; height: 105px; background: url("insignia.svg") center / contain no-repeat;}
/* The padding-left is optical, not spacing: letter-spacing is added after the last letter too, so centred caps sit half a space left of the true centre. */:root .lb-status,:root .suramadu-element .suramadu-element-content .ws-dialog-content:has(> .ws-spinner) #commonDialog-description { order: 2; margin: 16px 0 0; padding-left: 0.22em; font-family: var(--lb-display); font-weight: 700; font-size: 11px; line-height: 1.55; text-transform: uppercase; letter-spacing: 0.22em; text-wrap: balance; color: var(--lb-brand);}
/* Under the text, not over it: the wait is a caption here, not the subject. */:root .suramadu-element .lb-boot .ws-spinner,:root .suramadu-element .suramadu-element-content .lb-boot .ws-spinner,:root .suramadu-element .suramadu-element-content .ws-dialog-content:has(> .ws-spinner) > .ws-spinner { order: 3; width: 20px; height: 20px; margin: 16px auto 2px;}
/* The first frame has to carry the spinner's own geometry, because upstream only ever declares it at .suramadu-element-content depth - and that wrapper does not exist yet. The loader makes it, by detaching this markup and re-appending it inside one, which is also why the rules above are written at both depths. Until it runs, an unstyled dot is a 0x0 box: the card sat there with no spinner in it at all, for as long as the bundle took to arrive.
The keyframes are upstream's. @keyframes are not scoped, so style.css having defined sk-rotate and sk-bounce is enough to name them here. */:root .suramadu-element .lb-boot .ws-spinner { position: relative; text-align: center; animation: sk-rotate 2s infinite linear;}
:root .suramadu-element .lb-boot .ws-spinner-dot-1,:root .suramadu-element .lb-boot .ws-spinner-dot-2 { position: absolute; top: 0; display: inline-block; width: 60%; height: 60%; border-radius: 100%; animation: sk-bounce 2s infinite ease-in-out;}
:root .suramadu-element .lb-boot .ws-spinner-dot-2 { top: auto; bottom: 0; animation-delay: -1s;}
/* Below 480px upstream forces `font-size: 14px !important` on every <p> in the dialog. Specificity has no answer to that, and this file is not allowed one - tests/shell/test-theme-css.sh forbids !important, on the grounds that needing it means the selector is wrong. Here the selector is not wrong; upstream simply wins. So the second frame goes to 14px on a phone whatever we do, and the only way the two frames stay the same size is for the one we control to follow. The caps line wraps to two at that size, which is why it is balanced above. */@media only screen and (max-width: 480px) { :root .lb-status { font-size: 14px; }}
/* ---- upstream's AGPL source offer --------------------------------------- * * 26.4.7 added a fixed source-notice to the war's index.html, styled inline * for a light page. We serve our own copy of that page and carry the notice * across, so the styling has to come from here instead - upstream's inline * block is not in our copy, and its greys are unreadable on --lb-bg. * * Not scoped under .suramadu-element: the notice is a sibling of it, outside * the app's own tree, so :root is the whole prefix it needs. */
:root .source-notice { position: fixed; right: 0.5rem; bottom: 0.4rem; z-index: 2147483000; font-family: var(--lb-font); font-size: 11px; line-height: 1.4; color: var(--lb-muted); background-color: color-mix(in srgb, var(--lb-panel) 82%, transparent); border: 1px solid var(--lb-line); border-radius: var(--lb-radius); padding: 2px 7px;}
:root .source-notice a:link,:root .source-notice a:visited { color: var(--lb-muted); text-decoration: underline; text-underline-offset: 2px;}
:root .source-notice a:hover,:root .source-notice a:focus,:root .source-notice a:active { color: var(--lb-accent);}