konnosDashboard
ui.css439 lines · main
1@reference "./globals.css";
2/* Brought over from platform to be cleaned if needed */
3
4/* Form panels */
5
6.Form,
7.Form button {
8 animation: fade 200ms ease-out;
9}
10
11.Form .form-control,
12.Form select {
13 min-width: 250px;
14 width: calc(67% - 0.5rem);
15 margin-left: 0.5rem;
16}
17
18.Form .form-group,
19.Form .checkbox {
20 @apply w-full;
21}
22
23.form-group {
24 @apply mb-2 p-0 leading-5 border-0 bg-transparent;
25 font-size: 15px;
26 display: flex;
27 flex-wrap: wrap;
28}
29
30/* TO DO: REMOVE */
31.form-group label {
32 @apply inline-block text-foreground-light text-sm py-2;
33 width: 33%;
34 align-self: top;
35}
36
37.Form .checkbox .form-check-label {
38 @apply flex items-center;
39}
40
41.Form .checkbox .form-check-label input[type='checkbox'] {
42 @apply mr-4;
43 width: auto;
44}
45
46.Form input[type='checkbox'] {
47 min-width: inherit;
48 width: inherit;
49}
50
51.Form .form-text,
52.Form .form-error {
53 @apply block text-sm text-foreground-lighter my-1;
54 display: block;
55 margin-left: calc(33% + 0.5rem);
56 width: 100%;
57}
58
59.Form .form-error {
60 @apply text-red-400;
61}
62
63.Form .text-danger {
64 @apply text-red-900;
65}
66
67.Form .form-help {
68 @apply text-border-muted;
69}
70
71.Form hr {
72 @apply mt-4 mb-4;
73}
74
75.section-block {
76 @apply p-0 rounded-sm bg-surface-100 border border-overlay;
77}
78
79.section-block--header {
80 @apply border-b border-overlay;
81}
82
83.section-block--header h1,
84.section-block--header h2,
85.section-block--header h3,
86.section-block--header h4 {
87 @apply m-0;
88}
89
90.section-block--header p {
91 @apply text-gray-300;
92}
93
94.section-block--footer {
95 @apply border-overlay bg-surface-100;
96}
97
98.section-block--footer button:not(.mr-0) {
99 @apply mr-2;
100}
101
102/*
103 Table
104*/
105
106.table-container table {
107 @apply w-full;
108 border-collapse: separate;
109 border-spacing: 0;
110}
111
112.table-container table span {
113 @apply truncate;
114}
115
116.table-container thead th {
117 @apply text-foreground-light font-normal text-sm;
118 @apply bg-surface-200;
119 @apply border-t border-b border-default;
120}
121
122.table-container thead th:first-child {
123 @apply rounded-sm rounded-r-none rounded-b-none;
124 @apply border-l;
125}
126
127.table-container thead th:last-child {
128 @apply pr-6 rounded-sm rounded-l-none rounded-b-none;
129 @apply border-r;
130}
131
132.table-container tbody tr {
133 @apply bg-surface-100;
134}
135
136.table-container tbody .tr--link {
137 @apply cursor-pointer transition-colors;
138}
139
140.table-container tbody .tr--link:hover {
141 @apply bg-surface-200;
142}
143
144.table-container tbody td {
145 @apply border-b p-3 px-4 text-sm text-gray-1100 border-default;
146}
147
148.table-container tbody td:first-child {
149 @apply pl-4 border-b border-l border-default;
150}
151
152.table-container tbody td:last-child {
153 @apply pr-4 border-b border-r border-default;
154}
155
156.table-container tbody tr:last-child td:first-child {
157 @apply rounded-sm rounded-r-none rounded-t-none;
158}
159
160.table-container tbody tr:last-child td:last-child {
161 @apply rounded-sm rounded-l-none rounded-t-none;
162}
163
164.table-container--borderless thead th {
165 border-top: none;
166}
167
168.table-container--borderless thead th:first-child {
169 border-left: none;
170}
171
172.table-container--borderless thead th:last-child {
173 border-right: none;
174}
175
176.table-container--borderless tbody td:first-child {
177 border-left: none;
178}
179
180.table-container--borderless tbody td:last-child {
181 border-right: none;
182}
183
184.table-container--borderless tbody tr:last-child td {
185 border-bottom: none;
186}
187
188/* Docs */
189.Docs {
190 &--inner-wrapper {
191 background: linear-gradient(
192 90deg,
193 hsl(var(--background-alternative-default)) 50%,
194 hsl(var(--background-surface-100)) 50%
195 );
196 width: 100%;
197 }
198
199 .dark &--inner-wrapper {
200 background: linear-gradient(
201 90deg,
202 hsl(var(--background-surface-100)) 50%,
203 hsl(var(--background-default)) 50%
204 );
205 }
206
207 /* h1, */
208 /* h2, */
209 /* h3 { */
210 /* @apply p-4 m-0; */
211 /* } */
212
213 .doc-heading {
214 @apply text-foreground capitalize mt-4 px-6 w-1/2;
215 hyphens: auto;
216 max-width: 50%;
217 }
218
219 .doc-section {
220 @apply border-b flex border-default;
221 }
222
223 &.Docs--table-editor .doc-section--introduction {
224 .text {
225 width: 85%;
226 }
227 }
228
229 &.Docs--table-editor .doc-section--introduction {
230 .text {
231 width: 85%;
232 }
233 }
234
235 &.Docs--table-editor .doc-section--client-libraries {
236 flex-direction: column;
237 margin-bottom: 40px;
238
239 .text,
240 .code {
241 width: 100%;
242 max-width: none;
243 }
244 .code {
245 margin-bottom: 20px;
246 }
247 }
248
249 .doc-section article:first-child {
250 @apply prose prose-docs prose-sm max-w-none;
251 }
252
253 &.Docs--table-editor .doc-section__table-name {
254 @apply mt-4;
255 }
256
257 .code-column {
258 @apply p-4 px-6 w-1/2;
259 max-width: 50%;
260
261 /* a:not(.btn-primary):not(.btn-secondary) { */
262 /* @apply text-green-500; */
263 /* } */
264
265 a {
266 @apply transition;
267 }
268
269 a:hover {
270 @apply text-brand-600;
271 }
272
273 p:last-child {
274 padding-bottom: 0;
275 }
276 }
277
278 .code {
279 @apply flex-1 p-2 px-6 w-1/2 pb-4;
280 max-width: 50%;
281
282 h4 {
283 @apply uppercase font-normal m-1 p-0 text-sm text-foreground-light;
284 }
285
286 h4:not(:first-child) {
287 @apply mt-6;
288 }
289
290 code {
291 @apply m-1 p-0;
292 background-color: none;
293 }
294
295 .is-highlighted {
296 @apply text-brand;
297 }
298 }
299 .codeblock-container + .codeblock-container {
300 @apply mt-12;
301 }
302}
303
304::-moz-selection {
305 /* Code for Firefox */
306 @apply bg-brand;
307 color: #333 !important;
308}
309
310::selection {
311 background-color: #6ee7b7;
312 color: #333 !important;
313}
314
315.has-hidden-children {
316 .visible-child {
317 transition: opacity 0.2s ease;
318 opacity: 100;
319 }
320 .hidden-child {
321 transition: opacity 0.2s ease;
322 opacity: 0;
323 }
324}
325
326.has-hidden-children:hover {
327 .visible-child {
328 opacity: 0;
329 pointer-events: none;
330 }
331 .hidden-child {
332 opacity: 100;
333 }
334}
335
336.SQLTabNav {
337 overflow-x: auto;
338 overflow-y: hidden !important;
339
340 &::-webkit-scrollbar {
341 display: none !important;
342 }
343
344 /* for Firefox */
345 scrollbar-width: none; /* auto | thin | none | <length>; */
346}
347
348.radix-tooltip-arrow {
349 polygon {
350 @apply fill-background-alternative [[data-theme*=dark]_&]:fill-background-alternative;
351 /* fill: #eeeeee; */
352 }
353}
354
355.pitr-listbox {
356 @apply md:gap-x-2;
357}
358
359.roles-toggle {
360 label {
361 @apply mt-1;
362 }
363}
364
365.thin-scrollbars {
366 scrollbar-width: thin;
367 scrollbar-color: hsl(var(--foreground-muted)) hsl(var(--background-alternative-default));
368
369 .dark & {
370 scrollbar-color: hsl(var(--foreground-lighter)) hsl(var(--background-surface-100));
371 }
372
373 ::-webkit-scrollbar {
374 background: hsl(var(--background-default));
375 height: 3px;
376 width: 0px;
377 border-radius: 0;
378
379 .dark & {
380 background: hsl(var(--border-control));
381 }
382 }
383
384 ::-webkit-scrollbar-track {
385 -webkit-box-shadow: inset 0 0 6px hsl(var(--border-control));
386 -webkit-border-radius: 5px;
387 border-radius: 5px;
388
389 .dark & {
390 -webkit-box-shadow: inset 0 0 6px hsl(var(--border-stronger));
391 }
392 }
393
394 ::-webkit-scrollbar-thumb {
395 -webkit-border-radius: 5px;
396 border-radius: 5px;
397 background: hsl(var(--foreground-muted));
398
399 .dark & {
400 -webkit-box-shadow: inset 0 0 6px var(--color-slate-1200);
401 }
402 }
403}
404
405.form-field-markdown {
406 a {
407 @apply text-brand transition opacity-75 hover:opacity-100 underline;
408 }
409}
410
411.view-icon {
412 rect {
413 @apply fill-blue-500 stroke-blue-500;
414 }
415 path,
416 circle {
417 @apply stroke-blue-900 fill-blue-500;
418 }
419}
420
421.table-icon {
422 rect {
423 @apply fill-green-1000 stroke-green-500;
424 }
425 line {
426 @apply stroke-green-500;
427 }
428}
429
430.recharts-cartesian-axis-tick {
431 text {
432 @apply text-xs;
433 }
434}
435.recharts-reference-line {
436 line {
437 @apply stroke-foreground-lighter;
438 }
439}