S Difficu
生存难度：
等级{$class}
- {$one}
- {$two}
- {$three}
- {$four}
[[include :the-piyan-cn:component:level-class
|lang=cn/tr
|class=等级名字
|color=#000000（带有井号的十六进制色号代码。）
|image=链接（至图片的链接。）
|one=在这
|two=随便
|three=放文字
]]
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,700;1,300');
.top-box {
background: #FFC90E;
width: 100%;
height: 5.25rem;
box-sizing: border-box;
border: 0.65rem solid #581A19;
border-left: 0.3125rem solid #581A19;
border-right: 0.3125rem solid #581A19;
position: relative;
}
.top-box .gradient-box div {
display: grid;
}
.top-box .top-text p {
font: 2.14rem Poppins;
font-weight: bold;
color: white;
position: relative;
margin: 0 0.08rem;
line-height: 2.16rem;
}
.top-box .bottom-text p,
.top-box .bottom-text:after {
font: 1.5rem Poppins;
font-style: italic;
font-weight: 500;
color: white;
position: relative;
margin: 0 0.08rem;
line-height: 2rem;
}
.top-box .gradient-box {
background: linear-gradient(90deg, rgba(88, 26, 25, 1) 0%, rgba(235, 186, 13, 0) 36%);
display: inline-block;
height: 105%;
width: 105%;
position: relative;
top: -1px;
}
.top-box:before {
content: "";
position: absolute;
background: url("http://backrooms-wiki.wdfiles.com/local--files/component%3Alevel-class/tiles.png");
mix-blend-mode: luminosity;
opacity: 0.15;
height: calc(100% + (0.65rem * 2));
width: calc(100% + (0.3125rem * 2));
top: -0.65rem;
left: -0.3125rem;
}
/*正确的钻石*/
.header-diamond {
position: absolute;
background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 300.9 284.5' style='enable-background:new 0 0 300.9 284.5;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFC90E;%7D .st1%7Bfill:%23581A19;%7D%0A%3C/style%3E%3Cg%3E%3Cpolygon class='st1' points='73.4,32.6 0,105.4 13.6,105.4 86.4,32.6 '/%3E%3Cpolygon class='st1' points='26.5,105.4 40.1,105.4 112.9,32.6 99.3,32.6 '/%3E%3C/g%3E%3Cpolyline class='st1' points='287.3,105.4 214.5,32.6 227.5,32.6 287.3,91.9 '/%3E%3Cpolygon class='st1' points='274.4,105.4 260.8,105.4 188,32.6 201.6,32.6 '/%3E%3C/svg%3E");
height: calc(284.5px / 1.13);
width: calc(300.9px / 1.13);
top: -20.5px;
right: -13px;
transition: opacity 0.5s;
}
.header-diamond div {/*标头-菱形分区*/
position: absolute;/*位置：绝对*/
-webkit-mask: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='-7.01 0 260.5 250.8' style='enable-background:new 0 0 250.5 250.8;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFC90E;%7D .st1%7Bfill:%23581A19;%7D%0A%3C/style%3E%3Cpath class='st0' d='M247,133.9L133.7,247.2c-4.7,4.7-12.3,4.7-17,0L3.5,133.9c-4.7-4.7-4.7-12.3,0-17L116.8,3.6 c4.7-4.7,12.3-4.7,17,0l113.3,113.3C251.7,121.6,251.7,129.2,247,133.9z'/%3E%3C/svg%3E");
mask: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='-7.01 0 260.5 250.8' style='enable-background:new 0 0 250.5 250.8;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFC90E;%7D .st1%7Bfill:%23581A19;%7D%0A%3C/style%3E%3C3Cpath class='st0' d='M247,133.9L133.7,247.2c-4.7,4.7-12.3,4.7-17,0L3.5,133.9c-4.7-4.7-4.7-12.3,0-17L116.8,3.6 c4.7-4.7,12.3-4.7,17,0l113.3,113.3C251.7,121.6,251.7,129.2,247,133.9z'/%3E%3C/svg%3E");
height: 50%;/*高度*/
width: 50%;
}
.header-diamond .diamond-color {/*页眉-钻石.钻石颜色。*/
background: #FFC90E;/*背景颜色*/
}
.header-diamond .diamond-pattern {
background: url("");
mix-blend-mode: luminosity;
opacity: 0.15;/*不透明度*/
}
.header-diamond .diamond-image {
background: url("http://backrooms-wiki-cn.wikidot.com/local--files/component:level-class/header_diamond.png") center/95% no-repeat;
}
/* 底部的东西。 */
.bottom-box {
margin: 1.5rem 0 3rem 0;
}
.bottom-box ul li {
font: 1.5rem Poppins;
font-weight: bold;
color: #5c1d24;
margin: 0.2rem 0 0.2rem 0.6rem;
line-height: 1rem;
list-style: none;
}
.bottom-box ul li:before {
content: "";
background: #5c1d24;
display: block;
transform: rotate(45deg);
position: relative;
height: .5em;
width: .5em;
left: -1.1em;
top: 0.55em;
}
/* 移动的东西。 */
@media only screen and (max-width: 440px) {
.top-box .top-text p {
font-size: 1.6rem;
}
.top-box .bottom-text p,
.top-box .bottom-text:after {
font-size: 1.4rem;
line-height: 1rem;
}
}
@media only screen and (max-width: 60rem) {
.header-diamond {
opacity: 0;
}
}
/* ==== 生存困难类型 ==== */
div[class*=class] ul li span[class$="}"] {
display: none !important;
}
.default {
display: none;
font-size: 0 !important;
}
.default:after {
font-size: 1.5rem;
}
div[class*=class] ul li span[class$="}"]+.default {
display: flex;
}
/*自定义类*/
.color-\{$color}, .header-diamond .color-\{$color} {
background: {$color} !important;
}
.top-box.color-\{$color} .header-diamond .diamond-image:not([class*="}"]) {
background : url("{$image}") center/78% no-repeat !important;
}
.lang-cn .lang-tr,
.lang-tr .lang-cn {
display: none;
}
[[/module]]
[[div class="lang-{$lang}"]]
[[div class="top-box class-{$class} color-{$color}"]]
[[div class="header-diamond"]]
[[div class="diamond-color class-{$class} color-{$color}"]]
[[/div]]
[[div class="diamond-pattern"]]
[[/div]]
[[div class="diamond-image class-{$class} {$image}"]]
[[/div]]
[[/div]]
[[div class="gradient-box"]]
[[div class="top-text"]]
[[span class="lang-cn"]]生存难度：[[/span]]
[[/div]]
[[div class="bottom-text"]]
[[span class="lang-cn"]]等级[[/span]]{$class}
[[/div]]
[[/div]]
[[/div]]
[[div class="bottom-box class-{$class}"]]
* [[span class="{$one}"]]{$one}[[/span]][[span class="default"]]@@ @@[[/span]]
* [[span class="{$two}"]]{$two}[[/span]][[span class="default"]]@@ @@[[/span]]
* [[span class="{$three}"]]{$three}[[/span]][[span class="default"]]@@ @@[[/span]]
* [[span class="{$four}"]]{$four}[[/span]][[span class="default"]]@@ @@[[/span]]
[[/div]]
[[/div]]
