Modal styling WIP
Alessandro committed
Nov 4, 2024 at 15:18 UTC
1a0ceebcaf7a21085b6ca4ddba2873bbf0b205fe
2 files changed
+99
-14
webui/index.html
+11
-11
@@ -14,7 +14,7 @@
14
if (window[name]) window[name](...args)
15
}
16
</script>
17
-
17
+
18
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
19
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
20
<script type="module" src="index.js"></script>
@@ -40,13 +40,13 @@
40
<a href="https://github.com/frdel/agent-zero" target="_blank" rel="noopener noreferrer">
41
<img src="splash.jpg" alt="a0" width="22" height="22">
42
</a>
43
- </div>
43
</div>
44
+ </div>
45
46
- <div id="left-panel" class="panel">
47
- <div class="left-panel-top">
48
- <!--Sidebar upper elements-->
49
- <div class="config-section" id="status-section" x-data="{ connected: true }">
46
+ <div id="left-panel" class="panel">
47
+ <!--Sidebar upper elements-->
48
+ <div class="left-panel-top">
49
+ <div class="config-section" id="status-section" x-data="{ connected: true }">
50
<h3>Status</h3>
51
<h4 class="connected" x-show="connected">✔ Connected</h4>
52
<h4 class="disconnected" x-show="!connected">✘ Disconnected</h4>
@@ -79,9 +79,9 @@
79
</ul>
80
</div>
81
</div>
82
- </div>
83
- <!--Sidebar lower elements-->
84
- <div class="left-panel-bottom">
82
+ </div>
83
+ <!--Sidebar lower elements-->
84
+ <div class="left-panel-bottom">
85
<!-- Preferences -->
86
<div class="pref-section" x-data="{ prefOpen: true }">
87
<span><h3 class="pref-header" @click="prefOpen = !prefOpen">
@@ -180,7 +180,6 @@
180
</div>
181
</div>
182
</div>
183
-
183
<div id="settingsModal" x-data="settingsModalProxy">
184
<h1 x-text="settings.title"></h1>
185
<template x-teleport="body">
@@ -279,17 +278,18 @@
278
</div>
279
280
<div class="modal-footer">
281
+ <div id="buttons-container">
282
<template x-for="button in settings.buttons" :key="button.id">
283
<button :class="button.classes" @click="handleButton(button.id)"
284
x-text="button.title"></button>
285
</template>
286
+ </div>
287
</div>
288
</div>
289
</div>
290
</template>
291
</div>
292
292
-
293
</body>
294
295
</html>
\ No newline at end of file
webui/settings.css
+88
-3
@@ -8,6 +8,7 @@
8
display: flex;
9
align-items: center;
10
justify-content: center;
11
+ z-index: 1001;
12
}
13
14
.modal-container {
@@ -30,6 +31,30 @@
31
padding: 2rem;
32
overflow-y: auto;
33
flex-grow: 1;
34
+ background-clip: border-box;
35
+ border: 6px solid transparent;
36
+ transition: all 0.3s ease;
37
+}
38
+
39
+.modal-content::-webkit-scrollbar {
40
+ width: 6px;
41
+ height: 6px;
42
+}
43
+
44
+.modal-content::-webkit-scrollbar-track {
45
+ background: transparent;
46
+ margin: 4px 0;
47
+ border-radius: 6px;
48
+}
49
+
50
+.modal-content::-webkit-scrollbar-thumb {
51
+ background-color: rgba(155, 155, 155, 0.5);
52
+ border-radius: 6px;
53
+ transition: background-color 0.2s ease;
54
+}
55
+
56
+.modal-content::-webkit-scrollbar-thumb:hover {
57
+ background-color: rgba(155, 155, 155, 0.7);
58
}
59
60
.modal-footer {
@@ -97,6 +122,7 @@ input[type="text"] {
122
padding: 0.5rem;
123
border: 1px solid #ddd;
124
border-radius: 0.25rem;
125
+ font-family: Rubik;
126
}
127
128
textarea {
@@ -106,8 +132,13 @@ textarea {
132
border: 1px solid #ddd;
133
border-radius: 0.25rem;
134
margin-top: 1rem;
109
- font-family: inherit;
110
- resize: vertical;
135
+ font-family: Roboto Mono;
136
+ scroll-behavior: smooth;
137
+ resize: none;
138
+ /*-/* scrollbar padding */
139
+ background-clip: border-box;
140
+ border: 6px solid transparent;
141
+ transition: all 0.3s ease;
142
}
143
144
.toggle {
@@ -165,12 +196,18 @@ input[type="range"] {
196
text-align: right;
197
}
198
199
+#buttons-container {
200
+ display: flex;
201
+ gap: 0.875rem;
202
+ }
203
+
204
.btn {
169
- padding: 0.5rem 1rem;
205
+ padding: 0.7rem 1.5rem;
206
border-radius: 0.25rem;
207
cursor: pointer;
208
border: none;
209
font-size: 0.875rem;
210
+ font-family: Rubik;
211
}
212
213
.btn-ok {
@@ -202,6 +239,7 @@ select {
239
background-color: white;
240
font-size: inherit;
241
cursor: pointer;
242
+ font-family: Rubik;
243
}
244
245
select:disabled {
@@ -228,4 +266,51 @@ nav ul li a {
266
267
nav ul li a:hover {
268
text-decoration: underline;
269
+}
270
+
271
+@media (max-width: 768px) {
272
+ .modal-header {
273
+ padding: 1.5rem 2rem;
274
+ border-bottom: 1px solid #eee;
275
+ }
276
+
277
+ .modal-content {
278
+ padding: 1rem;
279
+ overflow-y: auto;
280
+ flex-grow: 1;
281
+ }
282
+
283
+ .modal-footer {
284
+ padding: 1.5rem;
285
+ }
286
+
287
+ #buttons-container {
288
+ display: flex;
289
+ gap: 1rem;
290
+ margin: 0 auto;
291
+ }
292
+
293
+ .section {
294
+ margin-bottom: 2rem;
295
+ padding: 1rem;
296
+ border: 1px solid #eee;
297
+ border-radius: 0.5rem;
298
+ }
299
+
300
+ .field-control {
301
+ width: 100%;
302
+ }
303
+ .field-description {
304
+ padding-bottom: var(--spacing-xs);
305
+ }
306
+ .field {
307
+ padding-top: var(--spacing-xs);
308
+ padding-bottom: var(--spacing-xs);
309
+ display: block;
310
+ align-items: center;
311
+ }
312
+ .select {
313
+ margin-top: 100px !important;
314
+ padding-bottom: 1rem;
315
+ }
316
}
\ No newline at end of file