diff options
| author | Florian Fischer <florian.fischer@muhq.space> | 2026-09-03 19:42:40 +0200 |
|---|---|---|
| committer | Florian Fischer <florian.fischer@muhq.space> | 2026-09-03 19:42:40 +0200 |
| commit | e8d4768149ad299f6ff11b9ab70d453c04d300d8 (patch) | |
| tree | ccd842a26c365743b2ae0c573a3d01601e09105c | |
| parent | ee776b3bfc262e07d5bb1016b1eab56f5d622503 (diff) | |
| download | bycs-sol-e8d4768149ad299f6ff11b9ab70d453c04d300d8.tar.gz bycs-sol-e8d4768149ad299f6ff11b9ab70d453c04d300d8.zip | |
cockpit: use colored spans instead of unicode circles
| -rw-r--r-- | cockpit.css | 23 | ||||
| -rw-r--r-- | cockpit.html | 10 |
2 files changed, 30 insertions, 3 deletions
diff --git a/cockpit.css b/cockpit.css index 4ea6b76..49a3b45 100644 --- a/cockpit.css +++ b/cockpit.css @@ -157,6 +157,29 @@ flex: 1; } +#student-info-dot-green, +#student-info-dot-orange, +#student-info-dot-red { + border-radius: 50%; + display: inline-block; + margin-right: 2px; + height: 1.25rem; + width: 1.25rem; + transform: translateY(0.125rem); +} + +#student-info-dot-green { + background: green; +} + +#student-info-dot-orange { + background: orange; +} + +#student-info-dot-red { + background: red; +} + .student-info-points { display: block; font-size: 2rem; diff --git a/cockpit.html b/cockpit.html index bda0322..b138e7c 100644 --- a/cockpit.html +++ b/cockpit.html @@ -47,14 +47,18 @@ <div id="student-info-mid" class="student-info-banner"> <div id="student-info-green" class="student-info-mid-element"> - ⚫Grüne Punkte <span class="student-info-points" id="student-info-points-green">0</span> + <span id="student-info-dot-green"></span> + Grüne Punkte + <span class="student-info-points" id="student-info-points-green">0</span> </div> <div id="student-info-orange" class="student-info-mid-element"> - ⚫Orangene Punkte + <span id="student-info-dot-orange"></span> + Orangene Punkte <span class="student-info-points" id="student-info-points-orange">0</span> </div> <div id="student-info-red" class="student-info-mid-element"> - ⚫Rote Punkte <span class="student-info-points" id="student-info-points-red">0</span> + <span id="student-info-dot-red"></span> + Rote Punkte <span class="student-info-points" id="student-info-points-red">0</span> </div> <div id="student-info-points-sum-container" class="student-info-mid-element"> ∑ <span class="student-info-points" id="student-info-points-sum"></span> |