[5.x] Fix UI bugs in Safari 18.2 (#11335)

Author: marcorieser

resources/css/elements/buttons.css

@@ -34,23 +34,27 @@ button {
 .btn, .btn-default {
     @apply text-gray-800 dark:text-dark-150 shadow-button;
     background: linear-gradient(180deg, #fff, #f9fafb);
+    background-clip: padding-box;
     border: 1px solid #D3DDE7;
     border-bottom: 1px solid #c4cdd6;
     box-shadow: inset 0 1px 0 0 #fff, 0 1px 0 0 rgba(0, 0, 0,.05), 0 2px 1px 0 theme(colors.gray.600 / .15), 0 0 0 0 transparent;
 
     .dark & {
         background: linear-gradient(180deg, theme(colors.dark.550), theme(colors.dark.600));
+        background-clip: padding-box;
         border-color: theme(colors.dark.700);
         box-shadow: inset 0 1px 0 0 theme(colors.dark.300), 0 1px 0 0 rgba(200, 200, 200,.05), 0 2px 1px 0 theme(colors.dark.900 / .15), 0 0 0 0 transparent;
     }
 
     &:hover:not(:disabled), &:active:not(:disabled) {
         @apply text-gray-800 dark:text-dark-150;
         background: linear-gradient(180deg, #f9fafb, #f4f6f8);
+        background-clip: padding-box;
         border-bottom: 1px solid #BFC7D0;
 
         .dark & {
             background: linear-gradient(180deg, theme(colors.dark.600), theme(colors.dark.700));
+            background-clip: padding-box;
             border-color: theme(colors.dark.800);
         }
     }
@@ -78,7 +82,7 @@ button {
 
 /*  Primary action button */
 .btn-primary {
-    @apply text-white bg-gradient-to-b from-blue-500 to-blue-600 dark:from-dark-blue-100 dark:to-dark-blue-150 border border-blue-700 dark:border-blue-900 border-b-blue-800 dark:border-b-dark-blue-200 !important;
+    @apply text-white bg-gradient-to-b from-blue-500 to-blue-600 dark:from-dark-blue-100 dark:to-dark-blue-150 bg-clip-padding border border-blue-700 dark:border-blue-900 border-b-blue-800 dark:border-b-dark-blue-200 !important;
     box-shadow: inset 0 1px 0 0 theme('colors.blue.400'), 0 1px 0 0 rgba(25,30,35,.05), 0 3px 2px -1px theme(colors.blue.900 / .15), 0 0 0 0 transparent;
 
     &:hover:not(:disabled), :active:not(:disabled) {
@@ -93,11 +97,11 @@ button {
 
 /*  Danger/delete button */
 .btn-danger {
-    @apply text-white bg-gradient-to-b from-red-500 to-red-600 border border-red-600 border-b-red-900;
+    @apply text-white bg-gradient-to-b from-red-500 to-red-600 bg-clip-padding border border-red-600 border-b-red-900;
     box-shadow: inset 0 1px 0 0 theme('colors.red.400'), 0 1px 0 0 rgba(0, 0, 0,.05), 0 3px 2px -1px theme(colors.red.900 / .15), 0 0 0 0 transparent;
 
     &:hover:not(:disabled), &:active:not(:disabled) {
-        @apply bg-gradient-to-b from-red-600 to-red-700 border border-red-700 border-b-red-900;
+        @apply bg-gradient-to-b from-red-600 to-red-700 bg-clip-padding border border-red-700 border-b-red-900;
     }
 
     &:disabled {
@@ -159,22 +163,26 @@ button {
 .btn-round {
     @apply rounded-full flex items-center text-center p-0;
     background: linear-gradient(180deg, #fff, #f9fafb);
+    background-clip: padding-box;
     border: 1px solid #c4cdd6;
     box-shadow: 0 1px 0 0 rgba(25,30,35,.05);
     height: 32px;
     width: 32px;
 
     .dark & {
         background: linear-gradient(180deg, theme(colors.dark.500), theme(colors.dark.550));
+        background-clip: padding-box;
         border-color: theme(colors.dark.400);
     }
 
     &:hover:not(:disabled), &:active:not(:disabled) {
         background: linear-gradient(180deg, #f9fafb, #f4f6f8);
+        background-clip: padding-box;
         border-color: #c4cdd5;
 
         .dark & {
             background: linear-gradient(180deg, theme(colors.dark.550), theme(colors.dark.600));
+            background-clip: padding-box;
             border-color: theme(colors.dark.500);
         }
     }

resources/css/elements/forms.css

@@ -93,13 +93,15 @@ input.input-text-minimal:read-only,
     .input-group-prepend, .input-group-append, .input-group-item {
         @apply rtl:rounded-r ltr:rounded-l px-2 border dark:border-dark-900 text-sm text-gray-800 dark:text-dark-150 select-none;
         background: linear-gradient(180deg, #fff, #f9fafb);
+        background-clip: padding-box;
         border: 1px solid #c4cdd6;
         box-shadow: 0 1px 0 0 rgba(25,30,35,.05);
         height: 2.375rem;
         line-height: 36px;
 
         .dark & {
             background: linear-gradient(180deg, theme(colors.dark.500), theme(colors.dark.600));
+            background-clip: padding-box;
             border-color: theme(colors.dark.900);
             box-shadow: 0 1px 0 0 rgba(0,0,0,.05);
         }
@@ -133,10 +135,12 @@ input.input-text-minimal:read-only,
     button.input-group-append:hover:not(:disabled),
     button.input-group-append:active:not(:disabled) {
         background: linear-gradient(180deg, #f9fafb, #f4f6f8);
+        background-clip: padding-box;
         border-color: #c4cdd5;
 
         .dark & {
             background: linear-gradient(180deg, theme(colors.dark.550), theme(colors.dark.600));
+            background-clip: padding-box;
             border-color: theme(colors.dark.900);
         }
     }
@@ -213,22 +217,26 @@ input.input-text-minimal:read-only,
         @apply select-none rounded leading-normal align-middle whitespace-nowrap appearance-none subpixel-antialiased;
 
         background: linear-gradient(180deg, #fff, #f9fafb);
+        background-clip: padding-box;
         border: 1px solid #c4cdd6;
         height: 2.375rem; /*  38px */
         letter-spacing: -0.01em;
         padding: .475rem 1.75rem .475rem .75rem ; [dir="rtl"] & { padding: .475rem .75rem .475rem 1.75rem ; }
 
         .dark & {
             background: linear-gradient(180deg, theme(colors.dark.500), theme(colors.dark.600));
+            background-clip: padding-box;
             border-color: theme(colors.dark.800);
         }
 
         &:hover:not(:disabled), &:active:not(:disabled) {
             background: linear-gradient(180deg, #f9fafb, #f4f6f8);
+            background-clip: padding-box;
             border-color: #c4cdd5;
 
             .dark & {
                 background: linear-gradient(180deg, theme(colors.dark.700), theme(colors.dark.750));
+                background-clip: padding-box;
                 border-color: theme(colors.dark.900);
             }
         }

resources/css/vendors/vue-select.css

@@ -104,7 +104,7 @@
 
 .vs__open-indicator {
 	@apply clickable;
-    @apply flex items-center rounded-e px-2 text-sm shrink-0 h-full border-e-0 dark:border-dark-800;
+    @apply flex items-center rounded-e px-2 text-sm shrink-0 h-full border-e-0 bg-clip-padding dark:border-dark-800;
 	/* height: 2.375rem; */
 }