Your IP : 216.73.216.86
.landing-ui-field-color-colorset {
position: relative;
padding-bottom: 12px;
margin: 0 4px 13px 4px;
border-bottom: 1px solid rgba(82,92,105,.1);
}
.landing-ui-field-color-colorset-top {
display: flex;
justify-content: space-between;
}
.landing-ui-field-color-colorset-title {
display: flex;
}
.landing-ui-field-color-colorset-title span {
margin-right: 5px;
}
.landing-ui-field-color-colorset-bottom {
/*display: flex;*/
display: grid;
grid-template-columns: 1fr .5fr;
}
.landing-ui-field-color-colorset-bottom .landing-ui-field-color-preset,
.landing-ui-field-color-colorset-bottom .landing-ui-field-color-colorpicker {
/*flex-basis: 50%;*/
/*padding: 0 4px;*/
}
.landing-ui-field-color-colorset-bottom .landing-ui-field-color-preset {
/*flex-basis: 100%;*/
/*flex-wrap: nowrap;*/
display: grid;
grid-template-columns: repeat(8, 1fr);
}
.landing-ui-field-color-colorset-bottom .landing-ui-field-color-colorpicker {
flex-basis: 45%;
padding: 0;
}
.landing-ui-field-color-colorset-bottom .landing-ui-field-color-preset .landing-ui-field-color-preset-item {
margin: 0 1.5px 6px 1.5px;
}
.landing-ui-field-color-colorset-bottom .landing-ui-field-color-preset .landing-ui-field-color-zeroing,
.landing-ui-field-color-colorset-bottom .landing-ui-field-color-preset .landing-ui-field-color-preset-item[data-name="#ffffff"] {
border: 1px solid rgba(168,173,180,.37);
}
.landing-ui-field-color-opacity {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAEKADAAQAAAABAAAAEAAAAAAXnVPIAAAAWUlEQVQ4Ee1SIRLAMAhLoZ7/vxGNhG3MTaRmlUUSEjiS4e4XSKkqzAwiQiYAjlDKFzgCG5442ypWbV9VMfjtj8ykOWhyRCxF5iokvaJFniX0ipODDTn4/cQbfNsZ6D655GsAAAAASUVORK5CYII=') left top repeat;
background-size: 8px;
position: relative;
width: 100%;
height: 40px;
margin-top: 4px;
margin-bottom: 10px;
border-radius: 2px;
}
/*opacity border not work with gradient - need hack*/
.landing-ui-field-color-opacity::before
{
content: '';
display: block;
position: absolute;
top: -1px;
bottom: -1px;
left: -1px;
right: -1px;
box-shadow: 0 0 4px rgba(128, 128, 128, .1);
border: 1px solid rgba(0, 0, 0, .05);
}
/*to can click on picker circle*/
.landing-ui-field-color-opacity::after {
content: '';
height: 10px;
display: block;
}
.landing-ui-field-color-opacity-color {
width: 100%;
height: 100%;
border-radius: 2px;
}
.landing-ui-field-color-opacity-picker {
position: absolute;
width: 4px;
top: -2px;
margin-left: -2px;
bottom: -2px;
border: 1px solid rgba(255, 255, 255, .25);
border-radius: 2px;
background-color: rgba(82, 92, 105, .22);
cursor: pointer;
}
.landing-ui-field-color-opacity-picker-item {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
left: -8px;
bottom: -7px;
width: 18px;
height: 18px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .19);
}
.landing-ui-field-color-opacity-picker-item-circle {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #2fc6f6;
}
.landing-ui-field-color-draggable {
-webkit-user-select: none;
user-select: none;
}
.landing-ui-field-color-draggable .landing-ui-field-color-opacity {
cursor: pointer;
}
.landing-ui-field-color-draggable .landing-ui-field-color-opacity-picker {
pointer-events: none;
}
.landing-ui-field-color-opacity-container {
display: flex;
}
.landing-ui-field-color-opacity-container .landing-ui-field-range-output {
align-items: center;
}
.landing-ui-field-color-opacity-range-output {
display: flex;
width: 89px;
padding-left: 10px;
}
.landing-ui-field-color-opacity-range-output-input {
font-family: var(--ui-font-family-primary, var(--ui-font-family-helvetica));
font-size: 15px;
text-align: center;
color: #000000;
width: 49px;
height: 39px;
line-height: 37px;
margin-right: 13px;
box-sizing: border-box;
border-bottom: 1px rgba(198, 205, 211, .4) solid;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.landing-ui-field-color-opacity-range-output-arrows {
display: flex;
flex-direction: column;
width: 27px;
height: 39px;
border-radius: 2px;
border: 1px #C6CDD3 solid;
}
.landing-ui-field-color-opacity-range-output-arrows-up,
.landing-ui-field-color-opacity-range-output-arrows-down {
position: relative;
height: 49%;
box-sizing: border-box;
cursor: pointer;
transition: all 200ms ease;
}
.landing-ui-field-color-opacity-range-output-arrows-up:hover {
box-shadow: 0 -1px 5px 0 rgba(0,0,0,0.35);
}
.landing-ui-field-color-opacity-range-output-arrows-up:active {
box-shadow: 0 -1px 1px 0 rgba(0,0,0,0.35);
}
.landing-ui-field-color-opacity-range-output-arrows-down:hover {
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.35);
}
.landing-ui-field-color-opacity-range-output-arrows-down:active {
box-shadow: 0 2px 1px 0 rgba(0,0,0,0.35);
}
.landing-ui-field-color-opacity-range-output-arrows-up::before,
.landing-ui-field-color-opacity-range-output-arrows-down::before {
position: absolute;
content: '';
width: 8px;
height: 8px;
left: 50%;
top: 56%;
transform: translate3d(-50%, -50%, 0) rotate(-45deg);
transform-origin: center center;
border-top: 2px #535C69 solid;
border-right: 2px #535C69 solid;
opacity: .8;
transition: opacity 200ms ease;
pointer-events: none;
}
.landing-ui-field-color-opacity-range-output-arrows-down {
border-top: 1px #C6CDD3 solid;
height: 50%;
}
.landing-ui-field-color-opacity-range-output-arrows-down::before {
transform: translate3d(-50%, -50%, 0) rotate(135deg);
top: 47%;
}
.landing-ui-field-color-opacity-range-output-arrows-up:hover::before,
.landing-ui-field-color-opacity-range-output-arrows-down:hover::before {
opacity: 1;
}
.landing-ui-field-color-tabs-tab-toggler {
display: block;
position: relative;
margin-right: 5px;
font: 13px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
color: rgba(82, 92, 105, .7);
-webkit-user-select: none;
user-select: none;
cursor: pointer;
}
.landing-ui-field-color-tabs .landing-ui-field-color-tabs-tab-toggler {
margin-bottom: 14px;
}
.landing-ui-field-color-tabs:not(.landing-ui-field-color-tabs--big) .landing-ui-field-color-tabs-tab-toggler-name {
display: inline-flex;
font: 13px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
}
.landing-ui-field-color-tabs:not(.landing-ui-field-color-tabs--big) .landing-ui-field-color-tabs-tab-toggler {
display: flex;
justify-content: space-between;
align-items: center;
}
.landing-ui-field-color-tabs:not(.landing-ui-field-color-tabs--big) .landing-ui-field-color-tabs-tab-toggler-icon {
display: inline-block;
width: 12px;
height: 7px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.25.113L6.856 3.508 6 4.35l-.84-.842L1.767.113.567 1.31l5.441 5.44 5.44-5.44z' fill='%23525C69' fill-rule='evenodd'/%3E%3C/svg%3E");
transition: opacity.3s, transform .3s;
opacity: .3;
order: 1;
}
.landing-ui-field-color-tabs:not(.landing-ui-field-color-tabs--big) .landing-ui-field-color-tabs-tab-toggler:hover .landing-ui-field-color-tabs-tab-toggler-icon {
opacity: .7;
}
.landing-ui-field-color-tabs:not(.landing-ui-field-color-tabs--big) .landing-ui-field-color-tabs-tab-toggler.show .landing-ui-field-color-tabs-tab-toggler-icon {
transform: rotate(-180deg);
}
.landing-ui-field-color-tabs-head {
padding-bottom: 5px;
margin-bottom: 5px;
border-bottom: 1px solid rgba(82,92,105,.1);
}
.landing-ui-field-color-tabs-tab {
margin-bottom: 14px;
border-bottom: 1px solid rgba(82,92,105,.1);
}
.landing-ui-field-color-tabs-tab .landing-ui-field-color-tabs-tab-content {
padding-bottom: 18px;
}
.landing-ui-field-color-tabs-tab-content:not(.show) {
height: 0;
padding: 0;
margin: 0;
border: none;
overflow: hidden;
}
.landing-ui-field-color-tabs-head .landing-ui-field-color-tabs-tab-toggler {
display: block;
border-bottom: none;
}
/*BIG*/
.landing-ui-field-color-tabs-head--big {
border: none;
display: flex;
margin-bottom: 10px;
padding-bottom: 0;
}
.landing-ui-field-color-tabs-head--big > .landing-ui-field-color-tabs-tab-toggler {
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 50%;
margin: 0;
padding: 10px 16px;
border-bottom: 1px solid rgba(151,151,151,.29);
border-radius: 3px 3px 0 0;
font: 11px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
font-weight: var(--ui-font-weight-bold, 700);
color: rgba(130,139,149,.7);
text-transform: uppercase;
box-sizing: border-box;
}
.landing-ui-field-color-tabs-head--big > .landing-ui-field-color-tabs-tab-toggler.show {
border: 1px solid rgba(151,151,151,.29);
border-bottom: none;
color: #525c69;
}
.landing-ui-field-color-tabs-head--big > .landing-ui-field-color-tabs-tab-toggler:nth-child(1) > .landing-ui-field-color-tabs-tab-toggler-icon,
.landing-ui-field-color-tabs-head--big > .landing-ui-field-color-tabs-tab-toggler:nth-child(2) > .landing-ui-field-color-tabs-tab-toggler-icon {
display: inline-block;
background-position: center;
background-repeat: no-repeat;
}
.landing-ui-field-color-tabs-head--big > .landing-ui-field-color-tabs-tab-toggler:nth-child(1) > .landing-ui-field-color-tabs-tab-toggler-icon {
margin-right: 7px;
width: 18px;
height: 15px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='18' height='15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.429 0l8.063 8.063a.417.417 0 01-.235.707l-1.7.243-5.376 5.377a2.083 2.083 0 01-2.946 0L.61 9.765a2.083 2.083 0 010-2.946l3.103-3.103 1.125 1.126L2.116 7.46a1.383 1.383 0 00-.4.84l10.492-.375-.024.026.953-.148-5.58-5.58-.615.593 1.57 1.57a.278.278 0 010 .394l-.808.808a.278.278 0 01-.393 0L3.133 1.412a.278.278 0 010-.393L3.942.21a.278.278 0 01.393 0l1.442 1.442L7.429 0zm7.79 9.143c.283 0 1.907 2.206 1.907 3.26a1.906 1.906 0 01-3.813 0c0-1.054 1.624-3.26 1.907-3.26z' fill='%2359636F' fill-rule='evenodd' opacity='.5'/%3E%3C/svg%3E");
}
.landing-ui-field-color-tabs-head--big > .landing-ui-field-color-tabs-tab-toggler:nth-child(2) > .landing-ui-field-color-tabs-tab-toggler-icon {
margin-right: 6px;
width: 13px;
height: 13px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.607.117h9.686c.823 0 1.49.667 1.49 1.49v9.686a1.49 1.49 0 01-1.49 1.49H1.607a1.49 1.49 0 01-1.49-1.49V1.607c0-.823.667-1.49 1.49-1.49zm.038 11.138h9.653v-.743l-2.574-2.97-1.287 1.485L4.22 5.314l-2.574 2.97v2.97zm7.462-6.223a1.245 1.245 0 100-2.49 1.245 1.245 0 000 2.49z' fill='%23525C69' fill-rule='evenodd' opacity='.5'/%3E%3C/svg%3E");
}
.landing-ui-field-color-tabs-head--big > .landing-ui-field-color-tabs-tab-toggler:nth-child(1).show > .landing-ui-field-color-tabs-tab-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='18' height='15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.429 0l8.063 8.063a.417.417 0 01-.235.707l-1.7.243-5.376 5.377a2.083 2.083 0 01-2.946 0L.61 9.765a2.083 2.083 0 010-2.946l3.103-3.103 1.125 1.126L2.116 7.46a1.383 1.383 0 00-.4.84l10.492-.375-.024.026.953-.148-5.58-5.58-.615.593 1.57 1.57a.278.278 0 010 .394l-.808.808a.278.278 0 01-.393 0L3.133 1.412a.278.278 0 010-.393L3.942.21a.278.278 0 01.393 0l1.442 1.442L7.429 0zm7.79 9.143c.283 0 1.907 2.206 1.907 3.26a1.906 1.906 0 01-3.813 0c0-1.054 1.624-3.26 1.907-3.26z' fill='%232FC6F6' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.landing-ui-field-color-tabs-head--big > .landing-ui-field-color-tabs-tab-toggler:nth-child(2).show > .landing-ui-field-color-tabs-tab-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.607.117h9.686c.823 0 1.49.667 1.49 1.49v9.686a1.49 1.49 0 01-1.49 1.49H1.607a1.49 1.49 0 01-1.49-1.49V1.607c0-.823.667-1.49 1.49-1.49zm.038 11.138h9.653v-.743l-2.574-2.97-1.287 1.485L4.22 5.314l-2.574 2.97v2.97zm7.462-6.223a1.245 1.245 0 100-2.49 1.245 1.245 0 000 2.49z' fill='%233BC8F5' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.landing-ui-field-color-primary {
cursor: pointer;
-webkit-user-select: none;
user-select: none;
display: flex;
margin-bottom: 14px;
}
.landing-ui-field-color-primary-preview {
display: block;
width: 16px;
height: 16px;
border-radius: 2px;
background: var(--primary);
margin-right: 7px;
position: relative;
}
.landing-ui-field-color-primary.active .landing-ui-field-color-primary-preview::before {
content: '';
position: absolute;
right: -4px;
bottom: -3px;
width: 15px;
height: 15px;
border-radius: 50%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='15' height='15' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect fill='%23FFF' width='14.819' height='14.819' rx='7.409'/%3E%3Cpath fill='%232FC6F6' d='M6.593 8.333l4.19-4.141 1.39 1.44-5.559 5.56-.021-.023-.022.023-3.398-3.415 1.39-1.44z'/%3E%3C/g%3E%3C/svg%3E");
box-shadow: 0 2px 4px 0 rgba(0,0,0,.11);
}
.landing-ui-field-color-primary-text {
font: 12px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
font-weight: var(--ui-font-weight-regular, 400);
color: #525c69;
opacity: .34;
-webkit-user-select: none;
user-select: none;
transition: opacity .3s;
white-space: nowrap;
}
.landing-ui-field-color-primary-text:hover {
opacity: 1;
}
.landing-ui-field-color-zeroing {
cursor: pointer;
-webkit-user-select: none;
user-select: none;
display: flex;
border-bottom: 1px solid rgba(82,92,105,.1);
padding-bottom: 14px;
margin-bottom: 14px;
}
.landing-ui-field-color-zeroing-preview {
display: block;
width: 16px;
height: 16px;
border-radius: 2px;
background: white;
margin-right: 7px;
position: relative;
border: 1px solid #C5C8CC;
}
.landing-ui-field-color-zeroing-preview:before {
content: '';
position: absolute;
top: 37%;
left: 75%;
width: 2px;
height: 13px;
background-color: #c85d63;
transform: rotate(-45deg) translate(-50%,-50%);
}
.landing-ui-field-color-zeroing.active .landing-ui-field-color-zeroing-state {
content: '';
position: absolute;
right: -4px;
bottom: -3px;
width: 15px;
height: 15px;
border-radius: 50%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='15' height='15' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect fill='%23FFF' width='14.819' height='14.819' rx='7.409'/%3E%3Cpath fill='%232FC6F6' d='M6.593 8.333l4.19-4.141 1.39 1.44-5.559 5.56-.021-.023-.022.023-3.398-3.415 1.39-1.44z'/%3E%3C/g%3E%3C/svg%3E");
box-shadow: 0 2px 4px 0 rgba(0,0,0,.11);
}
.landing-ui-field-color-image-image {
margin-bottom: 10px;
}
.landing-ui-field-color-image-image.active .landing-ui-field-image-preview-inner:before {
content: '';
position: absolute;
right: -4px;
bottom: -3px;
width: 15px;
height: 15px;
border-radius: 50%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='15' height='15' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect fill='%23FFF' width='14.819' height='14.819' rx='7.409'/%3E%3Cpath fill='%232FC6F6' d='M6.593 8.333l4.19-4.141 1.39 1.44-5.559 5.56-.021-.023-.022.023-3.398-3.415 1.39-1.44z'/%3E%3C/g%3E%3C/svg%3E");
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .11);
}
.landing-ui-field-color-image-size .landing-ui-field-header {
font: 13px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
margin-bottom: 0;
color: rgba(82, 92, 105, .7);
}
.landing-ui-field-color-image .landing-ui-field-color-image-size {
margin-bottom: 20px;
}
.landing-ui-field-color-image .landing-ui-field-color-image-attachment .landing-ui-field-input {
border-bottom: 1px solid rgba(82, 92, 105, .1);
margin-bottom: 14px;
padding-bottom: 8px;
}
.landing-ui-field-color-image-attachment .landing-ui-field-checkbox-item-label {
font: 13px var(--ui-font-family-primary, var(--ui-font-family-helvetica)) !important;
color: rgba(82, 92, 105, .7) !important;
}
.landing-ui-field-color-gradient {
display: grid;
grid-template-columns: 1fr .5fr;
}
.landing-ui-field-color-gradient-preset-container .landing-ui-field-color-preset {
display: grid;
grid-template-columns: repeat(4, 1fr);
margin: 0 -1.5px -1.5px -1.5px;
}
.landing-ui-field-color-gradient-container {
/*margin-top: 4px;*/
/*margin-bottom: 10px;*/
position: relative;
height: 77px;
width: 100%;
display: flex;
justify-content: space-between;
flex-direction: column;
margin-left: 2px;
border-radius: 2px;
}
.landing-ui-field-color-gradient-container.active:before {
content: '';
position: absolute;
right: -4px;
bottom: -3px;
width: 15px;
height: 15px;
border-radius: 50%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='15' height='15' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect fill='%23FFF' width='14.819' height='14.819' rx='7.409'/%3E%3Cpath fill='%232FC6F6' d='M6.593 8.333l4.19-4.141 1.39 1.44-5.559 5.56-.021-.023-.022.023-3.398-3.415 1.39-1.44z'/%3E%3C/g%3E%3C/svg%3E");
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .11);
}
.landing-ui-field-color-gradient-container.active .landing-ui-field-color-hex-preview.active::after {
display: none;
}
.landing-ui-field-color-gradient-open-popup {
position: absolute;
top: calc(50% - 9px);
right: -9px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='3' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 1.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM7 1.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM11 1.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z' fill='%237D7D7D'/%3E%3C/svg%3E");
box-shadow: 0 0 4px rgba(128, 128, 128, .1);
border: 1px solid rgba(0, 0, 0, .05);
}
/*.landing-ui-field-color-gradient-preset-popup*/
/*{*/
/* border-radius: 4px;*/
/*}*/
.landing-ui-field-color-gradient-preset-popup-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.landing-ui-field-color-gradient-switch-type {
font: 12px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
font-weight: var(--ui-font-weight-regular, 400);
color: #525c69;
opacity: .34;
-webkit-user-select: none;
user-select: none;
transition: opacity .3s;
white-space: nowrap;
cursor: pointer;
border-bottom: 1px dashed;
}
.landing-ui-field-color-gradient-open-popup,
.landing-ui-field-color-gradient-rotate,
.landing-ui-field-color-gradient-swap {
border-radius: 50%;
cursor: pointer;
opacity: .8;
width: 18px;
height: 18px;
background-color: #fff;
background-repeat: no-repeat;
background-position: center center;
}
.landing-ui-field-color-gradient-rotate
{
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 6.5C0 10.09 2.968 13 6.63 13c.125 0 .25-.003.373-.01V11.35a5.12 5.12 0 01-.373.014c-2.74 0-4.962-2.178-4.962-4.865 0-2.687 2.222-4.865 4.962-4.865 2.44 0 4.468 1.726 4.884 4H8.602l3.7 3.625L16 5.634h-2.798C12.77 2.454 9.992 0 6.63 0 2.968 0 0 2.91 0 6.5z' fill='%237D7D7D'/%3E%3C/svg%3E");
}
.landing-ui-field-color-gradient-swap {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='15' height='13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%237D7D7D'%3E%3Cpath d='M2.352 2.934c0-.394.329-.714.735-.714.406 0 .736.32.736.714v8.559c0 .394-.33.713-.736.713a.725.725 0 01-.735-.713v-8.56z'/%3E%3Cpath d='M2.463.335a.748.748 0 011.248 0l2.35 3.647c.306.475-.046 1.091-.623 1.091H.737c-.578 0-.93-.616-.624-1.09L2.463.334zM11.177 1.507c0-.394.33-.713.736-.713.406 0 .735.32.735.713v9.986c0 .394-.329.713-.735.713a.725.725 0 01-.736-.713V1.507z'/%3E%3Cpath d='M12.537 12.665a.748.748 0 01-1.248 0L8.94 9.018c-.306-.475.046-1.092.623-1.092h4.701c.578 0 .93.617.624 1.092l-2.35 3.647z'/%3E%3C/g%3E%3C/svg%3E");
}
.landing-ui-field-color-gradient-rotate {
margin-right: 9px;
}
.landing-ui-field-color-gradient-open-popup:hover,
.landing-ui-field-color-gradient-rotate:hover,
.landing-ui-field-color-gradient-swap:hover,
.landing-ui-field-color-gradient-switch-type:hover {
opacity: 1;
}
.landing-ui-field-color-gradient-open-popup.disable,
.landing-ui-field-color-gradient-rotate.disable,
.landing-ui-field-color-gradient-swap.disable,
.landing-ui-field-color-gradient-switch-type.disable {
cursor: not-allowed;
opacity: .4;
}
.landing-ui-field-color-gradient .landing-ui-field-color-hex-preview.active {
outline: none;
box-shadow: none;
}
.landing-ui-field-color-gradient-btn {
display: block;
margin: 0 -10px 0 auto;
width: 19px;
height: 19px;
background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.044 2.954v2.163H4.019a1 1 0 00-.993.884l-.007.117v.305H2.99v3.23H.97V4.956a2 2 0 012-2l3.075-.001zM6.07.198l3.793 3.793L6.07 7.784V.198z' fill='%23525C69' fill-rule='evenodd' opacity='.6'/%3E%3C/svg%3E") center no-repeat;
border-radius: 50%;
cursor: pointer;
}
.landing-ui-field-color-gradient-from .landing-ui-field-color-hex-preview,
.landing-ui-field-color-gradient-to .landing-ui-field-color-hex-preview {
background-color: transparent !important;
font-size: 10px;
}
.landing-ui-field-color-gradient-from .landing-ui-field-color-hex-preview {
border-bottom: 1px solid rgba(255, 255, 255, .11);
}
.landing-ui-field-color-gradient-to .landing-ui-field-color-hex-preview {
border-top: 1px solid rgba(255, 255, 255, .11);
}
.landing-ui-field-color-preset {
display: grid;
grid-template-columns: repeat(6, 1fr);
margin-left: -1.5px;
margin-right: -1.5px;
margin-bottom: 3px;
}
.landing-ui-field-color-preset-item {
position: relative;
margin: 1.5px;
box-shadow: 0 0 4px rgba(128, 128, 128, .1);
border: 1px solid rgba(0, 0, 0, .05);
border-radius: 2px;
cursor: pointer;
transition: box-shadow 200ms ease;
}
/*gradient with transparent border not work*/
.landing-ui-field-color-gradient-preset-container .landing-ui-field-color-preset-item {
border: none;
}
.landing-ui-field-color-preset-item:hover:not('.landing-ui-field-color-preset-preview-mode') {
box-shadow: 0 0 3px rgba(0, 0, 0, .4);
}
.landing-ui-field-color-preset-item::after {
content: '';
display: block;
padding-bottom: 100%;
}
.landing-ui-field-color-preset-item.active:before {
content: '';
position: absolute;
right: -4px;
bottom: -3px;
width: 15px;
height: 15px;
border-radius: 50%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='15' height='15' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect fill='%23FFF' width='14.819' height='14.819' rx='7.409'/%3E%3Cpath fill='%232FC6F6' d='M6.593 8.333l4.19-4.141 1.39 1.44-5.559 5.56-.021-.023-.022.023-3.398-3.415 1.39-1.44z'/%3E%3C/g%3E%3C/svg%3E");
box-shadow: 0 2px 4px 0 rgba(0,0,0,.11);
}
.landing-ui-field-color-preset.landing-ui-field-color-preset-preview-mode {
margin: 2px;
}
.landing-ui-field-color-preset.landing-ui-field-color-preset-preview-mode.active {
outline: 1px solid rgba(255, 255, 255, .75);
box-shadow: 0 0 10px red;
}
.landing-ui-field-color-presets-left {
display: flex;
align-items: center;
}
.landing-ui-field-color-presets-left .landing-ui-field-color-presets-title {
margin-right: 5px;
}
.landing-ui-field-color-control-title
{
color: silver;
font-style: italic;
font-size: .8em;
margin-top: 5px;
}
.landing-ui-field-color-popup-footer
{
margin-top: 14px;
display: flex;
justify-content: center;
}
.landing-ui-field-color-presets {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 7px;
width: 100%;
}
.landing-ui-field-color-presets-title {
margin-right: 5px;
max-width: 100%;
font: 13px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
font-weight: var(--ui-font-weight-regular, 400);
color: #525c69;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
opacity: .7;
}
.landing-ui-field-color-presets-open {
font: 12px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
font-weight: var(--ui-font-weight-regular, 400);
color: #525c69;
opacity: .34;
-webkit-user-select: none;
user-select: none;
transition: opacity .3s;
white-space: nowrap;
cursor: pointer;
border-bottom: 1px dashed;
}
.landing-ui-field-color-presets-open:hover {
opacity: 1;
}
.landing-ui-field-color-presets-preset {
margin: 10px 1px;
padding: 3px;
border-radius: 3px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.landing-ui-field-color-presets-preset-item {
flex: 0 0 16.66667%;
max-width: 16.66667%;;
width: 15px;
height: 15px;
}
.landing-ui-field-color-presets-popup {
padding: 4px 6px;
}
.landing-ui-field-color-presets-popup-title {
display: block;
padding-bottom: 10px;
margin-bottom: 12px;
border-bottom: 1px solid rgba(82,92,105,.1);
font: var(--ui-font-weight-bold) 13px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
color: #535c69;
}
.landing-ui-field-color-presets-popup-inner {
display: grid;
grid-template-columns: repeat(2, 1fr);
margin: 0 -9px;
max-height: 180px;
overflow-y: auto;
}
.landing-ui-field-color-presets-popup-inner .landing-ui-field-color-presets-preset {
position: relative;
padding: 4px;
margin: 2px 9px;
border: 2px solid transparent;
transition: border .3s;
border-radius: 1px;
cursor: pointer;
}
.landing-ui-field-color-presets-popup-inner .landing-ui-field-color-presets-preset.active,
.landing-ui-field-color-presets-preset:hover {
border: 2px solid rgba(82,92,105,.34);
}
.landing-ui-field-color-presets-popup-inner .landing-ui-field-color-presets-preset.active:after {
content: '';
position: absolute;
right: -5px;
bottom: -4px;
width: 15px;
height: 15px;
border-radius: 50%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='15' height='15' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect fill='%23FFF' width='14.819' height='14.819' rx='7.409'/%3E%3Cpath fill='%232FC6F6' d='M6.593 8.333l4.19-4.141 1.39 1.44-5.559 5.56-.021-.023-.022.023-3.398-3.415 1.39-1.44z'/%3E%3C/g%3E%3C/svg%3E");
box-shadow: 0 2px 4px 0 rgba(0,0,0,.11);
}
.presets-popup .popup-window-content {
overflow: hidden!important;
}
.landing-ui-field-color-reset {
display: block;
width: 22px;
height: 22px;
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.805 2.294a5.05 5.05 0 00-7.143 0l-.002.004L.025.664V5h4.336L2.664 3.302l.003-.003A3.63 3.63 0 112.2 7.858l-1.13.865a5.05 5.05 0 107.736-6.43z' fill='%23525C69' fill-rule='evenodd'/%3E%3C/svg%3E") center no-repeat;
transition: opacity .3s;
opacity: .3;
cursor: pointer;
}
.landing-ui-field-color-reset:hover {
opacity: .7;
}
.landing-ui-field-color-hex {
position: relative;
box-shadow: 0 0 4px rgba(128, 128, 128, .1);
border: 1px solid rgba(0, 0, 0, .05);
}
.landing-ui-field-color-colorset .landing-ui-field-color-hex {
margin-left: 3px;
}
.landing-ui-field-color-hex-input,
.landing-ui-field-color-hex-preview {
color: #000;
}
.landing-ui-field-color-hex-input {
height: 22px;
max-width: 77px;
border-radius: 2px;
border: none;
outline: none;
padding: 2px 15px 2px 5px;
box-sizing: border-box;
}
.landing-ui-field-color-hex-preview {
position: relative;
padding: 3px 19px 3px 6px;
border-radius: 2px;
font-size: 11px;
color: #525c69;
cursor: pointer;
transition: .3s;
}
.landing-ui-field-color-hex-preview-btn {
position: absolute;
top: 50%;
right: 9px;
display: block;
transform: translate(0, -50%);
cursor: pointer;
transition: .3s;
}
.landing-ui-field-color-popup-head .landing-ui-field-color-hex-preview-btn {
right: 4px;
}
.landing-ui-field-color-hex-input.active,
.landing-ui-field-color-hex-preview.active {
position: relative;
}
.landing-ui-field-color-hex-input.active:after,
.landing-ui-field-color-hex-preview.active:after {
content: '';
position: absolute;
right: -4px;
bottom: -3px;
width: 15px;
height: 15px;
border-radius: 50%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='15' height='15' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect fill='%23FFF' width='14.819' height='14.819' rx='7.409'/%3E%3Cpath fill='%232FC6F6' d='M6.593 8.333l4.19-4.141 1.39 1.44-5.559 5.56-.021-.023-.022.023-3.398-3.415 1.39-1.44z'/%3E%3C/g%3E%3C/svg%3E");
box-shadow: 0 2px 4px 0 rgba(0,0,0,.11);
}
:root {
--saturation: 100%;
}
.landing-ui-field-color-spectrum {
background: linear-gradient(to bottom, white 0%, transparent 50%, black 100%),
linear-gradient(
to right,
hsl(0, var(--saturation), 50%) 0%,
hsl(30, var(--saturation), 50%) 8%,
hsl(60, var(--saturation), 50%) 16%,
hsl(90, var(--saturation), 50%) 24%,
hsl(120, var(--saturation), 50%) 32%,
hsl(150, var(--saturation), 50%) 40%,
hsl(180, var(--saturation), 50%) 48%,
hsl(210, var(--saturation), 50%) 56%,
hsl(240, var(--saturation), 50%) 64%,
hsl(270, var(--saturation), 50%) 72%,
hsl(300, var(--saturation), 50%) 80%,
hsl(330, var(--saturation), 50%) 88%,
hsl(360, var(--saturation), 50%) 95.7%,
rgb(128, 128, 128) 96.3%,
rgb(128, 128, 128) 100%
);
position: relative;
width: 100%;
height: 150px;
margin-top: 8px;
border-radius: 2px;
}
.landing-ui-field-color-spectrum-picker {
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cfilter x='-38.9%25' y='-27.8%25' width='177.8%25' height='177.8%25' filterUnits='objectBoundingBox' id='a'%3E%3CfeOffset dy='1' in='SourceAlpha' result='shadowOffsetOuter1'/%3E%3CfeGaussianBlur stdDeviation='1' in='shadowOffsetOuter1' result='shadowBlurOuter1'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0' in='shadowBlurOuter1'/%3E%3C/filter%3E%3Cpath d='M4.5 0a4.5 4.5 0 110 9 4.5 4.5 0 010-9zm0 2a2.5 2.5 0 100 5 2.5 2.5 0 000-5z' id='b'/%3E%3C/defs%3E%3Cg transform='translate(2 1)' fill='none' fill-rule='evenodd' opacity='.926'%3E%3Cuse fill='%23000' filter='url(%23a)' xlink:href='%23b'/%3E%3Cuse fill='%23FFF' xlink:href='%23b'/%3E%3C/g%3E%3C/svg%3E") 50% 50% no-repeat;
width: 13px;
height: 13px;
margin-left: -6px;
margin-top: -6px;
position: absolute;
z-index: 20;
top: 20px;
left: 20px;
cursor: pointer;
}
.landing-ui-field-color-spectrum-picker.hidden {
display: none;
}
.landing-ui-field-color-draggable {
-webkit-user-select: none;
user-select: none;
}
.landing-ui-field-color-draggable .landing-ui-field-color-spectrum {
cursor: pointer;
}
.landing-ui-field-color-draggable .landing-ui-field-color-spectrum-picker {
pointer-events: none;
}
.landing-ui-field-color-popup-head {
display: flex;
align-items: center;
margin-bottom: 5px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(151,151,151,.29);
}
.landing-ui-field-color-recent {
display: flex;
flex-grow: 1;
padding-right: 5px;
margin: 0 -1.5px;
overflow: hidden;
}
.landing-ui-field-color-recent-item {
margin: 0 1.5px;
height: 22px;
width: 22px;
border-radius: 2px;
-webkit-user-select: none;
user-select: none;
cursor: pointer;
box-shadow: 0 0 4px rgba(128, 128, 128, .1);
border: 1px solid rgba(0, 0, 0, .05);
}