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

fixed everything

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/renderer/src/app.scss
View File

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

2
src/renderer/src/components/sidebar/sidebar-profile.scss
View File

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

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

@ -44,49 +44,49 @@
animation-name: slideIn; animation-name: slideIn;
transform: translateY(0); transform: translateY(0);
} }
}
&__content { &__content {
display: flex; display: flex;
gap: vars.$spacing-unit * 2; gap: vars.$spacing-unit * 2;
padding: vars.$spacing-unit * 2; padding: vars.$spacing-unit * 2;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
}
&__progress {
width: 100%;
height: 5px;
&::-webkit-progress-bar {
background-color: vars.$dark-background-color;
} }
&::-webkit-progress-value { &__progress {
background-color: vars.$muted-color; width: 100%;
height: 5px;
&::-webkit-progress-bar {
background-color: vars.$dark-background-color;
}
&::-webkit-progress-value {
background-color: vars.$muted-color;
}
} }
}
&__close-button { &__close-button {
color: vars.$body-color; color: vars.$body-color;
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
&__icon-container { &__icon-container {
display: flex; display: flex;
gap: var(--spacing-unit); gap: var(--spacing-unit);
} }
&__success-icon { &__success-icon {
color: vars.$success-color; color: vars.$success-color;
} }
&__error-icon { &__error-icon {
color: vars.$danger-color; color: vars.$danger-color;
} }
&__warning-icon { &__warning-icon {
color: vars.$warning-color; color: vars.$warning-color;
} }
}

14
src/renderer/src/pages/achievements/achievement-panel.scss
View File

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

2
src/renderer/src/pages/achievements/achievement-panel.tsx
View File

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

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

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

2
src/renderer/src/pages/downloads/download-group.scss
View File

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

2
src/renderer/src/pages/game-details/cloud-sync-modal/cloud-sync-modal.scss
View File

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

2
src/renderer/src/pages/game-details/description-header/description-header.scss
View File

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

4
src/renderer/src/pages/game-details/gallery-slider/gallery-slider.scss
View File

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

2
src/renderer/src/pages/game-details/game-details.scss
View File

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

2
src/renderer/src/pages/game-details/modals/download-settings-modal.scss
View File

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

2
src/renderer/src/pages/game-details/modals/game-options-modal.scss
View File

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

2
src/renderer/src/pages/game-details/modals/remove-from-library-modal.scss
View File

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

2
src/renderer/src/pages/game-details/modals/repacks-modal.scss
View File

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

2
src/renderer/src/pages/game-details/sidebar-section/sidebar-section.scss
View File

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

6
src/renderer/src/pages/game-details/sidebar/sidebar.scss
View File

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

6
src/renderer/src/pages/profile/profile-content/profile-content.scss
View File

@ -72,7 +72,7 @@
&__friend-name { &__friend-name {
color: vars.$muted-color; color: vars.$muted-color;
font-weight: bold; font-weight: bold;
font-size: vars.$body-size; font-size: vars.$body-font-size;
} }
&__right-content { &__right-content {
@ -189,7 +189,7 @@
&__list-item-details { &__list-item-details {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: vars.$spacing-unit / 2; gap: calc(vars.$spacing-unit / 2);
overflow: hidden; overflow: hidden;
} }
@ -259,7 +259,7 @@
justify-content: flex-end; justify-content: flex-end;
height: 100%; height: 100%;
width: 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; padding: 8;
} }

2
src/renderer/src/pages/profile/profile-hero/profile-hero.scss
View File

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

2
src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.tsx
View File

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

6
src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.scss
View File

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

5
src/renderer/src/scss/_variables.scss
View File

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