/* ============ LIVECANVAS EDITOR CSS ============= */
/* VARIABLES */
:root {
--maintoolbar-height: 42px;
--sidepanel-width: 274px;
--color1: #26c6da;
--color2: #e83e8c;
/* --color-background: #000; */
--color-green: #64FF05;
--color-yellow: #ffcc00;
--color-accents: rgb(63,67,86);
--color-interface-bg:#212337;
--color1-lighter-30: #177a87;
/* --color-mediumblue: rgb(45,47,64); */
--color-grey: rgb(102,102,102);
--color-lightgrey: rgb(180, 183, 182);
/* new colors */
--color-grey-2: #A9ABCB;
--color-interface-bg-dark: #191A29;
--color-prop-icons: #80829f;
--scrollable-areas-voffset: 165px;
}
body { margin: 0px; overflow: hidden; /* background: var(--color-mediumblue); */ overscroll-behavior-x: none;}
body,h1,h2,h3,h4,h5,h6 {font-family: "Nunito Sans",Helvetica,Arial,sans-serif;}
/* GENERAL UTILITY */
.d-flex {display: flex;}
/* SYSTEM IS WORKING: CHANGE CURSOR */
html.system-is-working, html.system-is-working *{
cursor: progress !important;
}
/* MAIN TOOLBAR */
#maintoolbar {
background: var(--color-interface-bg);
width: 100%;
height: var(--maintoolbar-height);
border-bottom: 1px solid #444;
color: #fff;
user-select: none;
}
/* CLASSES PALETTE FOR TEXT */
/* a#toggle-classes-submenu.is-active:after{ content: "\f0d8"; font-family: FontAwesome; position: absolute; color: #343756; font-size: 50px; top: 8px; left: 360px; z-index: 2222; } */
#classes-palette {
display: none;
padding: 10px 16px;
position: fixed;
top: var(--maintoolbar-height);
left:0;
right:0;
background: var(--color-interface-bg); /* before #343756; */
color: #fff;
z-index: 10000;
font-size: 13px;
border-top: 1px solid var(--color-accents);
border-bottom: 1px solid var(--color-accents);
transition: opacity .2s ease-out;
letter-spacing: -0.1px;
}
/* keep together class links for a given property */
#classes-palette > * {
display: inline-block;
}
/* on not so large screens, where sizing classes becomes another row... */
@media screen and (max-width: 2446px) {
#weight-classes-group hr {display: none !important;}
#sizing-classes-group {margin-top: 8px;}
}
/* on small laptops, make classes palette smaller */
@media screen and (max-width: 1350px) {
#classes-palette > * {zoom:0.9 }
}
/* on mobile, hide classes palette */
@media screen and (max-width: 1200px) {
#classes-palette {display: none !important }
}
.classes-palette-to-bottom {top:inherit !important;bottom:0 !important}
#classes-palette a {color:white;text-decoration: none}
#classes-palette a:hover {color:var(--color2);}
/* VERTICAL SEPARATORS FOR TOOLBAR */
#classes-palette hr { margin:0 6px 0 5px; border:none; border-right: 1px solid hsl(236deg 24% 48%); display: inline;}
#sizing-classes-group hr { margin:0 6px 0 2px;}
#classes-palette h2 { margin: 4px 0 10px; }
/* WEIGHT CLASSES */
#weight-classes-group a {margin-right: 2px;}
/* CLASSES FOR TEXT SUBMENU > COLOR WIDGET */
#classes-palette .toolbar-color-widget {width:216px; display: inline-flex; padding:0; gap:4px}
#classes-palette .toolbar-color-widget a { flex: 1 1 0; height:13px; border-radius: 2px;outline-style: solid; outline-color:var(--color-grey); outline-width: 0.8px;}
#classes-palette .toolbar-color-widget a:hover {cursor: pointer}
#classes-palette .toolbar-color-widget a.is-active {position: relative; box-shadow:inset 0 0 0 1px #ffffff, inset 1px 1px 1px 0px #4444446e; outline-color:var(--color1); outline-width: 1px; }
#classes-palette .toolbar-color-widget a.is-active::after {position: absolute; content: "•"; bottom: 13px; left: 2.5px; font-size: 9px;}
#classes-palette .toolbar-color-widget a:hover {outline-style: solid; outline-color: var(--color2)}
#classes-palette .toolbar-color-widget a[data-class='text-muted'] { background-color: #6c757d; }
#classes-palette .toolbar-color-widget a[data-class=''] {
background-color: #fff;
background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
background-size: 6px 6px;
background-position: 0 0, 3px 3px;
}
/* ALIGNMENT CLASSES */
#classes-palette #alignment-classes-group .fa {font-size: 12px;margin-right: 8px;}
#extra-alignment-classes {
font-size: 10px;
position: absolute;
background: rgb(52, 55, 86);
left: 238px;
top: 34px;
padding: 10px 15px;
display: none
}
#classes-palette.classes-palette-to-bottom #extra-alignment-classes { top:inherit;bottom:38px;}
#extra-alignment-classes > div > * { display: inline-block; padding: 1px; width: 80px; }
/* SIDE PANEL */
#sidepanel {
position: fixed;
left: 0;
width:var(--sidepanel-width);
height: calc(100vh - var(--maintoolbar-height));
bottom: 0;
border-right:1px solid #444;
z-index: 9999;
color: #fff;
padding: 0px;
box-sizing: border-box;
background: var(--color-interface-bg);
border-top: 1px solid var(--color-accents);
/* transition: all 1s; */
user-select: none;
transition: width .3s;
}
#sidepanel.sidepanel-is-maximized {width:calc(var(--sidepanel-width) + 150px)}
#sidepanel.sidepanel-is-maximized textarea {min-height: 300px;}
#previewiframe {width: 100%;height:calc(100vh - var(--maintoolbar-height));border: 0px;NOtransition: all 0.5s ease-in-out; /* ,height 1s ease-in-out; */ margin: auto;display: block;z-index: 999}
.push-aside-preview {margin-left: var(--sidepanel-width)}
#previewiframe-wrap{transition: all 0.2s}
body.lc-bottom-editor-is-shown #previewiframe { }
#codetextarea {position: absolute;bottom:0; /* calc(2px + var(--maintoolbar-height));*/background: var(--color-green)}
#loader { display: block;
position: absolute;
top: 0;
left: 0;height: 100vh;font-size: 10vw;width:100vw;color: #fff;z-index: 300;padding-top: 30vh;text-align: center;background: linear-gradient(-90deg, var(--color2), var(--color1));}
#saving-loader { display: none;
position: absolute;
top: height: var(--maintoolbar-height);
left: 0;height: 100vh;font-size: 20px;width:100vw;color: #fff;z-index: 300;padding-top: 30vh;text-align: center;background: #fff;opacity:0.92}
#maintoolbar a { color: var(--color-lightgrey); transition: all 0.5s ease-in-out; }
#maintoolbar a:hover { }
#maintoolbar a.is-active { color: var(--color1);}
/* PRODUCT BRANDING IN MAIN TOOLBAR */
#product-branding {
position: absolute;
height: var(--maintoolbar-height);
padding: 0px 70px;
}
/* LOGO IN HEADER */
#product-branding svg {width: 100px; margin-top: 12px;}
/*
.product-logo {padding: 1px 3px; text-decoration: none;margin-top: 5px;display: block;user-select: none}
.product-logo path:nth-child(1) {fill: var(--color1); transition: all 0.5s ease-in-out;}
.product-logo:hover path:nth-child(1) {fill: var(--color2)}
.product-logo path:nth-child(2) {fill: var(--color2); transition: all 0.5s ease-in-out;}
.product-logo:hover path:nth-child(2) {fill: var(--color1);}
*/
/* PARTIAL NAME FEEDBACK: FOR GIVING FEEDBACK IN HEADER / FOOTER EDITING MODE */
#lc-partial-name{
position: absolute; color: white; left: 10px; top: 10px; font-size: 8px; width: 50px; color: hsl(160, 2%, 71%); text-align: center; letter-spacing: 0px; text-transform: uppercase;
}
/* NANOTOOLBARs dedicated to each kind of element to edit */
.nanotoolbar {
position: absolute;
left: 200px;
height: var(--maintoolbar-height);
}
#ww-toolbar a {
border: none;
font-family: 'Arial';
font-size: 11.5px;
border-radius: 1px;
padding: 5px 4px;
min-width: 7px;
margin:8px 1px;
display: inline-flex;
text-decoration: none;
}
/* .nanotoolbar a:hover { color: var(--color-yellow);} */
.toolbar-spacer {display: inline-flex; width:7px;height: 10px;}
/* RESPONSIVE TOOLBAR */
#responsive-toolbar {
position: absolute;
right: 378px;
height: var(--maintoolbar-height);
}
#responsive-toolbar a {
font-size: 8px;
padding: 1px;
min-width: 1.5em;
margin-top: 8px;
display: inline-block;
text-decoration: none;
text-align: center;
margin-right: 10px;
}
#responsive-toolbar a:hover, #responsive-toolbar a.is-active {
color: var(--color1);
}
#responsive-toolbar a i {font-size: 15px;display: block;margin-bottom: 2px;}
@media only screen and (max-width: 1200px) { #responsive-toolbar {display: none} }
@media only screen and (max-width: 1375px) {
#ww-toolbar a[data-command="blockquote"],
#ww-toolbar a[data-command="code"],
#ww-toolbar a[data-command="kbd"] {display: none !important}
}
/* SAVING FORM */
#saving-form {
position: absolute;
right:10px;
height: var(--maintoolbar-height);
background: var(--color-interface-bg);
}
#saving-form a {
font-family: 'Arial';
font-size: 9px;
padding: 2px 5px;
margin: 3px 5px 0 0;
display: inline-block;
text-decoration: none;
text-align: center;
}
#saving-form a:hover,#saving-form a.is-active {color: var(--color2);cursor: pointer}
#saving-form a i,#saving-form button i {font-size: 20px;display: block;margin-bottom: 2px;}
#saving-form #toggle-tree-view {
svg {
width: 16px;
height: 16px;
text-align: center;
display: block;
margin: 0 auto;
margin-bottom: 3px;
}
}
#saving-form #advanced-options {
color: var(--color-lightgrey);
margin-right: 10px;
border-right: 1px solid #999;
padding-right: 15px;
}
/* EXTRAS SUBMENU */
#extras-submenu {
position: fixed;
top:var(--maintoolbar-height);
right: 0;
width:260px;
background: var(--color-interface-bg);
color:#fff;
border-left: 1px solid #444;
padding:10px 0px;
font-size: 12px;
z-index: 9999999;
}
#extras-submenu a { display: flex; align-items: baseline; padding: 10px 15px; text-decoration: none;user-select: none; }
#extras-submenu a:hover {
background: rgba(255, 255, 255, 0.12);
color: var(--color1);
}
#extras-submenu i.fa {
margin-right: 5px;
width: 15px;
}
#extras-submenu hr {
opacity: 1;
border: 0.5px solid #999;
}
.keyboard-shortcut {
font-family: courier;
white-space: nowrap;
float: right;
background: var(--color-accents);
padding: 2px 6px 4px;
color: white;
border-radius: 4px;
font-size: 12px;
margin-left: auto;
}
/* BBE-INTERFACE WINDOWS */
/* RESET
#lc-interface *:not(.fa):not(button) {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
color: #fff;
}
*/
/* ============= HTML CODE EDITOR ============= */
#lc-html-editor-window {
display: none;
position: fixed;
z-index: 9;
left: 0;
bottom: 0;
width: 100vw;
height: 50vh;
border: 2px solid #222;
box-sizing: border-box;
transition: opacity .2s ease-out;
}
.lc-opacity-light{opacity: 0.6;}
.lc-editor-window-maximized {height: 100vh !important; /* :calc(100% - var(--maintoolbar-height) - 8px) !important; */}
.lc-editor-window-sided {height: calc(100% - var(--maintoolbar-height) - 10px) !important;width:40vw !important}
/* hide code editor theme and size tools when editor is on a side */
#lc-html-editor-window.lc-editor-window-sided .lc-editor-menubar-tools > span {display: none}
#lc-html-editor-window:hover {opacity: 1}
#lc-html-editor,#lc-css-editor,#lc-js-editor {left:0;right: 0;height: calc(100% - 35px);font-size: 13px;}
/* CODE EDITOR MENUBAR */
.lc-editor-menubar {width:100%; font-size: 12px; background: var(--color-interface-bg-dark);color: var(--color-lightgrey);padding:11px 0;user-select: none;}
.lc-editor-menubar-draghandle { position: absolute; left: 250px; top: 0px; right: 241px; bottom:0 }
#lc-html-editor-window:not(.lc-editor-window-sided):not(.lc-editor-window-maximized) .lc-editor-menubar-draghandle:hover{cursor: ns-resize}
.lc-editor-menubar > span {margin-left: 10px;color: var(--color-lightgrey);font-size: 15px; }
.lc-editor-menubar-tools select {
width: 90px;
line-height: 1.5;
color: var(--color1);
background: #1e2032;
border: 1px solid var(--color-accents);
border-radius: 2px;
}
.lc-editor-menubar-tools input[type=number] {
line-height: 1.5;
color: var(--color1);
background: #1e2032;
border: 1px solid var(--color-accents);
border-radius: 2px;
}
.lc-editor-menubar-tools {position: absolute;right: 15px;top:8px;}
.lc-editor-menubar-tools a {color: var(--color-lightgrey); font-size: 11px;margin-left:20px; text-decoration: none;transition: all 0.5s ease-in-out}
.lc-editor-menubar-tools a .fa {font-size: 15px;margin-left: 3px}
.lc-editor-menubar-tools a .fa-close {font-size: 18px;}
.lc-editor-menubar-tools a:hover {color: var(--color1); }
.lc-editor-menubar-tools select {width: 90px;}
/* CODE TABBER AND BUTTONS NEARBY - "PARENT" */
.code-tabber {display: inline-block}
.code-tabber a, .after-tabber-extras a { background: #333; color:#AFAFAF; padding: 5px 15px; text-align: center;text-decoration: none}
.code-tabber a:hover {background-color:var(--color-accent)}
.code-tabber a span {font-family: monospace;}
.code-tabber a.active, .after-tabber-extras a.active { background: var(--color-interface-bg-dark); color:var(--color1);padding: 5px 15px; text-align: center;text-decoration: none}
/* Style the JS active tab */
.code-tabber a#js-tab.active {background-color: var(--color-yellow); color:black;}
.after-tabber-extras { position: absolute; left: 280px; z-index: 9999; top: 11px; }
.after-tabber-extras a:hover {color:var(--color1);}
.after-tabber-extras a:focus {color:#333;background:#adadad}
/* ============= SIDE PANEL ============= */
section[item-type] .show-only-in-sections {display:none}
section[item-type="section-properties"] .show-only-in-sections {display:block}
section[item-type="section-properties"] .hide-in-sections {display:none}
.show-all-sections {
font-size: 8px;
margin-bottom: 40px;
border-top: 1px solid var(--color-accents);
padding: 20px 10px;
display: BLOCK;
text-decoration: none;
}
/*
#sidepanel {opacity: 0.8;transition: all 0.5s ease-in-out}
#sidepanel:hover {opacity: 1}
*/
/* CLOSE SIDEPANEL ICON */
#sidepanel .close-sidepanel .fa {font-size: 22px}
/* the panel heading */
#sidepanel h1 {
display: flex;
align-items: center;
font-size: 16px;
padding: 16px 8px;
margin: 0px;
font-weight: 400;
border-bottom: 1px solid var(--color-accents);
background: var(--color-interface-bg);
color: var(--color-grey-2) !important;
letter-spacing:-0.025em !important;
}
#sidepanel h1 svg {
vertical-align: middle;
margin-right: 8px;
opacity: 0.5;
}
#sidepanel h2 {
text-align: left;
font-size: 16px;
font-weight: 400;
background: var(--color-interface-bg);
border-top: 1px solid var(--color-accents);
padding: 20px 10px 0 10px;
margin: 0px;
position: relative;
}
#sidepanel h2:first-child {
border-top: none;
margin-top: 0;
}
#sidepanel h2:not(.property-group-title) {
padding: 15px 10px 5px;
}
#sidepanel h3 {
font-size: 12px;
/* padding: 20px 0px 10px; */
margin: 15px 0 10px 0;
font-weight: 400;
/* border-top: 1px solid #3a3f53; */
text-transform: uppercase;
}
#sidepanel h4 {
text-align: left;
font-size: 16px;
font-weight: 400;
background: var(--color-interface-bg);
border-top: 1px solid var(--color-accents);
padding: 20px 10px;
margin: 0px;
position: sticky;
top: -5px;
z-index: 2;
}
#sidepanel .items-browser h4:after {
content: '\f107';
font-family: FontAwesome;
opacity: 0.4;
margin-right: 5px;
text-decoration: none;
display: inline-block;
float: right;
}
#sidepanel .items-browser h4.opened:after { content: '\f106';}
#sidepanel a { color: #fff; }
#sidepanel a:hover { color: var(--color1); }
#sidepanel .top-actions { position: absolute; right: 11px; top: 16px; font-size: 18px;}
#sidepanel .top-actions a.close-sidepanel span {
font-size: 21px;
margin-top: 1px;
color: var(--color-grey-2);
}
#sidepanel .top-actions a.close-sidepanel span:hover {
color: white;
}
/* === SIDEPANEL OPTIONS NAVI ===== */
/* leg */
.sidebar-panel-nav {
padding: 14px 13px 0;
margin-bottom: 12px;
}
.sidebar-panel-nav a {
text-decoration: none;
font-size: 14px;
margin-bottom: 5px;
margin-right: 3px;
}
.sidebar-panel-nav a.active {
color: var(--color1) !important;
}
/* new sidepanel properties navigation */
.sidebar-panel-navigation {
background-color: var(--color-interface-bg-dark);
padding: 12px 8px;
display: flex;
flex-wrap: wrap;
gap: 2px 1px;
margin-bottom: 0;
}
.sidebar-panel-navigation a {
color: var(--color-grey-2) !important;
font-size: 13px;
font-weight: 700;
text-decoration: none;
flex: 0 0 83px;
}
.sidebar-panel-navigation a:hover {
color: var(--color2) !important
}
.sidebar-panel-navigation a.active {
color: var(--color1) !important;
}
/* === SIDEPANEL TABS ===== */
#sidepanel .sidepanel-tabs { display: flex; flex-wrap: wrap; }
#sidepanel .sidepanel-tabs a {
display: inline-block;
font-size: 10px;
text-transform: uppercase;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
background: var(--color-interface-bg);
background: #404359;
text-align: center;
width: 49.99999999%;
padding: 15px 0px;
}
#sidepanel .sidepanel-tabs a:hover { background: var(--color-interface-bg); }
#sidepanel .sidepanel-tabs a.active {
color: var(--color1);
background: var(--color-interface-bg)!important;
}
#sidepanel a { }
#sidepanel a:hover {cursor: pointer; color: var(--color2)}
#sidepanel a span {font-size: 8px;}
/* TAB LABEL */
#sidepanel .sidepanel-tabs a span {
text-align: center;
font-size: 12px;
display: block;
font-weight: 150;
}
/* TAB ICON */
#sidepanel .sidepanel-tabs a i {
text-align: center;
font-size: 20px;
margin-bottom: 7px;
}
/* SCROLLABLE AREA OF SIDEBAR PANEL */
/*BEWARE OF HEIGHT ADJUSTMENTS & UPDATE THE MAGIC NUMBER */
#sidepanel form {padding: 0; height: calc(100vh + 50px - var(--scrollable-areas-voffset)); overflow-y: auto;background: var(--color-interface-bg); }
#sidepanel section[item-type=sections] form {padding: 0; height: calc(100vh - var(--scrollable-areas-voffset)); }
#sidepanel form::-webkit-scrollbar { width: 5px;}
#sidepanel form::-webkit-scrollbar-track { background: var(--color-interface-bg); }
#sidepanel form::-webkit-scrollbar-thumb { background: #ddd; }
#sidepanel form label {font-size: 11px;display: block;margin-top: 24px;}
#sidepanel form input[type=text] {width:100%; font-size: 12px;
font-family: courier; }
#sidepanel form input[type=text]:focus {/*width:100vw; */ outline: 1px solid var(--color-grey)}
#sidepanel form input[attribute-name="ID"] {color: var(--color2);}
#sidepanel form textarea[attribute-name="class"] {color: var(--color1);}
#sidepanel form select {width:100%;font-size: 12px}
#sidepanel form textarea {
width:100%;
font-size: 12px;
font-family: courier;
min-height: 65px;
max-height: 300px;
color: #efefef;
outline: none !important;
word-break: break-all;
}
/* old */
.property-group {padding-bottom:20px !important;}
/* HISTORY PANEL */
#sidepanel .suggestion {
padding:5px 15px;
font-size: 11px;
background: var(--color-accents);
MARGIN-BOTTOM: 15px;
}
ul#history-steps {
list-style-type: decimal;
padding: 15px 25px 15px 25px;
}
ul#history-steps li {
padding: 5px;
font-size: 11px;
background: var(--color-accents);
margin-bottom: 4px;
border-left: #b4b7b6 2px solid;
}
ul#history-steps li:hover{cursor: pointer}
ul#history-steps li:before {
content: "\f1da";
font-family: FontAwesome;
}
ul#history-steps li:before {
content: "\f017";
font-family: FontAwesome;
}
ul#history-steps li:hover{
border-left: #32c5d9 2px solid;
}
ul#history-steps li.active{
background: #32c5d9;
border-left: #32c5d9 2px solid;
}
/* END interface history*/
/* SIDEBAR FORM COMMON FIELDS: ID CLASS and STYLE */
a.toggle-common-form-fields {
float: right;
text-decoration: none;
font-size: 10px;
display: block;
margin-bottom: 3px;
}
.html-attributes-box-title {
margin: 16px 0 14px;
}
#sidepanel form .common-form-fields {
opacity: 0.9;
transition: all 0.5s ease-in-out;
padding: 9px;
/* border-top: 2px solid var(--color-accents); */
background: var(--color-accents);
margin: 20px 0 0px 0;
}
/* for fixed superimposed ID & class box */
/*
#sidepanel form .common-form-fields {
position: fixed;
bottom: 1px;
width: var(--sidepanel-width);
background: #131319;
padding: 9px;
box-sizing: border-box;
border-top: 2px solid var(--color-accents);
}
*/
#sidepanel form .common-form-fields input, #sidepanel form .common-form-fields textarea {
background-color: hsl(236 25% 6% / 1);
}
#sidepanel form .common-form-fields label {
font-size: 11px;
color: hsl(236 25% 80% / 1);
font-weight: 700;
margin-bottom: 3px;
margin-top: unset;
}
/* Add hashtag icon for the ID div */
#sidepanel form .common-form-fields input.id-livedit {
padding-left: 22px; /* add space to the icon */
background-repeat: no-repeat;
background-position: 5px center; /* center the icon */
background-size: 12px; /* icon sizes */
background-image: url('data:image/svg+xml,');
}
#sidepanel form .common-form-fields input, #sidepanel form .common-form-fields textarea {
margin: 0 0 12px 0
}
/* Add hashtag icon for the ID div */
#sidepanel form .common-form-fields textarea[data-syntax="css"] {
padding-left: 22px; /* add space to the icon */
background-repeat: no-repeat;
background-position: 5px 10px; /* icon on the first line */
background-size: 12px; /* icon sizes */
background-image: url('data:image/svg+xml,');
}
/* when textarea is empty, reduce height and padding */
#sidepanel form .common-form-fields input.id-livedit:placeholder-shown, #sidepanel form textarea[data-syntax="css"]:placeholder-shown {
padding: 0 22px !important;
height: 2px !important;
min-height: 20px;
resize: none;
overflow-y: hidden;
background-position: 4px 5px; /* icon on the first line */
background-size: 10px; /* icon sizes */
}
#sidepanel form .common-form-fields h4 {color: #eee; padding-left: 10px}
/* for fixed superimposed ID & class box */
/*
the-property-widgets {margin-bottom: 300px; display: block;}
*/
#sidepanel .separator { margin: 0px 0 10px;}
#sidepanel .separator2 {margin: 5vh 0; border-top:2px dotted #C1C1C1}
/* SUGGESTION */
#sidepanel form .common-form-fields small{font-size: 9px;color:#eee;}
#sidepanel form .common-form-fields small a{font-size: 9px;color:#ffffff}
/* CONTEXTUAL BUTTONS for image submenus */
.sidebar-form-contextual-buttons { display: flex;margin: 0 !important;padding:0 !important;}
.sidebar-form-contextual-buttons .fa {display: block;font-size: 22px;margin: 5px;}
.sidebar-form-contextual-buttons a {
display: inline-block;
background: var(--color-interface-bg);
color: #fff;
text-decoration: none;
transition: all 0.2s ease-in-out;
text-align: center;
font-size: 10px;
text-transform: uppercase;
padding: 25px 0px;
width:100%;
}
.sidebar-form-contextual-buttons a:hover {cursor: pointer;background: #000;color: var(--color-yellow); }
/* SIDEBAR INLINE WIDGETS like MARGINS */
.widget-wrapper-flex {display:flex}
.widget-wrapper-flex > div {flex: 1 1 0; margin-right: 3px;}
.widget-wrapper-flex > div label {margin-top: 5px !important;font-weight: 200;}
/* CUSTOM COLOR WIDGETS */
custom-color-widget:not(colors-widget) {display: flex;padding: 10px 0 0;} /* no more used, for old school color widgets which are not a custom element */
.custom-color-widget div {display: flex;padding: 10px 0 0;}
.custom-color-widget span { flex: 1 1 0; height: 19px; margin-right: 5px; border-radius: 1px; border: 0.5px solid var(--color-grey);}
.custom-color-widget span:hover{cursor: pointer}
.custom-color-widget span:last-of-type {margin-right: 0px;}
.custom-color-widget span.active {box-shadow:inset 0 0 0 1px #ffffff, inset 2px 2px 2px 0px #4444446e}
.custom-color-widget span[value='text-muted'] {background: gray;}
.transparent-background-utility,
.custom-color-widget span[value='text-reset'],
.custom-color-widget span[value='bg-transparent'],
.custom-color-widget span[value=''] {
background-color: #fff !important;
background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc) !important;
background-size: 6px 6px !important;
background-position: 0 0, 3px 3px !important;
}
#sidepanel a.customize-colors {
font-size: 10px;
color: var(--color-grey) !important;
text-decoration: none;
margin-left: 88px;
}
/* COLOR SHADES PALETTE */
.custom-color-widget .palette-shades [strength="500"] {
&:before {
content: "base";
font-size: 6px;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
}
.custom-color-widget .palette-shades span {
height: 10px;
}
/* CUSTOM OPACITY WIDGETS */
.custom-opacity-widget {display: flex;padding: 10px 0 0}
.custom-opacity-widget span {
flex: 1 1 0;
height: 19px;
margin-right: 5px;
border-radius: 1px;
font-size: 10px;
color: #222222;
text-align: center;
padding-top: 6px;
background-image: linear-gradient(45deg, #efefef 25%, transparent 25%, transparent 75%, #efefef 75%, #efefef), linear-gradient(45deg, #efefef 25%, transparent 25%, transparent 75%, #efefef 75%, #ccc);
background-size: 6px 6px;
background-position: 0 0, 3px 3px;
background-color: rgb(255 255 255 /100%);
}
.custom-opacity-widget span:last-child {
background: rgb(255 255 255 / 100%);
}
.custom-opacity-widget span:hover{cursor: pointer}
.custom-opacity-widget span:last-of-type {margin-right: 0px;}
.custom-opacity-widget span.active{outline: 1px solid var(--color2)}
/* COLOR SHADES WIDGET */
.color-shades-widget span {background-color:rgb(13, 110, 253);}
.color-shades-widget span:nth-child(1) {filter: brightness(4.5)}
.color-shades-widget span:nth-child(2) {filter: brightness(1.8)}
.color-shades-widget span:nth-child(3) {filter: brightness(1.5)}
.color-shades-widget span:nth-child(4) {filter: brightness(1.2)}
.color-shades-widget span:nth-child(5) {filter: brightness(1)}
.color-shades-widget span:nth-child(6) {filter: brightness(0.8)}
.color-shades-widget span:nth-child(7) {filter: brightness(0.6)}
.color-shades-widget span:nth-child(8) {filter: brightness(0.4)}
.color-shades-widget span:nth-child(9) {filter: brightness(0.2)}
.color-shades-widget span:hover{cursor: pointer}
/* BUTTON LC-BUTTON */
button.lc-button:focus {
outline: none;
border: 1px solid var(--color1);
background-color: var(--color-interface-bg);
}
/* HIGHLIGHT class for selected BUTTONS */
.highlight-button {color: var(--color1) !important; background: var(--color-accents) !important; }
/* ADD NEW BLOCK / SECTION */
.open-cpt-archive {
clear: both;
width: 98%;
margin-top: 20px;
margin-bottom: 40px;
font-size: 11px;
text-align: center;
display: block;
}
/* IMAGE / BG IMAGE PREVIEW */
#sidepanel .preview-image {
height: 80px;
width: calc(100% - 2px);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
margin-top: 15px;
background-color: #eee;
border: 1px solid var(--color-accents);
}
/* panels */
.items-to-reveal > div, .sidepanel-secondary-part {
background: var(--color-accents);
padding: 5px 10px 10px 10px !important;
}
/*WPADMIN IMAGE BROWSER */
.wpadmin-loading {margin:20px 0 ;}
.wpadmin-image-browser-iframe {
position: fixed;
top: 50px;
left: 10px;
width: calc(100% - 15px);
right: 0 !important;
height: 93%;
z-index: 999999;
}
.wpadmin-image-browser-iframe::-webkit-scrollbar { width: 3px;}
.wpadmin-image-browser-iframe::-webkit-scrollbar-track { background: var(--color-interface-bg); }
.wpadmin-image-browser-iframe::-webkit-scrollbar-thumb { background: #ddd; }
/* wpadmin-image-format-chooser */
.wpadmin-image-format-chooser .preview { height: 80px;
width: calc(100% - 2px);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
margin-top: 15px;
background-color: #eee;
border: 1px solid var(--color-accents);
}
.wpadmin-image-format-chooser .preview:hover {cursor: pointer}
.wpadmin-image-format-chooser span {
display: block;
font-size: 12px;
margin: 13px 0 5px;
}
.wpadmin-image-format-chooser a { font-size: 10px; margin-right: 5px; text-decoration: underline;}
/* UNSPLASH */
.lc-opensvg-search-results img {background: #fff}
.img-search-results { font-size: 14px;}
.img-search-results ul {margin: 0 0 20px;padding: 0}
.img-search-results ul li { display: inline-block; width: 48%; margin-right: 1px;}
.img-search-results ul li:hover {cursor: pointer}
.img-search-results ul li img {width: 100%}
.lc-pagination-button {width:50%; display: inline-block;padding: 5px 10px;}
.lc-pagination-button:hover {cursor: pointer}
/* VECTORIAL CLIPART */
.lc-vectorial-images {background: #fff;padding:0px 0;}
.lc-vectorial-images ul {margin: 0;padding: 0}
#sidepanel .lc-vectorial-images h4 {font-size: 24px;text-align: center}
.lc-vectorial-images ul li { display: inline-block; width: 100%; }
.lc-vectorial-images ul li:hover {cursor: pointer}
.lc-vectorial-images ul li a {text-decoration: none}
.lc-vectorial-images ul li img {width: 100%;max-height: 100px; margin:10px 0;}
.lc-vectorial-images h5 {padding: 5px; text-align: center;color: #444;margin-bottom: 20px;}
.lc-vectorial-images h5 a { color: #444 !important}
/* BLOCKS BROWSER SIDEBAR INTERFACE */
.section-suggestion {font-size: 11px;}
.items-browser h4:hover {cursor: pointer}
.items-browser>div {display: none;}
.items-browser block { display: block;padding: 12px 10px; border-bottom: 1px solid #0e1317; background: var(--color-accents); }
.items-browser block:hover { background-color: #6b718a; cursor: pointer;}
.items-browser block .block-name { color: #fff; font-weight: 400; text-decoration: none; transition: all 0.5s ease-in-out;margin: 0;}
.items-browser block:hover .block-name { text-decoration: none}
.items-browser block .block-description {font-size: 10px;opacity: 0.5}
.items-browser block code {display: none}
.items-browser block i.fa {font-size: 4vh}
.items-browser#basic-blocks block { text-align: center}
#custom-html-blocks > h5 { /* eg "From WP Database" */
text-align: center;
font-size: 12px;
border-bottom: 1px solid #3d3d3d;
padding-bottom: 6px;
text-transform: uppercase;
}
/* ICONS LISTING */
.fontawesome-icon-list div { display: inline-block; width: 23%; text-align: center;margin-bottom: 10px;}
.fontawesome-icon-list div i.fa { font-size: 2rem;display: block; color: #fff}
.fontawesome-icon-list div a :not(i.fa) {display: none}
.fontawesome-icon-list .text-muted {display: none}
/* ICONS BROWSER */
#lc-fontawesome-icons {margin-top: 20px;}
.fontawesome-icon-list a { font-size:0.1px; display: block; color: transparent;margin-bottom: 10px;text-decoration: none }
.fontawesome-icon-list a:hover i.fa {color:var(--color2);}
.fontawesome-icon-list a:focus i.fa {color:var(--color1);}
.fontawesome-icon-list {max-width: 99%; overflow-x: hidden}
#lc-fontawesome-icons .page-header {
padding: 5px;
margin: 20px 0 20px;
background: #444;
border-bottom: none;
font-size: 11px;
margin-top: 20px;
margin-bottom: 10px;
display: block
}
.fontawesome-icon-list section {margin-bottom: 20px}
.fontawesome-icon-list .alert-success ul {list-style-type: none}
.fontawesome-icon-list .alert-success { background: #fff; margin: 20px;}
/* SVG ICONS BROWSER */
#lc-svg-icons {
margin-top: 20px;
max-width: 99%;
overflow-x: hidden;
padding: 7px 0;
BACKGROUND: WHITE;
COLOR: BLACK;
text-align: center;
}
#lc-svg-icons svg {
display: inline-block;
margin-bottom: 10px;
width: 1.0em !important;
height: 1.0em !important;
margin: 7px 7px;
}
#lc-svg-icons svg:hover {color:var(--color2); cursor: pointer}
#lc-svg-icons svg:focus {color:var(--color1);}
#lc-svg-icons h2 {
padding: 5px;
margin: 20px 0 20px;
background: #444;
border-bottom: none;
font-size: 11px;
margin-top: 20px;
margin-bottom: 10px;
display: block
}
/* GRID BUILDER */
/* GRID BUILDER STRUCTURE ELEMENTS */
form#grid-builder,.add-row-buttons-wrap {font-size: 12px}
.add-row-buttons-wrap button {display: inline-block;
width:49%;background: var(--color-interface-bg);
color:#fff;text-decoration: none;border: 1px solid #666;
transition: all 0.2s ease-in-out;
text-align: center; font-size: 10px; text-transform: uppercase;padding: 5px 0;margin-bottom: 5px;
}
.add-row-buttons-wrap button:hover {cursor: pointer;background: #000; }
.add-row-buttons-wrap button:hover span { color: var(--color2); }
.add-row-buttons-wrap button span {
display: block;
font-family: Courier;
font-size: 7px;
line-height: 16px;
color: var(--color-accents);
word-spacing: 120%;
color: #777;
}
.add-row-buttons-wrap button:focus span {
color: var(--color1);
}
.add-row-buttons-wrap button { color: #ffffff;
text-transform: none;}
.add-row-buttons-wrap button:hover {color: white}
.wrap-with-padding{
display: block;
padding:0px 8px 10px;
}
/* LITE BUTTONS */
.lc-button-lite {
display: inline-block;
width: 91%;
color: #FFFFFF;
text-decoration: none;
border: 1px solid #F2F2F2;
text-align: center;
font-size: 14px;
text-transform: uppercase;
padding: 5px 10px;
transition: all 1s ease-in-out;
}
.lc-button-lite:hover {cursor: pointer;background: white; color: #111; text-decoration: none}
/************************** MDL **************************/
form.add-common-form-elements>div {
padding: 0px 10px;
}
form.add-common-form-elements>div.common-form-fields {
padding: 0px;
}
form.add-common-form-elements>div.common-form-fields>div {
padding: 0px 10px;
}
form#basic-blocks > div {
overflow: hidden;
padding: 0px 5px 10px 5px;
}
.items-browser block i.fa {
font-size: 16px;
margin-top: 20px;
margin-bottom: 10px;
}
.items-browser#basic-blocks block {
text-align: center;
float: left;
width: calc(50% - 10px);
padding: 5px;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 100px;
margin: 5px;
border-radius: 5px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.5s;
}
.items-browser#basic-blocks block.full {
text-align: left;
float: left;
width: calc(100% - 10px);
}
.blocks-realicons block {
min-height: 100px;
letter-spacing: normal;
}
.blocks-realicons span {
display: block;
font-size: 10px;
color: var(--color-lightgrey)
}
.blocks-realicons h5 {
margin-top: 5px;
/* border-top: 1px solid var(--color-interface-bg);*/
}
.blocks-centered block { display: flex; align-items: center; justify-content: center;}
#readymade-sections block {
border-radius: 5px;
margin: 5px;
transition: all 0.5s;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
#readymade-sections block .block-name {display: inline;}
#readymade-sections block span.actions {display: block; text-align: right;position: relative;}
#readymade-sections block span.actions a {text-transform: uppercase;font-size: 10px; opacity: 0.6}
#readymade-sections block img {
max-width: 100%;
margin-top: 8px;
}
#readymade-sections block .view-section-ext {
position: absolute;
left: 3px;
margin-top: 7px;
}
.items-browser block .view-section-ext i.fa {
font-size: 10px;
margin-top: 0;
margin-bottom: 0;
}
i.block-description {
display: none;
}
.items-browser block .block-name {
font-size: 11px;
-webkit-font-smoothing: antialiased;
}
/* CUSTOM BLOCKS */
.items-browser#basic-blocks #custom-html-blocks block {
width: 231px;
float: none;
height: auto !important;
padding: 12px 10px;
border-bottom: 1px solid #0e1317;
text-align: left;
margin: 5px !important;
}
/* SIDEPANEL TABS */
#sidepanel .sidepanel-tabs {
border-bottom: 1px solid var(--color-interface-bg);
}
#sidepanel .sidepanel-tabs a.active {
color: var(--color1);
background: var(--color-interface-bg)!important;
}
#sidepanel h4:first-child {
border-top: none;
}
/* UI KIT */
#ui-kit-list {
padding: 2px 4px !important;
list-style: none !important;
display: block;
}
li.ui-kit-list-item {
position: relative;
border-radius: 5px;
margin: 5px;
transition: all 0.5s;
border-top: 1px solid rgba(255, 255, 255, 0.1);
display: block;
padding: 12px 10px;
border-bottom: 1px solid #0e1317;
background: var(--color-accents);
.ui-more-info {
position: absolute;
right: 6px;
top: 4px;
z-index: 2;
span {
font-size:11px !important;
}
}
}
/* UI Cloud Library icon */
#cloud-library-icon {width: 24px !important;height: 24px !important;}
#cloud-library-icon rect {
transition-duration: .4s;
&:nth-child(1) {fill: var(--color1);}
&:nth-child(2) {fill: var(--color-interface-bg);}
&:nth-child(3) {fill: var(--color1);}
&:nth-child(4) {fill: var(--color2);}
&:nth-child(5) {fill: var(--color-interface-bg);}
&:nth-child(6) {fill: var(--color1);}
&:nth-child(7) {fill: var(--color2);}
&:nth-child(8) {fill: var(--color1);}
&:nth-child(9) {fill: var(--color-interface-bg);}
}
li.ui-kit-list-item:hover {
background-color: var(--color-prop-icons);
cursor: pointer;
/* UI Cloud Library icon hover invert */
#cloud-library-icon rect {
transition-duration: .4s;
&:nth-child(9) {fill: var(--color1);}
&:nth-child(8) {fill: var(--color-interface-bg);}
&:nth-child(7) {fill: var(--color1);}
&:nth-child(6) {fill: var(--color2);}
&:nth-child(5) {fill: var(--color-interface-bg);}
&:nth-child(4) {fill: var(--color1);}
&:nth-child(3) {fill: var(--color2);}
&:nth-child(2) {fill: var(--color1);}
&:nth-child(1) {fill: var(--color-interface-bg);}
}
}
li.ui-kit-list-item a {
display:flex;
align-items: center;
text-decoration: none;
svg {
width: 28px;
height: 28px;
flex: 0 0 32px;
padding: 4px;
}
.ui-kit-list-item-content {
border-left: 1px solid var(--color-grey);
padding-left: 6px;
margin-left: 2px;
h5 {
font-size: 13px;
color: #fff;
font-weight: 400;
transition: all 0.5s ease-in-out;
margin: unset;
line-height: normal;
}
p {
display:block;
font-size: 11px;
opacity: 0.75;
margin: 6px 0 0 0;
}
}
}
li.ui-kit-list-item a::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
content: "";
}
li.ui-kit-list-item:hover a p {color:white; opacity: 1;}
/*
form.add-common-form-elements {
padding-top: 15px!important;
}
*/
/* ======== SIDEBAR INPUT FIELDS: TEXT & TEXTAREA ======== */
#sidepanel input[type="text"],
#sidepanel textarea {
display: block;
width: 100%;
height: calc(2.0625rem + 2px);
padding: .375rem .75rem;
font-size: .875rem;
line-height: 1.5;
color: var(--color-lightgrey);
background-color: #1e2032;
background-clip: padding-box;
border: 1px solid var(--color-accents);
border-radius: 2px;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
-o-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
margin-top: 10px;
resize: vertical;
}
#sidepanel textarea::-webkit-scrollbar {
width: 10px;
}
#sidepanel textarea::-webkit-scrollbar-track {
background: var(--color-interface-bg);
}
#sidepanel textarea::-webkit-scrollbar-thumb {
background: var(--color-accents);
}
/* ======== SIDEBAR EDIT PROPERTIES PANEL NEW ========= */
property-group {
display: block;
}
property-subgroup-title {
font-size: 14px;
text-transform: uppercase;
display: block;
margin-bottom: 3px;
color: var(--color-grey-2);
font-weight: 400;
letter-spacing: 0.8px;
}
property-subgroup {
margin-bottom: 10px;
display: block;
padding: 12px 9px 2px 9px;
border-top: 0.5px solid var(--color-accents);
}
propertylabel {
font-size: 13px;
}
propertylabel sup a {
text-decoration: none;
color: var(--color-grey-2) !important;
font-size: 10px;
}
property-subgroup > single-property:last-child {
border:0 !important;
}
single-property {
display: block;
border-bottom: 0.5px solid #313454;
padding: 8px 0;
}
single-property select.form-control {
margin-top: 5px;
display: block;
}
single-property .responsive-cases select.form-control {
width: 168px !important;
margin-left: auto;
}
single-property label {
margin: 5px 0 0 0 !important;
}
property-subgroup[name="widths"] single-property,
property-subgroup[name="heights"] single-property {
display: inline-block;
border-bottom: none;
padding: 8px 0;
width: 49%;
margin: 2px 0px;
}
property-subgroup[name="widths"] single-property propertylabel,
property-subgroup[name="heights"] single-property propertylabel {
font-size: 12px;
}
propertydetails {
display:flex;
margin-left:auto;
}
.numeric-responsive-widget label {color: var(--color-grey-2);}
.responsive-properties-trigger svg {
width: 12px;
height: 12px;
}
.responsive-properties-trigger svg path {
fill: hsl(0deg 0% 50.98%);
}
.responsive-properties-trigger svg:hover path {
fill: var(--color2);
}
.responsive-cases > div {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 6px;
}
.responsive-cases div label {
font-size: 10px !important;
}
propertydetails valuetags {
display: flex;
gap: 2px;
}
propertydetails valuetag a {
font-size: 9px !important;
color: var(--color1) !important;
background-color: var(--color-interface-bg-dark) !important;
padding: 3px 6px;
border-radius: 18px;
text-decoration: none !important;
}
/* ======== SIDEBAR EDIT PROPERTIES PANEL NEW : ICON WIDGETS */
radioicons {
display: flex;
justify-content: end;
gap: 0.5px;
margin-left: auto;
margin-top: 6px;
}
radioicon {
box-sizing: border-box;
position: relative;
width: fit-content;
}
radioicon input[type="radio"] {
opacity: 0;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
cursor: pointer;
}
single-property custom-icon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
single-property custom-icon span {
visibility: hidden;
font-size: 8px;
text-align: center;
position: absolute;
transform: translateY(-50%)!important;
top: 38px;
background-color: var(--color-interface-bg-dark);
color: white;
text-transform:uppercase;
font-weight: 400;
padding: 2px 4px;
}
radioicon:hover custom-icon span {
visibility: visible;
}
single-property custom-icon svg {
width: 20px;
height: 20px;
border: 0.5px solid var(--color-accents);
border-radius: 0.5px;
padding: 4px;
}
single-property radioicon input:checked + custom-icon {
background-color: var(--color-interface-bg-dark);
}
single-property radioicon input:checked + custom-icon:not(custom-icon[icon-for="reset-property"]) svg {
border: 0.5px solid var(--color1);
box-shadow: inset 0px 0px 0px 1px var(--color1);
}
.show-customize-palette-suggestion{
font-size:9px
}
/* ======== SIDEBAR INPUT FIELDS: NUMBER (general) ======== */
#sidepanel input[type=number] {
margin-top: 6px !important;
color: var(--color1);
background-color: #1e2032;
background-clip: padding-box;
border: 1px solid var(--color-accents);
border-radius: 2px;
height: 32px;
width: calc(var(--sidepanel-width)/7);
}
/* Fix for Firefox */
@supports (-moz-appearance:none) {
#sidepanel input[type=number] {
font-size: 13px;
width: 38px;
padding-left: 0px;
}
/* show plus and minus only when focused */
input[type=number] {
-moz-appearance:textfield;
}
input[type=number]:focus {
-moz-appearance:auto;
}
.ff-width-120 {
width: 120px !important;
}
}
/* End fix for Firefox*/
/* Chrome only */
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
/* fix spinners appearance so height is 100% of box */
#sidepanel input[type="number"]::-webkit-inner-spin-button,
#sidepanel input[type="number"]::-webkit-outer-spin-button {
position: absolute;
top: 0;
right: 0;
height: 100%;
}
}
#sidepanel input[type=number]:focus-visible {
outline-style: solid;
outline-color: var(--color1-lighter-30);
outline-width: 2px;
outline-offset: -1px;
}
#sidepanel input[type=number]::selection {
background: #fff;
color: var(--color2);
}
/* EXCEPTION FOR ANIMATION INPUT TYPE NUMBER */
#sidepanel input[type=number][name^="aos"] {
width: 68px;
}
/* DEFINE CUSTOM STANDARD INPUTS */
select.form-control {
display: inline-block;
height: 32px;
line-height: 1.5;
color: var(--color1);
vertical-align: middle;
background: #1e2032;
border: 1px solid var(--color-accents);
border-radius: 2px;
box-shadow: none;
margin-top: 10px;
}
input[type=color] {
width: 100%;
height: 50px;
margin-top: 10px;
}
input[type=color]:hover {cursor: pointer}
/* RESPONSIVE SPACINGS */
.spacing-properties {
margin-bottom: 0;
}
.spacing-properties > DIV {
margin-bottom: 16px !important;
}
.spacing-properties label {
margin-bottom: 6px;
}
.spacing-properties label span {
margin-bottom: 4px;
/* display: block; */
color: var(--color-lightgrey);
margin-right: 2px;
font-size: 10px;
}
#sidepanel input[type="range"] {display: block; width: 100%;}
#sidepanel .size-feedback {
position: absolute;
font-size: 11px;
right: 20px;
margin-top: 9px;
}
/* UTILITY for inputs */
.ellipsize-left {
/* Standard CSS ellipsis */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
/* Beginning of string */
direction: rtl;
text-align: left;
}
a#open-uikit-selection-breadcrumb-link {color:var(--color1);}
/* ============= sidepanel colours for BLOCK and SECTIONS ============= */
/*
section[item-type="section-properties"] {font-weight: 200 !important;background-color: #9C27B0}
section[item-type="container"] {font-weight: 200 !important;background-color: #26a69a}
section[item-type="block-properties"],section[item-type="blocks"] {font-weight: 200 !important;background-color: #ec407a}
section[item-type="section-properties"] h1, section[item-type="container"] h1, section[item-type="block-properties"] h1
{font-size: 16px !important; font-weight: 200 !important}
*/
/* ============= ANIMATIONS PICOLIB ============= background: repeating-linear-gradient(-45deg, #ffe6ff, #e1ffff 5px, white 5px, transparent 10px);*/
.slideInLeft { animation-name: slideInLeft; animation-duration: 1s; animation-fill-mode: both; }
@keyframes slideInLeft {
0% { transform: translateX(-100%); visibility: visible; }
100% { transform: translateX(0); }
}
.slideOutLeft { animation-name: slideOutLeft; animation-duration: 1s; animation-fill-mode: both; }
@keyframes slideOutLeft {
0% { transform: translateX(0); }
100% { visibility: hidden; transform: translateX(-100%);}
}
/* LOADING SPINNER */
@keyframes donut-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}
.donut { display: inline-block; border: 10px solid rgba(0, 0, 0, 0.05); border-left-color: white; border-radius: 50%; width: 6vw; height: 6vw; animation: donut-spin 1.2s linear infinite;}
#sidepanel .donut { margin: 60px 20px; }
/* ============= SMARTPHONE SIMULATOR ============ */
/* The device with borders */
.smartphone {
position: relative;
width: fit-content;
margin: auto;
border: 12px black solid;
border-top-width: 10px;
border-bottom-width: 10px;
border-radius: 5px;
}
/* Superimposed ADD SECTION button */
#primary-tools {
position: fixed; right: 30px; bottom: 30px; background: #03a9f4;padding: 25px; user-select: none; border-radius: 85px;
}
#primary-tools a i {
font-size: 20px; display: block; margin-bottom: 2px;
}
#primary-tools a {
font-family: 'Arial'; font-size: 13px; display: block; text-decoration: none; text-align: center; color:#fff;
}
/* FAKE SELECT INPUTS: UL TO SELECTion CUSTOM WIDGETS */
.ul-to-selection{
font-size: 12px;
display: block;
width: 100%;
padding: 0px;
color: var(--color-lightgrey);
background: #1e2032;
border: 1px solid var(--color-accents);
margin-top: 10px;
list-style-type: none;
position: relative;
box-sizing: border-box;
border-radius: 5px;
}
.ul-to-selection:after {
position: absolute;
right: 0px;
top: 3px;
font-size: 16px;
content: '\f107';
font-family: FontAwesome;
opacity: 0.8;
pointer-events: none;
PADDING: 6px 10px;
color:var(--color1);
}
.ul-to-selection.opened:after { content: '\f106';}
.ul-to-selection li { display: none; background: #fff; border-top: 1px solid #333;min-height: 30px;}
.ul-to-selection li.first {display: block; background-color: #1e2032; border-top:none;border-radius: 5px;}
.ul-to-selection.opened li.first {max-height: 30px;overflow-y: hidden;}
.ul-to-selection li:hover{cursor: pointer; }
.ul-to-selection.opened li {display: block;background: #C9C9C9;border-radius: 0px;}
/* BIG BUTTON */
.bigbutton {width: 100%;padding: 5px;text-align: center;background: rgba(211, 211, 211, 0);
border: 1px solid white; margin: 30px 0;color: white;
font-size: 18px;
}
.bigbutton:hover {cursor: pointer}
/* LC EXPERIMENTAL */
.lc-experimental-feature {display: none}
/* LC MODAL-LINK */
.lc-modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: var(--color-interface-bg); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.lc-modal input[type="text"] {
width:100%;
display: block;
margin:10px 0 24px 0;
font-size:16px;
padding:5px;
color:var(--color-lightgrey);
background-color:#1e2032;
border:1px solid var(--color-accents);
}
.lc-modal label {
font-size: 16px;
color:#fff;
cursor:pointer;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 200;
display: inline-block;
}
.lc-modal a {
color:#fff;
}
.lc-modal fieldset>DIV>strong {
margin-bottom: 9px;
display: block;
}
.lc-modal fieldset label {
margin-bottom: 5px;
}
/* Modal Content */
.lc-modal-header, .lc-modal-footer {
width: 50%;
max-width: 992px;
margin: auto;
border-bottom:1px solid #888;
}
.lc-modal-content {
background-color: #202337;
margin: auto;
padding: 32px;
width: 50%;
max-width: 992px;
box-shadow: 8.0px 16.0px 16.0px hsl(0deg 0% 0% / 0.25);
}
/* The Close Button */
.lc-modal-close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
margin-top:12px
}
/* Button close and insert*/
#button_action_modal {
margin-top: 24px;
display: flex;
justify-content: end;
}
button.lc-modal-link-submit {
font-size:16px;
background-color:var(--color-accents);
color:white;
padding:12px 24px;
text-decoration:none;
border: none;
margin-left:12px;
}
button.lc-modal-link-submit:hover {background-color:white;color:#212337;cursor: pointer; }
button.lc-modal-close {
font-size:16px !important;
float: none !important;
background-color:transparent !important;
color:var(--color-lightgrey);
padding:12px 24px !important;
text-decoration:none;
border: none;
margin-top: 0 !important
}
button.lc-modal-close:hover {
color:white !important;
}
.lc-modal-close:hover,
.lc-modal-close:focus,
.lc-check-label:hover {
color: var(--color1);
text-decoration: none;
cursor: pointer;
}
.lc-check-label {
display: block;
margin: 10px 0;
}
#lc-modal-link-form {
margin: 0;
}
#link-rel {
padding: 5px;
background: #1e2032;
color: var(--color-lightgrey);
margin:10px 0 24px 0;
width:50%;
display: block;
}
.flex-first-spacer {
margin-right:12px;
}
/** //End Modal Link **/
/* simplified_client_ui */
body.simplified_client_ui #toggle-extras-submenu,
body.simplified_client_ui #primary-tools,
body.simplified_client_ui #toggle-tree-view {display: none}
/* FOR FUTURE IMPLEMENTATION eg documentation links hovering blocks/sections in the left sidebar area */
.items-browser block { position: relative; }
.items-browser block:hover .more-item-info-link {visibility: visible;}
.items-browser a.more-item-info-link {position: absolute; top:6px; right:6px; font-size: 12px; visibility: hidden; }
.items-browser a.more-item-info-link span { font-size:13px !important; color:var(--color-lightgrey); }
.items-browser a.more-item-info-link span:hover { color:var(--color1); }
/* SECTIONS LIBRARY: ICON FOR CHOSEN UI KIT ON "READYMADES" TAB */
.sidepanel-tabs svg {
width: 45px;
height: 45px;
}
/* WINBOX */
.winbox {
background: linear-gradient(90deg, var(--color2), var(--color1)) !important;
border-radius: 2px 2px 0 0;
box-shadow: none;
}
.winbox.min {
border-radius: 0;
top: unset !important;
bottom: 0 !important;
}
/* Window Title */
.wb-title {
font-size: 13px;
font-family: "Nunito Sans", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 600;
}
.wb-title:before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-stack' viewBox='0 0 16 16'%3E%3Cpath d='m14.12 10.163 1.715.858c.22.11.22.424 0 .534L8.267 15.34a.6.6 0 0 1-.534 0L.165 11.555a.299.299 0 0 1 0-.534l1.716-.858 5.317 2.659c.505.252 1.1.252 1.604 0l5.317-2.66zM7.733.063a.6.6 0 0 1 .534 0l7.568 3.784a.3.3 0 0 1 0 .535L8.267 8.165a.6.6 0 0 1-.534 0L.165 4.382a.299.299 0 0 1 0-.535z'/%3E%3Cpath d='m14.12 6.576 1.715.858c.22.11.22.424 0 .534l-7.568 3.784a.6.6 0 0 1-.534 0L.165 7.968a.299.299 0 0 1 0-.534l1.716-.858 5.317 2.659c.505.252 1.1.252 1.604 0z'/%3E%3C/svg%3E");
width: 12px;
height: 12px;
background-size: 10px 15px;
background-repeat: no-repeat;
content: " ";
display: inline-block;
vertical-align: baseline;
margin-right: 3px;
}
/* Tree Body */
.wb-body {
/* set the width of window border via margin: */
margin: 4px;
color: #fff;
background: var(--color-interface-bg-dark);
}
/* Tree Head */
#tree-head {
position: sticky;
top: 0;
left: 0;
display: flex;
z-index: 1;
gap: 3px;
justify-content: space-between;
padding: 6px 10px;
font-size: 11px;
background-color: var(--color-interface-bg-dark);
color: var(--color-prop-icons);
border-bottom: 1px solid color-mix(in srgb, var(--color-interface-bg-dark) 80%, grey);
}
#tree-head a {
color: var(--color-grey-2);
text-decoration: none;
&:hover {
color: var(--color2);
}
}
#tree-head a#tree-expand-all {
margin: 0 3px 0 0;
}
#tree-head a#tree-expand-all::before {
content: "\f065";
font: normal normal normal 10px / 1 FontAwesome;
margin: 0 3px 0 0;
}
#tree-head a#tree-collapse-all::before {
content: "\f066";
font: normal normal normal 10px / 1 FontAwesome;
margin: 0 3px 0 0;
}
/* CONTEXT MENU */
.lc-context-menu {
position: fixed;
visibility: hidden;
z-index: 99999999;
min-width: 144px;
font-size: 12px;
background-color: white;
color: var(--color-interface-bg-dark);
border: 1px solid var(--color-interface-bg);
border-radius: 5px !important;
box-shadow: 0 0 10px rgba(var(--color-lightgrey), 0.3);
user-select: none;
}
.lc-context-menu > div {
display: flex;
align-items: center;
padding: 6px 8px;
gap: 8px;
}
.lc-context-menu > div:hover {
background-color: var(--color-accents);
color: white;
cursor: pointer;
}
.lc-context-menu > div[data-tree-item-action="delete-item"]:hover {
background-color: red;
color:white;
}
.lc-context-menu span.fa {
font-size: 14px;
flex: 0 0 16px;
}
/* TREE STRUCTURE */
#tree-body {
height: 100%;
width: 100%;
user-select: none;
--space: 16px;
}
.tree-view-container {
margin-top: 0;
padding: 0 12px;
}
.tree-view-item {
display: block;
font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace;
color: var(--color-lightgrey);
font-size: 12px;
white-space: nowrap;
position: relative;
}
.tree-view-item.active {
outline: 1px solid var(--color2);
color: white;
width: fit-content;
}
.tree-view-item-content-wrapper {
display: flex;
align-items: center;
gap: 6px;
width: fit-content;
padding: calc(var(--space)*0.3) calc(var(--space)*0.4)
}
.tree-view-item-content-wrapper:hover {
background-color: var(--color-accents);
cursor: pointer;
}
/* Change the cursor for collapsed or expanded element in the tree */
.tree-view-item-content-wrapper:has(+ .tree-children) {
cursor: zoom-in;
}
.tree-view-item-content-wrapper:has(+ .tree-children:not([hidden])) {
cursor: zoom-out;
}
.tree-item-icon svg {
color: var(--color1)
}
.tree-item-tagname {
font-weight: bold;
opacity: 0.7;
}
.tree-item-id {
color: var(--color-secondary);
}
.tree-item-classes {
color: var(--color-accent);
}
ul.tree-children {
padding-left: var(--space);
position: relative;
&:after {
position: absolute;
top: 0;
left: calc(var(--space)*0.4);
border-right: 1px solid var(--color-accents);
content: "";
height: calc(100% - (var(--space)*0.8));
}
> li::before {
position: absolute;
top: calc(var(--space)*0.8);
left: calc(var(--space)*-0.6);
border-top: 1px solid var(--color-accents);
content: "";
width: calc(var(--space)*0.75);
}
}
/* Winbox Scrollbar customization */
.wb-body::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.wb-body::-webkit-scrollbar-track {
background: var(--color-interface-bg-dark);
}
.wb-body::-webkit-scrollbar-thumb {
border-radius: 2px;
background: var(--color-grey-2);
}
.wb-body::-webkit-scrollbar-thumb:window-inactive {
background: var(--color-grey-2);
}
.wb-body::-webkit-scrollbar-corner {
background: transparent;
}
/* TOGGLE SWITCH FOR UNIVERSAL SELECTION */
#uniselect-switch {
display: flex;
height: 100%;
align-items: center;
width: fit-content;
}
/* hide switch in simplified user mode */
body.simplified_client_ui #uniselect-switch {
display: none !important;
}
#uniselect-switch {
.switch {
--secondary-container: var(--color1);
--primary: var(--color-interface-bg);
font-size: 10px !important;
position: relative;
display: inline-block;
width: 2.775em; /* 3.7em * 0.75 */
height: 1.35em; /* 1.8em * 0.75 */
}
.switch input {
display: none;
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--color-accents);
transition: .2s;
border-radius: 30px;
}
.slider:before {
position: absolute;
content: "";
height: 1.05em; /* 1.4em * 0.75 */
width: 1.05em; /* 1.4em * 0.75 */
border-radius: 20px;
left: 0.15em; /* 0.2em * 0.75 */
bottom: 0.15em; /* 0.2em * 0.75 */
background-color: #aeaaae;
transition: .4s;
}
input:checked + .slider::before {
background-color: var(--primary);
}
input:checked + .slider {
background-color: var(--secondary-container);
}
input:focus + .slider {
box-shadow: 0 0 1px var(--secondary-container);
}
input:checked + .slider:before {
transform: translateX(1.425em); /* 1.9em * 0.75 */
}
.slider:after {
content: "Universal Selection";
width: max-content;
position: absolute;
left: 36px; /* 48px * 0.75 */
top: 0;
}
input:checked + .slider::after {
color: var(--color1);
}
input:not(:checked) + .slider::after {
color: var(--color-lightgrey);
}
}
/* AI ASSISTANT */
/* AI prompter */
input.button-custom {
padding: 7px 14px;
border: 0;
font-size: 11px;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
}
/* Undo button */
input.button-undo {
background-color: var(--color-accents);
color: white;
}
input.button-undo:hover {
background-color: var(--color2);
}
input.button-undo:disabled {
background-color: var(--color-interface-bg);
color: white;
}
input.button-undo:disabled:hover {
background-color: var(--color-interface-bg);
}
/* Go button default and hover styles */
input.button-go {
background-color: var(--color1);
color: white;
}
input.button-go:hover {
background-color: var(--color1-lighter-30); /* Specific hover effect for the Go button */
}
input.button-go:disabled {
background-color: var(--color-accents);
color: white;
/* cursor: wait; */
}
/* Custom Checkbox */
/* Hides the original checkbox but keeps it interactive */
input.custom-checkbox[type="checkbox"] {
position: relative;
display: none;
}
/* Styles the label associated with the checkbox */
input.custom-checkbox[type="checkbox"] + label {
position: relative;
padding-left: 32px;
cursor: pointer;
}
/* Creates a custom checkbox */
input.custom-checkbox[type="checkbox"] + label::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 24px;
height: 24px;
border: 1px solid var(--color-grey);
background-color: transparent;
box-sizing: border-box;
}
/* Changes the background of the custom checkbox when checked */
input.custom-checkbox[type="checkbox"]:checked + label::before {
background-color: var(--color1);
}
/* Changes the text color of the label when the checkbox is checked */
input.custom-checkbox[type="checkbox"]:checked + label {
color: var(--color1);
}
/* Sets the default text color of the label when the checkbox is unchecked */
input.custom-checkbox[type="checkbox"] + label {
color: var(--color-grey);
margin: 0 !important;
text-transform: uppercase;
}
/* AI Screenshot to code */
/* Icon Customization */
a[data-show="the-ai-screenshot-form"] svg {
transition: fill 0.3s ease;
}
a[data-show="the-ai-screenshot-form"] .active svg {
fill: url(#paint0_linear_2275_15);
}
a[data-show="the-ai-screenshot-form"] .active stop:nth-child(1) {
stop-color: var(--color1);
}
a[data-show="the-ai-screenshot-form"] .active stop:nth-child(2) {
stop-color: var(--color2);
}
a[data-show="the-ai-screenshot-form"]:not(.active) stop:nth-child(1),
a[data-show="the-ai-screenshot-form"]:not(.active) stop:nth-child(2) {
stop-color: white;
}
/* File Upload container */
#file-upload-container {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
input {width: 100%;}
#drop_zone {
border: 1px dashed var(--color-grey-2);
width: 100%;
height: 90px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: var(--color-interface-bg);
cursor: grabbing;
color: white;
}
#drop_zone p {
margin: 0;
font-size: 14px;
}
#drop_zone:hover {
background-color: var(--color-interface-bg-dark);
}
#image-preview {
width: 100%;
border: 1px solid white;
border-radius: 5px;
}
}
#responsive-toolbar:after {
width: 1px;
margin: 0 2px;
background-color:var(--color-accents);
height: var(--maintoolbar-height);
position: absolute;
content: "";
}
/* Undo Redo icons */
#saving-form a.undo i, #saving-form a.redo i{
font-size: 16px;
}
/* READYMADE PAGES MODAL */
#readymades-modal {
max-width: 94vw;
background-color:var(--color-interface-bg);
margin:0 auto;
border-radius:2px;
box-shadow: 5px 5px 14px 2px rgba(0,0,0,0.42);
user-select:none;
}
#readymades-modal-wrapper {
box-sizing: border-box;
width: 100% !important;
z-index:9;
position:absolute;
}
.is-blurred {
/* filter: blur(8px); */
filter: brightness(20%) blur(1px);
}
.readymades-modal-container-scroller {
overflow: auto;
height: 82vh;
}
.readymades-modal-container-scroller::-webkit-scrollbar {
width: 5px;
}
.readymades-modal-container-scroller::-webkit-scrollbar-track {
background: var(--color-interface-bg);
}
.readymades-modal-container-scroller::-webkit-scrollbar-thumb {
background: var(--color-grey-2);
}
/* END MODAL */
/* MODAL ITEM HEADER */
.readymades-modal-header {
display:flex;
flex-wrap: wrap;
height:64px;
padding:12px 24px;
margin-bottom:12px;
background-color:var(--color-interface-header);
align-items:center;
}
.readymades-modal-header #readymades-modal-logo svg {
width:96px;
height:auto;
}
#readymades-modal-categories {
margin:0 auto;
padding:2px 24px;
}
#readymades-modal-categories a {
color:var(--color-grey-2);
font-size:12px;
padding:12px 24px;
text-decoration:none;
margin:0 0 0 6px
}
#readymades-modal-categories a.active {
background: var(--color-grey-2);
color: var(--color-interface-bg);
text-decoration:underline
}
#readymades-modal-categories a:hover {
color:white;
}
#readymades-modal-search {
border-bottom: 1px solid var(--color-interface-bg);
border-right: 1px solid var(--color-interface-bg);
}
#readymades-modal-search input::placeholder {
color:var(--color-grey-2);
}
#readymades-modal-search input {
background: transparent;
padding: 6px 24px;;
font-size: 14px;
color: var(--color-grey-2);
border: none;
}
#readymades-modal-search svg {width:16px;height:16px;fill:var(--color-grey-2);vertical-align: middle;margin-right: 5px;}
.readymades-modal-item-body {
display:flex;
margin-bottom:16px
}
.readymades-modal-header #readymades-close {
margin-left: 10px;
}
.readymades-modal-header a {
color: var(--color-grey-2);
font-size: 11px;
margin-left: 20px;
text-decoration: none;
transition: all 0.5s ease-in-out;
}
/* END MODAL ITEM HEADER */
/* MODAL ITEM CONTAINER */
.readymades-modal-container {
max-width: 1600px;
display: grid;
grid-template-columns: repeat(auto-fill, 326px);
column-gap: 24px;
row-gap: 24px;
padding:24px 12px;
justify-content: center;
margin: 0 auto;
}
.readymades-modal-container .readymades-modal-item {
padding:10px;
border-radius: 2px;
background: linear-gradient( 225deg, hsl(235deg 26% 29%), hsl(234deg 25% 19%));
box-shadow: -26px 26px 52px hsl(234deg 26% 14%), 26px -26px 52px hsl(235deg 25% 13%);
min-height: 500px;
}
.readymades-modal-container .readymades-modal-thumbnail {
position:relative;
width: 100%;
}
/* Hover state effect on item */
.readymades-modal-container .readymades-modal-item:hover {
transform:scale(1.01);
transition: all .5s ease-in-out;
}
a.readymades-modal-preview-link {
display:block;
position:relative;
width:100%;
no_height:260px;
}
.readymades-modal-item-viewer {
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
no_height:260px;
display: flex ;
align-items:center;
justify-content:center;
}
.readymades-modal-item-viewer:hover {opacity:1;background-color: rgb(33 36 55 / 80%);
background-blend-mode:overlay;
transition: all .2s ease-in-out;}
.readymades-modal-item-viewer p {
font-size: 12px;
padding: 0;
margin: 0 0 0 4px;
}
.readymades-modal-item-viewer svg, .readymades-modal-item-viewer p {
color: var(--color-grey-2);
}
/* END MODAL ITEM CONTAINER */
/* MODAL ITEM FOOTER */
.readymades-modal-item-footer {
display:flex;
justify-content:space-between;
align-items:center;
}
.readymades-modal-container .readymades-modal-item h2 {
font-size: 13px;
color: var(--color-lightgrey);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
font-weight: 400;
text-transform: capitalize;
}
/* Insert Button*/
.readymades-modal-item a.readymades-modal-action-insert {
min-width: 64px;
background-color: var(--color-readymade-button-bg);
color:var(--color-lightgrey);
padding: 6px 12px;
font-size:10px;
text-decoration:none;
text-align:center;
text-transform: uppercase;
letter-spacing: -0.1px;
}
.readymades-modal-item a.readymades-modal-action-insert svg {
width:12px;
height:12px;
vertical-align: text-bottom;
}
.readymades-modal-item a.readymades-modal-action-insert:hover {
background-color:var(--color-interface-bg);
color:#fff;
}
#readymade-sections-uikit-name {
text-align: center;
font-size: 15px !important;
letter-spacing: -0.025em !important;
}
#readymade-sections-uikit-name::before {
/* Set the Unicode value for the "fa-ghost" icon */
font: normal normal normal 14px / 1 FontAwesome;
content: "\f015";
display: inline-block;
padding-right: 3px;
vertical-align: middle;
color: var(--color1);
}
#readymade-sections-filters {
width:99%;
text-align: center;
display: block;
margin-bottom: 10px;
margin-top: -14px;
}
/* READYMADES SEARCH FIELD */
#readymade-sections-search-field {
border: none !important;
outline: none !important;
margin-bottom: 12px;
}
select.insertion-method-selection {
margin: 12px 10px 21px;
user-select: none;
position: absolute;
bottom: 0;
width: 92% !important;
left: 0;
border: none !important;
font-size: 16px !important;
}
/* RESPONSIVE ADJUSTMENT */
@media only screen and (max-width: 992px) {
.readymades-modal-header {
align-content: center;
justify-content: center;
height:128px;
}
#readymades-modal-categories a {
padding:6px 12px;
}
}
@media only screen and (max-width: 1200px) {
#readymades-modal-categories a {
padding:12px 16px;
}
}