vue-select-avatar/dist/style.css

一个头像集选择/裁剪的组件库

.preview[data-v-b7181a42] {
  overflow: hidden;
  position: relative;
  background: var(--bg);
  flex-shrink: 0;
  box-sizing: content-box;
}
.preview.full-gauging[data-v-b7181a42] {
  width: 100% !important;
  height: 100% !important;
}
.preview.backing .image[data-v-b7181a42] {
  transition: transform 0.3s ease;
}
.preview.round[data-v-b7181a42] {
  border-radius: 50%;
}
.preview .image[data-v-b7181a42] {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: left top;
  max-width: unset;
}
.viewport[data-v-3993095b] {
  --line-color: #fff;
  --point-size: 10px;
  --mask-color: rgba(0, 0, 0, 0.5);
  --bg-color: #000;
  --border-width: 1px;
  position: relative;
  overflow: hidden;
  background-color: var(--bg-color);
  flex-shrink: 0;
}
.viewport[data-v-3993095b],
.viewport[data-v-3993095b] *,
.viewport[data-v-3993095b] *::before,
.viewport[data-v-3993095b] *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.viewport[data-v-3993095b]:not(.fixed-image) {
  cursor: grab;
}
.viewport.image-moving[data-v-3993095b] {
  cursor: grabbing;
}
.viewport:not(.view-resizing) .consoles[data-v-3993095b] {
  cursor: grab;
}
.viewport.view-moving[data-v-3993095b] {
  cursor: grabbing;
}
.viewport.view-moving .consoles[data-v-3993095b] {
  cursor: grabbing;
}
.viewport.view-resizing.top-left[data-v-3993095b] {
  cursor: nwse-resize;
}
.viewport.view-resizing.top-right[data-v-3993095b] {
  cursor: nesw-resize;
}
.viewport.view-resizing.bottom-left[data-v-3993095b] {
  cursor: nesw-resize;
}
.viewport.view-resizing.bottom-right[data-v-3993095b] {
  cursor: nwse-resize;
}
.viewport.grid[data-v-3993095b] {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
}
.viewport.backing .image[data-v-3993095b],
.viewport.backing .upper-image[data-v-3993095b] {
  transition: transform 0.3s ease;
}
.viewport.show-border .view[data-v-3993095b] {
  border: var(--border-width) solid var(--line-color);
}
.viewport .image[data-v-3993095b] {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: left top;
  pointer-events: none;
  user-select: none;
  max-width: unset;
}
.viewport .mask[data-v-3993095b] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--mask-color);
  pointer-events: none;
}
.viewport .view[data-v-3993095b] {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  transform-origin: left top;
}
.viewport .upper-image[data-v-3993095b] {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: left top;
  pointer-events: none;
  user-select: none;
  max-width: unset;
}
.viewport .consoles[data-v-3993095b] {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: left top;
  border: var(--border-width) solid var(--line-color);
}
.viewport .consoles .point[data-v-3993095b] {
  position: absolute;
  width: var(--point-size);
  height: var(--point-size);
  border: var(--border-width) solid var(--line-color);
}
.viewport .consoles .point.top-left[data-v-3993095b] {
  left: calc(0px - var(--point-size));
  top: calc(0px - var(--point-size));
  cursor: nwse-resize;
}
.viewport .consoles .point.top-right[data-v-3993095b] {
  right: calc(0px - var(--point-size));
  top: calc(0px - var(--point-size));
  cursor: nesw-resize;
}
.viewport .consoles .point.bottom-left[data-v-3993095b] {
  left: calc(0px - var(--point-size));
  bottom: calc(0px - var(--point-size));
  cursor: nesw-resize;
}
.viewport .consoles .point.bottom-right[data-v-3993095b] {
  right: calc(0px - var(--point-size));
  bottom: calc(0px - var(--point-size));
  cursor: nwse-resize;
}