Skip to content

Commit 20f0d66

Browse files
tajulafreentajulafreen
committed
Add styles
1 parent 0bdce0b commit 20f0d66

File tree

1 file changed

+187
-0
lines changed

1 file changed

+187
-0
lines changed

‎Source-Code/BatteryIndicator/style.css

+187
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: "Poppins", sans-serif;
8+
}
9+
10+
section {
11+
position: relative;
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
min-height: 100vh;
16+
}
17+
18+
section.dark {
19+
background: #161623;
20+
}
21+
22+
section::before {
23+
content: "";
24+
position: absolute;
25+
width: 240px;
26+
height: 240px;
27+
background: linear-gradient(#6cff47, #3d1046);
28+
border-radius: 50%;
29+
transform: translate(-150px, -100px);
30+
}
31+
32+
section.dark::before {
33+
background: linear-gradient(#ffc107, #e91e63);
34+
}
35+
36+
37+
section::after {
38+
content: "";
39+
position: absolute;
40+
width: 250px;
41+
height: 250px;
42+
background: linear-gradient(#f10050, rgb(8, 216, 253));
43+
border-radius: 50%;
44+
transform: translate(150px, 100px);
45+
}
46+
47+
section.dark::after {
48+
background: linear-gradient(#2196f3, #31ff38);
49+
}
50+
51+
.box {
52+
position: relative;
53+
width: 240px;
54+
height: 300px;
55+
background: rgba(255, 255, 255, 0.1);
56+
z-index: 1;
57+
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.25);
58+
border: 1px solid rgba(255, 255, 255, 0.25);
59+
border-right: 1px solid rgba(255, 255, 255, 0.1);
60+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
61+
backdrop-filter: blur(25px);
62+
border-radius: 10px;
63+
display: flex;
64+
justify-content: center;
65+
align-items: center;
66+
}
67+
68+
.content {
69+
display: flex;
70+
justify-content: center;
71+
align-items: center;
72+
flex-direction: column;
73+
}
74+
75+
.box h3 {
76+
color: #000000;
77+
font-weight: 500;
78+
font-size: 1.2rem;
79+
letter-spacing: 1px;
80+
}
81+
82+
section.dark .box h3 {
83+
color: #fff;
84+
}
85+
86+
.batteryShape {
87+
position: relative;
88+
width: 140px;
89+
height: 65px;
90+
margin: 20px 0;
91+
border: 3px solid #333;
92+
border-radius: 10px;
93+
}
94+
95+
section.dark .batteryShape {
96+
border: 3px solid #fff;
97+
}
98+
99+
.batteryShape::before {
100+
content: "";
101+
position: absolute;
102+
top: 50%;
103+
right: -12px;
104+
transform: translateY(-50%);
105+
width: 7px;
106+
height: 16px;
107+
background: #333;
108+
border-top-right-radius: 4px;
109+
border-bottom-right-radius: 4px;
110+
}
111+
112+
section.dark .batteryShape::before {
113+
background: #fff;
114+
}
115+
116+
.batteryShape::after {
117+
content: "";
118+
position: absolute;
119+
top: 0;
120+
left: 0;
121+
width: 100%;
122+
height: 50%;
123+
background: rgba(255, 255, 255, 0.1);
124+
}
125+
126+
.level {
127+
position: absolute;
128+
top: 4px;
129+
left: 4px;
130+
right: 4px;
131+
bottom: 4px;
132+
/* background: #333; */
133+
overflow: hidden;
134+
}
135+
136+
.percentage {
137+
position: absolute;
138+
top: 0;
139+
left: 0;
140+
height: 100%;
141+
width: 50%;
142+
background: linear-gradient(90deg, #ffeb3b, #27ff00);
143+
border-radius: 4px;
144+
}
145+
146+
section.dark .percentage {
147+
background: linear-gradient(90deg, #ffeb3b, #27ff00);
148+
}
149+
150+
.percent {
151+
color: #000000;
152+
font-size: 2em;
153+
font-weight: 700;
154+
}
155+
156+
section.dark .percent {
157+
color: #fff;
158+
}
159+
160+
.toggle {
161+
position: absolute;
162+
top: 20px;
163+
right: 20px;
164+
background: #070716;
165+
width: 30px;
166+
height: 30px;
167+
cursor: pointer;
168+
border-radius: 50%;
169+
display: flex;
170+
justify-content: center;
171+
align-items: center;
172+
}
173+
174+
.dark .toggle {
175+
background: #fff;
176+
}
177+
178+
.toggle::before {
179+
content: "\f186";
180+
font-family: fontAwesome;
181+
color: #fff;
182+
}
183+
184+
.dark .toggle::before {
185+
content: "\f185";
186+
color: #161623;
187+
}

0 commit comments

Comments
 (0)