Skip to content

Commit 7370e21

Browse files
niyamaxniyamax
committed
Video record templated changed
1 parent d990080 commit 7370e21

File tree

2 files changed

+483
-112
lines changed

2 files changed

+483
-112
lines changed

‎src/components/GitSequencer.css‎

Lines changed: 227 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,159 @@
11
/* ===== TERMINAL WINDOW ===== */
22
.terminal-window {
3-
width: 650px;
4-
max-width: 100%;
3+
width: 100%;
54
min-height: 300px;
65
}
76

87
/* ===== HEADER BOX ===== */
9-
.header-box {
10-
border: 1px solid var(--border);
11-
margin-bottom: 1.5rem;
12-
padding-bottom: 1rem;
8+
/* ===== HEADER BOX (Fieldset Style) ===== */
9+
.header-fieldset {
10+
border: 1px solid var(--accent);
11+
border-radius: 4px;
12+
margin: 0 0 1.5rem 0;
13+
padding: 0.5rem 1.5rem 1rem;
1314
}
1415

15-
.header-title {
16-
display: flex;
17-
align-items: center;
18-
gap: 0.5rem;
16+
.header-legend {
1917
padding: 0 0.5rem;
20-
margin-top: -0.7rem;
2118
margin-left: 0.5rem;
22-
background: var(--bg);
23-
width: fit-content;
19+
color: var(--accent);
20+
font-weight: 700;
21+
font-size: 1.1rem;
22+
display: flex;
23+
align-items: baseline;
24+
gap: 0.5rem;
2425
}
2526

26-
.header-line {
27-
color: var(--border);
27+
.header-content {
28+
display: flex;
29+
gap: 2rem;
30+
align-items: stretch;
2831
}
2932

30-
.header-text {
31-
color: var(--border);
32-
font-weight: 600;
33+
.header-left {
34+
flex: 1;
35+
display: flex;
36+
flex-direction: column;
37+
justify-content: center;
3338
}
3439

35-
.header-version {
40+
.header-subtitle {
3641
color: var(--text-dim);
37-
font-size: 0.85em;
42+
font-size: 0.95rem;
43+
margin: 0 0 1rem 0;
44+
line-height: 1.4;
3845
}
3946

40-
.header-subtitle {
41-
padding: 0.75rem 1rem 0;
42-
color: var(--text-dim);
47+
.header-ascii {
48+
color: var(--accent);
49+
font-size: 0.7rem;
50+
line-height: 1.1;
51+
margin: 0;
52+
opacity: 0.8;
53+
}
54+
55+
.header-divider {
56+
width: 1px;
57+
background: var(--text-dim);
58+
opacity: 0.2;
59+
}
60+
61+
.header-right {
62+
flex: 1.3;
63+
display: flex;
64+
flex-direction: column;
65+
justify-content: center;
66+
gap: 1.25rem;
67+
}
68+
69+
.header-section {
70+
display: flex;
71+
flex-direction: column;
72+
gap: 0.25rem;
73+
}
74+
75+
.header-label {
76+
color: var(--accent);
77+
font-weight: 700;
4378
font-size: 0.9rem;
4479
}
4580

81+
.header-info {
82+
color: var(--text);
83+
font-size: 0.9rem;
84+
}
85+
86+
.header-info .cmd {
87+
background: rgba(255, 255, 255, 0.1);
88+
padding: 2px 6px;
89+
border-radius: 4px;
90+
font-family: inherit;
91+
color: var(--text-bright);
92+
}
93+
94+
.header-info.dim {
95+
color: var(--text-dim);
96+
font-style: italic;
97+
}
98+
99+
/* Mobile Header */
100+
@media (max-width: 600px) {
101+
.header-fieldset {
102+
width: 100%;
103+
padding: 0.75rem 1rem;
104+
margin-bottom: 1rem;
105+
}
106+
107+
.header-legend {
108+
font-size: 1rem;
109+
}
110+
111+
.header-content {
112+
flex-direction: column;
113+
gap: 1rem;
114+
}
115+
116+
.header-divider {
117+
display: none;
118+
}
119+
120+
.header-left,
121+
.header-right {
122+
text-align: center;
123+
align-items: center;
124+
}
125+
126+
.header-ascii {
127+
font-size: 0.55rem;
128+
}
129+
130+
.header-label {
131+
white-space: normal;
132+
line-height: 1.4;
133+
font-size: 0.85rem;
134+
}
135+
136+
.header-subtitle {
137+
font-size: 0.85rem;
138+
margin-bottom: 0.5rem;
139+
}
140+
}
141+
142+
/* Extra small screens */
143+
@media (max-width: 380px) {
144+
.header-left {
145+
display: none;
146+
}
147+
148+
.header-fieldset {
149+
padding: 0.5rem 0.75rem;
150+
}
151+
152+
.header-legend {
153+
font-size: 0.9rem;
154+
}
155+
}
156+
46157
/* ===== COMMAND SECTION ===== */
47158
.command-section {
48159
margin-bottom: 1.5rem;
@@ -103,29 +214,29 @@
103214
/* ===== GRAPH SECTION ===== */
104215
.graph-section {
105216
margin-bottom: 2rem;
106-
overflow-x: auto;
217+
scroll-behavior: smooth;
107218
}
108219

109220
.graph-grid {
110221
display: flex;
111222
gap: 2px;
112223
width: 100%;
113-
justify-content: space-between;
114224
}
115225

116226
.week-col {
117227
display: flex;
118228
flex-direction: column;
119229
gap: 2px;
120230
flex: 1;
231+
min-width: 0;
121232
}
122233

123234
.day-cell {
124235
width: 100%;
125236
aspect-ratio: 1;
126237
background: var(--level-0);
127238
border-radius: 2px;
128-
transition: background 0.3s, box-shadow 0.3s;
239+
transition: background 0.1s, box-shadow 0.1s;
129240
}
130241

131242
.day-cell.playing {
@@ -282,35 +393,111 @@
282393
@media (max-width: 600px) {
283394
body {
284395
padding: 0.5rem;
396+
font-size: 15px;
285397
}
286398

287-
.controls-row {
288-
flex-direction: column;
399+
.terminal-window {
400+
width: 100%;
401+
min-height: auto;
402+
font-size: 15px;
289403
}
290404

291-
.ctrl-btn {
292-
width: 100%;
405+
/* Prevent iOS zoom on input focus - must be 16px+ */
406+
.command-line input {
407+
font-size: 16px;
408+
}
409+
410+
.command-line .prompt,
411+
.command-line .cmd {
412+
font-size: 15px;
413+
}
414+
415+
/* Graph scrolling for mobile only */
416+
.graph-section {
417+
overflow-x: auto;
418+
scrollbar-width: thin;
419+
scrollbar-color: var(--accent) var(--bg);
420+
-webkit-overflow-scrolling: touch;
421+
}
422+
423+
.graph-section::-webkit-scrollbar {
424+
height: 6px;
425+
}
426+
427+
.graph-section::-webkit-scrollbar-track {
428+
background: var(--bg);
429+
}
430+
431+
.graph-section::-webkit-scrollbar-thumb {
432+
background-color: var(--accent);
433+
border-radius: 3px;
293434
}
294435

295436
.graph-grid {
296-
gap: 1px;
437+
width: max-content;
438+
gap: 3px;
439+
padding-bottom: 8px;
440+
}
441+
442+
.week-col {
443+
flex: 0 0 10px;
444+
gap: 3px;
297445
}
298446

299447
.day-cell {
300-
width: 8px;
301-
height: 8px;
448+
height: 10px;
449+
aspect-ratio: unset;
450+
}
451+
452+
.controls-row {
453+
flex-direction: column;
454+
}
455+
456+
.ctrl-btn {
457+
width: 100%;
458+
padding: 0.75rem 1rem;
459+
font-size: 1rem;
302460
}
303461

304462
.command-line {
305-
flex-wrap: wrap;
463+
flex-wrap: nowrap;
306464
}
307465

308466
.command-line input {
309-
width: 100%;
310-
margin-top: 0.5rem;
311-
padding: 0.5rem;
312-
background: #111;
313-
border: 1px solid #333;
314-
border-radius: 4px;
467+
flex: 1;
468+
min-width: 0;
469+
}
470+
471+
.status-msg {
472+
margin-left: 0;
473+
text-align: left;
474+
font-size: 14px;
475+
}
476+
477+
.footer-hint {
478+
text-align: center;
479+
font-size: 13px;
480+
}
481+
482+
.toast-notification {
483+
width: 90%;
484+
max-width: 300px;
485+
text-align: center;
486+
}
487+
}
488+
489+
/* Extra small screens - main content */
490+
@media (max-width: 380px) {
491+
.ctrl-btn {
492+
padding: 0.6rem 0.75rem;
493+
font-size: 0.9rem;
494+
}
495+
496+
.week-col {
497+
flex: 0 0 8px;
498+
}
499+
500+
.day-cell {
501+
height: 8px;
315502
}
316503
}

0 commit comments

Comments
 (0)