From 864fd282f002e0fda04f5e995f24799730a7273f Mon Sep 17 00:00:00 2001
From: spectre365 <s.p.e.c.t.r.e.3.6.5.sakura@gmail.com>
Date: Wed, 22 Oct 2025 16:42:21 -0300
Subject: [PATCH] Interface modification for the default game page

---
 .../src/pages/game-details/game-details.scss  |   8 +-
 .../pages/game-details/hero/hero-panel.scss   | 124 +++++++++---------
 2 files changed, 68 insertions(+), 64 deletions(-)

diff --git a/src/renderer/src/pages/game-details/game-details.scss b/src/renderer/src/pages/game-details/game-details.scss
index 38319b0a..14b583ee 100644
--- a/src/renderer/src/pages/game-details/game-details.scss
+++ b/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;
diff --git a/src/renderer/src/pages/game-details/hero/hero-panel.scss b/src/renderer/src/pages/game-details/hero/hero-panel.scss
index 8a3611ec..9fbdf453 100644
--- a/src/renderer/src/pages/game-details/hero/hero-panel.scss
+++ b/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;
+      }
     }
   }
 }
-}
\ No newline at end of file