Repository navigation
Expand file tree
/
Copy pathapp.css
More file actions
129 lines (109 loc) · 2.8 KB
/
Copy pathapp.css
File metadata and controls
129 lines (109 loc) · 2.8 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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
/* =====================================================================
codegraph ui — the app's global primitives
The design tokens themselves live in `lib/theme.css`, which is also
what `@colbymchenry/codegraph-ui` exports for a host to import and
override. This file is everything ON TOP of them that only the
standalone viewer needs: the reset, the shell grid, and the handful of
primitives shared across views.
Component-specific rules live in each .svelte file's scoped <style>.
===================================================================== */
@import './lib/theme.css';
/* ---------- reset ---------- */
html,
body {
height: 100%;
}
body {
margin: 0;
/* body always paints --paper: the bars are transparent over it and a
short view must not reveal the browser's own canvas colour. */
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
font-size: 13px;
line-height: 1.45;
-webkit-font-smoothing: antialiased;
}
*,
*::before,
*::after {
box-sizing: border-box;
/* Square corners are non-negotiable in this system, including on the
UA-styled controls (input, select, button) we do not restyle. */
border-radius: 0 !important;
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
color: inherit;
background: none;
border: 0;
padding: 0;
cursor: pointer;
}
h1,
h2,
h3 {
font-weight: 600;
text-wrap: balance;
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
transition: none !important;
animation: none !important;
scroll-behavior: auto !important;
}
}
/* ---------- app shell ----------
Design spec §3.1: top bar 48px / trail bar 34px / main. The grid is on
index.html's mount host, which App.svelte fills directly (no wrapper — a
second #app would duplicate the id).
The trail row is `auto`, not `--trailbar-h`: the bar keeps that height on
its own (see TrailBar.svelte) and grows only while the save-trail form is
open. Pinning the row instead would clip the form. */
#app {
height: 100vh;
display: grid;
grid-template-rows: var(--topbar-h) auto 1fr;
}
/* ---------- cross-view primitives ---------- */
.mono {
font-family: var(--mono);
}
.dim {
color: var(--ink-3);
}
.tnum {
font-variant-numeric: tabular-nums;
}
/* Empty / not-yet-loaded states. Sentence case, no exclamation marks —
say what is missing and what to do about it. */
.emptystate {
padding: 40px;
max-width: 60ch;
color: var(--ink-2);
line-height: 1.5;
}
.emptystate h2 {
margin: 0 0 8px;
font-size: 16px;
color: var(--ink);
}
.emptystate p {
margin: 0 0 10px;
}
.emptystate code {
font-family: var(--mono);
font-size: 12px;
background: var(--press);
padding: 1px 4px;
}