@rogieking/figui3 6.3.0 → 6.4.1

package/dist/fig-editor.css

@@ -1 +1 @@
-fig-fill-picker{display:contents;&>[slot^=mode-]{display:none}}.fig-fill-picker-dialog{contain:layout;width:240px;padding:0;&>fig-header{padding:var(--spacer-2);justify-content:space-between;align-items:center;display:flex}& fig-tab{padding:var(--spacer-1) var(--spacer-1);font-size:.6875rem}&>fig-content{padding-bottom:var(--spacer-2-5)}& .fig-fill-picker-type-label{font-size:var(--font-size-small);font-weight:var(--font-weight-medium);color:var(--figma-color-text);padding:var(--spacer-1) var(--spacer-2)}& .fig-fill-picker-gamut{margin-left:auto}& .fig-fill-picker-tab{display:none;&:first-child{display:block}}& fig-preview{overflow:visible}& .fig-fill-picker-color-area{aspect-ratio:1;width:calc(100% - var(--spacer-3) * 2);margin:var(--spacer-2) var(--spacer-3);&>:not(fig-handle){border-radius:inherit;place-self:center;width:100%;height:100%}& canvas{border-radius:var(--radius-medium);width:100%;height:100%}}& .fig-fill-picker-color-area fig-handle{z-index:1}& .fig-fill-picker-sliders{grid-template-columns:calc(3.5rem + var(--spacer-3)) 1fr;padding-right:var(--spacer-3);align-items:center;gap:var(--spacer-2);padding-bottom:var(--spacer-1);grid-template-rows:1fr 1fr;display:grid;& .fig-fill-picker-eyedropper{margin-right:calc(var(--spacer-3) * -1);aspect-ratio:1;grid-area:1/1/3;place-self:center;width:3.5rem;height:3.5rem}& fig-slider{grid-column:2;min-width:0}}& .fig-fill-picker-inputs{& .fig-fill-picker-input-fields{flex:1;min-width:0;display:flex;& .input-combo,& fig-input-text{flex:1;min-width:0}}}& .fig-fill-picker-gradient-preview{aspect-ratio:auto;width:calc(100% - var(--spacer-3) * 2);margin:var(--spacer-2) var(--spacer-3);margin-top:calc(var(--spacer-4) + var(--spacer-1));background:0 0;&:after{display:none}}& .fig-fill-picker-gradient-header{padding-right:var(--spacer-2);padding-left:var(--spacer-3);gap:var(--spacer-2);display:flex;& .fig-fill-picker-gradient-type{flex:1;min-width:0}&>:last-child fig-button{margin-left:auto}& .fig-fill-picker-gradient-center{& fig-input-number{width:48px}}}& .fig-fill-picker-gradient-stops{& .fig-fill-picker-gradient-stops-header{&>span{flex:1}}}& .fig-fill-picker-gradient-stops-list{gap:var(--spacer-1);flex-direction:column;display:flex}& .fig-fill-picker-gradient-stop-row{padding-right:var(--spacer-2);padding-left:var(--spacer-3);gap:var(--spacer-2);display:flex;&>.fig-fill-picker-stop-position{flex:0 3rem;width:3rem;min-width:0}& .fig-fill-picker-stop-color{flex:1;min-width:0;& fig-input-text{min-width:0}}& .fig-fill-picker-stop-remove{flex-shrink:0}}& .fig-fill-picker-media-header{& .fig-fill-picker-scale-mode{flex:none}& .fig-fill-picker-scale{width:56px}}& .fig-fill-picker-media-preview{aspect-ratio:1;margin:var(--spacer-2) var(--spacer-3) var(--spacer-1) var(--spacer-3);border-radius:var(--radius-medium);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden;&.dragover{outline:2px dashed var(--figma-color-border-brand);outline-offset:-2px}&.has-media{& fig-button{visibility:hidden}&:hover{& fig-button{visibility:visible}}}}& .fig-fill-picker-checkerboard{background-image:linear-gradient(45deg, var(--figma-color-bg-tertiary) 25%, transparent 25%), linear-gradient(-45deg, var(--figma-color-bg-tertiary) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--figma-color-bg-tertiary) 75%), linear-gradient(-45deg, transparent 75%, var(--figma-color-bg-tertiary) 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;position:absolute;inset:0}& div.fig-fill-picker-image-preview{width:100%;height:100%;display:none;position:absolute;inset:0}& fig-image.fig-fill-picker-image-preview{width:auto;max-width:none;max-height:none}& video.fig-fill-picker-video-preview{object-fit:cover;width:100%;height:100%;display:none;position:absolute;inset:0}& fig-media.fig-fill-picker-video-preview{width:auto;max-width:none;max-height:none}& .fig-fill-picker-upload{z-index:1;position:relative}& .fig-fill-picker-webcam-preview{aspect-ratio:1;width:calc(100% - var(--spacer-3) * 2);max-width:none;max-height:none;margin:0 var(--spacer-3);border-radius:var(--radius-medium);margin:var(--spacer-2) var(--spacer-3);display:flex;position:relative;overflow:hidden}& .fig-fill-picker-webcam-video{object-fit:cover;width:100%;height:100%}& .fig-fill-picker-webcam-status{background:var(--figma-color-bg-secondary);color:var(--figma-color-text-secondary);justify-content:center;align-items:center;font-size:.75rem;display:flex;position:absolute;inset:0}& .fig-fill-picker-webcam-controls{padding:0 var(--spacer-3);gap:var(--spacer-1);display:flex;& .fig-fill-picker-webcam-capture{width:100%}}}
+fig-fill-picker{display:contents}fig-fill-picker>[slot^=mode-]{display:none}.fig-fill-picker-dialog{contain:layout;width:240px;padding:0}.fig-fill-picker-dialog>fig-header{padding:var(--spacer-2);justify-content:space-between;align-items:center;display:flex}.fig-fill-picker-dialog fig-tab{padding:var(--spacer-1) var(--spacer-1);font-size:.6875rem}.fig-fill-picker-dialog>fig-content{padding-bottom:var(--spacer-2-5)}.fig-fill-picker-dialog .fig-fill-picker-type-label{font-size:var(--font-size-small);font-weight:var(--font-weight-medium);color:var(--figma-color-text);padding:var(--spacer-1) var(--spacer-2)}.fig-fill-picker-dialog .fig-fill-picker-gamut{margin-left:auto}.fig-fill-picker-dialog .fig-fill-picker-tab{display:none}.fig-fill-picker-dialog .fig-fill-picker-tab:first-child{display:block}.fig-fill-picker-dialog fig-preview{overflow:visible}.fig-fill-picker-dialog .fig-fill-picker-color-area{aspect-ratio:1;width:calc(100% - var(--spacer-3) * 2);margin:var(--spacer-2) var(--spacer-3)}.fig-fill-picker-dialog .fig-fill-picker-color-area>:not(fig-handle){border-radius:inherit;place-self:center;width:100%;height:100%}.fig-fill-picker-dialog .fig-fill-picker-color-area canvas{border-radius:var(--radius-medium);width:100%;height:100%}.fig-fill-picker-dialog .fig-fill-picker-color-area fig-handle{z-index:1}.fig-fill-picker-dialog .fig-fill-picker-sliders{grid-template-columns:calc(3.5rem + var(--spacer-3)) 1fr;padding-right:var(--spacer-3);align-items:center;gap:var(--spacer-2);padding-bottom:var(--spacer-1);grid-template-rows:1fr 1fr;display:grid}.fig-fill-picker-dialog .fig-fill-picker-sliders .fig-fill-picker-eyedropper{margin-right:calc(var(--spacer-3) * -1);aspect-ratio:1;grid-area:1/1/3;place-self:center;width:3.5rem;height:3.5rem}.fig-fill-picker-dialog .fig-fill-picker-sliders fig-slider{grid-column:2;min-width:0}.fig-fill-picker-dialog .fig-fill-picker-inputs .fig-fill-picker-input-fields{flex:1;min-width:0;display:flex}.fig-fill-picker-dialog .fig-fill-picker-inputs .fig-fill-picker-input-fields .input-combo,.fig-fill-picker-dialog .fig-fill-picker-inputs .fig-fill-picker-input-fields fig-input-text{flex:1;min-width:0}.fig-fill-picker-dialog .fig-fill-picker-gradient-preview{aspect-ratio:auto;width:calc(100% - var(--spacer-3) * 2);margin:var(--spacer-2) var(--spacer-3);margin-top:calc(var(--spacer-4) + var(--spacer-1));background:0 0}.fig-fill-picker-dialog .fig-fill-picker-gradient-preview:after{display:none}.fig-fill-picker-dialog .fig-fill-picker-gradient-header{padding-right:var(--spacer-2);padding-left:var(--spacer-3);gap:var(--spacer-2);display:flex}.fig-fill-picker-dialog .fig-fill-picker-gradient-header .fig-fill-picker-gradient-type{flex:1;min-width:0}.fig-fill-picker-dialog .fig-fill-picker-gradient-header>:last-child fig-button{margin-left:auto}.fig-fill-picker-dialog .fig-fill-picker-gradient-header .fig-fill-picker-gradient-center fig-input-number{width:48px}.fig-fill-picker-dialog .fig-fill-picker-gradient-stops .fig-fill-picker-gradient-stops-header>span{flex:1}.fig-fill-picker-dialog .fig-fill-picker-gradient-stops-list{gap:var(--spacer-1);flex-direction:column;display:flex}.fig-fill-picker-dialog .fig-fill-picker-gradient-stop-row{padding-right:var(--spacer-2);padding-left:var(--spacer-3);gap:var(--spacer-2);display:flex}.fig-fill-picker-dialog .fig-fill-picker-gradient-stop-row>.fig-fill-picker-stop-position{flex:0 3rem;width:3rem;min-width:0}.fig-fill-picker-dialog .fig-fill-picker-gradient-stop-row .fig-fill-picker-stop-color{flex:1;min-width:0}.fig-fill-picker-dialog .fig-fill-picker-gradient-stop-row .fig-fill-picker-stop-color fig-input-text{min-width:0}.fig-fill-picker-dialog .fig-fill-picker-gradient-stop-row .fig-fill-picker-stop-remove{flex-shrink:0}.fig-fill-picker-dialog .fig-fill-picker-media-header .fig-fill-picker-scale-mode{flex:none}.fig-fill-picker-dialog .fig-fill-picker-media-header .fig-fill-picker-scale{width:56px}.fig-fill-picker-dialog .fig-fill-picker-media-preview{aspect-ratio:1;margin:var(--spacer-2) var(--spacer-3) var(--spacer-1) var(--spacer-3);border-radius:var(--radius-medium);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.fig-fill-picker-dialog .fig-fill-picker-media-preview.dragover{outline:2px dashed var(--figma-color-border-brand);outline-offset:-2px}.fig-fill-picker-dialog .fig-fill-picker-media-preview.has-media fig-button{visibility:hidden}.fig-fill-picker-dialog .fig-fill-picker-media-preview.has-media:hover fig-button{visibility:visible}.fig-fill-picker-dialog .fig-fill-picker-checkerboard{background-image:linear-gradient(45deg, var(--figma-color-bg-tertiary) 25%, transparent 25%), linear-gradient(-45deg, var(--figma-color-bg-tertiary) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--figma-color-bg-tertiary) 75%), linear-gradient(-45deg, transparent 75%, var(--figma-color-bg-tertiary) 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;position:absolute;inset:0}.fig-fill-picker-dialog div.fig-fill-picker-image-preview{width:100%;height:100%;display:none;position:absolute;inset:0}.fig-fill-picker-dialog fig-image.fig-fill-picker-image-preview{width:auto;max-width:none;max-height:none}.fig-fill-picker-dialog video.fig-fill-picker-video-preview{object-fit:cover;width:100%;height:100%;display:none;position:absolute;inset:0}.fig-fill-picker-dialog fig-media.fig-fill-picker-video-preview{width:auto;max-width:none;max-height:none}.fig-fill-picker-dialog .fig-fill-picker-upload{z-index:1;position:relative}.fig-fill-picker-dialog .fig-fill-picker-webcam-preview{aspect-ratio:1;width:calc(100% - var(--spacer-3) * 2);max-width:none;max-height:none;margin:0 var(--spacer-3);border-radius:var(--radius-medium);margin:var(--spacer-2) var(--spacer-3);display:flex;position:relative;overflow:hidden}.fig-fill-picker-dialog .fig-fill-picker-webcam-video{object-fit:cover;width:100%;height:100%}.fig-fill-picker-dialog .fig-fill-picker-webcam-status{background:var(--figma-color-bg-secondary);color:var(--figma-color-text-secondary);justify-content:center;align-items:center;font-size:.75rem;display:flex;position:absolute;inset:0}.fig-fill-picker-dialog .fig-fill-picker-webcam-controls{padding:0 var(--spacer-3);gap:var(--spacer-1);display:flex}.fig-fill-picker-dialog .fig-fill-picker-webcam-controls .fig-fill-picker-webcam-capture{width:100%}