组件：岛屿生存难度系统

岛屿生存难度分类系统

编号{$number} - {$name}

危险度 - {$danger}

物种数量：{$mobs}
自然灾害：{$weather}
撤离难度：{$exit}
{$description}

代码

[[include :the-sea-sandbox:component:sd
|name="你的岛屿名称"
|number=编号
|danger=危险度
|mobs=物种数量
|weather=自然灾害
|exit=撤离难度
|description=一个关于你岛屿的简短介绍
]]

例子

Island A-3

岛屿生存难度分类系统

编号A-3 - "回廊"

危险度 - E-

物种数量：无
自然灾害：无
撤离难度：D
“回廊”是公认的最难进入的岛屿之一，其也是那些所居住立方体产生毁灭后落入这里的人们的避难所，航船救援队在此处长期驻扎并为那些人员提供安置。

[[include :the-sea-sandbox:component:sd
|name="回廊"
|number=A-3
|danger=E-
|mobs=无
|weather=无
|exit=D
|description=“回廊”是公认的最难进入的岛屿之一，其也是那些所居住立方体产生毁灭后落入这里的人们的避难所，**航船**救援队在此处长期驻扎并为那些人员提供安置。
]]

源代码

展开源代码

/**
 * Thanks For EBCS Stylesheet By That Unknown Person
 */
 
div.ebcs {
  background: #fff;
  box-shadow: var(--box-shadow, 0 0.05rem 0.15rem rgba(0,0,0,.4));
  padding: 0;
  margin: 0.5em 1em
}
@media screen and (max-width: 767px) {
  div.ebcs { margin: 0.5em 0 }
}
 
div.ebcs br:first-child,
div.ebcs br:last-child {
  display: none
}
 
div.ebcs p,
div.ebcs h2 {
  margin: 0;
  padding: 0
}
 
div.ebcs .ebcs-header .ebcs-title,
div.ebcs .ebcs-header,
div.ebcs .ebcs-body {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
 
/* 头部 */
div.ebcs .ebcs-header {
  justify-content: space-between;
  padding: 1em 0;
  width: 100%
}
 
div.ebcs .ebcs-header .ebcs-title h2 {
  background: rgb(var(--main-accent, 39,174,96));
  color: #fff;
  font-size: 120%;
  position: relative;
  left: -.6em;
  padding: .2em .5em;
  box-shadow: var(--box-shadow, 0 0.05rem 0.15rem rgba(0,0,0,.4))
}
 
div.ebcs .ebcs-header .ebcs-title h2::before {
  content: 'EBCS';
  display: none
}
@media screen and (max-width: 767px) {
  div.ebcs .ebcs-header .ebcs-title h2::before { display: inline }
  div.ebcs .ebcs-header .ebcs-title h2 .normal-text, .ebcs-number span { display: none }
}
 
div.ebcs .ebcs-header .ebcs-number {
  font-size: 130%;
  padding: .1em 0;
}
 
div.ebcs .ebcs-header .ebcs-iets {
  background-color: rgb(var(--blockquote-bg-color, 0,10,8,0.03));
  padding: 0.1em 0.5em;
  position: relative;
  right: 1em;
  box-shadow: inset var(--box-shadow, 0 0.05rem 0.15rem rgba(0,0,0,.4));
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
}
 
div.ebcs .ebcs-header .ebcs-iets strong { vertical-align: middle }
 
/* 主体 */
.ebcs-body {
  padding: 1em;
  background-color: rgb(var(--blockquote-bg-color, 0,10,8,0.03));
  justify-content: space-between;
  gap: 1em;
  align-items: flex-start
}
@media screen and (min-width: 768px) {
  .ebcs-body { padding-left: 1.5em }
}
 
.ebcs-body .ebcs-meta { width: 100% }
.ebcs-body .ebcs-meta span {
  padding: .3em 0;
  display: inline-block;
  width: 100%
}
.ebcs-body span:not(.ebcs-des) {
  border-bottom: 1px solid #ddd;
}
 
.ebcs-body .ebcs-img {
  flex-shrink: 0
}
 
.ebcs-body .ebcs-img {
  border-radius: 3px;
  box-shadow: var(--box-shadow, 0 0.05rem 0.15rem rgba(0,0,0,.4));
  overflow: hidden;
  width: 30%;
  height: auto
}
.ebcs-body .ebcs-img img {
  display: block;
  transition: transform .3s
}
 
.ebcs-body .ebcs-img:hover {
  overflow: visible
}
.ebcs-body .ebcs-img:hover img {
  transform: scale(1.5)
}
 
.ebcs-body .ebcs-img[class*="{$"] {
  display: none
}
 
@media screen and (max-width: 767px) {
  div.ebcs div.ebcs-body { display: block }
  div.ebcs div.ebcs-body .ebcs-img { width: 80%; margin: 1em auto }
}