From 2f0d33d4312c781a220f06e55ce7f72a212fd911 Mon Sep 17 00:00:00 2001
From: goynov <goynov@gmail.com>
Date: Wed, 15 Apr 2026 21:34:57 +0300
Subject: [PATCH] styling of locked games

---
 .../AssetsManagement/AssetPreview.vue         | 36 ++++++++++---------
 src/styles/style.scss                         | 10 ++++--
 2 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/src/components/AssetsManagement/AssetPreview.vue b/src/components/AssetsManagement/AssetPreview.vue
index 561c8d5..052cacb 100644
--- a/src/components/AssetsManagement/AssetPreview.vue
+++ b/src/components/AssetsManagement/AssetPreview.vue
@@ -1,23 +1,25 @@
 <template>
-    <div v-show="forRendering">
-        <div class="position-relative">
-            <div ref="target"></div>
-            <div class="renderer-gizmo"></div>
+    <div class="asset-preview">
+        <div v-show="forRendering">
+            <div class="position-relative">
+                <div ref="target"></div>
+                <div class="renderer-gizmo"></div>
+            </div>
+            <v-slide-group show-arrows>
+                <v-slide-group-item v-for="(a, i) in animations" :key="i" v-slot="{ isSelected }">
+                    <v-btn :color="isSelected ? 'primary' : undefined" class="ma-2"
+                        :prepend-icon="'mdi-' + (a.playing ? 'stop' : 'play')" rounded @click="toggleAnimation(a)">
+                        {{ a.name }}
+                    </v-btn>
+                </v-slide-group-item>
+            </v-slide-group>
         </div>
-        <v-slide-group show-arrows>
-            <v-slide-group-item v-for="(a, i) in animations" :key="i" v-slot="{ isSelected }">
-                <v-btn :color="isSelected ? 'primary' : undefined" class="ma-2"
-                    :prepend-icon="'mdi-' + (a.playing ? 'stop' : 'play')" rounded @click="toggleAnimation(a)">
-                    {{ a.name }}
-                </v-btn>
-            </v-slide-group-item>
-        </v-slide-group>
+        <img v-if="obj && !forRendering && obj.type == 'object2d'" :src="`/asset/default/${obj.asset?.name}`" />
+        <video v-if="obj && !forRendering && obj.type == 'video'" controls :autoplay="autoplay ? 'autoplay' : ''" 
+            :src="`/asset/default/${obj.asset?.name}`"></video>
+        <audio v-if="obj && !forRendering && obj.type == 'audio'" controls :autoplay="autoplay ? 'autoplay' : ''" 
+            :src="`/asset/default/${obj.asset?.name}`" class="d-block w-100"></audio>
     </div>
-    <img v-if="obj && !forRendering && obj.type == 'object2d'" :src="`/asset/default/${obj.asset?.name}`" />
-    <video v-if="obj && !forRendering && obj.type == 'video'" controls :autoplay="autoplay ? 'autoplay' : ''" 
-        :src="`/asset/default/${obj.asset?.name}`"></video>
-    <audio v-if="obj && !forRendering && obj.type == 'audio'" controls :autoplay="autoplay ? 'autoplay' : ''" 
-        :src="`/asset/default/${obj.asset?.name}`" class="d-block w-100"></audio>
 </template>
 
 <script>
diff --git a/src/styles/style.scss b/src/styles/style.scss
index b1725b3..f744efa 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -84,16 +84,22 @@ video{
     }
 }
 
+.asset-preview {
+    img {
+        max-width: 100%;
+    }
+}
+
 .locked {
     pointer-events: none;
-    opacity: 0.5;
     position: relative;
     &::after{
+        background-color: rgba(0,0,0,0.22);
         content:"\F033E";
         text-align: center;
         font-family: "Material Design Icons";
         font-size: 111px;
-        opacity: 0.5;
+        color: rgba(255, 255, 255, 0.33);
         position: absolute;
         width: 100%;
         height: 100%;