This repository has no description
3.1 kB
184 lines
1:root {
2 color-scheme: dark;
3 --fg: #e8e8e8;
4 --dim: #8a8a8a;
5 --accent: #4fb477;
6 --live: #d9534f;
7}
8
9* {
10 box-sizing: border-box;
11}
12
13/* One screen high: only the transcript scrolls, so Talk/Hang up (and an
14 approval) always stay in view. 100% of the containing block, not vh/dvh:
15 in Chrome on Android those resolve taller than the visible area, and
16 the document then scrolls to hide the browser bars. */
17html,
18body {
19 height: 100%;
20 overflow: hidden;
21}
22
23body {
24 margin: 0;
25 background: #111;
26 color: var(--fg);
27 font:
28 16px/1.4 system-ui,
29 sans-serif;
30}
31
32main {
33 max-width: 40rem;
34 height: 100%;
35 margin: 0 auto;
36 padding: max(1rem, env(safe-area-inset-top)) 1rem
37 max(1rem, env(safe-area-inset-bottom));
38 display: flex;
39 flex-direction: column;
40}
41
42main > :not(.log) {
43 flex: none;
44}
45
46header {
47 display: flex;
48 flex-wrap: wrap;
49 align-items: baseline;
50 justify-content: space-between;
51}
52
53h1 {
54 font-size: 1.2rem;
55 margin: 0 0 1rem;
56}
57
58#voice-select {
59 /* Labels carry the language and accent: a full-width row under the title. */
60 order: 3;
61 flex-basis: 100%;
62 margin-bottom: 0.5rem;
63 background: #222;
64 color: var(--fg);
65 border: 1px solid #444;
66 border-radius: 0.3rem;
67 font: inherit;
68 padding: 0.2rem;
69}
70
71.link {
72 background: none;
73 border: none;
74 color: var(--dim);
75 font: inherit;
76 text-decoration: underline;
77 cursor: pointer;
78}
79
80.talk {
81 display: block;
82 width: 9rem;
83 height: 9rem;
84 margin: 1rem auto;
85 border: none;
86 border-radius: 50%;
87 background: var(--accent);
88 color: #fff;
89 font:
90 600 1.3rem system-ui,
91 sans-serif;
92 cursor: pointer;
93}
94
95.talk.live {
96 background: var(--live);
97}
98.talk.speaking {
99 box-shadow: 0 0 0 0.6rem rgba(217, 83, 79, 0.35);
100}
101.talk:disabled {
102 opacity: 0.5;
103}
104
105.status,
106.cost {
107 text-align: center;
108 margin: 0.3rem 0;
109}
110.cost {
111 color: var(--dim);
112 font-size: 0.9rem;
113}
114
115.log {
116 flex: 1 1 0;
117 min-height: 0;
118 overflow-y: auto;
119 /* A swipe past either end does not move the page. */
120 overscroll-behavior: contain;
121 list-style: none;
122 padding: 0;
123 margin: 1.5rem 0 0;
124}
125
126.log li {
127 margin: 0.4rem 0;
128 white-space: pre-wrap;
129}
130
131.log .user::before {
132 content: "you: ";
133 color: var(--accent);
134}
135.log .assistant::before {
136 content: "voice: ";
137 color: var(--dim);
138}
139.log .hermes {
140 color: var(--dim);
141 font-size: 0.9rem;
142 border-left: 2px solid var(--accent);
143 padding-left: 0.5rem;
144}
145.log .hermes::before {
146 content: "hermes: ";
147}
148.log .error {
149 color: var(--live);
150}
151
152.approval {
153 margin: 1rem 0;
154 padding: 0.8rem;
155 border: 2px solid #e0a030;
156 border-radius: 0.5rem;
157 text-align: center;
158}
159
160.approval p {
161 /* A long command scrolls here instead of pushing the buttons away. */
162 max-height: 30vh;
163 overflow-y: auto;
164 margin: 0 0 0.6rem;
165 white-space: pre-wrap;
166 word-break: break-word;
167}
168
169.approval button {
170 margin: 0 0.3rem;
171 padding: 0.5rem 1rem;
172 border: none;
173 border-radius: 0.3rem;
174 font: inherit;
175 color: #fff;
176 cursor: pointer;
177}
178
179#approve {
180 background: var(--accent);
181}
182#deny {
183 background: var(--live);
184}