@tecof/theme-editor 0.0.7 → 0.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +343 -128
- package/dist/index.d.mts +101 -9
- package/dist/index.d.ts +101 -9
- package/dist/index.js +1110 -1525
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1109 -1526
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +1435 -1
- package/package.json +6 -5
package/dist/styles.css
CHANGED
|
@@ -70,4 +70,1438 @@
|
|
|
70
70
|
.doka--root,:root{--doka-effect--invert:0%;--doka-value--alpha:calc(100% - var(--doka-effect--invert));--doka-value--beta:var(--doka-effect--invert);--doka-color--alpha:#ffd843;--doka-color--alpha-dim:#ffc343;--doka-font-size:16px;--doka-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--doka-editor--max-width:80em;--doka-editor--max-height:60em;--doka-editor--spacing:0;--doka-modal--width:70vw;--doka-modal--height:80vh;--doka-modal--max-width:56rem;--doka-modal--max-height:40rem;--doka-effect--frost:blur(10px);--doka-color--beta:hsl(0,0%,var(--doka-value--alpha));--doka-color--gamma:hsl(0,0%,var(--doka-value--beta));--doka-color--delta:hsla(0,0%,var(--doka-value--beta),.85);--doka-color--epsilon:hsla(0,0%,var(--doka-value--beta),.75);--doka-editor--color:hsla(0,0%,var(--doka-value--alpha),.9);--doka-editor--color-dim:hsla(0,0%,var(--doka-value--alpha),.3);--doka-editor--background-color:hsla(0,0%,var(--doka-value--beta),.99);--doka-editor--background-ellipse-inner-color:hsla(0,0%,var(--doka-value--alpha),.15);--doka-editor--background-ellipse-outer-color:hsla(0,0%,var(--doka-value--alpha),0);--doka-editor-outline--color:hsl(0,0%,var(--doka-value--alpha));--doka-modal--background:hsl(0,0%,var(--doka-value--beta));--doka-modal--overlay:hsla(0,0%,var(--doka-value--beta),.8);--doka-modal--shadow:0 1em 4em rgba(0,0,0,.25),0 .5em 2em rgba(0,0,0,.25);--doka-scrollbar-rail--color:var(--doka-color--delta);--doka-scrollbar-thumb--color:var(--doka-color--epsilon);--doka-scroller-rail--color:transparent;--doka-scroller-thumb--color:hsla(0,0%,var(--doka-value--alpha),.2);--doka-component--color:var(--doka-editor--color);--doka-component--background:hsla(0,0%,var(--doka-value--alpha),.15);--doka-component--background-dim:hsla(0,0%,var(--doka-value--alpha),.1);--doka-component--background-dark:hsla(0,0%,var(--doka-value--beta),.8);--doka-component--background-darker:hsla(0,0%,var(--doka-value--beta),.9);--doka-component-alt--color:var(--doka-color--delta);--doka-component-alt--color-dim:hsla(0,0%,var(--doka-value--beta),.75);--doka-component-alt--background:hsla(0,0%,var(--doka-value--alpha),.85);--doka-component-alt-effect--background:hsla(0,0%,var(--doka-value--alpha),.6);--doka-component-alt--edge:hsla(0,0%,var(--doka-value--beta),.15);--doka-component-alt--shadow:0 .75em 1em -.75em rgba(0,0,0,.4),0 1em 2em 0 rgba(0,0,0,.05);--doka-button--color:var(--doka-component--color);--doka-button--background:var(--doka-component--background);--doka-button--background-dim:var(--doka-component--background-dim);--doka-button-hover--background:hsla(0,0%,var(--doka-value--alpha),.25);--doka-button-alt--color:var(--doka-component-alt--color);--doka-button-alt--background:var(--doka-component-alt--background);--doka-button-alt-hover--background:hsla(0,0%,var(--doka-value--alpha),.95);--doka-button-alt-effect--background:var(--doka-component-alt-effect--background);--doka-button-alt-effect-hover--background:hsla(0,0%,var(--doka-value--alpha),.75);--doka-button-primary--color:var(--doka-color--gamma);--doka-button-primary--background:var(--doka-color--alpha);--doka-button-primary-hover--background:var(--doka-color--alpha-dim);--doka-button-main--radius:9999em;--doka-button-tab--radius:0;--doka-button-tool--radius:0;--doka-dropdown-hover--background:hsla(0,0%,var(--doka-value--beta),.1);--doka-dropdown-hover-active--background:hsla(0,0%,var(--doka-value--beta),.15);--doka-dropdown-selected--color:var(--doka-editor--color);--doka-dropdown-selected--background:hsla(0,0%,var(--doka-value--beta),.9);--doka-dropdown-selected-hover--background:hsla(0,0%,var(--doka-value--beta),.8);--doka-dropdown-selected-active-hover--background:hsla(0,0%,var(--doka-value--beta),.6);--doka-range-input--background:hsla(0,0%,var(--doka-value--alpha),.2);--doka-range-input-recenter--background:var(--doka-range-input--background);--doka-range-input-centered--background:var(--doka-range-input--background);--doka-range-input-thumb--color:hsl(0,0%,var(--doka-value--alpha));--doka-range-input-thumb-hover--color:hsla(0,0%,var(--doka-value--alpha),.15);--doka-tab--border-color:rgba(0,0,0,.15);--doka-crop-focal-line--color:hsla(0,0%,100%,.5);--doka-crop-corner--color:var(--doka-color--beta);--doka-crop-corner-focus--color:var(--doka-color--beta);--doka-crop-corner--shadow:0 .0625em .125em rgba(0,0,0,.2);--doka-crop-edge-focus--color:hsla(0,0%,var(--doka-value--alpha),.5);--doka-image-outline--color:var(--doka-color--beta);--doka-image-focus--color:hsla(0,0%,var(--doka-value--alpha),.25);--doka-status--background:hsla(0,0%,var(--doka-value--alpha),.1);--doka-status-bubble--color:hsla(0,0%,var(--doka-value--beta),.8);--doka-status-bubble--color-dim:hsla(0,0%,var(--doka-value--beta),.2);--doka-status-bubble--background:hsla(0,0%,var(--doka-value--alpha),.75);--doka-status-bubble-effect--background:hsla(0,0%,var(--doka-value--alpha),.5);--doka-status-bubble--shadow:0 .125em 1em rgba(0,0,0,.2);--doka-size-indicator--color:rgba(0,0,0,.85);--doka-size-indicator--background:hsla(0,0%,100%,.95);--doka-size-indicator--edge:rgba(0,0,0,.15);--doka-size-indicator--radius:.25em;--doka-button-zoom--color:rgba(0,0,0,.85);--doka-button-zoom--background:hsla(0,0%,100%,.85);--doka-button-zoom-hover--background:hsla(0,0%,100%,.95);--doka-button-zoom-effect--background:hsla(0,0%,100%,.6);--doka-button-zoom-effect-hover--background:hsla(0,0%,100%,.75);--doka-filter-tile--radius:0;--doka-filter-tile-selected--color:var(--doka-color--alpha);--doka-markup-manipulator--fill:#2990ff;--doka-markup-manipulator--stroke:#fff;--doka-markup-manipulator--stroke-inverted:#000;--doka-markup-manipulator--line:hsla(0,0%,100%,.75);--doka-markup-manipulator--line-inverted:rgba(0,0,0,.75);--doka-instruction-bubble--color:#fff;--doka-instruction-bubble--background:radial-gradient(closest-side ellipse,rgba(0,0,0,.22) 20%,rgba(0,0,0,.21) 35%,rgba(0,0,0,.18) 50%,rgba(0,0,0,.1) 70%,rgba(0,0,0,.05) 80%,rgba(0,0,0,.01) 90%,transparent);--doka-instruction-bubble--color-shadow:0 .125em .75em #000;--doka-menu--offset:12em}.doka--root button,.doka--root fieldset,.doka--root input,.doka--root label,.doka--root legend{all:initial;font-family:inherit;font-weight:inherit;color:inherit}.doka--root *,.doka--root :after,.doka--root :before{box-sizing:inherit}.doka--root button{box-sizing:border-box;text-align:center}.doka--root .doka--view-stack{pointer-events:none}.doka--root .doka--view-stack>*{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;outline:transparent}.doka--root .doka--view-stack [data-view-active=false] *{pointer-events:none!important}.doka--root .doka--view-stack [data-view-active=true]{z-index:1}.doka--root .doka--view-stack [data-view-hidden=true]{display:none!important}.doka--root .doka--button-app{position:static;width:auto;height:auto;margin:0;padding:0;border:none;font-family:inherit;font-size:1em;outline:transparent;color:hsla(0,0%,100%,.9);color:var(--doka-button--color);background-color:hsla(0,0%,100%,.15);background-color:var(--doka-button--background);border-radius:9999em;border-radius:var(--doka-button-main--radius);display:flex;align-items:center;line-height:2.5;padding:0 1.5em;font-weight:500;transition:transform .15s ease-out,background-color .25s ease-out,color .25s ease-out;transform:scale(1)}.doka--root .doka--button-app svg{margin:0 auto;display:inline-block;width:auto;height:auto}.doka--root .doka--button-app svg+span{margin-left:.5em}.doka--root .doka--button-app span{font-size:.875em}.doka--root .doka--button-app:focus,.doka--root .doka--button-app:hover{background-color:hsla(0,0%,100%,.25);background-color:var(--doka-button-hover--background)}.doka--root .doka--button-app:active{transition-duration:.25s;transform:scale(.95)}@supports ((-webkit-backdrop-filter:var(--doka-effect--frost)) or (backdrop-filter:var(--doka-effect--frost))){.doka--root .doka--button-app{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-backdrop-filter:var(--doka-effect--frost);backdrop-filter:var(--doka-effect--frost)}}.doka--root .doka--button-app.doka--button-icon-only{width:2.25em;height:2.25em;padding:0}.doka--root .doka--button-action-reset svg{max-width:1.625em}.doka--root .doka--button-action-confirm{color:#000;color:var(--doka-button-primary--color);background-color:#ffd843;background-color:var(--doka-button-primary--background);font-weight:600;-webkit-backdrop-filter:none;backdrop-filter:none}.doka--root .doka--button-action-confirm:focus,.doka--root .doka--button-action-confirm:hover{background-color:#ffc343;background-color:var(--doka-button-primary-hover--background)}.doka--root[data-style-viewport~=x-cramped] .doka--button-app{font-size:.85em;-webkit-backdrop-filter:none;backdrop-filter:none}.doka--root[data-style-viewport~=x-cramped] .doka--button-app svg{width:1.25em;height:1.25em}.doka--root[data-style-viewport~=x-cramped] .doka--button-action-confirm{font-size:.75em}.doka--root[data-style-viewport~=x-cramped] .doka--button-app:not(.doka--button-action-confirm){color:hsla(0,0%,100%,.9);color:var(--doka-button--color);background-color:transparent}.doka--root[data-style-viewport~=x-cramped] .doka--button-app.doka--button-icon-only svg{width:1.75em;height:1.75em}.doka--root[data-style-viewport~=x-cramped] .doka--button-app.doka--button-icon-fallback{width:2.5em;height:2.5em;padding:0}.doka--root[data-style-viewport~=x-cramped] .doka--button-app.doka--button-icon-fallback span{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden}.doka--root .doka--button-icon-fallback svg{display:none}.doka--root .doka--button-icon-fallback svg+span{margin-left:0}.doka--root[data-style-viewport*=x-cramped] .doka--button-icon-fallback svg{display:block}.doka--root[data-style-viewport*=x-cramped] .doka--button-icon-fallback svg+span{margin-left:0}.doka--root .doka--button-icon-only{flex-shrink:0}.doka--root .doka--button-icon-only span{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden}.doka--root .doka--button-tab{position:static;width:auto;height:auto;margin:0;padding:0;border:none;font-family:inherit;font-size:1em;outline:transparent;line-height:inherit;color:hsla(0,0%,100%,.9);color:var(--doka-button--color);border-radius:0;border-radius:var(--doka-button-tab--radius);width:5em;max-width:5em;padding-top:.875em;padding-bottom:.75em;background-color:transparent;font-weight:500;transition:transform .15s ease-out,background-color .25s ease-out,color .25s ease-out;transform:scale(1)}.doka--root .doka--button-tab svg{display:inline;margin-bottom:.325em;max-height:1.5em}.doka--root .doka--button-tab span{display:block;font-size:.875em}.doka--root .doka--button-tab:focus,.doka--root .doka--button-tab:hover{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-backdrop-filter:var(--doka-effect--frost);backdrop-filter:var(--doka-effect--frost)}.doka--root .doka--button-tab:focus,.doka--root .doka--button-tab:hover,.doka--root .doka--button-tab[data-active=true]{background-color:hsla(0,0%,100%,.15);background-color:var(--doka-button--background)}.doka--root .doka--button-tab[data-active=true]:focus,.doka--root .doka--button-tab[data-active=true]:hover{background-color:hsla(0,0%,100%,.25);background-color:var(--doka-button-hover--background)}.doka--root .doka--button-tab:active{transition-duration:.25s;transform:scale(.95)}.doka--root .doka--button-tab .doka--icon-resize-arrow-ne,.doka--root .doka--button-tab .doka--icon-resize-arrow-sw{transition:opacity .25s ease-out}.doka--root .doka--button-tab[data-scale-direction=down] .doka--icon-resize-arrow-ne{opacity:0}.doka--root .doka--button-tab[data-scale-direction=down] .doka--icon-resize-arrow-sw,.doka--root .doka--button-tab[data-scale-direction=up] .doka--icon-resize-arrow-ne{opacity:1}.doka--root .doka--button-tab[data-scale-direction=up] .doka--icon-resize-arrow-sw{opacity:0}@supports ((-webkit-backdrop-filter:var(--doka-effect--frost)) or (backdrop-filter:var(--doka-effect--frost))){.doka--root .doka--button-tab[data-active=true]{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-backdrop-filter:var(--doka-effect--frost);backdrop-filter:var(--doka-effect--frost)}}.doka--root .doka--utils[data-layout=compact] .doka--button-tab{height:4.6875em}.doka--root .doka--utils[data-layout=compact] .doka--button-tab span{display:none}.doka--root .doka--utils[data-layout=compact] .doka--button-tab svg{margin-bottom:0}.doka--root[data-style-viewport*=x-cramped] .doka--utils{padding:0 1px}.doka--root[data-style-viewport*=x-cramped] .doka--utils[data-util-count="5"] .doka--button-tab{width:20%}.doka--root[data-style-viewport*=x-cramped] .doka--utils[data-util-count="5"] .doka--button-tab span{display:none}.doka--root[data-style-viewport*=x-cramped] .doka--utils[data-util-count="4"] .doka--button-tab{width:25%}.doka--root[data-style-viewport*=x-cramped] .doka--utils[data-util-count="3"] .doka--button-tab{width:33.333%}.doka--root[data-style-viewport*=x-cramped] .doka--utils[data-util-count="2"] .doka--button-tab{width:50%}.doka--root[data-style-viewport*=x-cramped] .doka--utils .doka--button-tab{min-width:2em;max-width:3.5em;height:3.25em;padding:.325em 0;box-shadow:0 0 0 1px rgba(0,0,0,.15);box-shadow:0 0 0 1px var(--doka-tab--border-color)}.doka--root[data-style-viewport*=x-cramped] .doka--utils .doka--button-tab:first-child:before,.doka--root[data-style-viewport*=x-cramped] .doka--utils .doka--button-tab:last-child:before{position:absolute;left:0;top:0;width:100%;height:100%;content:"";pointer-events:none}.doka--root[data-style-viewport*=x-cramped] .doka--utils .doka--button-tab:first-child:before{box-shadow:-1px 0 0 0 rgba(0,0,0,.15);box-shadow:-1px 0 0 0 var(--doka-tab--border-color)}.doka--root[data-style-viewport*=x-cramped] .doka--utils .doka--button-tab:last-child:before{box-shadow:1px 0 0 0 rgba(0,0,0,.15);box-shadow:1px 0 0 0 var(--doka-tab--border-color)}.doka--root[data-style-viewport*=x-cramped] .doka--utils .doka--button-tab svg{width:1em;margin:0 auto -.125em}.doka--root[data-style-viewport*=x-cramped] .doka--utils .doka--button-tab span{font-size:.5625em;margin-top:.5em}.doka--root[data-style-viewport*=x-cramped] .doka--utils .doka--button-tab:active{transform:scale(1)}.doka--root[data-style-viewport*=x-cramped] .doka--utils .doka--button-tab[data-active=true]{-webkit-backdrop-filter:none;backdrop-filter:none}.doka--root[data-style-viewport*=x-cramped] .doka--utils .doka--button-tab[data-active=true]:focus,.doka--root[data-style-viewport*=x-cramped] .doka--utils .doka--button-tab[data-active=true]:hover{background-color:hsla(0,0%,100%,.15);background-color:var(--doka-button--background)}.doka--root .doka--button-tool{position:static;width:auto;height:auto;margin:0;border:none;font-family:inherit;font-size:1em;font-weight:400;outline:transparent;border-radius:0;border-radius:var(--doka-button-tool--radius);color:hsla(0,0%,100%,.9);color:var(--doka-button--color);display:flex;padding:0 .75em 0 .5em;align-items:center;background-color:transparent;transition:transform .15s ease-out,background-color .25s ease-out,color .25s ease-out;transform:scale(1)}.doka--root .doka--button-tool span{font-size:.875em;margin-left:.5em}.doka--root .doka--button-tool:focus,.doka--root .doka--button-tool:hover{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-backdrop-filter:var(--doka-effect--frost);backdrop-filter:var(--doka-effect--frost);background-color:hsla(0,0%,100%,.15);background-color:var(--doka-button--background)}.doka--root .doka--button-tool:active{transition-duration:.25s;transform:scale(.95)}.doka--root [data-layout=compact] .doka--button-tool{padding:0 .5em;border-radius:.25em;background-color:hsla(0,0%,100%,.1);background-color:var(--doka-button--background-dim);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-backdrop-filter:var(--doka-effect--frost);backdrop-filter:var(--doka-effect--frost);width:2.6em;box-sizing:border-box;flex-grow:0}.doka--root [data-layout=compact] .doka--button-tool:focus,.doka--root [data-layout=compact] .doka--button-tool:hover{background-color:hsla(0,0%,100%,.15);background-color:var(--doka-button--background)}.doka--root [data-layout=compact] .doka--button-tool span{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden}.doka--root .doka--button-zoom{position:static;margin:0;padding:0;border:none;font-family:inherit;font-size:1em;outline:transparent;display:flex;align-items:center;justify-content:center;line-height:2.5;font-weight:500;transition:transform .15s ease-out,background-color .25s ease-out,color .25s ease-out;border-radius:9999em;height:2.5em;width:2.5em;color:rgba(0,0,0,.85);color:var(--doka-button-zoom--color);background-color:hsla(0,0%,100%,.85);background-color:var(--doka-button-zoom--background)}.doka--root .doka--button-zoom span{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden}.doka--root .doka--button-zoom:focus,.doka--root .doka--button-zoom:hover{background-color:hsla(0,0%,100%,.95);background-color:var(--doka-button-zoom-hover--background)}@supports ((-webkit-backdrop-filter:var(--doka-effect--frost)) or (backdrop-filter:var(--doka-effect--frost))){.doka--root .doka--button-zoom{background-color:hsla(0,0%,100%,.6);background-color:var(--doka-button-zoom-effect--background);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-backdrop-filter:var(--doka-effect--frost);backdrop-filter:var(--doka-effect--frost)}.doka--root .doka--button-zoom:focus,.doka--root .doka--button-zoom:hover{background-color:hsla(0,0%,100%,.75);background-color:var(--doka-button-zoom-effect-hover--background)}}.doka--root .doka--checkable{display:inline-flex;justify-content:center;align-items:center;height:2.15625em;line-height:1.5;color:hsla(0,0%,100%,.9);color:var(--doka-component--color);transform:scale(1)}.doka--root .doka--checkable input{position:absolute;width:1px;height:1px;padding:0;margin:0;opacity:0;outline:transparent}.doka--root .doka--checkable label{display:inline-block;cursor:pointer;transition:opacity .125s ease-out;font-size:.875em;margin:0;color:inherit}.doka--root .doka--checkable input:active+label,.doka--root .doka--checkable input:focus+label{background-color:hsla(0,0%,100%,.15);background-color:var(--doka-component--background);border-radius:.5em}.doka--root .doka--checkable svg{display:block;margin:0}.doka--root .doka--checkable path{transition:transform .1s ease-out}.doka--root .doka--checkable:active{transition-duration:.25s;transform:scale(.925)}.doka--root .doka--color{height:calc(100% - 3em);width:calc(100% - 2em);left:1em;top:1em}.doka--root .doka--color .doka--color-form{display:flex;align-items:flex-start;max-width:45em;margin:0 auto;padding:1em 0 0;height:6.5em;box-sizing:border-box;contain:layout size style}.doka--root .doka--color .doka--range-input{pointer-events:all;margin:0 .5em;display:flex;flex-direction:column-reverse;align-items:stretch;flex:1}.doka--root .doka--color .doka--range-input label{color:inherit;margin-top:.25em;font-size:.75em;align-self:center;display:flex;align-items:center}.doka--root .doka--color .doka--range-input svg{display:inline-block;width:1.25em;margin-right:.5em;max-height:1.5em}.doka--root .doka--color .doka--range-input [stroke-width]{stroke-width:2.5}.doka--root[data-style-viewport*=x-cramped] .doka--color{top:2em;display:flex;flex-direction:column-reverse}.doka--root[data-style-viewport*=x-cramped] .doka--color-form{padding:.5em 0 0;height:5em;flex-wrap:wrap;margin:0 -.5em;align-self:center;width:100%;max-width:25em;padding:0}.doka--root[data-style-viewport*=x-cramped] .doka--range-input{width:calc(50% - 1em);max-width:none;flex:auto;flex-direction:row;margin:0 .25em}.doka--root[data-style-viewport*=x-cramped] .doka--range-input label{margin:0;width:1.25em;overflow:hidden}.doka--root[data-style-viewport*=x-cramped] .doka--range-input label svg{margin:0}.doka--root[data-style-viewport*=x-cramped] .doka--range-input label span{display:none}.doka--root[data-style-viewport*=x-cramped] .doka--range-input:nth-child(2n){flex-direction:row-reverse}@media (-ms-high-contrast:none){.doka--color-form .doka--range-input,::-ms-backdrop{flex:none;width:10em}}.doka--root .doka--container{display:flex;flex-direction:column;height:100%;width:100%;box-sizing:border-box;position:relative;touch-action:manipulation}.doka--root .doka--container[data-limit-overflow=true]{overflow:hidden}.doka--root[data-style-viewport*=x-cramped] .doka--container{flex-direction:column-reverse}.doka--root .doka--content{position:relative;flex:1}.doka--root .doka--content>*{position:absolute;left:0;top:0;width:100%;height:100%}.doka--root .doka--view-stack{z-index:2}.doka--root .doka--image{z-index:1}.doka--root .doka--instructions-bubble{color:#fff;color:var(--doka-instruction-bubble--color);background:radial-gradient(closest-side ellipse,rgba(0,0,0,.22) 20%,rgba(0,0,0,.21) 35%,rgba(0,0,0,.18) 50%,rgba(0,0,0,.1) 70%,rgba(0,0,0,.05) 80%,rgba(0,0,0,.01) 90%,transparent);background:var(--doka-instruction-bubble--background);filter:drop-shadow(0 .125em .75em rgba(0,0,0,1));filter:drop-shadow(var(--doka-instruction-bubble--color-shadow));position:absolute;left:0;top:0;max-width:15em;line-height:1.5;text-align:center;padding:3em 4em 4em;font-size:.75em;pointer-events:none;display:flex;flex-direction:column;align-items:center}.doka--root .doka--instructions-bubble svg:first-child{margin-bottom:.5em}.doka--root .doka--crop-mask{position:absolute;left:0;top:0;will-change:transform;pointer-events:none}.doka--root .doka--crop-rect{z-index:2;position:relative}.doka--root .doka--crop-rect-corner{color:transparent;position:absolute;pointer-events:all;z-index:3;padding:0;margin:0;border:none;text-indent:0;width:20px;height:20px;left:-10px;top:-10px;will-change:transform}.doka--root .doka--crop-rect-corner:after{position:absolute;left:-1em;right:-1em;top:-1em;bottom:-1em;content:""}.doka--root .doka--crop-rect-corner-ne,.doka--root .doka--crop-rect-corner-sw{cursor:nesw-resize!important}.doka--root .doka--crop-rect-corner-nw,.doka--root .doka--crop-rect-corner-se{cursor:nwse-resize!important}.doka--root[data-style-crop-corner=circle] .doka--crop-rect-corner{background:#fff;background:var(--doka-crop-corner--color);box-shadow:0 .0625em .125em rgba(0,0,0,.2);box-shadow:var(--doka-crop-corner--shadow);border-radius:9999em;transition:background-color .25s ease-in-out}.doka--root[data-style-crop-corner=line] .doka--crop-rect-corner:before{position:absolute;width:2.5em;height:2.5em;pointer-events:none;transition:opacity .25s ease-out;content:""}.doka--root[data-style-crop-corner=line] .doka--crop-rect-corner-nw:before{box-shadow:inset .25em .25em 0 0 #fff;box-shadow:inset .25em .25em 0 0 var(--doka-crop-corner--color);left:.4375em;top:.4375em}.doka--root[data-style-crop-corner=line] .doka--crop-rect-corner-ne:before{box-shadow:inset -.25em .25em 0 0 #fff;box-shadow:inset -.25em .25em 0 0 var(--doka-crop-corner--color);right:.4375em;top:.4375em}.doka--root[data-style-crop-corner=line] .doka--crop-rect-corner-se:before{box-shadow:inset -.25em -.25em 0 0 #fff;box-shadow:inset -.25em -.25em 0 0 var(--doka-crop-corner--color);right:.4375em;bottom:.4375em}.doka--root[data-style-crop-corner=line] .doka--crop-rect-corner-sw:before{box-shadow:inset .25em -.25em 0 0 #fff;box-shadow:inset .25em -.25em 0 0 var(--doka-crop-corner--color);left:.4375em;bottom:.4375em}.doka--root[data-style-crop-corner=line] .doka--crop-rect[data-indicator-size=none] .doka--crop-rect-corner:before{opacity:0}.doka--root .doka--crop-rect-focal-line{background:hsla(0,0%,100%,.5);background:var(--doka-crop-focal-line--color);position:absolute;left:0;top:0;height:100px;width:100px;transform-origin:left top;z-index:3;pointer-events:none;will-change:transform,opacity}.doka--root .doka--crop-rect-edge{position:absolute;left:0;top:0;padding:0;border:0;background:transparent;transform-origin:left top;z-index:2;pointer-events:all;will-change:transform}.doka--root .doka--crop-rect-edge:focus{outline:transparent}.doka--root .doka--crop-rect-edge:focus:after{position:absolute;content:"";background-color:hsla(0,0%,100%,.5);background-color:var(--doka-crop-edge-focus--color)}.doka--root .doka--crop-rect-edge-n,.doka--root .doka--crop-rect-edge-s{width:100px;top:-20px;height:40px;cursor:ns-resize!important}.doka--root .doka--crop-rect-edge-n:after,.doka--root .doka--crop-rect-edge-s:after{left:0;right:0;top:17px;width:100%;height:7px}.doka--root .doka--crop-rect-edge-e,.doka--root .doka--crop-rect-edge-w{cursor:ew-resize!important;height:100px;left:-20px;width:40px}.doka--root .doka--crop-rect-edge-e:after,.doka--root .doka--crop-rect-edge-w:after{top:0;bottom:0;left:17px;height:100%;width:7px}.doka--root[data-style-viewport*=touch][data-style-crop-corner=circle] .doka--crop-rect-corner:after{border-radius:50%;opacity:0;background:#fff;background:var(--doka-crop-corner-focus--color);box-shadow:0 0 0 1em #fff;box-shadow:0 0 0 1em var(--doka-crop-corner-focus--color)}.doka--root[data-style-viewport*=touch][data-style-crop-corner=circle] .doka--crop-rect-corner:active:after{opacity:.25}.doka--root[data-style-viewport*=touch] .doka--crop-rect-edge:active{outline:transparent}.doka--root[data-style-viewport*=touch] .doka--crop-rect-edge:active:after{position:absolute;background-color:hsla(0,0%,100%,.5);background-color:var(--doka-crop-edge-focus--color);content:""}.doka--root[data-style-viewport*=x-cramped] .doka--crop-rect-corner{width:16px;height:16px;left:-8px;top:-8px}.doka--root[data-style-viewport*=x-cramped][data-style-crop-corner=line] .doka--crop-rect-corner-nw:before{left:.325em;top:.325em}.doka--root[data-style-viewport*=x-cramped][data-style-crop-corner=line] .doka--crop-rect-corner-ne:before{right:.325em;top:.325em}.doka--root[data-style-viewport*=x-cramped][data-style-crop-corner=line] .doka--crop-rect-corner-se:before{right:.325em;bottom:.325em}.doka--root[data-style-viewport*=x-cramped][data-style-crop-corner=line] .doka--crop-rect-corner-sw:before{left:.325em;bottom:.325em}.doka--root .doka--crop-resizer{visibility:hidden;position:absolute;left:0;top:0;width:100%;height:100%;z-index:9999999;background:transparent;pointer-events:none}.doka--root .doka--crop-resizer div{position:absolute;cursor:none;left:0;top:0;width:44px;height:44px;margin-left:-22px;margin-top:-22px;background:hsla(0,0%,100%,.85);border-radius:22px;box-shadow:0 2px 5px rgba(0,0,0,.5);pointer-events:all;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-backdrop-filter:var(--doka-effect--frost);backdrop-filter:var(--doka-effect--frost);opacity:0;transition:opacity .25s ease-out,visibility .25s ease-out}.doka--root .doka--crop-resizer[data-state=multi-touch]{visibility:visible;cursor:none;pointer-events:all}.doka--root .doka--crop-resizer[data-state=multi-touch] div{opacity:1}.doka--root .doka--crop-rotator{position:relative;height:3.5em;margin-top:-.5em;margin-bottom:.5em;z-index:2;pointer-events:all}.doka--root .doka--crop-rotator-center{left:50%;position:absolute;overflow:hidden;width:2em;top:.325em;height:1.5em;font-size:.75em;cursor:pointer;border:none;padding:0;margin:0 0 0 -1em;background:transparent;opacity:.3;z-index:2;color:inherit}.doka--root .doka--crop-rotator-center span{color:transparent}.doka--root .doka--crop-rotator-center:after{position:absolute;left:50%;height:.85em;border-radius:9999em;width:1.5px;color:inherit;background:currentColor;transition:background-color .25s ease-in-out;margin-left:-.75px;top:50%;margin-top:-.55em;pointer-events:none;content:""}.doka--root .doka--crop-rotator-center:focus{outline:transparent;opacity:.7}.doka--root .doka--crop-rotator-bar{position:absolute;left:1em;right:1em;bottom:0;top:0;z-index:1;cursor:ew-resize;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.doka--root .doka--crop-rotator-line-mask{height:100%;overflow:hidden;max-width:30em;margin:0 auto}.doka--root[data-style-viewport*=x-cramped] .doka--crop-rotator{margin-top:-.5em}.doka--root[data-style-viewport*=x-cramped] .doka--crop-rotator-line-mask{max-width:14em}.doka--root .doka--crop-rotator-line{pointer-events:none;height:100%}.doka--root .doka--crop-rotator-line svg{position:absolute;left:50%;margin-left:-500px;width:1000px;max-width:none}.doka--root .doka--crop-rotator-line text{font-weight:400;font-size:2px;opacity:.35}.doka--root .doka--crop-rotator-line circle{opacity:.4}.doka--root .doka--crop-rotator-line circle[r="0.5"]{opacity:.9}.doka--root .doka--crop-rotator:focus{outline:transparent}.doka--root .doka--crop-rotator:focus .doka--crop-rotator-line circle,.doka--root .doka--crop-rotator:focus .doka--crop-rotator-line text{fill:currentColor}@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))) and (mix-blend-mode:screen){.doka--root .doka--crop-rotator-line-mask,.doka--root[data-style-viewport*=x-cramped] .doka--crop-rotator-line-mask{max-width:40em;margin:0 auto;-webkit-mask:linear-gradient(90deg,transparent 15%,#000 30%,#000 70%,transparent 85%);mask:linear-gradient(90deg,transparent 15%,#000 30%,#000 70%,transparent 85%)}}.doka--root .doka--crop-size{position:absolute;left:0;top:0;z-index:3;overflow:hidden;color:rgba(0,0,0,.85);color:var(--doka-size-indicator--color);background:hsla(0,0%,100%,.95);background:var(--doka-size-indicator--background);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-backdrop-filter:var(--doka-effect--frost);backdrop-filter:var(--doka-effect--frost);border-radius:.25em;border-radius:var(--doka-size-indicator--radius);line-height:1;white-space:nowrap;transition:background-color .25s ease-in-out,color .25s ease-in-out;transform-origin:center center;display:flex;align-items:center;pointer-events:none;font-variant-numeric:tabular-nums;-webkit-font-feature-settings:"tnum";font-feature-settings:"tnum";font-family:Tahoma,Geneva,Verdana,sans-serif}.doka--root .doka--crop-size-info{font-size:.6875em;padding:.35em .625em;will-change:transform}.doka--root .doka--crop-resize-percentage{padding-right:.4375em;margin-right:-.25em;border-right:1px solid rgba(0,0,0,.15);border-right:1px solid var(--doka-size-indicator--edge)}.doka--root .doka--crop-resize-percentage:empty{display:none}.doka--root .doka--crop-size-multiply{opacity:.75;margin:0 .175em}.doka--root[data-style-viewport*=x-cramped] .doka--crop-size-info{font-size:.5em;padding:.5em .875em}.doka--root[data-style-viewport*=x-cramped] .doka--crop-resize-percentage{padding-right:.4em}.doka--root .doka--crop-subject{position:relative;flex:1 0 auto;margin:.25em 1.5em 1.5em;contain:layout size style}.doka--root[data-style-viewport*=x-cramped] .doka--crop-subject{margin:0 2em 1em}.doka--root .doka--zoom-wrapper{position:relative;z-index:2;pointer-events:all}.doka--root .doka--button-zoom{position:absolute;z-index:2;left:-1.25em;top:-1.25em}.doka--root .doka--dropdown,.doka--root .doka--view-stack .doka--crop{display:flex;flex-direction:column}.doka--root .doka--dropdown{position:relative;justify-content:center}.doka--root .doka--dropdown>.doka--button{height:100%}.doka--root .doka--dropdown-list{position:absolute;z-index:3;padding:0;top:100%;margin:-.125em 0 0;min-width:100%;display:flex;flex-direction:column;border-radius:.1625em;background-color:hsla(0,0%,100%,.85);background-color:var(--doka-component-alt--background);box-shadow:0 .75em 1em -.75em rgba(0,0,0,.4),0 1em 2em 0 rgba(0,0,0,.05);box-shadow:var(--doka-component-alt--shadow)}.doka--root .doka--dropdown-list .doka--button{position:static;width:auto;height:auto;margin:0;padding:0;font-family:inherit;font-size:1em;outline:transparent;pointer-events:inherit;display:flex;align-items:center;white-space:nowrap;border:none;line-height:2.5;margin:3px;padding:0 .75em 0 .5em;border-radius:.125em;color:rgba(0,0,0,.85);color:var(--doka-component-alt--color);background-color:transparent;transform:none}.doka--root .doka--dropdown-list .doka--button span{font-size:.875em;text-align:left;flex:1}.doka--root .doka--dropdown-list .doka--button svg+span{margin-left:.5em}.doka--root .doka--dropdown-list .doka--button svg{display:inline-block;margin:0}.doka--root .doka--dropdown-list .doka--button:active,.doka--root .doka--dropdown-list .doka--button:focus,.doka--root .doka--dropdown-list .doka--button:hover{background-color:rgba(0,0,0,.1);background-color:var(--doka-dropdown-hover--background)}.doka--root .doka--dropdown-list .doka--button:active:hover,.doka--root .doka--dropdown-list .doka--button:focus:hover{background-color:rgba(0,0,0,.15);background-color:var(--doka-dropdown-hover-active--background)}.doka--root .doka--dropdown-list .doka--button:active{transform:none}.doka--root .doka--dropdown-list .doka--button:first-child,.doka--root .doka--dropdown-list .doka--button:last-child{border-radius:inherit}.doka--root .doka--dropdown-list .doka--button:first-child{border-bottom-right-radius:0;border-bottom-left-radius:0}.doka--root .doka--dropdown-list .doka--button:last-child{border-top-right-radius:0;border-top-left-radius:0}.doka--root .doka--dropdown-list .doka--button+.doka--button{margin-top:-2px}.doka--root .doka--dropdown-list [aria-selected=true]{color:hsla(0,0%,100%,.9);color:var(--doka-dropdown-selected--color);background-color:rgba(0,0,0,.9);background-color:var(--doka-dropdown-selected--background)}.doka--root .doka--dropdown-list [aria-selected=true]:active,.doka--root .doka--dropdown-list [aria-selected=true]:focus,.doka--root .doka--dropdown-list [aria-selected=true]:hover{background-color:rgba(0,0,0,.8);background-color:var(--doka-dropdown-selected-hover--background)}.doka--root .doka--dropdown-list [aria-selected=true]:active:hover,.doka--root .doka--dropdown-list [aria-selected=true]:focus:hover{background-color:rgba(0,0,0,.6);background-color:var(--doka-dropdown-selected-active-hover--background)}@supports ((-webkit-backdrop-filter:var(--doka-effect--frost)) or (backdrop-filter:var(--doka-effect--frost))){.doka--root .doka--dropdown-list{background-color:hsla(0,0%,100%,.6);background-color:var(--doka-component-alt-effect--background);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-backdrop-filter:var(--doka-effect--frost);backdrop-filter:var(--doka-effect--frost)}}.doka--root[data-style-viewport*=x-cramped] .doka--dropdown{position:static}.doka--root[data-style-viewport*=x-cramped] .doka--dropdown-list{position:absolute;min-width:auto;top:3em;left:3em;right:3em;max-width:15em;margin:0 auto}@media (-ms-high-contrast:none){.doka--root .doka--dropdown-list,::-ms-backdrop{min-width:10em}}.doka--root .doka--edit-status{position:absolute;left:0;top:0;right:0;bottom:0;z-index:100;contain:strict;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .25s ease-out;background:hsla(0,0%,100%,.1);background:var(--doka-status--background)}.doka--root .doka--edit-status .doka--status-bubble{position:absolute;left:0;right:0;text-align:center}.doka--root .doka--edit-status[data-view-status=busy]{pointer-events:all;opacity:1}.doka--root .doka--edit-status:empty{display:none}.doka--root .doka--editor{height:100%;width:100%;flex:1 0 auto;max-width:80em;max-width:var(--doka-editor--max-width);max-height:60em;max-height:var(--doka-editor--max-height);opacity:0}.doka--root .doka--filter-list{display:inline-flex;align-items:flex-start;list-style:none;margin:0;padding:0}.doka--root .doka--filter-list li{margin:.25em .5em;padding:0}.doka--root .doka--filter-list li:first-child{margin-left:0}.doka--root .doka--filter-list li:last-child{margin-right:0}@media (-ms-high-contrast:none){.doka--root .doka--filter-list li,::-ms-backdrop{flex:none;width:4em}}.doka--root .doka--filter-tile.doka--filter-tile{position:relative;border-radius:0;border-radius:var(--doka-filter-tile--radius)}.doka--root .doka--filter-tile.doka--filter-tile:before{display:block;padding-top:100%;content:"";height:0}.doka--root .doka--filter-tile.doka--filter-tile[style*="transform:translate3d(0px, 0px, 0)"]{transform:none!important}.doka--root .doka--filter-tile.doka--filter-tile div,.doka--root .doka--filter-tile.doka--filter-tile label{transition:box-shadow .125s ease-out,color .125s ease-out}.doka--root .doka--filter-tile.doka--filter-tile label{position:absolute;color:hsla(0,0%,100%,.9);color:var(--doka-component--color);text-align:center;font-size:.6875em;top:calc(100% + .5em);width:100%;left:0;padding:0}.doka--root .doka--filter-tile.doka--filter-tile>div{margin-bottom:.5em;z-index:2;border-radius:0;border-radius:var(--doka-filter-tile--radius);overflow:hidden;box-shadow:0 0 .75em rgba(0,0,0,.1);pointer-events:none}.doka--root .doka--filter-tile.doka--filter-tile>div canvas{z-index:1}.doka--root .doka--filter-tile.doka--filter-tile>div div{z-index:2}.doka--root .doka--filter-tile.doka--filter-tile canvas,.doka--root .doka--filter-tile.doka--filter-tile div,.doka--root .doka--filter-tile.doka--filter-tile input{position:absolute;left:0;top:0;width:100%;height:100%;min-width:auto;min-height:auto;font-size:1em}.doka--root .doka--filter-tile.doka--filter-tile input{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;left:0;top:0;margin:0;padding:0;border-radius:0;opacity:0;outline:transparent;pointer-events:all}.doka--root .doka--filter-tile.doka--filter-tile input:checked~label{color:#ffd843;color:var(--doka-filter-tile-selected--color)}.doka--root .doka--filter-tile.doka--filter-tile input:checked~div{box-shadow:0 .5px 0 1px rgba(0,0,0,.2),0 0 0 4px #ffd843;box-shadow:0 .5px 0 1px rgba(0,0,0,.2),0 0 0 4px var(--doka-filter-tile-selected--color)}.doka--root .doka--filter-tile.doka--filter-tile input:focus~label{color:#ffd843;color:var(--doka-filter-tile-selected--color)}.doka--root .doka--filter{height:calc(100% - 3em);width:calc(100% - 2em);left:1em;top:1em}.doka--root .doka--filter .doka--filter-list{padding-bottom:1.5em}.doka--root .doka--filter-list{padding:0 2em}.doka--root .doka--filter-tile{flex:none;width:4em;scroll-snap-align:start}.doka--root[data-style-viewport*=x-cramped] .doka--filter-tile{width:2.875em}.doka--root[data-style-viewport*=x-cramped] .doka--filter{display:flex;flex-direction:column-reverse;top:2em}.doka--root[data-style-viewport*=x-cramped] .doka--filter .doka--filter-list{padding:0 1em;height:5em}.doka--root .doka--image-gl{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.doka--root .doka--image-gl canvas{position:absolute;left:0;top:0;color:#fff;color:var(--doka-editor-outline--color);background:rgba(0,0,0,.99);background:var(--doka-editor--background-color);max-width:none}.doka--root .doka--image-gl[tabindex="0"] canvas{pointer-events:all;cursor:move}.doka--root .doka--image-gl:after{content:"";transition:opacity .15s ease-in-out;opacity:0;position:absolute;left:calc(50% - 1.3em);top:calc(50% - 1.3em);width:2.75em;height:2.75em;pointer-events:none;border-radius:9999em;background-position:50%;background-repeat:no-repeat;background-size:2em;background-color:rgba(0,0,0,.5);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd' stroke='rgba(255,255,255,.9)' stroke-width='1.5'%3E%3Crect x='8.5' y='3.5' width='7' height='7' rx='2'/%3E%3Crect x='1.5' y='10.5' width='7' height='7' rx='2'/%3E%3Crect x='8.5' y='10.5' width='7' height='7' rx='2'/%3E%3Crect x='15.5' y='10.5' width='7' height='7' rx='2'/%3E%3C/g%3E%3C/svg%3E")}.doka--root .doka--image-gl[data-show-interaction-indicator=true]:focus:after{opacity:1}.doka--root .doka--button-destroy-shape{position:absolute;left:0;top:0;z-index:2;margin:0;border:none;font-family:inherit;outline:transparent;width:auto;height:auto;display:flex;align-items:center;justify-content:center;line-height:2.5;font-weight:500;transition:background-color .25s ease-out,color .25s ease-out;border-radius:9999em;padding:0 1em;font-size:.75em;opacity:0;color:rgba(0,0,0,.85);color:var(--doka-button-zoom--color);background-color:hsla(0,0%,100%,.85);background-color:var(--doka-button-zoom--background)}.doka--root .doka--button-destroy-shape span{pointer-events:none}.doka--root .doka--button-destroy-shape:focus,.doka--root .doka--button-destroy-shape:hover{background-color:hsla(0,0%,100%,.95);background-color:var(--doka-button-zoom-hover--background)}.doka--root .doka--button-destroy-shape[data-active=true]{opacity:1!important}.doka--root .doka--button-destroy-shape[data-active=false]{opacity:0!important;pointer-events:none;transition:none}@supports ((-webkit-backdrop-filter:var(--doka-effect--frost)) or (backdrop-filter:var(--doka-effect--frost))){.doka--root .doka--button-destroy-shape{background-color:hsla(0,0%,100%,.6);background-color:var(--doka-button-zoom-effect--background);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-backdrop-filter:var(--doka-effect--frost);backdrop-filter:var(--doka-effect--frost)}.doka--root .doka--button-destroy-shape:focus,.doka--root .doka--button-destroy-shape:hover{background-color:hsla(0,0%,100%,.75);background-color:var(--doka-button-zoom-effect-hover--background)}}.doka--root .doka--image-markup,.doka--root .doka--image-markup-clip{position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden}.doka--root .doka--image-markup-clip{contain:strict}.doka--root .doka--image-markup{pointer-events:all}.doka--root .doka--image-markup svg{display:block;contain:strict;height:100%;width:100%}.doka--root .doka--image-markup[data-active=false]{pointer-events:none}.doka--root .doka--image-markup[data-util=draw] svg{cursor:crosshair}.doka--root .doka--image-markup[data-util=draw] .doka--shape-group{pointer-events:none}.doka--root .doka--image-markup text{white-space:pre}.doka--root .doka--image-markup image{transition:opacity .25s ease-in-out}.doka--root .doka--image-markup input{background:transparent;position:absolute;left:0;top:0;line-height:1!important;text-align:left!important;text-indent:0!important;border:0!important;margin:0!important;padding:0!important;box-shadow:none!important;pointer-events:none;outline:none;color:#fff;z-index:1}.doka--root .doka--image-markup input::-ms-clear{display:none}.doka--root .doka--image-markup input:focus{pointer-events:all}.doka--root .doka--image-markup input[hidden]{display:none}.doka--root .doka--image-markup[data-active=true]{pointer-events:all!important}.doka--root .doka--manipulator-group{pointer-events:none}.doka--root .doka--manipulator-group .doka--hitbox{pointer-events:all}.doka--root .doka--manipulator-group circle:not(.doka--hitbox){fill:#2990ff;fill:var(--doka-markup-manipulator--fill);stroke:#fff;stroke:var(--doka-markup-manipulator--stroke);stroke-width:2;r:6}.doka--root .doka--manipulator-group path,.doka--root .doka--manipulator-group rect{stroke-width:1.5;stroke:hsla(0,0%,100%,.75);stroke:var(--doka-markup-manipulator--line)}.doka--root .doka--manipulator-group[is-bright-color=true] path{stroke:rgba(0,0,0,.75);stroke:var(--doka-markup-manipulator--line-inverted)}.doka--root .doka--image{pointer-events:none}.doka--root[data-style-layout-mode~=fullscreen]{position:fixed;left:0;top:0;right:0;bottom:0;z-index:2147483647;opacity:0}.doka--root[data-style-layout-mode~=fullscreen]:focus{outline:transparent}.doka--root[data-style-layout-mode~=fullscreen] .doka--edit-status{position:fixed}.doka--root[data-style-layout-mode~=fullscreen][data-style-fullscreen-safe-area=bottom][data-style-fullscreen=true]{padding-bottom:40px;box-sizing:border-box}@media (min-height:635px){.doka--root[data-style-layout-mode~=fullscreen][data-style-fullscreen-safe-area=bottom][data-style-fullscreen=true]{padding-bottom:80px}}.doka--parent::-webkit-scrollbar{background-color:rgba(0,0,0,.85);background-color:var(--doka-scrollbar-rail--color)}.doka--parent::-webkit-scrollbar-track{background:transparent}.doka--parent::-webkit-scrollbar-thumb{background:rgba(0,0,0,.75);background:var(--doka-scrollbar-thumb--color);border-radius:9999rem;border:3px solid rgba(0,0,0,.85);border:3px solid var(--doka-scrollbar-rail--color)}@media (min-width:56rem) and (min-height:40rem){.doka--root[data-style-layout-mode~=modal]{background:rgba(0,0,0,.8);background:var(--doka-modal--overlay);transition:background-color .25s ease-in-out}.doka--root[data-style-layout-mode~=modal]:before{content:none}.doka--root[data-style-layout-mode~=modal] .doka--editor{position:relative;overflow:hidden;background:#000;background:var(--doka-modal--background);box-shadow:0 1em 4em rgba(0,0,0,.25),0 .5em 2em rgba(0,0,0,.25);box-shadow:var(--doka-modal--shadow);transition:background-color .25s ease-in-out;width:70vw;width:var(--doka-modal--width);height:80vh;height:var(--doka-modal--height);max-width:56rem;max-width:var(--doka-modal--max-width);max-height:40rem;max-height:var(--doka-modal--max-height)}.doka--root[data-style-layout-mode~=modal] .doka--edit-status{position:absolute}}.doka--root[data-style-layout-mode~=preview]{background:transparent}.doka--root[data-style-layout-mode~=preview]:before{content:none}.doka--root[data-style-layout-mode~=preview] .doka--content{position:relative;z-index:1}.doka--root[data-style-layout-mode~=preview] .doka--editor{max-width:none;max-height:none}.doka--root[data-style-layout-mode~=preview] .doka--image-outline,.doka--root[data-style-layout-mode~=preview] .doka--utils{display:none}.doka--root[data-style-layout-mode~=preview] .doka--menu{position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none!important}.doka--root[data-style-layout-mode~=preview] .doka--menu .doka--button{pointer-events:all}.doka--root[data-style-layout-mode~=preview] .doka--button,.doka--root[data-style-layout-mode~=preview] .doka--crop-rotator{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-backdrop-filter:var(--doka-effect--frost);backdrop-filter:var(--doka-effect--frost);box-shadow:0 .125em .5em rgba(0,0,0,.325)}.doka--root[data-style-layout-mode~=preview] .doka--button-app:not(.doka--button-action-confirm){background-color:rgba(0,0,0,.8);background-color:var(--doka-component--background-dark)}.doka--root[data-style-layout-mode~=preview] .doka--button-app:not(.doka--button-action-confirm):focus,.doka--root[data-style-layout-mode~=preview] .doka--button-app:not(.doka--button-action-confirm):hover{background-color:rgba(0,0,0,.9);background-color:var(--doka-component--background-darker)}.doka--root[data-style-layout-mode~=preview] .doka--processing-indicator p{color:hsla(0,0%,100%,.9);color:var(--doka-editor--color);background-color:rgba(0,0,0,.8);background-color:var(--doka-component--background-dark)}.doka--root[data-style-layout-mode~=preview][data-style-viewport*=x-cramped] .doka--processing-indicator{bottom:0}.doka--root[data-style-layout-mode~=preview] .doka--toolbar{position:absolute;left:0;right:0;margin:0!important;z-index:3}.doka--root[data-style-layout-mode~=preview] .doka--toolbar .doka--button-tool{background-color:rgba(0,0,0,.8);background-color:var(--doka-component--background-dark);border-radius:.25em}.doka--root[data-style-layout-mode~=preview] .doka--toolbar .doka--button-tool:focus,.doka--root[data-style-layout-mode~=preview] .doka--toolbar .doka--button-tool:hover{background-color:rgba(0,0,0,.9);background-color:var(--doka-component--background-darker)}.doka--root[data-style-layout-mode~=preview] .doka--crop-rect{mix-blend-mode:difference;height:100%;pointer-events:none;-webkit-mask:radial-gradient(ellipse closest-side,#000,transparent);mask:radial-gradient(ellipse closest-side,#000,transparent)}.doka--root[data-style-layout-mode~=preview] .doka--crop-rotator{position:absolute;bottom:0;left:12rem;right:12rem;border-radius:9999rem;background-color:rgba(0,0,0,.8);background-color:var(--doka-component--background-dark)}.doka--root[data-style-layout-mode~=preview] .doka--crop-size{transform:none!important;right:1em;top:1em;left:auto}.doka--root[data-style-layout-mode~=preview] .doka--crop-rotator-line-mask{max-width:100%}.doka--root[data-style-layout-mode~=preview] .doka--crop-subject{margin:0}.doka--root[data-style-layout-mode~=preview] .doka--image-container[style*="opacity:1"]~.doka--image-overlay{background-color:rgba(0,0,0,.9);background-color:var(--doka-component--background-darker);position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1}.doka--root[data-style-layout-mode~=preview][data-style-viewport~=x-cramped] .doka--crop-rotator{display:none}.doka--root[data-style-layout-mode~=preview][data-style-viewport~=x-spacious] .doka--crop-rotator{left:16rem;right:16rem}.doka--root[data-style-layout-mode~=preview] .doka--crop-rect-corner,.doka--root[data-style-layout-mode~=preview] .doka--crop-rect-edge{display:none}.doka--root .doka--menu{display:flex;box-sizing:border-box;flex-shrink:0;justify-content:space-between;align-items:center;z-index:2;position:relative;pointer-events:all!important;transition:background-color .125s ease-in-out,color .125s ease-in-out;overflow:hidden}.doka--root .doka--menu .doka--button-action-confirm{margin-left:auto}.doka--root:not([data-style-viewport~=x-cramped]) .doka--menu{height:4.75em;padding:0 1.25em}.doka--root:not([data-style-viewport~=x-cramped]) .doka--utils{position:absolute;top:0;bottom:0;left:5em;right:5em}.doka--root:not([data-style-viewport~=x-cramped]) .doka--button-action-cancel{margin-right:1em}.doka--root:not([data-style-viewport~=x-cramped]) .doka--button-action-reset{margin-right:auto}.doka--root[data-style-viewport~=flow-controls]:not([data-style-viewport~=x-cramped]) .doka--utils{left:12em;left:var(--doka-menu--offset);right:12em;right:var(--doka-menu--offset)}.doka--root[data-style-viewport~=x-cramped] .doka--menu{margin-top:-.75em;height:3.25em}.doka--root[data-style-viewport~=x-cramped] .doka--utils{position:absolute;left:3.25em;right:3.25em;top:0;bottom:0}.doka--root[data-style-viewport~=x-cramped] .doka--menu{overflow:hidden;margin:0 1em 1em;padding:0 .6125em;border-radius:9999em;background:hsla(0,0%,100%,.1);background:var(--doka-component--background-dim);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-backdrop-filter:var(--doka-effect--frost);backdrop-filter:var(--doka-effect--frost)}.doka--root[data-style-viewport~=x-cramped] .doka--button-action-reset{position:absolute;left:.75em;top:.6875em;width:2.5em;height:2.5em}.doka--root[data-view=resize] .doka--menu{background:rgba(0,0,0,.8)!important;background:var(--doka-component--background-dark)!important}.doka--root[data-style-viewport~=single-util][data-style-viewport~=no-flow-controls] .doka--button-action-reset{position:absolute;top:.3125em;left:calc(50% - 1.125em)}.doka--root .doka--range-input{display:block}.doka--root .doka--range-input button{position:absolute;top:calc(50% + .5em);height:1.325em;width:2em;bottom:100%;left:calc(50% - 1em);padding:0;margin:0;border:none;font-size:1em;overflow:hidden;color:transparent;background:transparent;outline:transparent}.doka--root .doka--range-input button:after{content:"";pointer-events:none;position:absolute;top:calc(50% - .5em);left:calc(50% - .06125em);width:.125em;height:.5em;background:hsla(0,0%,100%,.2);background:var(--doka-range-input-recenter--background);border-radius:.9999em;bottom:0}.doka--root .doka--range-input[data-centered=true] button:after{background:hsla(0,0%,100%,.2);background:var(--doka-range-input-centered--background)}.doka--root .doka--range-input input{-webkit-appearance:none;display:block;font-size:1em;width:100%;min-width:auto;min-height:auto;position:absolute;left:.5em;width:calc(100% - 1em);margin:0;padding:0;line-height:0;top:0;height:100%;background:transparent;border:none;border-radius:0}.doka--root .doka--range-input input::-webkit-slider-runnable-track{background:transparent}.doka--root .doka--range-input input::-webkit-slider-thumb{-webkit-appearance:none;line-height:0;margin:0;padding:0;border:none;width:.625em;height:.625em;border-radius:.9999em;transition:box-shadow .25s ease-in-out,background-color .25s ease-in-out;background:#fff;background:var(--doka-range-input-thumb--color)}.doka--root .doka--range-input input::-moz-range-thumb{line-height:0;margin:0;padding:0;border:none;width:.625em;height:.625em;border-radius:.9999em;transition:box-shadow .25s ease-in-out,background-color .25s ease-in-out;background:#fff;background:var(--doka-range-input-thumb--color)}.doka--root .doka--range-input input::-ms-thumb{line-height:0;margin:0;padding:0;border:none;width:.625em;height:.625em;border-radius:.9999em;transition:box-shadow .25s ease-in-out,background-color .25s ease-in-out;background:#fff}.doka--root .doka--range-input input::-ms-ticks-before,.doka--root .doka--range-input input::-ms-tooltip{display:none}.doka--root .doka--range-input input::-ms-ticks-after{display:none}.doka--root .doka--range-input input::-ms-track{color:transparent;border:none;background:transparent}.doka--root .doka--range-input input::-ms-fill-lower,.doka--root .doka--range-input input::-ms-fill-upper{background:transparent}.doka--root .doka--range-input input:focus{outline:transparent}.doka--root .doka--range-input input:focus::-moz-range-thumb{box-shadow:0 0 0 .5em hsla(0,0%,100%,.15);box-shadow:0 0 0 .5em var(--doka-range-input-thumb-hover--color)}.doka--root .doka--range-input input:focus::-webkit-slider-thumb{box-shadow:0 0 0 .5em hsla(0,0%,100%,.15);box-shadow:0 0 0 .5em var(--doka-range-input-thumb-hover--color)}.doka--root .doka--range-input span:hover input::-moz-range-thumb{box-shadow:0 0 0 .5em hsla(0,0%,100%,.15);box-shadow:0 0 0 .5em var(--doka-range-input-thumb-hover--color)}.doka--root .doka--range-input span:hover input::-webkit-slider-thumb{box-shadow:0 0 0 .5em hsla(0,0%,100%,.15);box-shadow:0 0 0 .5em var(--doka-range-input-thumb-hover--color)}.doka--root .doka--range-input-inner{display:block;position:relative;flex:1;min-height:2em}.doka--root .doka--range-input-inner:after{content:"";position:absolute;left:.5em;right:.5em;top:calc(50% - .125em);height:.25em;background-color:hsla(0,0%,100%,.2);background-color:var(--doka-range-input--background);transition:background-color .25s ease-in-out;border-radius:.9999em}.doka--root .doka--resize-form{box-sizing:content-box;display:flex;align-items:center;justify-content:center;pointer-events:all;padding:1em 0;margin:0;height:2.5em}.doka--root .doka--resize-form fieldset,.doka--root .doka--resize-form legend{border:none;padding:0;margin:0}.doka--root .doka--resize-form legend{position:absolute;width:1px;height:1px;opacity:0}.doka--root .doka--resize-form fieldset{margin:0;padding:0;flex:1 0 auto;max-width:17em}.doka--root .doka--resize-form .doka--size-input{margin:0;width:calc(50% - 1.125em)}.doka--root .doka--resize-form .doka--checkable{margin:0 .325em;vertical-align:bottom}.doka--root .doka--resize-form .doka--checkable label{padding:.3125em 0}.doka--root .doka--resize-form button{margin-right:-3.25em;margin-left:1em;font-size:.875em}.doka--root .doka--resize-form button svg{width:1.25em;height:1.25em}.doka--root[data-view=resize] .doka--resize-form{background-color:rgba(0,0,0,.8);background-color:var(--doka-component--background-dark)}.doka--root[data-style-viewport~=flow-controls][data-style-viewport~=single-util]:not([data-style-viewport~=x-cramped]) .doka--resize-form{margin-top:-4.5em;background:none}.doka--root[data-style-viewport*=touch] .doka--resize-form button{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden}.doka--root .doka--view-stack .doka--resize{height:calc(100% - 1em)!important}.doka--root .doka--size-input{position:relative;display:inline-flex;cursor:text}.doka--root .doka--size-input input::-webkit-inner-spin-button,.doka--root .doka--size-input input::-webkit-outer-spin-button{-webkit-appearance:none}.doka--root .doka--size-input input::-ms-clear{display:none}.doka--root .doka--size-input input,.doka--root .doka--size-input label{padding:.625em .5em;text-indent:.25em;font-size:.875em;font-weight:400;line-height:inherit;cursor:inherit}.doka--root .doka--size-input label{pointer-events:none;position:absolute;right:0;cursor:text;flex:1;white-space:nowrap;text-align:right;padding-left:0;padding-right:.75em;color:hsla(0,0%,100%,.9);color:var(--doka-editor--color)}.doka--root .doka--size-input input{-webkit-appearance:none;appearance:none;-moz-appearance:textfield;margin:0;min-height:0;min-width:7em;height:auto;width:100%;font-variant-numeric:tabular-nums;outline:transparent;border-radius:.5em;box-shadow:none;border:none;color:hsla(0,0%,100%,.9);color:var(--doka-editor--color);background-color:hsla(0,0%,100%,.15);background-color:var(--doka-component--background);transition:background-color .1s ease-in-out,color .1s ease-in-out}.doka--root .doka--size-input input:focus{transition:inherit;border:inherit;background-color:inherit;box-shadow:0 0 0 2px currentColor}.doka--root .doka--size-input input::-webkit-input-placeholder{color:hsla(0,0%,100%,.3)!important;color:var(--doka-editor--color-dim)!important}.doka--root .doka--size-input input::-moz-placeholder{color:hsla(0,0%,100%,.3)!important;color:var(--doka-editor--color-dim)!important}.doka--root .doka--size-input input::-ms-input-placeholder{color:hsla(0,0%,100%,.3)!important;color:var(--doka-editor--color-dim)!important}.doka--root .doka--size-input input::placeholder{color:hsla(0,0%,100%,.3)!important;color:var(--doka-editor--color-dim)!important}.doka--root .doka--size-input input:-ms-input-placeholder{color:hsla(0,0%,100%,.3)!important;color:var(--doka-editor--color-dim)!important}@supports ((-webkit-backdrop-filter:var(--doka-effect--frost)) or (backdrop-filter:var(--doka-effect--frost))){.doka--root .doka--size-input input{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-backdrop-filter:var(--doka-effect--frost);backdrop-filter:var(--doka-effect--frost)}}
|
|
71
71
|
|
|
72
72
|
|
|
73
|
-
.doka--root{box-sizing:content-box;position:relative;overflow:hidden;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;height:100%;width:100%;line-height:normal;font-size:16px;font-size:var(--doka-font-size);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-family:var(--doka-font-family);font-weight:450;text-align:left;text-rendering:optimizeLegibility;direction:ltr;display:flex;justify-content:center;align-items:center;color:hsla(0,0%,100%,.9);color:var(--doka-editor--color);background:rgba(0,0,0,.99);background:var(--doka-editor--background-color);contain:strict;transition:background-color .25s ease-in-out,color .25s ease-in-out}.doka--root:before{content:"";position:absolute;left:0;top:0;right:0;bottom:0;z-index:-1;background:radial-gradient(ellipse at center,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,0) 80%);background:radial-gradient(ellipse at center,var(--doka-editor--background-ellipse-inner-color) 0,var(--doka-editor--background-ellipse-outer-color) 80%)}.doka--root label{margin:0!important}.doka--root label:after,.doka--root label:before{content:none!important}.doka--root .doka--markup{display:flex;flex-direction:column}.doka--root .doka--markup .doka--toolbar{display:inline-flex;margin:0 auto;padding:1.25em 0}.doka--root .doka--markup-utils.doka--markup-utils{border:none;padding:0}.doka--root .doka--markup-utils.doka--markup-utils ul{list-style:none;margin:0;padding:0;display:flex}.doka--root .doka--markup-utils.doka--markup-utils li{margin:0 .75em}.doka--root .doka--markup-utils.doka--markup-utils input{display:none}.doka--root .doka--markup-utils.doka--markup-utils label{display:flex;align-items:center;pointer-events:all;padding:0 .75em 0 .5em;line-height:inherit;margin:0;height:2.5em;color:hsla(0,0%,100%,.9);color:var(--doka-button--color)}.doka--root .doka--markup-utils.doka--markup-utils input:checked+label{color:#ffd843;color:var(--doka-filter-tile-selected--color)}.doka--root .doka--toolbar[data-layout=compact] .doka--markup-utils li{margin:0 .3125em}.doka--root .doka--markup-tools{box-sizing:content-box;display:flex;flex-wrap:wrap;margin:auto 1em 0;padding:.3125em 0 .75em;justify-content:center;align-items:flex-end;max-height:3em;min-height:2.0625em}.doka--root .doka--markup-tools[data-active=true]{pointer-events:all!important}.doka--root .doka--markup-tools .doka--button span{text-align:left}.doka--root .doka--markup-tools .doka--dropdown>.doka--button{color:hsla(0,0%,100%,.9);color:var(--doka-button--color);background-color:hsla(0,0%,100%,.15);background-color:var(--doka-button--background);border-radius:9999em;line-height:1.75em;margin:0 .25em;font-size:.925em}.doka--root .doka--markup-tools .doka--dropdown>.doka--button>span{margin-left:.3125em}.doka--root .doka--markup-tools .doka--dropdown{margin-top:.5em}.doka--root .doka--markup-tools [data-active=false]>.doka--button{display:none}.doka--root .doka--markup-tools .doka--markup-color{margin-top:-.875em}.doka--root .doka--markup-tools .doka--markup-color[data-active=false]{display:none}.doka--root .doka--markup-color.doka--markup-color{display:flex;justify-content:center}.doka--root .doka--markup-color.doka--markup-color,.doka--root .doka--markup-color.doka--markup-color ul{list-style:none;margin:0;padding:0}.doka--root .doka--markup-color.doka--markup-color ul{display:flex;justify-content:center}.doka--root .doka--markup-color.doka--markup-color li{padding:0;margin:0 .125em}.doka--root .doka--markup-color.doka--markup-color li input{display:none}.doka--root .doka--markup-color.doka--markup-color label{display:block;overflow:hidden;color:transparent;width:1.5em;height:1.5em;margin:0;padding:0;font-weight:400;line-height:inherit;border-radius:9999em;transition:box-shadow .125s ease-out;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);cursor:inherit}.doka--root .doka--markup-color.doka--markup-color .doka--color-input input[data-selected=true]+label,.doka--root .doka--markup-color.doka--markup-color input:checked+label{box-shadow:inset 0 0 0 2px rgba(0,0,0,.5),0 0 0 2px #fff}.doka--root .doka--markup-color.doka--markup-color .doka--color-input{margin:0 .125em}.doka--root .doka--color-input{position:relative;display:flex;align-items:center;justify-content:center;width:1.5em;height:1.5em;border-radius:9999em;color:hsla(0,0%,100%,.9);color:var(--doka-button--color);background-color:hsla(0,0%,100%,.15);background-color:var(--doka-button--background)}.doka--root .doka--color-input label{overflow:hidden;background-image:radial-gradient(hsla(0,0%,100%,.3) 33%,hsla(0,0%,100%,0) 36%),url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23FECD09' d='M12 0h12v24H12z'/%3E%3Cpath fill='%2366AF01' d='M0 12h24v12H0z'/%3E%3Cpath fill='%237300CD' d='M0 0h12v24H0z'/%3E%3Cpath fill='%23E12224' d='M0 0h12v12H0z'/%3E%3Cpath fill='%23FF7D00' d='M12 12L24 0H12z'/%3E%3Cpath fill='%23B400AA' d='M0 12V0l12 12z'/%3E%3Cpath fill='%23039695' d='M12 24h12L12 12z'/%3E%3Cpath fill='%23465FCD' d='M12 24H0l12-12z'/%3E%3C/g%3E%3C/svg%3E")}.doka--root .doka--color-input input{position:absolute;opacity:0;-webkit-appearance:none;border:0;padding:0;margin:0;left:0;top:0;width:100%;height:100%;font-size:1em;min-width:0;min-height:0}.doka--root .doka--color-input span{position:absolute;pointer-events:none}.doka--root .doka--color-input .doka--color-visualizer{opacity:0;width:.375em;height:.375em;border-radius:1em;box-shadow:0 0 1px 1px #fff,0 0 0 1.5px rgba(0,0,0,.7);z-index:1}.doka--root .doka--color-input .doka--color-visualizer[style]{opacity:1}.doka--root .doka--color-input .doka--color-brightness{width:100%;height:100%;left:0;top:0;border-radius:9999em;background:#000;box-shadow:inset 0 0 .75em hsla(0,0%,100%,.25),0 0 1px #000;opacity:0}.doka--root[data-style-viewport~=x-cramped] .doka--markup-color{width:100%}.doka--root .doka--scroller{-webkit-overflow-scrolling:touch;overscroll-behavior-x:none;touch-action:pan-x;text-align:center;pointer-events:all;width:40em;margin:0 auto 1em;max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scrollbar-color:hsla(0,0%,100%,.2) transparent;scrollbar-color:var(--doka-scroller-thumb--color) transparent}@supports (-ms-ime-align:auto){.doka--root .doka--scroller{overflow-x:hidden}}.doka--root .doka--scroller[data-drag-state=dragging] button,.doka--root .doka--scroller[data-drag-state=dragging] input{pointer-events:none!important}.doka--root .doka--scroller::-webkit-scrollbar{height:.375em;background-color:transparent;background-color:var(--doka-scroller-rail--color)}.doka--root .doka--scroller::-webkit-scrollbar-track{background:transparent}.doka--root .doka--scroller::-webkit-scrollbar-thumb{background-color:transparent;border-radius:9999rem;border:3px solid transparent;border:3px solid var(--doka-scroller-rail--color);transition:background-color .25s ease-in-out}@media (pointer:fine) and (hover:hover){.doka--root .doka--scroller:hover{scrollbar-width:thin}.doka--root .doka--scroller:hover::-webkit-scrollbar-thumb{background-color:hsla(0,0%,100%,.2);background-color:var(--doka-scroller-thumb--color)}}.doka--root[data-style-viewport*=x-cramped] .doka--filter-scroller{-ms-scroll-snap-type:proximity;scroll-snap-type:proximity;-ms-scroll-snap-type:x proximity;scroll-snap-type:x proximity;scroll-padding:2em;margin-bottom:0}.doka--root .doka--scroller{scrollbar-base-color:#111;scrollbar-face-color:#333;scrollbar-3dlight-color:#111;scrollbar-highlight-color:#111;scrollbar-track-color:#111;scrollbar-arrow-color:#111;scrollbar-shadow-color:#111}@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))) and (mix-blend-mode:screen){.doka--root .doka--scroller{margin:0 auto 1em;-webkit-mask:linear-gradient(90deg,transparent 0,#000 2em,#000 calc(100% - 2em),transparent),linear-gradient(0deg,#000 8px,transparent 0);mask:linear-gradient(90deg,transparent 0,#000 2em,#000 calc(100% - 2em),transparent),linear-gradient(0deg,#000 8px,transparent 0)}.doka--root[data-style-viewport*=x-cramped] .doka--scroller{-webkit-mask:linear-gradient(90deg,transparent 0,#000 1em,#000 calc(100% - 1em),transparent);mask:linear-gradient(90deg,transparent 0,#000 1em,#000 calc(100% - 1em),transparent)}}.doka--root .doka--sticker{height:calc(100% - 3em);width:calc(100% - 2em);left:1em;top:1em}.doka--root .doka--sticker-list{display:inline-flex;align-items:flex-start;list-style:none;margin:0;padding:0 2em .5em}.doka--root .doka--sticker-list li{margin:.25em .3125em;padding:0}.doka--root .doka--sticker-list li:first-child{margin-left:0}.doka--root .doka--sticker-list li:last-child{margin-right:0}.doka--root .doka--sticker-list button{background-color:hsla(0,0%,100%,.1);background-color:var(--doka-component--background-dim);padding:.25em}.doka--root .doka--sticker-list img,.doka--root .doka--sticker-list svg{display:block;width:2em;height:2em;-o-object-fit:contain;object-fit:contain;pointer-events:none;border-radius:.25em}.doka--root .doka--sticker-list span{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}.doka--root[data-style-viewport*=x-cramped] .doka--sticker{display:flex;flex-direction:column-reverse;top:2em}.doka--root[data-style-viewport*=x-cramped] .doka--sticker .doka--sticker-list{padding:0 1em;height:3.5em}@media (-ms-high-contrast:none){.doka--root .doka--sticker-list li,::-ms-backdrop{flex:none;width:2.5em}}.doka--root .doka--status-progress{display:none;background-color:rgba(0,0,0,.2);background-color:var(--doka-status-bubble--color-dim);border-radius:50%;pointer-events:none}.doka--root .doka--status-bubble{pointer-events:none;will-change:transform;text-align:center}.doka--root .doka--status-bubble .doka--status-bubble-inner{position:relative;display:inline-block;color:rgba(0,0,0,.8);color:var(--doka-status-bubble--color);background-color:hsla(0,0%,100%,.75);background-color:var(--doka-status-bubble--background);box-shadow:0 .125em 1em rgba(0,0,0,.2);box-shadow:var(--doka-status-bubble--shadow);transition:background-color .25s ease-in-out,color .25s ease-in-out;font-size:.875em;max-width:80%;margin:0 auto;border-radius:1em;line-height:1.5;text-align:center;padding:.1875em 1em .25em}.doka--root .doka--status-bubble p{display:inline;margin:0;padding:0}.doka--root .doka--status-bubble .doka--status-progress:not([data-value="0"]){position:absolute;display:block;right:.35em;top:.35em;width:1.25em;height:1.25em}.doka--root .doka--status-bubble .doka--status-progress:not([data-value="0"])+p,.doka--root .doka--status-bubble button+p{padding-right:1.5em}.doka--root .doka--status-bubble button{position:relative;z-index:1;margin:0;padding:0;border:none;font-family:inherit;font-size:1em;font-weight:400;outline:transparent;display:flex;justify-content:center;align-items:center;pointer-events:all;border-radius:9999em;width:18px;height:18px;color:hsla(0,0%,100%,.75);color:var(--doka-status-bubble--background);background-color:rgba(0,0,0,.8);background-color:var(--doka-status-bubble--color);position:absolute;right:.375em;top:.35em}.doka--root .doka--status-bubble button svg{width:.875em;height:.875em}.doka--root .doka--status-bubble button:after{content:"";position:absolute;left:-1em;right:-1em;top:-1em;bottom:-1em}@supports ((-webkit-backdrop-filter:var(--doka-effect--frost)) or (backdrop-filter:var(--doka-effect--frost))){.doka--root .doka--status-bubble-inner{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-backdrop-filter:var(--doka-effect--frost);backdrop-filter:var(--doka-effect--frost);background:hsla(0,0%,100%,.5);background:var(--doka-status-bubble-effect--background)}}.doka--root .doka--toolbar{z-index:3;flex-shrink:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:1.25em 0;pointer-events:none;margin:0 2em}.doka--root .doka--toolbar>*{pointer-events:all;margin:0 .75em;height:2.5em}.doka--root .doka--toolbar svg{display:inline-block;flex-shrink:0}.doka--root .doka--toolbar svg *{transition:opacity .25s ease-out,transform .5s ease-out}.doka--root .doka--toolbar .doka--button{white-space:nowrap;flex-shrink:0}.doka--root[data-style-viewport~=flow-controls][data-style-viewport~=single-util]:not([data-style-viewport~=x-cramped]) .doka--toolbar{margin:-4.875em 11em 0}.doka--root .doka--toolbar[data-layout=compact]>*{margin:0 .5em}.doka--root[data-style-viewport~=x-cramped] .doka--toolbar{padding:1em 0}.doka--root[data-style-viewport~=x-cramped] .doka--toolbar>*{margin:0 .25em}.doka--root .doka--utils{display:flex;justify-content:center;flex:1;padding:0;overflow:hidden}.doka--root .doka--utils>*{pointer-events:all}.doka--root .doka--utils>*+*{margin-left:1px}
|
|
73
|
+
.doka--root{box-sizing:content-box;position:relative;overflow:hidden;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;height:100%;width:100%;line-height:normal;font-size:16px;font-size:var(--doka-font-size);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-family:var(--doka-font-family);font-weight:450;text-align:left;text-rendering:optimizeLegibility;direction:ltr;display:flex;justify-content:center;align-items:center;color:hsla(0,0%,100%,.9);color:var(--doka-editor--color);background:rgba(0,0,0,.99);background:var(--doka-editor--background-color);contain:strict;transition:background-color .25s ease-in-out,color .25s ease-in-out}.doka--root:before{content:"";position:absolute;left:0;top:0;right:0;bottom:0;z-index:-1;background:radial-gradient(ellipse at center,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,0) 80%);background:radial-gradient(ellipse at center,var(--doka-editor--background-ellipse-inner-color) 0,var(--doka-editor--background-ellipse-outer-color) 80%)}.doka--root label{margin:0!important}.doka--root label:after,.doka--root label:before{content:none!important}.doka--root .doka--markup{display:flex;flex-direction:column}.doka--root .doka--markup .doka--toolbar{display:inline-flex;margin:0 auto;padding:1.25em 0}.doka--root .doka--markup-utils.doka--markup-utils{border:none;padding:0}.doka--root .doka--markup-utils.doka--markup-utils ul{list-style:none;margin:0;padding:0;display:flex}.doka--root .doka--markup-utils.doka--markup-utils li{margin:0 .75em}.doka--root .doka--markup-utils.doka--markup-utils input{display:none}.doka--root .doka--markup-utils.doka--markup-utils label{display:flex;align-items:center;pointer-events:all;padding:0 .75em 0 .5em;line-height:inherit;margin:0;height:2.5em;color:hsla(0,0%,100%,.9);color:var(--doka-button--color)}.doka--root .doka--markup-utils.doka--markup-utils input:checked+label{color:#ffd843;color:var(--doka-filter-tile-selected--color)}.doka--root .doka--toolbar[data-layout=compact] .doka--markup-utils li{margin:0 .3125em}.doka--root .doka--markup-tools{box-sizing:content-box;display:flex;flex-wrap:wrap;margin:auto 1em 0;padding:.3125em 0 .75em;justify-content:center;align-items:flex-end;max-height:3em;min-height:2.0625em}.doka--root .doka--markup-tools[data-active=true]{pointer-events:all!important}.doka--root .doka--markup-tools .doka--button span{text-align:left}.doka--root .doka--markup-tools .doka--dropdown>.doka--button{color:hsla(0,0%,100%,.9);color:var(--doka-button--color);background-color:hsla(0,0%,100%,.15);background-color:var(--doka-button--background);border-radius:9999em;line-height:1.75em;margin:0 .25em;font-size:.925em}.doka--root .doka--markup-tools .doka--dropdown>.doka--button>span{margin-left:.3125em}.doka--root .doka--markup-tools .doka--dropdown{margin-top:.5em}.doka--root .doka--markup-tools [data-active=false]>.doka--button{display:none}.doka--root .doka--markup-tools .doka--markup-color{margin-top:-.875em}.doka--root .doka--markup-tools .doka--markup-color[data-active=false]{display:none}.doka--root .doka--markup-color.doka--markup-color{display:flex;justify-content:center}.doka--root .doka--markup-color.doka--markup-color,.doka--root .doka--markup-color.doka--markup-color ul{list-style:none;margin:0;padding:0}.doka--root .doka--markup-color.doka--markup-color ul{display:flex;justify-content:center}.doka--root .doka--markup-color.doka--markup-color li{padding:0;margin:0 .125em}.doka--root .doka--markup-color.doka--markup-color li input{display:none}.doka--root .doka--markup-color.doka--markup-color label{display:block;overflow:hidden;color:transparent;width:1.5em;height:1.5em;margin:0;padding:0;font-weight:400;line-height:inherit;border-radius:9999em;transition:box-shadow .125s ease-out;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);cursor:inherit}.doka--root .doka--markup-color.doka--markup-color .doka--color-input input[data-selected=true]+label,.doka--root .doka--markup-color.doka--markup-color input:checked+label{box-shadow:inset 0 0 0 2px rgba(0,0,0,.5),0 0 0 2px #fff}.doka--root .doka--markup-color.doka--markup-color .doka--color-input{margin:0 .125em}.doka--root .doka--color-input{position:relative;display:flex;align-items:center;justify-content:center;width:1.5em;height:1.5em;border-radius:9999em;color:hsla(0,0%,100%,.9);color:var(--doka-button--color);background-color:hsla(0,0%,100%,.15);background-color:var(--doka-button--background)}.doka--root .doka--color-input label{overflow:hidden;background-image:radial-gradient(hsla(0,0%,100%,.3) 33%,hsla(0,0%,100%,0) 36%),url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23FECD09' d='M12 0h12v24H12z'/%3E%3Cpath fill='%2366AF01' d='M0 12h24v12H0z'/%3E%3Cpath fill='%237300CD' d='M0 0h12v24H0z'/%3E%3Cpath fill='%23E12224' d='M0 0h12v12H0z'/%3E%3Cpath fill='%23FF7D00' d='M12 12L24 0H12z'/%3E%3Cpath fill='%23B400AA' d='M0 12V0l12 12z'/%3E%3Cpath fill='%23039695' d='M12 24h12L12 12z'/%3E%3Cpath fill='%23465FCD' d='M12 24H0l12-12z'/%3E%3C/g%3E%3C/svg%3E")}.doka--root .doka--color-input input{position:absolute;opacity:0;-webkit-appearance:none;border:0;padding:0;margin:0;left:0;top:0;width:100%;height:100%;font-size:1em;min-width:0;min-height:0}.doka--root .doka--color-input span{position:absolute;pointer-events:none}.doka--root .doka--color-input .doka--color-visualizer{opacity:0;width:.375em;height:.375em;border-radius:1em;box-shadow:0 0 1px 1px #fff,0 0 0 1.5px rgba(0,0,0,.7);z-index:1}.doka--root .doka--color-input .doka--color-visualizer[style]{opacity:1}.doka--root .doka--color-input .doka--color-brightness{width:100%;height:100%;left:0;top:0;border-radius:9999em;background:#000;box-shadow:inset 0 0 .75em hsla(0,0%,100%,.25),0 0 1px #000;opacity:0}.doka--root[data-style-viewport~=x-cramped] .doka--markup-color{width:100%}.doka--root .doka--scroller{-webkit-overflow-scrolling:touch;overscroll-behavior-x:none;touch-action:pan-x;text-align:center;pointer-events:all;width:40em;margin:0 auto 1em;max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scrollbar-color:hsla(0,0%,100%,.2) transparent;scrollbar-color:var(--doka-scroller-thumb--color) transparent}@supports (-ms-ime-align:auto){.doka--root .doka--scroller{overflow-x:hidden}}.doka--root .doka--scroller[data-drag-state=dragging] button,.doka--root .doka--scroller[data-drag-state=dragging] input{pointer-events:none!important}.doka--root .doka--scroller::-webkit-scrollbar{height:.375em;background-color:transparent;background-color:var(--doka-scroller-rail--color)}.doka--root .doka--scroller::-webkit-scrollbar-track{background:transparent}.doka--root .doka--scroller::-webkit-scrollbar-thumb{background-color:transparent;border-radius:9999rem;border:3px solid transparent;border:3px solid var(--doka-scroller-rail--color);transition:background-color .25s ease-in-out}@media (pointer:fine) and (hover:hover){.doka--root .doka--scroller:hover{scrollbar-width:thin}.doka--root .doka--scroller:hover::-webkit-scrollbar-thumb{background-color:hsla(0,0%,100%,.2);background-color:var(--doka-scroller-thumb--color)}}.doka--root[data-style-viewport*=x-cramped] .doka--filter-scroller{-ms-scroll-snap-type:proximity;scroll-snap-type:proximity;-ms-scroll-snap-type:x proximity;scroll-snap-type:x proximity;scroll-padding:2em;margin-bottom:0}.doka--root .doka--scroller{scrollbar-base-color:#111;scrollbar-face-color:#333;scrollbar-3dlight-color:#111;scrollbar-highlight-color:#111;scrollbar-track-color:#111;scrollbar-arrow-color:#111;scrollbar-shadow-color:#111}@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))) and (mix-blend-mode:screen){.doka--root .doka--scroller{margin:0 auto 1em;-webkit-mask:linear-gradient(90deg,transparent 0,#000 2em,#000 calc(100% - 2em),transparent),linear-gradient(0deg,#000 8px,transparent 0);mask:linear-gradient(90deg,transparent 0,#000 2em,#000 calc(100% - 2em),transparent),linear-gradient(0deg,#000 8px,transparent 0)}.doka--root[data-style-viewport*=x-cramped] .doka--scroller{-webkit-mask:linear-gradient(90deg,transparent 0,#000 1em,#000 calc(100% - 1em),transparent);mask:linear-gradient(90deg,transparent 0,#000 1em,#000 calc(100% - 1em),transparent)}}.doka--root .doka--sticker{height:calc(100% - 3em);width:calc(100% - 2em);left:1em;top:1em}.doka--root .doka--sticker-list{display:inline-flex;align-items:flex-start;list-style:none;margin:0;padding:0 2em .5em}.doka--root .doka--sticker-list li{margin:.25em .3125em;padding:0}.doka--root .doka--sticker-list li:first-child{margin-left:0}.doka--root .doka--sticker-list li:last-child{margin-right:0}.doka--root .doka--sticker-list button{background-color:hsla(0,0%,100%,.1);background-color:var(--doka-component--background-dim);padding:.25em}.doka--root .doka--sticker-list img,.doka--root .doka--sticker-list svg{display:block;width:2em;height:2em;-o-object-fit:contain;object-fit:contain;pointer-events:none;border-radius:.25em}.doka--root .doka--sticker-list span{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}.doka--root[data-style-viewport*=x-cramped] .doka--sticker{display:flex;flex-direction:column-reverse;top:2em}.doka--root[data-style-viewport*=x-cramped] .doka--sticker .doka--sticker-list{padding:0 1em;height:3.5em}@media (-ms-high-contrast:none){.doka--root .doka--sticker-list li,::-ms-backdrop{flex:none;width:2.5em}}.doka--root .doka--status-progress{display:none;background-color:rgba(0,0,0,.2);background-color:var(--doka-status-bubble--color-dim);border-radius:50%;pointer-events:none}.doka--root .doka--status-bubble{pointer-events:none;will-change:transform;text-align:center}.doka--root .doka--status-bubble .doka--status-bubble-inner{position:relative;display:inline-block;color:rgba(0,0,0,.8);color:var(--doka-status-bubble--color);background-color:hsla(0,0%,100%,.75);background-color:var(--doka-status-bubble--background);box-shadow:0 .125em 1em rgba(0,0,0,.2);box-shadow:var(--doka-status-bubble--shadow);transition:background-color .25s ease-in-out,color .25s ease-in-out;font-size:.875em;max-width:80%;margin:0 auto;border-radius:1em;line-height:1.5;text-align:center;padding:.1875em 1em .25em}.doka--root .doka--status-bubble p{display:inline;margin:0;padding:0}.doka--root .doka--status-bubble .doka--status-progress:not([data-value="0"]){position:absolute;display:block;right:.35em;top:.35em;width:1.25em;height:1.25em}.doka--root .doka--status-bubble .doka--status-progress:not([data-value="0"])+p,.doka--root .doka--status-bubble button+p{padding-right:1.5em}.doka--root .doka--status-bubble button{position:relative;z-index:1;margin:0;padding:0;border:none;font-family:inherit;font-size:1em;font-weight:400;outline:transparent;display:flex;justify-content:center;align-items:center;pointer-events:all;border-radius:9999em;width:18px;height:18px;color:hsla(0,0%,100%,.75);color:var(--doka-status-bubble--background);background-color:rgba(0,0,0,.8);background-color:var(--doka-status-bubble--color);position:absolute;right:.375em;top:.35em}.doka--root .doka--status-bubble button svg{width:.875em;height:.875em}.doka--root .doka--status-bubble button:after{content:"";position:absolute;left:-1em;right:-1em;top:-1em;bottom:-1em}@supports ((-webkit-backdrop-filter:var(--doka-effect--frost)) or (backdrop-filter:var(--doka-effect--frost))){.doka--root .doka--status-bubble-inner{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-backdrop-filter:var(--doka-effect--frost);backdrop-filter:var(--doka-effect--frost);background:hsla(0,0%,100%,.5);background:var(--doka-status-bubble-effect--background)}}.doka--root .doka--toolbar{z-index:3;flex-shrink:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:1.25em 0;pointer-events:none;margin:0 2em}.doka--root .doka--toolbar>*{pointer-events:all;margin:0 .75em;height:2.5em}.doka--root .doka--toolbar svg{display:inline-block;flex-shrink:0}.doka--root .doka--toolbar svg *{transition:opacity .25s ease-out,transform .5s ease-out}.doka--root .doka--toolbar .doka--button{white-space:nowrap;flex-shrink:0}.doka--root[data-style-viewport~=flow-controls][data-style-viewport~=single-util]:not([data-style-viewport~=x-cramped]) .doka--toolbar{margin:-4.875em 11em 0}.doka--root .doka--toolbar[data-layout=compact]>*{margin:0 .5em}.doka--root[data-style-viewport~=x-cramped] .doka--toolbar{padding:1em 0}.doka--root[data-style-viewport~=x-cramped] .doka--toolbar>*{margin:0 .25em}.doka--root .doka--utils{display:flex;justify-content:center;flex:1;padding:0;overflow:hidden}.doka--root .doka--utils>*{pointer-events:all}.doka--root .doka--utils>*+*{margin-left:1px}/* @tecof/theme-editor ─── Core styles ─── */
|
|
74
|
+
/* ─── CodeEditorField ─── */
|
|
75
|
+
.tecof-code-editor-container {
|
|
76
|
+
width: 100%;
|
|
77
|
+
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
78
|
+
border: 1px solid #e4e4e7;
|
|
79
|
+
border-radius: 8px;
|
|
80
|
+
overflow: hidden;
|
|
81
|
+
background: #ffffff;
|
|
82
|
+
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.tecof-code-editor-container:hover {
|
|
86
|
+
border-color: #d4d4d8;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.tecof-code-editor-container:focus-within {
|
|
90
|
+
border-color: var(--tecof-primary-500, #3b82f6);
|
|
91
|
+
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
92
|
+
outline: none;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/* ─── ColorField ─── */
|
|
96
|
+
.tecof-color-container {
|
|
97
|
+
display: flex;
|
|
98
|
+
flex-direction: column;
|
|
99
|
+
gap: 8px;
|
|
100
|
+
font-family: 'Inter', system-ui, sans-serif;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.tecof-color-preview-row {
|
|
104
|
+
display: flex;
|
|
105
|
+
align-items: center;
|
|
106
|
+
gap: 8px;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.tecof-color-swatch {
|
|
110
|
+
position: relative;
|
|
111
|
+
width: 40px;
|
|
112
|
+
height: 40px;
|
|
113
|
+
border-radius: 10px;
|
|
114
|
+
border: 2px solid #e4e4e7;
|
|
115
|
+
cursor: pointer;
|
|
116
|
+
flex-shrink: 0;
|
|
117
|
+
overflow: hidden;
|
|
118
|
+
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.tecof-color-swatch.focused {
|
|
122
|
+
border-color: var(--tecof-primary-500, #3b82f6);
|
|
123
|
+
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.tecof-color-native-input {
|
|
127
|
+
position: absolute;
|
|
128
|
+
inset: 0;
|
|
129
|
+
width: 100%;
|
|
130
|
+
height: 100%;
|
|
131
|
+
opacity: 0;
|
|
132
|
+
cursor: pointer;
|
|
133
|
+
border: none;
|
|
134
|
+
padding: 0;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.tecof-color-hex-input {
|
|
138
|
+
flex: 1;
|
|
139
|
+
padding: 8px 12px;
|
|
140
|
+
font-size: 14px;
|
|
141
|
+
line-height: 1.5;
|
|
142
|
+
color: #18181b;
|
|
143
|
+
background: #ffffff;
|
|
144
|
+
border: 1px solid #e4e4e7;
|
|
145
|
+
border-radius: 8px;
|
|
146
|
+
outline: none;
|
|
147
|
+
font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
|
|
148
|
+
letter-spacing: 0.5px;
|
|
149
|
+
box-sizing: border-box;
|
|
150
|
+
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.tecof-color-hex-input:focus {
|
|
154
|
+
border-color: var(--tecof-primary-500, #3b82f6);
|
|
155
|
+
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.tecof-color-hex-input.invalid {
|
|
159
|
+
border-color: #ef4444;
|
|
160
|
+
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.tecof-color-action-btn {
|
|
164
|
+
display: flex;
|
|
165
|
+
align-items: center;
|
|
166
|
+
justify-content: center;
|
|
167
|
+
width: 36px;
|
|
168
|
+
height: 36px;
|
|
169
|
+
color: #71717a;
|
|
170
|
+
background: #f4f4f5;
|
|
171
|
+
border: 1px solid #e4e4e7;
|
|
172
|
+
border-radius: 8px;
|
|
173
|
+
cursor: pointer;
|
|
174
|
+
transition: all 0.2s ease;
|
|
175
|
+
flex-shrink: 0;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.tecof-color-action-btn:hover {
|
|
179
|
+
background: #e4e4e7;
|
|
180
|
+
color: #3f3f46;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.tecof-color-preset-grid {
|
|
184
|
+
display: grid;
|
|
185
|
+
grid-template-columns: repeat(9, 1fr);
|
|
186
|
+
gap: 4px;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.tecof-color-preset-swatch {
|
|
190
|
+
width: 100%;
|
|
191
|
+
aspect-ratio: 1;
|
|
192
|
+
border-radius: 6px;
|
|
193
|
+
border: 1px solid transparent;
|
|
194
|
+
cursor: pointer;
|
|
195
|
+
transition: transform 0.1s ease, box-shadow 0.1s ease;
|
|
196
|
+
outline: none;
|
|
197
|
+
padding: 0;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.tecof-color-preset-swatch.is-white {
|
|
201
|
+
border-color: #e4e4e7;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.tecof-color-preset-swatch.selected {
|
|
205
|
+
border: 2px solid var(--tecof-primary-500, #3b82f6);
|
|
206
|
+
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.tecof-color-opacity-row {
|
|
210
|
+
display: flex;
|
|
211
|
+
align-items: center;
|
|
212
|
+
gap: 8px;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.tecof-color-opacity-label {
|
|
216
|
+
font-size: 11px;
|
|
217
|
+
font-weight: 600;
|
|
218
|
+
color: #71717a;
|
|
219
|
+
text-transform: uppercase;
|
|
220
|
+
letter-spacing: 0.5px;
|
|
221
|
+
flex-shrink: 0;
|
|
222
|
+
width: 48px;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.tecof-color-opacity-slider {
|
|
226
|
+
flex: 1;
|
|
227
|
+
height: 6px;
|
|
228
|
+
-webkit-appearance: none;
|
|
229
|
+
appearance: none;
|
|
230
|
+
background: #e4e4e7;
|
|
231
|
+
border-radius: 3px;
|
|
232
|
+
outline: none;
|
|
233
|
+
cursor: pointer;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.tecof-color-opacity-slider::-webkit-slider-thumb {
|
|
237
|
+
-webkit-appearance: none;
|
|
238
|
+
appearance: none;
|
|
239
|
+
width: 16px;
|
|
240
|
+
height: 16px;
|
|
241
|
+
border-radius: 50%;
|
|
242
|
+
background: #ffffff;
|
|
243
|
+
border: 2px solid var(--tecof-primary-500, #3b82f6);
|
|
244
|
+
cursor: pointer;
|
|
245
|
+
transition: transform 0.1s ease;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.tecof-color-opacity-slider::-webkit-slider-thumb:hover {
|
|
249
|
+
transform: scale(1.1);
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.tecof-color-opacity-value {
|
|
253
|
+
font-size: 12px;
|
|
254
|
+
font-weight: 500;
|
|
255
|
+
color: #3f3f46;
|
|
256
|
+
width: 32px;
|
|
257
|
+
text-align: right;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.tecof-color-section-label {
|
|
261
|
+
font-size: 11px;
|
|
262
|
+
font-weight: 600;
|
|
263
|
+
color: #a1a1aa;
|
|
264
|
+
text-transform: uppercase;
|
|
265
|
+
letter-spacing: 0.5px;
|
|
266
|
+
margin: 4px 0 2px 0;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
/* ─── EditorField ─── */
|
|
270
|
+
.tecof-editor-wrapper {
|
|
271
|
+
border: 1px solid #e4e4e7;
|
|
272
|
+
border-radius: 8px;
|
|
273
|
+
overflow: hidden;
|
|
274
|
+
background: #ffffff;
|
|
275
|
+
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.tecof-editor-wrapper:focus-within {
|
|
279
|
+
border-color: var(--tecof-primary-500, #3b82f6);
|
|
280
|
+
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.tecof-editor-toolbar {
|
|
284
|
+
display: flex;
|
|
285
|
+
flex-wrap: wrap;
|
|
286
|
+
gap: 1px;
|
|
287
|
+
padding: 4px 6px;
|
|
288
|
+
border-bottom: 1px solid #e4e4e7;
|
|
289
|
+
background: #fafafa;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
.tecof-editor-toolbar-btn {
|
|
293
|
+
display: inline-flex;
|
|
294
|
+
align-items: center;
|
|
295
|
+
justify-content: center;
|
|
296
|
+
width: 28px;
|
|
297
|
+
height: 28px;
|
|
298
|
+
padding: 0;
|
|
299
|
+
font-size: 13px;
|
|
300
|
+
font-weight: 400;
|
|
301
|
+
color: #52525b;
|
|
302
|
+
background: transparent;
|
|
303
|
+
border: none;
|
|
304
|
+
border-radius: 4px;
|
|
305
|
+
cursor: pointer;
|
|
306
|
+
transition: all 0.15s ease;
|
|
307
|
+
outline: none;
|
|
308
|
+
line-height: 1;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
.tecof-editor-toolbar-btn:hover {
|
|
312
|
+
background: #e4e4e7;
|
|
313
|
+
color: #18181b;
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
.tecof-editor-toolbar-btn.active {
|
|
317
|
+
font-weight: 700;
|
|
318
|
+
color: var(--tecof-primary-500, #3b82f6);
|
|
319
|
+
background: #eff6ff;
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
.tecof-editor-divider {
|
|
323
|
+
width: 1px;
|
|
324
|
+
height: 20px;
|
|
325
|
+
background: #e4e4e7;
|
|
326
|
+
margin: 4px 3px;
|
|
327
|
+
align-self: center;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
/* TipTap Editor Inner Styles */
|
|
331
|
+
.tecof-editor-field .tiptap {
|
|
332
|
+
padding: 10px 14px;
|
|
333
|
+
min-height: 120px;
|
|
334
|
+
outline: none;
|
|
335
|
+
font-size: 14px;
|
|
336
|
+
line-height: 1.6;
|
|
337
|
+
color: #18181b;
|
|
338
|
+
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
339
|
+
}
|
|
340
|
+
.tecof-editor-field .tiptap p { margin: 0 0 0.5em 0; }
|
|
341
|
+
.tecof-editor-field .tiptap h2 { font-size: 1.4em; font-weight: 600; margin: 0.8em 0 0.4em; }
|
|
342
|
+
.tecof-editor-field .tiptap h3 { font-size: 1.2em; font-weight: 600; margin: 0.6em 0 0.3em; }
|
|
343
|
+
.tecof-editor-field .tiptap h4 { font-size: 1.1em; font-weight: 600; margin: 0.5em 0 0.25em; }
|
|
344
|
+
.tecof-editor-field .tiptap ul,
|
|
345
|
+
.tecof-editor-field .tiptap ol { padding-left: 1.4em; margin: 0.4em 0; }
|
|
346
|
+
.tecof-editor-field .tiptap li { margin: 0.1em 0; }
|
|
347
|
+
.tecof-editor-field .tiptap blockquote {
|
|
348
|
+
border-left: 3px solid #e4e4e7;
|
|
349
|
+
padding-left: 12px;
|
|
350
|
+
margin: 0.6em 0;
|
|
351
|
+
color: #71717a;
|
|
352
|
+
font-style: italic;
|
|
353
|
+
}
|
|
354
|
+
.tecof-editor-field .tiptap a { color: var(--tecof-primary-500, #3b82f6); text-decoration: underline; }
|
|
355
|
+
.tecof-editor-field .tiptap code {
|
|
356
|
+
background: #f4f4f5; padding: 2px 4px; border-radius: 3px;
|
|
357
|
+
font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.9em;
|
|
358
|
+
}
|
|
359
|
+
.tecof-editor-field .tiptap pre {
|
|
360
|
+
background: #18181b; color: #e4e4e7; padding: 12px 16px;
|
|
361
|
+
border-radius: 6px; font-family: 'SF Mono', 'Fira Code', monospace;
|
|
362
|
+
font-size: 13px; overflow-x: auto;
|
|
363
|
+
}
|
|
364
|
+
.tecof-editor-field .tiptap hr {
|
|
365
|
+
border: none; border-top: 1px solid #e4e4e7; margin: 1em 0;
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
/* ─── LanguageField ─── */
|
|
369
|
+
.tecof-lang-container {
|
|
370
|
+
width: 100%;
|
|
371
|
+
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
.tecof-lang-tab-bar {
|
|
375
|
+
display: flex;
|
|
376
|
+
gap: 2px;
|
|
377
|
+
margin-bottom: 8px;
|
|
378
|
+
border-radius: 8px;
|
|
379
|
+
background: #f4f4f5;
|
|
380
|
+
padding: 3px;
|
|
381
|
+
overflow: hidden;
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
.tecof-lang-tab {
|
|
385
|
+
flex: 1;
|
|
386
|
+
display: flex;
|
|
387
|
+
align-items: center;
|
|
388
|
+
justify-content: center;
|
|
389
|
+
gap: 4px;
|
|
390
|
+
padding: 6px 8px;
|
|
391
|
+
font-size: 12px;
|
|
392
|
+
font-weight: 400;
|
|
393
|
+
color: #71717a;
|
|
394
|
+
background: transparent;
|
|
395
|
+
border: none;
|
|
396
|
+
border-radius: 6px;
|
|
397
|
+
cursor: pointer;
|
|
398
|
+
transition: all 0.15s ease;
|
|
399
|
+
outline: none;
|
|
400
|
+
position: relative;
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
.tecof-lang-tab:hover {
|
|
404
|
+
color: #3f3f46;
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
.tecof-lang-tab.active {
|
|
408
|
+
font-weight: 600;
|
|
409
|
+
color: #18181b;
|
|
410
|
+
background: #ffffff;
|
|
411
|
+
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
|
412
|
+
}
|
|
413
|
+
|
|
414
|
+
.tecof-lang-default-badge {
|
|
415
|
+
font-size: 8px;
|
|
416
|
+
font-weight: 700;
|
|
417
|
+
color: #ffffff;
|
|
418
|
+
background: var(--tecof-primary-500, #3b82f6);
|
|
419
|
+
border-radius: 3px;
|
|
420
|
+
padding: 1px 4px;
|
|
421
|
+
line-height: 12px;
|
|
422
|
+
letter-spacing: 0.3px;
|
|
423
|
+
}
|
|
424
|
+
|
|
425
|
+
.tecof-lang-input-wrapper {
|
|
426
|
+
position: relative;
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
.tecof-lang-input {
|
|
430
|
+
width: 100%;
|
|
431
|
+
padding: 8px 12px;
|
|
432
|
+
font-size: 14px;
|
|
433
|
+
line-height: 1.5;
|
|
434
|
+
color: #18181b;
|
|
435
|
+
background: #ffffff;
|
|
436
|
+
border: 1px solid #e4e4e7;
|
|
437
|
+
border-radius: 8px;
|
|
438
|
+
outline: none;
|
|
439
|
+
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
|
440
|
+
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
441
|
+
box-sizing: border-box;
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
.tecof-lang-input:focus {
|
|
445
|
+
border-color: var(--tecof-primary-500, #3b82f6);
|
|
446
|
+
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
447
|
+
}
|
|
448
|
+
|
|
449
|
+
.tecof-lang-textarea {
|
|
450
|
+
resize: vertical;
|
|
451
|
+
min-height: 80px;
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
.tecof-lang-loading {
|
|
455
|
+
display: flex;
|
|
456
|
+
align-items: center;
|
|
457
|
+
justify-content: center;
|
|
458
|
+
padding: 12px;
|
|
459
|
+
font-size: 12px;
|
|
460
|
+
color: #71717a;
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
.tecof-lang-loading-dot {
|
|
464
|
+
width: 6px;
|
|
465
|
+
height: 6px;
|
|
466
|
+
border-radius: 50%;
|
|
467
|
+
background: #a1a1aa;
|
|
468
|
+
margin: 0 2px;
|
|
469
|
+
display: inline-block;
|
|
470
|
+
}
|
|
471
|
+
|
|
472
|
+
.tecof-lang-error {
|
|
473
|
+
padding: 8px 12px;
|
|
474
|
+
font-size: 12px;
|
|
475
|
+
color: #ef4444;
|
|
476
|
+
background: #fef2f2;
|
|
477
|
+
border-radius: 6px;
|
|
478
|
+
text-align: center;
|
|
479
|
+
}
|
|
480
|
+
|
|
481
|
+
.tecof-lang-action-bar {
|
|
482
|
+
display: flex;
|
|
483
|
+
gap: 4px;
|
|
484
|
+
margin-top: 6px;
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
.tecof-lang-action-btn {
|
|
488
|
+
display: flex;
|
|
489
|
+
align-items: center;
|
|
490
|
+
gap: 4px;
|
|
491
|
+
padding: 4px 8px;
|
|
492
|
+
font-size: 11px;
|
|
493
|
+
font-weight: 500;
|
|
494
|
+
color: #71717a;
|
|
495
|
+
background: #f4f4f5;
|
|
496
|
+
border: 1px solid #e4e4e7;
|
|
497
|
+
border-radius: 6px;
|
|
498
|
+
cursor: pointer;
|
|
499
|
+
transition: all 0.15s ease;
|
|
500
|
+
white-space: nowrap;
|
|
501
|
+
}
|
|
502
|
+
|
|
503
|
+
.tecof-lang-action-btn:hover:not(:disabled) {
|
|
504
|
+
background: #e4e4e7;
|
|
505
|
+
color: #3f3f46;
|
|
506
|
+
}
|
|
507
|
+
|
|
508
|
+
.tecof-lang-action-btn:disabled {
|
|
509
|
+
opacity: 0.5;
|
|
510
|
+
cursor: not-allowed;
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
.tecof-lang-status-msg {
|
|
514
|
+
font-size: 11px;
|
|
515
|
+
padding: 4px 8px;
|
|
516
|
+
border-radius: 6px;
|
|
517
|
+
display: flex;
|
|
518
|
+
align-items: center;
|
|
519
|
+
gap: 4px;
|
|
520
|
+
}
|
|
521
|
+
|
|
522
|
+
.tecof-lang-status-msg.success {
|
|
523
|
+
color: #16a34a;
|
|
524
|
+
background: #f0fdf4;
|
|
525
|
+
}
|
|
526
|
+
|
|
527
|
+
.tecof-lang-status-msg.error {
|
|
528
|
+
color: #dc2626;
|
|
529
|
+
background: #fef2f2;
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
@keyframes tecof-pulse {
|
|
533
|
+
0%, 100% { opacity: 1; transform: scale(1); }
|
|
534
|
+
50% { opacity: 0.5; transform: scale(0.8); }
|
|
535
|
+
}
|
|
536
|
+
|
|
537
|
+
/* ─── LinkField ─── */
|
|
538
|
+
.tecof-link-container {
|
|
539
|
+
display: flex;
|
|
540
|
+
flex-direction: column;
|
|
541
|
+
gap: 8px;
|
|
542
|
+
font-family: 'Inter', system-ui, sans-serif;
|
|
543
|
+
}
|
|
544
|
+
|
|
545
|
+
.tecof-link-value-box {
|
|
546
|
+
display: flex;
|
|
547
|
+
align-items: center;
|
|
548
|
+
gap: 10px;
|
|
549
|
+
padding: 10px 12px;
|
|
550
|
+
background: #fafafa;
|
|
551
|
+
border: 1px solid #e4e4e7;
|
|
552
|
+
border-radius: 10px;
|
|
553
|
+
transition: all 0.15s ease;
|
|
554
|
+
}
|
|
555
|
+
|
|
556
|
+
.tecof-link-value-icon {
|
|
557
|
+
width: 36px;
|
|
558
|
+
height: 36px;
|
|
559
|
+
border-radius: 8px;
|
|
560
|
+
background: #eff6ff;
|
|
561
|
+
display: flex;
|
|
562
|
+
align-items: center;
|
|
563
|
+
justify-content: center;
|
|
564
|
+
color: var(--tecof-primary-500, #3b82f6);
|
|
565
|
+
flex-shrink: 0;
|
|
566
|
+
}
|
|
567
|
+
|
|
568
|
+
.tecof-link-value-info {
|
|
569
|
+
flex: 1;
|
|
570
|
+
min-width: 0;
|
|
571
|
+
}
|
|
572
|
+
|
|
573
|
+
.tecof-link-value-label {
|
|
574
|
+
font-size: 13px;
|
|
575
|
+
font-weight: 500;
|
|
576
|
+
color: #18181b;
|
|
577
|
+
margin: 0;
|
|
578
|
+
white-space: nowrap;
|
|
579
|
+
overflow: hidden;
|
|
580
|
+
text-overflow: ellipsis;
|
|
581
|
+
}
|
|
582
|
+
|
|
583
|
+
.tecof-link-value-url {
|
|
584
|
+
font-size: 11px;
|
|
585
|
+
color: #a1a1aa;
|
|
586
|
+
margin: 2px 0 0;
|
|
587
|
+
white-space: nowrap;
|
|
588
|
+
overflow: hidden;
|
|
589
|
+
text-overflow: ellipsis;
|
|
590
|
+
}
|
|
591
|
+
|
|
592
|
+
.tecof-link-value-badge {
|
|
593
|
+
font-size: 10px;
|
|
594
|
+
font-weight: 600;
|
|
595
|
+
padding: 2px 6px;
|
|
596
|
+
border-radius: 4px;
|
|
597
|
+
line-height: 14px;
|
|
598
|
+
flex-shrink: 0;
|
|
599
|
+
}
|
|
600
|
+
|
|
601
|
+
.tecof-link-badge-page {
|
|
602
|
+
background: #dbeafe;
|
|
603
|
+
color: #2563eb;
|
|
604
|
+
}
|
|
605
|
+
|
|
606
|
+
.tecof-link-badge-custom {
|
|
607
|
+
background: #fef3c7;
|
|
608
|
+
color: #d97706;
|
|
609
|
+
}
|
|
610
|
+
|
|
611
|
+
.tecof-link-action-btn-small {
|
|
612
|
+
display: flex;
|
|
613
|
+
align-items: center;
|
|
614
|
+
justify-content: center;
|
|
615
|
+
width: 28px;
|
|
616
|
+
height: 28px;
|
|
617
|
+
color: #a1a1aa;
|
|
618
|
+
background: none;
|
|
619
|
+
border: none;
|
|
620
|
+
border-radius: 6px;
|
|
621
|
+
cursor: pointer;
|
|
622
|
+
flex-shrink: 0;
|
|
623
|
+
transition: background-color 0.15s ease, color 0.15s ease;
|
|
624
|
+
}
|
|
625
|
+
|
|
626
|
+
.tecof-link-action-btn-small:hover {
|
|
627
|
+
background: #f4f4f5;
|
|
628
|
+
color: #18181b;
|
|
629
|
+
}
|
|
630
|
+
|
|
631
|
+
.tecof-link-main-actions {
|
|
632
|
+
display: flex;
|
|
633
|
+
gap: 8px;
|
|
634
|
+
}
|
|
635
|
+
|
|
636
|
+
.tecof-link-btn-secondary {
|
|
637
|
+
display: flex;
|
|
638
|
+
align-items: center;
|
|
639
|
+
gap: 6px;
|
|
640
|
+
flex: 1;
|
|
641
|
+
justify-content: center;
|
|
642
|
+
padding: 10px;
|
|
643
|
+
font-size: 13px;
|
|
644
|
+
font-weight: 500;
|
|
645
|
+
color: #3f3f46;
|
|
646
|
+
background: #f4f4f5;
|
|
647
|
+
border: 1px solid #e4e4e7;
|
|
648
|
+
border-radius: 8px;
|
|
649
|
+
cursor: pointer;
|
|
650
|
+
transition: all 0.15s ease;
|
|
651
|
+
}
|
|
652
|
+
|
|
653
|
+
.tecof-link-btn-secondary:hover {
|
|
654
|
+
background: #e4e4e7;
|
|
655
|
+
}
|
|
656
|
+
|
|
657
|
+
.tecof-link-input-group {
|
|
658
|
+
display: flex;
|
|
659
|
+
flex-direction: column;
|
|
660
|
+
gap: 8px;
|
|
661
|
+
padding: 12px;
|
|
662
|
+
background: #fafafa;
|
|
663
|
+
border: 1px solid #e4e4e7;
|
|
664
|
+
border-radius: 10px;
|
|
665
|
+
}
|
|
666
|
+
|
|
667
|
+
.tecof-link-input-label {
|
|
668
|
+
font-size: 11px;
|
|
669
|
+
font-weight: 600;
|
|
670
|
+
color: #71717a;
|
|
671
|
+
margin: 0;
|
|
672
|
+
text-transform: uppercase;
|
|
673
|
+
letter-spacing: 0.5px;
|
|
674
|
+
}
|
|
675
|
+
|
|
676
|
+
.tecof-link-input {
|
|
677
|
+
width: 100%;
|
|
678
|
+
box-sizing: border-box;
|
|
679
|
+
padding: 8px 10px;
|
|
680
|
+
font-size: 13px;
|
|
681
|
+
border: 1px solid #e4e4e7;
|
|
682
|
+
border-radius: 6px;
|
|
683
|
+
outline: none;
|
|
684
|
+
background: #fff;
|
|
685
|
+
color: #18181b;
|
|
686
|
+
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
687
|
+
}
|
|
688
|
+
|
|
689
|
+
.tecof-link-input:focus, .tecof-link-select-small:focus {
|
|
690
|
+
border-color: var(--tecof-primary-500, #3b82f6);
|
|
691
|
+
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
692
|
+
}
|
|
693
|
+
|
|
694
|
+
.tecof-link-input-row {
|
|
695
|
+
display: flex;
|
|
696
|
+
gap: 8px;
|
|
697
|
+
}
|
|
698
|
+
|
|
699
|
+
.tecof-link-select-small {
|
|
700
|
+
padding: 8px 10px;
|
|
701
|
+
font-size: 13px;
|
|
702
|
+
border: 1px solid #e4e4e7;
|
|
703
|
+
border-radius: 6px;
|
|
704
|
+
outline: none;
|
|
705
|
+
background: #fff;
|
|
706
|
+
color: #18181b;
|
|
707
|
+
cursor: pointer;
|
|
708
|
+
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
709
|
+
}
|
|
710
|
+
|
|
711
|
+
.tecof-link-btn-confirm {
|
|
712
|
+
display: flex;
|
|
713
|
+
align-items: center;
|
|
714
|
+
justify-content: center;
|
|
715
|
+
gap: 6px;
|
|
716
|
+
padding: 8px 16px;
|
|
717
|
+
font-size: 13px;
|
|
718
|
+
font-weight: 500;
|
|
719
|
+
color: #fff;
|
|
720
|
+
background: var(--tecof-primary-500, #3b82f6);
|
|
721
|
+
border: none;
|
|
722
|
+
border-radius: 6px;
|
|
723
|
+
cursor: pointer;
|
|
724
|
+
transition: background-color 0.15s ease;
|
|
725
|
+
}
|
|
726
|
+
|
|
727
|
+
.tecof-link-btn-confirm:hover {
|
|
728
|
+
background: var(--tecof-primary-600, #2563eb);
|
|
729
|
+
}
|
|
730
|
+
|
|
731
|
+
.tecof-link-drawer-overlay {
|
|
732
|
+
position: fixed;
|
|
733
|
+
inset: 0;
|
|
734
|
+
background: rgba(0, 0, 0, 0.4);
|
|
735
|
+
z-index: 9999;
|
|
736
|
+
}
|
|
737
|
+
|
|
738
|
+
.tecof-link-drawer-content {
|
|
739
|
+
position: fixed;
|
|
740
|
+
bottom: 0;
|
|
741
|
+
left: 0;
|
|
742
|
+
right: 0;
|
|
743
|
+
height: 70vh;
|
|
744
|
+
display: flex;
|
|
745
|
+
flex-direction: column;
|
|
746
|
+
background: #ffffff;
|
|
747
|
+
border-top-left-radius: 16px;
|
|
748
|
+
border-top-right-radius: 16px;
|
|
749
|
+
z-index: 10000;
|
|
750
|
+
padding: 16px;
|
|
751
|
+
}
|
|
752
|
+
|
|
753
|
+
.tecof-link-drawer-header {
|
|
754
|
+
display: flex;
|
|
755
|
+
justify-content: space-between;
|
|
756
|
+
align-items: center;
|
|
757
|
+
margin-bottom: 12px;
|
|
758
|
+
}
|
|
759
|
+
|
|
760
|
+
.tecof-link-drawer-title {
|
|
761
|
+
font-size: 16px;
|
|
762
|
+
font-weight: 600;
|
|
763
|
+
margin: 0;
|
|
764
|
+
}
|
|
765
|
+
|
|
766
|
+
.tecof-link-drawer-close-btn {
|
|
767
|
+
background: #f4f4f5;
|
|
768
|
+
border: none;
|
|
769
|
+
border-radius: 50%;
|
|
770
|
+
width: 32px;
|
|
771
|
+
height: 32px;
|
|
772
|
+
display: flex;
|
|
773
|
+
align-items: center;
|
|
774
|
+
justify-content: center;
|
|
775
|
+
cursor: pointer;
|
|
776
|
+
transition: background-color 0.15s ease;
|
|
777
|
+
}
|
|
778
|
+
|
|
779
|
+
.tecof-link-drawer-close-btn:hover {
|
|
780
|
+
background: #e4e4e7;
|
|
781
|
+
}
|
|
782
|
+
|
|
783
|
+
.tecof-link-search-box {
|
|
784
|
+
display: flex;
|
|
785
|
+
align-items: center;
|
|
786
|
+
gap: 8px;
|
|
787
|
+
padding: 8px 12px;
|
|
788
|
+
background: #f4f4f5;
|
|
789
|
+
border-radius: 8px;
|
|
790
|
+
margin-bottom: 12px;
|
|
791
|
+
}
|
|
792
|
+
|
|
793
|
+
.tecof-link-search-input {
|
|
794
|
+
flex: 1;
|
|
795
|
+
border: none;
|
|
796
|
+
background: transparent;
|
|
797
|
+
outline: none;
|
|
798
|
+
font-size: 13px;
|
|
799
|
+
color: #18181b;
|
|
800
|
+
}
|
|
801
|
+
|
|
802
|
+
.tecof-link-page-list {
|
|
803
|
+
flex: 1;
|
|
804
|
+
overflow-y: auto;
|
|
805
|
+
display: flex;
|
|
806
|
+
flex-direction: column;
|
|
807
|
+
gap: 4px;
|
|
808
|
+
}
|
|
809
|
+
|
|
810
|
+
.tecof-link-page-item {
|
|
811
|
+
display: flex;
|
|
812
|
+
align-items: center;
|
|
813
|
+
gap: 10px;
|
|
814
|
+
padding: 10px 12px;
|
|
815
|
+
background: #fff;
|
|
816
|
+
border: 1px solid #f4f4f5;
|
|
817
|
+
border-radius: 8px;
|
|
818
|
+
cursor: pointer;
|
|
819
|
+
transition: all 0.15s ease;
|
|
820
|
+
}
|
|
821
|
+
|
|
822
|
+
.tecof-link-page-item:hover {
|
|
823
|
+
background: #fafafa;
|
|
824
|
+
}
|
|
825
|
+
|
|
826
|
+
.tecof-link-page-item.selected {
|
|
827
|
+
background: #eff6ff;
|
|
828
|
+
border-color: var(--tecof-primary-500, #3b82f6);
|
|
829
|
+
}
|
|
830
|
+
|
|
831
|
+
.tecof-link-page-slug {
|
|
832
|
+
font-size: 13px;
|
|
833
|
+
font-weight: 500;
|
|
834
|
+
color: #18181b;
|
|
835
|
+
margin: 0;
|
|
836
|
+
flex: 1;
|
|
837
|
+
}
|
|
838
|
+
|
|
839
|
+
.tecof-link-page-title {
|
|
840
|
+
font-size: 11px;
|
|
841
|
+
color: #a1a1aa;
|
|
842
|
+
margin: 2px 0 0;
|
|
843
|
+
}
|
|
844
|
+
|
|
845
|
+
.tecof-link-status-dot {
|
|
846
|
+
width: 6px;
|
|
847
|
+
height: 6px;
|
|
848
|
+
border-radius: 50%;
|
|
849
|
+
flex-shrink: 0;
|
|
850
|
+
}
|
|
851
|
+
|
|
852
|
+
.tecof-link-status-dot.published { background: #22c55e; }
|
|
853
|
+
.tecof-link-status-dot.changed { background: #f59e0b; }
|
|
854
|
+
.tecof-link-status-dot.draft { background: #a1a1aa; }
|
|
855
|
+
|
|
856
|
+
/* ─── UploadField ─── */
|
|
857
|
+
.tecof-upload-container {
|
|
858
|
+
display: flex;
|
|
859
|
+
flex-direction: column;
|
|
860
|
+
gap: 10px;
|
|
861
|
+
font-family: 'Inter', system-ui, sans-serif;
|
|
862
|
+
}
|
|
863
|
+
|
|
864
|
+
.tecof-upload-empty-state {
|
|
865
|
+
display: flex;
|
|
866
|
+
flex-direction: column;
|
|
867
|
+
align-items: center;
|
|
868
|
+
justify-content: center;
|
|
869
|
+
padding: 24px 16px;
|
|
870
|
+
background: #fafafa;
|
|
871
|
+
border: 2px dashed #e4e4e7;
|
|
872
|
+
border-radius: 12px;
|
|
873
|
+
cursor: pointer;
|
|
874
|
+
transition: all 0.2s ease;
|
|
875
|
+
}
|
|
876
|
+
|
|
877
|
+
.tecof-upload-empty-state:hover {
|
|
878
|
+
border-color: var(--tecof-primary-500, #3b82f6);
|
|
879
|
+
background: #f8fafc;
|
|
880
|
+
}
|
|
881
|
+
|
|
882
|
+
.tecof-upload-empty-icon {
|
|
883
|
+
width: 48px;
|
|
884
|
+
height: 48px;
|
|
885
|
+
border-radius: 12px;
|
|
886
|
+
background: linear-gradient(135deg, #eff6ff, #dbeafe);
|
|
887
|
+
display: flex;
|
|
888
|
+
align-items: center;
|
|
889
|
+
justify-content: center;
|
|
890
|
+
color: var(--tecof-primary-500, #3b82f6);
|
|
891
|
+
margin-bottom: 12px;
|
|
892
|
+
}
|
|
893
|
+
|
|
894
|
+
.tecof-upload-empty-title {
|
|
895
|
+
font-size: 13px;
|
|
896
|
+
font-weight: 600;
|
|
897
|
+
color: #3f3f46;
|
|
898
|
+
margin: 0 0 4px 0;
|
|
899
|
+
}
|
|
900
|
+
|
|
901
|
+
.tecof-upload-empty-desc {
|
|
902
|
+
font-size: 12px;
|
|
903
|
+
color: #a1a1aa;
|
|
904
|
+
margin: 0;
|
|
905
|
+
text-align: center;
|
|
906
|
+
}
|
|
907
|
+
|
|
908
|
+
.tecof-upload-file-item {
|
|
909
|
+
display: flex;
|
|
910
|
+
align-items: center;
|
|
911
|
+
gap: 12px;
|
|
912
|
+
padding: 10px 12px;
|
|
913
|
+
background: #ffffff;
|
|
914
|
+
border: 1px solid #e4e4e7;
|
|
915
|
+
border-radius: 12px;
|
|
916
|
+
transition: all 0.2s ease;
|
|
917
|
+
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
|
|
918
|
+
}
|
|
919
|
+
|
|
920
|
+
.tecof-upload-file-item:hover {
|
|
921
|
+
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
|
|
922
|
+
border-color: #d4d4d8;
|
|
923
|
+
}
|
|
924
|
+
|
|
925
|
+
.tecof-upload-file-thumb {
|
|
926
|
+
width: 48px;
|
|
927
|
+
height: 48px;
|
|
928
|
+
border-radius: 10px;
|
|
929
|
+
object-fit: cover;
|
|
930
|
+
background: #f4f4f5;
|
|
931
|
+
flex-shrink: 0;
|
|
932
|
+
overflow: hidden;
|
|
933
|
+
}
|
|
934
|
+
|
|
935
|
+
.tecof-upload-file-icon {
|
|
936
|
+
width: 48px;
|
|
937
|
+
height: 48px;
|
|
938
|
+
border-radius: 10px;
|
|
939
|
+
background: linear-gradient(135deg, #eff6ff, #dbeafe);
|
|
940
|
+
display: flex;
|
|
941
|
+
align-items: center;
|
|
942
|
+
justify-content: center;
|
|
943
|
+
color: var(--tecof-primary-500, #3b82f6);
|
|
944
|
+
flex-shrink: 0;
|
|
945
|
+
}
|
|
946
|
+
|
|
947
|
+
.tecof-upload-file-info {
|
|
948
|
+
flex: 1;
|
|
949
|
+
min-width: 0;
|
|
950
|
+
}
|
|
951
|
+
|
|
952
|
+
.tecof-upload-file-name {
|
|
953
|
+
font-size: 13px;
|
|
954
|
+
font-weight: 500;
|
|
955
|
+
color: #18181b;
|
|
956
|
+
white-space: nowrap;
|
|
957
|
+
overflow: hidden;
|
|
958
|
+
text-overflow: ellipsis;
|
|
959
|
+
margin: 0;
|
|
960
|
+
line-height: 18px;
|
|
961
|
+
}
|
|
962
|
+
|
|
963
|
+
.tecof-upload-file-meta {
|
|
964
|
+
display: flex;
|
|
965
|
+
align-items: center;
|
|
966
|
+
gap: 6px;
|
|
967
|
+
margin-top: 4px;
|
|
968
|
+
}
|
|
969
|
+
|
|
970
|
+
.tecof-upload-file-badge {
|
|
971
|
+
font-size: 10px;
|
|
972
|
+
font-weight: 700;
|
|
973
|
+
padding: 2px 6px;
|
|
974
|
+
background: #dbeafe;
|
|
975
|
+
color: var(--tecof-primary-600, #2563eb);
|
|
976
|
+
border-radius: 4px;
|
|
977
|
+
line-height: 14px;
|
|
978
|
+
letter-spacing: 0.3px;
|
|
979
|
+
}
|
|
980
|
+
|
|
981
|
+
.tecof-upload-file-size {
|
|
982
|
+
font-size: 11px;
|
|
983
|
+
color: #a1a1aa;
|
|
984
|
+
margin: 0;
|
|
985
|
+
}
|
|
986
|
+
|
|
987
|
+
.tecof-upload-file-actions {
|
|
988
|
+
display: flex;
|
|
989
|
+
align-items: center;
|
|
990
|
+
gap: 2px;
|
|
991
|
+
flex-shrink: 0;
|
|
992
|
+
}
|
|
993
|
+
|
|
994
|
+
.tecof-upload-action-btn {
|
|
995
|
+
display: flex;
|
|
996
|
+
align-items: center;
|
|
997
|
+
justify-content: center;
|
|
998
|
+
width: 30px;
|
|
999
|
+
height: 30px;
|
|
1000
|
+
color: #a1a1aa;
|
|
1001
|
+
background: none;
|
|
1002
|
+
border: none;
|
|
1003
|
+
border-radius: 8px;
|
|
1004
|
+
cursor: pointer;
|
|
1005
|
+
transition: all 0.15s ease;
|
|
1006
|
+
}
|
|
1007
|
+
|
|
1008
|
+
.tecof-upload-action-btn:hover {
|
|
1009
|
+
background: #f4f4f5;
|
|
1010
|
+
color: #18181b;
|
|
1011
|
+
}
|
|
1012
|
+
|
|
1013
|
+
.tecof-upload-action-btn-danger {
|
|
1014
|
+
color: #ef4444;
|
|
1015
|
+
}
|
|
1016
|
+
|
|
1017
|
+
.tecof-upload-action-btn-danger:hover {
|
|
1018
|
+
background: #fef2f2;
|
|
1019
|
+
color: #ef4444;
|
|
1020
|
+
}
|
|
1021
|
+
|
|
1022
|
+
.tecof-upload-main-actions {
|
|
1023
|
+
display: flex;
|
|
1024
|
+
gap: 8px;
|
|
1025
|
+
}
|
|
1026
|
+
|
|
1027
|
+
.tecof-upload-btn-primary {
|
|
1028
|
+
display: flex;
|
|
1029
|
+
align-items: center;
|
|
1030
|
+
gap: 6px;
|
|
1031
|
+
flex: 1;
|
|
1032
|
+
justify-content: center;
|
|
1033
|
+
padding: 12px 10px;
|
|
1034
|
+
font-size: 13px;
|
|
1035
|
+
font-weight: 600;
|
|
1036
|
+
color: #ffffff;
|
|
1037
|
+
background: linear-gradient(135deg, var(--tecof-primary-500, #3b82f6), var(--tecof-primary-600, #2563eb));
|
|
1038
|
+
border: none;
|
|
1039
|
+
border-radius: 10px;
|
|
1040
|
+
cursor: pointer;
|
|
1041
|
+
transition: all 0.2s ease;
|
|
1042
|
+
box-shadow: 0 2px 8px rgba(59,130,246,0.25);
|
|
1043
|
+
}
|
|
1044
|
+
|
|
1045
|
+
.tecof-upload-btn-primary:hover {
|
|
1046
|
+
box-shadow: 0 4px 12px rgba(59,130,246,0.35);
|
|
1047
|
+
transform: translateY(-1px);
|
|
1048
|
+
}
|
|
1049
|
+
|
|
1050
|
+
.tecof-upload-btn-secondary {
|
|
1051
|
+
display: flex;
|
|
1052
|
+
align-items: center;
|
|
1053
|
+
gap: 6px;
|
|
1054
|
+
flex: 1;
|
|
1055
|
+
justify-content: center;
|
|
1056
|
+
padding: 12px 10px;
|
|
1057
|
+
font-size: 13px;
|
|
1058
|
+
font-weight: 500;
|
|
1059
|
+
color: #3f3f46;
|
|
1060
|
+
background: #ffffff;
|
|
1061
|
+
border: 1px solid #e4e4e7;
|
|
1062
|
+
border-radius: 10px;
|
|
1063
|
+
cursor: pointer;
|
|
1064
|
+
transition: all 0.2s ease;
|
|
1065
|
+
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
|
|
1066
|
+
}
|
|
1067
|
+
|
|
1068
|
+
.tecof-upload-btn-secondary:hover {
|
|
1069
|
+
background: #f4f4f5;
|
|
1070
|
+
}
|
|
1071
|
+
|
|
1072
|
+
.tecof-upload-pond-section {
|
|
1073
|
+
border: 1px solid #e4e4e7;
|
|
1074
|
+
border-radius: 12px;
|
|
1075
|
+
overflow: hidden;
|
|
1076
|
+
background: #ffffff;
|
|
1077
|
+
}
|
|
1078
|
+
|
|
1079
|
+
.tecof-upload-pond-header {
|
|
1080
|
+
display: flex;
|
|
1081
|
+
justify-content: space-between;
|
|
1082
|
+
align-items: center;
|
|
1083
|
+
padding: 10px 14px;
|
|
1084
|
+
background: #fafafa;
|
|
1085
|
+
border-bottom: 1px solid #f4f4f5;
|
|
1086
|
+
}
|
|
1087
|
+
|
|
1088
|
+
.tecof-upload-pond-header-title {
|
|
1089
|
+
font-size: 12px;
|
|
1090
|
+
font-weight: 600;
|
|
1091
|
+
color: #52525b;
|
|
1092
|
+
margin: 0;
|
|
1093
|
+
display: flex;
|
|
1094
|
+
align-items: center;
|
|
1095
|
+
gap: 6px;
|
|
1096
|
+
}
|
|
1097
|
+
|
|
1098
|
+
.tecof-upload-pond-close-btn {
|
|
1099
|
+
display: flex;
|
|
1100
|
+
align-items: center;
|
|
1101
|
+
justify-content: center;
|
|
1102
|
+
width: 24px;
|
|
1103
|
+
height: 24px;
|
|
1104
|
+
background: #e4e4e7;
|
|
1105
|
+
border: none;
|
|
1106
|
+
border-radius: 6px;
|
|
1107
|
+
cursor: pointer;
|
|
1108
|
+
color: #71717a;
|
|
1109
|
+
transition: all 0.15s ease;
|
|
1110
|
+
}
|
|
1111
|
+
|
|
1112
|
+
.tecof-upload-pond-close-btn:hover {
|
|
1113
|
+
background: #d4d4d8;
|
|
1114
|
+
color: #3f3f46;
|
|
1115
|
+
}
|
|
1116
|
+
|
|
1117
|
+
.tecof-upload-pond-body {
|
|
1118
|
+
padding: 8px;
|
|
1119
|
+
}
|
|
1120
|
+
|
|
1121
|
+
.tecof-upload-drawer-overlay {
|
|
1122
|
+
position: fixed;
|
|
1123
|
+
inset: 0;
|
|
1124
|
+
background: rgba(0, 0, 0, 0.5);
|
|
1125
|
+
backdrop-filter: blur(4px);
|
|
1126
|
+
-webkit-backdrop-filter: blur(4px);
|
|
1127
|
+
z-index: 9999;
|
|
1128
|
+
}
|
|
1129
|
+
|
|
1130
|
+
.tecof-upload-drawer-content {
|
|
1131
|
+
position: fixed;
|
|
1132
|
+
bottom: 0;
|
|
1133
|
+
left: 0;
|
|
1134
|
+
right: 0;
|
|
1135
|
+
height: 85vh;
|
|
1136
|
+
display: flex;
|
|
1137
|
+
flex-direction: column;
|
|
1138
|
+
background: #ffffff;
|
|
1139
|
+
border-top-left-radius: 20px;
|
|
1140
|
+
border-top-right-radius: 20px;
|
|
1141
|
+
z-index: 10000;
|
|
1142
|
+
box-shadow: 0 -8px 40px rgba(0,0,0,0.12);
|
|
1143
|
+
}
|
|
1144
|
+
|
|
1145
|
+
.tecof-upload-drawer-handle {
|
|
1146
|
+
width: 36px;
|
|
1147
|
+
height: 4px;
|
|
1148
|
+
border-radius: 2px;
|
|
1149
|
+
background: #d4d4d8;
|
|
1150
|
+
margin: 10px auto 0;
|
|
1151
|
+
flex-shrink: 0;
|
|
1152
|
+
}
|
|
1153
|
+
|
|
1154
|
+
.tecof-upload-drawer-inner {
|
|
1155
|
+
display: flex;
|
|
1156
|
+
flex-direction: column;
|
|
1157
|
+
flex: 1;
|
|
1158
|
+
padding: 12px 16px 16px;
|
|
1159
|
+
overflow: hidden;
|
|
1160
|
+
}
|
|
1161
|
+
|
|
1162
|
+
.tecof-upload-drawer-header {
|
|
1163
|
+
display: flex;
|
|
1164
|
+
justify-content: space-between;
|
|
1165
|
+
align-items: center;
|
|
1166
|
+
margin-bottom: 12px;
|
|
1167
|
+
flex-shrink: 0;
|
|
1168
|
+
}
|
|
1169
|
+
|
|
1170
|
+
.tecof-upload-drawer-title {
|
|
1171
|
+
font-size: 16px;
|
|
1172
|
+
font-weight: 700;
|
|
1173
|
+
color: #18181b;
|
|
1174
|
+
margin: 0;
|
|
1175
|
+
letter-spacing: -0.01em;
|
|
1176
|
+
}
|
|
1177
|
+
|
|
1178
|
+
.tecof-upload-drawer-header-actions {
|
|
1179
|
+
display: flex;
|
|
1180
|
+
gap: 6px;
|
|
1181
|
+
align-items: center;
|
|
1182
|
+
}
|
|
1183
|
+
|
|
1184
|
+
.tecof-upload-drawer-action-btn {
|
|
1185
|
+
background: #f4f4f5;
|
|
1186
|
+
border: 1px solid #e4e4e7;
|
|
1187
|
+
border-radius: 8px;
|
|
1188
|
+
width: 34px;
|
|
1189
|
+
height: 34px;
|
|
1190
|
+
display: flex;
|
|
1191
|
+
align-items: center;
|
|
1192
|
+
justify-content: center;
|
|
1193
|
+
cursor: pointer;
|
|
1194
|
+
transition: all 0.15s ease;
|
|
1195
|
+
color: #52525b;
|
|
1196
|
+
}
|
|
1197
|
+
|
|
1198
|
+
.tecof-upload-drawer-action-btn:hover {
|
|
1199
|
+
background: #e4e4e7;
|
|
1200
|
+
color: #18181b;
|
|
1201
|
+
}
|
|
1202
|
+
|
|
1203
|
+
.tecof-upload-search-box {
|
|
1204
|
+
display: flex;
|
|
1205
|
+
align-items: center;
|
|
1206
|
+
gap: 8px;
|
|
1207
|
+
padding: 9px 12px;
|
|
1208
|
+
background: #f4f4f5;
|
|
1209
|
+
border-radius: 10px;
|
|
1210
|
+
margin-bottom: 14px;
|
|
1211
|
+
flex-shrink: 0;
|
|
1212
|
+
border: 1px solid transparent;
|
|
1213
|
+
transition: all 0.15s ease;
|
|
1214
|
+
}
|
|
1215
|
+
|
|
1216
|
+
.tecof-upload-search-box:focus-within {
|
|
1217
|
+
background: #ffffff;
|
|
1218
|
+
border-color: var(--tecof-primary-500, #3b82f6);
|
|
1219
|
+
box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
|
|
1220
|
+
}
|
|
1221
|
+
|
|
1222
|
+
.tecof-upload-search-input {
|
|
1223
|
+
flex: 1;
|
|
1224
|
+
border: none;
|
|
1225
|
+
background: transparent;
|
|
1226
|
+
outline: none;
|
|
1227
|
+
font-size: 13px;
|
|
1228
|
+
color: #18181b;
|
|
1229
|
+
font-family: 'Inter', system-ui, sans-serif;
|
|
1230
|
+
}
|
|
1231
|
+
|
|
1232
|
+
.tecof-upload-gallery-grid {
|
|
1233
|
+
display: grid;
|
|
1234
|
+
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
|
|
1235
|
+
gap: 10px;
|
|
1236
|
+
overflow-y: auto;
|
|
1237
|
+
flex: 1;
|
|
1238
|
+
padding-bottom: 16px;
|
|
1239
|
+
}
|
|
1240
|
+
|
|
1241
|
+
.tecof-upload-gallery-item {
|
|
1242
|
+
position: relative;
|
|
1243
|
+
display: flex;
|
|
1244
|
+
flex-direction: column;
|
|
1245
|
+
align-items: center;
|
|
1246
|
+
padding: 6px;
|
|
1247
|
+
background: #ffffff;
|
|
1248
|
+
border: 2px solid #f4f4f5;
|
|
1249
|
+
border-radius: 10px;
|
|
1250
|
+
cursor: pointer;
|
|
1251
|
+
transition: all 0.2s ease;
|
|
1252
|
+
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
|
|
1253
|
+
}
|
|
1254
|
+
|
|
1255
|
+
.tecof-upload-gallery-item:hover {
|
|
1256
|
+
border-color: #d4d4d8;
|
|
1257
|
+
}
|
|
1258
|
+
|
|
1259
|
+
.tecof-upload-gallery-item.selected {
|
|
1260
|
+
background: #eff6ff;
|
|
1261
|
+
border-color: var(--tecof-primary-500, #3b82f6);
|
|
1262
|
+
box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
|
|
1263
|
+
}
|
|
1264
|
+
|
|
1265
|
+
.tecof-upload-gallery-check {
|
|
1266
|
+
position: absolute;
|
|
1267
|
+
top: 6px;
|
|
1268
|
+
right: 6px;
|
|
1269
|
+
width: 20px;
|
|
1270
|
+
height: 20px;
|
|
1271
|
+
border-radius: 50%;
|
|
1272
|
+
background: var(--tecof-primary-500, #3b82f6);
|
|
1273
|
+
display: flex;
|
|
1274
|
+
align-items: center;
|
|
1275
|
+
justify-content: center;
|
|
1276
|
+
color: #ffffff;
|
|
1277
|
+
z-index: 1;
|
|
1278
|
+
box-shadow: 0 1px 4px rgba(59,130,246,0.3);
|
|
1279
|
+
}
|
|
1280
|
+
|
|
1281
|
+
.tecof-upload-gallery-thumb {
|
|
1282
|
+
width: 100%;
|
|
1283
|
+
aspect-ratio: 1;
|
|
1284
|
+
object-fit: cover;
|
|
1285
|
+
border-radius: 6px;
|
|
1286
|
+
margin-bottom: 6px;
|
|
1287
|
+
}
|
|
1288
|
+
|
|
1289
|
+
.tecof-upload-gallery-file-name {
|
|
1290
|
+
font-size: 11px;
|
|
1291
|
+
font-weight: 500;
|
|
1292
|
+
color: #52525b;
|
|
1293
|
+
width: 100%;
|
|
1294
|
+
text-align: center;
|
|
1295
|
+
white-space: nowrap;
|
|
1296
|
+
overflow: hidden;
|
|
1297
|
+
text-overflow: ellipsis;
|
|
1298
|
+
margin: 0;
|
|
1299
|
+
line-height: 15px;
|
|
1300
|
+
}
|
|
1301
|
+
|
|
1302
|
+
.tecof-upload-gallery-empty {
|
|
1303
|
+
display: flex;
|
|
1304
|
+
flex-direction: column;
|
|
1305
|
+
align-items: center;
|
|
1306
|
+
justify-content: center;
|
|
1307
|
+
padding: 48px 24px;
|
|
1308
|
+
color: #a1a1aa;
|
|
1309
|
+
text-align: center;
|
|
1310
|
+
}
|
|
1311
|
+
|
|
1312
|
+
.tecof-upload-gallery-empty-icon {
|
|
1313
|
+
width: 56px;
|
|
1314
|
+
height: 56px;
|
|
1315
|
+
border-radius: 14px;
|
|
1316
|
+
background: #f4f4f5;
|
|
1317
|
+
display: flex;
|
|
1318
|
+
align-items: center;
|
|
1319
|
+
justify-content: center;
|
|
1320
|
+
margin-bottom: 16px;
|
|
1321
|
+
}
|
|
1322
|
+
|
|
1323
|
+
.tecof-upload-uploaded-header {
|
|
1324
|
+
display: flex;
|
|
1325
|
+
align-items: center;
|
|
1326
|
+
justify-content: space-between;
|
|
1327
|
+
margin: 2px 0 4px 0;
|
|
1328
|
+
}
|
|
1329
|
+
|
|
1330
|
+
.tecof-upload-uploaded-label {
|
|
1331
|
+
font-size: 11px;
|
|
1332
|
+
font-weight: 600;
|
|
1333
|
+
color: #a1a1aa;
|
|
1334
|
+
text-transform: uppercase;
|
|
1335
|
+
letter-spacing: 0.5px;
|
|
1336
|
+
margin: 0;
|
|
1337
|
+
}
|
|
1338
|
+
|
|
1339
|
+
.tecof-upload-count-badge {
|
|
1340
|
+
font-size: 10px;
|
|
1341
|
+
font-weight: 700;
|
|
1342
|
+
color: var(--tecof-primary-500, #3b82f6);
|
|
1343
|
+
background: #eff6ff;
|
|
1344
|
+
border-radius: 10px;
|
|
1345
|
+
padding: 2px 8px;
|
|
1346
|
+
line-height: 14px;
|
|
1347
|
+
}
|
|
1348
|
+
|
|
1349
|
+
/* ─── TecofEditor ─── */
|
|
1350
|
+
.tecof-editor-wrapper {
|
|
1351
|
+
position: relative;
|
|
1352
|
+
width: 100%;
|
|
1353
|
+
height: 100%;
|
|
1354
|
+
}
|
|
1355
|
+
|
|
1356
|
+
.tecof-editor-loading {
|
|
1357
|
+
display: flex;
|
|
1358
|
+
align-items: center;
|
|
1359
|
+
justify-content: center;
|
|
1360
|
+
min-height: 100vh;
|
|
1361
|
+
background: #fafafa;
|
|
1362
|
+
}
|
|
1363
|
+
|
|
1364
|
+
.tecof-editor-loading-inner {
|
|
1365
|
+
text-align: center;
|
|
1366
|
+
}
|
|
1367
|
+
|
|
1368
|
+
.tecof-editor-loading-text {
|
|
1369
|
+
font-size: 14px;
|
|
1370
|
+
color: #71717a;
|
|
1371
|
+
font-family: 'Inter', system-ui, sans-serif;
|
|
1372
|
+
}
|
|
1373
|
+
|
|
1374
|
+
.tecof-editor-error {
|
|
1375
|
+
display: flex;
|
|
1376
|
+
align-items: center;
|
|
1377
|
+
justify-content: center;
|
|
1378
|
+
min-height: 200px;
|
|
1379
|
+
padding: 24px;
|
|
1380
|
+
font-size: 14px;
|
|
1381
|
+
color: #ef4444;
|
|
1382
|
+
font-family: 'Inter', system-ui, sans-serif;
|
|
1383
|
+
}
|
|
1384
|
+
|
|
1385
|
+
.tecof-editor-save-indicator {
|
|
1386
|
+
position: fixed;
|
|
1387
|
+
bottom: 20px;
|
|
1388
|
+
right: 20px;
|
|
1389
|
+
padding: 8px 16px;
|
|
1390
|
+
background: #18181b;
|
|
1391
|
+
color: #ffffff;
|
|
1392
|
+
font-size: 13px;
|
|
1393
|
+
font-weight: 500;
|
|
1394
|
+
border-radius: 8px;
|
|
1395
|
+
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
1396
|
+
z-index: 9999;
|
|
1397
|
+
font-family: 'Inter', system-ui, sans-serif;
|
|
1398
|
+
}
|
|
1399
|
+
|
|
1400
|
+
.tecof-editor-spinner {
|
|
1401
|
+
width: 40px;
|
|
1402
|
+
height: 40px;
|
|
1403
|
+
border: 3px solid #e4e4e7;
|
|
1404
|
+
border-top-color: #18181b;
|
|
1405
|
+
border-radius: 50%;
|
|
1406
|
+
margin: 0 auto 12px;
|
|
1407
|
+
animation: tecof-spin 0.7s linear infinite;
|
|
1408
|
+
}
|
|
1409
|
+
|
|
1410
|
+
@keyframes tecof-spin {
|
|
1411
|
+
to { transform: rotate(360deg); }
|
|
1412
|
+
}
|
|
1413
|
+
|
|
1414
|
+
/* ─── TecofPicture ─── */
|
|
1415
|
+
.tecof-picture-wrapper {
|
|
1416
|
+
position: relative;
|
|
1417
|
+
display: block;
|
|
1418
|
+
overflow: hidden;
|
|
1419
|
+
}
|
|
1420
|
+
|
|
1421
|
+
.tecof-picture-wrapper.fill {
|
|
1422
|
+
width: 100%;
|
|
1423
|
+
height: 100%;
|
|
1424
|
+
}
|
|
1425
|
+
|
|
1426
|
+
.tecof-picture-img {
|
|
1427
|
+
display: block;
|
|
1428
|
+
width: 100%;
|
|
1429
|
+
height: auto;
|
|
1430
|
+
object-fit: cover;
|
|
1431
|
+
}
|
|
1432
|
+
|
|
1433
|
+
.tecof-picture-img-fill {
|
|
1434
|
+
position: absolute;
|
|
1435
|
+
top: 0;
|
|
1436
|
+
left: 0;
|
|
1437
|
+
width: 100%;
|
|
1438
|
+
height: 100%;
|
|
1439
|
+
object-fit: cover;
|
|
1440
|
+
}
|
|
1441
|
+
|
|
1442
|
+
.tecof-picture-video {
|
|
1443
|
+
display: block;
|
|
1444
|
+
width: 100%;
|
|
1445
|
+
height: auto;
|
|
1446
|
+
object-fit: cover;
|
|
1447
|
+
}
|
|
1448
|
+
|
|
1449
|
+
/* ─── UploadField Additions ─── */
|
|
1450
|
+
.tecof-upload-file-list {
|
|
1451
|
+
display: flex;
|
|
1452
|
+
flex-direction: column;
|
|
1453
|
+
gap: 6px;
|
|
1454
|
+
}
|
|
1455
|
+
|
|
1456
|
+
.tecof-upload-spin {
|
|
1457
|
+
animation: tecof-spin 1s linear infinite;
|
|
1458
|
+
}
|
|
1459
|
+
|
|
1460
|
+
.tecof-upload-clear-search-btn {
|
|
1461
|
+
width: 20px;
|
|
1462
|
+
height: 20px;
|
|
1463
|
+
}
|
|
1464
|
+
|
|
1465
|
+
.tecof-upload-loading-text {
|
|
1466
|
+
font-size: 13px;
|
|
1467
|
+
font-weight: 500;
|
|
1468
|
+
color: #71717a;
|
|
1469
|
+
margin: 0;
|
|
1470
|
+
}
|
|
1471
|
+
|
|
1472
|
+
.tecof-upload-empty-heading {
|
|
1473
|
+
font-size: 13px;
|
|
1474
|
+
font-weight: 500;
|
|
1475
|
+
color: #71717a;
|
|
1476
|
+
margin: 0 0 4px 0;
|
|
1477
|
+
}
|
|
1478
|
+
|
|
1479
|
+
.tecof-upload-empty-subheading {
|
|
1480
|
+
font-size: 12px;
|
|
1481
|
+
color: #a1a1aa;
|
|
1482
|
+
margin: 0;
|
|
1483
|
+
}
|
|
1484
|
+
|
|
1485
|
+
.tecof-upload-gallery-file-icon-wrap {
|
|
1486
|
+
display: flex;
|
|
1487
|
+
align-items: center;
|
|
1488
|
+
justify-content: center;
|
|
1489
|
+
background: #f4f4f5;
|
|
1490
|
+
border-radius: 6px;
|
|
1491
|
+
}
|
|
1492
|
+
|
|
1493
|
+
/* ─── Extra Helpers ─── */
|
|
1494
|
+
.tecof-flex-1 { flex: 1; }
|
|
1495
|
+
.tecof-flex-none { flex: none; }
|
|
1496
|
+
.tecof-pad-8-16 { padding: 8px 16px; }
|
|
1497
|
+
.tecof-text-center { text-align: center; }
|
|
1498
|
+
.tecof-p-40 { padding: 40px; }
|
|
1499
|
+
.tecof-text-muted { color: #a1a1aa; }
|
|
1500
|
+
.tecof-min-w-0 { min-width: 0; }
|
|
1501
|
+
.tecof-underline { text-decoration: underline; }
|
|
1502
|
+
.tecof-line-through { text-decoration: line-through; }
|
|
1503
|
+
.tecof-spin { animation: tecof-spin 1s linear infinite; }
|
|
1504
|
+
|
|
1505
|
+
.tecof-lang-loading-dot:nth-child(1) { animation: tecof-pulse 1.2s ease-in-out infinite; }
|
|
1506
|
+
.tecof-lang-loading-dot:nth-child(2) { animation: tecof-pulse 1.2s ease-in-out 0.2s infinite; }
|
|
1507
|
+
.tecof-lang-loading-dot:nth-child(3) { animation: tecof-pulse 1.2s ease-in-out 0.4s infinite; }
|