:root {
--base: 1rem;
--rhythm-base: 1.4;
--rhythm: calc(var(--rhythm-base) * var(--base));
--double: calc(2 * var(--base));
--main-font: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
--secondary-font: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
--mono-font: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
--line-length: 72rem;
--logo-size: calc(2 * var(--rhythm));
--box-bg: var(--gray-0);
--half-gap: calc(var(--gap) / 2);
}
/* General */
main.auth {
width: 40rem;
}
/* Structure */
/* search visibility */
header.navbar {
overflow: visible;
}
.htmx-indicator {
position: absolute;
z-index: 10;
padding-left: .2em;
padding-right: .2em;
}
a.brand:hover,
a.brand:focus {
text-decoration: none;
}
a.brand h1 {
background-image: url("/logo.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: left center;
height: var(--logo-size);
width: var(--logo-size);
margin: 0;
color: transparent;
text-decoration: none;
overflow: hidden;
}
main>section {
overflow: hidden;
padding: calc(var(--rhythm)/4);
}
main>section:last-child {
max-width: 35ch;
min-width: 26ch;
}
.todo textarea {
resize: none;
max-width: calc(64ch + (var(--rhythm)/2) + 2px) !important;
}
.work textarea {
resize: none;
max-width: calc(35ch + (var(--rhythm)/2) + 2px) !important;
}
body>footer {
text-align: center;
}
#SearchResults>div>a:first-child {
padding-right: var(--rhythm);
background-repeat: no-repeat;
background-position: right center;
background-size: contain;
background-image: url('data:image/svg+xml;utf-8,')
}
#Flash {
z-index: 10;
}
#Flash .box {
transition: 500ms opacity ease-in-out;
}
details ul {
margin: 0;
padding: 0 !important;
}
input:invalid,
textarea:invalid {
border-color: red;
}
.tags {
overflow-x: scroll;
padding-bottom: var(--half-gap);
}
.todo chip {
position: absolute;
margin-left: calc(var(--line-length) / 2 + var(--rhythm));
display: none;
}
.pinned {
font-size: var(--rhythm);
margin: calc(var(--rhythm)/4) 0;
}
.todo p>span,
.pinned .todo p>span.marker,
.todo p span:hover~span.marker {
display: none;
}
.todo p>span:first-child,
.pinned .todo p>span {
display: initial;
}
.todo p span:hover~span {
display: initial;
}
.todo span:has(span.hash.open)~span {
display: initial;
}
.todo span:has(span.hash.open)~span.marker {
display: none;
}
.todo p>span.marker {
display: initial;
border-top: solid var(--blue-2) thin;
}
.overdue .at {
background-color: var(--red-2);
}
li.todo:hover chip {
display: initial;
}
.icon {
background-color: var(--accent);
color: transparent;
}
.icon:focus {
background-color: var(--green-6);
}
a.icon {
width: var(--rhythm);
height: var(--rhythm);
mask-repeat: no-repeat;
}
a.done {
mask-image: url('data:image/svg+xml;utf-8,');
}
a.done:hover {
mask-image: url('data:image/svg+xml;utf-8,');
}
a.undo {
mask-image: url('data:image/svg+xml;utf-8,');
}
a.undo:hover {
mask-image: url('data:image/svg+xml;utf-8,');
}
a.pin {
mask-image: url('data:image/svg+xml;utf-8,');
mask-size: 90%;
mask-position: center;
}
a.pin:hover {
mask-image: url('data:image/svg+xml;utf-8,');
}
a.unpin {
mask-image: url('data:image/svg+xml;utf-8,');
mask-size: 90%;
mask-position: center;
}
a.unpin:hover {
mask-image: url('data:image/svg+xml;utf-8,');
}
a.start {
mask-size: var(--double);
width: var(--double);
height: var(--double);
mask-image: url('data:image/svg+xml;utf-8,');
}
a.t-5 {
mask-image: url('data:image/svg+xml;utf-8,');
}
a.t-15 {
mask-image: url('data:image/svg+xml;utf-8,');
}
a.t-30 {
mask-image: url('data:image/svg+xml;utf-8,');
}
a.t-60 {
mask-image: url('data:image/svg+xml;utf-8,');
}
a.t-120 {
mask-image: url('data:image/svg+xml;utf-8,');
}
a.t-180 {
mask-image: url('data:image/svg+xml;utf-8,');
}
a.t-240 {
mask-image: url('data:image/svg+xml;utf-8,');
}
.work a.edit {
mask-image: url('data:image/svg+xml;utf-8,');
}
.todo a.edit {
mask-image: url('data:image/svg+xml;utf-8,');
mask-size: 90%;
mask-position: left;
}
.todo button.transfer {
mask-image: url('data:image/svg+xml;utf-8,');
width: var(--rhythm);
height: var(--rhythm);
mask-size: var(--rhythm);
}
.todo a.tentative {
mask-image: url('data:image/svg+xml;utf-8,');
}
.todo a.tentative:hover {
mask-image: url('data:image/svg+xml;utf-8,');
}
.todo a.idea {
mask-image: url('data:image/svg+xml;utf-8,');
}
.todo a.idea:hover {
mask-image: url('data:image/svg+xml;utf-8,');
}
button.icon {
mask-size: var(--double);
width: var(--double);
height: var(--double);
}
button.add {
mask-image: url('data:image/svg+xml;utf-8,');
}
button.done {
mask-image: url('data:image/svg+xml;utf-8,');
}
button.stop {
mask-image: url('data:image/svg+xml;utf-8,');
}
.work button.save {
mask-image: url('data:image/svg+xml;utf-8,');
}
button.edit {
mask-image: url('data:image/svg+xml;utf-8,');
}
.todo button.save {
mask-image: url('data:image/svg+xml;utf-8,');
}
button.cancel {
mask-image: url('data:image/svg+xml;utf-8,');
}
button.clear {
mask-image: url('data:image/svg+xml;utf-8,');
}
.dollar {
background: var(--ok-bg);
}
.hash {
background: var(--info-bg);
}
.hash.fix {
background: var(--bad-bg);
}
span.at {
background: var(--warn-bg);
}
span.exact {
cursor: url("filter.png") 4 4, auto;
}
span.remove {
cursor: url("minus.png") 4 4, auto;
}
span.count {
font-size: small;
}
input[data-pernament=true] {
color: var(--warn-fg);
background-color: var(--warn-bg);
background-image: url('data:image/svg+xml;utf-8,');
background-repeat: no-repeat;
background-position: 99% center;
cursor: pointer;
}
@media(max-width: 28rem) {
main {
flex-wrap: wrap;
margin: 0;
max-width: 100%;
}
main>section {
width: 100%;
padding: 0;
}
.navbar {
flex-direction: column;
align-content: center;
padding: var(--rhythm) 0;
display: flex;
}
#filter {
width: 100%;
}
.tool-bar hr,
main>hr {
display: none;
}
.navbar>span:first-child {
margin-left: initial !important;
}
form.todo>div:first-child {
max-width: 100% !important;
overflow-x: scroll;
}
#HelpPopover {
left: 0;
}
}