Skip to content

Commit 5429340

Browse files
RobiNN1RobiNN1
committed
Css fixes
1 parent ac6febc commit 5429340

File tree

3 files changed

+69
-62
lines changed

3 files changed

+69
-62
lines changed

‎assets/css/styles.css‎

Lines changed: 40 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*! tailwindcss v4.0.14 | MIT License | https://tailwindcss.com */
1+
/*! tailwindcss v4.0.16 | MIT License | https://tailwindcss.com */
22
@layer theme, base, components, utilities;
33
@layer theme {
44
:root, :host {
@@ -261,21 +261,12 @@
261261
.w-full {
262262
width: 100%;
263263
}
264-
.max-w-full {
265-
max-width: 100%;
266-
}
267264
.max-w-lg {
268265
max-width: 32rem;
269266
}
270267
.max-w-xs {
271268
max-width: 20rem;
272269
}
273-
.flex-1 {
274-
flex: 1;
275-
}
276-
.grow {
277-
flex-grow: 1;
278-
}
279270
.table-auto {
280271
table-layout: auto;
281272
}
@@ -291,9 +282,6 @@
291282
.appearance-none {
292283
appearance: none;
293284
}
294-
.flex-col {
295-
flex-direction: column;
296-
}
297285
.flex-wrap {
298286
flex-wrap: wrap;
299287
}
@@ -328,6 +316,20 @@
328316
margin-inline-end: calc(-1px * calc(1 - var(--tw-space-x-reverse)));
329317
}
330318
}
319+
.divide-y {
320+
:where(& > :not(:last-child)) {
321+
--tw-divide-y-reverse: 0;
322+
border-bottom-style: var(--tw-border-style);
323+
border-top-style: var(--tw-border-style);
324+
border-top-width: calc(1px * var(--tw-divide-y-reverse));
325+
border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
326+
}
327+
}
328+
.divide-gray-900\/5 {
329+
:where(& > :not(:last-child)) {
330+
border-color: color-mix(in oklab, oklch(0.21 0.034 264.665) 5%, transparent);
331+
}
332+
}
331333
.truncate {
332334
overflow: hidden;
333335
text-overflow: ellipsis;
@@ -394,6 +396,9 @@
394396
.bg-blue-500 {
395397
background-color: oklch(0.623 0.214 259.815);
396398
}
399+
.bg-gray-50 {
400+
background-color: oklch(0.985 0.002 247.839);
401+
}
397402
.bg-gray-100 {
398403
background-color: oklch(0.967 0.003 264.542);
399404
}
@@ -525,6 +530,9 @@
525530
.text-gray-500 {
526531
color: oklch(0.551 0.027 264.364);
527532
}
533+
.text-gray-600 {
534+
color: oklch(0.446 0.03 256.802);
535+
}
528536
.text-gray-700 {
529537
color: oklch(0.373 0.034 259.733);
530538
}
@@ -534,8 +542,8 @@
534542
.text-primary-500 {
535543
color: var(--color-primary-500);
536544
}
537-
.text-primary-700 {
538-
color: var(--color-primary-700);
545+
.text-primary-600 {
546+
color: var(--color-primary-600);
539547
}
540548
.text-primary-900 {
541549
color: var(--color-primary-900);
@@ -895,6 +903,13 @@
895903
gap: calc(0.25rem * 2);
896904
}
897905
}
906+
.dark\:divide-white\/5 {
907+
&:where(.dark, .dark *) {
908+
:where(& > :not(:last-child)) {
909+
border-color: color-mix(in oklab, #fff 5%, transparent);
910+
}
911+
}
912+
}
898913
.dark\:border-gray-600 {
899914
&:where(.dark, .dark *) {
900915
border-color: oklch(0.446 0.03 256.802);
@@ -975,6 +990,11 @@
975990
background-color: oklch(0.372 0.044 257.287);
976991
}
977992
}
993+
.dark\:bg-white\/5 {
994+
&:where(.dark, .dark *) {
995+
background-color: color-mix(in oklab, #fff 5%, transparent);
996+
}
997+
}
978998
.dark\:text-gray-100 {
979999
&:where(.dark, .dark *) {
9801000
color: oklch(0.967 0.003 264.542);
@@ -1216,12 +1236,6 @@
12161236
}
12171237
}
12181238
}
1219-
.\[\&\:last-child\>\*\]\:border-b-0 {
1220-
&:last-child>* {
1221-
border-bottom-style: var(--tw-border-style);
1222-
border-bottom-width: 0px;
1223-
}
1224-
}
12251239
.\[\&\>\.active\]\:bg-gray-200 {
12261240
&>.active {
12271241
background-color: oklch(0.928 0.006 264.531);
@@ -1246,12 +1260,6 @@
12461260
}
12471261
}
12481262
}
1249-
.\[\&\>\:last-child\]\:border-b-0 {
1250-
&>:last-child {
1251-
border-bottom-style: var(--tw-border-style);
1252-
border-bottom-width: 0px;
1253-
}
1254-
}
12551263
}
12561264
@layer base {
12571265
*, ::after, ::before, ::backdrop, ::file-selector-button {
@@ -1382,6 +1390,11 @@
13821390
inherits: false;
13831391
initial-value: 0;
13841392
}
1393+
@property --tw-divide-y-reverse {
1394+
syntax: "*";
1395+
inherits: false;
1396+
initial-value: 0;
1397+
}
13851398
@property --tw-border-style {
13861399
syntax: "*";
13871400
inherits: false;

‎templates/partials/info_table.twig‎

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,32 @@
1-
<div class="mb-4 rounded-sm bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-700">
2-
<div class="border-b border-gray-200 px-4 py-1.5 font-semibold text-primary-700 dark:border-gray-700 dark:text-primary-400">
3-
{{ panel_title }}
1+
<div class="mb-4 overflow-hidden rounded-sm bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-700">
2+
<div class="border-b border-gray-200 bg-gray-50 px-4 py-2 dark:border-gray-700 dark:bg-white/5">
3+
<h2 class="text-sm font-semibold text-gray-900 dark:text-white">{{ panel_title }}</h2>
44
</div>
5-
<div class="w-full overflow-x-auto">
6-
<table class="w-full table-auto text-left dark:border-gray-700 dark:text-gray-300">
7-
<tbody>
5+
6+
<div class="relative overflow-x-auto">
7+
<table class="w-full table-auto text-left text-sm">
8+
<tbody class="divide-y divide-gray-900/5 dark:divide-white/5">
89
{% for name, value in array %}
910
{% if value is iterable and value|length > 0 %}
10-
<tr class="border-b border-gray-200 text-primary-700 dark:border-gray-700 dark:text-primary-400">
11-
<td colspan="2" class="px-4 py-2 text-xs font-bold uppercase whitespace-nowrap">{{ name|replace({'_': ' '}) }}</td>
11+
<tr class="bg-gray-50 dark:bg-white/5">
12+
<td colspan="2" scope="colgroup" class="px-4 py-1.5 text-xs uppercase text-primary-600 dark:text-primary-400">
13+
{{ name|replace({'_': ' '}) }}
14+
</td>
1215
</tr>
1316
{% for sub_name, sub_value in value %}
1417
{% if sub_value is not iterable %}
15-
<tr class="[&:last-child>*]:border-b-0 hover:bg-gray-50 dark:hover:bg-white/5">
16-
<td class="border-b border-gray-200 px-4 py-1 text-sm font-semibold whitespace-nowrap dark:border-gray-700 dark:text-gray-300">{{ sub_name }}</td>
17-
<td class="border-b border-gray-200 px-4 py-1 text-sm dark:border-gray-700 dark:text-gray-300">{{ sub_value|raw }}</td>
18+
<tr class="hover:bg-gray-50 dark:hover:bg-white/5">
19+
<td class="whitespace-nowrap px-4 py-1.5 text-gray-900 dark:text-white">{{ sub_name }}</td>
20+
<td class="px-4 py-1.5 font-semibold text-gray-700 dark:text-gray-300">{{ sub_value|raw }}</td>
1821
</tr>
1922
{% endif %}
2023
{% endfor %}
2124
{% elseif not value is iterable %}
22-
<tr class="[&:last-child>*]:border-b-0 hover:bg-gray-50 dark:hover:bg-white/5">
23-
<td class="border-b border-gray-200 px-4 py-1 text-sm font-semibold whitespace-nowrap dark:border-gray-700 dark:text-gray-300">{{ name }}</td>
24-
<td class="border-b border-gray-200 px-4 py-1 text-sm dark:border-gray-700 dark:text-gray-300">{{ value|raw }}</td>
25+
<tr class="hover:bg-gray-50 dark:hover:bg-white/5">
26+
<td class="whitespace-nowrap px-4 py-1.5 text-gray-900 dark:text-white">{{ name }}</td>
27+
<td class="px-4 py-1.5 font-semibold text-gray-700 dark:text-gray-300">{{ value|raw }}</td>
2528
</tr>
2629
{% endif %}
27-
{% else %}
28-
<tr>
29-
<td colspan="2" class="p-4 text-center dark:text-gray-400">No info.</td>
30-
</tr>
3130
{% endfor %}
3231
</tbody>
3332
</table>

‎templates/partials/panel.twig‎

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -22,21 +22,22 @@
2222
</div>
2323
{% endmacro %}
2424

25-
<div class="mb-4 rounded-sm bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-700">
26-
<div class="border-b border-gray-200 px-4 py-1.5 text-primary-700 dark:border-gray-700 dark:text-primary-400">
27-
<div class="flex flex-wrap items-center">
28-
<div class="w-full max-w-full flex-1 grow">
29-
<h2 class="font-semibold">{{ panel_title }}</h2>
30-
</div>
25+
<div class="mb-4 overflow-hidden rounded-sm bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-700">
26+
<div class="border-b border-gray-200 bg-gray-50 px-4 py-2 dark:border-gray-700 dark:bg-white/5">
27+
<div class="flex items-center justify-between gap-4">
28+
<h2 class="text-sm font-semibold text-gray-900 dark:text-white">{{ panel_title }}</h2>
29+
{% if moreinfo %}
30+
<a href="{{ link([''], {'moreinfo': 1}) }}" class="text-xs font-semibold text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300">More info</a>
31+
{% endif %}
3132
</div>
3233
</div>
3334

34-
<div class="[&>:last-child]:border-b-0 dark:border-gray-700">
35+
<div class="divide-y divide-gray-900/5 dark:divide-white/5">
3536
{% for name, value in array %}
36-
<div class="border-b border-gray-200 px-4 py-1 flex flex-col text-right dark:border-gray-700 dark:text-gray-300">
37-
<div class="flex justify-between items-center gap-2">
38-
<b class="text-xs">{{ value is iterable ? value[0] : name }}</b>
39-
<span class="text-sm text-left truncate hover:text-clip hover:break-all hover:whitespace-normal">{{ (value is iterable ? value[1] : value)|raw }}</span>
37+
<div class="px-4 py-1.5">
38+
<div class="flex items-center justify-between gap-4">
39+
<div class="text-xs font-semibold text-gray-600 dark:text-gray-300">{{ value is iterable ? value[0] : name }}</div>
40+
<div class="text-sm font-semibold text-gray-900 dark:text-white">{{ (value is iterable ? value[1] : value)|raw }}</div>
4041
</div>
4142

4243
{% if value[2] is not null %}
@@ -45,10 +46,4 @@
4546
</div>
4647
{% endfor %}
4748
</div>
48-
49-
{% if moreinfo %}
50-
<div class="border-t border-gray-200 px-4 py-1 text-right dark:border-gray-700">
51-
<a href="{{ link([''], {'moreinfo': 1}) }}" class="text-primary-500 hover:text-primary-700 font-semibold dark:text-primary-400 dark:hover:text-primary-300">Show more info</a>
52-
</div>
53-
{% endif %}
5449
</div>

0 commit comments

Comments
 (0)