107 lines
2.1 KiB
CSS
107 lines
2.1 KiB
CSS
.magnifyContainer {
|
|
width: 100px;
|
|
height: 100px;
|
|
position: relative;
|
|
/*background: url('../images/magnify.png') no-repeat;*/
|
|
background-size: contain;
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
.magnifyContainer:after {
|
|
display: block;
|
|
content: attr(data-value);
|
|
font-family: sans-serif;
|
|
color: #681b5f;
|
|
font-size: 16px;
|
|
position: relative;
|
|
width: 100%;
|
|
margin: 75px auto auto 11px;
|
|
text-align: center;
|
|
margin-left: 28px;
|
|
margin-top: 85px;
|
|
}
|
|
|
|
.magnifyContainer-img {
|
|
z-index: 99;
|
|
position: absolute;
|
|
}
|
|
|
|
.magnify-seperator {
|
|
width: 100%;
|
|
height: 265px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
border-left: 1px solid #D3D3D3;
|
|
margin-left: 50%;
|
|
margin-top: 60px;
|
|
}
|
|
|
|
.pie, canvas.magnify-canvas {
|
|
position: absolute;
|
|
left: 14px;
|
|
top: 1px;
|
|
border-radius: 50%;
|
|
width: 70px;
|
|
height: 70px;
|
|
}
|
|
|
|
.bar {
|
|
position: absolute;
|
|
left: 29px;
|
|
width: 68px;
|
|
overflow: hidden;
|
|
background: transparent;
|
|
transform: scale(-1);
|
|
bottom: 29px;
|
|
z-index: 0;
|
|
}
|
|
|
|
.bar div {
|
|
border-radius: 50%;
|
|
width: 68px;
|
|
height: 68px;
|
|
}
|
|
.smallbar {
|
|
position: absolute;
|
|
left: 29.41%;
|
|
width: 34px;
|
|
overflow: hidden;
|
|
background: transparent;
|
|
transform: scale(-1);
|
|
bottom: 29.5%;
|
|
z-index: 0;
|
|
}
|
|
|
|
.smallbar div {
|
|
border-radius: 50%;
|
|
width: 34px;
|
|
height: 34px;
|
|
}
|
|
|
|
.magnifyContainer50 {
|
|
width: 51px;
|
|
height: 51px;
|
|
position: relative;
|
|
/*background: url('../images/magnify.png') no-repeat;*/
|
|
background-size: contain;
|
|
cursor: pointer;
|
|
margin-left: 20px;
|
|
bottom: -20px;
|
|
display:inline-flex;
|
|
}
|
|
|
|
.magnifyContainer50:after {
|
|
display: block;
|
|
content: attr(data-value);
|
|
font-family: sans-serif;
|
|
color: #681b5f;
|
|
font-size: 12px;
|
|
position: relative;
|
|
width: 100%;
|
|
margin: 20px auto auto 8px;
|
|
text-align: center;
|
|
margin-left: 14px;
|
|
margin-top: 40px;
|
|
} |