Skip to content

Commit e4bdca1

Browse files
ForLoopCodesForLoopCodes
committed
theme change
1 parent b013cfe commit e4bdca1

File tree

5 files changed

+285
-43
lines changed

5 files changed

+285
-43
lines changed

‎public/css/theme.css‎

Lines changed: 161 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,19 @@
33
font-family: Poppins;
44
transition: 0.5s ease;
55
}
6+
:root {
7+
--backcolor: #effdff;
8+
}
69
html,
710
body,
811
.viewport {
912
height: 100%;
1013
width: 100%;
11-
margin-top: 120px;
12-
background: #f9f9fb;
14+
margin: 0;
15+
background: var(--backcolor);
1316
display: flex;
1417
justify-content: center;
18+
user-select: none;
1519
}
1620
button {
1721
background: #dce2e8;
@@ -72,13 +76,15 @@ select:hover {
7276
border: 1px solid #3b80f3;
7377
}
7478
.navbar {
75-
background: #f9f9fb;
79+
background: var(--backcolor);
7680
position: fixed;
7781
bottom: 0;
7882
left: 0;
7983
width: 130px;
8084
height: calc(100% - 100px);
8185
display: flex;
86+
border: 2.5px solid #05001b;
87+
border-width: 0 2.5px 0 0;
8288
flex-direction: column;
8389
justify-content: center;
8490
align-items: center;
@@ -91,13 +97,20 @@ select:hover {
9197
padding: 13.5px;
9298
border-radius: 10px;
9399
background: #fff;
100+
border: 2.5px solid #05001b;
101+
box-shadow: 5px 5px 0px 0px #05001b;
102+
display: flex;
103+
align-items: center;
94104
}
95105
.navbar-item:hover {
96106
background: #05001b;
107+
transform: translate(2.5px, 2.5px);
108+
box-shadow: 1px 0px 13px #0000001f, 2.5px 0px 0px 0px black;
97109
}
98110
.navbar-item svg {
99111
height: 100% !important;
100112
width: 100% !important;
113+
margin-left: 0px;
101114
}
102115
.navbar-item:hover svg path,
103116
.navbar-item:hover svg circle {
@@ -107,36 +120,103 @@ select:hover {
107120
.navbar-item svg circle {
108121
fill: #050017 !important;
109122
}
123+
.navbar::after {
124+
content: "";
125+
position: absolute;
126+
top: 0;
127+
right: -33px;
128+
width: 30px;
129+
height: 30px;
130+
background: transparent;
131+
border-top-left-radius: 100%;
132+
z-index: -1;
133+
border: 0px solid black;
134+
border-width: 2.5px 0px 0px 2.5px;
135+
pointer-events: none;
136+
box-shadow: -10px -10px 0 10px var(--backcolor);
137+
}
138+
.navbar:hover {
139+
width: 300px;
140+
transition: all 0.5s ease 0s, width 0.5s ease 1s, box-shadow 0.5s ease 1s;
141+
box-shadow: 1px 0px 13px #0000001f;
142+
}
143+
.navbar:hover .navbar-item {
144+
width: 200px;
145+
color: #05001b;
146+
transition: all 0.5s ease 0s, width ease 0.5s 1s;
147+
}
148+
.navbar-item:hover .navbar-button-text {
149+
color: #fff;
150+
}
151+
.navbar-button-text {
152+
opacity: 0;
153+
font-size: 0;
154+
font-weight: 700;
155+
}
156+
.navbar:hover .navbar-item .navbar-button-text {
157+
opacity: 1;
158+
font-size: inherit;
159+
transition: all 0.5s ease 0s, opacity 0.5s ease 1s, font-size 0.5s ease 1s,
160+
margin-left 0.5s ease 1s;
161+
margin-left: 20px;
162+
}
163+
.navbar:hover .navbar-item svg {
164+
width: 20px !important;
165+
height: 20px !important;
166+
margin-left: 10px;
167+
transition: margin-left 0.5s ease 1s, height 0.5s ease 1s, width 0.5s ease 1s;
168+
}
110169
.header {
111170
height: 100px;
112-
width: 100%;
171+
width: calc(100% - 130px - 400px);
113172
position: fixed;
114173
top: 0;
115-
right: 0;
116-
background: #f9f9fb;
117-
z-index: 2;
174+
left: 130px;
175+
background: var(--backcolor);
176+
z-index: 3;
118177
display: flex;
119178
justify-content: center;
120179
align-items: center;
121180
}
181+
.header::after {
182+
content: "";
183+
position: absolute;
184+
top: 0;
185+
left: -130px;
186+
width: 130px;
187+
height: 100px;
188+
background: var(--backcolor);
189+
z-index: 3;
190+
}
191+
.header::before {
192+
content: "";
193+
position: absolute;
194+
top: 0;
195+
right: -400px;
196+
width: 400px;
197+
height: 100px;
198+
background: var(--backcolor);
199+
z-index: 3;
200+
}
122201
.main-body {
123-
width: calc(100% - 130px - 400px - 20px);
202+
width: calc(100% - 130px - 400px - 20px - 5px);
124203
height: calc(100% - 100px);
125204
position: fixed;
126205
top: 100px;
127206
left: 130px;
128207
background: #fff;
129208
z-index: 1;
209+
border: 2.5px solid #05001b;
130210
padding-left: 20px;
131211
overflow: scroll;
132212
border-top-left-radius: 30px;
133213
border-top-right-radius: 30px;
134214
}
135-
.header-logo img {
215+
.header-logo svg {
136216
position: absolute;
137217
top: 40px;
138218
left: 50px;
139-
z-index: 3;
219+
z-index: 30;
140220
height: 30px !important;
141221
width: 30px !important;
142222
}
@@ -147,7 +227,7 @@ select:hover {
147227
bottom: 0;
148228
right: 0;
149229
z-index: 2;
150-
background: #f9f9fb;
230+
background: var(--backcolor);
151231
}
152232
.main-body div {
153233
animation: fade 1s ease;
@@ -160,9 +240,6 @@ select:hover {
160240
opacity: 1;
161241
}
162242
}
163-
.main-look-timer {
164-
font-size: 40px;
165-
}
166243
.timer-blink {
167244
animation: blink 1s ease infinite;
168245
}
@@ -177,11 +254,33 @@ select:hover {
177254
opacity: 0;
178255
}
179256
}
257+
.main-look-timer {
258+
font-size: 200px;
259+
position: absolute;
260+
width: max-content;
261+
top: 50%;
262+
left: 50%;
263+
transform: translate(-50%, -50%);
264+
z-index: 1;
265+
margin: 0;
266+
}
180267
.alt-look-timer {
181-
font-size: 20px;
268+
font-size: 120px;
269+
width: max-content;
270+
position: absolute;
271+
top: 50%;
272+
opacity: 0.2;
273+
left: 50%;
274+
transform: translate(-50%, -50%);
275+
z-index: 1;
276+
margin: 0;
182277
}
183278
.timer-details {
184279
font-size: 15px;
280+
font-weight: 600;
281+
}
282+
.alt-look-timer-details {
283+
opacity: 0.2;
185284
}
186285
.timer-input-invisible,
187286
.timer-button-invisible {
@@ -191,3 +290,50 @@ select:hover {
191290
opacity: 0;
192291
visibility: hidden;
193292
}
293+
.timer-input-visible input {
294+
width: 30px;
295+
}
296+
.timer-input-visible input::-webkit-outer-spin-button,
297+
.timer-input-visible input::-webkit-inner-spin-button {
298+
-webkit-appearance: none;
299+
margin: 0;
300+
}
301+
.sidebar-card {
302+
height: 50px;
303+
width: 310px;
304+
padding: 20px;
305+
margin-left: 20px;
306+
border-radius: 20px;
307+
display: flex;
308+
background: white;
309+
flex-direction: column;
310+
justify-content: center;
311+
align-items: center;
312+
border: 2.5px solid #05001b;
313+
box-shadow: 5px 5px 0px 0px #05001b;
314+
margin-bottom: 10px;
315+
font-weight: 700;
316+
}
317+
.sidebar-card:hover {
318+
background: #05001b;
319+
box-shadow: 0px 0px 0px 0px #05001b;
320+
transform: translate(2.5px, 2.5px);
321+
}
322+
.sidebar-card * {
323+
text-align: center;
324+
}
325+
.sidebar-card:hover * {
326+
color: white;
327+
}
328+
.sidebar-card:hover .visible-sidebar-card-info {
329+
display: none;
330+
}
331+
.sidebar-card:hover .invisible-sidebar-card-info {
332+
display: block;
333+
}
334+
.invisible-sidebar-card-info {
335+
display: none;
336+
}
337+
.visible-sidebar-card-info {
338+
display: block;
339+
}

‎src/components/bases/Mood.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useEffect } from "react";
22
import axios from "axios";
3-
3+
// add a password manager
44
export default function Mood() {
55
// to be saved in backend
66
// ##############################################################

‎src/components/bases/NavBar.jsx‎

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,26 @@
1-
import logo from "./resources/logo.svg";
21
import React from "react";
32

43
export default function NavBar(props) {
54
return (
65
<div>
76
<div className="header-logo">
8-
<img src={logo} alt="logo" />
7+
<svg
8+
width="128"
9+
height="128"
10+
x="0"
11+
y="0"
12+
viewBox="0 0 24 24"
13+
style={{ enableBackground: "new 0 0 512 512" }}
14+
className="logo"
15+
>
16+
<g>
17+
<path
18+
d="M18.314,7.548l-2.346-1.4.022-3.24A1.5,1.5,0,0,0,15.5,0h-7A1.5,1.5,0,0,0,8,2.908v3.22L5.653,7.549A5.531,5.531,0,0,0,3,12.255V18.5A5.506,5.506,0,0,0,8.5,24h7A5.506,5.506,0,0,0,21,18.5V12.274A5.526,5.526,0,0,0,18.314,7.548ZM18,18.5A2.5,2.5,0,0,1,15.5,21h-7A2.5,2.5,0,0,1,6,18.5V12.255a2.513,2.513,0,0,1,1.206-2.139l3.071-1.859A1.5,1.5,0,0,0,11,6.974V3h1.99l-.028,3.99a1.5,1.5,0,0,0,.732,1.3l3.085,1.836A2.513,2.513,0,0,1,18,12.274Zm-2-3v1A1.5,1.5,0,0,1,14.5,18h-5A1.5,1.5,0,0,1,8,16.5v-1A1.5,1.5,0,0,1,9.5,14h5A1.5,1.5,0,0,1,16,15.5Z"
19+
fill="#000000"
20+
data-original="#000000"
21+
></path>
22+
</g>
23+
</svg>
924
</div>
1025
<div className="header">
1126
<h1 className="header-heading">{props.activeTab}.</h1>
@@ -31,6 +46,7 @@ export default function NavBar(props) {
3146
></path>
3247
</g>
3348
</svg>
49+
<div className="navbar-button-text">Today</div>
3450
</span>
3551
<span
3652
className="navbar-item"
@@ -52,6 +68,7 @@ export default function NavBar(props) {
5268
></path>
5369
</g>
5470
</svg>
71+
<div className="navbar-button-text">Timer</div>
5572
</span>
5673
<span
5774
className="navbar-item"
@@ -73,6 +90,7 @@ export default function NavBar(props) {
7390
></path>
7491
</g>
7592
</svg>
93+
<div className="navbar-button-text">Todo</div>
7694
</span>
7795
<span
7896
className="navbar-item"
@@ -94,6 +112,7 @@ export default function NavBar(props) {
94112
></path>
95113
</g>
96114
</svg>
115+
<div className="navbar-button-text">Plus-Minus</div>
97116
</span>
98117
<span
99118
className="navbar-item"
@@ -115,6 +134,7 @@ export default function NavBar(props) {
115134
></path>
116135
</g>
117136
</svg>
137+
<div className="navbar-button-text">Expenses</div>
118138
</span>
119139
<span
120140
className="navbar-item"
@@ -136,6 +156,7 @@ export default function NavBar(props) {
136156
></path>
137157
</g>
138158
</svg>
159+
<div className="navbar-button-text">Moods</div>
139160
</span>
140161
<span
141162
className="navbar-item"
@@ -166,9 +187,9 @@ export default function NavBar(props) {
166187
</g>
167188
</g>
168189
</svg>
190+
<div className="navbar-button-text">Sleep?</div>
169191
</span>
170192
</div>
171-
<div className="sidebar">hi</div>
172193
</div>
173194
);
174195
}

0 commit comments

Comments
 (0)