external/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2025-03-09 15:40:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added "as vars;" + vars.$

Browse source
This commit is contained in:
Nate 2025-01-18 14:13:57 -03:00
parent 3c9d036efd
commit 1bbf3b27bf
57 changed files with 491 additions and 491 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/renderer/src/app.scss
View file

@ -1,4 +1,4 @@
@import "./scss/variables"; @use "./scss/variables";
* { * {
box-sizing: border-box; box-sizing: border-box;

8
src/renderer/src/components/avatar/avatar.scss
View file

@ -1,14 +1,14 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.profile-avatar { .profile-avatar {
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: $background-color; background-color: vars.$background-color;
border: solid 1px $border-color; border: solid 1px vars.$border-color;
cursor: pointer; cursor: pointer;
color: $muted-color; color: vars.$muted-color;
position: relative; position: relative;
&__image { &__image {

8
src/renderer/src/components/backdrop/backdrop.scss
View file

@ -1,4 +1,4 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.backdrop { .backdrop {
animation-name: backdrop-fade-in; animation-name: backdrop-fade-in;
@ -10,9 +10,9 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: $backdrop-z-index; z-index: vars.$backdrop-z-index;
top: 0; top: 0;
padding: calc($spacing-unit * 3); padding: calc(vars.$spacing-unit * 3);
backdrop-filter: blur(2px); backdrop-filter: blur(2px);
transition: all ease 0.2s; transition: all ease 0.2s;
@ -23,7 +23,7 @@
} }
&--windows { &--windows {
padding-top: calc(#{$spacing-unit * 3} + 35); padding-top: calc(#{vars.$spacing-unit * 3} + 35);
} }
} }

8
src/renderer/src/components/badge/badge.scss
View file

@ -1,10 +1,10 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.badge { .badge {
color: $muted-color; color: vars.$muted-color;
font-size: 10px; font-size: 10px;
padding: calc($spacing-unit / 2) $spacing-unit; padding: calc(vars.$spacing-unit / 2) vars.$spacing-unit;
border: solid 1px $muted-color; border: solid 1px vars.$muted-color;
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
align-items: center; align-items: center;

14
src/renderer/src/components/bottom-panel/bottom-panel.scss
View file

@ -1,23 +1,23 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.bottom-panel { .bottom-panel {
width: 100%; width: 100%;
border-top: solid 1px $border-color; border-top: solid 1px vars.$border-color;
background-color: $background-color; background-color: vars.$background-color;
padding: calc($spacing-unit / 2) calc($spacing-unit * 2); padding: calc(vars.$spacing-unit / 2) calc(vars.$spacing-unit * 2);
display: flex; display: flex;
align-items: center; align-items: center;
transition: all ease 0.2s; transition: all ease 0.2s;
justify-content: space-between; justify-content: space-between;
position: relative; position: relative;
z-index: $bottom-panel-z-index; z-index: vars.$bottom-panel-z-index;
&__downloads-button { &__downloads-button {
color: $body-color; color: vars.$body-color;
border-bottom: solid 1px transparent; border-bottom: solid 1px transparent;
&:hover { &:hover {
border-bottom: solid 1px $body-color; border-bottom: solid 1px vars.$body-color;
cursor: pointer; cursor: pointer;
} }
} }

26
src/renderer/src/components/button/button.scss
View file

@ -1,8 +1,8 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.button { .button {
padding: $spacing-unit $spacing-unit * 2; padding: vars.$spacing-unit vars.$spacing-unit * 2;
background-color: $muted-color; background-color: vars.$muted-color;
border-radius: 8px; border-radius: 8px;
border: solid 1px transparent; border: solid 1px transparent;
transition: all ease 0.2s; transition: all ease 0.2s;
@ -11,14 +11,14 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: $spacing-unit; gap: vars.$spacing-unit;
&:active { &:active {
opacity: $active-opacity; opacity: vars.$active-opacity;
} }
&:disabled { &:disabled {
opacity: $disabled-opacity; opacity: vars.$disabled-opacity;
cursor: not-allowed; cursor: not-allowed;
} }
@ -28,14 +28,14 @@
} }
&:disabled { &:disabled {
background-color: $muted-color; background-color: vars.$muted-color;
} }
} }
&--outline { &--outline {
background-color: transparent; background-color: transparent;
border: solid 1px $border-color; border: solid 1px vars.$border-color;
color: $muted-color; color: vars.$muted-color;
&:hover { &:hover {
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
@ -47,14 +47,14 @@
} }
&--dark { &--dark {
background-color: $dark-background-color; background-color: vars.$dark-background-color;
color: $muted-color; color: vars.$muted-color;
} }
&--danger { &--danger {
border-color: transparent; border-color: transparent;
background-color: $danger-color; background-color: vars.$danger-color;
color: $muted-color; color: vars.$muted-color;
&:hover { &:hover {
background-color: #b3203f; background-color: #b3203f;

8
src/renderer/src/components/checkbox-field/checkbox-field.scss
View file

@ -1,23 +1,23 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.checkbox-field { .checkbox-field {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
gap: $spacing-unit; gap: vars.$spacing-unit;
cursor: pointer; cursor: pointer;
&__checkbox { &__checkbox {
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 4px; border-radius: 4px;
background-color: $dark-background-color; background-color: vars.$dark-background-color;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
position: relative; position: relative;
transition: all ease 0.2s; transition: all ease 0.2s;
border: solid 1px $border-color; border: solid 1px vars.$border-color;
&:hover { &:hover {
border-color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.5);
} }

6
src/renderer/src/components/confirmation-modal/confirmation-modal.scss
View file

@ -1,14 +1,14 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.confirmation-modal { .confirmation-modal {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: calc($spacing-unit * 2); gap: calc(vars.$spacing-unit * 2);
&__actions { &__actions {
display: flex; display: flex;
align-self: flex-end; align-self: flex-end;
gap: calc($spacing-unit * 2); gap: calc(vars.$spacing-unit * 2);
} }
&__description { &__description {
font-size: 16px; font-size: 16px;

16
src/renderer/src/components/dropdown-menu/dropdown-menu.scss
View file

@ -1,9 +1,9 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.dropdown-menu { .dropdown-menu {
&__content { &__content {
background-color: $dark-background-color; background-color: vars.$dark-background-color;
border: 1px solid $border-color; border: 1px solid vars.$border-color;
border-radius: 6px; border-radius: 6px;
min-width: 200px; min-width: 200px;
flex-direction: column; flex-direction: column;
@ -20,13 +20,13 @@
padding: 4px 12px; padding: 4px 12px;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: $muted-color; color: vars.$muted-color;
} }
&__separator { &__separator {
width: 100%; width: 100%;
height: 1px; height: 1px;
background-color: $border-color; background-color: vars.$border-color;
} }
&__item { &__item {
@ -49,12 +49,12 @@
} }
&:not(&__item--disabled) &__item:hover { &:not(&__item--disabled) &__item:hover {
background-color: $background-color; background-color: vars.$background-color;
color: $muted-color; color: vars.$muted-color;
} }
&__item:focus { &__item:focus {
background-color: $background-color; background-color: vars.$background-color;
outline: none; outline: none;
} }

24
src/renderer/src/components/game-card/game-card.scss
View file

@ -1,4 +1,4 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.game-card { .game-card {
width: 100%; width: 100%;
@ -7,12 +7,12 @@
overflow: hidden; overflow: hidden;
border-radius: 4px; border-radius: 4px;
transition: all ease 0.2s; transition: all ease 0.2s;
border: solid 1px $border-color; border: solid 1px vars.$border-color;
cursor: pointer; cursor: pointer;
z-index: 1; z-index: 1;
&:active { &:active {
opacity: $active-opacity; opacity: vars.$active-opacity;
} }
&__backdrop { &__backdrop {
@ -37,10 +37,10 @@
&__content { &__content {
color: #dadbe1; color: #dadbe1;
padding: $spacing-unit calc($spacing-unit * 2); padding: vars.$spacing-unit calc(vars.$spacing-unit * 2);
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: $spacing-unit; gap: vars.$spacing-unit;
flex-direction: column; flex-direction: column;
transition: all ease 0.2s; transition: all ease 0.2s;
transform: translateY(24px); transform: translateY(24px);
@ -56,21 +56,21 @@
display: flex; display: flex;
margin: 0; margin: 0;
padding: 0; padding: 0;
gap: $spacing-unit; gap: vars.$spacing-unit;
flex-wrap: wrap; flex-wrap: wrap;
list-style: none; list-style: none;
} }
&__specifics { &__specifics {
display: flex; display: flex;
gap: calc($spacing-unit * 2); gap: calc(vars.$spacing-unit * 2);
justify-content: center; justify-content: center;
} }
&__specifics-item { &__specifics-item {
gap: $spacing-unit; gap: vars.$spacing-unit;
display: flex; display: flex;
color: $muted-color; color: vars.$muted-color;
font-size: 12px; font-size: 12px;
align-items: flex-end; align-items: flex-end;
} }
@ -78,8 +78,8 @@
&__title-container { &__title-container {
display: flex; display: flex;
align-items: center; align-items: center;
gap: $spacing-unit; gap: vars.$spacing-unit;
color: $muted-color; color: vars.$muted-color;
} }
&__shop-icon { &__shop-icon {
@ -89,7 +89,7 @@
} }
&__no-download-label { &__no-download-label {
color: $body-color; color: vars.$body-color;
font-weight: bold; font-weight: bold;
} }

14
src/renderer/src/components/header/auto-update-header.scss
View file

@ -1,27 +1,27 @@
@use "../../scss/globals.scss"; @use "../../scss/variables" as vars;
.auto-update-sub-header { .auto-update-sub-header {
border-bottom: solid 1px globals.$body-color; border-bottom: solid 1px vars.$body-color;
padding: calc(globals.$spacing-unit / 2) calc(globals.$spacing-unit * 3); padding: calc(vars.$spacing-unit / 2) calc(vars.$spacing-unit * 3);
&__new-version-link { &__new-version-link {
display: flex; display: flex;
align-items: center; align-items: center;
gap: globals.$spacing-unit; gap: vars.$spacing-unit;
color: #8e919b; color: #8e919b;
font-size: 12px; font-size: 12px;
} }
&__new-version-icon { &__new-version-icon {
color: globals.$success-color; color: vars.$success-color;
} }
&__new-version-button { &__new-version-button {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: globals.$spacing-unit; gap: vars.$spacing-unit;
color: globals.$body-color; color: vars.$body-color;
font-size: 12px; font-size: 12px;
&:hover { &:hover {

30
src/renderer/src/components/header/header.scss
View file

@ -1,16 +1,16 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.header { .header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: calc($spacing-unit * 2); gap: calc(vars.$spacing-unit * 2);
-webkit-app-region: drag; -webkit-app-region: drag;
width: 100%; width: 100%;
padding: calc($spacing-unit * 2) calc($spacing-unit * 3); padding: calc(vars.$spacing-unit * 2) calc(vars.$spacing-unit * 3);
color: $muted-color; color: vars.$muted-color;
border-bottom: solid 1px $border-color; border-bottom: solid 1px vars.$border-color;
background-color: $dark-background-color; background-color: vars.$dark-background-color;
&--dragging-disabled { &--dragging-disabled {
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
@ -21,13 +21,13 @@
} }
&__search { &__search {
background-color: $background-color; background-color: vars.$background-color;
display: inline-flex; display: inline-flex;
transition: all ease 0.2s; transition: all ease 0.2s;
width: 200px; width: 200px;
align-items: center; align-items: center;
border-radius: 8px; border-radius: 8px;
border: solid 1px $border-color; border: solid 1px vars.$border-color;
height: 40px; height: 40px;
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
&:hover { &:hover {
@ -60,7 +60,7 @@
color: inherit; color: inherit;
cursor: pointer; cursor: pointer;
transition: all ease 0.2s; transition: all ease 0.2s;
padding: $spacing-unit; padding: vars.$spacing-unit;
&:hover { &:hover {
color: #dadbe1; color: #dadbe1;
@ -70,13 +70,13 @@
&__section { &__section {
display: flex; display: flex;
align-items: center; align-items: center;
gap: calc($spacing-unit * 2); gap: calc(vars.$spacing-unit * 2);
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
&__back-button { &__back-button {
color: $body-color; color: vars.$body-color;
cursor: pointer; cursor: pointer;
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
position: absolute; position: absolute;
@ -112,13 +112,13 @@
&__new-version-link { &__new-version-link {
display: flex; display: flex;
align-items: center; align-items: center;
gap: $spacing-unit; gap: vars.$spacing-unit;
color: $body-color; color: vars.$body-color;
font-size: $new-version-font-size; font-size: vars.$new-version-font-size;
} }
&__new-version-icon { &__new-version-icon {
color: $success-color; color: vars.$success-color;
} }
} }

12
src/renderer/src/components/hero/hero.scss
View file

@ -1,4 +1,4 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.hero { .hero {
width: 100%; width: 100%;
@ -10,7 +10,7 @@
overflow: hidden; overflow: hidden;
box-shadow: 0px 0px 15px 0px #000000; box-shadow: 0px 0px 15px 0px #000000;
cursor: pointer; cursor: pointer;
border: solid 1px $border-color; border: solid 1px vars.$border-color;
z-index: 1; z-index: 1;
&__media { &__media {
@ -39,17 +39,17 @@
&__description { &__description {
max-width: 700px; max-width: 700px;
color: $muted-color; color: vars.$muted-color;
text-align: left; text-align: left;
line-height: 20px; line-height: 20px;
margin-top: $spacing-unit * 2; margin-top: vars.$spacing-unit * 2;
} }
&__content { &__content {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: $spacing-unit * 4 $spacing-unit * 3; padding: vars.$spacing-unit * 4 vars.$spacing-unit * 3;
gap: $spacing-unit * 2; gap: vars.$spacing-unit * 2;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;

4
src/renderer/src/components/link/link.scss
View file

@ -1,8 +1,8 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.link { .link {
text-decoration: none; text-decoration: none;
color: $muted-color; color: vars.$muted-color;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;

18
src/renderer/src/components/modal/modal.scss
View file

@ -1,15 +1,15 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.modal { .modal {
animation: scale-fade-in 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none animation: scale-fade-in 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none
running; running;
background-color: $background-color; background-color: vars.$background-color;
border-radius: 4px; border-radius: 4px;
min-width: 400px; min-width: 400px;
max-width: 600px; max-width: 600px;
color: $body-color; color: vars.$body-color;
max-height: 100%; max-height: 100%;
border: solid 1px $border-color; border: solid 1px vars.$border-color;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -27,14 +27,14 @@
&__content { &__content {
height: 100%; height: 100%;
overflow: auto; overflow: auto;
padding: calc($spacing-unit * 3) calc($spacing-unit * 2); padding: calc(vars.$spacing-unit * 3) calc(vars.$spacing-unit * 2);
} }
&__header { &__header {
display: flex; display: flex;
gap: $spacing-unit; gap: vars.$spacing-unit;
padding: calc($spacing-unit * 2); padding: calc(vars.$spacing-unit * 2);
border-bottom: solid 1px $border-color; border-bottom: solid 1px vars.$border-color;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
@ -50,7 +50,7 @@
} }
&__close-button-icon { &__close-button-icon {
color: $body-color; color: vars.$body-color;
} }
} }

18
src/renderer/src/components/select-field/select-field.scss
View file

@ -1,4 +1,4 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.select-field { .select-field {
display: inline-flex; display: inline-flex;
@ -6,7 +6,7 @@
width: fit-content; width: fit-content;
align-items: center; align-items: center;
border-radius: 8px; border-radius: 8px;
border: 1px solid $border-color; border: 1px solid vars.$border-color;
height: 40px; height: 40px;
min-height: 40px; min-height: 40px;
&:hover { &:hover {
@ -18,15 +18,15 @@
} }
&__primary { &__primary {
background-color: $dark-background-color; background-color: vars.$dark-background-color;
} }
&__dark { &__dark {
background-color: $background-color; background-color: vars.$background-color;
} }
&__option { &__option {
background-color: $dark-background-color; background-color: vars.$dark-background-color;
border-right: 4px solid; border-right: 4px solid;
border-color: transparent; border-color: transparent;
border-radius: 8px; border-radius: 8px;
@ -36,14 +36,14 @@
color: #dadbe1; color: #dadbe1;
cursor: default; cursor: default;
font-family: inherit; font-family: inherit;
font-size: $body-font-size; font-size: vars.$body-font-size;
text-overflow: ellipsis; text-overflow: ellipsis;
padding: $spacing-unit; padding: vars.$spacing-unit;
} }
&__label { &__label {
margin-bottom: $spacing-unit; margin-bottom: vars.$spacing-unit;
display: block; display: block;
color: $body-color; color: vars.$body-color;
} }
} }

18
src/renderer/src/components/sidebar/sidebar-profile.scss
View file

@ -1,21 +1,21 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.sidebar-profile { .sidebar-profile {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
gap: $spacing-unit; gap: vars.$spacing-unit;
padding: $spacing-unit $spacing-unit * 2; padding: vars.$spacing-unit vars.$spacing-unit * 2;
&__button { &__button {
display: flex; display: flex;
cursor: pointer; cursor: pointer;
transition: all ease 0.1s; transition: all ease 0.1s;
color: $muted-color; color: vars.$muted-color;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
border-radius: 4px; border-radius: 4px;
padding: $spacing-unit $spacing-unit; padding: vars.$spacing-unit vars.$spacing-unit;
&:hover { &:hover {
background-color: rgba(255, 255, 255, 0.15); background-color: rgba(255, 255, 255, 0.15);
@ -25,7 +25,7 @@
&__button-content { &__button-content {
display: flex; display: flex;
align-items: center; align-items: center;
gap: $spacing-unit + $spacing-unit / 2; gap: vars.$spacing-unit + vars.$spacing-unit / 2;
width: 100%; width: 100%;
} }
@ -48,14 +48,14 @@
} }
&__friends-button { &__friends-button {
color: $muted-color; color: vars.$muted-color;
cursor: pointer; cursor: pointer;
border-radius: 50%; border-radius: 50%;
width: 40px; width: 40px;
min-width: 40px; min-width: 40px;
min-height: 40px; min-height: 40px;
height: 40px; height: 40px;
background-color: $background-color; background-color: vars.$background-color;
position: relative; position: relative;
transition: all ease 0.3s; transition: all ease 0.3s;
@ -65,7 +65,7 @@
} }
&__friends-button-badge { &__friends-button-badge {
background-color: $success-color; background-color: vars.$success-color;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

38
src/renderer/src/components/sidebar/sidebar.scss
View file

@ -1,30 +1,30 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.sidebar { .sidebar {
background-color: $dark-background-color; background-color: vars.$dark-background-color;
color: $muted-color; color: vars.$muted-color;
flex-direction: column; flex-direction: column;
display: flex; display: flex;
transition: opacity ease 0.2s; transition: opacity ease 0.2s;
border-right: solid 1px $border-color; border-right: solid 1px vars.$border-color;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
padding-top: $spacing-unit; padding-top: vars.$spacing-unit;
&__resizing { &__resizing {
opacity: $active-opacity; opacity: vars.$active-opacity;
pointer-events: none; pointer-events: none;
} }
&__darwin { &__darwin {
padding-top: calc($spacing-unit * 6); padding-top: calc(vars.$spacing-unit * 6);
} }
&__content { &__content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: calc($spacing-unit * 2); padding: calc(vars.$spacing-unit * 2);
gap: calc($spacing-unit * 2); gap: calc(vars.$spacing-unit * 2);
width: 100%; width: 100%;
overflow: auto; overflow: auto;
} }
@ -41,7 +41,7 @@
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
gap: calc($spacing-unit / 2); gap: calc(vars.$spacing-unit / 2);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
@ -52,7 +52,7 @@
cursor: pointer; cursor: pointer;
text-wrap: nowrap; text-wrap: nowrap;
display: flex; display: flex;
color: $muted-color; color: vars.$muted-color;
border-radius: 4px; border-radius: 4px;
&:hover { &:hover {
background-color: rgba(255, 255, 255, 0.15); background-color: rgba(255, 255, 255, 0.15);
@ -63,7 +63,7 @@
} }
&--muted { &--muted {
opacity: $disabled-opacity; opacity: vars.$disabled-opacity;
&:hover { &:hover {
opacity: 1; opacity: 1;
@ -75,11 +75,11 @@
color: inherit; color: inherit;
display: flex; display: flex;
align-items: center; align-items: center;
gap: $spacing-unit; gap: vars.$spacing-unit;
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
padding: 9px $spacing-unit; padding: 9px vars.$spacing-unit;
} }
&__menu-item-button-label { &__menu-item-button-label {
@ -102,20 +102,20 @@
} }
&__section { &__section {
gap: calc($spacing-unit * 2); gap: calc(vars.$spacing-unit * 2);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-bottom: $spacing-unit; padding-bottom: vars.$spacing-unit;
} }
&__help-button { &__help-button {
color: $muted-color; color: vars.$muted-color;
padding: $spacing-unit calc($spacing-unit * 2); padding: vars.$spacing-unit calc(vars.$spacing-unit * 2);
gap: 9px; gap: 9px;
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
border-top: solid 1px $border-color; border-top: solid 1px vars.$border-color;
transition: background-color ease 0.1s; transition: background-color ease 0.1s;
&:hover { &:hover {

28
src/renderer/src/components/text-field/text-field.scss
View file

@ -1,8 +1,8 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.text-field-container { .text-field-container {
flex: 1; flex: 1;
gap: $spacing-unit; gap: vars.$spacing-unit;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -13,28 +13,28 @@
width: 100%; width: 100%;
align-items: center; align-items: center;
border-radius: 8px; border-radius: 8px;
border: solid 1px $border-color; border: solid 1px vars.$border-color;
height: 40px; height: 40px;
min-height: 40px; min-height: 40px;
&__primary { &__primary {
background-color: $dark-background-color; background-color: vars.$dark-background-color;
} }
&__dark { &__dark {
background-color: $background-color; background-color: vars.$background-color;
} }
&__has-error { &__has-error {
border-color: $danger-color; border-color: vars.$danger-color;
} }
&__focused { &__focused {
border-color: $search-border-color-focused; border-color: vars.$search-border-color-focused;
} }
&:not(&--focused):hover { &:not(&--focused):hover {
border-color: $search-border-color-hover; border-color: vars.$search-border-color-hover;
} }
} }
@ -44,11 +44,11 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
outline: none; outline: none;
color: $search-input-color; color: vars.$search-input-color;
cursor: default; cursor: default;
font-family: inherit; font-family: inherit;
text-overflow: ellipsis; text-overflow: ellipsis;
padding: $spacing-unit; padding: vars.$spacing-unit;
&:focus { &:focus {
cursor: text; cursor: text;
@ -61,15 +61,15 @@
.text-field__toggle-password-button { .text-field__toggle-password-button {
cursor: pointer; cursor: pointer;
color: $muted-color; color: vars.$muted-color;
padding: $spacing-unit; padding: vars.$spacing-unit;
} }
.text-field__wrapper { .text-field__wrapper {
display: flex; display: flex;
gap: $spacing-unit; gap: vars.$spacing-unit;
} }
.text-field__error-label { .text-field__error-label {
color: $danger-color; color: vars.$danger-color;
} }

26
src/renderer/src/components/toast/toast.scss
View file

@ -1,4 +1,4 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
@keyframes slideIn { @keyframes slideIn {
0% { 0% {
@ -23,16 +23,16 @@
animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
max-height: 80px; max-height: 80px;
position: fixed; position: fixed;
background-color: $background-color; background-color: vars.$background-color;
border-radius: 4px; border-radius: 4px;
border: solid 1px $border-color; border: solid 1px vars.$border-color;
right: $spacing-unit * 2; right: vars.$spacing-unit * 2;
bottom: 42px; bottom: 42px;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
z-index: $toast-z-index; z-index: vars.$toast-z-index;
max-width: 500px; max-width: 500px;
&--closing { &--closing {
@ -48,8 +48,8 @@
&__content { &__content {
display: flex; display: flex;
gap: $spacing-unit * 2; gap: vars.$spacing-unit * 2;
padding: $spacing-unit * 2; padding: vars.$spacing-unit * 2;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
@ -59,16 +59,16 @@
height: 5px; height: 5px;
&::-webkit-progress-bar { &::-webkit-progress-bar {
background-color: $dark-background-color; background-color: vars.$dark-background-color;
} }
&::-webkit-progress-value { &::-webkit-progress-value {
background-color: $muted-color; background-color: vars.$muted-color;
} }
} }
&__close-button { &__close-button {
color: $body-color; color: vars.$body-color;
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -80,13 +80,13 @@
} }
&__success-icon { &__success-icon {
color: $success-color; color: vars.$success-color;
} }
&__error-icon { &__error-icon {
color: $danger-color; color: vars.$danger-color;
} }
&__warning-icon { &__warning-icon {
color: $warning-color; color: vars.$warning-color;
} }

24
src/renderer/src/pages/achievements/achievement-panel.scss
View file

@ -1,35 +1,35 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.achievement-panel { .achievement-panel {
width: 100%; width: 100%;
padding: #{$spacing-unit * 2} #{$spacing-unit * 3}; padding: #{vars.$spacing-unit * 2} #{vars.$spacing-unit * 3};
background-color: $color-background; background-color: vars.$color-background;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
border-bottom: solid 1px $color-border; border-bottom: solid 1px vars.$color-border;
&__content { &__content {
display: flex; display: flex;
gap: $spacing-unit; gap: vars.$spacing-unit;
justify-content: center; justify-content: center;
} }
&__actions { &__actions {
display: flex; display: flex;
gap: $spacing-unit; gap: vars.$spacing-unit;
} }
&__download-details-row { &__download-details-row {
gap: $spacing-unit; gap: vars.$spacing-unit;
display: flex; display: flex;
color: $color-body; color: vars.$color-body;
align-items: center; align-items: center;
} }
&__downloads-link { &__downloads-link {
color: $color-body; color: vars.$color-body;
text-decoration: underline; text-decoration: underline;
} }
@ -46,17 +46,17 @@
} }
&::-webkit-progress-value { &::-webkit-progress-value {
background-color: $color-muted; background-color: vars.$color-muted;
} }
&--disabled { &--disabled {
opacity: $opacity-disabled; opacity: vars.$opacity-disabled;
} }
} }
&__link { &__link {
text-align: start; text-align: start;
color: $color-body; color: vars.$color-body;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;

48
src/renderer/src/pages/achievements/achievements.scss
View file

@ -1,4 +1,4 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
$hero-height: 150px; $hero-height: 150px;
$logo-height: 100px; $logo-height: 100px;
@ -16,8 +16,8 @@ $logo-max-width: 200px;
&__hero { &__hero {
width: 100%; width: 100%;
height: $hero-height; height: vars.$hero-height;
min-height: $hero-height; min-height: vars.$hero-height;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
@ -25,7 +25,7 @@ $logo-max-width: 200px;
} }
&__hero-content { &__hero-content {
padding: #{$spacing-unit * 2}; padding: #{vars.$spacing-unit * 2};
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -33,8 +33,8 @@ $logo-max-width: 200px;
} }
&__game-logo { &__game-logo {
width: $logo-max-width; width: vars.$logo-max-width;
height: $logo-height; height: vars.$logo-height;
object-fit: contain; object-fit: contain;
transition: all ease 0.2s; transition: all ease 0.2s;
@ -54,9 +54,9 @@ $logo-max-width: 200px;
&__table-header { &__table-header {
width: 100%; width: 100%;
background-color: $dark-background-color; background-color: vars.$dark-background-color;
transition: all ease 0.2s; transition: all ease 0.2s;
border-bottom: solid 1px $border-color; border-bottom: solid 1px vars.$border-color;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 1;
@ -71,20 +71,20 @@ $logo-max-width: 200px;
margin: 0; margin: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: #{$spacing-unit * 2}; gap: #{vars.$spacing-unit * 2};
padding: #{$spacing-unit * 2}; padding: #{vars.$spacing-unit * 2};
width: 100%; width: 100%;
background-color: $background-color; background-color: vars.$background-color;
} }
&__list-item { &__list-item {
transition: all ease 0.1s; transition: all ease 0.1s;
color: $muted-color; color: vars.$muted-color;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
border-radius: 4px; border-radius: 4px;
padding: $spacing-unit; padding: vars.$spacing-unit;
gap: #{$spacing-unit * 2}; gap: #{vars.$spacing-unit * 2};
align-items: center; align-items: center;
text-align: left; text-align: left;
@ -116,7 +116,7 @@ $logo-max-width: 200px;
} }
&::-webkit-progress-value { &::-webkit-progress-value {
background-color: $muted-color; background-color: vars.$muted-color;
border-radius: 4px; border-radius: 4px;
} }
} }
@ -136,20 +136,20 @@ $logo-max-width: 200px;
&__hero-panel-skeleton { &__hero-panel-skeleton {
width: 100%; width: 100%;
padding: #{$spacing-unit * 2}; padding: #{vars.$spacing-unit * 2};
display: flex; display: flex;
align-items: center; align-items: center;
background-color: $background-color; background-color: vars.$background-color;
height: 72px; height: 72px;
border-bottom: solid 1px $border-color; border-bottom: solid 1px vars.$border-color;
} }
&__list-item-skeleton { &__list-item-skeleton {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
border-radius: 4px; border-radius: 4px;
padding: $spacing-unit; padding: vars.$spacing-unit;
gap: #{$spacing-unit * 2}; gap: #{vars.$spacing-unit * 2};
} }
&__profile-avatar { &__profile-avatar {
@ -159,7 +159,7 @@ $logo-max-width: 200px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: $background-color; background-color: vars.$background-color;
position: relative; position: relative;
object-fit: cover; object-fit: cover;
} }
@ -171,7 +171,7 @@ $logo-max-width: 200px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: $background-color; background-color: vars.$background-color;
position: relative; position: relative;
object-fit: cover; object-fit: cover;
} }
@ -181,8 +181,8 @@ $logo-max-width: 200px;
display: flex; display: flex;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
gap: #{$spacing-unit / 2}; gap: #{vars.$spacing-unit / 2};
color: $body-color; color: vars.$body-color;
cursor: pointer; cursor: pointer;
&:hover { &:hover {

8
src/renderer/src/pages/catalogue/catalogue.scss
View file

@ -1,10 +1,10 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.catalogue { .catalogue {
overflow-y: auto; overflow-y: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: calc($spacing-unit * 2); gap: calc(vars.$spacing-unit * 2);
width: 100%; width: 100%;
padding: 16px; padding: 16px;
scroll-behavior: smooth; scroll-behavior: smooth;
@ -13,10 +13,10 @@
width: 270px; width: 270px;
min-width: 270px; min-width: 270px;
max-width: 270px; max-width: 270px;
background-color: $dark-background-color; background-color: vars.$dark-background-color;
border-radius: 4px; border-radius: 4px;
padding: 16px; padding: 16px;
border: 1px solid $border-color; border: 1px solid vars.$border-color;
align-self: flex-start; align-self: flex-start;
} }

16
src/renderer/src/pages/catalogue/game-item.scss
View file

@ -1,7 +1,7 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.game-item { .game-item {
background-color: $dark-background-color; background-color: vars.$dark-background-color;
width: 100%; width: 100%;
color: #fff; color: #fff;
display: flex; display: flex;
@ -9,9 +9,9 @@
overflow: hidden; overflow: hidden;
position: relative; position: relative;
border-radius: 4px; border-radius: 4px;
border: 1px solid $border-color; border: 1px solid vars.$border-color;
cursor: pointer; cursor: pointer;
gap: calc($spacing-unit * 2); gap: calc(vars.$spacing-unit * 2);
transition: all ease 0.2s; transition: all ease 0.2s;
&:hover { &:hover {
@ -22,7 +22,7 @@
width: 200px; width: 200px;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
border-right: 1px solid $border-color; border-right: 1px solid vars.$border-color;
} }
&__details { &__details {
@ -30,11 +30,11 @@
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
gap: 4px; gap: 4px;
padding: calc($spacing-unit * 2) 0; padding: calc(vars.$spacing-unit * 2) 0;
} }
&__genres { &__genres {
color: $body-color; color: vars.$body-color;
font-size: 12px; font-size: 12px;
text-align: left; text-align: left;
margin-bottom: 4px; margin-bottom: 4px;
@ -42,7 +42,7 @@
&__repackers { &__repackers {
display: flex; display: flex;
gap: $spacing-unit; gap: vars.$spacing-unit;
flex-wrap: wrap; flex-wrap: wrap;
} }
} }

4
src/renderer/src/pages/downloads/delete-game-modal.scss
View file

@ -1,4 +1,4 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.delete-game-modal { .delete-game-modal {
&__actions-buttons-ctn { &__actions-buttons-ctn {
@ -6,6 +6,6 @@
width: 100%; width: 100%;
justify-content: end; justify-content: end;
align-items: center; align-items: center;
gap: $spacing-unit; gap: vars.$spacing-unit;
} }
} }

32
src/renderer/src/pages/downloads/download-group.scss
View file

@ -1,17 +1,17 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.download-group { .download-group {
&__title-wrapper { &__title-wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: $spacing-unit; margin-bottom: vars.$spacing-unit;
gap: $spacing-unit; gap: vars.$spacing-unit;
} }
&__title { &__title {
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
color: $body-color; color: vars.$body-color;
text-align: left; text-align: left;
font-size: 16px; font-size: 16px;
display: block; display: block;
@ -25,24 +25,24 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: $spacing-unit * 2; gap: vars.$spacing-unit * 2;
} }
&__downloads { &__downloads {
width: 100%; width: 100%;
gap: #{$spacing-unit * 2}; gap: #{vars.$spacing-unit * 2};
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0; margin: 0;
padding: 0; padding: 0;
margin-top: $spacing-unit; margin-top: vars.$spacing-unit;
} }
&__cover { &__cover {
width: 280px; width: 280px;
min-width: 280px; min-width: 280px;
height: auto; height: auto;
border-right: solid 1px $border-color; border-right: solid 1px vars.$border-color;
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
@ -50,7 +50,7 @@
&__cover-content { &__cover-content {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: $spacing-unit; padding: vars.$spacing-unit;
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
justify-content: flex-end; justify-content: flex-end;
@ -74,10 +74,10 @@
&__download { &__download {
width: 100%; width: 100%;
background-color: $background-color; background-color: vars.$background-color;
display: flex; display: flex;
border-radius: 8px; border-radius: 8px;
border: solid 1px $border-color; border: solid 1px vars.$border-color;
overflow: hidden; overflow: hidden;
box-shadow: 0px 0px 5px 0px #000000; box-shadow: 0px 0px 5px 0px #000000;
transition: all ease 0.2s; transition: all ease 0.2s;
@ -91,27 +91,27 @@
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
justify-content: center; justify-content: center;
gap: #{$spacing-unit / 2}; gap: #{vars.$spacing-unit / 2};
font-size: 14px; font-size: 14px;
} }
&__right-content { &__right-content {
display: flex; display: flex;
padding: #{$spacing-unit * 2}; padding: #{vars.$spacing-unit * 2};
flex: 1; flex: 1;
gap: $spacing-unit; gap: vars.$spacing-unit;
background: linear-gradient(90deg, transparent 20%, rgb(0 0 0 / 20%) 100%); background: linear-gradient(90deg, transparent 20%, rgb(0 0 0 / 20%) 100%);
} }
&__actions { &__actions {
display: flex; display: flex;
align-items: center; align-items: center;
gap: $spacing-unit; gap: vars.$spacing-unit;
} }
&__group { &__group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: #{$spacing-unit * 2}; gap: #{vars.$spacing-unit * 2};
} }
} }

10
src/renderer/src/pages/downloads/downloads.scss
View file

@ -1,16 +1,16 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.downloads { .downloads {
&__container { &__container {
display: flex; display: flex;
padding: #{$spacing-unit * 3}; padding: #{vars.$spacing-unit * 3};
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
} }
&__groups { &__groups {
display: flex; display: flex;
gap: #{$spacing-unit * 3}; gap: #{vars.$spacing-unit * 3};
flex-direction: column; flex-direction: column;
} }
@ -22,7 +22,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-bottom: #{$spacing-unit * 2}; margin-bottom: #{vars.$spacing-unit * 2};
} }
&__no-downloads { &__no-downloads {
@ -32,6 +32,6 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
gap: $spacing-unit; gap: vars.$spacing-unit;
} }
} }

8
src/renderer/src/pages/editor/editor.scss
View file

@ -1,18 +1,18 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.editor-header { .editor-header {
width: 100%; width: 100%;
height: 36px; height: 36px;
background-color: $dark-background-color; background-color: vars.$dark-background-color;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: start; justify-content: start;
padding: 0 calc($spacing-unit * 2); padding: 0 calc(vars.$spacing-unit * 2);
-webkit-app-region: drag; -webkit-app-region: drag;
} }
.editor-header-title { .editor-header-title {
font-size: 7px; font-size: 7px;
font-weight: 500; font-weight: 500;
color: $body-color; color: vars.$body-color;
} }

10
src/renderer/src/pages/game-details/cloud-sync-files-modal/cloud-sync-files-modal.scss
View file

@ -1,9 +1,9 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.cloud-sync-files-modal { .cloud-sync-files-modal {
&__mapping-methods { &__mapping-methods {
display: grid; display: grid;
gap: $spacing-unit; gap: vars.$spacing-unit;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
@ -13,13 +13,13 @@
padding: 0; padding: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $spacing-unit; gap: vars.$spacing-unit;
margin-top: #{$spacing-unit * 2}; margin-top: #{vars.$spacing-unit * 2};
} }
&__file-item { &__file-item {
flex: 1; flex: 1;
color: $muted-color; color: vars.$muted-color;
text-decoration: underline; text-decoration: underline;
display: flex; display: flex;
cursor: pointer; cursor: pointer;

22
src/renderer/src/pages/game-details/cloud-sync-modal/cloud-sync-modal.scss
View file

@ -1,4 +1,4 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
@keyframes rotate { @keyframes rotate {
0% { 0% {
@ -12,7 +12,7 @@
.cloud-sync-modal { .cloud-sync-modal {
&__artifacts { &__artifacts {
display: flex; display: flex;
gap: $spacing-unit; gap: vars.$spacing-unit;
flex-direction: column; flex-direction: column;
list-style: none; list-style: none;
margin: 0; margin: 0;
@ -24,11 +24,11 @@
text-align: left; text-align: left;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
gap: $spacing-unit; gap: vars.$spacing-unit;
color: $body-color; color: vars.$body-color;
padding: #{$spacing-unit * 2}; padding: #{vars.$spacing-unit * 2};
background-color: $dark-background-color; background-color: vars.$dark-background-color;
border: 1px solid $border-color; border: 1px solid vars.$border-color;
border-radius: 4px; border-radius: 4px;
justify-content: space-between; justify-content: space-between;
} }
@ -45,11 +45,11 @@
height: 5px; height: 5px;
&::-webkit-progress-bar { &::-webkit-progress-bar {
background-color: $dark-background-color; background-color: vars.$dark-background-color;
} }
&::-webkit-progress-value { &::-webkit-progress-value {
background-color: $muted-color; background-color: vars.$muted-color;
} }
} }
@ -60,11 +60,11 @@
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
text-decoration: underline; text-decoration: underline;
color: $body-color; color: vars.$body-color;
&:disabled { &:disabled {
cursor: not-allowed; cursor: not-allowed;
opacity: $disabled-opacity; opacity: vars.$disabled-opacity;
} }
} }
} }

8
src/renderer/src/pages/game-details/description-header/description-header.scss
View file

@ -1,17 +1,17 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.description-header { .description-header {
width: 100%; width: 100%;
padding: #{$spacing-unit * 2}; padding: #{vars.$spacing-unit * 2};
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background-color: $background-color; background-color: vars.$background-color;
height: 72px; height: 72px;
&__info { &__info {
display: flex; display: flex;
gap: $spacing-unit; gap: vars.$spacing-unit;
flex-direction: column; flex-direction: column;
} }
} }

20
src/renderer/src/pages/game-details/gallery-slider/gallery-slider.scss
View file

@ -1,8 +1,8 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.gallery-slider { .gallery-slider {
&__container { &__container {
padding: #{$spacing-unit * 3} #{$spacing-unit * 2}; padding: #{vars.$spacing-unit * 3} #{vars.$spacing-unit * 2};
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -34,13 +34,13 @@
&__preview { &__preview {
width: 100%; width: 100%;
padding: $spacing-unit 0; padding: vars.$spacing-unit 0;
height: 100%; height: 100%;
display: flex; display: flex;
position: relative; position: relative;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
gap: #{$spacing-unit / 2}; gap: #{vars.$spacing-unit / 2};
@media (min-width: 1280px) { @media (min-width: 1280px) {
width: 60%; width: 60%;
@ -66,7 +66,7 @@
translate 0.3s ease-in-out, translate 0.3s ease-in-out,
opacity 0.2s ease; opacity 0.2s ease;
border-radius: 4px; border-radius: 4px;
border: solid 1px $border-color; border: solid 1px vars.$border-color;
overflow: hidden; overflow: hidden;
&:hover { &:hover {
@ -90,7 +90,7 @@
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
border-radius: 50%; border-radius: 50%;
color: $muted-color; color: vars.$muted-color;
width: 48px; width: 48px;
height: 48px; height: 48px;
opacity: 0; opacity: 0;
@ -105,14 +105,14 @@
&--left { &--left {
left: 0; left: 0;
margin-left: $spacing-unit; margin-left: vars.$spacing-unit;
transform: translateX(-#{48 + $spacing-unit}px); transform: translateX(-#{48 + vars.$spacing-unit}px);
} }
&--right { &--right {
right: 0; right: 0;
margin-right: $spacing-unit; margin-right: vars.$spacing-unit;
transform: translateX(#{48 + $spacing-unit}px); transform: translateX(#{48 + vars.$spacing-unit}px);
} }
&--visible { &--visible {

58
src/renderer/src/pages/game-details/game-details.scss
View file

@ -1,10 +1,10 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
$hero-height: 300px; $hero-height: 300px;
@keyframes slide-in { @keyframes slide-in {
0% { 0% {
transform: translateY(#{40 + $spacing-unit * 2}px); transform: translateY(#{40 + vars.$spacing-unit * 2}px);
opacity: 0; opacity: 0;
} }
100% { 100% {
@ -29,8 +29,8 @@ $hero-height: 300px;
&__hero { &__hero {
width: 100%; width: 100%;
height: $hero-height; height: vars.$hero-height;
min-height: $hero-height; min-height: vars.$hero-height;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
@ -43,7 +43,7 @@ $hero-height: 300px;
} }
&__hero-content { &__hero-content {
padding: #{$spacing-unit * 2}; padding: #{vars.$spacing-unit * 2};
height: 100%; height: 100%;
width: 100%; width: 100%;
display: flex; display: flex;
@ -63,8 +63,8 @@ $hero-height: 300px;
&__hero-image { &__hero-image {
width: 100%; width: 100%;
height: $hero-height; height: vars.$hero-height;
min-height: $hero-height; min-height: vars.$hero-height;
object-fit: cover; object-fit: cover;
object-position: top; object-position: top;
transition: all ease 0.2s; transition: all ease 0.2s;
@ -106,8 +106,8 @@ $hero-height: 300px;
flex: 1; flex: 1;
background: linear-gradient( background: linear-gradient(
0deg, 0deg,
$background-color 50%, vars.$background-color 50%,
$dark-background-color 100% vars.$dark-background-color 100%
); );
} }
@ -120,7 +120,7 @@ $hero-height: 300px;
user-select: text; user-select: text;
line-height: 22px; line-height: 22px;
font-size: 16px; font-size: 16px;
padding: #{$spacing-unit * 3} #{$spacing-unit * 2}; padding: #{vars.$spacing-unit * 3} #{vars.$spacing-unit * 2};
width: 100%; width: 100%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -131,8 +131,8 @@ $hero-height: 300px;
img { img {
border-radius: 5px; border-radius: 5px;
margin-top: $spacing-unit; margin-top: vars.$spacing-unit;
margin-bottom: #{$spacing-unit * 3}; margin-bottom: #{vars.$spacing-unit * 3};
display: block; display: block;
width: 100%; width: 100%;
height: auto; height: auto;
@ -140,15 +140,15 @@ $hero-height: 300px;
} }
a { a {
color: $body-color; color: vars.$body-color;
} }
} }
&__description-skeleton { &__description-skeleton {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $spacing-unit; gap: vars.$spacing-unit;
padding: #{$spacing-unit * 3} #{$spacing-unit * 2}; padding: #{vars.$spacing-unit * 3} #{vars.$spacing-unit * 2};
width: 100%; width: 100%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -163,16 +163,16 @@ $hero-height: 300px;
animation-name: slide-in; animation-name: slide-in;
animation-duration: 0.2s; animation-duration: 0.2s;
position: fixed; position: fixed;
bottom: #{$spacing-unit * 3}; bottom: #{vars.$spacing-unit * 3};
right: #{9 + $spacing-unit * 2}px; right: #{9 + vars.$spacing-unit * 2}px;
box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 10px 1px; 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; z-index: 1;
background-color: $background-color; background-color: vars.$background-color;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: $background-color; background-color: vars.$background-color;
box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 15px 5px; box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 15px 5px;
opacity: 1; opacity: 1;
} }
@ -185,22 +185,22 @@ $hero-height: 300px;
box-shadow: none; box-shadow: none;
transform: none; transform: none;
opacity: 0.8; opacity: 0.8;
background-color: $background-color; background-color: vars.$background-color;
} }
} }
&__hero-panel-skeleton { &__hero-panel-skeleton {
width: 100%; width: 100%;
padding: #{$spacing-unit * 2}; padding: #{vars.$spacing-unit * 2};
display: flex; display: flex;
align-items: center; align-items: center;
background-color: $background-color; background-color: vars.$background-color;
height: 72px; height: 72px;
border-bottom: solid 1px $border-color; border-bottom: solid 1px vars.$border-color;
} }
&__cloud-sync-button { &__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); background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
border-radius: 8px; border-radius: 8px;
@ -210,10 +210,10 @@ $hero-height: 300px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: $spacing-unit; gap: vars.$spacing-unit;
color: $muted-color; color: vars.$muted-color;
font-size: 14px; 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); 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 animation: slide-in 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none
running; running;
@ -224,7 +224,7 @@ $hero-height: 300px;
} }
&:disabled { &:disabled {
opacity: $disabled-opacity; opacity: vars.$disabled-opacity;
cursor: not-allowed; cursor: not-allowed;
} }

8
src/renderer/src/pages/game-details/hero/hero-panel-actions.scss
View file

@ -1,18 +1,18 @@
@use "../../../scss/variables"; @use "../../../scss/variables" as vars;
.hero-panel-actions { .hero-panel-actions {
&__action { &__action {
border: solid 1px $muted-color; border: solid 1px vars.$muted-color;
} }
&__actions { &__actions {
display: flex; display: flex;
gap: #{$spacing-unit * 2}; gap: #{vars.$spacing-unit * 2};
} }
&__separator { &__separator {
width: 1px; width: 1px;
background-color: $muted-color; background-color: vars.$muted-color;
opacity: 0.2; opacity: 0.2;
} }
} }

22
src/renderer/src/pages/game-details/hero/hero-panel.scss
View file

@ -1,16 +1,16 @@
@use "../../../scss/variables"; @use "../../../scss/variables" as vars;
.hero-panel { .hero-panel {
width: 100%; width: 100%;
height: 72px; height: 72px;
min-height: 72px; min-height: 72px;
padding: #{$spacing-unit * 2} #{$spacing-unit * 3}; padding: #{vars.$spacing-unit * 2} #{vars.$spacing-unit * 3};
background-color: $dark-background-color; background-color: vars.$dark-background-color;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
transition: all ease 0.2s; transition: all ease 0.2s;
border-bottom: solid 1px $border-color; border-bottom: solid 1px vars.$border-color;
position: sticky; position: sticky;
overflow: hidden; overflow: hidden;
top: 0; top: 0;
@ -23,23 +23,23 @@
&__content { &__content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $spacing-unit; gap: vars.$spacing-unit;
} }
&__actions { &__actions {
display: flex; display: flex;
gap: $spacing-unit; gap: vars.$spacing-unit;
} }
&__download-details-row { &__download-details-row {
gap: $spacing-unit; gap: vars.$spacing-unit;
display: flex; display: flex;
color: $body-color; color: vars.$body-color;
align-items: center; align-items: center;
} }
&__downloads-link { &__downloads-link {
color: $body-color; color: vars.$body-color;
text-decoration: underline; text-decoration: underline;
} }
@ -56,11 +56,11 @@
} }
&::-webkit-progress-value { &::-webkit-progress-value {
background-color: $muted-color; background-color: vars.$muted-color;
} }
&--disabled { &--disabled {
opacity: $disabled-opacity; opacity: vars.$disabled-opacity;
} }
} }
} }

12
src/renderer/src/pages/game-details/modals/download-settings-modal.scss
View file

@ -1,26 +1,26 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.download-settings-modal { .download-settings-modal {
&__container { &__container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: #{$spacing-unit * 3}; gap: #{vars.$spacing-unit * 3};
width: 100%; width: 100%;
} }
&__downloads-path-field { &__downloads-path-field {
display: flex; display: flex;
gap: $spacing-unit; gap: vars.$spacing-unit;
} }
&__hint-text { &__hint-text {
font-size: 12px; font-size: 12px;
color: $body-color; color: vars.$body-color;
} }
&__downloaders { &__downloaders {
display: grid; display: grid;
gap: $spacing-unit; gap: vars.$spacing-unit;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
@ -34,7 +34,7 @@
&__downloader-icon { &__downloader-icon {
position: absolute; position: absolute;
left: #{$spacing-unit * 2}; left: #{vars.$spacing-unit * 2};
} }
&__path-error { &__path-error {

8
src/renderer/src/pages/game-details/modals/game-options-modal.scss
View file

@ -1,16 +1,16 @@
@import "../../scss/variables"; @use "../../scss/variables" as vars;
.game-options-modal { .game-options-modal {
&__options-container { &__options-container {
display: flex; display: flex;
gap: #{$spacing-unit * 2}; gap: #{vars.$spacing-unit * 2};
flex-direction: column; flex-direction: column;
} }
&__game-option-header { &__game-option-header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $spacing-unit; gap: vars.$spacing-unit;
} }
&__game-option-header-description { &__game-option-header-description {
@ -19,6 +19,6 @@
&__game-option-row { &__game-option-row {
display: flex; display: flex;
gap: $spacing-unit; gap: vars.$spacing-unit;
} }
} }

4
src/renderer/src/pages/game-details/modals/remove-from-library-modal.scss
View file

@ -1,4 +1,4 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.remove-from-library-modal { .remove-from-library-modal {
&__delete-actions-buttons-ctn { &__delete-actions-buttons-ctn {
@ -6,6 +6,6 @@
width: 100%; width: 100%;
justify-content: end; justify-content: end;
align-items: center; align-items: center;
gap: $spacing-unit; gap: vars.$spacing-unit;
} }
} }

10
src/renderer/src/pages/game-details/modals/repacks-modal.scss
View file

@ -1,9 +1,9 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.repacks-modal { .repacks-modal {
&__repacks { &__repacks {
display: flex; display: flex;
gap: $spacing-unit; gap: vars.$spacing-unit;
flex-direction: column; flex-direction: column;
} }
@ -12,8 +12,8 @@
text-align: left; text-align: left;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
gap: $spacing-unit; gap: vars.$spacing-unit;
color: $body-color; color: vars.$body-color;
padding: #{$spacing-unit * 2}; padding: #{vars.$spacing-unit * 2};
} }
} }

12
src/renderer/src/pages/game-details/sidebar-section/sidebar-section.scss
View file

@ -1,17 +1,17 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.sidebar-section { .sidebar-section {
&__button { &__button {
height: 72px; height: 72px;
padding: #{$spacing-unit * 2}; padding: #{vars.$spacing-unit * 2};
display: flex; display: flex;
align-items: center; align-items: center;
background-color: $background-color; background-color: vars.$background-color;
color: $muted-color; color: vars.$muted-color;
width: 100%; width: 100%;
cursor: pointer; cursor: pointer;
transition: all ease 0.2s; transition: all ease 0.2s;
gap: $spacing-unit; gap: vars.$spacing-unit;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
@ -20,7 +20,7 @@
} }
&:active { &:active {
opacity: $active-opacity; opacity: vars.$active-opacity;
} }
} }

44
src/renderer/src/pages/game-details/sidebar/sidebar.scss
View file

@ -1,9 +1,9 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.sidebar { .sidebar {
&__content { &__content {
border-left: solid 1px $border-color; border-left: solid 1px vars.$border-color;
background-color: $dark-background-color; background-color: vars.$dark-background-color;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -24,7 +24,7 @@
} }
&__requirement-button { &__requirement-button {
border: solid 1px $border-color; border: solid 1px vars.$border-color;
border-left: none; border-left: none;
border-right: none; border-right: none;
border-radius: 0; border-radius: 0;
@ -32,13 +32,13 @@
} }
&__requirements-details { &__requirements-details {
padding: #{$spacing-unit * 2}; padding: #{vars.$spacing-unit * 2};
line-height: 22px; line-height: 22px;
font-size: 16px; font-size: 16px;
a { a {
display: flex; display: flex;
color: $body-color; color: vars.$body-color;
} }
} }
@ -46,13 +46,13 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
padding: #{$spacing-unit * 2}; padding: #{vars.$spacing-unit * 2};
font-size: 16px; font-size: 16px;
} }
&__how-long-to-beat-categories-list { &__how-long-to-beat-categories-list {
margin: 0; margin: 0;
padding: #{$spacing-unit * 2}; padding: #{vars.$spacing-unit * 2};
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
@ -69,23 +69,23 @@
); );
border-radius: 4px; border-radius: 4px;
padding: 8px 16px; padding: 8px 16px;
border: solid 1px $border-color; border: solid 1px vars.$border-color;
} }
&__how-long-to-beat-category-label { &__how-long-to-beat-category-label {
color: $muted-color; color: vars.$muted-color;
} }
&__how-long-to-beat-category-skeleton { &__how-long-to-beat-category-skeleton {
border: solid 1px $border-color; border: solid 1px vars.$border-color;
border-radius: 4px; border-radius: 4px;
height: 76px; height: 76px;
} }
&__stats-section { &__stats-section {
display: flex; display: flex;
gap: #{$spacing-unit * 2}; gap: #{vars.$spacing-unit * 2};
padding: #{$spacing-unit * 2}; padding: #{vars.$spacing-unit * 2};
justify-content: space-between; justify-content: space-between;
transition: max-height ease 0.5s; transition: max-height ease 0.5s;
overflow: hidden; overflow: hidden;
@ -104,13 +104,13 @@
font-weight: bold; font-weight: bold;
display: flex; display: flex;
align-items: center; align-items: center;
gap: $spacing-unit; gap: vars.$spacing-unit;
} }
&__stats-category { &__stats-category {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: #{$spacing-unit / 2}; gap: #{vars.$spacing-unit / 2};
} }
&__list { &__list {
@ -118,20 +118,20 @@
margin: 0; margin: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: #{$spacing-unit * 2}; gap: #{vars.$spacing-unit * 2};
padding: #{$spacing-unit * 2}; padding: #{vars.$spacing-unit * 2};
} }
&__list-item { &__list-item {
display: flex; display: flex;
cursor: pointer; cursor: pointer;
transition: all ease 0.1s; transition: all ease 0.1s;
color: $muted-color; color: vars.$muted-color;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
border-radius: 4px; border-radius: 4px;
padding: $spacing-unit; padding: vars.$spacing-unit;
gap: #{$spacing-unit * 2}; gap: #{vars.$spacing-unit * 2};
align-items: center; align-items: center;
text-align: left; text-align: left;
@ -157,8 +157,8 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
gap: #{$spacing-unit / 2}; gap: #{vars.$spacing-unit / 2};
color: $warning-color; color: vars.$warning-color;
cursor: pointer; cursor: pointer;
&:hover { &:hover {

10
src/renderer/src/pages/home/catalogue-home.scss
View file

@ -1,24 +1,24 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.catalogue-home { .catalogue-home {
&__categories { &__categories {
display: flex; display: flex;
gap: $spacing-unit; gap: vars.$spacing-unit;
} }
&__content { &__content {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: #{$spacing-unit * 3}; gap: #{vars.$spacing-unit * 3};
padding: #{$spacing-unit * 3}; padding: #{vars.$spacing-unit * 3};
flex: 1; flex: 1;
} }
&__cards { &__cards {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: #{$spacing-unit * 2}; gap: #{vars.$spacing-unit * 2};
transition: all ease 0.2s; transition: all ease 0.2s;
} }
} }

14
src/renderer/src/pages/home/home.scss
View file

@ -1,9 +1,9 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.home { .home {
&__header { &__header {
display: flex; display: flex;
gap: $spacing-unit; gap: vars.$spacing-unit;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
@ -13,8 +13,8 @@
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: #{$spacing-unit * 3}; gap: #{vars.$spacing-unit * 3};
padding: #{$spacing-unit * 3}; padding: #{vars.$spacing-unit * 3};
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
} }
@ -22,7 +22,7 @@
&__cards { &__cards {
display: grid; display: grid;
grid-template-columns: repeat(1, 1fr); grid-template-columns: repeat(1, 1fr);
gap: #{$spacing-unit * 2}; gap: #{vars.$spacing-unit * 2};
transition: all ease 0.2s; transition: all ease 0.2s;
@media (min-width: 768px) { @media (min-width: 768px) {
@ -48,7 +48,7 @@
z-index: 1; z-index: 1;
&:active { &:active {
opacity: $active-opacity; opacity: vars.$active-opacity;
} }
} }
@ -67,7 +67,7 @@
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
gap: $spacing-unit; gap: vars.$spacing-unit;
} }
&__flame-icon { &__flame-icon {

10
src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.scss
View file

@ -1,13 +1,13 @@
@use "../../../scss/variables"; @use "../../../scss/variables" as vars;
.edit-profile-modal { .edit-profile-modal {
&__profile-avatar-edit-container { &__profile-avatar-edit-container {
align-self: center; align-self: center;
display: flex; display: flex;
color: $body-color; color: vars.$body-color;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: $background-color; background-color: vars.$background-color;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
} }
@ -17,7 +17,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.7);
color: $muted-color; color: vars.$muted-color;
z-index: 1; z-index: 1;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@ -33,7 +33,7 @@
} }
&__profile-avatar-container { &__profile-avatar-container {
gap: #{$spacing-unit * 3}; gap: #{vars.$spacing-unit * 3};
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }

6
src/renderer/src/pages/profile/profile-content/locked-profile.scss
View file

@ -1,4 +1,4 @@
@use "../../../scss/variables"; @use "../../../scss/variables" as vars;
.locked-profile { .locked-profile {
&__container { &__container {
@ -8,7 +8,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
gap: $spacing-unit; gap: vars.$spacing-unit;
} }
&__lock-icon { &__lock-icon {
@ -19,6 +19,6 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-bottom: $spacing-unit * 2; margin-bottom: vars.$spacing-unit * 2;
} }
} }

62
src/renderer/src/pages/profile/profile-content/profile-content.scss
View file

@ -1,4 +1,4 @@
@use "../../../scss/variables"; @use "../../../scss/variables" as vars;
.profile-content { .profile-content {
&__game-cover { &__game-cover {
@ -41,17 +41,17 @@
} }
&__box { &__box {
background-color: $background-color; background-color: vars.$background-color;
border-radius: 4px; border-radius: 4px;
border: solid 1px $border-color; border: solid 1px vars.$border-color;
padding: #{$spacing-unit * 2}; padding: #{vars.$spacing-unit * 2};
} }
&__section-header { &__section-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom: #{$spacing-unit * 2}; margin-bottom: #{vars.$spacing-unit * 2};
} }
&__list { &__list {
@ -60,26 +60,26 @@
padding: 0; padding: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: #{$spacing-unit * 2}; gap: #{vars.$spacing-unit * 2};
} }
&__friend { &__friend {
display: flex; display: flex;
gap: $spacing-unit; gap: vars.$spacing-unit;
align-items: center; align-items: center;
} }
&__friend-name { &__friend-name {
color: $muted-color; color: vars.$muted-color;
font-weight: bold; font-weight: bold;
font-size: $body-size; font-size: vars.$body-size;
} }
&__right-content { &__right-content {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
gap: #{$spacing-unit * 2}; gap: #{vars.$spacing-unit * 2};
flex-direction: column; flex-direction: column;
transition: all ease 0.2s; transition: all ease 0.2s;
@ -98,12 +98,12 @@
display: flex; display: flex;
cursor: pointer; cursor: pointer;
transition: all ease 0.1s; transition: all ease 0.1s;
color: $muted-color; color: vars.$muted-color;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
border-radius: 4px; border-radius: 4px;
padding: $spacing-unit; padding: vars.$spacing-unit;
gap: #{$spacing-unit * 2}; gap: #{vars.$spacing-unit * 2};
align-items: center; align-items: center;
&:hover { &:hover {
@ -116,12 +116,12 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transition: all ease 0.1s; transition: all ease 0.1s;
color: $muted-color; color: vars.$muted-color;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
border-radius: 4px; border-radius: 4px;
padding: $spacing-unit; padding: vars.$spacing-unit;
gap: $spacing-unit; gap: vars.$spacing-unit;
&:hover { &:hover {
background-color: rgba(255, 255, 255, 0.15); background-color: rgba(255, 255, 255, 0.15);
@ -134,7 +134,7 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
display: grid; display: grid;
gap: #{$spacing-unit * 2}; gap: #{vars.$spacing-unit * 2};
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
@container (min-width: 900px) { @container (min-width: 900px) {
@ -166,7 +166,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-bottom: #{$spacing-unit * 2}; margin-bottom: #{vars.$spacing-unit * 2};
} }
&__no-games { &__no-games {
@ -176,7 +176,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
gap: $spacing-unit; gap: vars.$spacing-unit;
} }
&__list-item-image { &__list-item-image {
@ -189,7 +189,7 @@
&__list-item-details { &__list-item-details {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $spacing-unit / 2; gap: vars.$spacing-unit / 2;
overflow: hidden; overflow: hidden;
} }
@ -203,7 +203,7 @@
&__list-item-description { &__list-item-description {
display: flex; display: flex;
align-items: center; align-items: center;
gap: $spacing-unit; gap: vars.$spacing-unit;
} }
&__default-avatar-wrapper { &__default-avatar-wrapper {
@ -212,8 +212,8 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: $background-color; background-color: vars.$background-color;
border: solid 1px $border-color; border: solid 1px vars.$border-color;
border-radius: 4px; border-radius: 4px;
} }
@ -228,14 +228,14 @@
} }
&::-webkit-progress-value { &::-webkit-progress-value {
background-color: $muted-color; background-color: vars.$muted-color;
border-radius: 4px; border-radius: 4px;
} }
} }
&__link { &__link {
text-align: start; text-align: start;
color: $body-color; color: vars.$body-color;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
@ -264,9 +264,9 @@
} }
&__game-playtime { &__game-playtime {
background-color: $background-color; background-color: vars.$background-color;
color: $muted-color; color: vars.$muted-color;
border: solid 1px $border-color; border: solid 1px vars.$border-color;
border-radius: 4; border-radius: 4;
display: flex; display: flex;
align-items: center; align-items: center;
@ -278,14 +278,14 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 8; margin-bottom: 8;
color: $muted-color; color: vars.$muted-color;
overflow: hidden; overflow: hidden;
height: 18; height: 18;
} }
&__container { &__container {
display: flex; display: flex;
gap: #{$spacing-unit * 3}; gap: #{vars.$spacing-unit * 3};
padding: #{$spacing-unit * 3}; padding: #{vars.$spacing-unit * 3};
} }
} }

26
src/renderer/src/pages/profile/profile-hero/profile-hero.scss
View file

@ -1,4 +1,4 @@
@use "../../../scss/variables"; @use "../../../scss/variables" as vars;
.profile-hero { .profile-hero {
&__content-box { &__content-box {
@ -15,12 +15,12 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: $background-color; background-color: vars.$background-color;
border: solid 1px $border-color; border: solid 1px vars.$border-color;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.7); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.7);
cursor: pointer; cursor: pointer;
transition: all ease 0.3s; transition: all ease 0.3s;
color: $muted-color; color: vars.$muted-color;
position: relative; position: relative;
&:hover { &:hover {
@ -38,9 +38,9 @@
&__information { &__information {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $spacing-unit; gap: vars.$spacing-unit;
align-items: flex-start; align-items: flex-start;
color: $muted-color; color: vars.$muted-color;
z-index: 1; z-index: 1;
overflow: hidden; overflow: hidden;
} }
@ -60,9 +60,9 @@
width: 100%; width: 100%;
height: 72px; height: 72px;
min-height: 72px; min-height: 72px;
padding: #{$spacing-unit * 2} #{$spacing-unit * 3}; padding: #{vars.$spacing-unit * 2} #{vars.$spacing-unit * 3};
display: flex; display: flex;
gap: $spacing-unit; gap: vars.$spacing-unit;
justify-content: space-between; justify-content: space-between;
backdrop-filter: blur(15px); backdrop-filter: blur(15px);
border-top: solid 1px rgba(255, 255, 255, 0.1); border-top: solid 1px rgba(255, 255, 255, 0.1);
@ -72,27 +72,27 @@
&__user-information { &__user-information {
display: flex; display: flex;
padding: #{$spacing-unit * 7} #{$spacing-unit * 3}; padding: #{vars.$spacing-unit * 7} #{vars.$spacing-unit * 3};
align-items: center; align-items: center;
gap: #{$spacing-unit * 2}; gap: #{vars.$spacing-unit * 2};
} }
&__current-game-wrapper { &__current-game-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: #{$spacing-unit / 2}; gap: #{vars.$spacing-unit / 2};
} }
&__current-game-details { &__current-game-details {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: $spacing-unit; gap: vars.$spacing-unit;
align-items: center; align-items: center;
} }
&__actions { &__actions {
display: flex; display: flex;
gap: #{$spacing-unit}; gap: #{vars.$spacing-unit};
justify-content: flex-end; justify-content: flex-end;
flex: 1; flex: 1;
} }

4
src/renderer/src/pages/profile/profile.scss
View file

@ -1,10 +1,10 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.profile { .profile {
&__wrapper { &__wrapper {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: #{$spacing-unit * 3}; gap: #{vars.$spacing-unit * 3};
} }
} }

10
src/renderer/src/pages/profile/report-profile/report-profile.scss
View file

@ -1,23 +1,23 @@
@use "../../../scss/variables"; @use "../../../scss/variables" as vars;
.report-profile { .report-profile {
&__report-button { &__report-button {
align-self: flex-end; align-self: flex-end;
color: $muted-color; color: vars.$muted-color;
gap: $spacing-unit; gap: vars.$spacing-unit;
display: flex; display: flex;
cursor: pointer; cursor: pointer;
align-items: center; align-items: center;
font-size: 12px; font-size: 12px;
} }
&__button { &__button {
margin-top: $spacing-unit; margin-top: vars.$spacing-unit;
align-self: flex-end; align-self: flex-end;
} }
&__report-modal { &__report-modal {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: #{$spacing-unit * 2}; gap: #{vars.$spacing-unit * 2};
} }
} }

4
src/renderer/src/pages/profile/upload-background-image-button/upload-background-image-button.scss
View file

@ -1,10 +1,10 @@
@use "../../../scss/variables"; @use "../../../scss/variables" as vars;
.upload-background-image-button { .upload-background-image-button {
position: absolute; position: absolute;
top: 16px; top: 16px;
right: 16px; right: 16px;
border-color: $body-color; border-color: vars.$body-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);
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px); backdrop-filter: blur(20px);

8
src/renderer/src/pages/settings/add-download-source-modal.scss
View file

@ -1,10 +1,10 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.download-source { .download-source {
&__add-source { &__add-source {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: #{$spacing-unit}; gap: #{vars.$spacing-unit};
min-width: 500px; min-width: 500px;
} }
@ -12,12 +12,12 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-top: #{$spacing-unit * 3}; margin-top: #{vars.$spacing-unit * 3};
} }
&__input { &__input {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: #{$spacing-unit / 2}; gap: #{vars.$spacing-unit / 2};
} }
} }

22
src/renderer/src/pages/settings/settings-account.scss
View file

@ -1,10 +1,10 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.settings-account { .settings-account {
&__form { &__form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: #{$spacing-unit * 3}; gap: #{vars.$spacing-unit * 3};
} }
&__blocked-user { &__blocked-user {
@ -12,14 +12,14 @@
min-width: 240px; min-width: 240px;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background-color: $dark-background-color; background-color: vars.$dark-background-color;
border: 1px solid $border-color; border: 1px solid vars.$border-color;
border-radius: 4px; border-radius: 4px;
padding: $spacing-unit; padding: vars.$spacing-unit;
} }
&__unblock-button { &__unblock-button {
color: $muted-color; color: vars.$muted-color;
cursor: pointer; cursor: pointer;
transition: all ease 0.2s; transition: all ease 0.2s;
@ -35,26 +35,26 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
gap: $spacing-unit; gap: vars.$spacing-unit;
} }
&__actions { &__actions {
display: flex; display: flex;
justify-content: start; justify-content: start;
align-items: center; align-items: center;
gap: #{$spacing-unit}; gap: #{vars.$spacing-unit};
margin-top: #{$spacing-unit * 2}; margin-top: #{vars.$spacing-unit * 2};
} }
&__subscription-description { &__subscription-description {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: #{$spacing-unit}; gap: #{vars.$spacing-unit};
} }
&__subscription { &__subscription {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: #{$spacing-unit * 2}; gap: #{vars.$spacing-unit * 2};
} }
} }

22
src/renderer/src/pages/settings/settings-download-sources.scss
View file

@ -1,10 +1,10 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.settings-download-sources { .settings-download-sources {
&__download-sources { &__download-sources {
padding: 0; padding: 0;
margin: 0; margin: 0;
gap: #{$spacing-unit * 2}; gap: #{vars.$spacing-unit * 2};
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -12,23 +12,23 @@
&__download-source-item { &__download-source-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: $dark-background-color; background-color: vars.$dark-background-color;
border-radius: 8px; border-radius: 8px;
padding: #{$spacing-unit * 2}; padding: #{vars.$spacing-unit * 2};
gap: $spacing-unit; gap: vars.$spacing-unit;
border: solid 1px $border-color; border: solid 1px vars.$border-color;
transition: all ease 0.2s; transition: all ease 0.2s;
&--is-syncing { &--is-syncing {
opacity: $disabled-opacity; opacity: vars.$disabled-opacity;
} }
} }
&__download-source-item-header { &__download-source-item-header {
margin-bottom: $spacing-unit; margin-bottom: vars.$spacing-unit;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $spacing-unit; gap: vars.$spacing-unit;
} }
&__download-sources-header { &__download-sources-header {
@ -40,8 +40,8 @@
&__navigate-to-catalogue-button { &__navigate-to-catalogue-button {
display: flex; display: flex;
align-items: center; align-items: center;
gap: $spacing-unit; gap: vars.$spacing-unit;
color: $muted-color; color: vars.$muted-color;
text-decoration: underline; text-decoration: underline;
cursor: pointer; cursor: pointer;

10
src/renderer/src/pages/settings/settings-real-debrid.scss
View file

@ -1,22 +1,22 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.settings-real-debrid { .settings-real-debrid {
&__form { &__form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $spacing-unit; gap: vars.$spacing-unit;
} }
&__description { &__description {
margin-bottom: #{$spacing-unit * 2}; margin-bottom: #{vars.$spacing-unit * 2};
} }
&__field-spacing { &__field-spacing {
margin-top: #{$spacing-unit}; margin-top: #{vars.$spacing-unit};
} }
&__submit-button { &__submit-button {
align-self: flex-end; align-self: flex-end;
margin-top: #{$spacing-unit * 2}; margin-top: #{vars.$spacing-unit * 2};
} }
} }

12
src/renderer/src/pages/settings/settings.scss
View file

@ -1,4 +1,4 @@
@use "../../scss/variables"; @use "../../scss/variables" as vars;
.settings { .settings {
&__container { &__container {
@ -8,20 +8,20 @@
} }
&__content { &__content {
background-color: $background-color; background-color: vars.$background-color;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: #{$spacing-unit * 3}; padding: #{vars.$spacing-unit * 3};
border: solid 1px $border-color; border: solid 1px vars.$border-color;
box-shadow: 0px 0px 15px 0px #000000; box-shadow: 0px 0px 15px 0px #000000;
border-radius: 8px; border-radius: 8px;
gap: #{$spacing-unit * 2}; gap: #{vars.$spacing-unit * 2};
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
&__categories { &__categories {
display: flex; display: flex;
gap: $spacing-unit; gap: vars.$spacing-unit;
} }
} }

6
src/renderer/src/pages/shared-modals/hydra-cloud/hydra-cloud.scss
View file

@ -1,10 +1,10 @@
@use "../../../scss/variables"; @use "../../../scss/variables" as vars;
.hydra-cloud { .hydra-cloud {
&__on-close { &__on-close {
display: flex; display: flex;
width: 500px; width: 500px;
flex-direction: "column"; flex-direction: column;
gap: #{$spacing-unit * 2}; gap: #{vars.$spacing-unit * 2};
} }
} }

42
src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.scss
View file

@ -1,9 +1,9 @@
@use "../../../scss/variables"; @use "../../../scss/variables" as vars;
.user-friend-modal { .user-friend-modal {
&__friend-list-display-name { &__friend-list-display-name {
font-weight: bold; font-weight: bold;
font-size: $body-size; font-size: vars.$body-size;
text-align: left; text-align: left;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -12,10 +12,10 @@
&__friend-list-container { &__friend-list-container {
display: flex; display: flex;
gap: #{$spacing-unit * 3}; gap: #{vars.$spacing-unit * 3};
align-items: center; align-items: center;
border-radius: 4px; border-radius: 4px;
border: solid 1px $border-color; border: solid 1px vars.$border-color;
width: 100%; width: 100%;
height: 54px; height: 54px;
min-height: 54px; min-height: 54px;
@ -35,20 +35,20 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
flex-direction: row; flex-direction: row;
color: $body-color; color: vars.$body-color;
gap: #{$spacing-unit + $spacing-unit / 2}; gap: #{vars.$spacing-unit + vars.$spacing-unit / 2};
padding: 0 $spacing-unit; padding: 0 vars.$spacing-unit;
} }
&__friend-list-actions { &__friend-list-actions {
position: "absolute"; position: absolute;
right: "8px"; right: 8px;
display: "flex"; display: flex;
gap: #{$spacing-unit}; gap: #{vars.$spacing-unit};
} }
&__friend-request-item { &__friend-request-item {
color: $body-color; color: vars.$body-color;
&:hover { &:hover {
background-color: rgba(255, 255, 255, 0.15); background-color: rgba(255, 255, 255, 0.15);
@ -57,36 +57,36 @@
&__accept-request-button { &__accept-request-button {
cursor: pointer; cursor: pointer;
color: $body-color; color: vars.$body-color;
width: 28px; width: 28px;
height: 28px; height: 28px;
&:hover { &:hover {
color: $success-color; color: vars.$success-color;
} }
} }
&__cancel-request-button { &__cancel-request-button {
cursor: pointer; cursor: pointer;
color: $body-color; color: vars.$body-color;
width: 28px; width: 28px;
height: 28px; height: 28px;
&:hover { &:hover {
color: $danger-color; color: vars.$danger-color;
} }
} }
&__friend-code-button { &__friend-code-button {
color: $body-color; color: vars.$body-color;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
gap: $spacing-unit / 2; gap: vars.$spacing-unit / 2;
align-items: center; align-items: center;
transition: all ease 0.2s; transition: all ease 0.2s;
&:hover { &:hover {
color: $muted-color; color: vars.$muted-color;
} }
} }
&__add-friend-controls { &__add-friend-controls {
@ -94,7 +94,7 @@
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: #{$spacing-unit}; gap: #{vars.$spacing-unit};
} }
&__text-field-container { &__text-field-container {
@ -108,6 +108,6 @@
&__pending-container { &__pending-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: #{$spacing-unit * 2}; gap: #{vars.$spacing-unit * 2};
} }
} }