1:root {
 2  --color-primary: #4f46e5;
 3  --color-primary-light: rgba(79, 70, 229, 0.08);
 4  --color-bg: #313244;
 5  --text-base: #cdd6f4;
 6  --text-secondary: #374151;
 7}
 8
 9body {
10  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
11    Bitstream Vera Sans Mono, Courier New, monospace, serif;
12
13  color: var(--text-base);
14  background-color: var(--color-bg);
15}
16
17main {
18  max-width: 60rem;
19  margin: 0 auto;
20  padding-bottom: 4rem;
21}
22
23.badge {
24  font-size: 0.9rem;
25  color: var(--text-secondary);
26  background-color: var(--color-primary-light);
27  padding: 0 0.25rem;
28  border-radius: 4px;
29}
30
31ul.tasklist {
32  padding-left: 0;
33  list-style: none;
34}
35
36.task {
37  display: flex;
38  align-items: center;
39  gap: 1rem;
40  margin-bottom: 1rem;
41
42  & > input:checked {
43    & ~ div {
44      opacity: 0.5;
45    }
46    & ~ .content {
47      text-decoration: line-through;
48    }
49  }
50}
51
52.priority {
53  padding: 0 0.25rem;
54  border-radius: 4px;
55  color: #1e1e2e;
56  background-color: #b4befe;
57
58  &.priority-A {
59    background-color: #f38ba8;
60  }
61  &.priority-B {
62    background-color: #fab387;
63  }
64  &.priority-C {
65    background-color: #a6e3a1;
66  }
67}
68
69.completedDate {
70  color: #a6adc8;
71}
72
73.newTaskForm {
74  display: flex;
75  margin-top: 2rem;
76
77  & input {
78    flex-grow: 1;
79    padding: 0.5rem;
80    border-radius: 4px;
81    background-color: #585b70;
82    color: var(--text-base);
83  }
84}