1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
/* sloshcast player. The font stack is the site's rule: the system monospace
* wherever a terminal is being imitated, nothing fetched.
*
* Metrics are pinned in pixels (--sc-lh, set by the player), rows carry an
* explicit height, and the player scales by font size rather than transform
* -- all three learned from shellglass's viewer, all three in service of
* borders that meet instead of shimmer. */
.sloshcast {
border: 1px solid #45454a;
border-radius: 6px;
overflow: hidden;
max-width: 100%;
}
.sloshcast .sc-frame {
position: relative;
overflow: hidden;
cursor: pointer;
}
.sloshcast .sc-screen {
--sc-lh: 17px;
position: relative; /* the canvas, cursor and pointer position against it */
margin: 0;
padding: 8px;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono",
monospace;
font-size: 14px;
line-height: var(--sc-lh);
box-sizing: content-box;
}
.sloshcast .sc-row {
white-space: pre;
height: var(--sc-lh);
contain: layout style;
}
/* Ghost text: characters the canvas paints as geometry. The glyph stays in
* the DOM, transparent, so selection and copy still carry it. */
.sloshcast .sc-g {
color: transparent !important;
}
/* The geometry overlay. pointer-events:none and transparent everywhere it
* does not paint, so text, selection and the click-to-toggle pass through. */
.sloshcast .sc-canvas {
position: absolute;
top: 8px; /* the screen's padding */
left: 8px;
pointer-events: none;
z-index: 1;
}
/* Inside .sc-screen: inherits the font, so 1ch is the grid's own cell width;
* top comes from a row's offsetTop, which already includes the screen's
* vertical padding, and only the horizontal padding needs adding back. */
.sloshcast .sc-cursor {
display: none;
position: absolute;
margin: 0 0 0 8px;
width: 1ch;
height: var(--sc-lh);
background: rgba(255, 255, 255, 0.55);
pointer-events: none;
z-index: 2;
}
/* The pointer track: an arrow the demo drives, gliding between the cells
* castgen recorded. A screen capture never shows the pointer; this one is
* data, so it can. Pink while the button is down. */
.sloshcast .sc-pointer {
display: none;
position: absolute;
margin-left: 8px; /* the screen's horizontal padding, like the cursor */
width: 1.6ch;
height: 1.35em;
background: #fff;
clip-path: polygon(0 0, 0 88%, 34% 70%, 52% 100%, 68% 92%, 50% 62%, 78% 58%);
filter: drop-shadow(0 0 1px #000);
transition:
left 0.09s linear,
top 0.09s linear;
pointer-events: none;
z-index: 3;
}
.sloshcast .sc-pointer.sc-pressed {
background: #ff5fd7;
}
/* The big play glyph over the poster; gone while playing. */
.sloshcast .sc-play {
position: absolute;
inset: 0;
margin: auto;
width: 64px;
height: 64px;
border: 1px solid #ff5fd7;
border-radius: 50%;
background: rgba(0, 0, 0, 0.55);
color: #ff5fd7;
font-size: 22px;
cursor: pointer;
z-index: 4;
}
.sloshcast.sc-playing .sc-play {
display: none;
}
.sloshcast .sc-bar {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 4px 10px;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono",
monospace;
font-size: 11px;
color: #45454a;
border-top: 1px solid #2a2a2e;
background: #141418;
white-space: nowrap;
overflow: hidden;
}
|
