diff --git a/src/main/services/steam-250.ts b/src/main/services/steam-250.ts index 5652b0d3..826e528f 100644 --- a/src/main/services/steam-250.ts +++ b/src/main/services/steam-250.ts @@ -16,7 +16,7 @@ export const requestSteam250 = async (path: string) => { if (!steamGameUrl) return null; return { - title: $title.textContent, + title: $title.getAttribute("data-title") || "", objectId: steamGameUrl.split("/").pop(), } as Steam250Game; }) diff --git a/src/renderer/src/pages/game-details/hero.scss b/src/renderer/src/pages/game-details/hero.scss index 41264fe4..fd071eec 100644 --- a/src/renderer/src/pages/game-details/hero.scss +++ b/src/renderer/src/pages/game-details/hero.scss @@ -231,44 +231,50 @@ $hero-height: 350px; } &__randomizer-button { - padding: calc(globals.$spacing-unit * 1.5); - background-color: rgba(0, 0, 0, 0.6); + position: fixed; + bottom: calc(globals.$spacing-unit * 5); + right: calc(globals.$spacing-unit * 2); + z-index: 100; + padding: calc(globals.$spacing-unit * 1.5) calc(globals.$spacing-unit * 2); + background-color: rgba(255, 255, 255, 0.08); backdrop-filter: blur(20px); border-radius: 8px; transition: all ease 0.2s; cursor: pointer; min-height: 40px; - min-width: 40px; display: flex; align-items: center; justify-content: center; + gap: globals.$spacing-unit; color: globals.$muted-color; border: solid 1px globals.$border-color; - box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.8); + box-shadow: + 0px 0px 10px 0px rgba(0, 0, 0, 0.8), + 0px 2px 8px 0px rgba(255, 255, 255, 0.1); animation: slide-in 0.3s cubic-bezier(0.33, 1, 0.68, 1); + overflow: visible; - &:active { - opacity: 0.9; + &:disabled { + opacity: globals.$disabled-opacity; + cursor: not-allowed; } &:hover { - background-color: rgba(0, 0, 0, 0.5); + background-color: rgba(255, 255, 255, 0.12); color: globals.$body-color; } } &__stars-icon-container { - width: 20px; + width: 16px; height: 16px; - display: flex; - align-items: center; - justify-content: center; position: relative; } &__stars-icon { - width: 26px; + width: 70px; position: absolute; - top: -3px; + top: -28px; + left: -27px; } }