Something went wrong. Try again.
Silly task tracker to track silly things for silly friend silly.bwc9876.dev
Something went wrong. Try again.
3.3 kB · 158 lines
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159:root { font-family: "sans-serif"; font-size: 18pt;
--level: 65%; --saturation-offset: 20%; --rainbow: linear-gradient( 90deg, hsl(0, calc(100% - var(--saturation-offset)), var(--level)) 0%, hsl(36, calc(100% - var(--saturation-offset)), var(--level)) 10%, hsl(64, calc(74% - var(--saturation-offset)), var(--level)) 20%, hsl(118, calc(68% - var(--saturation-offset)), var(--level)) 30%, hsl(179, calc(68% - var(--saturation-offset)), var(--level)) 40%, hsl(188, calc(76% - var(--saturation-offset)), var(--level)) 50%, hsl(212, calc(86% - var(--saturation-offset)), var(--level)) 60%, hsl(260, calc(89% - var(--saturation-offset)), var(--level)) 70%, hsl(284, calc(94% - var(--saturation-offset)), var(--level)) 80%, hsl(308, calc(97% - var(--saturation-offset)), var(--level)) 90%, hsl(0, calc(100% - var(--saturation-offset)), var(--level)) 100% );}
@keyframes scroll { from { background-position: 0% 0; }
to { background-position: var(--bg-size) 0; }}
@keyframes rainbow { 0% { filter: hue-rotate(0deg); }
50% { filter: hue-rotate(180deg); }
100% { filter: hue-rotate(360deg); }}
body { margin: auto; padding: 1vw; max-width: 40em; min-width: 40%; display: flex; flex-direction: column; gap: 0.4em;
h1 { margin-top: 0; display: flex; text-align: center; align-items: center; justify-content: center;
img { width: 2em; height: 2em; animation: rainbow 2s linear infinite; } }
label { margin-bottom: 0.1em; }
input { font-size: 18pt; }
& > button { transition: background-color 100ms linear; background-color: #6c7; font-size: 18pt; border: none;
&:disabled { background-color: #999; } }
div.list { display: flex; flex-direction: column; gap: 0.5em;
& > label { display: grid; grid: row / 1fr 3fr 0.6fr 0.2fr; align-items: center; gap: 0.5em; margin: 0; transition: scale 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55); border: solid 2px black; padding: 1em;
@starting-style { scale: 0.2; }
&.done { span { text-decoration: line-through; --bg-size: 200%; background-image: var(--rainbow); background-size: var(--bg-size); animation: scroll 5s linear infinite forwards; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
small { font-weight: bold; } }
button { font-weight: bold; text-align: center; width: 2em; height: 2em; padding: 2px; border: none; background-color: #c67; border-radius: 50%;
&:hover { background-color: #b56; } }
span { overflow-x: hidden; text-overflow: ellipsis; transition: -webkit-text-fill-color 100ms linear; }
small { text-align: right; transition: font-weight 200ms linear; } } }
.entryTopRow { display: flex; flex-direction: row; justify-content: space-between; }}