@opensig/opendesign/es/layer/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-layer {
  --layer-position: absolute;
  --layer-mask: var(--o-color-mask1);
  --layer-align: center;
  --layer-justify: center;
  --layer-origin: center;
}

.o-layer-to-body {
  --layer-position: fixed;
}

.o-layer {
  position: var(--layer-position, "fixed");
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: var(--layer-z-index);
  display: flex;
  align-items: var(--layer-align);
  justify-content: var(--layer-justify);
}

.o-layer-mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: var(--layer-mask);
  z-index: -1;
}

.o-layer-open {
  overflow: hidden !important;
}

.o-layer-main {
  transform-origin: var(--layer-origin);
}

.o-layer-close {
  position: absolute;
  top: 40px;
  right: 40px;
}

.o-layer-close-icon {
  font-size: var(--o-icon_size-m);
  color: var(--o-color-info1-inverse);
  background-color: var(--o-color-mask1);
  border-radius: 50%;
  padding: 8px;
}
.o-layer-close-icon {
  overflow: hidden;
}
.o-layer-close-icon svg {
  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
}
@media (hover: hover) {
  .o-layer-close-icon:hover svg {
    transform: rotate(180deg);
  }
}
@media (hover: hover) {
  .o-layer-close-icon:hover {
    color: var(--o-color-info2-inverse);
  }
}
.o-layer-close-icon:active {
  color: var(--o-color-info3-inverse);
  transform: scale(0.9);
}