Lightemerald/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2026-01-11 13:56:16 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Interface modification for the default game page

Browse Source
This commit is contained in:
spectre365
2025-10-22 17:17:37 -03:00
parent 864fd282f0
commit 7435bff64f
3 changed files with 71 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.env.example Normal file
View File

@@ -0,0 +1,8 @@
MAIN_VITE_API_URL=https://api-staging.hydralauncher.gg
MAIN_VITE_AUTH_URL=https://auth-staging.hydralauncher.gg
MAIN_VITE_WS_URL=wss://ws-staging.hydralauncher.gg
MAIN_VITE_EXTERNAL_RESOURCES_URL=https://assets.hydralauncher.gg
RENDERER_VITE_EXTERNAL_RESOURCES_URL=https://assets.hydralauncher.gg
MAIN_VITE_CHECKOUT_URL=https://checkout-staging.hydralauncher.gg
RENDERER_VITE_REAL_DEBRID_REFERRAL_ID=
RENDERER_VITE_TORBOX_REFERRAL_CODE=

124
src/renderer/src/pages/game-details/hero/hero-panel.scss
View File

@@ -1,78 +1,78 @@
@use "../../../scss/globals.scss";
.hero-panel-wrapper {
.hero-panel {
width: 100%;
height: 72px;
min-height: 72px;
padding: calc(globals.$spacing-unit * 2) calc(globals.$spacing-unit * 3);
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: solid 1px rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: space-between;
transition: all ease 0.2s;
border-bottom: solid 1px globals.$border-color;
overflow: hidden;
top: 0;
z-index: 2;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 8px;
&__container {
padding: 0px 12px 12px;
margin: 0;
}
.hero-panel {
width: 100%;
height: 72px;
min-height: 72px;
padding: calc(globals.$spacing-unit * 2) calc(globals.$spacing-unit * 3);
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: solid 1px rgba(255, 255, 255, 0.15);
&--stuck {
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.8);
}
&__content {
display: flex;
flex-direction: column;
gap: globals.$spacing-unit;
}
&__actions {
display: flex;
gap: globals.$spacing-unit;
}
&__download-details {
gap: globals.$spacing-unit;
display: flex;
color: globals.$body-color;
align-items: center;
justify-content: space-between;
}
&__downloads-link {
color: globals.$body-color;
text-decoration: underline;
}
&__progress-bar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
transition: all ease 0.2s;
border-bottom: solid 1px globals.$border-color;
overflow: hidden;
top: 0;
z-index: 2;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 8px;
&--stuck {
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.8);
&::-webkit-progress-bar {
background-color: transparent;
}
&__content {
display: flex;
flex-direction: column;
gap: globals.$spacing-unit;
&::-webkit-progress-value {
background-color: globals.$muted-color;
}
&__actions {
display: flex;
gap: globals.$spacing-unit;
}
&__download-details {
gap: globals.$spacing-unit;
display: flex;
color: globals.$body-color;
align-items: center;
}
&__downloads-link {
color: globals.$body-color;
text-decoration: underline;
}
&__progress-bar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
transition: all ease 0.2s;
&::-webkit-progress-bar {
background-color: transparent;
}
&::-webkit-progress-value {
background-color: globals.$muted-color;
}
&--disabled {
opacity: globals.$disabled-opacity;
}
&--disabled {
opacity: globals.$disabled-opacity;
}
}
}

2
src/renderer/src/pages/game-details/hero/hero-panel.tsx
View File

@@ -50,7 +50,7 @@ export function HeroPanel() {
game?.download?.status === "paused";
return (
<div className="hero-panel-wrapper">
<div className="hero-panel__container">
<div className="hero-panel">
<div className="hero-panel__content">{getInfo()}</div>
<div className="hero-panel__actions">