| @@ -493,20 +493,26 @@ ul { | |||||
| border-radius: 0%; | border-radius: 0%; | ||||
| width: 10%; | width: 10%; | ||||
| height: 150px; | height: 150px; | ||||
| background: #000; | |||||
| overflow: hidden; | overflow: hidden; | ||||
| backface-visibility: hidden; | backface-visibility: hidden; | ||||
| transform: translate3d(0, 0, 0); | transform: translate3d(0, 0, 0); | ||||
| display: inline-block; | display: inline-block; | ||||
| } | } | ||||
| body.light .meter { | |||||
| background: #ddd !important; | |||||
| } | |||||
| body.dark .meter { | |||||
| background: #222 !important; | |||||
| } | |||||
| .meter .meterLabel { | .meter .meterLabel { | ||||
| display: none; | display: none; | ||||
| z-index: 1; | z-index: 1; | ||||
| writing-mode: vertical-lr; | writing-mode: vertical-lr; | ||||
| text-orientation: upright; | text-orientation: upright; | ||||
| background: none; | background: none; | ||||
| mix-blend-mode: exclusion; | |||||
| transform: rotate(0deg); | transform: rotate(0deg); | ||||
| font-size: 12px; | font-size: 12px; | ||||
| text-align: center; | text-align: center; | ||||
| @@ -516,6 +522,15 @@ ul { | |||||
| transform: translate(-50%, -50%); | transform: translate(-50%, -50%); | ||||
| } | } | ||||
| body.light .meterLabel { | |||||
| color: #000; | |||||
| } | |||||
| body.dark .meterLabel { | |||||
| color: #fff; | |||||
| mix-blend-mode: exclusion; | |||||
| } | |||||
| .meter .fill { | .meter .fill { | ||||
| position: absolute; | position: absolute; | ||||
| top: 0; | top: 0; | ||||