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{border-left:1px solid #f4f4f4}.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] .annotator-background{background:#efefef url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXR0ZXJuIGlkPSJhIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPjxwYXRoIGZpbGw9InJnYmEoMCwgMCwgMCwgMC4yKSIgZD0iTTAgMGgxMHYxMEgwem0xMCAxMGgxMHYxMEgxMHoiLz48L3BhdHRlcm4+PHJlY3QgZmlsbD0idXJsKCNhKSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIvPjwvc3ZnPg==);opacity:.45}.annotator[data-theme=light] .annotator-placeholder-ctn{background:#fcfcfc}.annotator[data-theme=light] .annotator-toolbar-inner,.annotator[data-theme=light] .annotator-toolbar-debug{background:white}.annotator[data-theme=light] .annotator-toolbar-inner .coord:not(:last-child),.annotator[data-theme=light] .annotator-toolbar-debug .coord:not(:last-child){border-right:1px solid #efefef}.annotator[data-theme=light] .annotator-toolbar .tool svg .vibrant,.annotator[data-theme=light] .annotator-toolbar .tool svg .faded{fill:#999}.annotator[data-theme=light] .annotator-toolbar .tool svg .faded{opacity:.075}.annotator[data-theme=light] .annotator-toolbar .tool:not(.selected):hover svg .vibrant,.annotator[data-theme=light] .annotator-toolbar .tool:not(.selected):hover svg .faded{fill:#222}.annotator[data-theme=light] .annotator-toolbar .color{border-left:1px solid #f4f4f4}.annotator[data-theme=light] .annotator-toolbar .color-selected svg{fill:#c9c9c9}.annotator[data-theme=light] .annotator-toolbar .color-selected:hover svg{fill:#5c606d}.annotator[data-theme=light] .annotator-toolbar .color-selector .colors{background:white}.annotator[data-theme=light] .annotator-toolbar .color-selector .colors:after{border-color:#fff0;border-bottom-color:#fff}.annotator[data-theme=dark] .annotator-background{background:#2d2f36 url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXR0ZXJuIGlkPSJhIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPjxwYXRoIGZpbGw9InJnYmEoMCwgMCwgMCwgMC4yKSIgZD0iTTAgMGgxMHYxMEgwem0xMCAxMGgxMHYxMEgxMHoiLz48L3BhdHRlcm4+PHJlY3QgZmlsbD0idXJsKCNhKSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIvPjwvc3ZnPg==)}.annotator[data-theme=dark] .annotator-placeholder-ctn{background:#16171a;color:#c5c5c6}.annotator[data-theme=dark] .annotator-toolbar-inner{background:#16171a}.annotator[data-theme=dark] .annotator-toolbar-debug{background:#16171a;color:#fff}.annotator[data-theme=dark] .annotator-toolbar-debug .coord:not(:last-child){border-right:1px solid #454851}.annotator[data-theme=dark] .annotator-toolbar .tool svg .vibrant,.annotator[data-theme=dark] .annotator-toolbar .tool svg .faded{fill:#898989}.annotator[data-theme=dark] .annotator-toolbar .tool svg .faded{opacity:.15}.annotator[data-theme=dark] .annotator-toolbar .tool:not(.selected):hover svg .vibrant,.annotator[data-theme=dark] .annotator-toolbar .tool:not(.selected):hover svg .faded{fill:#fcfcfc}.annotator[data-theme=dark] .annotator-toolbar .color{border-left:1px solid #2d2f36}.annotator[data-theme=dark] .annotator-toolbar .color-selected svg{fill:#707070}.annotator[data-theme=dark] .annotator-toolbar .color-selected:hover svg{fill:#fcfcfc}.annotator[data-theme=dark] .annotator-toolbar .color-selector .colors{background:#16171a}.annotator[data-theme=dark] .annotator-toolbar .color-selector .colors:after{border-color:#0000;border-bottom-color:#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;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;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:white}.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:white}.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}