diff options
| -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> |