styling of locked games

src/components/AssetsManagement/AssetPreview.vue

@@ -1,4 +1,5 @@
 <template>
+    <div class="asset-preview">
         <div v-show="forRendering">
             <div class="position-relative">
                 <div ref="target"></div>
@@ -18,6 +19,7 @@
             :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>
 </template>
 
 <script>

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%;