Interface modification for the default game page

src/renderer/src/pages/game-details/game-details.scss

@@ -584,13 +584,17 @@ $hero-height: 300px;
     z-index: 0;
 
     &::after {
-      content: '';
+      content: "";
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
-      background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 60%, transparent 100%);
+      background: linear-gradient(
+        0deg,
+        rgba(0, 0, 0, 0.3) 60%,
+        transparent 100%
+      );
       z-index: 1;
       pointer-events: none;
       border-radius: inherit;

src/renderer/src/pages/game-details/hero/hero-panel.scss

@@ -4,75 +4,75 @@
   padding: 0px 12px 12px;
   margin: 0;
 
-.hero-panel {
-  width: 100%;
-  height: 72px;
-  min-height: 72px;
-  padding: calc(globals.$spacing-unit * 2) calc(globals.$spacing-unit * 3);
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border: solid 1px rgba(255, 255, 255, 0.15);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  transition: all ease 0.2s;
-  border-bottom: solid 1px globals.$border-color;
-  overflow: hidden;
-  top: 0;
-  z-index: 2;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-  
-  &--stuck {
-    background: rgba(0, 0, 0, 0.7);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.8);
-  }
-
-  &__content {
-    display: flex;
-    flex-direction: column;
-    gap: globals.$spacing-unit;
-  }
-
-  &__actions {
-    display: flex;
-    gap: globals.$spacing-unit;
-  }
-
-  &__download-details {
-    gap: globals.$spacing-unit;
-    display: flex;
-    color: globals.$body-color;
-    align-items: center;
-  }
-
-  &__downloads-link {
-    color: globals.$body-color;
-    text-decoration: underline;
-  }
-
-  &__progress-bar {
-    position: absolute;
-    bottom: 0;
-    left: 0;
+  .hero-panel {
     width: 100%;
-    height: 3px;
+    height: 72px;
+    min-height: 72px;
+    padding: calc(globals.$spacing-unit * 2) calc(globals.$spacing-unit * 3);
+    background: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: solid 1px rgba(255, 255, 255, 0.15);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     transition: all ease 0.2s;
+    border-bottom: solid 1px globals.$border-color;
+    overflow: hidden;
+    top: 0;
+    z-index: 2;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
 
-    &::-webkit-progress-bar {
-      background-color: transparent;
+    &--stuck {
+      background: rgba(0, 0, 0, 0.7);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+      box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.8);
     }
 
-    &::-webkit-progress-value {
-      background-color: globals.$muted-color;
+    &__content {
+      display: flex;
+      flex-direction: column;
+      gap: globals.$spacing-unit;
     }
 
-    &--disabled {
-      opacity: globals.$disabled-opacity;
+    &__actions {
+      display: flex;
+      gap: globals.$spacing-unit;
+    }
+
+    &__download-details {
+      gap: globals.$spacing-unit;
+      display: flex;
+      color: globals.$body-color;
+      align-items: center;
+    }
+
+    &__downloads-link {
+      color: globals.$body-color;
+      text-decoration: underline;
+    }
+
+    &__progress-bar {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 3px;
+      transition: all ease 0.2s;
+
+      &::-webkit-progress-bar {
+        background-color: transparent;
+      }
+
+      &::-webkit-progress-value {
+        background-color: globals.$muted-color;
+      }
+
+      &--disabled {
+        opacity: globals.$disabled-opacity;
+      }
     }
   }
 }
-}