From 1bbf3b27bf5f0e5fd91beabda35c14f9ff58c749 Mon Sep 17 00:00:00 2001 From: Nate Date: Sat, 18 Jan 2025 14:13:57 -0300 Subject: [PATCH] added "as vars;" + vars.$ --- src/renderer/src/app.scss | 2 +- .../src/components/avatar/avatar.scss | 8 +-- .../src/components/backdrop/backdrop.scss | 8 +-- src/renderer/src/components/badge/badge.scss | 8 +-- .../components/bottom-panel/bottom-panel.scss | 14 ++--- .../src/components/button/button.scss | 26 ++++---- .../checkbox-field/checkbox-field.scss | 8 +-- .../confirmation-modal.scss | 6 +- .../dropdown-menu/dropdown-menu.scss | 16 ++--- .../src/components/game-card/game-card.scss | 24 +++---- .../components/header/auto-update-header.scss | 14 ++--- .../src/components/header/header.scss | 30 ++++----- src/renderer/src/components/hero/hero.scss | 12 ++-- src/renderer/src/components/link/link.scss | 4 +- src/renderer/src/components/modal/modal.scss | 18 +++--- .../components/select-field/select-field.scss | 18 +++--- .../components/sidebar/sidebar-profile.scss | 18 +++--- .../src/components/sidebar/sidebar.scss | 38 ++++++------ .../src/components/text-field/text-field.scss | 28 ++++----- src/renderer/src/components/toast/toast.scss | 26 ++++---- .../pages/achievements/achievement-panel.scss | 24 +++---- .../src/pages/achievements/achievements.scss | 48 +++++++------- .../src/pages/catalogue/catalogue.scss | 8 +-- .../src/pages/catalogue/game-item.scss | 16 ++--- .../pages/downloads/delete-game-modal.scss | 4 +- .../src/pages/downloads/download-group.scss | 32 +++++----- .../src/pages/downloads/downloads.scss | 10 +-- src/renderer/src/pages/editor/editor.scss | 8 +-- .../cloud-sync-files-modal.scss | 10 +-- .../cloud-sync-modal/cloud-sync-modal.scss | 22 +++---- .../description-header.scss | 8 +-- .../gallery-slider/gallery-slider.scss | 20 +++--- .../src/pages/game-details/game-details.scss | 58 ++++++++--------- .../game-details/hero/hero-panel-actions.scss | 8 +-- .../pages/game-details/hero/hero-panel.scss | 22 +++---- .../modals/download-settings-modal.scss | 12 ++-- .../modals/game-options-modal.scss | 8 +-- .../modals/remove-from-library-modal.scss | 4 +- .../game-details/modals/repacks-modal.scss | 10 +-- .../sidebar-section/sidebar-section.scss | 12 ++-- .../pages/game-details/sidebar/sidebar.scss | 44 ++++++------- .../src/pages/home/catalogue-home.scss | 10 +-- src/renderer/src/pages/home/home.scss | 14 ++--- .../edit-profile-modal.scss | 10 +-- .../profile-content/locked-profile.scss | 6 +- .../profile-content/profile-content.scss | 62 +++++++++---------- .../profile/profile-hero/profile-hero.scss | 26 ++++---- src/renderer/src/pages/profile/profile.scss | 4 +- .../report-profile/report-profile.scss | 10 +-- .../upload-background-image-button.scss | 4 +- .../settings/add-download-source-modal.scss | 8 +-- .../src/pages/settings/settings-account.scss | 22 +++---- .../settings/settings-download-sources.scss | 22 +++---- .../pages/settings/settings-real-debrid.scss | 10 +-- src/renderer/src/pages/settings/settings.scss | 12 ++-- .../hydra-cloud/hydra-cloud.scss | 6 +- .../user-friend-modal/user-friend-modal.scss | 42 ++++++------- 57 files changed, 491 insertions(+), 491 deletions(-) diff --git a/src/renderer/src/app.scss b/src/renderer/src/app.scss index 5309325e..b8e92509 100644 --- a/src/renderer/src/app.scss +++ b/src/renderer/src/app.scss @@ -1,4 +1,4 @@ -@import "./scss/variables"; +@use "./scss/variables"; * { box-sizing: border-box; diff --git a/src/renderer/src/components/avatar/avatar.scss b/src/renderer/src/components/avatar/avatar.scss index 3e3533b6..853f75f7 100644 --- a/src/renderer/src/components/avatar/avatar.scss +++ b/src/renderer/src/components/avatar/avatar.scss @@ -1,14 +1,14 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .profile-avatar { border-radius: 4px; display: flex; justify-content: center; align-items: center; - background-color: $background-color; - border: solid 1px $border-color; + background-color: vars.$background-color; + border: solid 1px vars.$border-color; cursor: pointer; - color: $muted-color; + color: vars.$muted-color; position: relative; &__image { diff --git a/src/renderer/src/components/backdrop/backdrop.scss b/src/renderer/src/components/backdrop/backdrop.scss index bc4eb94b..35bae740 100644 --- a/src/renderer/src/components/backdrop/backdrop.scss +++ b/src/renderer/src/components/backdrop/backdrop.scss @@ -1,4 +1,4 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .backdrop { animation-name: backdrop-fade-in; @@ -10,9 +10,9 @@ display: flex; justify-content: center; align-items: center; - z-index: $backdrop-z-index; + z-index: vars.$backdrop-z-index; top: 0; - padding: calc($spacing-unit * 3); + padding: calc(vars.$spacing-unit * 3); backdrop-filter: blur(2px); transition: all ease 0.2s; @@ -23,7 +23,7 @@ } &--windows { - padding-top: calc(#{$spacing-unit * 3} + 35); + padding-top: calc(#{vars.$spacing-unit * 3} + 35); } } diff --git a/src/renderer/src/components/badge/badge.scss b/src/renderer/src/components/badge/badge.scss index 358bcbd6..bfb133bc 100644 --- a/src/renderer/src/components/badge/badge.scss +++ b/src/renderer/src/components/badge/badge.scss @@ -1,10 +1,10 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .badge { - color: $muted-color; + color: vars.$muted-color; font-size: 10px; - padding: calc($spacing-unit / 2) $spacing-unit; - border: solid 1px $muted-color; + padding: calc(vars.$spacing-unit / 2) vars.$spacing-unit; + border: solid 1px vars.$muted-color; border-radius: 4px; display: flex; align-items: center; diff --git a/src/renderer/src/components/bottom-panel/bottom-panel.scss b/src/renderer/src/components/bottom-panel/bottom-panel.scss index 10b295dd..4c5dc394 100644 --- a/src/renderer/src/components/bottom-panel/bottom-panel.scss +++ b/src/renderer/src/components/bottom-panel/bottom-panel.scss @@ -1,23 +1,23 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .bottom-panel { width: 100%; - border-top: solid 1px $border-color; - background-color: $background-color; - padding: calc($spacing-unit / 2) calc($spacing-unit * 2); + border-top: solid 1px vars.$border-color; + background-color: vars.$background-color; + padding: calc(vars.$spacing-unit / 2) calc(vars.$spacing-unit * 2); display: flex; align-items: center; transition: all ease 0.2s; justify-content: space-between; position: relative; - z-index: $bottom-panel-z-index; + z-index: vars.$bottom-panel-z-index; &__downloads-button { - color: $body-color; + color: vars.$body-color; border-bottom: solid 1px transparent; &:hover { - border-bottom: solid 1px $body-color; + border-bottom: solid 1px vars.$body-color; cursor: pointer; } } diff --git a/src/renderer/src/components/button/button.scss b/src/renderer/src/components/button/button.scss index b86438ef..98ed6ee0 100644 --- a/src/renderer/src/components/button/button.scss +++ b/src/renderer/src/components/button/button.scss @@ -1,8 +1,8 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .button { - padding: $spacing-unit $spacing-unit * 2; - background-color: $muted-color; + padding: vars.$spacing-unit vars.$spacing-unit * 2; + background-color: vars.$muted-color; border-radius: 8px; border: solid 1px transparent; transition: all ease 0.2s; @@ -11,14 +11,14 @@ display: flex; align-items: center; justify-content: center; - gap: $spacing-unit; + gap: vars.$spacing-unit; &:active { - opacity: $active-opacity; + opacity: vars.$active-opacity; } &:disabled { - opacity: $disabled-opacity; + opacity: vars.$disabled-opacity; cursor: not-allowed; } @@ -28,14 +28,14 @@ } &:disabled { - background-color: $muted-color; + background-color: vars.$muted-color; } } &--outline { background-color: transparent; - border: solid 1px $border-color; - color: $muted-color; + border: solid 1px vars.$border-color; + color: vars.$muted-color; &:hover { background-color: rgba(255, 255, 255, 0.1); @@ -47,14 +47,14 @@ } &--dark { - background-color: $dark-background-color; - color: $muted-color; + background-color: vars.$dark-background-color; + color: vars.$muted-color; } &--danger { border-color: transparent; - background-color: $danger-color; - color: $muted-color; + background-color: vars.$danger-color; + color: vars.$muted-color; &:hover { background-color: #b3203f; diff --git a/src/renderer/src/components/checkbox-field/checkbox-field.scss b/src/renderer/src/components/checkbox-field/checkbox-field.scss index b7ca74dd..ef2330fb 100644 --- a/src/renderer/src/components/checkbox-field/checkbox-field.scss +++ b/src/renderer/src/components/checkbox-field/checkbox-field.scss @@ -1,23 +1,23 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .checkbox-field { display: flex; flex-direction: row; align-items: center; - gap: $spacing-unit; + gap: vars.$spacing-unit; cursor: pointer; &__checkbox { width: 20px; height: 20px; border-radius: 4px; - background-color: $dark-background-color; + background-color: vars.$dark-background-color; display: flex; justify-content: center; align-items: center; position: relative; transition: all ease 0.2s; - border: solid 1px $border-color; + border: solid 1px vars.$border-color; &:hover { border-color: rgba(255, 255, 255, 0.5); } diff --git a/src/renderer/src/components/confirmation-modal/confirmation-modal.scss b/src/renderer/src/components/confirmation-modal/confirmation-modal.scss index 7b12b307..a93e3d88 100644 --- a/src/renderer/src/components/confirmation-modal/confirmation-modal.scss +++ b/src/renderer/src/components/confirmation-modal/confirmation-modal.scss @@ -1,14 +1,14 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .confirmation-modal { display: flex; flex-direction: column; - gap: calc($spacing-unit * 2); + gap: calc(vars.$spacing-unit * 2); &__actions { display: flex; align-self: flex-end; - gap: calc($spacing-unit * 2); + gap: calc(vars.$spacing-unit * 2); } &__description { font-size: 16px; diff --git a/src/renderer/src/components/dropdown-menu/dropdown-menu.scss b/src/renderer/src/components/dropdown-menu/dropdown-menu.scss index f3a2781d..48640104 100644 --- a/src/renderer/src/components/dropdown-menu/dropdown-menu.scss +++ b/src/renderer/src/components/dropdown-menu/dropdown-menu.scss @@ -1,9 +1,9 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .dropdown-menu { &__content { - background-color: $dark-background-color; - border: 1px solid $border-color; + background-color: vars.$dark-background-color; + border: 1px solid vars.$border-color; border-radius: 6px; min-width: 200px; flex-direction: column; @@ -20,13 +20,13 @@ padding: 4px 12px; font-size: 14px; font-weight: 500; - color: $muted-color; + color: vars.$muted-color; } &__separator { width: 100%; height: 1px; - background-color: $border-color; + background-color: vars.$border-color; } &__item { @@ -49,12 +49,12 @@ } &:not(&__item--disabled) &__item:hover { - background-color: $background-color; - color: $muted-color; + background-color: vars.$background-color; + color: vars.$muted-color; } &__item:focus { - background-color: $background-color; + background-color: vars.$background-color; outline: none; } diff --git a/src/renderer/src/components/game-card/game-card.scss b/src/renderer/src/components/game-card/game-card.scss index 0ca93f7c..f2ca1d49 100644 --- a/src/renderer/src/components/game-card/game-card.scss +++ b/src/renderer/src/components/game-card/game-card.scss @@ -1,4 +1,4 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .game-card { width: 100%; @@ -7,12 +7,12 @@ overflow: hidden; border-radius: 4px; transition: all ease 0.2s; - border: solid 1px $border-color; + border: solid 1px vars.$border-color; cursor: pointer; z-index: 1; &:active { - opacity: $active-opacity; + opacity: vars.$active-opacity; } &__backdrop { @@ -37,10 +37,10 @@ &__content { color: #dadbe1; - padding: $spacing-unit calc($spacing-unit * 2); + padding: vars.$spacing-unit calc(vars.$spacing-unit * 2); display: flex; align-items: flex-start; - gap: $spacing-unit; + gap: vars.$spacing-unit; flex-direction: column; transition: all ease 0.2s; transform: translateY(24px); @@ -56,21 +56,21 @@ display: flex; margin: 0; padding: 0; - gap: $spacing-unit; + gap: vars.$spacing-unit; flex-wrap: wrap; list-style: none; } &__specifics { display: flex; - gap: calc($spacing-unit * 2); + gap: calc(vars.$spacing-unit * 2); justify-content: center; } &__specifics-item { - gap: $spacing-unit; + gap: vars.$spacing-unit; display: flex; - color: $muted-color; + color: vars.$muted-color; font-size: 12px; align-items: flex-end; } @@ -78,8 +78,8 @@ &__title-container { display: flex; align-items: center; - gap: $spacing-unit; - color: $muted-color; + gap: vars.$spacing-unit; + color: vars.$muted-color; } &__shop-icon { @@ -89,7 +89,7 @@ } &__no-download-label { - color: $body-color; + color: vars.$body-color; font-weight: bold; } diff --git a/src/renderer/src/components/header/auto-update-header.scss b/src/renderer/src/components/header/auto-update-header.scss index 20d4a972..14cedfe1 100644 --- a/src/renderer/src/components/header/auto-update-header.scss +++ b/src/renderer/src/components/header/auto-update-header.scss @@ -1,27 +1,27 @@ -@use "../../scss/globals.scss"; +@use "../../scss/variables" as vars; .auto-update-sub-header { - border-bottom: solid 1px globals.$body-color; - padding: calc(globals.$spacing-unit / 2) calc(globals.$spacing-unit * 3); + border-bottom: solid 1px vars.$body-color; + padding: calc(vars.$spacing-unit / 2) calc(vars.$spacing-unit * 3); &__new-version-link { display: flex; align-items: center; - gap: globals.$spacing-unit; + gap: vars.$spacing-unit; color: #8e919b; font-size: 12px; } &__new-version-icon { - color: globals.$success-color; + color: vars.$success-color; } &__new-version-button { display: flex; align-items: center; justify-content: center; - gap: globals.$spacing-unit; - color: globals.$body-color; + gap: vars.$spacing-unit; + color: vars.$body-color; font-size: 12px; &:hover { diff --git a/src/renderer/src/components/header/header.scss b/src/renderer/src/components/header/header.scss index 660ee816..7cacd4ff 100644 --- a/src/renderer/src/components/header/header.scss +++ b/src/renderer/src/components/header/header.scss @@ -1,16 +1,16 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .header { display: flex; justify-content: space-between; align-items: center; - gap: calc($spacing-unit * 2); + gap: calc(vars.$spacing-unit * 2); -webkit-app-region: drag; width: 100%; - padding: calc($spacing-unit * 2) calc($spacing-unit * 3); - color: $muted-color; - border-bottom: solid 1px $border-color; - background-color: $dark-background-color; + padding: calc(vars.$spacing-unit * 2) calc(vars.$spacing-unit * 3); + color: vars.$muted-color; + border-bottom: solid 1px vars.$border-color; + background-color: vars.$dark-background-color; &--dragging-disabled { -webkit-app-region: no-drag; @@ -21,13 +21,13 @@ } &__search { - background-color: $background-color; + background-color: vars.$background-color; display: inline-flex; transition: all ease 0.2s; width: 200px; align-items: center; border-radius: 8px; - border: solid 1px $border-color; + border: solid 1px vars.$border-color; height: 40px; -webkit-app-region: no-drag; &:hover { @@ -60,7 +60,7 @@ color: inherit; cursor: pointer; transition: all ease 0.2s; - padding: $spacing-unit; + padding: vars.$spacing-unit; &:hover { color: #dadbe1; @@ -70,13 +70,13 @@ &__section { display: flex; align-items: center; - gap: calc($spacing-unit * 2); + gap: calc(vars.$spacing-unit * 2); height: 100%; overflow: hidden; } &__back-button { - color: $body-color; + color: vars.$body-color; cursor: pointer; -webkit-app-region: no-drag; position: absolute; @@ -112,13 +112,13 @@ &__new-version-link { display: flex; align-items: center; - gap: $spacing-unit; - color: $body-color; - font-size: $new-version-font-size; + gap: vars.$spacing-unit; + color: vars.$body-color; + font-size: vars.$new-version-font-size; } &__new-version-icon { - color: $success-color; + color: vars.$success-color; } } diff --git a/src/renderer/src/components/hero/hero.scss b/src/renderer/src/components/hero/hero.scss index bc85de0d..3c52b010 100644 --- a/src/renderer/src/components/hero/hero.scss +++ b/src/renderer/src/components/hero/hero.scss @@ -1,4 +1,4 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .hero { width: 100%; @@ -10,7 +10,7 @@ overflow: hidden; box-shadow: 0px 0px 15px 0px #000000; cursor: pointer; - border: solid 1px $border-color; + border: solid 1px vars.$border-color; z-index: 1; &__media { @@ -39,17 +39,17 @@ &__description { max-width: 700px; - color: $muted-color; + color: vars.$muted-color; text-align: left; line-height: 20px; - margin-top: $spacing-unit * 2; + margin-top: vars.$spacing-unit * 2; } &__content { width: 100%; height: 100%; - padding: $spacing-unit * 4 $spacing-unit * 3; - gap: $spacing-unit * 2; + padding: vars.$spacing-unit * 4 vars.$spacing-unit * 3; + gap: vars.$spacing-unit * 2; display: flex; flex-direction: column; justify-content: flex-end; diff --git a/src/renderer/src/components/link/link.scss b/src/renderer/src/components/link/link.scss index c911852f..90c080a0 100644 --- a/src/renderer/src/components/link/link.scss +++ b/src/renderer/src/components/link/link.scss @@ -1,8 +1,8 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .link { text-decoration: none; - color: $muted-color; + color: vars.$muted-color; &:hover { text-decoration: underline; diff --git a/src/renderer/src/components/modal/modal.scss b/src/renderer/src/components/modal/modal.scss index 965402e4..44758633 100644 --- a/src/renderer/src/components/modal/modal.scss +++ b/src/renderer/src/components/modal/modal.scss @@ -1,15 +1,15 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .modal { animation: scale-fade-in 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running; - background-color: $background-color; + background-color: vars.$background-color; border-radius: 4px; min-width: 400px; max-width: 600px; - color: $body-color; + color: vars.$body-color; max-height: 100%; - border: solid 1px $border-color; + border: solid 1px vars.$border-color; overflow: hidden; display: flex; flex-direction: column; @@ -27,14 +27,14 @@ &__content { height: 100%; overflow: auto; - padding: calc($spacing-unit * 3) calc($spacing-unit * 2); + padding: calc(vars.$spacing-unit * 3) calc(vars.$spacing-unit * 2); } &__header { display: flex; - gap: $spacing-unit; - padding: calc($spacing-unit * 2); - border-bottom: solid 1px $border-color; + gap: vars.$spacing-unit; + padding: calc(vars.$spacing-unit * 2); + border-bottom: solid 1px vars.$border-color; justify-content: space-between; align-items: center; } @@ -50,7 +50,7 @@ } &__close-button-icon { - color: $body-color; + color: vars.$body-color; } } diff --git a/src/renderer/src/components/select-field/select-field.scss b/src/renderer/src/components/select-field/select-field.scss index d2208dc9..64664723 100644 --- a/src/renderer/src/components/select-field/select-field.scss +++ b/src/renderer/src/components/select-field/select-field.scss @@ -1,4 +1,4 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .select-field { display: inline-flex; @@ -6,7 +6,7 @@ width: fit-content; align-items: center; border-radius: 8px; - border: 1px solid $border-color; + border: 1px solid vars.$border-color; height: 40px; min-height: 40px; &:hover { @@ -18,15 +18,15 @@ } &__primary { - background-color: $dark-background-color; + background-color: vars.$dark-background-color; } &__dark { - background-color: $background-color; + background-color: vars.$background-color; } &__option { - background-color: $dark-background-color; + background-color: vars.$dark-background-color; border-right: 4px solid; border-color: transparent; border-radius: 8px; @@ -36,14 +36,14 @@ color: #dadbe1; cursor: default; font-family: inherit; - font-size: $body-font-size; + font-size: vars.$body-font-size; text-overflow: ellipsis; - padding: $spacing-unit; + padding: vars.$spacing-unit; } &__label { - margin-bottom: $spacing-unit; + margin-bottom: vars.$spacing-unit; display: block; - color: $body-color; + color: vars.$body-color; } } diff --git a/src/renderer/src/components/sidebar/sidebar-profile.scss b/src/renderer/src/components/sidebar/sidebar-profile.scss index 5e805dab..67a702be 100644 --- a/src/renderer/src/components/sidebar/sidebar-profile.scss +++ b/src/renderer/src/components/sidebar/sidebar-profile.scss @@ -1,21 +1,21 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .sidebar-profile { position: relative; display: flex; align-items: center; - gap: $spacing-unit; - padding: $spacing-unit $spacing-unit * 2; + gap: vars.$spacing-unit; + padding: vars.$spacing-unit vars.$spacing-unit * 2; &__button { display: flex; cursor: pointer; transition: all ease 0.1s; - color: $muted-color; + color: vars.$muted-color; width: 100%; overflow: hidden; border-radius: 4px; - padding: $spacing-unit $spacing-unit; + padding: vars.$spacing-unit vars.$spacing-unit; &:hover { background-color: rgba(255, 255, 255, 0.15); @@ -25,7 +25,7 @@ &__button-content { display: flex; align-items: center; - gap: $spacing-unit + $spacing-unit / 2; + gap: vars.$spacing-unit + vars.$spacing-unit / 2; width: 100%; } @@ -48,14 +48,14 @@ } &__friends-button { - color: $muted-color; + color: vars.$muted-color; cursor: pointer; border-radius: 50%; width: 40px; min-width: 40px; min-height: 40px; height: 40px; - background-color: $background-color; + background-color: vars.$background-color; position: relative; transition: all ease 0.3s; @@ -65,7 +65,7 @@ } &__friends-button-badge { - background-color: $success-color; + background-color: vars.$success-color; display: flex; justify-content: center; align-items: center; diff --git a/src/renderer/src/components/sidebar/sidebar.scss b/src/renderer/src/components/sidebar/sidebar.scss index 472e9b2d..c876dcb8 100644 --- a/src/renderer/src/components/sidebar/sidebar.scss +++ b/src/renderer/src/components/sidebar/sidebar.scss @@ -1,30 +1,30 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .sidebar { - background-color: $dark-background-color; - color: $muted-color; + background-color: vars.$dark-background-color; + color: vars.$muted-color; flex-direction: column; display: flex; transition: opacity ease 0.2s; - border-right: solid 1px $border-color; + border-right: solid 1px vars.$border-color; position: relative; overflow: hidden; - padding-top: $spacing-unit; + padding-top: vars.$spacing-unit; &__resizing { - opacity: $active-opacity; + opacity: vars.$active-opacity; pointer-events: none; } &__darwin { - padding-top: calc($spacing-unit * 6); + padding-top: calc(vars.$spacing-unit * 6); } &__content { display: flex; flex-direction: column; - padding: calc($spacing-unit * 2); - gap: calc($spacing-unit * 2); + padding: calc(vars.$spacing-unit * 2); + gap: calc(vars.$spacing-unit * 2); width: 100%; overflow: auto; } @@ -41,7 +41,7 @@ list-style: none; padding: 0; margin: 0; - gap: calc($spacing-unit / 2); + gap: calc(vars.$spacing-unit / 2); display: flex; flex-direction: column; overflow: hidden; @@ -52,7 +52,7 @@ cursor: pointer; text-wrap: nowrap; display: flex; - color: $muted-color; + color: vars.$muted-color; border-radius: 4px; &:hover { background-color: rgba(255, 255, 255, 0.15); @@ -63,7 +63,7 @@ } &--muted { - opacity: $disabled-opacity; + opacity: vars.$disabled-opacity; &:hover { opacity: 1; @@ -75,11 +75,11 @@ color: inherit; display: flex; align-items: center; - gap: $spacing-unit; + gap: vars.$spacing-unit; cursor: pointer; overflow: hidden; width: 100%; - padding: 9px $spacing-unit; + padding: 9px vars.$spacing-unit; } &__menu-item-button-label { @@ -102,20 +102,20 @@ } &__section { - gap: calc($spacing-unit * 2); + gap: calc(vars.$spacing-unit * 2); display: flex; flex-direction: column; - padding-bottom: $spacing-unit; + padding-bottom: vars.$spacing-unit; } &__help-button { - color: $muted-color; - padding: $spacing-unit calc($spacing-unit * 2); + color: vars.$muted-color; + padding: vars.$spacing-unit calc(vars.$spacing-unit * 2); gap: 9px; display: flex; align-items: center; cursor: pointer; - border-top: solid 1px $border-color; + border-top: solid 1px vars.$border-color; transition: background-color ease 0.1s; &:hover { diff --git a/src/renderer/src/components/text-field/text-field.scss b/src/renderer/src/components/text-field/text-field.scss index fd7bba45..edcc1998 100644 --- a/src/renderer/src/components/text-field/text-field.scss +++ b/src/renderer/src/components/text-field/text-field.scss @@ -1,8 +1,8 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .text-field-container { flex: 1; - gap: $spacing-unit; + gap: vars.$spacing-unit; display: flex; flex-direction: column; } @@ -13,28 +13,28 @@ width: 100%; align-items: center; border-radius: 8px; - border: solid 1px $border-color; + border: solid 1px vars.$border-color; height: 40px; min-height: 40px; &__primary { - background-color: $dark-background-color; + background-color: vars.$dark-background-color; } &__dark { - background-color: $background-color; + background-color: vars.$background-color; } &__has-error { - border-color: $danger-color; + border-color: vars.$danger-color; } &__focused { - border-color: $search-border-color-focused; + border-color: vars.$search-border-color-focused; } &:not(&--focused):hover { - border-color: $search-border-color-hover; + border-color: vars.$search-border-color-hover; } } @@ -44,11 +44,11 @@ width: 100%; height: 100%; outline: none; - color: $search-input-color; + color: vars.$search-input-color; cursor: default; font-family: inherit; text-overflow: ellipsis; - padding: $spacing-unit; + padding: vars.$spacing-unit; &:focus { cursor: text; @@ -61,15 +61,15 @@ .text-field__toggle-password-button { cursor: pointer; - color: $muted-color; - padding: $spacing-unit; + color: vars.$muted-color; + padding: vars.$spacing-unit; } .text-field__wrapper { display: flex; - gap: $spacing-unit; + gap: vars.$spacing-unit; } .text-field__error-label { - color: $danger-color; + color: vars.$danger-color; } diff --git a/src/renderer/src/components/toast/toast.scss b/src/renderer/src/components/toast/toast.scss index 1e3438f8..0007c64f 100644 --- a/src/renderer/src/components/toast/toast.scss +++ b/src/renderer/src/components/toast/toast.scss @@ -1,4 +1,4 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; @keyframes slideIn { 0% { @@ -23,16 +23,16 @@ animation-timing-function: ease-in-out; max-height: 80px; position: fixed; - background-color: $background-color; + background-color: vars.$background-color; border-radius: 4px; - border: solid 1px $border-color; - right: $spacing-unit * 2; + border: solid 1px vars.$border-color; + right: vars.$spacing-unit * 2; bottom: 42px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; - z-index: $toast-z-index; + z-index: vars.$toast-z-index; max-width: 500px; &--closing { @@ -48,8 +48,8 @@ &__content { display: flex; - gap: $spacing-unit * 2; - padding: $spacing-unit * 2; + gap: vars.$spacing-unit * 2; + padding: vars.$spacing-unit * 2; justify-content: center; align-items: center; } @@ -59,16 +59,16 @@ height: 5px; &::-webkit-progress-bar { - background-color: $dark-background-color; + background-color: vars.$dark-background-color; } &::-webkit-progress-value { - background-color: $muted-color; + background-color: vars.$muted-color; } } &__close-button { - color: $body-color; + color: vars.$body-color; cursor: pointer; padding: 0; margin: 0; @@ -80,13 +80,13 @@ } &__success-icon { - color: $success-color; + color: vars.$success-color; } &__error-icon { - color: $danger-color; + color: vars.$danger-color; } &__warning-icon { - color: $warning-color; + color: vars.$warning-color; } diff --git a/src/renderer/src/pages/achievements/achievement-panel.scss b/src/renderer/src/pages/achievements/achievement-panel.scss index 11eb3cb9..7caa2944 100644 --- a/src/renderer/src/pages/achievements/achievement-panel.scss +++ b/src/renderer/src/pages/achievements/achievement-panel.scss @@ -1,35 +1,35 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .achievement-panel { width: 100%; - padding: #{$spacing-unit * 2} #{$spacing-unit * 3}; - background-color: $color-background; + padding: #{vars.$spacing-unit * 2} #{vars.$spacing-unit * 3}; + background-color: vars.$color-background; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; - border-bottom: solid 1px $color-border; + border-bottom: solid 1px vars.$color-border; &__content { display: flex; - gap: $spacing-unit; + gap: vars.$spacing-unit; justify-content: center; } &__actions { display: flex; - gap: $spacing-unit; + gap: vars.$spacing-unit; } &__download-details-row { - gap: $spacing-unit; + gap: vars.$spacing-unit; display: flex; - color: $color-body; + color: vars.$color-body; align-items: center; } &__downloads-link { - color: $color-body; + color: vars.$color-body; text-decoration: underline; } @@ -46,17 +46,17 @@ } &::-webkit-progress-value { - background-color: $color-muted; + background-color: vars.$color-muted; } &--disabled { - opacity: $opacity-disabled; + opacity: vars.$opacity-disabled; } } &__link { text-align: start; - color: $color-body; + color: vars.$color-body; &:hover { text-decoration: underline; diff --git a/src/renderer/src/pages/achievements/achievements.scss b/src/renderer/src/pages/achievements/achievements.scss index 6c8b52ff..8c076b13 100644 --- a/src/renderer/src/pages/achievements/achievements.scss +++ b/src/renderer/src/pages/achievements/achievements.scss @@ -1,4 +1,4 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; $hero-height: 150px; $logo-height: 100px; @@ -16,8 +16,8 @@ $logo-max-width: 200px; &__hero { width: 100%; - height: $hero-height; - min-height: $hero-height; + height: vars.$hero-height; + min-height: vars.$hero-height; display: flex; flex-direction: column; position: relative; @@ -25,7 +25,7 @@ $logo-max-width: 200px; } &__hero-content { - padding: #{$spacing-unit * 2}; + padding: #{vars.$spacing-unit * 2}; width: 100%; display: flex; justify-content: space-between; @@ -33,8 +33,8 @@ $logo-max-width: 200px; } &__game-logo { - width: $logo-max-width; - height: $logo-height; + width: vars.$logo-max-width; + height: vars.$logo-height; object-fit: contain; transition: all ease 0.2s; @@ -54,9 +54,9 @@ $logo-max-width: 200px; &__table-header { width: 100%; - background-color: $dark-background-color; + background-color: vars.$dark-background-color; transition: all ease 0.2s; - border-bottom: solid 1px $border-color; + border-bottom: solid 1px vars.$border-color; position: sticky; top: 0; z-index: 1; @@ -71,20 +71,20 @@ $logo-max-width: 200px; margin: 0; display: flex; flex-direction: column; - gap: #{$spacing-unit * 2}; - padding: #{$spacing-unit * 2}; + gap: #{vars.$spacing-unit * 2}; + padding: #{vars.$spacing-unit * 2}; width: 100%; - background-color: $background-color; + background-color: vars.$background-color; } &__list-item { transition: all ease 0.1s; - color: $muted-color; + color: vars.$muted-color; width: 100%; overflow: hidden; border-radius: 4px; - padding: $spacing-unit; - gap: #{$spacing-unit * 2}; + padding: vars.$spacing-unit; + gap: #{vars.$spacing-unit * 2}; align-items: center; text-align: left; @@ -116,7 +116,7 @@ $logo-max-width: 200px; } &::-webkit-progress-value { - background-color: $muted-color; + background-color: vars.$muted-color; border-radius: 4px; } } @@ -136,20 +136,20 @@ $logo-max-width: 200px; &__hero-panel-skeleton { width: 100%; - padding: #{$spacing-unit * 2}; + padding: #{vars.$spacing-unit * 2}; display: flex; align-items: center; - background-color: $background-color; + background-color: vars.$background-color; height: 72px; - border-bottom: solid 1px $border-color; + border-bottom: solid 1px vars.$border-color; } &__list-item-skeleton { width: 100%; overflow: hidden; border-radius: 4px; - padding: $spacing-unit; - gap: #{$spacing-unit * 2}; + padding: vars.$spacing-unit; + gap: #{vars.$spacing-unit * 2}; } &__profile-avatar { @@ -159,7 +159,7 @@ $logo-max-width: 200px; display: flex; justify-content: center; align-items: center; - background-color: $background-color; + background-color: vars.$background-color; position: relative; object-fit: cover; } @@ -171,7 +171,7 @@ $logo-max-width: 200px; display: flex; justify-content: center; align-items: center; - background-color: $background-color; + background-color: vars.$background-color; position: relative; object-fit: cover; } @@ -181,8 +181,8 @@ $logo-max-width: 200px; display: flex; justify-content: center; width: 100%; - gap: #{$spacing-unit / 2}; - color: $body-color; + gap: #{vars.$spacing-unit / 2}; + color: vars.$body-color; cursor: pointer; &:hover { diff --git a/src/renderer/src/pages/catalogue/catalogue.scss b/src/renderer/src/pages/catalogue/catalogue.scss index 2a475734..ae3cf074 100644 --- a/src/renderer/src/pages/catalogue/catalogue.scss +++ b/src/renderer/src/pages/catalogue/catalogue.scss @@ -1,10 +1,10 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .catalogue { overflow-y: auto; display: flex; flex-direction: column; - gap: calc($spacing-unit * 2); + gap: calc(vars.$spacing-unit * 2); width: 100%; padding: 16px; scroll-behavior: smooth; @@ -13,10 +13,10 @@ width: 270px; min-width: 270px; max-width: 270px; - background-color: $dark-background-color; + background-color: vars.$dark-background-color; border-radius: 4px; padding: 16px; - border: 1px solid $border-color; + border: 1px solid vars.$border-color; align-self: flex-start; } diff --git a/src/renderer/src/pages/catalogue/game-item.scss b/src/renderer/src/pages/catalogue/game-item.scss index 128e04e0..1ab1935f 100644 --- a/src/renderer/src/pages/catalogue/game-item.scss +++ b/src/renderer/src/pages/catalogue/game-item.scss @@ -1,7 +1,7 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .game-item { - background-color: $dark-background-color; + background-color: vars.$dark-background-color; width: 100%; color: #fff; display: flex; @@ -9,9 +9,9 @@ overflow: hidden; position: relative; border-radius: 4px; - border: 1px solid $border-color; + border: 1px solid vars.$border-color; cursor: pointer; - gap: calc($spacing-unit * 2); + gap: calc(vars.$spacing-unit * 2); transition: all ease 0.2s; &:hover { @@ -22,7 +22,7 @@ width: 200px; height: 100%; object-fit: cover; - border-right: 1px solid $border-color; + border-right: 1px solid vars.$border-color; } &__details { @@ -30,11 +30,11 @@ flex-direction: column; align-items: flex-start; gap: 4px; - padding: calc($spacing-unit * 2) 0; + padding: calc(vars.$spacing-unit * 2) 0; } &__genres { - color: $body-color; + color: vars.$body-color; font-size: 12px; text-align: left; margin-bottom: 4px; @@ -42,7 +42,7 @@ &__repackers { display: flex; - gap: $spacing-unit; + gap: vars.$spacing-unit; flex-wrap: wrap; } } diff --git a/src/renderer/src/pages/downloads/delete-game-modal.scss b/src/renderer/src/pages/downloads/delete-game-modal.scss index aa7518c9..94494e05 100644 --- a/src/renderer/src/pages/downloads/delete-game-modal.scss +++ b/src/renderer/src/pages/downloads/delete-game-modal.scss @@ -1,4 +1,4 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .delete-game-modal { &__actions-buttons-ctn { @@ -6,6 +6,6 @@ width: 100%; justify-content: end; align-items: center; - gap: $spacing-unit; + gap: vars.$spacing-unit; } } diff --git a/src/renderer/src/pages/downloads/download-group.scss b/src/renderer/src/pages/downloads/download-group.scss index 62cc5338..eef9901d 100644 --- a/src/renderer/src/pages/downloads/download-group.scss +++ b/src/renderer/src/pages/downloads/download-group.scss @@ -1,17 +1,17 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .download-group { &__title-wrapper { display: flex; align-items: center; - margin-bottom: $spacing-unit; - gap: $spacing-unit; + margin-bottom: vars.$spacing-unit; + gap: vars.$spacing-unit; } &__title { font-weight: bold; cursor: pointer; - color: $body-color; + color: vars.$body-color; text-align: left; font-size: 16px; display: block; @@ -25,24 +25,24 @@ display: flex; align-items: center; justify-content: space-between; - gap: $spacing-unit * 2; + gap: vars.$spacing-unit * 2; } &__downloads { width: 100%; - gap: #{$spacing-unit * 2}; + gap: #{vars.$spacing-unit * 2}; display: flex; flex-direction: column; margin: 0; padding: 0; - margin-top: $spacing-unit; + margin-top: vars.$spacing-unit; } &__cover { width: 280px; min-width: 280px; height: auto; - border-right: solid 1px $border-color; + border-right: solid 1px vars.$border-color; position: relative; z-index: 1; } @@ -50,7 +50,7 @@ &__cover-content { width: 100%; height: 100%; - padding: $spacing-unit; + padding: vars.$spacing-unit; display: flex; align-items: flex-end; justify-content: flex-end; @@ -74,10 +74,10 @@ &__download { width: 100%; - background-color: $background-color; + background-color: vars.$background-color; display: flex; border-radius: 8px; - border: solid 1px $border-color; + border: solid 1px vars.$border-color; overflow: hidden; box-shadow: 0px 0px 5px 0px #000000; transition: all ease 0.2s; @@ -91,27 +91,27 @@ flex-direction: column; flex: 1; justify-content: center; - gap: #{$spacing-unit / 2}; + gap: #{vars.$spacing-unit / 2}; font-size: 14px; } &__right-content { display: flex; - padding: #{$spacing-unit * 2}; + padding: #{vars.$spacing-unit * 2}; flex: 1; - gap: $spacing-unit; + gap: vars.$spacing-unit; background: linear-gradient(90deg, transparent 20%, rgb(0 0 0 / 20%) 100%); } &__actions { display: flex; align-items: center; - gap: $spacing-unit; + gap: vars.$spacing-unit; } &__group { display: flex; flex-direction: column; - gap: #{$spacing-unit * 2}; + gap: #{vars.$spacing-unit * 2}; } } diff --git a/src/renderer/src/pages/downloads/downloads.scss b/src/renderer/src/pages/downloads/downloads.scss index a9ccde6d..bdffd1c8 100644 --- a/src/renderer/src/pages/downloads/downloads.scss +++ b/src/renderer/src/pages/downloads/downloads.scss @@ -1,16 +1,16 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .downloads { &__container { display: flex; - padding: #{$spacing-unit * 3}; + padding: #{vars.$spacing-unit * 3}; flex-direction: column; width: 100%; } &__groups { display: flex; - gap: #{$spacing-unit * 3}; + gap: #{vars.$spacing-unit * 3}; flex-direction: column; } @@ -22,7 +22,7 @@ display: flex; align-items: center; justify-content: center; - margin-bottom: #{$spacing-unit * 2}; + margin-bottom: #{vars.$spacing-unit * 2}; } &__no-downloads { @@ -32,6 +32,6 @@ justify-content: center; align-items: center; flex-direction: column; - gap: $spacing-unit; + gap: vars.$spacing-unit; } } diff --git a/src/renderer/src/pages/editor/editor.scss b/src/renderer/src/pages/editor/editor.scss index 7a62490a..5f9dee11 100644 --- a/src/renderer/src/pages/editor/editor.scss +++ b/src/renderer/src/pages/editor/editor.scss @@ -1,18 +1,18 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .editor-header { width: 100%; height: 36px; - background-color: $dark-background-color; + background-color: vars.$dark-background-color; display: flex; align-items: center; justify-content: start; - padding: 0 calc($spacing-unit * 2); + padding: 0 calc(vars.$spacing-unit * 2); -webkit-app-region: drag; } .editor-header-title { font-size: 7px; font-weight: 500; - color: $body-color; + color: vars.$body-color; } diff --git a/src/renderer/src/pages/game-details/cloud-sync-files-modal/cloud-sync-files-modal.scss b/src/renderer/src/pages/game-details/cloud-sync-files-modal/cloud-sync-files-modal.scss index 7be0e94c..836ce4aa 100644 --- a/src/renderer/src/pages/game-details/cloud-sync-files-modal/cloud-sync-files-modal.scss +++ b/src/renderer/src/pages/game-details/cloud-sync-files-modal/cloud-sync-files-modal.scss @@ -1,9 +1,9 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .cloud-sync-files-modal { &__mapping-methods { display: grid; - gap: $spacing-unit; + gap: vars.$spacing-unit; grid-template-columns: repeat(2, 1fr); } @@ -13,13 +13,13 @@ padding: 0; display: flex; flex-direction: column; - gap: $spacing-unit; - margin-top: #{$spacing-unit * 2}; + gap: vars.$spacing-unit; + margin-top: #{vars.$spacing-unit * 2}; } &__file-item { flex: 1; - color: $muted-color; + color: vars.$muted-color; text-decoration: underline; display: flex; cursor: pointer; diff --git a/src/renderer/src/pages/game-details/cloud-sync-modal/cloud-sync-modal.scss b/src/renderer/src/pages/game-details/cloud-sync-modal/cloud-sync-modal.scss index c2f4def1..2f0a8c8d 100644 --- a/src/renderer/src/pages/game-details/cloud-sync-modal/cloud-sync-modal.scss +++ b/src/renderer/src/pages/game-details/cloud-sync-modal/cloud-sync-modal.scss @@ -1,4 +1,4 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; @keyframes rotate { 0% { @@ -12,7 +12,7 @@ .cloud-sync-modal { &__artifacts { display: flex; - gap: $spacing-unit; + gap: vars.$spacing-unit; flex-direction: column; list-style: none; margin: 0; @@ -24,11 +24,11 @@ text-align: left; flex-direction: row; align-items: center; - gap: $spacing-unit; - color: $body-color; - padding: #{$spacing-unit * 2}; - background-color: $dark-background-color; - border: 1px solid $border-color; + gap: vars.$spacing-unit; + color: vars.$body-color; + padding: #{vars.$spacing-unit * 2}; + background-color: vars.$dark-background-color; + border: 1px solid vars.$border-color; border-radius: 4px; justify-content: space-between; } @@ -45,11 +45,11 @@ height: 5px; &::-webkit-progress-bar { - background-color: $dark-background-color; + background-color: vars.$dark-background-color; } &::-webkit-progress-value { - background-color: $muted-color; + background-color: vars.$muted-color; } } @@ -60,11 +60,11 @@ font-size: 14px; cursor: pointer; text-decoration: underline; - color: $body-color; + color: vars.$body-color; &:disabled { cursor: not-allowed; - opacity: $disabled-opacity; + opacity: vars.$disabled-opacity; } } } diff --git a/src/renderer/src/pages/game-details/description-header/description-header.scss b/src/renderer/src/pages/game-details/description-header/description-header.scss index 591ca898..34a4f055 100644 --- a/src/renderer/src/pages/game-details/description-header/description-header.scss +++ b/src/renderer/src/pages/game-details/description-header/description-header.scss @@ -1,17 +1,17 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .description-header { width: 100%; - padding: #{$spacing-unit * 2}; + padding: #{vars.$spacing-unit * 2}; display: flex; justify-content: space-between; align-items: center; - background-color: $background-color; + background-color: vars.$background-color; height: 72px; &__info { display: flex; - gap: $spacing-unit; + gap: vars.$spacing-unit; flex-direction: column; } } diff --git a/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.scss b/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.scss index 26f5093f..3930c9e4 100644 --- a/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.scss +++ b/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.scss @@ -1,8 +1,8 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .gallery-slider { &__container { - padding: #{$spacing-unit * 3} #{$spacing-unit * 2}; + padding: #{vars.$spacing-unit * 3} #{vars.$spacing-unit * 2}; width: 100%; display: flex; flex-direction: column; @@ -34,13 +34,13 @@ &__preview { width: 100%; - padding: $spacing-unit 0; + padding: vars.$spacing-unit 0; height: 100%; display: flex; position: relative; overflow-x: auto; overflow-y: hidden; - gap: #{$spacing-unit / 2}; + gap: #{vars.$spacing-unit / 2}; @media (min-width: 1280px) { width: 60%; @@ -66,7 +66,7 @@ translate 0.3s ease-in-out, opacity 0.2s ease; border-radius: 4px; - border: solid 1px $border-color; + border: solid 1px vars.$border-color; overflow: hidden; &:hover { @@ -90,7 +90,7 @@ background-color: rgba(0, 0, 0, 0.4); transition: all 0.2s ease-in-out; border-radius: 50%; - color: $muted-color; + color: vars.$muted-color; width: 48px; height: 48px; opacity: 0; @@ -105,14 +105,14 @@ &--left { left: 0; - margin-left: $spacing-unit; - transform: translateX(-#{48 + $spacing-unit}px); + margin-left: vars.$spacing-unit; + transform: translateX(-#{48 + vars.$spacing-unit}px); } &--right { right: 0; - margin-right: $spacing-unit; - transform: translateX(#{48 + $spacing-unit}px); + margin-right: vars.$spacing-unit; + transform: translateX(#{48 + vars.$spacing-unit}px); } &--visible { diff --git a/src/renderer/src/pages/game-details/game-details.scss b/src/renderer/src/pages/game-details/game-details.scss index 874ee78b..6aa69797 100644 --- a/src/renderer/src/pages/game-details/game-details.scss +++ b/src/renderer/src/pages/game-details/game-details.scss @@ -1,10 +1,10 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; $hero-height: 300px; @keyframes slide-in { 0% { - transform: translateY(#{40 + $spacing-unit * 2}px); + transform: translateY(#{40 + vars.$spacing-unit * 2}px); opacity: 0; } 100% { @@ -29,8 +29,8 @@ $hero-height: 300px; &__hero { width: 100%; - height: $hero-height; - min-height: $hero-height; + height: vars.$hero-height; + min-height: vars.$hero-height; display: flex; flex-direction: column; position: relative; @@ -43,7 +43,7 @@ $hero-height: 300px; } &__hero-content { - padding: #{$spacing-unit * 2}; + padding: #{vars.$spacing-unit * 2}; height: 100%; width: 100%; display: flex; @@ -63,8 +63,8 @@ $hero-height: 300px; &__hero-image { width: 100%; - height: $hero-height; - min-height: $hero-height; + height: vars.$hero-height; + min-height: vars.$hero-height; object-fit: cover; object-position: top; transition: all ease 0.2s; @@ -106,8 +106,8 @@ $hero-height: 300px; flex: 1; background: linear-gradient( 0deg, - $background-color 50%, - $dark-background-color 100% + vars.$background-color 50%, + vars.$dark-background-color 100% ); } @@ -120,7 +120,7 @@ $hero-height: 300px; user-select: text; line-height: 22px; font-size: 16px; - padding: #{$spacing-unit * 3} #{$spacing-unit * 2}; + padding: #{vars.$spacing-unit * 3} #{vars.$spacing-unit * 2}; width: 100%; margin-left: auto; margin-right: auto; @@ -131,8 +131,8 @@ $hero-height: 300px; img { border-radius: 5px; - margin-top: $spacing-unit; - margin-bottom: #{$spacing-unit * 3}; + margin-top: vars.$spacing-unit; + margin-bottom: #{vars.$spacing-unit * 3}; display: block; width: 100%; height: auto; @@ -140,15 +140,15 @@ $hero-height: 300px; } a { - color: $body-color; + color: vars.$body-color; } } &__description-skeleton { display: flex; flex-direction: column; - gap: $spacing-unit; - padding: #{$spacing-unit * 3} #{$spacing-unit * 2}; + gap: vars.$spacing-unit; + padding: #{vars.$spacing-unit * 3} #{vars.$spacing-unit * 2}; width: 100%; margin-left: auto; margin-right: auto; @@ -163,16 +163,16 @@ $hero-height: 300px; animation-name: slide-in; animation-duration: 0.2s; position: fixed; - bottom: #{$spacing-unit * 3}; - right: #{9 + $spacing-unit * 2}px; + bottom: #{vars.$spacing-unit * 3}; + right: #{9 + vars.$spacing-unit * 2}px; box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 10px 1px; - border: solid 2px $border-color; + border: solid 2px vars.$border-color; z-index: 1; - background-color: $background-color; + background-color: vars.$background-color; cursor: pointer; &:hover { - background-color: $background-color; + background-color: vars.$background-color; box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 15px 5px; opacity: 1; } @@ -185,22 +185,22 @@ $hero-height: 300px; box-shadow: none; transform: none; opacity: 0.8; - background-color: $background-color; + background-color: vars.$background-color; } } &__hero-panel-skeleton { width: 100%; - padding: #{$spacing-unit * 2}; + padding: #{vars.$spacing-unit * 2}; display: flex; align-items: center; - background-color: $background-color; + background-color: vars.$background-color; height: 72px; - border-bottom: solid 1px $border-color; + border-bottom: solid 1px vars.$border-color; } &__cloud-sync-button { - padding: #{$spacing-unit * 1.5} #{$spacing-unit * 2}; + padding: #{vars.$spacing-unit * 1.5} #{vars.$spacing-unit * 2}; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(20px); border-radius: 8px; @@ -210,10 +210,10 @@ $hero-height: 300px; display: flex; align-items: center; justify-content: center; - gap: $spacing-unit; - color: $muted-color; + gap: vars.$spacing-unit; + color: vars.$muted-color; font-size: 14px; - border: solid 1px $border-color; + border: solid 1px vars.$border-color; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.8); animation: slide-in 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running; @@ -224,7 +224,7 @@ $hero-height: 300px; } &:disabled { - opacity: $disabled-opacity; + opacity: vars.$disabled-opacity; cursor: not-allowed; } diff --git a/src/renderer/src/pages/game-details/hero/hero-panel-actions.scss b/src/renderer/src/pages/game-details/hero/hero-panel-actions.scss index 7b37ed13..8693aee0 100644 --- a/src/renderer/src/pages/game-details/hero/hero-panel-actions.scss +++ b/src/renderer/src/pages/game-details/hero/hero-panel-actions.scss @@ -1,18 +1,18 @@ -@use "../../../scss/variables"; +@use "../../../scss/variables" as vars; .hero-panel-actions { &__action { - border: solid 1px $muted-color; + border: solid 1px vars.$muted-color; } &__actions { display: flex; - gap: #{$spacing-unit * 2}; + gap: #{vars.$spacing-unit * 2}; } &__separator { width: 1px; - background-color: $muted-color; + background-color: vars.$muted-color; opacity: 0.2; } } 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 bb4996b9..eb50413c 100644 --- a/src/renderer/src/pages/game-details/hero/hero-panel.scss +++ b/src/renderer/src/pages/game-details/hero/hero-panel.scss @@ -1,16 +1,16 @@ -@use "../../../scss/variables"; +@use "../../../scss/variables" as vars; .hero-panel { width: 100%; height: 72px; min-height: 72px; - padding: #{$spacing-unit * 2} #{$spacing-unit * 3}; - background-color: $dark-background-color; + padding: #{vars.$spacing-unit * 2} #{vars.$spacing-unit * 3}; + background-color: vars.$dark-background-color; display: flex; align-items: center; justify-content: space-between; transition: all ease 0.2s; - border-bottom: solid 1px $border-color; + border-bottom: solid 1px vars.$border-color; position: sticky; overflow: hidden; top: 0; @@ -23,23 +23,23 @@ &__content { display: flex; flex-direction: column; - gap: $spacing-unit; + gap: vars.$spacing-unit; } &__actions { display: flex; - gap: $spacing-unit; + gap: vars.$spacing-unit; } &__download-details-row { - gap: $spacing-unit; + gap: vars.$spacing-unit; display: flex; - color: $body-color; + color: vars.$body-color; align-items: center; } &__downloads-link { - color: $body-color; + color: vars.$body-color; text-decoration: underline; } @@ -56,11 +56,11 @@ } &::-webkit-progress-value { - background-color: $muted-color; + background-color: vars.$muted-color; } &--disabled { - opacity: $disabled-opacity; + opacity: vars.$disabled-opacity; } } } diff --git a/src/renderer/src/pages/game-details/modals/download-settings-modal.scss b/src/renderer/src/pages/game-details/modals/download-settings-modal.scss index 3650fff5..184ff0a8 100644 --- a/src/renderer/src/pages/game-details/modals/download-settings-modal.scss +++ b/src/renderer/src/pages/game-details/modals/download-settings-modal.scss @@ -1,26 +1,26 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .download-settings-modal { &__container { display: flex; flex-direction: column; - gap: #{$spacing-unit * 3}; + gap: #{vars.$spacing-unit * 3}; width: 100%; } &__downloads-path-field { display: flex; - gap: $spacing-unit; + gap: vars.$spacing-unit; } &__hint-text { font-size: 12px; - color: $body-color; + color: vars.$body-color; } &__downloaders { display: grid; - gap: $spacing-unit; + gap: vars.$spacing-unit; grid-template-columns: repeat(2, 1fr); } @@ -34,7 +34,7 @@ &__downloader-icon { position: absolute; - left: #{$spacing-unit * 2}; + left: #{vars.$spacing-unit * 2}; } &__path-error { diff --git a/src/renderer/src/pages/game-details/modals/game-options-modal.scss b/src/renderer/src/pages/game-details/modals/game-options-modal.scss index 10613fe3..23fa3bdf 100644 --- a/src/renderer/src/pages/game-details/modals/game-options-modal.scss +++ b/src/renderer/src/pages/game-details/modals/game-options-modal.scss @@ -1,16 +1,16 @@ -@import "../../scss/variables"; +@use "../../scss/variables" as vars; .game-options-modal { &__options-container { display: flex; - gap: #{$spacing-unit * 2}; + gap: #{vars.$spacing-unit * 2}; flex-direction: column; } &__game-option-header { display: flex; flex-direction: column; - gap: $spacing-unit; + gap: vars.$spacing-unit; } &__game-option-header-description { @@ -19,6 +19,6 @@ &__game-option-row { display: flex; - gap: $spacing-unit; + gap: vars.$spacing-unit; } } diff --git a/src/renderer/src/pages/game-details/modals/remove-from-library-modal.scss b/src/renderer/src/pages/game-details/modals/remove-from-library-modal.scss index 77821930..15be8103 100644 --- a/src/renderer/src/pages/game-details/modals/remove-from-library-modal.scss +++ b/src/renderer/src/pages/game-details/modals/remove-from-library-modal.scss @@ -1,4 +1,4 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .remove-from-library-modal { &__delete-actions-buttons-ctn { @@ -6,6 +6,6 @@ width: 100%; justify-content: end; align-items: center; - gap: $spacing-unit; + gap: vars.$spacing-unit; } } diff --git a/src/renderer/src/pages/game-details/modals/repacks-modal.scss b/src/renderer/src/pages/game-details/modals/repacks-modal.scss index f8561ca5..e3ff2a8b 100644 --- a/src/renderer/src/pages/game-details/modals/repacks-modal.scss +++ b/src/renderer/src/pages/game-details/modals/repacks-modal.scss @@ -1,9 +1,9 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .repacks-modal { &__repacks { display: flex; - gap: $spacing-unit; + gap: vars.$spacing-unit; flex-direction: column; } @@ -12,8 +12,8 @@ text-align: left; flex-direction: column; align-items: flex-start; - gap: $spacing-unit; - color: $body-color; - padding: #{$spacing-unit * 2}; + gap: vars.$spacing-unit; + color: vars.$body-color; + padding: #{vars.$spacing-unit * 2}; } } diff --git a/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.scss b/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.scss index c84017b3..11d72f0e 100644 --- a/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.scss +++ b/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.scss @@ -1,17 +1,17 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .sidebar-section { &__button { height: 72px; - padding: #{$spacing-unit * 2}; + padding: #{vars.$spacing-unit * 2}; display: flex; align-items: center; - background-color: $background-color; - color: $muted-color; + background-color: vars.$background-color; + color: vars.$muted-color; width: 100%; cursor: pointer; transition: all ease 0.2s; - gap: $spacing-unit; + gap: vars.$spacing-unit; font-size: 14px; font-weight: bold; @@ -20,7 +20,7 @@ } &:active { - opacity: $active-opacity; + opacity: vars.$active-opacity; } } diff --git a/src/renderer/src/pages/game-details/sidebar/sidebar.scss b/src/renderer/src/pages/game-details/sidebar/sidebar.scss index 615eb9eb..466e8a24 100644 --- a/src/renderer/src/pages/game-details/sidebar/sidebar.scss +++ b/src/renderer/src/pages/game-details/sidebar/sidebar.scss @@ -1,9 +1,9 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .sidebar { &__content { - border-left: solid 1px $border-color; - background-color: $dark-background-color; + border-left: solid 1px vars.$border-color; + background-color: vars.$dark-background-color; width: 100%; height: 100%; @@ -24,7 +24,7 @@ } &__requirement-button { - border: solid 1px $border-color; + border: solid 1px vars.$border-color; border-left: none; border-right: none; border-radius: 0; @@ -32,13 +32,13 @@ } &__requirements-details { - padding: #{$spacing-unit * 2}; + padding: #{vars.$spacing-unit * 2}; line-height: 22px; font-size: 16px; a { display: flex; - color: $body-color; + color: vars.$body-color; } } @@ -46,13 +46,13 @@ display: flex; flex-direction: column; gap: 8px; - padding: #{$spacing-unit * 2}; + padding: #{vars.$spacing-unit * 2}; font-size: 16px; } &__how-long-to-beat-categories-list { margin: 0; - padding: #{$spacing-unit * 2}; + padding: #{vars.$spacing-unit * 2}; display: flex; flex-direction: column; gap: 16px; @@ -69,23 +69,23 @@ ); border-radius: 4px; padding: 8px 16px; - border: solid 1px $border-color; + border: solid 1px vars.$border-color; } &__how-long-to-beat-category-label { - color: $muted-color; + color: vars.$muted-color; } &__how-long-to-beat-category-skeleton { - border: solid 1px $border-color; + border: solid 1px vars.$border-color; border-radius: 4px; height: 76px; } &__stats-section { display: flex; - gap: #{$spacing-unit * 2}; - padding: #{$spacing-unit * 2}; + gap: #{vars.$spacing-unit * 2}; + padding: #{vars.$spacing-unit * 2}; justify-content: space-between; transition: max-height ease 0.5s; overflow: hidden; @@ -104,13 +104,13 @@ font-weight: bold; display: flex; align-items: center; - gap: $spacing-unit; + gap: vars.$spacing-unit; } &__stats-category { display: flex; flex-direction: column; - gap: #{$spacing-unit / 2}; + gap: #{vars.$spacing-unit / 2}; } &__list { @@ -118,20 +118,20 @@ margin: 0; display: flex; flex-direction: column; - gap: #{$spacing-unit * 2}; - padding: #{$spacing-unit * 2}; + gap: #{vars.$spacing-unit * 2}; + padding: #{vars.$spacing-unit * 2}; } &__list-item { display: flex; cursor: pointer; transition: all ease 0.1s; - color: $muted-color; + color: vars.$muted-color; width: 100%; overflow: hidden; border-radius: 4px; - padding: $spacing-unit; - gap: #{$spacing-unit * 2}; + padding: vars.$spacing-unit; + gap: #{vars.$spacing-unit * 2}; align-items: center; text-align: left; @@ -157,8 +157,8 @@ display: flex; justify-content: center; width: 100%; - gap: #{$spacing-unit / 2}; - color: $warning-color; + gap: #{vars.$spacing-unit / 2}; + color: vars.$warning-color; cursor: pointer; &:hover { diff --git a/src/renderer/src/pages/home/catalogue-home.scss b/src/renderer/src/pages/home/catalogue-home.scss index aace3cb5..dac1d478 100644 --- a/src/renderer/src/pages/home/catalogue-home.scss +++ b/src/renderer/src/pages/home/catalogue-home.scss @@ -1,24 +1,24 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .catalogue-home { &__categories { display: flex; - gap: $spacing-unit; + gap: vars.$spacing-unit; } &__content { width: 100%; display: flex; flex-direction: column; - gap: #{$spacing-unit * 3}; - padding: #{$spacing-unit * 3}; + gap: #{vars.$spacing-unit * 3}; + padding: #{vars.$spacing-unit * 3}; flex: 1; } &__cards { display: grid; grid-template-columns: repeat(2, 1fr); - gap: #{$spacing-unit * 2}; + gap: #{vars.$spacing-unit * 2}; transition: all ease 0.2s; } } diff --git a/src/renderer/src/pages/home/home.scss b/src/renderer/src/pages/home/home.scss index 008f9093..63e4ec4b 100644 --- a/src/renderer/src/pages/home/home.scss +++ b/src/renderer/src/pages/home/home.scss @@ -1,9 +1,9 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .home { &__header { display: flex; - gap: $spacing-unit; + gap: vars.$spacing-unit; justify-content: space-between; align-items: center; } @@ -13,8 +13,8 @@ height: 100%; display: flex; flex-direction: column; - gap: #{$spacing-unit * 3}; - padding: #{$spacing-unit * 3}; + gap: #{vars.$spacing-unit * 3}; + padding: #{vars.$spacing-unit * 3}; flex: 1; overflow-y: auto; } @@ -22,7 +22,7 @@ &__cards { display: grid; grid-template-columns: repeat(1, 1fr); - gap: #{$spacing-unit * 2}; + gap: #{vars.$spacing-unit * 2}; transition: all ease 0.2s; @media (min-width: 768px) { @@ -48,7 +48,7 @@ z-index: 1; &:active { - opacity: $active-opacity; + opacity: vars.$active-opacity; } } @@ -67,7 +67,7 @@ list-style: none; margin: 0; padding: 0; - gap: $spacing-unit; + gap: vars.$spacing-unit; } &__flame-icon { diff --git a/src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.scss b/src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.scss index a69bd72e..e42800bb 100644 --- a/src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.scss +++ b/src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.scss @@ -1,13 +1,13 @@ -@use "../../../scss/variables"; +@use "../../../scss/variables" as vars; .edit-profile-modal { &__profile-avatar-edit-container { align-self: center; display: flex; - color: $body-color; + color: vars.$body-color; justify-content: center; align-items: center; - background-color: $background-color; + background-color: vars.$background-color; position: relative; cursor: pointer; } @@ -17,7 +17,7 @@ width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); - color: $muted-color; + color: vars.$muted-color; z-index: 1; cursor: pointer; display: flex; @@ -33,7 +33,7 @@ } &__profile-avatar-container { - gap: #{$spacing-unit * 3}; + gap: #{vars.$spacing-unit * 3}; display: flex; flex-direction: column; } diff --git a/src/renderer/src/pages/profile/profile-content/locked-profile.scss b/src/renderer/src/pages/profile/profile-content/locked-profile.scss index a151c8ba..8d908a58 100644 --- a/src/renderer/src/pages/profile/profile-content/locked-profile.scss +++ b/src/renderer/src/pages/profile/profile-content/locked-profile.scss @@ -1,4 +1,4 @@ -@use "../../../scss/variables"; +@use "../../../scss/variables" as vars; .locked-profile { &__container { @@ -8,7 +8,7 @@ justify-content: center; align-items: center; flex-direction: column; - gap: $spacing-unit; + gap: vars.$spacing-unit; } &__lock-icon { @@ -19,6 +19,6 @@ display: flex; align-items: center; justify-content: center; - margin-bottom: $spacing-unit * 2; + margin-bottom: vars.$spacing-unit * 2; } } 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 33e1be85..97df3809 100644 --- a/src/renderer/src/pages/profile/profile-content/profile-content.scss +++ b/src/renderer/src/pages/profile/profile-content/profile-content.scss @@ -1,4 +1,4 @@ -@use "../../../scss/variables"; +@use "../../../scss/variables" as vars; .profile-content { &__game-cover { @@ -41,17 +41,17 @@ } &__box { - background-color: $background-color; + background-color: vars.$background-color; border-radius: 4px; - border: solid 1px $border-color; - padding: #{$spacing-unit * 2}; + border: solid 1px vars.$border-color; + padding: #{vars.$spacing-unit * 2}; } &__section-header { display: flex; align-items: center; justify-content: space-between; - margin-bottom: #{$spacing-unit * 2}; + margin-bottom: #{vars.$spacing-unit * 2}; } &__list { @@ -60,26 +60,26 @@ padding: 0; display: flex; flex-direction: column; - gap: #{$spacing-unit * 2}; + gap: #{vars.$spacing-unit * 2}; } &__friend { display: flex; - gap: $spacing-unit; + gap: vars.$spacing-unit; align-items: center; } &__friend-name { - color: $muted-color; + color: vars.$muted-color; font-weight: bold; - font-size: $body-size; + font-size: vars.$body-size; } &__right-content { width: 100%; height: 100%; display: flex; - gap: #{$spacing-unit * 2}; + gap: #{vars.$spacing-unit * 2}; flex-direction: column; transition: all ease 0.2s; @@ -98,12 +98,12 @@ display: flex; cursor: pointer; transition: all ease 0.1s; - color: $muted-color; + color: vars.$muted-color; width: 100%; overflow: hidden; border-radius: 4px; - padding: $spacing-unit; - gap: #{$spacing-unit * 2}; + padding: vars.$spacing-unit; + gap: #{vars.$spacing-unit * 2}; align-items: center; &:hover { @@ -116,12 +116,12 @@ display: flex; flex-direction: column; transition: all ease 0.1s; - color: $muted-color; + color: vars.$muted-color; width: 100%; overflow: hidden; border-radius: 4px; - padding: $spacing-unit; - gap: $spacing-unit; + padding: vars.$spacing-unit; + gap: vars.$spacing-unit; &:hover { background-color: rgba(255, 255, 255, 0.15); @@ -134,7 +134,7 @@ margin: 0; padding: 0; display: grid; - gap: #{$spacing-unit * 2}; + gap: #{vars.$spacing-unit * 2}; grid-template-columns: repeat(2, 1fr); @container (min-width: 900px) { @@ -166,7 +166,7 @@ display: flex; align-items: center; justify-content: center; - margin-bottom: #{$spacing-unit * 2}; + margin-bottom: #{vars.$spacing-unit * 2}; } &__no-games { @@ -176,7 +176,7 @@ justify-content: center; align-items: center; flex-direction: column; - gap: $spacing-unit; + gap: vars.$spacing-unit; } &__list-item-image { @@ -189,7 +189,7 @@ &__list-item-details { display: flex; flex-direction: column; - gap: $spacing-unit / 2; + gap: vars.$spacing-unit / 2; overflow: hidden; } @@ -203,7 +203,7 @@ &__list-item-description { display: flex; align-items: center; - gap: $spacing-unit; + gap: vars.$spacing-unit; } &__default-avatar-wrapper { @@ -212,8 +212,8 @@ display: flex; justify-content: center; align-items: center; - background-color: $background-color; - border: solid 1px $border-color; + background-color: vars.$background-color; + border: solid 1px vars.$border-color; border-radius: 4px; } @@ -228,14 +228,14 @@ } &::-webkit-progress-value { - background-color: $muted-color; + background-color: vars.$muted-color; border-radius: 4px; } } &__link { text-align: start; - color: $body-color; + color: vars.$body-color; &:hover { text-decoration: underline; @@ -264,9 +264,9 @@ } &__game-playtime { - background-color: $background-color; - color: $muted-color; - border: solid 1px $border-color; + background-color: vars.$background-color; + color: vars.$muted-color; + border: solid 1px vars.$border-color; border-radius: 4; display: flex; align-items: center; @@ -278,14 +278,14 @@ display: flex; justify-content: space-between; margin-bottom: 8; - color: $muted-color; + color: vars.$muted-color; overflow: hidden; height: 18; } &__container { display: flex; - gap: #{$spacing-unit * 3}; - padding: #{$spacing-unit * 3}; + gap: #{vars.$spacing-unit * 3}; + padding: #{vars.$spacing-unit * 3}; } } diff --git a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss index 3f6584fe..c2da9402 100644 --- a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss +++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss @@ -1,4 +1,4 @@ -@use "../../../scss/variables"; +@use "../../../scss/variables" as vars; .profile-hero { &__content-box { @@ -15,12 +15,12 @@ display: flex; justify-content: center; align-items: center; - background-color: $background-color; - border: solid 1px $border-color; + background-color: vars.$background-color; + border: solid 1px vars.$border-color; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.7); cursor: pointer; transition: all ease 0.3s; - color: $muted-color; + color: vars.$muted-color; position: relative; &:hover { @@ -38,9 +38,9 @@ &__information { display: flex; flex-direction: column; - gap: $spacing-unit; + gap: vars.$spacing-unit; align-items: flex-start; - color: $muted-color; + color: vars.$muted-color; z-index: 1; overflow: hidden; } @@ -60,9 +60,9 @@ width: 100%; height: 72px; min-height: 72px; - padding: #{$spacing-unit * 2} #{$spacing-unit * 3}; + padding: #{vars.$spacing-unit * 2} #{vars.$spacing-unit * 3}; display: flex; - gap: $spacing-unit; + gap: vars.$spacing-unit; justify-content: space-between; backdrop-filter: blur(15px); border-top: solid 1px rgba(255, 255, 255, 0.1); @@ -72,27 +72,27 @@ &__user-information { display: flex; - padding: #{$spacing-unit * 7} #{$spacing-unit * 3}; + padding: #{vars.$spacing-unit * 7} #{vars.$spacing-unit * 3}; align-items: center; - gap: #{$spacing-unit * 2}; + gap: #{vars.$spacing-unit * 2}; } &__current-game-wrapper { display: flex; flex-direction: column; - gap: #{$spacing-unit / 2}; + gap: #{vars.$spacing-unit / 2}; } &__current-game-details { display: flex; flex-direction: row; - gap: $spacing-unit; + gap: vars.$spacing-unit; align-items: center; } &__actions { display: flex; - gap: #{$spacing-unit}; + gap: #{vars.$spacing-unit}; justify-content: flex-end; flex: 1; } diff --git a/src/renderer/src/pages/profile/profile.scss b/src/renderer/src/pages/profile/profile.scss index 99866a61..34bc4b91 100644 --- a/src/renderer/src/pages/profile/profile.scss +++ b/src/renderer/src/pages/profile/profile.scss @@ -1,10 +1,10 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .profile { &__wrapper { width: 100%; display: flex; flex-direction: column; - gap: #{$spacing-unit * 3}; + gap: #{vars.$spacing-unit * 3}; } } diff --git a/src/renderer/src/pages/profile/report-profile/report-profile.scss b/src/renderer/src/pages/profile/report-profile/report-profile.scss index fc2a6534..44b39eaa 100644 --- a/src/renderer/src/pages/profile/report-profile/report-profile.scss +++ b/src/renderer/src/pages/profile/report-profile/report-profile.scss @@ -1,23 +1,23 @@ -@use "../../../scss/variables"; +@use "../../../scss/variables" as vars; .report-profile { &__report-button { align-self: flex-end; - color: $muted-color; - gap: $spacing-unit; + color: vars.$muted-color; + gap: vars.$spacing-unit; display: flex; cursor: pointer; align-items: center; font-size: 12px; } &__button { - margin-top: $spacing-unit; + margin-top: vars.$spacing-unit; align-self: flex-end; } &__report-modal { display: flex; flex-direction: column; - gap: #{$spacing-unit * 2}; + gap: #{vars.$spacing-unit * 2}; } } diff --git a/src/renderer/src/pages/profile/upload-background-image-button/upload-background-image-button.scss b/src/renderer/src/pages/profile/upload-background-image-button/upload-background-image-button.scss index a2c7003d..a0829d00 100644 --- a/src/renderer/src/pages/profile/upload-background-image-button/upload-background-image-button.scss +++ b/src/renderer/src/pages/profile/upload-background-image-button/upload-background-image-button.scss @@ -1,10 +1,10 @@ -@use "../../../scss/variables"; +@use "../../../scss/variables" as vars; .upload-background-image-button { position: absolute; top: 16px; right: 16px; - border-color: $body-color; + border-color: vars.$body-color; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.8); background-color: rgba(0, 0, 0, 0.1); backdrop-filter: blur(20px); diff --git a/src/renderer/src/pages/settings/add-download-source-modal.scss b/src/renderer/src/pages/settings/add-download-source-modal.scss index 739cc3a5..8c8b47e6 100644 --- a/src/renderer/src/pages/settings/add-download-source-modal.scss +++ b/src/renderer/src/pages/settings/add-download-source-modal.scss @@ -1,10 +1,10 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .download-source { &__add-source { display: flex; flex-direction: column; - gap: #{$spacing-unit}; + gap: #{vars.$spacing-unit}; min-width: 500px; } @@ -12,12 +12,12 @@ display: flex; justify-content: space-between; align-items: center; - margin-top: #{$spacing-unit * 3}; + margin-top: #{vars.$spacing-unit * 3}; } &__input { display: flex; flex-direction: column; - gap: #{$spacing-unit / 2}; + gap: #{vars.$spacing-unit / 2}; } } diff --git a/src/renderer/src/pages/settings/settings-account.scss b/src/renderer/src/pages/settings/settings-account.scss index b60278d8..cfeb837d 100644 --- a/src/renderer/src/pages/settings/settings-account.scss +++ b/src/renderer/src/pages/settings/settings-account.scss @@ -1,10 +1,10 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .settings-account { &__form { display: flex; flex-direction: column; - gap: #{$spacing-unit * 3}; + gap: #{vars.$spacing-unit * 3}; } &__blocked-user { @@ -12,14 +12,14 @@ min-width: 240px; justify-content: space-between; align-items: center; - background-color: $dark-background-color; - border: 1px solid $border-color; + background-color: vars.$dark-background-color; + border: 1px solid vars.$border-color; border-radius: 4px; - padding: $spacing-unit; + padding: vars.$spacing-unit; } &__unblock-button { - color: $muted-color; + color: vars.$muted-color; cursor: pointer; transition: all ease 0.2s; @@ -35,26 +35,26 @@ display: flex; flex-direction: column; align-items: flex-start; - gap: $spacing-unit; + gap: vars.$spacing-unit; } &__actions { display: flex; justify-content: start; align-items: center; - gap: #{$spacing-unit}; - margin-top: #{$spacing-unit * 2}; + gap: #{vars.$spacing-unit}; + margin-top: #{vars.$spacing-unit * 2}; } &__subscription-description { display: flex; flex-direction: column; - gap: #{$spacing-unit}; + gap: #{vars.$spacing-unit}; } &__subscription { display: flex; flex-direction: column; - gap: #{$spacing-unit * 2}; + gap: #{vars.$spacing-unit * 2}; } } diff --git a/src/renderer/src/pages/settings/settings-download-sources.scss b/src/renderer/src/pages/settings/settings-download-sources.scss index 4e66a8f4..e7d617cd 100644 --- a/src/renderer/src/pages/settings/settings-download-sources.scss +++ b/src/renderer/src/pages/settings/settings-download-sources.scss @@ -1,10 +1,10 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .settings-download-sources { &__download-sources { padding: 0; margin: 0; - gap: #{$spacing-unit * 2}; + gap: #{vars.$spacing-unit * 2}; display: flex; flex-direction: column; } @@ -12,23 +12,23 @@ &__download-source-item { display: flex; flex-direction: column; - background-color: $dark-background-color; + background-color: vars.$dark-background-color; border-radius: 8px; - padding: #{$spacing-unit * 2}; - gap: $spacing-unit; - border: solid 1px $border-color; + padding: #{vars.$spacing-unit * 2}; + gap: vars.$spacing-unit; + border: solid 1px vars.$border-color; transition: all ease 0.2s; &--is-syncing { - opacity: $disabled-opacity; + opacity: vars.$disabled-opacity; } } &__download-source-item-header { - margin-bottom: $spacing-unit; + margin-bottom: vars.$spacing-unit; display: flex; flex-direction: column; - gap: $spacing-unit; + gap: vars.$spacing-unit; } &__download-sources-header { @@ -40,8 +40,8 @@ &__navigate-to-catalogue-button { display: flex; align-items: center; - gap: $spacing-unit; - color: $muted-color; + gap: vars.$spacing-unit; + color: vars.$muted-color; text-decoration: underline; cursor: pointer; diff --git a/src/renderer/src/pages/settings/settings-real-debrid.scss b/src/renderer/src/pages/settings/settings-real-debrid.scss index d0d646f2..95797b81 100644 --- a/src/renderer/src/pages/settings/settings-real-debrid.scss +++ b/src/renderer/src/pages/settings/settings-real-debrid.scss @@ -1,22 +1,22 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .settings-real-debrid { &__form { display: flex; flex-direction: column; - gap: $spacing-unit; + gap: vars.$spacing-unit; } &__description { - margin-bottom: #{$spacing-unit * 2}; + margin-bottom: #{vars.$spacing-unit * 2}; } &__field-spacing { - margin-top: #{$spacing-unit}; + margin-top: #{vars.$spacing-unit}; } &__submit-button { align-self: flex-end; - margin-top: #{$spacing-unit * 2}; + margin-top: #{vars.$spacing-unit * 2}; } } diff --git a/src/renderer/src/pages/settings/settings.scss b/src/renderer/src/pages/settings/settings.scss index eaf2a151..86e1ce65 100644 --- a/src/renderer/src/pages/settings/settings.scss +++ b/src/renderer/src/pages/settings/settings.scss @@ -1,4 +1,4 @@ -@use "../../scss/variables"; +@use "../../scss/variables" as vars; .settings { &__container { @@ -8,20 +8,20 @@ } &__content { - background-color: $background-color; + background-color: vars.$background-color; width: 100%; height: 100%; - padding: #{$spacing-unit * 3}; - border: solid 1px $border-color; + padding: #{vars.$spacing-unit * 3}; + border: solid 1px vars.$border-color; box-shadow: 0px 0px 15px 0px #000000; border-radius: 8px; - gap: #{$spacing-unit * 2}; + gap: #{vars.$spacing-unit * 2}; display: flex; flex-direction: column; } &__categories { display: flex; - gap: $spacing-unit; + gap: vars.$spacing-unit; } } diff --git a/src/renderer/src/pages/shared-modals/hydra-cloud/hydra-cloud.scss b/src/renderer/src/pages/shared-modals/hydra-cloud/hydra-cloud.scss index 58ea28ca..50a9bcec 100644 --- a/src/renderer/src/pages/shared-modals/hydra-cloud/hydra-cloud.scss +++ b/src/renderer/src/pages/shared-modals/hydra-cloud/hydra-cloud.scss @@ -1,10 +1,10 @@ -@use "../../../scss/variables"; +@use "../../../scss/variables" as vars; .hydra-cloud { &__on-close { display: flex; width: 500px; - flex-direction: "column"; - gap: #{$spacing-unit * 2}; + flex-direction: column; + gap: #{vars.$spacing-unit * 2}; } } diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.scss b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.scss index 9d2e9841..b42162c5 100644 --- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.scss +++ b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.scss @@ -1,9 +1,9 @@ -@use "../../../scss/variables"; +@use "../../../scss/variables" as vars; .user-friend-modal { &__friend-list-display-name { font-weight: bold; - font-size: $body-size; + font-size: vars.$body-size; text-align: left; overflow: hidden; text-overflow: ellipsis; @@ -12,10 +12,10 @@ &__friend-list-container { display: flex; - gap: #{$spacing-unit * 3}; + gap: #{vars.$spacing-unit * 3}; align-items: center; border-radius: 4px; - border: solid 1px $border-color; + border: solid 1px vars.$border-color; width: 100%; height: 54px; min-height: 54px; @@ -35,20 +35,20 @@ height: 100%; width: 100%; flex-direction: row; - color: $body-color; - gap: #{$spacing-unit + $spacing-unit / 2}; - padding: 0 $spacing-unit; + color: vars.$body-color; + gap: #{vars.$spacing-unit + vars.$spacing-unit / 2}; + padding: 0 vars.$spacing-unit; } &__friend-list-actions { - position: "absolute"; - right: "8px"; - display: "flex"; - gap: #{$spacing-unit}; + position: absolute; + right: 8px; + display: flex; + gap: #{vars.$spacing-unit}; } &__friend-request-item { - color: $body-color; + color: vars.$body-color; &:hover { background-color: rgba(255, 255, 255, 0.15); @@ -57,36 +57,36 @@ &__accept-request-button { cursor: pointer; - color: $body-color; + color: vars.$body-color; width: 28px; height: 28px; &:hover { - color: $success-color; + color: vars.$success-color; } } &__cancel-request-button { cursor: pointer; - color: $body-color; + color: vars.$body-color; width: 28px; height: 28px; &:hover { - color: $danger-color; + color: vars.$danger-color; } } &__friend-code-button { - color: $body-color; + color: vars.$body-color; cursor: pointer; display: flex; - gap: $spacing-unit / 2; + gap: vars.$spacing-unit / 2; align-items: center; transition: all ease 0.2s; &:hover { - color: $muted-color; + color: vars.$muted-color; } } &__add-friend-controls { @@ -94,7 +94,7 @@ flex-direction: row; justify-content: center; align-items: center; - gap: #{$spacing-unit}; + gap: #{vars.$spacing-unit}; } &__text-field-container { @@ -108,6 +108,6 @@ &__pending-container { display: flex; flex-direction: column; - gap: #{$spacing-unit * 2}; + gap: #{vars.$spacing-unit * 2}; } }