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.
: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;
}