Switched to overlay pill for new game indicator

Author: ebkr

src/components/game-selection/GameSelectionCard.vue

@@ -9,6 +9,9 @@
                     <div class="game-card__placeholder">{{ game.displayName }}</div>
                 </template>
             </div>
+            <div class="game-card__new-badge" v-if="isNew">
+                <i class="fas fa-bolt game-card__new-badge-icon"></i> New
+            </div>
             <div class="game-card__overlay">
                 <div class="game-card__overlay-spacer"></div>
                 <div class="game-card__overlay-body">
@@ -21,10 +24,7 @@
             </div>
         </div>
         <div class="game-card-wrapper__footer">
-            <p>
-                <span class="tag" v-if="isNew">New</span>
-                {{ game.displayName }}
-            </p>
+            <p>{{ game.displayName }}</p>
             <a :id="`${game.settingsIdentifier}-star`" href="#" @click.prevent="emit('toggle-favourite', game)">
                 <i class="fas fa-star text-warning" v-if="isFavourited"></i>
                 <i class="far fa-star" v-else></i>
@@ -100,6 +100,29 @@ function getImageHref(image: string) {
     background-color: var(--border-secondary, #c9d3ee);
 }
 
+.game-card__new-badge {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.2rem 0.55rem;
+    background-color: var(--game-card-new-badge-background);
+    border: 1px solid var(--game-card-new-badge-border);
+    border-radius: 5px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--v2-inactive-tag-color);
+    backdrop-filter: blur(4px);
+    pointer-events: none;
+}
+
+.game-card__new-badge-icon {
+    color: var(--v2-link-text-color);
+    font-size: 0.65rem;
+}
+
 .game-card__overlay {
     position: absolute;
     inset: 0;

src/css/scheme/dark.scss

@@ -75,6 +75,9 @@
     --ecosystem-update-error-text: #ffc5cf;
     --ecosystem-update-error-background: #4a1f2a;
     --ecosystem-update-error-border: #6d3240;
+
+    --game-card-new-badge-background: rgba(18, 22, 45, 0.85);
+    --game-card-new-badge-border: rgba(100, 140, 255, 0.3);
 }
 
 html.html--dark {

src/css/v2/_initial.scss

@@ -28,6 +28,9 @@
     --v2-inactive-menu-item-color: #222;
 
     --input-placeholder-color: #b5b5b5;
+
+    --game-card-new-badge-background: rgba(18, 22, 45, 0.85);
+    --game-card-new-badge-border: rgba(100, 140, 255, 0.3);
 }
 
 html[class="html--dark"] {