rework frontend

resources/js/components/Wish.vue

@@ -29,6 +29,7 @@ function openWish() {
     <template v-else>
         <div class="large-container" @mouseover="hover = true" @mouseleave="hover = false">
             <div class="backdrop" v-if="hover">
+                <img :src="'/skonk/large/backdrop_filter.png'" :style="'width: 100%; height: 100%; filter: hue-rotate(' + wish.color + 'deg) saturate(0.8)'">
             </div>
             <img :src="'/skonk/large/' + wish.type + '.png'" class="large large-icon">
             <div class="large-text">
@@ -39,6 +40,10 @@ function openWish() {
                     {{ wish.title }}
                 </div>
             </div>
+            <div class="cursor" v-if="hover">
+                <img :src="'/skonk/cursor_corner.png'" class="cursor">
+                <img :src="'/skonk/cursor_corner.png'" class="cursor opposite-corner">
+            </div>
             
         </div>
     </template>
@@ -49,14 +54,29 @@ function openWish() {
 <style scoped>
 .backdrop {
     position: absolute;
-    background-color: red;
     width: 100%;
     height: 100%;
-    filter: opacity(10%);
+    filter: opacity(20%);
     z-index: -1;
 }
+img.cursor{
+    width: 40px;
+    height: 40px;
+}
+.opposite-corner {
+    rotate: 180deg;
+    right: 0;
+    bottom: 0;
+}
+.cursor {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 10;
+}
 .large-container {
     display: flex;
+    height: 100px;
     flex-direction: row;
     justify-content: left;
     margin: 10px;
@@ -72,6 +92,10 @@ function openWish() {
 }
 .large-icon {
     text-align: center;
+    display: block;
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
 
     margin: 10px;
 }