@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/etc/roboto.ttf) format('truetype'); } @font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/etc/mono.ttf) format('truetype'); } @media print { .NoPrint { display: none !important; } .OnPrint { display: initial !important; } .PgBreak { page-break-before: always; } } :root { --font-larger: 18pt; --font-large: 16pt; --font-normal: 14pt; --font-small: 12pt; --font-smaller: 10pt; } .font-larger { font-size: var(--font-larger); } .font-large { font-size: var(--font-large); } .font-normal { font-size: var(--font-normal); } .font-small { font-size: var(--font-small); } .font-smaller { font-size: var(--font-smaller); } #body { margin: 0; font: var(--font-normal) 'Roboto', sans-serif; color: var(--fg-body); background-color: var(--bg-body); } a, a:visited { color: var(--fg-highlight); text-decoration: none; cursor: pointer; } a:hover { text-decoration: underline; } img { max-width: 100%; margin: auto; } hr { margin: 1.1em 0; border-color: var(--bg-dim); } button, label { cursor: pointer; font-weight: bold; display: block; } button { font-family: inherit; font-size: inherit; padding: 0.45em 1em; margin: 0.5em; border: 1px solid var(--bg-dim); border-radius: 0.25em; display: inline-block; background-color: transparent; white-space: pre; color: var(--fg-body); } button:hover { border-color: unset; background-color: rgba(0, 0, 0, 0.5); } button:disabled { border-color: var(--fg-disabled) !important; background-color: transparent !important; color: var(--fg-dim); cursor: inherit; } button.hold { --hold-pct: 0%; --hold-color: rgba(192, 0, 0, 0.5); background: linear-gradient(90deg, var(--hold-color) 0 var(--hold-pct), transparent var(--hold-pct) 100%); } select option { font-family: inherit; font-size: inherit; background: rgba(0, 0, 0, 0.8); } option:checked { color: var(--fg-bright); background: var(--bg-highlight); } select { padding: 0.45em; } input:not([type=color]), textarea { padding: 0.5em; } input:not([type=color]), textarea, select { color: inherit; background-color: var(--bg-input); font-family: inherit; font-size: inherit; display: inline-block; margin: 0.2em 0; border: 2px transparent; border-bottom: 1px solid var(--bg-dim); border-radius: 0.25em; } input:focus:not([type=color]), textarea:focus, select:focus { outline: none !important; border-color: var(--fg-highlight); } input:disabled:not([type=color]), textarea:disabled, select:disabled { border-bottom: 1px solid #444; background-color: transparent; } input[type="color"] { border: none; padding: 0; background-color: inherit; height: 2.2em; } section { border-top: 1px solid var(--fg-dim); margin-bottom: 2em; } h3 { background-color: var(--bg-bright); color: var(--fg-bright); padding: 1em; margin: 0 0 -1px 0; border-bottom: 1px solid var(--bg-dim); } small { font-size: var(--font-smaller); display: block; margin-top: 0.5em; color: var(--fg-body); } [hidden] { display: none !important; } [data-trap-dblclick], [data-trap-click], .Pointer { cursor: pointer; } [data-trap-dragstart] { cursor: move; } .VBox { display: flex; flex-flow: column nowrap; } .HBox { display: flex; flex-flow: row nowrap; align-items: center; } .VGrid { display: flex; flex-flow: column wrap; align-items: flex-start; } .HGrid { display: flex; flex-flow: row wrap; align-items: flex-start; } .Grow { flex-grow: 2; } .Third { width: 33%; } .Half { width: 50%; } .Full { width: 100%; } .Indent { padding: 0 1em; } .Inset { border: 4px inset var(--bg-bright); } .Around { justify-content: space-around; } .Between { justify-content: space-between; } .Evenly { justify-content: space-evenly; } .Left { text-align: left; } .Right { text-align: right; } .Center { text-align: center; justify-content: center; } .Middle { margin-left: auto; margin-right: auto; } .Pre { white-space: pre; } .NoWrap { white-space: nowrap; } .Relative { position: relative; } .Absolute { position: absolute; } .Modal { height: 100%; width: 100%; position: fixed; top: 0; left: 0; z-index: 100; } .Monospace { font: var(--font-normal) 'Roboto Mono', monospace; } code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:0 0;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8292a2}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help} .xterm { position: relative; user-select: none; -ms-user-select: none; -webkit-user-select: none; } .xterm.focus, .xterm:focus { outline: none; } .xterm .xterm-helpers { position: absolute; top: 0; z-index: 5; } .xterm .xterm-helper-textarea { padding: 0; border: 0; margin: 0; position: absolute; opacity: 0; left: -9999em; top: 0; width: 0; height: 0; z-index: -5; white-space: nowrap; overflow: hidden; resize: none; } .xterm .composition-view { background: #000; color: #FFF; display: none; position: absolute; white-space: nowrap; z-index: 1; } .xterm .composition-view.active { display: block; } .xterm .xterm-viewport { background-color: #000; overflow-y: scroll; cursor: default; position: absolute; right: 0; left: 0; top: 0; bottom: 0; } .xterm .xterm-screen { position: relative; } .xterm .xterm-screen canvas { position: absolute; left: 0; top: 0; } .xterm .xterm-scroll-area { visibility: hidden; } .xterm-char-measure-element { display: inline-block; visibility: hidden; position: absolute; top: 0; left: -9999em; line-height: normal; } .xterm { cursor: text; } .xterm.enable-mouse-events { cursor: default; } .xterm.xterm-cursor-pointer, .xterm .xterm-cursor-pointer { cursor: pointer; } .xterm.column-select.focus { cursor: crosshair; } .xterm .xterm-accessibility, .xterm .xterm-message { position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 10; color: transparent; } .xterm .live-region { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .xterm-dim { opacity: 0.5; } .xterm-underline { text-decoration: underline; } .xterm-strikethrough { text-decoration: line-through; } .xterm-screen .xterm-decoration-container .xterm-decoration { z-index: 6; position: absolute; } .app_fixed { position: fixed; left: 0; right: 0; padding: 0.25em 0.5em; background-color: inherit; } .app_bottom { bottom: 0; } #app_title { top: 0; height: 1.2em; background-color: var(--bg-dim); z-index: 100; } #app_main { --app-height: calc(100vh - calc(1.7em * 2)); padding: 1.7em 0; height: var(--app-height); overflow: auto; } #app_log { height: 1.2em; bottom: 0; border-top: 1px solid var(--bg-dim); font: var(--font-small) 'Roboto Mono', monospace; overflow: hidden; text-overflow: ellipsis; z-index: 100; } @media print { #app_title { display: none; } #app_main { overflow: visible; } #app_log { display: none; } :root { zoom: 0.7; } } .app_module_standard { --module-height: calc(var(--app-height) - 2vh); padding: 1vh 2vw; } .app_module_fullsize { --module-height: var(--app-height); height: 100%; } .app_menu_body { font-size: var(--font-small); margin: 0.1em 0; padding: 0.5em 0; border-radius: 0.5em; border: 2px 0px solid var(--bg-bright); width: fit-content; position: fixed; color: var(--fg-bright); background-color: var(--bg-menu); max-height: 50vh; overflow-y: auto; cursor: pointer; } .app_menu_label { padding: 0.5em 1.8em 0.25em 0.8em; } .app_menu_item { color: var(--fg-dim); padding: 0.5em 1.8em 0.5em 0.9em; } .app_menu_sep { height: 0; margin: 0.25em 0; } .app_menu_sep::after { content: "\00a0"; } .app_menu_active { color: var(--fg-normal); } .app_menu_active:hover { background-color: var(--bg-body); } .app_loading_full { margin: calc(50vh - calc(var(--loading-size)/2)) auto; } .app_loading, .app_loading_container { position: relative; height: var(--loading-size); width: var(--loading-size); border-radius: 100%; } .app_loading { border: 2px solid transparent; border-color: transparent var(--fg-highlight) transparent var(--fg-highlight); animation: rotate-loading 1.7s linear 0s infinite normal; transform-origin: 50% 50%; } .app_loading_text { animation: loading-text-opacity 3s linear 0s infinite normal; color: var(--fg-bright); font-weight: bold; padding-top: calc(var(--loading-size) * 0.45); opacity: 0.5; position: absolute; text-align: center; text-transform: uppercase; top: 0; width: var(--loading-size); height: var(--loading-size); background-image: url(/etc/logo.png); background-size: var(--loading-size) var(--loading-size); background-repeat: no-repeat; } @keyframes rotate-loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes loading-text-opacity { 0% { opacity: 0.4; } 40% { opacity: 0.95; } 50% { opacity: 1; } 60% { opacity: 0.95; } 100% { opacity: 0.4; } } bc-code { position: relative; } .Code.Edit, .Code.Highlight { margin: 0; padding: 0; border: 0; width: 100%; height: 12lh; white-space: nowrap; tab-size: 4; } .Code.Edit { color: transparent; background: transparent; caret-color: white; resize: auto; overflow: auto; position: absolute; top: 0; left: 0; z-index: 1; } .Code.Highlight { position: relative; display: inline-block; overflow: hidden; z-index: 0; } .Code.Monospace { font: var(--font-small) 'Roboto Mono', monospace; } .com_menu_item { background-color: var(--bg-bright); border-radius: 0.25em; padding: 0.75em; margin: 0.5em; } .com_menu_item:hover { color: var(--fg-bright); background-color: var(--bg-highlight); } .com_menu_sep::after { content: ">"; color: var(--fg-dim); font-weight: normal; } .com_menu_name { white-space: nowrap; } .com_menu_name:first-child { color: var(--fg-dim); } .com_menu_name:last-child { color: var(--fg-bright); } .com_select { background-color: var(--bg-highlight) !important; } .dialog_main { position: relative; top: 10vh; background-color: var(--bg-bright); margin: auto; min-width: 800px; max-width: 80vw; width: fit-content; box-shadow: 0 0 12px 12px rgb(0 0 0 / 50%); } .dialog_title { border-top: 1px solid var(--fg-highlight); font-weight: bold; color: var(--fg-bright); background-color: var(--bg-highlight); padding: 1em; } .dialog_content { padding: 0.5em; background-color: var(--bg-body); color: var(--fg-bright); } .dialog_body { padding: 1em; max-height: 65vh; overflow: auto; } .dialog_buttons { justify-content: space-between; font-size: var(--font-small); } bc-section + bc-section { margin-top: 2em; } bc-form { margin: 1vh 2vw; } bc-form.editor_dialog { height: 0; margin: 0; } .header { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; background-color: var(--bg-bright); font-size: var(--font-normal); border-bottom: 1px solid var(--bg-dim); border-top: 1px solid var(--bg-dim); } .header_controls { font-size: var(--font-small); padding-right: 1em; } .header_search.important { border: none; background-color: inherit; border-bottom: 1px solid var(--bg-body); padding-top: 0.4em; width: 25vw; } .editor_table_masked > tr[hidden] { display: table-row !important; pointer-events: none; user-select: none; filter: brightness(0.65); } .editor_table_image { max-width: 100px; max-height: 100px; } .editor_table_container { max-height: 25em; overflow-y: auto; resize: vertical; line-height: 1.7em; --editor-border-page: 4px; } .editor_table_container[paginate="off"] { max-height: unset; --editor-border-page: 0px; } .editor_table_container[style*="height"] { max-height: unset; min-height: 10em; --editor-border-page: 4px; } .editor_table { font-size: inherit; border-spacing: 0; width: 100%; text-align: left; margin-bottom: 1em; } .editor_tr { --editor-border: 0px; margin: 0; padding: 0; height: 2.5em; background-color: var(--bg-body); } .editor_tr:hover { background-color: var(--bg-bright); } .editor_tr:nth-child(10n+10 of :not([hidden])) { --editor-border: var(--editor-border-page); } .editor_tr_highlight { background-color: var(--bg-highlight) !important; } .editor_td { margin: 0; padding: 0.25em 0.1em 0.25em 1.1em; overflow: auto; text-overflow: ellipsis; font-family: 'Roboto Mono', monospace; border-bottom: var(--editor-border) groove var(--bg-bright); } .editor_th { background-color: var(--bg-body); border-top: 1px solid var(--fg-disabled); border-bottom: 1px solid var(--fg-disabled); padding: 0.5em 0; user-select: none; resize: horizontal; overflow: auto; text-overflow: ellipsis; z-index: 2; position: sticky; top: 0; } .editor_th_first { width: 2em; padding-left: 0.1em; resize: none; text-align: center; } .editor_td_first { width: 2em; padding-left: 0.2em; resize: none; text-align: center; } .editor_th[data-sort-order="asc"] { background: linear-gradient(var(--bg-bright), var(--bg-body)); border-top: 1px solid var(--fg-dim); } .editor_th[data-sort-order="desc"] { background: linear-gradient(var(--bg-body), var(--bg-bright)); border-bottom: 1px solid var(--fg-dim); } .editor_b { border-left: 1px solid var(--fg-disabled); padding-left: 1em; } .editor_b_first { border-left: none; padding-left: 0; } .editor_label { color: var(--fg-label); } .editor_p, .editor_span, .editor_em { display: block; margin: 0.2em 0 0 0; font-size: var(--font-smaller); color: var(--fg-body); max-width: 800px; } .editor_p { margin-bottom: 0.25em; } .editor_span { font-style: italic; color: var(--fg-help); } .editor_em { font-weight: normal; color: var(--fg-red); } .editor_main { max-width: 300px; } .editor_preview { margin: 0.25em 0; background: var(--bg-bright); overflow: hidden; height: 80px; border-radius: 0.4em; max-width: 320px; } .editor_controls { padding: 1em; font-size: var(--font-small); } .editor_save { background: var(--bg-highlight); } .editor_cancel { background: var(--bg-dim); } bc-input { padding: 1em 1em 0 1em; color: var(--fg-bright); font-size: var(--font-small); --width: 32ch; } .bc_input_table { padding: 0; } .editor_input_text, .editor_input_search, .editor_input_url, .editor_input_email, .editor_input_password { min-width: 8ch; max-width: 640px; width: var(--width); resize: horizontal; } .bc_input_internal:required:focus:valid { background-color: var(--bg-valid) !important; border-color: var(--fg-valid) !important; } .bc_input_internal:focus:invalid { background-color: var(--bg-invalid) !important; border-color: var(--fg-invalid) !important; } .bc_input_internal:invalid ~ .editor_span, .bc_input_internal:state(invalid) ~ .editor_span { color: var(--fg-yellow); } .info_form { margin: 0; padding: 0.5em 0.75em; border: 1px solid var(--bg-dim); border-top: none; border-radius: 0.25em; } .data_copy { cursor: pointer; font-size: var(--font-small); } .data_copy:active { font-size: var(--font-normal); color: var(--fg-valid); transition: color 0.25s ease-in; } .info_panel { background-color: var(--bg-dim); padding: 1em 0; } .info_card { padding: 0.5em 1em; width: 30%; min-width: 30%; border-right: 1px solid var(--fg-bright); white-space: nowrap; } .info_card:nth-child(3n) { border-right: none; } .info_label { color: var(--fg-dim); margin-bottom: 0.2rem; } .info_data { color: var(--fg-bright); overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; } .info_status { display: none; } #media_dialog { max-width: 70vh; } #media_search { width: 100%; } #media_grid { max-height: 35vh; overflow: auto; color: #aaa; } #media_grid > div { margin: 0.3em; padding: 0.2em; } #media_grid > div:hover { box-shadow: rgba(0, 0, 0, 0.7) 0px 0.2em 0.3em 0px, rgba(0, 0, 0, 0.6) 0px 0.1em 0.2em 0px; color: #fff; } bc-plot { width: 540px; margin: 1em 0; } .HBox.Tab { border: 1px solid var(--fg-gray); background-color: var(--bg-menu); } .Tab.Link { border-left: 1px solid var(--fg-gray); border-right: 1px solid var(--fg-gray); text-align: center; cursor: pointer; height: 1.7em; padding: 0.5em 4em 0 4em; } .Tab.Link:hover { color: var(--fg-highlight); } .Tab.Link.Open { font-weight: bold; color: var(--fg-highlight); background-color: var(--bg-dim); border-bottom: 3px inset var(--fg-highlight); }