From 96b75abc7d60c795dba66de7052d4cac803a21d6 Mon Sep 17 00:00:00 2001
From: Spedon <RealSped0n@outlook.com>
Date: Thu, 16 Mar 2023 00:08:16 +0800
Subject: [PATCH] optimize coding style of image.scss

---
 assets/css/_partial/_image.scss | 34 +++------------------------------
 1 file changed, 3 insertions(+), 31 deletions(-)

diff --git a/assets/css/_partial/_image.scss b/assets/css/_partial/_image.scss
index fc65069..f7286d3 100644
--- a/assets/css/_partial/_image.scss
+++ b/assets/css/_partial/_image.scss
@@ -3,40 +3,26 @@
   position: absolute;
   width: auto;
   max-width: 100vw;
-  transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%, 0);
   opacity: 1;
   display: flex;
   align-items: center;
-  // prevent webkit from partly repainting the frame
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.05);
+  will-change: transform;
   
   img {
     max-height: 55vmin;
     max-width: 100vw;
     object-fit: contain;
     width: auto;
-    // prevent webkit from partly repainting the frame
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.05);
   }
   
   &[data-status='t0'] {
     transition: all 0.5s ease-in-out 1.5s;
     max-height: calc(100vh - var(--footer-height));
-    width: auto;
-    max-width: 100vw;
-    display: flex;
-    align-items: center;
-    // prevent webkit from partly repainting the frame
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.05);
   
     img {
       transition: all 0.5s ease-in-out 2s;
       max-height: calc(100vh - var(--footer-height));
-      width: auto;
-      max-width: 100vw;
-      object-fit: contain;
-      // prevent webkit from partly repainting the frame
-      box-shadow: 0 0 2px rgba(0, 0, 0, 0.05);
     }
   }
   
@@ -61,26 +47,12 @@
   }
   
   &[data-status='r0'] {
-    transition: all 0.5s ease-in-out 1s;
     max-height: 55vmin;
-    position: absolute;
-    transform: translate(-50%, -50%);
-    opacity: 1;
-    width: auto;
-    max-width: 100vw;
-    display: flex;
-    align-items: center;
-    // prevent webkit from partly repainting the frame
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.05);
+    transition: all 0.5s ease-in-out 1s;
   
     img {
       transition: all 1s ease-in-out 0s;
       max-height: 55vmin;
-      max-width: 100vw;
-      object-fit: contain;
-      width: auto;
-      // prevent webkit from partly repainting the frame
-      box-shadow: 0 0 2px rgba(0, 0, 0, 0.05);
     }
   }