react-scribble-pad
Version:
React Sketches just made easy.
2 lines (1 loc) • 19.8 kB
CSS
@font-face{font-family:Architects Daughter;src:url(fonts/ArchitectsDaughter-Regular.woff2) format("woff2");font-weight:400;font-style:normal}html,body{margin:0;padding:0;overflow-x:hidden}body{box-sizing:border-box;font-family:Architects Daughter,Courier New,monospace,sans-serif}:root{--eraserPositionX: -100px;--eraserPositionY: -100px;--eraserWidth: 100px;--eraserHeight: 100px;--scale: 1}.eraser-tool{position:fixed;border:2px solid #ae9f9f;border-radius:10px;box-shadow:0 0 10px #0003;transform:translate(calc(var(--eraserPositionX) - (var(--eraserWidth, 100px) / 2)),calc(var(--eraserPositionY) - (var(--eraserHeight, 100px) / 2)));z-index:214748365;top:0;left:0;width:var(--eraserWidth, 100px);height:var(--eraserHeight, 100px);background-color:transparent;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);pointer-events:none}.canvas-container{position:relative;overflow:hidden;width:100%;height:100%;background-color:transparent}.canvas{position:absolute;inset:0;width:100%;height:100%;z-index:214748364}.front,.back{pointer-events:none;background:transparent}ul{text-decoration:none;list-style:none;margin:0;padding:0}.li-box.hover:hover{background-color:#4bb2cb80;border-radius:10px;transition:background-color .2s ease-in}.sketch-tools-ul button:disabled{background-color:transparent;opacity:.5}.sketch-tools-ul button{background-color:transparent}.ul-container{display:flex;row-gap:8px}.pallete-box{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;left:50%;translate:-50% 0;padding:1px;background-color:#fff6;color:#000;z-index:2147483646;border:1.5px solid #eaecef;box-shadow:0 0 0 1px #0003;border-radius:12px;scale:var(--scale);cursor:default}.sketch-tools-ul{display:flex;justify-content:center;column-gap:10px}.pallete-box.show{animation:moveUp .8s ease-out forwards}.pallete-box.hide{animation:moveDown .4s ease-in forwards}@keyframes moveUp{0%{transform:translateY(200px)}to{transform:translateY(0)}}@keyframes moveDown{0%{transform:translateY(0)}to{transform:translateY(200px)}}.pallete-tools{padding:4px;display:flex;flex-direction:row;align-items:center;justify-content:space-around;column-gap:8px}.screen-tools{width:100%;display:flex;align-items:center;justify-content:center;column-gap:4.8px;border-right:1px solid #949597;margin-right:4px;padding-right:4px}.li-box{-webkit-user-select:none;user-select:none;position:relative;cursor:pointer;border:1px;padding:4px;border:1px solid transparent;border-radius:6px}.li-box.show{border-color:#464c54;background-color:#4bb2cbb3;fill:#d8b4ff;fill:oklch(82.7% .119 306.383)}.center{display:flex;align-items:center}.editor-input{border:none;outline:none;opacity:.8;-webkit-backdrop-filter:10px;backdrop-filter:10px;padding:4px;background-color:#828586b4}.sticker-editor{border:none;outline:none;font-size:14px;-webkit-backdrop-filter:10px;backdrop-filter:10px;line-height:4px;padding:4px;left:48px;background-color:#828586b4;opacity:.8}.pencil{display:inline-block;width:30px;height:30px;scale:80%;--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23000' d='m59.466 6.317l-1.783-1.784a8.654 8.654 0 0 0-12.234 0L9.419 40.565L2.278 59.237c-.838 2.21.281 3.323 2.484 2.481l18.675-7.134l36.029-36.033c3.381-3.376 3.377-8.853 0-12.234m-22.629 9.486l2.508 2.507l-24.764 24.766l-2.508-2.509zm3.834 3.834l3.695 3.696l-24.763 24.765l-3.695-3.695zM11.026 57.32l-4.342-4.346l4.201-10.941L21.964 53.11zm12.411-5.387l-2.506-2.509l24.762-24.765l2.508 2.509zm26.209-26.21L38.281 14.36l2.827-2.828l11.365 11.363z'/%3E%3C/svg%3E");background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.palette-outline{display:inline-block;width:24px;height:24px;vertical-align:-.125em;content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23000' d='M33.126 44.979c-2.951-2.363-7.736-2.363-10.687 0c-2.948 2.364-2.948 6.195 0 8.559c2.95 2.364 7.735 2.364 10.687 0c2.949-2.364 2.949-6.195 0-8.559m-11.34-3.409c2.287-2.841 1.513-6.43-1.727-8.014s-7.72-.564-10.007 2.277c-2.284 2.841-1.512 6.43 1.727 8.014c3.242 1.585 7.722.565 10.007-2.277m-3.103-13.552c2.189-2.446 1.66-5.713-1.183-7.297c-2.842-1.585-6.919-.887-9.109 1.559s-1.66 5.712 1.182 7.296s6.921.887 9.11-1.558m2.017-8.71c2.718 1.582 6.669.98 8.823-1.341c2.155-2.322 1.7-5.485-1.017-7.066c-2.717-1.582-6.668-.981-8.822 1.34c-2.156 2.322-1.701 5.485 1.016 7.067m22.946-4.037c2.42-1.237 2.689-3.667.6-5.43c-2.087-1.763-5.746-2.19-8.167-.954c-2.422 1.236-2.69 3.667-.601 5.43s5.748 2.19 8.168.954'/%3E%3Cpath fill='%23000' d='M52.475 33.199c-2.164-.636-4.031-1.186-4.544-2.459c-.297-.738-.181-1.822.323-3.221c5.366-5.02 13.394-13.109 13.168-16.396c-.09-1.314-2.184-3.196-3.557-3.196l-.108.004c-1.486.102-3.757 2.068-6.183 4.73a10 10 0 0 0-.781-1.761C48.248 6.515 42.653 4 35.444 4c-5.605 0-11.846 1.545-18.045 4.468c-7.957 3.752-13.9 11.576-15.14 19.934c-.922 6.206.18 15.592 10.658 25.075C17.563 57.684 24.879 60 33.514 60h.003c6.932 0 13.955-1.543 19.271-4.23C58.729 52.765 62 48.609 62 44.066c0-8.066-5.506-9.685-9.525-10.867m5.39-23.772c.631 0 2.027 1.31 2.06 1.798c.191 2.783-9.723 12.647-16.35 18.529l-1.13-.983l-.739-.645c4.932-7.358 13.366-18.509 16.159-18.699M39.266 31.06l1.522-1.745l1.731 1.51L41 32.569zm12.62 22.924C46.84 56.536 40.146 58 33.517 58h-.002c-8.14 0-14.978-2.133-19.256-6.006C4.435 43.105 3.386 34.418 4.235 28.695c1.146-7.714 6.648-14.943 14.019-18.418C24.187 7.479 30.132 6 35.444 6c6.383 0 11.473 2.207 13.618 5.904c.462.795.772 1.645.952 2.535c-4.478 5.283-9.026 12.053-9.895 13.359l-2.777 3.184c-1.458-.015-2.918.622-3.368 2.161c-1.658 5.655-5.351 9.162-5.351 9.162s9.361-1.85 11.152-3.952c.97-1.138 1.44-2.498 1.429-3.738l2.908-3.334c.388-.341.965-.854 1.676-1.496c-.004.624.082 1.194.286 1.702c.875 2.172 3.284 2.88 5.835 3.63c3.977 1.17 8.09 2.379 8.09 8.949c.001 3.75-2.882 7.272-8.113 9.918'/%3E%3Cpath fill='%23000' d='M54.121 39.807c-2.95-2.363-7.736-2.363-10.686 0s-2.949 6.195 0 8.559s7.735 2.363 10.686 0s2.95-6.196 0-8.559m-1.453 7.394c-2.147 1.721-5.633 1.721-7.779 0s-2.147-4.51 0-6.23s5.632-1.721 7.779 0s2.147 4.509 0 6.23'/%3E%3C/svg%3E")}.pencil-tools:after{display:inline-block;width:22px;height:22px;vertical-align:-.125em;content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M5.25 23.25a3 3 0 0 1-3-3V6.53a3 3 0 0 1 .32-1.34l2-4a.75.75 0 0 1 1.34 0l2 4a3 3 0 0 1 .32 1.34v13.72a3 3 0 0 1-2.98 3m-3-16.75h6m-6 12h6m6-17.75h6s1.5 0 1.5 1.5v19.5s0 1.5-1.5 1.5h-6s-1.5 0-1.5-1.5V2.25s0-1.5 1.5-1.5m-1.5 4.5h3.5m-3.5 4.5h3.5m-3.5 4.5h3.5m-3.5 4.5h3.5'/%3E%3C/svg%3E")}.eraser-line:after{display:inline-block;width:24px;height:24px;vertical-align:-.125em;content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath fill='%23000' d='m5.505 11.41l.53.53zM3 14.952h-.75zM9.048 21v.75zM11.41 5.505l-.53-.53zm1.831 12.34a.75.75 0 0 0 1.06-1.061zM7.216 9.697a.75.75 0 1 0-1.06 1.061zm10.749 2.362l-5.905 5.905l1.06 1.06l5.905-5.904zm-11.93-.12l5.905-5.905l-1.06-1.06l-5.905 5.904zm0 6.025c-.85-.85-1.433-1.436-1.812-1.933c-.367-.481-.473-.79-.473-1.08h-1.5c0 .749.312 1.375.78 1.99c.455.596 1.125 1.263 1.945 2.083zm-1.06-7.086c-.82.82-1.49 1.488-1.945 2.084c-.468.614-.78 1.24-.78 1.99h1.5c0-.29.106-.6.473-1.08c.38-.498.962-1.083 1.812-1.933zm7.085 7.086c-.85.85-1.435 1.433-1.933 1.813c-.48.366-.79.472-1.08.472v1.5c.75 0 1.376-.312 1.99-.78c.596-.455 1.264-1.125 2.084-1.945zm-7.085 1.06c.82.82 1.487 1.49 2.084 1.945c.614.468 1.24.78 1.989.78v-1.5c-.29 0-.599-.106-1.08-.473c-.497-.38-1.083-.962-1.933-1.812zm12.99-12.99c.85.85 1.433 1.436 1.813 1.933c.366.481.472.79.472 1.08h1.5c0-.749-.312-1.375-.78-1.99c-.455-.596-1.125-1.263-1.945-2.083zm1.06 7.086c.82-.82 1.49-1.488 1.945-2.084c.468-.614.78-1.24.78-1.99h-1.5c0 .29-.106.6-.473 1.08c-.38.498-.962 1.083-1.812 1.933zm0-8.146c-.82-.82-1.487-1.49-2.084-1.945c-.614-.468-1.24-.78-1.989-.78v1.5c.29 0 .599.106 1.08.473c.497.38 1.083.962 1.933 1.812zm-7.085 1.06c.85-.85 1.435-1.433 1.933-1.812c.48-.367.79-.473 1.08-.473v-1.5c-.75 0-1.376.312-1.99.78c-.596.455-1.264 1.125-2.084 1.945zm2.362 10.749L7.216 9.698l-1.06 1.061l7.085 7.085z'/%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M9 21h12'/%3E%3C/g%3E%3C/svg%3E")}.reset:after{display:inline-block;width:24px;height:24px;vertical-align:-.125em;content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Cg fill='none' fill-rule='evenodd' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'%3E%3Cpath d='M6.5 3.5c-2.414 1.377-4 4.022-4 7a8 8 0 1 0 8-8'/%3E%3Cpath d='M6.5 7.5v-4h-4'/%3E%3C/g%3E%3C/svg%3E")}.undo:after{display:inline-block;width:22px;height:22px;vertical-align:-.125em;content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' d='M15.5 11.25A7.75 7.75 0 0 0 7.75 3.5C5.09 3.5 2.54 4.94 1 7.06' stroke-width='0.6'/%3E%3Cpath fill='%23000' d='M4.79 8H1c-.55 0-1-.45-1-1V3.21c0-.45.54-.67.85-.35l4.29 4.29c.32.31.1.85-.35.85'/%3E%3C/svg%3E")}.redo:after{display:inline-block;width:22px;height:22px;vertical-align:-.125em;content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' d='M.5 11.25A7.75 7.75 0 0 1 8.25 3.5c2.66 0 5.21 1.44 6.75 3.56' stroke-width='0.6'/%3E%3Cpath fill='%23000' d='M11.21 8H15c.55 0 1-.45 1-1V3.21c0-.45-.54-.67-.85-.35l-4.29 4.29c-.32.31-.1.85.35.85'/%3E%3C/svg%3E")}.laser:after{display:inline-block;width:20px;height:20px;vertical-align:-.125em;content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M4 2.5a.5.5 0 0 0-1 0V5a2 2 0 0 0 1 1.732V7.5A1.5 1.5 0 0 0 5.5 9h4v3.5a.5.5 0 0 0 1 0V9h4A1.5 1.5 0 0 0 16 7.5v-.768A2 2 0 0 0 17 5V2.5a.5.5 0 0 0-1 0V5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zM5 7h10v.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5zm.5 7a.5.5 0 0 0 0 1H7a.5.5 0 0 0 0-1zm7 .5a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H13a.5.5 0 0 1-.5-.5M10 15a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1m0 1a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2a.5.5 0 0 1 .5-.5m-1.146-.146a.5.5 0 0 0-.708-.708l-1.5 1.5a.5.5 0 0 0 .708.708zm2.292-.708a.5.5 0 0 0 0 .708l1.5 1.5a.5.5 0 0 0 .708-.708l-1.5-1.5a.5.5 0 0 0-.708 0' stroke-width='0.2' stroke='%23000'/%3E%3C/svg%3E")}.keyboard:after{display:inline-block;width:24px;height:24px;vertical-align:-.125em;content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath fill='%23000' d='M7 9a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0 3a1 1 0 1 1-2 0a1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0-3a1 1 0 1 1-2 0a1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0 3a1 1 0 1 1-2 0a1 1 0 0 1 2 0m3-3a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0 3a1 1 0 1 1-2 0a1 1 0 0 1 2 0m3-3a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0 3a1 1 0 1 1-2 0a1 1 0 0 1 2 0'/%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M16 5c2.828 0 4.243 0 5.121.879C22 6.757 22 8.172 22 11v2c0 2.828 0 4.243-.879 5.121C20.243 19 18.828 19 16 19H8c-2.828 0-4.243 0-5.121-.879C2 17.243 2 15.828 2 13v-2c0-2.828 0-4.243.879-5.121C3.757 5 5.172 5 8 5h4M7 16h10'/%3E%3C/g%3E%3C/svg%3E")}.cursor-sb:after{display:inline-block;width:26px;height:26px;vertical-align:-.125em;content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M1 5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v5a2 2 0 0 1-1.164 1.818a1.5 1.5 0 0 0-.275-.379l-.446-.446A1 1 0 0 0 14 10V5a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h4v1H3a2 2 0 0 1-2-2zm7.854 3.146A.5.5 0 0 0 8 8.5v6a.5.5 0 0 0 .9.3l1.35-1.8h2.25a.5.5 0 0 0 .354-.854zM9 13V9.707L11.293 12H10a.5.5 0 0 0-.4.2z'/%3E%3C/svg%3E")}.sticker:after{display:inline-block;width:24px;height:24px;vertical-align:-.125em;content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.4' d='M21 15V5a2 2 0 0 0-2-2h-7m9 12v.172a2 2 0 0 1-.586 1.414l-3.828 3.828a2 2 0 0 1-1.414.586H15m6-6h-4a2 2 0 0 0-2 2v4m0 0H5a2 2 0 0 1-2-2v-7m10-5h4m-7 4h7M7 15h4M6 3v3m0 3V6m0 0h3M6 6H3'/%3E%3C/svg%3E")}.screen:after{display:inline-block;width:26px;height:26px;vertical-align:-.125em;content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23000' d='M35.288 7.445a4.82 4.82 0 0 1 6.894 6.735l-8.01 8.392a3.75 3.75 0 0 1-1.87 1.065l-5.77 1.331a1.25 1.25 0 0 1-1.517-1.408l.875-5.69a3.75 3.75 0 0 1 1.055-2.082zm5.337 2.121a2.32 2.32 0 0 0-3.57-.353l-8.342 8.342a1.25 1.25 0 0 0-.352.694l-.595 3.869l3.974-.917a1.25 1.25 0 0 0 .623-.355l8.01-8.392a2.32 2.32 0 0 0 .252-2.888m-11.928.934H10.25a3.75 3.75 0 0 0-3.75 3.75v4.932c1.01-.747 2.106-1.514 3.208-2.164c1.342-.792 2.796-1.475 4.186-1.687c1.445-.22 2.946.062 4.055 1.356c.523.61.827 1.285.922 2.005c.093.704-.024 1.376-.225 1.982c-.36 1.086-1.073 2.168-1.672 3.078l-.12.181c-.682 1.039-1.196 1.866-1.392 2.603c-.09.34-.095.603-.043.821c.049.21.17.464.465.76c.403.402.758.545 1.06.584c.32.042.699-.018 1.15-.212c.943-.405 1.908-1.259 2.772-2.123a1.25 1.25 0 1 1 1.768 1.768c-.869.87-2.128 2.04-3.553 2.652c-.732.314-1.572.51-2.462.394c-.909-.119-1.756-.549-2.503-1.296c-.581-.582-.963-1.236-1.131-1.957c-.167-.712-.106-1.403.061-2.033c.32-1.2 1.087-2.373 1.719-3.334l.035-.053c.676-1.028 1.22-1.857 1.473-2.62c.12-.363.149-.643.12-.868c-.028-.21-.114-.44-.342-.705c-.391-.457-.921-.643-1.78-.512c-.915.14-2.04.63-3.292 1.368c-1.233.728-2.492 1.639-3.667 2.527q-.41.31-.812.619V33.75a3.75 3.75 0 0 0 3.75 3.75h27.5a3.75 3.75 0 0 0 3.75-3.75V18.515l2.5-2.62V33.75A6.25 6.25 0 0 1 37.75 40h-27.5A6.25 6.25 0 0 1 4 33.75v-19.5A6.25 6.25 0 0 1 10.25 8h20.947z'/%3E%3C/svg%3E")}.screen-off:after{display:inline-block;width:26px;height:26px;vertical-align:-.125em;content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='m12.293 13l1.853 1.854a.5.5 0 0 0 .708-.708l-13-13a.5.5 0 1 0-.708.708l1.355 1.354A2.5 2.5 0 0 0 1 5.5v5A2.5 2.5 0 0 0 3.5 13zm-1-1H3.5A1.5 1.5 0 0 1 2 10.5V7.272c.555-.453 1.19-.864 1.749-1.071c.31-.116.557-.153.735-.132c.157.019.265.08.35.208c.126.189.126.34.045.537c-.098.24-.3.497-.573.83l-.034.043c-.243.295-.538.655-.716 1.043c-.201.436-.275.95-.003 1.494c.42.842 1.368.932 2.115.788a4.43 4.43 0 0 0 2.186-1.158a.5.5 0 1 0-.708-.708c-.428.429-1.08.77-1.668.884c-.62.12-.924-.04-1.03-.254c-.104-.206-.093-.392.016-.628c.122-.266.342-.535.616-.87l.01-.012c.248-.302.551-.673.715-1.073a1.7 1.7 0 0 0 .128-.553zM4.357 5.064a2.9 2.9 0 0 0-.956.199c-.469.174-.952.448-1.401.758V5.5a1.5 1.5 0 0 1 1.305-1.487zm6.375 3.474l-.056.016l-.805-.805l.578-.17c.24-.071.46-.201.636-.378l2.64-2.64a.914.914 0 0 0-1.292-1.293l-2.64 2.639a1.5 1.5 0 0 0-.378.638l-.17.579l-.806-.806l.017-.055a2.5 2.5 0 0 1 .63-1.063l2.64-2.64a1.914 1.914 0 1 1 2.707 2.708l-2.64 2.64a2.5 2.5 0 0 1-1.06.63m3.595 3.668l-.707-.708c.236-.265.38-.615.38-.998V7.115l1-1V10.5c0 .66-.255 1.26-.673 1.706M5.121 3l1 1h2.75l1-1z'/%3E%3C/svg%3E")}.paint-roller:after{display:inline-block;width:22px;height:22px;vertical-align:-.125em;content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M87 20v130h8.596c-.196 2.517-.095 4.886.404 7c1.733 7.34 8.458 16 16 16s14.267-8.66 16-16c.5-2.114.6-4.483.404-7h101.27c-2.738 5.914-6.99 16.49-5.674 23c.846 4.188 4.13 9.127 7.814 9.127s6.967-4.94 7.813-9.127c1.315-6.51-2.936-17.086-5.674-23h102.14c1.85 7.268 8.477 15.67 15.907 15.67s14.056-8.402 15.908-15.67H425V94h14v85.99s.417 10.562-9.986 15.13c-.868.223-33.657 8.69-69.08 18.153c-17.945 4.794-36.337 9.78-51.182 13.975c-14.845 4.194-25.117 7.082-30.656 9.51c-6.74 2.954-14.238 6.833-20.422 13.25S247 265.748 247 277v103h18V277c0-6.897 2.1-10.83 5.637-14.502c3.538-3.672 8.894-6.717 14.685-9.256c1.548-.678 13.63-4.52 28.324-8.672c14.696-4.15 33.033-9.127 50.932-13.908c35.798-9.562 69.844-18.35 69.844-18.35l.62-.162l.59-.248C456.533 203.194 457 179.99 457 179.99V76h-32V20zm18 18h302v47.373c-7.212 4.035-14.646 14.71-23 15.627c-21.86 2.4-42.026-16.844-64-16c-16.853.647-32.418 22.454-48 16c-11.018-4.564-4.686-28.23-16-32c-22.627-7.542-40.21 30.31-64 32c-16.823 1.196-31.135-16-48-16c-12.762 0-28.045 1.332-39 7.906zm39 159s-19.875 31.586-16 48c1.733 7.34 8.458 16 16 16s14.267-8.66 16-16c3.875-16.414-16-48-16-48m89 201v94h46v-94z'/%3E%3C/svg%3E")}.lock:after{display:inline-block;width:24px;height:24px;vertical-align:-.125em;content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M2 16c0-2.828 0-4.243.879-5.121C3.757 10 5.172 10 8 10h8c2.828 0 4.243 0 5.121.879C22 11.757 22 13.172 22 16s0 4.243-.879 5.121C20.243 22 18.828 22 16 22H8c-2.828 0-4.243 0-5.121-.879C2 20.243 2 18.828 2 16Z'/%3E%3Ccircle cx='12' cy='16' r='2'/%3E%3Cpath stroke-linecap='round' d='M6 10V8a6 6 0 1 1 12 0v2'/%3E%3C/g%3E%3C/svg%3E")}.full-screen:after{display:inline-block;width:25px;height:25px;vertical-align:-.125em;content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5'%3E%3Cpath d='M9.998 6c-.015 1.707-.11 2.648-.73 3.268s-1.561.716-3.268.73m3.998 7.999c-.015-1.706-.11-2.647-.73-3.267S7.707 14.014 6 14m8-8c.014 1.707.11 2.648.73 3.268s1.56.716 3.267.73M14 17.997c.014-1.706.11-2.647.73-3.267s1.56-.716 3.267-.73'/%3E%3Cpath d='M22 12c0 4.714 0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12s0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464c.974.974 1.3 2.343 1.41 4.536'/%3E%3C/g%3E%3C/svg%3E")}.screenshot:after{display:inline-block;width:25px;height:25px;vertical-align:-.125em;content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3Cpath stroke-linecap='round' d='M2 13.364c0-3.065 0-4.597.749-5.697a4.4 4.4 0 0 1 1.226-1.204c.72-.473 1.622-.642 3.003-.702c.659 0 1.226-.49 1.355-1.125A2.064 2.064 0 0 1 10.366 3h3.268c.988 0 1.839.685 2.033 1.636c.129.635.696 1.125 1.355 1.125c1.38.06 2.282.23 3.003.702c.485.318.902.727 1.226 1.204c.749 1.1.749 2.632.749 5.697s0 4.596-.749 5.697a4.4 4.4 0 0 1-1.226 1.204C18.904 21 17.343 21 14.222 21H9.778c-3.121 0-4.682 0-5.803-.735A4.4 4.4 0 0 1 2.75 19.06A3.4 3.4 0 0 1 2.277 18M19 10h-1'/%3E%3C/g%3E%3C/svg%3E")}.exit:after{display:inline-block;width:23px;height:23px;vertical-align:-.125em;content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' d='M24 12H8m10.5-5c0 .577.665 1.562 1.228 2.294a7.5 7.5 0 0 0 1.745 1.662C22.2 11.445 23.2 12 23.99 12c-.79 0-1.79.556-2.517 1.044a7.5 7.5 0 0 0-1.745 1.662c-.563.732-1.228 1.717-1.228 2.294m-4-10V2.5h-.329A46 46 0 0 1 1.103.605L.75.5H.5v23h.25l.353-.105A46 46 0 0 1 14.171 21.5h.329V17' stroke-width='1'/%3E%3C/svg%3E")}@media screen and (max-width: 440px){.pallete-tools{flex-direction:column}.screen-tools{border-bottom:1px solid #949597;align-items:center;justify-content:center;column-gap:4.8px;border-right:0;margin-bottom:4px;padding-right:0}.pallete-box{bottom:8px}}