diff --git a/resources/css/core/utilities.css b/resources/css/core/utilities.css index 12e3ab913e7..53b722788a3 100644 --- a/resources/css/core/utilities.css +++ b/resources/css/core/utilities.css @@ -52,6 +52,15 @@ 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%); + &:where(.dark, .dark *) { + box-shadow: unset; + } +} + /* UTILITIES / STATES =================================================== */ /* Here we typically need a negative outline-offset because of the inner shadow on inputs */ @@ -130,7 +139,7 @@ @apply bg-white/85 backdrop-blur-sm; } -/* UTILITIES / STATES / DECORATION / MASK BACKGROUND +/* UTILITIES / DECORATION / MASK BACKGROUND =================================================== */ /* Notes... @@ -181,7 +190,7 @@ } } -/* UTILITIES / STATES / DECORATION / ARCHIECTURAL LINES +/* UTILITIES / DECORATION / ARCHIECTURAL LINES =================================================== */ /* Notes... @@ -283,7 +292,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 6388486c878..d15534d78c8 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 bg-white dark:bg-gray-900 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-t-gray-800; + } + 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-b-gray-800; + } + td:first-child, th:first-child { @apply ltr:rounded-bl-xl rtl:rounded-br-xl; @@ -65,17 +68,25 @@ } } - &:hover { - @apply bg-gray-50 dark:bg-white/2.5; - } - th { @apply py-2 ltr:pr-4 rtl:pl-4; } td { + @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-s-gray-800; + } + &:last-child { + @apply border-e border-e-gray-200 dark:border-e-gray-800; + } + } + + /* 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; } }