fixed everything

This commit is contained in:
Nate 2025-01-18 15:17:52 -03:00
parent 1bbf3b27bf
commit d50bb137e6
22 changed files with 86 additions and 87 deletions

View File

@ -1,4 +1,4 @@
@use "./scss/variables";
@use "./scss/variables" as vars;
* {
box-sizing: border-box;
@ -6,7 +6,7 @@
::-webkit-scrollbar {
width: 9px;
background-color: $dark-background-color;
background-color: vars.$dark-background-color;
}
::-webkit-scrollbar-track {
@ -33,8 +33,8 @@ body {
overflow: hidden;
user-select: none;
font-family: "Noto Sans", sans-serif;
font-size: $body-font-size;
color: $body-color;
font-size: vars.$body-font-size;
color: vars.$body-color;
margin: 0;
}
@ -79,7 +79,7 @@ input::-webkit-inner-spin-button {
}
label {
font-size: $body-font-size;
font-size: vars.$body-font-size;
}
input[type="number"] {
@ -111,8 +111,8 @@ progress[value] {
height: 100%;
background: linear-gradient(
0deg,
$dark-background-color 50%,
$background-color 100%
vars.$dark-background-color 50%,
vars.$background-color 100%
);
}
@ -121,12 +121,12 @@ progress[value] {
width: 100%;
height: 35px;
min-height: 35px;
background-color: $dark-background-color;
background-color: vars.$dark-background-color;
align-items: center;
padding: 0 $spacing-unit * 2;
padding: 0 vars.$spacing-unit * 2;
-webkit-app-region: drag;
z-index: $title-bar-z-index;
border-bottom: 1px solid $border-color;
z-index: vars.$title-bar-z-index;
border-bottom: 1px solid vars.$border-color;
}
.app-container__cloud-text {

View File

@ -25,7 +25,7 @@
&__button-content {
display: flex;
align-items: center;
gap: vars.$spacing-unit + vars.$spacing-unit / 2;
gap: calc(vars.$spacing-unit + vars.$spacing-unit / 2);
width: 100%;
}

View File

@ -44,7 +44,6 @@
animation-name: slideIn;
transform: translateY(0);
}
}
&__content {
display: flex;
@ -90,3 +89,4 @@
&__warning-icon {
color: vars.$warning-color;
}
}

View File

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

View File

@ -4,7 +4,7 @@ import { UserAchievement } from "@types";
import { useSubscription } from "@renderer/hooks/use-subscription";
import { useUserDetails } from "@renderer/hooks";
import "./achievement-panel.sccs";
import "./achievement-panel.scss";
export interface AchievementPanelProps {
achievements: UserAchievement[];

View File

@ -1,9 +1,5 @@
@use "../../scss/variables" as vars;
$hero-height: 150px;
$logo-height: 100px;
$logo-max-width: 200px;
.achievements {
&__wrapper {
display: flex;
@ -16,8 +12,8 @@ $logo-max-width: 200px;
&__hero {
width: 100%;
height: vars.$hero-height;
min-height: vars.$hero-height;
height: vars.$hero-sub-height;
min-height: vars.$hero-sub-height;
display: flex;
flex-direction: column;
position: relative;
@ -181,7 +177,7 @@ $logo-max-width: 200px;
display: flex;
justify-content: center;
width: 100%;
gap: #{vars.$spacing-unit / 2};
gap: calc(vars.$spacing-unit / 2);
color: vars.$body-color;
cursor: pointer;

View File

@ -91,7 +91,7 @@
flex-direction: column;
flex: 1;
justify-content: center;
gap: #{vars.$spacing-unit / 2};
gap: calc(vars.$spacing-unit / 2);
font-size: 14px;
}

View File

@ -1,4 +1,4 @@
@use "../../scss/variables" as vars;
@use "../../../scss/variables" as vars;
@keyframes rotate {
0% {

View File

@ -1,4 +1,4 @@
@use "../../scss/variables" as vars;
@use "../../../scss/variables" as vars;
.description-header {
width: 100%;

View File

@ -1,4 +1,4 @@
@use "../../scss/variables" as vars;
@use "../../../scss/variables" as vars;
.gallery-slider {
&__container {
@ -40,7 +40,7 @@
position: relative;
overflow-x: auto;
overflow-y: hidden;
gap: #{vars.$spacing-unit / 2};
gap: calc(vars.$spacing-unit / 2);
@media (min-width: 1280px) {
width: 60%;

View File

@ -1,7 +1,5 @@
@use "../../scss/variables" as vars;
$hero-height: 300px;
@keyframes slide-in {
0% {
transform: translateY(#{40 + vars.$spacing-unit * 2}px);

View File

@ -1,4 +1,4 @@
@use "../../scss/variables" as vars;
@use "../../../scss/variables" as vars;
.download-settings-modal {
&__container {

View File

@ -1,4 +1,4 @@
@use "../../scss/variables" as vars;
@use "../../../scss/variables" as vars;
.game-options-modal {
&__options-container {

View File

@ -1,4 +1,4 @@
@use "../../scss/variables" as vars;
@use "../../../scss/variables" as vars;
.remove-from-library-modal {
&__delete-actions-buttons-ctn {

View File

@ -1,4 +1,4 @@
@use "../../scss/variables" as vars;
@use "../../../scss/variables" as vars;
.repacks-modal {
&__repacks {

View File

@ -1,4 +1,4 @@
@use "../../scss/variables" as vars;
@use "../../../scss/variables" as vars;
.sidebar-section {
&__button {

View File

@ -1,4 +1,4 @@
@use "../../scss/variables" as vars;
@use "../../../scss/variables" as vars;
.sidebar {
&__content {
@ -110,7 +110,7 @@
&__stats-category {
display: flex;
flex-direction: column;
gap: #{vars.$spacing-unit / 2};
gap: calc(vars.$spacing-unit / 2);
}
&__list {
@ -157,7 +157,7 @@
display: flex;
justify-content: center;
width: 100%;
gap: #{vars.$spacing-unit / 2};
gap: calc(vars.$spacing-unit / 2);
color: vars.$warning-color;
cursor: pointer;

View File

@ -72,7 +72,7 @@
&__friend-name {
color: vars.$muted-color;
font-weight: bold;
font-size: vars.$body-size;
font-size: vars.$body-font-size;
}
&__right-content {
@ -189,7 +189,7 @@
&__list-item-details {
display: flex;
flex-direction: column;
gap: vars.$spacing-unit / 2;
gap: calc(vars.$spacing-unit / 2);
overflow: hidden;
}
@ -259,7 +259,7 @@
justify-content: flex-end;
height: 100%;
width: 100%;
background: linear-gradient(0deg, rgba(0, 0, 0 0.7) 20%, transparent 100%);
background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 20%, transparent 100%);
padding: 8;
}

View File

@ -80,7 +80,7 @@
&__current-game-wrapper {
display: flex;
flex-direction: column;
gap: #{vars.$spacing-unit / 2};
gap: calc(vars.$spacing-unit / 2);
}
&__current-game-details {

View File

@ -2,7 +2,7 @@ import { CheckCircleIcon, XCircleIcon } from "@primer/octicons-react";
import { useTranslation } from "react-i18next";
import { Avatar } from "@renderer/components";
import "./user-friend-modal.scss";
import "@renderer/theme.scss";
import "../../../_theme.scss";
export type UserFriendItemProps = {
userId: string;

View File

@ -3,7 +3,7 @@
.user-friend-modal {
&__friend-list-display-name {
font-weight: bold;
font-size: vars.$body-size;
font-size: vars.$body-font-size;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
@ -36,7 +36,7 @@
width: 100%;
flex-direction: row;
color: vars.$body-color;
gap: #{vars.$spacing-unit + vars.$spacing-unit / 2};
gap: calc(vars.$spacing-unit + vars.$spacing-unit / 2);
padding: 0 vars.$spacing-unit;
}
@ -81,7 +81,7 @@
color: vars.$body-color;
cursor: pointer;
display: flex;
gap: vars.$spacing-unit / 2;
gap: calc(vars.$spacing-unit / 2);
align-items: center;
transition: all ease 0.2s;

View File

@ -37,6 +37,11 @@ $small-font-size: 12px;
$app-container: app-container;
$hero-height: 300px;
$hero-sub-height: 150px;
$logo-height: 100px;
$logo-max-width: 200px;
:root {
--warning-color: #{$warning-color};
--dark-background-color: #{$dark-background-color};