Restore layering

DestinyItemManager · Jan 26, 2025 · 621f4ae · 621f4ae
1 parent 6f88d3e
commit 621f4ae
Showing 1 changed file with 60 additions and 58 deletions.
diff --git a/src/app/store-stats/CharacterStats.m.scss b/src/app/store-stats/CharacterStats.m.scss
@@ -1,74 +1,76 @@
 @use '../variables' as *;
 
-:global(.stat) {
-  flex: 1;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-right: 2px;
-  line-height: 16px;
-  white-space: nowrap;
-  &:last-child {
-    margin-right: 0;
-  }
-  img {
-    height: 14px;
-    width: 14px;
-    margin-right: 2px;
-    opacity: 1;
-  }
-}
-
-/* INT/DIS/STR bars */
-:global(.stat-bars) {
-  width: 100%;
-  max-width: 230px;
-  display: flex;
-  justify-content: space-around;
-  margin-top: 8px;
-  opacity: 1;
-  flex-direction: column;
-
-  @include phone-portrait {
-    margin-left: auto;
-    margin-right: auto;
-    align-items: center;
-  }
-
-  > div {
+@layer base {
+  :global(.stat) {
     flex: 1;
     display: flex;
     flex-direction: row;
+    align-items: center;
+    margin-right: 2px;
+    line-height: 16px;
+    white-space: nowrap;
+    &:last-child {
+      margin-right: 0;
+    }
+    img {
+      height: 14px;
+      width: 14px;
+      margin-right: 2px;
+      opacity: 1;
+    }
   }
 
-  :global(.stat) {
-    flex: 0;
-    font-size: 11px;
-    color: var(--theme-header-characters-txt);
-    &.boostedValue {
-      color: $stat-modded;
-      font-weight: bold;
-      text-shadow: rgba(0, 0, 0, 0.5) 0 0 2px;
+  /* INT/DIS/STR bars */
+  :global(.stat-bars) {
+    width: 100%;
+    max-width: 230px;
+    display: flex;
+    justify-content: space-around;
+    margin-top: 8px;
+    opacity: 1;
+    flex-direction: column;
+
+    @include phone-portrait {
+      margin-left: auto;
+      margin-right: auto;
+      align-items: center;
     }
-    :global(.phone-portrait) & {
-      font-size: 12px;
+
+    > div {
+      flex: 1;
+      display: flex;
+      flex-direction: row;
+    }
+
+    :global(.stat) {
+      flex: 0;
+      font-size: 11px;
+      color: var(--theme-header-characters-txt);
+      &.boostedValue {
+        color: $stat-modded;
+        font-weight: bold;
+        text-shadow: rgba(0, 0, 0, 0.5) 0 0 2px;
+      }
+      :global(.phone-portrait) & {
+        font-size: 12px;
+      }
     }
   }
-}
 
-// D2 stats row. Used here and in the item feed.
-:global(.stat-row) {
-  display: flex;
-  flex-direction: row;
-  place-items: center left;
+  // D2 stats row. Used here and in the item feed.
+  :global(.stat-row) {
+    display: flex;
+    flex-direction: row;
+    place-items: center left;
 
-  @include phone-portrait {
-    width: 100%;
-    justify-content: center;
-  }
+    @include phone-portrait {
+      width: 100%;
+      justify-content: center;
+    }
 
-  &:nth-child(n + 2) {
-    justify-content: space-between;
+    &:nth-child(n + 2) {
+      justify-content: space-between;
+    }
   }
 }