Code de la barre de Classe

EH TOI LÀ !

Cette page est utilisée en interne par le Wiki SCP,

MERCI DE NE PAS MODIFIER CETTE PAGE
SANS LA PERMISSION DU STAFF.


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

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

.objclassbar span.ocb-text {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 50%;
    display: inline-block;
}

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;
}

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 div.sideleft {
        font-size: 0.9em;
    }
    div.objclassbar div.sidemiddle {
        font-size: 0.5em;
    }
    div.objclassbar div.sideright {
        font-size: 1em;
    }
}
[[/module]]

[[div_ class="objclassbar"]]
[[div_ class="sideleft"]]
[[div_ ]]
[[span class="ocb-text"]]Objet # :[[/span]] [[span class="ocb-text"]]SCP-{$item-num}[[/span]]
[[/div]]
[[div_ ]]
[[span class="ocb-text"]]Classe :[[/span]] [[span class="ocb-text"]]{$obj-class}[[/span]]
[[/div]]
[[/div]]
[[div_ class="sidemiddle"]]
[[div_ ]]
[[span class="ocb-text"]]Responsable du Site :[[/span]] [[span class="ocb-text"]]{$site-resp}[[/span]]
[[/div]]
[[div_ ]]
[[span class="ocb-text"]]Directeur :[[/span]] [[span class="ocb-text"]]{$director}[[/span]]
[[/div]]
[[div_ ]]
[[span class="ocb-text"]]Directeur de Recherche :[[/span]] [[span class="ocb-text"]]{$rsch-head}[[/span]]
[[/div]]
[[div_ ]]
[[span class="ocb-text"]]Force d'Intervention Assignée :[[/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_]]
Niveau {$level}/{$item-num}
[[/div]]
[[div_]]
{$secrecy}
[[/div]]
[[/div]]
[[/div]]
[[/div]]
Sauf mention contraire, le contenu de cette page est protégé par la licence Creative Commons Attribution-ShareAlike 3.0 License