객체 등급 바 소스

잠깐 정지!!

SCP 위키 내부에서 사용되는 템플릿 페이지입니다.

스탭의 허가없이
이 페이지를 만지지 마세요

---

[[module css]]
div.objclassbar {
    display: flex;
    height: 4rem;
    justify-content: center;
}

.objclassbar span {
    word-break: break-word;
}

div.objclassbar > div {
    max-width: 30%;
    width: 30%;
    flex-basis: 30%;
}

div.objclassbar div.sideleft {
    font-size: 1.15em;
    border-right: 0.125rem solid;
    border-color: rgb(12,12,12);
    border-color: rgb(var(--black-monochrome, 12, 12, 12));
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-transform: uppercase;
}

div.objclassbar div.sidemiddle {
    font-size: 0.75em;
    padding-left: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

div.objclassbar div.sideright {
    display: flex;
    font-size: 1.25em;
    font-weight: 600;
    border-left: 0.125rem solid;
    border-color: rgb(12,12,12);
    border-color: rgb(var(--black-monochrome, 12, 12, 12));
    padding-left: 0.5rem;
    justify-content: flex-end;
}

div.sideleft > div > span:nth-child(1),
div.sidemiddle > div > span:nth-child(1) {
    font-weight:900;
}

div.sideleft > div:nth-child(2) {
    line-height: 1.1em;
}

div.sideleft > div:nth-child(2) > span:nth-child(1) {
    height: 1.1em;
}

div.sideright > div.colorbars-container {
    display: flex;
    flex-direction: row-reverse;
    transform: skew(15deg);
    padding: 0 0.5em 0 0.25em;
    height: 90%;
    align-self: center;
}

div.sideright > div.leveltext-container {
    height: 90%;
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: right;
}

div.sideright > div.colorbars-container > div.colorbars {
    width: 0.5em;
    height: 100%;
    margin: 0 0.1rem;
    background: {$colorbar-bg-color};
    background: {$colorbar-bg-img};
    background-repeat: no-repeat;
    overflow: hidden;
}

div.sideright > div.colorbars-container > div.colorbars.full {
    opacity: 1;
}

div.sideright > div.colorbars-container > div.colorbars.half {
    opacity: 0.5;
}

div.sideright > div.colorbars-container > div.colorbars.none {
    opacity: 0;
    display: none;
}

@media (max-width: 767px) {
    div.objclassbar {
        height: 3rem;
    }
    div.objclassbar div.sideleft {
        font-size: 0.8em;
    }
    div.objclassbar div.sidemiddle {
        font-size: 0.5em;
    }
    div.objclassbar div.sideright {
        font-size: 0.75em;
    }
}
[[/module]]

[[div_ class="objclassbar"]]
[[div_ class="sideleft"]]
[[div_ ]]
[[span class="ocb-text"]]일련번호:[[/span]] [[span class="ocb-text"]]SCP-{$item-num}[[/span]]
[[/div]]
[[div_ ]]
[[span class="ocb-text"]]등급:[[/span]] [[span class="ocb-text"]]{$obj-class}[[/span]]
[[/div]]
[[/div]]
[[div_ class="sidemiddle"]]
[[div_ ]]
[[span class="ocb-text"]]담당 기지:[[/span]] [[span class="ocb-text"]]{$site-resp}[[/span]]
[[/div]]
[[div_ ]]
[[span class="ocb-text"]]이사관:[[/span]] [[span class="ocb-text"]]{$director}[[/span]]
[[/div]]
[[div_ ]]
[[span class="ocb-text"]]연구 책임자:[[/span]] [[span class="ocb-text"]]{$rsch-head}[[/span]]
[[/div]]
[[div_ ]]
[[span class="ocb-text"]]배정 특무부대:[[/span]] [[span class="ocb-text"]]{$task-force}[[/span]]
[[/div]]
[[/div]]
[[div_ class="sideright"]]
[[div_ class="colorbars-container"]]
[[div_ class="colorbars {$colorbar-one}"]]
[[/div]]
[[div_ class="colorbars {$colorbar-two}"]]
[[/div]]
[[div_ class="colorbars {$colorbar-three}"]]
[[/div]]
[[div_ class="colorbars {$colorbar-four}"]]
[[/div]]
[[div_ class="colorbars {$colorbar-five}"]]
[[/div]]
[[div_ class="colorbars {$colorbar-six}"]]
[[/div]]
[[/div]]
[[div_ class="leveltext-container"]]
[[div_]]
{$level}/{$item-num} 등급
[[/div]]
[[div_]]
{$secrecy}
[[/div]]
[[/div]]
[[/div]]
[[/div]]