Refine UI styling with enhanced visual polish and consistency

Updated global styles with improved button interactions, focus states, and hover effects. Enhanced component styling across cards, headers, inputs, and buttons with refined gradients, shadows, border radii, and backdrop filters. Adjusted spacing, padding, and typography for better visual hierarchy. Improved background image treatment with enhanced filters and blend modes for better contrast and readability.
This commit is contained in:
2026-08-01 18:13:28 +02:00
parent f43ab711fd
commit c176ccc904
2 changed files with 83 additions and 66 deletions
@@ -81,6 +81,14 @@ export function useHpGlobalStyles() {
}
#root { background: transparent; }
* { -webkit-tap-highlight-color: transparent; }
button, input, select { font-family: inherit; }
button { transition: transform 140ms ease, filter 140ms ease, border-color 140ms ease, background 140ms ease; }
button:not(:disabled):hover { filter: brightness(1.12); transform: translateY(-1px); }
button:not(:disabled):active { transform: translateY(0); filter: brightness(0.98); }
button:disabled { cursor: not-allowed; opacity: 0.55; }
input:focus, select:focus { border-color: var(--hp-textGold) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--hp-textGold) 16%, transparent); }
.hp-row { transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease; }
.hp-row:hover { box-shadow: inset 0 0 0 1px rgba(233,216,166,0.12); }
`;
document.head.appendChild(style);
}, []);
@@ -89,4 +97,4 @@ export function useHpGlobalStyles() {
useEffect(() => {
applyTheme("default");
}, []);
}
}