Skip to content

Commit 46ef6f8

Browse files
QBStevieQBStevie
authored
feat: added more css
Add green.css purple.css light.css
1 parent d59a532 commit 46ef6f8

File tree

3 files changed

+1017
-0
lines changed

3 files changed

+1017
-0
lines changed

‎html/styles/green.css‎

Lines changed: 339 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,339 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&display=swap");
2+
3+
:root {
4+
/* Dark Green Theme */
5+
--md-primary: #4caf50;
6+
--md-on-primary: #ffffff;
7+
--md-primary-container: #c8e6c9;
8+
--md-on-primary-container: #003910;
9+
--md-secondary: #388e3c;
10+
--md-on-secondary: #ffffff;
11+
--md-secondary-container: #dcedc8;
12+
--md-on-secondary-container: #003910;
13+
--md-tertiary: #8bc34a;
14+
--md-on-tertiary: #000000;
15+
--md-tertiary-container: #dcedc8;
16+
--md-on-tertiary-container: #003910;
17+
--md-surface: #1c1b1f;
18+
--md-on-surface: #e6e1e5;
19+
--md-surface-container-lowest: #0f0d13;
20+
--md-surface-container-low: #1d1b20;
21+
--md-surface-container: #211f26;
22+
--md-surface-container-high: #2b2930;
23+
--md-surface-container-highest: #36343b;
24+
--md-error: #b3261e;
25+
--md-on-error: #ffffff;
26+
--md-error-container: #93000a;
27+
--md-on-error-container: #ffdad5;
28+
--md-outline: #79747e;
29+
--md-outline-variant: #49454f;
30+
--md-inverse-surface: #e6e1e5;
31+
--md-inverse-on-surface: #1c1b1f;
32+
--md-scrim: rgba(0, 0, 0, 0.6);
33+
--md-shadow: rgba(0, 0, 0, 0.15);
34+
--md-success: #9bd880;
35+
--md-on-success: #193800;
36+
--md-success-container: #275000;
37+
--md-on-success-container: #b6f397;
38+
39+
/* Typography */
40+
--md-typescale-body-large-size: 16px;
41+
--md-typescale-body-medium-size: 14px;
42+
--md-typescale-body-small-size: 12px;
43+
--md-typescale-title-medium-size: 16px;
44+
--md-typescale-headline-small-size: 24px;
45+
--md-typescale-label-large-size: 14px;
46+
47+
/* Shapes */
48+
--md-radius-small: 8px;
49+
--md-radius-medium: 12px;
50+
--md-radius-large: 16px;
51+
52+
/* Elevation */
53+
--md-elevation-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
54+
--md-elevation-2: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
55+
56+
/* Font */
57+
--font-primary: "Exo 2", sans-serif;
58+
--font-weight-regular: 400;
59+
--font-weight-medium: 500;
60+
}
61+
62+
* {
63+
padding: 0;
64+
margin: 0;
65+
font-family: var(--font-primary) !important;
66+
font-weight: 300;
67+
color: var(--md-on-surface);
68+
}
69+
70+
.root-wrapper {
71+
width: 30vw;
72+
height: auto;
73+
top: 31.2%;
74+
left: 62.5%;
75+
transform: translateY(-50%) translateX(-50%);
76+
position: absolute;
77+
overflow: hidden;
78+
background: transparent !important;
79+
}
80+
81+
html,
82+
body {
83+
background: transparent !important;
84+
}
85+
86+
/* width */
87+
::-webkit-scrollbar {
88+
width: 10px;
89+
}
90+
91+
/* Track */
92+
::-webkit-scrollbar-track {
93+
background: var(--md-surface-container-low);
94+
}
95+
96+
/* Handle */
97+
::-webkit-scrollbar-thumb {
98+
background: var(--md-surface-container-high);
99+
}
100+
101+
.main-wrapper {
102+
margin: auto;
103+
margin-top: 64.2%;
104+
width: 44.5%;
105+
height: 80vh;
106+
position: relative;
107+
overflow: auto;
108+
padding: 1.5rem;
109+
display: none;
110+
}
111+
112+
.heading {
113+
display: flex;
114+
justify-content: center;
115+
overflow: wrap;
116+
margin-bottom: 5px;
117+
background: var(--md-surface-container);
118+
box-shadow: var(--md-elevation-1);
119+
color: var(--md-on-surface);
120+
font-size: var(--md-typescale-body-medium-size);
121+
font-weight: var(--font-weight-regular);
122+
padding: 0.45rem;
123+
}
124+
125+
.heading h1 {
126+
font-size: var(--md-typescale-headline-small-size);
127+
position: relative;
128+
font-weight: var(--font-weight-medium);
129+
font-family: var(--font-primary) !important;
130+
}
131+
132+
.form {
133+
width: 100%;
134+
height: auto;
135+
min-height: 10%;
136+
max-height: 70%;
137+
margin: auto;
138+
display: flex;
139+
flex-direction: column;
140+
}
141+
142+
.form label {
143+
margin-top: 24px;
144+
font-family: var(--font-primary) !important;
145+
}
146+
147+
.form-control[type="number"] {
148+
appearance: none;
149+
-webkit-appearance: none;
150+
}
151+
152+
.form-control[type="text"],
153+
.form-control[type="number"],
154+
.form-control[type="password"] {
155+
border: none;
156+
font-size: var(--md-typescale-body-medium-size);
157+
margin: 5px 0px;
158+
background: var(--md-surface-container);
159+
height: 50px;
160+
text-align: center;
161+
width: 100%;
162+
}
163+
164+
.form-control[type="text"]:focus,
165+
.form-control[type="number"]:focus,
166+
.form-control[type="password"]:focus {
167+
transition-property: box-shadow;
168+
transition-duration: 0.25s;
169+
transition-timing-function: linear, ease-in;
170+
outline: none;
171+
box-shadow: 0 0 0 2px var(--md-outline);
172+
}
173+
174+
.form-control[type="color"] {
175+
appearance: none;
176+
-webkit-appearance: none;
177+
width: 100%;
178+
height: 50px;
179+
border: none;
180+
background: var(--md-surface-container);
181+
cursor: pointer;
182+
}
183+
184+
.form-control[type="color"]::-webkit-color-swatch-wrapper {
185+
padding: 0;
186+
}
187+
188+
.form-control[type="color"]::-webkit-color-swatch {
189+
border: none;
190+
}
191+
192+
.form-control[type="color"]:focus {
193+
outline: none;
194+
box-shadow: 0 0 0 2px var(--md-outline);
195+
}
196+
197+
.form-input-group {
198+
background: var(--md-surface-container);
199+
box-shadow: var(--md-elevation-1);
200+
margin-top: 5px;
201+
margin-bottom: 10px;
202+
padding: 5px;
203+
}
204+
205+
.input-group {
206+
display: flex;
207+
flex-flow: row wrap;
208+
justify-content: space-evenly;
209+
}
210+
211+
.input-group-chk {
212+
display: flex;
213+
flex-flow: column wrap;
214+
align-content: center;
215+
justify-content: center;
216+
}
217+
218+
.input-group label {
219+
color: rgba(255, 255, 255, 0.65) !important;
220+
}
221+
222+
.input-group label:checked {
223+
color: var(--md-on-surface) !important;
224+
}
225+
226+
.form-group-title {
227+
width: 100%;
228+
text-align: center;
229+
font-family: var(--font-primary) !important;
230+
font-weight: var(--font-weight-medium);
231+
}
232+
233+
.select-title {
234+
background: var(--md-surface-container);
235+
box-shadow: var(--md-elevation-1);
236+
margin: 5px 0px;
237+
padding: 5px;
238+
text-align: center;
239+
font-family: var(--font-primary) !important;
240+
}
241+
242+
.form-select {
243+
width: 100%;
244+
background: var(--md-surface-container);
245+
box-shadow: var(--md-elevation-1);
246+
margin-top: 2.5px;
247+
margin-bottom: 10px;
248+
padding: 5px;
249+
border: none;
250+
height: 50px;
251+
color: var(--md-on-surface);
252+
font-size: var(--md-typescale-body-medium-size);
253+
}
254+
255+
.form-select:active,
256+
.form-select:focus {
257+
width: 100%;
258+
background: var(--md-surface-container-high);
259+
box-shadow: var(--md-elevation-1);
260+
margin-top: 2.5px;
261+
margin-bottom: 10px;
262+
padding: 5px;
263+
border: none;
264+
outline: none;
265+
}
266+
267+
.form-select:focus-visible {
268+
outline: none;
269+
box-shadow: 0 0 0 2px var(--md-outline);
270+
}
271+
272+
.form-select option {
273+
background: var(--md-surface-container);
274+
color: var(--md-on-surface);
275+
}
276+
277+
.form-select option:hover {
278+
background: var(--md-surface-container-high);
279+
box-shadow: var(--md-elevation-1);
280+
padding: 1rem 0;
281+
border: none;
282+
appearance: none;
283+
}
284+
285+
.form-slider {
286+
width: 100%;
287+
margin: 10px 0;
288+
}
289+
290+
.slider-group {
291+
display: flex;
292+
flex-direction: column;
293+
align-items: center;
294+
}
295+
296+
::placeholder {
297+
opacity: 65%;
298+
color: var(--md-on-surface);
299+
}
300+
301+
.background {
302+
width: auto;
303+
height: auto;
304+
position: absolute;
305+
top: 0;
306+
left: 0;
307+
background-color: var(--md-scrim);
308+
z-index: -99;
309+
display: none;
310+
}
311+
312+
.btn {
313+
width: 100%;
314+
height: 50px;
315+
font-size: var(--md-typescale-title-medium-size);
316+
background: var(--md-surface-container);
317+
box-shadow: var(--md-elevation-1);
318+
border: none;
319+
font-weight: var(--font-weight-medium);
320+
font-family: var(--font-primary) !important;
321+
transition-property: color, background-color;
322+
transition-duration: 0.1s, 0.3s;
323+
transition-timing-function: linear, ease-in;
324+
margin-top: 5px;
325+
color: var(--md-on-surface);
326+
}
327+
328+
.btn:hover {
329+
background-color: var(--md-success-container);
330+
color: var(--md-on-success-container);
331+
}
332+
333+
.label {
334+
background: var(--md-surface-container);
335+
padding: 10px;
336+
font-size: var(--md-typescale-body-medium-size);
337+
margin: 5px 0px;
338+
box-shadow: var(--md-elevation-1);
339+
}

0 commit comments

Comments
 (0)