Repository navigation
Expand file tree
/
Copy pathstyle.css
More file actions
108 lines (102 loc) · 5.73 KB
/
Copy pathstyle.css
File metadata and controls
108 lines (102 loc) · 5.73 KB
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
:root {
color-scheme: dark;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: #eef2f1;
background: #111619;
--muted: #a6b3b8;
--line: #303c42;
--accent: #c3e2d1;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
button, select { font: inherit; touch-action: manipulation; }
button, select {
min-height: 44px;
border: 1px solid var(--line);
border-radius: 8px;
background: #202b30;
color: inherit;
}
button { padding: 10px 14px; cursor: pointer; font-size: 12px; font-weight: 500; white-space: nowrap; }
button:hover:not(:disabled), select:hover { background: #2b3940; border-color: #748b94; }
button:disabled { opacity: .45; cursor: default; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
button.primary { padding-inline: 22px; background: var(--accent); color: #14251c; border-color: var(--accent); }
button.primary:hover:not(:disabled) { background: #d9f3e5; }
button.quiet { background: transparent; border-color: transparent; color: var(--muted); }
button.quiet:hover:not(:disabled) { background: #202b30; }
button.icon { width: 44px; padding: 8px; font-size: 17px; flex: none; }
button.selected { border-color: #9abdac; background: #23382e; color: #eef2f1; }
#play.finished { width: auto; font-size: 12px; }
#app {
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
max-width: 1600px;
height: 100dvh;
margin: auto;
padding: max(24px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left));
gap: 16px;
}
.table-stage { position: relative; min-width: 0; min-height: 0; display: grid; place-items: center; container-type: size; }
.table { width: 100%; height: 100%; min-width: 0; min-height: 0; border-radius: 16px; touch-action: none; }
.table svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 12px 22px #0003); }
.cue-ball-draggable { cursor: grab; }
.table:active .cue-ball-draggable { cursor: grabbing; }
.caption {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
width: max-content;
max-width: calc(100% - 24px);
margin: 0;
padding: 12px 18px;
border: 1px solid #ad9771;
border-radius: 8px;
background: #302b24;
color: #f7e9c9;
font-size: 12px;
line-height: 1.5;
pointer-events: none;
}
.caption:empty { display: none; }
/* Equal outer columns keep the ball strip centered independently of the picker. */
.controls { display: grid; grid-template-columns: minmax(124px, 1fr) minmax(0, max-content) minmax(124px, 1fr); align-items: center; gap: 16px; min-width: 0; }
.ball-count { grid-column: 1; justify-self: start; display: flex; align-items: center; gap: 10px; color: #f3f6f5; font-size: 12px; font-weight: 500; white-space: nowrap; }
.ball-count select { min-width: 54px; padding: 6px 8px; background: #10191e; color: #f3f6f5; border-color: #8a9fa9; }
.ball-strip { grid-column: 2; justify-self: center; max-width: 100%; display: flex; align-items: center; justify-content: center; gap: 14px; min-width: 0; }
.shot-selection { display: flex; align-items: center; gap: 14px; min-width: 0; }
.strip-actions, .strip-playback { display: flex; align-items: center; gap: 4px; flex: none; }
.strip-actions { gap: 8px; }
.shot-strip { display: flex; gap: 6px; min-width: 0; overflow-x: auto; padding: 4px; }
.shot-link { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; padding: 6px; background: transparent; border-color: transparent; }
.ball-chip { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid #ffffff20; background: #d6b348; color: #171e22; border-radius: 50%; font-size: 12px; font-weight: 700; }
.ball-2 { background: #3e6abe; color: white; }
.ball-3 { background: #c14b42; color: white; }
.ball-4 { background: #815bb0; color: white; }
.ball-5 { background: #cc7935; color: white; }
.ball-6 { background: #3b8b62; color: white; }
.ball-7 { background: #904a4c; color: white; }
.ball-8 { background: #10181d; color: white; }
.ball-9 { background: linear-gradient(#f0eee3 25%, #d6b348 25% 75%, #f0eee3 75%); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (orientation: landscape) and (max-height: 650px) {
#app { padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); gap: 8px; }
}
/* On narrow screens, keep shot choices above the picker and playback controls. */
@media (max-width: 699px) {
.controls { grid-template-columns: max-content minmax(0, 1fr); gap: 8px; }
.ball-strip { display: contents; }
.shot-selection { grid-column: 1 / -1; grid-row: 1; justify-self: center; max-width: 100%; gap: 4px; }
.ball-count { grid-column: 1; grid-row: 2; flex-direction: column; align-items: flex-start; gap: 2px; font-size: 11px; }
.strip-actions { grid-column: 2; grid-row: 2; justify-self: end; }
.shot-strip { gap: 2px; }
}
/* Rotate only the diagram. SVG screen transforms also map touch coordinates. */
@media (orientation: portrait) and (max-width: 1000px) {
#app { gap: 8px; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.table { position: relative; width: min(100cqw, calc(100cqh * 64 / 114)); height: auto; aspect-ratio: 64 / 114; }
.table svg { position: absolute; left: 50%; top: 50%; width: 178.125%; height: 56.1403508772%; transform: translate(-50%, -50%) rotate(90deg); }
.table svg text { transform-box: fill-box; transform-origin: center; transform: rotate(-90deg); }
}