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

style: hero card curvature shine, smaller fullbleed flags, tighter LED

Browse Source 
- Hero: added glossy ::before shine gradient (top 45%) for curvature/Wölbung
- Flags: 64px, object-fit:cover (flag fills entire box), glassmorphism shine
- LED: slightly smaller (26px), tighter digit spacing (18px), stronger glow
- Backdrop blur increased to 24px

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ronny
2026-04-12 13:09:05 +02:00
parent 27f93f76f9
commit 91ea1f4dc3
1 changed files with 62 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/DashboardPage.module.css
+62 -37
View File
@@ -16,18 +16,32 @@
padding: 28px 22px 22px;
cursor: pointer;
overflow: hidden;
/* Glassmorphism like Stitch design */
background: rgba(49, 52, 66, 0.4);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.06);
/* Glassmorphism with curvature shine */
background: rgba(49, 52, 66, 0.45);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 40px 80px -15px rgba(0, 0, 0, 0.6),
0 8px 24px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
inset 0 1px 0 rgba(255, 255, 255, 0.12);
transition: transform 0.2s;
}
/* Glossy curvature shine — top highlight */
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 45%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 100%);
pointer-events: none;
z-index: 0;
border-radius: 2rem 2rem 0 0;
}
.hero:hover {
transform: scale(1.01);
}
@@ -103,33 +117,28 @@
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.ledDigit, .ledColon {
font-family: 'DSEG7', 'Courier New', monospace;
font-size: 26px;
color: #FECC4C;
display: inline-block;
text-align: center;
text-shadow:
0 0 3px rgba(254, 174, 50, 1),
0 0 8px rgba(254, 174, 50, 0.7),
0 0 20px rgba(254, 174, 50, 0.4),
0 0 40px rgba(254, 174, 50, 0.15);
}
.ledDigit {
font-family: 'DSEG7', 'Courier New', monospace;
font-size: 28px;
color: #FECC4C;
display: inline-block;
width: 20px;
text-align: center;
text-shadow:
0 0 4px rgba(254, 174, 50, 0.9),
0 0 12px rgba(254, 174, 50, 0.6),
0 0 28px rgba(254, 174, 50, 0.35),
0 0 48px rgba(254, 174, 50, 0.15);
width: 18px;
}
.ledColon {
font-family: 'DSEG7', 'Courier New', monospace;
font-size: 28px;
color: #FECC4C;
display: inline-block;
width: 10px;
text-align: center;
text-shadow:
0 0 4px rgba(254, 174, 50, 0.9),
0 0 12px rgba(254, 174, 50, 0.6),
0 0 28px rgba(254, 174, 50, 0.35);
width: 8px;
}
.heroGroup {
@@ -160,12 +169,13 @@
.heroCrestBox {
position: relative;
width: 80px;
height: 80px;
border-radius: 20px;
width: 64px;
height: 64px;
border-radius: 16px;
background: var(--surface-high);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.4);
0 8px 24px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
@@ -173,21 +183,36 @@
overflow: hidden;
}
/* Glossy shine on flag box */
.heroCrestBox::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 40%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 100%);
pointer-events: none;
z-index: 2;
border-radius: 16px 16px 0 0;
}
/* Glow aura behind each flag */
.heroCrestBox::before {
content: '';
position: absolute;
inset: -16px;
background: rgba(75, 183, 248, 0.2);
filter: blur(24px);
inset: -12px;
background: rgba(75, 183, 248, 0.18);
filter: blur(20px);
border-radius: 50%;
z-index: -1;
}
/* Flag fills the entire box */
.heroCrest {
width: 58px;
height: 58px;
object-fit: contain;
width: 100%;
height: 100%;
object-fit: cover;
}
.heroCrestFallback {