Bedrohungsstufenbalken

STOPP!

Dies ist eine Vorlage und wird auf verschiedenen Seiten eingefügt.

FINGER WEG SONST FINGER AB!

---

Credits

---

Programmierung: OldHelldog
Ideen: D-1385 (Farbverlauf),Grom Grundlegendes Styling
Besonderen Dank an Arogas, Alphaorion und Tanija für Feedback

Lizens: CC-BY SA 3.0

---

Verwende folgenden Code, um den Bedrohungstufen Balken in deinem Artikel anzuwenden:

[[include :scp-wiki-de:component:bedrohungsbalken-source
markierung = X% ]]

X ist eine veränderbare Zahl die für die horizontale Ausrichtung der Markierung zuständig ist.

Ungefähre Richtwerte. Der Marker ist dann zentriert in der jeweiligen Farbe.
5 % = Weiß
22 % = Blau
37% = Grün
50% = Gelb
63% = Orange
76% = Rot
92% = Schwarz

Dieser Balken ist zur Verwendung als Farbschema Regler der französischen Foundation gedacht.

+ show block

[[module CSS]]
/* Credits /
/Programmierung: OldHelldog /
/Ideen: D-1385 (Farbverlauf) Grom: Grundlegendes Styling /
/Besonderen Dank an Aro, Alpha und Tanija für Feedback */

body{
font-family: verdana,arial,helvetica,sans-serif;

}

.outer_grid{
display: grid;
grid-template-columns: 100px 150px;
grid-template-rows: 100px;
gap: 0px 0px;

}
.threat_level_div{
display:flex;
flex-direction: row;
width: 100%;
flex: auto;
height: 5vw;
grid-area: 1 / 2 / 2 / 5;
margin:none;
}

.scp_logo{
background-image: var(—ct_bg_header-logo);
background-repeat: no-repeat;
width:100%;
grid-area: 1 / 1 / 2 / 0.5;
}

.flexbox{
flex: 1 0 auto;
order:1;
display: flex;
flex-direction: column;
}

.threat_level_inner_div
{
order:2;
display:block;
text-align:center;
border-top: solid 5px #282828;
border-bottom: solid 5px #282828;
border-radius: 5px;
font-size:1.5em;
padding: 3px;
width:100%;
height:30px;
margin:15px;
}

.grad1 {
order:3;
align-items: center;
position:relative;
height: 20px;
background-image: linear-gradient(to right, white 7%,white 14% , blue 21%, blue 28%, green 35% , green 42%,yellow 49%, yellow 56%,orange 63%, orange 70%,red 77% , red 84% ,black 91%, black 98%);
box-shadow: 5px 5px 5px grey;
border-radius: 50px;
margin:none;
width:100%;
}

.markierung{
position:relative;
height:15px;
width: 15px;
display: inline-block;
border: solid 5px grey;
border-radius:5px;
right:-65%;
top:-3px;
}

@media (max-width: 580px){
.threat_level_div{flex-direction: column;
height:200px;}
.threat_level_inner_div{
flex-direction: column;
height:45px;
font-size:1.5em;
color:red;}
}

.threat_level_inner_div:before
{content:"SCP Foundation Bedrohungstufen Ratgeber";}

[[/module CSS]]

[[div class="flexbox"]]

[[div class="threat_level_inner_div"]]

[[div class="grad1"]]

[[div class="markierung"]]