This repository has no description
2.4 kB
158 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.approval {
130 margin: 1rem 0;
131 padding: 0.8rem;
132 border: 2px solid #e0a030;
133 border-radius: 0.5rem;
134 text-align: center;
135}
136
137.approval p {
138 margin: 0 0 0.6rem;
139 white-space: pre-wrap;
140 word-break: break-word;
141}
142
143.approval button {
144 margin: 0 0.3rem;
145 padding: 0.5rem 1rem;
146 border: none;
147 border-radius: 0.3rem;
148 font: inherit;
149 color: #fff;
150 cursor: pointer;
151}
152
153#approve {
154 background: var(--accent);
155}
156#deny {
157 background: var(--live);
158}