124 lines
3.1 KiB
CSS
124 lines
3.1 KiB
CSS
|
|
|
|
.meter {
|
|
box-sizing: content-box;
|
|
height: 15px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
position: relative;
|
|
background: #a7a7a752;
|
|
border-radius: 25px;
|
|
padding: 3px;
|
|
box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.meter > span {
|
|
display: block;
|
|
height: 100%;
|
|
border-top-right-radius: 20px;
|
|
border-bottom-right-radius: 20px;
|
|
border-top-left-radius: 20px;
|
|
border-bottom-left-radius: 20px;
|
|
background-color: rgb(43, 194, 83);
|
|
background-image: linear-gradient(
|
|
center bottom,
|
|
rgb(43, 194, 83) 37%,
|
|
rgb(84, 240, 84) 69%
|
|
);
|
|
box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3),
|
|
inset 0 -2px 6px rgba(0, 0, 0, 0.4);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.meter > span:after,
|
|
.animate > span > span {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background-image: linear-gradient(
|
|
-45deg,
|
|
rgba(255, 255, 255, 0.2) 25%,
|
|
transparent 25%,
|
|
transparent 50%,
|
|
rgba(255, 255, 255, 0.2) 50%,
|
|
rgba(255, 255, 255, 0.2) 75%,
|
|
transparent 75%,
|
|
transparent
|
|
);
|
|
z-index: 1;
|
|
background-size: 50px 50px;
|
|
animation: move 2s linear infinite;
|
|
border-top-right-radius: 8px;
|
|
border-bottom-right-radius: 8px;
|
|
border-top-left-radius: 20px;
|
|
border-bottom-left-radius: 20px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.animate > span:after {
|
|
display: none;
|
|
}
|
|
|
|
@keyframes move {
|
|
0% {
|
|
background-position: 0 0;
|
|
}
|
|
100% {
|
|
background-position: 50px 50px;
|
|
}
|
|
}
|
|
|
|
.orange > span {
|
|
background-image: linear-gradient(#f1a165, #f36d0a);
|
|
}
|
|
|
|
.red > span {
|
|
background-image: linear-gradient(#f0a3a3, #f42323);
|
|
}
|
|
|
|
.blue > span {
|
|
background-image: linear-gradient(#2478f5, #22017e);
|
|
}
|
|
|
|
.purple > span {
|
|
background-image: linear-gradient(#bd14d3, #670370);
|
|
}
|
|
|
|
.nostripes > span > span,
|
|
.nostripes > span::after {
|
|
background-image: none;
|
|
}
|
|
|
|
.border {
|
|
--tblr-card-spacer-y: 1rem;
|
|
--tblr-card-spacer-x: 1.5rem;
|
|
--tblr-card-title-spacer-y: 1.25rem;
|
|
--tblr-card-border-width: var(--tblr-border-width);
|
|
--tblr-card-border-color: var(--tblr-border-color);
|
|
--tblr-card-border-radius: var(--tblr-border-radius);
|
|
--tblr-card-box-shadow: var(--tblr-shadow-card);
|
|
--tblr-card-inner-border-radius: calc(var(--tblr-border-radius) - (var(--tblr-border-width)));
|
|
--tblr-card-cap-padding-y: 1rem;
|
|
--tblr-card-cap-padding-x: 1.5rem;
|
|
--tblr-card-cap-bg: var(--tblr-bg-surface-tertiary);
|
|
--tblr-card-cap-color: inherit;
|
|
--tblr-card-color: inherit;
|
|
--tblr-card-bg: var(--tblr-bg-surface);
|
|
--tblr-card-img-overlay-padding: 1rem;
|
|
--tblr-card-group-margin: 1.5rem;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
height: var(--tblr-card-height);
|
|
word-wrap: break-word;
|
|
background-color: var(--tblr-card-bg);
|
|
background-clip: border-box;
|
|
border: var(--tblr-card-border-width) solid var(--tblr-card-border-color);
|
|
border-radius: var(--tblr-card-border-radius);
|
|
|
|
} |