/* Default to light theme */
:root {
color-scheme: light;
--bg: #fff;
--accent-bg: #f5f7ff;
--text: #212121;
--text-light: #585858;
--border: #898EA4;
--accent: #0d47a1;
--accent-hover: #1266e2;
--accent-text: var(--bg);
--code: #d81b60;
--preformatted: #444;
--marked: #ffdd33;
--disabled: #efefef;
}
.checklist li {
/* Use --text = #212121 for the stroke color */
list-style-image: url('data:image/svg+xml;utf8,');
}
.checklist.editing li {
/* Use --text-light = #585858 for the stroke color */
list-style-image: url('data:image/svg+xml;utf8,');
}
.checklist.editing.selectable li.inner-hover,
.checklist.editing.selectable li:focus-within {
/* Use --text = #212121 for the stroke color */
list-style-image: url('data:image/svg+xml;utf8,');
}
/* Dark theme case 1: System is dark and Frogtab is set to match system */
@media (prefers-color-scheme: dark) {
:root[data-theme="system"] {
color-scheme: dark;
--bg: #212121;
--accent-bg: #2b2b2b;
--text: #dcdcdc;
--text-light: #ababab;
--accent: #ffb300;
--accent-hover: #ffe099;
--accent-text: var(--bg);
--code: #f06292;
--preformatted: #ccc;
--disabled: #111;
}
:root[data-theme="system"] .checklist li {
/* Use --text = #dcdcdc for the stroke color */
list-style-image: url('data:image/svg+xml;utf8,');
}
:root[data-theme="system"] .checklist.editing li {
/* Use --text-light = #ababab for the stroke color */
list-style-image: url('data:image/svg+xml;utf8,');
}
:root[data-theme="system"] .checklist.editing.selectable li.inner-hover,
:root[data-theme="system"] .checklist.editing.selectable li:focus-within {
/* Use --text = #dcdcdc for the stroke color */
list-style-image: url('data:image/svg+xml;utf8,');
}
}
/* Dark theme case 2: Frogtab is set to dark */
:root[data-theme="dark"] {
color-scheme: dark;
--bg: #212121;
--accent-bg: #2b2b2b;
--text: #dcdcdc;
--text-light: #ababab;
--accent: #ffb300;
--accent-hover: #ffe099;
--accent-text: var(--bg);
--code: #f06292;
--preformatted: #ccc;
--disabled: #111;
}
:root[data-theme="dark"] .checklist li {
/* Use --text = #dcdcdc for the stroke color */
list-style-image: url('data:image/svg+xml;utf8,');
}
:root[data-theme="dark"] .checklist.editing li {
/* Use --text-light = #ababab for the stroke color */
list-style-image: url('data:image/svg+xml;utf8,');
}
:root[data-theme="dark"] .checklist.editing.selectable li.inner-hover,
:root[data-theme="dark"] .checklist.editing.selectable li:focus-within {
/* Use --text = #dcdcdc for the stroke color */
list-style-image: url('data:image/svg+xml;utf8,');
}
/* Control which parts of the registration flow are shown */
:root[data-registration="short"] .long-registration-only {
display: none;
}
:root[data-registration="long"] .short-registration-only {
display: none;
}
/* Control which parts about adding tasks and exporting data are shown */
:root[data-save="none"] .browser-save-only {
display: none;
}
:root[data-save="service"] .browser-save-only {
display: none;
}
:root[data-save="service"] .not-service-save {
display: none;
}
:root[data-save="none"] .service-save-only {
display: none;
}
:root[data-save="browser"] .service-save-only {
display: none;
}
/* Override/define other styles */
.compact {
margin-top: 0.5rem;
}
p.before-compact {
margin-bottom: 0;
}
article {
padding-top: 0;
padding-bottom: 0;
}
label {
display: inline-block;
margin-right: 0.5rem;
}
button {
padding: 0.5rem 0.9rem !important;
}
.conditional,
.notice > div {
display: none;
}
.conditional.display,
.notice > div.display {
display: block;
}
.notice {
display: none;
padding-top: 1rem;
padding-bottom: 1rem;
}
.notice.display {
display: block;
}
.notice > div > p,
.notice > div > ol,
.notice > div > div > input,
.notice > div > div > select,
.notice > div > div > button,
.notice > div > div > a.button {
margin: 0.5rem 0;
}
.notice > div > div > label {
margin: 0.5rem 0.5rem 0.5rem 0;
}
svg {
vertical-align: text-top;
}
table {
width: 100%;
}
td {
vertical-align: top;
}
td > p {
margin: 0;
}
td > p + p {
margin-top: 0.5rem;
}
.shortcut {
display: none;
}
.shortcut.display {
display: inline;
}
.actions {
text-align: right;
}
.actions > a {
display: none;
margin-left: 0.5rem;
}
.actions > a.display {
display: inline;
}
.checklist ul {
list-style-type: none;
}
.checklist.editing li {
color: var(--text-light);
}
.checklist.editing.selectable li.inner-hover,
.checklist.editing.selectable li:focus-within {
color: var(--text);
cursor: pointer;
}
iframe {
max-width: 480px;
width: 100%;
height: 250px;
border: 0;
border-radius: var(--standard-border-radius);
}
pre {
border: 0 none;
}
footer a {
color: var(--text-light) !important;
}