:root {
--txt-white:#e3e2e7;
--txt-pink:#c244c2;
--shadow-light:rgb(0 0 0 / 13%) 0 1.6px 3.6px 0, rgb(0 0 0 / 11%) 0 0.3px 0.9px 0;
--shadow-light-reversed:rgb(0 0 0 / 13%) 0 -1.6px 3.6px 0, rgb(0 0 0 / 11%) 0 -0.3px 0.9px 0;
--shadow-fab:0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12), 0px 3px 5px -1px rgba(0,0,0,0.2);
--header-height:268px;
--fab-ctr-height:calc(120px + env(safe-area-inset-bottom));
--project-footer-height:128px;
--sync-icon:url('data:image/svg+xml,');
--cloud-off-icon:url('data:image/svg+xml,');
--cloud-failed-icon:url('data:image/svg+xml,');
--cloud-done-icon:url('data:image/svg+xml,');
--directory-sync-icon:url('data:image/svg+xml,');
--work-off-icon:url('data:image/svg+xml,');
--work-failed-icon:url('data:image/svg+xml,');
--work-done-icon:url('data:image/svg+xml,');
}
@font-face{font-family:Roboto-Black;src:url(assets/fonts/Roboto/Roboto-Black.ttf);font-display:swap;}
@font-face{font-family:Roboto-BlackItalic;src:url(assets/fonts/Roboto/Roboto-BlackItalic.ttf);font-display:swap;}
@font-face{font-family:Roboto-Bold;src:url(assets/fonts/Roboto/Roboto-Bold.ttf);font-display:swap;}
@font-face{font-family:Roboto-BoldItalic;src:url(assets/fonts/Roboto/Roboto-BoldItalic.ttf);font-display:swap;}
@font-face{font-family:Roboto-Italic;src:url(assets/fonts/Roboto/Roboto-Italic.ttf);font-display:swap;}
@font-face{font-family:Roboto-Light;src:url(assets/fonts/Roboto/Roboto-Light.ttf);font-display:swap;}
@font-face{font-family:Roboto-LightItalic;src:url(assets/fonts/Roboto/Roboto-LightItalic.ttf);font-display:swap;}
@font-face{font-family:Roboto-Medium;src:url(assets/fonts/Roboto/Roboto-Medium.ttf);font-display:swap;}
@font-face{font-family:Roboto-MediumItalic;src:url(assets/fonts/Roboto/Roboto-MediumItalic.ttf);font-display:swap;}
@font-face{font-family:Roboto-Regular;src:url(assets/fonts/Roboto/Roboto-Regular.ttf);font-display:swap;}
@font-face{font-family:Roboto-Thin;src:url(assets/fonts/Roboto/Roboto-Thin.ttf);font-display:swap;}
@font-face{font-family:Roboto-ThinItalic;src:url(assets/fonts/Roboto/Roboto-ThinItalic.ttf);font-display:swap;}
@keyframes rotate{100%{transform:rotate(360deg);}}
@keyframes reverse-rotate{100%{transform:rotate(-360deg);}}
@keyframes fade-in{0%{opacity:0;}100%{opacity:1;}}
@keyframes fade-out{0%{opacity:1;}100%{opacity:0;}}
@keyframes quarter-fade-out{0%{opacity:1;}100%{opacity:.25;}}
@keyframes scale-in{0%{transform:scale3d(0,0,1);}100%{transform:scale3d(1,1,1);}}
@keyframes scale-out{0%{transform:scale3d(1,1,1);}100%{transform:scale3d(0,0,1);}}
@keyframes short-flash{0%{opacity:1;}50%{opacity:0;}100%{opacity:1;}}
@keyframes long-flash{0%{opacity:1;}40%{opacity:1;}50%{opacity:0;}60%{opacity:1;}100%{opacity:1;}}
@keyframes fade-in-out{0%,100%{opacity:0;}40%,60%{opacity:1;}}
@keyframes beat{0%{transform:scale(1);}20%{transform:scale(1.1);}40%{transform:scale(1);}}
@keyframes scale-up{0%{transform:scale3d(1,1,1);}50%{transform:scale3d(1.5,1.5,1);}100%{transform:scale3d(1,1,1);}}
@keyframes subtle-scale-up{0%{transform:scale3d(1,1,1);}50%{transform:scale3d(1.1,1.1,1);}100%{transform:scale3d(1,1,1);}}
@keyframes notif-in{0%{transform:translate3d(0,-64px,0); opacity:0;}100%{transform:translate3d(0,0,0); opacity:1;}}
@keyframes notif-out{0%{transform:translate3d(0,0,0); opacity:1;}100%{transform:translate3d(0,-64px,0); opacity:0;}}
@keyframes greeting-in{0%{transform:translate3d(0,-40px,0); opacity:0;}100%{transform:translate3d(0,20px,0); opacity:1;}}
@keyframes fade-fly-in-bottom{0%{transform:translate3d(0,0,0); opacity:0;}100%{transform:translate3d(0,-100%,0); opacity:1;}}
@keyframes fade-fly-out-bottom{0%{transform:translate3d(0,-100%,0); opacity:1;}100%{transform:translate3d(0,0,0); opacity:0;}}
@keyframes scale-in-scale-up{0%{transform:scale3d(0,0,0);}50%,75%{transform:scale3d(1.1,1.1,1);}100%{transform:scale3d(1,1,1);}}
@keyframes scale-away-fade{0%{transform:scale3d(1,1,1);opacity:1;}100%{transform:scale3d(0,0,1);opacity:0;}}
@keyframes fly-away-fade{0%{transform:translate3d(0,0,0);opacity:1;}100%{transform:translate3d(0,-100%,0);opacity:0;}}
@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0);}40%{transform:translateY(-10px);}60%{transform:translateY(-5px);}}
@keyframes bounce-with-pause{0%,10%,25%,40%,50%{transform:translateY(0);}20%{transform:translateY(-10px);}30%{transform:translateY(-5px);}100%{transform:translateY(0);}}
@keyframes pulse-ring{0%{transform:scale(.33);}80%,100%{opacity:0;}}
@keyframes shrink-to-left{0%{transform:scale3d(1,1,1);}100%{transform:scale3d(0,1,1);}}
@keyframes pulse-dot{0%{transform:scale(.8);}50%{transform:scale(1);}100%{transform:scale(.8);}}
@keyframes animation-spinner{0%{stroke-dasharray:1px,200px;stroke-dashoffset:0;}50%{stroke-dasharray:100px,200px;stroke-dashoffset:-15px;}100%{stroke-dasharray:100px,200px;stroke-dashoffset:-125px;}}
@keyframes bell{0%{transform:rotate3d(0,0,1,0deg);}12.5%{transform:rotate3d(0,0,1,35deg);}25%{transform:rotate3d(0,0,1,-30deg);}37.5%{transform:rotate3d(0,0,1,25deg);}50%{transform:rotate3d(0,0,1,-20deg);}62.5%{transform:rotate3d(0,0,1,15deg);}75%{transform:rotate3d(0,0,1,-10deg);}87.5%{transform:rotate3d(0,0,1,5deg);}100%{transform:rotate3d(0,0,1,0deg);}}
/* Conveyor */
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
overscroll-behavior: contain;
scrollbar-width: none;
}
*::-webkit-scrollbar { display: none; }
body {
margin: 0;
font-family: Roboto-Regular, Arial, sans-serif;
background-color: rgba(var(--bcg-primary), 1);
-webkit-text-size-adjust: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
}
a:link { color: var(--dark-slate-gray); }
a:visited { color: var(--dark-slate-gray); }
a:hover { color: var(--dark-slate-gray); }
a:active { text-decoration: none; color: var(--dark-slate-gray); }
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Hide Arrows From Input Number */
/* className: user-text-selectable 0_o */
#project > .header > .title,
#project .project-block.reminders > .title,
#project .task-name,
#project .project-block.indexes > .name,
#project .project-block.description > .description,
#project .created.toggle,
.popup .input-field, .popup .card > .body div.selectable {
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
cursor: text;
}
.popup .input-field:focus,
#project .project-block.description > .description:focus { outline: none; background-color: rgba(var(--bcg-primary), 1); }
.popup .input-field:empty:before,
#project .project-block.description > .description:empty:before {
content: attr(data-placeholder);
text-transform: none;
color: var(--dark-slate-gray);
cursor: text;
}
/* Popups */
.popup {
display: none;
position: fixed;
inset: 0;
background: rgba(var(--bcg-primary), 0.96);
z-index: 2;
}
.popup.show { display: block; }
.popup.fade-in { animation: fade-in 200ms ease-out forwards; }
.popup.fade-out { animation: fade-out 200ms ease-out forwards; }
.popup > .ctr {
position: absolute;
inset: 0 0 auto;
height: 100%;
}
.popup > .ctr > .card {
box-sizing: border-box;
border-radius: 32px;
border: .5px solid rgba(var(--border-primary), 1);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 16px);
max-width: 472px;
max-height: calc(100% - 16px);
background: rgba(var(--bcg-secondary), 1);
overflow: auto;
}
.popup.bottom > .ctr > .card {
margin: 0 auto;
border-radius: 32px 32px 0 0;
inset: auto 0;
width: 100%;
max-height: calc(100% - env(safe-area-inset-top) - 8px);
transform: none;
animation: fade-fly-in-bottom 200ms ease-out forwards;
}
.popup.bottom.fade-out > .ctr > .card { animation: fade-fly-out-bottom 200ms ease-out forwards; }
.popup .card > .header {
border-bottom: .5px solid rgba(var(--border-primary), 1);
padding: 24px;
position: sticky;
top: 0;
text-overflow: ellipsis;
font: 20px / 40px Roboto-Regular;
color: var(--txt-primary);
white-space: nowrap;
background: rgba(var(--bcg-secondary), 0.95);
overflow: hidden;
z-index: 1;
}
.popup .card > .header.bold { font-family: Roboto-Bold; }
.popup .card > .header.center { text-align: center; }
.popup .card > .header.icon:before {
content: "";
margin: 0 16px 0 0;
display: inline-block;
width: 24px;
height: 40px;
vertical-align: top;
}
.popup .card > .header.icon.devices:before { background: var(--devices-icon) no-repeat center / 24px; }
.popup .card > .header.icon.tag:before { background: var(--tag-icon) no-repeat center / 24px; }
.popup .card > .header.icon.deadline:before { background: var(--deadline-icon) no-repeat center / 24px; }
.popup .card > .header.icon.plus:before { background: var(--plus-icon) no-repeat center / 24px; }
.popup .card > .header.icon.edit:before { background: var(--edit-icon) no-repeat center / 24px; }
.popup .card > .header.icon.bin:before { background: var(--bin-icon) no-repeat center / 24px; }
.popup .card > .header.icon.notifications:before { background: var(--notifications-icon) no-repeat center / 24px; }
.popup .card > .header.icon.notifications-off:before { background: var(--notifications-off-icon) no-repeat center / 24px; }
.popup .card > .header.icon.warning:before { background: var(--warning-icon) no-repeat center / 24px; }
.popup .card > .header.icon.filter:before { background: var(--filter-icon) no-repeat center / 24px; }
.popup .card > .header.icon.share:before { background: var(--share-icon) no-repeat center / 24px; }
.popup .card > .header.icon.shared:before { background: var(--shared-icon) no-repeat center / 24px; }
.popup .card > .header.icon.settings:before { background: var(--settings-icon) no-repeat center / 24px; }
.popup .card > .header.icon.timer:before { background: var(--timer-icon) no-repeat center / 24px; }
.popup .card > .header.icon.bars:before { background: var(--bars-icon) no-repeat center / 24px; }
.popup .card > .header.icon.tasks:before { background: var(--tasks-icon) no-repeat center / 24px; }
.popup .card > .header.icon.camera:before { background: var(--camera-icon) no-repeat center / 24px; }
.popup .card > .header.icon.move:before { background: var(--move-icon) no-repeat center / 24px; }
.popup .card > .header.icon.message:before { background: var(--send-icon) no-repeat center / 24px; }
.popup .card > .header.icon.check:before { background: var(--check-icon) no-repeat center / 24px; }
.popup .card > .body { padding: 24px; }
.popup.full > .body { position: absolute; inset: 0 0 calc(96px + env(safe-area-inset-bottom)); }
.popup .footer {
border-top: .5px solid rgba(var(--border-primary), 1);
padding: 24px 24px max(24px, env(safe-area-inset-bottom)) 24px;
position: sticky;
bottom: 0;
font-size: 0;
text-align: right;
background: rgba(var(--bcg-secondary), 0.95);
}
.popup.full > .footer {
border-radius: 24px 24px 0 0;
padding: 0 0 env(safe-area-inset-bottom);
display: flex;
justify-content: center;
align-items: center;
position: absolute;
inset: auto 0 0 0;
height: 96px;
background: rgba(var(--bcg-secondary), 1);
}
.popup .card > .body > div { margin: 0 0 8px; font: 14px / 24px Roboto-Regular; color: var(--txt-secondary); word-break: break-word; user-select: none; }
.popup .card > .body > div.icon { width: 100%; height: 128px; }
.popup .card > .body > div.icon.system-update { background: var(--system-update-icon) no-repeat center / 64px; }
.popup .card > .body > div.icon.success { background: var(--circle-check-icon) no-repeat center / 64px; }
.popup .card > .body > div.m-24 { margin-top: 24px; margin-bottom: 24px; }
.popup .card > .body > div.m-24:first-child { margin-top: 0; }
.popup .card > .body > div.m-24:last-child { margin-bottom: 0; }
.popup .card > .body > div.mb-4 { margin-bottom: 4px; }
.popup .card > .body > div.m-b-24 { margin-bottom: 24px; }
.popup .card > .body > div.center { text-align: center; }
.popup .card > .body > div.bold { font-family: Roboto-Bold; }
.popup .card > .body > div.italic { font-family: Roboto-Italic; }
.popup .card > .body > div.s-small { font-size: 12px; line-height: 16px; }
.popup .card > .body > div.s-big { font-size: 32px; line-height: 40px; }
.popup .card > .body > div.c-primary { color: var(--txt-primary); }
.popup .card > .body > div.c-pink { color: var(--txt-pink); }
.popup .card > .body > div.box {
border-radius: 16px;
padding: 16px 0;
background: rgba(var(--bcg-primary), 1);
}
.popup .card > .body > div.warning {
margin: 0 0 24px;
border-radius: 32px;
padding: 24px 24px 24px 48px;
font: 12px / 16px Roboto-Bold;
color: var(--btn-pink-secondary);
background: var(--btn-pink-primary) var(--warning-icon) no-repeat 12px / 24px;
}
.popup .card > .body > div:last-child { margin: 0; }
.popup .card > .body .options > .choice {
margin: 0 0 16px;
border-radius: 32px;
padding: 0 8px;
height: 40px;
line-height: 40px;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
}
.popup .card > .body .options > .choice:last-child { margin: 0; }
.popup .card > .body .options > .choice.center { text-align: center; }
.popup .card > .body .options > .choice.disabled,
.popup .card > .body .inline-options > .choice.disabled { pointer-events: none; opacity: .2; }
.popup .card > .body .options > .choice.selected {
padding: 0 40px;
background: rgba(var(--bcg-primary), 1) var(--check-icon) no-repeat 8px / 24px;
}
.options > .difference {
position: absolute;
left: 50%;
transform: translate(-50%, -16px);
font: 10px / 16px Roboto-LightItalic;
color: var(--txt-pink);
}
.options > .difference:before,
.options > .difference:after {
content: "";
box-sizing: border-box;
border-style: solid;
border-color: rgba(var(--bcg-primary), 1);
position: absolute;
width: 16px;
height: 12px;
}
.options > .difference:before {
border-width: 0 0 2px 2px;
border-radius: 0 0 0 8px;
bottom: 8px;
left: -24px;
}
.options > .difference.flip:before { transform: scaleY(-1); transform-origin: bottom; }
.options > .difference:after {
border-width: 2px 2px 0 0;
border-radius: 0 8px 0 0;
top: 8px;
right: -24px;
}
.options > .difference.flip:after { transform: scaleY(-1); transform-origin: top; }
.popup .card > .body .inline-options {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
font-size: 0;
}
.popup .card > .body .inline-options.full-width {
position: relative;
right: -24px;
left: -24px;
width: calc(100% + 48px);
}
.popup .card > .body .inline-options > .choice {
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
width: 48px;
height: 48px;
font: 12px Roboto-Light;
background-color: rgba(var(--bcg-primary), 1);
cursor: pointer;
}
.popup .card > .body .inline-options > .choice.selected { color: var(--btn-blue-secondary); background-color: var(--btn-blue-primary); }
.popup .card > .body .inline-options > .choice[data-title]{ margin: 32px 0 0; }
.popup .card > .body .inline-options > .choice[data-title]:before {
content: attr(data-title);
position: absolute;
inset: -32px -25% auto -25%;
text-align: center;
font: 12px / 32px Roboto-LightItalic;
text-transform: capitalize;
pointer-events: none;
}
.popup .card > .body .inline-options > .choice.selected[data-title]:before { color: var(--txt-primary); font-family: Roboto-BoldItalic; }
.popup .card > .body .inline-options > .choice.bubble { width: 24px; height: 24px; }
.popup .card > .body .inline-options > .choice.bubble.selected:after {
content: "";
border-radius: 50%;
border: 4px solid rgba(var(--bcg-secondary), 1);
position: absolute;
width: 8px;
height: 8px;
}
.popup .card > .body .inline-options > .choice.icon {
background-repeat: no-repeat;
background-position: center;
background-size: 24px;
}
.popup .card > .body .inline-options > .choice.icon.empty { background-image: var(--checkbox-icon); }
.popup .card > .body .inline-options > .choice.icon.deadline { background-image: var(--deadline-icon); }
.popup .card > .body .inline-options > .choice.icon.reminders { background-image: var(--notifications-icon); }
.popup .card > .body .inline-options > .choice.icon.activity { background-image: var(--timer-icon); }
.popup .card > .body .inline-options > .choice.icon.indexes { background-image: var(--bars-icon); }
.popup .card > .body .inline-options > .choice.icon.tasks { background-image: var(--tasks-icon); }
.popup .card > .body .inline-options > .choice.icon.photos { background-image: var(--camera-icon); }
.popup .card > .body .inline-options > .choice.icon.shared { background-image: var(--shared-icon); }
.popup .card > .body .inline-options > .choice.label {
border-radius: 8px;
padding: 8px 16px 8px 8px;
gap: 8px;
width: auto;
height: auto;
text-transform: uppercase;
font: 14px / 24px Roboto-Black;
word-break: break-word;
color: var(--txt-primary);
}
#weekly-recap-btn {
position: absolute;
bottom: calc(36px + env(safe-area-inset-bottom));
left: calc(50% - 80px);
transition: transform 200ms ease-out;
pointer-events: auto;
cursor: pointer;
}
#navigation.show ~ #weekly-recap-btn { transform: translate3d(0, calc(104px + env(safe-area-inset-bottom)), 0); }
#navigation.show ~ #weekly-recap-btn.alt { transform: translate3d(72px, 0, 0); }
#navigation.show ~ #weekly-recap-btn.no-transform { transform: translate3d(0, 0, 0); }
#weekly-recap-btn.no-transition { transition-duration: initial; }
#weekly-recap-btn.alt {
width: 48px;
bottom: calc(104px + env(safe-area-inset-bottom));
left: -48px;
transform: translate3d(72px, 0, 0);
}
#week-overview-buttons ~ #fabCtr > #weekly-recap-btn,
#main:has(#active-projects.editing) ~ #fabCtr > #weekly-recap-btn,
#timeline.opened ~ .fab-ctr #weekly-recap-btn,
#project.opened ~ .fab-ctr #weekly-recap-btn,
.fab-ctr.opened #weekly-recap-btn { display: none; }
#weekly-recap-btn > .container {
box-sizing: border-box;
margin: 0 auto;
border-radius: 24px;
padding: 1px;
position: relative;
height: 48px;
background: rgba(var(--border-primary), 1);
animation: scale-in-scale-up 500ms ease-out forwards;
overflow: hidden;
}
#weekly-recap-btn.alt > .container { box-shadow: var(--shadow-fab); }
#weekly-recap-btn .box {
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
width: 40px;
height: 40px;
background-image: radial-gradient(var(--badge-green-secondary) 16px, transparent 20px);
animation: moveBox 4s linear infinite;
}
#weekly-recap-btn.alt .box { animation: orbit 2s linear infinite; }
#weekly-recap-btn .content {
border-radius: 24px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 158px;
height: 100%;
font: 14px Roboto-LightItalic;
background: var(--badge-green-primary);
color: var(--badge-green-secondary);
}
#weekly-recap-btn.alt .content { width: initial; }
#weekly-recap-btn.alt .title { display: none; }
#weekly-recap-btn svg {
box-sizing: border-box;
padding: 8px;
width: 40px;
}
#weekly-recap-btn path { fill: currentColor; }
@keyframes moveBox {
0%,
100% { transform: translate(-68px, -12px); }
45% { transform: translate(68px, -12px); }
50% { transform: translate(68px, 12px); }
95% { transform: translate(-68px, 12px); }
}
@keyframes orbit {
from { transform: rotate(0deg) translateX(12px); }
to { transform: rotate(360deg) translateX(12px); }
}
#weekly-recap {
padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
display: flex;
flex-direction: column;
position: absolute;
inset: 0;
background: linear-gradient(45deg, #d9e7ff 0%, #e3ffe7 100%);
animation: scale-in 200ms ease-out forwards;
z-index: 2;
}
#weekly-recap.close { animation: scale-out 200ms ease-in forwards; }
@media (prefers-color-scheme: dark){
#weekly-recap { background: linear-gradient(45deg, #2b3a42 0%, #243b55 100%); }
}
#weekly-recap > .header { flex-shrink: 0; display: flex; justify-content: space-between; height: 56px; color: var(--txt-primary); }
#weekly-recap > .header > .date { padding: 0 16px; display: flex; align-items: center; font: 14px Roboto-LightItalic; }
#weekly-recap > .header > .close { width: 56px; background: var(--close-icon) no-repeat center / 24px; cursor: pointer; }
#weekly-recap > .body {
flex-grow: 1;
display: flex;
scroll-snap-type: x mandatory;
overflow: auto;
}
#weekly-recap > .body > .view {
flex-shrink: 0;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
width: 100%;
text-align: center;
color: var(--txt-primary);
scroll-snap-align: center;
scroll-snap-stop: always;
}
#weekly-recap > .body > .view:first-child { justify-content: space-evenly; }
#weekly-recap > .body > .view:last-child { align-items: center; }
#weekly-recap > .body > .view > .section { display: flex; justify-content: center; align-items: center; height: 112px; }
#weekly-recap > .body > .view > .section > .title { position: relative; font: 24px / 32px Roboto-BlackItalic; }
#weekly-recap > .body > .view > .section .icon { position: absolute; top: 0; left: 0; transform: translateX(-36px); width: 32px; height: 32px; background-position: center; background-repeat: no-repeat; background-size: 24px; }
#weekly-recap > .body > .view.routines > .section .icon { background-image: url(assets/icons/repeat.svg) ; }
#weekly-recap > .body > .view.activities > .section .icon { background-image: url(assets/icons/high-voltage.svg); }
#weekly-recap > .body > .view.indexes > .section .icon { background-image: url(assets/icons/chart-increasing.svg); }
#weekly-recap > .body > .view > .block { display: flex; flex-direction: column; gap: 16px; min-height: 112px; }
#weekly-recap .block > .wrap > .title { font: 16px / 24px Roboto-Bold; }
#weekly-recap .block > .wrap > .output { font: 14px / 24px Roboto-Italic; }
#weekly-recap .view.activities .output > span { font-family: Roboto-BoldItalic; color: var(--badge-blue-secondary); }
#weekly-recap .view.indexes .output > span { font-family: Roboto-BoldItalic; color: var(--badge-violet-secondary); }
#weekly-recap .bubbles { position: relative; height: 120px; }
#weekly-recap .bubble { border-radius: 50%; position: absolute; transform: translate(-50%, -50%); }
#weekly-recap .bubbles.top > .pos-1 { top: calc(60% - 32px); left: calc(20% - 32px); width: 32px; height: 32px; background: var(--badge-red-secondary); animation: float-up-and-down 6s ease-in-out infinite; }
#weekly-recap .bubbles.top > .pos-2 { top: calc(20% - 48px); left: calc(44% - 48px); width: 48px; height: 48px; background: var(--badge-blue-secondary); animation: float-up-and-down 8s ease-in-out infinite; }
#weekly-recap .bubbles.top > .pos-3 { top: calc(80% - 24px); left: calc(50% - 24px); width: 24px; height: 24px; background: var(--badge-green-secondary); animation: float-up-and-down 4s ease-in-out infinite; }
#weekly-recap .bubbles.top > .pos-4 { top: calc(55% - 64px); left: calc(82% - 64px); width: 64px; height: 64px; background: var(--badge-violet-secondary); animation: float-up-and-down 10s ease-in-out infinite; }
#weekly-recap .bubbles.bottom > .pos-1 { top: calc(50% - 24px); left: calc(18% - 24px); width: 24px; height: 24px; background: var(--badge-green-secondary); animation: float-up-and-down 4s ease-in-out infinite; }
#weekly-recap .bubbles.bottom > .pos-2 { top: calc(70% - 48px); left: calc(40% - 48px); width: 48px; height: 48px; background: var(--badge-red-secondary); animation: float-up-and-down 8s ease-in-out infinite; }
#weekly-recap .bubbles.bottom > .pos-3 { top: calc(40% - 32px); left: calc(60% - 32px); width: 32px; height: 32px; background: var(--badge-green-secondary); animation: float-up-and-down 6s ease-in-out infinite; }
#weekly-recap .bubbles.bottom > .pos-4 { top: calc(55% - 32px); left: calc(80% - 32px); width: 32px; height: 32px; background: var(--badge-red-secondary); animation: float-up-and-down 6s ease-in-out infinite; }
@keyframes float-up-and-down {
0%, 100% { transform: translate3d(0, -8px, 0); }
50% { transform: translate3d(0, 8px, 0); }
}
#weekly-recap .view:nth-child(1) > .block { gap: 0; }
#weekly-recap .view:nth-child(1) > .block > .seperator { height: 80px; }
#weekly-recap .block > .wrap.stack.row { display: flex; gap: 16px; }
#weekly-recap .block > .wrap.stack > div { font: 14px / 24px Roboto-BlackItalic; opacity: 0; animation: fadeAndTranslateIn 700ms cubic-bezier(0, 0, 0.2, 1) forwards; }
#weekly-recap .block > .wrap.stack.row > div { width: 50%; font: 24px / 32px Roboto-BlackItalic; }
#weekly-recap .block > .wrap.stack.row > .title { text-align: right; }
#weekly-recap .block > .wrap.stack.row > .output { display: flex; gap: 8px; text-align: left; }
#weekly-recap .view:nth-child(1) .wrap .icon { width: 32px; height: 32px; background-position: center; background-repeat: no-repeat; background-size: 24px; }
#weekly-recap .wrap.routines .icon { background-image: url(assets/icons/repeat.svg); }
#weekly-recap .wrap.activities .icon { background-image: url(assets/icons/high-voltage.svg); }
#weekly-recap .wrap.indexes .icon { background-image: url(assets/icons/chart-increasing.svg); }
#weekly-recap .wrap.tasks .icon { background-image: url(assets/icons/check-mark.svg); }
#weekly-recap .view:nth-child(1) > .block > .wrap:nth-child(1) > .title { animation-delay: 200ms; }
#weekly-recap .view:nth-child(1) > .block > .wrap:nth-child(1) > .output { animation-delay: 400ms; }
#weekly-recap .view:nth-child(1) > .block > .wrap:nth-child(2) > .title { animation-delay: 300ms; }
#weekly-recap .view:nth-child(1) > .block > .wrap:nth-child(2) > .output { animation-delay: 500ms; }
#weekly-recap .view:nth-child(1) > .block > .wrap:nth-child(3) > .title { animation-delay: 400ms; }
#weekly-recap .view:nth-child(1) > .block > .wrap:nth-child(3) > .output { animation-delay: 600ms; }
#weekly-recap .view:nth-child(1) > .block > .wrap:nth-child(4) > .title { animation-delay: 500ms; }
#weekly-recap .view:nth-child(1) > .block > .wrap:nth-child(4) > .output { animation-delay: 700ms; }
#weekly-recap .view:nth-child(1) > .block > .wrap:nth-child(5) > .title { animation-delay: 600ms; }
#weekly-recap .view:nth-child(1) > .block > .wrap:nth-child(6) > .title { animation-delay: 700ms; }
#weekly-recap .view:nth-child(1) > .block > .wrap:nth-child(7) > .title { animation-delay: 800ms; }
#weekly-recap > .body > .view:last-child > .icon {
width: 200px;
height: 200px;
background: url(assets/icons/confetti-ball.svg) no-repeat center / 184px;
}
#weekly-recap > .body > .view:last-child > .title { font: 24px / 64px Roboto-Black; }
#weekly-recap > .body > .view:last-child > .sub-title { flex-grow: 0.5; padding: 0 20px; font: 14px Roboto-Light; }
#weekly-recap > .body > .view:last-child > .btn {
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
width: calc(100% - 40px);
max-width: 440px;
height: 40px;
color: rgba(var(--bcg-primary), 1);
background: var(--txt-primary);
cursor: pointer;
}
#weekly-recap > .footer { flex-shrink: 0; display: flex; justify-content: center; align-items: center; height: 56px; }
#weekly-recap > .footer > .navigation { display: flex; gap: 12px; }
#weekly-recap .navigation > .dot {
border-radius: 50%;
width: 12px;
height: 12px;
background: var(--txt-primary);
transition: opacity 200ms ease-in-out;
opacity: 0.2;
cursor: pointer;
}
#weekly-recap .navigation > .dot.active { opacity: 1; }
@keyframes fadeAndTranslateIn {
0% { opacity: 0; transform: translate3d(0, 0.75rem, 0); }
100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
.popup .card > .body .inline-options > .choice[data-count]:after {
border-radius: 8px;
padding: 0 4px;
position: absolute;
min-width: 8px;
text-align: center;
font: 10px / 16px Roboto-BlackItalic;
color: var(--badge-green-secondary);
background: var(--badge-green-primary);
box-shadow: var(--shadow-light);
}
.popup .card > .body .inline-options > .choice[data-count]:after { box-shadow: var(--shadow-light); }
.popup .card > .body .inline-options > .choice.icon[data-count]:after { content: attr(data-count); top: -2px; right: -2px; }
.popup .card > .body .inline-options > .choice.label[data-count]:after { content: attr(data-count); top: -6px; right: -6px; }
.popup .card > .body .inline-wrap {
display: flex;
gap: 24px;
height: 200px;
overflow: hidden;
}
.popup .card > .body .inline-select-box {
border-radius: 16px;
border: .5px solid currentColor;
display: inline-flex;
align-items: center;
justify-content: flex-end;
flex-direction: column;
width: 100%;
font: 16px / 64px Roboto-Bold;
color: var(--btn-blue-secondary);
background-color: var(--btn-blue-primary);
background-repeat: no-repeat;
background-position: center 68px;
background-size: 48px;
cursor: pointer;
}
.popup .card > .body .inline-select-box:last-child { margin: 0; }
.popup .card > .body .inline-select-box.scan { background-image: var(--scan-qr-code-icon); }
.popup .card > .body .inline-select-box.dialpad { background-image: var(--dialpad-icon); }
.popup .card > .body .inline-select-box.add { background-image: var(--plus-icon); }
.popup .card > .body .inline-select-box.addTime { background-image: var(--time-add-icon); }
.popup .card > .body .inline-select-box.stopwatchStart { background-color: var(--btn-green-primary); background-image: var(--stopwatch-start-icon); color: var(--btn-green-secondary); }
.popup .card > .body .inline-select-box.stopwatchCancel { background-color: var(--btn-pink-primary); background-image: var(--stopwatch-cancel-icon); color: var(--btn-pink-secondary); }
.popup .card > .body .inline-select-box.stopwatchStop { background-color: var(--btn-green-primary); background-image: var(--stopwatch-stop-icon); color: var(--btn-green-secondary); }
.popup .card > .body .inline-select-box.camera { background-image: var(--camera-add-icon); }
.popup .card > .body .inline-select-box.library { background-image: var(--library-add-icon); }
.popup .card > .body .inline-select-box.loading { gap: 32px; background-image: none; cursor: wait; }
.popup .card > .body .inline-select-box.disabled { transition: opacity 300ms ease-out; opacity: .5; pointer-events: none; }
.popup .img-align {
padding: 16px 0;
display: flex;
justify-content: center;
position: absolute;
width: 100%;
height: calc(100% - 32px);
}
.popup .img-align[data-zoom]{ cursor: grab; }
.popup .img-zoom {
border-radius: 4px;
display: none;
position: absolute;
inset: 16px 16px auto;
height: 8px;
background: rgba(var(--bcg-secondary), 0.5);
overflow: hidden;
}
.popup .img-align[data-zoom] .img-zoom { display: block; animation: fade-in 200ms ease-out forwards; }
.popup .img-zoom-percentage {
width: 100%;
height: 100%;
background: rgba(var(--color-blue), 1);
transform: scaleX(0);
transform-origin: left;
}
.popup .img-wrap {
display: flex;
height: 100%;
font-size: 0;
flex-direction: column;
justify-content: center;
}
.popup .img-wrap.no-photo { width: 40px; background: var(--warning-icon) no-repeat center / 40px; }
.popup .img-wrap > img { max-width: 100%; max-height: 100%; animation: fade-in 150ms ease-in forwards; pointer-events: none; }
.popup .img-wrap > img.loading,
.popup .img-wrap.no-photo > img { display: none; }
.popup .img-wrap.delete-anim > img { animation: scale-away-fade 300ms ease-out forwards; }
.popup .img-wrap.move-anim > img { animation: fly-away-fade 300ms ease-out forwards; }
.popup .img-wrap > .previous, .popup .img-wrap > .next {
position: absolute;
transition: opacity 150ms ease-out;
cursor: pointer;
}
.popup .img-wrap > .previous { inset: 0 50% 0 0; }
.popup .img-wrap > .next { inset: 0 0 0 50%; }
.popup .img-wrap > .previous.hide, .popup .img-wrap > .next.hide { opacity: .2; }
.popup .img-wrap > .previous.translucent, .popup .img-wrap > .next.translucent { opacity: 0; }
.popup .img-align[data-zoom] .previous, .popup .img-align[data-zoom] .next,
.popup .img-wrap.delete-anim > .previous, .popup .img-wrap.delete-anim > .next,
.popup .img-wrap.move-anim > .previous, .popup .img-wrap.move-anim > .next { display: none; }
.popup .img-wrap > .previous:before, .popup .img-wrap > .next:before {
content: "";
border-radius: 20px;
position: absolute;
top: calc(50% - 20px);
width: 40px;
height: 40px;
box-shadow: var(--shadow-light);
}
.popup .img-wrap > .previous:before { left: 16px; background: var(--btn-gray-primary) var(--back-icon) no-repeat 10px / 16px; }
.popup .img-wrap > .next:before { right: 16px; background: var(--btn-gray-primary) var(--next-icon) no-repeat 12px / 16px; }
.popup .img-wrap > .photo-info {
display: flex;
justify-content: center;
gap: 8px;
position: absolute;
inset: auto 8px 8px;
transition: opacity 150ms ease-out;
}
.popup .img-wrap > .photo-info.translucent { opacity: .25; }
.popup .img-wrap > .photo-info.translucent:hover { opacity: 1; }
.popup .img-align[data-zoom] .photo-info { display: none; }
.popup .img-wrap > .photo-info > div {
box-sizing: border-box;
border-radius: 4px;
border: .5px solid rgba(var(--border-primary), 1);
padding: 0 8px;
display: flex;
justify-content: center;
align-items: center;
height: 32px;
min-width: 40px;
font-family: Roboto-BoldItalic;
font-size: 12px;
line-height: 32px;
color: var(--txt-primary);
background: rgba(var(--bcg-secondary), 1);
}
.popup .img-wrap > .photo-info > .type { text-transform: uppercase; }
.popup .container { display: flex; gap: 8px; }
.popup .container > .name {
flex-grow: 1;
position: relative;
font: 14px / 40px Roboto-Regular;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.popup .container.failed > .name, .popup .container.skip > .name { text-decoration: line-through; }
.popup .container.skip > .name { color: var(--btn-pink-secondary); }
.popup .container > .status { flex-shrink: 0; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; }
.popup .container.pending > .status { background: var(--pending-icon) no-repeat center / 24px; }
.popup .container.done > .status { background: var(--check-icon) no-repeat center / 24px; }
.popup .container.skip > .status, .popup .container.failed > .status { background: var(--close-icon) no-repeat center / 24px; }
.wrap.account {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.wrap.account > div:nth-child(1){
box-sizing: border-box;
border-radius: 50%;
border: 3px solid rgba(var(--color-blue), 1);
width: 112px;
height: 112px;
background: var(--person-icon) no-repeat center / 40px;
overflow: hidden;
}
.wrap.account > div:nth-child(1) > img {
display: none;
width: 100%;
height: 100%;
object-fit: cover;
}
.wrap.account > div:nth-child(1) > img[loaded] { display: block; }
.wrap.account > div:nth-child(2){
border-radius: 4px;
padding: 0 8px;
position: absolute;
top: 94px;
font: 14px / 24px Roboto-Bold;
color: var(--txt-white);
background: rgb(0, 0, 0);
}
.wrap.account > div:nth-child(3){ font: 10px / 40px Roboto-BoldItalic; }
.wrap.account > div:nth-child(4){ display: flex; gap: 8px; }
.wrap.account > div:nth-child(4) > div {
background: var(--btn-blue-primary);
color: var(--btn-blue-secondary);
font: 12px / 40px Roboto-Black;
padding: 0 16px;
border-radius: 20px;
cursor: pointer;
}
.wrap.account > div:nth-child(4) > .delete-photo {
display: none;
background: var(--btn-pink-primary);
color: var(--btn-pink-secondary);
}
.wrap.account:has(img[loaded]) > div:nth-child(4) > .delete-photo { display: block; }
.wrap.account > div:nth-child(5){
padding: 16px 0 8px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
font: 12px / 16px Roboto-Bold;
color: var(--txt-primary);
}
.wrap.settings {
padding: 8px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
background: rgba(var(--bcg-primary), 1);
overflow: hidden;
}
.wrap.settings.first { border-radius: 16px 16px 0 0; }
.wrap.settings.last { border-radius: 0 0 16px 16px; }
.wrap.settings.buttons { gap: 4px; padding: 0; background: none; }
.wrap.settings.buttons > div {
width: 50%;
text-align: center;
font: 12px / 48px Roboto-Black;
}
.wrap.settings.buttons > div { color: var(--btn-pink-secondary); cursor: pointer; }
.wrap.settings.buttons > div:nth-child(1){ background: var(--btn-pink-primary) var(--bin-icon) no-repeat 8px / 24px; }
.wrap.settings.buttons > div:nth-child(2){ background: var(--btn-pink-primary) var(--reload-icon) no-repeat 8px / 24px; }
.wrap.settings > .icon,
.wrap.settings > .status { flex-shrink: 0; width: 24px; height: 34px; }
.wrap.settings > .icon.worker { background: var(--worker-icon) no-repeat center / 24px; }
.wrap.settings > .icon.local-notif { background: var(--notifications-icon) no-repeat center / 24px; }
.wrap.settings > .icon.push-notif { background: var(--notifications-active-icon) no-repeat center / 24px; }
.wrap.settings > .icon.installed { background: var(--add-to-homescreen-icon) no-repeat center / 24px; }
.wrap.settings > .icon.version { background: var(--system-update-ok-icon) no-repeat center / 24px; }
.wrap.settings > .icon.info { background: var(--info-icon) no-repeat center / 24px; }
.wrap.settings > .content { flex-grow: 1; }
.wrap.settings > .content > div:nth-child(1){ font: 14px / 18px Roboto-Bold; color: var(--txt-primary); }
.wrap.settings > .content > div:nth-child(2){ font: 12px / 16px Roboto-Italic; color: var(--txt-secondary); }
.wrap.settings > .status { border-radius: 50%; height: 24px; }
.wrap.settings > .status.blue {
animation: short-flash 500ms ease-in-out infinite;
background: rgba(var(--color-blue), 1) no-repeat center / 16px;
}
.wrap.settings > .status.red { background: rgba(var(--color-red), 1) var(--close-icon) no-repeat center / 16px; }
.wrap.settings > .status.yellow { background: rgba(var(--color-yellow), 1) var(--exclamation-icon) no-repeat center / 16px; }
.wrap.settings > .status.green { background: rgba(var(--color-green), 1) var(--check-icon) no-repeat center / 16px; }
.popup .footer > .button:first-child { margin: 0; }
.popup .footer > .button {
margin: 0 0 0 24px;
padding: 0 8px;
border-radius: 32px;
display: inline-block;
height: 40px;
font-family: Roboto-Black;
line-height: 40px;
font-size: 14px;
color: var(--btn-blue-secondary);
vertical-align: top;
user-select: none;
cursor: pointer;
}
.popup .footer > .button.hide { transition: opacity 300ms ease-out; opacity: .5; pointer-events: none; }
.popup .footer > .button:last-child { padding: 0 24px; background: var(--btn-blue-primary); }
.popup .footer > .button:only-child { background: none; }
.popup .footer > .button.full { display: block; height: 56px; text-align: center; line-height: 56px; background: var(--btn-blue-primary); }
.popup .footer > .button.green { color: var(--btn-green-secondary); background: var(--btn-green-primary); }
.popup .footer > .button.pink { color: var(--btn-pink-secondary); background: var(--btn-pink-primary); }
.popup .footer > .button.loading { background: transparent; cursor: wait; }
.popup .footer > .button.full.loading { display: flex; align-items: center; justify-content: center; }
.popup .footer > .button.icon {
box-sizing: border-box;
position: relative;
margin: 0 0 18px;
padding: 0 16px;
width: 80px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
background-size: 24px;
}
.popup .footer > .button.close { background-image: var(--close-icon); }
.popup .footer > .button.bin { background-image: var(--bin-icon); }
.popup .footer > .button.archive { background-image: var(--archive-icon); }
.popup .footer > .button.unarchive { background-image: var(--unarchive-icon); }
.popup .footer > .button.save { background-image: var(--download-icon); }
.popup .footer > .button.move { background-image: var(--move-icon); }
.popup .footer > .button[data-name]:after {
content: attr(data-name);
position: absolute;
right: 0;
left: 0;
bottom: -18px;
text-align: center;
font: 14px / 18px Roboto-Regular;
white-space: nowrap;
}
.popup .footer > .wrap.progress {
display: flex;
justify-content: flex-end;
gap: 24px;
color: var(--txt-primary);
}
.wrap.progress > .column {
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.wrap.progress > .column > .title { font: 12px Roboto-Italic; }
.wrap.progress > .column > .sub-title { font: 12px Roboto-Bold; color: var(--txt-pink); }
.wrap.progress > .percentage {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 40px;
height: 40px;
font: 12px Roboto-BlackItalic;
}
.wrap.progress > svg.progress { transform: rotate(270deg); }
.wrap.progress > svg.progress > .outter { stroke: var(--blue-primary); }
.wrap.progress > svg.progress > .inner {
stroke-dasharray: 3, 3;
stroke-linecap: round;
transform-origin: center;
animation: rotate 2.5s linear infinite;
}
/* Modals */
#main,
.modal {
position: fixed;
width: 100%;
height: 100%;
top: 0;
background-color: rgba(var(--bcg-primary), 1);
overflow: auto;
scroll-behavior: smooth;
}
.modal.right { right: -100%; }
.modal.bottom { top: auto; bottom: -100%; }
.modal.left { left: -100%; }
.modal.transition,
#main.transition { transition: transform 200ms ease-out; }
.modal.disable-scroll,
#main.disable-scroll { overflow: hidden; }
.modal.right.open { animation: animateRight 200ms ease-out; }
.modal.right.close { animation: animateRightClose 200ms ease-out; }
.modal.bottom.open { animation: animateBottom 200ms ease-out forwards; }
.modal.bottom.close { animation: animateBottomClose 200ms ease-out forwards; }
.modal.left.open { animation: animateLeft 200ms ease-out; }
.modal.left.close { animation: animateLeftClose 200ms ease-out; }
#projects,
.modal > .body {
box-sizing: border-box;
padding: 12px 12px 0;
position: absolute;
top: calc(var(--header-height) + env(safe-area-inset-top));
width: 100%;
min-height: calc(100% - env(safe-area-inset-top) - var(--header-height));
font-size: 0;
}
#projects {
padding: 0 0 var(--fab-ctr-height);
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
#project > .body {
padding: 12px 12px calc(var(--fab-ctr-height) + var(--project-footer-height) + 32px);
display: flex;
flex-direction: column;
gap: 32px;
}
#active-projects,
#archived-projects {
box-sizing: border-box;
padding: 0 12px;
display: inline-block;
position: relative;
width: 100%;
}
#active-projects.editing { padding: 12px 12px 0; }
#active-projects,
#archived-projects { margin-bottom: -12px; } /* Temp ghetto fix prolly forever */
#active-projects[empty]{ flex-grow: 1; min-height: 240px; background: url(assets/icons/sloth.svg) no-repeat center calc(50% - 24px) / 112px; }
#active-projects[empty]:before {
content: "Nothing in here!";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 56px);
font: 14px / 24px Roboto-Regular;
color: var(--txt-secondary);
}
#projects .section-title {
box-sizing: border-box;
margin: 0 0 12px;
padding: 0 0 0 12px;
display: none;
align-items: center;
gap: 8px;
width: 100%;
height: 40px;
text-transform: uppercase;
font: 14px Roboto-Black;
color: var(--txt-primary);
}
#projects > .section-title { margin: 0; padding-right: 12px; padding-left: 24px; }
#projects .section-title.hide { display: none !important; }
#projects:has(.active-activity) > #active-overview,
#projects:has(.overview-block:not(:empty)) > #active-overview,
#active-projects:has(#pinned-projects + .project) > #pinned-projects,
#active-projects:has(#pinned-projects + .project):has(#other-projects + .project) > #other-projects { display: flex; }
#projects .section-title:before {
content: "";
width: 24px;
height: 100%;
}
#active-overview:before { background: var(--overview-icon) no-repeat center / 24px; }
#pinned-projects:before { background: var(--pinned-icon) no-repeat center / 24px; transform: rotateZ(32deg); }
#other-projects:before { background: var(--others-icon) no-repeat center / 24px; }
#projects.scrollable, #projects:has(#filter-projects.active),
#project:has(.description:focus) > .body,
.modal > .body.scrollable { min-height: calc(100% - env(safe-area-inset-top)); }
@keyframes animateRight { from { right: -100%; } to { right: 0; } }
@keyframes animateRightClose { from { right: 0; } to { right: -100%; } }
@keyframes animateBottom { from { bottom: -100%; opacity: 0; } to { bottom: 0; opacity: 1; } }
@keyframes animateBottomClose { from { bottom: 0; opacity: 0; } to { bottom: -100%; opacity: 1; } }
@keyframes animateLeft { from { left: -100%; } to { left: 0; } }
@keyframes animateLeftClose { from { left: 0; } to { left: -100%; } }
.popup .input-field {
box-sizing: border-box;
margin: 0 0 16px;
border: .5px solid rgba(var(--border-primary), 1);
border-radius: 24px;
padding: 16px;
display: inline-block;
width: 100%;
text-align: center;
font: 16px / 20px Roboto-Regular;
word-break: break-word;
color: var(--dark-slate-gray);
}
.popup .input-field.uppercase { text-transform: uppercase; }
.popup.m-0 .input-field,
.popup .card > .body > div:last-child .input-field { margin: 0; }
.popup.new-project .input-field {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 96px;
}
.popup.new-project .input-field:empty { padding: 36px 16px; }
#project .photo-gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 3px;
position: relative;
left: -16px;
width: calc(100% + 32px);
}
#project .photo-gallery:empty { flex-direction: column; }
#project .photo-gallery:empty:before {
content: "No photos yet!";
text-align: center;
font: 16px / 64px Roboto-Italic;
color: var(--txt-secondary);
}
#project .photo-gallery[archived]:empty:before { content: "Nothing in here!"; }
#project .photo-gallery > .image-block {
position: relative;
aspect-ratio: 1 / 1;
width: calc(25% - (9px / 4));
overflow: hidden;
cursor: pointer;
}
#project .photo-gallery > .image-block:empty { cursor: auto; }
#project .photo-gallery > .image-block:empty:before {
content: "";
position: absolute;
inset: 0;
background: rgba(var(--bcg-primary), 1);
animation: fade-in-out 1s ease-in-out infinite;
}
#project .photo-gallery > .image-block.error:before { content: none; }
#project .photo-gallery > .image-block.not-found { background: var(--question-mark-icon) no-repeat center / 32px; }
#project .photo-gallery > .image-block.unsupported-type { background: var(--broken-image-icon) no-repeat center / 32px; }
#project .photo-gallery > .image-block.no-permission { background: var(--shield-lock-icon) no-repeat center / 32px; }
#project .photo-gallery > .image-block.reload { background: var(--reload-icon) no-repeat center / 32px; cursor: pointer; }
#project .photo-gallery:has(.image-block.selected) > .image-block { cursor: pointer; }
#project .photo-gallery:has(.image-block.selected) > .image-block:after {
content: "";
box-sizing: border-box;
border-radius: 50%;
border: 3px solid rgba(var(--bcg-primary), 0.5);
position: absolute;
inset: 4px;
width: 24px;
height: 24px;
animation: scale-in 250ms ease-out forwards;
pointer-events: none;
}
#project .photo-gallery > .image-block.selected:after { background: var(--check-icon) rgba(var(--color-blue), 1) no-repeat center / 16px; }
#project .photo-gallery > .month,
#project .photo-gallery > .date { padding: 0 0 0 12px; display: none; width: 100%; color: var(--txt-primary); }
#project .photo-gallery > .month { padding-top: 16px; font: 20px / 56px Roboto-Black; }
#project .photo-gallery > .month:first-child { padding-top: 0; }
#project .photo-gallery.by-date > .month:not(:first-child),
#project .photo-gallery.by-month > .month { display: block; }
#project .photo-gallery > .date { font: 14px / 40px Roboto-Regular; }
#project .photo-gallery.by-date > .date { display: block; }
#project .image-block > img { position: absolute; animation: fade-in 150ms ease-in forwards; }
#project .image-block.selected > img { opacity: 0.25 !important; }
#project .image-block > img.fit-width { top: 50%; transform: translateY(-50%); width: 100%; }
#project .image-block > img.fit-height { left: 50%; transform: translateX(-50%); height: 100%; }
/* ------------------------------------------[ Project View • Project Block ]------------------------------------------ */
#project .project-block {
border: .5px solid rgba(var(--border-primary), 1);
border-radius: 32px;
padding: 32px 16px;
display: none;
position: relative;
background: rgba(var(--bcg-secondary), 1);
}
#project .project-block.show { display: block; }
#project .project-block.archived.show,
#project .project-block.deadline.show,
#project .project-block.reminders.show,
#project .project-block.description.show { display: flex; }
#project > .body > .wrap { display: none; }
#project > .body > .wrap:has(.project-block.show){ display: flex; flex-direction: column; gap: 12px; }
#project .project-block.archived,
#project .project-block.users,
#project .project-block.deadline,
#project .project-block.reminders {
border-radius: 16px;
border: .5px solid;
}
#project .project-block.archived,
#project .project-block.users,
#project .project-block.deadline,
#project .project-block.reminders {
padding: 12px;
align-items: center;
justify-content: flex-start;
gap: 12px;
text-align: left;
font: 12px / 16px Roboto-Regular;
}
#project .project-block.users {
padding: 12px 0;
background: var(--badge-gray-primary);
color: var(--badge-gray-secondary);
}
#project .project-block.archived,
#project .project-block.deadline { color: var(--badge-red-secondary); background: var(--badge-red-primary); }
#project .project-block.reminders { color: var(--badge-blue-secondary); background: var(--badge-blue-primary); }
#project .project-block.description { flex-direction: column; flex-grow: 1; }
#project .project-block > svg { flex-shrink: 0; box-sizing: border-box; padding: 8px; width: 40px; height: 40px; }
#project .project-block > svg > path { fill: currentColor; }
#project .project-block > .edit { margin-left: auto; cursor: pointer; }
#project .project-block > .name {
padding: 0 0 32px 16px;
text-align: left;
text-transform: uppercase;
font: 24px / 32px Roboto-Black;
color: var(--txt-primary);
}
#project .project-block.description > .copy-notes,
#project .project-block > .settings {
border-radius: 50%;
position: absolute;
top: 16px;
right: 16px;
width: 40px;
height: 40px;
box-shadow: var(--shadow-light);
cursor: pointer;
}
#project .project-block.description:has(.description:empty) > .copy-notes { display: none; }
#project .project-block.description > .copy-notes { background: var(--btn-blue-primary); }
#project .project-block.description > .copy-notes svg { padding: 8px; }
#project .project-block.description > .copy-notes path { fill: var(--icon-color); }
#project .project-block > .settings { background: var(--btn-blue-primary) var(--settings-icon) no-repeat center / 24px; }
/* ------------------------------------------[ Project View • Project Block • Users ]------------------------------------------ */
#project .project-block.users > .info {
box-sizing: border-box;
border-radius: 8px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 8px;
left: 8px;
width: 80px;
height: calc(100% - 16px);
transition: background-color 250ms ease-out;
backdrop-filter: blur(4px);
pointer-events: none;
}
#project .project-block.users > .info.scrolled { background: rgba(var(--bcg-primary), 0.6); box-shadow: var(--shadow-light); }
#project .project-block.users > .info.scrolled > svg > path { fill: var(--icon-color); }
#project .project-block.users > .info > svg {
box-sizing: border-box;
padding: 8px;
width: 48px;
height: 48px;
}
#project .project-block.users > .info > svg > path { fill: currentColor; transition: fill 250ms ease-out; }
#project .project-block.users > .info > div { font: 12px / 16px Roboto-Light; color: var(--txt-primary); }
#project .project-block.users > .info > .archived { font-size: 10px; font-family: Roboto-Bold; color: var(--red-primary); }
#project .project-block.users > .info > .total { font-size: 10px; color: var(--txt-secondary); }
#project .project-block.users > .users {
padding: 0 12px 0 96px;
display: flex;
justify-content: flex-start;
gap: 12px;
overflow: auto;
scroll-snap-type: x mandatory;
}
#project .project-block.users .user {
flex-shrink: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 90px;
height: 120px;
scroll-snap-align: center;
scroll-snap-stop: always;
}
#project .project-block.users .avatar {
box-sizing: border-box;
margin: 0 0 8px;
border-radius: 50%;
border: 3px solid rgba(0, 0, 0, 0.2);
width: 48px;
height: 48px;
overflow: hidden;
}
#project .project-block.users .avatar.no-photo { background: var(--person-icon) no-repeat center / 24px }
#project .project-block.users .avatar.no-internet { background: var(--no-internet-icon) no-repeat center / 24px; }
#project .project-block.users .user.online .avatar { border-color: var(--green-primary); }
#project .project-block.users .user.archived .avatar { opacity: 0.5; }
#project .project-block.users .spinner { margin: 8px; display: flex; }
#project .project-block.users img { display: none; width: 100%; height: 100%; }
#project .project-block.users img[loaded]{ display: block; }
#project .project-block.users .name {
flex-grow: 1;
display: flex;
align-items: center;
max-height: 32px;
text-align: center;
text-wrap: balance;
font: 12px / 16px Roboto-Light;
color: var(--txt-primary);
word-break: break-word;
overflow: hidden;
}
#project .project-block.users .role,
#project .project-block.users .active {
font: 10px / 16px Roboto-Light;
color: var(--txt-secondary);
}
#project .project-block.users .user.owner .role { font-family: Roboto-Bold; color: var(--txt-pink); }
#project .project-block.users .user.archived .active {
font-family: Roboto-Bold;
color: var(--red-primary);
}
/* ------------------------------------------[ Project View • Project Block • Archived/Deadline/Reminders/Photos/Description ]------------------------------------------ */
#project .project-block.archived > .title,
#project .project-block.deadline .due { font: 14px / 24px Roboto-Regular; }
#project .project-block.deadline .due.bold-red { font-family: Roboto-Bold; color: var(--red-primary); }
#project .project-block.deadline .date { color: var(--txt-secondary); }
#project .project-block.reminders > .linked {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
font: 10px / 32px Roboto-Italic;
color: var(--txt-pink);
}
#project .project-block.photos > .options {
box-sizing: border-box;
padding: 0 12px 24px;
display: flex;
align-items: flex-start;
gap: 12px;
flex-wrap: wrap;
position: relative;
left: -16px;
width: calc(100% + 32px);
}
#project .project-block.photos > .options > div {
border: .5px solid rgba(var(--border-primary), 1);
border-radius: 20px;
padding: 0 16px;
position: relative;
font: 12px / 40px Roboto-Italic;
color: var(--txt-primary);
cursor: pointer;
}
#project .project-block.photos > .options > div.selected { border-color: currentColor; }
#project .project-block.photos > .options > div.blue.selected { color: var(--btn-blue-secondary); background: var(--btn-blue-primary); }
#project .project-block.photos > .options > div.pink.selected { color: var(--btn-pink-secondary); background: var(--btn-pink-primary); }
#project .project-block.photos > .options > div[count]:before {
content: attr(count);
border-radius: 8px;
padding: 0 4px;
position: absolute;
top: -4px;
right: -4px;
min-width: 8px;
text-align: center;
font: 10px / 16px Roboto-BlackItalic;
color: var(--badge-red-secondary);
background: var(--badge-red-primary);
box-shadow: var(--shadow-light);
}
#project .project-block.photos > .options > div.selected:before { content: none; }
#project .project-block.photos > .selection-wrap {
box-sizing: border-box;
margin: 24px auto auto;
border-radius: 28px;
padding: 8px;
display: none;
justify-content: flex-end;
gap: 8px;
position: sticky;
bottom: 32px;
height: 56px;
background: rgba(var(--bcg-primary), 1);
box-shadow: var(--shadow-fab);
}
#project .project-block.photos:has(.image-block.selected) > .selection-wrap { display: flex; }
#project .project-block.photos > .selection-wrap > .cancel-selection {
width: 32px;
background: var(--close-icon) no-repeat center / 24px;
cursor: pointer;
}
#project .project-block.photos > .selection-wrap > .selected {
margin-right: auto;
display: flex;
align-items: center;
font: 20px Roboto-Regular;
color: var(--txt-primary);
}
#project .project-block.photos > .selection-wrap > .archive-selected,
#project .project-block.photos > .selection-wrap > .delete-selected {
border-radius: 20px;
padding: 0 16px;
display: flex;
align-items: center;
font: 12px Roboto-Bold;
color: var(--btn-blue-secondary);
cursor: pointer;
}
#project .project-block.photos > .selection-wrap > .delete-selected {
padding: 0 24px;
color: var(--btn-pink-secondary);
background: var(--btn-pink-primary);
}
#project .project-block.photos > .total-photos {
margin: 24px 0 0;
text-align: center;
font-family: Roboto-Italic;
font-size: 12px;
color: var(--dark-gray);
}
#project .project-block.photos > .total-photos.hidden,
#project .project-block.photos:has(.image-block.selected) > .total-photos { display: none; }
#project .project-block.description > .description {
flex-grow: 1;
border-radius: 4px;
padding: 6px;
font: 16px / 20px Roboto-Regular;
color: var(--dark-slate-gray);
word-wrap: break-word;
white-space: pre-wrap;
outline: none;
}
#project .project-block.description > .description > * {
color: var(--txt-primary);
}
#project .project-block.description > .description a {
color: var(--badge-green-secondary);
background: var(--badge-green-primary);
}
#project .project-block.description > .description center { display: block; text-align: center; }
#project .project-block.description > .description strong { font-family: Roboto-Bold; }
#project .project-block.description > .description em { font-family: Roboto-Italic; }
#project .project-block.description > .description strong > em { font-family: Roboto-BoldItalic; }
#project .project-block.description > .description s { text-decoration: line-through; }
#project .project-block.description > .description code { font-family: monospace; color: var(--txt-primary); background: #ececec; }
@media (prefers-color-scheme: dark) {
#project .project-block.description > .description code {
background: #424242;
}
}
#project .button-block {
display: none;
position: absolute;
inset: auto 12px var(--fab-ctr-height);
}
#project .button-block.show { display: block; }
#project .modified,
#project .created {
display: flex;
justify-content: center;
height: 32px;
text-align: center;
font-size: 12px;
color: var(--dark-gray);
}
#project .modified { align-items: end; font-family: Roboto-Italic; }
#project .created { align-items: start; }
#project .routine-check {
margin: 24px 0 0;
border-radius: 32px;
position: relative;
text-align: center;
font: 16px / 56px Roboto-Bold;
color: var(--btn-blue-secondary);
background: var(--btn-blue-primary);
box-shadow: var(--shadow-light);
overflow: hidden;
cursor: pointer;
}
#project .routine-check.disabled { opacity: .5; }
#project .routine-check.disabled.checked,
#project .routine-check.disabled.animate { opacity: initial; }
#project .routine-check.animate,
#project .routine-check.checked:not(.animate){ cursor: default; }
#project .routine-check.checked:not(.animate){
background: var(--btn-green-primary);
color: var(--btn-green-secondary);
}
#project .routine-check > div { display: inline-block; }
#project .routine-check > div:nth-child(1){
position: absolute;
width: 24px;
height: 100%;
background: var(--circle-check-icon) no-repeat center / 24px;
opacity: 0;
}
#project .routine-check.checked:not(.animate) > div:nth-child(1){
transform: translate3d(calc(-100% - 8px), 0, 0);
opacity: 1;
}
#project .routine-check.animate { animation: routine-checked-bcg 3500ms 250ms ease-out forwards; }
#project .routine-check.animate:before {
content: "";
position: absolute;
inset: 0;
background: rgba(128, 128, 128, 0.1);
transform-origin: left;
animation: shrink-to-left 5000ms ease-out forwards;
}
#project .routine-check.animate > div:nth-child(1) { animation: routine-checked-icon 3500ms 250ms ease-out forwards; }
#project .routine-check.animate > div:nth-child(2) { animation: scale-up 250ms ease-out forwards; }
@keyframes routine-checked-bcg {
10%, 100% { color: var(--btn-green-secondary); background: var(--btn-green-primary); }
}
@keyframes routine-checked-icon {
0% { transform: rotate(120deg); }
10%, 100% { opacity: 1; transform: translate3d(calc(-100% - 8px), 0, 0); }
}
#project .expand-records {
margin: 0 auto;
border-radius: 20px;
width: 104px;
text-transform: uppercase;
font: 12px / 40px Roboto-Bold;
}
#project .expand-records.active { position: sticky; bottom: 16px; }
.routine-streak {
margin: 24px auto 0;
border-radius: 24px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: flex-end;
position: relative;
width: fit-content;
height: 116px;
}
.routine-streak > .title { font: 16px / 24px Roboto-Bold; color: var(--txt-primary); }
.routine-streak > .title.scale-up { animation: scale-up 250ms ease-in-out; }
.routine-streak > .sub-title { font: 10px / 16px Roboto-LightItalic; color: var(--txt-secondary); }
.routine-map {
margin: 24px 0 0;
border: .5px solid rgba(var(--border-primary), 1);
border-radius: 24px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 4px;
}
.routine-streak.active + .routine-map { border: .5px solid rgba(var(--color-orange), 1); }
.routine-map > .row {
display: flex;
gap: 4px;
}
.routine-map > .row > .column {
box-sizing: border-box;
border-radius: 25%;
aspect-ratio: 1 / 1;
width: calc(100% / 10);
background: rgba(var(--color-gray), 1);
}
.routine-map > .row > .column.today { background: rgba(var(--color-blue), 1); }
.routine-map > .row.inactive > .column,
.routine-map > .row > .column.blank { opacity: .25; }
.routine-map > .row.inactive > .column.today,
.routine-map > .row.inactive > .column.checked { opacity: 1; }
.routine-map > .row.current > .column:first-child { color: rgba(var(--color-blue), 1); opacity: 1; }
.routine-map > .row > .column.checked { background: rgba(var(--color-green), 1) var(--check-icon) no-repeat center / 50%; }
.routine-map > .row.active > .column.today { animation: short-flash 1000ms ease-in-out infinite; }
.routine-map > .row.active > .column.today.checked { animation: none; }
.routine-map > .row > .column.first {
display: flex;
align-items: center;
aspect-ratio: auto;
min-width: 30px;
font: 12px Roboto-Regular;
color: var(--txt-primary);
background: none;
}
.routine-map > .row > .column.perfect { background-color: rgba(var(--color-yellow), 1); }
.routine-map > .row > .column.beat { animation: beat 1s infinite !important; }
/* Project tasks */
#project .task-list {
display: flex;
flex-direction: column;
gap: 16px;
}
#project .task-list[empty]:before,
#project .task-list:empty:before {
content: "Task list empty!";
text-align: center;
font: 16px / 64px Roboto-Italic;
color: var(--txt-secondary);
}
#project .task-list[empty]:before { content: "All done!"; color: var(--green-primary); }
#project .task-list.editing,
#project .task-list.editing .task-name,
#project .task-list.editing .task-more { cursor: grabbing; }
#project .task-block {
border-radius: 16px;
border: .5px solid rgba(var(--border-primary), 1);
padding: 0 16px;
display: flex;
align-items: center;
position: relative;
background: rgba(var(--bcg-secondary), 1);
}
#project .task-block:has(.task-deadline){ padding: 24px 16px 0; }
#project .task-block:has(.floating-menu){ z-index: 1; }
#project .task-block.switch { animation: fade-in 1s forwards; }
#project .task-block > .repetitive {
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 24px;
background: var(--repeat-icon) no-repeat center / 12px;
}
#project .task-block + .subtasks {
padding: 0 8px;
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
}
#project .task-block + .subtasks:before {
content: "";
border-left: .5px solid rgba(var(--border-primary), 1);
position: absolute;
inset: -16px auto 0 36px;
background: rgba(var(--border-primary), 1);
}
#project .task-list.editing > .subtasks:before { content: none; }
#project .checked-tasks.hide ~ .task-block.checked,
#project .checked-tasks.hide ~ .subtasks,
#project .checked-tasks.hide ~ .seperator { display: none; }
.task-list .task-deadline {
border-bottom: .5px solid rgba(var(--border-primary), 1);
border-radius: 16px 16px 0 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
text-wrap: nowrap;
text-align: center;;
font: 10px / 24px Roboto-Bold;
color: var(--saturated-text);
background: rgba(var(--bcg-secondary), 1);
}
.task-list .task-deadline.flash { animation: short-flash 1000ms ease-in-out infinite; }
#project .task-badge,
#project .task-more { flex-shrink: 0; }
#project .task-badge {
border-radius: 50%;
position: relative;
width: 16px;
height: 16px;
text-align: center;
font: 8px / 16px Roboto-Bold;
color: #ffffff;
background: var(--red-primary);
}
#project .task-block.template .task-badge { background: rgba(var(--color-gray), 1); }
#project .task-block.subtask .task-badge { font: 8px / 16px Roboto-Bold; }
#project .task-badge:has(svg.done){ background: var(--green-primary); }
#project .task-badge > svg.done { margin: 2px; }
#project .task-badge > svg.done path { fill: #ffffff; }
svg.progress > * { fill: transparent; }
svg.progress > .inner { stroke: rgba(var(--border-primary), 1); }
svg.progress > .outter { stroke: var(--green-primary); }
.overview-block .count > svg.progress,
#project .task-badge > svg.progress { position: absolute; }
.overview-block .count > svg.progress { top: -6px; left: -6px; }
#project .task-badge > svg.progress { top: -4px; left: -4px; }
.overview-block .count > svg.progress,
#project .task-badge > svg.progress { transform: rotate(90deg); }
#activity-overview .count > svg.progress { transform: rotate(270deg); }
.overview-block .count > svg.progress { width: 36px; height: 36px; }
#project .task-badge > svg.progress { width: 24px; height: 24px; }
#project .task-name {
padding: 16px;
flex-grow: 1;
font: 14px / 20px Roboto-Regular;
word-break: break-word;
color: var(--txt-primary);
}
#project .task-block + .subtasks .task-name { font: 12px / 16px Roboto-Light; }
#project .task-block.template .task-name:after {
content: "template";
font-family: Roboto-LightItalic;
margin-left: 12px;
color: var(--dark-gray);
}
#project .task-more {
position: relative;
width: 24px;
height: 48px;
background: var(--vertical-more-icon) no-repeat center / 20px;
cursor: pointer;
}
#project .task-block.dragging > .task-more,
#project .task-more.movable:has(.floating-menu){ background-image: var(--drag-indicator-icon); }
#project .task-more.movable:has(.floating-menu){ cursor: grab; }
/* Indexes records styling */
.index-wrap { padding: 24px 0 0; position: relative; }
.container > .index-wrap { margin: 0 16px; cursor: pointer; }
.index-wrap > .goal,
.index-wrap > .record {
border-radius: 8px;
position: absolute;
top: 28px;
left: 0;
width: 100%;
height: 8px;
}
.index-wrap > .record.reverse,
.index-wrap > .goal { background: var(--btn-blue-primary); }
.index-wrap > .record,
.index-wrap > .goal.reverse {
background: repeating-linear-gradient(-45deg, var(--btn-blue-primary), var(--btn-blue-primary) 2px, rgba(var(--bcg-secondary), 1) 2px, rgba(var(--bcg-secondary), 1) 4px);
}
.index-wrap > .bar {
border-radius: 8px;
position: relative;
min-width: 16px;
height: 16px;
background: var(--btn-blue-primary);
}
.index-wrap > .bar.below { background: var(--btn-pink-primary); }
.index-wrap > .bar.above { background: var(--btn-green-primary); }
.index-wrap > .bar > .name {
margin: 0 4px 16px 0;
position: absolute;
inset: auto 0 0;
text-align: right;
font: 14px / 24px Roboto-BoldItalic;
color: var(--btn-blue-secondary);
white-space: nowrap;
}
.index-wrap > .info { text-align: left; }
.index-wrap > .info > div {
display: inline-block;
position: relative;
font: 12px / 24px Roboto-Regular;
color: var(--txt-primary);
}
.index-wrap > .info > .seperator { margin: 0 4px; }
.index-wrap > .info > div:nth-child(1){ margin-left: 4px; }
.index-wrap > .info > div:nth-child(3){ font-family: Roboto-Bold; }
.index-wrap > .info > div:nth-child(5){ font-family: Roboto-Italic; }
/* ------------- */
#project .daily-activity,
#project .daily-indexes { transition: height 300ms ease-out; overflow: hidden; }
#project .daily-activity.instant,
#project .daily-indexes.instant { transition-duration: initial; }
#project .daily-activity { height: 80px; }
#project .daily-indexes { height: 64px; }
.wrap.cards {
padding: 0 16px;
display: flex;
justify-content: flex-start;
gap: 16px;
position: relative;
left: -16px;
width: 100%;
overflow: auto;
}
.wrap.cards > .card {
border: .5px solid rgba(var(--border-primary), 1);
border-radius: 16px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 16px;
}
.wrap.cards > .card.hide { display: none; }
.wrap.cards > .card > .title,
.wrap.cards > .card > .data {
text-align: center;
color: var(--txt-primary);
white-space: nowrap;
}
.wrap.cards > .card > .title { font: 16px / 32px Roboto-Bold; }
.wrap.cards > .card > .data { font: 12px / 40px Roboto-Regular; }
.wrap.cards > .card.editable > .data {
border-radius: 20px;
padding: 0 16px;
min-width: 40px;
min-height: 40px;
color: var(--btn-blue-secondary);
background: var(--btn-blue-primary);
box-shadow: var(--shadow-light);
cursor: pointer;
}
.wrap.cards > .card.editable > .data:empty { background: var(--btn-blue-primary) var(--plus-icon) no-repeat center / 16px; }
.wrap.records {
margin: 16px 0 0;
border: .5px solid rgba(var(--border-primary), 1);
border-radius: 16px;
padding: 40px 0;
display: flex;
flex-direction: column;
gap: 32px;
position: relative;
text-align: center;
}
.wrap.records > .calendar {
border-radius: 25%;
position: absolute;
top: 8px;
right: 8px;
width: 40px;
height: 40px;
background: var(--btn-blue-primary) var(--calendar-icon) no-repeat center / 24px;
box-shadow: var(--shadow-light);
cursor: pointer;
}
.wrap.records > .header { position: relative; text-align: center; }
.wrap.records > .header:before {
content: "";
position: absolute;
top: calc(50% - 0.75px);
left: 0;
width: 100%;
height: .5px;
background: rgba(var(--border-primary), 1);
}
.wrap.records > .header > .title {
box-sizing: border-box;
border-radius: 16px;
border: .5px solid rgba(var(--border-primary), 1);
padding: 0 64px;
display: inline-flex;
align-items: center;
position: relative;
height: 32px;
font: 16px Roboto-Bold;
color: var(--txt-primary);
background: rgba(var(--bcg-secondary), 1);
}
.daily-activity > .container { position: relative; }
.daily-activity.expanded > .container.records:before {
content: "";
position: absolute;
top: 40px;
bottom: 40px;
left: 26px;
width: 4px;
transform: translateX(-50%);
background: var(--btn-green-primary);
}
.daily-activity > .container.empty { padding: 32px 0; text-align: center; }
.daily-activity > .container.empty:before {
content: "";
position: absolute;
inset: 50% 0 0;
transform: translateY(-50%);
height: .5px;
background: linear-gradient(to right, transparent 30px, var(--badge-red-secondary) calc(50% - 64px), var(--badge-red-secondary) calc(50% + 64px), transparent calc(100% - 30px));
}
.daily-activity > .container.empty > .title {
box-sizing: border-box;
border: .5px solid var(--badge-red-secondary);
border-radius: 8px;
padding: 0 16px;
display: inline-flex;
align-items: center;
position: relative;
height: 16px;
font: 10px Roboto-Bold;
color: var(--badge-red-secondary);
background: var(--badge-red-primary);
}
#project .date-block {
padding: 8px 0;
position: relative;
text-align: center;
font-size: 16px;
color: var(--txt-primary);
cursor: pointer;
}
#project .date-block > .records {
box-sizing: border-box;
border: .5px solid var(--badge-orange-secondary);
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 30px;
right: 16px;
width: 20px;
height: 20px;
font: 10px Roboto-BlackItalic;
color: var(--badge-orange-secondary);
background: var(--badge-orange-primary);
cursor: pointer;
}
#project .date-block > .dot {
border-radius: 50%;
position: absolute;
top: 30px;
left: 16px;
width: 20px;
height: 20px;
background: var(--btn-green-primary);
}
#project .date-block:last-child > .dot { top: auto; bottom: 30px; }
#project .date-block .medal {
border-radius: 50%;
position: absolute;
top: 2px;
left: 0;
width: 20px;
height: 20px;
font: 12px / 20px Roboto-Black;
color: #ffffff;
transform: translateX(calc(-100% - 8px)) rotateZ(10deg);
}
#project .date-block .medal[data-place="1"] { background: #D6AF36; }
#project .date-block .medal[data-place="1"]:before,
#project .date-block .medal[data-place="1"]:after { border-bottom-color: #D6AF36; }
#project .date-block .medal[data-place="2"] { background: #A7A7AD; }
#project .date-block .medal[data-place="2"]:before,
#project .date-block .medal[data-place="2"]:after { border-bottom-color: #A7A7AD; }
#project .date-block .medal[data-place="3"] { background: #A77044; }
#project .date-block .medal[data-place="3"]:before,
#project .date-block .medal[data-place="3"]:after { border-bottom-color: #A77044; }
#project .date-block .medal:before,
#project .date-block .medal:after {
content: "";
position: absolute;
border-bottom-width: 14px;
border-bottom-style: solid;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
top: 18px;
z-index: -1;
}
#project .date-block .medal:before { left: -2px; transform: rotate(-140deg); }
#project .date-block .medal:after { right: -2px; transform: rotate(140deg); }
#project .date-block > .date { font-family: Roboto-Black; }
#project .date-block > .date,
#project .date-block > .duration { line-height: 32px; }
#project .date-block .duration > .total { display: inline-block; position: relative; }
.task-list .checked-tasks,
#deleteProject {
position: relative;
text-align: center;
font: 18px / 64px Roboto-Black;
cursor: pointer;
}
#deleteProject { margin: 0; border-radius: 4px; color: #ffffff; background: var(--red-primary); }
#deleteProject > svg {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 16px;
width: 28px;
height: 28px;
fill: #ffffff;
}
.task-list .checked-tasks {
color: var(--txt-primary);
background: rgba(var(--bcg-secondary), 1);
background-position: 16px center, calc(100% - 16px) center;
background-repeat: no-repeat;
}
.task-list .checked-tasks {
border: .5px solid rgba(var(--color-blue), 1);
border-radius: 16px;
font-size: 12px;
line-height: 48px;
background-image: var(--checkbox-checked-icon), var(--collapse-icon);
background-size: 20px;
}
.task-list .checked-tasks.hide { border-color: rgba(var(--border-primary), 1); background-image: var(--checkbox-checked-icon), var(--expand-icon); }
.task-list.editing .checked-tasks { opacity: .2; transition: opacity 0.15s ease-out; pointer-events: none; }
.task-list .checked-tasks[count]:before {
content: attr(count);
position: absolute;
left: 36px;
font: 10px / 16px Roboto-BlackItalic;
}
.task-list .checked-tasks[count]:before { top: 4px; color: var(--badge-green-secondary); }
.popup .check-field {
margin: 0 0 16px;
border-radius: 24px;
border: .5px solid rgba(var(--border-primary), 1);
padding: 16px;
position: relative;
cursor: pointer;
}
.check-field > .title {
font: 14px / 24px Roboto-Regular;
color: var(--txt-primary);
}
.check-field > .desc {
max-width: calc(100% - 68px);
text-wrap: balance;
font: 10px / 12px Roboto-Light;
color: var(--txt-secondary);
}
.check-field > .switch {
border-radius: 16px;
border: 2px solid #747775;
position: absolute;
top: calc(50% - 16px);
right: 16px;
width: 48px;
height: 28px;
background: #e1e3e1;
transition: background 200ms;
}
.check-field.checked > .switch { border-color: #0b57d0; background: #0b57d0; }
.check-field > .switch > .dot {
border-radius: 10px;
position: absolute;
top: 4px;
left: 4px;
width: 20px;
height: 20px;
background: #747775;
transition: transform 200ms;
overflow: hidden;
}
.check-field.checked > .switch > .dot { transform: translate3d(20px, 0, 0); background: #ffffff; }
.check-field > .switch > .dot > svg { margin: 4px; }
.check-field > .switch > .dot > svg:nth-child(1){ fill: #e1e3e1; }
.check-field > .switch > .dot > svg:nth-child(2){ fill: #041e49; }
.check-field.checked > .switch > .dot > svg:nth-child(1){ display: none; }
/* ---- */
#main > .header,
.modal > .header {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: env(safe-area-inset-top);
left: 0;
width: 100%;
height: var(--header-height);
pointer-events: none;
}
#main > .header > .title,
.modal > .header > .title {
transform: translateY(20px);
text-align: center;
text-wrap: balance;
font: 32px / 40px Roboto-Bold;
color: var(--saturated-text);
word-break: break-word;
pointer-events: auto;
}
#main > .header > .title:not(:empty):after {
content: "";
border-radius: 8px;
position: absolute;
top: -8px;
right: -20px;
width: 12px;
height: 12px;
background: rgba(var(--color-blue), 1);
animation: short-flash 500ms linear infinite;
}
#app.offline-queue-empty.sw-registered.time-synced.user-synced.subscription-synced.version-checked #main > .header > .title:after { content: none; }
#app:not(.offline-queue-empty) #main > .header > .title:after,
#app.sw-failed #main > .header > .title:after,
#app.user-failed #main > .header > .title:after,
#app.subscription-failed #main > .header > .title:after {
background: rgba(var(--color-red), 1);
animation: none;
}
#main > .header > .title.greeting { animation: greeting-in 250ms ease-out forwards; }
#main > .header > .title.greeting:before {
content: "";
position: absolute;
left: 50%;
width: 40px;
height: 40px;
animation: greeting-icon-in 3500ms 250ms ease-out forwards;
transform: translate3d(-50%, 0, 0) scale3d(0, 0, 0);
opacity: 0;
z-index: -1;
}
#main > .header > .title.greeting.roll-back:before { animation: greeting-icon-out 3500ms ease-out forwards; }
#main > .header > .title.morning:before { background: url(assets/icons/sun_behind_cloud_color.svg) no-repeat center / 40px; }
#main > .header > .title.afternoon:before { background: url(assets/icons/sun_with_face_color.svg) no-repeat center / 40px; }
#main > .header > .title.evening:before { background: url(assets/icons/crescent_moon_color.svg) no-repeat center / 40px; }
@keyframes greeting-icon-in {
10%, 100% { opacity: 1; transform: translate3d(-50%, -125%, 0) scale3d(1, 1, 1); }
}
@keyframes greeting-icon-out {
0% { opacity: 1; transform: translate3d(-50%, -125%, 0) scale3d(1, 1, 1); }
10%, 100% { opacity: 0; transform: translate3d(-50%, 0, 0) scale3d(0, 0, 0); }
}
#project > .header > .title {
padding: 0 16px;
white-space: nowrap;
overflow-x: scroll;
}
#project > .header > .buttons {
display: flex;
gap: 12px;
position: absolute;
inset: auto auto 32px;
}
#project > .header > .buttons > div {
border-radius: 50%;
position: relative;
width: 40px;
height: 40px;
background: var(--btn-gray-primary);
box-shadow: var(--shadow-light);
pointer-events: initial;
cursor: pointer;
z-index: 0;
}
#project > .header > .buttons > div.disabled { opacity: .5; pointer-events: none; cursor: default; }
#project > .header > .buttons > .tag { background: var(--btn-gray-primary) var(--tag-icon) no-repeat center / 24px; }
#project > .header > .buttons > .tag.active{ background: none; }
#project > .header > .buttons > .share.active,
#project > .header > .buttons > .pin.active { background: var(--blue-primary); }
#project > .header > .buttons > div:before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
}
#project > .header > .buttons > div:after {
content: attr(title);
position: absolute;
inset: auto -6px -32px -6px;
text-align: center;
font: 12px / 32px Roboto-LightItalic;
color: var(--txt-primary);
}
#project > .header > .buttons > .tag.active:before { border-radius: 50%; border: 3px solid rgba(var(--bcg-primary), 0.5); }
#project > .header > .buttons > .edit:before { background: var(--edit-icon) no-repeat center / 24px; }
#project > .header > .buttons > .share:before { background: var(--share-icon) no-repeat center / 24px; }
#project > .header > .buttons > .archive:before { background: var(--archive-icon) no-repeat center / 24px; }
#project > .header > .buttons > .archive.archived:before { background: var(--unarchive-icon) no-repeat center / 24px; }
#project > .header > .buttons > .pin:before { transform: rotate(32deg); background: var(--pin-icon) no-repeat center / 24px; }
#project > .header > .buttons > .share.active:before,
#project > .header > .buttons > .pin.active:before { background: none; }
#project > .header > .buttons > div > svg { margin: 8px; }
#project > .header > .buttons > .tag > svg { fill: rgba(var(--bcg-primary), 0.5); }
#project > .header > .buttons > .share > svg,
#project > .header > .buttons > .pin > svg { fill: #ffffff; }
#project > .header > .buttons > .pin > svg { transform: rotate(32deg); }
.project {
box-sizing: border-box;
margin: 0 0 12px;
border-radius: 32px;
border: .5px solid rgba(var(--border-primary), 1);
display: inline-block;
position: relative;
width: calc(50% - 6px);
background: rgba(var(--bcg-secondary), 1);
}
.project.hide { display: none; }
.project.right { float: right; }
.project.left { float: left; }
.project.new { animation: fade-in 2000ms linear; }
.project .task-badge {
border-radius: 50%;
position: absolute;
top: 0;
right: -4px;
width: 24px;
height: 24px;
text-align: center;
font: 12px / 24px Roboto-Bold;
color: #ffffff;
background: var(--red-primary);
box-shadow: var(--shadow-light);
}
.project .task-badge.hide { display: none; }
.project .task-badge > .number.scale-up { animation: scale-up 250ms 250ms ease-in forwards; }
#week-overview.clicked ~ #due-today-overview,
#week-overview.clicked ~ .active-activity,
#week-overview.clicked ~ .overview-block,
#week-overview.clicked ~ #filter-projects,
#week-overview.clicked ~ .section-title,
#week-overview.clicked ~ #active-projects > .section-title,
#active-projects.filtered > .project,
#active-projects.filtered > .tag {
animation: quarter-fade-out 250ms ease-out forwards;
pointer-events: none;
}
#active-projects.filtered > .project.highlight {
animation: none;
pointer-events: auto;
}
#active-projects.filtered .project.highlight.current { border-color: rgba(var(--color-pink), 1); }
#main:has(#active-projects.editing) #week-overview,
#main:has(#active-projects.editing) #due-today-overview,
#main:has(#active-projects.editing) .active-activity,
#main:has(#active-projects.editing) .overview-block,
#main:has(#active-projects.editing) #filter-projects { display: none; }
#main:has(#active-projects.editing) ~ #fabCtr > #view-menu { background: var(--red-primary); }
#main:has(#active-projects.editing) ~ #fabCtr > #view-menu > svg { transform: rotate3d(0, 0, 1, 45deg); }
#main:has(#active-projects.editing) ~ #fabCtr > #main-menu.fab { background: var(--green-primary); }
#main:has(#active-projects.editing:has(.tag[style])) ~ #fabCtr > #navigation,
#main:has(#active-projects.editing:has(.tag[style])) ~ #fabCtr > #view-menu,
#main:has(#active-projects.editing:has(.tag[style])) ~ #fabCtr > #main-menu { animation: scale-out 200ms ease-out forwards; }
#projects:has(#active-projects.editing) > .section-title,
#active-projects.editing > .section-title,
#active-projects.editing > .project { display: none !important; }
#active-projects.editing > .tag[style] { cursor: grabbing; }
#active-projects.editing > .tag.switch { animation: fade-in 1s forwards; }
#active-projects.editing > .tag > .more {
background: var(--drag-indicator-icon) no-repeat center / 24px;
opacity: initial;
cursor: grab;
}
#active-projects.editing > .tag[style] > .edit { cursor: grabbing; }
.project .shared-badge {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 24px;
height: 40px;
background: var(--shared-icon) no-repeat center / 12px;
pointer-events: none;
}
.project .status-badge {
border-radius: 50%;
position: absolute;
top: 16px;
left: calc(50% + 12px);
width: 8px;
height: 8px;
}
.project .status-badge.blue { background-color: rgba(var(--color-blue), 1); animation: long-flash 1500ms linear infinite; }
.project .status-badge.yellow { background-color: rgba(var(--color-yellow), 1); animation: short-flash 500ms linear infinite; }
.project .status-badge.red { background-color: rgba(var(--color-red), 1); animation: short-flash 500ms linear infinite; }
.project .online {
border-radius: 8px;
padding: 0 4px;
position: absolute;
top: 50%;
left: 0;
transform: translate(-100%, -50%);
min-width: 8px;
text-align: center;
font: 10px / 16px Roboto-BlackItalic;
color: #ffffff;
background: var(--green-primary);
}
.project .status-badge.yellow + .online,
.project .status-badge.red + .online { display: none; }
.project .name {
padding: 40px 16px;
color: var(--txt-primary);
text-align: center;
text-wrap: balance;
font: 20px / 24px Roboto-Regular;
word-break: break-word;
cursor: pointer;
}
.project .deadline,
.project .reminder {
margin: 16px 16px 0 16px;
border-radius: 20px;
text-align: center;
white-space: nowrap;
font: 14px / 40px Roboto-Bold;
color: var(--saturated-text);
background-color: rgba(var(--bcg-primary), 1);
}
.project .deadline { box-sizing: border-box; height: 40px; }
.task-deadline[duets].soon,
.project .deadline.soon { color: var(--badge-blue-secondary); background-color: var(--badge-blue-primary); }
.project .deadline.soon { border: .5px solid var(--badge-blue-secondary); }
.task-deadline[duets].today,
.project .deadline.today { color: var(--badge-orange-secondary); background-color: var(--badge-orange-primary); }
.project .deadline.today { border: .5px solid var(--badge-orange-secondary); }
.task-deadline[duets].passed,
.project .deadline.passed { color: var(--badge-red-secondary); background-color: var(--badge-red-primary); }
.project .deadline.passed { border: .5px solid var(--badge-red-secondary); }
.project .deadline.soon { animation: short-flash 1500ms ease-in-out infinite; }
.project .deadline.today { animation: short-flash 1000ms ease-in-out infinite; }
.project .deadline.passed { animation: short-flash 500ms ease-in-out infinite; }
#active-projects.filtered .project .deadline,
#active-projects.filtered .project .day,
#active-projects.filtered .project .task-badge { animation: none; }
#active-projects.filtered .project.current .deadline.flash,
#active-projects.filtered .project.current .day.flash,
#active-projects.filtered .project.current .task-badge.flash { animation: short-flash 1000ms ease-in-out infinite; }
.project .reminder {
display: flex;
flex-wrap: wrap;
align-items: center;
height: 40px;
background: none;
}
.project .reminder .days {
display: flex;
gap: 8px;
width: 100%;
}
.project .reminder .day {
box-sizing: border-box;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: calc(100% / 7);
aspect-ratio: 1 / 1;
background: rgba(var(--color-gray), 0.25);
}
.project .reminder .day.missed,
.project .reminder .day.active { background: rgba(var(--color-gray), 1); }
.project .reminder .day.today.active { animation: short-flash 1000ms ease-in-out infinite; background: rgba(var(--color-blue), 1); }
.project .reminder .day.today.active.checked { animation: none; }
.project .reminder .day.today.checked,
.project .reminder .day.checked { background: rgba(var(--color-green), 1); fill: #ffffff; }
.project .reminder .day:after {
content: attr(data-day);
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
font: 8px / 12px Roboto-Light;
color: var(--txt-secondary);
}
.project .reminder .day.today:after { font-family: Roboto-Black; color: var(--txt-primary); }
.project .reminder .day > svg { margin: 2px; }
.project .output {
display: none;
box-sizing: border-box;
padding: 12px 4px;
position: absolute;
left: 50%;
width: 100%;
transform: translate(-50%, -40px);
text-align: center;
white-space: nowrap;
overflow: auto;
}
.project .output > div {
margin: 0 4px;
border-radius: 4px;
padding: 0 8px;
display: inline-flex;
gap: 8px;
position: relative;
white-space: nowrap;
font: 10px / 16px Roboto-Bold;
box-shadow: var(--shadow-light);
overflow: hidden;
}
.project .output > div:has(div){ padding-right: 0; }
.project .output > .activity { background: var(--badge-blue-primary); color: var(--badge-blue-secondary); }
.project .output > .indexes { background: var(--badge-violet-primary); color: var(--badge-violet-secondary); }
.project .output > div > div {
padding: 0 4px;
min-width: 8px;
height: 16px;
text-align: center;
font: 10px / 16px Roboto-BlackItalic;
color: var(--badge-orange-secondary);
background: var(--badge-orange-primary);
}
/* ------------------------------------------[ Loading spinner ]------------------------------------------ */
.spinner { color: var(--icon-color); animation: rotate 1.4s linear infinite; }
.spinner circle { stroke: currentColor; stroke-dasharray: 80px, 200px; stroke-dashoffset: 0; animation: animation-spinner 1.4s ease-in-out infinite; }
.popup .card > .body > div:has( > .spinner){ display: flex; justify-content: center; align-items: center; min-height: 80px; }
.popup .footer > .button.loading > .spinner { margin: 4px 0; }
.popup .footer > .button.full.loading > .spinner { margin: 0; }
/* ------------------------------------------[ Calendar ]------------------------------------------ */
.calendar-block { margin: 0 auto; width: fit-content; }
.calendar-block .header { padding: 8px 16px; display: flex; justify-content: space-between; }
.calendar-block .header > .title {
display: flex;
font: 16px Roboto-Bold;
color: var(--txt-primary);
align-items: center;
}
.calendar-block .header > .prev,
.calendar-block .header > .next {
border-radius: 25%;
width: 40px;
height: 40px;
background: var(--btn-blue-primary);
background-position: center;
background-repeat: no-repeat;
background-size: 16px;
box-shadow: var(--shadow-light);
cursor: pointer;
}
.calendar-block .header > .prev { background-image: var(--back-icon); }
.calendar-block .header > .next { background-image: var(--next-icon); }
.calendar-block .header > .prev.disabled,
.calendar-block .header > .next.disabled { opacity: .5; pointer-events: none; cursor: default; }
.calendar-block .body { border-radius: 16px; border: .5px solid rgba(var(--border-primary), 1); display: flex; flex-direction: column; gap: 8px; }
.calendar-block .body > .row { padding: 0 8px; display: flex; gap: 8px; }
.calendar-block .body > .row:first-child { border-bottom: .5px solid rgba(var(--border-primary), 1); padding: 8px; }
.calendar-block .body > .row:last-child { padding: 0 8px 8px; }
.calendar-block .body > .row > .column {
border-radius: 25%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 32px;
height: 32px;
background: var(--btn-gray-primary);
}
.calendar-block .body > .row:first-child > .column { background: none; }
.calendar-block .body > .row > .column.disabled { opacity: .25; }
.calendar-block .body > .row > .column.today { outline: 2px solid rgba(var(--color-blue), 1); }
.calendar-block .body > .row > .column.active { background: var(--btn-green-primary); }
.calendar-block .column > .badge {
border-radius: 8px;
padding: 0 4px;
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
min-width: 8px;
text-align: center;
font: 10px / 16px Roboto-BlackItalic;
color: var(--badge-orange-secondary);
background: var(--badge-orange-primary);
box-shadow: var(--shadow-light);
}
.summary-block {
border-radius: 16px;
border: .5px solid rgba(var(--border-primary), 1);
padding: 16px;
display: flex;
flex-direction: column;
gap: 16px;
}
.summary-block > .seperator { margin: 0 16px; border-top: .5px solid rgba(var(--border-primary), 1); }
.summary-block > .wrap { display: flex; justify-content: space-between; }
.summary-block .wrap > * {
display: flex;
flex-direction: column;
font-size: 12px;
line-height: 24px;
}
.summary-block .wrap > :nth-child(1){ align-items: flex-start; font-family: Roboto-Regular; }
.summary-block .wrap > :nth-child(2){ align-items: flex-end; font-family: Roboto-BoldItalic; }
.summary-block .wrap.activity > :nth-child(2){ color: var(--badge-blue-secondary); }
.summary-block .wrap.indexes > :nth-child(2){ color: var(--badge-violet-secondary); }
/* ------------------------------------------[ Date picker ]------------------------------------------ */
.datepicker { position: relative; overflow: hidden; }
.datepicker:before,
.datepicker:after {
content: "";
position: absolute;
height: 64px;
background: rgba(var(--bcg-secondary), 0.75);
backdrop-filter: blur(1px) grayscale(1);
pointer-events: none;
}
.datepicker:before { inset: 0 0 auto; }
.datepicker:after { inset: auto 0 0; }
.datepicker > div {
padding: 64px 0;
display: inline-flex;
flex-direction: column;
width: calc(100% / 3);
height: 64px;
scroll-snap-type: y mandatory;
overflow: auto;
}
.datepicker > div > div {
display: flex;
justify-content: center;
font: 18px / 64px Roboto-Black;
color: var(--txt-primary);
scroll-snap-align: center;
cursor: pointer;
}
.datepicker > div > div.hide { display: none; }
.deadline-title {
text-align: center;
font: 12px / 24px Roboto-BlackItalic;
color: var(--txt-primary);
}
.deadline-title.update { animation: subtle-scale-up 250ms ease-in-out forwards; }
.select-buttons {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.select-buttons > .title,
.select-buttons > .note { width: 100%; text-align: center; }
.select-buttons > .title { font: 12px / 40px Roboto-Bold; color: var(--txt-primary); }
.select-buttons > .note { font: 10px / 40px Roboto-LightItalic; color: var(--txt-pink); }
.select-buttons > .button {
border-radius: 16px;
padding: 0 12px;
font: 12px / 32px Roboto-Regular;
color: var(--btn-blue-secondary);
background: var(--btn-blue-primary);
cursor: pointer;
}
.select-buttons > .button.active { color: var(--btn-blue-primary); background: var(--btn-blue-secondary); }
.select-buttons > .button.pink { color: var(--btn-pink-secondary); background: var(--btn-pink-primary); }
.select-buttons > .button.pink.active { color: var(--btn-pink-primary); background: var(--btn-pink-secondary); }
.task-list .select-buttons { border-radius: 16px; border: .5px solid rgba(var(--border-primary), 1); padding: 8px 16px; }
.task-list .select-buttons > .button { font-family: Roboto-Italic; box-shadow: var(--shadow-light); }
/* ------------------------------------------[ Time picker ]------------------------------------------ */
.date-and-time > .output.update { animation: subtle-scale-up 250ms ease-in-out forwards; }
.date-and-time > .output,
.date-and-time > .edit { display: inline-block; }
.date-and-time > .edit {
border-radius: 16px;
position: absolute;
width: 32px;
height: 32px;
transform: translate(8px, -4px);
background: var(--btn-pink-primary) var(--edit-icon) no-repeat center / 16px;
box-shadow: var(--shadow-light);
cursor: pointer;
}
.time-picker {
display: flex;
align-items: center;
justify-content: center;
position: relative;
inset: auto -24px auto;
width: calc(100% + 48px);
}
.time-picker > .time-section,
.time-picker .digit-control {
display: flex;
align-items: center;
position: relative;
}
.time-picker .digit-control { flex-direction: column; }
.time-picker > .time-section > .title {
position: absolute;
inset: auto 0 40px;
text-align: center;
text-transform: capitalize;
font: 10px / 12px Roboto-Italic;
}
.time-picker > .separator {
padding: 0 0 16px;
width: 24px;
text-align: center;
font-size: 24px;
}
.time-picker .digit {
padding: 0 0 16px;
width: 40px;
text-align: center;
font: 56px / 72px Roboto-Black;
color: var(--txt-primary);
user-select: none;
}
.time-picker .arrow-up,
.time-picker .arrow-down {
border-radius: 16px;
width: 32px;
height: 32px;
box-shadow: var(--shadow-light);
user-select: none;
cursor: pointer;
}
.time-picker .arrow-up { background: var(--btn-blue-primary) var(--collapse-icon) no-repeat center / 24px; }
.time-picker .arrow-down { background: var(--btn-blue-primary) var(--expand-icon) no-repeat center / 24px; }
/* ------------------------------------------[ Number picker ]------------------------------------------ */
.number-picker {
position: relative;
left: -24px;
width: calc(100% + 48px);
}
.number-picker > div:nth-child(1){
margin: 0 0 48px;
padding: 0 24px;
display: flex;
align-items: center;
}
.number-picker > div:nth-child(3){
text-align: center;
font: 12px / 48px Roboto-Bold;
color: var(--txt-primary);
}
.number-picker > div:nth-child(2),
.number-picker > div:nth-child(4){
padding: 0 16px;
display: flex;
justify-content: flex-start;
gap: 16px;
overflow: auto;
}
.number-picker .number-switch {
border-radius: 16px;
padding: 0 12px;
min-width: 26px;
text-align: center;
font: 12px / 32px Roboto-Regular;
white-space: nowrap;
background-color: var(--btn-blue-primary);
color: var(--btn-blue-secondary);
user-select: none;
cursor: pointer;
}
.number-picker > div:nth-child(4) .number-switch {
font-family: Roboto-BoldItalic;
background-color: var(--btn-gray-primary);
color: var(--btn-gray-secondary);
}
.number-picker .number-switch.active { color: var(--btn-blue-primary); background-color: var(--btn-blue-secondary); }
.number-picker .number {
flex-grow: 1;
position: relative;
text-align: center;
font: 56px / 80px Roboto-Black;
color: var(--txt-primary);
user-select: none;
}
.number-picker .number:before {
content: attr(data-label);
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
font: 12px / 24px Roboto-Italic;
}
.number-picker .number-minus { background: var(--btn-blue-primary) var(--minus-icon) no-repeat center / 24px; }
.number-picker .number-plus { background: var(--btn-blue-primary) var(--plus-icon) no-repeat center / 24px; }
.number-picker .number-minus,
.number-picker .number-plus {
border-radius: 20px;
flex-shrink: 0;
width: 40px;
height: 40px;
cursor: pointer;
}
/* ------------------------------------------[ Week overview & Missed date alert ]------------------------------------------ */
#week-overview { padding: 12px 12px 0; position: relative; }
#week-overview.hide { display: none; }
#week-overview.clicked {
position: sticky;
top: env(safe-area-inset-top);
z-index: 1;
}
#week-overview .container {
border: .5px solid rgba(var(--border-primary), 1);
border-radius: 40px;
padding: 8px;
display: flex;
justify-content: center;
position: relative;
background: rgba(var(--bcg-secondary), 1);
}
#week-overview.scrolled .container { box-shadow: var(--shadow-light); }
#week-overview .wrap {
box-sizing: border-box;
border-radius: 50%;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
width: calc(100% / 7);
max-width: 64px;
aspect-ratio: 1 / 1;
color: var(--txt-secondary);
}
#week-overview .wrap.enabled { color: var(--txt-primary); cursor: pointer; }
#week-overview .wrap.today { color: var(--badge-orange-secondary); }
#week-overview .wrap.today:has(.badge:empty) { color: var(--badge-green-secondary); }
#week-overview .wrap.missed { display: none; color: var(--badge-red-secondary); }
#week-overview .wrap.missed.enabled { display: inline-flex; }
#week-overview .wrap.active { border: .5px solid; background: var(--btn-blue-primary); cursor: default; }
#week-overview .wrap.missed.active { background: var(--badge-red-primary); }
#week-overview .wrap.today.active { background: var(--badge-orange-primary); }
#week-overview:has(.wrap.missed.enabled) .wrap:nth-child(8){ display: none; }
#week-overview .badge {
box-sizing: border-box;
border-radius: 6px;
padding: 0 2px;
display: none;
position: absolute;
top: -6px;
min-width: 12px;
text-align: center;
font: 8px / 12px Roboto-BlackItalic;
color: var(--badge-gray-secondary);
background: var(--badge-gray-primary);
box-shadow: var(--shadow-light);
}
#week-overview .wrap.enabled > .badge { display: block; }
#week-overview .wrap.missed .badge { animation: bounce 1s infinite; color: var(--badge-red-secondary); background: var(--badge-red-primary); }
#week-overview .wrap.today .badge { animation: bounce-with-pause 2s infinite; color: var(--badge-orange-secondary); background: var(--badge-orange-primary); }
#week-overview.clicked .wrap.missed.active .badge { animation: none; }
#week-overview.clicked .wrap.today.active .badge { animation: none; }
#week-overview .name,
#week-overview .date { display: flex; opacity: .5; }
#week-overview .wrap.today > div,
#week-overview .wrap.enabled > div { opacity: 1; }
#week-overview .name { align-items: flex-end; font: 10px Roboto-Light; }
#week-overview .wrap.today > .name { font-family: Roboto-Bold; }
#week-overview .wrap.missed > .name {
margin: 0;
border-radius: 12px;
justify-content: center;
align-items: center;
width: 100%;
height: 24px;
font: 10px Roboto-Bold;
}
#week-overview .date { align-items: flex-start; font: 12px Roboto-Bold; }
#week-overview .wrap.missed > .date { display: none; }
#week-overview-buttons {
display: flex;
justify-content: center;
align-items: center;
gap: 32px;
position: fixed;
inset: auto 0 calc(36px + env(safe-area-inset-bottom));
pointer-events: none;
}
#clear-week-overview,
#move-to-prev-week-overview,
#move-to-next-week-overview {
border-radius: 24px;
display: inline-block;
width: 48px;
height: 48px;
box-shadow: var(--shadow-fab);
opacity: 1;
animation: scale-in 200ms ease-out forwards;
transition: opacity 250ms ease-out;
pointer-events: auto;
cursor: pointer;
}
#clear-week-overview { border-radius: 28px; width: 56px; height: 56px; background: var(--red-primary); }
#move-to-prev-week-overview, #move-to-next-week-overview { background: rgba(var(--bcg-secondary), 0.96); }
#move-to-prev-week-overview.disabled, #move-to-next-week-overview.disabled { opacity: .25; pointer-events: none; }
#week-overview-buttons svg { margin: 12px; }
#week-overview-buttons svg > path { fill: var(--icon-color); }
#clear-week-overview > svg > path { fill: #ffffff; }
#move-to-next-week-overview > svg { transform: rotateZ(180deg); }
/* ------------------------------------------[ Due Today Overview ]------------------------------------------ */
#due-today-overview {
margin: 0 12px;
border-radius: 16px;
border: 0.5px solid rgba(var(--border-primary), 1);
background: rgba(var(--bcg-secondary), 1);
}
#due-today-overview:empty { display: none; }
#due-today-overview > .header {
border-bottom: .5px solid rgba(var(--border-primary), 1);
padding: 16px;
display: flex;
align-items: center;
gap: 8px;
font: 14px Roboto-Bold;
color: var(--txt-primary);
}
#due-today-overview > .header > .close { margin-left: auto; cursor: pointer; }
#due-today-overview > .header svg { padding: 8px; width: 24px; height: 24px; }
#due-today-overview > .header .icon path { fill: currentColor; }
#due-today-overview > .header .close path { fill: var(--icon-color); }
#due-today-overview > .body {
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
font: 12px / 24px Roboto-Regular;
color: var(--txt-primary);
}
#due-today-overview .body > .section {
padding: 0 0 8px;
display: flex;
border-bottom: .5px solid var(--badge-orange-secondary);
}
#due-today-overview .section > .icon,
#due-today-overview .entry > .icon { flex-shrink: 0; width: 24px; height: 24px; background-repeat: no-repeat; background-position: center; background-size: 12px; }
#due-today-overview .entry > svg.icon { width: 12px; }
#due-today-overview .icon.projects { background-image: var(--others-icon); }
#due-today-overview .icon.tasks { background-image: var(--tasks-icon); }
#due-today-overview .icon.deadline { background-image: var(--deadline-icon); }
#due-today-overview .body > .entry {
padding: 0 0 0 12px;
display: flex;
align-items: center;
gap: 8px;
}
#due-today-overview .entry > .badge {
flex-shrink: 0;
border-radius: 50%;
width: 12px;
height: 12px;
background: var(--red-primary);
}
#due-today-overview .section > .title,
#due-today-overview .entry > .output {
text-overflow: ellipsis;
overflow: hidden;
}
/* ------------------------------------------[ Filters ]------------------------------------------ */
#filter-projects {
border-top: .5px solid rgba(var(--border-primary), 1);
border-bottom: .5px solid rgba(var(--border-primary), 1);
padding: 12px;
display: flex;
gap: 12px;
overflow-y: hidden;
}
#filter-projects:empty { display: none; }
#filter-projects.active {
border-top: none;
padding-top: calc(12px + env(safe-area-inset-top));
position: sticky;
top: 0;
background: rgba(var(--bcg-primary), 1);
z-index: 1;
}
#filter-projects.active ~ #due-today-overview,
#filter-projects.active ~ #active-overview,
#filter-projects.active ~ .active-activity,
#filter-projects.active ~ .overview-block,
#active-projects.hidden,
#archived-projects.hidden { display: none !important; }
#filter-projects .option {
box-sizing: border-box;
border-radius: 20px;
border: .5px solid rgba(var(--border-primary), 1);
padding: 0 12px;
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
height: 40px;
white-space: nowrap;
background: rgba(var(--bcg-secondary), 1);
color: var(--txt-primary);
cursor: pointer;
}
#filter-projects .option:first-child,
#filter-projects .option:last-child { flex-shrink: 0; min-width: 60px; }
#filter-projects .option.active { border-color: currentColor; background: var(--btn-green-primary); color: var(--btn-green-secondary); }
#filter-projects .option.active[data-id="shared"] { border-color: currentColor; background: var(--btn-blue-primary); color: var(--btn-blue-secondary); }
#filter-projects .option.active[data-id="archived"] { border-color: currentColor; background: var(--btn-pink-primary); color: var(--btn-pink-secondary); }
#filter-projects .option.active > .seperator { border-color: currentColor; }
#filter-projects .icon { width: 20px; height: 20px; }
#filter-projects .icon path { fill: var(--icon-color); }
#filter-projects .badge {
border-radius: 8px;
border: 3px solid rgba(var(--bcg-primary), 0.5);
width: 15px;
height: 15px;
}
#filter-projects .title { font: 12px Roboto-Black; }
#filter-projects .seperator { border-left: .5px solid rgba(var(--border-primary), 1); height: 50%; }
#filter-projects .count { font: 10px Roboto-Italic; }
#main:has(#filter-projects.active) .header { display: none; }
#main:has(#filter-projects.active) .body { top: 0; }
#main:has(#filter-projects.active) #week-overview { display: none; }
/* ------------------------------------------[ Notifications ]------------------------------------------ */
.notification {
margin: 0 auto;
border-radius: 32px;
border: .5px solid var(--blue-primary);
position: fixed;
inset: calc(24px + env(safe-area-inset-top)) 24px auto 24px;
max-width: 440px;
transition: border-radius 300ms ease-out;
background: rgba(var(--bcg-secondary), 1);
box-shadow: var(--shadow-light);
overflow: hidden;
z-index: 1;
}
.notification:has(.icon.success){ border-color: var(--green-primary); }
.notification:has(.icon.warning){ border-color: var(--yellow-primary); }
.notification:has(.icon.error){ border-color: var(--red-primary); }
.notifications > .notification.last:nth-last-child(1){
animation: notif-in 250ms ease-out forwards;
opacity: 0;
}
.notifications > .notification.remove:nth-last-child(1){
animation: notif-out 250ms ease-out forwards;
opacity: 1;
}
.notification .time {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1.5px;
background: var(--blue-primary);
transform-origin: left;
}
.notification:has(.icon.success) .time { background: var(--green-primary); }
.notification:has(.icon.warning) .time { background: var(--yellow-primary); }
.notification:has(.icon.error) .time { background: var(--red-primary); }
.notifications > .notification.paused:nth-last-child(1) .time { animation-play-state: paused; }
.notifications > .notification:nth-last-child(1) .time { animation: shrink-to-left 4000ms 250ms ease-out forwards; }
.notification .icon-wrap {
position: absolute;
top: 20px;
left: 16px;
width: 24px;
height: 24px;
}
.notification .icon-wrap > .icon { height: 100%; }
.notification .icon-wrap > .icon.bell { background: var(--notifications-icon) no-repeat center / 24px; }
.notification .icon-wrap > .icon.success { background: var(--circle-check-icon) no-repeat center / 24px; }
.notification .icon-wrap > .icon.info { background: var(--info-icon) no-repeat center / 24px; }
.notification .icon-wrap > .icon.warning { background: var(--warning-icon) no-repeat center / 24px; }
.notification .icon-wrap > .icon.error { background: var(--error-icon) no-repeat center / 24px; }
.notification .icon-wrap > .icon.notifications-off { background: var(--notifications-off-icon) no-repeat center / 24px; }
.notification .icon-wrap > .icon.goal { background: var(--mountain-with-flag-icon) no-repeat center / 24px; }
.notification .icon-wrap > .icon.bell,
.notification .icon-wrap > .icon.notifications-off {
animation: bell 1000ms 250ms ease-out forwards;
transform-origin: center top;
}
.notification .content {
padding: 0 56px;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.notification .content:after {
content: "";
position: absolute;
top: 4px;
right: 0;
width: 72px;
height: 54px;
background: linear-gradient(to right, transparent 0, rgba(var(--bcg-secondary), 1) calc(100% - 64px));
}
.notification.paused .content:after { content: none; }
.notification .header {
margin: 0 0 4px;
display: flex;
align-items: flex-end;
height: 32px;
font: 14px Roboto-Bold;
color: var(--txt-primary);
}
.notification .body {
margin: 0 0 12px;
display: flex;
align-items: flex-start;
font: 12px / 16px Roboto-Light;
white-space: nowrap;
overflow: hidden;
color: var(--txt-secondary);
}
.notification.paused:nth-last-child(1) .body { white-space: normal; }
.notification .footer { display: none; }
.notification.interactive:nth-last-child(1) .footer {
margin: 0 0 12px 0;
display: flex;
gap: 12px;
}
.notification .footer > .button {
border-radius: 8px;
flex-grow: 1;
text-align: center;
font: 12px / 24px Roboto-Bold;
background: var(--btn-blue-primary);
color: var(--btn-blue-secondary);
cursor: pointer;
}
.notification .close {
position: absolute;
top: 0;
right: 0;
width: 56px;
height: 64px;
background: var(--close-icon) no-repeat center / 24px;
cursor: pointer;
}
/* ------------------------------------------[ Active Activities ]------------------------------------------ */
.active-activity {
margin: 0 12px;
border: .5px solid rgba(var(--border-primary), 1);
border-radius: 16px;
padding: 16px;
position: sticky;
top: calc(12px + env(safe-area-inset-top));
background: rgba(var(--bcg-secondary), 1);
cursor: pointer;
z-index: 1;
}
#week-overview.clicked ~ .active-activity { position: relative; top: initial; z-index: initial; }
.active-activity > .title {
display: inline-block;
max-width: 50%;
text-overflow: ellipsis;
font: 14px / 24px Roboto-Bold;
color: var(--txt-primary);
white-space: nowrap;
overflow: hidden;
}
.active-activity > .sub-title {
font: 10px / 12px Roboto-Light;
color: var(--txt-secondary);
white-space: nowrap;
overflow: hidden;
}
.active-activity > .duration,
.active-activity > .badge {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.active-activity > .duration {
border: .5px solid var(--badge-blue-secondary);
border-radius: 18px;
padding: 0 8px;
inset: 16px 16px 16px auto;
min-width: 64px;
font: 12px Roboto-BlackItalic;
color: var(--badge-blue-secondary);
background: var(--badge-blue-primary);
}
.active-activity > .badge {
border-radius: 4px;
padding: 0 4px;
display: inline-block;
font: 10px / 16px Roboto-Regular;
color: var(--badge-violet-secondary);
background: var(--badge-violet-primary);
transform: translate(4px, 4px);
}
/* ------------------------------------------[ Overview Block ]------------------------------------------ */
.overview-block {
margin: 0 12px;
border-radius: 16px;
border: .5px solid rgba(var(--border-primary), 1);
color: var(--txt-primary);
background: rgba(var(--bcg-secondary), 1);
}
.overview-block:empty { display: none; }
.overview-block > .header {
border-bottom: .5px solid rgba(var(--border-primary), 1);
padding: 16px;
position: relative;
}
.overview-block .header > .title { font: 14px / 24px Roboto-Bold; }
.overview-block .header > .sub-title { font: 10px / 12px Roboto-Light; color: var(--txt-secondary); }
.overview-block .header > .count {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 22px;
right: 22px;
width: 24px;
height: 24px;
font: 12px Roboto-BlackItalic;
}
.overview-block > .body {
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.overview-block .body > .wrap { display: flex; justify-content: flex-start; gap: 8px; font: 12px / 16px Roboto-Regular; z-index: 0; }
.overview-block .wrap > .icon { display: flex; }
.overview-block .wrap > .icon > svg { box-sizing: border-box; padding: 2px; width: 16px; height: 16px; }
#activity-overview .wrap > .icon > svg { padding: 0; transform: rotate(270deg); }
.overview-block .wrap > .icon > svg > path { fill: #ffffff; }
.overview-block .wrap > .title { flex-grow: 1; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.overview-block .wrap > .output { flex-shrink: 0; font-family: Roboto-BoldItalic; }
#active-indexes .wrap > .icon,
#tasks-overview .wrap > .icon { border-radius: 50%; position: relative; background: var(--green-primary); }
#active-indexes .wrap > .icon:empty { display: block; width: 16px; height: 16px; background: none; z-index: -1; }
#active-indexes .wrap > .icon:empty:before {
content: "";
margin: -12px auto auto -12px;
border-radius: 50%;
display: block;
width: 40px;
height: 40px;
background: var(--blue-primary);
opacity: 0.5;
animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
#active-indexes .wrap > .icon:empty:after {
content: "";
border-radius: 50%;
position: absolute;
inset: 0;
background: var(--blue-primary);
animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -.4s infinite;
}
/* ------------------------------------------[ Project Card Menu ]------------------------------------------ */
.popup .button-block {
display: flex;
flex-direction: column;
gap: 24px;
}
.popup .button-block > .button {
box-sizing: border-box;
border-radius: 32px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 56px;
font: 14px Roboto-Bold;
color: var(--btn-blue-secondary);
background: var(--btn-blue-primary) no-repeat center / 24px;
overflow: hidden;
cursor: pointer;
z-index: 0;
}
.popup .button-block > .button.active {
font: 40px Roboto-Black;
background-image: none;
}
.popup .button-block > .button.active,
.popup .button-block > .button.finish {
border: .5px solid;
}
.popup .button-block > .button.activity.active,
.popup .button-block > .button.activity.finish {
color: var(--badge-blue-secondary);
background-color: var(--badge-blue-primary);
}
.popup .button-block > .button.activity.active { height: 112px; }
.popup .button-block > .button.indexes.finish {
color: var(--badge-violet-secondary);
background-color: var(--badge-violet-primary);
}
.popup .button-block > .button.finish:before {
content: "";
position: absolute;
inset: 0;
background: rgba(128, 128, 128, 0.1);
transform-origin: left;
animation: shrink-to-left 4000ms 250ms ease-out forwards;
z-index: -1;
}
.project .action-btn {
margin: 0 32px 32px;
border-radius: 28px;
height: 56px;
background: var(--btn-blue-primary);
box-shadow: var(--shadow-light);
cursor: pointer;
}
.project .action-btn > svg {
box-sizing: border-box;
margin: 0 calc(50% - 28px);
padding: 16px;
height: 56px;
}
.project .action-btn > svg > path { fill: var(--icon-color); }
/* ------------------------------------------[ Wall animation ]------------------------------------------ */
#week-overview.initial,
#due-today-overview.initial,
.active-activity.initial,
.overview-block.initial,
#filter-projects.initial,
.section-title.initial,
.tag.initial,
.project.initial {
will-change: transform, opacity;
opacity: 0;
transform: translate3d(0, 0.75rem, 0);
transition: transform 700ms cubic-bezier(0, 0, 0.2, 1), opacity 700ms cubic-bezier(0, 0, 0.2, 1);
}
#week-overview.initial.animate,
#due-today-overview.initial.animate,
.active-activity.initial.animate,
.overview-block.initial.animate,
#filter-projects.initial.animate,
.section-title.initial.animate,
.tag.initial.animate,
.project.initial.animate {
opacity: 1;
transform: translate3d(0, 0, 0);
}
/* ------------------------------------------[ Tags ]------------------------------------------ */
#active-projects .tag,
.popup .body .tag {
box-sizing: border-box;
margin: 0 0 12px;
padding: 0 0 0 12px;
display: flex;
align-items: center;
gap: 8px;
width: 100%;
min-height: 40px;
}
.popup .body .tag {
border-radius: 8px;
border: .5px solid rgba(var(--border-primary), 1);
}
#active-projects .tag.hide { display: none; }
.popup .body .tag { margin: 0; cursor: pointer; }
#active-projects .tag:before,
.popup .body .tag:before,
.popup .choice.label:before {
content: "";
flex-shrink: 0;
margin: 0 3px;
border-radius: 8px;
border: 3px solid rgba(var(--bcg-primary), 0.5);
width: 15px;
height: 15px;
}
.tag > .name {
flex-grow: 1;
padding: 8px 0;
text-transform: uppercase;
font: 14px Roboto-Black;
word-break: break-word;
color: var(--txt-primary);
}
.tag > .remove, .tag > .more {
flex-shrink: 0;
position: relative;
width: 40px;
height: 40px;
cursor: pointer;
}
.tag > .remove { display: none; background: var(--close-icon) no-repeat center / 24px; }
.tag > .remove.selected { display: block; }
.tag > .more { background: var(--vertical-more-icon) no-repeat center / 24px; }
/* ------------------------------------------[ Tag colors ]----------------------------------------- */
#filter-projects .badge.red,
.tag.red:before,
.popup .card > .body .inline-options > .choice.bubble.red,
.popup .card > .body .inline-options > .choice.label.red:before { background: rgba(var(--color-red), 1); }
#filter-projects .badge.orange,
.tag.orange:before,
.popup .card > .body .inline-options > .choice.bubble.orange,
.popup .card > .body .inline-options > .choice.label.orange:before { background: rgba(var(--color-orange), 1); }
#filter-projects .badge.yellow,
.tag.yellow:before,
.popup .card > .body .inline-options > .choice.bubble.yellow,
.popup .card > .body .inline-options > .choice.label.yellow:before { background: rgba(var(--color-yellow), 1); }
#filter-projects .badge.green,
.tag.green:before,
.popup .card > .body .inline-options > .choice.bubble.green,
.popup .card > .body .inline-options > .choice.label.green:before { background: rgba(var(--color-green), 1); }
#filter-projects .badge.teal,
.tag.teal:before,
.popup .card > .body .inline-options > .choice.bubble.teal,
.popup .card > .body .inline-options > .choice.label.teal:before { background: rgba(var(--color-teal), 1); }
#filter-projects .badge.blue,
.tag.blue:before,
.popup .card > .body .inline-options > .choice.bubble.blue,
.popup .card > .body .inline-options > .choice.label.blue:before { background: rgba(var(--color-blue), 1); }
#filter-projects .badge.violet,
.tag.violet:before,
.popup .card > .body .inline-options > .choice.bubble.violet,
.popup .card > .body .inline-options > .choice.label.violet:before { background: rgba(var(--color-violet), 1); }
#filter-projects .badge.pink,
.tag.pink:before,
.popup .card > .body .inline-options > .choice.bubble.pink,
.popup .card > .body .inline-options > .choice.label.pink:before { background: rgba(var(--color-pink), 1); }
#filter-projects .badge.gray,
.tag.gray:before,
.popup .card > .body .inline-options > .choice.bubble.gray,
.popup .card > .body .inline-options > .choice.label.gray:before { background: rgba(var(--color-gray), 1); }
/* ------------------------------------------[ QR styles & Related ]------------------------------------------ */
#shared-qr-reader { border-radius: 24px; overflow: hidden; }
#shared-qr-reader + div { box-sizing: border-box; border: .5px solid rgba(var(--border-primary), 1); border-radius: 24px; display: flex; height: 256px; }
#shared-qr-reader + div.loading { align-items: center; justify-content: center; }
#shared-qr-reader + div.pending { display: none; }
#shared-qr-reader + div.processing,
#shared-qr-reader + div.failed { padding: 104px 24px 24px; flex-direction: column; }
#shared-qr-reader + div.processing { background: var(--check-icon) no-repeat center 56px / 40px; }
#shared-qr-reader + div.failed { background: var(--warning-icon) no-repeat center 56px / 40px; }
#shared-qr-reader + div > div { text-align: center; }
#shared-qr-reader + div > div:nth-child(1){ font: 14px / 48px Roboto-Black; color: var(--txt-primary); }
#shared-qr-reader + div > div:nth-child(2){ font: 12px / 16px Roboto-LightItalic; }
.popup .card > .body > div:has(.qr-code),
.popup .card > .body > div:has(.access-code){ margin: 32px 0; display: flex; justify-content: center; }
.popup .card > .body > div:has(.access-code){ margin: auto 0 64px 0; }
.qr-code { position: relative; }
.access-code { display: flex; align-items: center; gap: 4px; position: relative; height: 32px; text-align: center; font: 24px Roboto-BlackItalic; color: var(--txt-primary); }
.access-code.error { font: 12px Roboto-LightItalic; color: var(--txt-pink); }
.qr-code.expired:before,
.access-code.expired:before,
.access-code.copied:before { display: flex; justify-content: center; align-items: center; position: absolute; inset: -4px; white-space: nowrap; font: 12px Roboto-BoldItalic; background: rgba(var(--bcg-secondary), 0.95); }
.access-code.copied:before { content: "Code copied"; color: var(--green-primary); }
.qr-code.expired:before,
.access-code.expired:before { content: "Code expired"; color: var(--red-primary); }
.entered-code > .seperator,
.access-code > .seperator { font: 16px Roboto-Regular; color: var(--txt-secondary); }
.access-code > .time-left { position: absolute; bottom: -24px; width: 100%; font: 12px / 24px Roboto-Italic; color: var(--txt-pink); }
.access-code > .copy-text-btn { border-radius: 50%; position: absolute; right: -48px; width: 32px; height: 32px; background: var(--blue-primary); box-shadow: var(--shadow-light); cursor: pointer; }
.copy-text-btn > svg { margin: 6px; }
.copy-text-btn path { fill: #ffffff; }
.access-code.expired > .time-left,
.access-code.expired > .copy-text-btn,
.access-code.copied > .copy-text-btn { display: none; }
.entered-code { margin: 32px 0; display: flex; justify-content: center; align-items: center; gap: 4px; }
.entered-code .group { display: flex; justify-content: center; gap: 4px; width: calc(100% / 3); }
.entered-code .slot { box-sizing: border-box; border: .5px solid rgba(var(--border-primary), 1); display: flex; justify-content: center; align-items: center; aspect-ratio: 1 / 1.25; width: 100%; max-width: 40px; font: 20px Roboto-BlackItalic; color: var(--txt-primary); background: rgba(var(--bcg-primary), 1); }
.entered-code .slot.active:before { content: ""; width: .5px; height: 20px; background: var(--txt-primary); animation: short-flash 1s ease-in-out infinite; }
.entered-code .slot.empty { border-color: var(--red-primary); }
.entered-code > .group > .slot:first-child { border-radius: 8px 0 0 8px; }
.entered-code > .group > .slot:last-child { border-radius: 0 8px 8px 0; }
#numeric-input-field { position: absolute; top: -9999px; left: -9999px; }
/* ------------------------------------------[ Fire ]------------------------------------------ */
.fire {
position: absolute;
width: 32px;
height: 32px;
}
.day .fire {
top: -20px;
width: 24px;
height: 24px;
}
.date-block .fire {
top: 20px;
left: 10px;
}
.routine-streak > .fire:nth-child(1) {
top: 24px;
left: calc(50% - 32px);
width: 64px;
height: 64px;
}
.routine-streak > .fire:nth-child(2) {
top: 52px;
left: calc(50% - 40px);
transform: rotateZ(-16deg);
}
.routine-streak > .fire:nth-child(3) {
top: 52px;
right: calc(50% - 40px);
transform: rotateZ(16deg);
}
.fire .flames {
position: absolute;
bottom: 40%;
left: 50%;
width: 60%;
height: 60%;
transform: translateX(-50%) rotate(45deg);
}
.fire .flames.out { filter: grayscale(1); }
.fire .flames .flame {
border-radius: 40%;
position: absolute;
right: 0%;
bottom: 0%;
width: 0%;
height: 0%;
background: #FFDC01;
}
.fire .flames .flame:nth-child(2n + 1) { animation: flameodd 1500ms ease-in infinite; }
.fire .flames .flame:nth-child(2n) { animation: flameeven 1500ms ease-in infinite; }
.fire .flames .flame:nth-child(1) { animation-delay: 0ms; }
.fire .flames .flame:nth-child(2) { animation-delay: 375ms; }
.fire .flames .flame:nth-child(3) { animation-delay: 750ms; }
.fire .flames .flame:nth-child(4) { animation-delay: 1125ms; }
.fire .flames.out .flame:nth-child(2n + 1) { animation: none; }
.fire .flames.out .flame:nth-child(2n) { animation-duration: 2500ms; }
.fire .logs {
position: absolute;
bottom: 25%;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 15%;
}
.fire .logs:before,
.fire .logs:after {
position: absolute;
content: "";
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(20deg);
height: 100%;
width: 100%;
border-radius: 1vw;
background: #70392F;
}
.fire .logs:before {
transform: translate(-50%, -50%) rotate(-20deg);
background: #612E25;
}
@keyframes flameodd {
0%, 100% { width: 0%; height: 0%; }
25% { width: 100%; height: 100%; }
0% { background: #FFDC01; z-index: 1000000; }
40% { background: #FDAC01; z-index: 1000000; }
100% { background: #F73B01; z-index: -10; }
0% { right: 0%; bottom: 0%; }
25% { right: 1%; bottom: 2%; }
100% { right: 150%; bottom: 170%; }
}
@keyframes flameeven {
0%, 100% { width: 0%; height: 0%; }
25% { width: 100%; height: 100%; }
0% { background: #FFDC01; z-index: 1000000; }
40% { background: #FDAC01; z-index: 1000000; }
100% { background: #F73B01; z-index: -10; }
0% { right: 0%; bottom: 0%; }
25% { right: 2%; bottom: 1%; }
100% { right: 170%; bottom: 150%; }
}
/* ------------------------------------------[ Timeline view ]------------------------------------------ */
#timeline { scroll-snap-type: y mandatory; }
#timeline > .body { padding: 0 12px 40px; }
#timeline > .header,
#timeline > .body > .block {
scroll-snap-align: center;
scroll-snap-stop: always;
}
#timeline:has(.block[style]) > .header,
#timeline:has(.block[style]) > .body > .block { scroll-snap-align: none; scroll-snap-stop: normal; }
#timeline .body > .block {
box-sizing: border-box;
margin: 0 0 12px;
border-radius: 0 0 32px 32px;
display: flex;
flex-direction: column;
gap: 40px;
position: relative;
height: calc(100vh - max(80px, calc(env(safe-area-inset-top) + env(safe-area-inset-bottom) + 12px)));
min-height: calc(100% - 64px);
transition: height 300ms ease-out;
overflow: hidden;
}
#timeline .body > .block:before {
content: "";
border: .5px solid rgba(var(--border-primary), 1);
border-radius: 32px;
position: absolute;
inset: 12px 0 0;
background: rgba(var(--bcg-secondary), 1);
}
#timeline .body:has(.block[style]) > .block { opacity: .25; }
#timeline .body:has(.block[style]) > .block > .expand { pointer-events: none; }
#timeline .body:has(.block[style]) > .block[style]{ opacity: 1; overflow: visible; }
#timeline .body:has(.block[style]) > .block[style] > .expand { pointer-events: auto; }
#timeline .block > .date {
display: flex;
justify-content: center;
position: sticky;
z-index: 1;
}
#timeline .block[style] > .date { top: max(8px, env(safe-area-inset-top)); }
#timeline .block > .date > div {
border-radius: 12px;
padding: 0 12px;
font: 12px / 24px Roboto-Bold;
color: var(--badge-gray-secondary);
background: var(--badge-gray-primary);
box-shadow: var(--shadow-light);
}
#timeline .block > .date.green > div { color: var(--badge-green-secondary); background: var(--badge-green-primary); }
#timeline .block > .date.orange > div { color: var(--badge-orange-secondary); background: var(--badge-orange-primary); }
#timeline .block > .expand {
flex-shrink: 0;
display: flex;
align-items: start;
justify-content: center;
position: sticky;
inset: auto 0 0;
height: 80px;
}
#timeline .block > .expand:before {
content: "";
border-width: 0 .5px .5px;
border-style: solid;
border-color: rgba(var(--border-primary), 1);
border-radius: 0 0 32px 32px;
position: absolute;
inset: -64px 0 0;
background: linear-gradient(0deg, rgba(var(--bcg-secondary), 0.96) 80%, transparent);
z-index: -1;
}
#timeline .block[style] > .expand:before { border: none; border-radius: 0; background: none; }
#project .expand-records,
#timeline .block > .expand > div {
border-radius: 20px;
width: 104px;
text-align: center;
text-transform: uppercase;
font: 12px / 40px Roboto-Bold;
color: var(--btn-blue-secondary);
background: var(--btn-blue-primary);
box-shadow: var(--shadow-light);
cursor: pointer;
}
#project .expand-records { margin: 0 auto; }
#project .task-list > .seperator {
border-top: .5px solid rgba(var(--border-primary), 1);
position: relative;
left: -16px;
width: calc(100% + 32px);
}
#timeline .block > .summary,
#timeline .block > .entries {
display: flex;
flex-direction: column;
gap: 24px;
position: relative;
font: 12px Roboto-Regular;
color: var(--txt-primary);
}
#timeline .block > .entries { flex-grow: 1; }
#timeline .block[style] > .entries { flex-grow: 0; }
#timeline .summary > .title,
#timeline .entries > .title {
box-sizing: border-box;
border-bottom: .5px solid rgba(var(--border-primary), 1);
padding: 0 25px;
width: 100%;
font: 16px / 40px Roboto-Black;
}
/* ----------------[ Timeline view • Total ]---------------- */
#timeline .total {
border-radius: 16px;
margin: 0 24px;
padding: 3px;
position: relative;
font: 12px Roboto-Regular;
color: var(--txt-primary);
background: linear-gradient(90deg, red, red 25%, #fbbc04, #34a853, #1967d2 75%);
}
#timeline .total > .wrap {
border-radius: 13px;
padding: 16px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
background: rgba(var(--bcg-secondary), 1);
}
#timeline .total > .wrap > div {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
#timeline .total > .wrap > div > :nth-child(1){
box-sizing: border-box;
border-radius: 16px;
padding: 0 8px;
display: flex;
aspect-ratio: 1 / 1;
height: 32px;
text-align: center;
font: 16px Roboto-BlackItalic;
justify-content: center;
align-items: center;
}
#timeline .total > .wrap > div.projects-created > :nth-child(1),
#timeline .total > .wrap > div.routines-completed > :nth-child(1),
#timeline .total > .wrap > div.new-tasks > :nth-child(1),
#timeline .total > .wrap > div.tasks-completed > :nth-child(1){ border: .5px solid; color: var(--badge-green-secondary); background: var(--badge-green-primary); }
#timeline .total > .wrap > div.activities > :nth-child(1){ border: .5px solid; color: var(--badge-blue-secondary); background: var(--badge-blue-primary); }
#timeline .total > .wrap > div.goals-achieved > :nth-child(1){ border: .5px solid; color: var(--badge-violet-secondary); background: var(--badge-violet-primary); }
#timeline .total > .wrap > div.projects-archived > :nth-child(1){ border: .5px solid; color: var(--badge-red-secondary); background: var(--badge-red-primary); }
#timeline .total > .wrap > div > :nth-child(2){
line-height: 16px;
font-family: Roboto-Italic;
}
/* ----------------[ Timeline view • Summary ]---------------- */
#timeline .summary > .entry {
padding: 0 24px;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 16px;
position: relative;
z-index: 0;
}
#timeline .summary > .entry:before {
content: "";
border-left: .5px solid rgba(var(--border-primary), 1);
position: absolute;
inset: 24px 40px;
z-index: -1;
}
#timeline .summary > .entry > .title {
flex-grow: 1;
box-sizing: border-box;
padding: 8px 16px;
border-radius: 16px;
border: .5px solid rgba(var(--border-primary), 1);
display: flex;
align-items: center;
min-height: 32px;
background: rgba(var(--bcg-secondary), 1);
}
#timeline .summary > .entry > .pill {
box-sizing: border-box;
border-radius: 16px;
border: .5px solid rgba(var(--border-primary), 1);
padding: 0 12px;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 8px;
height: 32px;
font-family: Roboto-BoldItalic;
}
#timeline .summary > .entry > .pill:before {
content: "";
border-radius: 0 0 8px 8px;
border-width: 0 0 .5px .5px;
border-style: solid;
border-color: rgba(var(--border-primary), 1);
position: absolute;
height: 8px;
inset: auto 40px auto;
transform: translateY(-50%);
z-index: -1;
}
#timeline .summary > .entry > .pill.blue { border: .5px solid var(--badge-blue-secondary); color: var(--badge-blue-secondary); background: var(--badge-blue-primary); }
#timeline .summary > .entry > .pill.green { border: .5px solid var(--badge-green-secondary); color: var(--badge-green-secondary); background: var(--badge-green-primary); }
#timeline .summary > .entry > .pill.violet { border: .5px solid var(--badge-violet-secondary); color: var(--badge-violet-secondary); background: var(--badge-violet-primary); }
#timeline .summary > .entry > .pill > .icon {
width: 20px;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: 20px;
}
#timeline .summary > .entry > .pill.activity > .icon { background-image: var(--timer-icon); }
#timeline .summary > .entry > .pill.index > .icon { background-image: var(--bars-icon); }
#timeline .summary > .entry > .pill.tasks > .icon { background-image: var(--tasks-icon); }
#timeline .summary > .entry > .pill > .badge {
border-radius: 8px;
border: .5px solid;
padding: 0 4px;
position: absolute;
min-width: 8px;
height: 16px;
text-align: center;
font: 10px / 16px Roboto-BlackItalic;
color: var(--badge-orange-secondary);
background: var(--badge-orange-primary);
transform: translate(16px, -16px);
}
/* ----------------[ Timeline view • Entries ]---------------- */
#timeline .block > .entries:before {
content: "";
border-left: .5px solid rgba(var(--border-primary), 1);
position: absolute;
inset: 40px auto 0 44px;
}
#timeline .entries > .entry {
padding: 0 24px;
display: flex;
flex-direction: row;
align-items: center;
gap: 24px;
position: relative;
}
#timeline .entries > .entry:before {
content: "";
border-top: .5px solid rgba(var(--border-primary), 1);
position: absolute;
inset: 50% 0 auto;
}
#timeline .entries > .entry > .time,
#timeline .entries > .entry > .icon,
#timeline .entries > .entry > .action {
box-sizing: border-box;
border-radius: 8px;
border: .5px solid rgba(var(--border-primary), 1);
position: relative;
background: rgba(var(--bcg-secondary), 1);
}
#timeline .entries > .entry > .time {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 40px;
height: 24px;
font: 10px Roboto-Regular;
color: var(--txt-pink);
}
#timeline .entries > .entry > .icon {
position: absolute;
top: calc(50% - 10px);
left: 78px;
width: 20px;
height: 20px;
background: rgba(var(--bcg-primary), 1);
background-position: center;
background-repeat: no-repeat;
background-size: 12px;
}
#timeline .entries > .entry > .icon.plus { background-image: var(--plus-icon); }
#timeline .entries > .entry > .icon.archived { background-image: var(--archive-icon); }
#timeline .entries > .entry > .icon.routine { background-image: var(--routine-icon); }
#timeline .entries > .entry > .icon.activity { background-image: var(--timer-icon); }
#timeline .entries > .entry > .icon.index { background-image: var(--bars-icon); }
#timeline .entries > .entry > .icon.task { background-image: var(--tasks-icon); }
#timeline .entries > .entry > .icon.photo { background-image: var(--camera-icon); }
#timeline .entries > .entry > .action {
padding: 8px 16px 8px 20px;
flex: 1;
font: 12px / 16px Roboto-Regular;
text-wrap: balance;
word-break: break-word;
color: var(--txt-secondary);
}
#timeline .action > span.light { font-family: Roboto-Light; }
#timeline .action > span.bold { font-family: Roboto-Bold; }
#timeline .action > span.bold-italic { font-family: Roboto-BoldItalic; }
#timeline .action > span.c-primary { color: var(--txt-primary); }
#timeline .action > span.blue { color: var(--badge-blue-secondary); }
#timeline .action > span.green { color: var(--badge-green-secondary); }
#timeline .action > span.red { color: var(--badge-red-secondary); }
#timeline .action > span.violet { color: var(--badge-violet-secondary); }
/* ------------------------------------------[ Loading & Empty block ]------------------------------------------ */
.loading-block,
.info-block {
position: absolute;
top: 50%;
left: 50%;
width: 245px;
transform: translate(-50%, -50%);
}
.loading-block > .ctr,
.info-block > .ctr {
text-align: center;
animation: scale-in 250ms ease-out forwards;
}
#project > .info-block { top: 50%; }
#project > .info-block > .ctr {
border: .5px solid rgba(var(--border-primary), 1);
border-radius: 32px;
padding: 32px;
background-color: rgba(var(--bcg-secondary), 1);
}
#project > .info-block > .ctr:before {
content: "";
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
border-right: 16px solid rgba(var(--border-primary), 1);
position: absolute;
top: calc(50% - 16px);
left: -16px;
width: 0;
height: 0;
}
.loading-block .spinner { margin: 0 auto; }
.info-block .icon { height: 64px; background-repeat: no-repeat; background-position: center; background-size: 64px; }
#timeline > .info-block .icon { background-image: var(--assignment-icon); }
#project > .info-block .icon {
position: relative;
height: 144px;
background-image: var(--box-opened-icon);
background-position: bottom;
}
#project > .info-block .icon > div { position: absolute; width: 32px; height: 32px; }
#project > .info-block .icon > div:nth-child(1){ inset: 66px auto auto 72px; background: var(--deadline-icon) no-repeat center / 16px; transform: rotate(-4deg); }
#project > .info-block .icon > div:nth-child(2){ inset: 2px auto 0 70px; background: var(--notifications-icon) no-repeat center / 24px; transform: rotate(-4deg); }
#project > .info-block .icon > div:nth-child(3){ inset: 38px calc(50% - 16px) 0 auto; background: var(--timer-icon) no-repeat center / 32px; transform: rotate(14deg); }
#project > .info-block .icon > div:nth-child(4){ inset: 48px 0 0 48px; background: var(--bars-icon) no-repeat center / 16px; transform: rotate(-24deg); }
#project > .info-block .icon > div:nth-child(5){ inset: 20px 48px 0 auto; background: var(--circle-check-icon) no-repeat center / 24px; transform: rotate(16deg); }
#project > .info-block .icon > div:nth-child(6){ inset: 54px 54px 0 auto; background: var(--tasks-icon) no-repeat center / 16px; transform: rotate(14deg); }
#project > .info-block .icon > div:nth-child(7){ inset: 24px auto 0 46px; background: var(--camera-icon) no-repeat center / 24px; transform: rotate(-16deg); }
.loading-block .title,
.info-block .title { font: 20px / 56px Roboto-Bold; color: var(--txt-primary); }
.loading-block .subtitle,
.info-block .subtitle { font: 16px / 20px Roboto-LightItalic; color: var(--txt-secondary); }
/* ------------------------------------------[ Floating action button ]------------------------------------------ */
.fab-ctr {
display: none;
position: fixed;
inset: auto 0 0;
height: var(--fab-ctr-height);
pointer-events: none;
}
#app.loaded .fab-ctr { display: block; }
.fab-ctr.opened {
inset: 0;
width: 100%;
height: auto;
pointer-events: auto;
animation: fab-bcg 200ms 1 ease-out forwards;
}
.fab {
border-radius: 50%;
position: absolute;
bottom: calc(32px + env(safe-area-inset-bottom));
width: 56px;
height: 56px;
background: var(--blue-primary);
box-shadow: var(--shadow-fab);
pointer-events: auto;
cursor: pointer;
}
.fab > svg { margin: 16px; width: 24px; height: 24px; }
.fab > svg path { fill: #ffffff; }
#navigation > svg { margin: 12px; }
#navigation > svg path { fill: var(--icon-color); }
#navigation.fab {
box-sizing: border-box;
margin: 0 auto;
border: .5px solid rgba(var(--border-primary), 1);
right: 0;
left: 0;
width: 48px;
height: 48px;
background: rgba(var(--bcg-secondary), 0.96);
animation: scale-out 200ms ease-out forwards;
}
#navigation.fab.initial { animation-duration: 0ms; }
#view-menu.fab { left: 20px; animation: scale-in 200ms ease-out forwards; }
#main-menu.fab { right: 20px; animation: scale-in 200ms ease-out forwards; }
#project-menu {
border-radius: 14px;
display: none;
right: calc(((100% - 176px) / 4) - 28px);
bottom: calc(108px + env(safe-area-inset-bottom));
}
#project.opened:not([archived]) ~ .fab-ctr #project-menu { display: block; animation: scale-in 200ms ease-out forwards; }
#project.opened ~ .fab-ctr #project-menu.away { animation: scale-out 200ms ease-out forwards; }
.fab-ctr.opened.view-menu #main-menu,
.fab-ctr.opened.view-menu #project-menu,
.fab-ctr.opened.main-menu #view-menu,
.fab-ctr.opened.main-menu #project-menu,
.fab-ctr.opened.project-menu #main-menu,
.fab-ctr.opened.project-menu #view-menu,
.fab-ctr.opened #navigation { animation: scale-out 200ms ease-out forwards !important; }
#navigation.show { animation: scale-in 200ms ease-out forwards; }
#timeline.opened ~ .fab-ctr #navigation.fab,
#project.opened ~ .fab-ctr #navigation.fab {
border-radius: 28px;
width: 120px;
height: 56px;
animation: scale-in 200ms ease-out forwards;
}
#timeline.opened ~ .fab-ctr #view-menu.fab,
#project.opened ~ .fab-ctr #view-menu.fab,
#timeline.opened ~ .fab-ctr #main-menu.fab,
#project.opened ~ .fab-ctr #main-menu.fab,
#timeline.opened ~ #week-overview-buttons > div,
#project.opened ~ #week-overview-buttons > div,
#week-overview-buttons ~ .fab-ctr > .fab { animation: scale-out 200ms ease-out forwards; }
#app.focused > .fab-ctr #navigation.fab,
#app.focused > .fab-ctr #project-menu.fab { animation: scale-out 200ms ease-out forwards; }
.fab-ctr.opened.view-menu #view-menu > svg,
.fab-ctr.opened.main-menu #main-menu > svg,
.fab-ctr.opened.project-menu #project-menu > svg { animation: fab-rotate 100ms 1 ease-out forwards; }
#timeline.opened ~ .fab-ctr #navigation > svg,
#project.opened ~ .fab-ctr #navigation > svg { margin: 16px 48px; }
.fab-ctr .ctr {
display: none;
flex-direction: column;
gap: 16px;
position: absolute;
bottom: 88px;
pointer-events: none;
}
.fab-ctr .ctr.right { align-items: flex-end; right: 4px; }
.fab-ctr .ctr.left { align-items: flex-start; left: 4px }
.fab-ctr.opened.view-menu #view-menu > .ctr,
.fab-ctr.opened.main-menu #main-menu > .ctr,
.fab-ctr.opened.project-menu #project-menu > .ctr { display: flex; }
.fab-ctr .wrap {
display: flex;
gap: 16px;
white-space: nowrap;
transform: translate3d(0, 28px, 0);
opacity: 0;
pointer-events: auto;
cursor: pointer;
}
.fab-ctr .ctr.right .wrap { flex-direction: row; }
.fab-ctr .ctr.left .wrap { flex-direction: row-reverse; }
.fab-ctr .wrap > label {
line-height: 48px;
font-size: 14px;
color: var(--txt-primary);
vertical-align: top;
cursor: pointer;
}
.fab-ctr .ctr > * { animation: fab-appear 200ms 1 ease-out forwards; }
.fab-ctr .ctr > *:nth-last-child(2),
.fab-ctr .ctr > *:nth-last-child(2) .sub-fab { animation-delay: 50ms; }
.fab-ctr .ctr > *:nth-last-child(3),
.fab-ctr .ctr > *:nth-last-child(3) .sub-fab { animation-delay: 100ms; }
.fab-ctr .ctr > *:nth-last-child(4),
.fab-ctr .ctr > *:nth-last-child(4) .sub-fab { animation-delay: 150ms; }
.fab-ctr .ctr > *:nth-last-child(5),
.fab-ctr .ctr > *:nth-last-child(5) .sub-fab { animation-delay: 200ms; }
.fab-ctr .ctr > *:nth-last-child(6),
.fab-ctr .ctr > *:nth-last-child(6) .sub-fab { animation-delay: 250ms; }
.fab-ctr .ctr > *:nth-last-child(7),
.fab-ctr .ctr > *:nth-last-child(7) .sub-fab { animation-delay: 300ms; }
.fab-ctr .ctr > *:nth-last-child(8),
.fab-ctr .ctr > *:nth-last-child(8) .sub-fab { animation-delay: 350ms; }
.fab-ctr .ctr > *:nth-last-child(9),
.fab-ctr .ctr > *:nth-last-child(9) .sub-fab { animation-delay: 400ms; }
.fab-ctr .ctr > *:nth-last-child(10),
.fab-ctr .ctr > *:nth-last-child(10) .sub-fab { animation-delay: 450ms; }
.fab-ctr .ctr > *:nth-last-child(11),
.fab-ctr .ctr > *:nth-last-child(11) .sub-fab { animation-delay: 500ms; }
.fab-ctr .ctr > *:nth-last-child(12),
.fab-ctr .ctr > *:nth-last-child(12) .sub-fab { animation-delay: 550ms; }
.fab-ctr .ctr > *:nth-last-child(13),
.fab-ctr .ctr > *:nth-last-child(13) .sub-fab { animation-delay: 600ms; }
.fab-ctr .ctr > *:nth-last-child(14),
.fab-ctr .ctr > *:nth-last-child(14) .sub-fab { animation-delay: 650ms; }
.fab-ctr .ctr > *:nth-last-child(15),
.fab-ctr .ctr > *:nth-last-child(15) .sub-fab { animation-delay: 700ms; }
.fab-ctr .ctr > *:nth-last-child(16),
.fab-ctr .ctr > *:nth-last-child(16) .sub-fab { animation-delay: 750ms; }
.fab-ctr .ctr > *:nth-last-child(17),
.fab-ctr .ctr > *:nth-last-child(17) .sub-fab { animation-delay: 800ms; }
.fab-ctr .ctr > *:nth-last-child(18),
.fab-ctr .ctr > *:nth-last-child(18) .sub-fab { animation-delay: 850ms; }
.fab-ctr .ctr > *:nth-last-child(19),
.fab-ctr .ctr > *:nth-last-child(19) .sub-fab { animation-delay: 900ms; }
.sub-fab {
border-radius: 24px;
width: 48px;
height: 48px;
box-shadow: var(--shadow-fab);
animation: fab-scale-in 200ms 1 ease-out forwards;
}
#settings > .sub-fab { background: var(--btn-blue-primary) var(--settings-icon) no-repeat center / 24px; }
#share-to-device > .sub-fab { background: var(--btn-blue-primary) var(--devices-icon) no-repeat center / 24px; }
#view-timeline > .sub-fab { background: var(--btn-blue-primary) var(--assignment-icon) no-repeat center / 24px; }
#add-shared-project > .sub-fab { background: var(--btn-blue-primary) var(--shared-icon) no-repeat center / 24px; }
#add-new-project > .sub-fab { background: var(--btn-blue-primary) var(--plus-icon) no-repeat center / 24px; }
#main-menu .sub-fab.activity-screen { background: var(--btn-blue-primary) var(--timer-icon) no-repeat center / 24px; }
#main-menu .sub-fab.add-index { background: var(--btn-blue-primary) var(--bars-icon) no-repeat center / 24px; }
#main-menu .sub-fab.add-task { background: var(--btn-blue-primary) var(--tasks-icon) no-repeat center / 24px; }
#main-menu .sub-fab.add-photos { background: var(--btn-blue-primary) var(--camera-icon) no-repeat center / 24px; }
#main-menu .sub-fab.open-project { background: var(--btn-blue-primary) var(--arrow-right-icon) no-repeat center / 24px; }
#project-menu .sub-fab { background: var(--btn-blue-primary) var(--plus-icon) no-repeat center / 24px; }
#project-menu .sub-fab.edit { background: var(--btn-blue-primary) var(--edit-icon) no-repeat center / 24px; }
#project-menu .sub-fab.message { background: var(--btn-blue-primary) var(--send-icon) no-repeat center / 24px; }
#main-menu .seperator,
#project-menu .seperator {
border-top: .5px solid rgba(var(--color-blue), 1);
width: 100%;
opacity: 0;
}
@keyframes fab-bcg {
0% { background: transparent; }
100% { background: rgba(var(--bcg-primary), 0.96); }
}
@keyframes fab-appear {
0% { transform: translate3d(0, 28px, 0); opacity: 0; }
100% { transform: translate3d(0, 0, 0); opacity: 1; }
}
@keyframes fab-scale-in {
0% { transform: scale3d(0, 0, 1); }
100% { transform: scale3d(1, 1, 1); }
}
@keyframes fab-rotate {
0% { transform: rotate3d(0, 0, 1, 0deg); }
100% { transform: rotate3d(0, 0, 1, 45deg); }
}
/* ------------------------------------------[ User sync status ]------------------------------------------ */
#user-sync-status,
#project-sync-status {
padding: env(safe-area-inset-top) 0 0;
position: fixed;
top: 0;
width: 64px;
height: 64px;
transform: translate3d(0, -100%, 0);
transition: transform 250ms ease-out;
z-index: 10;
}
#user-sync-status,
#project-sync-status { right: 0; pointer-events: none; }
#user-sync-status.visible,
#project-sync-status.visible { transform: none; z-index: 11; }
#project-sync-status.visible ~ #user-sync-status { transform: none; }
#project-sync-status.visible ~ #user-sync-status.visible { transform: scale3d(0.8, 0.8, 1) translate3d(0, 64px, 0); z-index: 10; }
#user-sync-status > div,
#project-sync-status > div {
border-radius: 50%;
position: absolute;
bottom: 12px;
left: 12px;
width: 40px;
height: 40px;
background: var(--blue-primary);
box-shadow: var(--shadow-light);
}
#project-sync-status > div { border-radius: 8px; }
#user-sync-status.offline > div,
#project-sync-status.offline > div { background: var(--red-primary); }
#user-sync-status.failed > div,
#project-sync-status.failed > div { background: var(--red-primary); }
#user-sync-status.synced > div,
#project-sync-status.synced > div { background: var(--green-primary); }
#user-sync-status.in-progress.up > div,
#project-sync-status.in-progress.up > div { box-shadow: var(--shadow-light-reversed); transform: scaleY(-1); }
#user-sync-status > div:before,
#project-sync-status > div:before {
content: "";
position: absolute;
inset: 0;
background-position: center;
background-repeat: no-repeat;
}
#user-sync-status.in-progress > div:before { background-image: var(--sync-icon); animation: reverse-rotate 1s linear infinite; }
#project-sync-status.in-progress > div:before { background-image: var(--directory-sync-icon); animation: reverse-rotate 1s linear infinite; }
#user-sync-status.offline > div:before { background-image: var(--cloud-off-icon); }
#project-sync-status.offline > div:before { background-image: var(--work-off-icon); }
#user-sync-status.failed > div:before { background-image: var(--cloud-failed-icon); }
#project-sync-status.failed > div:before { background-image: var(--work-failed-icon); }
#user-sync-status.synced > div:before { background-image: var(--cloud-done-icon); }
#project-sync-status.synced > div:before { background-image: var(--work-done-icon); }
#user-sync-status.offline > div,
#user-sync-status.failed > div,
#user-sync-status.synced > div,
#project-sync-status.offline > div,
#project-sync-status.failed > div,
#project-sync-status.synced > div { animation: subtle-scale-up 200ms ease-in forwards; }
/* ------------------------------------------[ Connection status ]------------------------------------------ */
#connection-status {
padding: env(safe-area-inset-top) 0 0;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
inset: 0 0 auto;
height: 64px;
transform: translate3d(0, -100%, 0);
transition: transform 250ms ease-out;
z-index: 3;
}
#connection-status.visible { transform: none; }
#connection-status > div {
border-radius: 12px;
padding: 0 8px;
font: 12px / 24px Roboto-Bold;
color: var(--badge-red-secondary);
background: var(--badge-red-primary);
box-shadow: var(--shadow-light);
transition: color 250ms, background 250ms;
}
#connection-status.online > div {
color: var(--badge-green-secondary);
background: var(--badge-green-primary);
}
/* ------------------------------------------[ Floating menu ]------------------------------------------ */
.floating-menu {
border: .5px solid rgba(var(--border-primary), 1);
border-radius: 16px;
position: absolute;
right: calc(50% + 8px);
background: rgba(var(--bcg-secondary), 1);
box-shadow: var(--shadow-fab);
animation: scale-in 150ms 1 ease-out forwards;
overflow: hidden;
z-index: 1;
}
.floating-menu.top { border-radius: 16px 16px 2px 16px; bottom: calc(50% + 12px); transform-origin: bottom right; }
.floating-menu.bottom { border-radius: 16px 2px 16px 16px; top: calc(50% + 12px); transform-origin: top right; }
.floating-menu.middle { transform-origin: center right; }
.floating-menu .wrap {
padding: 0 16px;
display: flex;
align-items: center;
gap: 16px;
height: 56px;
cursor: auto;
}
.floating-menu .wrap.selectable { cursor: pointer; }
.floating-menu .icon {
width: 24px;
height: 56px;
}
.floating-menu .icon.swap { background: var(--swap-vert-icon) no-repeat center / 24px; }
.floating-menu .icon.deadline { background: var(--deadline-icon) no-repeat center / 24px; }
.floating-menu .icon.repeat { background: var(--repeat-icon) no-repeat center / 24px; }
.floating-menu .icon.repeat-on { background: var(--repeat-on-icon) no-repeat center / 24px; }
.floating-menu .icon.edit { background: var(--edit-icon) no-repeat center / 24px; }
.floating-menu .icon.bin { background: var(--bin-icon) no-repeat center / 24px; }
.floating-menu .icon.move { background: var(--move-icon) no-repeat center / 24px; }
.floating-menu .icon.plus { background: var(--plus-icon) no-repeat center / 24px; }
.floating-menu .icon.check { background: var(--checkbox-checked-icon) no-repeat center / 24px; }
.floating-menu .icon.uncheck { background: var(--checkbox-icon) no-repeat center / 24px; }
.floating-menu .label {
font-size: 14px;
color: var(--txt-primary);
white-space: nowrap;
}
.floating-menu .label.info {
position: absolute;
inset: auto 16px auto;
text-align: center;
font: 12px Roboto-LightItalic;
white-space: normal;
}
/* ------------------------------------------[ Media queries ]------------------------------------------ */
@media (max-width: 489px){
#app {
padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
position: absolute;
width: 100%;
height: calc(100% - env(safe-area-inset-bottom));
}
}
@media (min-width: 490px){
#app {
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 490px;
height: 100%;
overflow: hidden;
}
}
@media (min-width: 960px){
#app { width: calc(100% / 3); overflow: visible; }
#app:before, #app:after {
content: "";
border-radius: 8px;
position: absolute;
inset: 0 auto;
width: .5px;
background: rgba(var(--border-primary), 1);
z-index: 1;
}
#app:before { left: 0; }
#app:after { right: 0; }
#main, .modal { max-width: 490px; }
.fab-ctr.opened {
inset: 0 -100% 0;
width: calc(100% * 3);
}
.fab-ctr.opened #view-menu.fab { left: calc(100% / 3 + 20px); }
.fab-ctr.opened #main-menu.fab { right: calc(100% / 3 + 20px); }
#project > .body { padding: 12px 12px calc(var(--project-footer-height) + 104px + env(safe-area-inset-bottom)); }
#project .button-block { bottom: 0; }
.project.opened { border-color: rgba(var(--color-blue), 1); }
#project-menu {
right: calc(-100% + 24px);
bottom: 152px;
animation: scale-in 200ms ease-out forwards;
}
#project:not([empty]):not([archived]) ~ #fabCtr > #project-menu { display: block; }
#fabCtr.opened #project-menu { right: 24px; }
#project:has(.floating-menu) + #fabCtr > #project-menu,
#project:has(.task-list.editing) + #fabCtr > #project-menu,
#project:has(.image-block.selected) + #fabCtr > #project-menu { animation: scale-out 200ms ease-out forwards; }
#weekly-recap { padding: 0 50%; inset: 0 -100%; }
.popup .card > .body .options > .choice:hover { background: rgba(var(--bcg-primary), 1); }
.popup .card > .body .options > .choice.selected:hover { background: rgba(var(--bcg-primary), 1) var(--check-icon) no-repeat 8px / 24px; }
.popup .input-field:hover,
#project .project-block.description > .description:hover { background-color: rgba(var(--bcg-primary), 1); }
.popup .body .tag:hover { background: rgba(var(--bcg-primary), 1); }
.floating-menu .wrap.selectable:hover { background: var(--btn-blue-primary); }
}
@media (max-width: 959px){
#filter-projects,
.project .output,
.project-block.users > .users,
.wrap.cards { overscroll-behavior-y: auto; }
#project:has(.floating-menu) + #fabCtr > #navigation,
#project:has(.floating-menu) + #fabCtr > #project-menu,
#project:has(.task-list.editing) + #fabCtr > #navigation,
#project:has(.task-list.editing) + #fabCtr > #project-menu,
#project:has(.image-block.selected) + #fabCtr > #navigation,
#project:has(.image-block.selected) + #fabCtr > #project-menu { animation: scale-out 200ms ease-out forwards; }
#timeline .block > .expand { height: calc(106px + env(safe-area-inset-bottom)); }
#timeline .block[style] > .expand {
align-items: center;
bottom: 84px;
height: 80px;
}
#project .expand-records.active { bottom: calc(104px + env(safe-area-inset-bottom)); }
}
@media (min-width: 1470px){
#main, .modal { margin: 0 calc((100% - 490px) / 2); }
}