mirror of
https://github.com/hydralauncher/hydra.git
synced 2025-02-02 16:23:48 +03:00
fixed everything
This commit is contained in:
parent
1bbf3b27bf
commit
d50bb137e6
@ -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 {
|
||||
|
@ -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%;
|
||||
}
|
||||
|
||||
|
@ -44,17 +44,16 @@
|
||||
animation-name: slideIn;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
&__content {
|
||||
display: flex;
|
||||
gap: vars.$spacing-unit * 2;
|
||||
padding: vars.$spacing-unit * 2;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__progress {
|
||||
&__progress {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
|
||||
@ -65,28 +64,29 @@
|
||||
&::-webkit-progress-value {
|
||||
background-color: vars.$muted-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__close-button {
|
||||
&__close-button {
|
||||
color: vars.$body-color;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon-container {
|
||||
&__icon-container {
|
||||
display: flex;
|
||||
gap: var(--spacing-unit);
|
||||
}
|
||||
}
|
||||
|
||||
&__success-icon {
|
||||
&__success-icon {
|
||||
color: vars.$success-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__error-icon {
|
||||
&__error-icon {
|
||||
color: vars.$danger-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__warning-icon {
|
||||
&__warning-icon {
|
||||
color: vars.$warning-color;
|
||||
}
|
||||
}
|
@ -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;
|
||||
|
@ -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[];
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -1,4 +1,4 @@
|
||||
@use "../../scss/variables" as vars;
|
||||
@use "../../../scss/variables" as vars;
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
|
@ -1,4 +1,4 @@
|
||||
@use "../../scss/variables" as vars;
|
||||
@use "../../../scss/variables" as vars;
|
||||
|
||||
.description-header {
|
||||
width: 100%;
|
||||
|
@ -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%;
|
||||
|
@ -1,7 +1,5 @@
|
||||
@use "../../scss/variables" as vars;
|
||||
|
||||
$hero-height: 300px;
|
||||
|
||||
@keyframes slide-in {
|
||||
0% {
|
||||
transform: translateY(#{40 + vars.$spacing-unit * 2}px);
|
||||
|
@ -1,4 +1,4 @@
|
||||
@use "../../scss/variables" as vars;
|
||||
@use "../../../scss/variables" as vars;
|
||||
|
||||
.download-settings-modal {
|
||||
&__container {
|
||||
|
@ -1,4 +1,4 @@
|
||||
@use "../../scss/variables" as vars;
|
||||
@use "../../../scss/variables" as vars;
|
||||
|
||||
.game-options-modal {
|
||||
&__options-container {
|
||||
|
@ -1,4 +1,4 @@
|
||||
@use "../../scss/variables" as vars;
|
||||
@use "../../../scss/variables" as vars;
|
||||
|
||||
.remove-from-library-modal {
|
||||
&__delete-actions-buttons-ctn {
|
||||
|
@ -1,4 +1,4 @@
|
||||
@use "../../scss/variables" as vars;
|
||||
@use "../../../scss/variables" as vars;
|
||||
|
||||
.repacks-modal {
|
||||
&__repacks {
|
||||
|
@ -1,4 +1,4 @@
|
||||
@use "../../scss/variables" as vars;
|
||||
@use "../../../scss/variables" as vars;
|
||||
|
||||
.sidebar-section {
|
||||
&__button {
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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};
|
||||
|
Loading…
Reference in New Issue
Block a user