File: /var/www/vhosts/ensaco.es/httpdocs/wp-content/plugins/bb-plugin/css/build/fl-controls.bundle.css
/*!************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/FL/controls/components/style.scss ***!
\************************************************************************************************************************************************************/
.fl-controls-button {
display: grid;
grid-auto-flow: column;
place-content: center;
place-items: center;
gap: 8px;
border: 1px solid var(--fl-controls-outline-color);
border-radius: var(--fl-controls-radius);
background-color: var(--fl-controls-platter-bg-color);
color: var(--fl-controls-platter-color);
min-height: var(--fl-controls-target-size);
}
.fl-controls-button-group {
display: flex;
border: 1px solid var(--fl-controls-outline-color);
border-radius: var(--fl-controls-radius);
background-color: var(--fl-controls-panel-bg-color);
min-height: 30px;
}
.fl-controls-button-group > * {
flex-grow: 1;
display: grid;
place-content: center;
border-color: transparent;
background-color: var(--fl-controls-panel-bg-color);
border-radius: var(--fl-controls-radius);
}
.fl-controls-button-group > *.is-selected {
background-color: var(--fl-controls-platter-bg-color);
}
.fl-controls-button-group > *:focus {
outline: none;
}
.fl-controls-button-group > *:focus-visible {
outline: none;
box-shadow: inset 0 0 0 1.5px var(--fl-controls-accent-color);
}
.fl-controls-grid-table {
--col-count: 2;
--radius: var(--fl-controls-radius);
display: grid;
grid-template-columns: repeat(var(--col-count), minmax(0, 1fr));
grid-auto-rows: minmax(0, var(--fl-controls-target-size));
gap: 1px;
background-color: var(--fl-controls-outline-color);
border: 1px solid var(--fl-controls-outline-color);
border-radius: var(--radius);
}
.fl-controls-grid-table.with-heading {
grid-template-rows: 24px;
}
.fl-controls-grid-table > * {
grid-column: 1/-1;
display: grid;
grid-template-columns: subgrid;
align-items: center;
color: var(--fl-controls-color);
background-color: var(--fl-controls-bg-color);
}
.fl-controls-grid-table > *:first-child {
border-top-left-radius: var(--radius);
border-top-right-radius: var(--radius);
}
.fl-controls-grid-table > *:first-child:first-child {
border-top-left-radius: var(--radius);
}
.fl-controls-grid-table > *:first-child:last-child {
border-top-right-radius: var(--radius);
}
.fl-controls-grid-table > *:last-child {
border-bottom-left-radius: var(--radius);
border-bottom-right-radius: var(--radius);
}
.fl-controls-grid-table > *:last-child:first-child {
border-bottom-left-radius: var(--radius);
}
.fl-controls-grid-table > *:last-child:last-child {
border-bottom-right-radius: var(--radius);
}
.fl-controls-grid-table > *.heading-row {
background-color: var(--fl-controls-platter-bg-color);
color: var(--fl-controls-platter-color);
}
.fl-controls-grid-table > * > *:where(label), .fl-controls-grid-table > * > * label {
display: flex;
gap: 8px;
padding: 0 8px;
}
.fl-controls-grid-table > * > *:is(input, select, textarea),
.fl-controls-grid-table > * > * :is(input, select, textarea) {
align-self: stretch;
border: none !important;
box-shadow: none !important;
border-radius: 0;
margin: 0 !important;
background-color: transparent;
min-height: 0 !important;
max-height: var(--fl-controls-target-size);
}
.fl-controls-grid-table > * > * :only-child {
min-width: 100%;
}
/*!*******************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/FL/controls/components/dialog/style.scss ***!
\*******************************************************************************************************************************************************************/
.fl-controls-dialog {
box-sizing: border-box;
transform-origin: center top;
transition-property: scale, overlay, display;
transition-duration: 0.35s;
transition-timing-function: ease-in-out;
transition-behavior: allow-discrete;
}
.fl-controls-dialog.fl-appearance-none {
background: transparent;
padding: 0;
border: none;
}
.fl-controls-dialog.fl-appearance-none[open] {
scale: 1;
}
@starting-style {
.fl-controls-dialog.fl-appearance-none {
scale: 0;
}
}
.fl-controls-dialog.fl-appearance-none::backdrop {
background: transparent;
}
.fl-controls-dialog.fl-appearance-panel {
--radius: 8px;
--fg-color: var(--fl-controls-panel-color);
--bg-color: var(--fl-controls-panel-bg-color);
background: var(--bg-color);
padding: 0;
border: 1px solid var(--fl-controls-outline-color);
place-content: start stretch;
border-radius: var(--radius);
scale: 0;
box-shadow: 0 0 40px rgba(0, 0, 0, 0);
overflow: visible;
}
.fl-controls-dialog.fl-appearance-panel:not(.uses-view-transitions) {
transition-duration: 0.15s;
transition-timing-function: cubic-bezier(1, 0, 0, 1);
}
.fl-controls-dialog.fl-appearance-panel[open] {
scale: 1;
display: grid;
place-content: start stretch;
box-shadow: 0px 1.7px 1.1px -15px rgba(0, 0, 0, 0.022), 0px 3.9px 2.5px -15px rgba(0, 0, 0, 0.033), 0px 6.7px 4.3px -15px rgba(0, 0, 0, 0.04), 0px 10.3px 6.6px -15px rgba(0, 0, 0, 0.047), 0px 15.2px 9.7px -15px rgba(0, 0, 0, 0.053), 0px 22.3px 14.3px -15px rgba(0, 0, 0, 0.06), 0px 33.5px 21.4px -15px rgba(0, 0, 0, 0.067), 0px 53.4px 34.1px -15px rgba(0, 0, 0, 0.078), 0px 100px 64px -15px rgba(0, 0, 0, 0.1);
}
@starting-style {
.fl-controls-dialog.fl-appearance-panel[open] {
scale: 0;
}
}
.fl-controls-dialog.fl-appearance-panel::backdrop {
background: transparent;
}
/*!*********************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/FL/controls/components/color/ui/style.scss ***!
\*********************************************************************************************************************************************************************/
body div.fl-color-picker-toolbar {
color: black;
color: var(--fg-color);
align-items: center;
}
body div.fl-color-picker-toolbar button {
color: var(--fg-color);
padding: 0;
}
body div.fl-color-picker-toolbar input[type=text] {
background: transparent !important;
border: none;
outline: none;
padding: 0;
box-shadow: none;
height: auto;
min-height: none;
font-family: ui-monospace, monospace;
font-size: 12px;
}
body div.fl-color-picker-toolbar input[type=text]:focus, body div.fl-color-picker-toolbar input[type=text]:focus-visible {
border-width: 0px !important;
border-color: transparent !important;
outline: none !important;
box-shadow: none !important;
}
body div.fl-color-picker-toolbar :is(.picker-input-wrap, button) {
--size: 32px;
height: var(--size);
min-height: var(--size);
border-radius: calc(var(--size) / 2);
background: transparent;
border: none;
box-shadow: none;
outline: none;
}
body div.fl-color-picker-toolbar :is(.picker-input-wrap, button):focus-visible, body div.fl-color-picker-toolbar :is(.picker-input-wrap, button):focus-within {
border: none !important;
box-shadow: none !important;
outline-color: transparent !important;
background: var(--bg-color, lightgrey);
}
body div.fl-color-picker-toolbar .picker-input-wrap {
display: flex;
align-items: center;
flex-grow: 1;
margin: 2px 0;
padding: 0;
gap: 5px;
}
body div.fl-color-picker-toolbar .picker-input-wrap > input {
flex-grow: 1;
}
.fl-controls-drag-thumb {
--color: transparent;
--size: 20px;
box-sizing: border-box;
width: var(--size);
height: var(--size);
border-radius: calc(var(--size) / 2);
border: 2px solid rgb(240, 240, 240);
box-shadow: 0 0 0 2px var(--color), 0 0 6px rgba(0, 0, 0, 0.1);
background-color: var(--color) !important;
position: absolute;
top: 0;
left: 0;
padding: 0 !important;
translate: -50% -50%;
}
.fl-controls-drag-thumb:hover {
background-color: var(--color) !important;
border: 2px solid rgb(240, 240, 240);
box-shadow: 0 0 0 2px var(--color), 0 0 6px rgba(0, 0, 0, 0.1);
}
.fl-controls-drag-thumb:focus {
outline: none;
background-color: var(--color) !important;
}
.fl-controls-drag-thumb:focus-visible {
--color: red;
background-color: var(--color) !important;
}
.fl-controls-color-eyedropper {
--size: 30px;
--inner-size: 24px;
display: grid;
place-content: center;
width: var(--size);
height: var(--size);
background: none;
border-radius: calc(var(--size) / 2);
border: none;
box-shadow: none;
}
.fl-controls-color-swatch {
--size: 30px;
--radius: var(--fl-controls-radius);
--color: transparent;
--background: linear-gradient(90deg, var(--color), var(--color) );
--checker-color: var(--fl-controls-checker-color-a);
--checker-size: 8px;
--half: calc( var(--checker-size) / 2 );
--neg-half: calc( 0px - var(--half) );
--checkers-bg: var(--background),
linear-gradient(45deg, var(--checker-color) 25%, transparent 25%),
linear-gradient(135deg, var(--checker-color) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, var(--checker-color) 75%),
linear-gradient(135deg, transparent 75%, var(--checker-color) 75%);
--bg-size: 100% 100%,
var(--checker-size) var(--checker-size),
var(--checker-size) var(--checker-size),
var(--checker-size) var(--checker-size),
var(--checker-size) var(--checker-size);
--bg-position: 0 0, 0 0, var(--half) 0, var(--half) var(--neg-half), 0px var(--half);
height: var(--size);
width: var(--size);
box-sizing: border-box !important;
box-shadow: inset 0 0 0 1px hsla(0, 0%, 50%, 0.2);
border-radius: var(--radius);
background: var(--checkers-bg);
background-size: var(--bg-size);
background-position: var(--bg-position);
background-color: var(--fl-controls-checker-color-b);
border: none;
outline: none;
display: grid;
padding: unset;
place-content: center;
}
.fl-controls-color-swatch:is(button, a) {
cursor: pointer;
}
.fl-controls-color-swatch:hover, .fl-controls-color-swatch:focus, .fl-controls-color-swatch:active {
background-color: var(--fl-controls-checker-color-b);
border: none;
}
.fl-controls-color-swatch:focus-visible {
box-shadow: inset 0 0 0 2px var(--fl-controls-accent-color);
}
.fl-controls-color-swatch.mix-swatch {
transition: scale 0.15s, border-radius 0.15s;
scale: 1;
border-radius: 0;
box-shadow: none;
cursor: pointer;
}
.fl-controls-color-swatch.mix-swatch:hover {
scale: 1.25;
filter: brightness(99%);
box-shadow: inset 0 0 0 1px hsla(0, 0%, 50%, 0.2), 0 8px 16px hsla(0, 0%, 50%, 0.2);
z-index: 1;
border-radius: 6px;
}
.removable-swatch-wrap {
display: grid;
aspect-ratio: 1/1;
}
.removable-swatch-wrap > * {
grid-area: 1/1/-1/-1;
}
.removable-swatch-wrap .remove-swatch-button {
--color: black;
display: grid;
place-content: center;
max-width: var(--fl-builder-target-size);
max-height: var(--fl-builder-target-size);
border-radius: 50%;
padding: 0;
border: none;
background: transparent;
background-color: transparent;
margin-left: auto;
translate: 50% -50%;
z-index: 1;
transition-duration: 0.25s;
transition-property: scale, opacity;
scale: 0;
pointer-events: none;
}
.removable-swatch-wrap .remove-swatch-button span {
--fill: color-mix( in srgb, rgb(79, 79, 79) 25%, var(--color) );
display: grid;
place-content: center;
background: var(--fl-controls-platter-bg-color);
color: var(--fl-controls-dim-color);
height: 30px;
width: 30px;
border-radius: 50%;
scale: 0.75;
transition: scale, box-shadow, color, background, translate;
transition-duration: 0.15s;
transition-delay: 0.1s;
box-shadow: inset 0 0 0 1.5px var(--fl-controls-dim-color);
}
.removable-swatch-wrap .remove-swatch-button span svg {
scale: 1.25;
transition-duration: 0.15s;
transition-property: scale;
}
.removable-swatch-wrap .remove-swatch-button:hover, .removable-swatch-wrap .remove-swatch-button:focus-visible {
cursor: pointer;
outline: none;
box-shadow: none;
}
.removable-swatch-wrap .remove-swatch-button:hover span, .removable-swatch-wrap .remove-swatch-button:focus-visible span {
scale: 1;
color: var(--fill);
background: color-mix(in srgb, white 90%, var(--color));
background-color: white;
box-shadow: inset 0 0 0 2px var(--fill), 0 0 0 1.5px white, 0 3px 10px rgba(0, 0, 0, 0.25);
}
.removable-swatch-wrap .remove-swatch-button:hover span svg, .removable-swatch-wrap .remove-swatch-button:focus-visible span svg {
scale: 1.25;
}
.removable-swatch-wrap:hover .remove-swatch-button, .removable-swatch-wrap:focus-within .remove-swatch-button, .removable-swatch-wrap:focus-visible .remove-swatch-button {
pointer-events: auto;
opacity: 1;
scale: 1;
}
.removable-swatch-wrap:hover .remove-swatch-button span, .removable-swatch-wrap:focus-within .remove-swatch-button span, .removable-swatch-wrap:focus-visible .remove-swatch-button span {
translate: 0% 0%;
}
.fl-controls-picker-bottom-tabs {
display: flex;
justify-content: center;
background: var(--platter-bg-color);
box-shadow: inset 0 1px 0 0px var(--outline-color);
}
.fl-controls-picker-bottom-tabs > * {
font-size: 13px;
color: var(--fg-color);
flex-grow: 1;
border: none;
border-radius: 0;
display: grid;
place-content: center;
}
.fl-controls-picker-bottom-tabs > *.is-selected {
box-shadow: 0 0px 0 1px var(--outline-color);
}
.fl-controls-picker-bottom-tabs > *:focus-visible, .fl-controls-picker-bottom-tabs > *:focus, .fl-controls-picker-bottom-tabs > *:hover {
color: var(--fg-color);
outline: none !important;
border: none !important;
box-shadow: inset 0 0 0 2px #00A0D0 !important;
}
.fl-controls-swatch-group {
--radius: 0;
background: var(--bg-color);
display: grid;
grid-auto-rows: var(--fl-controls-target-size);
border-radius: var(--radius);
}
.fl-controls-swatch-group .fl-controls-swatch-group-heading {
grid-column: 1/-1;
background: var(--bg-color);
color: var(--fg-color);
position: sticky;
top: 0;
z-index: 1;
display: flex;
align-items: center;
}
.fl-controls-swatch-group .fl-controls-swatch-group-heading > span {
flex-grow: 1;
}
.fl-controls-swatch-group .fl-controls-color-swatch {
--size: auto;
border-radius: 0;
aspect-ratio: 1/1;
box-shadow: inset 0 0 0 1.5px color(srgb 0.5 0.5 0.5 / 0.1);
transition: box-shadow 0.15s;
cursor: pointer;
}
.fl-controls-swatch-group .fl-controls-color-swatch:hover {
filter: brightness(95%);
}
.fl-controls-swatch-group .fl-controls-color-swatch:focus-visible {
filter: brightness(95%);
box-shadow: inset 0 0 0 1.5px white;
}
.fl-controls-swatch-group.fl-appearance-swatches {
--size: 44px;
grid-template-columns: repeat(auto-fit, var(--size));
grid-auto-rows: var(--size);
}
.fl-controls-swatch-group.fl-appearance-list {
--size: 30px;
grid-template-columns: var(--size) 1fr;
grid-auto-rows: var(--size);
gap: 5px 8px;
}
.fl-controls-swatch-group.fl-appearance-list > button {
cursor: pointer;
}
.fl-controls-swatch-group.fl-appearance-list .fl-controls-color-swatch {
--size: inherit;
}
.colorscale {
background: black;
}
.colorscale .fl-controls-color-swatch {
--text-color: black;
transition-duration: 0.25s;
transition-property: scale, border-radius, color, box-shadow;
font-size: 10px;
color: transparent !important;
box-shadow: transparent;
}
.colorscale .fl-controls-color-swatch:hover, .colorscale .fl-controls-color-swatch:focus-visible {
z-index: 1;
scale: 1.75;
border-radius: 20px;
color: var(--text-color) !important;
box-shadow: 0 0 0px 1.5px white;
}
/*!******************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/FL/controls/components/color/style.scss ***!
\******************************************************************************************************************************************************************/
.fl-controls-color-input {
--outline-color: var(--fl-controls-outline-color);
--radius: 6px;
background: var(--fl-controls-panel-bg-color);
border-radius: var(--radius);
border: 1px solid var(--outline-color);
justify-self: end;
}
.fl-controls-color-input > :first-child {
border-top-left-radius: var(--radius);
border-bottom-left-radius: var(--radius);
}
.fl-controls-color-input > :last-child {
border-top-right-radius: var(--radius);
border-bottom-right-radius: var(--radius);
}
.fl-controls-color-input > button {
border: none;
background: transparent;
cursor: move;
}
.fl-controls-color-input > button:hover {
filter: brightness(96%);
}
.fl-color-picker:has(.picker-mount) {
width: auto !important;
min-width: 50px !important;
flex: 1 0 auto;
}
.fl-color-picker:has(.picker-mount) .picker-mount {
flex-grow: 1;
display: flex;
}
/*!*********************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/FL/controls/components/gradient/style.scss ***!
\*********************************************************************************************************************************************************************/
.fl-controls-gradient-picker {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)) var(--fl-controls-target-size);
grid-auto-rows: minmax(var(--fl-controls-target-size), min-content);
gap: 8px;
padding: 16px;
}
.fl-controls-gradient-picker .span-cols {
grid-column: 1/-1;
}
.fl-controls-gradient-picker :is(button) {
background-color: var(--fl-controls-platter-bg-color);
}
.fl-controls-gradient-picker :is(button):hover {
background-color: var(--fl-controls-platter-bg-color);
filter: brightness(96%);
}
.fl-controls-gradient-picker .gradient-meta select, .fl-controls-gradient-picker .gradient-meta button {
border: 1px solid var(--fl-controls-outline-color);
border-radius: var(--fl-controls-radius);
}
.fl-controls-gradient-picker .fl-controls-gradient-stop-range {
--size: var(--fl-controls-target-size);
--thumb-size: var(--fl-controls-target-size);
--thumb-half-size: calc( var(--thumb-size) / 2 );
--half-size: calc( var(--size) / 2 );
--bg-color: var(--fl-controls-panel-bg-color);
border-radius: var(--half-size);
overflow: hidden;
min-height: var(--size);
display: flex;
grid-column: 1/-1;
}
.fl-controls-gradient-picker .fl-controls-gradient-stop-range .range-endcap {
width: var(--half-size);
background: grey;
}
.fl-controls-gradient-picker .fl-controls-gradient-stop-range .range-endcap:first-child {
border-top-left-radius: var(--half-size);
border-bottom-left-radius: var(--half-size);
}
.fl-controls-gradient-picker .fl-controls-gradient-stop-range .range-endcap:last-child {
border-top-right-radius: var(--half-size);
border-bottom-right-radius: var(--half-size);
}
.fl-controls-gradient-picker .fl-controls-gradient-stop-range .fl-controls-gradient-stops-wrapper {
flex-grow: 1;
position: relative;
}
.fl-controls-gradient-picker .fl-controls-gradient-stop-range .fl-controls-gradient-stops-wrapper > button {
--color: transparent;
--half-thumb-size: calc( var(--thumb-size) / 2 );
position: absolute;
top: var(--half-size);
left: 0;
margin-left: calc(0px - var(--half-thumb-size));
margin-top: calc(0px - var(--half-thumb-size));
display: grid;
place-content: center;
width: var(--thumb-size);
height: var(--thumb-size);
min-width: 0;
min-height: 0;
background: transparent;
border-radius: var(--half-size);
box-shadow: none;
border: none;
padding: 0;
}
.fl-controls-gradient-picker .fl-controls-gradient-stop-range .fl-controls-gradient-stops-wrapper > button > span {
display: block;
pointer-events: none;
background: var(--color);
box-shadow: 0 0 0 4px white, 0 0 10px rgba(0, 0, 0, 0.5);
border-radius: var(--thumb-half-size);
transition: scale 0.25s, box-shadow;
scale: 0.5;
width: var(--half-thumb-size);
height: var(--half-thumb-size);
}
.fl-controls-gradient-picker .fl-controls-gradient-stop-range .fl-controls-gradient-stops-wrapper > button:focus, .fl-controls-gradient-picker .fl-controls-gradient-stop-range .fl-controls-gradient-stops-wrapper > button.is-selected, .fl-controls-gradient-picker .fl-controls-gradient-stop-range .fl-controls-gradient-stops-wrapper > button:hover {
outline: none;
border: none;
box-shadow: none;
z-index: 9;
}
.fl-controls-gradient-picker .fl-controls-gradient-stop-range .fl-controls-gradient-stops-wrapper > button:focus > span, .fl-controls-gradient-picker .fl-controls-gradient-stop-range .fl-controls-gradient-stops-wrapper > button.is-selected > span, .fl-controls-gradient-picker .fl-controls-gradient-stop-range .fl-controls-gradient-stops-wrapper > button:hover > span {
scale: 1;
box-shadow: 0 0 0 2px white, 0 0 10px rgba(0, 0, 0, 0.2);
}
.fl-controls-gradient-picker :is(input[type]) {
border: 1px solid var(--fl-controls-outline-color);
border-radius: var(--fl-controls-radius) !important;
width: 100% !important;
}
.fl-controls-gradient-picker .stop-remove-button {
border: 1px solid var(--fl-controls-outline-color);
border-radius: var(--fl-controls-radius);
padding: 0;
width: var(--fl-controls-target-size);
}
.fl-controls-gradient-picker .placeholder {
border: 1px solid var(--fl-controls-outline-color);
border-radius: var(--fl-controls-radius);
background: var(--fl-controls-platter-bg-color);
}
/*!******************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/FL/controls/components/media/style.scss ***!
\******************************************************************************************************************************************************************/
.fl-controls-media-modal-dialog {
position: relative;
--inset: 30px;
top: var(--inset);
left: var(--inset);
right: var(--inset);
bottom: var(--inset);
width: calc(100% - var(--inset) * 2);
height: calc(100% - var(--inset) * 2);
border: none;
}
.fl-controls-media-modal-dialog .media-modal {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.fl-controls-media-modal-dialog::backdrop {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px) saturate(200%);
}
/*!*****************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/FL/controls/components/series/components/title-card/style.scss ***!
\*****************************************************************************************************************************************************************************************/
.fl-controls-title-card {
display: grid;
grid-template-columns: 36px minmax(0, 1fr);
gap: 10px;
place-items: center start;
min-height: var(--fl-builder-target-size);
border-radius: inherit;
padding: 0 6px;
border: none;
}
.fl-controls-title-card .card-visual {
--size: auto;
background: #e0e0e0;
aspect-ratio: 1/1;
height: var(--size);
display: flex;
place-content: center;
place-items: center;
place-self: center;
}
.fl-controls-title-card .card-text {
display: flex;
flex-direction: column;
gap: 1px;
color: inherit;
max-width: 100%;
}
.fl-controls-title-card .card-text .card-title {
font-size: 13px;
color: inherit;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-transform: capitalize;
}
.fl-controls-title-card .card-text .card-description {
font-size: 11px;
color: inherit;
}
.fl-controls-title-card.is-selected {
background: var(--fl-builder-accent-color);
color: white;
}
.fl-controls-title-card.has-issues {
--color: hsl( 25, 98.11%, 44.66% );
color: var(--color);
box-shadow: 0 0 0 1px var(--color);
background: hsl(25, 100%, 96%);
}
.fl-controls-title-card.has-issues .card-visual {
color: var(--color);
background: transparent;
}
/*!*******************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/FL/controls/components/series/style.scss ***!
\*******************************************************************************************************************************************************************/
.fl-controls-series {
display: flex;
flex-direction: column;
gap: 8px;
}
.fl-controls-series ul.fl-controls-series-list {
display: flex;
flex-direction: column;
list-style: none;
margin: 0;
padding: 0;
}
.fl-controls-series ul.fl-controls-series-list li {
display: grid;
grid-template-columns: minmax(0, 1fr);
margin: 0;
padding: 0;
--background: var(--fl-controls-panel-bg-color);
background: var(--background);
transition: background 0.15s;
}
.fl-controls-series ul.fl-controls-series-list li:hover {
--background: color-mix( in srgb, var(--fl-controls-panel-bg-color) 96%, black );
background: var(--background);
}
.fl-controls-series ul.fl-controls-series-list li > * {
grid-column: 1/-1;
grid-row: 1/-1;
}
.fl-controls-series ul.fl-controls-series-list li .fl-series-item-actions {
display: flex;
place-content: end;
place-items: stretch;
padding-left: 5px;
pointer-events: none;
opacity: 0;
gap: 1px;
transition-property: opacity, display;
transition-behavior: allow-discrete;
transition-duration: 0.25s;
}
.fl-controls-series ul.fl-controls-series-list li .fl-series-item-actions div {
margin-right: auto;
}
.fl-controls-series ul.fl-controls-series-list li .fl-series-item-actions button {
background: var(--background);
border: none;
padding: 0 6px;
display: flex;
place-content: center;
place-items: center;
pointer-events: auto;
}
.fl-controls-series ul.fl-controls-series-list li:hover .fl-series-item-actions, .fl-controls-series ul.fl-controls-series-list li:focus-within .fl-series-item-actions {
opacity: 1;
}
.fl-controls-series .fl-series-toolbar {
display: flex;
justify-content: end;
}
.fl-controls-series .fl-series-toolbar div:empty {
flex-grow: 1;
}
.fl-controls-series .fl-series-toolbar button {
border: none;
padding: 0 4px;
display: flex;
place-content: center;
place-items: center;
background: inherit;
min-height: 0;
min-width: 0;
}
.fl-controls-series .fl-series-toolbar button:hover {
filter: brightness(96%);
}
.fl-controls-series .fl-series-empty {
padding: 36px;
display: flex;
place-content: center;
}
.fl-controls-series .fl-series-add-button {
position: relative;
display: flex;
flex-direction: column;
background: inherit;
}
.fl-controls-series .fl-series-add-button > button {
flex-grow: 1;
display: flex;
place-items: center;
place-content: center;
border-radius: inherit;
}
.fl-controls-series .fl-series-add-button ul.fl-series-add-button-menu {
background: var(--fl-controls-panel-bg-color);
box-shadow: var(--fl-controls-input-shadow), 0 0 40px hsla(0, 0%, 10%, 0.1);
border-radius: var(--fl-controls-radius);
position: absolute;
top: 24px;
left: auto;
right: 0;
background: var(--fl-controls-input-bg-color);
min-width: 120px;
min-height: var(--fl-controls-target-size);
z-index: 1;
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
}
.fl-controls-series .fl-series-add-button ul.fl-series-add-button-menu li {
display: contents;
border-radius: inherit;
}
.fl-controls-series .fl-series-add-button ul.fl-series-add-button-menu li:first-child button {
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
.fl-controls-series .fl-series-add-button ul.fl-series-add-button-menu li:last-child button {
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
}
.fl-controls-series .fl-series-add-button ul.fl-series-add-button-menu button {
height: var(--fl-controls-target-size);
background: var(--fl-controls-panel-bg-color);
display: flex;
place-content: center;
place-items: center;
}
.fl-controls-series .fl-series-add-button ul.fl-series-add-button-menu button:hover {
filter: brightness(96%);
}
.fl-controls-series.fl-appearance-cards {
--radius: 8px;
}
.fl-controls-series.fl-appearance-cards .fl-controls-series-list {
gap: 5px;
}
.fl-controls-series.fl-appearance-cards .fl-controls-series-list li {
background: var(--fl-controls-input-bg-color);
border: 1px solid var(--fl-controls-outline-color);
border-radius: var(--radius);
min-height: 44px;
align-items: center;
}
.fl-controls-series.fl-appearance-cards .fl-series-toolbar {
--size: 24px;
gap: 5px;
height: var(--size);
}
.fl-controls-series.fl-appearance-cards .fl-series-toolbar button {
min-width: var(--size);
padding: 0 8px;
background: var(--fl-controls-platter-bg-color);
border-radius: calc(var(--size) / 2);
}
.fl-controls-series.fl-appearance-cards .fl-series-placeholder {
min-height: 52px;
}
.fl-controls-series.fl-appearance-cards .fl-series-empty {
border-radius: var(--radius);
background: var(--fl-controls-platter-bg-color);
box-shadow: var(--fl-controls-input-shadow);
}
.fl-controls-series.fl-appearance-compact {
--radius: var(--fl-controls-radius);
background: var(--fl-controls-input-bg-color);
box-shadow: var(--fl-controls-input-shadow);
border-radius: var(--radius);
gap: 0;
}
.fl-controls-series.fl-appearance-compact > :first-child {
border-top-left-radius: var(--radius);
border-top-right-radius: var(--radius);
}
.fl-controls-series.fl-appearance-compact > :last-child {
border-bottom-left-radius: var(--radius);
border-bottom-right-radius: var(--radius);
}
.fl-controls-series.fl-appearance-compact > *:not(:last-child) {
border-bottom: 1px solid var(--fl-controls-outline-color);
}
.fl-controls-series.fl-appearance-compact .fl-controls-series-list {
gap: 1px;
background: var(--fl-controls-outline-color);
}
.fl-controls-series.fl-appearance-compact .fl-controls-series-list li {
min-height: var(--fl-controls-target-size);
}
.fl-controls-series.fl-appearance-compact .fl-controls-series-list li:last-child {
border-bottom-left-radius: var(--radius);
border-bottom-right-radius: var(--radius);
}
.fl-builder-ui-skin--dark .fl-controls-series.fl-appearance-compact .fl-controls-series-list li {
background: var(--fl-controls-platter-bg-color);
}
.fl-controls-series.fl-appearance-compact .fl-controls-series-list .fl-series-placeholder {
min-height: var(--fl-builder-target-size);
}
.fl-controls-series.fl-appearance-compact .fl-series-toolbar {
height: 24px;
gap: 0;
background: var(--fl-controls-heading-bg-color);
}
.fl-controls-series.fl-appearance-compact .fl-series-toolbar button {
background: inherit;
}
.fl-controls-series.fl-appearance-compact .fl-series-toolbar > :first-child {
border-top-left-radius: var(--radius);
}
.fl-controls-series.fl-appearance-compact .fl-series-toolbar > :last-child {
border-top-right-radius: var(--radius);
}
.fl-controls-series.fl-appearance-compact .fl-series-empty {
background: var(--fl-controls-input-bg-color);
border-radius: inherit;
}
.fl-series-item-editor {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.fl-series-item-editor .fl-series-item-editor-content {
flex-grow: 1;
padding: 16px;
}
.fl-series-item-editor .fl-series-item-fields {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: var(--fl-controls-target-size);
align-items: center;
gap: 3px;
}
.fl-series-item-editor .fl-series-item-fields li {
display: contents;
}
.fl-series-item-editor .fl-series-item-editor-toolbar {
display: flex;
min-height: 50px;
gap: 5px;
padding: 10px 16px;
place-content: end;
}
.fl-series-item-editor .fl-series-item-editor-toolbar button {
padding: 0 10px;
background: var(--fl-controls-platter-bg-color);
border-radius: var(--fl-controls-radius);
}
/*!***************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/FL/controls/components/background/series-definitions/gradient/style.scss ***!
\***************************************************************************************************************************************************************************************************/
.fl-controls-gradient-picker-dialog {
width: 320px;
}
.fl-gradient-stops-control {
display: grid;
position: relative;
min-height: var(--fl-builder-target-size);
align-items: center;
}
.fl-gradient-stops-control .stop {
--size: 16px;
--half-size: calc( var(--size) / 2 );
--neg-half-size: calc( 0px - var(--half-size ) );
width: var(--size);
height: var(--size);
border-radius: var(--half-size);
margin-left: var(--neg-half-size);
margin-top: var(--neg-half-size);
position: absolute;
left: 0;
top: 50%;
background: red;
border: 2px solid var(--fl-builder-panel-bg-color);
}
.fl-gradient-stops-control .track {
background: grey;
grid-column: 1/-1;
grid-row: 1/-1;
height: 6px;
}
/*!*******************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/FL/controls/components/background/gallery/style.scss ***!
\*******************************************************************************************************************************************************************************/
.fl-controls-background-gallery-dialog {
place-content: start stretch !important;
}
.fl-controls-background-gallery-dialog .bg-gallery-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
padding: 24px;
place-content: start;
overflow: auto !important;
}
.fl-controls-background-gallery-dialog .bg-gallery-section {
grid-column: 1/-1;
display: grid;
grid-template-columns: subgrid;
gap: 24px;
}
.fl-controls-background-gallery-dialog .bg-gallery-section .bg-gallery-section-title {
grid-column: 1/-1;
font-size: 16px;
margin: 0;
}
.fl-controls-background-gallery-dialog .bg-gallery-item {
display: grid;
border-radius: var(--fl-controls-radius);
scale: 1;
transition: scale 0.15s;
cursor: pointer;
}
.fl-controls-background-gallery-dialog .bg-gallery-item:hover {
scale: 1.05;
}
/*!********************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/FL/controls/components/section/style.scss ***!
\********************************************************************************************************************************************************************/
.fl-controls-section {
--outline: var(--fl-controls-outline-color);
background: var(--fl-controls-panel-bg-color);
color: var(--fl-controls-panel-color);
border-top: 1px solid var(--outline);
}
.fl-controls-section .fl-controls-section-title-bar {
display: flex;
background: var(--fl-controls-platter-bg-color);
min-height: var(--fl-controls-target-size);
box-shadow: inset 0 -1px 0 0px var(--outline);
}
.fl-controls-section .fl-controls-section-title-bar .fl-controls-section-title {
display: flex;
align-items: center;
background: var(--fl-controls-panel-bg-color);
border-right: 1px solid var(--outline);
padding: 0 16px;
gap: 16px;
}
.fl-controls-section .fl-controls-section-content {
display: grid;
place-content: start stretch;
gap: 16px;
padding: 24px 16px;
}
/*!********************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/FL/controls/components/sliders/style.scss ***!
\********************************************************************************************************************************************************************/
.fl-range-input:where(input[type=range]) {
-webkit-appearance: none !important;
appearance: none !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
cursor: pointer;
inline-size: 100%;
min-height: var(--fl-builder-target-size);
margin: 0;
--track-size: 18px;
--thumb-size: 18px;
--thumb-color: black;
--track-color: lightgrey;
--thumb-ring: var(--bg-color);
--thumb-shadow: 0 0 0 2px var(--thumb-ring);
}
.fl-range-input:where(input[type=range]):focus-visible {
outline: none;
}
.fl-range-input:where(input[type=range]):focus-visible::-webkit-slider-thumb {
box-shadow: var(--thumb-shadow), 0 0 0 4px var(--accent-color);
}
.fl-range-input:where(input[type=range]):focus-visible::-moz-range-thumb {
box-shadow: var(--thumb-shadow), 0 0 0 4px var(--accent-color);
}
.fl-range-input:where(input[type=range])::-webkit-slider-runnable-track {
background: var(--track-color);
block-size: var(--track-size);
border-radius: calc(var(--track-size) / 2);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.fl-range-input:where(input[type=range])::-moz-range-track {
background: var(--track-color);
block-size: var(--track-size);
border-radius: calc(var(--track-size) / 2);
}
.fl-range-input:where(input[type=range])::-webkit-slider-thumb {
border: none;
-webkit-appearance: none; /* Override default look */
appearance: none;
margin-block: calc(0px - (var(--thumb-size) / 2 - var(--track-size) / 2)); /* Centers thumb on the track */
background-color: var(--thumb-color);
box-shadow: var(--thumb-shadow);
height: var(--thumb-size);
width: var(--thumb-size);
border-radius: calc(var(--thumb-size) / 2);
}
.fl-range-input:where(input[type=range])::-moz-range-thumb {
border: none;
background-color: var(--thumb-color);
box-shadow: var(--thumb-shadow);
block-size: var(--thumb-size);
inline-size: var(--thumb-size);
border-radius: calc(var(--thumb-size) / 2);
}
.fl-range-input:where(input[type=range]):focus {
background-color: transparent !important;
}
.fl-range-input:where(input[type=range]).hue-slider {
--hue: 0;
--sat: 100;
--sat-perc: clamp( 25%, calc( var(--sat) * 1% ), 95% );
--thumb-color: hsl( var(--hue), var(--sat-perc), 50%);
--track-color: -webkit-linear-gradient(left,
hsl(0,var(--sat-perc), 50%),
hsl(30, var(--sat-perc), 50%),
hsl(60, var(--sat-perc), 50%),
hsl(90, var(--sat-perc), 50%),
hsl(120, var(--sat-perc), 50%),
hsl(150, var(--sat-perc), 50%),
hsl(180, var(--sat-perc), 50%),
hsl(210, var(--sat-perc), 50%),
hsl(240, var(--sat-perc), 50%),
hsl(270, var(--sat-perc), 50%),
hsl(300, var(--sat-perc), 50%),
hsl(330, var(--sat-perc), 50%),
hsl(360, var(--sat-perc), 50%)
);
}
.fl-range-input:where(input[type=range]).sat-slider {
--hue: 360;
--sat: 50%;
--thumb-color: hsl( var(--hue), var(--sat), 50%);
--track-color: -webkit-linear-gradient(left, hsl( var(--hue), 0%, 50%), hsl( var(--hue), 100%, 50%) );
}
.fl-range-input:where(input[type=range]).light-slider {
--hue: 360;
--sat: 50%;
--brightness: 0%;
--thumb-color: hsl( var(--hue), var(--sat), var(--brightness));
--track-color: linear-gradient( to left, hsl( var(--hue), var(--sat), 0%), hsl( var(--hue), var(--sat), 50%), hsl( var(--hue), var(--sat), 100%) );
}
.fl-range-input:where(input[type=range]).whiteness-slider {
--hue: 360;
--whiteness: 0%;
--thumb-color: hwb( var(--hue) clamp( 0, var(--whiteness), 50 ) 3 );
--track-color: linear-gradient( to left, hwb( var(--hue) 0% 0% ), hwb( var(--hue) 100% 0% ) );
}
.fl-range-input:where(input[type=range]).alpha-slider {
--hue: 360;
--sat: 50%;
--brightness: 0%;
--thumb-color: hsl( var(--hue), var(--sat), var(--brightness) );
--checker-color: #dedede;
--checker-size: 8px;
--slider-direction: 90deg;
--half: calc( var(--checker-size) / 2 );
--neg-half: calc( 0px - var(--half) );
--track-bg: linear-gradient(
var(--slider-direction),
hsl( var(--hue) calc( var(--sat) + 0% ) 50% / 0 ),
hsl( var(--hue) calc( var(--sat) + 0% ) 50% / 1 )
),
linear-gradient(45deg, var(--checker-color) 25%, transparent 25%),
linear-gradient(135deg, var(--checker-color) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, var(--checker-color) 75%),
linear-gradient(135deg, transparent 75%, var(--checker-color) 75%);
--bg-size: 100% 100%,
var(--checker-size) var(--checker-size),
var(--checker-size) var(--checker-size),
var(--checker-size) var(--checker-size),
var(--checker-size) var(--checker-size);
--bg-position: 0 0, 0 0, var(--half) 0, var(--half) var(--neg-half), 0px var(--half);
}
.fl-range-input:where(input[type=range]).alpha-slider::-webkit-slider-runnable-track {
background-image: var(--track-bg);
background-size: var(--bg-size);
background-position: var(--bg-position);
background-color: #f3f3f3;
}
.fl-range-input:where(input[type=range]).alpha-slider::-moz-range-track {
background-image: var(--track-bg);
background-size: var(--bg-size);
background-position: var(--bg-position);
background-color: #f3f3f3;
}
/*!*************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/FL/controls/style.scss ***!
\*************************************************************************************************************************************************/
@property --fl-controls-radius {
inherits: true;
initial-value: 8px;
syntax: "<length>";
}
@property --fl-controls-target-size {
inherits: true;
initial-value: 36px;
syntax: "<length>";
}
@property --fl-controls-hue {
inherits: true;
initial-value: 210;
syntax: "<number>";
}
:root {
--fl-controls-radius: 6px;
--fl-controls-target-size: 36px;
--fl-controls-hue: 210;
--fl-controls-color: black;
--fl-controls-bg-color: white;
--fl-controls-input-color: var(--fl-controls-color);
--fl-controls-input-bg-color: var(--fl-controls-bg-color);
--fl-controls-panel-color: var(--fl-controls-color);
--fl-controls-panel-bg-color: hsl( var(--fl-controls-hue), 25%, 99% );
--fl-controls-platter-color: var(--fl-controls-color);
--fl-controls-platter-bg-color: hsl( var(--fl-controls-hue), 23%, 95% );
--fl-controls-heading-color: var(--fl-controls-color);
--fl-controls-heading-bg-color: hsl( var(--fl-controls-hue), 25%, 98% );
--fl-controls-accent-color: hsl( var(--fl-controls-hue), 100%, 41% );
--fl-controls-outline-color: hsl( var(--fl-controls-hue), 26%, 86% );
--fl-controls-input-shadow: 0 0 0 1px var(--fl-controls-outline-color);
--fl-controls-focus-shadow: inset 0 0 0 1.5px var(--fl-controls-accent-color);
--fl-controls-selected-color: hsl( 194deg 100% 34% ) !important;
--fl-controls-dim-color: hsl(var(--fl-controls-hue), 12%, 55%);
/* Tab dividers */
--fl-controls-divider-color: hsl( var(--fl-controls-hue), 26%, 80% );
--fl-controls-divider-width: 1px;
--fl-controls-checker-color-a: hsl(var(--fl-controls-hue), 0%, 87%);
--fl-controls-checker-color-b: hsl(var(--fl-controls-hue), 0%, 95%);
}
:where(.fl-builder-ui-skin--dark) {
--fl-controls-color: white;
--fl-controls-bg-color: black;
--fl-controls-input-color: var(--fl-controls-color);
--fl-controls-input-bg-color: var(--fl-controls-bg-color);
--fl-controls-panel-color: var(--fl-controls-color);
--fl-controls-panel-bg-color: hsl( var(--fl-controls-hue), 14%, 16% );
--fl-controls-platter-color: var(--fl-controls-color);
--fl-controls-platter-bg-color: hsl( var(--fl-controls-hue), 14%, 11% );
--fl-controls-heading-color: var(--fl-controls-color);
--fl-controls-heading-bg-color: hsl( var(--fl-controls-hue), 14%, 16% );
--fl-controls-outline-color: hsl( var(--fl-controls-hue), 11%, 25% );
--fl-controls-input-shadow: 0 0 0 1px var(--fl-controls-outline-color);
--fl-controls-focus-shadow: inset 0 0 0 1.5px var(--fl-controls-accent-color);
--fl-controls-dim-color: hsl(var(--fl-controls-hue), 12%, 55%);
--fl-controls-divider-color: hsl( var(--fl-controls-hue), 11%, 23% );
--fl-controls-checker-color-a: hsl(var(--fl-controls-hue), 0%, 35%);
--fl-controls-checker-color-b: hsl(var(--fl-controls-hue), 0%, 25%);
}