@neosjs/screen-shot/dist/index.css

JS截屏插件

:root {
  --tool-panel-bg: rgba(37, 38, 43, 0.8);
  --tool-active-color: #ffffff;
  --tool-item-color: rgba(255, 255, 255, 0.6);
}
#screenShotContainer {
  position: absolute;
  top: 0;
  left: 0;
  cursor: crosshair;
}
#toolPanel {
  background: var(--tool-panel-bg);
  z-index: 9999;
  position: absolute;
  top: 0;
  left: 0;
  padding: 4px;
  box-sizing: content-box;
  border-radius: 5px;
  align-items: center;
  gap: 6px;
}
#toolPanel .square {
  --tools-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M5 5h14v14H5zM4 3a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1z'/%3E%3C/svg%3E");
  -webkit-mask: var(--tools-icon) no-repeat;
  mask: var(--tools-icon) no-repeat;
}
#toolPanel .square-active {
  color: var(--tool-active-color) !important;
}
#toolPanel .round {
  --tools-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12m11-9.5A9.5 9.5 0 0 0 2.5 12a9.5 9.5 0 0 0 9.5 9.5a9.5 9.5 0 0 0 9.5-9.5A9.5 9.5 0 0 0 12 2.5'/%3E%3C/svg%3E");
  -webkit-mask: var(--tools-icon) no-repeat;
  mask: var(--tools-icon) no-repeat;
  scale: 0.9;
}
#toolPanel .round-active {
  color: var(--tool-active-color) !important;
}
#toolPanel .right-top {
  --tools-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M18.25 15.5a.75.75 0 0 1-.75-.75V7.56L7.28 17.78a.749.749 0 0 1-1.275-.326a.75.75 0 0 1 .215-.734L16.44 6.5H9.25a.75.75 0 0 1 0-1.5h9a.75.75 0 0 1 .75.75v9a.75.75 0 0 1-.75.75'/%3E%3C/svg%3E");
  -webkit-mask: var(--tools-icon) no-repeat;
  mask: var(--tools-icon) no-repeat;
  scale: 1.1;
}
#toolPanel .right-top-active {
  color: var(--tool-active-color) !important;
}
#toolPanel .brush {
  --tools-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M17.263 2.177a1.75 1.75 0 0 1 2.474 0l2.586 2.586a1.75 1.75 0 0 1 0 2.474L19.53 10.03l-.012.013L8.69 20.378a1.75 1.75 0 0 1-.699.409l-5.523 1.68a.75.75 0 0 1-.747-.188a.75.75 0 0 1-.188-.747l1.673-5.5a1.75 1.75 0 0 1 .466-.756L14.476 4.963ZM4.708 16.361a.26.26 0 0 0-.067.108l-1.264 4.154l4.177-1.271a.25.25 0 0 0 .1-.059l10.273-9.806l-2.94-2.939zM19 8.44l2.263-2.262a.25.25 0 0 0 0-.354l-2.586-2.586a.25.25 0 0 0-.354 0L16.061 5.5Z'/%3E%3C/svg%3E");
  -webkit-mask: var(--tools-icon) no-repeat;
  mask: var(--tools-icon) no-repeat;
  scale: 0.88;
}
#toolPanel .brush-active {
  color: var(--tool-active-color) !important;
}
#toolPanel .mosaicPen {
  --tools-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M11 20H4V4h7zm2-9V4h7v7zm0 9v-7h7v7z'/%3E%3C/svg%3E");
  -webkit-mask: var(--tools-icon) no-repeat;
  mask: var(--tools-icon) no-repeat;
}
#toolPanel .mosaicPen-active {
  color: var(--tool-active-color) !important;
}
#toolPanel .separateLine {
  position: relative;
  width: 2px !important;
  background: none !important;
  mask: none !important;
  color: none !important;
}
#toolPanel .separateLine:after {
  display: block;
  content: " ";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background-color: rgba(255, 255, 255, 0.1);
}
#toolPanel .text {
  --tools-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M13 6v15h-2V6H5V4h14v2z'/%3E%3C/svg%3E");
  -webkit-mask: var(--tools-icon) no-repeat;
  mask: var(--tools-icon) no-repeat;
}
#toolPanel .text-active {
  color: var(--tool-active-color) !important;
}
#toolPanel .save {
  --tools-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M4 21.25a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H4.75a.75.75 0 0 1-.75-.75M5.22 9.97a.75.75 0 0 1 1.06 0l4.97 4.969V2.75a.75.75 0 0 1 1.5 0v12.189l4.97-4.969a.749.749 0 1 1 1.06 1.06l-6.25 6.25a.75.75 0 0 1-1.06 0l-6.25-6.25a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");
  -webkit-mask: var(--tools-icon) no-repeat;
  mask: var(--tools-icon) no-repeat;
}
#toolPanel .close {
  --tools-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M5.72 5.72a.75.75 0 0 1 1.06 0L12 10.94l5.22-5.22a.749.749 0 0 1 1.275.326a.75.75 0 0 1-.215.734L13.06 12l5.22 5.22a.749.749 0 0 1-.326 1.275a.75.75 0 0 1-.734-.215L12 13.06l-5.22 5.22a.75.75 0 0 1-1.042-.018a.75.75 0 0 1-.018-1.042L10.94 12L5.72 6.78a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");
  mask: var(--tools-icon) no-repeat;
  -webkit-mask: var(--tools-icon) no-repeat;
  color: #ff6b6b !important;
}
#toolPanel .undo-disabled {
  --tools-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m5.828 7l2.536 2.535L6.95 10.95L2 6l4.95-4.95l1.414 1.415L5.828 5H13a8 8 0 1 1 0 16H4v-2h9a6 6 0 0 0 0-12z'/%3E%3C/svg%3E");
  -webkit-mask: var(--tools-icon) no-repeat;
  mask: var(--tools-icon) no-repeat;
  color: rgba(255, 255, 255, 0.2) !important;
}
#toolPanel .undo {
  --tools-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m5.828 7l2.536 2.535L6.95 10.95L2 6l4.95-4.95l1.414 1.415L5.828 5H13a8 8 0 1 1 0 16H4v-2h9a6 6 0 0 0 0-12z'/%3E%3C/svg%3E");
  -webkit-mask: var(--tools-icon) no-repeat;
  mask: var(--tools-icon) no-repeat;
}
#toolPanel .confirm {
  --tools-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M21.03 5.72a.75.75 0 0 1 0 1.06l-11.5 11.5a.747.747 0 0 1-1.072-.012l-5.5-5.75a.75.75 0 1 1 1.084-1.036l4.97 5.195L19.97 5.72a.75.75 0 0 1 1.06 0'/%3E%3C/svg%3E");
  -webkit-mask: var(--tools-icon) no-repeat;
  mask: var(--tools-icon) no-repeat;
  color: #51cf66 !important;
}
#toolPanel .tool-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  border-radius: 2px;
  padding: 4px;
  background: transparent;
}
#toolPanel .tool-panel--confirm {
  flex-flow: row-reverse;
  gap: 5px;
}
#toolPanel .item-panel {
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background-color: currentColor;
  color: inherit;
  width: 24px;
  height: 24px;
  color: var(--tool-item-color);
}
#toolPanel .item-panel:hover {
  color: var(--tool-active-color);
}
#toolPanel .item-panel:active {
  color: var(--tool-active-color);
}
#toolPanel .item-panel:last-child {
  margin-right: 0;
}
.__screenshot-lock-scroll {
  margin: 0;
  height: 100% !important;
  overflow: hidden !important;
}
.icon-panel {
  width: 0;
  height: 0;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-top: 6px solid var(--tool-panel-bg);
  z-index: 9999;
  position: absolute;
  top: 0;
  left: 23px;
  transform: rotate(180deg);
}
.icon-panel img {
  width: 100%;
  height: 100%;
}
#optionPanel {
  height: 20px;
  top: 6px;
  left: 0;
  border-radius: 5px;
  background: var(--tool-panel-bg);
  z-index: 9999;
  position: absolute;
  padding: 10px;
  box-sizing: content-box;
  align-items: center;
  gap: 20px;
}
#optionPanel .text-size-panel {
  width: 75px;
  height: 20px;
  font-size: 14px;
  border: 0px solid rgba(0, 0, 0, 0.2);
  overflow: hidden;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
}
#optionPanel .text-select-panel {
  width: 75px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border: 0px solid #d8dcea;
  border-radius: 5px 5px 0 0;
  position: absolute;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  left: 10px;
  top: -99px;
  gap: 5px;
  padding: 10px 0;
}
#optionPanel .text-select-panel .text-item {
  width: 100%;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
}
#optionPanel .text-select-panel .text-item:hover {
  color: #40c057;
  background: rgba(255, 255, 255, 0.1);
}
#optionPanel .brush-select-panel {
  height: 20px;
  align-items: center;
  gap: 16px;
}
#optionPanel .brush-select-panel .item-panel {
  width: 20px;
  height: 20px;
  cursor: pointer;
  --tools-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10'/%3E%3C/svg%3E");
  mask: var(--tools-icon) no-repeat;
  mask-size: 100% 100%;
  background-color: currentColor;
  color: var(--tool-item-color);
}
#optionPanel .brush-select-panel .brush-small {
  width: 12px;
  height: 12px;
}
#optionPanel .brush-select-panel .brush-small:hover,
#optionPanel .brush-select-panel .brush-small:active {
  color: var(--tool-active-color);
}
#optionPanel .brush-select-panel .brush-small-active {
  color: var(--tool-active-color);
}
#optionPanel .brush-select-panel .brush-medium {
  width: 16px;
  height: 16px;
}
#optionPanel .brush-select-panel .brush-medium:hover,
#optionPanel .brush-select-panel .brush-medium:active {
  color: var(--tool-active-color);
}
#optionPanel .brush-select-panel .brush-medium-active {
  color: var(--tool-active-color);
}
#optionPanel .brush-select-panel .brush-big {
  width: 20px;
  height: 20px;
}
#optionPanel .brush-select-panel .brush-big:hover,
#optionPanel .brush-select-panel .brush-big:active {
  color: var(--tool-active-color);
}
#optionPanel .brush-select-panel .brush-big-active {
  color: var(--tool-active-color);
}
#optionPanel .right-panel {
  display: flex;
  align-items: center;
}
#optionPanel .right-panel .color-panel {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  border-radius: 5px;
  gap: 5px;
}
#optionPanel .right-panel .color-panel .color-item {
  width: 20px;
  height: 20px;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid transparent;
}
#cutBoxSizePanel {
  width: 85px;
  height: 25px;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 3px;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 14px;
}
#textInputPanel {
  min-width: 20px;
  min-height: 20px;
  font-weight: bold;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  position: absolute;
  outline: none;
  z-index: 9999;
  top: 0;
  left: 0;
  border: none;
}
.hidden-screen-shot-scroll {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.no-cursor * {
  cursor: none;
}