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);
|
||||
}, []);
|
||||
|
||||
@@ -10,8 +10,8 @@ export const styles = {
|
||||
|
||||
shell: {
|
||||
fontFamily: '"IM Fell English", system-ui',
|
||||
padding: 16,
|
||||
maxWidth: 680,
|
||||
padding: "22px 16px 42px",
|
||||
maxWidth: 760,
|
||||
margin: "0 auto",
|
||||
},
|
||||
|
||||
@@ -22,34 +22,38 @@ export const styles = {
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
gap: 10,
|
||||
padding: 12,
|
||||
borderRadius: 16,
|
||||
background: stylesTokens.panelBg,
|
||||
border: `1px solid ${stylesTokens.panelBorder}`,
|
||||
boxShadow: "0 12px 30px rgba(0,0,0,0.45)",
|
||||
backdropFilter: "blur(6px)",
|
||||
padding: "14px 16px",
|
||||
borderRadius: 18,
|
||||
background: `linear-gradient(135deg, rgba(31, 28, 32, 0.90), ${stylesTokens.panelBg})`,
|
||||
border: `1px solid ${stylesTokens.headerBorder}`,
|
||||
boxShadow: "0 18px 42px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.08)",
|
||||
backdropFilter: "blur(14px) saturate(1.12)",
|
||||
WebkitBackdropFilter: "blur(14px) saturate(1.12)",
|
||||
},
|
||||
|
||||
card: {
|
||||
borderRadius: 18,
|
||||
borderRadius: 20,
|
||||
overflow: "hidden",
|
||||
border: `1px solid ${stylesTokens.panelBorder}`,
|
||||
background: "rgba(18, 18, 20, 0.50)",
|
||||
boxShadow: "0 18px 40px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.06)",
|
||||
background: `linear-gradient(145deg, rgba(25, 24, 28, 0.88), ${stylesTokens.panelBg})`,
|
||||
boxShadow: "0 20px 48px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.07)",
|
||||
backdropFilter: "blur(14px) saturate(1.08)",
|
||||
WebkitBackdropFilter: "blur(14px) saturate(1.08)",
|
||||
},
|
||||
|
||||
cardBody: {
|
||||
padding: 12,
|
||||
padding: "14px 16px",
|
||||
display: "flex",
|
||||
gap: 10,
|
||||
alignItems: "center",
|
||||
},
|
||||
|
||||
sectionHeader: {
|
||||
padding: "11px 14px",
|
||||
padding: "13px 16px",
|
||||
fontWeight: 1000,
|
||||
fontFamily: '"Cinzel Decorative", "IM Fell English", system-ui',
|
||||
letterSpacing: 1.0,
|
||||
letterSpacing: 1.5,
|
||||
fontSize: 14,
|
||||
color: stylesTokens.textGold,
|
||||
|
||||
// WICHTIG: Header-Farben aus Theme-Tokens, nicht hart codiert
|
||||
@@ -57,16 +61,16 @@ export const styles = {
|
||||
borderBottom: `1px solid ${stylesTokens.headerBorder}`,
|
||||
|
||||
textTransform: "uppercase",
|
||||
textShadow: "0 1px 0 rgba(0,0,0,0.6)",
|
||||
textShadow: "0 1px 0 rgba(0,0,0,0.72)",
|
||||
},
|
||||
|
||||
row: {
|
||||
display: "grid",
|
||||
gridTemplateColumns: "1fr 54px 68px",
|
||||
gap: 10,
|
||||
padding: "12px 14px",
|
||||
padding: "13px 16px",
|
||||
alignItems: "center",
|
||||
borderBottom: "1px solid rgba(233,216,166,0.08)",
|
||||
borderBottom: "1px solid rgba(233,216,166,0.10)",
|
||||
borderLeft: "4px solid rgba(0,0,0,0)",
|
||||
},
|
||||
|
||||
@@ -100,9 +104,9 @@ export const styles = {
|
||||
tagBtn: {
|
||||
padding: "8px 0",
|
||||
fontWeight: 1000,
|
||||
borderRadius: 12,
|
||||
border: `1px solid rgba(233,216,166,0.18)`,
|
||||
background: "rgba(255,255,255,0.06)",
|
||||
borderRadius: 13,
|
||||
border: `1px solid rgba(233,216,166,0.22)`,
|
||||
background: "rgba(255,255,255,0.055)",
|
||||
color: stylesTokens.textGold,
|
||||
cursor: "pointer",
|
||||
boxShadow: "inset 0 1px 0 rgba(255,255,255,0.06)",
|
||||
@@ -110,9 +114,9 @@ export const styles = {
|
||||
|
||||
helpBtn: {
|
||||
padding: "10px 12px",
|
||||
borderRadius: 12,
|
||||
border: `1px solid rgba(233,216,166,0.18)`,
|
||||
background: "rgba(255,255,255,0.06)",
|
||||
borderRadius: 13,
|
||||
border: `1px solid rgba(233,216,166,0.22)`,
|
||||
background: "rgba(255,255,255,0.055)",
|
||||
color: stylesTokens.textGold,
|
||||
fontWeight: 1000,
|
||||
cursor: "pointer",
|
||||
@@ -122,31 +126,31 @@ export const styles = {
|
||||
|
||||
input: {
|
||||
width: "100%",
|
||||
padding: "10px 12px",
|
||||
borderRadius: 14,
|
||||
border: `1px solid rgba(233,216,166,0.18)`,
|
||||
background: "rgba(10,10,12,0.55)",
|
||||
padding: "11px 12px",
|
||||
borderRadius: 13,
|
||||
border: `1px solid rgba(233,216,166,0.22)`,
|
||||
background: "rgba(7,7,10,0.64)",
|
||||
color: stylesTokens.textMain,
|
||||
outline: "none",
|
||||
fontSize: 15,
|
||||
},
|
||||
|
||||
primaryBtn: {
|
||||
padding: "10px 12px",
|
||||
borderRadius: 12,
|
||||
border: `1px solid rgba(233,216,166,0.28)`,
|
||||
background: "linear-gradient(180deg, rgba(233,216,166,0.24), rgba(233,216,166,0.10))",
|
||||
padding: "11px 15px",
|
||||
borderRadius: 13,
|
||||
border: `1px solid rgba(233,216,166,0.34)`,
|
||||
background: "linear-gradient(135deg, rgba(233,216,166,0.28), rgba(120,88,35,0.20))",
|
||||
color: stylesTokens.textGold,
|
||||
fontWeight: 1000,
|
||||
cursor: "pointer",
|
||||
boxShadow: "inset 0 1px 0 rgba(255,255,255,0.08)",
|
||||
boxShadow: "0 8px 20px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.11)",
|
||||
},
|
||||
|
||||
secondaryBtn: {
|
||||
padding: "10px 12px",
|
||||
borderRadius: 12,
|
||||
borderRadius: 13,
|
||||
border: `1px solid rgba(233,216,166,0.18)`,
|
||||
background: "rgba(255,255,255,0.05)",
|
||||
background: "rgba(255,255,255,0.055)",
|
||||
color: stylesTokens.textMain,
|
||||
fontWeight: 900,
|
||||
cursor: "pointer",
|
||||
@@ -158,12 +162,13 @@ export const styles = {
|
||||
position: "relative",
|
||||
zIndex: 1,
|
||||
marginTop: 14,
|
||||
padding: 12,
|
||||
borderRadius: 16,
|
||||
border: `1px solid rgba(233,216,166,0.14)`,
|
||||
background: "rgba(18, 18, 20, 0.40)",
|
||||
boxShadow: "0 12px 30px rgba(0,0,0,0.45)",
|
||||
backdropFilter: "blur(6px)",
|
||||
padding: 14,
|
||||
borderRadius: 20,
|
||||
border: `1px solid ${stylesTokens.panelBorder}`,
|
||||
background: `linear-gradient(145deg, rgba(25, 24, 28, 0.86), ${stylesTokens.panelBg})`,
|
||||
boxShadow: "0 18px 42px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.06)",
|
||||
backdropFilter: "blur(14px) saturate(1.08)",
|
||||
WebkitBackdropFilter: "blur(14px) saturate(1.08)",
|
||||
},
|
||||
adminTop: {
|
||||
display: "flex",
|
||||
@@ -181,7 +186,7 @@ export const styles = {
|
||||
gap: 8,
|
||||
padding: 10,
|
||||
borderRadius: 12,
|
||||
background: "rgba(255,255,255,0.06)",
|
||||
background: "rgba(255,255,255,0.055)",
|
||||
border: `1px solid rgba(233,216,166,0.10)`,
|
||||
},
|
||||
|
||||
@@ -203,11 +208,11 @@ export const styles = {
|
||||
|
||||
modalCard: {
|
||||
width: "min(560px, 100%)",
|
||||
borderRadius: 18,
|
||||
borderRadius: 20,
|
||||
border: `1px solid rgba(233,216,166,0.18)`,
|
||||
background: "rgba(12,12,14,0.96)",
|
||||
boxShadow: "0 18px 55px rgba(0,0,0,0.70)",
|
||||
padding: 14,
|
||||
background: "linear-gradient(145deg, rgba(27,25,30,0.98), rgba(11,11,14,0.98))",
|
||||
boxShadow: "0 24px 70px rgba(0,0,0,0.78), inset 0 1px 0 rgba(255,255,255,0.07)",
|
||||
padding: 16,
|
||||
maxHeight: "calc(100vh - 32px)",
|
||||
overflow: "auto",
|
||||
},
|
||||
@@ -305,13 +310,14 @@ export const styles = {
|
||||
width: "100%",
|
||||
maxWidth: 420,
|
||||
padding: 26,
|
||||
borderRadius: 22,
|
||||
borderRadius: 24,
|
||||
position: "relative",
|
||||
zIndex: 2,
|
||||
border: `1px solid rgba(233,216,166,0.18)`,
|
||||
background: "rgba(18, 18, 20, 0.55)",
|
||||
boxShadow: "0 18px 60px rgba(0,0,0,0.70)",
|
||||
backdropFilter: "blur(8px)",
|
||||
border: `1px solid ${stylesTokens.headerBorder}`,
|
||||
background: `linear-gradient(145deg, rgba(29, 27, 31, 0.92), ${stylesTokens.panelBg})`,
|
||||
boxShadow: "0 24px 80px rgba(0,0,0,0.72), inset 0 1px 0 rgba(255,255,255,0.08)",
|
||||
backdropFilter: "blur(16px) saturate(1.12)",
|
||||
WebkitBackdropFilter: "blur(16px) saturate(1.12)",
|
||||
animation: "popIn 240ms ease-out",
|
||||
color: stylesTokens.textMain,
|
||||
},
|
||||
@@ -338,24 +344,24 @@ export const styles = {
|
||||
},
|
||||
loginInput: {
|
||||
width: "100%",
|
||||
padding: 10,
|
||||
borderRadius: 12,
|
||||
border: `1px solid rgba(233,216,166,0.18)`,
|
||||
background: "rgba(10,10,12,0.60)",
|
||||
padding: "11px 12px",
|
||||
borderRadius: 13,
|
||||
border: `1px solid rgba(233,216,166,0.22)`,
|
||||
background: "rgba(7,7,10,0.64)",
|
||||
color: stylesTokens.textMain,
|
||||
outline: "none",
|
||||
fontSize: 16,
|
||||
},
|
||||
loginBtn: {
|
||||
padding: "12px 14px",
|
||||
padding: "12px 15px",
|
||||
borderRadius: 14,
|
||||
border: `1px solid rgba(233,216,166,0.28)`,
|
||||
background: "linear-gradient(180deg, rgba(233,216,166,0.24), rgba(233,216,166,0.10))",
|
||||
border: `1px solid rgba(233,216,166,0.34)`,
|
||||
background: "linear-gradient(135deg, rgba(233,216,166,0.28), rgba(120,88,35,0.20))",
|
||||
color: stylesTokens.textGold,
|
||||
fontWeight: 1000,
|
||||
fontSize: 16,
|
||||
cursor: "pointer",
|
||||
boxShadow: "inset 0 1px 0 rgba(255,255,255,0.08)",
|
||||
boxShadow: "0 8px 20px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.11)",
|
||||
},
|
||||
loginHint: {
|
||||
marginTop: 18,
|
||||
@@ -431,7 +437,10 @@ export const styles = {
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
filter: "saturate(0.9) contrast(1.05) brightness(0.55)",
|
||||
filter: "saturate(0.72) contrast(1.12) brightness(0.42) blur(1.2px)",
|
||||
transform: "scale(1.015)",
|
||||
backgroundColor: "rgba(8, 7, 12, 0.34)",
|
||||
backgroundBlendMode: "multiply",
|
||||
},
|
||||
|
||||
chipGrid: {
|
||||
@@ -443,9 +452,9 @@ export const styles = {
|
||||
|
||||
chipBtn: {
|
||||
padding: "10px 14px",
|
||||
borderRadius: 12,
|
||||
borderRadius: 13,
|
||||
border: "1px solid rgba(233,216,166,0.18)",
|
||||
background: "rgba(255,255,255,0.06)",
|
||||
background: "rgba(255,255,255,0.055)",
|
||||
color: stylesTokens.textGold,
|
||||
fontWeight: 1000,
|
||||
cursor: "pointer",
|
||||
@@ -457,7 +466,7 @@ export const styles = {
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
padding: "10px 12px",
|
||||
borderRadius: 12,
|
||||
borderRadius: 14,
|
||||
border: `1px solid rgba(233,216,166,0.18)`,
|
||||
background: "rgba(255,255,255,0.05)",
|
||||
color: stylesTokens.textMain,
|
||||
@@ -474,11 +483,11 @@ export const styles = {
|
||||
minWidth: 220,
|
||||
borderRadius: 14,
|
||||
border: `1px solid rgba(233,216,166,0.18)`,
|
||||
background: "linear-gradient(180deg, rgba(20,20,24,0.96), rgba(12,12,14,0.92))",
|
||||
background: "linear-gradient(145deg, rgba(29,27,33,0.98), rgba(10,10,13,0.96))",
|
||||
boxShadow: "0 18px 55px rgba(0,0,0,0.70)",
|
||||
overflow: "hidden",
|
||||
zIndex: 99999,
|
||||
backdropFilter: "blur(8px)",
|
||||
backdropFilter: "blur(14px)",
|
||||
},
|
||||
|
||||
userDropdownItem: {
|
||||
|
||||
Reference in New Issue
Block a user