diff --git a/resources/css/components/assets.css b/resources/css/components/assets.css index f1b900472c..3f140c917e 100644 --- a/resources/css/components/assets.css +++ b/resources/css/components/assets.css @@ -117,7 +117,17 @@ ========================================================================== */ .asset-tile { - @apply relative flex min-w-0 cursor-pointer flex-col items-center justify-between rounded-lg outline outline-gray-300 dark:outline-gray-700 overflow-hidden; + @apply relative flex min-w-0 cursor-pointer flex-col items-center justify-between rounded-lg outline outline-gray-300 dark:outline-gray-700; + + > button { + /* Shift the focus outline offset slightly to account for the grey border. Target direct descendents so we don't target inner buttons like the three-dot menu. */ + --focus-outline-offset: 1px; + .selected & { + /* Shift the focous outline even more to account for the "selected" border */ + --focus-outline-offset: 1px; + --focus-outline-width: 3px; + } + } .selected & { @apply outline-3 outline-blue-500; diff --git a/resources/css/core/utilities.css b/resources/css/core/utilities.css index ed22063bb5..1825af0c69 100644 --- a/resources/css/core/utilities.css +++ b/resources/css/core/utilities.css @@ -318,7 +318,7 @@ =================================================== */ @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"); - --checkerboard-dark: 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='%231f2937'/%3E%3C/svg%3E"); + --checkerboard-dark: 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='%23000000'/%3E%3C/svg%3E"); position: relative; background-color: #fff;