skopcaak/Graduately
1
0
Fork 0
mirror of https://github.com/pepaskopec-blip/Graduately.git synced 2026-10-27 15:14:35 +00:00
Code Issues Projects Releases Packages Wiki Activity

Improve multiple-choice quiz layout with cards and clearer states.

Browse source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
pepaskopec-blip 2026-09-14 15:32:52 +02:00
commit 1e9c9b5f84
6 changed files with 153 additions and 105 deletions
Download patch file Download diff file Expand all files Collapse all files

53
style.css
View file

@ -498,7 +498,8 @@ entry.answer-wrong {
border-radius: 999px;
padding: 6px 18px;
font-size: 15px;
transition: border-color 150ms ease, box-shadow 150ms ease;
transition: border-color 150ms ease, box-shadow 150ms ease,
background-color 150ms ease;
}
.pill:hover {
background-image: none;
@ -517,19 +518,61 @@ entry.answer-wrong {
border-color: @accent;
font-weight: 700;
}
.pill.ok {
.pill.ok,
.pill.ok:checked {
background-image: linear-gradient(135deg, @success 0%, @success2 100%);
color: @on_accent;
border-color: @success;
box-shadow: 0 0 0 2px alpha(@success, 0.4);
box-shadow: 0 0 0 2px alpha(@success, 0.35);
}
.pill.wrong {
.pill.wrong,
.pill.wrong:checked {
background-image: linear-gradient(135deg, @error 0%, #c45c5c 100%);
color: @on_accent;
border-color: @error;
box-shadow: 0 0 0 2px alpha(@error, 0.4);
box-shadow: 0 0 0 2px alpha(@error, 0.35);
}
.pill.hm-key {
padding: 4px 5px;
min-width: 32px;
font-size: 13px;
}
.quiz-card {
background-color: alpha(@bg_surface0, 0.85);
border: 1px solid @bg_surface1;
border-radius: 18px;
padding: 16px 18px 14px 18px;
box-shadow: 0 6px 18px alpha(@bg_crust, 0.18);
}
.quiz-heading {
color: @fg_text;
font-size: 18px;
font-weight: 700;
}
.quiz-intro {
color: @fg_subtext;
font-size: 14px;
font-style: italic;
}
.quiz-q {
color: @fg_text;
font-size: 16px;
font-weight: 700;
}
.quiz-options {
margin-top: 2px;
}
.quiz-pill {
border-radius: 14px;
padding: 12px 16px;
min-height: 44px;
}
.quiz-pill label {
font-weight: 500;
}
.quiz-pill:checked label {
font-weight: 700;
}
.chip {
background-image: none;
background-color: @bg_surface1;