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

style: update repacks modal styles for improved layout and positioning

Browse Source
This commit is contained in:
Moyasee
2026-01-20 19:03:35 +02:00
parent 9ca6a114b1
commit 10ac6c9d9c
2 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -40,15 +40,18 @@
gap: calc(globals.$spacing-unit * 1);
color: globals.$body-color;
padding: calc(globals.$spacing-unit * 2);
padding-right: calc(globals.$spacing-unit * 4);
position: relative;
}
&__availability-orb {
display: inline-block;
position: absolute;
top: calc(globals.$spacing-unit * 1.5);
right: calc(globals.$spacing-unit * 1.5);
width: 8px;
height: 8px;
border-radius: 50%;
margin-left: calc(globals.$spacing-unit * 1);
vertical-align: middle;
flex-shrink: 0;
&--online {
background-color: #22c55e;
@@ -70,10 +73,9 @@
&__repack-title {
color: globals.$muted-color;
word-break: break-word;
}
&__repack-title-text {
word-break: break-word;
display: flex;
align-items: center;
gap: calc(globals.$spacing-unit * 1);
}
&__repack-info {
@@ -87,9 +89,8 @@
border-radius: 6px;
font-size: 9px;
text-align: center;
flex-shrink: 0;
border: 1px solid rgba(34, 197, 94, 0.5);
margin-left: calc(globals.$spacing-unit * 1);
vertical-align: middle;
}
&__no-results {

17
src/renderer/src/pages/game-details/modals/repacks-modal.tsx
View File

@@ -388,16 +388,15 @@ export function RepacksModal({
onClick={() => handleRepackClick(repack)}
className="repacks-modal__repack-button"
>
<span
className={`repacks-modal__availability-orb repacks-modal__availability-orb--${availabilityStatus}`}
data-tooltip-id={tooltipId}
data-tooltip-content={t(`source_${availabilityStatus}`)}
/>
<Tooltip id={tooltipId} />
<p className="repacks-modal__repack-title">
<span className="repacks-modal__repack-title-text">
{repack.title}
</span>
<span
className={`repacks-modal__availability-orb repacks-modal__availability-orb--${availabilityStatus}`}
data-tooltip-id={tooltipId}
data-tooltip-content={t(`source_${availabilityStatus}`)}
/>
<Tooltip id={tooltipId} />
{repack.title}
{userPreferences?.enableNewDownloadOptionsBadges !==
false &&
isNewRepack(repack) && (