组件中心分页：团体与设定专用组件

实体生物学分类系统

作者：Eltrac

实体生物学分类系统

Art.01 - 实体

IETS：3B-

实体编号：Entity C-1
项目类型：变异 / 野生
生物特征：类人生物 / 食肉性
这里插入一段有关该实体的描述，阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴。

+ 查看组件 CSS 代码

- 收起组件 CSS 代码

/**
 * EBCS Stylesheet 
 */
 
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 }
}