Hugging Face's logo

Spaces:
Nuzwa
/
_Organize_DailyLife_Calculator_
Running

App Files Community
Nuzwa commited on
Commit
3ec2d6d
·
verified ·
1 Parent(s): 7d5587d

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +177 -18
style.css CHANGED
@@ -1,28 +1,187 @@
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
 
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Basic Reset and Global Styles */
2
  body {
3
+ font-family: 'Poppins', sans-serif;
4
+ margin: 0;
5
+ padding: 0;
6
+ background: #ffffff;
7
+ display: flex;
8
+ justify-content: center;
9
+ align-items: center;
10
+ min-height: 100vh;
11
+ color: #6A1B9A;
12
  }
13
 
14
+ /* Main Container */
15
+ .container {
16
+ max-width: 450px;
17
+ width: 100%;
18
+ background-color: #f9f9f9;
19
+ padding: 30px;
20
+ border-radius: 15px;
21
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
22
+ border-top: 5px solid #8A2BE2;
23
  }
24
 
25
+ /* Typography */
26
+ .header {
27
+ text-align: center;
28
+ margin-bottom: 25px;
 
29
  }
30
 
31
+ .header h1 {
32
+ color: #8A2BE2;
33
+ font-size: 2em;
34
+ font-weight: 700;
35
+ margin: 0 0 5px 0;
 
36
  }
37
 
38
+ .header p {
39
+ color: #6A1B9A;
40
+ margin: 0;
41
+ font-size: 1em;
42
  }
43
+
44
+ /* Input Section */
45
+ .input-section {
46
+ display: flex;
47
+ gap: 10px;
48
+ margin-bottom: 25px;
49
+ }
50
+
51
+ #task-input {
52
+ flex-grow: 1;
53
+ padding: 15px;
54
+ border: 2px solid #D1C4E9;
55
+ border-radius: 8px;
56
+ font-size: 1em;
57
+ color: #6A1B9A;
58
+ transition: border-color 0.3s;
59
+ }
60
+
61
+ #task-input:focus {
62
+ outline: none;
63
+ border-color: #8A2BE2;
64
+ }
65
+
66
+ #add-btn {
67
+ background-color: #8A2BE2;
68
+ color: white;
69
+ border: none;
70
+ padding: 15px;
71
+ border-radius: 8px;
72
+ cursor: pointer;
73
+ transition: background-color 0.3s;
74
+ display: flex;
75
+ align-items: center;
76
+ justify-content: center;
77
+ }
78
+
79
+ #add-btn:hover {
80
+ background-color: #6A1B9A;
81
+ }
82
+
83
+ #add-btn svg {
84
+ stroke: white;
85
+ }
86
+
87
+ /* Task List */
88
+ .task-list {
89
+ list-style: none;
90
+ padding: 0;
91
+ margin: 0;
92
+ display: flex;
93
+ flex-direction: column;
94
+ gap: 10px;
95
+ }
96
+
97
+ .task-item {
98
+ display: flex;
99
+ align-items: center;
100
+ justify-content: space-between;
101
+ background-color: #F3E5F5;
102
+ padding: 15px;
103
+ border-radius: 8px;
104
+ transition: background-color 0.3s;
105
+ }
106
+
107
+ .task-item.completed {
108
+ background-color: #F3E5F5;
109
+ border: 1px solid #D1C4E9;
110
+ }
111
+
112
+ .task-item .task-text {
113
+ flex-grow: 1;
114
+ margin: 0 10px;
115
+ color: #6A1B9A;
116
+ font-weight: 400;
117
+ }
118
+
119
+ .task-item.completed .task-text {
120
+ text-decoration: line-through;
121
+ color: #D1C4E9;
122
+ }
123
+
124
+ .task-item .toggle-btn {
125
+ width: 24px;
126
+ height: 24px;
127
+ border-radius: 50%;
128
+ border: 2px solid #D1C4E9;
129
+ background: none;
130
+ cursor: pointer;
131
+ transition: background-color 0.3s, border-color 0.3s;
132
+ display: flex;
133
+ align-items: center;
134
+ justify-content: center;
135
+ }
136
+
137
+ .task-item .toggle-btn:hover {
138
+ border-color: #8A2BE2;
139
+ }
140
+
141
+ .task-item.completed .toggle-btn {
142
+ background-color: #8A2BE2;
143
+ border-color: #8A2BE2;
144
+ }
145
+
146
+ .task-item.completed .toggle-btn svg {
147
+ stroke: white;
148
+ }
149
+
150
+ .delete-btn {
151
+ background: none;
152
+ border: none;
153
+ cursor: pointer;
154
+ padding: 5px;
155
+ color: #D1C4E9;
156
+ transition: color 0.3s;
157
+ }
158
+
159
+ .delete-btn:hover {
160
+ color: #8A2BE2;
161
+ }
162
+
163
+ /* Empty State */
164
+ .empty-state {
165
+ text-align: center;
166
+ padding: 30px 0;
167
+ color: #D1C4E9;
168
+ display: none;
169
+ flex-direction: column;
170
+ align-items: center;
171
+ gap: 10px;
172
+ }
173
+
174
+ .empty-state svg {
175
+ stroke: #D1C4E9;
176
+ }
177
+
178
+ /* Tasks Remaining Count */
179
+ .tasks-remaining {
180
+ text-align: center;
181
+ margin-top: 20px;
182
+ color: #6A1B9A;
183
+ font-size: 0.9em;
184
+ display: none;
185
+ }
186
+
187
+ /* Lucide icons are inlined via JavaScript, so no need for CSS */