Added UI of custom marker actions

src/assets/scss/_buttons.scss

@@ -7,7 +7,6 @@
     font-weight: 500;
     border: 1px solid transparent;
     border-radius: .2rem;
-    box-shadow: rgba(0, 0, 0, 0.15) 0 .2rem .3rem;
     cursor: pointer;
     transition-property: color, background-color, border-color;
     transition-duration: .2s;
@@ -17,7 +16,7 @@
         cursor: not-allowed;
     }
 
-    &-secondary {
+    &.btn-secondary {
         &:not(:disabled) {
             background-color: var(--slate-200);
 
@@ -34,7 +33,19 @@
         }
     }
 
-    &-danger {
+    &.btn-info {
+        &:not(:disabled) {
+            background-color: var(--slate-200);
+
+            &:hover,
+            &:focus-visible {
+                color: var(--white);
+                background-color: var(--blue-500);
+            }
+        }
+    }
+
+    &.btn-danger {
         &:not(:disabled) {
             background-color: var(--slate-200);
 
@@ -46,12 +57,21 @@
         }
     }
 
-    &-icon {
+    &.btn-icon {
         width: 1.75rem;
         padding: 0;
         display: grid;
         place-items: center;
         aspect-ratio: 1;
         border-radius: 50%;
+
+        &.btn-sm {
+            font-size: .85em;
+            width: 1.5rem;
+        }
+    }
+
+    &.btn-shadow {
+        box-shadow: rgba(0, 0, 0, 0.15) 0 .2rem .3rem;
     }
 }

src/components/maps/overlay/MarkerCreator.vue

@@ -204,7 +204,7 @@ function hideMarkerModal() {
             </form>
 
             <div class="modal-actions">
-                <button class="btn btn-danger btn-icon" @click="hideMarkerModal">
+                <button class="btn btn-danger btn-icon btn-shadow" @click="hideMarkerModal">
                     <i class="ph-light ph-x"></i>
                 </button>
             </div>

src/components/maps/overlay/SearchMarkers.vue

@@ -210,14 +210,22 @@ onMounted(() => {
 
                         <div class="desc" v-html="m.description"></div>
 
-                        <div class="icon" v-if="m.group === 'quests'">
+                        <div class="icon">
-                            <i class="ph-fill ph-flag-banner"></i>
+                            <i v-if="m.group === 'quests'" class="ph-fill ph-flag-banner"></i>
-                        </div>
+                            <i v-else-if="m.group === 'landmarks'" class="ph-fill ph-castle-turret"></i>
-
-                        <div class="icon" v-else-if="m.group === 'landmarks'">
-                            <i class="ph-fill ph-castle-turret"></i>
                         </div>
                     </button>
+
+                    <!-- Custom marker actions -->
+                    <div class="search-item-actions" v-if="m.group === 'custom'">
+                        <!-- <button class="btn btn-info btn-icon btn-sm">
+                            <i class="ph-light ph-pencil-simple-line"></i>
+                        </button> -->
+
+                        <button class="btn btn-danger btn-icon btn-sm">
+                            <i class="ph-light ph-trash"></i>
+                        </button>
+                    </div>
                 </li>
             </ul>
         </div>
@@ -366,44 +374,8 @@ onMounted(() => {
                 margin-bottom: .33rem;
             }
 
-            .search-item {
+            li {
                 position: relative;
-                cursor: pointer;
-                padding: .4rem .25em;
-                padding-right: 2.75rem;
-                width: 100%;
-                outline-offset: -1px;
-
-                .title,
-                .desc {
-                    display: block;
-                    font-size: .85em;
-                }
-
-                .title {
-                    font-weight: 500;
-                    text-underline-offset: 2px;
-                }
-                .desc {
-                    color: var(--slate-500);
-
-                    :deep(a) {
-                        text-underline-offset: 2px;
-                        text-decoration: underline;
-
-                        &:hover {
-                            color: var(--green-500);
-                        }
-                    }
-                }
-
-                .icon {
-                    position: absolute;
-                    top: 50%;
-                    transform: translateY(-50%);
-                    right: .75rem;
-                    color: var(--slate-400);
-                }
 
                 &:hover:not(:has(a:hover)) {
                     background-color: var(--slate-100);
@@ -413,29 +385,98 @@ onMounted(() => {
                     }
                 }
 
-                &:focus-visible {
+                .search-item {
-                    outline: 1px dotted var(--slate-500);
+                    position: relative;
-                    outline: 4px auto var(--slate-900);
+                    cursor: pointer;
+                    padding: .4rem .25em;
+                    padding-right: 2.75rem;
+                    width: 100%;
+                    outline-offset: -1px;
+
+                    .title,
+                    .desc {
+                        display: block;
+                        font-size: .85em;
+                    }
 
                     .title {
-                        text-decoration: underline;
+                        font-weight: 500;
+                        text-underline-offset: 2px;
+                    }
+                    .desc {
+                        color: var(--slate-500);
+
+                        :deep(a) {
+                            text-underline-offset: 2px;
+                            text-decoration: underline;
+
+                            &:hover {
+                                color: var(--green-500);
+                            }
+                        }
+                    }
+
+                    .icon {
+                        position: absolute;
+                        top: 50%;
+                        transform: translateY(-50%);
+                        right: .75rem;
+                        color: var(--slate-400);
+                    }
+
+                    &:focus-visible {
+                        outline: 1px dotted var(--slate-500);
+                        outline: 4px auto var(--slate-900);
+
+                        .title {
+                            text-decoration: underline;
+                        }
+                    }
+
+                    /**
+                    * Rules for specific groups (capitals, cities, etc...)
+                    */
+                    &.group-capitals {
+                        .title {
+                            font-weight: 600;
+                        }
+                    }
+
+                    &.group-quests {
+                        &:hover:not(:has(a:hover)) {
+                            .icon {
+                                color: var(--red-500);
+                            }
+                        }
                     }
                 }
 
                 /**
-                * Rules for specific groups (capitals, cities, etc...)
+                * Custom markers actions
                 */
-                &.group-capitals {
+                .search-item-actions {
-                    .title {
+                    position: absolute;
-                        font-weight: 600;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    right: .25em;
+                    transition-property: visibility, opacity;
+                    transition-duration: .2s;
+                    transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+                }
+
+                &:hover {
+                    .search-item-actions {
+                        visibility: visible;
+                        opacity: 1;
+                        pointer-events: all;
                     }
                 }
 
-                &.group-quests {
+                &:not(:hover) {
-                    &:hover:not(:has(a:hover)) {
+                    .search-item-actions {
-                        .icon {
+                        visibility: hidden;
-                            color: var(--red-500);
+                        opacity: 0;
-                        }
+                        pointer-events: none;
                     }
                 }
             }