mwf975_git/tippspiel
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: stärkerer Glossy-Effekt auf Flag-Boxen im Light Mode

Browse Source 
Glanz-Overlay auf 55% angehoben, inset-Highlight und Border ergänzt
für MatchCard flagBox, TipModal flagLarge und pickerBtn.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ronny
2026-04-06 14:02:21 +02:00
parent 04a117cb61
commit c0c0b3bef5
2 changed files with 17 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/MatchCard.module.css
+6 -4
View File
@@ -107,8 +107,10 @@
border-radius: 13px; border-radius: 13px;
background: var(--surface-high); background: var(--surface-high);
box-shadow: box-shadow:
0 4px 12px rgba(0,0,0,0.3), var(--shadow-card),
inset 0 1px 0 rgba(255,255,255,0.12); inset 0 1px 0 rgba(255,255,255,0.55),
inset 0 -1px 0 rgba(0,0,0,0.06);
border: 1px solid var(--border-subtle);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -121,8 +123,8 @@
content: ''; content: '';
position: absolute; position: absolute;
top: 0; left: 0; right: 0; top: 0; left: 0; right: 0;
height: 50%; height: 55%;
background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 100%); background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.0) 100%);
pointer-events: none; pointer-events: none;
z-index: 1; z-index: 1;
} }
frontend/src/components/TipModal.module.css
+11 -10
View File
@@ -101,9 +101,10 @@
border-radius: 18px; border-radius: 18px;
background: var(--surface-high); background: var(--surface-high);
box-shadow: box-shadow:
0 8px 24px rgba(0,0,0,0.35), var(--shadow-card),
inset 0 1px 0 rgba(255,255,255,0.12), inset 0 1px 0 rgba(255,255,255,0.55),
inset 1px 0 0 rgba(255,255,255,0.06); inset 0 -1px 0 rgba(0,0,0,0.06);
border: 1px solid var(--border-subtle);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -115,8 +116,8 @@
content: ''; content: '';
position: absolute; position: absolute;
top: 0; left: 0; right: 0; top: 0; left: 0; right: 0;
height: 50%; height: 55%;
background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 100%); background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.0) 100%);
pointer-events: none; pointer-events: none;
z-index: 1; z-index: 1;
} }
@@ -235,9 +236,9 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
box-shadow: box-shadow:
0 6px 16px rgba(0,0,0,0.35), var(--shadow-card),
inset 0 1px 0 rgba(255,255,255,0.12), inset 0 1px 0 rgba(255,255,255,0.55),
inset 1px 0 0 rgba(255,255,255,0.06); inset 0 -1px 0 rgba(0,0,0,0.06);
} }
/* Glossy sheen – gleich wie flagLarge */ /* Glossy sheen – gleich wie flagLarge */
@@ -245,8 +246,8 @@
content: ''; content: '';
position: absolute; position: absolute;
top: 0; left: 0; right: 0; top: 0; left: 0; right: 0;
height: 50%; height: 55%;
background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 100%); background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.0) 100%);
pointer-events: none; pointer-events: none;
border-radius: 16px 16px 0 0; border-radius: 16px 16px 0 0;
} }