nessi/cluedo-hp-webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine HogwartsPointsCard styles for cleaner UI.

Browse Source 
Simplified and updated styling for the HogwartsPointsCard component by adjusting spacing, borders, shadows, and fonts. These refinements enhance visual consistency and improve readability across various design elements.
This commit is contained in:
Sascha Nesterovic
2026-02-07 12:27:17 +01:00
parent 9d744c8674
commit 3e4e26297b
1 changed files with 98 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
frontend/src/App.jsx
View File

@@ -425,57 +425,36 @@ export default function App() {
const HogwartsPointsCard = ({ value = 0 }) => {
const GOLD = "#f2d27a";
const GOLD2 = "#caa24a";
return (
<div
style={{
borderRadius: 18,
border: "1px solid rgba(255,255,255,0.06)",
background: "transparent", // 🔥 außen quasi unsichtbar
background: "transparent",
border: "none",
boxShadow: "none",
backdropFilter: "none",
overflow: "visible",
padding: 4,
minWidth: 0,
padding: 6,
display: "grid",
gridTemplateRows: "auto 1fr",
gap: 8,
}}
>
{/* Header */}
<div
style={{
fontWeight: 900,
fontSize: 12.5,
color: stylesTokens.textDim,
opacity: 0.9,
paddingLeft: 6,
}}
>
Hogwarts Points
</div>
{/* Pergament */}
<div
style={{
borderRadius: 16,
border: "1px solid rgba(180,140,70,0.45)",
borderRadius: 18,
background: `
radial-gradient(140% 160% at 15% 10%, rgba(245,225,185,0.88), rgba(225,195,145,0.82) 55%, rgba(175,135,85,0.75)),
radial-gradient(140% 160% at 15% 10%, rgba(235,215,175,0.88), rgba(215,185,135,0.82) 55%, rgba(165,125,75,0.75)),
radial-gradient(120% 120% at 85% 85%, rgba(255,255,255,0.10), transparent 60%),
linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.22))
linear-gradient(180deg, rgba(0,0,0,0.14), rgba(0,0,0,0.26))
`,
boxShadow:
"inset 0 0 0 1px rgba(0,0,0,0.18), inset 0 20px 50px rgba(0,0,0,0.22), 0 18px 40px rgba(0,0,0,0.35)",
"inset 0 0 0 1px rgba(0,0,0,0.20), inset 0 20px 45px rgba(0,0,0,0.24), 0 20px 50px rgba(0,0,0,0.45)",
position: "relative",
overflow: "hidden",
display: "grid",
placeItems: "center",
padding: "16px 14px",
padding: "22px 18px",
}}
>
{/* Papier-Flecken / Grain */}
{/* Papier-Flecken */}
<div
style={{
position: "absolute",
@@ -490,14 +469,14 @@ export default function App() {
}}
/>
{/* Goldene Innenlinie */}
{/* Innere Goldlinie */}
<div
style={{
position: "absolute",
inset: 10,
borderRadius: 12,
border: `1px solid rgba(202,162,74,0.45)`,
boxShadow: "inset 0 0 0 1px rgba(242,210,122,0.16)",
borderRadius: 14,
border: "1px solid rgba(202,162,74,0.40)",
boxShadow: "inset 0 0 0 1px rgba(242,210,122,0.14)",
pointerEvents: "none",
}}
/>
@@ -515,11 +494,11 @@ export default function App() {
style={{
color: GOLD,
fontWeight: 900,
fontSize: 44,
letterSpacing: 0.5,
fontSize: 46,
letterSpacing: 0.6,
lineHeight: 1,
textShadow:
"0 1px 0 rgba(0,0,0,0.35), 0 0 18px rgba(242,210,122,0.25)",
"0 1px 0 rgba(0,0,0,0.38), 0 0 20px rgba(242,210,122,0.28)",
}}
>
{value}
@@ -529,11 +508,11 @@ export default function App() {
style={{
color: GOLD,
fontWeight: 900,
fontSize: 17,
letterSpacing: 1.2,
transform: "translateY(-5px)",
fontSize: 18,
letterSpacing: 1.4,
transform: "translateY(-6px)",
textShadow:
"0 1px 0 rgba(0,0,0,0.32), 0 0 14px rgba(242,210,122,0.20)",
"0 1px 0 rgba(0,0,0,0.32), 0 0 14px rgba(242,210,122,0.22)",
opacity: 0.95,
}}
>
@@ -545,12 +524,12 @@ export default function App() {
<div
style={{
position: "absolute",
bottom: 10,
right: 12,
bottom: 12,
right: 14,
color: "rgba(60,40,18,0.55)",
fontSize: 11,
fontWeight: 900,
letterSpacing: 1.5,
letterSpacing: 1.6,
textTransform: "uppercase",
transform: "rotate(-6deg)",
border: "1px solid rgba(60,40,18,0.25)",
@@ -559,7 +538,7 @@ export default function App() {
background: "rgba(255,255,255,0.10)",
}}
>
Score
SCORE
</div>
</div>
</div>
@@ -569,6 +548,7 @@ export default function App() {
return (
<div style={styles.page}>
<div style={styles.bgFixed} aria-hidden="true">