Object Class Bar Source

Link to article: Object Class Bar Source.

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

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

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

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 {
    --wght: 600;
    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) {
    --wght: 800;
    font-weight:800;
}

div.sideleft > div:nth-child(2),
div.rightside > 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;
    }
}

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

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

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

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 {
    --wght: 600;
    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) {
    --wght: 800;
    font-weight:800;
}

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

(none)

(none)

```
objclassbar
```
```
sideleft
```
```
ocb-text
```
```
ocb-text
```
```
ocb-text
```
```
ocb-text
```
```
sidemiddle
```
```
ocb-text
```
```
ocb-text
```
```
ocb-text
```
```
ocb-text
```
```
ocb-text
```
```
ocb-text
```
```
ocb-text
```
```
ocb-text
```
```
sideright
```
```
colorbars-container
```
```
colorbars
```
```
{$colorbar-one}
```
```
colorbars
```
```
{$colorbar-two}
```
```
colorbars
```
```
{$colorbar-three}
```
```
colorbars
```
```
{$colorbar-four}
```
```
colorbars
```
```
{$colorbar-five}
```
```
colorbars
```
```
{$colorbar-six}
```
```
leveltext-container
```
```
objclassbar
```
```
sideleft
```
```
ocb-text
```
```
ocb-text
```
```
ocb-text
```
```
ocb-text
```
```
sidemiddle
```
```
ocb-text
```
```
ocb-text
```
```
ocb-text
```
```
ocb-text
```
```
ocb-text
```
```
ocb-text
```
```
ocb-text
```
```
ocb-text
```
```
sideright
```
```
colorbars-container
```
```
colorbars
```
```
{$colorbar-one}
```
```
colorbars
```
```
{$colorbar-two}
```
```
colorbars
```
```
{$colorbar-three}
```
```
colorbars
```
```
{$colorbar-four}
```
```
colorbars
```
```
{$colorbar-five}
```
```
colorbars
```
```
{$colorbar-six}
```
```
leveltext-container
```

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

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

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

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 {
    --wght: 600;
    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) {
    --wght: 800;
    font-weight:800;
}

div.sideleft > div:nth-child(2),
div.rightside > 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"]]Item #:[[/span]] [[span class="ocb-text"]]SCP-{$item-num}[[/span]]
[[/div]]
[[div_ ]]
[[span class="ocb-text"]]Object Class:[[/span]] [[span class="ocb-text"]]{$obj-class}[[/span]]
[[/div]]
[[/div]]
[[div_ class="sidemiddle"]]
[[div_ ]]
[[span class="ocb-text"]]Site Responsible:[[/span]] [[span class="ocb-text"]]{$site-resp}[[/span]]
[[/div]]
[[div_ ]]
[[span class="ocb-text"]]Director:[[/span]] [[span class="ocb-text"]]{$director}[[/span]]
[[/div]]
[[div_ ]]
[[span class="ocb-text"]]Research Head:[[/span]] [[span class="ocb-text"]]{$rsch-head}[[/span]]
[[/div]]
[[div_ ]]
[[span class="ocb-text"]]Assigned Task Force:[[/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 {$level}/{$item-num}
[[/div]]
[[div_]]
{$secrecy}
[[/div]]
[[/div]]
[[/div]]
[[/div]]
[[/iftags]]

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

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

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

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 {
    --wght: 600;
    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) {
    --wght: 800;
    font-weight:800;
}

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"]]Item #:[[/span]] [[span class="ocb-text"]]SCP-{$item-num}[[/span]]
[[/div]]
[[div_ ]]
[[span class="ocb-text"]]Object Class:[[/span]] [[span class="ocb-text"]]{$obj-class}[[/span]]
[[/div]]
[[/div]]
[[div_ class="sidemiddle"]]
[[div_ ]]
[[span class="ocb-text"]]Site Responsible:[[/span]] [[span class="ocb-text"]]{$site-resp}[[/span]]
[[/div]]
[[div_ ]]
[[span class="ocb-text"]]Director:[[/span]] [[span class="ocb-text"]]{$director}[[/span]]
[[/div]]
[[div_ ]]
[[span class="ocb-text"]]Research Head:[[/span]] [[span class="ocb-text"]]{$rsch-head}[[/span]]
[[/div]]
[[div_ ]]
[[span class="ocb-text"]]Assigned Task Force:[[/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 {$level}/{$item-num}
[[/div]]
[[div_]]
{$secrecy}
[[/div]]
[[/div]]
[[/div]]
[[/div]]
[[/code]]
[[/iftags]]

Object Class Bar Source

Module Styles

Inline Styles

Includes

CSS Classes

Page Source