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:
@@ -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");
|
||||
}, []);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user