@paresh-barik-neophyte/store-layout-mapper/dist/index.css

A React-based image annotation tool for mapping store layouts

.annotation-tool-container{display:flex;height:100vh;background-color:#f3f4f6;overflow:hidden}.main-content{flex:1;position:relative}.sidebar{width:20rem;border-left:1px solid #e5e7eb;flex-shrink:0}.active-tool-button{background-color:#3b82f6}.inactive-tool-button{background-color:#d1d5db}.tool-button{position:relative;display:inline-flex;height:1.5rem;width:2.75rem;align-items:center;border-radius:9999px;transition-property:background-color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.tool-button:focus{outline:none}.active-tool-button-span{transform:translate(1.5rem)}.inactive-tool-button-span{transform:translate(.25rem)}.tool-button-span{display:inline-block;height:1rem;width:1rem;transform:translate(.25rem);border-radius:9999px;background-color:#fff;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:50}.modal-content{background-color:#fff;border-radius:.5rem;padding:1.5rem;width:24rem;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.modal-header{font-size:1.125rem;font-weight:600;margin-bottom:1rem}.form-group{margin-bottom:1rem}.label{display:block;font-size:.875rem;font-weight:500;color:#374151;margin-bottom:.5rem}.toggle-button-container{display:flex;align-items:center;justify-content:space-between}.input-field{width:100%;padding:.5rem .75rem;border:1px solid #d1d5db;border-radius:.5rem}.input-field:focus{outline:none;ring:2px solid #3b82f6}.border-error{border-color:#ef4444}.border-normal{border-color:#d1d5db}.toggle-button{position:relative;display:inline-flex;height:1.5rem;width:2.75rem;align-items:center;border-radius:9999px;transition-property:background-color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.toggle-switch{display:inline-block;height:1rem;width:1rem;transform:translate(.25rem);border-radius:9999px;background-color:#fff;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.toggle-on{background-color:#3b82f6}.toggle-off{background-color:#d1d5db}.error-message{color:#ef4444;font-size:.875rem;margin-bottom:1rem}.camera-modal-button{padding:.5rem 1rem;border-radius:.5rem}.cancel-button{padding:.5rem 1rem;background-color:#f3f4f6;color:#374151;border-radius:.5rem}.cancel-button:hover{background-color:#e5e7eb}.save-button{padding:.5rem 1rem;background-color:#3b82f6;color:#fff;border-radius:.5rem}.save-button:hover{background-color:#2563eb}.zone-svg{position:absolute;top:0;left:0}.zone-svg-path{transition-property:color;transition-duration:.2s}.camera-svg{position:absolute;top:0;left:0}.pointer-cursor{cursor:pointer}.preview-zone-svg{position:absolute;top:0;left:0}.canvas-container{width:100%;height:100%;background-color:#f7f7f7;overflow:hidden}.transform-wrapper,.transform-content{width:100%;height:100%}.transform-component{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.img-position{position:relative}.img-css{max-width:90%;max-height:90%;-o-object-fit:contain;object-fit:contain}.rendered-zone{position:absolute;top:0;left:0;width:100%;height:100%}.rendered-zone-div,.rendered-gondola-div{position:absolute;top:0;left:0;width:100%;height:100%;cursor:crosshair}.upload-div{position:fixed;top:1rem;left:50%;transform:translate(-50%);background-color:#fff;border-radius:.5rem;padding:1rem;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.upload-label{display:flex;align-items:center;justify-content:space-between;cursor:pointer}.upload-input{display:none}.gondola-modal-container{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:50}.gondola-modal-container-div{background-color:#fff;border-radius:.5rem;padding:1.5rem;width:24rem;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.gondola-modal-container-div-div{font-size:.875rem;color:#6b7280;margin-bottom:.5rem}.gondola-modal-h2{font-size:1.125rem;font-weight:600;margin-bottom:1rem}.gondola-modal-form{display:flex;flex-direction:column;gap:1.5rem}.gondola-modal-form-div{position:relative}.gondola-modal-form-input{width:100%;padding:.5rem .75rem;border:1px solid #d1d5db;border-radius:.5rem}.gondola-modal-form-input:focus{outline:none;ring:2px solid #3b82f6}.gondola-modal-dropdown{position:absolute;width:100%;margin-top:.5rem;background-color:#fff;border:1px solid #d1d5db;border-radius:.5rem;padding:.5rem;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-height:10rem;overflow-y:auto;z-index:10}.gondola-modal-dropdown-div{padding:.5rem;cursor:pointer}.gondola-modal-dropdown-div:hover{background-color:#e5e7eb}.gondola-modal-dropdown-div-default{font-weight:500;color:#374151;border-bottom:1px solid #d1d5db}.gondola-modal-dropdown-text{padding:.5rem;color:#6b7280;font-style:italic}.gondola-modal-button-container{display:flex;justify-content:flex-end;gap:.5rem;padding-top:1rem;background-color:#fff}.gondola-modal-cancel-button{padding:.5rem 1rem;color:#374151;border-radius:.5rem}.gondola-modal-cancel-button:hover{background-color:#e5e7eb}.gondola-modal-add-button{padding:.5rem 1rem;background-color:#3b82f6;color:#fff;border-radius:.5rem}.gondola-modal-add-button:hover{background-color:#2563eb}.gondola-modal-add-button:disabled{opacity:.5;cursor:not-allowed}.side-panel-container{height:100%;background-color:#fff;padding:1rem;overflow-y:auto}.side-panel-div{margin-bottom:1.5rem}.side-panel-h2{font-size:1.125rem;font-weight:600;margin-bottom:1rem}.side-panel-zone-list-container{display:flex;flex-direction:column;gap:.5rem}.side-panel-zone-list-div{border:1px solid #d1d5db;border-radius:.5rem;padding:.5rem}.side-panel-dropdown{display:flex;align-items:center;justify-content:space-between;padding:.5rem;cursor:pointer}.side-panel-dropdown-button{padding:.25rem;border-radius:.25rem}.side-panel-dropdown-button:hover{background-color:#e5e7eb}.zone-color-div{width:1rem;height:1rem;border-radius:9999px;margin-right:.5rem}.zone-list-edit-div{flex:1}.zone-list-edit-input{width:100%;padding:.25rem .5rem;border:1px solid #d1d5db;border-radius:.25rem}.zone-list-edit-input:focus{outline:none;ring:2px solid #3b82f6}.zone-list-edit-input-border-error{border-color:#ef4444}.zone-list-edit-input-border{border-color:#d1d5db}.zone-input-error-text{color:#ef4444;font-size:.875rem;margin-top:.25rem}.zone-name-span{flex:1}.zone-list-edit-check-button{padding:.25rem;border-radius:.25rem}.zone-list-edit-check-button:hover{background-color:#e5e7eb}.zone-list-edit-pencil-button{padding:.25rem;border-radius:.25rem}.zone-list-edit-pencil-button:hover{background-color:#e5e7eb}.zone-list-edit-disabled-pencil-button{opacity:.5;cursor:not-allowed}.zone-list-pencil-button-icon{color:#6b7280}.zone-list-trash-button{padding:.25rem;border-radius:.25rem}.zone-list-trash-button:hover{background-color:#e5e7eb}.zone-list-disabled-trash-button{opacity:.5;cursor:not-allowed}.zone-list-trash-button-icon{color:#ef4444}.gondola-list-container{background-color:#f7f7f7;padding:.5rem;border-top:1px solid #d1d5db}.gondola-list-h2{font-size:.875rem;font-weight:500;color:#6b7280;margin-bottom:.5rem;padding-left:1.75rem}.gondola-list-spacing{display:flex;flex-direction:column;gap:.25rem}.gondola-list{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;border-radius:.5rem;cursor:pointer}.gondola-list:hover{background-color:#e5e7eb}.gondola-list-sl-no{font-size:.875rem;color:#6b7280;width:1.5rem}.gondola-list-input-container{flex:1;position:relative}.gondola-list-input{width:100%;padding:.25rem .5rem;border:1px solid #d1d5db;border-radius:.25rem;font-size:.875rem}.gondola-list-input:focus{outline:none;ring:2px solid #3b82f6}.gondola-list-brand-suggestion{position:absolute;width:100%;margin-top:.5rem;background-color:#fff;border:1px solid #d1d5db;border-radius:.5rem;padding:.5rem;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-height:10rem;overflow-y:auto;z-index:50}.gondola-list-brand-list{padding:.5rem;cursor:pointer}.gondola-list-brand-list:hover{background-color:#e5e7eb}.gondola-list-brand-list-default{font-weight:500;color:#374151;border-bottom:1px solid #d1d5db}.gondola-list-brand-list-info{padding:.5rem;color:#6b7280;font-style:italic;font-size:.875rem}.gondola-list-brand-name{flex:1;font-size:.875rem}.gondola-list-brand-name-default{color:#6b7280;font-style:italic}.gondola-list-check-button{padding:.25rem;color:#34c759}.gondola-list-check-button:hover{color:#2ecc71}.gondola-list-check-icon{color:#34c759}.gondola-list-pencil-button{padding:.25rem;color:#6b7280}.gondola-list-pencil-button:hover{color:#4b5563}.gondola-list-disabled-pencil-button{opacity:.5;cursor:not-allowed}.gondola-list-pencil-icon{color:#6b7280}.gondola-list-trash-button{padding:.25rem;color:#ef4444}.gondola-list-trash-button:hover{color:#e53e3e}.gondola-list-disabled-trash-button{opacity:.5;cursor:not-allowed}.gondola-list-trash-icon{color:#ef4444}.gondola-list-empty-info{font-size:.875rem;color:#6b7280;font-style:italic;padding-left:1.75rem}.zone-list-empty-info{font-size:.875rem;color:#6b7280;font-style:italic}.side-panel-divider{height:1px;background-color:#d1d5db;margin:1.5rem 0}.camera-list-container{margin-bottom:1.5rem}.camera-list-h2{font-size:1.125rem;font-weight:600;margin-bottom:.5rem}.camera-list-spacing{display:flex;flex-direction:column;gap:.5rem}.camera-list-item-container{display:flex;align-items:center;justify-content:space-between}.camera-list-item-spacing{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.camera-list-camera-color{width:1rem;height:1rem;border-radius:9999px;margin-right:.5rem}.camera-list-camera-name{font-size:.875rem;font-weight:500}.camera-list-status-tag{font-size:.75rem;padding:.125rem .25rem;border-radius:.25rem}.camera-list-status-active{background-color:#34c759;color:#fff}.camera-list-status-inactive{background-color:#ef4444;color:#fff}.camera-list-button-container{display:flex;align-items:center;gap:.25rem}.camera-list-pencil-button{padding:.25rem;color:#6b7280}.camera-list-pencil-button:hover{color:#4b5563}.camera-list-disabled-pencil-button{opacity:.5;cursor:not-allowed}.camera-list-trash-button{padding:.25rem;color:#6b7280}.camera-list-trash-button:hover{color:#4b5563}.camera-list-disabled-trash-button{opacity:.5;cursor:not-allowed}.toolbar-container{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:50}.toolbar-list{display:flex;align-items:center;transition-property:transform;transition-duration:.3s}.toolbar-list-visible{transform:translate(1rem)}.toolbar-list-invisible{transform:translate(-60%)}.toolbar-list-container{background-color:#fff;border-radius:.5rem;padding:.5rem;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.toolbar-item-label{display:block}.toolbar-item-label-disabled{opacity:.5;cursor:not-allowed}.toolbar-item{padding:.5rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center;transition-property:background-color;transition-duration:.15s}.toolbar-item-enabled{cursor:pointer}.toolbar-item-enabled:hover{background-color:#e5e7eb}.toolbar-item-disabled{cursor:not-allowed}.toolbar-input{display:none}.toolbar-divider{width:100%;height:1px;background-color:#d1d5db;margin:.25rem 0}.toolbar-enabled-tool{cursor:pointer}.toolbar-enabled-tool:hover{background-color:#e5e7eb}.toolbar-disabled-tool{opacity:.5;cursor:not-allowed}.toolbar-active-tool{background-color:#3b82f6;color:#fff}.toolbar-inactive-tool{color:#000}.toolbar-hide-show-button{background-color:#fff;padding:.5rem;border-radius:.5rem;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;height:2.75rem;display:flex;align-items:center;justify-content:center;transition-property:color;transition-duration:.15s}.toolbar-hide-show-button:hover{color:#3b82f6}.zone-modal-conatiner{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:50}.zone-modal-conatiner-div{background-color:#fff;border-radius:.5rem;padding:1.5rem;width:24rem;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.zone-modal-h2{font-size:1.125rem;font-weight:600;margin-bottom:1rem}.zone-modal-form-div{margin-bottom:1rem}.zone-modal-input{width:100%;padding:.5rem .75rem;border:1px solid #d1d5db;border-radius:.5rem}.zone-modal-input:focus{outline:none;ring:2px solid #3b82f6}.zone-modal-input-error-border{border-color:#ef4444}.zone-modal-input-normal-border{border-color:#d1d5db}.zone-modal-input-error-info{color:#ef4444;font-size:.875rem;margin-top:.25rem}.zone-modal-button-container{display:flex;justify-content:flex-end;gap:.5rem}.zone-modal-cancel-button{padding:.5rem 1rem;color:#374151;border-radius:.5rem}.zone-modal-cancel-button:hover{background-color:#e5e7eb}.zone-modal-start-button{padding:.5rem 1rem;background-color:#3b82f6;color:#fff;border-radius:.5rem}.zone-modal-start-button:hover{background-color:#2563eb}.zone-modal-start-button:disabled{opacity:.5;cursor:not-allowed}