software/hoardy-web/./extension/page/main.css

Passively capture, archive, and hoard your web browsing history, including the contents of the pages you visit, for later offline viewing, mirroring, and/or indexing. Your own personal private Wayback Machine that can also archive HTTP POST requests and responses, as well as most other HTTP-level data.

Files

Raw Source

Contents

:root {
    color-scheme: light dark;
    --text-background: inherit;
    --text-border-color: #000000;
    --text-color: inherit;
    --text-inactive-background: var(--untoggle-background);
    --text-inactive-border-color: var(--untoggle-border-color);
    --text-inactive-color: inherit;
    --code-background:  #00000010;
    --untoggle-background: #cfcfd855;
    --untoggle-border-color: #cfcfd8;
    --untoggle-background-good: #94f89455;
    --untoggle-border-color-good: #cfd8cf;
    --untoggle-background-bad: #f8949455;
    --untoggle-border-color-bad: #d8cfcf;
    --toggle-dot-background: #ffffff;
    --toggle-dot-border-color: #000000;
    --toggle-background: #f8f850;
    --toggle-border-color: #f49405;
    --toggle-background-good: #02bb50;
    --toggle-border-color-good: #05943e;
    --toggle-background-bad: #fb3230;
    --toggle-border-color-bad: #94023e;
    --help-btn-background: #aaaaaa;
    --help-btn-border-color : #bbbbbb;
    --help-btn-color: #fafafa;
    --help-btn-checked-background: #666666;
    --help-btn-checked-border-color : #888888;
    --help-btn-checked-color: #ffffff;
    --help-tip-background:  #fffffa;
    --help-tip-border-color: #aaaaaa;
    --help-tip-text: #000000;
    --target-color: #ffffff;
    --target-background-1: #ffaa00;
    --target-background-2: #ffaa0080;
    --target-internal: #aa2222;
    --target-external: #aa4400;
    --attention-background-1: #e02020;
    --attention-background-2: #ffffff;
    --attention-border-color: var(--attention-background-1);
}

.colorblind {
    --untoggle-background-good: #9494f855;
    --untoggle-border-color-good: #cfcfd8;
    --toggle-background-good: #0250bb;
    --toggle-border-color-good: #053e94;
}

@media (prefers-color-scheme: dark) {
    :root {
        --text-border-color: #ffffff;
        --text-inactive-background: inherit;
        --text-inactive-border-color: #505050;
        --text-inactive-color: #505050;
        --code-background:  #ffffff20;
        --untoggle-background: #515138;
        --untoggle-background-good: #94f894;
        --untoggle-background-bad: #f89494;
        --help-btn-background: #333333;
        --help-btn-border-color : #666666;
        --help-btn-color: #aaaaaa;
        --help-btn-checked-background: #aaaaaa;
        --help-btn-checked-border-color : #bbbbbb;
        --help-btn-checked-color: #060606;
        --help-tip-background: #000005;
        --help-tip-text: #ffffff;
        --attention-background-2: #000000;
    }

    body {
        color: #fff;
        background-color: #0c0b12;
    }
}

body {
    font: 14px sans-serif;
}

.float-right {
    float: right;
}

.left {
    margin-right: auto;
}

.center {
    margin-left: auto;
    margin-right: auto;
}

.right {
    margin-left: auto;
}

.flex,
div.ui,
div.ui label {
    display: flex;
}

div.ui label,
div.ui label input[type="number"],
div.ui label input[type="text"] {
    flex: 1 1 auto;
    margin: auto 0;
}

div.ui label input[type="number"] {
    width: 8ch;
    max-width: 16ch;
}

div.ui label input[type="number"],
div.ui label input[type="text"],
div.ui label input[type="checkbox"] {
    margin: auto 0;
}

div.ui label input[type="number"]:nth-last-child(1),
div.ui label input[type="text"]:nth-last-child(1) {
    margin-left: 1ch;
}

div.ui label input[type="checkbox"]:nth-child(1) {
    margin-right: 1ch;
}

div.ui.c label input[type="number"],
div.ui.c label input[type="text"],
div.ui.c label input[type="checkbox"] {
    margin: auto 1ch;
}

.flex code,
div.ui label code {
    margin: auto 0.5ch;
}

input[type="checkbox"].toggle {
    appearance: none;
    background: var(--untoggle-background);
    border-radius: 8px;
    border: 1px solid var(--untoggle-border-color);
    box-sizing: border-box;
    height: 16px;
    margin: 0;
    padding: 0;
    width: 26px;
}

div.ui.tristate input[type="checkbox"].toggle {
    width: 32px;
}

input[type="checkbox"].toggle:checked {
    background: var(--toggle-background);
    border-color: var(--toggle-border-color);
}

div.ui.tristate input[type="checkbox"].toggle.false {
    background: var(--toggle-background-bad);
    border-color: var(--toggle-border-color-bad);
}

div.ui.tristate input[type="checkbox"].toggle:checked {
    background: var(--toggle-background-good);
    border-color: var(--toggle-border-color-good);
}

.prefer-off input[type="checkbox"].toggle {
    --untoggle-background: var(--untoggle-background-good);
    --untoggle-border-color: var(--untoggle-border-color-good);
    --toggle-background: var(--toggle-background-bad);
    --toggle-border-color: var(--toggle-border-color-bad);
}

.prefer-on input[type="checkbox"].toggle {
    --untoggle-background: var(--untoggle-background-bad);
    --untoggle-border-color: var(--untoggle-border-color-bad);
    --toggle-background: var(--toggle-background-good);
    --toggle-border-color: var(--toggle-border-color-good);
}

input[type="checkbox"].toggle::before {
    background: var(--toggle-dot-background);
    border-radius: 50%;
    content: "";
    display: block;
    height: 10px;
    margin: 2px;
    outline: 1px solid var(--toggle-dot-border-color);
    transform: translate(0, calc(50% - 10px / 2));
    transition: transform 500ms;
    width: 10px;
}

input[type="checkbox"].toggle:checked::before {
    transform: translate(10px, calc(50% - 10px / 2));
}

div.ui.tristate input[type="checkbox"].toggle.false::before {
    transform: translate(8px, calc(50% - 10px / 2));
}

div.ui.tristate input[type="checkbox"].toggle:checked::before {
    transform: translate(16px, calc(50% - 10px / 2));
}

input[type="text"],
input[type="number"] {
    background: var(--text-background);
    border: 1px solid var(--text-border-color);
    color: var(--text-color);
}

.help-root {
    white-space: nowrap;
}

input[type="checkbox"].help-btn {
    appearance: unset;
    background: var(--help-btn-background);
    border-radius: 50%;
    border: 1px solid var(--help-btn-border-color);
    box-sizing: border-box;
    height: 16px;
    margin: 0 0 0 5px;
    padding: 0;
    width: 16px;
}

input[type="checkbox"].help-btn:after {
    content: "?";
    margin-left: calc(8px - 0.5ch);
    color: var(--help-btn-color);
}

input[type="checkbox"].help-btn:checked {
    background: var(--help-btn-checked-background);
    border-color: var(--help-btn-checked-border-color);
}

input[type="checkbox"].help-btn:checked:after {
    color: var(--help-btn-checked-color);
}

div.help-tip {
    position: absolute;
    z-index: 20;

    background: var(--help-tip-background);
    border-radius: 3px;
    border: 1px solid var(--help-tip-border-color);
    box-shadow: 1px 1px 3px var(--help-tip-border-color);
    color: var(--help-tip-text);
    font: 12px sans-serif;
    padding: 4px;
    text-align: left;
    white-space: pre-line;
}

/* pointer to the .target on the same page in the docs */
.internal {
    color: var(--target-internal);
    text-decoration: dotted underline;
}

/* pointer to the .target on another page in the docs */
.external {
    color: var(--target-external);
    text-decoration: underline;
}

/* HTML node highlighter, can't use :target because some nodes are
   procedurally generated */
.target {
    border: 0px solid black;
    border-radius: 5px;
    color: var(--target-color);
    background: var(--target-background);
    animation-name: highlight;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes highlight {
    from {
        background-color: var(--target-background-1);
    }
    50% {
        background-color: var(--target-background-2);
    }
    to {
        background-color: var(--target-background-1);
    }
}

/* similar to .target, but for things needing user's attention at some
   later point in time */
.attention {
    border: 5px solid var(--attention-border-color);
    border-radius: 5px;
    background: var(--attention-background-1);
    color: var(--attention-color);
    animation-name: attention;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes attention {
    from {
        background-color: var(--attention-background-1);
    }
    50% {
        background-color: var(--attention-background-2);
    }
    to {
        background-color: var(--attention-background-1);
    }
}

a, code {
    overflow-wrap: anywhere;
}

code {
    background: var(--code-background);
    border-radius: 5px;
}

pre code {
    display: inline-block;
    max-width: 100%;
    overflow: scroll;
}