1 line
12 KiB
CSS
1 line
12 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;--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);--btn-primary-bg:#d2d2dc;--btn-text-color:#000;--btn-text-hover-color:#000;--btn-border-color:#646478;--btn-primary-hover-bg:var(--yellow-accent);--animation-pulsing-bg:hsla(0,0%,100%,0.5)}:root,[data-theme=dark]{--yellow-accent:#fc0;--border-color:#646478;--options-text-color:var(--page-text-color)}[data-theme=dark]{--page-bg:#040404;--page-text-color:#f9f9f9;--link-color:var(--yellow-accent);--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);--btn-primary-bg:#8c8cb4;--btn-text-color:#fff;--btn-text-hover-color:var(--page-bg);--btn-border-color:var(--yellow-accent);--btn-primary-hover-bg:var(--yellow-accent);--animation-pulsing-bg:#f0f0ff}@-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)}}.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:#000;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:#000;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{display:flex;justify-content:center;align-items:center;grid-gap:12px;gap:12px;justify-self:end}.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}}.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:#000;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:#000;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}*,:after,:before{box-sizing:border-box;margin:0;padding:0}body,html{font-family:"WorkSans",sans-serif} |