1660 lines
62 KiB
CSS
1660 lines
62 KiB
CSS
.is-builder {transition: all ease 0.3s;}
|
|
.is-builder > div {position:relative;transition:none;
|
|
|
|
/* Prevent overide by other css, needed for sortable's border-right fix. see: make drag handler hovers the rows */
|
|
margin-left:0;margin-right:0; /* Bootstrap, Bulma, Spectre, Primer */
|
|
width:auto; /* Miligram */
|
|
}
|
|
@media (min-width: 640px) {
|
|
.is-builder > div {display:flex}
|
|
}
|
|
.is-builder > div > div:focus {outline:none}
|
|
.is-subblock:focus {outline:none}
|
|
.is-builder[gridoutline] > div > div {outline:1px solid rgba(132, 132, 132, 0.27); outline-offset: 1px;}
|
|
.is-builder > div > div.cell-active {outline:1px solid #00da89;}
|
|
.is-builder .row-active {outline:1px solid #00da89;z-index: 1;}
|
|
.is-builder .row-active.row-outline {outline:1px solid rgba(132, 132, 132, 0.2);}
|
|
|
|
.is-builder .row-active:not(.row-outline) > div.cell-active {outline:none}
|
|
/*.is-builder .row-active .cell-active {outline:none;}*/
|
|
|
|
/* .cell-active h1.elm-active,
|
|
.cell-active h2.elm-active,
|
|
.cell-active h3.elm-active,
|
|
.cell-active h4.elm-active,
|
|
.cell-active h5.elm-active,
|
|
.cell-active h6.elm-active,
|
|
.cell-active p.elm-active,
|
|
.cell-active blockquote.elm-active,
|
|
.cell-active pre.elm-active,
|
|
.cell-active li.elm-active, */
|
|
.cell-active .elm-active { background: rgba(200, 200, 201, 0.11); }
|
|
.cell-active table.elm-active {background-color: transparent;}
|
|
|
|
.cell-active hr {cursor:pointer}
|
|
|
|
table.default td {
|
|
border: transparent 1px dashed;
|
|
}
|
|
.cell-active table.default td {
|
|
border: #cccccc 1px dashed;
|
|
}
|
|
|
|
.cell-active[data-html] {
|
|
background-color: rgba(200, 200, 201, 0.11);
|
|
}
|
|
|
|
.icon-active {
|
|
background-color: rgba(200, 200, 201, 0.4);
|
|
}
|
|
|
|
/* Email Mode */
|
|
.is-builder table:focus {outline:none}
|
|
|
|
/* General */
|
|
.is-icon-flex {
|
|
width: 16px;
|
|
height: 16px;
|
|
fill: rgba(0, 0, 0, 0.9);
|
|
}
|
|
svg {
|
|
overflow: hidden;
|
|
vertical-align: middle;
|
|
}
|
|
.clearfix:before, .clearfix:after {content: " ";display: table;}
|
|
.clearfix:after {clear:both;}
|
|
.clearfix {*zoom: 1;clear:none;}
|
|
.transition1 {transition: all ease 0.1s;}
|
|
|
|
/*
|
|
Sortable blocks
|
|
*/
|
|
.sortable-drag {background:rgba(0,0,0,0.04);outline:none !important;}
|
|
.sortable-drag * {opacity:0}
|
|
.sortable-drag .is-row-tool {opacity:0}
|
|
|
|
.sortable-ghost {background: rgba(204, 204, 204, 0.15);width:100%;outline:none !important;}
|
|
.sortable-ghost * {outline: none !important;}
|
|
.sortable-ghost .is-row-tool {display:none !important;}
|
|
|
|
/*
|
|
Fonts
|
|
*/
|
|
#_cbhtml * {font-family:sans-serif;line-height: inherit;} /* Prevent overide */
|
|
#_cbhtml {
|
|
font-family: sans-serif;
|
|
font-size: 13px;
|
|
letter-spacing: 1px;
|
|
font-weight:300px;
|
|
}
|
|
#_cbhtml p {font-size:14px}
|
|
|
|
/*
|
|
Draggable snippet
|
|
*/
|
|
#_cbhtml .snippet-item {cursor:move !important;}
|
|
#_cbhtml .snippet-item.sortable-chosen {background: rgba(0, 0, 0, 0.06);height:auto;}
|
|
#_cbhtml .snippet-item.sortable-drag {background:rgba(0,0,0,0.06);outline:none !important;}
|
|
.is-builder .snippet-item.sortable-ghost {width:100%;background:rgba(204, 204, 204, 0.15);height:40px;}
|
|
|
|
/*content*/
|
|
#_cbhtml .snippet-item.sortable-chosen * {visibility: visible;}
|
|
#_cbhtml .snippet-item.sortable-chosen.sortable-drag * {visibility: hidden;transition:none !important;}
|
|
.is-builder .snippet-item.sortable-ghost * {visibility: hidden;}
|
|
|
|
/*
|
|
Pop
|
|
*/
|
|
#_cbhtml .is-pop {
|
|
position:absolute;top:0;left:0;display:none;z-index:10003;background:#fff;
|
|
border:1px solid rgba(220, 220, 220, 0.86);
|
|
box-shadow: 3px 4px 9px 0px rgba(0, 0, 0, 0.07);
|
|
/*border:1px solid rgba(220, 220, 220, 0.8);
|
|
box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 9px 0px;*/
|
|
}
|
|
|
|
#_cbhtml .is-pop:hover {z-index:10003;}
|
|
|
|
#_cbhtml .is-pop-tabs {
|
|
display: flex;
|
|
width: 100%;
|
|
margin-bottom:5px;
|
|
}
|
|
#_cbhtml .is-pop-tabs > div {
|
|
background: #f7f7f7;
|
|
width: 50%;
|
|
height: 30px;
|
|
line-height:30px;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
font-size:9px;
|
|
font-weight:bold;
|
|
text-transform: uppercase;
|
|
color:#111;
|
|
}
|
|
#_cbhtml .is-pop-tabs > div.is-pop-tab-item {
|
|
cursor: pointer;
|
|
}
|
|
#_cbhtml .is-pop-tabs > div.active {
|
|
background: transparent;
|
|
cursor:auto;
|
|
}
|
|
|
|
/*
|
|
Special
|
|
*/
|
|
#_cbhtml #divImageTool {position:absolute;top:0;left:0;display:none;/*z-index:10002;*/background:#fff;border:1px solid rgb(220, 220, 220);}
|
|
#_cbhtml #divLinkTool {position:absolute;top:0;left:0;display:none;/*z-index:10002;*/;background:#fff;border:1px solid rgb(220, 220, 220);}
|
|
|
|
|
|
/*
|
|
RTE Toolbar
|
|
*/
|
|
#_cbhtml .is-rte-tool {z-index:10001;top:25px;box-shadow: rgba(0, 0, 0, 0.05) 0px 5px 9px 0px;background:#fff;padding:0;}
|
|
#_cbhtml .is-rte-tool button {width: 45px;height: 40px;margin: 0;}
|
|
#_cbhtml .is-rte-tool button.on {background:#f5f5f5}
|
|
#_cbhtml .is-rte-tool button:hover {background:#f7f7f7}
|
|
#_cbhtml .is-rte-tool button svg {fill:#000}
|
|
#_cbhtml .is-rte-tool > div:not(.is-draggable) {background: #fff;padding: 8px 10px 8px 10px;}
|
|
|
|
#_cbhtml .is-rte-tool .rte-separator,
|
|
#_cbhtml .rte-more-options .rte-separator {
|
|
height: 30px;
|
|
width: 1px;
|
|
background: #e2e2e2;
|
|
margin:7px 3px 0;
|
|
}
|
|
|
|
#_cbhtml[toolbarleft] .is-rte-tool {left:25px;box-shadow: rgba(0, 0, 0, 0.05) 6px 0px 9px 0px;}
|
|
#_cbhtml[toolbarright] .is-rte-tool {right:35px;left:auto;box-shadow: rgba(0, 0, 0, 0.05) -4px 0px 9px 0px;}
|
|
#_cbhtml[toolbarleft] .is-rte-tool > div:not(.is-draggable),
|
|
#_cbhtml[toolbarright] .is-rte-tool > div:not(.is-draggable) {flex-direction:column;background: #fff;padding: 8px 9px 8px 9px;}
|
|
|
|
#_cbhtml[toolbarleft] .is-rte-tool .rte-separator,
|
|
#_cbhtml[toolbarright] .is-rte-tool .rte-separator,
|
|
#_cbhtml[toolbarleft] .rte-more-options .rte-separator,
|
|
#_cbhtml[toolbarright] .rte-more-options .rte-separator {
|
|
height: 1px;
|
|
width: 34px;
|
|
background: #e2e2e2;
|
|
margin:3px 0 3px 7px;
|
|
}
|
|
|
|
/* Align, Formatting, List */
|
|
#_cbhtml .rte-align-options,
|
|
#_cbhtml .rte-formatting-options,
|
|
#_cbhtml .rte-list-options,
|
|
#_cbhtml .rte-more-options {z-index:10002;display:none;position:fixed;height:0;border:none;background:#fff;
|
|
box-shadow: #0000000d 0px 5px 9px 0px;
|
|
}
|
|
#_cbhtml .rte-more-options {z-index:10001}
|
|
|
|
#_cbhtml .rte-align-options button,
|
|
#_cbhtml .rte-formatting-options button,
|
|
#_cbhtml .rte-list-options button,
|
|
#_cbhtml .rte-more-options button {width: 46px;height: 40px;margin: 0;}
|
|
#_cbhtml .rte-align-options button.on,
|
|
#_cbhtml .rte-formatting-options button.on,
|
|
#_cbhtml .rte-list-options button.on,
|
|
#_cbhtml .rte-more-options button.on {background:#f5f5f5}
|
|
#_cbhtml .rte-align-options button:hover,
|
|
#_cbhtml .rte-formatting-options button:hover,
|
|
#_cbhtml .rte-list-options button:hover,
|
|
#_cbhtml .rte-more-options button:hover {background:#f7f7f7}
|
|
|
|
|
|
#_cbhtml[toolbarleft] .rte-align-options,
|
|
#_cbhtml[toolbarleft] .rte-formatting-options,
|
|
#_cbhtml[toolbarleft] .rte-list-options,
|
|
#_cbhtml[toolbarleft] .rte-more-options {height:auto;width:0;flex-direction: column;
|
|
box-shadow:rgba(0, 0, 0, 0.05) 5px 0px 9px 0px;
|
|
}
|
|
|
|
#_cbhtml[toolbarright] .rte-align-options,
|
|
#_cbhtml[toolbarright] .rte-formatting-options,
|
|
#_cbhtml[toolbarright] .rte-list-options,
|
|
#_cbhtml[toolbarright] .rte-more-options {height:auto;width:0;flex-direction: column;
|
|
box-shadow:rgba(0, 0, 0, 0.05) -6px 1px 9px 0px;
|
|
}
|
|
|
|
#_cbhtml .rte-align-options,
|
|
#_cbhtml .rte-formatting-options,
|
|
#_cbhtml .rte-list-options,
|
|
#_cbhtml .rte-more-options {height:0px;box-sizing:border-box;overflow:hidden;}
|
|
#_cbhtml .rte-align-options > div,
|
|
#_cbhtml .rte-formatting-options > div,
|
|
#_cbhtml .rte-list-options > div,
|
|
#_cbhtml .rte-more-options > div {display:flex;padding: 1px 9px 9px 9px;}
|
|
#_cbhtml .rte-align-options.active,
|
|
#_cbhtml .rte-formatting-options.active,
|
|
#_cbhtml .rte-list-options.active,
|
|
#_cbhtml .rte-more-options.active {animation-name:formatting-slide-out; animation-duration:0.1s; animation-fill-mode: forwards;}
|
|
@keyframes formatting-slide-out {
|
|
from {height: 0px;}
|
|
to {height: 49px;}
|
|
}
|
|
#_cbhtml .rte-align-options.deactive,
|
|
#_cbhtml .rte-formatting-options.deactive,
|
|
#_cbhtml .rte-list-options.deactive,
|
|
#_cbhtml .rte-more-options.deactive {animation-name:formatting-slide-in; animation-duration:0.1s; animation-fill-mode: forwards;}
|
|
@keyframes formatting-slide-in {
|
|
from {height: 49px;}
|
|
to {height: 0px;}
|
|
}
|
|
|
|
#_cbhtml[toolbarleft] .rte-align-options,
|
|
#_cbhtml[toolbarleft] .rte-formatting-options,
|
|
#_cbhtml[toolbarleft] .rte-list-options,
|
|
#_cbhtml[toolbarleft] .rte-more-options {height:auto; width:0px}
|
|
#_cbhtml[toolbarleft] .rte-align-options > div,
|
|
#_cbhtml[toolbarleft] .rte-formatting-options > div,
|
|
#_cbhtml[toolbarleft] .rte-list-options > div,
|
|
#_cbhtml[toolbarleft] .rte-more-options > div {flex-direction: column;padding: 9px 9px 9px 1px;}
|
|
#_cbhtml[toolbarleft] .rte-align-options.active,
|
|
#_cbhtml[toolbarleft] .rte-formatting-options.active,
|
|
#_cbhtml[toolbarleft] .rte-list-options.active,
|
|
#_cbhtml[toolbarleft] .rte-more-options.active {animation-name:formatting-leftslide-out; animation-duration:0.1s; animation-fill-mode: forwards;}
|
|
@keyframes formatting-leftslide-out {
|
|
from {width: 0;}
|
|
to {width: 55px;}
|
|
}
|
|
#_cbhtml[toolbarleft] .rte-align-options.deactive,
|
|
#_cbhtml[toolbarleft] .rte-formatting-options.deactive,
|
|
#_cbhtml[toolbarleft] .rte-list-options.deactive,
|
|
#_cbhtml[toolbarleft] .rte-more-options.deactive {animation-name:formatting-leftslide-in; animation-duration:0.1s; animation-fill-mode: forwards;}
|
|
@keyframes formatting-leftslide-in {
|
|
from {width: 55px;}
|
|
to {width: 0;}
|
|
}
|
|
|
|
#_cbhtml[toolbarright] .rte-align-options,
|
|
#_cbhtml[toolbarright] .rte-formatting-options,
|
|
#_cbhtml[toolbarright] .rte-list-options,
|
|
#_cbhtml[toolbarright] .rte-more-options {height:auto; width:0px}
|
|
#_cbhtml[toolbarright] .rte-align-options > div,
|
|
#_cbhtml[toolbarright] .rte-formatting-options > div,
|
|
#_cbhtml[toolbarright] .rte-list-options > div,
|
|
#_cbhtml[toolbarright] .rte-more-options > div {flex-direction: column;padding: 9px 2px 9px 9px;}
|
|
#_cbhtml[toolbarright] .rte-align-options.active,
|
|
#_cbhtml[toolbarright] .rte-formatting-options.active,
|
|
#_cbhtml[toolbarright] .rte-list-options.active,
|
|
#_cbhtml[toolbarright] .rte-more-options.active {animation-name:formatting-rightslide-out; animation-duration:0.1s; animation-fill-mode: forwards;}
|
|
@keyframes formatting-rightslide-out {
|
|
from {width: 0;}
|
|
to {width: 55px;}
|
|
}
|
|
#_cbhtml[toolbarright] .rte-align-options.deactive,
|
|
#_cbhtml[toolbarright] .rte-formatting-options.deactive,
|
|
#_cbhtml[toolbarright] .rte-list-options.deactive,
|
|
#_cbhtml[toolbarright] .rte-more-options.deactive {animation-name:formatting-rightslide-in; animation-duration:0.1s; animation-fill-mode: forwards;}
|
|
@keyframes formatting-rightslide-in {
|
|
from {width: 55px;}
|
|
to {width: 0;}
|
|
}
|
|
|
|
|
|
/* Color */
|
|
#_cbhtml .rte-color-picker {z-index:10002;display:none;overflow:hidden; flex-direction: column;position:fixed;height:0;border:none;box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 9px 0px;background:#fff;padding: 0;}
|
|
#_cbhtml .rte-color-picker.active {animation-name:colorpicker-slide-out; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes colorpicker-slide-out {
|
|
from {height: 0;}
|
|
to {height: 445px;}
|
|
}
|
|
#_cbhtml .rte-color-picker.deactive {animation-name:colorpicker-slide-in; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes colorpicker-slide-in {
|
|
from {height: 445px;}
|
|
to {height: 0;}
|
|
}
|
|
#_cbhtml .rte-color-picker .is-pop-tabs {
|
|
padding: 3px 12px 0;
|
|
box-sizing: border-box;
|
|
}
|
|
#_cbhtml .rte-color-picker .rte-color-picker-area > div {padding-top:5px !important}
|
|
|
|
#_cbhtml[toolbarleft] .rte-color-picker {box-shadow: rgba(0, 0, 0, 0.1) 8px 0px 9px 0px;height:452px;;width:0px;overflow:hidden;}
|
|
#_cbhtml[toolbarleft] .rte-color-picker.active {animation-name:colorpicker-leftslide-out; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes colorpicker-leftslide-out {
|
|
from {width: 0;}
|
|
to {width: 270px;}
|
|
}
|
|
#_cbhtml[toolbarleft] .rte-color-picker.deactive {animation-name:colorpicker-leftslide-in; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes colorpicker-leftslide-in {
|
|
from {width: 270px;}
|
|
to {width: 0;}
|
|
}
|
|
#_cbhtml[toolbarleft] .rte-color-picker .is-pop-tabs {
|
|
padding: 11px 12px 0;
|
|
}
|
|
|
|
#_cbhtml[toolbarright] .rte-color-picker {box-shadow: rgba(0, 0, 0, 0.1) -7px 0px 9px 0px;height:452px;width:0px;overflow:hidden;}
|
|
#_cbhtml[toolbarright] .rte-color-picker.active {animation-name:colorpicker-rightslide-out; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes colorpicker-rightslide-out {
|
|
from {width: 0;}
|
|
to {width: 270px;}
|
|
}
|
|
#_cbhtml[toolbarright] .rte-color-picker.deactive {animation-name:colorpicker-rightslide-in; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes colorpicker-rightslide-in {
|
|
from {width: 270px;}
|
|
to {width: 0;}
|
|
}
|
|
#_cbhtml[toolbarright] .rte-color-picker .is-pop-tabs {
|
|
padding: 11px 12px 0;
|
|
}
|
|
|
|
/* Icons */
|
|
#_cbhtml .rte-icon-options {z-index:10002;display:none;flex-direction: column;position:fixed;height:0;overflow:hidden;border:none;box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 9px 0px;background:#fff;padding:0;}
|
|
#_cbhtml .rte-icon-options iframe {margin:1px 0 0;width: 100%;max-width: 300px;height: 100%;border: none;}
|
|
#_cbhtml .rte-icon-options.active {animation-name:icon-slide-out; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes icon-slide-out {
|
|
from {height: 0;}
|
|
to {height: 240px;}
|
|
}
|
|
#_cbhtml .rte-icon-options.deactive {animation-name:icon-slide-in; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes icon-slide-in {
|
|
from {height: 240px;}
|
|
to {height: 0;}
|
|
}
|
|
|
|
#_cbhtml[toolbarleft] .rte-icon-options {height:260px;width:0;overflow:hidden;box-shadow: rgba(0, 0, 0, 0.1) 8px 0px 9px 0px;}
|
|
#_cbhtml[toolbarleft] .rte-icon-options iframe {margin:9px 0 9px 0;}
|
|
#_cbhtml[toolbarleft] .rte-icon-options.active {animation-name:icon-leftslide-out; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes icon-leftslide-out {
|
|
from {width: 0;}
|
|
to {width: 300px;}
|
|
}
|
|
#_cbhtml[toolbarleft] .rte-icon-options.deactive {animation-name:icon-leftslide-in; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes icon-leftslide-in {
|
|
from {width: 300px;}
|
|
to {width: 0;}
|
|
}
|
|
|
|
#_cbhtml[toolbarright] .rte-icon-options {height:260px;width:0;overflow:hidden;box-shadow: rgba(0, 0, 0, 0.1) -7px 0px 9px 0px;}
|
|
#_cbhtml[toolbarright] .rte-icon-options iframe {margin:9px 0 9px 0;}
|
|
#_cbhtml[toolbarright] .rte-icon-options.active {animation-name:icon-leftslide-out; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes icon-leftslide-out {
|
|
from {width: 0;}
|
|
to {width: 300px;}
|
|
}
|
|
#_cbhtml[toolbarright] .rte-icon-options.deactive {animation-name:icon-leftslide-in; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes icon-leftslide-in {
|
|
from {width: 300px;}
|
|
to {width: 0;}
|
|
}
|
|
|
|
/* Font Family */
|
|
#_cbhtml .rte-fontfamily-options {z-index:10002;display:none;flex-direction: column;position:fixed;height:0;overflow:hidden;border:none;box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 9px 0px;background:#fff;padding:0;}
|
|
#_cbhtml .rte-fontfamily-options iframe {margin:1px 0 0;width: 100%;max-width: 260px;height: 100%;border: none;}
|
|
#_cbhtml .rte-fontfamily-options.active {animation-name:fontfamily-slide-out; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes fontfamily-slide-out {
|
|
from {height: 0;}
|
|
to {height: 263px;}
|
|
}
|
|
#_cbhtml .rte-fontfamily-options.deactive {animation-name:fontfamily-slide-in; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes fontfamily-slide-in {
|
|
from {height: 263px;}
|
|
to {height: 0;}
|
|
}
|
|
|
|
#_cbhtml[toolbarleft] .rte-fontfamily-options {height:260px;width:0;overflow:hidden;box-shadow: rgba(0, 0, 0, 0.1) 8px 0px 9px 0px;}
|
|
#_cbhtml[toolbarleft] .rte-fontfamily-options iframe {margin:9px 0 9px 0;}
|
|
#_cbhtml[toolbarleft] .rte-fontfamily-options.active {animation-name:fontfamily-leftslide-out; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes fontfamily-leftslide-out {
|
|
from {width: 0;}
|
|
to {width: 260px;}
|
|
}
|
|
#_cbhtml[toolbarleft] .rte-fontfamily-options.deactive {animation-name:fontfamily-leftslide-in; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes fontfamily-leftslide-in {
|
|
from {width: 260px;}
|
|
to {width: 0;}
|
|
}
|
|
|
|
#_cbhtml[toolbarright] .rte-fontfamily-options {height:260px;width:0;overflow:hidden;box-shadow: rgba(0, 0, 0, 0.1) -7px 0px 9px 0px;}
|
|
#_cbhtml[toolbarright] .rte-fontfamily-options iframe {margin:9px 0 9px 0;}
|
|
#_cbhtml[toolbarright] .rte-fontfamily-options.active {animation-name:fontfamily-leftslide-out; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes fontfamily-leftslide-out {
|
|
from {width: 0;}
|
|
to {width: 260px;}
|
|
}
|
|
#_cbhtml[toolbarright] .rte-fontfamily-options.deactive {animation-name:fontfamily-leftslide-in; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes fontfamily-leftslide-in {
|
|
from {width: 260px;}
|
|
to {width: 0;}
|
|
}
|
|
|
|
/* Custom Tags */
|
|
#_cbhtml .rte-customtag-options {z-index:10002;display:none;overflow:hidden;flex-direction: column;position:fixed;height:0;border:none;box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 9px 0px;background:#fff;padding:0;}
|
|
#_cbhtml .rte-customtag-options.active {animation-name:customtag-slide-out; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes customtag-slide-out {
|
|
from {height: 0;}
|
|
to {height: 145px;}
|
|
}
|
|
#_cbhtml .rte-customtag-options.deactive {animation-name:customtag-slide-in; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes customtag-slide-in {
|
|
from {height: 145px;}
|
|
to {height: 0;}
|
|
}
|
|
|
|
#_cbhtml .rte-customtag-options > div {width:180px;padding:1px 9px 9px;box-sizing:border-box;overflow-x:hidden;overflow-y:auto;}
|
|
#_cbhtml .rte-customtag-options > div button {font-size:11px;width:100%;}
|
|
#_cbhtml .rte-customtag-options > div button:hover {background:#f5f5f5;}
|
|
|
|
#_cbhtml[toolbarleft] .rte-customtag-options {height:auto;width:0;box-shadow: rgba(0, 0, 0, 0.1) 8px 0px 9px 0px;}
|
|
#_cbhtml[toolbarleft] .rte-customtag-options.active {animation-name:customtag-leftslide-out; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes customtag-leftslide-out {
|
|
from {width: 0;}
|
|
to {width: 180px;}
|
|
}
|
|
#_cbhtml[toolbarleft] .rte-customtag-options.deactive {animation-name:customtag-leftslide-in; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes customtag-leftslide-in {
|
|
from {width: 180px;}
|
|
to {width: 0;}
|
|
}
|
|
#_cbhtml[toolbarleft] .rte-customtag-options > div {width:180px;height: 198px;padding:9px 9px 9px;}
|
|
|
|
#_cbhtml[toolbarright] .rte-customtag-options {height:auto;width:0;box-shadow: rgba(0, 0, 0, 0.1) -7px 0px 9px 0px;}
|
|
#_cbhtml[toolbarright] .rte-customtag-options.active {animation-name:customtag-rightslide-out; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes customtag-rightslide-out {
|
|
from {width: 0;}
|
|
to {width: 180px;}
|
|
}
|
|
#_cbhtml[toolbarright] .rte-customtag-options.deactive {animation-name:customtag-rightslide-in; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes customtag-rightslide-in {
|
|
from {width: 180px;}
|
|
to {width: 0;}
|
|
}
|
|
#_cbhtml[toolbarright] .rte-customtag-options > div {width:180px;height: 198px;padding:9px 9px 9px;}
|
|
|
|
|
|
/* Paragraph */
|
|
#_cbhtml .rte-paragraph-options {z-index:10002;display:none;overflow:hidden;flex-direction: column;position:fixed;height:0;border:none;box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 9px 0px;background:#fff;padding:0;}
|
|
#_cbhtml .rte-paragraph-options.active {animation-name:paragraph-slide-out; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes paragraph-slide-out {
|
|
from {height: 0;}
|
|
to {height: 286px;}
|
|
}
|
|
#_cbhtml .rte-paragraph-options.deactive {animation-name:paragraph-slide-in; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes paragraph-slide-in {
|
|
from {height: 286px;}
|
|
to {height: 0;}
|
|
}
|
|
#_cbhtml .rte-paragraph-options div.on {background:#f5f5f5}
|
|
#_cbhtml .rte-paragraph-options > div {width:242px;padding:1px 9px 9px;box-sizing:border-box;overflow-x:hidden;}
|
|
#_cbhtml .rte-paragraph-options > div > div {cursor:pointer;overflow:hidden;padding:5px 0;box-sizing:border-box;}
|
|
#_cbhtml .rte-paragraph-options > div > div:hover {background:#f7f7f7}
|
|
#_cbhtml .rte-paragraph-options > div > div > * {text-transform: none !important;margin:0 !important;line-height: 1.45!important;text-align:center;}
|
|
|
|
#_cbhtml[toolbarleft] .rte-paragraph-options {height:auto;width:0;box-shadow: rgba(0, 0, 0, 0.1) 8px 0px 9px 0px;}
|
|
#_cbhtml[toolbarleft] .rte-paragraph-options.active {animation-name:paragraph-leftslide-out; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes paragraph-leftslide-out {
|
|
from {width: 0;}
|
|
to {width: 261px;}
|
|
}
|
|
#_cbhtml[toolbarleft] .rte-paragraph-options.deactive {animation-name:paragraph-leftslide-in; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes paragraph-leftslide-in {
|
|
from {width: 261px;}
|
|
to {width: 0;}
|
|
}
|
|
#_cbhtml[toolbarleft] .rte-paragraph-options > div {width:242px;padding:9px 9px 9px;}
|
|
|
|
#_cbhtml[toolbarright] .rte-paragraph-options {height:auto;width:0;box-shadow: rgba(0, 0, 0, 0.1) -7px 0px 9px 0px;}
|
|
#_cbhtml[toolbarright] .rte-paragraph-options.active {animation-name:paragraph-rightslide-out; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes paragraph-rightslide-out {
|
|
from {width: 0;}
|
|
to {width: 261px;}
|
|
}
|
|
#_cbhtml[toolbarright] .rte-paragraph-options.deactive {animation-name:paragraph-rightslide-in; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes paragraph-rightslide-in {
|
|
from {width: 261px;}
|
|
to {width: 0;}
|
|
}
|
|
#_cbhtml[toolbarright] .rte-paragraph-options > div {width:242px;padding:9px 9px 9px;}
|
|
|
|
/* Text Settings */
|
|
#_cbhtml .rte-textsetting-options {z-index:10002;display:none;flex-direction: column;position:fixed;height:0;overflow:hidden;border:none;box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 9px 0px;background:#fff;padding:0;}
|
|
#_cbhtml .rte-textsetting-options > div {width: 224px;display:flex;flex-direction:column;padding: 1px 12px 12px 12px;box-sizing: border-box;}
|
|
#_cbhtml .rte-textsetting-options button {width: 40px;height: 30px;margin: 0;text-transform: none; transition: none;}
|
|
#_cbhtml .rte-textsetting-options button:hover {background:#f5f5f5}
|
|
#_cbhtml .rte-textsetting-options .is-label {
|
|
font-size: 9px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
line-height:2;
|
|
color: #111;
|
|
padding:8px 0 2px;
|
|
text-align:center;
|
|
margin-top:5px;
|
|
border-top:#eee 1px solid;
|
|
}
|
|
#_cbhtml .rte-textsetting-options.active {animation-name:textsetting-slide-out; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes textsetting-slide-out {
|
|
from {height: 0;}
|
|
to {height: 288px;}
|
|
}
|
|
#_cbhtml .rte-textsetting-options.deactive {animation-name:textsetting-slide-in; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes textsetting-slide-in {
|
|
from {height: 288px;}
|
|
to {height: 0;}
|
|
}
|
|
|
|
#_cbhtml[toolbarleft] .rte-textsetting-options {height:auto;width:0;box-shadow: rgba(0, 0, 0, 0.1) 8px 0px 9px 0px;}
|
|
#_cbhtml[toolbarleft] .rte-textsetting-options.active {animation-name:textsetting-leftslide-out; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes textsetting-leftslide-out {
|
|
from {width: 0;}
|
|
to {width: 225px;}
|
|
}
|
|
#_cbhtml[toolbarleft] .rte-textsetting-options.deactive {animation-name:textsetting-leftslide-in; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes textsetting-leftslide-in {
|
|
from {width: 225px;}
|
|
to {width: 0;}
|
|
}
|
|
|
|
#_cbhtml[toolbarright] .rte-textsetting-options {height:auto;width:0;box-shadow: rgba(0, 0, 0, 0.1) -7px 0px 9px 0px;}
|
|
#_cbhtml[toolbarright] .rte-textsetting-options.active {animation-name:textsetting-rightslide-out; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes textsetting-rightslide-out {
|
|
from {width: 0;}
|
|
to {width: 225px;}
|
|
}
|
|
#_cbhtml[toolbarright] .rte-textsetting-options.deactive {animation-name:textsetting-rightslide-in; animation-duration:0.15s; animation-fill-mode: forwards;}
|
|
@keyframes textsetting-rightslide-in {
|
|
from {width: 225px;}
|
|
to {width: 0;}
|
|
}
|
|
|
|
/*
|
|
Insert Image
|
|
*/
|
|
|
|
.is-browse-area {width:100%;background:#fff;border-bottom:#eee 1px solid;}
|
|
.is-drop-area {
|
|
border: 2px dashed #b4b4b4;
|
|
position: relative;
|
|
}
|
|
.is-preview-area {
|
|
display: none;
|
|
text-align: center;
|
|
}
|
|
.is-preview-area div {position:relative;display:inline-block;margin:10px;}
|
|
.is-preview-area div i {position:absolute;top:0;right:0;cursor:pointer;background: rgba(255, 255, 255, 0.8); color: #f41818;width:28px;height:28px;text-align: center;line-height: 28px;font-size:24px;cursor:pointer;}
|
|
#fileInsertImage {
|
|
position: absolute;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
outline: none;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
}
|
|
.drag-text p {
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
letter-spacing:1px;
|
|
padding: 60px 0;
|
|
}
|
|
.image-dropping,
|
|
.is-drop-area:hover {
|
|
background-color: #f7f7f7;
|
|
}
|
|
#imgInsertImagePreview {
|
|
max-height: 200px;
|
|
max-width: 200px;
|
|
}
|
|
|
|
/*
|
|
Spacer
|
|
*/
|
|
|
|
#_cbhtml .is-spacer-tool {border:none;background: none;}
|
|
#_cbhtml .is-spacer-tool > button {width:30px;height:30px;background: rgba(0, 0, 0, 0.05);}
|
|
|
|
/*
|
|
Modal
|
|
*/
|
|
#_cbhtml .is-modal {
|
|
position:fixed;width:100%;height:100%;top:0;left:0;display:none;z-index:10004;background:rgba(255,255,255,0.000001);
|
|
justify-content:center;align-items:center;flex-direction:column;
|
|
font-family: sans-serif;
|
|
}
|
|
#_cbhtml .is-modal > div:not(.is-modal-overlay) {position:relative;width:90%;background:rgba(255,255,255,1);border: 1px solid rgb(199, 199, 199);box-shadow: 0px 5px 5px 5px rgba(0, 0, 0, 0.02);padding: 12px 12px;box-sizing: border-box;}
|
|
#_cbhtml .is-modal.active {display:flex;}
|
|
#_cbhtml .is-modal.is-modal-full > div:not(.is-modal-overlay) {width:100% !important;height:100% !important;max-width:100% !important;max-height:100% !important;}
|
|
#_cbhtml .is-modal-bar {
|
|
box-sizing: border-box;
|
|
padding: 5px;
|
|
text-align: center;
|
|
font-family: sans-serif;
|
|
font-size: 14px;
|
|
letter-spacing: 1px;
|
|
background: #f9f9f9;
|
|
color: #b7b7b7;
|
|
touch-action: none;
|
|
user-select: none;
|
|
}
|
|
#_cbhtml .is-modal div.is-draggable {
|
|
cursor:move;
|
|
box-shadow:none;
|
|
background:transparent;
|
|
padding:0;
|
|
border:none;
|
|
}
|
|
#_cbhtml .is-modal-bar .is-modal-close {z-index:1;width:32px;height:32px;position:absolute;top:0px;right:0px;box-sizing:border-box;padding:0;line-height:32px;font-size: 12px;color:#777;text-align:center;cursor:pointer;}
|
|
|
|
|
|
/*
|
|
Side Panel
|
|
*/
|
|
#_cbhtml .is-side {
|
|
display:block;position:fixed;top:0;right:-367px;left:auto;width:365px;height:100%;border:none;
|
|
box-shadow: rgba(0, 0, 0, 0.05) 0 0 16px 0px;
|
|
box-sizing: border-box;background:#fff;transition: all ease 0.3s;
|
|
font-family: sans-serif;font-size: 14px;letter-spacing: 1px;
|
|
|
|
z-index: 10003;
|
|
}
|
|
#_cbhtml .is-side.active { right:0; }
|
|
#_cbhtml .is-side.fromleft {
|
|
left:-367px;
|
|
right:auto;
|
|
border:none;
|
|
border-right:1px solid rgb(224, 224, 224);
|
|
}
|
|
#_cbhtml .is-side.fromleft.active { left:0; }
|
|
#_cbhtml .is-side > div {width:100%;background:none;border:none;box-shadow:none;padding:0;}
|
|
|
|
|
|
/*
|
|
Button, Textarea, Select
|
|
*/
|
|
#_cbhtml button {
|
|
width: 51px;
|
|
height: 45px;
|
|
line-height:1;
|
|
display: inline-block;
|
|
box-sizing:border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
background-color:#fff;
|
|
color: #4a4a4a;
|
|
border: 1px solid transparent;
|
|
font-family: sans-serif;
|
|
letter-spacing: 1px;
|
|
font-size:12px;
|
|
font-weight:normal;
|
|
text-transform:uppercase;
|
|
text-align:center;
|
|
position:relative;
|
|
border-radius: 0;
|
|
transition: all ease 0.3s;
|
|
user-select: none;
|
|
-moz-user-select: none;
|
|
-khtml-user-select: none;
|
|
-webkit-user-select: none;
|
|
-o-user-select: none;
|
|
white-space: normal;
|
|
}
|
|
#_cbhtml button:focus {outline:none;}
|
|
#_cbhtml button.classic {
|
|
width: 100%;
|
|
height:60px;
|
|
display: block;
|
|
background: #f7f7f7;
|
|
}
|
|
#_cbhtml button.classic:hover {background: #fafafa;}
|
|
#_cbhtml button.on {
|
|
background: #f7f7f7;
|
|
}
|
|
|
|
#_cbhtml button.classic-primary {display:inline-block;width:auto;height:50px;padding-left:30px;padding-right:30px;min-width:135px;background: #f7f7f7;}
|
|
#_cbhtml button.classic-secondary {display:inline-block;width:auto;height:50px;padding-left:30px;padding-right:30px;background:transparent;}
|
|
#_cbhtml button.classic-primary:hover {background: #fafafa;}
|
|
|
|
#_cbhtml textarea {font-family: courier;font-size: 17px;line-height: 2;letter-spacing: 1px;margin:0;padding:8px 16px;box-sizing:border-box;border:1px solid rgb(199, 199, 199);background-color:#fff;}
|
|
#_cbhtml textarea:focus {outline:none}
|
|
|
|
#_cbhtml select:focus {outline:none}
|
|
|
|
a:focus,
|
|
button:focus {outline:none}
|
|
|
|
#_cbhtml input[type=text] {
|
|
width:100%;height:50px;box-sizing: border-box;margin:0;
|
|
font-family: sans-serif;font-size: 19px;letter-spacing: 1px;
|
|
padding:0;padding-left: 8px;color: #333;
|
|
display:inline-block;
|
|
border:1px solid rgb(199, 199, 199);
|
|
border-radius:0;
|
|
background-color:#fff;
|
|
}
|
|
#_cbhtml input:focus {outline:none;}
|
|
|
|
#_cbhtml label {font-size: 14px;letter-spacing: 1px;padding:0;}
|
|
#_cbhtml [type="checkbox"],
|
|
#_cbhtml [type="radio"] {/* prevent overide */
|
|
position:relative;
|
|
opacity:1;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
#_cbhtml select {
|
|
margin: 0 0 10px;
|
|
font-size: 13px;
|
|
letter-spacing: 1px;
|
|
height: 35px;
|
|
line-height: 1.7;
|
|
color: #454545;
|
|
border-radius: 5px;
|
|
border: none;
|
|
background-color: #eee;
|
|
width: auto;
|
|
display: inline-block;
|
|
background-image: none;
|
|
-webkit-appearance: menulist;
|
|
-moz-appearance: menulist;
|
|
appearance: menulist;
|
|
padding: 0 5px;
|
|
}
|
|
#_cbhtml select option {
|
|
background: #fff;
|
|
}
|
|
#_cbhtml select:focus {outline:none;}
|
|
|
|
/*
|
|
Special buttons
|
|
*/
|
|
|
|
#_cbhtml .imageedit-crop button {margin: 0 20px 0 0;border: #d1d1d1 1px solid;background: #fff;}
|
|
|
|
|
|
/*
|
|
Snippet Panel
|
|
*/
|
|
#_cbhtml #divSnippetList {right:-230px;width:230px;border-left:1px solid rgba(211, 211, 211, 0.39);box-shadow:rgba(0, 0, 0, 0.03) 0 0 10px 0px;}
|
|
#_cbhtml #divSnippetList.active {right:0;}
|
|
#_cbhtml #divSnippetList.fromleft {left:-230px;}
|
|
#_cbhtml #divSnippetList.fromleft.active {left:0;}
|
|
#_cbhtml #divSnippetHandle {position:absolute;width:40px;height:40px;top:170px;left:-40px;background:#fff;border:1px solid rgba(211, 211, 211, 0.52);border-right:none;line-height:39px;text-align:center;box-shadow:rgba(0, 0, 0, 0.025) -4px 2px 5px 0px;cursor:pointer;}
|
|
#_cbhtml #divSnippetList.fromleft #divSnippetHandle {border-left:none;border-right:1px solid rgb(211, 211, 211);left:auto;right:-40px;}
|
|
#_cbhtml #divSnippetScrollUp,
|
|
#_cbhtml #divSnippetScrollDown {
|
|
display:none;
|
|
background: rgba(0, 0, 0, 0.12);
|
|
width: 45px;
|
|
height: 45px;
|
|
line-height: 45px;
|
|
color: #a9a9a9;
|
|
position: fixed;
|
|
z-index: 100000;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
font-family: sans-serif;
|
|
}
|
|
#_cbhtml #divSnippetList.active #divSnippetScrollUp {display:block}
|
|
#_cbhtml #divSnippetList.active #divSnippetScrollDown {display:block}
|
|
|
|
#_cbhtml .is-design-list {height:100%;margin:0;padding:0 0 20px !important;box-sizing:border-box;overflow-y:auto;overflow-x:hidden;text-align:center;border-top:transparent 40px solid !important;}
|
|
#_cbhtml .is-design-list > div {width:170px;overflow:hidden;background: rgb(0, 0, 0);margin: 22px 22px 0;cursor:move; display:inline-block;outline:#dbdbdb 1px solid !important;/*box-shadow:0 5px 15px rgba(0, 0, 0, 0.03);*/}
|
|
#_cbhtml .is-design-list > div img {box-shadow:none;display:block;transition: all 0.2s ease-in-out;box-sizing:border-box;width:100%}
|
|
#_cbhtml .is-design-list > div:hover img {filter: opacity(98%);}
|
|
|
|
#_cbhtml .is-design-list > div {
|
|
display: block;
|
|
height: auto;
|
|
opacity: 1;
|
|
}
|
|
#_cbhtml .is-design-list > div.hide {
|
|
display: none;
|
|
height: 0;
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
transition: height 350ms ease-in-out, opacity 750ms ease-in-out;
|
|
}
|
|
|
|
#_cbhtml #selSnippetCat {width: 100%;display:block;padding-left:25px;padding-top:0px;box-sizing:border-box;font-family:sans-serif;font-size:13px;letter-spacing:1px;line-height:40px;font-weight:bold;height:40px;color:rgb(69, 69, 69);border:none;background-color: #F5F5F5;box-shadow:rgba(0, 0, 0, 0.09) 0px 5px 7px;cursor:pointer;}
|
|
|
|
/*
|
|
Element Panel
|
|
*/
|
|
|
|
.elm-list {font-size:12px; line-height: 1.3;padding-bottom:15px;}
|
|
.elm-list a {font-size:16px;color:#0096f1;text-decoration:none;padding: 0 3px;}
|
|
.elm-list a.active {background:#eee}
|
|
.elm-inspected {
|
|
animation-name: elm-inspected-anim;
|
|
animation-duration: 0.6s;
|
|
/*animation-fill-mode: forwards;*/
|
|
/*outline:1px solid #f1cc00 !important;*/
|
|
outline:1px solid #ffb84a !important;
|
|
/* outline: 1px dashed rgba(125, 125, 125, 0.3); */
|
|
/*background:rgba(200, 200, 200, 0.15);*/
|
|
}
|
|
@keyframes elm-inspected-anim {
|
|
0% {transform:scale(1);}
|
|
50% {transform:scale(0.97);}
|
|
100% {transform:scale(1);}
|
|
|
|
}
|
|
.elm-inspected .elm-active {background:none} /* // hide active element indicator if inspected element is not active element */
|
|
|
|
#_cbhtml .elementstyles {width:300px;font-size:13px;}
|
|
#_cbhtml .elementstyles .is-settings {margin-top:7px;}
|
|
#_cbhtml .elementstyles .is-settings > div {display:flex;align-items:center;min-height:35px;}
|
|
#_cbhtml .elementstyles .is-settings > div.is-label {height:auto;font-family: sans-serif;font-size:13px;font-weight:300;letter-spacing: 1px;margin: 10px 0 3px;}
|
|
#_cbhtml .elementstyles .is-settings button { width:auto; height: 37px; font-size:10px;line-height:1;text-transform:uppercase;padding:1px 20px;box-sizing: border-box;border:none;background: #f7f7f7;}
|
|
#_cbhtml .elementstyles .is-settings button.is-btn-color {width:35px;height:35px;padding:0;background:transparent;border:rgba(0,0,0,0.09) 1px solid;}
|
|
#_cbhtml .elementstyles .is-settings label {font-size:14px;color:inherit;}
|
|
#_cbhtml .elementstyles .is-settings button:hover {background: #fafafa;}
|
|
|
|
#_cbhtml .elementstyles .is-settings input[type=text] {border-radius:0;height:35px;font-size:14px}
|
|
#_cbhtml .elementstyles .is-settings select {border-radius:0;height:35px;margin:0}
|
|
|
|
#_cbhtml .elementstyles #divElementMore {top:50px;left:140px}
|
|
|
|
#_cbhtml .editstyles {
|
|
display:none;position: fixed; overflow: hidden; width:280px;height:390px;
|
|
margin:0px;top:100px;left:auto;right:320px;z-index:10004;
|
|
background:#fff;border: 1px solid rgb(220, 220, 220);
|
|
box-shadow: 2px 2px 9px 0px rgba(0, 0, 0, 0.04);
|
|
box-sizing:content-box;
|
|
flex-direction: column;
|
|
}
|
|
#_cbhtml .editstyles.active {display:flex}
|
|
#_cbhtml .is-modal.editstyles div.is-draggable {position:absolute;top:0;left:0;background:none;cursor:move;height:20px;width:100%;z-index:1;}
|
|
#_cbhtml .editstyles > div:not(.is-draggable) {
|
|
width: 100%;
|
|
background: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
padding: initial;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/*
|
|
Gradient
|
|
*/
|
|
|
|
#_cbhtml .pickgradientcolor .is-settings {margin-bottom:15px;}
|
|
#_cbhtml .pickgradientcolor .is-settings > div {display:flex;align-items:center;height:50px;}
|
|
#_cbhtml .pickgradientcolor .is-settings > div.is-label {height:auto;font-family: sans-serif;font-size:13px;font-weight:300;letter-spacing: 1px;margin: 10px 0 3px;}
|
|
#_cbhtml .pickgradientcolor .is-settings button { width:auto; height: 37px; font-size:10px;line-height:1;text-transform:uppercase;padding:1px 20px;box-sizing: border-box;border:none;background: #f7f7f7;}
|
|
#_cbhtml .pickgradientcolor .is-settings button.is-btn-color {width:35px;height:35px;padding:0;background:transparent;border:rgba(0,0,0,0.09) 1px solid;}
|
|
#_cbhtml .pickgradientcolor .is-settings label {font-size:14px;color:inherit;}
|
|
#_cbhtml .pickgradientcolor .is-settings button:hover {background: #fafafa;}
|
|
|
|
.is-elmgrad-remove {
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 0px;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: rgba(95, 94, 94, 0.26);
|
|
color: #fff;
|
|
line-height: 20px;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
display:none;
|
|
}
|
|
[data-elmgradient].active .is-elmgrad-remove {display:block;}
|
|
|
|
/*
|
|
Table Editor
|
|
*/
|
|
|
|
#_cbhtml .edittable {
|
|
position: fixed; overflow: hidden; width:250px; height:410px;
|
|
top:50%;left:auto;right:80px;margin-top:-205px;
|
|
background:#fff;border: 1px solid rgb(220, 220, 220);
|
|
box-shadow: 2px 2px 9px 0px rgba(0, 0, 0, 0.04);
|
|
box-sizing:content-box;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
}
|
|
#_cbhtml .edittable.active {display:flex}
|
|
#_cbhtml .edittable > div:not(.is-draggable) {
|
|
width: 100%;
|
|
background: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
padding: initial;
|
|
box-sizing: border-box;
|
|
margin-top:30px;
|
|
}
|
|
#_cbhtml .edittable button {background:#f7f7f7;font-size:10px;}
|
|
#_cbhtml .edittable button:hover {background:#fafafa}
|
|
#_cbhtml .edittable button.is-btn-color {width:35px;height:35px;padding:0;background:transparent;border:rgba(0,0,0,0.09) 1px solid;}
|
|
|
|
.is-table-tool:hover {z-index:10001 !important}
|
|
|
|
/*
|
|
Grid Editor
|
|
*/
|
|
#_cbhtml .grideditor {
|
|
position:fixed;overflow: hidden;width:96px;height:450px;top:50%;left:auto;right:80px;margin-top:-220px;background:#fff;border: 1px solid rgb(220, 220, 220);box-shadow: 2px 2px 9px 0px rgba(0, 0, 0, 0.04);box-sizing:content-box;
|
|
}
|
|
#_cbhtml .grideditor.active {display:flex}
|
|
#_cbhtml .grideditor > div:not(.is-draggable) {
|
|
width: 100%;
|
|
background: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
padding: initial;
|
|
box-sizing: border-box;
|
|
}
|
|
#_cbhtml .grideditor button {width:48px;height:40px;}
|
|
|
|
/*
|
|
Quick Add
|
|
*/
|
|
#_cbhtml .quickadd {
|
|
width:340px;box-sizing:border-box;transition: none;
|
|
flex-direction: row;
|
|
flex-flow: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
#_cbhtml .quickadd button {float:left;width: 100px;height: 60px;font-size:9px;color:#333;}
|
|
|
|
/*
|
|
Tool
|
|
*/
|
|
.is-tool {position:absolute;top:0;left:0;display:none;z-index:10001;background:rgba(239, 239, 239, 0.9);box-sizing: border-box;position:absolute;padding:0;outline: none;}
|
|
.is-tool button {
|
|
width:100%; height: 25px;
|
|
background-color:transparent;
|
|
border: none;
|
|
cursor:pointer;
|
|
user-select: none;
|
|
-moz-user-select: none;
|
|
-khtml-user-select: none;
|
|
-webkit-user-select: none;
|
|
-o-user-select: none;
|
|
|
|
/* backward */
|
|
color:#000;
|
|
float:left;
|
|
display: inline-block;
|
|
box-sizing:border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: sans-serif;
|
|
letter-spacing: 1px;
|
|
font-size:12px;
|
|
font-weight:300;
|
|
text-transform:uppercase;
|
|
text-align:center;
|
|
line-height: unset;
|
|
position:relative;
|
|
border-radius: 0;
|
|
transition: all ease 0.3s;
|
|
}
|
|
.is-tool button:focus {outline:none}
|
|
.is-tool:hover {z-index:10003;}
|
|
.is-tool.active {display:flex}
|
|
|
|
/*
|
|
Column Tool
|
|
*/
|
|
|
|
/* Gray */
|
|
#_cbhtml[gray] .is-tool.is-column-tool {flex-direction:row;margin-top:-2px;}
|
|
#_cbhtml[gray] .is-tool.is-column-tool button {
|
|
width:27px; height: 27px;
|
|
}
|
|
#_cbhtml[gray] .is-tool.is-column-tool .cell-add {background:transparent}
|
|
#_cbhtml[gray] .is-tool.is-column-tool .cell-more {background: transparent}
|
|
#_cbhtml[gray] .is-tool.is-column-tool .cell-remove {background: transparent}
|
|
#_cbhtml[gray] .is-tool.is-column-tool svg {width:18px;height:18px;fill:#000;}
|
|
#_cbhtml[gray] .is-tool.is-column-tool .cell-more svg {width:12px;height:12px;fill:#4c4c4c}
|
|
|
|
/* Colors */
|
|
#_cbhtml .is-tool.is-column-tool {flex-direction:row;margin-top:0px;}
|
|
#_cbhtml .is-tool.is-column-tool button {
|
|
width:25px; height: 25px;
|
|
}
|
|
#_cbhtml .is-tool.is-column-tool .cell-add {background:#0fcc52}
|
|
#_cbhtml .is-tool.is-column-tool .cell-more {background: rgba(216, 200, 6, 0.9)}
|
|
#_cbhtml .is-tool.is-column-tool .cell-remove {background: rgba(255, 85, 4, 0.9)}
|
|
#_cbhtml .is-tool.is-column-tool svg {width: 23px;height:23px;fill:#fff;}
|
|
#_cbhtml .is-tool.is-column-tool .cell-more svg {width:14px;height:14px;fill:#fff;}
|
|
|
|
/* More */
|
|
#_cbhtml .is-pop.columnmore {flex-direction: column;}
|
|
#_cbhtml .is-pop.columnmore > div {max-width: 190px;margin:10px 15px;}
|
|
#_cbhtml .is-pop.columnmore button {width:95px;height:60px;text-align: center;font-size: 9px;color:#333;margin-bottom:5px;}
|
|
#_cbhtml .is-pop.columnmore button span {display:inline-block;width: 95px;height:24px;}
|
|
#_cbhtml .is-pop.columnmore button svg {fill:#000;}
|
|
|
|
/*
|
|
Row Tool
|
|
*/
|
|
.is-tool.is-row-tool {flex-direction:column;width:auto;left:auto;right:-40px;}
|
|
.row-outline .is-row-tool, .row-active .is-row-tool {display:flex}
|
|
|
|
/* Color */
|
|
.is-tool.is-row-tool button {
|
|
width: 25px; height: 25px;
|
|
}
|
|
.is-tool.is-row-tool .row-handle {
|
|
line-height: 25px;
|
|
}
|
|
.is-tool.is-row-tool .row-handle {background: #169af7} /* rgba(68, 68, 68, 0.9) */
|
|
.is-tool.is-row-tool .row-grideditor {background: rgba(216, 200, 6, 0.9)}
|
|
.is-tool.is-row-tool .row-more {background: rgba(216, 200, 6, 0.9)}
|
|
.is-tool.is-row-tool .row-remove {background: rgba(255, 85, 4, 0.9)}
|
|
.is-tool.is-row-tool .row-handle svg {fill:#fff;width:13px;height:13px;margin-top:-2px}
|
|
.is-tool.is-row-tool .row-grideditor svg {fill:#fff;width:14px;height:14px;margin-top:-1px}
|
|
.is-tool.is-row-tool .row-more svg {fill:#fff;width:14px;height:14px;}
|
|
.is-tool.is-row-tool .row-remove svg {fill:#fff;width:23px;height:23px;}
|
|
|
|
/* Gray */
|
|
.is-builder[gray] .is-tool.is-row-tool button {
|
|
width:27px; height: 27px;
|
|
}
|
|
.is-builder[gray] .is-tool.is-row-tool .row-handle {
|
|
line-height: 27px;
|
|
}
|
|
.is-builder[gray] .is-tool.is-row-tool .row-handle {background: transparent}
|
|
.is-builder[gray] .is-tool.is-row-tool .row-grideditor {background: transparent}
|
|
.is-builder[gray] .is-tool.is-row-tool .row-more {background: transparent}
|
|
.is-builder[gray] .is-tool.is-row-tool .row-remove {background: transparent}
|
|
.is-builder[gray] .is-tool.is-row-tool .row-handle svg {fill:#000;width:11px;height:11px;margin-top:-3px}
|
|
.is-builder[gray] .is-tool.is-row-tool .row-grideditor svg {fill:#000;width:13px;height:13px;}
|
|
.is-builder[gray] .is-tool.is-row-tool .row-more svg {fill:#4c4c4c;width:12px;height:12px;}
|
|
.is-builder[gray] .is-tool.is-row-tool .row-remove svg {fill:#000;width:18px;height:18px;}
|
|
|
|
/* More */
|
|
#_cbhtml .is-pop.rowmore {flex-direction: column;}
|
|
#_cbhtml .is-pop.rowmore > div {width: 190px;margin:10px 15px;}
|
|
#_cbhtml .is-pop.rowmore button {width:95px;height:60px;text-align: center;font-size: 9px;color:#333;margin-bottom:5px;}
|
|
#_cbhtml .is-pop.rowmore button span {display:inline-block;width: 95px;height:24px;}
|
|
#_cbhtml .is-pop.rowmore button svg {fill:#000;}
|
|
|
|
/*
|
|
Element Tool
|
|
*/
|
|
#_cbhtml .is-tool.is-element-tool {background: rgba(243,243,243,0.9)} /* rgba(234, 234, 234, 0.85) */
|
|
#_cbhtml .is-tool.is-element-tool button {
|
|
width: 25px; height: 25px;background: transparent;
|
|
}
|
|
#_cbhtml .is-tool.is-element-tool svg {width:14px;height:14px;fill:#000;}
|
|
#_cbhtml .is-tool.is-element-tool .elm-more svg {width:11px;height:11px;}
|
|
|
|
/* More */
|
|
#_cbhtml .is-pop.elmmore {flex-direction: column;}
|
|
#_cbhtml .is-pop.elmmore > div {width: 190px;margin:10px 15px;}
|
|
#_cbhtml .is-pop.elmmore button {width:95px;height:60px;text-align: center;font-size: 9px;color:#333;margin-bottom:5px;}
|
|
#_cbhtml .is-pop.elmmore button span {display:inline-block;width: 95px;height:24px;}
|
|
#_cbhtml .is-pop.elmmore button svg {fill:#000;}
|
|
|
|
|
|
/* Preferences */
|
|
.is-tool.is-row-tool .row-grideditor {display:none}
|
|
.is-builder[minimal] .is-tool.is-row-tool .row-grideditor {display:block}
|
|
.is-builder[minimal] .is-tool.is-row-tool .row-more {display:none}
|
|
.is-builder[clean] .is-tool.is-row-tool .row-grideditor {display:block}
|
|
.is-builder[clean] .is-tool.is-row-tool .row-more {display:none}
|
|
.is-builder[clean] .is-tool.is-row-tool .row-handle {display:none}
|
|
.is-builder[clean] .is-tool.is-row-tool .row-remove {display:none}
|
|
|
|
.is-builder[clean] .is-tool.is-row-tool .row-grideditor {background: transparent}
|
|
.is-builder[clean] .is-tool.is-row-tool .row-grideditor svg {fill:#000;width:13px;height:13px;margin-left:-1px;}
|
|
|
|
.is-builder[clean] .row-outline {outline: none;}
|
|
.is-builder[clean] .cell-active {outline:none;}
|
|
.is-builder[clean] .row-active {outline: 1px solid rgba(132, 132, 132, 0.2);}
|
|
|
|
#_cbhtml[minimal] .is-tool.is-column-tool .cell-more {display:none}
|
|
#_cbhtml[clean] .is-tool.is-column-tool {display:none}
|
|
#_cbhtml[hidecolumntool] .is-tool.is-column-tool {display:none}
|
|
|
|
.is-builder[leftrowtool] .is-row-tool {right:auto;left:-40px;}
|
|
|
|
.is-builder.builder-active > div:not(.row-active) { /* make drag handler hovers the rows */
|
|
border-right:120px rgba(0,0,0,0) solid;
|
|
margin-right:-120px;
|
|
}
|
|
.is-builder[leftrowtool].builder-active > div:not(.row-active) { /* make drag handler hovers the rows */
|
|
border-left:120px rgba(0,0,0,0) solid;
|
|
margin-left:-120px;
|
|
}
|
|
|
|
.is-builder[rowoutline] .row-outline {outline: none;}
|
|
.is-builder[rowoutline] .cell-active {outline:none;}
|
|
.is-builder[rowoutline] .row-active {outline: 1px solid #00da89;}
|
|
|
|
.is-builder[grayoutline] .row-outline {outline: none;}
|
|
.is-builder[grayoutline] .cell-active {outline:1px solid rgba(132, 132, 132, 0.1);}
|
|
.is-builder[grayoutline] .row-active {outline: 1px solid rgba(132, 132, 132, 0.2);}
|
|
|
|
.is-builder[rowoutline][grayoutline] .row-outline {outline: none;}
|
|
.is-builder[rowoutline][grayoutline] .cell-active {outline: none;}
|
|
.is-builder[rowoutline][grayoutline] .row-active {outline: 1px solid rgba(132, 132, 132, 0.2);}
|
|
|
|
.is-builder[grideditor] > div > div.cell-active {outline:1px solid #00da89;}
|
|
.is-builder[grideditor] .row-active {outline:1px solid #00da89;z-index: 1;}
|
|
.is-builder[grideditor] .row-active.row-outline {outline:1px solid rgba(132, 132, 132, 0.2);}
|
|
|
|
.is-builder[hideoutline] .row-outline {outline: none !important;}
|
|
.is-builder[hideoutline] .cell-active {outline:none !important;}
|
|
.is-builder[hideoutline] .row-active {outline: none !important;}
|
|
.is-builder[hideoutline] .row-active.row-outline {outline: none !important;}
|
|
|
|
.is-builder[hidesnippetaddtool] .row-outline .is-rowadd-tool,
|
|
.is-builder[hidesnippetaddtool] .row-active .is-rowadd-tool {display:none}
|
|
|
|
.is-builder[hideelementhighlight] .elm-active {background-color: transparent;}
|
|
|
|
#_cbhtml[hideelementtool] .is-tool.is-element-tool {display:none !important}
|
|
|
|
#_cbhtml[toolbarstay] .is-rte-tool {display:flex !important}
|
|
|
|
/* Email Mode */
|
|
#_cbhtml .is-element-tool .elm-settings {display:none}
|
|
#_cbhtml[emailmode] .is-element-tool .elm-add,
|
|
#_cbhtml[emailmode] .is-element-tool .elm-more,
|
|
#_cbhtml[emailmode] .is-element-tool .elm-remove {display:none !important}
|
|
#_cbhtml[emailmode] .is-element-tool .elm-settings {display:block}
|
|
|
|
/*
|
|
Row Add Tool
|
|
*/
|
|
.is-rowadd-tool {display:none;position:absolute;bottom:-1px;left:-20px;width:calc(100% + 40px);height:1px;border:none;border-bottom:1px solid rgb(255, 183, 132);z-index:1;background:transparent;transition:none;}
|
|
.is-rowadd-tool button {
|
|
position:absolute;
|
|
top: -9px;
|
|
left:calc(50% - 10px);
|
|
border: 1px solid rgb(255, 142, 62);
|
|
border-radius: 500px;
|
|
height:auto;
|
|
}
|
|
.row-outline .is-rowadd-tool, .row-active .is-rowadd-tool {display:block}
|
|
|
|
/*
|
|
Empt Info
|
|
*/
|
|
.row-add-initial {
|
|
width: 100%;
|
|
height: 70px;
|
|
font-family: sans-serif;
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #555;
|
|
border: 1px dashed #a9a9a9;
|
|
background: rgba(255,255,255,0.5);
|
|
cursor: pointer;
|
|
transition: all ease 0.3s;
|
|
}
|
|
.row-add-initial:hover {background: rgba(0,0,0,0.01)}
|
|
.row-add-initial:focus {outline:none}
|
|
.row-add-initial span {text-transform:none;display:block;margin-top:5px;color:#acacac;font-size:13px;}
|
|
.is-builder .row-active.row-add-initial {outline:none}
|
|
|
|
|
|
/*
|
|
Link Tool
|
|
*/
|
|
#_cbhtml #divLinkTool button {
|
|
width: 30px;
|
|
height: 30px;
|
|
background: rgba(68,68,68,0.82);
|
|
}
|
|
#_cbhtml #divLinkTool button svg { fill:#fff }
|
|
|
|
|
|
/*
|
|
Tabs
|
|
*/
|
|
.is-tabs {
|
|
white-space:nowrap;
|
|
padding:20px;padding-bottom:5px;padding-top: 10px;
|
|
box-sizing:border-box;
|
|
font-family: sans-serif;
|
|
font-size: 11px;
|
|
line-height: 1.8 !important;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
background:#f9f9f9;
|
|
display: flex;
|
|
flex-flow: wrap;
|
|
}
|
|
.is-tabs a {
|
|
display: inline-block;
|
|
padding: 3px 3px 0;
|
|
color: #4a4a4a;
|
|
border-bottom: transparent 1px solid;
|
|
margin: 0 10px 13px 0;
|
|
text-decoration: none;
|
|
transition: box-shadow ease 0.3s;
|
|
}
|
|
.is-tabs a:hover {
|
|
|
|
}
|
|
.is-tabs a.active {
|
|
background: transparent;
|
|
box-shadow: none;
|
|
cursor:default;
|
|
border-bottom: rgba(103, 103, 103, 0.72) 1px solid;
|
|
}
|
|
.is-tab-content {display:none;padding:20px;flex-direction: column;flex-flow: wrap;}
|
|
|
|
.is-tabs-more {
|
|
box-sizing:border-box;width:150px;position:absolute;top:0;left:0;background:#fff;display:none;z-index:1;
|
|
font-family: sans-serif;
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
border: 1px solid rgba(220, 220, 220, 0.86);
|
|
box-shadow: 3px 4px 9px 0px rgba(0, 0, 0, 0.07);
|
|
}
|
|
.is-tabs-more > a {
|
|
display:block;
|
|
color: #4a4a4a;
|
|
padding: 10px;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
}
|
|
.is-tabs-more > a:hover, .is-tabs-more > a.active {background:#f3f3f3;}
|
|
|
|
/*
|
|
Tooltip
|
|
*/
|
|
|
|
.is-tooltip {position:absolute;display:none;padding:1px 8px;font-size:11px;background:#333;border-radius:0px;color:#fefefe;z-index:100005}
|
|
|
|
/*
|
|
Pop with Arrow
|
|
*/
|
|
.is-pop.arrow-top:after, .is-pop.arrow-top:before {
|
|
bottom: 100%;
|
|
left: 25px;
|
|
border: solid transparent;
|
|
content: " ";
|
|
height: 0;
|
|
width: 0;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
top: auto;
|
|
}
|
|
.is-pop.arrow-top:after {
|
|
border-color: rgba(255, 255, 255, 0);
|
|
border-bottom-color: #ffffff;
|
|
border-width: 7px;
|
|
margin-left: -7px;
|
|
}
|
|
.is-pop.arrow-top:before {
|
|
border-color: rgba(0, 0, 0, 0);
|
|
border-bottom-color: #bababa;
|
|
border-width: 8px;
|
|
margin-left: -8px;
|
|
}
|
|
|
|
.is-pop.light.arrow-top:after { border-bottom-color:#ffffff; }
|
|
.is-pop.light.arrow-top:before { border-bottom-color:#e0e0e0;}
|
|
|
|
.is-pop.arrow-top.right:after, .is-pop.arrow-top.right:before {
|
|
left: auto;
|
|
}
|
|
.is-pop.arrow-top.right:after {
|
|
right:19px;
|
|
}
|
|
.is-pop.arrow-top.right:before {
|
|
right:18px;
|
|
}
|
|
.is-pop.arrow-top.left:after, .is-pop.arrow-top.left:before {
|
|
right: auto;
|
|
}
|
|
.is-pop.arrow-top.left:after {
|
|
left:18px;
|
|
}
|
|
.is-pop.arrow-top.left:before {
|
|
left:18px;
|
|
}
|
|
.is-pop.arrow-left:after, .is-pop.arrow-left:before {
|
|
right: 100%;
|
|
top: 20px;
|
|
border: solid transparent;
|
|
content: " ";
|
|
height: 0;
|
|
width: 0;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
.is-pop.arrow-left:after {
|
|
border-color: rgba(255, 255, 255, 0);
|
|
border-right-color: #ffffff;
|
|
border-width: 7px;
|
|
margin-top: -7px;
|
|
}
|
|
.is-pop.arrow-left:before {
|
|
border-color: rgba(0, 0, 0, 0);
|
|
border-right-color: #bababa;
|
|
border-width: 8px;
|
|
margin-top: -8px;
|
|
}
|
|
|
|
.is-pop.arrow-right:after, .is-pop.arrow-right:before {
|
|
left: 100%;
|
|
top: 20px;
|
|
border: solid transparent;
|
|
content: " ";
|
|
height: 0;
|
|
width: 0;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
.is-pop.arrow-right:after {
|
|
border-color: rgba(255, 255, 255, 0);
|
|
border-left-color: #ffffff;
|
|
border-width: 7px;
|
|
margin-top: -7px;
|
|
}
|
|
.is-pop.arrow-right:before {
|
|
border-color: rgba(0, 0, 0, 0);
|
|
border-left-color: #bbb;
|
|
border-width: 8px;
|
|
margin-top: -8px;
|
|
}
|
|
|
|
.is-pop.arrow-bottom:after, .is-pop.arrow-bottom:before {
|
|
top: 100%;
|
|
left: calc(100% - 28px);
|
|
border: solid transparent;
|
|
content: " ";
|
|
height: 0;
|
|
width: 0;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
.is-pop.arrow-bottom:after {
|
|
border-color: rgba(255, 255, 255, 0);
|
|
border-top-color: #ffffff;
|
|
border-width: 7px;
|
|
margin-left: -7px;
|
|
}
|
|
.is-pop.arrow-bottom:before {
|
|
border-color: rgba(0, 0, 0, 0);
|
|
border-top-color: #bbb;
|
|
border-width: 8px;
|
|
margin-left: -8px;
|
|
}
|
|
|
|
.is-pop.arrow-top.center:after, .is-pop.arrow-top.center:before {
|
|
left:calc(50% + 3px);
|
|
}
|
|
.is-pop.arrow-left.bottom:after, .is-pop.arrow-left.bottom:before {
|
|
top:calc(100% - 28px);
|
|
}
|
|
.is-pop.arrow-bottom.center:after, .is-pop.arrow-bottom.center:before {
|
|
left:calc(50% + 3px);
|
|
}
|
|
|
|
/*http://codepen.io/vcmg/pen/JdKeVG */
|
|
.dot {
|
|
height: 7px;
|
|
width: 7px;
|
|
border-radius: 50%;
|
|
background-color: #ff6700;
|
|
display: inline-block;
|
|
margin: 25px 2px 0;
|
|
-webkit-animation: jump 1.5s linear infinite;
|
|
}
|
|
@-webkit-keyframes jump {
|
|
0%, 100% {transform: translateY(0px);}
|
|
20% {transform: translateY(-10px);}
|
|
40% {transform: translateY(0px);}
|
|
}
|
|
.dot:nth-of-type(2) {
|
|
-webkit-animation-delay: 0.2s;
|
|
}
|
|
.dot:nth-of-type(3) {
|
|
-webkit-animation-delay: 0.4s;
|
|
}
|
|
|
|
#divImageProgress {display:none;position:absolute;top:0;left:0;z-index:1;box-sizing:border-box;background:rgba(0, 0, 0, 0.17);transition: none;}
|
|
#divImageProgress > div {display:table-cell;vertical-align:middle;text-align:center;}
|
|
#divImageProgress .dot {background-color: #fff;margin: 10px 2px 0;}
|
|
|
|
#_cbhtml .imagelink .image-src {border:1px solid rgb(199, 199, 199);display:flex;}
|
|
#_cbhtml .imagelink .image-link {border:1px solid rgb(199, 199, 199);border-top:none;display:flex;}
|
|
#_cbhtml .imagelink .image-src input {border:none}
|
|
#_cbhtml .imagelink .image-link input {border:none}
|
|
|
|
#_cbhtml .insertimage .image-src {border:1px solid rgb(199, 199, 199);display:flex;}
|
|
#_cbhtml .insertimage .image-src input {border:none}
|
|
/*
|
|
#_cbhtml .image-src {position:relative;height: 50px;}
|
|
#_cbhtml .image-src .input-src {position:absolute;width:100%;}
|
|
#_cbhtml .image-src .input-select {display:none;}
|
|
#_cbhtml .image-src.image-select .input-src {position:absolute;width:100%;border-right:60px solid transparent;}
|
|
#_cbhtml .image-src.image-select .input-select {display:block;position:absolute;top:0;right:0;width:60px;font-size:20px;color:#777;height: 50px;border: 1px solid rgb(199, 199, 199);border-left:none;background:transparent;} */
|
|
|
|
#_cbhtml .link-src {position:relative;height: 50px;}
|
|
#_cbhtml .link-src .input-url {position:absolute;width:100%;}
|
|
#_cbhtml .link-src .input-select {position:absolute;top:0;right:0;width:60px;font-size:20px;color:#777;height: 50px;border: 1px solid rgb(199, 199, 199);border-left:none;background:transparent;}
|
|
|
|
.form-upload-larger.please-wait svg {
|
|
transform:scale(1,1);
|
|
opacity:1;
|
|
animation-name: please-wait-anim;
|
|
animation-duration: 3s;
|
|
animation-fill-mode: forwards;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
@keyframes please-wait-anim {
|
|
0% {transform:scale(1,1);opacity:0.0;}
|
|
25% {transform:scale(1.2,1.2);opacity:1;}
|
|
50% {transform:scale(1,1);opacity:0.0;}
|
|
75% {transform:scale(1.2,1.2);opacity:1;}
|
|
100% {transform:scale(1,1);opacity:0.0;}
|
|
}
|
|
|
|
/*!
|
|
* Cropper.js v1.5.5
|
|
* https://fengyuanchen.github.io/cropperjs
|
|
*
|
|
* Copyright 2015-present Chen Fengyuan
|
|
* Released under the MIT license
|
|
*
|
|
* Date: 2019-08-04T02:26:27.232Z
|
|
*/.cropper-container{direction:ltr;font-size:0;line-height:0;position:relative;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.75);overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}
|
|
|
|
|
|
/* RangeSlider */
|
|
#_cbhtml .rangeSlider, #_cbhtml .rangeSlider__fill {
|
|
display: block;
|
|
/*box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
border-radius: 10px;*/
|
|
}
|
|
|
|
#_cbhtml .rangeSlider {
|
|
position: relative;
|
|
/* background: #7f8c8d; */
|
|
background-color: transparent;
|
|
outline: 1px solid rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
#_cbhtml .rangeSlider__horizontal {
|
|
height: 21px;
|
|
width: 100%;
|
|
}
|
|
|
|
#_cbhtml .rangeSlider__vertical {
|
|
height: 100%;
|
|
width: 20px;
|
|
}
|
|
|
|
#_cbhtml .rangeSlider--disabled {
|
|
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
|
|
opacity: 0.4;
|
|
}
|
|
|
|
#_cbhtml .rangeSlider__fill {
|
|
/* background: #16a085; */
|
|
background-color: transparent;
|
|
position: absolute;
|
|
}
|
|
|
|
#_cbhtml .rangeSlider__fill__horizontal {
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
#_cbhtml .rangeSlider__fill__vertical {
|
|
width: 100%;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
#_cbhtml .rangeSlider__handle {
|
|
border: 1px solid #ccc;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
width: 25px;
|
|
height: 25px;
|
|
position: absolute;
|
|
background: white linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.04));
|
|
/* box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); */
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
}
|
|
|
|
#_cbhtml .rangeSlider__handle__horizontal {
|
|
top: -3px;
|
|
}
|
|
|
|
#_cbhtml .rangeSlider__handle__vertical {
|
|
left: -10px;
|
|
bottom: 0;
|
|
}
|
|
|
|
#_cbhtml .rangeSlider__handle:after {
|
|
content: "";
|
|
display: block;
|
|
width: 10px;
|
|
height: 10px;
|
|
margin: auto;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-image: linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
|
|
border-radius: 50%;
|
|
}
|
|
|
|
#_cbhtml .rangeSlider__handle:active {
|
|
background-image: linear-gradient(rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.02));
|
|
}
|
|
|
|
#_cbhtml input[type="range"]:focus + .rangeSlider .rangeSlider__handle {
|
|
box-shadow: 0 0 8px rgba(142, 68, 173, 0.9);
|
|
}
|
|
|
|
#_cbhtml .rangeSlider__buffer {
|
|
position: absolute;
|
|
top: 3px;
|
|
height: 14px;
|
|
background: #2c3e50;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
/* Color Picker */
|
|
|
|
.is-color-picker {width:40px;height:40px;background:#fff;border:1px solid rgba(53, 53, 53, 0.28);display:inline-block;margin:3px 0;cursor:pointer;}
|
|
|
|
.color-swatch {width:100%;height:315px;display:flex;flex-direction:column;outline:1px solid rgba(0, 0, 0, 0.08);overflow:hidden;position:relative;}
|
|
.color-swatch > * {display:flex;height:100%;}
|
|
.color-swatch > * > * {width:100%;height:100%;border:transparent 1px solid;cursor:pointer;transition: all ease 0.3s;} /* 27 or 32 */
|
|
|
|
.color-gradient {width:100%;height:157px;display:flex;flex-direction:column;outline:1px solid rgba(0, 0, 0, 0.08);overflow:hidden;position:relative;}
|
|
.color-gradient > * {display:flex;height:100%;}
|
|
.color-gradient > * > * {width:100%;height:100%;border:transparent 1px solid;cursor:pointer;transition: all ease 0.3s;} /* 27 or 32 */
|
|
|
|
#_cbhtml .is-modal.pickcolor button,
|
|
#_cbhtml .pickcolor button,
|
|
.pickcolor button {
|
|
float: left;
|
|
width: 45px;
|
|
height: 45px;
|
|
cursor: pointer;
|
|
}
|
|
#_cbhtml .is-modal.pickcolor .color-default button,
|
|
#_cbhtml .pickcolor .color-default button,
|
|
.pickcolor .color-default button {width:35px;height:35px;border:transparent 1px solid;}
|
|
#_cbhtml .is-modal.pickcolor button.clear,
|
|
#_cbhtml .pickcolor button.clear,
|
|
.pickcolor button.clear {
|
|
font-size: 10px;
|
|
}
|
|
|
|
/*
|
|
Backward compatibility (for examples)
|
|
*/
|
|
.is-pop {position:absolute;top:0;left:0;display:none;z-index:10000;background:#fff;border:1px solid rgb(199, 199, 199);transition: all ease 0.3s;}
|
|
.is-pop {z-index:10002;transition: none;}
|
|
|
|
/* Prevent overide */
|
|
#_cbhtml .is-modal * {font-size:13px;}
|
|
#_cbhtml .elementstyles .is-tabs a,
|
|
#_cbhtml .elementstyles .is-tabs-more a {font-size:11px;color:#000;}
|
|
#_cbhtml .elementstyles * {font-family:sans-serif;font-size:13px;}
|
|
|
|
/* Touch Device
|
|
.textblock-active {background-color: rgba(173, 173, 173, 0.5);} */
|
|
|
|
/* Image resizer */
|
|
#divImageResizer {background: rgba(0,0,0,0);width:1px;height:1px;display:none;z-index:10;touch-action:none;box-sizing:border-box;position:absolute;top:0px;left:0px;}
|
|
.moveable-control.moveable-origin {display: none !important;}
|
|
.moveable-control {border:none !important; width:7px !important; height: 7px !important; margin-top:-3px !important; margin-left:-3px !important; background: #333 !important;}
|
|
.moveable-direction.moveable-s, .moveable-direction.moveable-n {display:none !important;}
|
|
.moveable-direction.moveable-e, .moveable-direction.moveable-w {display:none !important;}
|
|
.moveable-line {display:none !important}
|
|
|
|
/* nogrid */
|
|
.is-builder[nogrid] .is-row-tool {display:none !important}
|
|
.is-builder[nogrid] .is-rowadd-tool {display:none !important}
|
|
|
|
/* selectbox */
|
|
.is-selectbox {
|
|
height: 40px;
|
|
box-sizing: border-box;
|
|
padding: 0 0 0 20px;
|
|
background: #eee;
|
|
line-height: 40px !important;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
cursor: pointer;
|
|
}
|
|
.is-selectbox:hover {
|
|
background: #f1f1f1;
|
|
}
|
|
.is-selectbox-options {
|
|
width:100%;
|
|
height:350px;
|
|
border: #e8e8e8 1px solid;
|
|
overflow-y:auto;
|
|
overflow-x:hidden;
|
|
background-color: #fff;
|
|
display:none;
|
|
}
|
|
.is-selectbox-options > div {
|
|
height:35px;
|
|
padding: 0 0 0 20px;
|
|
line-height: 35px !important;
|
|
font-size: 13px;
|
|
font-weight: 300;
|
|
cursor: pointer;
|
|
}
|
|
.is-selectbox-options > div:hover {
|
|
background: #f1f1f1;
|
|
}
|
|
.is-selectbox-options > div.selected {
|
|
background: #f7f7f7;
|
|
} |