/*
Woed Bar
[2022 Wikidot Component]
Created by MikuKaneko
Based on Classified Bar Woed by Woedenaz
Licensed under the CC-BY SA 3.0
*/
.woed-bar {
--item: "项目编号:\A";
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -ms-grid;
display: grid;
font-size: clamp(1em, -.133rem + 2.13vw, 1.5em);
-ms-grid-areas: "left center right";
grid-template-areas: "left center right";
-ms-grid-columns: auto 1fr auto;
grid-template-columns: auto 1fr auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 1em auto;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.woed-bar > div > div {
white-space: nowrap;
}
.woed-bar .left-box {
grid-area: left;
text-align: center;
}
.woed-bar .item::before {
content: var(--item);
font-weight: 900;
}
.woed-bar .class {
background: #333;
border-radius: 1em;
color: #fff;
font-weight: 900;
margin: .1em auto;
padding: .1em 0 .2em;
text-transform: uppercase;
}
.woed-bar.class-safe .class {
background: green;
}
.woed-bar.class-euclid .class {
background: yellow;
color: #333;
}
.woed-bar.class-keter .class {
background: red;
}
.woed-bar.class-thaumiel .class {
background: orange;
}
.woed-bar.class-neutralized .class {
background: gray;
}
.woed-bar.class-explained .class {
background: lightblue;
color: #333;
}
.woed-bar .center-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
grid-area: center;
height: 3em;
margin: 0 1em;
}
.woed-bar .bar-one,
.woed-bar .bar-two,
.woed-bar .bar-three,
.woed-bar .bar-four,
.woed-bar .bar-five {
background: #333;
-webkit-clip-path: polygon(0 0, 50% 0%, 100% 50%, 50% 100%, 0 100%, 50% 50%);
clip-path: polygon(0 0, 50% 0%, 100% 50%, 50% 100%, 0 100%, 50% 50%);
margin-left: -.3em;
width: 1em;
}
.woed-bar .bar-one {
opacity: .25;
}
.woed-bar .bar-two {
opacity: .5;
}
.woed-bar .bar-three {
opacity: .75;
}
.woed-bar .bar-five {
background: #900;
}
.woed-bar.level-1 .bar-one ~ div,
.woed-bar.level-2 .bar-two ~ div,
.woed-bar.level-3 .bar-three ~ div,
.woed-bar.level-4 .bar-four ~ div {
display: none;
}
.woed-bar .right-box {
font-weight: 700;
grid-area: right;
text-align: right;
}
.woed-bar .clearance {
padding: .2em 0;
}