Skip to content
This repository was archived by the owner on Mar 7, 2026. It is now read-only.

Commit 5e011ef

Browse files
NovaDev404NovaDev404
authored
Implement dark theme and responsive styles
Added a dark theme with responsive design and Google Fonts.
1 parent 26adef3 commit 5e011ef

File tree

1 file changed

+241
-142
lines changed

1 file changed

+241
-142
lines changed

‎web/styles.css‎

Lines changed: 241 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -1,154 +1,253 @@
1-
html, body {
2-
width: 100%;
3-
height: 100%;
4-
margin: 0;
5-
}
6-
7-
main {
8-
height: 98dvh;
9-
width: 98dvw;
10-
background-color: whitesmoke;
11-
position: absolute;
12-
top: 50%;
13-
left: 50%;
14-
transform: translate(-50%, -50%);
15-
border-radius: 3dvw;
16-
overflow: hidden;
17-
display: flex;
18-
flex-direction: column;
19-
}
20-
21-
.header-bar {
22-
background-color: gray;
23-
height: 5dvh;
24-
width: 100%;
25-
border-top-left-radius: 3dvw;
26-
border-top-right-radius: 3dvw;
27-
display: flex;
28-
align-items: center;
29-
justify-content: space-between; /* keeps a right area available */
30-
flex-shrink: 0;
31-
padding: 0 1.5dvw; /* left/right padding instead of margins */
1+
/* styles.css
2+
Dark, "epic but not over-styled" theme for the exact HTML you gave.
3+
Uses Google Fonts (Inter for UI, Orbitron for the title).
4+
*/
5+
6+
/* Google Fonts */
7+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Orbitron:wght@500;700&display=swap');
8+
9+
:root{
10+
/* palette */
11+
--bg: #06070a; /* page background */
12+
--bg-2: #0b0f14; /* subtle secondary */
13+
--panel-bg: rgba(255,255,255,0.02);
14+
--glass: rgba(255,255,255,0.025);
15+
--card-border: rgba(255,255,255,0.06);
16+
--muted: rgba(230,238,243,0.65);
17+
--text: #e6f0f6;
18+
--accent: #4ee5ff; /* cyan accent */
19+
--accent-2: #8b5cf6; /* purple accent */
20+
--danger: #ff6b6b;
21+
22+
/* sizing */
23+
--radius: 12px;
24+
--pad: clamp(12px, 2.6vw, 20px);
25+
--sidebar-w: clamp(180px, 22vw, 260px);
26+
}
27+
28+
/* base layout (only what's present) */
29+
html,body{
30+
height:100%;
31+
margin:0;
32+
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, "Helvetica Neue", Arial;
33+
background:
34+
radial-gradient(1200px 600px at 10% 10%, rgba(78,229,255,0.035), transparent 8%),
35+
radial-gradient(800px 400px at 90% 90%, rgba(139,92,246,0.03), transparent 10%),
36+
linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
37+
color:var(--text);
38+
-webkit-font-smoothing:antialiased;
39+
-moz-osx-font-smoothing:grayscale;
40+
-webkit-tap-highlight-color: transparent;
3241
box-sizing: border-box;
3342
}
3443

35-
.header-left {
36-
display: flex;
37-
align-items: center;
38-
gap: 1.2dvw; /* space between dot cluster and title */
39-
white-space: nowrap; /* prevents title wrapping */
40-
}
41-
42-
.dot-container {
43-
display: flex;
44-
align-items: center;
45-
gap: 0.6dvw; /* space between the dots themselves */
46-
/* no extra padding needed */
47-
}
48-
49-
.dot {
50-
height: 2.6dvh; /* slightly smaller so it aligns with text */
51-
width: 2.6dvh;
52-
border-radius: 50%;
53-
box-shadow: 0 0 0.15dvw rgba(0,0,0,0.12);
54-
}
55-
56-
.app-title {
57-
/* remove margin-left (header-left gap handles spacing) */
58-
font-family: "Aptos", "Arial", sans-serif;
59-
font-weight: bold;
60-
font-size: 3.6dvh; /* tuned to fit the header height */
61-
color: white; /* better contrast on gray background */
62-
margin: 0;
63-
padding: 0;
64-
}
65-
66-
.content-area {
67-
display: flex;
68-
height: calc(100% - 5dvh);
69-
width: 100%;
70-
}
71-
72-
.sidebar {
73-
background-color: #e5e5e5;
74-
width: 20dvw;
75-
height: 100%;
44+
/* content wrapper */
45+
.content-area{
46+
max-width:1200px;
47+
margin: clamp(18px, 6vw, 48px) auto;
48+
display:flex;
49+
gap:clamp(12px, 2.8vw, 24px);
50+
align-items:flex-start;
51+
padding:0 var(--pad);
7652
box-sizing: border-box;
77-
display: flex;
78-
flex-direction: column;
79-
font-family: "Aptos", "Arial", sans-serif;
80-
gap: 3dvh;
8153
}
8254

83-
.sidebar-item {
84-
cursor: pointer;
85-
background-color: skyblue;
86-
height: 7dvh;
87-
width: 100%;
88-
text-align: center;
89-
display: flex;
90-
align-items: center;
91-
justify-content: center;
92-
font-size: 1.5dvw;
93-
box-sizing: border-box;
94-
}
95-
96-
.title {
97-
font-size: 5dvw;
98-
font-family: "Arial", sans-serif;
99-
text-align: center;
100-
margin: 0;
101-
margin-bottom: 3dvh;
102-
}
103-
104-
.panel {
105-
flex: 1;
106-
display: flex;
107-
flex-direction: column; /* STACK VERTICAL */
108-
justify-content: flex-start;
109-
align-items: center; /* CENTER EVERYTHING HORIZONTALLY */
110-
padding-top: 5px;
111-
position: relative;
112-
}
113-
114-
.logo-img {
115-
height: 20dvw;
116-
width: 20dvw;
117-
margin-bottom: 2dvh;
55+
/* SIDEBAR */
56+
.sidebar{
57+
width: var(--sidebar-w);
58+
min-width: 140px;
59+
background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));
60+
border: 1px solid var(--card-border);
61+
border-radius: var(--radius);
62+
padding: 10px;
63+
display:flex;
64+
flex-direction: column;
65+
gap:8px;
66+
box-shadow: 0 8px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
67+
backdrop-filter: blur(6px) saturate(120%);
11868
}
11969

120-
.install-button {
121-
border: none;
122-
background-color: lightgreen;
123-
font-size: 3dvw;
124-
border-radius: 0.75dvw;
70+
/* individual items in sidebar */
71+
.sidebar-item{
12572
cursor: pointer;
126-
}
127-
128-
.install-button:hover {
129-
background-color: limegreen; /* slightly darker/stronger green */
130-
transform: scale(1.05); /* pop effect */
131-
}
132-
133-
134-
.download-button {
73+
user-select: none;
74+
padding:10px 12px;
75+
border-radius:8px;
76+
font-weight:600;
77+
color:var(--muted);
78+
font-size: clamp(0.86rem, 1.6vw, 1rem);
79+
display:flex;
80+
align-items:center;
81+
gap:10px;
82+
transition: all 180ms cubic-bezier(.2,.9,.2,1);
83+
outline: none;
84+
border: 1px solid transparent;
85+
background: transparent;
86+
}
87+
88+
/* hover / active */
89+
.sidebar-item:hover{
90+
transform: translateY(-3px);
91+
color: var(--text);
92+
background: linear-gradient(90deg, rgba(78,229,255,0.03), rgba(139,92,246,0.02));
93+
border-color: rgba(78,229,255,0.06);
94+
box-shadow: 0 6px 18px rgba(78,229,255,0.03);
95+
}
96+
97+
/* PANEL */
98+
.panel{
99+
flex:1;
100+
min-width: 220px;
101+
background: var(--panel-bg);
102+
border-radius: var(--radius);
103+
padding: clamp(18px, 4vw, 28px);
104+
border: 1px solid var(--card-border);
105+
box-shadow: 0 18px 40px rgba(2,6,23,0.6);
106+
display:flex;
107+
flex-direction:column;
108+
align-items:center;
109+
text-align:center;
110+
}
111+
112+
/* title — intentionally distinctive but not huge */
113+
.title{
114+
font-family: 'Orbitron', 'Inter', sans-serif;
115+
font-weight:700;
116+
font-size: clamp(1.1rem, 3.6vw, 2rem);
117+
margin:0;
118+
color:var(--text);
119+
letter-spacing:0.6px;
120+
text-shadow: 0 6px 18px rgba(78,229,255,0.02);
121+
}
122+
123+
/* logo image */
124+
.logo-img{
125+
width: clamp(56px, 14vw, 110px);
126+
height: auto;
127+
margin: 12px 0;
128+
border-radius: 14px;
129+
border: 1px solid rgba(255,255,255,0.04);
130+
padding:6px;
131+
background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
132+
box-shadow: 0 8px 30px rgba(78,229,255,0.03);
133+
transition: transform 220ms ease, filter 220ms ease;
134+
}
135+
136+
/* subtle lift on logo hover */
137+
.logo-img:hover{
138+
transform: translateY(-4px) scale(1.02);
139+
filter: drop-shadow(0 18px 40px rgba(78,229,255,0.06));
140+
}
141+
142+
/* Buttons — styled only by class names you provided */
143+
.download-button,
144+
.install-button{
145+
-webkit-appearance: none;
146+
appearance: none;
135147
border: none;
136-
background-color: skyblue;
137-
font-size: 3dvw;
138-
border-radius: 0.75dvw;
139148
cursor: pointer;
140-
}
141-
142-
.download-button:hover {
143-
background-color: lightblue; /* slightly darker/stronger blue */
144-
transform: scale(1.05); /* pop effect */
145-
}
146-
147-
.advanced-href {
148-
bottom: 0;
149-
left: 0;
150-
margin-bottom: 1dvh;
151-
margin-left: 1dvh;
152-
position: absolute;
153-
font-size: 2dvw;
149+
padding: 10px 18px;
150+
border-radius: 10px;
151+
font-weight:700;
152+
font-size: clamp(0.95rem, 2.2vw, 1.06rem);
153+
color: #021018;
154+
background: linear-gradient(90deg, var(--accent), var(--accent-2));
155+
box-shadow: 0 10px 30px rgba(78,229,255,0.08), 0 2px 0 rgba(255,255,255,0.02);
156+
transition: transform 160ms cubic-bezier(.2,.9,.2,1), box-shadow 160ms;
157+
margin-top: 14px;
158+
}
159+
160+
/* disabled / hidden state visual (install-button can start hidden inline) */
161+
.install-button[disabled]{
162+
opacity:0.5;
163+
cursor: not-allowed;
164+
transform:none;
165+
}
166+
167+
/* hover & focus */
168+
.download-button:hover,
169+
.install-button:hover{
170+
transform: translateY(-4px);
171+
box-shadow: 0 18px 50px rgba(78,229,255,0.12), 0 2px 0 rgba(255,255,255,0.02);
172+
}
173+
174+
.download-button:active,
175+
.install-button:active{
176+
transform: translateY(-1px);
177+
}
178+
179+
.download-button:focus-visible,
180+
.install-button:focus-visible{
181+
outline: 3px solid rgba(78,229,255,0.12);
182+
outline-offset: 4px;
183+
border-radius: 10px;
184+
}
185+
186+
/* small link under buttons */
187+
.advanced-href{
188+
display:inline-block;
189+
margin-top:12px;
190+
color: var(--muted);
191+
font-weight:600;
192+
font-size: clamp(0.86rem, 1.9vw, 0.98rem);
193+
text-decoration: none;
194+
border-bottom: 1px dashed transparent;
195+
transition: color 150ms, border-color 150ms;
196+
}
197+
198+
.advanced-href:hover{
199+
color: var(--accent);
200+
border-color: rgba(78,229,255,0.14);
201+
text-decoration: none;
202+
}
203+
204+
/* make sure long content doesn't overflow awkwardly */
205+
.panel,
206+
.sidebar{
207+
word-break: break-word;
208+
}
209+
210+
/* RESPONSIVE: stack on narrow screens and turn sidebar into a horizontal top row */
211+
@media (max-width: 860px){
212+
.content-area{
213+
flex-direction: column;
214+
gap:12px;
215+
margin-top: 20px;
216+
}
217+
218+
.sidebar{
219+
width: 100%;
220+
flex-direction: row;
221+
padding: 8px;
222+
gap:8px;
223+
overflow:auto;
224+
border-radius: 10px;
225+
}
226+
227+
.sidebar-item{
228+
flex: 1 0 auto;
229+
white-space: nowrap;
230+
text-align:center;
231+
padding:10px 14px;
232+
font-size: 0.95rem;
233+
}
234+
235+
.panel{
236+
padding: clamp(14px, 6vw, 22px);
237+
}
238+
}
239+
240+
/* very small phones: tighten spacing */
241+
@media (max-width: 420px){
242+
.content-area{
243+
padding: 0 10px;
244+
}
245+
.title{ font-size: 1.1rem; }
246+
.logo-img{ width: 64px; }
247+
.download-button, .install-button{ padding: 9px 14px; font-size: 0.95rem; }
248+
}
249+
250+
/* accessibility: respect reduced motion */
251+
@media (prefers-reduced-motion: reduce){
252+
*{ transition: none !important; animation: none !important; }
154253
}

0 commit comments

Comments
 (0)