screenshot-vue/other-demo/assets/index-ed141e06.css

@font-face {
    font-family: screenshots-icon;
    src: url(data:font/woff2;base64,d09GMgABAAAAAAZYAAsAAAAADKgAAAYKAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDfAqKLIhJATYCJAMwCxoABCAFhUcHgQAb6QrILjGFawcSSCzDZuiIqeA+75Tu1r4heP5fp96nLxkkOwhUmIBwakdUSggj8dSRyDmdmP3/v2e9YsjsOCtlpI68YLtQmt4kZXqSN+LXCmO2C/Fv90v4tUEmt3UrwUwiDCzhRBNKIS+VhIsbwuYpUwbcwRfO/tJ+v6reiDo8hHD/+7ZDTbM3TUTr9w71RhJrhE6IEQ3Y1a4XkvASBDApIh15W/6CFchzGo0tKBgl3FoBs6dM03M0cr5nooeECq4UR9wrdWQNBmhLtTvAavXv5Q0l4gwahoK7T68JeTp02cdnKdtvg3qKvAYBR2uAASggr2bZMim8cAwKvTEPBaZfoZIK0usI+Cz/f/CJbKn35WDiRkPHQOHCasE/nhPEAcceeG5ossAnYhJM8GlJcINPEW6pg1ClAQLSASKedCIdF2yw5C3dSEcgTRBppAUEjjpdEQUiHCTrQDPhAoaRL2jEorpr/QUVkzRNSepUlpwcEID3D4sjwt1DpnpsO4o0e8vw1tFOQoGbT9p6iXL30WON9mrXrRsQ9gbXgGWbZNK5ydUeecktcPmVx2xq2UZo2hoD01uX+a9oHpWpTYeC6zX7QKDarVI12wHVbshETJ4QzRYLAsXyMQU9ThxwwX6sOUg3k23dOo643Xa3Hx9vQ0sbcX/gffrTcHSE4Noa10LLmF0mD/rfY5wbUSC7PwAiskYaj2311zU30Nsu1OlDy9KzHYuW2anTl5aDbJw9U/c0Zno7+sz03HqkYcLNq0vh2+wyw1veaKtmyzFnZq5LfkMAZNpuYhvBQUtAXIYgyruGDrrwCtdlF7sDoOVUSBtz12b/4bDxqPao7rzxrPGw5oNuyzNPVZ7K5PvbY7tiNC0dzaPdoutsGwngWqc1h/kPt83Avzm8I/tC+kiuvV533x7StevFweU+HZ59uYGpg1ZF9uyzTMCuuCScl8yhpK7MeNd/dtbyu4Uo1Lz/Wo549iG+I/66871pNFJ5IPfufeHlubhQqy3XuFe6RrgTzP9u5a5x5Adyat8mFKXmHucWabNrqH7mTExIaBN+BtUWP8mY0R7t43GwybbBdwEF6SpDcZPLFde5LhduXrigqFAdujDYoDjsDbK3zJixOQaVnFbeyiY9Dk9WLApWhxYVLlywYHPCy3Mu82qPeSoDpC+gNvjamg56JEdvjqz8L7k6ThMTo4lbfZcECUNYF777VHIZ1bwKUlJAxX8ThLIzpPCqb1SHEvf9Pi6sdLsveAgqnRFuCXia+zRcMRDxNudtxICy1VO5pjeF9He5/BS134Mujp28wsX7I5+Kvljhz8Mn+YX91/7u2iy0tkiHQ/61/ds9rF/oyTFfmooKv9disK9q6/ecul3qQlvx+/3HtBvOFv1X3ujMnl/eD9jQUF1RunAx7+iyas2Ez/KpUbbx25YKmeuOxKxF9R9hDdUY+UvwP+CoylYj7nFc5UZ94aLyul+KuqxuqNbQ66olooupigjdT5YoF4B6mUc3UDPlX46uo1headm90Uv1zWWdcOue7b18n63wX9bJrxoX2qbCHEtyWMwF9W8xePa9mRGHIoCHdo6beg0w+VLwozSEZ2Ukh8auByHIZr2BhpNUUAQxx1X3TAEDi57gIIiVYJILXG8Rym4UoruBDIYYEJK4AxoBvAJFEt9d9EAhwCBCEtHh57kQTAaI+W4WGXKtdTrQGHSktpLUM4KFFfRYYkQAi8QLWJrv3u0y4EpNtPic0F6nBlHSY1MymorybikAC4hFnCOVcTEYsyQrCmYyv6zngckkkFZRMACDKR5ja0pkJOv3JhQjmFEOIgANBtBBoqUSEj0MAhZYuREjwcQZDFiQ4BHcqfNhtAyAoxQTNDOtmNMKK1QDObCeDo4kGoqoFFzga041YUsE2pfBEQPm81lIcbiIgBmS/LblAyZqFCCx+h9mAGDAUPAp6q2kEEkLsXGZKjfZvHi2ASbc1R7RRIkuhjjEKS5xn4xnixdjtCgK5UqJLgNHs6Ao9IxSBJ2gLLVI6DRCr6O3SuAiAoNpC2cCJYYK7MjQFgZMcsHooBVLJR4hAA==) format("woff2"), url(data:font/woff;base64,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) format("woff"), url(data:font/ttf;base64,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aW9uIDEuMHNjcmVlbnNob3RzLWljb25HZW5lcmF0ZWQgYnkgc3ZnMnR0ZiBmcm9tIEZvbnRlbGxvIHByb2plY3QuaHR0cDovL2ZvbnRlbGxvLmNvbQBDAHIAZQBhAHQAZQBkACAAYgB5ACAAaQBjAG8AbgBmAG8AbgB0AHMAYwByAGUAZQBuAHMAaABvAHQAcwAtAGkAYwBvAG4AUgBlAGcAdQBsAGEAcgBzAGMAcgBlAGUAbgBzAGgAbwB0AHMALQBpAGMAbwBuAHMAYwByAGUAZQBuAHMAaABvAHQAcwAtAGkAYwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAHMAYwByAGUAZQBuAHMAaABvAHQAcwAtAGkAYwBvAG4ARwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABzAHYAZwAyAHQAdABmACAAZgByAG8AbQAgAEYAbwBuAHQAZQBsAGwAbwAgAHAAcgBvAGoAZQBjAHQALgBoAHQAdABwADoALwAvAGYAbwBuAHQAZQBsAGwAbwAuAGMAbwBtAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwBAgEDAQQBBQEGAQcBCAEJAQoBCwEMAQ0ABWFycm93BHNhdmUGbW9zYWljBHJlZG8EdW5kbwdlbGxpcHNlCXJlY3RhbmdsZQR0ZXh0BmNhbmNlbAJvawVicnVzaAAA) format("truetype")
}

[class^=icon-],
[class*=" icon-"] {
    font-family: screenshots-icon !important;
    font-style: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-ok:before {
    content: "\e001"
}

.icon-cancel:before {
    content: "\e002"
}

.icon-save:before {
    content: "\e003"
}

.icon-redo:before {
    content: "\e004"
}

.icon-undo:before {
    content: "\e005"
}

.icon-mosaic:before {
    content: "\e006"
}

.icon-text:before {
    content: "\e007"
}

.icon-brush:before {
    content: "\e008"
}

.icon-arrow:before {
    content: "\e009"
}

.icon-ellipse:before {
    content: "\e00a"
}

.icon-rectangle:before {
    content: "\e00b"
}

.screenshots {
    position: relative;
    transform: translateZ(0);
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, apple color emoji, segoe ui emoji, Segoe UI Symbol, noto color emoji
}

.screenshots,
.screenshots * {
    box-sizing: border-box;
    user-select: none
}

.screenshots-magnifier {
    position: absolute;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, apple color emoji, segoe ui emoji, Segoe UI Symbol, noto color emoji;
    left: 0;
    top: 0;
    width: 100px;
    box-shadow: 0 0 8px #000;
    z-index: 9
}

.screenshots-magnifier,
.screenshots-magnifier * {
    box-sizing: border-box;
    user-select: none
}

.screenshots-magnifier-body {
    position: relative;
    background-color: #fff
}

.screenshots-magnifier-body:before {
    content: "";
    background-color: #0a72a1;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    z-index: 1
}

.screenshots-magnifier-body:after {
    content: "";
    background-color: #0a72a1;
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    z-index: 1
}

.screenshots-magnifier-body-canvas {
    display: block;
    width: 100px;
    height: 80px
}

.screenshots-magnifier-footer {
    height: 40px;
    color: #fff;
    font-size: 11px;
    background-color: #5f5e5e;
    padding: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-align: center
}

.screenshots-magnifier-footer-item {
    height: 18px;
    line-height: 18px
}

.screenshots-background {
    width: 100%;
    height: 100%;
    position: relative
}

.screenshots-background-image {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
    outline: none;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -webkit-font-smooting: antialiased
}

.screenshots-background-mask {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #0000004d
}

.screenshots-canvas {
    position: absolute;
    left: 0;
    top: 0;
    will-change: width, height, transform
}

.screenshots-canvas-body,
.screenshots-canvas-mask {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden
}

.screenshots-canvas-image {
    display: block;
    border: none;
    outline: none;
    will-change: transform;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -webkit-font-smooting: antialiased
}

.screenshots-canvas-panel {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    will-change: width, height
}

.screenshots-canvas-size {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    background-color: #000c;
    color: #fff;
    font-size: 12px;
    padding: 3px 4px;
    border-radius: 2px;
    white-space: nowrap;
    pointer-events: none
}

.screenshots-canvas-border-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
    background-color: #39f;
    pointer-events: none
}

.screenshots-canvas-border-right {
    position: absolute;
    left: 100%;
    top: 0;
    width: 2px;
    height: 100%;
    transform: translate(-50%);
    background-color: #39f;
    pointer-events: none
}

.screenshots-canvas-border-bottom {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
    background-color: #39f;
    pointer-events: none
}

.screenshots-canvas-border-left {
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 100%;
    transform: translate(-50%);
    background-color: #39f;
    pointer-events: none
}

.screenshots-canvas-point-top {
    width: 8px;
    height: 8px;
    position: absolute;
    left: 50%;
    top: 0;
    background-color: #39f;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: ns-resize
}

.screenshots-canvas-point-top-right {
    width: 8px;
    height: 8px;
    position: absolute;
    left: 100%;
    top: 0;
    background-color: #39f;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: nesw-resize
}

.screenshots-canvas-point-right {
    width: 8px;
    height: 8px;
    position: absolute;
    left: 100%;
    top: 50%;
    background-color: #39f;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: ew-resize
}

.screenshots-canvas-point-right-bottom {
    width: 8px;
    height: 8px;
    position: absolute;
    left: 100%;
    top: 100%;
    background-color: #39f;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: nwse-resize
}

.screenshots-canvas-point-bottom {
    width: 8px;
    height: 8px;
    position: absolute;
    left: 50%;
    top: 100%;
    background-color: #39f;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: ns-resize
}

.screenshots-canvas-point-bottom-left {
    width: 8px;
    height: 8px;
    position: absolute;
    left: 0;
    top: 100%;
    background-color: #39f;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: nesw-resize
}

.screenshots-canvas-point-left {
    width: 8px;
    height: 8px;
    position: absolute;
    left: 0;
    top: 50%;
    background-color: #39f;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: ew-resize
}

.screenshots-canvas-point-left-top {
    width: 8px;
    height: 8px;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #39f;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: nwse-resize
}

.screenshots-option {
    position: absolute;
    left: 0;
    top: 0;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, apple color emoji, segoe ui emoji, Segoe UI Symbol, noto color emoji
}

.screenshots-option,
.screenshots-option * {
    box-sizing: border-box;
    user-select: none
}

.screenshots-option-container {
    height: 34px;
    padding: 3px;
    border-radius: 2px;
    border: 1px solid #ddd;
    background-color: #fff
}

.screenshots-option-arrow {
    position: absolute;
    border: 6px solid transparent
}

.screenshots-option[data-placement=top] {
    transform: translate(-50%, -11px)
}

.screenshots-option[data-placement=top] .screenshots-option-arrow {
    transform: translate(-50%, -1px);
    border-top-color: #fff;
    top: 100%;
    left: 50%
}

.screenshots-option[data-placement=bottom] {
    transform: translate(-50%, 11px)
}

.screenshots-option[data-placement=bottom] .screenshots-option-arrow {
    transform: translate(-50%, 1px);
    border-bottom-color: #fff;
    bottom: 100%;
    left: 50%
}

.screenshots-button {
    width: 26px;
    height: 26px;
    line-height: 26px;
    color: #333;
    font-size: 18px;
    text-align: center;
    margin: 0 3px;
    vertical-align: middle;
    cursor: pointer
}

.screenshots-button-checked,
.screenshots-button:hover {
    background-color: #eee;
    outline: 1px solid #777
}

.screenshots-button-disabled {
    color: #bbb;
    cursor: not-allowed
}

.screenshots-button-disabled:hover {
    background-color: #fff;
    outline: none
}

.screenshots-size {
    height: 24px;
    display: flex;
    align-items: center
}

.screenshots-size-item {
    width: 24px;
    height: 24px;
    position: relative;
    margin: 0 3px;
    cursor: pointer
}

.screenshots-size-pointer {
    background-color: #555;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.screenshots-size-active>.screenshots-size-pointer {
    background-color: #39f
}

.screenshots-color {
    height: 24px;
    display: flex;
    align-items: center
}

.screenshots-color-item {
    border: 1px solid #777;
    width: 24px;
    height: 24px;
    cursor: pointer;
    position: relative;
    margin: 0 3px
}

.screenshots-color-item:before {
    content: "";
    display: none;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 10px;
    height: 10px;
    background-color: #333
}

.screenshots-color-item:after {
    content: "";
    display: none;
    width: 8px;
    height: 4px;
    position: absolute;
    right: 5px;
    bottom: 5px;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: translate(5px, 2px) rotate(-45deg) scale(.8)
}

.screenshots-color-active:before,
.screenshots-color-active:after {
    display: block
}

.screenshots-sizecolor {
    height: 24px;
    display: flex;
    align-items: center
}

.screenshots-textarea {
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    background-color: transparent;
    border: 2px solid #39f;
    resize: none;
    outline: none;
    white-space: nowrap;
    word-break: break-all;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, apple color emoji, segoe ui emoji, Segoe UI Symbol, noto color emoji;
    text-align: left
}

.screenshots-operations {
    position: absolute;
    left: 0;
    top: 0;
    will-change: transform
}

.screenshots-operations-buttons {
    display: flex;
    align-items: center;
    padding: 3px;
    border-radius: 2px;
    border: 1px solid #ddd;
    background-color: #fff;
    overflow: hidden
}

.screenshots-operations-buttons>div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.screenshots-operations-buttons>div:nth-last-child(3){
    display: none;
}
.screenshots-operations-divider {
    background-color: #ddd;
    width: 1px;
    height: 26px;
    margin: 0 3px
}

html,
body,
#app {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji"
}

.body {
    height: 100%
}