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