apply bootstrap styling to <meter>

MPIB · Mar 31, 2021 · d2060da · d2060da
1 parent 5daff5f
commit d2060da
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/static/css/main.css b/static/css/main.css
@@ -130,3 +130,23 @@ table tr th, table tr td {
     max-width: 330px;
     margin: 40px auto;
 }
+
+meter.progress {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-image: none;
+    width: 100%;
+}
+meter.progress::-webkit-meter-inner-element {
+    display: block;
+}
+meter.progress::-webkit-meter-bar {
+    border: 0;
+    border-radius: 0;
+}
+meter.progress::-webkit-meter-optimum-value {
+    background: var(--primary);
+}
+meter.progress::-moz-meter-bar {
+    background: var(--primary);
+}
diff --git a/templates/snippets/widgets/statistics.html b/templates/snippets/widgets/statistics.html
@@ -21,7 +21,7 @@
                 {% trans "Devices" %}
             </div>
             <div class="col-md-9">
-                <meter class="w-100" max="100" value="{{ device_percent }}"></meter>
+                <meter class="progress" max="100" value="{{ device_percent }}"></meter>
                 <span>{{ device_available }}</span>
                 <span class="pull-right">{{ device_all }}</span>
             </div>
@@ -32,7 +32,7 @@
                 {% trans "IP-Addresses" %}
             </div>
             <div class="col-md-9">
-                <meter class="w-100" max="100" value="{{ ipaddress_percent }}"></meter>
+                <meter class="progress" max="100" value="{{ ipaddress_percent }}"></meter>
                 <span>{{ ipaddress_available }}</span>
                 <span class="pull-right">{{ ipaddress_all }}</span>
             </div>