react-image-mask/dist/index.css

A React component for creating image masks with drawing tools

.controls{gap:1rem}.controls,.controls-button{display:flex;flex-direction:row}.controls-button{align-items:center;gap:.5rem;justify-content:center}.controls-bar{--controls-gap:0.25rem;--controls-padding:0.2rem;--button-min-width:40px;--button-padding:0.2rem;--text-size:0.65rem;--icon-scale:0.85;--button-gap:0.2rem;--color-size:16px;align-items:center;background-color:#f5f5f5;border-radius:4px;box-shadow:0 2px 4px #0000001a;container-type:inline-size;display:flex;gap:var(--controls-gap,1rem);margin-bottom:.5rem;padding:var(--controls-padding,.5rem)}.tool-buttons{display:flex;gap:var(--button-gap)}.action-buttons button,.dropdown-button,.tool-buttons button{min-width:var(--button-min-width)}.button-content{align-items:center;display:flex;flex-direction:column;gap:calc(var(--button-gap)*.5)}.button-content span{color:#666;font-family:inherit;font-size:var(--text-size);font-weight:400;text-align:center;transition:opacity .2s ease}.button-content svg{transform:scale(var(--icon-scale));transition:transform .2s ease}.tool-buttons button{background:none;border:none;border-radius:4px;color:#666;cursor:pointer;padding:var(--button-padding);transition:all .2s ease}.tool-buttons button.active,.tool-buttons button:hover{background-color:#e0e0e0;color:#333}.dropdown-container{position:relative}.dropdown-button{align-items:center;background:none;border:none;border-radius:4px;color:#666;cursor:pointer;display:flex;gap:var(--button-gap);padding:var(--button-padding);transition:all .2s ease}.dropdown-button:hover{background-color:#e0e0e0;color:#333}.current-color{border:1px solid #ccc;border-radius:4px;height:var(--color-size);width:var(--color-size)}.current-brush{border-radius:50%;margin-left:var(--button-gap)}.dropdown-menu{background-color:#fff;border-radius:4px;box-shadow:0 2px 8px #0000001a;left:0;padding:.5rem;position:absolute;top:100%;z-index:100}.color-dropdown{display:grid;gap:.5rem;grid-template-columns:repeat(4,1fr);min-width:200px}.color-option{border:1px solid #ccc;border-radius:4px;cursor:pointer;height:30px;transition:transform .2s ease;width:30px}.color-option:hover{transform:scale(1.1)}.color-option.active{border:2px solid #333}.brush-dropdown{display:flex;flex-direction:column;gap:.5rem;min-width:100px}.brush-option{align-items:center;background:none;border:none;border-radius:4px;cursor:pointer;display:flex;gap:.5rem;padding:.5rem;transition:background-color .2s ease}.brush-option.active,.brush-option:hover{background-color:#e0e0e0}.brush-size-circle{border-radius:50%}.opacity-control{align-items:center;display:flex;gap:.5rem;min-width:100px}.opacity-control .button-content{align-items:center;display:flex;flex-direction:column;gap:.25rem;width:100%}.opacity-control input[type=range]{cursor:pointer;width:100%}.opacity-control .button-content span{color:#666;font-family:system-ui;font-size:.75rem;text-align:center}.action-buttons{display:flex;gap:calc(var(--button-gap)*.3)}.action-buttons button{background:none;border:none;border-radius:2px;color:#666;cursor:pointer;min-width:var(--button-min-width);padding:var(--button-padding);position:relative;transition:all .2s ease}.action-buttons button:first-child{border-bottom-right-radius:0;border-top-right-radius:0}.action-buttons button:last-child{border-bottom-left-radius:0;border-top-left-radius:0}.action-buttons button:not(:last-child):after{background-color:#00000026;bottom:20%;content:"";position:absolute;right:0;top:20%;width:1px}.action-buttons button:not(:first-child):not(:last-child){border-radius:0}.action-buttons button:only-child{border-radius:2px}.action-buttons button:hover{background-color:#fffc;color:#333}.action-buttons button:disabled{cursor:not-allowed;opacity:.5}.zoom-control{align-items:center;display:flex;gap:.5rem;margin-left:auto}.zoom-control button{background-color:#e0e0e0;border:none;border-radius:4px;color:#333;cursor:pointer;padding:.5rem 1rem;transition:background-color .2s ease}.zoom-control button:hover{background-color:#d0d0d0}.zoom-dropdown{display:flex;flex-direction:column;gap:.5rem;min-width:100px}.zoom-option{background:none;border:none;border-radius:4px;color:#666;cursor:pointer;padding:.5rem;text-align:left;transition:all .2s ease}.zoom-option.active,.zoom-option:hover{background-color:#e0e0e0;color:#333}.zoom-option.active{font-weight:700}.zoom-icon-text{align-items:center;display:flex;gap:.25rem}.dropdown{display:inline-block;position:relative}.dropdown-content{background-color:#fff;border-radius:4px;box-shadow:0 2px 4px #0000001a;left:0;margin-top:4px;min-width:120px;position:absolute;top:100%;z-index:100}.dropdown-content button{align-items:center;background:none;border:none;cursor:pointer;display:flex;gap:8px;padding:8px;text-align:left;width:100%}.dropdown-content button .button-content{align-items:center;display:flex;flex-direction:row;gap:8px}.dropdown-content button:hover{background-color:#f0f0f0}@container (max-width: 600px){.controls-bar{--controls-gap:0.2rem;--controls-padding:0.15rem;--button-min-width:36px;--button-padding:0.15rem;--text-size:0.6rem;--icon-scale:0.8;--button-gap:0.15rem;--color-size:14px}}@container (max-width: 450px){.controls-bar{--controls-gap:0.15rem;--controls-padding:0.1rem;--button-min-width:32px;--button-padding:0.1rem;--text-size:0.55rem;--icon-scale:0.75;--button-gap:0.1rem;--color-size:12px}}@container (max-width: 300px){.controls-bar{--controls-gap:0.1rem;--controls-padding:0.08rem;--button-min-width:28px;--button-padding:0.08rem;--text-size:0.5rem;--icon-scale:0.65;--button-gap:0.08rem;--color-size:10px}.button-content span{display:none}.button-content{flex-direction:row;justify-content:center}}@media (max-width:600px){.controls-bar:not([style*=container-type]){--controls-gap:0.2rem;--controls-padding:0.15rem;--button-min-width:36px;--button-padding:0.15rem;--text-size:0.6rem;--icon-scale:0.8;--button-gap:0.15rem;--color-size:14px}}@media (max-width:450px){.controls-bar:not([style*=container-type]){--controls-gap:0.15rem;--controls-padding:0.1rem;--button-min-width:32px;--button-padding:0.1rem;--text-size:0.55rem;--icon-scale:0.75;--button-gap:0.1rem;--color-size:12px}}@media (max-width:300px){.controls-bar:not([style*=container-type]){--controls-gap:0.1rem;--controls-padding:0.08rem;--button-min-width:28px;--button-padding:0.08rem;--text-size:0.5rem;--icon-scale:0.65;--button-gap:0.08rem;--color-size:10px}.controls-bar:not([style*=container-type]) .button-content span{display:none}.controls-bar:not([style*=container-type]) .button-content{flex-direction:row;justify-content:center}}.image-mask-container{background-color:#f5f5f5;border-radius:8px;box-shadow:0 2px 4px #0000001a;display:flex;flex-direction:column;gap:1rem;height:100%;min-height:400px;padding:1rem;width:100%}.Stage{border:1px solid #ccc;border-radius:4px;overflow:hidden}