@opensig/opendesign/es/figure/style/index.css

<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>

.o-figure {
  --figure-padding-top: 50%;
  --figure-fit: cover;
  --figure-position: center;
  --figure-radius: 0;
  --figure-error-color: var(--o-color-control4);
  --figure-error-size: var(--o-icon_size_control-l);
  --figure-play-icon-size: 64px;
}

.o-figure {
  display: inline-flex;
  align-items: center;
  vertical-align: top;
  overflow: hidden;
  transition: background-color var(--o-duration-m2);
  border-radius: var(--figure-radius);
  position: relative;
}
.o-figure.is-loading.is-colorful {
  background-color: var(--figure-prest-color);
}
.o-figure.is-loading img {
  opacity: 0;
}
.o-figure img {
  max-width: 100%;
  vertical-align: top;
  opacity: 1;
  transition: opacity var(--o-duration-m2), transform var(--o-easing-standard) 600ms;
  will-change: transform;
  border-radius: var(--figure-radius);
}
.o-figure.is-error {
  background-color: var(--o-color-control4);
}

.o-figure-main {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  transition: background-color var(--o-easing-standard-in) var(--o-duration-m1);
}

.o-figure-hoverable {
  cursor: pointer;
}
@media (hover: hover) {
  .o-figure-hoverable:hover img {
    transform: scale(1.05);
  }
}
.o-figure-hoverable:active img {
  transform: scale(1.02);
}
.o-figure-hoverable:active .o-figure-main {
  background-color: rgba(var(--o-black), 0.1);
}

.o-figure-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: var(--figure-padding-top);
}

.o-figure-bg {
  background-size: var(--figure-fit);
  background-position: var(--figure-position);
  background-repeat: no-repeat;
}

.o-figure-img-ratio {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--figure-fit);
  object-position: var(--figure-position);
}

.o-figure-img {
  width: 100%;
  height: 100%;
  object-fit: var(--figure-fit);
  object-position: var(--figure-position);
}

.o-figure-view {
  cursor: zoom-in;
}

.o-figure-view-layer {
  width: 100%;
  height: 100%;
  cursor: zoom-out;
}

.o-figure-preview-wrapper {
  position: relative;
}

.o-figure-view-figure {
  width: 100%;
  height: 100%;
  --figure-fit: contain;
}

.o-figure-previewable {
  cursor: pointer;
}

.o-figure-preview-img {
  position: relative;
}
.o-figure-preview-img img {
  vertical-align: top;
  max-width: 100vw;
  max-height: 100vh;
}

.o-figure-error-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--figure-error-size);
  color: var(--figure-error-color);
}

.o-figure-video-poster {
  position: relative;
}

.o-figure-mask {
  background-color: rgba(var(--o-black), 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
}

.o-figure-play-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: var(--figure-play-icon-size);
  height: var(--figure-play-icon-size);
  font-size: calc(var(--figure-play-icon-size) / 64 * 24);
  border-radius: 50%;
  color: var(--o-color-white);
  background-color: rgba(var(--o-white), 0.2);
  border: 1px solid rgba(var(--o-white), 0.6);
  backdrop-filter: blur(1px);
}
.o-figure-play-icon .o-icon-video-play {
  margin-right: -0.2em;
}

.o-figure-title {
  font-size: var(--o-font_size-h3);
  line-height: var(--o-line_height-h3);
}

.o-figure-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 16px 24px;
  color: var(--o-color-white);
  background: linear-gradient(180deg, rgba(var(--o-black), 0) 0%, rgba(var(--o-black), 0.6) 100%);
  font-size: var(--o-font_size-tip1);
  line-height: var(--o-line_height-tip1);
}

@media (min-width: 1201px) and (max-width: 1440px) {
  .o-figure {
    --figure-play-icon-size: 56px;
  }
}
@media (min-width: 601px) and (max-width: 1200px) {
  .o-figure {
    --figure-play-icon-size: 48px;
  }
}
@media (max-width: 600px) {
  .o-figure {
    --figure-play-icon-size: 40px;
  }
}

@media (min-width: 601px) and (max-width: 1200px) {
  .o-figure-title {
    font-size: var(--o-font_size-text1);
    line-height: var(--o-line_height-text1);
  }
}
@media (max-width: 600px) {
  .o-figure-title {
    font-size: var(--o-font_size-tip1);
    line-height: var(--o-line_height-tip1);
  }
}

@media (min-width: 601px) and (max-width: 1200px) {
  .o-figure-content {
    padding: 12px 16px;
  }
}
@media (max-width: 600px) {
  .o-figure-content {
    padding: 4px 8px;
  }
}

@media (max-width: 1200px) {
  .o-figure-preview-img img {
    max-width: 100vw;
  }
}

@media (max-width: 1200px) {
  .o-figure-preview-close {
    left: 16px;
    right: auto;
  }
}

@media (max-width: 1200px) {
  .o-figure-preview-layer {
    --layer-mask: var(--o-color-black);
  }
}