k1nq/TREK
1
0
Fork 0
mirror of https://github.com/mauriceboe/TREK.git synced 2026-10-23 15:36:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(journey): the Studio export dialog in the new look, and the Atlas country card draws its flag

Browse Source 
The export dialog was the last popup on the old card: it is now the shared
dialog frame with its options as rows, and it takes Escape for itself so
the key no longer reaches Studio behind it. Its stylesheet goes.

The Atlas country card printed the flag emoji, which Windows draws as the
two letters of the country code; it uses the shared CountryFlag now.
This commit is contained in:
Maurice
2026-09-28 21:22:46 +02:00
parent acd003ea67
commit 2c486e6832
4 changed files with 90 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/styles/studio.css
-112
View File
@@ -1662,118 +1662,6 @@
@keyframes st-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .trek-dash .st-spin { animation: none; } }
/* ── Export dialog (#1973) ────────────────────────────────────────────────
Its own prefix rather than `.st-field` and friends: those already mean a
labelled row in the toolbar, and one class doing two jobs is how a toolbar
tweak silently reflows a dialog. */
.trek-dash .st-ex {
position: absolute;
inset: 0;
z-index: 40;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
background: color-mix(in oklch, var(--ink) 42%, transparent);
backdrop-filter: blur(2px);
}
.trek-dash .st-ex-card {
width: 100%;
max-width: 380px;
/* Opaque for the same reason as .st-menu — see there. */
background: var(--surface);
border: 1px solid var(--line-2);
border-radius: 14px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
overflow: hidden;
}
.trek-dash .st-ex-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid var(--line);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-3);
}
.trek-dash .st-ex-x {
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 7px;
color: var(--ink-3);
}
.trek-dash .st-ex-x:hover { background: color-mix(in oklch, var(--ink) 8%, transparent); color: var(--ink); }
.trek-dash .st-ex-body { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.trek-dash .st-ex-field { display: flex; flex-direction: column; gap: 6px; }
.trek-dash .st-ex-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
}
.trek-dash .st-ex-opt {
display: flex;
align-items: flex-start;
gap: 10px;
width: 100%;
padding: 10px 11px;
text-align: left;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--surface-2);
color: var(--ink-2);
}
.trek-dash .st-ex-opt:hover { border-color: color-mix(in oklch, var(--accent) 40%, var(--line)); }
.trek-dash .st-ex-opt.is-on {
border-color: var(--accent);
background: color-mix(in oklch, var(--accent) 9%, var(--surface-2));
color: var(--ink);
}
.trek-dash .st-ex-opt svg { margin-top: 1px; flex: 0 0 auto; }
.trek-dash .st-ex-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trek-dash .st-ex-name { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.trek-dash .st-ex-hint { font-size: 11px; line-height: 1.35; color: var(--ink-2); }
.trek-dash .st-ex-note {
margin: 0;
font-size: 11px;
line-height: 1.45;
color: var(--ink-3);
}
.trek-dash .st-ex-foot {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 12px 14px;
border-top: 1px solid var(--line);
}
.trek-dash .st-ex-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
padding: 0 13px;
border-radius: 9px;
border: 1px solid var(--line-2);
background: var(--surface-2);
font-size: 12.5px;
font-weight: 600;
color: var(--ink);
}
.trek-dash .st-ex-btn:hover { background: color-mix(in oklch, var(--ink) 6%, var(--surface-2)); }
.trek-dash .st-ex-btn.is-primary {
border-color: transparent;
background: var(--accent);
color: var(--accent-text, #fff);
}
.trek-dash .st-ex-btn.is-primary:hover { filter: brightness(1.06); }
.trek-dash .st-ex-btn[disabled] { opacity: 0.55; }
/* ── Presence and pointers (#1973) ────────────────────────────────────────
The arrow is positioned in the sheet's millimetres and scales itself back
out, so it stays one size at every zoom — see PeerCursors.tsx. */