a2acalling 0.6.57 → 0.6.58

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4,6 +4,10 @@
4
4
  --ink: #13233a;
5
5
  --line: #d7dee6;
6
6
  --accent: #1466c1;
7
+
8
+ /* Map app vars to Shoelace design tokens */
9
+ --sl-color-primary-600: var(--accent);
10
+ --sl-font-sans: "IBM Plex Sans", "Segoe UI", sans-serif;
7
11
  }
8
12
 
9
13
  * {
@@ -12,7 +16,7 @@
12
16
 
13
17
  body {
14
18
  margin: 0;
15
- font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
19
+ font-family: var(--sl-font-sans);
16
20
  color: var(--ink);
17
21
  background: linear-gradient(180deg, #eef3f8 0%, var(--bg) 100%);
18
22
  }
@@ -34,44 +38,10 @@ header p {
34
38
  font-size: 0.9rem;
35
39
  }
36
40
 
37
- nav {
38
- display: flex;
39
- gap: 0.5rem;
40
- padding: 0.75rem 1rem;
41
- border-bottom: 1px solid var(--line);
42
- background: #f8fafc;
43
- }
44
-
45
- .tab {
46
- border: 1px solid var(--line);
47
- background: #fff;
48
- color: var(--ink);
49
- padding: 0.45rem 0.7rem;
50
- border-radius: 8px;
51
- cursor: pointer;
52
- }
53
-
54
- .tab.is-active {
55
- border-color: var(--accent);
56
- color: var(--accent);
57
- }
58
-
59
41
  main {
60
42
  padding: 1rem;
61
43
  }
62
44
 
63
- .panel {
64
- display: none;
65
- background: var(--panel);
66
- border: 1px solid var(--line);
67
- border-radius: 10px;
68
- padding: 1rem;
69
- }
70
-
71
- .panel.is-active {
72
- display: block;
73
- }
74
-
75
45
  h2,
76
46
  h3 {
77
47
  margin-top: 0;
@@ -92,66 +62,38 @@ h3 {
92
62
  margin-bottom: 0.9rem;
93
63
  }
94
64
 
95
- .card {
96
- border: 1px solid var(--line);
97
- border-radius: 10px;
98
- padding: 0.75rem 0.8rem;
99
- background: #fbfdff;
65
+ /* Shoelace sl-card spacing */
66
+ sl-card {
100
67
  margin-bottom: 0.9rem;
68
+ --padding: 0.75rem 0.8rem;
101
69
  }
102
70
 
103
- label {
104
- display: block;
105
- margin-bottom: 0.6rem;
106
- font-size: 0.9rem;
107
- }
108
-
109
- input,
110
- textarea,
111
- select,
112
- button {
113
- font: inherit;
114
- }
115
-
116
- input,
117
- textarea,
118
- select {
119
- width: 100%;
120
- border: 1px solid var(--line);
121
- border-radius: 8px;
122
- padding: 0.45rem 0.55rem;
123
- background: #fff;
124
- }
125
-
126
- textarea {
127
- resize: vertical;
128
- }
129
-
130
- button {
131
- border: 1px solid var(--line);
132
- border-radius: 8px;
133
- background: #fff;
134
- padding: 0.42rem 0.65rem;
135
- cursor: pointer;
71
+ sl-card::part(base) {
72
+ background: #fbfdff;
73
+ border-color: var(--line);
136
74
  }
137
75
 
138
- button:hover {
139
- border-color: var(--accent);
140
- color: var(--accent);
76
+ /* Shoelace sl-details spacing */
77
+ sl-details {
78
+ margin-bottom: 0.9rem;
141
79
  }
142
80
 
143
- .btn-link {
144
- border: none;
145
- background: none;
146
- padding: 0;
147
- color: var(--accent);
148
- cursor: pointer;
81
+ /* Shoelace sl-input, sl-textarea, sl-select spacing */
82
+ sl-input,
83
+ sl-textarea,
84
+ sl-select,
85
+ sl-checkbox {
86
+ margin-bottom: 0.6rem;
149
87
  }
150
88
 
151
- .btn-link:hover {
152
- text-decoration: underline;
89
+ /* Labels for inline wrapping around sl-select */
90
+ label {
91
+ display: block;
92
+ margin-bottom: 0.6rem;
93
+ font-size: 0.9rem;
153
94
  }
154
95
 
96
+ /* Tables */
155
97
  table {
156
98
  width: 100%;
157
99
  border-collapse: collapse;
@@ -175,11 +117,34 @@ tr[data-selected="1"] td {
175
117
  background: #f0f7ff;
176
118
  }
177
119
 
120
+ /* Summary & transcript */
178
121
  .summary {
179
122
  max-width: 500px;
180
123
  white-space: pre-wrap;
181
124
  }
182
125
 
126
+ .summary-pending {
127
+ color: #6b7280;
128
+ margin: 0.25em 0 0.75em;
129
+ }
130
+
131
+ .transcript-details {
132
+ margin-top: 1em;
133
+ }
134
+
135
+ .transcript {
136
+ max-width: 600px;
137
+ white-space: pre-wrap;
138
+ background: #f9fafb;
139
+ border: 1px solid #e5e7eb;
140
+ border-radius: 4px;
141
+ padding: 0.75em;
142
+ margin-top: 0.5em;
143
+ font-size: 0.85em;
144
+ max-height: 400px;
145
+ overflow-y: auto;
146
+ }
147
+
183
148
  .mono {
184
149
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
185
150
  }
@@ -202,35 +167,42 @@ tr[data-selected="1"] td {
202
167
  display: none;
203
168
  }
204
169
 
205
- .status-pill {
206
- display: inline-block;
207
- padding: 0.15rem 0.45rem;
208
- border-radius: 999px;
209
- border: 1px solid var(--line);
210
- font-size: 0.78rem;
211
- font-weight: 600;
170
+ /* Pin button for last-called contacts (sl-icon-button) */
171
+ .pin-btn {
172
+ font-size: 1rem;
173
+ color: #b0bec5;
174
+ }
175
+
176
+ .pin-btn:hover {
177
+ color: var(--accent);
178
+ }
179
+
180
+ .pin-btn.pinned {
181
+ color: var(--accent);
212
182
  }
213
183
 
214
- .status-pill.ok {
215
- background: #ecfdf3;
216
- border-color: #9bd8b8;
217
- color: #125934;
184
+ /* Shoelace tab group customization */
185
+ sl-tab-group {
186
+ --indicator-color: var(--accent);
218
187
  }
219
188
 
220
- .status-pill.warn {
221
- background: #fff7e8;
222
- border-color: #f1d08e;
223
- color: #8a5a00;
189
+ sl-tab-group::part(base) {
190
+ background: var(--panel);
191
+ border: 1px solid var(--line);
192
+ border-radius: 10px;
224
193
  }
225
194
 
226
- .status-pill.err {
227
- background: #fff0f1;
228
- border-color: #efb1b6;
229
- color: #8c1d26;
195
+ sl-tab-group::part(nav) {
196
+ border-bottom: 1px solid var(--line);
197
+ background: #f8fafc;
198
+ }
199
+
200
+ sl-tab-panel::part(base) {
201
+ padding: 1rem;
230
202
  }
231
203
 
232
204
  @media (max-width: 720px) {
233
- nav {
205
+ sl-tab-group::part(nav) {
234
206
  overflow-x: auto;
235
207
  }
236
208
  }