bwc9876.dev
Silly task tracker to track silly things for silly friend
silly.bwc9876.dev
1:root {
2 font-family: "sans-serif";
3 font-size: 18pt;
4
5 --level: 65%;
6 --saturation-offset: 20%;
7 --rainbow: linear-gradient(
8 90deg,
9 hsl(0, calc(100% - var(--saturation-offset)), var(--level)) 0%,
10 hsl(36, calc(100% - var(--saturation-offset)), var(--level)) 10%,
11 hsl(64, calc(74% - var(--saturation-offset)), var(--level)) 20%,
12 hsl(118, calc(68% - var(--saturation-offset)), var(--level)) 30%,
13 hsl(179, calc(68% - var(--saturation-offset)), var(--level)) 40%,
14 hsl(188, calc(76% - var(--saturation-offset)), var(--level)) 50%,
15 hsl(212, calc(86% - var(--saturation-offset)), var(--level)) 60%,
16 hsl(260, calc(89% - var(--saturation-offset)), var(--level)) 70%,
17 hsl(284, calc(94% - var(--saturation-offset)), var(--level)) 80%,
18 hsl(308, calc(97% - var(--saturation-offset)), var(--level)) 90%,
19 hsl(0, calc(100% - var(--saturation-offset)), var(--level)) 100%
20 );
21}
22
23@keyframes scroll {
24 from {
25 background-position: 0% 0;
26 }
27
28 to {
29 background-position: var(--bg-size) 0;
30 }
31}
32
33@keyframes rainbow {
34 0% {
35 filter: hue-rotate(0deg);
36 }
37
38 50% {
39 filter: hue-rotate(180deg);
40 }
41
42 100% {
43 filter: hue-rotate(360deg);
44 }
45}
46
47body {
48 margin: auto;
49 padding: 1vw;
50 max-width: 40em;
51 min-width: 40%;
52 display: flex;
53 flex-direction: column;
54 gap: 0.4em;
55
56 h1 {
57 margin-top: 0;
58 display: flex;
59 text-align: center;
60 align-items: center;
61 justify-content: center;
62
63 img {
64 width: 2em;
65 height: 2em;
66 animation: rainbow 2s linear infinite;
67 }
68 }
69
70 label {
71 margin-bottom: 0.1em;
72 }
73
74 input {
75 font-size: 18pt;
76 }
77
78 & > button {
79 transition: background-color 100ms linear;
80 background-color: #6c7;
81 font-size: 18pt;
82 border: none;
83
84 &:disabled {
85 background-color: #999;
86 }
87 }
88
89 div.list {
90 display: flex;
91 flex-direction: column;
92 gap: 0.5em;
93
94 & > label {
95 display: grid;
96 grid: row / 1fr 3fr 0.6fr 0.2fr;
97 align-items: center;
98 gap: 0.5em;
99 margin: 0;
100 transition: scale 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
101 border: solid 2px black;
102 padding: 1em;
103
104 @starting-style {
105 scale: 0.2;
106 }
107
108 &.done {
109 span {
110 text-decoration: line-through;
111 --bg-size: 200%;
112 background-image: var(--rainbow);
113 background-size: var(--bg-size);
114 animation: scroll 5s linear infinite forwards;
115 -webkit-background-clip: text;
116 background-clip: text;
117 -webkit-text-fill-color: transparent;
118 }
119
120 small {
121 font-weight: bold;
122 }
123 }
124
125 button {
126 font-weight: bold;
127 text-align: center;
128 width: 2em;
129 height: 2em;
130 padding: 2px;
131 border: none;
132 background-color: #c67;
133 border-radius: 50%;
134
135 &:hover {
136 background-color: #b56;
137 }
138 }
139
140 span {
141 overflow-x: hidden;
142 text-overflow: ellipsis;
143 transition: -webkit-text-fill-color 100ms linear;
144 }
145
146 small {
147 text-align: right;
148 transition: font-weight 200ms linear;
149 }
150 }
151 }
152}