PublicMirrors/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2025-02-02 16:23:48 +03:00
Code Issues Actions 1 Packages Projects Releases 1 Wiki Activity

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
Show Stats 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;

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

@ -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 {

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

@ -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);
}
}

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

@ -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;

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 {
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;
}
}

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

@ -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;

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 {
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);
}

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 {
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;

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 {
&__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;
}

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 {
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;
}

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 {
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 {

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

@ -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;
}
}

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

@ -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;

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

@ -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;

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

@ -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;
}
}

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 {
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;
}
}

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 {
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;

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

@ -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 {

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 {
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;
}

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

@ -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;
}

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 {
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;

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;
$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 {

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

@ -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;
}

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 {
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;
}
}

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 {
&__actions-buttons-ctn {
@ -6,6 +6,6 @@
width: 100%;
justify-content: end;
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 {
&__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};
}
}

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

@ -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;
}
}

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

@ -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;
}

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 {
&__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;

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 {
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;
}
}
}

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 {
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;
}
}

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 {
&__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 {

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;
@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;
}

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 {
&__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;
}
}

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 {
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;
}
}
}

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 {
&__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 {

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 {
&__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;
}
}

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 {
&__delete-actions-buttons-ctn {
@ -6,6 +6,6 @@
width: 100%;
justify-content: end;
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 {
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};
}
}

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 {
&__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;
}
}

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 {
&__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 {

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 {
&__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;
}
}

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

@ -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 {

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 {
&__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;
}

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 {
&__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;
}
}

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 {
&__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};
}
}

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 {
&__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;
}

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

@ -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};
}
}

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-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};
}
}

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 {
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);

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 {
&__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};
}
}

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 {
&__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};
}
}

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 {
&__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;

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 {
&__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};
}
}

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

@ -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;
}
}

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 {
&__on-close {
display: flex;
width: 500px;
flex-direction: "column";
gap: #{$spacing-unit * 2};
flex-direction: column;
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 {
&__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};
}
}