gaiety/basking-dashboard
gaiety/basking-dashboard
1
0
Fork 0
Code Activity

Meter styling

Browse source
This commit is contained in:
Ava Gaiety Wroten 2019-12-25 23:37:16 -06:00
parent b1782bba20
commit 52041abdea
1 changed files with 48 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
src/assets/styles.css
View file

@ -1,6 +1,5 @@
body {
background: #282a36;
/*background: linear-gradient(180deg, rgba(40,42,54,1) 0%, rgba(67,33,58,1) 43%, rgba(27,12,31,1) 86%), #282a36;*/
background-position-y: 15rem;
background-repeat: no-repeat;
}
@ -103,3 +102,51 @@ meter {
from { opacity: 0; }
to { opacity: 1; }
}
meter {
--background: #282a36;
--optimum: #ff79c6;
--sub-optimum: gold;
--sub-sub-optimum: crimson;
/* The gray background in Firefox */
background: var(--background);
display: block;
margin-bottom: 1em;
width: 100%;
}
/* The gray background in Chrome, etc. */
meter::-webkit-meter-bar {
background: var(--background);
}
/* The green (optimum) bar in Firefox */
meter:-moz-meter-optimum::-moz-meter-bar {
background: var(--optimum);
}
/* The green (optimum) bar in Chrome etc. */
meter::-webkit-meter-optimum-value {
background: var(--optimum);
}
/* The yellow (sub-optimum) bar in Firefox */
meter:-moz-meter-sub-optimum::-moz-meter-bar {
background: var(--sub-optimum);
}
/* The yellow (sub-optimum) bar in Chrome etc. */
meter::-webkit-meter-suboptimum-value {
background: var(--sub-optimum);
}
/* The red (even less good) bar in Firefox */
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
background: var(--sub-sub-optimum);
}
/* The red (even less good) bar in Chrome etc. */
meter::-webkit-meter-even-less-good-value {
background: var(--sub-sub-optimum);
}