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

Frontend: Lesbarkeit und Kontrast verbessert, größere Schrift, klarere Chips, mehr Abstand
All checks were successful
Deploy Workshop-Wahlen (DEV / PROD) / deploy (push) Successful in 12s
Details

Browse Source
This commit is contained in:
ProgrammGamer
2026-01-30 20:48:26 +01:00
parent 13aeebcbb7
commit 2405ef6151
1 changed files with 36 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
assets/frontend.css
View File

@@ -126,16 +126,15 @@
.kc-workshop-card { .kc-workshop-card {
box-sizing: border-box; box-sizing: border-box;
min-width: 0; min-width: 0;
background: #ffffff; background: #fff;
border-radius: 18px; border-radius: 18px;
overflow: hidden; overflow: hidden;
border: 1.5px solid #e3f6ee; border: 1.5px solid #d2ede2;
box-shadow: 0 4px 24px 0 #2da66a1a; box-shadow: 0 2px 12px 0 #2da66a14;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
transition: box-shadow 0.2s, border 0.2s, transform 0.15s; margin-bottom: 14px;
margin-bottom: 10px;
} }
.kc-workshop-card:hover { .kc-workshop-card:hover {
box-shadow: 0 8px 32px 0 #2da66a33; box-shadow: 0 8px 32px 0 #2da66a33;
@@ -143,87 +142,91 @@
transform: translateY(-2px) scale(1.012); transform: translateY(-2px) scale(1.012);
} }
.kc-workshop-card .title { .kc-workshop-card .title {
background: linear-gradient(90deg, #e8f9ef 0%, #c6f7e2 100%); background: linear-gradient(90deg, #e8f9ef 0%, #d2ede2 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: 22px 22px 12px 22px; padding: 24px 24px 12px 24px;
font-weight: 900; font-weight: 900;
color: #176c4a; color: #145a47;
font-size: 1.28rem; font-size: 1.32rem;
letter-spacing: 0.2px; letter-spacing: 0.01em;
border-bottom: 1px solid #e3f6ee; border-bottom: 1px solid #d2ede2;
border-radius: 18px 18px 0 0; border-radius: 18px 18px 0 0;
box-shadow: 0 2px 8px #2da66a0a;
margin-bottom: 0; margin-bottom: 0;
min-height: 64px; min-height: 64px;
line-height: 1.25;
} }
.kc-workshop-card .title strong { .kc-workshop-card .title strong {
font-size: 1.22em; font-size: 1.18em;
font-weight: 900; font-weight: 900;
color: #176c4a; color: #145a47;
margin-bottom: 2px; margin-bottom: 2px;
display: block; display: block;
letter-spacing: 0.01em; letter-spacing: 0.01em;
line-height: 1.18;
} }
.kc-workshop-card .title .teamers { .kc-workshop-card .title .teamers {
font-size: 1.01em; font-size: 1.04em;
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; letter-spacing: 0.01em;
line-height: 1.15;
} }
.kc-workshop-card .title .count { .kc-workshop-card .title .count {
color: #6b6b6b; color: #4b4b4b;
font-weight: 600; font-weight: 600;
font-size: 1.01em; font-size: 1.01em;
margin-left: 0; margin-left: 0;
margin-top: 6px; margin-top: 6px;
display: block; display: block;
letter-spacing: 0.01em; letter-spacing: 0.01em;
line-height: 1.12;
} }
.kc-participants { .kc-participants {
margin-top: 10px; margin-top: 14px;
margin-bottom: 8px; margin-bottom: 10px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 8px 12px; gap: 10px 14px;
} }
.kc-participant { .kc-participant {
padding: 8px 18px; padding: 10px 20px;
border-radius: 18px; border-radius: 20px;
background: linear-gradient(90deg, #f6fffa 60%, #e8f9ef 100%); background: #e8f9ef;
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.09em; font-size: 1.13em;
margin-bottom: 6px; margin-bottom: 8px;
margin-right: 0; margin-right: 0;
box-shadow: 0 2px 12px #2da66a0d; border: 1.5px solid #d2ede2;
border: 1.5px solid #e3f6ee; color: #145a47;
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, box-shadow 0.2s, border 0.2s; line-height: 1.18;
font-weight: 500;
background-clip: padding-box;
transition: background 0.2s, color 0.2s, border 0.2s;
cursor: pointer; cursor: pointer;
box-shadow: none;
} }
.kc-participant:hover { .kc-participant:hover {
background: #e8f9ef; background: #d2ede2;
color: #0d5947; color: #0d5947;
border: 1.5px solid #2da66a; 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: #2da66a;
color: #fff; color: #fff;
font-weight: bold; font-weight: bold;
border: 1.5px solid #176c4a; border: 1.5px solid #145a47;
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;} }