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

style: update active state styles for filter and view options; adjust achievement progress bar styles

Browse Source
This commit is contained in:
ctrlcat0x
2025-10-22 16:12:12 +05:30
parent 107b61f663
commit e19102ea66
5 changed files with 54 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/renderer/src/pages/library/filter-options.scss
View File

@@ -22,6 +22,7 @@
font-weight: 500;
transition: all ease 0.2s;
white-space: nowrap; /* prevent label and count from wrapping */
border: 1px solid rgba(0, 0, 0, 0.06);
&:hover {
color: rgba(255, 255, 255, 0.9);
@@ -29,14 +30,17 @@
}
&.active {
&.active {
color: rgba(255, 255, 255, 0.95);
background: rgba(255, 255, 255, 0.15);
color: #000;
background: #fff;
svg,
svg * {
fill: currentColor;
color: currentColor;
}
.library-filter-options__count {
background: rgba(255, 255, 255, 0.25);
color: rgba(255, 255, 255, 0.95);
background: #ebebeb;
color: rgba(0, 0, 0, 0.9);
}
}
}

23
src/renderer/src/pages/library/library-game-card-large.scss
View File

@@ -203,28 +203,39 @@
}
&__achievement-trophy {
color: #ffd700;
color: #fff;
flex-shrink: 0;
}
&__achievement-progress {
width: 100%;
height: 6px;
background: rgba(255, 255, 255, 0.1);
height: 4px;
transition: all ease 0.2s;
background-color: rgba(255, 255, 255, 0.08);
border-radius: 4px;
overflow: hidden;
&::-webkit-progress-bar {
background-color: transparent;
border-radius: 4px;
}
&::-webkit-progress-value {
background-color: globals.$muted-color;
border-radius: 4px;
}
}
&__achievement-bar {
height: 100%;
background: linear-gradient(90deg, #ffd700, #ffed4e);
background-color: globals.$muted-color;
border-radius: 4px;
transition: width 0.3s ease;
}
&__achievement-count {
font-size: 14px;
font-weight: 600;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
white-space: nowrap;
}
@@ -239,7 +250,7 @@
display: flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
padding: 10px 20px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);

27
src/renderer/src/pages/library/library-game-card.scss
View File

@@ -131,28 +131,41 @@
}
&__achievement-trophy {
color: #ffd700;
color: #fff;
flex-shrink: 0;
}
&__achievement-progress {
margin-top: 8px;
width: 100%;
height: 6px;
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
height: 4px;
transition: all ease 0.2s;
background-color: rgba(255, 255, 255, 0.08);
border-radius: 4px;
overflow: hidden;
&::-webkit-progress-bar {
background-color: transparent;
border-radius: 4px;
}
&::-webkit-progress-value {
background-color: globals.$muted-color;
border-radius: 4px;
}
}
&__achievement-bar {
height: 100%;
background: linear-gradient(90deg, #ffd700, #ffed4e);
border-radius: 3px;
background-color: globals.$muted-color;
border-radius: 4px;
transition: width 0.3s ease;
position: relative;
}
&__achievement-count {
font-size: 12px;
font-weight: 600;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
white-space: nowrap;
}

16
src/renderer/src/pages/library/library.tsx
View File

@@ -1,5 +1,5 @@
import { useEffect, useMemo, useState } from "react";
import { useLibrary, useAppDispatch, useUserDetails } from "@renderer/hooks";
import { useLibrary, useAppDispatch } from "@renderer/hooks";
import { setHeaderTitle } from "@renderer/features";
import { TelescopeIcon } from "@primer/octicons-react";
import { useTranslation } from "react-i18next";
@@ -19,7 +19,6 @@ export default function Library() {
const [searchQuery, setSearchQuery] = useState<string>("");
const dispatch = useAppDispatch();
const { t } = useTranslation("library");
const { userDetails, fetchUserDetails } = useUserDetails();
useEffect(() => {
dispatch(setHeaderTitle(t("library")));
@@ -40,13 +39,6 @@ export default function Library() {
};
}, [dispatch, t, updateLibrary]);
// Ensure we have the current user details available
useEffect(() => {
fetchUserDetails().catch(() => {
/* ignore errors - fallback to local state */
});
}, [fetchUserDetails]);
const handleOnMouseEnterGameCard = () => {
// Optional: pause animations if needed
};
@@ -128,12 +120,6 @@ export default function Library() {
{hasGames && (
<>
<div className="library__page-header">
<h1 className="library__page-title">
{`${t("Welcome", { defaultValue: "Welcome" })} ${
userDetails?.displayName || "John Doe"
}`}
</h1>
<div className="library__controls-row">
<div className="library__controls-left">
<FilterOptions

9
src/renderer/src/pages/library/view-options.scss
View File

@@ -43,8 +43,13 @@
}
&.active {
color: rgba(255, 255, 255, 0.95);
background: rgba(255, 255, 255, 0.15);
color: rgba(0, 0, 0, 0.9);
background: #fff;
svg,
svg * {
fill: currentColor;
color: currentColor;
}
}
}
}