🐛 Fixing a bug

public/css/app.css

@@ -691,6 +691,12 @@ select {
 .z-\[1\] {
   z-index: 1;
 }
+.z-\[99\] {
+  z-index: 99;
+}
+.z-\[999\] {
+  z-index: 999;
+}
 .m-2 {
   margin: 0.5rem;
 }
@@ -772,6 +778,9 @@ select {
 .block {
   display: block;
 }
+.inline-block {
+  display: inline-block;
+}
 .flex {
   display: flex;
 }
@@ -820,6 +829,15 @@ select {
 .h-7 {
   height: 1.75rem;
 }
+.h-\[80\%\] {
+  height: 80%;
+}
+.h-\[50\%\] {
+  height: 50%;
+}
+.h-\[70\%\] {
+  height: 70%;
+}
 .min-h-\[150px\] {
   min-height: 150px;
 }
@@ -865,6 +883,18 @@ select {
 .w-\[90\%\] {
   width: 90%;
 }
+.w-1\.5 {
+  width: 0.375rem;
+}
+.w-1 {
+  width: 0.25rem;
+}
+.w-\[50\%\] {
+  width: 50%;
+}
+.w-\[70\%\] {
+  width: 70%;
+}
 .max-w-xl {
   max-width: 36rem;
 }
@@ -1036,6 +1066,9 @@ select {
 .overflow-y-auto {
   overflow-y: auto;
 }
+.overflow-x-scroll {
+  overflow-x: scroll;
+}
 .overflow-y-scroll {
   overflow-y: scroll;
 }
@@ -1205,6 +1238,9 @@ select {
 .p-3 {
   padding: 0.75rem;
 }
+.p-1 {
+  padding: 0.25rem;
+}
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -1314,6 +1350,13 @@ select {
   font-size: 2.25rem;
   line-height: 2.5rem;
 }
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+.text-\[100\%\] {
+  font-size: 100%;
+}
 .font-medium {
   font-weight: 500;
 }
@@ -1641,6 +1684,9 @@ select {
 .group:hover .group-hover\:block {
   display: block;
 }
+.group:hover .group-hover\:flex {
+  display: flex;
+}
 .group:hover .group-hover\:hidden {
   display: none;
 }
@@ -1720,6 +1766,21 @@ select {
     padding-top: 0px;
   }
 
+  .sm\:text-lg {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+
+  .sm\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
+  .sm\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+
   .sm\:shadow-none {
     --tw-shadow: 0 0 #0000;
     --tw-shadow-colored: 0 0 #0000;

public/css/common.css

@@ -279,12 +279,9 @@ progress::-webkit-progress-value {
 #photos-grid a.ds-selected .photo-selector {
   display: block;
 }
-#photos-grid a:hover.ds-selected .photo-selector,
-#photos-grid a.ds-selected.ds-selected .photo-selector {
+#photos-grid a:hover.ds-selected .photo-selector i,
+#photos-grid a.ds-selected.ds-selected .photo-selector i {
   border-color: white;
-}
-#photos-grid a:hover.ds-selected .photo-selector > i,
-#photos-grid a.ds-selected.ds-selected .photo-selector > i {
   color: #0061ff;
 }
 

resources/css/common.less

@@ -83,9 +83,8 @@ progress::-webkit-progress-value {
 
         &.ds-selected {
             .photo-selector {
-                border-color: white;
-
-                & > i {
+                i {
+                    border-color: white;
                     color: #0061ff;
                 }
             }

resources/views/images.blade.php

@@ -65,8 +65,10 @@
 
     <script type="text/html" id="photos-item-tpl">
         <a href="javascript:void(0)" class="photos-item relative cursor-default rounded outline outline-2 outline-offset-2 outline-transparent">
-            <div class="photo-selector absolute z-[1] top-1 right-1 rounded-full overflow-hidden text-white text-lg bg-white border border-gray-500 cursor-pointer sm:hidden group-hover:block">
-                <i class="fas fa-check-circle block"></i>
+            <div class="photo-selector absolute z-[2] top-0 right-0 overflow-hidden cursor-pointer sm:hidden group-hover:block">
+                <div class="p-1 text-xl sm:text-2xl">
+                    <i class="fas fa-check-circle block rounded-full bg-white text-white border border-gray-500"></i>
+                </div>
             </div>
             <div class="photo-mask absolute left-0 right-0 bottom-0 h-20 z-[1] bg-gradient-to-t from-black" onclick="$(this).siblings('img').trigger('click')">
                 <div class="absolute left-2 bottom-2 text-white z-[2] w-[90%]">