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

216
frontend/src/App.jsx
View File

@@ -424,147 +424,127 @@ export default function App() {
}; };
const HogwartsPointsCard = ({ value = 0 }) => { const HogwartsPointsCard = ({ value = 0 }) => {
const GOLD = "#f2d27a"; const GOLD = "#f2d27a";
const GOLD2 = "#caa24a";
return ( return (
<div
style={{
borderRadius: 18,
border: "1px solid rgba(255,255,255,0.06)",
background: "transparent", // 🔥 außen quasi unsichtbar
boxShadow: "none",
backdropFilter: "none",
overflow: "visible",
minWidth: 0,
padding: 6,
display: "grid",
gridTemplateRows: "auto 1fr",
gap: 8,
}}
>
{/* Header */}
<div <div
style={{ style={{
fontWeight: 900, background: "transparent",
fontSize: 12.5, border: "none",
color: stylesTokens.textDim, boxShadow: "none",
opacity: 0.9, padding: 4,
paddingLeft: 6, minWidth: 0,
}} }}
> >
Hogwarts Points {/* Pergament */}
</div>
{/* Pergament */}
<div
style={{
borderRadius: 16,
border: "1px solid rgba(180,140,70,0.45)",
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(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))
`,
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)",
position: "relative",
overflow: "hidden",
display: "grid",
placeItems: "center",
padding: "16px 14px",
}}
>
{/* Papier-Flecken / Grain */}
<div <div
style={{ style={{
position: "absolute", borderRadius: 18,
inset: 0,
background: ` background: `
radial-gradient(circle at 22% 36%, rgba(90,60,25,0.14), transparent 42%), 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(circle at 70% 30%, rgba(90,60,25,0.10), transparent 38%), radial-gradient(120% 120% at 85% 85%, rgba(255,255,255,0.10), transparent 60%),
radial-gradient(circle at 58% 76%, rgba(255,255,255,0.08), transparent 46%) linear-gradient(180deg, rgba(0,0,0,0.14), rgba(0,0,0,0.26))
`, `,
opacity: 0.65, boxShadow:
pointerEvents: "none", "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)",
}}
/>
{/* Goldene Innenlinie */}
<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)",
pointerEvents: "none",
}}
/>
{/* Wert */}
<div
style={{
display: "flex",
alignItems: "baseline",
gap: 10,
position: "relative", position: "relative",
overflow: "hidden",
display: "grid",
placeItems: "center",
padding: "22px 18px",
}} }}
> >
{/* Papier-Flecken */}
<div <div
style={{ style={{
color: GOLD, position: "absolute",
fontWeight: 900, inset: 0,
fontSize: 44, background: `
letterSpacing: 0.5, radial-gradient(circle at 22% 36%, rgba(90,60,25,0.14), transparent 42%),
lineHeight: 1, radial-gradient(circle at 70% 30%, rgba(90,60,25,0.10), transparent 38%),
textShadow: radial-gradient(circle at 58% 76%, rgba(255,255,255,0.08), transparent 46%)
"0 1px 0 rgba(0,0,0,0.35), 0 0 18px rgba(242,210,122,0.25)", `,
opacity: 0.65,
pointerEvents: "none",
}} }}
> />
{value}
</div>
{/* Innere Goldlinie */}
<div <div
style={{ style={{
color: GOLD, position: "absolute",
fontWeight: 900, inset: 10,
fontSize: 17, borderRadius: 14,
letterSpacing: 1.2, border: "1px solid rgba(202,162,74,0.40)",
transform: "translateY(-5px)", boxShadow: "inset 0 0 0 1px rgba(242,210,122,0.14)",
textShadow: pointerEvents: "none",
"0 1px 0 rgba(0,0,0,0.32), 0 0 14px rgba(242,210,122,0.20)", }}
opacity: 0.95, />
{/* Wert */}
<div
style={{
display: "flex",
alignItems: "baseline",
gap: 10,
position: "relative",
}} }}
> >
HP <div
</div> style={{
</div> color: GOLD,
fontWeight: 900,
fontSize: 46,
letterSpacing: 0.6,
lineHeight: 1,
textShadow:
"0 1px 0 rgba(0,0,0,0.38), 0 0 20px rgba(242,210,122,0.28)",
}}
>
{value}
</div>
{/* Siegel */} <div
<div style={{
style={{ color: GOLD,
position: "absolute", fontWeight: 900,
bottom: 10, fontSize: 18,
right: 12, letterSpacing: 1.4,
color: "rgba(60,40,18,0.55)", transform: "translateY(-6px)",
fontSize: 11, textShadow:
fontWeight: 900, "0 1px 0 rgba(0,0,0,0.32), 0 0 14px rgba(242,210,122,0.22)",
letterSpacing: 1.5, opacity: 0.95,
textTransform: "uppercase", }}
transform: "rotate(-6deg)", >
border: "1px solid rgba(60,40,18,0.25)", HP
borderRadius: 999, </div>
padding: "3px 8px", </div>
background: "rgba(255,255,255,0.10)",
}} {/* Siegel */}
> <div
Score style={{
position: "absolute",
bottom: 12,
right: 14,
color: "rgba(60,40,18,0.55)",
fontSize: 11,
fontWeight: 900,
letterSpacing: 1.6,
textTransform: "uppercase",
transform: "rotate(-6deg)",
border: "1px solid rgba(60,40,18,0.25)",
borderRadius: 999,
padding: "3px 8px",
background: "rgba(255,255,255,0.10)",
}}
>
SCORE
</div>
</div> </div>
</div> </div>
</div> );
); };
};