Skip to content

Commit 9bdb5da

Browse files
code-nevescode-neves
authored
Add files via upload
1 parent a9b291b commit 9bdb5da

File tree

7 files changed

+490
-109
lines changed

7 files changed

+490
-109
lines changed

‎css/style.css

+134-68
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,20 @@
1010
}
1111

1212
:root {
13+
--font-family: 'Space Mono', monospace;
1314
font-size: 10px;
15+
--background-color-body: #000000;
16+
--text-color-body: #ffffff;
17+
--mix-blend-mode-body: difference;
18+
--transition-duration: 1s;
19+
20+
--background-image-main: url('../assets/bg-overlay.png');
21+
--background-size-main: cover;
22+
--background-repeat-main: no-repeat;
23+
--background-position-main: center;
24+
25+
--box-shadow-light: #ffffff26 0 1px 0 inset, #2e365013 0 1px 1px;
26+
--box-shadow-hover: 1px solid #ffffff99;
1427
}
1528

1629
html {
@@ -68,7 +81,7 @@ header {
6881

6982
#settingsGear_B{
7083
cursor: pointer;
71-
z-index: 2;
84+
font-size: 28px;
7285
}
7386
#clock{
7487
cursor: pointer;
@@ -80,11 +93,12 @@ header {
8093

8194
.settings {
8295
background-color: rgba(5, 0, 0, 0.355);
83-
backdrop-filter: blur(4px);
96+
backdrop-filter: brightness(0.4);
8497
display: flex;
8598
flex-direction: column;
8699
justify-content: center;
87-
align-items: center;
100+
align-items: end;
101+
padding: 0 8%;
88102
position: absolute;
89103
left: 0;
90104
right: 0;
@@ -95,33 +109,48 @@ header {
95109
pointer-events: none;
96110
transition: opacity 0.2s ease;
97111

98-
.top-but-cont {
99-
outline: 2px solid rgba(255, 255, 255, 0.619);
112+
.settings-container {
113+
border: 2px solid #ffffff9e;
100114
backdrop-filter: blur(4px);
101115
width: 450px;
102-
padding: 18px 32px 22px 32px;
116+
max-height: 500px;
117+
overflow-y: scroll;
118+
padding: 16px;
103119
border-radius: 12px;
104120
display: flex;
105121
flex-direction: column;
106122
justify-content: space-between;
107123
align-items: start;
108124
gap: 16px;
109125
background-color: #1a1a1ac8;
110-
126+
111127
.settings-label {
112128
font-size: 3rem;
113-
color: #b5b5b5;
129+
color: #ffffff;
114130

115131
display: flex;
116132
gap: 12px;
117-
}
133+
& i{
134+
transition: 200ms ease;
135+
font-size: 3.1rem;
136+
cursor: pointer;
137+
&:hover{
138+
transition: 200ms ease;
139+
transform: translateX(-2px);
140+
}
141+
}
142+
}
118143

119144
& h3 {
120-
font-size: 2.2rem;
145+
font-size: 2.7rem;
121146
font-weight: 400;
122147
margin-bottom: 8px;
123-
}
124148

149+
border-bottom: 1px solid #ffffff39;
150+
}
151+
& h4{
152+
font-size: 1.3rem;
153+
}
125154
.settings-duration {
126155
width: 100%;
127156

@@ -131,40 +160,51 @@ header {
131160

132161
.container_I {
133162
display: flex;
134-
flex-direction: column;
135-
align-items: start;
163+
flex-wrap: wrap;
164+
justify-content: space-between;
165+
align-items: center;
166+
margin-bottom: 16px;
136167
gap: 8px;
137168
font-size: 2rem;
138169

139-
input[type=range] {
170+
.range {
140171
-webkit-appearance: none;
141172
-o-appearance: none;
142173
appearance: none;
143174
-moz-appearance: none;
144175
-ms-appearance: none;
145-
background-color: rgba(255, 255, 255, 0) !important;
146-
border: 2px solid #fff !important;
176+
background-color: #ffffff1e;
177+
box-shadow: #ffffff26 0 1px 0 inset,#2e365013 0 1px 1px;
147178

148-
border-radius: 42px;
149179

150-
width: 75% !important;
180+
border-radius: 8px;
181+
width: 100% !important;
182+
transition: 200ms ease;
183+
&:hover{
184+
border: 1px solid #ffffff99;
185+
transition: 200ms ease;
186+
}
187+
&:hover > &.range::-webkit-slider-thumb{
188+
background-color: #c5141499;
189+
transition: 200ms ease;
190+
}
151191
}
152-
input[type='range']::-webkit-slider-thumb {
192+
.range::-webkit-slider-thumb {
153193
-webkit-appearance: none;
154-
background-color: #231dc5;
194+
background-color: #ffffff51;
155195
width: 60px;
156-
height: 20px;
157-
border-radius: 12px;
196+
height: 28px;
197+
border-radius: 6px;
158198
cursor: pointer;
159199

160-
box-shadow: 0 0px 0px 2px #ffffff;
200+
161201
}
162202

163203
& h1 {
164204
font-size: 4.8rem;
165205
font-weight: 600;
166206
}
167-
207+
168208
& label {
169209
font-size: 1.8rem;
170210
font-weight: 400;
@@ -173,40 +213,66 @@ header {
173213
& input {
174214
font-size: 1.8rem;
175215
font-weight: 400;
176-
background-color: #ffffff1e;
177-
border-radius: 12px;
216+
background-color: rgba(255, 255, 255, 0.118);
217+
box-shadow: #ffffff26 0 1px 0 inset,#2e365013 0 1px 1px;
218+
border: 1px solid transparent;
219+
border-radius: 8px;
178220
padding: 4px 16px;
221+
transition: 200ms ease;
222+
&:hover{
223+
border: 1px solid #ffffff99;
224+
transition: 200ms ease;
225+
}
179226
}
180227
}
181228

182229
}
230+
.settings-notifications{
231+
232+
233+
& h4{
234+
font-size: 1.3rem;
235+
margin-top: 16px;
236+
}
237+
.container_S{
238+
display: flex;
239+
justify-content: space-between;
240+
align-items: center;
241+
margin-bottom: 8px;
242+
gap: 8px;
243+
& label{
244+
font-size: 1.8rem;
245+
font-weight: 400;
246+
}
247+
248+
}
249+
}
183250
}
184251

185252
}
186253

187254
#updateDuration {
188-
max-height: 54px;
255+
min-height: 60px;
256+
min-width: 100%;
189257
font-size: 2.8rem;
190258
padding: 8px 22px;
191259
color: #fff;
192260
background-color: rgba(255, 255, 255, 0);
193-
outline: solid 2px #fff;
261+
box-shadow: #ffffff26 0 1px 0 inset,#2e365013 0 1px 1px;
194262
border-radius: 8px;
195-
transition: all 0.15s ease-in-out;
196-
display: flex;
197-
justify-content: start;
198-
align-items: center;
199-
gap: 8px;
263+
transition: 0.15s ease-in-out;
264+
border: none;
265+
overflow: hidden;
266+
200267
cursor: pointer;
201-
background: rgb(57, 120, 207);
202268
background: linear-gradient(90deg, rgba(57, 120, 207, 1) 0%, rgba(139, 61, 192, 1) 67%, rgba(180, 32, 184, 1) 100%);
203269

204270
&:hover {
205271
transition: all 0.2s ease-in-out;
206272
}
207273

208274
&:active {
209-
transform: scale(0.8);
275+
transform: scale(0.95);
210276
transition: all 0.1s ease-in-out;
211277
}
212278
}
@@ -217,41 +283,41 @@ header {
217283
height: 54px;
218284
overflow: visible;
219285

220-
}
221-
222-
& button {
223-
line-height: 1;
224-
font-size: 2.8rem;
225-
padding: 8px 22px;
226-
background-color: rgba(240, 248, 255, 0);
227-
border-radius: 8px;
228-
transition: all 0.15s ease-in-out;
229-
outline: solid 2px rgba(240, 248, 255, 0.2);
230-
display: flex;
231-
justify-content: start;
232-
align-items: center;
233-
gap: 8px;
234-
cursor: pointer;
235-
236-
&:hover {
237-
background-color: rgba(240, 248, 255, 0.2);
238-
transform: translateY(-4px);
239-
transition: all 0.2s ease-in-out;
240-
}
241-
242-
&:active {
243-
transform: scale(0.8);
244-
transition: all 0.1s ease-in-out;
245-
outline: solid 4px rgba(255, 255, 255, 0.4);
246-
}
247-
248-
&:disabled {
249-
opacity: 0.6;
250-
pointer-events: none;
251-
transform: scale(0.9);
252-
transition: all 0.2s ease-in-out;
286+
& button {
287+
line-height: 1;
288+
font-size: 2.8rem;
289+
padding: 8px 22px;
290+
background-color: rgba(240, 248, 255, 0);
291+
border-radius: 8px;
292+
transition: all 0.15s ease-in-out;
293+
border: solid 2px #f0f8ff33;
294+
display: flex;
295+
justify-content: start;
296+
align-items: center;
297+
gap: 8px;
298+
cursor: pointer;
299+
300+
&:hover {
301+
background-color: #f0f8ff33;
302+
transform: translateY(-4px);
303+
transition: all 0.2s ease-in-out;
304+
}
305+
306+
&:active {
307+
transform: scale(0.8);
308+
transition: all 0.1s ease-in-out;
309+
outline: solid 4px rgba(255, 255, 255, 0.4);
310+
}
311+
312+
&:disabled {
313+
opacity: 0.6;
314+
pointer-events: none;
315+
transform: scale(0.9);
316+
transition: all 0.2s ease-in-out;
317+
}
253318
}
254319
}
320+
255321
#timerDisplay {
256322
mix-blend-mode: hard-light;
257323
text-align: center;

0 commit comments

Comments
 (0)