Skip to content

Commit b74b02a

Browse files
PabloG-7PabloG-7
committed
update
1 parent 5014000 commit b74b02a

File tree

3 files changed

+380
-156
lines changed

3 files changed

+380
-156
lines changed

‎src/App.module.css‎

Lines changed: 246 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -1,132 +1,259 @@
11
:root {
2-
--bg: #ffffff;
3-
--text: #333333;
4-
--card: #f0f0f0;
5-
--primary: #0077ff;
6-
--done: gray;
7-
}
8-
9-
.dark {
10-
--bg: #121212;
11-
--text: #f1f1f1;
12-
--card: #1f1f1f;
13-
--primary: #4dabf7;
14-
--done: #777;
15-
}
16-
2+
--bg: #ffffff;
3+
--text: #333333;
4+
--card: #f8f9fa;
5+
--primary: #4361ee;
6+
--primary-hover: #3a56d4;
7+
--secondary: #f72585;
8+
--done: #adb5bd;
9+
--border: #e9ecef;
10+
--shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
11+
--radius: 8px;
12+
--transition: all 0.2s ease;
13+
}
14+
15+
.dark {
16+
--bg: #121212;
17+
--text: #f8f9fa;
18+
--card: #1e1e1e;
19+
--primary: #4cc9f0;
20+
--primary-hover: #3aa8d8;
21+
--secondary: #f72585;
22+
--done: #6c757d;
23+
--border: #2b2b2b;
24+
--shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
25+
}
26+
27+
.container {
28+
max-width: 600px;
29+
width: 100%;
30+
padding: 1.5rem;
31+
background: var(--bg);
32+
border-radius: var(--radius);
33+
box-shadow: var(--shadow);
34+
text-align: center;
35+
color: var(--text);
36+
transition: var(--transition);
37+
margin: 0 auto;
38+
border: 1px solid var(--border);
39+
}
40+
41+
.title {
42+
font-size: 1.8rem;
43+
margin-bottom: 1.5rem;
44+
color: var(--primary);
45+
font-weight: 600;
46+
}
47+
48+
.toggleTheme {
49+
position: absolute;
50+
top: 1rem;
51+
right: 1rem;
52+
background: var(--primary);
53+
color: white;
54+
border: none;
55+
border-radius: 50%;
56+
width: 2.5rem;
57+
height: 2.5rem;
58+
display: flex;
59+
align-items: center;
60+
justify-content: center;
61+
cursor: pointer;
62+
transition: var(--transition);
63+
box-shadow: var(--shadow);
64+
}
65+
66+
.toggleTheme:hover {
67+
background: var(--primary-hover);
68+
transform: scale(1.05);
69+
}
70+
71+
.inputGroup {
72+
display: flex;
73+
gap: 0.5rem;
74+
margin: 1.5rem 0;
75+
}
76+
77+
.inputGroup input {
78+
flex: 1;
79+
padding: 0.75rem 1rem;
80+
font-size: 1rem;
81+
border: 1px solid var(--border);
82+
border-radius: var(--radius);
83+
background: var(--bg);
84+
color: var(--text);
85+
transition: var(--transition);
86+
}
87+
88+
.inputGroup input:focus {
89+
outline: none;
90+
border-color: var(--primary);
91+
box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.2);
92+
}
93+
94+
.inputGroup button {
95+
padding: 0.75rem 1.5rem;
96+
background-color: var(--primary);
97+
color: white;
98+
border: none;
99+
border-radius: var(--radius);
100+
cursor: pointer;
101+
font-weight: 500;
102+
transition: var(--transition);
103+
}
104+
105+
.inputGroup button:hover {
106+
background-color: var(--primary-hover);
107+
transform: translateY(-1px);
108+
}
109+
110+
.filtros {
111+
display: flex;
112+
justify-content: center;
113+
flex-wrap: wrap;
114+
gap: 0.5rem;
115+
margin-bottom: 1.5rem;
116+
}
117+
118+
.filtros button {
119+
padding: 0.5rem 1rem;
120+
border: none;
121+
border-radius: var(--radius);
122+
background-color: var(--card);
123+
color: var(--text);
124+
cursor: pointer;
125+
transition: var(--transition);
126+
font-weight: 500;
127+
}
128+
129+
.filtros button:hover {
130+
background-color: var(--primary);
131+
color: white;
132+
}
133+
134+
.filtros button.active {
135+
background-color: var(--primary);
136+
color: white;
137+
}
138+
139+
.taskList {
140+
list-style: none;
141+
padding: 0;
142+
margin: 0;
143+
display: flex;
144+
flex-direction: column;
145+
gap: 0.5rem;
146+
}
147+
148+
.taskItem {
149+
display: flex;
150+
align-items: center;
151+
justify-content: space-between;
152+
background: var(--card);
153+
padding: 1rem;
154+
border-radius: var(--radius);
155+
gap: 1rem;
156+
border: 1px solid var(--border);
157+
transition: var(--transition);
158+
}
159+
160+
.taskItem:hover {
161+
transform: translateY(-2px);
162+
box-shadow: var(--shadow);
163+
}
164+
165+
.taskCheckbox {
166+
min-width: 1.25rem;
167+
min-height: 1.25rem;
168+
accent-color: var(--primary);
169+
cursor: pointer;
170+
}
171+
172+
.taskTitle {
173+
flex: 1;
174+
margin: 0 0.5rem;
175+
word-break: break-word;
176+
text-align: left;
177+
font-size: 1rem;
178+
}
179+
180+
.taskTitle input {
181+
width: 100%;
182+
padding: 0.5rem;
183+
border: 1px solid var(--border);
184+
border-radius: var(--radius);
185+
background: var(--bg);
186+
color: var(--text);
187+
}
188+
189+
.done {
190+
text-decoration: line-through;
191+
color: var(--done);
192+
}
193+
194+
.taskActions {
195+
display: flex;
196+
gap: 0.5rem;
197+
}
198+
199+
.taskActions button {
200+
background: transparent;
201+
border: none;
202+
color: var(--text);
203+
cursor: pointer;
204+
width: 2rem;
205+
height: 2rem;
206+
display: flex;
207+
align-items: center;
208+
justify-content: center;
209+
border-radius: 50%;
210+
transition: var(--transition);
211+
}
212+
213+
.taskActions button:hover {
214+
background: rgba(0, 0, 0, 0.1);
215+
color: var(--primary);
216+
}
217+
218+
.taskActions button.delete:hover {
219+
color: var(--secondary);
220+
}
221+
222+
.emptyState {
223+
padding: 2rem;
224+
text-align: center;
225+
color: var(--done);
226+
}
227+
228+
@media (max-width: 600px) {
17229
.container {
18-
max-width: 500px;
19-
width: 100%;
20-
padding: 2rem;
21-
background: var(--bg);
22-
border-radius: 12px;
23-
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
24-
text-align: center;
25-
color: var(--text);
26-
transition: all 0.3s ease;
230+
padding: 1.25rem;
231+
margin: 1rem auto;
27232
}
28-
233+
29234
.title {
30-
font-size: 1.8rem;
235+
font-size: 1.5rem;
236+
margin-top: 1.5rem;
31237
}
32-
238+
33239
.toggleTheme {
34-
margin-bottom: 1rem;
35-
cursor: pointer;
36-
background: none;
37-
border: none;
38-
color: var(--primary);
39-
font-weight: bold;
240+
top: 0.5rem;
241+
right: 0.5rem;
242+
width: 2.25rem;
243+
height: 2.25rem;
40244
}
41-
245+
42246
.inputGroup {
43-
display: flex;
44-
gap: 0.5rem;
45-
margin: 1rem 0;
46-
}
47-
48-
.inputGroup input {
49-
flex: 1;
50-
padding: 0.5rem;
51-
font-size: 1rem;
52-
}
53-
54-
.inputGroup button {
55-
padding: 0.5rem 1rem;
56-
background-color: var(--primary);
57-
color: white;
58-
border: none;
59-
border-radius: 5px;
60-
cursor: pointer;
61-
}
62-
63-
.inputGroup button:hover {
64-
background-color: #005fc2;
65-
}
66-
67-
.filtros {
68-
margin-bottom: 1rem;
247+
flex-direction: column;
69248
}
70-
71-
.filtros button {
72-
margin: 0 5px;
73-
padding: 0.4rem 0.8rem;
74-
border: none;
75-
border-radius: 5px;
76-
background-color: #e0e0e0;
77-
cursor: pointer;
78-
transition: background-color 0.3s;
79-
}
80-
81-
.filtros button:hover {
82-
background-color: #d0d0d0;
83-
}
84-
85-
.taskList {
86-
list-style: none;
87-
padding: 0;
88-
}
89-
249+
90250
.taskItem {
91-
display: flex;
92-
align-items: center;
93-
justify-content: space-between;
94-
background: var(--card);
95-
margin-bottom: 0.5rem;
96-
padding: 0.6rem;
97-
border-radius: 5px;
251+
flex-direction: column;
252+
align-items: flex-start;
253+
gap: 0.75rem;
98254
}
99-
100-
.taskTitle {
101-
flex: 1;
102-
margin-left: 0.5rem;
103-
word-break: break-word;
104-
}
105-
106-
.done {
107-
text-decoration: line-through;
108-
color: var(--done);
109-
}
110-
255+
111256
.taskActions {
112-
display: flex;
113-
gap: 0.5rem;
114-
}
115-
116-
.taskActions button {
117-
background: transparent;
118-
border: none;
119-
color: red;
120-
font-weight: bold;
121-
cursor: pointer;
257+
align-self: flex-end;
122258
}
123-
124-
@media (max-width: 600px) {
125-
.inputGroup {
126-
flex-direction: column;
127-
}
128-
129-
.inputGroup button {
130-
width: 100%;
131-
}
132-
}
259+
}

0 commit comments

Comments
 (0)