diff --git a/README_Web.md b/README_Web.md index 18f27dc..0a989c0 100644 --- a/README_Web.md +++ b/README_Web.md @@ -16,12 +16,14 @@ A Web script that lets you paint on a canvas and sends that image to the automat | `Backspace` | Stop image generation | | `~` | Increase seed by 1 | | `Shift` + `~` | Decrease seed by 1 | +| `Alt` + `~` | Randomize seed | | `a` | Switch audio signal | | `c` | Loads config from `controlnet.json` to form | | `Shift` + `c` | Saves config from forms to `controlnet.json` | | `d` | Download result image (if any) from browser | | `e` | Set brush type to `ellipse` | | `l` | Set brush type to `line` | +| `m` | Switch multiple images mode | | `p` | Set brush type to `pencil` | | `r` | Set brush type to `rectangle` | | `Ctrl` + `e` | Switch eraser brush mode | @@ -65,6 +67,7 @@ This is partial representation of `configs\controlnet.json` file. It consists of - `steps` input - `module` selector - `model` selector +- `tiling` switch All this data is sent to ControlNet API when you request image generation. @@ -81,6 +84,7 @@ This is main control panel of this app. Here are: - `Settings` button ( ⛭ ). Opens settings modal. - `Clear` button. Resets `painting canvas`. - `Zen mode` button. Enters simplified interface mode. +- `Multiple mode` checkbox. Switches multiple images generation result. - `Generate` button. Triggers ControlNet API image generation. ### `Settings modal` @@ -90,6 +94,7 @@ This is main control panel of this app. Here are: Here you can change: - `Instant mode`. Switches instant mode (requests image redraw just when you stroke). +- `Multiple images count`. Selects how many images will be generated in multiple mode. - `Audio signal`. Toggles audio signal. - `Audio theme`. Customizes the audio signal theme. @@ -111,6 +116,22 @@ There is a place for ControlNet generations. If in process, progressbar and load ![image](images/web_loading.png) ![image](images/web_skip.png) +If you select multiple mode, there will appear multiple images +![image](images/web_multiple.png) +Each of them use its own seed and you can switch to it by clicking button (appears on hover on image that use it). + +## Image viewer + +![image](images/web_viewer.png) +Image viewer appears when you click on result image. +There is: + +- image info such as used sketch, prompt, negative prompt etc.. In the sketch section, you can overlay the sketch on the image used for generation. Also if image was generated with `tiling` option you can switch tiling mode here +![image](images/web_tiling.png) +![image](images/web_viewer_with_sketch.png) +- actually the image itself +- images carousel (if multiple) + ### Zen mode ![image](images/web_zen.png) diff --git a/StartWeb.bat b/StartWeb.bat index 3f22e63..3fa6364 100644 --- a/StartWeb.bat +++ b/StartWeb.bat @@ -13,7 +13,7 @@ REM Install required packages pip install -r requirements.txt REM open view in default browser -start "" "scripts\views\WebView\build\index.html" +start "" "http://localhost:8000/static/index.html" REM start server uvicorn --host "0.0.0.0" scripts.views.WebView.app:app --reload diff --git a/images/web_controls.png b/images/web_controls.png index 56d8ac2..45fa187 100644 Binary files a/images/web_controls.png and b/images/web_controls.png differ diff --git a/images/web_form.png b/images/web_form.png index 5bbe6c4..359d2df 100644 Binary files a/images/web_form.png and b/images/web_form.png differ diff --git a/images/web_multiple.png b/images/web_multiple.png new file mode 100644 index 0000000..0ddaee5 Binary files /dev/null and b/images/web_multiple.png differ diff --git a/images/web_settings.png b/images/web_settings.png index d9e13c6..c9b3c3e 100644 Binary files a/images/web_settings.png and b/images/web_settings.png differ diff --git a/images/web_tiling.png b/images/web_tiling.png new file mode 100644 index 0000000..e83615d Binary files /dev/null and b/images/web_tiling.png differ diff --git a/images/web_tools.png b/images/web_tools.png index 90c9c28..7e5ed32 100644 Binary files a/images/web_tools.png and b/images/web_tools.png differ diff --git a/images/web_viewer.png b/images/web_viewer.png new file mode 100644 index 0000000..4b126bb Binary files /dev/null and b/images/web_viewer.png differ diff --git a/images/web_viewer_with_sketch.png b/images/web_viewer_with_sketch.png new file mode 100644 index 0000000..980bbc9 Binary files /dev/null and b/images/web_viewer_with_sketch.png differ diff --git a/scripts/views/WebView/app.py b/scripts/views/WebView/app.py index 273ddfe..f2ba4bc 100644 --- a/scripts/views/WebView/app.py +++ b/scripts/views/WebView/app.py @@ -1,13 +1,10 @@ - import json -import base64 -from io import BytesIO import requests import threading from fastapi import FastAPI, Request from fastapi.middleware.cors import CORSMiddleware -from fastapi.responses import Response +from fastapi.staticfiles import StaticFiles from scripts.common.state import State from scripts.common.cn_requests import Api @@ -24,7 +21,9 @@ allow_headers=['*'], ) -sd_image = '' +app.mount("/static", StaticFiles(directory="scripts/views/WebView/build"), name="static") + +sd_response = None, state = State() api = Api(state) @@ -34,14 +33,16 @@ api.fetch_controlnet_models(state) -def send_request(): - global sd_image +def send_request(data): + global sd_response response = api.post_request(state) if response["status_code"] == 200: - if response.get("image", None): - sd_image = response["image"] - # elif response.get("batch_images", None): - # self.update_batch_images(response["batch_images"]) + info = json.loads(response["info"]) + input_image = data["config"]["controlnet_units"][0]["input_image"] + info["input_image"] = input_image + info["with_tiling"] = data["config"]["tiling"] + response["info"] = json.dumps(info) + sd_response = response state.server["busy"] = False @@ -62,6 +63,7 @@ async def root(data: Request): json_data["steps"] = data["steps"] json_data["cfg_scale"] = data["cfg_scale"] json_data["batch_size"] = data["batch_size"] + json_data["tiling"] = data["tiling"] json_data["width"] = data["width"] json_data["height"] = data["height"] json_data["controlnet_units"][0]["module"] = data["module"] @@ -102,7 +104,9 @@ async def root(data: Request): state["main_json_data"]["seed"] = data["config"]["seed"] state["main_json_data"]["width"] = data["config"]["width"] state["main_json_data"]["height"] = data["config"]["height"] - t = threading.Thread(target=send_request) + state["main_json_data"]["batch_size"] = data["config"]["batch_size"] + state["main_json_data"]["tiling"] = data["config"]["tiling"] + t = threading.Thread(target=send_request, args=[data]) t.start() @@ -114,12 +118,11 @@ async def root(): progress_json = api.progress_request() progress = progress_json.get('progress', None) if progress == 0.0: - return 1.0 + return "NOT READY" return progress @app.get('/cn_image') async def root(): - if sd_image: - bytes_image = BytesIO(base64.b64decode(sd_image)) - return Response(content=bytes_image.getvalue(), media_type='image/png') + if sd_response: + return sd_response diff --git a/scripts/views/WebView/build/static/css/main.css b/scripts/views/WebView/build/static/css/main.css index 6a45378..7f82a62 100644 --- a/scripts/views/WebView/build/static/css/main.css +++ b/scripts/views/WebView/build/static/css/main.css @@ -1,2 +1,2 @@ -.PaintingTools_base__h7Tcp{background-color:#365a7c;border-radius:5px;display:flex;flex-direction:column;justify-content:space-between;padding:10px;width:200px}.PaintingTools_group__HHWSN{background-color:#6b8aad;border:1px solid #00213d;border-radius:5px;margin-top:5px;padding:10px;transition:border-color .2s,background-color .2s,color .2s}.PaintingTools_group__HHWSN:first-child{margin-top:0}.PaintingTools_group__checkbox__MYDQG:hover{border-color:#d5e3c3;color:#365a7c}.PaintingTools_group__audio__wDGHu{display:flex;flex-direction:column;gap:5px;justify-content:center}.PaintingTools_title__zKNmA{display:block;text-align:center}.PaintingTools_select__uqpbW{border:1px solid #00213d;border-radius:5px;padding-inline:5px;text-align:center;transition:background-color .2s,color .2s}.PaintingTools_select__uqpbW:hover{color:#6b8aad}.PaintingTools_select__uqpbW:hover:focus{color:#000}.PaintingTools_select__uqpbW:focus{outline-color:#6b8aad}.PaintingTools_label__HrmO-{cursor:pointer;display:flex;transition:color .2s;-webkit-user-select:none;user-select:none}.PaintingTools_label__HrmO-:hover{color:#365a7c}.PaintingTools_label__HrmO- .PaintingTools_label_span__disabled__b7tHM{color:#a8a8a8;cursor:not-allowed}.PaintingTools_label__HrmO- .PaintingTools_label_span__disabled__b7tHM:hover{color:#a8a8a8}.PaintingTools_clear__PU6Y8{align-items:center;display:flex;justify-content:space-between;margin-top:10px}.PaintingTools_checkbox__f6Mj2{margin-right:10px}.PaintingTools_button__YDom\+{background-color:#d5e3c3;border:1px solid #00213d;border-radius:5px;color:#00213d;display:block;height:27px;margin:0 auto;transition:border-color .2s,background-color .2s,color .2s;width:50px}.PaintingTools_button__YDom\+:hover{background-color:#6b8aad}.PaintingTools_button__single__aSKJi{margin-top:5px;width:100%}.PaintingTools_button__symbol__86dn9{font-weight:700}.PaintingTools_button__big__3nYUN{font-size:16px}.PaintingTools_button__clear__VznXW{background-color:#d34b4b;color:#fff}.PaintingTools_button__clear__VznXW:hover{background-color:#d5e3c3;color:#d34b4b}.PaintingTools_button__generate__IQJ6d{font-size:25px;height:40px;margin-top:5px;width:80%}.PaintingTools_buttonGroup__QyXcp{display:flex;gap:5px;justify-content:center;margin-top:5px}.PaintingTools_buttonGroup__QyXcp .PaintingTools_button__YDom\+{flex:auto;margin:0}.PaintingTools_slider__ZzDgt{display:block;width:100%}.PaintingTools_flexGroup__MuOOd{align-items:center;display:flex;gap:5px;justify-content:center;margin-top:10px}.PaintingTools_brush_surrounding__ixFP9{background-color:#fff;border-radius:5px;height:50px;margin:10px auto 0;outline:1px solid #00213d;overflow:hidden;position:relative;width:50px}.PaintingTools_brush_surrounding__erasing__ASImm{background-color:#000}.PaintingTools_brush_sample__p-CqZ{background-color:#000;border-radius:50%;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.PaintingTools_brush_sample__erasing__0OgIT{background-color:#fff}.PaintingTools_brush_sample__rectangle__48sDH{border-radius:0}.App_base__bznTg{height:100vh;overflow:auto}.App_base__scrollLock__\+WHzI{overflow:hidden}.ModalWrapper_base__tTJQx{background-color:rgba(0,33,61,.9);cursor:pointer;height:100vh;left:0;padding:20px;position:fixed;top:0;width:100%;z-index:10}.ModalWrapper_base__hide__ZymUE{display:none}.ModalWrapper_image__smuzT{display:block;height:100%;margin:0 auto;object-fit:contain}.ModalWrapper_settings__6v25Y{background-color:#365a7c;border-radius:5px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;left:50%;padding:5px 10px 10px;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:400px;z-index:1}.ModalWrapper_title__Wa2Mp{color:#d5e3c3;height:20px;text-align:center;width:100%}.ModalWrapper_group__rx\+N9{background-color:#6b8aad;border:1px solid #00213d;border-radius:5px;margin-top:5px;padding:10px;transition:border-color .2s,background-color .2s,color .2s}.ModalWrapper_group__rx\+N9:first-child{margin-top:0}.ModalWrapper_group__checkbox__qLFnT:hover{border-color:#d5e3c3;color:#365a7c}.ModalWrapper_group__audio__brLl3{display:flex;flex-direction:column;gap:5px;justify-content:center}.ModalWrapper_label__Tzlkk{cursor:pointer;display:flex;gap:5px;justify-content:space-between;margin-bottom:5px;transition:color .2s;-webkit-user-select:none;user-select:none}.ModalWrapper_label__Tzlkk:has(.ModalWrapper_checkbox__wm\+O\+){border-bottom:1px solid #365a7c}.ModalWrapper_label__Tzlkk:not(:has(.ModalWrapper_checkbox__wm\+O\+)) .ModalWrapper_span__Xb1z-{border-bottom:1px solid #365a7c}.ModalWrapper_label__Tzlkk:hover{color:#365a7c}.ModalWrapper_label__Tzlkk .ModalWrapper_label_span__disabled__gZLGE{color:#a8a8a8;cursor:not-allowed}.ModalWrapper_label__Tzlkk .ModalWrapper_label_span__disabled__gZLGE:hover{color:#a8a8a8}.ModalWrapper_checkbox__wm\+O\+{position:relative}.ModalWrapper_select__CQnsR{border:1px solid #00213d;border-radius:5px;display:inline;padding-inline:5px;position:relative;text-align:center;top:1px;transition:background-color .2s,color .2s}.ModalWrapper_select__CQnsR:hover{color:#6b8aad}.ModalWrapper_select__CQnsR:hover:focus{color:#000}.ModalWrapper_select__CQnsR:focus{outline-color:#6b8aad}.ModalWrapper_span__Xb1z-{display:block;flex:1 1}.ControlNetForm_base__X5RCT{background-color:#365a7c;border:1px solid #00213d;border-radius:5px;display:flex;gap:10px;justify-content:space-between;margin:20px 20px 0;padding:10px;position:relative;top:0;transition:margin .3s,-webkit-transform .5s;transition:margin .3s,transform .5s;transition:margin .3s,transform .5s,-webkit-transform .5s;width:calc(100% - 40px);z-index:1}.ControlNetForm_base__zen__Nrmxy{border-radius:0 0 5px 5px;margin-top:-1px;position:absolute;-webkit-transform:translateY(0);transform:translateY(0)}.ControlNetForm_base__hidden__PAZ5n{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.ControlNetForm_group__gC0gz{display:flex}.ControlNetForm_group__prompt__iWtk3{flex:1 1 100px;flex-direction:column}.ControlNetForm_group__miscellaneous__LxF7N{flex:2 1 200px;flex-wrap:wrap;gap:10px;justify-content:center}.ControlNetForm_title__xwqGj{color:#d5e3c3;display:block;text-align:center}.ControlNetForm_textarea__zRxob{border:1px solid #00213d;border-radius:5px;height:100%;margin-top:5px;padding:5px;resize:none;transition:color .2s,outline-color .2s;width:100%}.ControlNetForm_textarea__zRxob:hover{color:#6b8aad}.ControlNetForm_textarea__zRxob:hover:focus{color:#000}.ControlNetForm_textarea__zRxob:focus{outline-color:#6b8aad}.ControlNetForm_numberInput__HUvh0{border:1px solid #00213d;border-radius:5px;margin-top:5px;padding-inline:5px;text-align:center;transition:color .2s,outline-color .2s}.ControlNetForm_numberInput__HUvh0:hover{color:#6b8aad}.ControlNetForm_numberInput__HUvh0:hover:focus{color:#000}.ControlNetForm_numberInput__HUvh0:focus{outline-color:#6b8aad}.ControlNetForm_select__NvomA{border:1px solid #00213d;border-radius:5px;margin-top:5px;padding-inline:5px;text-align:center;transition:color .2s,outline-color .2s}.ControlNetForm_select__NvomA:hover{color:#6b8aad}.ControlNetForm_select__NvomA:hover:focus{color:#000}.ControlNetForm_select__NvomA:focus{outline-color:#6b8aad}.ControlNetForm_arrow__V2toZ{background-color:#365a7c;border:1px solid #00213d;border-radius:0 0 5px 5px;border-top:none;bottom:-20px;height:20px;left:50%;opacity:0;pointer-events:none;position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%);transition:opacity .3s;width:100px;z-index:1}.ControlNetForm_base__zen__Nrmxy .ControlNetForm_arrow__V2toZ{cursor:pointer;opacity:1;pointer-events:all}.ControlNetForm_arrow__V2toZ:after{color:#d5e3c3;content:">";display:block;margin:0 auto;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.ControlNetForm_arrow__hidden__1m-QW:after{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.MainSection_base__v9EVS{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:20px}.MainSection_base__zen__slhvf{align-items:center;justify-content:space-evenly;margin:40px 0;min-height:calc(100vh - 100px)}.MainSection_base__zen__slhvf,.PaintingCanvas_base__9\+aC0{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.PaintingCanvas_base__9\+aC0{background-color:#365a7c;border-radius:5px;padding:2px;position:relative}.PaintingCanvas_title__5E-QZ{color:#d5e3c3;height:20px;text-align:center;width:100%}.PaintingCanvas_canvas__LZ9\+D{display:block;touch-action:none}.PaintingCanvas_canvas__painting__EQnBm{background-color:#fff}.PaintingCanvas_canvas__preview__Bia5T{bottom:22px;left:2px;position:absolute}.PaintingCanvas_resizer__RPTpF{align-items:center;display:flex;gap:5px;justify-content:center;padding-top:2px}.PaintingCanvas_select__Wi35t{background-color:#6b8aad;border:1px solid #00213d;border-radius:3px;text-align:center;transition:color .2s,outline-color .2s;width:56px}.PaintingCanvas_select__Wi35t:hover{color:#365a7c}.PaintingCanvas_select__Wi35t:hover:focus{color:#000}.PaintingCanvas_select__Wi35t:focus{outline-color:#365a7c}.ResultCanvas_base__sComO{background-color:#365a7c;border-radius:5px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:2px;position:relative}.ResultCanvas_title__E8QMV{color:#d5e3c3;height:20px;text-align:center;width:100%}.ResultCanvas_canvas__o6iFn{background-color:#365a7c;cursor:pointer;display:block;transition:opacity .3s}.ResultCanvas_canvas__waiting__IqpTT{opacity:.5}.ResultCanvas_canvas__waiting__IqpTT:hover{opacity:1}.ResultCanvas_canvas__empty__Q0Qdc{cursor:auto}.ResultCanvas_progress__G4MAV{bottom:10px;left:50%;position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.ResultCanvas_loader__8Yr\+A{-webkit-animation:ResultCanvas_loading__HDbDI 1.2s linear infinite;animation:ResultCanvas_loading__HDbDI 1.2s linear infinite;cursor:pointer;height:80px;left:50%;opacity:.3;overflow:hidden;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);transition:all .3s;width:80px}.ResultCanvas_loader__8Yr\+A:hover{-webkit-animation-delay:9999999999s;animation-delay:9999999999s;opacity:.8;-webkit-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg)}.ResultCanvas_loader__8Yr\+A:hover:after,.ResultCanvas_loader__8Yr\+A:hover:before{border-radius:0;height:50px;width:50px}.ResultCanvas_loader__8Yr\+A:hover:before{border-color:transparent transparent #d34b4b #d34b4b;-webkit-transform:translate(-3px,calc(-100% + 3px));transform:translate(-3px,calc(-100% + 3px))}.ResultCanvas_loader__8Yr\+A:hover:after{border-color:#d34b4b #d34b4b transparent transparent;-webkit-transform:translate(calc(-100% + 3px),-3px);transform:translate(calc(-100% + 3px),-3px)}.ResultCanvas_loader__8Yr\+A:before{border:6px solid transparent;border-bottom-color:#00213d;border-radius:50%}.ResultCanvas_loader__8Yr\+A:after,.ResultCanvas_loader__8Yr\+A:before{content:" ";display:block;height:69px;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);transition:all .3s;width:69px}.ResultCanvas_loader__8Yr\+A:after{border:6px solid transparent;border-radius:50%;border-top-color:#d5e3c3}@-webkit-keyframes ResultCanvas_loading__HDbDI{0%{-webkit-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}to{-webkit-transform:translate(-50%,-50%) rotate(405deg);transform:translate(-50%,-50%) rotate(405deg)}}@keyframes ResultCanvas_loading__HDbDI{0%{-webkit-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}to{-webkit-transform:translate(-50%,-50%) rotate(405deg);transform:translate(-50%,-50%) rotate(405deg)}}.ZenControls_base__0Zp6z{background-color:#00213d;border:none;border-radius:5px 5px 0 0;border-top:1px solid #365a7c;bottom:0;display:flex;gap:30px;height:40px;justify-content:center;left:0;margin:0 auto;padding:10px;position:absolute;right:0;transition:-webkit-transform .5s;transition:transform .5s;transition:transform .5s,-webkit-transform .5s;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.ZenControls_base__hidden__VVeaq{-webkit-transform:translateY(100%);transform:translateY(100%)}.ZenControls_group__JR9nR{display:flex;gap:10px;justify-content:center}.ZenControls_indicator__dM81s{background-color:#d5e3c3;border:2px solid #365a7c;border-radius:5px;color:#365a7c;cursor:pointer;font-family:monospace;height:20px;padding:0 5px;position:relative;transition:border-color .1s,background-color .1s,color .1s;-webkit-user-select:none;user-select:none}.ZenControls_indicator__dM81s:hover{border-color:#d5e3c3;color:#000}.ZenControls_indicator__inactive__RrCJ\+{background-color:#00213d;border-color:#365a7c}.ZenControls_indicator__inactive__RrCJ\+:hover{color:#d5e3c3}.ZenControls_indicator__dM81s:disabled{cursor:not-allowed}.ZenControls_indicator__dM81s:disabled,.ZenControls_indicator__dM81s:disabled:hover{background-color:#a8a8a8;border-color:#6d6d6d;color:#6d6d6d}.ZenControls_indicator__fill__tnMZt{background-color:#000;border-color:#d5e3c3;color:#d5e3c3}.ZenControls_indicator__fill__tnMZt:hover{background-color:#365a7c;border-color:#fff;color:#fff}.ZenControls_indicator__eraser__qB-6B{background-color:#d34b4b;border-color:#d5e3c3;color:#d5e3c3}.ZenControls_indicator__eraser__qB-6B:hover{border-color:#6b8aad;color:#6b8aad}.ZenControls_indicator__instant__B\+cHi{border-color:#d34b4b;color:#d34b4b}.ZenControls_indicator__zen__ewg4P{background-color:#000;border-color:#fff;color:#fff}.ZenControls_indicator__zen__ewg4P:hover{background-color:#365a7c;color:#fff}.ZenControls_selectBase__gKUJq{position:relative}.ZenControls_select__ygSrQ{background-color:#6b8aad;border-radius:5px;display:flex;gap:2px;padding:2px;top:-35px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;z-index:1}.ZenControls_select__ygSrQ,.ZenControls_select__ygSrQ:after{left:50%;position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.ZenControls_select__ygSrQ:after{border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #6b8aad;bottom:-9px;content:"";display:block;height:0;width:0}.ZenControls_arrow__XXhmJ{background-color:#00213d;border:1px solid #365a7c;border-bottom-color:#00213d;border-radius:5px 5px 0 0;cursor:pointer;height:20px;left:50%;opacity:1;position:absolute;top:-20px;-webkit-transform:translateX(-50%);transform:translateX(-50%);transition:opacity .3s;width:100px;z-index:0}.ZenControls_arrow__XXhmJ:after{color:#d5e3c3;content:">";display:block;margin:0 auto;-webkit-transform:rotate(90deg);transform:rotate(90deg);transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.ZenControls_arrow__hidden__qboms:after{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}*{accent-color:#d5e3c3;box-sizing:border-box;padding:0}*,body{margin:0}body{background-color:#00213d;overflow:hidden}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}ul{-webkit-margin-before:0;-webkit-margin-after:0;-webkit-margin-start:0;-webkit-margin-end:0;-webkit-padding-start:0;list-style-type:none;margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0;padding-inline-start:0}li{list-style:none}button,input[type=color],input[type=range]{cursor:pointer}::-webkit-scrollbar{background:transparent;height:10px;width:10px}::-webkit-scrollbar-thumb{background:#6b8aad;-webkit-border-radius:5px;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.75)}::-webkit-scrollbar-corner{background:#000}a{-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}canvas{vertical-align:bottom} +.PaintingTools_base__h-JsO{background-color:#365a7c;border-radius:5px;display:flex;flex-direction:column;height:556px;justify-content:space-between;padding:10px;width:200px}.PaintingTools_group__noug6{background-color:#6b8aad;border:1px solid #00213d;border-radius:5px;margin-top:5px;padding:10px;transition:border-color .2s,background-color .2s,color .2s}.PaintingTools_group__noug6:first-child{margin-top:0}.PaintingTools_group__checkbox__ARXqS:hover{border-color:#d5e3c3;color:#365a7c}.PaintingTools_group__audio__vHWvD{display:flex;flex-direction:column;gap:5px;justify-content:center}.PaintingTools_title__nanC1{display:block;text-align:center}.PaintingTools_select__3\+mwd{border:1px solid #00213d;border-radius:5px;cursor:pointer;padding-inline:5px;text-align:center;transition:background-color .2s,color .2s}.PaintingTools_select__3\+mwd:hover{color:#6b8aad}.PaintingTools_select__3\+mwd:hover:focus{color:#000}.PaintingTools_select__3\+mwd:focus{outline-color:#6b8aad}.PaintingTools_label__8qpcS{cursor:pointer;display:flex;transition:color .2s;-webkit-user-select:none;user-select:none}.PaintingTools_label__8qpcS:hover{color:#365a7c}.PaintingTools_label_span__disabled__SO64A{color:#a8a8a8;cursor:not-allowed}.PaintingTools_label_span__disabled__SO64A:hover{color:#a8a8a8}.PaintingTools_numberInput__28-um{border:1px solid #00213d;border-radius:5px;margin-left:5px;padding-inline:5px;text-align:center;transition:color .2s,outline-color .2s;width:50px}.PaintingTools_numberInput__28-um:hover{color:#6b8aad}.PaintingTools_numberInput__28-um:hover:focus{color:#000}.PaintingTools_numberInput__28-um:focus{outline-color:#6b8aad}.PaintingTools_clear__p3Lfi{align-items:center;display:flex;justify-content:space-between;margin-top:10px}.PaintingTools_checkbox__PbGII{margin-right:10px}.PaintingTools_button__l9\+XQ{background-color:#d5e3c3;border:1px solid #00213d;border-radius:5px;color:#00213d;display:block;height:27px;margin:0 auto;transition:border-color .2s,background-color .2s,color .2s;width:50px}.PaintingTools_button__l9\+XQ:hover{background-color:#6b8aad}.PaintingTools_button__single__WcSXl{margin-top:5px;width:100%}.PaintingTools_button__symbol__fmcIU{font-weight:700}.PaintingTools_button__big__Pq9yu{font-size:16px}.PaintingTools_button__clear__EgCHj{background-color:#d34b4b;color:#fff}.PaintingTools_button__clear__EgCHj:hover{background-color:#d5e3c3;color:#d34b4b}.PaintingTools_button__generate__oHE6R{font-size:25px;height:40px;margin:5px auto 0;width:100%}.PaintingTools_button__generate__oHE6R:hover{background-color:#00213d;color:#d5e3c3}.PaintingTools_buttonGroup__6iuO2{display:flex;gap:5px;justify-content:center;margin-top:5px}.PaintingTools_buttonGroup__6iuO2 .PaintingTools_button__l9\+XQ{flex:auto;margin:0}.PaintingTools_slider__Q8JZW{display:block;width:100%}.PaintingTools_flexGroup__b9Aup{align-items:center;display:flex;gap:5px;justify-content:center;margin-top:10px}.PaintingTools_brush_surrounding__6SqBX{background-color:#fff;border-radius:5px;height:50px;margin:10px auto 0;outline:1px solid #00213d;overflow:hidden;position:relative;width:50px}.PaintingTools_brush_surrounding__erasing__DLraR{background-color:#000}.PaintingTools_brush_sample__4DKQe{background-color:#000;border-radius:50%;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.PaintingTools_brush_sample__erasing__IsWxa{background-color:#fff}.PaintingTools_brush_sample__rectangle__Txp14{border-radius:0}.App_base__yPYlv{height:100vh;overflow:auto}.App_base__scrollLock__ZEjUD{overflow:hidden}.widgets_arrow__ABg98{background-color:#365a7c;border:1px solid #00213d;cursor:pointer;opacity:1;pointer-events:all;position:absolute;transition:opacity .3s;z-index:1}.widgets_arrow__hidden__T7IQ9{cursor:default;opacity:0;pointer-events:none}.widgets_arrow__bottom__oy4x4,.widgets_arrow__top__1IPlo{height:20px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:100px}.widgets_arrow__left__U40f8,.widgets_arrow__right__PWI7G{height:100px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:20px}.widgets_arrow__top__1IPlo{border-bottom:none;border-radius:5px 5px 0 0;top:-20px}.widgets_arrow__bottom__oy4x4{border-radius:0 0 5px 5px;border-top:none;bottom:-20px}.widgets_arrow__left__U40f8{border-radius:5px 0 0 5px;border-right:none;left:-20px}.widgets_arrow__right__PWI7G{border-left:none;border-radius:0 5px 5px 0;right:-20px}.widgets_arrow_symbol__0PiUV{color:#d5e3c3;display:block;margin:0 auto;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;-webkit-user-select:none;user-select:none;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.widgets_arrow__left__U40f8 .widgets_arrow_symbol__0PiUV,.widgets_arrow__right__PWI7G .widgets_arrow_symbol__0PiUV{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.widgets_arrow__top__1IPlo .widgets_arrow_symbol__0PiUV{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.widgets_arrow__bottom__oy4x4 .widgets_arrow_symbol__0PiUV,.widgets_arrow__top__1IPlo.widgets_arrow__off__3XzfS .widgets_arrow_symbol__0PiUV{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.widgets_arrow__bottom__oy4x4.widgets_arrow__off__3XzfS .widgets_arrow_symbol__0PiUV{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.widgets_arrow__left__U40f8.widgets_arrow__off__3XzfS .widgets_arrow_symbol__0PiUV,.widgets_arrow__right__PWI7G .widgets_arrow_symbol__0PiUV{-webkit-transform:translate(-50%,-50%) rotate(180deg);transform:translate(-50%,-50%) rotate(180deg)}.widgets_arrow__right__PWI7G.widgets_arrow__off__3XzfS .widgets_arrow_symbol__0PiUV{-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.ControlNetForm_base__4Rssv{background-color:#365a7c;border:1px solid #00213d;border-radius:5px;display:flex;gap:10px;justify-content:space-between;margin:10px 10px 0;padding:10px;position:relative;top:0;transition:margin .3s,-webkit-transform .5s;transition:margin .3s,transform .5s;transition:margin .3s,transform .5s,-webkit-transform .5s;width:calc(100% - 20px);z-index:1}.ControlNetForm_base__zen__h16Qn{border-radius:0 0 5px 5px;margin-top:-1px;position:absolute;-webkit-transform:translateY(0);transform:translateY(0)}.ControlNetForm_base__hidden__8WXnc{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.ControlNetForm_group__RE4Aq{display:flex}.ControlNetForm_group__prompt__viArQ{flex:1 1 100px;flex-direction:column}.ControlNetForm_group__miscellaneous__RLe9e{flex:2 1 200px;flex-wrap:wrap;gap:10px;justify-content:center}.ControlNetForm_title__HmSl3{color:#d5e3c3;cursor:help;display:block;text-align:center}.ControlNetForm_textarea__KoRE-{border:1px solid #00213d;border-radius:5px;height:100%;margin-top:5px;padding:5px;resize:none;transition:color .2s,outline-color .2s;width:100%}.ControlNetForm_textarea__KoRE-:hover{color:#6b8aad}.ControlNetForm_textarea__KoRE-:hover:focus{color:#000}.ControlNetForm_textarea__KoRE-:focus{outline-color:#6b8aad}.ControlNetForm_numberInput__jDqzn{border:1px solid #00213d;border-radius:5px;margin-top:5px;padding-inline:5px;text-align:center;transition:color .2s,outline-color .2s}.ControlNetForm_numberInput__jDqzn:hover{color:#6b8aad}.ControlNetForm_numberInput__jDqzn:hover:focus{color:#000}.ControlNetForm_numberInput__jDqzn:focus{outline-color:#6b8aad}.ControlNetForm_checkbox__Mun86{margin-top:7px;text-align:center;width:100%}.ControlNetForm_select__bvdOa{border:1px solid #00213d;border-radius:5px;cursor:pointer;margin-top:5px;padding-inline:5px;text-align:center;transition:color .2s,outline-color .2s}.ControlNetForm_select__bvdOa:hover{color:#6b8aad}.ControlNetForm_select__bvdOa:hover:focus{color:#000}.ControlNetForm_select__bvdOa:focus{outline-color:#6b8aad}.ImagesViewer_base__YSJIp{align-items:center;display:flex;gap:10px;height:calc(100vh - 20px);overflow:hidden;width:calc(100vw - 20px)}.ImagesViewer_imageContainer__tlQjN{align-items:center;display:flex;flex-grow:1;flex-shrink:1;height:100%;justify-content:center;max-height:100%;max-width:calc(100% - 300px);overflow:hidden;position:relative;transition:max-width .5s;width:100%}.ImagesViewer_imageContainer__infoHidden__gHimy{max-width:calc(100% - 20px)}.ImagesViewer_imageContainer__infoHidden__gHimy.ImagesViewer_imageContainer__multiple__4Xn9H{max-width:calc(100% - 250px)}.ImagesViewer_imageContainer__multiple__4Xn9H{max-width:calc(100% - 530px)}.ImagesViewer_imageContainer__tiling__kDlJo{display:grid;grid-template-columns:1fr 1fr 1fr}.ImagesViewer_imageWrapper__vtoOv{align-items:center;display:flex;height:100%;position:relative;transition:outline-width .1s}.ImagesViewer_imageWrapper__tiling__2hJ0s{margin-right:-1px;outline:0 dashed #d5e3c3}.ImagesViewer_imageWrapper__tiling__2hJ0s:hover{outline-width:3px;z-index:1}.ImagesViewer_image__WRIQY,.ImagesViewer_inputImage__tri-z{height:100%;margin:0 auto;max-height:100%;max-width:100%;object-fit:contain;width:100%}.ImagesViewer_inputImage__tri-z{position:absolute}.ImagesViewer_carousel__jlNds{cursor:default;display:flex;flex-direction:column;flex-shrink:0;gap:10px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin:0 5px 0 10px;max-height:100%;overflow-y:auto;padding-right:5px;width:230px}.ImagesViewer_carouselImage__aYAtC{border-radius:5px;cursor:pointer;display:block;object-fit:contain}.ImagesViewer_carouselImage__aYAtC:hover{-webkit-filter:sepia(.2) brightness(.9);filter:sepia(.2) brightness(.9)}.ImagesViewer_carouselImage__selected__uK2Im{border:2px solid #d5e3c3}.ImagesViewer_info__XpSXv{cursor:default;flex-basis:300px;flex-shrink:0;height:100%;margin-right:20px;position:relative;transition:flex-basis .5s}.ImagesViewer_info__hidden__OqmSF{flex-basis:20px}.ImagesViewer_info_container__d8z5f{background-color:#365a7c;border:1px solid #d5e3c3;border-radius:5px;height:100%;padding:10px;position:absolute;transition:-webkit-transform .5s;transition:transform .5s;transition:transform .5s,-webkit-transform .5s;width:300px}.ImagesViewer_info_container__hidden__tohPx{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.ImagesViewer_info_title__FoYNS{color:#d5e3c3;font-size:24px;height:30px;text-align:center}.ImagesViewer_info_image__xGfvR{background-color:#365a7c;border:1px solid #00213d;border-radius:5px;cursor:pointer;display:block;margin-block:10px;object-fit:contain;transition:border-color .3s,background-color .3s;width:100%}.ImagesViewer_info_image__xGfvR:hover{background-color:#4e6c8f;border-color:#d5e3c3}.ImagesViewer_info_wrapper__khW-W{height:calc(100% - 30px);overflow-y:auto;padding:0 5px 1px 0}.ImagesViewer_info_row__o2ZEl{background-color:#6b8aad;border:1px solid #00213d;border-radius:5px;margin-top:10px;padding:5px;width:100%}.ImagesViewer_info_key__I6pId{color:#d5e3c3;cursor:help;font-size:20px;text-align:center}.ImagesViewer_slider__aRCjs{display:block;width:100%}.ImagesViewer_info_value__wtlBC{word-wrap:break-word;display:block;font-size:18px;text-align:center;width:100%}.ImagesViewer_info_checkbox__ujP\+V{margin-left:5px;-webkit-transform:translateY(2px);transform:translateY(2px)}.ImagesViewer_info_arrow__Itze2{background-color:#365a7c;border:1px solid #d5e3c3;border-left:none}.MainSection_base__\+2aEi{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:10px 10px 0}.MainSection_base__zen__Ibaah{align-items:center;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;justify-content:space-evenly;margin:10px 0 40px;min-height:calc(100vh - 100px)}.ModalWrapper_base__G\+mTm{background-color:rgba(0,33,61,.9);cursor:pointer;height:100vh;left:0;padding:10px;position:fixed;top:0;width:100%;z-index:10}.ModalWrapper_base__hide__5\+s20{display:none}.ModalWrapper_background__c3lp\+{height:calc(100% + 10px);left:-10px;position:absolute;top:-10px;width:calc(100% + 10px);z-index:-1}.PaintingCanvas_base__fbPiI{background-color:#365a7c;border-radius:5px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:2px;position:relative}.PaintingCanvas_title__ru0hl{color:#d5e3c3;cursor:help;height:20px;text-align:center;width:100%}.PaintingCanvas_canvas__NQcYA{cursor:none;display:block;touch-action:none}.PaintingCanvas_canvas__painting__SlmMI{background-color:#fff}.PaintingCanvas_canvas__preview__hhJ2A{bottom:22px;left:2px;position:absolute}.PaintingCanvas_resizer__paTXN{align-items:center;display:flex;gap:5px;justify-content:center;padding-top:2px}.PaintingCanvas_select__Qod9N{background-color:#6b8aad;border:1px solid #00213d;border-radius:3px;cursor:pointer;text-align:center;transition:color .2s,outline-color .2s;width:56px}.PaintingCanvas_select__Qod9N:hover{color:#365a7c}.PaintingCanvas_select__Qod9N:hover:focus{color:#000}.PaintingCanvas_select__Qod9N:focus{outline-color:#365a7c}.Popups_base__8NU67{bottom:0;position:fixed;right:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;z-index:2}.Popups_popupWrapper__umGKf{-webkit-animation:Popups_contentEnter__KITCA .3s ease-in,Popups_contentExit__QlcIf .3s ease-in 5.5s forwards;animation:Popups_contentEnter__KITCA .3s ease-in,Popups_contentExit__QlcIf .3s ease-in 5.5s forwards;margin:10px 15px 10px auto}.Popups_popupWrapper__umGKf,.Popups_popup__RKJmF{height:40px;position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.Popups_popup__RKJmF{-webkit-animation:Popups_enter__VQIF\+ .5s ease-in,Popups_exit__qZXlK 1s ease-in 5s forwards;animation:Popups_enter__VQIF\+ .5s ease-in,Popups_exit__qZXlK 1s ease-in 5s forwards;border-radius:5px;color:#d5e3c3;opacity:.9;padding:10px;right:0;text-align:center}.Popups_popup__info__BDXnW{background-color:#6d6d6d;border:1px solid #a8a8a8}.Popups_popup__success__8Gj6q{background-color:#105727;border:1px solid #2e884b}.Popups_popup__warning__g-uvB{background-color:#d5e3c3;border:1px solid #d34b4b;color:#d34b4b}.Popups_popup__error__mcjas{background-color:#d34b4b;border:1px solid #d5e3c3}@-webkit-keyframes Popups_enter__VQIF\+{0%{opacity:0;right:-100%}to{opacity:.9;right:0}}@keyframes Popups_enter__VQIF\+{0%{opacity:0;right:-100%}to{opacity:.9;right:0}}@-webkit-keyframes Popups_exit__qZXlK{0%{opacity:.9;right:0}to{opacity:0;right:-100%}}@keyframes Popups_exit__qZXlK{0%{opacity:.9;right:0}to{opacity:0;right:-100%}}@-webkit-keyframes Popups_contentEnter__KITCA{0%{height:0}to{height:40px}}@keyframes Popups_contentEnter__KITCA{0%{height:0}to{height:40px}}@-webkit-keyframes Popups_contentExit__QlcIf{0%{height:40px}to{height:0}}@keyframes Popups_contentExit__QlcIf{0%{height:40px}to{height:0}}.ResultContainer_base__vXoab{background-color:#365a7c;border-radius:5px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin-bottom:20px;padding:2px;position:relative}.ResultContainer_container__WrAjL{display:grid;min-height:512px;min-width:512px}.ResultContainer_container__2c__eax8x{grid-template-columns:1fr 1fr}.ResultContainer_container__3c__CGTeU{grid-template-columns:1fr 1fr 1fr}.ResultContainer_container__4c__7GVO6{grid-template-columns:1fr 1fr 1fr 1fr}.ResultContainer_title__UQcE8{color:#d5e3c3;cursor:help;height:20px;text-align:center;width:100%}.ResultContainer_imageWrapper__eQ6sL{overflow:hidden;position:relative}.ResultContainer_seed__1z17n{background-color:#00213d;bottom:0;color:#d5e3c3;font-size:20px;left:1px;opacity:0;padding:5px;position:absolute;text-align:center;-webkit-transform:translateY(100%);transform:translateY(100%);transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s;transition:opacity .3s,transform .3s,-webkit-transform .3s;width:100%;word-break:break-word}.ResultContainer_imageWrapper__eQ6sL:hover .ResultContainer_seed__1z17n{opacity:.7;-webkit-transform:translateY(0);transform:translateY(0)}.ResultContainer_button__7Vc\+j{background-color:#d5e3c3;border:1px solid #00213d;border-radius:5px;color:#00213d;display:block;height:27px;margin:0 auto;transition:border-color .2s,background-color .2s,color .2s;width:100%}.ResultContainer_button__7Vc\+j:hover{background-color:#6b8aad}.ResultContainer_image__T-2oA{background-color:#365a7c;cursor:pointer;display:block;left:1px;position:relative;transition:opacity .3s,-webkit-filter .3s;transition:opacity .3s,filter .3s;transition:opacity .3s,filter .3s,-webkit-filter .3s}.ResultContainer_image__T-2oA:hover{-webkit-filter:sepia(.2) brightness(.9);filter:sepia(.2) brightness(.9)}.ResultContainer_image__waiting__D3no1{opacity:.5}.ResultContainer_image__waiting__D3no1:hover{opacity:1}.ResultContainer_progress__\+2AwL{bottom:10px;left:50%;position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.ResultContainer_loader__5X8dx{-webkit-animation:ResultContainer_loading__jcBU4 1.2s linear infinite;animation:ResultContainer_loading__jcBU4 1.2s linear infinite;cursor:pointer;height:80px;left:50%;opacity:.3;overflow:hidden;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);transition:all .3s;width:80px}.ResultContainer_loader__5X8dx:hover{-webkit-animation-delay:9999999999s;animation-delay:9999999999s;opacity:.8;-webkit-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg)}.ResultContainer_loader__5X8dx:hover:after,.ResultContainer_loader__5X8dx:hover:before{border-radius:0;height:50px;width:50px}.ResultContainer_loader__5X8dx:hover:before{border-color:transparent transparent #d34b4b #d34b4b;-webkit-transform:translate(-3px,calc(-100% + 3px));transform:translate(-3px,calc(-100% + 3px))}.ResultContainer_loader__5X8dx:hover:after{border-color:#d34b4b #d34b4b transparent transparent;-webkit-transform:translate(calc(-100% + 3px),-3px);transform:translate(calc(-100% + 3px),-3px)}.ResultContainer_loader__5X8dx:before{border:6px solid transparent;border-bottom-color:#00213d;border-radius:50%}.ResultContainer_loader__5X8dx:after,.ResultContainer_loader__5X8dx:before{content:" ";display:block;height:69px;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);transition:all .3s;width:69px}.ResultContainer_loader__5X8dx:after{border:6px solid transparent;border-radius:50%;border-top-color:#d5e3c3}@-webkit-keyframes ResultContainer_loading__jcBU4{0%{-webkit-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}to{-webkit-transform:translate(-50%,-50%) rotate(405deg);transform:translate(-50%,-50%) rotate(405deg)}}@keyframes ResultContainer_loading__jcBU4{0%{-webkit-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}to{-webkit-transform:translate(-50%,-50%) rotate(405deg);transform:translate(-50%,-50%) rotate(405deg)}}.Settings_settings__wjKvv{background-color:#365a7c;border-radius:5px;cursor:default;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;left:50%;padding:5px 10px 10px;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:400px;z-index:1}.Settings_title__Zt\+IX{color:#d5e3c3;height:20px;text-align:center;width:100%}.Settings_group__evQ3g{background-color:#6b8aad;border:1px solid #00213d;border-radius:5px;display:flex;flex-direction:column;gap:5px;justify-content:center;margin-top:5px;padding:10px;transition:border-color .2s,background-color .2s,color .2s}.Settings_group__evQ3g:first-child{margin-top:0}.Settings_group__checkbox__rfYv6:hover{border-color:#d5e3c3;color:#365a7c}.Settings_label__ELdM-{cursor:pointer;display:flex;gap:5px;justify-content:space-between;margin-bottom:5px;transition:color .2s;-webkit-user-select:none;user-select:none}.Settings_label__ELdM-:has(.Settings_checkbox__0y\+nI){border-bottom:1px solid #365a7c}.Settings_label__ELdM-:not(:has(.Settings_checkbox__0y\+nI)) .Settings_span__5fxYY{border-bottom:1px solid #365a7c}.Settings_label__ELdM-:hover{color:#365a7c}.Settings_label__ELdM- .Settings_label_span__disabled__ykuuu{color:#a8a8a8;cursor:not-allowed}.Settings_label__ELdM- .Settings_label_span__disabled__ykuuu:hover{color:#a8a8a8}.Settings_checkbox__0y\+nI{position:relative}.Settings_select__6ubMS{border:1px solid #00213d;border-radius:5px;display:inline;padding-inline:5px;position:relative;text-align:center;top:1px;transition:background-color .2s,color .2s}.Settings_select__6ubMS:hover{color:#6b8aad}.Settings_select__6ubMS:hover:focus{color:#000}.Settings_select__6ubMS:focus{outline-color:#6b8aad}.Settings_span__5fxYY{display:block;flex:1 1}.ZenControls_base__cAoKE{background-color:#00213d;border:none;border-radius:5px 5px 0 0;border-top:1px solid #365a7c;bottom:0;display:flex;gap:30px;height:40px;justify-content:center;left:0;margin:0 auto;padding:10px;position:absolute;right:0;transition:-webkit-transform .5s;transition:transform .5s;transition:transform .5s,-webkit-transform .5s;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.ZenControls_base__hidden__9J98n{-webkit-transform:translateY(100%);transform:translateY(100%)}.ZenControls_base__cAoKE .ZenControls_arrow__rl9N\+{background-color:#00213d;border:1px solid #365a7c;border-bottom-color:#00213d}.ZenControls_group__32w1s{display:flex;gap:10px;justify-content:center}.ZenControls_indicator__J3zwW{background-color:#d5e3c3;border:2px solid #365a7c;border-radius:5px;color:#365a7c;cursor:pointer;font-family:monospace;height:20px;padding:0 5px;position:relative;transition:border-color .1s,background-color .1s,color .1s;-webkit-user-select:none;user-select:none}.ZenControls_indicator__J3zwW:hover{border-color:#d5e3c3;color:#000}.ZenControls_indicator__inactive__0cSr1{background-color:#00213d;border-color:#365a7c}.ZenControls_indicator__inactive__0cSr1:hover{color:#d5e3c3}.ZenControls_indicator__J3zwW:disabled{cursor:not-allowed}.ZenControls_indicator__J3zwW:disabled,.ZenControls_indicator__J3zwW:disabled:hover{background-color:#a8a8a8;border-color:#6d6d6d;color:#6d6d6d}.ZenControls_indicator__fill__m9hd0{background-color:#000;border-color:#d5e3c3;color:#d5e3c3}.ZenControls_indicator__fill__m9hd0:hover{background-color:#365a7c;border-color:#fff;color:#fff}.ZenControls_indicator__eraser__fTE-N{background-color:#d34b4b;border-color:#d5e3c3;color:#d5e3c3}.ZenControls_indicator__eraser__fTE-N:hover{border-color:#6b8aad;color:#6b8aad}.ZenControls_indicator__instant__gy4Fx{border-color:#d34b4b;color:#d34b4b}.ZenControls_indicator__zen__6IFH-{background-color:#000;border-color:#fff;color:#fff}.ZenControls_indicator__zen__6IFH-:hover{background-color:#365a7c;color:#fff}.ZenControls_selectBase__0xvbs{position:relative}.ZenControls_select__Jny1I{background-color:#6b8aad;border-radius:5px;display:flex;gap:2px;padding:2px;top:-35px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;z-index:1}.ZenControls_select__Jny1I,.ZenControls_select__Jny1I:after{left:50%;position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.ZenControls_select__Jny1I:after{border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #6b8aad;bottom:-9px;content:"";display:block;height:0;width:0}*{accent-color:#d5e3c3;box-sizing:border-box;padding:0}*,body{margin:0}body{background-color:#00213d;overflow:hidden}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}ul{-webkit-margin-before:0;-webkit-margin-after:0;-webkit-margin-start:0;-webkit-margin-end:0;-webkit-padding-start:0;list-style-type:none;margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0;padding-inline-start:0}li{list-style:none}button,input[type=color],input[type=range]{cursor:pointer}::-webkit-scrollbar{background:transparent;height:10px;width:10px}::-webkit-scrollbar-thumb{background:#6b8aad;-webkit-border-radius:5px;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.75)}::-webkit-scrollbar-corner{background:#000}a{-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}canvas{vertical-align:bottom} /*# sourceMappingURL=main.css.map*/ \ No newline at end of file diff --git a/scripts/views/WebView/build/static/css/main.css.map b/scripts/views/WebView/build/static/css/main.css.map index bb3bc96..65e42d0 100644 --- a/scripts/views/WebView/build/static/css/main.css.map +++ b/scripts/views/WebView/build/static/css/main.css.map @@ -1 +1 @@ -{"version":3,"file":"static/css/main.css","mappings":"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","sources":["components/PaintingTools/PaintingTools.module.scss","assets/styles/constants.scss","components/App/App.module.scss","components/ModalWrapper/ModalWrapper.module.scss","components/ControlNetForm/ControlNetForm.module.scss","components/MainSection/MainSection.module.scss","components/PaintingCanvas/PaintingCanvas.module.scss","components/ResultCanvas/ResultCanvas.module.scss","components/ZenControls/ZenControls.module.scss","assets/styles/index.scss"],"sourcesContent":["@import \"assets/styles/constants\";\r\n\r\n.base {\r\n background-color: $blue;\r\n border-radius: 5px;\r\n padding: 10px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n width: 200px;\r\n}\r\n\r\n.group {\r\n margin-top: 5px;\r\n background-color: $lightBlue;\r\n border: 1px solid $deepBlue;\r\n border-radius: 5px;\r\n padding: 10px;\r\n transition: border-color 0.2s, background-color 0.2s, color 0.2s;\r\n &:first-child {\r\n margin-top: 0;\r\n }\r\n\r\n &__checkbox:hover {\r\n border-color: $beige;\r\n color: $blue;\r\n }\r\n\r\n &__audio {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n gap: 5px;\r\n }\r\n}\r\n\r\n.title {\r\n display: block;\r\n text-align: center;\r\n}\r\n\r\n.select {\r\n border: 1px solid $deepBlue;\r\n border-radius: 5px;\r\n padding-inline: 5px;\r\n text-align: center;\r\n transition: background-color 0.2s, color 0.2s;\r\n\r\n &:hover {\r\n color: $lightBlue;\r\n\r\n &:focus {\r\n color: $black;\r\n }\r\n }\r\n\r\n &:focus {\r\n outline-color: $lightBlue;\r\n }\r\n}\r\n\r\n.label {\r\n display: flex;\r\n user-select: none;\r\n cursor: pointer;\r\n transition: color 0.2s;\r\n\r\n &:hover {\r\n color: $blue;\r\n }\r\n\r\n .label_span__disabled {\r\n color: $gray;\r\n cursor: not-allowed;\r\n &:hover {\r\n color: $gray;\r\n }\r\n }\r\n}\r\n\r\n.clear {\r\n margin-top: 10px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n\r\n.checkbox {\r\n margin-right: 10px;\r\n}\r\n\r\n.button {\r\n border-radius: 5px;\r\n border: 1px solid $deepBlue;\r\n color: $deepBlue;\r\n display: block;\r\n margin: 0 auto;\r\n background-color: $beige;\r\n height: 27px;\r\n width: 50px;\r\n transition: border-color 0.2s, background-color 0.2s, color 0.2s;\r\n\r\n &:hover {\r\n background-color: $lightBlue;\r\n }\r\n\r\n &__single {\r\n margin-top: 5px;\r\n width: 100%;\r\n }\r\n\r\n &__symbol {\r\n font-weight: bold;\r\n }\r\n\r\n &__big {\r\n font-size: 16px;\r\n }\r\n\r\n &__clear {\r\n background-color: $red;\r\n color: $white;\r\n\r\n &:hover {\r\n background-color: $beige;\r\n color: $red;\r\n }\r\n }\r\n\r\n &__generate {\r\n font-size: 25px;\r\n height: 40px;\r\n width: 80%;\r\n margin-top: 5px;\r\n }\r\n}\r\n\r\n.buttonGroup {\r\n display: flex;\r\n gap: 5px;\r\n justify-content: center;\r\n margin-top: 5px;\r\n\r\n .button {\r\n margin: 0;\r\n flex: auto;\r\n }\r\n}\r\n\r\n.slider {\r\n display: block;\r\n width: 100%;\r\n}\r\n\r\n.flexGroup {\r\n margin-top: 10px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 5px;\r\n}\r\n\r\n.brush_surrounding {\r\n margin: 10px auto 0;\r\n position: relative;\r\n border-radius: 5px;\r\n outline: 1px solid $deepBlue;\r\n height: 50px;\r\n width: 50px;\r\n background-color: $white;\r\n overflow: hidden;\r\n\r\n &__erasing {\r\n background-color: $black;\r\n }\r\n}\r\n\r\n.brush_sample {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n border-radius: 50%;\r\n background-color: $black;\r\n\r\n &__erasing {\r\n background-color: $white;\r\n }\r\n\r\n &__rectangle {\r\n border-radius: 0;\r\n }\r\n}\r\n","$white: #ffffff;\r\n$black: #000000;\r\n$beige: #d5e3c3;\r\n$deepBlue: #00213d;\r\n$blue: #365a7c;\r\n$lightBlue: #6b8aad;\r\n$red: #d34b4b;\r\n$gray: #a8a8a8;\r\n$darkGray: #6d6d6d;\r\n\r\n$never: 9999999999s;\r\n",".base {\r\n height: 100vh;\r\n overflow: auto;\r\n\r\n &__scrollLock {\r\n overflow: hidden;\r\n }\r\n}\r\n","@import \"assets/styles/constants\";\r\n\r\n.base {\r\n position: fixed;\r\n background-color: rgba($deepBlue, 0.9);\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100vh;\r\n z-index: 10;\r\n padding: 20px;\r\n cursor: pointer;\r\n\r\n &__hide {\r\n display: none;\r\n }\r\n}\r\n\r\n.image {\r\n display: block;\r\n object-fit: contain;\r\n margin: 0 auto;\r\n height: 100%;\r\n}\r\n\r\n.settings {\r\n padding: 2px;\r\n background-color: $blue;\r\n border-radius: 5px;\r\n position: absolute;\r\n width: 400px;\r\n height: fit-content;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n padding: 5px 10px 10px;\r\n z-index: 1;\r\n}\r\n\r\n.title {\r\n color: $beige;\r\n text-align: center;\r\n width: 100%;\r\n height: 20px;\r\n}\r\n\r\n.group {\r\n margin-top: 5px;\r\n background-color: $lightBlue;\r\n border: 1px solid $deepBlue;\r\n border-radius: 5px;\r\n padding: 10px;\r\n transition: border-color 0.2s, background-color 0.2s, color 0.2s;\r\n &:first-child {\r\n margin-top: 0;\r\n }\r\n\r\n &__checkbox:hover {\r\n border-color: $beige;\r\n color: $blue;\r\n }\r\n\r\n &__audio {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n gap: 5px;\r\n }\r\n}\r\n\r\n.label {\r\n display: flex;\r\n justify-content: space-between;\r\n user-select: none;\r\n cursor: pointer;\r\n transition: color 0.2s;\r\n margin-bottom: 5px;\r\n gap: 5px;\r\n &:has(.checkbox) {\r\n border-bottom: 1px solid $blue;\r\n }\r\n &:not(:has(.checkbox)) .span {\r\n border-bottom: 1px solid $blue;\r\n }\r\n\r\n &:hover {\r\n color: $blue;\r\n }\r\n\r\n .label_span__disabled {\r\n color: $gray;\r\n cursor: not-allowed;\r\n &:hover {\r\n color: $gray;\r\n }\r\n }\r\n}\r\n\r\n.checkbox {\r\n position: relative;\r\n}\r\n\r\n.select {\r\n position: relative;\r\n display: inline;\r\n border: 1px solid $deepBlue;\r\n border-radius: 5px;\r\n padding-inline: 5px;\r\n text-align: center;\r\n transition: background-color 0.2s, color 0.2s;\r\n top: 1px;\r\n\r\n &:hover {\r\n color: $lightBlue;\r\n\r\n &:focus {\r\n color: $black;\r\n }\r\n }\r\n\r\n &:focus {\r\n outline-color: $lightBlue;\r\n }\r\n}\r\n\r\n.span {\r\n display: block;\r\n flex: 1;\r\n}\r\n","@import \"assets/styles/constants\";\r\n\r\n.base {\r\n position: relative;\r\n display: flex;\r\n justify-content: space-between;\r\n gap: 10px;\r\n margin: 20px 20px 0;\r\n background-color: $blue;\r\n border-radius: 5px;\r\n padding: 10px;\r\n transition: margin 0.3s, transform 0.5s;\r\n z-index: 1;\r\n border: 1px solid $deepBlue;\r\n top: 0;\r\n width: calc(100% - 40px);\r\n\r\n &__zen {\r\n position: absolute;\r\n margin-top: -1px;\r\n border-radius: 0 0 5px 5px;\r\n transform: translateY(0%);\r\n }\r\n\r\n &__hidden {\r\n transform: translateY(-100%);\r\n }\r\n}\r\n\r\n.group {\r\n display: flex;\r\n\r\n &__prompt {\r\n flex: 1 1 100px;\r\n flex-direction: column;\r\n }\r\n &__miscellaneous {\r\n flex: 2 1 200px;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n gap: 10px;\r\n }\r\n}\r\n\r\n.title {\r\n text-align: center;\r\n display: block;\r\n color: $beige;\r\n}\r\n\r\n.textarea {\r\n margin-top: 5px;\r\n height: 100%;\r\n width: 100%;\r\n border-radius: 5px;\r\n padding: 5px;\r\n resize: none;\r\n border: 1px solid $deepBlue;\r\n transition: color 0.2s, outline-color 0.2s;\r\n\r\n &:hover {\r\n color: $lightBlue;\r\n\r\n &:focus {\r\n color: $black;\r\n }\r\n }\r\n\r\n &:focus {\r\n outline-color: $lightBlue;\r\n }\r\n}\r\n\r\n.numberInput {\r\n border: 1px solid $deepBlue;\r\n border-radius: 5px;\r\n padding-inline: 5px;\r\n text-align: center;\r\n margin-top: 5px;\r\n transition: color 0.2s, outline-color 0.2s;\r\n\r\n &:hover {\r\n color: $lightBlue;\r\n\r\n &:focus {\r\n color: $black;\r\n }\r\n }\r\n\r\n &:focus {\r\n outline-color: $lightBlue;\r\n }\r\n}\r\n\r\n.select {\r\n border: 1px solid $deepBlue;\r\n border-radius: 5px;\r\n padding-inline: 5px;\r\n text-align: center;\r\n margin-top: 5px;\r\n transition: color 0.2s, outline-color 0.2s;\r\n\r\n &:hover {\r\n color: $lightBlue;\r\n\r\n &:focus {\r\n color: $black;\r\n }\r\n }\r\n\r\n &:focus {\r\n outline-color: $lightBlue;\r\n }\r\n}\r\n\r\n.arrow {\r\n position: absolute;\r\n border-radius: 0 0 5px 5px;\r\n bottom: -20px;\r\n left: 50%;\r\n height: 20px;\r\n width: 100px;\r\n background-color: $blue;\r\n transform: translateX(-50%);\r\n border: 1px solid $deepBlue;\r\n border-top: none;\r\n z-index: 1;\r\n opacity: 0;\r\n pointer-events: none;\r\n transition: opacity 0.3s;\r\n\r\n .base__zen & {\r\n opacity: 1;\r\n pointer-events: all;\r\n cursor: pointer;\r\n }\r\n\r\n &::after {\r\n content: \">\";\r\n width: fit-content;\r\n margin: 0 auto;\r\n display: block;\r\n color: $beige;\r\n transform: rotate(-90deg);\r\n transition: transform 0.3s;\r\n }\r\n\r\n &__hidden::after {\r\n transform: rotate(90deg);\r\n }\r\n}\r\n",".base {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n gap: 10px;\r\n padding: 20px;\r\n\r\n &__zen {\r\n min-height: calc(100vh - 100px);\r\n height: fit-content;\r\n margin: 40px 0 40px;\r\n align-items: center;\r\n justify-content: space-evenly;\r\n }\r\n}\r\n","@import \"assets/styles/constants\";\r\n\r\n.base {\r\n padding: 2px;\r\n background-color: $blue;\r\n border-radius: 5px;\r\n position: relative;\r\n height: fit-content;\r\n}\r\n\r\n.title {\r\n color: $beige;\r\n text-align: center;\r\n width: 100%;\r\n height: 20px;\r\n}\r\n\r\n.canvas {\r\n display: block;\r\n touch-action: none;\r\n\r\n &__painting {\r\n background-color: $white;\r\n }\r\n\r\n &__preview {\r\n position: absolute;\r\n bottom: 22px;\r\n left: 2px;\r\n }\r\n}\r\n\r\n.resizer {\r\n padding-top: 2px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 5px;\r\n}\r\n\r\n.select {\r\n border: 1px solid $deepBlue;\r\n border-radius: 3px;\r\n text-align: center;\r\n transition: color 0.2s, outline-color 0.2s;\r\n background-color: $lightBlue;\r\n width: 56px;\r\n\r\n &:hover {\r\n color: $blue;\r\n\r\n &:focus {\r\n color: $black;\r\n }\r\n }\r\n\r\n &:focus {\r\n outline-color: $blue;\r\n }\r\n}\r\n","@import \"assets/styles/constants\";\r\n\r\n.base {\r\n padding: 2px;\r\n background-color: $blue;\r\n border-radius: 5px;\r\n position: relative;\r\n height: fit-content;\r\n}\r\n\r\n.title {\r\n color: $beige;\r\n text-align: center;\r\n width: 100%;\r\n height: 20px;\r\n}\r\n\r\n.canvas {\r\n display: block;\r\n background-color: $blue;\r\n cursor: pointer;\r\n transition: opacity 0.3s;\r\n\r\n &__waiting {\r\n opacity: 0.5;\r\n &:hover {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n &__empty {\r\n cursor: initial;\r\n }\r\n}\r\n\r\n.progress {\r\n position: absolute;\r\n bottom: 10px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n}\r\n\r\n.loader {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n opacity: 0.3;\r\n overflow: hidden;\r\n width: 80px;\r\n height: 80px;\r\n transition: all 0.3s;\r\n animation: loading 1.2s linear infinite;\r\n cursor: pointer;\r\n &:hover {\r\n opacity: 0.8;\r\n animation-delay: $never;\r\n transform: translate(-50%, -50%) rotate(-45deg);\r\n &:before,\r\n &:after {\r\n border-radius: 0;\r\n width: 50px;\r\n height: 50px;\r\n }\r\n &:before {\r\n border-color: transparent transparent $red $red;\r\n transform: translate(calc(0% - 3px), calc(-100% + 3px));\r\n }\r\n &:after {\r\n border-color: $red $red transparent transparent;\r\n transform: translate(calc(-100% + 3px), calc(0% - 3px));\r\n }\r\n }\r\n}\r\n\r\n.loader:before {\r\n content: \" \";\r\n position: absolute;\r\n display: block;\r\n width: 69px;\r\n height: 69px;\r\n border-radius: 50%;\r\n border: 6px solid;\r\n border-color: transparent transparent $deepBlue transparent;\r\n transition: all 0.3s;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n}\r\n\r\n.loader:after {\r\n content: \" \";\r\n position: absolute;\r\n display: block;\r\n width: 69px;\r\n height: 69px;\r\n border-radius: 50%;\r\n border: 6px solid;\r\n border-color: $beige transparent transparent transparent;\r\n transition: all 0.3s;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n}\r\n\r\n@keyframes loading {\r\n 0% {\r\n transform: translate(-50%, -50%) rotate(45deg);\r\n }\r\n\r\n 100% {\r\n transform: translate(-50%, -50%) rotate(405deg);\r\n }\r\n}\r\n","@import \"assets/styles/constants\";\r\n\r\n.base {\r\n position: absolute;\r\n margin: 0 auto;\r\n width: fit-content;\r\n height: 40px;\r\n display: flex;\r\n justify-content: center;\r\n gap: 30px;\r\n background-color: $deepBlue;\r\n border: 1px solid $blue;\r\n border-radius: 5px 5px 0 0;\r\n border-bottom: none;\r\n border-left: none;\r\n border-right: none;\r\n padding: 10px;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n transition: transform 0.5s;\r\n\r\n &__hidden {\r\n transform: translateY(100%);\r\n }\r\n}\r\n\r\n.group {\r\n display: flex;\r\n justify-content: center;\r\n gap: 10px;\r\n}\r\n\r\n.indicator {\r\n position: relative;\r\n height: 20px;\r\n background-color: $beige;\r\n border-radius: 5px;\r\n border: 2px solid $blue;\r\n padding: 0 5px;\r\n color: $blue;\r\n cursor: pointer;\r\n user-select: none;\r\n font-family: monospace;\r\n transition: border-color 0.1s, background-color 0.1s, color 0.1s;\r\n\r\n &:hover {\r\n border-color: $beige;\r\n color: $black;\r\n }\r\n\r\n &__inactive {\r\n background-color: $deepBlue;\r\n border-color: $blue;\r\n\r\n &:hover {\r\n color: $beige;\r\n }\r\n }\r\n\r\n &:disabled {\r\n background-color: $gray;\r\n border-color: $darkGray;\r\n color: $darkGray;\r\n cursor: not-allowed;\r\n\r\n &:hover {\r\n border-color: $darkGray;\r\n color: $darkGray;\r\n background-color: $gray;\r\n }\r\n }\r\n\r\n &__fill {\r\n color: $beige;\r\n background-color: $black;\r\n border-color: $beige;\r\n\r\n &:hover {\r\n border-color: $white;\r\n color: $white;\r\n background-color: $blue;\r\n }\r\n }\r\n\r\n &__eraser {\r\n color: $beige;\r\n background-color: $red;\r\n border-color: $beige;\r\n\r\n &:hover {\r\n border-color: $lightBlue;\r\n color: $lightBlue;\r\n }\r\n }\r\n\r\n &__instant {\r\n color: $red;\r\n border-color: $red;\r\n }\r\n\r\n &__zen {\r\n color: $white;\r\n background-color: $black;\r\n border-color: $white;\r\n\r\n &:hover {\r\n color: $white;\r\n background-color: $blue;\r\n }\r\n }\r\n}\r\n\r\n.selectBase {\r\n position: relative;\r\n}\r\n\r\n.select {\r\n background-color: $lightBlue;\r\n border-radius: 5px;\r\n padding: 2px;\r\n position: absolute;\r\n display: flex;\r\n gap: 2px;\r\n top: -35px;\r\n left: 50%;\r\n width: fit-content;\r\n z-index: 1;\r\n transform: translateX(-50%);\r\n &::after {\r\n content: \"\";\r\n display: block;\r\n position: absolute;\r\n width: 0;\r\n height: 0;\r\n border-left: 10px solid transparent;\r\n border-right: 10px solid transparent;\r\n border-top: 10px solid $lightBlue;\r\n left: 50%;\r\n bottom: -9px;\r\n transform: translateX(-50%);\r\n }\r\n}\r\n\r\n.arrow {\r\n position: absolute;\r\n border-radius: 5px 5px 0 0;\r\n top: -20px;\r\n left: 50%;\r\n height: 20px;\r\n width: 100px;\r\n transform: translateX(-50%);\r\n border: 1px solid $blue;\r\n border-bottom-color: $deepBlue;\r\n background-color: $deepBlue;\r\n z-index: 0;\r\n opacity: 1;\r\n cursor: pointer;\r\n transition: opacity 0.3s;\r\n\r\n &::after {\r\n content: \">\";\r\n width: fit-content;\r\n margin: 0 auto;\r\n display: block;\r\n color: $beige;\r\n transform: rotate(90deg);\r\n transition: transform 0.3s;\r\n }\r\n\r\n &__hidden::after {\r\n transform: rotate(-90deg);\r\n }\r\n}\r\n","* {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n accent-color: #d5e3c3;\r\n}\r\n\r\nbody {\r\n margin: 0;\r\n background-color: #00213d;\r\n overflow: hidden;\r\n}\r\n\r\ncode {\r\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\r\n monospace;\r\n}\r\n\r\nul {\r\n list-style-type: none;\r\n margin-block-start: 0;\r\n margin-block-end: 0;\r\n margin-inline-start: 0;\r\n margin-inline-end: 0;\r\n padding-inline-start: 0;\r\n}\r\n\r\nli {\r\n list-style: none;\r\n}\r\n\r\nbutton,\r\ninput[type=\"range\"],\r\ninput[type=\"color\"] {\r\n cursor: pointer;\r\n}\r\n\r\n::-webkit-scrollbar {\r\n height: 10px;\r\n width: 10px;\r\n background: rgba(0, 0, 0, 0);\r\n}\r\n\r\n::-webkit-scrollbar-thumb {\r\n background: #6b8aad;\r\n -webkit-border-radius: 5px;\r\n -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);\r\n}\r\n\r\n::-webkit-scrollbar-corner {\r\n background: #000;\r\n}\r\n\r\na {\r\n text-decoration-skip-ink: auto;\r\n}\r\n\r\ncanvas {\r\n vertical-align: bottom;\r\n}\r\n"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"static/css/main.css","mappings":"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","sources":["components/PaintingTools/PaintingTools.module.scss","assets/styles/constants.scss","components/App/App.module.scss","components/widgets/widgets.module.scss","components/ControlNetForm/ControlNetForm.module.scss","components/ImagesViewer/ImagesViewer.module.scss","components/MainSection/MainSection.module.scss","components/ModalWrapper/ModalWrapper.module.scss","components/PaintingCanvas/PaintingCanvas.module.scss","components/Popups/Popups.module.scss","components/ResultContainer/ResultContainer.module.scss","components/Settings/Settings.module.scss","components/ZenControls/ZenControls.module.scss","assets/styles/index.scss"],"sourcesContent":["@import \"assets/styles/constants\";\r\n\r\n.base {\r\n background-color: $blue;\r\n border-radius: 5px;\r\n padding: 10px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n width: 200px;\r\n height: 556px;\r\n}\r\n\r\n.group {\r\n margin-top: 5px;\r\n background-color: $lightBlue;\r\n border: 1px solid $deepBlue;\r\n border-radius: 5px;\r\n padding: 10px;\r\n transition: border-color 0.2s, background-color 0.2s, color 0.2s;\r\n &:first-child {\r\n margin-top: 0;\r\n }\r\n\r\n &__checkbox:hover {\r\n border-color: $beige;\r\n color: $blue;\r\n }\r\n\r\n &__audio {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n gap: 5px;\r\n }\r\n}\r\n\r\n.title {\r\n display: block;\r\n text-align: center;\r\n}\r\n\r\n.select {\r\n border: 1px solid $deepBlue;\r\n border-radius: 5px;\r\n padding-inline: 5px;\r\n text-align: center;\r\n cursor: pointer;\r\n transition: background-color 0.2s, color 0.2s;\r\n\r\n &:hover {\r\n color: $lightBlue;\r\n\r\n &:focus {\r\n color: $black;\r\n }\r\n }\r\n\r\n &:focus {\r\n outline-color: $lightBlue;\r\n }\r\n}\r\n\r\n.label {\r\n display: flex;\r\n user-select: none;\r\n cursor: pointer;\r\n transition: color 0.2s;\r\n\r\n &:hover {\r\n color: $blue;\r\n }\r\n}\r\n\r\n.label_span__disabled {\r\n color: $gray;\r\n cursor: not-allowed;\r\n &:hover {\r\n color: $gray;\r\n }\r\n}\r\n\r\n.numberInput {\r\n border: 1px solid $deepBlue;\r\n border-radius: 5px;\r\n padding-inline: 5px;\r\n text-align: center;\r\n width: 50px;\r\n margin-left: 5px;\r\n transition: color 0.2s, outline-color 0.2s;\r\n\r\n &:hover {\r\n color: $lightBlue;\r\n\r\n &:focus {\r\n color: $black;\r\n }\r\n }\r\n\r\n &:focus {\r\n outline-color: $lightBlue;\r\n }\r\n}\r\n\r\n.clear {\r\n margin-top: 10px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n\r\n.checkbox {\r\n margin-right: 10px;\r\n}\r\n\r\n.button {\r\n border-radius: 5px;\r\n border: 1px solid $deepBlue;\r\n color: $deepBlue;\r\n display: block;\r\n margin: 0 auto;\r\n background-color: $beige;\r\n height: 27px;\r\n width: 50px;\r\n transition: border-color 0.2s, background-color 0.2s, color 0.2s;\r\n\r\n &:hover {\r\n background-color: $lightBlue;\r\n }\r\n\r\n &__single {\r\n margin-top: 5px;\r\n width: 100%;\r\n }\r\n\r\n &__symbol {\r\n font-weight: bold;\r\n }\r\n\r\n &__big {\r\n font-size: 16px;\r\n }\r\n\r\n &__clear {\r\n background-color: $red;\r\n color: $white;\r\n\r\n &:hover {\r\n background-color: $beige;\r\n color: $red;\r\n }\r\n }\r\n\r\n &__generate {\r\n font-size: 25px;\r\n height: 40px;\r\n margin: 5px auto 0;\r\n width: 100%;\r\n\r\n &:hover {\r\n background-color: $deepBlue;\r\n color: $beige;\r\n }\r\n }\r\n}\r\n\r\n.buttonGroup {\r\n display: flex;\r\n gap: 5px;\r\n justify-content: center;\r\n margin-top: 5px;\r\n\r\n .button {\r\n margin: 0;\r\n flex: auto;\r\n }\r\n}\r\n\r\n.slider {\r\n display: block;\r\n width: 100%;\r\n}\r\n\r\n.flexGroup {\r\n margin-top: 10px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 5px;\r\n}\r\n\r\n.brush_surrounding {\r\n margin: 10px auto 0;\r\n position: relative;\r\n border-radius: 5px;\r\n outline: 1px solid $deepBlue;\r\n height: 50px;\r\n width: 50px;\r\n background-color: $white;\r\n overflow: hidden;\r\n\r\n &__erasing {\r\n background-color: $black;\r\n }\r\n}\r\n\r\n.brush_sample {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n border-radius: 50%;\r\n background-color: $black;\r\n\r\n &__erasing {\r\n background-color: $white;\r\n }\r\n\r\n &__rectangle {\r\n border-radius: 0;\r\n }\r\n}\r\n","$white: #ffffff;\r\n$black: #000000;\r\n$beige: #d5e3c3;\r\n$deepBlue: #00213d;\r\n$blue: #365a7c;\r\n$steelBlue: #4e6c8f;\r\n$lightBlue: #6b8aad;\r\n$red: #d34b4b;\r\n$gray: #a8a8a8;\r\n$darkGray: #6d6d6d;\r\n$green: #105727;\r\n$lightGreen: #2e884b;\r\n\r\n$never: 9999999999s;\r\n",".base {\r\n height: 100vh;\r\n overflow: auto;\r\n\r\n &__scrollLock {\r\n overflow: hidden;\r\n }\r\n}\r\n","@import \"assets/styles/constants\";\r\n\r\n.arrow {\r\n position: absolute;\r\n z-index: 1;\r\n background-color: $blue;\r\n border: 1px solid $deepBlue;\r\n transition: opacity 0.3s;\r\n opacity: 1;\r\n pointer-events: all;\r\n cursor: pointer;\r\n\r\n &__hidden {\r\n opacity: 0;\r\n pointer-events: none;\r\n cursor: default;\r\n }\r\n\r\n &__top,\r\n &__bottom {\r\n transform: translateX(-50%);\r\n left: 50%;\r\n height: 20px;\r\n width: 100px;\r\n }\r\n\r\n &__left,\r\n &__right {\r\n transform: translateY(-50%);\r\n top: 50%;\r\n width: 20px;\r\n height: 100px;\r\n }\r\n\r\n &__top {\r\n top: -20px;\r\n border-radius: 5px 5px 0 0;\r\n border-bottom: none;\r\n }\r\n\r\n &__bottom {\r\n bottom: -20px;\r\n border-radius: 0 0 5px 5px;\r\n border-top: none;\r\n }\r\n\r\n &__left {\r\n left: -20px;\r\n border-radius: 5px 0 0 5px;\r\n border-right: none;\r\n }\r\n\r\n &__right {\r\n right: -20px;\r\n border-radius: 0 5px 5px 0;\r\n border-left: none;\r\n }\r\n}\r\n\r\n.arrow_symbol {\r\n width: fit-content;\r\n margin: 0 auto;\r\n display: block;\r\n color: $beige;\r\n transition: transform 0.3s;\r\n user-select: none;\r\n\r\n .arrow__left &,\r\n .arrow__right & {\r\n position: absolute;\r\n transform: translate(-50%, -50%);\r\n top: 50%;\r\n left: 50%;\r\n }\r\n\r\n .arrow__top & {\r\n transform: rotate(-90deg);\r\n }\r\n\r\n .arrow__top.arrow__off & {\r\n transform: rotate(90deg);\r\n }\r\n\r\n .arrow__bottom & {\r\n transform: rotate(90deg);\r\n }\r\n\r\n .arrow__bottom.arrow__off & {\r\n transform: rotate(-90deg);\r\n }\r\n\r\n .arrow__left.arrow__off & {\r\n transform: translate(-50%, -50%) rotate(180deg);\r\n }\r\n\r\n .arrow__right & {\r\n transform: translate(-50%, -50%) rotate(180deg);\r\n }\r\n\r\n .arrow__right.arrow__off & {\r\n transform: translate(-50%, -50%);\r\n }\r\n}\r\n","@import \"assets/styles/constants\";\r\n\r\n.base {\r\n position: relative;\r\n display: flex;\r\n justify-content: space-between;\r\n gap: 10px;\r\n margin: 10px 10px 0;\r\n background-color: $blue;\r\n border-radius: 5px;\r\n padding: 10px;\r\n transition: margin 0.3s, transform 0.5s;\r\n z-index: 1;\r\n border: 1px solid $deepBlue;\r\n top: 0;\r\n width: calc(100% - 20px);\r\n\r\n &__zen {\r\n position: absolute;\r\n margin-top: -1px;\r\n border-radius: 0 0 5px 5px;\r\n transform: translateY(0%);\r\n }\r\n\r\n &__hidden {\r\n transform: translateY(-100%);\r\n }\r\n}\r\n\r\n.group {\r\n display: flex;\r\n\r\n &__prompt {\r\n flex: 1 1 100px;\r\n flex-direction: column;\r\n }\r\n &__miscellaneous {\r\n flex: 2 1 200px;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n gap: 10px;\r\n }\r\n}\r\n\r\n.title {\r\n text-align: center;\r\n display: block;\r\n color: $beige;\r\n cursor: help;\r\n}\r\n\r\n.textarea {\r\n margin-top: 5px;\r\n height: 100%;\r\n width: 100%;\r\n border-radius: 5px;\r\n padding: 5px;\r\n resize: none;\r\n border: 1px solid $deepBlue;\r\n transition: color 0.2s, outline-color 0.2s;\r\n\r\n &:hover {\r\n color: $lightBlue;\r\n\r\n &:focus {\r\n color: $black;\r\n }\r\n }\r\n\r\n &:focus {\r\n outline-color: $lightBlue;\r\n }\r\n}\r\n\r\n.numberInput {\r\n border: 1px solid $deepBlue;\r\n border-radius: 5px;\r\n padding-inline: 5px;\r\n text-align: center;\r\n margin-top: 5px;\r\n transition: color 0.2s, outline-color 0.2s;\r\n\r\n &:hover {\r\n color: $lightBlue;\r\n\r\n &:focus {\r\n color: $black;\r\n }\r\n }\r\n\r\n &:focus {\r\n outline-color: $lightBlue;\r\n }\r\n}\r\n\r\n.checkbox {\r\n margin-top: 7px;\r\n text-align: center;\r\n width: 100%;\r\n}\r\n\r\n.select {\r\n border: 1px solid $deepBlue;\r\n border-radius: 5px;\r\n padding-inline: 5px;\r\n text-align: center;\r\n margin-top: 5px;\r\n cursor: pointer;\r\n transition: color 0.2s, outline-color 0.2s;\r\n\r\n &:hover {\r\n color: $lightBlue;\r\n\r\n &:focus {\r\n color: $black;\r\n }\r\n }\r\n\r\n &:focus {\r\n outline-color: $lightBlue;\r\n }\r\n}\r\n","@import \"assets/styles/constants\";\r\n\r\n.base {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n width: calc(100vw - 20px);\r\n height: calc(100vh - 20px);\r\n overflow: hidden;\r\n}\r\n\r\n.imageContainer {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n max-height: 100%;\r\n height: 100%;\r\n max-width: calc(100% - 300px);\r\n width: 100%;\r\n flex-shrink: 1;\r\n flex-grow: 1;\r\n overflow: hidden;\r\n transition: max-width 0.5s;\r\n\r\n &__infoHidden {\r\n max-width: calc(100% - 20px);\r\n }\r\n\r\n &__infoHidden.imageContainer__multiple {\r\n max-width: calc(100% - 250px);\r\n }\r\n\r\n &__multiple {\r\n max-width: calc(100% - 530px);\r\n }\r\n\r\n &__tiling {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr 1fr;\r\n }\r\n}\r\n\r\n.imageWrapper {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n height: 100%;\r\n transition: outline-width 0.1s;\r\n\r\n &__tiling {\r\n outline: 0 dashed $beige;\r\n margin-right: -1px;\r\n &:hover {\r\n outline-width: 3px;\r\n z-index: 1;\r\n }\r\n }\r\n}\r\n\r\n.image {\r\n margin: 0 auto;\r\n object-fit: contain;\r\n width: 100%;\r\n height: 100%;\r\n max-width: 100%;\r\n max-height: 100%;\r\n}\r\n\r\n.inputImage {\r\n position: absolute;\r\n margin: 0 auto;\r\n object-fit: contain;\r\n width: 100%;\r\n height: 100%;\r\n max-width: 100%;\r\n max-height: 100%;\r\n}\r\n\r\n.carousel {\r\n display: flex;\r\n flex-direction: column;\r\n flex-shrink: 0;\r\n gap: 10px;\r\n width: 230px;\r\n height: fit-content;\r\n max-height: 100%;\r\n margin: 0 5px 0 10px;\r\n padding-right: 5px;\r\n overflow-y: auto;\r\n // mask-image: linear-gradient(\r\n // to bottom,\r\n // rgba(0, 0, 0, 0),\r\n // rgba(0, 0, 0, 1) 30px,\r\n // rgba(0, 0, 0, 1) calc(100% - 30px),\r\n // rgba(0, 0, 0, 0) 100%\r\n // );\r\n cursor: default;\r\n}\r\n\r\n.carouselImage {\r\n display: block;\r\n object-fit: contain;\r\n cursor: pointer;\r\n border-radius: 5px;\r\n\r\n &:hover {\r\n filter: sepia(0.2) brightness(0.9);\r\n }\r\n\r\n &__selected {\r\n border: 2px solid $beige;\r\n }\r\n}\r\n\r\n.info {\r\n position: relative;\r\n flex-shrink: 0;\r\n flex-basis: 300px;\r\n margin-right: 20px;\r\n height: 100%;\r\n transition: flex-basis 0.5s;\r\n cursor: default;\r\n &__hidden {\r\n flex-basis: 20px;\r\n }\r\n}\r\n\r\n.info_container {\r\n position: absolute;\r\n width: 300px;\r\n height: 100%;\r\n background-color: $blue;\r\n border-radius: 5px;\r\n padding: 10px;\r\n border: 1px solid $beige;\r\n transition: transform 0.5s;\r\n &__hidden {\r\n transform: translateX(-100%);\r\n }\r\n}\r\n\r\n.info_title {\r\n font-size: 24px;\r\n color: $beige;\r\n text-align: center;\r\n height: 30px;\r\n}\r\n\r\n.info_image {\r\n display: block;\r\n object-fit: contain;\r\n width: 100%;\r\n margin-block: 10px;\r\n border: 1px solid $deepBlue;\r\n border-radius: 5px;\r\n background-color: $blue;\r\n transition: border-color 0.3s, background-color 0.3s;\r\n cursor: pointer;\r\n &:hover {\r\n border-color: $beige;\r\n background-color: $steelBlue;\r\n }\r\n}\r\n\r\n.info_wrapper {\r\n height: calc(100% - 30px);\r\n overflow-y: auto;\r\n padding: 0 5px 1px 0;\r\n}\r\n\r\n.info_row {\r\n width: 100%;\r\n background-color: $lightBlue;\r\n border-radius: 5px;\r\n border: 1px solid $deepBlue;\r\n padding: 5px;\r\n margin-top: 10px;\r\n}\r\n\r\n.info_key {\r\n font-size: 20px;\r\n color: $beige;\r\n // font-weight: bold;\r\n text-align: center;\r\n cursor: help;\r\n}\r\n\r\n.slider {\r\n display: block;\r\n width: 100%;\r\n}\r\n\r\n.info_value {\r\n font-size: 18px;\r\n word-wrap: break-word;\r\n text-align: center;\r\n width: 100%;\r\n display: block;\r\n}\r\n\r\n.info_checkbox {\r\n margin-left: 5px;\r\n transform: translateY(2px);\r\n}\r\n\r\n.info_arrow {\r\n background-color: $blue;\r\n border: 1px solid $beige;\r\n border-left: none;\r\n}\r\n",".base {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n gap: 10px;\r\n padding: 10px 10px 0;\r\n\r\n &__zen {\r\n min-height: calc(100vh - 100px);\r\n height: fit-content;\r\n margin: 10px 0 40px;\r\n justify-content: space-evenly;\r\n align-items: center;\r\n }\r\n}\r\n","@import \"assets/styles/constants\";\r\n\r\n.base {\r\n position: fixed;\r\n background-color: rgba($deepBlue, 0.9);\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100vh;\r\n z-index: 10;\r\n padding: 10px;\r\n cursor: pointer;\r\n\r\n &__hide {\r\n display: none;\r\n }\r\n}\r\n\r\n.background {\r\n position: absolute;\r\n width: calc(100% + 10px);\r\n height: calc(100% + 10px);\r\n left: -10px;\r\n top: -10px;\r\n // background-color: red;\r\n z-index: -1;\r\n}\r\n","@import \"assets/styles/constants\";\r\n\r\n.base {\r\n padding: 2px;\r\n background-color: $blue;\r\n border-radius: 5px;\r\n position: relative;\r\n height: fit-content;\r\n}\r\n\r\n.title {\r\n color: $beige;\r\n text-align: center;\r\n width: 100%;\r\n height: 20px;\r\n cursor: help;\r\n}\r\n\r\n.canvas {\r\n display: block;\r\n touch-action: none;\r\n cursor: none;\r\n\r\n &__painting {\r\n background-color: $white;\r\n }\r\n\r\n &__preview {\r\n position: absolute;\r\n bottom: 22px;\r\n left: 2px;\r\n }\r\n}\r\n\r\n.resizer {\r\n padding-top: 2px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 5px;\r\n}\r\n\r\n.select {\r\n border: 1px solid $deepBlue;\r\n border-radius: 3px;\r\n text-align: center;\r\n transition: color 0.2s, outline-color 0.2s;\r\n background-color: $lightBlue;\r\n width: 56px;\r\n cursor: pointer;\r\n\r\n &:hover {\r\n color: $blue;\r\n\r\n &:focus {\r\n color: $black;\r\n }\r\n }\r\n\r\n &:focus {\r\n outline-color: $blue;\r\n }\r\n}\r\n","@import \"assets/styles/constants\";\r\n\r\n.base {\r\n position: fixed;\r\n width: fit-content;\r\n z-index: 2;\r\n bottom: 0;\r\n right: 0;\r\n}\r\n\r\n.popupWrapper {\r\n height: 40px;\r\n margin: 10px 15px 10px auto;\r\n width: fit-content;\r\n position: relative;\r\n animation: contentEnter 0.3s ease-in, contentExit 0.3s 5.5s ease-in forwards;\r\n}\r\n\r\n.popup {\r\n height: 40px;\r\n width: fit-content;\r\n position: relative;\r\n right: 0;\r\n border-radius: 5px;\r\n opacity: 0.9;\r\n text-align: center;\r\n padding: 10px;\r\n color: $beige;\r\n animation: enter 0.5s ease-in, exit 1s 5s ease-in forwards;\r\n\r\n &__info {\r\n background-color: $darkGray;\r\n border: 1px solid $gray;\r\n }\r\n\r\n &__success {\r\n background-color: $green;\r\n border: 1px solid $lightGreen;\r\n }\r\n\r\n &__warning {\r\n background-color: $beige;\r\n border: 1px solid $red;\r\n color: $red;\r\n }\r\n\r\n &__error {\r\n background-color: $red;\r\n border: 1px solid $beige;\r\n }\r\n}\r\n\r\n@keyframes enter {\r\n 0% {\r\n right: -100%;\r\n opacity: 0;\r\n }\r\n 100% {\r\n right: 0px;\r\n opacity: 0.9;\r\n }\r\n}\r\n\r\n@keyframes exit {\r\n 0% {\r\n right: 0;\r\n opacity: 0.9;\r\n }\r\n 100% {\r\n right: -100%;\r\n opacity: 0;\r\n }\r\n}\r\n\r\n@keyframes contentEnter {\r\n 0% {\r\n height: 0;\r\n }\r\n 100% {\r\n height: 40px;\r\n }\r\n}\r\n\r\n@keyframes contentExit {\r\n 0% {\r\n height: 40px;\r\n }\r\n 100% {\r\n height: 0;\r\n }\r\n}\r\n","@import \"assets/styles/constants\";\r\n\r\n.base {\r\n padding: 2px;\r\n background-color: $blue;\r\n border-radius: 5px;\r\n position: relative;\r\n height: fit-content;\r\n margin-bottom: 20px;\r\n}\r\n\r\n.container {\r\n min-width: 512px;\r\n min-height: 512px;\r\n display: grid;\r\n &__2c {\r\n grid-template-columns: 1fr 1fr;\r\n }\r\n &__3c {\r\n grid-template-columns: 1fr 1fr 1fr;\r\n }\r\n &__4c {\r\n grid-template-columns: 1fr 1fr 1fr 1fr;\r\n }\r\n}\r\n\r\n.title {\r\n color: $beige;\r\n text-align: center;\r\n width: 100%;\r\n height: 20px;\r\n cursor: help;\r\n}\r\n\r\n.imageWrapper {\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n.seed {\r\n position: absolute;\r\n left: 1px;\r\n bottom: 0;\r\n width: 100%;\r\n text-align: center;\r\n word-break: break-word;\r\n background-color: $deepBlue;\r\n color: $beige;\r\n font-size: 20px;\r\n padding: 5px;\r\n opacity: 0;\r\n transition: opacity 0.3s, transform 0.3s;\r\n transform: translateY(100%);\r\n\r\n .imageWrapper:hover & {\r\n opacity: 0.7;\r\n transform: translateY(0);\r\n }\r\n}\r\n\r\n.button {\r\n border-radius: 5px;\r\n border: 1px solid $deepBlue;\r\n color: $deepBlue;\r\n display: block;\r\n margin: 0 auto;\r\n background-color: $beige;\r\n height: 27px;\r\n width: 100%;\r\n transition: border-color 0.2s, background-color 0.2s, color 0.2s;\r\n\r\n &:hover {\r\n background-color: $lightBlue;\r\n }\r\n}\r\n\r\n.image {\r\n position: relative;\r\n left: 1px;\r\n display: block;\r\n background-color: $blue;\r\n cursor: pointer;\r\n transition: opacity 0.3s, filter 0.3s;\r\n\r\n &:hover {\r\n filter: sepia(0.2) brightness(0.9);\r\n }\r\n\r\n &__waiting {\r\n opacity: 0.5;\r\n &:hover {\r\n opacity: 1;\r\n }\r\n }\r\n}\r\n\r\n.progress {\r\n position: absolute;\r\n bottom: 10px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n}\r\n\r\n.loader {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n opacity: 0.3;\r\n overflow: hidden;\r\n width: 80px;\r\n height: 80px;\r\n transition: all 0.3s;\r\n animation: loading 1.2s linear infinite;\r\n cursor: pointer;\r\n &:hover {\r\n opacity: 0.8;\r\n animation-delay: $never;\r\n transform: translate(-50%, -50%) rotate(-45deg);\r\n &:before,\r\n &:after {\r\n border-radius: 0;\r\n width: 50px;\r\n height: 50px;\r\n }\r\n &:before {\r\n border-color: transparent transparent $red $red;\r\n transform: translate(calc(0% - 3px), calc(-100% + 3px));\r\n }\r\n &:after {\r\n border-color: $red $red transparent transparent;\r\n transform: translate(calc(-100% + 3px), calc(0% - 3px));\r\n }\r\n }\r\n}\r\n\r\n.loader:before {\r\n content: \" \";\r\n position: absolute;\r\n display: block;\r\n width: 69px;\r\n height: 69px;\r\n border-radius: 50%;\r\n border: 6px solid;\r\n border-color: transparent transparent $deepBlue transparent;\r\n transition: all 0.3s;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n}\r\n\r\n.loader:after {\r\n content: \" \";\r\n position: absolute;\r\n display: block;\r\n width: 69px;\r\n height: 69px;\r\n border-radius: 50%;\r\n border: 6px solid;\r\n border-color: $beige transparent transparent transparent;\r\n transition: all 0.3s;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n}\r\n\r\n@keyframes loading {\r\n 0% {\r\n transform: translate(-50%, -50%) rotate(45deg);\r\n }\r\n\r\n 100% {\r\n transform: translate(-50%, -50%) rotate(405deg);\r\n }\r\n}\r\n","@import \"assets/styles/constants\";\r\n\r\n.settings {\r\n padding: 2px;\r\n background-color: $blue;\r\n border-radius: 5px;\r\n position: absolute;\r\n width: 400px;\r\n height: fit-content;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n padding: 5px 10px 10px;\r\n z-index: 1;\r\n cursor: default;\r\n}\r\n\r\n.title {\r\n color: $beige;\r\n text-align: center;\r\n width: 100%;\r\n height: 20px;\r\n}\r\n\r\n.group {\r\n margin-top: 5px;\r\n background-color: $lightBlue;\r\n border: 1px solid $deepBlue;\r\n border-radius: 5px;\r\n padding: 10px;\r\n transition: border-color 0.2s, background-color 0.2s, color 0.2s;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n gap: 5px;\r\n &:first-child {\r\n margin-top: 0;\r\n }\r\n\r\n &__checkbox:hover {\r\n border-color: $beige;\r\n color: $blue;\r\n }\r\n}\r\n\r\n.label {\r\n display: flex;\r\n justify-content: space-between;\r\n user-select: none;\r\n cursor: pointer;\r\n transition: color 0.2s;\r\n margin-bottom: 5px;\r\n gap: 5px;\r\n &:has(.checkbox) {\r\n border-bottom: 1px solid $blue;\r\n }\r\n &:not(:has(.checkbox)) .span {\r\n border-bottom: 1px solid $blue;\r\n }\r\n\r\n &:hover {\r\n color: $blue;\r\n }\r\n\r\n .label_span__disabled {\r\n color: $gray;\r\n cursor: not-allowed;\r\n &:hover {\r\n color: $gray;\r\n }\r\n }\r\n}\r\n\r\n.checkbox {\r\n position: relative;\r\n}\r\n\r\n.select {\r\n position: relative;\r\n display: inline;\r\n border: 1px solid $deepBlue;\r\n border-radius: 5px;\r\n padding-inline: 5px;\r\n text-align: center;\r\n transition: background-color 0.2s, color 0.2s;\r\n top: 1px;\r\n\r\n &:hover {\r\n color: $lightBlue;\r\n\r\n &:focus {\r\n color: $black;\r\n }\r\n }\r\n\r\n &:focus {\r\n outline-color: $lightBlue;\r\n }\r\n}\r\n\r\n.span {\r\n display: block;\r\n flex: 1;\r\n}\r\n","@import \"assets/styles/constants\";\r\n\r\n.base {\r\n position: absolute;\r\n margin: 0 auto;\r\n width: fit-content;\r\n height: 40px;\r\n display: flex;\r\n justify-content: center;\r\n gap: 30px;\r\n background-color: $deepBlue;\r\n border: 1px solid $blue;\r\n border-radius: 5px 5px 0 0;\r\n border-bottom: none;\r\n border-left: none;\r\n border-right: none;\r\n padding: 10px;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n transition: transform 0.5s;\r\n\r\n &__hidden {\r\n transform: translateY(100%);\r\n }\r\n\r\n .arrow {\r\n border: 1px solid $blue;\r\n border-bottom-color: $deepBlue;\r\n background-color: $deepBlue;\r\n }\r\n}\r\n\r\n.group {\r\n display: flex;\r\n justify-content: center;\r\n gap: 10px;\r\n}\r\n\r\n.indicator {\r\n position: relative;\r\n height: 20px;\r\n background-color: $beige;\r\n border-radius: 5px;\r\n border: 2px solid $blue;\r\n padding: 0 5px;\r\n color: $blue;\r\n cursor: pointer;\r\n user-select: none;\r\n font-family: monospace;\r\n transition: border-color 0.1s, background-color 0.1s, color 0.1s;\r\n\r\n &:hover {\r\n border-color: $beige;\r\n color: $black;\r\n }\r\n\r\n &__inactive {\r\n background-color: $deepBlue;\r\n border-color: $blue;\r\n\r\n &:hover {\r\n color: $beige;\r\n }\r\n }\r\n\r\n &:disabled {\r\n background-color: $gray;\r\n border-color: $darkGray;\r\n color: $darkGray;\r\n cursor: not-allowed;\r\n\r\n &:hover {\r\n border-color: $darkGray;\r\n color: $darkGray;\r\n background-color: $gray;\r\n }\r\n }\r\n\r\n &__fill {\r\n color: $beige;\r\n background-color: $black;\r\n border-color: $beige;\r\n\r\n &:hover {\r\n border-color: $white;\r\n color: $white;\r\n background-color: $blue;\r\n }\r\n }\r\n\r\n &__eraser {\r\n color: $beige;\r\n background-color: $red;\r\n border-color: $beige;\r\n\r\n &:hover {\r\n border-color: $lightBlue;\r\n color: $lightBlue;\r\n }\r\n }\r\n\r\n &__instant {\r\n color: $red;\r\n border-color: $red;\r\n }\r\n\r\n &__zen {\r\n color: $white;\r\n background-color: $black;\r\n border-color: $white;\r\n\r\n &:hover {\r\n color: $white;\r\n background-color: $blue;\r\n }\r\n }\r\n}\r\n\r\n.selectBase {\r\n position: relative;\r\n}\r\n\r\n.select {\r\n background-color: $lightBlue;\r\n border-radius: 5px;\r\n padding: 2px;\r\n position: absolute;\r\n display: flex;\r\n gap: 2px;\r\n top: -35px;\r\n left: 50%;\r\n width: fit-content;\r\n z-index: 1;\r\n transform: translateX(-50%);\r\n &::after {\r\n content: \"\";\r\n display: block;\r\n position: absolute;\r\n width: 0;\r\n height: 0;\r\n border-left: 10px solid transparent;\r\n border-right: 10px solid transparent;\r\n border-top: 10px solid $lightBlue;\r\n left: 50%;\r\n bottom: -9px;\r\n transform: translateX(-50%);\r\n }\r\n}\r\n","* {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n accent-color: #d5e3c3;\r\n}\r\n\r\nbody {\r\n margin: 0;\r\n background-color: #00213d;\r\n overflow: hidden;\r\n}\r\n\r\ncode {\r\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\r\n monospace;\r\n}\r\n\r\nul {\r\n list-style-type: none;\r\n margin-block-start: 0;\r\n margin-block-end: 0;\r\n margin-inline-start: 0;\r\n margin-inline-end: 0;\r\n padding-inline-start: 0;\r\n}\r\n\r\nli {\r\n list-style: none;\r\n}\r\n\r\nbutton,\r\ninput[type=\"range\"],\r\ninput[type=\"color\"] {\r\n cursor: pointer;\r\n}\r\n\r\n::-webkit-scrollbar {\r\n height: 10px;\r\n width: 10px;\r\n background: rgba(0, 0, 0, 0);\r\n}\r\n\r\n::-webkit-scrollbar-thumb {\r\n background: #6b8aad;\r\n -webkit-border-radius: 5px;\r\n -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);\r\n}\r\n\r\n::-webkit-scrollbar-corner {\r\n background: #000;\r\n}\r\n\r\na {\r\n text-decoration-skip-ink: auto;\r\n}\r\n\r\ncanvas {\r\n vertical-align: bottom;\r\n}\r\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/scripts/views/WebView/build/static/js/main.js b/scripts/views/WebView/build/static/js/main.js index f75438b..ede6839 100644 --- a/scripts/views/WebView/build/static/js/main.js +++ b/scripts/views/WebView/build/static/js/main.js @@ -1,3 +1,3 @@ /*! For license information please see main.js.LICENSE.txt */ -!function(){var e={667:function(e,t,n){!function(e,t,n,r){"use strict";var i=function(e,t,n){return{endTime:t,insertTime:n,type:"exponentialRampToValue",value:e}},o=function(e,t,n){return{endTime:t,insertTime:n,type:"linearRampToValue",value:e}},a=function(e,t){return{startTime:t,type:"setValue",value:e}},u=function(e,t,n){return{duration:n,startTime:t,type:"setValueCurve",values:e}},s=function(e,t,n){var r=n.startTime,i=n.target,o=n.timeConstant;return i+(t-i)*Math.exp((r-e)/o)},l=function(e){return"exponentialRampToValue"===e.type},c=function(e){return"linearRampToValue"===e.type},f=function(e){return l(e)||c(e)},h=function(e){return"setValue"===e.type},d=function(e){return"setValueCurve"===e.type},p=function e(t,n,r,i){var o=t[n];return void 0===o?i:f(o)||h(o)?o.value:d(o)?o.values[o.values.length-1]:s(r,e(t,n-1,o.startTime,i),o)},v=function(e,t,n,r,i){return void 0===n?[r.insertTime,i]:f(n)?[n.endTime,n.value]:h(n)?[n.startTime,n.value]:d(n)?[n.startTime+n.duration,n.values[n.values.length-1]]:[n.startTime,p(e,t-1,n.startTime,i)]},m=function(e){return"cancelAndHold"===e.type},y=function(e){return"cancelScheduledValues"===e.type},g=function(e){return m(e)||y(e)?e.cancelTime:l(e)||c(e)?e.endTime:e.startTime},_=function(e,t,n,r){var i=r.endTime,o=r.value;return n===o?o:0=t:g(n)>=t})),r=this._automationEvents[n];if(-1!==n&&(this._automationEvents=this._automationEvents.slice(0,n)),m(e)){var s=this._automationEvents[this._automationEvents.length-1];if(void 0!==r&&f(r)){if(void 0!==s&&x(s))throw new Error("The internal list is malformed.");var h=void 0===s?r.insertTime:d(s)?s.startTime+s.duration:g(s),p=void 0===s?this._defaultValue:d(s)?s.values[s.values.length-1]:s.value,v=l(r)?_(t,h,p,r):k(t,h,p,r),b=l(r)?i(v,t,this._currenTime):o(v,t,this._currenTime);this._automationEvents.push(b)}if(void 0!==s&&x(s)&&this._automationEvents.push(a(this.getValue(t),t)),void 0!==s&&d(s)&&s.startTime+s.duration>t){var w=t-s.startTime,S=(s.values.length-1)/s.duration,C=Math.max(2,1+Math.ceil(w*S)),T=w/(C-1)*S,E=s.values.slice(0,C);if(T<1)for(var A=1;At})),P=-1===M?this._automationEvents[this._automationEvents.length-1]:this._automationEvents[M-1];if(void 0!==P&&d(P)&&g(P)+P.duration>t)return!1;var N=l(e)?i(e.value,e.endTime,this._currenTime):c(e)?o(e.value,t,this._currenTime):e;if(-1===M)this._automationEvents.push(N);else{if(d(e)&&t+e.duration>g(this._automationEvents[M]))return!1;this._automationEvents.splice(M,0,N)}}return!0}},{key:"flush",value:function(e){var t=this._automationEvents.findIndex((function(t){return g(t)>e}));if(t>1){var n=this._automationEvents.slice(t-1),r=n[0];x(r)&&n.unshift(a(p(this._automationEvents,t-2,r.startTime,this._defaultValue),r.startTime)),this._automationEvents=n}}},{key:"getValue",value:function(e){if(0===this._automationEvents.length)return this._defaultValue;var n=this._automationEvents.findIndex((function(t){return g(t)>e})),r=this._automationEvents[n],i=(-1===n?this._automationEvents.length:n)-1,o=this._automationEvents[i];if(void 0!==o&&x(o)&&(void 0===r||!f(r)||r.insertTime>e))return s(e,p(this._automationEvents,i-1,o.startTime,this._defaultValue),o);if(void 0!==o&&h(o)&&(void 0===r||!f(r)))return o.value;if(void 0!==o&&d(o)&&(void 0===r||!f(r)||o.startTime+o.duration>e))return e