117 lines
2.6 KiB
CSS
117 lines
2.6 KiB
CSS
|
|
.fit {
|
|
border-radius: 50%;
|
|
border: 1px solid black;
|
|
height: calc(var(--radius) * 2);
|
|
position: relative;
|
|
width: calc(var(--radius) * 2);
|
|
|
|
--radius-slots: calc(var(--radius) * 0.92);
|
|
}
|
|
|
|
.outerBand {
|
|
border-radius: 50%;
|
|
border: calc((var(--radius) - var(--radius-slots)) * 0.8) solid black;
|
|
box-sizing: border-box;
|
|
height: calc(var(--radius) * 2);
|
|
position: absolute;
|
|
width: calc(var(--radius) * 2);
|
|
z-index: 2;
|
|
}
|
|
|
|
.innerBand {
|
|
border-radius: 50%;
|
|
border: calc(var(--radius-slots) / 6 + var(--radius) - var(--radius-slots)) solid black;
|
|
box-sizing: border-box;
|
|
height: calc(var(--radius) * 2);
|
|
opacity: 0.5;
|
|
position: absolute;
|
|
width: calc(var(--radius) * 2);
|
|
z-index: 3;
|
|
}
|
|
|
|
.hull {
|
|
height: 1px;
|
|
left: var(--radius);
|
|
position: absolute;
|
|
top: var(--radius);
|
|
width: 1px;
|
|
}
|
|
|
|
.hullInner {
|
|
margin-left: calc(var(--radius) * -1);
|
|
margin-top: calc(var(--radius) * -1);
|
|
}
|
|
.hullInner > img {
|
|
border-radius: 50%;
|
|
height: calc(var(--radius) * 2);
|
|
width: calc(var(--radius) * 2);
|
|
}
|
|
|
|
.slots {
|
|
margin-left: calc(var(--radius) - var(--radius-slots));
|
|
margin-top: calc(var(--radius) - var(--radius-slots));
|
|
position: relative;
|
|
}
|
|
|
|
.slot {
|
|
height: 1px;
|
|
left: var(--radius-slots);
|
|
position: absolute;
|
|
transform-origin: 0 var(--radius-slots);
|
|
transform: rotate(var(--rotation));
|
|
width: 1px;
|
|
z-index: 4;
|
|
}
|
|
|
|
.slotInner {
|
|
border-top-left-radius: 100% 4px;
|
|
border-top-right-radius: 100% 4px;
|
|
border: 1px solid black;
|
|
box-sizing: border-box;
|
|
height: calc(var(--radius-slots) / 7);
|
|
left: calc(var(--radius-slots) / 7 / 2 * -1);
|
|
position: absolute;
|
|
top: 2px;
|
|
transform: perspective(8px) rotateX(-1.5deg);
|
|
width: calc(var(--radius-slots) / 7);
|
|
}
|
|
|
|
.slotInnerInvalid {
|
|
border: 1px solid red;
|
|
}
|
|
|
|
.slotInner[data-state="Passive"] {
|
|
background-color: #0000002d;
|
|
border-color: #6c6c6c9f;
|
|
opacity: 0.3;
|
|
}
|
|
.slotInner[data-state="Online"] {
|
|
background-color: #9595952d;
|
|
border-color: #9595959f;
|
|
}
|
|
.slotInner[data-state="Active"] {
|
|
background-color: #87d3282d;
|
|
border-color: #87d3289f;
|
|
}
|
|
.slotInner[data-state="Overload"] {
|
|
background-color: #e8342b2d;
|
|
border-color: #e8342b9f;
|
|
}
|
|
|
|
.slotItem {
|
|
--reverse-rotation: calc(-1 * var(--rotation));
|
|
left: -32px;
|
|
position: absolute;
|
|
top: calc(-32px + var(--radius-slots) / 7 / 2);
|
|
transform: rotate(var(--reverse-rotation)) scale(calc(var(--scale) * 0.8));
|
|
}
|
|
|
|
.slotItemOffline {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.slotItem > img {
|
|
border-top-left-radius: 32px;
|
|
}
|