You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
56 lines
1.2 KiB
56 lines
1.2 KiB
#timer {
|
|
margin: 20px;
|
|
width: 80px;
|
|
}
|
|
|
|
.pietimer {
|
|
position:relative;
|
|
font-size: 200px;
|
|
width:1em;
|
|
height:1em;
|
|
float: left;
|
|
}
|
|
.pietimer > .percent {
|
|
position: absolute;
|
|
top: 1.05em;
|
|
left: 0;
|
|
width: 3.33em;
|
|
font-size: 0.3em;
|
|
text-align:center;
|
|
display: none;
|
|
}
|
|
.pietimer > .slice {
|
|
position:absolute;
|
|
width:1em;
|
|
height:1em;
|
|
clip:rect(0px,1em,1em,0.5em);
|
|
}
|
|
.pietimer > .slice.gt50 {
|
|
clip:rect(auto, auto, auto, auto);
|
|
}
|
|
.pietimer > .slice > .pie {
|
|
border: 0.1em solid #c0c0c0;
|
|
position:absolute;
|
|
width:0.8em; /* 1 - (2 * border width) */
|
|
height:0.8em; /* 1 - (2 * border width) */
|
|
clip:rect(0em,0.5em,1em,0em);
|
|
-moz-border-radius:0.5em;
|
|
-webkit-border-radius:0.5em;
|
|
border-radius:0.5em;
|
|
}
|
|
.pietimer > .slice > .pie.fill {
|
|
-moz-transform:rotate(180deg) !important;
|
|
-webkit-transform:rotate(180deg) !important;
|
|
-o-transform:rotate(180deg) !important;
|
|
transform:rotate(180deg) !important;
|
|
}
|
|
.pietimer.fill > .percent {
|
|
display: none;
|
|
}
|
|
.pietimer.fill > .slice > .pie {
|
|
border: transparent;
|
|
background-color: #c0c0c0;
|
|
width:1em;
|
|
height:1em;
|
|
}
|