From af8143154163a5ee681b6e26f415a782a5d4b788 Mon Sep 17 00:00:00 2001 From: Jay George Date: Fri, 29 Aug 2025 14:21:37 +0100 Subject: [PATCH 1/4] =?UTF-8?q?This=20fixes=20table=20border-radius=20for?= =?UTF-8?q?=20Firefox,=20along=20with=20a=20hover=20state=20adjustment.=20?= =?UTF-8?q?In=20Firefox=E2=80=99s=20implementation,=20tbody=E2=80=99s=20ba?= =?UTF-8?q?ckground=20and=20border=20properties=20aren=E2=80=99t=20rendere?= =?UTF-8?q?d=20as=20a=20box,=20so=20your=20border-radius=20has=20no=20visu?= =?UTF-8?q?al=20effect.=20Instead=20we=20need=20to=20style=20the=20tds?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- resources/css/elements/tables.css | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/resources/css/elements/tables.css b/resources/css/elements/tables.css index 6388486c878..d4e912f6cee 100644 --- a/resources/css/elements/tables.css +++ b/resources/css/elements/tables.css @@ -29,7 +29,7 @@ } tbody { - @apply text-sm bg-white dark:bg-gray-900 shadow-sm rounded-xl outline-none; + @apply text-sm dark:bg-gray-900 shadow-sm rounded-xl outline-none; .contained & { @apply shadow-none rounded-none; } @@ -65,18 +65,20 @@ } } - &:hover { - @apply bg-gray-50 dark:bg-white/2.5; - } - th { @apply py-2 ltr:pr-4 rtl:pl-4; } td { + @apply bg-white; @apply pl-4.5 pr-2.5 py-3 border-t border-gray-200 dark:border-white/10; @apply text-gray-900 dark:text-gray-200; } + + /* When the row is hovered, change the background of all its cells to a hover state color */ + &:has(:hover) td { + @apply bg-gray-50 dark:bg-white/2.5; + } } .type-column { From e88c05dbb094e987f07d6c08b84ad759c6595ea4 Mon Sep 17 00:00:00 2001 From: Jay George Date: Fri, 29 Aug 2025 15:03:38 +0100 Subject: [PATCH 2/4] Fix table background for dark mode --- resources/css/elements/tables.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/resources/css/elements/tables.css b/resources/css/elements/tables.css index d4e912f6cee..bbeaec6756a 100644 --- a/resources/css/elements/tables.css +++ b/resources/css/elements/tables.css @@ -29,7 +29,7 @@ } tbody { - @apply text-sm dark:bg-gray-900 shadow-sm rounded-xl outline-none; + @apply text-sm shadow-sm rounded-xl outline-none; .contained & { @apply shadow-none rounded-none; } @@ -70,7 +70,7 @@ } td { - @apply bg-white; + @apply bg-white dark:bg-gray-900; @apply pl-4.5 pr-2.5 py-3 border-t border-gray-200 dark:border-white/10; @apply text-gray-900 dark:text-gray-200; } From 13033166bd24d25ca778bd9fbbbcd02ef6f2f06e Mon Sep 17 00:00:00 2001 From: Jay George Date: Fri, 29 Aug 2025 17:29:05 +0100 Subject: [PATCH 3/4] =?UTF-8?q?This=20effectively=20fixes=20table=20shadow?= =?UTF-8?q?s/borders=20for=20Safari.=20Similar=20to=20Firefox,=20tbody?= =?UTF-8?q?=E2=80=99s=20properties=20aren=E2=80=99t=20rendered=20as=20a=20?= =?UTF-8?q?box,=20so=20your=20box-shadows=20have=20no=20visual=20effect.?= =?UTF-8?q?=20Instead=20we=20need=20to=20style=20the=20tds=20with=20border?= =?UTF-8?q?s=20instead=20of=20shadows.=20I've=20added=20an=20alternative?= =?UTF-8?q?=20shadow=20for=20browsers=20like=20Chrome=20to=20compensate=20?= =?UTF-8?q?for=20the=20border?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- resources/css/core/utilities.css | 12 +++++++++--- resources/css/elements/tables.css | 21 +++++++++++++++------ 2 files changed, 24 insertions(+), 9 deletions(-) diff --git a/resources/css/core/utilities.css b/resources/css/core/utilities.css index 12e3ab913e7..a396acf942c 100644 --- a/resources/css/core/utilities.css +++ b/resources/css/core/utilities.css @@ -52,6 +52,12 @@ font-weight: 425; } +/* UTILITIES / DECORATION / SHADOWS +=================================================== */ +@utility shadow-sm-b { + box-shadow: 0 3px 2px -1px hsl(0deg 0% 90%), 0 1px 2px hsl(0deg 0% 90%); +} + /* UTILITIES / STATES =================================================== */ /* Here we typically need a negative outline-offset because of the inner shadow on inputs */ @@ -130,7 +136,7 @@ @apply bg-white/85 backdrop-blur-sm; } -/* UTILITIES / STATES / DECORATION / MASK BACKGROUND +/* UTILITIES / DECORATION / MASK BACKGROUND =================================================== */ /* Notes... @@ -181,7 +187,7 @@ } } -/* UTILITIES / STATES / DECORATION / ARCHIECTURAL LINES +/* UTILITIES / DECORATION / ARCHIECTURAL LINES =================================================== */ /* Notes... @@ -283,7 +289,7 @@ } } -/* UTILITIES / STATES / DECORATION / CHECKERBOARD +/* UTILITIES / DECORATION / CHECKERBOARD =================================================== */ @utility bg-checkerboard { --checkerboard-light: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v12H0zm12 12h12v12H12z' fill='%23f3f4f6'/%3E%3C/svg%3E"); diff --git a/resources/css/elements/tables.css b/resources/css/elements/tables.css index bbeaec6756a..27aa45ffc5c 100644 --- a/resources/css/elements/tables.css +++ b/resources/css/elements/tables.css @@ -1,7 +1,6 @@ /* ========================================================================== TABLES ========================================================================== */ - .data-table { @apply w-full max-w-full outline-hidden text-gray-500 antialiased border-separate border-spacing-y-0 min-w-full overflow-x-auto text-start; @@ -29,7 +28,7 @@ } tbody { - @apply text-sm shadow-sm rounded-xl outline-none; + @apply text-sm shadow-sm-b rounded-xl outline-none; .contained & { @apply shadow-none rounded-none; } @@ -41,19 +40,23 @@ @apply ltr:rounded-tl-xl rtl:rounded-tr-xl; } + td { + @apply border-t border-t-gray-200 dark:border-gray-700; + } + td:last-child, th:last-child { @apply ltr:rounded-tr-xl rtl:rounded-tl-xl; } - - td { - @apply border-0; - } } &:last-child { @apply border-none; + td { + @apply border-b border-b-gray-200 dark:border-gray-700; + } + td:first-child, th:first-child { @apply ltr:rounded-bl-xl rtl:rounded-br-xl; @@ -73,6 +76,12 @@ @apply bg-white dark:bg-gray-900; @apply pl-4.5 pr-2.5 py-3 border-t border-gray-200 dark:border-white/10; @apply text-gray-900 dark:text-gray-200; + &:first-child { + @apply border-s border-s-gray-200 dark:border-gray-700; + } + &:last-child { + @apply border-e border-e-gray-200 dark:border-gray-700; + } } /* When the row is hovered, change the background of all its cells to a hover state color */ From 50a6661bfd4ad234aad87e459548004d9a37f5a2 Mon Sep 17 00:00:00 2001 From: Jay George Date: Fri, 29 Aug 2025 17:43:48 +0100 Subject: [PATCH 4/4] Table shadows/border adjustments for dark mode --- resources/css/core/utilities.css | 3 +++ resources/css/elements/tables.css | 8 ++++---- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/resources/css/core/utilities.css b/resources/css/core/utilities.css index a396acf942c..53b722788a3 100644 --- a/resources/css/core/utilities.css +++ b/resources/css/core/utilities.css @@ -56,6 +56,9 @@ =================================================== */ @utility shadow-sm-b { box-shadow: 0 3px 2px -1px hsl(0deg 0% 90%), 0 1px 2px hsl(0deg 0% 90%); + &:where(.dark, .dark *) { + box-shadow: unset; + } } /* UTILITIES / STATES diff --git a/resources/css/elements/tables.css b/resources/css/elements/tables.css index 27aa45ffc5c..d15534d78c8 100644 --- a/resources/css/elements/tables.css +++ b/resources/css/elements/tables.css @@ -41,7 +41,7 @@ } td { - @apply border-t border-t-gray-200 dark:border-gray-700; + @apply border-t border-t-gray-200 dark:border-t-gray-800; } td:last-child, @@ -54,7 +54,7 @@ @apply border-none; td { - @apply border-b border-b-gray-200 dark:border-gray-700; + @apply border-b border-b-gray-200 dark:border-b-gray-800; } td:first-child, @@ -77,10 +77,10 @@ @apply pl-4.5 pr-2.5 py-3 border-t border-gray-200 dark:border-white/10; @apply text-gray-900 dark:text-gray-200; &:first-child { - @apply border-s border-s-gray-200 dark:border-gray-700; + @apply border-s border-s-gray-200 dark:border-s-gray-800; } &:last-child { - @apply border-e border-e-gray-200 dark:border-gray-700; + @apply border-e border-e-gray-200 dark:border-e-gray-800; } }