154 lines
2.6 KiB
CSS
154 lines
2.6 KiB
CSS
.fit {
|
|
border-radius: 50%;
|
|
border: 1px solid black;
|
|
height: 100%;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.ringOuter {
|
|
filter: drop-shadow(0 0 6px #000000);
|
|
position: absolute;
|
|
width: 100%;
|
|
z-index: 2;
|
|
}
|
|
.ringInner {
|
|
position: absolute;
|
|
width: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.fitLink {
|
|
height: 100%;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 3;
|
|
}
|
|
|
|
.hull {
|
|
height: 100%;
|
|
position: absolute;
|
|
width: 100%;
|
|
}
|
|
|
|
.hull > img {
|
|
border-radius: 50%;
|
|
height: calc(100% - 2 * 3%);
|
|
left: 3%;
|
|
opacity: 0.8;
|
|
position: relative;
|
|
top: 3%;
|
|
width: calc(100% - 2 * 3%);
|
|
}
|
|
|
|
.ringTop {
|
|
height: 100%;
|
|
position: absolute;
|
|
width: 100%;
|
|
}
|
|
|
|
.ringTopItem {
|
|
height: 100%;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
transform: rotate(var(--rotation));
|
|
width: 100%;
|
|
z-index: 4;
|
|
}
|
|
|
|
.ringTopItem > div, .ringTopItem > svg {
|
|
--reverse-rotation: calc(-1 * var(--rotation));
|
|
|
|
left: 50%;
|
|
pointer-events: all;
|
|
position: absolute;
|
|
top: 3.5%;
|
|
}
|
|
|
|
.radialMenu {
|
|
filter: drop-shadow(0 0 2px #ffffff);
|
|
position: absolute;
|
|
margin-top: 3.5%;
|
|
transform: rotate(var(--reverse-rotation));
|
|
width: 2.5%;
|
|
}
|
|
|
|
.slotOuter {
|
|
height: 18%;
|
|
margin-left: -2.5%;
|
|
position: absolute;
|
|
width: 7%;
|
|
}
|
|
|
|
.slot {
|
|
height: 50%;
|
|
position: relative;
|
|
user-select: none;
|
|
width: 100%;
|
|
}
|
|
|
|
.slot > svg {
|
|
height: 100%;
|
|
position: absolute;
|
|
width: 100%;
|
|
z-index: 4;
|
|
}
|
|
|
|
.slotImage {
|
|
height: 100%;
|
|
position: absolute;
|
|
transform: rotate(var(--reverse-rotation));
|
|
width: 100%;
|
|
z-index: 5;
|
|
}
|
|
|
|
.slotImage > img {
|
|
border-top-left-radius: 50%;
|
|
margin-left: -10%;
|
|
margin-top: 5%;
|
|
width: 120%;
|
|
}
|
|
|
|
.slot > svg {
|
|
fill: #999999;
|
|
stroke: #999999;
|
|
}
|
|
.slot[data-state="Active"] > svg {
|
|
fill: #8ae04a;
|
|
stroke: #8ae04a;
|
|
}
|
|
.slot[data-state="Overload"] > svg {
|
|
fill: #fd2d2d;
|
|
stroke: #fd2d2d;
|
|
}
|
|
.slot[data-state="Offline"] > svg, .slot[data-state="Offline"] > .slotImage {
|
|
opacity: 0.3;
|
|
}
|
|
.slot[data-state="Unavailable"] > svg, .slot[data-state="Unavailable"] > .slotImage {
|
|
opacity: 0.1;
|
|
}
|
|
|
|
.slotOuter .slotOptions {
|
|
display: none;
|
|
}
|
|
.slotOuter[data-hasitem=true]:hover .slotOptions {
|
|
display: block;
|
|
}
|
|
|
|
.slotOptions {
|
|
position: absolute;
|
|
text-align: center;
|
|
top: 50%;
|
|
width: 100%;
|
|
}
|
|
.slotOptions > svg {
|
|
cursor: pointer;
|
|
display: block;
|
|
filter: drop-shadow(0px 2px 1px #222222);
|
|
margin: 6px auto;
|
|
transform: rotate(var(--reverse-rotation));
|
|
stroke: #ffffff;
|
|
}
|