diff --git a/ismism.ts/ui/index.html b/ismism.ts/ui/index.html
index 5f55e07..1f9391e 100644
--- a/ismism.ts/ui/index.html
+++ b/ismism.ts/ui/index.html
@@ -13,9 +13,12 @@
* {
--cl-white: #fff;
--cl-light-gray: #f1f1f1;
+ --cl-gray: #9e9e9e;
--cl-dark-gray: #616161;
--cl-black: #000;
+ --cl-pale-red: #ffdddd;
--cl-red: #f44336;
+ --cl-amber: #ffc107;
--small: 12px;
--normal: 15px;
--large: 18px;
@@ -154,7 +157,7 @@
}
.banner button {
- font-size: large;
+ font-size: var(--large);
}
.topright {
@@ -269,6 +272,62 @@
width: 100%;
}
+ .stat {
+ margin-top: 10px;
+ }
+
+ .stat>.label {
+ overflow: auto;
+ }
+
+ .stat>.label>*:nth-child(1) {
+ float: left;
+ }
+
+ .stat>.label>*:nth-child(2) {
+ float: right;
+ }
+
+ .stat>.label>a {
+ text-decoration: underline;
+ }
+
+ .stat>.label>a:hover {
+ color: var(--cl-amber);
+ }
+
+ .stat>.progress {
+ position: relative;
+ width: 100%;
+ color: var(--cl-black);
+ background-color: var(--cl-light-gray);
+ font-family: monospace;
+ }
+
+ .stat>.progress>span {
+ display: inline-block;
+ position: absolute;
+ padding: 0.25em 8px;
+ left: 0;
+ width: 100%;
+ }
+
+ .stat>.progress>span:nth-child(1) {
+ position: relative;
+ min-width: 1em;
+ background-color: var(--cl-gray);
+ }
+
+ .stat>.progress>span:nth-child(2) {
+ text-align: center;
+ background: none;
+ }
+
+ .stat>.progress>span:nth-child(3) {
+ text-align: right;
+ background: none;
+ }
+
.animate-left {
position: relative;
animation: animateleft 0.4s
@@ -351,6 +410,28 @@
+
Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at. Phasellus sed