Skip to content

Commit d41381b

Browse files
razorblade23razorblade23
authored
Update styles.module.css to suit the rest of the theme style
1 parent 5f5893a commit d41381b

1 file changed

Lines changed: 116 additions & 175 deletions

File tree

‎src/components/InteractivePython/styles.module.css‎

Lines changed: 116 additions & 175 deletions
Original file line numberDiff line numberDiff line change
@@ -1,193 +1,148 @@
1-
@import url("https://fonts.googleapis.com/css2?family=VT323&family=Share+Tech+Mono&display=swap");
2-
3-
/* ── Scanline texture overlay ── */
4-
/* .wrapper::after {
5-
content: "";
6-
position: absolute;
7-
inset: 0;
8-
background: repeating-linear-gradient(
9-
to bottom,
10-
transparent 0px,
11-
transparent 3px,
12-
rgba(0, 0, 0, 0.08) 3px,
13-
rgba(0, 0, 0, 0.08) 4px
14-
);
15-
pointer-events: none;
16-
z-index: 10;
17-
border-radius: 10px;
18-
} */
19-
1+
/* ==========================================================================
2+
1. MAIN COMPONENT CONTAINER
3+
========================================================================== */
204
.wrapper {
215
position: relative;
22-
margin: 2rem 0;
23-
border: 1px solid #1a3a1a;
24-
border-radius: 10px;
6+
margin: 1.5rem 0;
7+
border: 1px solid var(--ifm-toc-border-color);
8+
border-radius: var(--ifm-global-radius);
259
overflow: hidden;
26-
background-color: #030a03;
27-
box-shadow:
28-
0 0 0 1px #0d2b0d,
29-
0 0 20px rgba(0, 255, 70, 0.07),
30-
0 0 60px rgba(0, 255, 70, 0.04),
31-
0 8px 32px rgba(0, 0, 0, 0.6);
10+
background-color: var(--ifm-background-surface-color);
11+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
12+
transition: border-color 0.15s ease;
3213
}
3314

34-
[data-theme="light"] {
35-
.output {
36-
background-color: #dbdbdb;
37-
color: hsl(0, 0%, 10%);
38-
}
39-
.console {
40-
background-color: #dbdbdb;
41-
}
42-
.codeHeader {
43-
background-color: #e0e0e0;
44-
border-bottom: 1px solid #c0c0c0;
45-
}
46-
.runButton {
47-
background-color: #e0e0e0;
48-
color: hsl(0, 0%, 10%);
49-
border-top: 1px solid #c0c0c0;
50-
border-bottom: 1px solid #c0c0c0;
51-
}
52-
.runButton:hover:not(:disabled) {
53-
background-color: #d0d0d0;
54-
color: hsl(0, 0%, 10%);
55-
}
56-
.submitInputBtn {
57-
background: #e0e0e0;
58-
border: 1px solid #c0c0c0;
59-
color: hsl(0, 0%, 10%);
60-
}
61-
.submitInputBtn:hover {
62-
background-color: #d0d0d0;
63-
border-color: hsl(0, 0%, 10%);
64-
color: hsl(0, 0%, 10%);
65-
}
66-
.codeHeaderText {
67-
color: hsl(0, 0%, 10%);
68-
text-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
69-
}
70-
71-
}
72-
/* ── Title bar ── */
15+
/* ==========================================================================
16+
2. HEADER BAR (Polished & Minimalist)
17+
========================================================================== */
7318
.codeHeader {
74-
background-color: #050f05;
75-
padding: 10px 16px;
19+
background-color: var(--ifm-background-color);
20+
padding: 12px 16px;
7621
display: flex;
7722
align-items: center;
78-
gap: 10px;
79-
border-bottom: 1px solid #1a3a1a;
23+
gap: 8px;
24+
border-bottom: 1px solid var(--ifm-toc-border-color);
8025
}
8126

27+
/* The hacker indicator icon is removed completely */
8228
.codeHeader::before {
83-
content: "▮";
84-
color: #00ff46;
85-
font-size: 1rem;
86-
animation: blink 1.2s step-end infinite;
87-
font-family: "VT323", monospace;
29+
display: none;
8830
}
8931

9032
.codeHeaderText {
91-
font-family: "VT323", monospace;
92-
font-size: 1.1rem;
93-
color: #00ff46;
94-
letter-spacing: 0.12rem;
95-
text-shadow: 0 0 8px rgba(0, 255, 70, 0.6);
33+
font-family: var(--ifm-font-family-base, sans-serif);
34+
font-weight: 600;
35+
font-size: 0.85rem;
36+
color: var(--ifm-font-color-base);
37+
letter-spacing: 0.05rem;
9638
text-transform: uppercase;
9739
}
9840

9941
.codeHeaderStatus {
10042
margin-left: auto;
101-
font-family: "Share Tech Mono", monospace;
102-
font-size: 0.7rem;
103-
color: #2a7a2a;
104-
letter-spacing: 0.08rem;
43+
font-family: var(--ifm-font-family-base, sans-serif);
44+
font-weight: 500;
45+
font-size: 0.75rem;
46+
color: var(--ifm-font-color-secondary);
10547
}
10648

10749
.codeHeaderStatus.ready {
108-
color: #00cc38;
109-
text-shadow: 0 0 6px rgba(0, 204, 56, 0.5);
50+
color: var(--ifm-color-success, #2e7d32);
11051
}
11152

112-
/* ── Run button ── */
53+
[data-theme="dark"] .codeHeaderStatus.ready {
54+
color: var(--ifm-color-success, #4caf50);
55+
}
56+
57+
/* ==========================================================================
58+
3. RUN BUTTON
59+
========================================================================== */
11360
.runButton {
11461
display: block;
11562
width: 100%;
116-
padding: 11px;
117-
background-color: #050f05;
118-
color: #00ff46;
63+
padding: 12px;
64+
background-color: var(--ifm-color-primary);
65+
color: #ffffff;
11966
border: none;
120-
border-top: 1px solid #1a3a1a;
121-
border-bottom: 1px solid #1a3a1a;
122-
font-family: "VT323", monospace;
123-
font-size: 1.2rem;
124-
letter-spacing: 0.15rem;
67+
border-bottom: 1px solid var(--ifm-toc-border-color);
68+
font-family: var(--ifm-font-family-base, sans-serif);
69+
font-weight: 600;
70+
font-size: 0.95rem;
71+
letter-spacing: 0.05rem;
12572
cursor: pointer;
126-
transition:
127-
background-color 0.15s ease,
128-
text-shadow 0.15s ease;
129-
text-shadow: 0 0 8px rgba(0, 255, 70, 0.4);
13073
text-transform: uppercase;
74+
transition: background-color 0.15s ease, opacity 0.15s ease;
13175
}
13276

13377
.runButton:hover:not(:disabled) {
134-
background-color: #071407;
135-
color: #33ff6e;
136-
text-shadow:
137-
0 0 14px rgba(0, 255, 70, 0.9),
138-
0 0 30px rgba(0, 255, 70, 0.4);
78+
background-color: var(--ifm-color-primary-dark);
13979
}
14080

14181
.runButton:disabled {
142-
color: #1a4a1a;
82+
background-color: var(--ifm-background-color);
83+
color: var(--ifm-font-color-secondary);
84+
opacity: 0.6;
14385
cursor: not-allowed;
144-
text-shadow: none;
14586
}
14687

14788
.runButton:not(:disabled):active {
148-
background-color: #0a1f0a;
89+
background-color: var(--ifm-color-primary-darker);
14990
}
15091

151-
/* ── Console area ── */
92+
/* ==========================================================================
93+
4. CONSOLE & OUTPUT AREA
94+
========================================================================== */
15295
.console {
153-
background-color: #020802;
154-
border-top: 1px solid #1a3a1a;
96+
background-color: #1e293b; /* Deep slate workspace for contrast in both modes */
97+
border-top: 1px solid var(--ifm-toc-border-color);
15598
min-height: 60px;
156-
animation: fadeIn 0.2s ease-out;
15799
}
158100

159-
/* ── Output text ── */
101+
[data-theme="light"] .console {
102+
background-color: #f1f5f9; /* Clean, modern light-grey playground */
103+
}
104+
160105
.output {
161106
margin: 0;
162107
padding: 1rem 1.2rem;
163-
color: #a8ffb8;
164-
font-size: 0.875rem;
165-
font-family: "Share Tech Mono", monospace;
166-
line-height: 1.2;
108+
color: #f8fafc; /* Crisp, easily readable white in dark console */
109+
font-size: 0.9rem;
110+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
111+
line-height: 1.6;
167112
white-space: pre-wrap;
168-
text-shadow: 0 0 4px rgba(168, 255, 184, 0.25);
169113
min-height: 20px;
170114
}
171115

116+
[data-theme="light"] .output {
117+
color: #0f172a; /* Dark slate text in light-mode console */
118+
}
119+
172120
.output:empty {
173121
display: none;
174122
}
175123

176-
/* ── Input row ── */
124+
/* ==========================================================================
125+
5. INPUT SECTION
126+
========================================================================== */
177127
.inputForm {
178128
display: flex;
179129
align-items: center;
180-
padding: 0.5rem 1.2rem 0.8rem;
181-
gap: 0;
182-
border-top: 1px dashed #0d2b0d;
130+
padding: 0.75rem 1.2rem;
131+
gap: 8px;
132+
border-top: 1px solid rgba(0, 0, 0, 0.06);
133+
background-color: rgba(0, 0, 0, 0.02);
134+
}
135+
136+
[data-theme="dark"] .inputForm {
137+
border-top: 1px solid rgba(255, 255, 255, 0.06);
138+
background-color: rgba(255, 255, 255, 0.02);
183139
}
184140

185141
.promptText {
186-
font-family: "Share Tech Mono", monospace;
187-
font-size: 0.875rem;
188-
color: #00cc38;
189-
white-space: pre;
190-
text-shadow: 0 0 6px rgba(0, 204, 56, 0.4);
142+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
143+
font-size: 0.9rem;
144+
color: var(--ifm-color-primary);
145+
font-weight: 600;
191146
flex-shrink: 0;
192147
}
193148

@@ -196,68 +151,54 @@
196151
background: transparent;
197152
border: none;
198153
outline: none;
199-
color: #e0ffe8;
200-
font-family: "Share Tech Mono", monospace;
201-
font-size: 0.5rem;
202-
caret-color: #00ff46;
203-
text-shadow: 0 0 4px rgba(224, 255, 232, 0.3);
204-
padding: 0 4px;
154+
color: #f8fafc;
155+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
156+
font-size: 0.9rem;
157+
caret-color: var(--ifm-color-primary);
158+
padding: 4px 6px;
159+
border-radius: 4px;
160+
}
161+
162+
[data-theme="light"] .terminalInput {
163+
color: #0f172a;
205164
}
206165

166+
/* Accessible and clean action button */
207167
.submitInputBtn {
208-
background: transparent;
209-
border: 1px solid #1a4a1a;
210-
color: #2a8a2a;
211-
font-family: "VT323", monospace;
212-
font-size: 1rem;
213-
letter-spacing: 0.08rem;
214-
padding: 2px 12px;
168+
background-color: var(--ifm-color-primary);
169+
border: none;
170+
color: #ffffff;
171+
font-family: var(--ifm-font-family-base, sans-serif);
172+
font-weight: 600;
173+
font-size: 0.8rem;
174+
letter-spacing: 0.02rem;
175+
padding: 6px 14px;
215176
cursor: pointer;
216-
border-radius: 2px;
217-
transition: all 0.15s ease;
177+
border-radius: 4px;
178+
transition: background-color 0.15s ease;
218179
text-transform: uppercase;
219180
flex-shrink: 0;
220181
}
221182

222183
.submitInputBtn:hover {
223-
background-color: #071407;
224-
border-color: #00ff46;
225-
color: #00ff46;
226-
text-shadow: 0 0 8px rgba(0, 255, 70, 0.7);
227-
box-shadow: 0 0 8px rgba(0, 255, 70, 0.15);
228-
}
229-
230-
/* ── Animations ── */
231-
@keyframes blink {
232-
0%,
233-
100% {
234-
opacity: 1;
235-
}
236-
50% {
237-
opacity: 0;
238-
}
184+
background-color: var(--ifm-color-primary-dark);
239185
}
240186

241-
@keyframes fadeIn {
242-
from {
243-
opacity: 0;
244-
}
245-
to {
246-
opacity: 1;
247-
}
248-
}
249-
250-
@media (min-width: 768px) {
187+
/* ==========================================================================
188+
6. RESPONSIVE ADJUSTMENTS
189+
========================================================================== */
190+
@media (max-width: 996px) {
251191
.output {
252-
font-size: 1rem;
192+
font-size: 0.85rem;
193+
padding: 0.85rem 1rem;
253194
}
254-
.promptText {
255-
font-size: 1rem;
195+
196+
.promptText,
197+
.terminalInput {
198+
font-size: 0.85rem;
256199
}
257-
}
258200

259-
@media (min-width: 996px) {
260-
.output {
261-
font-size: 1.2em;
201+
.inputForm {
202+
padding: 0.6rem 1rem;
262203
}
263204
}

0 commit comments

Comments
 (0)