@media (prefers-color-scheme: light) { :root { --color-fg-default: #000; --color-fg-disabled: #666; --color-fg-muted: #666; --color-fg-accent: #0969da; --color-fg-custom: #666; --color-fg-menu: #333; --color-bg-default: #fff; --color-bg-header: #eee; --color-bg-title: #ddd; --color-bg-dialog: #fff; --color-bg-selected: #eef; --color-bg-focused: #ccf; --color-bg-button: #f0f0f0; --color-bg-dbutton: #f4f4f4; --color-bg-hover: #d8d8d8; --color-bg-input: #fff; --color-br-default: #ccc; --color-br-weak: #eee; --color-br-strong: #777; --color-br-focused: #66f; --color-br-input: rgba(0,0,0,0.5); --color-br-disabled: #e0e0e0; --color-br-menu: #ccc; --color-br-submenu: #eee; --color-dg-wait: #080; --color-st-txtblue: #00f; --color-st-txtgreen: #080; --color-st-txtred: #f00; --color-nt-error: #f88; --color-nt-warning: #ff8; --color-nt-inform: #8f8; --color-sh-default: rgba(0,0,0,0.5); --color-lk-default: #00e; --color-lk-visited: #551a8b; } } @media (prefers-color-scheme: dark) { :root { --color-fg-default: #c9d1d9; --color-fg-disabled: #484f58; --color-fg-muted: #8b949e; --color-fg-accent: #2f81f7; --color-fg-custom: #aaadbb; --color-fg-menu: #9ca6b1; --color-bg-default: #0d1117; --color-bg-header: #161b22; --color-bg-title: #262b32; --color-bg-dialog: #111a24; --color-bg-selected: #161b22; --color-bg-focused: #161b33; --color-bg-button: #21262d; --color-bg-dbutton: #21262d; --color-bg-hover: #30363d; --color-bg-input: #0d1117; --color-br-default: #30363d; --color-br-weak: #21262b; --color-br-strong: #40464d; --color-br-focused: #f78166; --color-br-input: rgba(240,246,252,0.1); --color-br-disabled: #30363d; --color-br-menu: #505860; --color-br-submenu: #30363d; --color-dg-wait: #c58208; --color-st-txtblue: #4040ff; --color-st-txtgreen: #009300; --color-st-txtred: #f22; --color-nt-error: #da3633; --color-nt-warning: #e7a100; --color-nt-inform: #3fb950; --color-sh-default: rgba(255,255,255,0.3); --color-lk-default: #0050c0; --color-lk-visited: #606090; } } html, body, div, span, h1, h2, h3, h4, h5, ul, li, fieldset, form, label, legend, button, table, caption, tbody, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; } html { color: var(--color-fg-default); background-color: var(--color-bg-default); } body { margin: 0.5em; } button, select, textarea, input { padding: 0.3em .5em; color: var(--color-fg-default); border: .07em solid var(--color-br-input); border-radius: 0.4rem; } button, select { background-color: var(--color-bg-button); } button:hover, select:hover { background-color: var(--color-bg-hover); } button:disabled, select:disabled{ background-color: var(--color-bg-dbutton); } button:disabled, select:disabled, textarea:disabled, input:disabled { color: var(--color-fg-disabled); border-color: var(--color-br-disabled); } a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 2px solid var(--color-fg-accent); outline-offset: -2px; } textarea, input { background-color: var(--color-bg-input); } a { color: var(--color-lk-default); } a:visited { color: var(--color-lk-visited); } h1 { font-size: 1.4em; margin: .35rem; display: inline-block; } h2 { font-size: 1.4em; margin: 1em 0 .2em; } h3 { font-size: 1.3em; margin: 1em 0 .2em; } h4, h5 { margin: 0 0 0.5rem 0; text-transform: uppercase; } h4:not(:first-child), .info-block { margin-top: 1rem; } fieldset { display: block; margin-bottom: 0.7em; padding: 0.7em; border: 0.07rem solid var(--color-br-strong); } legend { margin: 0; padding: 0 0.2em; } hr { border: 0; border-top: 0.07em solid var(--color-br-menu); } textarea.description { height: 7em; } #stat-block ul { display: flex; justify-content: center; column-gap: 1em; margin: .2em 0; padding: .1em; list-style-type: none; border-top: 0.07em solid var(--color-br-default); border-bottom: 0.07em solid var(--color-br-default); } #stat-block .stat-msg { display: none; } .main-table .table-body .table-cell { border-top: 0.1em solid var(--color-br-weak); } .main-table .table-body .table-row.selected { background-color: var(--color-bg-selected); color: var(--color-fg-default); } .main-table.focused .table-body .table-row.selected { background-color: var(--color-bg-focused); } .domains.table .table-cell.fqdn { overflow-wrap: anywhere; } .unseen, .custom-value .setting-value { font-weight: bold; color: var(--color-fg-custom); } @media screen and (min-width:30em) { h1 { font-size: 2em; margin: 0 .5rem; } } @media screen and (min-width:35em) { textarea.description { min-width: 25em; } input[type=number] { width: 4em; } } @media screen and (min-width:46em) { #stat-block { float: right; margin-bottom: 0.5rem; } #stat-block ul { display: block; margin: 0; padding: 0; border: none; } #stat-block li div { display: inline-grid; margin: 0.5em; width: 6em; height: 6em; text-align: center; font-size: 0.7em; border: 0.07em solid var(--color-br-strong); border-radius: 0.4em; } #stat-block .stat-msg { display: inline; margin: 0 1px; } .stat-val { display: block; height: 50%; line-height: 180%; font-size: 1.8em; font-weight: bold; } } @media screen and (max-width:40em) { .root-list-block .db-type, .list-container .mailbox-host, .list-container .dbtable-size, .small-cards .table-header { display: none; } .domains.table, .domains .table-header, .domains .table-body, .domains .table-cell, .small-cards.table, .small-cards .table-body, .small-cards .table-row { display: block; } .small-cards .table-cell { display: flow-root; } .domains .table-row { display: grid; grid-template-columns: 2em 1fr 1fr; } .domains .table-cell.descr { grid-column: 1 / 4; grid-row: 2; border: none; text-align: center; border-top: none; } .domains .table-body .table-cell.descr { border-left: 0.2em solid #0000; } .domains .table-body .table-row.focused .table-cell.descr, .small-cards .table-body .table-row.focused { border-left: 0.2em solid var(--color-br-focused); } .small-cards .table-body .table-row { border-left: 0.2em solid #0000; } .small-cards .table-body .table-cell { text-align: right; max-width: none; margin: 0 1em; } .small-cards .table-body .table-cell > div { margin-left: auto; } .small-cards .table-body .table-cell::before { content: attr(data-label); float: left; text-align: left; font-weight: bold; font-style: normal; padding-right: .5em; } .small-cards .table-body .table-cell:first-child { padding-top: 1em; } .small-cards .table-body .table-cell:last-child { border-bottom: 0.13em solid var(--color-br-weak); } .small-cards .table-body .table-row .table-cell { border-left: none !important; } .domains .table-body .table-row.selected, .domains.focused .table-body .table-row.selected, .small-cards .table-body .table-row.selected, .small-cards.focused .table-body .table-row.selected { background-color: unset; } .small-cards .table-row.colspanned .table-cell { text-align: center; border: none !important; } .custom-value .setting-value { font-weight: normal; } } @media screen and (max-width:60em) { .report-list .table-cell.report-id { display: none; } } .bottom-border { border-bottom: 0.07rem solid var(--color-br-strong); } .popup-menu ul { display: block; margin: 0; padding: 0; list-style-type: none; } #stat-block li { margin: 0; padding: 0; display: inline-flex; } .disabled { color: #888; cursor: default; pointer-events: none; } .round-border { border: 0.07em solid var(--color-br-strong); border-radius: 0.4em; } .wait-message { margin: 0.3em; } .panel-container .wait-message, .panel-container .error-message { margin: 1em; } .dialog .wait-message { color: var(--color-dg-wait); text-align: center; } .dialog .error-message { text-align: center; } .hidden { display: none !important; } #main-block { clear: both; } .error-message { color: var(--color-st-txtred); margin: 0.3rem; } .main-table-container { position: fixed; overflow-x: hidden; overflow-y: auto; top: 6rem; left: 0.5rem; right: 0.5rem; bottom: 0.5rem; border: 0.1rem solid var(--color-br-weak); border-radius: 0.4rem; } .main-table { color: var(--color-fg-muted); text-align: left; border-spacing: 0; width: 100%; } .subtable { font-size: 90%; border: 0.1rem solid var(--color-br-weak); border-radius: 0.4rem; } .main-table .table-header { position: sticky; top: 0; } .main-table .table-header .table-cell { position: relative; background-color: var(--color-bg-header); } .main-table .table-cell { padding: .3em 1em; } .main-table .table-body .table-row { cursor: pointer; } .main-table .table-body .table-row:not(.colspanned):hover, .main-table .table-row.virtual-item:hover .table-cell { background-color: var(--color-bg-selected); } .focused { outline: none; } .main-table .table-body .table-cell:first-child { border-left: 0.2em solid #0000; } .main-table .table-body .table-row.focused .table-cell:first-child { border-left: 0.2em solid var(--color-br-focused); } .summary-report { overflow-y: auto; } .report-table { font-size: 90%; border-spacing: 0; border-collapse: collapse; } .custom-value .setting-value, .report-table caption { font-style: italic; } .report-table th { min-width: 4em; padding: .3em .6em; } .report-table td { padding: .3em; text-align: right; } .report-table td:first-child { text-align: left; padding-right: 1em; } .report-table td, .report-table th { border: 0.1rem solid var(--color-br-default); } .state-red .state-text { color: var(--color-st-txtred); } .state-red .state-background { background-color: #f00; } .state-green .state-text { color: var(--color-st-txtgreen); } .state-green .state-background { background-color: #080; } .state-yellow .state-text { color: #f80; } .state-yellow .state-background { background-color: #f80; } .state-gray .state-text { color: #888; } .state-gray .state-background { background-color: #888; } .state-blue .state-text { color: var(--color-st-txtblue); } .state-blue .state-background { background-color: #00f; } .panel-container { margin: 0.5rem 0; padding: 1rem; } .block-item-column { display: flex; margin: .2rem 0; } .block-item-column .value { margin-left: 0.5em; } .root-list-block, .block-list-item { display: flex; gap: .5rem; align-items: center; padding: 0 .5rem; } .root-list-block { min-height: 4rem; font-size: 1.3rem; cursor: pointer; } .block-list-item { height: 3.25rem; background-color: var(--color-bg-header); margin: 0 0 1rem 0; } .list-container { margin: 1rem 0.8rem 0 1.5rem; } .title-item-wrap, .db-type, .db-location, .dbtable-records, .dbtable-size, .mailbox-host, .mailbox-location { flex: 1; } .message-item, .directory-location { flex: 2; } .status-indicator { width: 1rem; min-width: 1rem; margin: auto 0.5rem auto 0; height: 1rem; border-radius: 50%; background: radial-gradient(circle farthest-corner at 35% 35%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)); } .root-list-block .status-indicator { width: 1.2rem; height: 1.2rem; } .db-menu-button { position: relative; width: 1.7em; } .db-menu-button span[role="button"] { font-weight: bold; color: #888; user-select: none; } .db-menu-button>div>span:hover { color: #00f; } .source-check-button { margin-right: 0.7em; } .popup-menu { position: absolute; top: 130%; left: -5.3em; width: 7em; text-align: center; background-color: var(--color-bg-default); } .popup-menu::after { content: ""; display: block; position: absolute; top: -0.3em; bottom: auto; right: auto; left: 5.4em; width: 0; border-width: 0 0.4em 0.4em; border-style: solid; border-color: var(--color-bg-default) transparent; } .popup-menu::before { content: ""; display: block; position: absolute; top: -0.4em; bottom: auto; right: auto; left: 5.4em; width: 0; border-width: 0 0.4em 0.4em; border-style: solid; border-color: var(--color-br-strong) transparent; } .popup-menu li { margin: 0.2em 0 0.2em 0; } .popup-menu li:hover { color: #00f; } .report-result { display: inline-block; border-color: var(--color-br-strong); border-style: solid; border-width: 0.07em; border-radius: 0.4em; padding: 0.2em; margin: 0 0.2em 0 0.2em; } .main-table .report-result { font-size: 75%; } .report-result-pass { color: var(--color-st-txtgreen); } .report-result-unknown { color: #888; } .report-result-fail { color: var(--color-st-txtred); } .report-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; background-color: var(--color-bg-default); text-align: center; transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1); overflow: auto; } .report-modal > .report-header { position: sticky; top: 0; padding: 1rem; cursor: pointer; border-bottom: solid 0.1rem var(--color-br-default); background-color: var(--color-bg-title); } .report-modal > .report-header > .header-text { padding: 0.5rem; cursor: auto; } .report-record > .header { padding: 0.4em 0; border-bottom: solid 0.1rem var(--color-br-default); border-radius: 0.3em 0.3em 0 0; background-color: var(--color-bg-header); } .report-modal > .body { padding: 1rem; } .report-modal.report-hidden { top: 100%; } .report-modal .close-btn { position: relative; display: inline-block; padding: 0.7em 1.5em; color: var(--color-fg-default); background-color: var(--color-bg-button); border: solid 0.07rem #888; border-radius: 1.8em; cursor: pointer; transition: all .4s ease; } .report-modal .content { width: 50rem; max-width: 100%; margin: 0 auto; } .report-modal .close-btn:hover { box-shadow: 0 3px 15px var(--color-sh-default); } .report-records { margin-top: 1rem; padding-top: 1rem; border-top: solid 0.1rem var(--color-br-default); } .report-record { margin: 0 0 1rem 0; border-color: var(--color-br-default); } .report-item { display: inline-flex; width: 98%; padding: .3em 0; } .report-record .report-item { min-height: 1.9em; } .report-record .report-item:not(:last-child) { border-bottom: 0.1em solid var(--color-br-weak); } .report-item .title { min-width: 30%; } .value.rows { display: flex; flex-direction: column; row-gap: .3em; } .report-item .title, .report-item .value { text-align: left; margin: auto 0; } .table-cell.report-id, .table-cell.setting-value { max-width: 15em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .options-button { color: #888; font-size: 80%; margin-left: 0.3em; cursor: pointer; } button.options-button { color: inherit; margin-left: 1em; } .options-button:hover, .options-button.active { color: #080; } .options-block { display: flex; align-items: center; } .buttons-block { display: flex; gap: .5em; margin-top: .5em; } .table-cell.cell-status { width: 1em; } .virtual-item, .nodata { color: #888; font-style: italic; } .left-titled { display: grid; grid-template-columns: auto 1fr; row-gap: .3em; column-gap: 1em; align-items: center; } .vertical-content { display: flex; flex-direction: column; gap: 1em; } .vertical-content > * { margin-top: 0; margin-bottom: 0; } .about .vertical-content { max-width: 30em; }