mirror of
https://github.com/chylex/Lightning-Tracker.git
synced 2024-09-19 10:42:48 +02:00
69 lines
1.8 KiB
CSS
69 lines
1.8 KiB
CSS
div.progress-bar {
|
|
display: block;
|
|
height: 24px;
|
|
padding: 1px;
|
|
border-radius: 6px;
|
|
background: linear-gradient(#eeeeee, #fafafa);
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset, 0 -1px 1px rgba(0, 0, 0, 0.2) inset;
|
|
}
|
|
|
|
div.progress-bar > div.value {
|
|
min-width: 7px;
|
|
height: 100%;
|
|
border: 1px solid #1f6a99;
|
|
border-radius: 4px;
|
|
background: linear-gradient(#007ecc, #006eb3);
|
|
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.25) inset, 0 -1px 0 rgba(0, 0, 0, 0.1) inset;
|
|
transition: width 2s cubic-bezier(0.445, 0.050, 0.550, 0.950), opacity 2s ease;
|
|
}
|
|
|
|
div.progress-bar > div.value[data-value='0'] {
|
|
opacity: 0;
|
|
}
|
|
|
|
div.progress-bar > div.value > div.stripes {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
background-size: 37px 37px;
|
|
background-image: linear-gradient(
|
|
135deg,
|
|
rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%,
|
|
rgba(255, 255, 255, 0.15) 50%,
|
|
rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
|
text-align: center;
|
|
}
|
|
|
|
div.progress-bar > span {
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
color: #fff;
|
|
font-size: 17px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
/* @formatter:off */
|
|
text-shadow: -1px -1px rgba(0, 0, 0, 0.4),
|
|
-1px 0 rgba(0, 0, 0, 0.8),
|
|
-1px 1px rgba(0, 0, 0, 0.4),
|
|
0 -1px rgba(0, 0, 0, 0.8),
|
|
0 1px rgba(0, 0, 0, 0.8),
|
|
1px -1px rgba(0, 0, 0, 0.4),
|
|
1px 0 rgba(0, 0, 0, 0.8),
|
|
1px 1px rgba(0, 0, 0, 0.4),
|
|
1px 1px 2px #000000;
|
|
/* @formatter:on */
|
|
letter-spacing: 0.04em;
|
|
margin-top: -21px;
|
|
}
|
|
|
|
div.progress-bar.compact {
|
|
height: 19px;
|
|
margin-top: -1px;
|
|
}
|
|
|
|
div.progress-bar.compact span {
|
|
margin-top: -17px;
|
|
font-size: 15px;
|
|
}
|