linus/Workshop-Wahlen
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Activity

Frontend: Workshop-Karten und Teilnehmer-Chips mit modernem Schatten, Hover, mehr Abstand und kräftigem Verlauf
All checks were successful
Deploy Workshop-Wahlen (DEV / PROD) / deploy (push) Successful in 38s
Details

Browse Source
This commit is contained in:
ProgrammGamer
2026-01-30 20:45:53 +01:00
parent e1f1b465a2
commit 13aeebcbb7
1 changed files with 50 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
assets/frontend.css
View File

@@ -126,81 +126,104 @@
.kc-workshop-card { .kc-workshop-card {
box-sizing: border-box; box-sizing: border-box;
min-width: 0; min-width: 0;
background: #ffffff;
border-radius: 18px;
overflow: hidden;
border: 1.5px solid #e3f6ee;
box-shadow: 0 4px 24px 0 #2da66a1a;
display: flex;
flex-direction: column;
height: 100%;
transition: box-shadow 0.2s, border 0.2s, transform 0.15s;
margin-bottom: 10px;
}
.kc-workshop-card:hover {
box-shadow: 0 8px 32px 0 #2da66a33;
border: 1.5px solid #2da66a;
transform: translateY(-2px) scale(1.012);
} }
.kc-workshop-card .title { .kc-workshop-card .title {
background: linear-gradient(90deg, #e8f9ef 60%, #f6fffa 100%); background: linear-gradient(90deg, #e8f9ef 0%, #c6f7e2 100%);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
padding: 18px 18px 10px 18px; padding: 22px 22px 12px 22px;
font-weight: 800; font-weight: 900;
color: #176c4a; color: #176c4a;
font-size: 1.18rem; font-size: 1.28rem;
letter-spacing: 0.2px; letter-spacing: 0.2px;
border-bottom: 1px solid #e3f6ee; border-bottom: 1px solid #e3f6ee;
border-radius: 12px 12px 0 0; border-radius: 18px 18px 0 0;
box-shadow: 0 2px 8px #2da66a0a; box-shadow: 0 2px 8px #2da66a0a;
margin-bottom: 0; margin-bottom: 0;
min-height: 56px; min-height: 64px;
} }
.kc-workshop-card .title strong { .kc-workshop-card .title strong {
font-size: 1.18em; font-size: 1.22em;
font-weight: 900; font-weight: 900;
color: #176c4a; color: #176c4a;
margin-bottom: 2px; margin-bottom: 2px;
display: block; display: block;
letter-spacing: 0.01em;
} }
.kc-workshop-card .title .teamers { .kc-workshop-card .title .teamers {
font-size: 0.98em; font-size: 1.01em;
font-weight: 600; font-weight: 600;
color: #2da66a; color: #2da66a;
margin-bottom: 2px; margin-bottom: 2px;
margin-top: 2px; margin-top: 2px;
display: block; display: block;
letter-spacing: 0.01em;
} }
.kc-workshop-card .title .count { .kc-workshop-card .title .count {
color: #6b6b6b; color: #6b6b6b;
font-weight: 600; font-weight: 600;
font-size: 0.98em; font-size: 1.01em;
margin-left: 0; margin-left: 0;
margin-top: 2px; margin-top: 6px;
display: block; display: block;
letter-spacing: 0.01em;
} }
.kc-workshop-card .content{padding:12px 18px 18px 18px;}
.kc-participants { .kc-participants {
margin-top: 10px;
margin-bottom: 8px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 6px; gap: 8px 12px;
font-size: 0.95rem;
color: #2b2b2b;
} }
.kc-participant { .kc-participant {
padding: 7px 16px; padding: 8px 18px;
border-radius: 16px; border-radius: 18px;
background: linear-gradient(90deg, #f6fffa 60%, #e8f9ef 100%); background: linear-gradient(90deg, #f6fffa 60%, #e8f9ef 100%);
white-space: nowrap; white-space: nowrap;
display: inline-block; display: inline-block;
max-width: 100%; max-width: 100%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 1.08em; font-size: 1.09em;
margin-bottom: 6px; margin-bottom: 6px;
margin-right: 8px; margin-right: 0;
box-shadow: 0 2px 8px #2da66a0d; box-shadow: 0 2px 12px #2da66a0d;
border: 1px solid #e3f6ee; border: 1.5px solid #e3f6ee;
color: #176c4a; color: #176c4a;
font-family: 'Segoe UI', Arial, sans-serif; font-family: 'Segoe UI', Arial, sans-serif;
letter-spacing: 0.01em; letter-spacing: 0.01em;
transition: background 0.2s, color 0.2s; transition: background 0.2s, color 0.2s, box-shadow 0.2s, border 0.2s;
cursor: pointer;
}
.kc-participant:hover {
background: #e8f9ef;
color: #0d5947;
border: 1.5px solid #2da66a;
box-shadow: 0 4px 16px #2da66a22;
} }
.kc-participant.me { .kc-participant.me {
background: linear-gradient(90deg, #2da66a 60%, #176c4a 100%); background: linear-gradient(90deg, #2da66a 60%, #176c4a 100%);
color: #fff; color: #fff;
font-weight: bold; font-weight: bold;
border: 1.5px solid #176c4a; border: 1.5px solid #176c4a;
box-shadow: 0 2px 8px #2da66a33; box-shadow: 0 2px 12px #2da66a33;
} }
.kc-notassigned{background:#fff6f6;border:1px solid #ffd2d2;padding:12px;border-radius:10px;margin-top:12px;} .kc-notassigned{background:#fff6f6;border:1px solid #ffd2d2;padding:12px;border-radius:10px;margin-top:12px;}
@media(max-width:700px){ .kc-participants{grid-template-columns:1fr;} } @media(max-width:700px){ .kc-participants{grid-template-columns:1fr;} }