fix: #478 improve touch interaction styles

ThaUnknown · Jul 11, 2024 · 806633f · 806633f
1 parent 76f3140
commit 806633f
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 1 deletion.
diff --git a/common/components/cards/SmallCard.svelte b/common/components/cards/SmallCard.svelte
@@ -61,6 +61,11 @@
   .first-check:first-child :global(.absolute-container) {
     left: -48% !important
   }
+  .first-check:hover {
+    z-index: 30;
+    /* fixes transform scaling on click causing z-index issues */
+  }
+
   .title {
     display: -webkit-box;
     -webkit-line-clamp: 2;

diff --git a/common/css.css b/common/css.css
@@ -44,6 +44,15 @@
   }
 }
 
+* {
+  -webkit-tap-highlight-color: transparent;
+}
+
+a[href]:active, button:not([disabled]):active, fieldset:not([disabled]):active, input:not([disabled]):active, optgroup:not([disabled]):active, option:not([disabled]):active, select:not([disabled]):active, textarea:not([disabled]):active, details:active, [tabindex]:not([tabindex="-1"]):active, [contenteditable]:active, [controls]:active {
+  transition: transform 0.1s ease-in-out;
+  transform: scale(0.95);
+}
+
 .btn-secondary {
   --dm-button-secondary-bg-color: #fff !important;
   --dm-button-secondary-bg-color-hover: #ddd !important;

diff --git a/web/src/lib/components/PreviewCard.svelte b/web/src/lib/components/PreviewCard.svelte
@@ -48,7 +48,7 @@
   }
 </script>
 
-<div class='position-absolute w-350 h-400 absolute-container top-0 bottom-0 m-auto bg-dark-light z-30 rounded overflow-hidden pointer'>
+<div class='position-absolute w-350 h-400 absolute-container top-0 bottom-0 m-auto bg-dark-light rounded overflow-hidden pointer'>
   <div class='banner position-relative bg-black'>
     <img src={media.bannerImage || ' '} alt='banner' class='img-cover w-full h-full' loading='lazy' />
     {#if media.trailer?.id}