1 line
18 KiB
CSS
1 line
18 KiB
CSS
@font-face{font-family:"WorkSans";src:url(/static/media/WorkSans-Regular.bb287b89.ttf)}@font-face{font-family:"WorkSans-Semibold";src:url(/static/media/WorkSans-SemiBold.1e98db4e.ttf)}@font-face{font-family:"WorkSans-Bold";src:url(/static/media/WorkSans-Bold.2bea7a7f.ttf)}@font-face{font-family:"WorkSans-Black";src:url(/static/media/WorkSans-Black.67c2c5a1.ttf)}:root{--page-bg:#fff;--page-text-color:#040404;--link-color:#000;--border-color:#646478;--border-color-light:rgba(100,100,120,0.5);--error-color:#ef4444;--success-color:#10b981;--editor-toolkit-bg:hsla(0,0%,100%,0.5);--editor-size-border-color:var(--border-color);--modal-bg:var(--page-bg);--modal-text-color:#000;--modal-hotkey-border-color:#000;--model-mask-bg:rgba(209,213,219,0.4);--text-color:#040404;--text-color-gray:#6b6f76;--btn-primary-bg:#d2d2dc;--btn-text-color:var(--text-color);--btn-text-hover-color:#040404;--btn-border-color:#646478;--btn-primary-hover-bg:var(--yellow-accent);--animation-pulsing-bg:hsla(0,0%,100%,0.5);--switch-root-background-color:#dfe1e4;--switch-thumb-color:var(--page-bg);--switch-thumb-checked-color:var(--page-bg)}:root,[data-theme=dark]{--yellow-accent:#fc0;--options-text-color:var(--page-text-color)}[data-theme=dark]{--page-bg:#040404;--page-text-color:#f9f9f9;--link-color:var(--yellow-accent);--border-color:#646478;--border-color-light:#666;--editor-toolkit-bg:rgba(0,0,0,0.5);--editor-size-border-color:var(--yellow-accent);--modal-bg:var(--page-bg);--modal-text-color:var(--page-text-color);--modal-hotkey-border-color:var(--page-text-color);--model-mask-bg:rgba(76,76,87,0.4);--text-color:#fff;--text-color-gray:#8a8f98;--btn-primary-bg:#8c8cb4;--btn-text-color:var(--text-color);--btn-text-hover-color:var(--page-bg);--btn-border-color:var(--yellow-accent);--btn-primary-hover-bg:var(--yellow-accent);--animation-pulsing-bg:#f0f0ff;--switch-root-background-color:#3c3f44;--switch-thumb-color:#1f2023;--switch-thumb-checked-color:#fff}@-webkit-keyframes pulsing{0%{opacity:1}50%{opacity:.75;background-color:hsla(0,0%,100%,.5);background-color:var(--animation-pulsing-bg)}to{opacity:1}}@keyframes pulsing{0%{opacity:1}50%{opacity:.75;background-color:hsla(0,0%,100%,.5);background-color:var(--animation-pulsing-bg)}to{opacity:1}}@-webkit-keyframes opacityReveal{0%{opacity:0}to{opacity:1}}@keyframes opacityReveal{0%{opacity:0}to{opacity:1}}@-webkit-keyframes slideDown{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideDown{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes slideUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes slideIn{0%{-webkit-transform:translateX(calc(100% + 25px));transform:translateX(calc(100% + 25px))}to{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideIn{0%{-webkit-transform:translateX(calc(100% + 25px));transform:translateX(calc(100% + 25px))}to{-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.lama-cleaner{display:grid;grid-template-areas:"main-content";width:100vw;height:100vh;background-color:#fff;background-color:var(--page-bg);color:#040404;color:var(--page-text-color);transition-property:background-color,color;transition-duration:.2s;transition-timing-function:repeat(2,ease-out)}.editor-container{display:flex;width:100vw;height:100vh;justify-content:center;align-items:center}.react-transform-wrapper{display:grid!important;width:100%!important;height:100%!important}.editor-canvas-container{display:grid;grid-template-areas:"editor-content";grid-row-gap:1rem;row-gap:1rem}.editor-canvas{grid-area:editor-content;z-index:2}.original-image-container{grid-area:editor-content;pointer-events:none;display:grid;grid-template-areas:"original-image-content"}.original-image-container img{grid-area:original-image-content}.original-image-container .editor-slider{grid-area:original-image-content;height:100%;width:6px;justify-self:end;background-color:#fc0;background-color:var(--yellow-accent);transition:all .3s cubic-bezier(.4,0,.2,1);z-index:2}.editor-canvas-loading{pointer-events:none;-webkit-animation:pulsing .75s infinite;animation:pulsing .75s infinite}.editor-toolkit-panel{position:fixed;bottom:.5rem;border-radius:3rem;padding:1rem 3rem;display:grid;grid-template-areas:"toolkit-size-selector toolkit-brush-slider toolkit-btns";grid-column-gap:2rem;-webkit-column-gap:2rem;column-gap:2rem;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);-webkit-animation:slideUp .2s ease-out;animation:slideUp .2s ease-out;border:1px solid rgba(100,100,120,.4)}@media screen and (max-width:767px){.editor-toolkit-panel{padding:1rem 2rem;grid-template-areas:"toolkit-size-selector toolkit-size-selector" "toolkit-brush-slider toolkit-brush-slider" "toolkit-btns toolkit-btns";grid-row-gap:2rem;row-gap:2rem;justify-items:center}}.editor-toolkit-panel .eyeicon-active{background-color:#fc0;background-color:var(--yellow-accent);color:#040404;color:var(--btn-text-hover-color)}.editor-brush-slider{grid-area:toolkit-brush-slider;-webkit-user-select:none;-ms-user-select:none;user-select:none;display:grid;grid-template-columns:repeat(2,-webkit-max-content);grid-template-columns:repeat(2,max-content);height:-webkit-max-content;height:max-content;grid-column-gap:1rem;-webkit-column-gap:1rem;column-gap:1rem;align-items:center}.editor-brush-slider input[type=range]{-webkit-appearance:none;appearance:none;width:100%;cursor:pointer;background:transparent;border-color:transparent;color:transparent}.editor-brush-slider input[type=range]:focus{outline:none}.editor-brush-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:1.2rem;width:1.2rem;border-radius:50%;border:1px solid #000;z-index:2;background:#fc0;background:var(--yellow-accent);margin-top:-.5rem}.editor-brush-slider input[type=range]::-webkit-slider-runnable-track{border-radius:2rem;height:.2rem;background:#d2d2dc;background:var(--btn-primary-bg)}.editor-brush-slider input[type=range]::-moz-range-track{border-radius:2rem;background:#d2d2dc;background:var(--btn-primary-bg)}.editor-brush-slider input[type=range]::-moz-range-progress{background:#fc0;background:var(--yellow-accent)}.editor-toolkit-btns{grid-area:toolkit-btns;display:grid;grid-auto-flow:column;grid-column-gap:1rem;-webkit-column-gap:1rem;column-gap:1rem}.brush-shape{position:absolute;border-radius:50%;background-color:rgba(255,204,0,.7333333333);border:1px solid #fc0;border:1px solid var(--yellow-accent);pointer-events:none}.editor-size-selector-options{position:fixed;display:grid}.editor-size-selector{grid-area:toolkit-size-selector;display:grid;grid-template-columns:repeat(2,-webkit-max-content);grid-template-columns:repeat(2,max-content);align-items:center}.editor-size-selector-main{background:var(#fff);color:#000;font-family:"WorkSans";padding:.5rem;border-radius:.5rem;-webkit-user-select:none;-ms-user-select:none;user-select:none;display:flex;justify-content:space-between;align-items:center;cursor:pointer;outline:none;grid-gap:8px;gap:8px;width:128px;border:1px solid #646478;border:1px solid var(--editor-size-border-color);color:#040404;color:var(--options-text-color)}.editor-size-selector-main svg{width:1rem;height:1rem;margin-top:.25rem}.editor-size-options{background:#d2d2dc;background:var(--btn-primary-bg);color:#000;font-family:"WorkSans";border-radius:.5rem;width:128px;padding:0;display:grid;justify-self:center;position:fixed;bottom:4rem;cursor:pointer;color:#040404;color:var(--options-text-color);background-color:#fff;background-color:var(--page-bg);border:1px solid #646478;border:1px solid var(--editor-size-border-color);border-radius:.6rem}@media screen and (max-width:767px){.editor-size-options{bottom:11.5rem}}.editor-size-options .editor-size-option{display:flex;align-items:center;height:40px;-webkit-user-select:none;-ms-user-select:none;user-select:none;padding:.2rem .8rem}.editor-size-options .editor-size-option:first-of-type{border-top-right-radius:.5rem;border-top-left-radius:.5rem}.editor-size-options .editor-size-option:last-of-type{border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem}.editor-size-options .editor-size-option:hover{background-color:#fc0;background-color:var(--yellow-accent);color:#040404;color:var(--btn-text-hover-color)}.landing-page{display:grid;place-self:center;justify-items:center;grid-row-gap:2rem;row-gap:2rem;grid-auto-rows:-webkit-max-content;grid-auto-rows:max-content}@media screen and (max-width:767px){.landing-page{padding:1rem}}.landing-page h1{text-align:center;font-size:1.4rem}@media screen and (max-width:767px){.landing-page h1{font-size:1.2rem}}.landing-page a{color:#000;color:var(--link-color)}.landing-file-selector{display:grid}header{height:60px;padding:1rem 2rem;position:absolute;top:0;display:flex;justify-content:space-between;align-items:center;width:100%;z-index:20;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(100,100,120,.2)}.shortcuts{z-index:1}.header-icons-wrapper{grid-gap:12px;gap:12px}.header-icons,.header-icons-wrapper{display:flex;justify-content:center;align-items:center;justify-self:end}.header-icons{grid-gap:6px;gap:6px}.theme-toggle-ui{z-index:10;transition:all .2s ease-in;-webkit-user-select:none;-ms-user-select:none;user-select:none}.theme-toggle-ui .theme-btn{display:flex;justify-content:center;align-items:center;cursor:pointer;outline:none}.theme-toggle-ui .theme-btn svg{width:22px;height:22px}.modal-shortcuts{grid-area:main-content;background-color:#fff;background-color:var(--modal-bg);color:#000;color:var(--modal-text-color);box-shadow:0 0 20px rgba(0,0,40,.2)}@media screen and (max-width:767px){.modal-shortcuts{display:grid;width:100%;height:auto;margin-top:-11rem;-webkit-animation:slideDown .2s ease-out;animation:slideDown .2s ease-out}}.shortcut-options{display:grid;grid-row-gap:1rem;row-gap:1rem}.shortcut-options .shortcut-option{display:grid;grid-template-columns:repeat(2,auto);grid-column-gap:6rem;-webkit-column-gap:6rem;column-gap:6rem;align-items:center}@media screen and (max-width:767px){.shortcut-options .shortcut-option{grid-template-columns:auto;grid-column-gap:0;-webkit-column-gap:0;column-gap:0;grid-row-gap:.6rem;row-gap:.6rem}}.shortcut-options .shortcut-key{justify-self:end;font-family:"WorkSans-Bold";border:1px solid #000;border:1px solid var(--modal-hotkey-border-color);padding:.4rem 1rem;width:-webkit-max-content;width:max-content;border-radius:.4rem}@media screen and (max-width:767px){.shortcut-options .shortcut-key{padding:.2rem .4rem}}.shortcut-options .shortcut-description{justify-self:start;text-align:left;width:18rem}@media screen and (max-width:767px){.shortcut-options .shortcut-description{text-align:left;width:auto;justify-self:start}}.setting-block{display:flex;flex-direction:column}.setting-block .option-desc{color:#6b6f76;color:var(--text-color-gray);margin-top:12px;border:1px solid #646478;border:1px solid var(--border-color);border-radius:.3rem;padding:1rem}.setting-block .option-desc .sub-setting-block{margin-top:8px;color:#040404;color:var(--text-color)}.setting-block-content{display:flex;justify-content:space-between;align-items:center;grid-gap:12rem;gap:12rem}.setting-block-content-title{display:flex;flex-direction:column;justify-content:space-between}.setting-block-desc{font-size:1rem;margin-top:8px;color:#6b6f76;color:var(--text-color-gray)}.hd-setting-block .inline-tip{display:inline;cursor:pointer;color:#040404;color:var(--text-color)}.model-desc-link{color:#6b6f76;color:var(--text-color-gray);text-decoration:none}.modal-setting{grid-area:main-content;background-color:#fff;background-color:var(--modal-bg);color:#000;color:var(--modal-text-color);box-shadow:0 0 20px rgba(0,0,40,.2);width:700px}@media screen and (max-width:767px){.modal-setting{display:grid;width:100%;height:auto;margin-top:-11rem;-webkit-animation:slideDown .2s ease-out;animation:slideDown .2s ease-out}}.file-select-label{display:grid;cursor:pointer;border:2px dashed #646478;border:2px dashed var(--border-color);border-radius:.5rem;min-width:600px}@media screen and (max-width:767px){.file-select-label{min-width:300px}}.file-select-label .file-select-label-hover,.file-select-label:hover{color:#000;background-color:#fc0;background-color:var(--yellow-accent)}.file-select-container{display:grid;padding:4rem;width:100%;height:100%}.file-select-container input{display:none}.file-select-message{font-family:"WorkSans";text-align:center}.btn-primary{display:grid;grid-auto-flow:column;grid-column-gap:1rem;-webkit-column-gap:1rem;column-gap:1rem;border:1px solid #646478;border:1px solid var(--btn-border-color);color:#040404;color:var(--btn-text-color);font-family:"WorkSans",sans-serif;width:-webkit-max-content;width:max-content;padding:.5rem;place-items:center;border-radius:.5rem;z-index:1;cursor:pointer}.btn-primary:hover{background-color:#fc0;background-color:var(--btn-primary-hover-bg);color:#040404;color:var(--btn-text-hover-color)}.btn-primary svg{width:20px;height:auto}.btn-primary-disabled{pointer-events:none;opacity:.5}.modal-mask{z-index:9999;height:100%;width:100%;display:flex;justify-content:center;align-items:center;position:absolute;background-color:rgba(209,213,219,.4);background-color:var(--model-mask-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.modal{display:grid;grid-auto-rows:-webkit-max-content;grid-auto-rows:max-content;grid-row-gap:2rem;row-gap:2rem;place-self:center;padding:2rem;border-radius:.95rem}.modal .modal-header{display:grid;grid-template-columns:repeat(2,auto);align-items:center}.modal .modal-header .btn-primary{justify-self:end}.selector{position:relative;flex-direction:column}.selector,.selector-main{display:flex;align-items:center;justify-content:space-between}.selector-main{background:var(#fff);color:#000;font-family:"WorkSans";border-radius:.5rem;width:100%;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:none;grid-gap:8px;gap:8px;padding:.2rem .8rem;border:1px solid #646478;border:1px solid var(--border-color);color:#040404;color:var(--options-text-color)}.selector-main svg{width:1rem;height:1rem;margin-top:.25rem}.selector-options{background:#d2d2dc;background:var(--btn-primary-bg);color:#000;font-family:"WorkSans";border-radius:.5rem;width:100%;padding:0;display:grid;justify-self:center;position:absolute;cursor:pointer;top:3rem;color:#040404;color:var(--options-text-color);background-color:#fff;background-color:var(--page-bg);border:1px solid #646478;border:1px solid var(--border-color);border-radius:.6rem}@media screen and (max-width:767px){.selector-options{bottom:11.5rem}}.selector-options .selector-option{display:flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;padding:.5rem .8rem}.selector-options .selector-option:first-of-type{border-top-right-radius:.5rem;border-top-left-radius:.5rem}.selector-options .selector-option:last-of-type{border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem}.selector-options .selector-option:hover{background-color:#fc0;background-color:var(--yellow-accent);color:#040404;color:var(--btn-text-hover-color)}.switch-root{all:"unset";width:42px;height:25px;background-color:#dfe1e4;background-color:var(--switch-root-background-color);border-radius:9999px;border:none;position:relative;transition:background-color .1s;-webkit-tap-highlight-color:rgba(0,0,0,0)}.switch-root:focus-visible{outline:none}.switch-root[data-state=checked]{background-color:#fc0;background-color:var(--yellow-accent)}.switch-thumb{display:block;width:17px;height:17px;background-color:#fff;background-color:var(--switch-thumb-color);border-radius:9999px;transition:-webkit-transform .1s;transition:transform .1s;transition:transform .1s,-webkit-transform .1s;-webkit-transform:translateX(4px);transform:translateX(4px);will-change:transform}.switch-thumb[data-state=checked]{-webkit-transform:translateX(21px);transform:translateX(21px);background-color:#fff;background-color:var(--switch-thumb-checked-color);outline:1px solid rgba(100,100,120,.5)}.number-input{all:unset;flex:1 0 auto;border-radius:.5rem;padding:.2rem .8rem;line-height:1;outline:1px solid #646478;outline:1px solid var(--border-color)}.number-input:focus-visible{outline:1px solid #fc0;outline:1px solid var(--yellow-accent)}.toast-viewpoint{position:fixed;top:48px;right:0;display:flex;flex-direction:row;padding:25px;grid-gap:10px;gap:10px;max-width:100vw;margin:0;z-index:999999}.toast-viewpoint:focus-visible{outline:none}.toast-root{border:1px solid rgba(100,100,120,.5);border:1px solid var(--border-color-light);background-color:#fff;background-color:var(--page-bg);border-radius:.6rem;padding:15px;display:flex;align-items:center;grid-gap:12px;gap:12px}.toast-root[data-state=open]{-webkit-animation:slideIn .15s cubic-bezier(.16,1,.3,1);animation:slideIn .15s cubic-bezier(.16,1,.3,1)}.toast-root[data-state=close]{-webkit-animation:opacityReveal .1s ease-in forwards;animation:opacityReveal .1s ease-in forwards}.toast-root[data-state=cancel]{-webkit-transform:translateX(0);transform:translateX(0);-webkit-animation:transform .1s ease-out;animation:transform .1s ease-out}.toast-root.error{border:1px solid #ef4444;border:1px solid var(--error-color)}.toast-root.success{border:1px solid #10b981;border:1px solid var(--success-color)}.error-icon{height:24px;width:24px;color:#ef4444;color:var(--error-color)}.success-icon{height:24px;width:24px;color:#10b981;color:var(--success-color)}.loading-icon{-webkit-animation-name:spin;animation-name:spin;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-transform-origin:center center;transform-origin:center center;-webkit-animation-timing-function:linear;animation-timing-function:linear}.loading-icon,.toast-desc,.toast-icon{display:flex;align-items:center}.toast-desc{margin:0;color:#040404;color:var(--text-color);min-width:240px}*,:after,:before{box-sizing:border-box;margin:0;padding:0}body,html{font-family:"WorkSans",sans-serif} |