index.css

.annotator-toolbar{position:absolute;width:100%;top:0;z-index:2;display:flex;justify-content:space-between}.annotator-toolbar-inner{height:2.5rem;margin-left:0rem;box-shadow:0 2px 5px #16171a0d;display:flex}.annotator-toolbar-debug{height:2.5rem;margin-left:0rem;box-shadow:0 2px 5px #16171a0d;display:flex;align-items:center;font-family:monospace;font-size:11px}.annotator-toolbar-debug .coord{padding:0 1rem}.annotator-toolbar-debug .coord.x{width:100px}.annotator-toolbar-debug .coord.x:before{content:"x : "}.annotator-toolbar-debug .coord.y{width:100px}.annotator-toolbar-debug .coord.y:before{content:"y : "}.annotator-toolbar .tool{width:2.5rem;height:2.5rem;display:flex;justify-content:center;align-items:center;cursor:pointer}.annotator-toolbar .tool svg{width:80%;height:80%}.annotator-toolbar .tool.selected{cursor:default}.annotator-toolbar .tool.zoom-button.selected{cursor:pointer}.annotator-toolbar .tool.zoom-button.selected svg rect:nth-child(4){display:none}.annotator-toolbar .tool.zoom-button svg{width:100%;height:100%}.annotator-toolbar .tool.rect svg{width:70%;height:70%}.annotator-toolbar .color{position:relative;width:3.5rem;height:2.5rem;display:flex;justify-content:center;align-items:center;cursor:pointer}.annotator-toolbar .color-selected{width:100%;height:100%;display:flex;flex-direction:row;justify-content:center;align-items:center}.annotator-toolbar .color-selected .circle{display:block;width:14px;height:14px;border-radius:50%}.annotator-toolbar .color-selected svg{display:block;width:12px;height:12px;margin-left:5px}.annotator-toolbar .color-selector{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%);display:flex}.annotator-toolbar .color-selector .colors{display:flex;box-shadow:0 2px 5px #16171a0d}.annotator-toolbar .color-selector .colors:after{bottom:100%;left:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-width:6px;margin-left:-6px}.annotator-toolbar .color-selector .colors .color-entry{padding:1rem .5rem}.annotator-toolbar .color-selector .colors .color-entry:first-child{padding-left:1rem}.annotator-toolbar .color-selector .colors .color-entry:last-child{padding-right:1rem}.annotator-toolbar .color-selector .colors .color-entry .circle{position:relative;width:14px;height:14px;border-radius:50%;transition:transform .2s ease-out}.annotator-toolbar .color-selector .colors .color-entry.orange .circle{background:#ff6545}.annotator-toolbar .color-selector .colors .color-entry.yellow .circle{background:#febf1c}.annotator-toolbar .color-selector .colors .color-entry.green .circle{background:#7abb5e}.annotator-toolbar .color-selector .colors .color-entry.blue .circle{background:#157efb}.annotator-toolbar .color-selector .colors .color-entry.purple .circle{background:#7c5ddf}.annotator-toolbar .color-selector .colors .color-entry.pink .circle{background:#dc5a88}.annotator-toolbar .color-selector .colors .color-entry:hover .circle,.annotator-toolbar .color-selector .colors .color-entry.selected .circle{transform:scale(1.25)}.annotator[data-theme=light]{color-scheme:light}.annotator[data-theme=dark]{color-scheme:dark}.annotator[data-theme=dark] .annotator-background{opacity:.2}.k-panel[data-theme=light] .annotator[data-theme=dark] .annotator-background{background:#555 url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXR0ZXJuIGlkPSJhIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPjxwYXRoIGZpbGw9InJnYmEoMCwgMCwgMCwgMC4yKSIgZD0iTTAgMGgxMHYxMEgwem0xMCAxMGgxMHYxMEgxMHoiLz48L3BhdHRlcm4+PHJlY3QgZmlsbD0idXJsKCNhKSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIvPjwvc3ZnPg==);opacity:1}.annotator .annotator-background{background:#efefef url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXR0ZXJuIGlkPSJhIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPjxwYXRoIGZpbGw9InJnYmEoMCwgMCwgMCwgMC4yKSIgZD0iTTAgMGgxMHYxMEgwem0xMCAxMGgxMHYxMEgxMHoiLz48L3BhdHRlcm4+PHJlY3QgZmlsbD0idXJsKCNhKSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIvPjwvc3ZnPg==);opacity:.45}.annotator .annotator-placeholder-ctn{background:light-dark(rgb(251.75,251.75,251.75),#16171a);color:light-dark(currentColor,#c5c5c6)}.annotator .annotator-toolbar-inner{background:light-dark(white,#16171a)}.annotator .annotator-toolbar-debug{background:light-dark(white,#16171a);color:light-dark(currentColor,white)}.annotator .annotator-toolbar-debug .coord:not(:last-child){border-right:1px solid light-dark(#efefef,rgb(68.75,71.875,81.25))}.annotator .annotator-toolbar .tool svg .vibrant,.annotator .annotator-toolbar .tool svg .faded{fill:light-dark(#999999,#898989)}.annotator .annotator-toolbar .tool svg .faded{opacity:.12}.annotator .annotator-toolbar .tool:not(.selected):hover svg .vibrant,.annotator .annotator-toolbar .tool:not(.selected):hover svg .faded{fill:light-dark(#222222,rgb(251.75,251.75,251.75))}.annotator .annotator-toolbar .zoom-button,.annotator .annotator-toolbar .color{border-left:1px solid light-dark(rgb(244.1,244.1,244.1),rgb(45.375,47.4375,53.625))}.annotator .annotator-toolbar .color-selected svg{fill:light-dark(rgb(200.75,200.75,200.75),rgb(111.5,111.5,111.5))}.annotator .annotator-toolbar .color-selected:hover svg{fill:light-dark(rgb(92.125,96.3125,108.875),rgb(251.75,251.75,251.75))}.annotator .annotator-toolbar .color-selector .colors{background:light-dark(white,#16171a)}.annotator .annotator-toolbar .color-selector .colors:after{border-color:light-dark(rgba(255,255,255,0),rgba(0,0,0,0));border-bottom-color:light-dark(white,#16171a)}.annotator[data-color=orange] .annotator-toolbar .tool.selected svg .vibrant,.annotator[data-color=orange] .annotator-toolbar .tool.selected svg .faded{fill:#ff6545}.annotator[data-color=orange] .color-selected .circle{background:#ff6545}.annotator[data-color=orange] .marker{color:#fff}.annotator[data-color=orange] .marker-pin{background:#ff6545}.annotator[data-color=orange] .marker-rect,.annotator[data-color=orange] .marker-rect .resize-helpers .handle{border:2px solid #ff6545}.annotator[data-color=orange] .marker-rect .count{background:#ff6545}.annotator[data-color=orange] .marker-circle{border:2px solid #ff6545}.annotator[data-color=orange] .marker-circle .resize-helpers{background:#ff6545}.annotator[data-color=orange] .marker-circle .resize-helpers .handle{border:2px solid #ff6545}.annotator[data-color=orange] .marker-circle .count{background:#ff6545}.annotator[data-color=yellow] .annotator-toolbar .tool.selected svg .vibrant,.annotator[data-color=yellow] .annotator-toolbar .tool.selected svg .faded{fill:#febf1c}.annotator[data-color=yellow] .color-selected .circle{background:#febf1c}.annotator[data-color=yellow] .marker{color:#fff}.annotator[data-color=yellow] .marker-pin{background:#febf1c}.annotator[data-color=yellow] .marker-rect,.annotator[data-color=yellow] .marker-rect .resize-helpers .handle{border:2px solid #febf1c}.annotator[data-color=yellow] .marker-rect .count{background:#febf1c}.annotator[data-color=yellow] .marker-circle{border:2px solid #febf1c}.annotator[data-color=yellow] .marker-circle .resize-helpers{background:#febf1c}.annotator[data-color=yellow] .marker-circle .resize-helpers .handle{border:2px solid #febf1c}.annotator[data-color=yellow] .marker-circle .count{background:#febf1c}.annotator[data-color=green] .annotator-toolbar .tool.selected svg .vibrant,.annotator[data-color=green] .annotator-toolbar .tool.selected svg .faded{fill:#7abb5e}.annotator[data-color=green] .color-selected .circle{background:#7abb5e}.annotator[data-color=green] .marker{color:#fff}.annotator[data-color=green] .marker-pin{background:#7abb5e}.annotator[data-color=green] .marker-rect,.annotator[data-color=green] .marker-rect .resize-helpers .handle{border:2px solid #7abb5e}.annotator[data-color=green] .marker-rect .count{background:#7abb5e}.annotator[data-color=green] .marker-circle{border:2px solid #7abb5e}.annotator[data-color=green] .marker-circle .resize-helpers{background:#7abb5e}.annotator[data-color=green] .marker-circle .resize-helpers .handle{border:2px solid #7abb5e}.annotator[data-color=green] .marker-circle .count{background:#7abb5e}.annotator[data-color=blue] .annotator-toolbar .tool.selected svg .vibrant,.annotator[data-color=blue] .annotator-toolbar .tool.selected svg .faded{fill:#157efb}.annotator[data-color=blue] .color-selected .circle{background:#157efb}.annotator[data-color=blue] .marker{color:#fff}.annotator[data-color=blue] .marker-pin{background:#157efb}.annotator[data-color=blue] .marker-rect,.annotator[data-color=blue] .marker-rect .resize-helpers .handle{border:2px solid #157efb}.annotator[data-color=blue] .marker-rect .count{background:#157efb}.annotator[data-color=blue] .marker-circle{border:2px solid #157efb}.annotator[data-color=blue] .marker-circle .resize-helpers{background:#157efb}.annotator[data-color=blue] .marker-circle .resize-helpers .handle{border:2px solid #157efb}.annotator[data-color=blue] .marker-circle .count{background:#157efb}.annotator[data-color=purple] .annotator-toolbar .tool.selected svg .vibrant,.annotator[data-color=purple] .annotator-toolbar .tool.selected svg .faded{fill:#7c5ddf}.annotator[data-color=purple] .color-selected .circle{background:#7c5ddf}.annotator[data-color=purple] .marker{color:#fff}.annotator[data-color=purple] .marker-pin{background:#7c5ddf}.annotator[data-color=purple] .marker-rect,.annotator[data-color=purple] .marker-rect .resize-helpers .handle{border:2px solid #7c5ddf}.annotator[data-color=purple] .marker-rect .count{background:#7c5ddf}.annotator[data-color=purple] .marker-circle{border:2px solid #7c5ddf}.annotator[data-color=purple] .marker-circle .resize-helpers{background:#7c5ddf}.annotator[data-color=purple] .marker-circle .resize-helpers .handle{border:2px solid #7c5ddf}.annotator[data-color=purple] .marker-circle .count{background:#7c5ddf}.annotator[data-color=pink] .annotator-toolbar .tool.selected svg .vibrant,.annotator[data-color=pink] .annotator-toolbar .tool.selected svg .faded{fill:#dc5a88}.annotator[data-color=pink] .color-selected .circle{background:#dc5a88}.annotator[data-color=pink] .marker{color:#fff}.annotator[data-color=pink] .marker-pin{background:#dc5a88}.annotator[data-color=pink] .marker-rect,.annotator[data-color=pink] .marker-rect .resize-helpers .handle{border:2px solid #dc5a88}.annotator[data-color=pink] .marker-rect .count{background:#dc5a88}.annotator[data-color=pink] .marker-circle{border:2px solid #dc5a88}.annotator[data-color=pink] .marker-circle .resize-helpers{background:#dc5a88}.annotator[data-color=pink] .marker-circle .resize-helpers .handle{border:2px solid #dc5a88}.annotator[data-color=pink] .marker-circle .count{background:#dc5a88}.annotator{position:relative;width:100%;padding-bottom:0;margin-bottom:3rem;-webkit-user-select:none;user-select:none;overflow:hidden}.annotator.annotator-disabled{opacity:.4;pointer-events:none}.annotator-background{position:absolute;width:100%;height:100%}.annotator-placeholder{position:relative;padding:2.5rem}.annotator-placeholder-ctn{position:relative;z-index:1;display:flex;justify-content:center;padding:2.5rem}.annotator-ctn{position:relative;width:100%;height:100%;z-index:1;padding:4rem 1.5rem 1.5rem}.annotator-ctn .image{position:relative;width:100%;max-height:calc(100vh - 12rem);display:flex;justify-content:center;align-items:center}.annotator-ctn .image-ctn{position:relative;display:inline-block;max-width:100%;z-index:2}.annotator-ctn .image-ctn .markers{position:absolute;width:100%;height:100%;z-index:1}.annotator-ctn .image-ctn .markers .marker{position:absolute;-webkit-user-select:none;user-select:none}.annotator-ctn .image-ctn .markers .marker.marker-pin{width:30px;height:30px;font-size:12px;border-radius:50% 50% 50% 0;display:flex;justify-content:center;align-items:center;transform-origin:bottom left;transition:width .15s ease-out,height .15s ease-out,transform .15s ease-out;transform:translateY(-100%);cursor:move;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab}.annotator-ctn .image-ctn .markers .marker.marker-pin:active{cursor:default}.annotator-ctn .image-ctn .markers .marker.marker-pin:hover,.annotator-ctn .image-ctn .markers .marker.marker-pin.dragging{z-index:999;transform:translateY(-100%) scale(1.15)}.annotator-ctn .image-ctn .markers .marker.marker-rect .resize-helpers{position:absolute;width:100%;height:100%;display:none}.annotator-ctn .image-ctn .markers .marker.marker-rect .resize-helpers .handle{position:absolute;width:12px;height:12px;border-radius:50%;background:#fff}.annotator-ctn .image-ctn .markers .marker.marker-rect .resize-helpers .handle.top-left{top:0;left:0;transform:translate(-50%,-50%);cursor:nwse-resize}.annotator-ctn .image-ctn .markers .marker.marker-rect .resize-helpers .handle.bottom-left{top:100%;left:0;transform:translate(-50%,-50%);cursor:nesw-resize}.annotator-ctn .image-ctn .markers .marker.marker-rect .resize-helpers .handle.top-right{top:0;right:0;transform:translate(50%,-50%);cursor:nesw-resize}.annotator-ctn .image-ctn .markers .marker.marker-rect .resize-helpers .handle.bottom-right{top:100%;right:0;transform:translate(50%,-50%);cursor:nwse-resize}.annotator-ctn .image-ctn .markers .marker.marker-rect .count{position:absolute;top:50%;width:21px;height:21px;padding-right:1px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;transform:translate(-50%,-50%);pointer-events:none}.annotator-ctn .image-ctn .markers .marker.marker-rect:hover,.annotator-ctn .image-ctn .markers .marker.marker-rect.dragging{z-index:999}.annotator-ctn .image-ctn .markers .marker.marker-rect:hover .resize-helpers,.annotator-ctn .image-ctn .markers .marker.marker-rect.dragging .resize-helpers{display:block}.annotator-ctn .image-ctn .markers .marker.marker-rect:hover .count,.annotator-ctn .image-ctn .markers .marker.marker-rect.dragging .count{display:none}.annotator-ctn .image-ctn .markers .marker.marker-circle{border-radius:50%;transform:translate(-50%,-50%)}.annotator-ctn .image-ctn .markers .marker.marker-circle .resize-helpers{position:absolute;top:0;left:calc(50% - 1px);width:2px;height:50%;transform-origin:bottom center;display:none}.annotator-ctn .image-ctn .markers .marker.marker-circle .resize-helpers .handle{position:absolute;width:12px;height:12px;border-radius:50%;background:#fff}.annotator-ctn .image-ctn .markers .marker.marker-circle .resize-helpers .handle.top{top:0;left:1px;transform:translate(-50%,-50%);cursor:ns-resize}.annotator-ctn .image-ctn .markers .marker.marker-circle .resize-helpers .handle.center{top:100%;left:1px;transform:translate(-50%,-50%);cursor:move;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab}.annotator-ctn .image-ctn .markers .marker.marker-circle .resize-helpers .handle.center:active{cursor:default}.annotator-ctn .image-ctn .markers .marker.marker-circle .count{position:absolute;top:50%;width:21px;height:21px;padding-right:1px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;transform:translate(-50%,-50%);pointer-events:none}.annotator-ctn .image-ctn .markers .marker.marker-circle:hover,.annotator-ctn .image-ctn .markers .marker.marker-circle.dragging{z-index:999}.annotator-ctn .image-ctn .markers .marker.marker-circle:hover .resize-helpers,.annotator-ctn .image-ctn .markers .marker.marker-circle.dragging .resize-helpers{display:block}.annotator-ctn .image-ctn .markers .marker.marker-circle:hover .count,.annotator-ctn .image-ctn .markers .marker.marker-circle.dragging .count{display:none}.annotator-ctn .image-ctn img{display:block;max-width:100%;max-height:calc(100vh - 12rem)}.annotator-ctn .image.fullsize{align-items:flex-start;justify-content:flex-start}.annotator-ctn .image.fullsize .image-ctn{max-width:none}.annotator-ctn .image.fullsize .image-ctn img{max-width:none;max-height:none}