From 29f05b0c3cf54038f52dbcce4c22c6447fa6e546 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Sun, 9 Nov 2025 18:23:11 +0200
Subject: [PATCH] fix: deleted duplicate css class

---
 .../profile-content/profile-content.scss      | 478 +++++++++---------
 1 file changed, 238 insertions(+), 240 deletions(-)

diff --git a/src/renderer/src/pages/profile/profile-content/profile-content.scss b/src/renderer/src/pages/profile/profile-content/profile-content.scss
index 5a80bfbe..0c8ea559 100644
--- a/src/renderer/src/pages/profile/profile-content/profile-content.scss
+++ b/src/renderer/src/pages/profile/profile-content/profile-content.scss
@@ -206,6 +206,244 @@
       display: block;
     }
   }
+
+  &__images-section {
+    margin-bottom: calc(globals.$spacing-unit * 3);
+  }
+
+  &__images-grid {
+    display: grid;
+    gap: calc(globals.$spacing-unit * 2);
+    padding-bottom: calc(globals.$spacing-unit);
+    grid-template-columns: repeat(2, 1fr);
+
+    @container #{globals.$app-container} (min-width: 1000px) {
+      grid-template-columns: repeat(4, 1fr);
+    }
+
+    @container #{globals.$app-container} (min-width: 1300px) {
+      grid-template-columns: repeat(5, 1fr);
+    }
+
+    @container #{globals.$app-container} (min-width: 2000px) {
+      grid-template-columns: repeat(6, 1fr);
+    }
+
+    @container #{globals.$app-container} (min-width: 2600px) {
+      grid-template-columns: repeat(8, 1fr);
+    }
+
+    @container #{globals.$app-container} (min-width: 3000px) {
+      grid-template-columns: repeat(12, 1fr);
+    }
+  }
+
+  &__image-card {
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    overflow: hidden;
+    transition: all ease 0.2s;
+    position: relative;
+    container-type: inline-size;
+
+    &:hover {
+      transform: translateY(-4px);
+      background: rgba(0, 0, 0, 0.4);
+      border-color: rgba(255, 255, 255, 0.2);
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+    }
+
+    @container (max-width: 240px) {
+      .profile-content__image-achievement-icon {
+        width: 20px;
+        height: 20px;
+      }
+
+      .profile-content__image-achievement-name {
+        font-size: 13px;
+      }
+
+      .profile-content__image-game-title {
+        font-size: 11px;
+      }
+    }
+
+    @container (max-width: 280px) {
+      .profile-content__image-card-content {
+        gap: calc(globals.$spacing-unit * 0.75);
+      }
+    }
+  }
+
+  &__image-card-header {
+    width: 100%;
+    aspect-ratio: 16/9;
+    overflow: hidden;
+    position: relative;
+  }
+
+  &__image-achievement-image-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .profile-content__image-button {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+
+    &:hover .profile-content__image-achievement-image-overlay {
+      opacity: 1;
+    }
+  }
+
+  &__image-achievement-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.2s ease;
+    display: block;
+  }
+
+  &__image-achievement-image-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    pointer-events: none;
+
+    svg {
+      color: white;
+    }
+  }
+
+  // Show overlay on keyboard focus for accessibility
+  &__image-button:focus-visible + &__image-achievement-image-overlay {
+    opacity: 1;
+  }
+
+  &__image-card-content {
+    padding: 16px;
+    background: rgba(0, 0, 0, 0.8);
+    backdrop-filter: blur(10px);
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit);
+    overflow: hidden;
+  }
+
+  &__image-card-gradient-overlay {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 60px;
+    background: linear-gradient(
+      to top,
+      rgba(27, 59, 52, 0.6) 1%,
+      transparent 100%
+    );
+    pointer-events: none;
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+  }
+
+  &__image-achievement-info {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit * 1);
+    position: relative;
+    z-index: 2;
+  }
+
+  &__image-achievement-icon {
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    flex-shrink: 0;
+  }
+
+  &__image-achievement-name {
+    font-size: 14px;
+    font-weight: 600;
+    color: white;
+    line-height: 1.3;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__image-game-info {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: calc(globals.$spacing-unit * 1);
+    position: relative;
+    z-index: 2;
+    min-width: 0;
+  }
+
+  &__image-game-left {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit * 0.75);
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__image-game-icon {
+    width: 16px;
+    height: 16px;
+    border-radius: 2px;
+    flex-shrink: 0;
+  }
+
+  &__image-game-title {
+    font-size: 12px;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.7);
+    line-height: 1.2;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &__image-item {
+    flex-shrink: 0;
+    position: relative;
+    border-radius: 8px;
+    overflow: hidden;
+    transition: transform ease 0.2s;
+
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+
+  &__image {
+    width: 64px;
+    height: 64px;
+    object-fit: cover;
+    border-radius: 8px;
+    border: 2px solid rgba(255, 255, 255, 0.1);
+    transition: border-color ease 0.2s;
+
+    &:hover {
+      border-color: rgba(255, 255, 255, 0.3);
+    }
+  }
 }
 
 // Reviews minimal styles
@@ -443,243 +681,3 @@
     color: #ff7961;
   }
 }
-
-.profile-content {
-  &__images-section {
-    margin-bottom: calc(globals.$spacing-unit * 3);
-  }
-
-  &__images-grid {
-    display: grid;
-    gap: calc(globals.$spacing-unit * 2);
-    padding-bottom: calc(globals.$spacing-unit);
-    grid-template-columns: repeat(2, 1fr);
-
-    @container #{globals.$app-container} (min-width: 1000px) {
-      grid-template-columns: repeat(4, 1fr);
-    }
-
-    @container #{globals.$app-container} (min-width: 1300px) {
-      grid-template-columns: repeat(5, 1fr);
-    }
-
-    @container #{globals.$app-container} (min-width: 2000px) {
-      grid-template-columns: repeat(6, 1fr);
-    }
-
-    @container #{globals.$app-container} (min-width: 2600px) {
-      grid-template-columns: repeat(8, 1fr);
-    }
-
-    @container #{globals.$app-container} (min-width: 3000px) {
-      grid-template-columns: repeat(12, 1fr);
-    }
-  }
-
-  &__image-card {
-    background: rgba(0, 0, 0, 0.3);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 12px;
-    overflow: hidden;
-    transition: all ease 0.2s;
-    position: relative;
-    container-type: inline-size;
-
-    &:hover {
-      transform: translateY(-4px);
-      background: rgba(0, 0, 0, 0.4);
-      border-color: rgba(255, 255, 255, 0.2);
-      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
-    }
-
-    @container (max-width: 240px) {
-      .profile-content__image-achievement-icon {
-        width: 20px;
-        height: 20px;
-      }
-
-      .profile-content__image-achievement-name {
-        font-size: 13px;
-      }
-
-      .profile-content__image-game-title {
-        font-size: 11px;
-      }
-    }
-
-    @container (max-width: 280px) {
-      .profile-content__image-card-content {
-        gap: calc(globals.$spacing-unit * 0.75);
-      }
-    }
-  }
-
-  &__image-card-header {
-    width: 100%;
-    aspect-ratio: 16/9;
-    overflow: hidden;
-    position: relative;
-  }
-
-  &__image-achievement-image-wrapper {
-    position: relative;
-    width: 100%;
-    height: 100%;
-
-    .profile-content__image-button {
-      width: 100%;
-      height: 100%;
-      display: block;
-    }
-
-    &:hover .profile-content__image-achievement-image-overlay {
-      opacity: 1;
-    }
-  }
-
-  &__image-achievement-image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    transition: transform 0.2s ease;
-    display: block;
-  }
-
-  &__image-achievement-image-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.6);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    transition: opacity 0.2s ease;
-    pointer-events: none;
-
-    svg {
-      color: white;
-    }
-  }
-
-  // Show overlay on keyboard focus for accessibility
-  &__image-button:focus-visible + &__image-achievement-image-overlay {
-    opacity: 1;
-  }
-
-  &__image-card-content {
-    padding: 16px;
-    background: rgba(0, 0, 0, 0.8);
-    backdrop-filter: blur(10px);
-    display: flex;
-    flex-direction: column;
-    gap: calc(globals.$spacing-unit);
-    overflow: hidden;
-  }
-
-  &__image-card-gradient-overlay {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 60px;
-    background: linear-gradient(
-      to top,
-      rgba(27, 59, 52, 0.6) 1%,
-      transparent 100%
-    );
-    pointer-events: none;
-    border-bottom-left-radius: 12px;
-    border-bottom-right-radius: 12px;
-  }
-
-  &__image-achievement-info {
-    display: flex;
-    align-items: center;
-    gap: calc(globals.$spacing-unit * 1);
-    position: relative;
-    z-index: 2;
-  }
-
-  &__image-achievement-icon {
-    width: 24px;
-    height: 24px;
-    border-radius: 4px;
-    flex-shrink: 0;
-  }
-
-  &__image-achievement-name {
-    font-size: 14px;
-    font-weight: 600;
-    color: white;
-    line-height: 1.3;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    display: block;
-    flex: 1;
-    min-width: 0;
-  }
-
-  &__image-game-info {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: calc(globals.$spacing-unit * 1);
-    position: relative;
-    z-index: 2;
-    min-width: 0;
-  }
-
-  &__image-game-left {
-    display: flex;
-    align-items: center;
-    gap: calc(globals.$spacing-unit * 0.75);
-    flex: 1;
-    min-width: 0;
-  }
-
-  &__image-game-icon {
-    width: 16px;
-    height: 16px;
-    border-radius: 2px;
-    flex-shrink: 0;
-  }
-
-  &__image-game-title {
-    font-size: 12px;
-    font-weight: 500;
-    color: rgba(255, 255, 255, 0.7);
-    line-height: 1.2;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  &__image-item {
-    flex-shrink: 0;
-    position: relative;
-    border-radius: 8px;
-    overflow: hidden;
-    transition: transform ease 0.2s;
-
-    &:hover {
-      transform: scale(1.05);
-    }
-  }
-
-  &__image {
-    width: 64px;
-    height: 64px;
-    object-fit: cover;
-    border-radius: 8px;
-    border: 2px solid rgba(255, 255, 255, 0.1);
-    transition: border-color ease 0.2s;
-
-    &:hover {
-      border-color: rgba(255, 255, 255, 0.3);
-    }
-  }
-}