This repository has no description
2.8 kB
188 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
13body {
14 margin: 0;
15 background: #111;
16 color: var(--fg);
17 font:
18 16px/1.4 system-ui,
19 sans-serif;
20}
21
22main {
23 max-width: 40rem;
24 margin: 0 auto;
25 padding: max(1rem, env(safe-area-inset-top)) 1rem 2rem;
26}
27
28header {
29 display: flex;
30 flex-wrap: wrap;
31 align-items: baseline;
32 justify-content: space-between;
33}
34
35h1 {
36 font-size: 1.2rem;
37 margin: 0 0 1rem;
38}
39
40#voice-select {
41 /* Labels carry the language and accent: a full-width row under the title. */
42 order: 3;
43 flex-basis: 100%;
44 margin-bottom: 0.5rem;
45 background: #222;
46 color: var(--fg);
47 border: 1px solid #444;
48 border-radius: 0.3rem;
49 font: inherit;
50 padding: 0.2rem;
51}
52
53.link {
54 background: none;
55 border: none;
56 color: var(--dim);
57 font: inherit;
58 text-decoration: underline;
59 cursor: pointer;
60}
61
62.talk {
63 display: block;
64 width: 9rem;
65 height: 9rem;
66 margin: 1rem auto;
67 border: none;
68 border-radius: 50%;
69 background: var(--accent);
70 color: #fff;
71 font:
72 600 1.3rem system-ui,
73 sans-serif;
74 cursor: pointer;
75}
76
77.talk.live {
78 background: var(--live);
79}
80.talk.speaking {
81 box-shadow: 0 0 0 0.6rem rgba(217, 83, 79, 0.35);
82}
83.talk:disabled {
84 opacity: 0.5;
85}
86
87.status,
88.cost {
89 text-align: center;
90 margin: 0.3rem 0;
91}
92.cost {
93 color: var(--dim);
94 font-size: 0.9rem;
95}
96
97.log {
98 list-style: none;
99 padding: 0;
100 margin-top: 1.5rem;
101}
102
103.log li {
104 margin: 0.4rem 0;
105 white-space: pre-wrap;
106}
107
108.log .user::before {
109 content: "you: ";
110 color: var(--accent);
111}
112.log .assistant::before {
113 content: "voice: ";
114 color: var(--dim);
115}
116.log .hermes {
117 color: var(--dim);
118 font-size: 0.9rem;
119 border-left: 2px solid var(--accent);
120 padding-left: 0.5rem;
121}
122.log .hermes::before {
123 content: "hermes: ";
124}
125.log .error {
126 color: var(--live);
127}
128
129/* .login sets display:flex, which would override the hidden attribute. */
130[hidden] {
131 display: none !important;
132}
133
134.login {
135 display: flex;
136 gap: 0.5rem;
137 margin: 1rem 0;
138}
139
140.login input {
141 flex: 1;
142 padding: 0.5rem;
143 background: #222;
144 color: var(--fg);
145 border: 1px solid #444;
146 border-radius: 0.3rem;
147 font: inherit;
148}
149
150.login button {
151 padding: 0.5rem 1rem;
152 border: none;
153 border-radius: 0.3rem;
154 background: var(--accent);
155 color: #fff;
156 font: inherit;
157}
158
159.approval {
160 margin: 1rem 0;
161 padding: 0.8rem;
162 border: 2px solid #e0a030;
163 border-radius: 0.5rem;
164 text-align: center;
165}
166
167.approval p {
168 margin: 0 0 0.6rem;
169 white-space: pre-wrap;
170 word-break: break-word;
171}
172
173.approval button {
174 margin: 0 0.3rem;
175 padding: 0.5rem 1rem;
176 border: none;
177 border-radius: 0.3rem;
178 font: inherit;
179 color: #fff;
180 cursor: pointer;
181}
182
183#approve {
184 background: var(--accent);
185}
186#deny {
187 background: var(--live);
188}