Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* GENERAL */
- .ffb-canvas {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
- .ffb-canvas *,
- .ffb-canvas *:before,
- .ffb-canvas *:after {
- -webkit-box-sizing: inherit;
- -moz-box-sizing: inherit;
- box-sizing: inherit;
- }
- .qtip,
- .qtip *,
- .qtip *:before,
- .qtip *:after {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
- /* DASHICONS RESET FIX */
- .ffb-canvas .dashicons,
- .ffb-canvas .dashicons-before::before {
- width: auto;
- height: auto;
- }
- /* CLEARFIX */
- .clearfix:before,
- .clearfix:after {
- content: " ";
- display: table;
- }
- .clearfix:after {
- clear: both;
- }
- /* CANVAS */
- .ffb-canvas {
- font-size: 12px;
- margin: 0 -12px -12px -12px;
- -webkit-touch-callout: none; /* iOS Safari */
- -webkit-user-select: none; /* Chrome/Safari/Opera */
- -khtml-user-select: none; /* Konqueror */
- -moz-user-select: none; /* Firefox */
- -ms-user-select: none; /* Internet Explorer/Edge */
- user-select: none; /* Non-prefixed version, currently
- not supported by any browser */
- }
- .ffb-canvas__add-section-button-wrapper {
- text-align: center;
- /*background-color: #fafafa;*/
- margin: 12px 4px 4px 4px;
- padding: 17px;
- position: relative;
- /*transition: 0.2s margin ease;*/
- /*border: 1px dashed #d0d0d0;*/
- /*cursor: pointer;*/
- }
- .ffb-canvas__add-section-button-wrapper.action-add-section-triggered {
- cursor: default;
- }
- /*.ffb-canvas__add-section-button-wrapper:hover,
- .ffb-canvas__add-section-button-wrapper.action-add-section-triggered {
- background-color: #fafafa;
- }*/
- /*
- .ffb-canvas__add-section-button {
- text-align: left;
- font-size: 18px;
- background: #32d316;
- border-radius: 5px;
- display: inline-block;
- font-size: 36px;
- margin: 20px auto 0;
- padding: 10px;
- text-align: center;
- color: #ffffff;
- cursor: pointer;
- }
- .ffb-canvas__add-section-button:hover {
- color: #23282d;
- }*/
- .ffb-canvas__add-section-button {
- -webkit-transition: none !important;
- -moz-transition: none !important;
- -o-transition: none !important;
- -ms-transition: none !important;
- transition: none !important;
- -webkit-box-shadow: none !important;
- -moz-box-shadow: none !important;
- -o-box-shadow: none !important;
- -ms-box-shadow: none !important;
- box-shadow: none !important;
- display: inline-block;
- margin: 0 10px;
- width: 32px;
- height: 32px;
- background-image: url('images/ffb-add-section-icons3.png');
- background-repeat: no-repeat;
- text-decoration: none;
- position: absolute;
- top: 17px;
- left: 50%;
- margin: 0 0 0 -16px;
- }
- .ffbvr .ffb-canvas__add-section-button {
- background-image: url('images/ffbvr/ffb-add-section-icons3.png');
- }
- .ffb-canvas__add-section-button {
- background-position: -560px 0;
- }
- .ffb-canvas__add-section-button-wrapper:hover .ffb-canvas__add-section-button {
- background-position: -560px -70px;
- }
- /*
- .ffb-canvas__add-section-button {
- -webkit-transition: none !important;
- -moz-transition: none !important;
- -o-transition: none !important;
- -ms-transition: none !important;
- transition: none !important;
- -webkit-box-shadow: none !important;
- -moz-box-shadow: none !important;
- -o-box-shadow: none !important;
- -ms-box-shadow: none !important;
- box-shadow: none !important;
- }
- .ffb-canvas__add-section-button {
- display: inline-block;
- line-height: 20px;
- background-color: #32d316;
- color: #ffffff;
- text-decoration: none;
- border-radius: 2px;
- font-size: 13px;
- position: absolute;
- top: 28px;
- left: 50%;
- transform: translateX(-50%);
- }
- .ffb-canvas__add-section-button:hover {
- background-color: #22c306;
- color: #ffffff;
- }
- .ffb-canvas__add-section-button i {
- padding: 8px 0 8px 13px;
- display: inline-block;
- height: 36px;
- line-height: 20px;
- font-size: 14px;
- }
- .ffb-canvas__add-section-button span {
- padding: 8px 12px 8px 9px;
- display: inline-block;
- height: 36px;
- line-height: 20px;
- }
- */
- .ffb-canvas__add-section-items {
- height: 32px; /* should equal the height of the ADD button which is positioned absolutely */
- /*transition: 0.5242s height ease;*/
- }
- /*.ffb-canvas__add-section-button-wrapper.action-add-section-triggered .ffb-canvas__add-section-items {
- height: 52px;
- }*/
- .ffb-canvas__add-section-item {
- display: none;
- margin: 0 8px;
- width: 32px;
- height: 32px;
- background-image: url('images/ffb-add-section-icons3.png');
- background-repeat: no-repeat;
- text-decoration: none;
- transition: none !important;
- cursor: pointer;
- }
- .ffbvr .ffb-canvas__add-section-item {
- background-image: url('images/ffbvr/ffb-add-section-icons3.png');
- }
- .ffb-canvas__add-section-button-wrapper.action-add-section .ffb-canvas__add-section-item {
- display: inline-block;
- }
- .ffb-canvas__add-section-button-wrapper.action-add-section .ffb-canvas__add-section-button {
- display: none;
- }
- /*
- .ffb-canvas__add-section-item {
- animation-duration: 0.1142s;
- }
- .ffb-canvas__add-section-button-wrapper.action-add-section-triggered .ffb-canvas__add-section-item {
- display: inline-block;
- -webkit-transition: none !important;
- -moz-transition: none !important;
- -o-transition: none !important;
- -ms-transition: none !important;
- transition: none !important;
- -webkit-box-shadow: none !important;
- -moz-box-shadow: none !important;
- -o-box-shadow: none !important;
- -ms-box-shadow: none !important;
- box-shadow: none !important;
- }
- .ffb-canvas__add-section-item:nth-child(1) {
- animation-delay: 0.0s;
- }
- .ffb-canvas__add-section-item:nth-child(2) {
- animation-delay: 0.04s;
- }
- .ffb-canvas__add-section-item:nth-child(3) {
- animation-delay: 0.08s;
- }
- .ffb-canvas__add-section-item:nth-child(4) {
- animation-delay: 0.12s;
- }
- .ffb-canvas__add-section-item:nth-child(5) {
- animation-delay: 0.16s;
- }
- .ffb-canvas__add-section-item:nth-child(6) {
- animation-delay: 0.20s;
- }
- .ffb-canvas__add-section-item:nth-child(7) {
- animation-delay: 0.24s;
- }
- .ffb-canvas__add-section-item:nth-child(8) {
- animation-delay: 0.28s;
- }
- */
- .ffb-canvas__add-section-item__grid-1 {
- background-position: 0px 0px;
- }
- .ffb-canvas__add-section-item__grid-2 {
- background-position: -70px 0px;
- }
- .ffb-canvas__add-section-item__grid-3 {
- background-position: -140px 0px;
- }
- .ffb-canvas__add-section-item__grid-4 {
- background-position: -210px 0px;
- }
- .ffb-canvas__add-section-item__grid-bs {
- background-position: -280px 0px;
- }
- .ffb-canvas__add-section-item__element {
- background-position: -350px 0px;
- }
- .ffb-canvas__add-section-item__library {
- background-position: -420px 0px;
- }
- .ffb-canvas__add-section-item__cancel {
- background-position: -490px 0px;
- }
- .ffb-canvas__add-section-item__grid-1:hover {
- background-position: 0px -70px;
- }
- .ffb-canvas__add-section-item__grid-2:hover {
- background-position: -70px -70px;
- }
- .ffb-canvas__add-section-item__grid-3:hover {
- background-position: -140px -70px;
- }
- .ffb-canvas__add-section-item__grid-4:hover {
- background-position: -210px -70px;
- }
- .ffb-canvas__add-section-item__grid-bs:hover {
- background-position: -280px -70px;
- }
- .ffb-canvas__add-section-item__element:hover {
- background-position: -350px -70px;
- }
- .ffb-canvas__add-section-item__library:hover {
- background-position: -420px -70px;
- }
- .ffb-canvas__add-section-item__cancel:hover {
- background-position: -490px -70px;
- }
- /* CANVAS - CONTEXTMENU */
- .ffb-canvas-contextmenu {
- border-radius: 0;
- margin: 0;
- padding: 0;
- line-height: 18px;
- width: 120px;
- min-width: 0;
- max-width: auto;
- font-size: 12px;
- border: 1px solid #bbbbbb;
- -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.09);
- -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.09);
- box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.09);
- }
- .ffb-canvas-contextmenu .context-menu-item {
- margin: 0;
- padding: 7px 17px;
- /*border-bottom: 1px solid #dddddd;*/
- }
- .ffb-canvas-contextmenu .context-menu-item:last-child {
- border-bottom: none;
- }
- .ffb-canvas-contextmenu .context-menu-item.context-menu-hover {
- background-color: #32d316;
- color: #ffffff;
- }
- .ffbvr .ffb-canvas-contextmenu .context-menu-item.context-menu-hover {
- background-color: #2eb515;
- }
- .ffb-canvas-contextmenu .context-menu-item.context-menu-hover:last-child {
- background-color: #ff0048;
- }
- .ffb-options-page .ff-popup-button-wrapper:not(:last-child) .ff-popup-button {
- border-bottom: none;
- cursor: pointer;
- }
- .ffb-options-page .ff-popup-button:hover {
- background-color: #32d316;
- }
- .ffbvr .ffb-options-page .ff-popup-button:hover {
- background-color: #2eb515;
- }
- /* ELEMENTS (GENERAL) */
- .ffb-element {
- background-color: #ffffff;
- border: 1px solid #dddddd;
- box-shadow: 0 2px 16px rgba(0, 0, 0, 0.02);
- margin: 16px 8px 0 8px !important;
- position: relative;
- animation-duration: 0.3s;
- opacity: 1;
- }
- /*
- .ffb-element-disabled > .ffb-element-preview,
- .ffb-element-disabled > .ffb-dropzone {
- opacity: 0.35 !important;
- }*/
- .ffb-element-disabled > .ffb-element-preview:before,
- .ffb-element-disabled > .ffb-dropzone:before {
- content: ' ';
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- display: block;
- background-color: rgba(250,250,250,0.75);
- z-index: 1;
- pointer-events: none;
- }
- .ffb-element-disabled > .ffb-dropzone:before {
- top: 25px; /* el header height */
- }
- /*.ffb-element-disabled > .ffb-header .ffb-header-name {
- color: #ff0048;
- }*/
- body:not(.ffb-canvas-drag-in-progress) .ffb-element-is-hovered.ffb-element-disabled {
- box-shadow: 0 0 0 1px #ff0048 !important;
- }
- body:not(.ffb-canvas-drag-in-progress) .ffb-element-is-hovered.ffb-element-disabled {
- border-color: #ff0048 !important;
- }
- body:not(.ffb-canvas-drag-in-progress) .ffb-element-is-hovered.ffb-element-is-collapsed.ffb-element-disabled > .ffb-header {
- border-bottom-color: #ff0048 !important;
- }
- /*body:not(.ffb-canvas-drag-in-progress) .ffb-element-disabled .ffb-element-is-hovered {
- box-shadow: 0 0 0 1px #ff0048 !important;
- }
- body:not(.ffb-canvas-drag-in-progress) .ffb-element-disabled .ffb-element-is-hovered {
- border-color: #ff0048 !important;
- }
- body:not(.ffb-canvas-drag-in-progress) .ffb-element-is-collapsed.ffb-element-disabled .ffb-element-is-hovered > .ffb-header {
- border-bottom-color: #ff0048 !important;
- }*/
- .ffb-element.ffb-element-anim-copy {
- animation-duration: 1s;
- }
- /* ELEMENT __ HEADER */
- .ffb-header {
- background-color: #fafafa;
- text-transform: capitalize;
- border-bottom: 1px solid #dddddd;
- color: #23282d;
- cursor: pointer;
- }
- .ffb-header-name {
- float: left;
- font-weight: 600;
- padding: 0 8px 0 8px;
- font-size: 11px;
- /*cursor: move;*/
- max-width: calc(100% - 71px);
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .ffb-header-name,
- .ffb-header-name:hover {
- color: #23282d;
- }
- .ffb-element-column > .ffb-header > .ffb-header-name {
- /*max-width: calc(100% - 120px);*/
- max-width: 100%;
- }
- .ffb-element.ffb-element-dropzone-no > .ffb-header > .ffb-header-name {
- /*max-width: calc(100% - 72px);*/
- max-width: 100%;
- }
- .ffb-header__button {
- color: #666666;
- font-size: 15px;
- /*padding: 0 8px;*/
- width: 24px;
- /*opacity: 0.5;*/
- }
- .ffb-header-name,
- .ffb-header__button {
- height: 24px;
- line-height: 24px;
- }
- .ffb-header__button {
- background-image: url('images/ffb-header-icons5.png');
- background-repeat: no-repeat;
- }
- .ffbvr .ffb-header__button {
- background-image: url('images/ffbvr/ffb-header-icons5.png');
- }
- .ffb-header__button-right {
- float: right;
- /*border-left: 1px solid #dddddd;*/
- }
- .ffb-header__button-left {
- float: left;
- /*border-right: 1px solid #dddddd;*/
- }
- .ffb-header__button:hover {
- cursor: pointer;
- background-color: #ffffff;
- /*opacity: 1;*/
- }
- .ffb-header__button.action-add-element {
- background-position: -8px -8px;
- }
- .ffb-header__button.action-edit-element {
- background-position: -48px -8px;
- }
- .ffb-header__button.action-toggle-context-menu {
- background-position: -88px -8px;
- }
- .ffb-header__button.action-column-bigger {
- background-position: -127px -8px;
- /*width: 23;*/
- }
- .ffb-header__button.action-column-smaller {
- background-position: -169px -8px;
- /*width: 23;*/
- }
- .ffb-header__button.action-preview-element {
- background-position: -248px -8px;
- position: relative;
- cursor: help;
- }
- .ffb-header__button.action-toggle-collapse {
- background-position: -288px -8px;
- position: relative;
- z-index: 1;
- }
- .ffb-header__button.action-toggle-collapse.action-is-collapsed {
- background-position: -328px -8px;
- position: relative;
- z-index: 1;
- }
- .ffb-header__button.action-add-element:hover {
- background-position: -8px -48px;
- }
- .ffb-header__button.action-edit-element:hover {
- background-position: -48px -48px;
- }
- .ffb-header__button.action-toggle-context-menu:hover {
- background-position: -88px -48px;
- }
- .ffb-header__button.action-column-bigger:hover {
- background-position: -127px -48px;
- /*width: 23;*/
- }
- .ffb-header__button.action-column-smaller:hover {
- background-position: -169px -48px;
- /*width: 23;*/
- }
- .ffb-header__button.action-preview-element:hover {
- background-position: -248px -48px;
- }
- .ffb-header__button.action-toggle-collapse:hover {
- background-position: -288px -48px;
- position: relative;
- z-index: 1;
- }
- .ffb-header__button.action-toggle-collapse.action-is-collapsed:hover {
- background-position: -328px -48px;
- position: relative;
- z-index: 1;
- }
- .ffb-element > .ffb-header .ffb-header__button.action-text-color {
- background-position: 500px 500px;
- }
- .ffb-element.ffb-text-color-dark > .ffb-header .ffb-header__button.action-text-color {
- background-position: -368px -8px;
- }
- .ffb-element.ffb-text-color-dark > .ffb-header .ffb-header__button.action-text-color:hover {
- background-position: -368px -48px;
- }
- .ffb-element.ffb-text-color-light > .ffb-header .ffb-header__button.action-text-color {
- background-position: -408px -8px;
- }
- .ffb-element.ffb-text-color-light > .ffb-header .ffb-header__button.action-text-color:hover {
- background-position: -408px -48px;
- }
- .ffb-element.ffb-text-color-inherit > .ffb-header .ffb-header__button.action-text-color {
- background-position: -448px -8px;
- }
- .ffb-element.ffb-text-color-inherit > .ffb-header .ffb-header__button.action-text-color:hover {
- background-position: -448px -48px;
- }
- .ffb-header__button-preview-content {
- display: none;
- position: absolute;
- z-index: 1;
- bottom: 100%;
- left: 100%;
- margin: 0 0 1px 1px;
- box-shadow: 5px 10px 60px rgba(0,0,0,0.3);
- pointer-events: none;
- }
- .ffb-header__button.action-preview-element:hover .ffb-header__button-preview-content {
- display: block;
- }
- .ffb-header__button-preview-content img {
- display: block;
- height: auto;
- max-width: 380px;
- max-height: 380px;
- }
- .ffb-element:not(.ffb-element-is-hovered):not(:hover) > .ffb-header > .ffb-header__button-right {
- display: none !important;
- }
- .ffb-element:not(:hover) > .ffb-header > .ffb-header__button-right.context-menu-active {
- opacity: 1;
- background-color: #ffffff;
- background-position: -88px -48px;
- }
- .ffb-element:not(.ffb-element-is-hovered):hover .ffb-element:not(:hover) > .ffb-header > .ffb-header__button-right {
- display: none !important;
- }
- /* DO NOT DELETE !!!
- .ffb-element:not(.ffb-element-is-hovered) > .ffb-header > .ffb-header__button-right:not(.context-menu-active) {
- display: none !important;
- }
- .ffb-element:not(.ffb-element-is-hovered) > .ffb-header > .ffb-header__button-right.context-menu-active {
- opacity: 1;
- background-color: #ffffff;
- }
- .ffb-element.ffb-element-is-hovered .ffb-element:not(.ffb-element-is-hovered) > .ffb-header > .ffb-header__button-right:not(.context-menu-active) {
- display: none !important;
- }*/
- body:not(.ffb-canvas-drag-in-progress) .ffb-element-is-hovered {
- box-shadow: 0 0 0 1px #32d316 !important;
- }
- .ffbvr body:not(.ffb-canvas-drag-in-progress) .ffb-element-is-hovered {
- box-shadow: 0 0 0 1px #2eb515 !important;
- }
- /*
- body:not(.ffb-canvas-drag-in-progress) .ffb-element-is-hovered,
- body:not(.ffb-canvas-drag-in-progress) .ffb-element-is-hovered > .ffb-header,
- body:not(.ffb-canvas-drag-in-progress) .ffb-element-is-hovered > .ffb-header > .ffb-header__button {
- border-color: #aaa !important;
- }*/
- body:not(.ffb-canvas-drag-in-progress) .ffb-element-is-hovered {
- border-color: #32d316 !important;
- }
- .ffbvr body:not(.ffb-canvas-drag-in-progress) .ffb-element-is-hovered {
- border-color: #2eb515 !important;
- }
- body:not(.ffb-canvas-drag-in-progress) .ffb-element-is-hovered.ffb-element-is-collapsed > .ffb-header {
- border-bottom-color: #32d316 !important;
- }
- .ffbvr body:not(.ffb-canvas-drag-in-progress) .ffb-element-is-hovered.ffb-element-is-collapsed > .ffb-header {
- border-bottom-color: #2eb515 !important;
- }
- .ffb-element.action-toggle-context-menu-opened > .ffb-header {
- display: block;
- }
- /* ELEMENT COLLAPSING */
- .ffb-element-is-collapsed {
- border-bottom: none;
- }
- .ffb-header__button.action-toggle-collapse {
- display: none;
- }
- /*.ffb-element-section > .ffb-header .ffb-header__button.action-toggle-collapse,
- .ffb-element-section-bootstrap > .ffb-header .ffb-header__button.action-toggle-collapse {
- display: block;
- }
- */
- .ffb-element-dropzone-yes:not(.ffb-element-column) > .ffb-header .ffb-header__button.action-toggle-collapse {
- display: block;
- }
- /* ELEMENT __ NO DROPZONE */
- .ffb-element-dropzone-no .ffb-element-preview {
- background-color: #fafafa;
- cursor: pointer;
- overflow: hidden;
- }
- .ffb-element-dropzone-no .ffb-header {
- position: absolute;
- top: 0;
- right: 0;
- left: 0;
- width: 100%;
- display: none;
- background-color: #f0f0f0;
- }
- .ffb-element-dropzone-no.ffb-element-disabled > .ffb-header {
- z-index: 2; /* needed because of DISABLED element overlay */
- }
- .ffb-element.ffb-element-disabled .ffb-element-dropzone-no.ffb-element-disabled > .ffb-header {
- z-index: auto; /* needed because of DISABLED element overlay */
- }
- .ffb-element-dropzone-no:hover .ffb-header,
- .ffb-element-is-hovered.ffb-element-dropzone-no .ffb-header {
- display: block;
- }
- .ffb-element-dropzone-no .ffb-element-preview {
- padding: 25px 15px 40px 15px;
- text-align: center;
- }
- .ffb-element-dropzone-no .ffb-preview-icon {
- margin: 15px auto 0 auto;
- padding: 0 10px;
- background-color: #fafafa;
- display: inline-block;
- }
- .ffb-element-dropzone-no .ffb-preview-icon-content {
- display: inline-block;
- /*width: 46px;
- height: 46px;
- line-height: 46px;*/
- /*font-size: 20px;*/
- border-radius: 99px;
- /*background-color: #f0f0f0;*/
- text-align: center;
- font-size: 34px;
- line-height: 34px;
- }
- .ffb-element-dropzone-no .ffb-preview-empty {
- margin: 15px auto 0 auto;
- padding: 0 10px;
- background-color: #fafafa;
- display: inline-block;
- }
- .ffb-element-dropzone-no .ffb-preview-empty-content {
- display: inline-block;
- border-radius: 99px;
- text-align: center;
- font-size: 34px;
- line-height: 34px;
- color: #bbbbbb;
- }
- .ffb-element-dropzone-yes > .ffb-element-preview > .ffb-preview-empty {
- display: none;
- }
- .ffb-element-dropzone-no .ffb-preview-heading-lg {
- font-size: 17px;
- line-height: 26px;
- font-weight: 400;
- margin: 15px 0 0 0;
- word-wrap: break-word;
- color: #23282d;
- }
- .ffb-element-dropzone-no .ffb-preview-heading-lg span {
- background-color: #fafafa;
- padding: 0 10px;
- }
- .ffb-element-dropzone-no .ffb-preview-heading-sm + .ffb-preview-heading-lg {
- margin: 0 0 0 0;
- }
- .ffb-element-dropzone-no .ffb-preview-heading-sm {
- font-size: 15px;
- line-height: 26px;
- font-weight: 300;
- margin: 3px 0 0 0;
- word-wrap: break-word;
- color: #23282d;
- }
- .ffb-element-dropzone-no .ffb-preview-heading-sm span {
- background-color: #fafafa;
- padding: 0 10px;
- }
- .ffb-element-dropzone-no .ffb-preview-text {
- font-size: 12px;
- line-height: 19px;
- margin: 6px 0 0 0;
- word-wrap: break-word;
- color: #808080;
- }
- .ffb-element-dropzone-no .ffb-preview-image {
- display:block;
- max-width: 50%;
- max-height: 50px;
- height: auto;
- margin: 10px auto 0 auto;
- }
- .ffb-element-dropzone-no .ffb-preview-divider {
- display:block;
- width: 50%;
- height: 1px;
- margin: 15px auto 0 auto;
- background-color: #23282d;
- }
- .ffb-element-dropzone-no .ffb-preview-icon:first-child + .ffb-preview-divider:last-child {
- margin-top: -23px;
- margin-bottom: 22px;
- }
- .ffb-element-dropzone-no .ffb-preview-heading-lg:first-child + .ffb-preview-divider:last-child {
- margin-top: -12px;
- margin-bottom: 11px;
- }
- .ffb-element-dropzone-no .ffb-preview-button {
- margin: 20px 5px 0 5px;
- background-color: #f0f0f0;
- border-radius: 3px;
- display: inline-block;
- font-weight: 700;
- padding: 8px 15px;
- }
- .ffb-element-dropzone-no .ffb-preview-text + .ffb-preview-heading-lg {
- margin-top: 5px;
- }
- .ffb-element-dropzone-no .ffb-preview-image + .ffb-preview-text {
- margin-top: 15px;
- }
- .ffb-element-dropzone-no .ffb-preview-icon + .ffb-preview-heading-sm {
- margin-top: 15px;
- }
- /* ELEMENT __ DROPZONE */
- .ffb-dropzone {
- min-height: 100px;
- padding: 0 8px 16px 8px;
- }
- .ffb-dropzone-canvas {
- min-height: 0;
- }
- .ffb-dropzone-canvas:empty {
- /*margin-top: -6px;*/
- }
- .ffb-dropzone-canvas:after {
- display: none !important;
- }
- .ffb-dropzone:empty {
- cursor: pointer;
- position: relative;
- }
- .ffb-dropzone:empty:after {
- content: ' ';
- position: absolute;
- top: 50%;
- left: 50%;
- width: 40px;
- height: 40px;
- margin: -20px 0 0 -20px;
- background-image: url('images/ffb-add-inside-dropzone2.png');
- background-repeat: no-repeat;
- background-position: 0 0;
- }
- .ffbvr .ffb-dropzone:empty:after {
- background-image: url('images/ffbvr/ffb-add-inside-dropzone2.png');
- }
- .ffb-dropzone:empty:hover:after {
- background-position: center;
- background-position: 0 -500px;
- }
- .ffb-canvas .ui-sortable-placeholder {
- /*visibility: visible !important;*/
- /*background-color: rgba(91,188,46,0.2) !important;*/
- /*border: 1px dashed rgba(0,0,0,0.2) !important;*/
- /*max-height: 80px;*/
- /*transition: 1s height ease;*/
- /*-webkit-animation: none !important;
- animation: none !important;*/
- width: 100%;
- height: 0;
- position: relative;
- /*padding: 0 !important;
- margin: 0 !important;*/
- }
- .ffb-canvas .ui-sortable-placeholder:after {
- content: ' ';
- display: block;
- position: absolute;
- top: 6px;
- left: 8px;
- width: calc(100% - 16px);
- height: 4px;
- background-color: #32d316;
- }
- .ffbvr .ffb-canvas .ui-sortable-placeholder:after {
- background-color: #2eb515;
- }
- .ffb-element-row > .ffb-dropzone > .ui-sortable-placeholder,
- .ffb-element-section > .ffb-dropzone > .ui-sortable-placeholder {
- width: 0;
- height: 0;
- float: left;
- }
- .ffb-element-row > .ffb-dropzone > .ui-sortable-placeholder:after,
- .ffb-element-section > .ffb-dropzone > .ui-sortable-placeholder:after {
- width: 4px;
- top: 16px;
- left: -2px;
- }
- .ffb-canvas > .ffb-dropzone > .ui-sortable-placeholder:first-child:after,
- .ffb-canvas > .ffb-dropzone > .ui-sortable-placeholder:first-child:after,
- .ffb-canvas > .ffb-dropzone > .ui-sortable-helper:first-child + .ui-sortable-placeholder:after,
- .ffb-canvas > .ffb-dropzone > .ui-sortable-helper:first-child + .ui-sortable-placeholder:after {
- top: -10px;
- }
- .ffb-element-row > .ffb-dropzone > .ui-sortable-placeholder:after,
- .ffb-element-section > .ffb-dropzone > .ui-sortable-placeholder:after {
- height: 127px;
- }
- .ffb-element-row > .ffb-dropzone > .ui-sortable-placeholder:first-child:last-child:after,
- .ffb-element-section > .ffb-dropzone > .ui-sortable-placeholder:first-child:last-child:after,
- .ffb-element-row > .ffb-dropzone > .ui-sortable-helper:first-child + .ui-sortable-placeholder:last-child:after,
- .ffb-element-section > .ffb-dropzone > .ui-sortable-helper:first-child + .ui-sortable-placeholder:last-child:after {
- height: 68px;
- }
- .ffb-canvas .ui-sortable-placeholder--cant-be-dropped {
- background-color: #FFC6C6;
- }
- /* ELEMENT -- SECTION */
- /*.ffb-element-section > .ffb-dropzone {
- padding-right: 32px;
- padding-left: 32px;
- }*/
- /* ELEMENT -- COLUMN */
- .ffb-element-column {
- min-height: 1px;
- position: relative;
- float: left;
- }
- .ffb-element-column-anim-width {
- transition: 0.25s width ease;
- }
- /*
- .ffb-element-column:first-child {
- margin-left: 2%;
- }
- .ffb-element-column:last-child {
- margin-right: 2%;
- }
- */
- .ffb-element-col-1 { width: calc( 8.3% - 16.1px ); }
- .ffb-element-col-2 { width: calc( 16.6% - 16.1px ); }
- .ffb-element-col-3 { width: calc( 25% - 16.1px ); }
- .ffb-element-col-4 { width: calc( 33.3% - 16.1px ); }
- .ffb-element-col-5 { width: calc( 41.6% - 16.1px ); }
- .ffb-element-col-6 { width: calc( 50% - 16.1px ); }
- .ffb-element-col-7 { width: calc( 58.3% - 16.1px ); }
- .ffb-element-col-8 { width: calc( 66.6% - 16.1px ); }
- .ffb-element-col-9 { width: calc( 75% - 16.1px ); }
- .ffb-element-col-10 { width: calc( 83.3% - 16.1px ); }
- .ffb-element-col-11 { width: calc( 91.6% - 16.1px ); }
- .ffb-element-col-12 { width: calc( 100% - 16.1px ); }
- .ffb-element-adding-anim:after,
- .ffb-element-removing-anim:after {
- content: ' ';
- display: block;
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- /*background-color: rgba(250,250,250,0.5);*/
- }
- /*.ffb-element:hover {
- border-color: red;
- }
- .ffb-element:hover .ffb-element:hover {
- border-color: blue;
- }*/
- /* FFB GENERAL TOOLTIP */
- .ffb-tooltip {
- background-color: rgba(0,0,0,0.7) !important;
- color: #ffffff !important;
- margin-top: -8px;
- min-width: 0;
- border-radius: 2px;
- padding: 3px 8px;
- font-size: 11px;
- margin-top: -34px;
- white-space: nowrap;
- position: relative;
- }
- .ffb-tooltip:after {
- content: ' ';
- position: absolute;
- bottom: -10px;
- left: 50%;
- margin-left: -5px;
- border-color: rgba(0,0,0,0.7) transparent transparent transparent;
- border-style: solid;
- border-width: 5px;
- width: 0px;
- height: 0px;
- }
- /* MODAL */
- /* BLUR */
- /* html.ffb-modal-opened #wpcontent,
- html.ffb-modal-opened #adminmenumain,
- html.ffb-modal-opened #wpfooter {
- -webkit-filter: blur(3px);
- -moz-filter: blur(3px);
- filter: blur(3px);
- }
- html.ffb-modal-opened #adminmenuback,
- html.ffb-modal-opened #adminmenuwrap {
- margin-left: -15px;
- padding-left: 15px;
- }*/
- .ffb-modal,
- .ffb-modal * {
- box-sizing: border-box;
- }
- .ffb-modal *::after,
- .ffb-modal *::before {
- box-sizing: border-box;
- }
- .ffb-modal {
- display: none;
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- background-color: rgba(0, 0, 0, 0.5);
- z-index: 99998; /* 1 below wp admin bar */
- }
- .ffb-modal .ffb-modal {
- background-color: rgba(0, 0, 0, 0.25);
- }
- .ffb-modal__vcenter-wrapper {
- display: table;
- width: 100%;
- height: 100%;
- }
- .ffb-modal__vcenter {
- display: table-cell;
- vertical-align: middle;
- width: 100%;
- height: 100%;
- }
- .ffb-modal__box {
- max-width: 1022px;
- height: calc(100% - 80px);
- position: relative;
- margin: 20px auto 0 auto;
- /*box-shadow: 5px 10px 60px rgba(0,0,0,0.3);*/
- box-shadow: 5px 10px 100px rgba(0,0,0,0.4);
- }
- /*.ffb-modal__box .ffb-modal__box {
- box-shadow: 5px 10px 100px rgba(0,0,0,0.4);
- }
- */
- .ffb-modal__header {
- position: absolute;
- top: 0;
- width: 100%;
- background-color: #32d316;
- color: #ffffff;
- text-align: center;
- line-height: 48px;
- border-radius: 3px 3px 0 0;
- }
- .ffbvr .ffb-modal__header {
- background-color: #2eb515;
- }
- .ffb-modal__header .ffb-modal__name {
- padding: 25px 35px 25px 35px;
- font-size: 30px;
- text-align: left;
- font-weight: 400;
- }
- .ffb-modal__header .ffb-modal__name span {
- letter-spacing: 0.5px;
- }
- .ffb-modal__header span {
- float: left;
- }
- .ffb-modal__header-icon-preview,
- .ffb-modal__header-icon-close {
- height: 48px;
- line-height: 48px !important;
- padding: 0 10px;
- text-align: center;
- opacity: 0.6;
- font-size: 28px;
- text-decoration: none;
- color: #ffffff;
- -webkit-box-shadow: none !important;
- -moz-box-shadow: none !important;
- -o-box-shadow: none !important;
- -ms-box-shadow: none !important;
- box-shadow: none !important;
- }
- .ffb-modal__header-icon-preview {
- float: left;
- margin: 0 5px 0 5px;
- position: relative;
- z-index: 3;
- cursor: pointer;
- }
- .ffb-modal__header-icon-preview .ffb-modal__header-icon-preview-content {
- display: none;
- position: absolute;
- top: 100%;
- left: 100%;
- box-shadow: 5px 10px 60px rgba(0,0,0,0.3);
- pointer-events: none;
- }
- .ffb-modal__header-icon-preview:hover .ffb-modal__header-icon-preview-content {
- display: block;
- }
- .ffb-modal__header-icon-preview-content img {
- display: block;
- height: auto;
- max-width: 400px;
- max-height: 300px;
- }
- .ffb-modal__button-image_preview .ffb-modal__header-icon-preview-content {
- display: none;
- position: absolute;
- bottom: 140%;
- left: 0;
- box-shadow: 5px 10px 60px rgba(0,0,0,0.3);
- pointer-events: none;
- }
- .ffb-modal__button-image_preview:hover .ffb-modal__header-icon-preview-content {
- display: block;
- }
- .ffb-modal__button-image_preview .ffb-modal__header-icon-preview-content img {
- display: block;
- height: auto;
- max-width: 400px;
- max-height: 300px;
- }
- .ffb-modal__header-icon-close {
- float: right;
- margin: 0 -15px 0 0;
- display: none !important;
- }
- .ffb-modal__header-icon-close {
- position: relative;
- line-height: 28px !important;
- top: -3px;
- right: -9px;
- }
- .ffb-modal__header-icon-preview:focus,
- .ffb-modal__header-icon-close:focus {
- color: #ffffff;
- opacity: 0.4;
- }
- .ffb-modal__header-icon-preview:hover,
- .ffb-modal__header-icon-close:hover {
- opacity: 1;
- color: #ffffff;
- outline: none;
- }
- .ffb-modal__body {
- position: absolute;
- top: 98px;
- right: 0;
- left: 0;
- bottom: 85px;
- background-color: #ffffff;
- }
- .ffb-modal__footer {
- position: absolute;
- bottom: 0;
- width: 100%;
- background-color: #f5f5f5;
- line-height: 84px;
- text-align: right;
- padding: 0 35px;
- border-top: 1px solid #e5e5e5;
- border-radius: 0 0 3px 3px;
- -webkit-touch-callout: none; /* iOS Safari */
- -webkit-user-select: none; /* Safari */
- -khtml-user-select: none; /* Konqueror HTML */
- -moz-user-select: none; /* Firefox */
- -ms-user-select: none; /* Internet Explorer/Edge */
- user-select: none; /* Non-prefixed version, currently
- supported by Chrome and Opera */
- }
- .ffb-modal__footer .ffb-modal__button-image_preview,
- .ffb-modal__footer .ffb-modal__button-save_all,
- .ffb-modal__footer .ffb-modal__button-save,
- .ffb-modal__footer .ffb-modal__button-cancel {
- -webkit-transition: none !important;
- -moz-transition: none !important;
- -o-transition: none !important;
- -ms-transition: none !important;
- transition: none !important;
- -webkit-box-shadow: none !important;
- -moz-box-shadow: none !important;
- -o-box-shadow: none !important;
- -ms-box-shadow: none !important;
- box-shadow: none !important;
- padding: 12px 28px;
- font-size: 14px;
- -webkit-touch-callout: none; /* iOS Safari */
- -webkit-user-select: none; /* Safari */
- -khtml-user-select: none; /* Konqueror HTML */
- -moz-user-select: none; /* Firefox */
- -ms-user-select: none; /* Internet Explorer/Edge */
- user-select: none; /* Non-prefixed version, currently
- supported by Chrome and Opera */
- }
- .ffb-modal__footer .ffb-modal__button-image_preview {
- display: inline-block;
- line-height: 20px;
- background-color: #ff00aa;
- color: #ffffff;
- text-decoration: none;
- border-radius: 3px;
- font-size: 22px;
- padding-top: 9px;
- padding-bottom: 9px;
- line-height: 26px;
- position: relative;
- min-width: 70px;
- cursor: help;
- float: left;
- margin-top: 20px;
- margin-right: 8px;
- }
- .ffb-modal__footer .ffb-modal__button-image_preview:hover {
- background-color: #ef009a;
- }
- .ffb-modal__footer .ffb-modal__button-image_preview i {
- position: relative;
- top: 1px;
- }
- .ffb-modal__footer .ffb-modal__button-save_all {
- display: inline-block;
- line-height: 20px;
- background-color: #7154fc;
- color: #ffffff;
- text-decoration: none;
- border-radius: 3px;
- float: left;
- margin-top: 20px;
- }
- .ffb-modal__footer .ffb-modal__button-save_all:hover {
- background-color: #6144ec;
- }
- .ffb-modal__footer .ffb-modal__button-save {
- display: inline-block;
- line-height: 20px;
- background-color: #32d316;
- color: #ffffff;
- text-decoration: none;
- border-radius: 3px;
- }
- .ffbvr .ffb-modal__footer .ffb-modal__button-save {
- background-color: #2eb515;
- }
- .ffb-modal__footer .ffb-modal__button-save:hover {
- background-color: #22c306;
- }
- .ffbvr .ffb-modal__footer .ffb-modal__button-save:hover {
- background-color: #1ea505;
- }
- .ffb-modal__footer .ffb-modal__button-cancel {
- display: inline-block;
- line-height: 20px;
- background-color: #888888;
- color: #ffffff;
- text-decoration: none;
- border-radius: 3px;
- margin-left: 4px;
- }
- .ffb-modal__footer .ffb-modal__button-cancel:hover {
- background-color: #777777;
- }
- .ffb-modal__tab-headers {
- background-color: #32d316;
- padding: 0 35px;
- margin-top: -10px;
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
- .ffbvr .ffb-modal__tab-headers {
- background-color: #2eb515;
- }
- .ffb-modal__tab-header {
- padding: 17px 22px;
- margin: 0 8px 0 0;
- cursor: pointer;
- float: left;
- color: #ffffff;
- border-radius: 3px 3px 0 0;
- font-size: 13px;
- font-weight: 600;
- position: relative;
- /*background-color: #22c306;*/
- background-color: rgba(255,255,255,0.15);
- }
- .ffb-modal__tab-header:hover {
- /*background-color: #12b300;*/
- background-color: rgba(255,255,255,0.25);
- }
- .ffb-modal__tab-header.ffb-modal__tab-header--active,
- .ffb-modal__tab-header.ffb-modal__tab-header--active:hover {
- background-color: #ffffff;
- /*color: #12b300;*/
- color: #444444;
- z-index: 1;
- }
- /*.ffb-modal__tab-header--filled.ffb-modal__tab-header--active:before,
- .ffb-modal__tab-header--filled:before {
- content: ' ';
- display: inline-block;
- position: relative;
- top: 1px;
- width: 11px;
- height: 11px;
- border-radius: 99px;
- background-color: #ff00aa;
- margin-right: 7px;
- }*/
- /*
- .ffb-modal__tab-header--filled-global {
- color:red;
- }
- */
- .ffb-modal__tab-header--filled.ffb-modal__tab-header--active:before,
- .ffb-modal__tab-header--filled:before,
- .ffb-modal__tab-header--filled-global.ffb-modal__tab-header--active:after,
- .ffb-modal__tab-header--filled-global:after {
- content: 'EDIT';
- letter-spacing: 0.2px;
- display: block;
- position: absolute;
- top: -8px;
- right: -5px;
- padding: 0 6px;
- height: 16px;
- line-height: 16px;
- text-align: center;
- border-radius: 99px;
- z-index: 1;
- background-color: #ff00aa;
- color: #ffffff;
- font-weight: 500;
- opacity: 0.5;
- font-size: 10px;
- }
- .ffb-modal__tab-header--filled.ffb-modal__tab-header--active:before,
- .ffb-modal__tab-header--filled-global.ffb-modal__tab-header--active:after{
- opacity: 1;
- }
- .ffb-modal__tab-header--filled-global.ffb-modal__tab-header--active:after,
- .ffb-modal__tab-header--filled-global:after {
- /*background-position: -48px -48px;*/
- content: 'GLB';
- background-color: rgba(70,70,255,1);
- }
- .ffb-modal__tab-header--filled.ffb-modal__tab-header--filled-global.ffb-modal__tab-header--active:before,
- .ffb-modal__tab-header--filled.ffb-modal__tab-header--filled-global:before {
- right: 31px;
- }
- .ffb-modal__tab-header--filled.ffb-modal__tab-header--active,
- .ffb-modal__tab-header--filled.ffb-modal__tab-header--active:hover {
- /*color: #ff00aa;*/
- /*color: #444444;*/
- /*box-shadow: inset 0 3px 0 0 #ff00aa;*/
- }
- /*
- .ffb-modal__tab-header--filled.ffb-modal__tab-header--active,
- .ffb-modal__tab-header--filled.ffb-modal__tab-header--active:hover {
- color: #ff00aa;
- }
- .ffb-modal__tab-header--filled {
- background-color: #ff00aa;
- }
- .ffb-modal__tab-header--filled:hover {
- background-color: #ef009a;
- }
- */
- .ffb-modal__tab-header:last-child {
- margin-right: 0;
- }
- .ffb-modal__tab-header[data-tab-header-name="Styles"]:not(:first-child) {
- margin-left: 16px;
- }
- .ffb-modal__tab-header[data-tab-header-name="Styles"] {
- margin-right: 24px;
- }
- .ffb-modal__tab-content {
- display: none;
- }
- .ffb-modal__tab-content.ffb-modal__tab-content--active {
- display: block;
- }
- .ffb-modal__content--options {
- padding: 15px 0 0 0;
- overflow-y: auto;
- overflow-x: hidden;
- position: absolute;
- top: 42px;
- right: 0;
- bottom: 0;
- left: 0;
- }
- .ffb-modal__content--options:after {
- content: ' ';
- display: block;
- width: 100%;
- height: 40px;
- }
- .ffb-modal__content-system > .ffb-modal__content--options {
- top: 113px;
- }
- .ffb-modal__hide-global-styles .ffb-modal__content-system > .ffb-modal__content--options
- {
- top: 42px;
- }
- .ffb-modal .ff-repeatable-header .ff-popup-container {
- top: 28px !important;
- }
- .ffb-modal .ffb-modal__tab-content[data-id="st"] .ffb-modal__content--options {
- top:42px;
- }
- .ffb-modal .ffb-modal__tab-content[data-id="st"] .ffb-gl-switcher-holder {
- display:none;
- }
- /* INSTANCE/GLOBAL */
- .ffb-modal__content-system > .ffb-gl-switcher-holder {
- border-bottom: 1px solid #e5e5e5;
- padding: 17px 31px 0 31px;
- text-align: left;
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
- .ffb-modal__global-styles .ffb-modal__content-system .ffb-gl-switcher-holder {
- display:none;
- }
- .ffb-modal__global-styles .ffb-modal__content--options {
- top:42px;
- }
- .ffb-modal__content-system > .ffb-gl-switcher-holder .ffb-switch-to {
- display: inline-block;
- text-align: center;
- font-size: 13px;
- font-weight: 600;
- margin: 0 4px -1px 4px;
- padding: 17px 44px; /*17px 44px*/
- background-color: #f9f9f9;
- border: 1px solid transparent;
- border-bottom-color: #e5e5e5;
- /*color: #919191;*/
- cursor: pointer;
- }
- .ffb-modal__content-system > .ffb-gl-switcher-holder .ffb-switch-to:hover {
- /*color: #444444;*/
- background-color: #f4f4f4;
- }
- .ffb-modal__content-system > .ffb-gl-switcher-holder .ffb-switch-to--active {
- background-color: #ffffff !important;
- border: 1px solid #e5e5e5;
- border-top-color: #e5e5e5;
- border-right-color: #e5e5e5;
- border-bottom-color: #ffffff;
- border-left-color: #e5e5e5;
- border-radius: 3px 3px 0 0;
- color: #444444 !important;
- }
- .ffb-modal__content-system > .ffb-save-bar {
- position: absolute;
- bottom: 0;
- }
- .ffb-modal__content-system > .ffb-save-bar {
- width: 100%;
- height: 0;
- }
- .ffb-modal__content-system > .ffb-save-bar .ffb-save-bar-btn {
- display: inline-block;
- text-align: center;
- line-height: 20px;
- background-color: #888888;
- color: #ffffff;
- text-decoration: none;
- border-radius: 3px;
- margin: 15px;
- padding: 12px 28px;
- font-size: 14px;
- cursor: pointer;
- position: absolute;
- bottom: 10px;
- }
- .ffb-modal__content-system > .ffb-save-bar .ffb-save-bar-btn:hover {
- background-color: #777777;
- }
- .ffb-modal__content-system > .ffb-save-bar .ffb-save-global-button {
- background-color: #7154fc;
- left: 20px;
- }
- .ffb-modal__content-system > .ffb-save-bar .ffb-save-global-button:hover {
- background-color: #6144ec;
- }
- .ffb-modal__content-system > .ffb-save-bar .ffb-cancel-global-button {
- right: 20px;
- }
- /* MOVE INTO JAVASCRIPT */
- .action-column-bigger,
- .action-column-smaller {
- display: none;
- }
- .ffb-element-column > .ffb-header .action-column-bigger,
- .ffb-element-column > .ffb-header .action-column-smaller {
- display: block;
- }
- .ffb-element-section > .ffb-element-preview,
- .ffb-element-row > .ffb-element-preview,
- .ffb-element-column > .ffb-element-preview {
- display: none;
- }
- .action-add-element {
- /*display: none;*/
- }
- .ffb-element-section > .ffb-header .action-add-element,
- .ffb-element-container > .ffb-header .action-add-element,
- .ffb-element-row > .ffb-header .action-add-element,
- .ffb-element-column > .ffb-header .action-add-element {
- display: block;
- }
- /* FILTERABLE LIBRARY */
- .ffb-filterable-library {
- overflow: hidden;
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- }
- /*
- .ffb-filterable-library:before {
- content: '';
- display: block;
- width: 30%;
- height: 100%;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- background-color: #fafafa;
- border-right: 1px solid #dddddd;
- left: 1px;
- }*/
- .ffb-filterable-library ul,
- .ffb-filterable-library li {
- list-style: none;
- padding: 0;
- margin: 0;
- }
- ul.ffb-filterable-library__filters {
- width: 280px;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- overflow-y: auto;
- overflow-x: hidden;
- padding: 26px 0 26px 0;
- background-color: #ffffff;
- }
- ul.ffb-filterable-library__filters:after {
- content: ' ';
- float: left;
- width: 100%;
- height: 60px;
- display: none;
- }
- ul.ffb-filterable-library__filters li {
- background-color: #ffffff;
- /*border-bottom: 1px solid #dddddd;*/
- cursor: pointer;
- font-weight: 500;
- padding: 6px 10px 6px 44px;
- /*font-size: 14px;*/
- }
- ul.ffb-filterable-library__filters li:first-child {
- /*border-top: 1px solid #dddddd;*/
- }
- ul.ffb-filterable-library__filters li:hover{
- background-color: #f5f5f5;
- border-right: none;
- }
- ul.ffb-filterable-library__filters li.ffb-filterable-library__filter--active {
- background-color: #32d316;
- color: #ffffff;
- border-right: none;
- }
- .ffbvr ul.ffb-filterable-library__filters li.ffb-filterable-library__filter--active {
- background-color: #2eb515;
- }
- .ffb-filterable-library__top-bar {
- width: calc(100% - 280px);
- height: 76px;
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- z-index: 1;
- border-left: 1px solid #dddddd;
- border-bottom: 1px solid rgba(0,0,0,0.1) !important
- }
- input.ffb-filterable-library__search {
- -webkit-box-shadow: none !important;
- -moz-box-shadow: none !important;
- -o-box-shadow: none !important;
- -ms-box-shadow: none !important;
- box-shadow: none !important;
- width: 100%;
- height: 74px;
- line-height: 74px !important;
- padding: 0 34px;
- margin: 0;
- font-size: 24px !important;
- font-weight: 300;
- border: none;
- /*border-bottom: 1px solid #dddddd;*/
- /*color: #999999;*/
- }
- input.ffb-filterable-library__search:focus {
- border-color: #dddddd;
- }
- input.ffb-filterable-library__search::-webkit-input-placeholder {
- color: #aaaaaa;
- }
- input.ffb-filterable-library__search::-moz-placeholder {
- color: #aaaaaa;
- opacity: 1;
- }
- input.ffb-filterable-library__search:-ms-input-placeholder {
- color: #aaaaaa;
- }
- .ffb-filterable-library__content {
- background: #fafafa;
- width: calc(100% - 280px);
- position: absolute;
- top: 75px;
- bottom: 0;
- right: 0;
- padding: 15px;
- overflow-y: auto;
- overflow-x: hidden;
- border-left: 1px solid #dddddd;
- }
- .ffb-filterable-library__content:after {
- content: ' ';
- float: left;
- width: 100%;
- height: 60px;
- }
- .ffb-filterable-library__content .ffb-flib-item {
- /*float: left;*/
- display: inline-block;
- vertical-align: top;
- width: calc(25% - 40px);
- text-align: center;
- margin: 20px;
- cursor: pointer;
- font-size: 16px;
- line-height: 30px;
- }
- .ffb-filterable-library__content .ffb-flib-item:hover {
- color: #22c306;
- }
- .ffbvr .ffb-filterable-library__content .ffb-flib-item:hover {
- color: #1ea505;
- }
- .ffb-filterable-library__content .ffb-flib-item.ffb-flib--width-0 {
- width: calc(20% - 40px);
- }
- .ffb-filterable-library__content .ffb-flib-item.ffb-flib--width-2 {
- width: calc(50% - 40px);
- }
- .ffb-filterable-library__content .ffb-flib-item.ffb-flib--width-3 {
- width: calc(75% - 40px);
- }
- .ffb-filterable-library__content .ffb-flib-item.ffb-flib--width-4 {
- width: calc(100% - 40px);
- }
- .ffb-filterable-library__content .ffb-flib-item[data-type="section"] {
- width: calc(50% - 40px);
- }
- .ffb-filterable-library__content .ffb-flib-item img {
- width:100%;
- height: auto;
- display: block;
- border: 4px solid #ffffff;
- box-shadow: 0px 2px 7px rgba(0,0,0,0.15);
- /*border-radius: 2px;*/
- margin: 0 0 14px 0;
- }
- .ffb-filterable-library__content .ffb-flib-item:hover img {
- border-color: #32d316;
- }
- .ffbvr .ffb-filterable-library__content .ffb-flib-item:hover img {
- border-color: #2eb515;
- }
- /* FF OPTIONS STYLE OVERWRITE */
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header .ff-repeatable-title {
- font-size: 12px;
- padding: 7px 10px 6px 10px;
- cursor: pointer;
- }
- .ffb-options .form-table,
- .ffb-options .form-table td,
- .ffb-options .form-table td p,
- .ffb-options .form-table th,
- .ffb-options .form-wrap label {
- font-size: 12px;
- }
- .ffb-options .column-title{
- font-size: 13px;
- margin-top: 5px;
- }
- .ffb-options input,
- .ffb-options select,
- .ffb-options textarea {
- font-size: 12px;
- -webkit-border-radius: 0px !important;
- border-radius: 0px !important;
- }
- /*
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-controls-top > .ff-repeatable-add-above,
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-controls-bottom > .ff-repeatable-add-below {
- display: none;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item:last-child > .ff-repeatable-controls-bottom > .ff-repeatable-add-below {
- display: block;
- }
- .ffb-options .ff-repeatable-boxed {
- -webkit-box-shadow: none !important;
- -moz-box-shadow: none !important;
- -o-box-shadow: none !important;
- -ms-box-shadow: none !important;
- box-shadow: none !important;
- background-color: #f5f5f5;
- padding: 20px 20px 60px 20px;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-header {
- -webkit-box-shadow: none !important;
- -moz-box-shadow: none !important;
- -o-box-shadow: none !important;
- -ms-box-shadow: none !important;
- box-shadow: none !important;
- background-color: #fafafa !important;
- border: 1px solid #dddddd !important;;
- margin: 0 !important;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-content {
- -webkit-box-shadow: none !important;
- -moz-box-shadow: none !important;
- -o-box-shadow: none !important;
- -ms-box-shadow: none !important;
- box-shadow: none !important;
- background-color: #ffffff !important;
- border: 1px solid #dddddd !important;
- border-top: none !important;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-item {
- -webkit-box-shadow: none !important;
- -moz-box-shadow: none !important;
- -o-box-shadow: none !important;
- -ms-box-shadow: none !important;
- box-shadow: none !important;
- margin: 0 0 15px 0 !important;
- }
- */
- .ffb-options .form-table {
- margin: 0;
- padding: 0;
- }
- .ffb-options .form-table th {
- width: 220px;
- /*padding: 30px 0 35px 50px;*/
- padding: 40px 0 40px 60px;
- font-size: 13px !important;
- line-height: 1.5;
- /*font-weight: 100;*/
- }
- .ffb-options .form-table td {
- /*padding: 21px 50px 35px 50px;*/
- padding: 31px 60px 31px 60px;
- }
- .ffb-options .form-table tr {
- border-bottom: 1px solid #eeeeee;
- }
- .ffb-options .form-table tr:last-child {
- border-bottom: none;
- }
- .ffb-options select,
- .ffb-options input[type='text'],
- .ffb-options input[type='number'],
- .ffb-options textarea {
- min-width: 190px;
- margin-right: 6px;
- margin-left: 0;
- line-height: 20px;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle,
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-settings,
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-show-advanced-tools {
- border-left: 1px solid #dddddd;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-show-advanced-tools {
- cursor: pointer;
- position: absolute;
- top: 0;
- color: #aaaaaa;
- height: 43px;
- line-height: 43px;
- margin: 0;
- padding: 0;
- right: 60px;
- font-size: 18px;
- width: 26px;
- }
- .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header:hover > .ff-repeatable-handle {
- color: #aaaaaa;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle {
- right: 0;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle:after {
- position: relative;
- left: -1px;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-settings {
- right: 0px;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-settings:after {
- position: relative;
- left: -1px;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-show-advanced-tools {
- right: 29px;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-show-advanced-tools:after {
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle:hover,
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-settings:hover,
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-show-advanced-tools:hover {
- background-color: #ffffff;
- color: #000000;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle,
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle:before,
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle:after,
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-settings,
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-settings:before,
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-settings:after,
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-show-advanced-tools,
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-settings:before,
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-settings:after {
- width: 28px;
- height: 28px;
- line-height: 28px;
- font-size: 14px;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle,
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle:before,
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle:after {
- font-size: 24px;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header .ff-repeatable-title {
- line-height: 15px;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle,
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-settings,
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-show-advanced-tools {
- display: none;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item:hover > .ff-repeatable-header > .ff-repeatable-handle,
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item:hover > .ff-repeatable-header > .ff-repeatable-settings,
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item:hover > .ff-repeatable-header > .ff-show-advanced-tools {
- display: block;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-show-advanced-tools--active {
- display: block;
- /*background-color: #ffc107;*/
- color: #32d316 !important;
- /*border-color: transparent;*/
- background-position: -46px -86px !important;
- }
- .ffbvr .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-show-advanced-tools--active {
- color: #2eb515 !important;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item:not(:hover) > .ff-repeatable-header > .ff-show-advanced-tools--active {
- /*right: 0;*/
- /*box-shadow: 1px 0 0 0 #dddddd; NOLINES */
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle {
- right: auto;
- border-left: none !important;
- border-right: 1px solid #dddddd;
- display: block;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header .ff-repeatable-title {
- position: relative;
- left: 29px;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle,
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-settings,
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-show-advanced-tools {
- background-image: url('images/ffb-header-icons5.png');
- background-repeat: no-repeat;
- }
- .ffbvr .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle,
- .ffbvr .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-settings,
- .ffbvr .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-show-advanced-tools {
- background-image: url('images/ffbvr/ffb-header-icons5.png');
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle:before,
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle:after,
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-settings:before,
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-settings:after,
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-show-advanced-tools:before,
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-show-advanced-tools:after {
- display: none;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-show-advanced-tools {
- background-position: -46px -6px;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-settings {
- background-position: -86px -6px;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle {
- background-position: -286px -6px;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item-closed > .ff-repeatable-header > .ff-repeatable-handle {
- background-position: -326px -6px;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-show-advanced-tools:hover {
- background-position: -46px -46px;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-settings:hover {
- background-position: -86px -46px;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle:hover {
- background-position: -286px -46px;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item-closed > .ff-repeatable-header > .ff-repeatable-handle:hover {
- background-position: -326px -46px;
- }
- .ffb-options .ff-repeatable-handle,
- .ffb-options .ff-repeatable-settings,
- .ffb-options .ff-show-advanced-tools {
- border-left: none !important;
- border-right: none !important;
- }
- .ffb-options .ff-popup-backdrop {
- cursor: default;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-header {
- }
- /*
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item.ui-sortable-helper.ff-repeatable-item-closed > .ff-repeatable-header {
- margin: 0;
- -webkit-box-shadow: none !important;
- -moz-box-shadow: none !important;
- -o-box-shadow: none !important;
- -ms-box-shadow: none !important;
- box-shadow: none !important;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item.ui-sortable-helper.ff-repeatable-item-opened {
- -webkit-box-shadow: none !important;
- -moz-box-shadow: none !important;
- -o-box-shadow: none !important;
- -ms-box-shadow: none !important;
- box-shadow: none !important;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item.ui-sortable-helper.ff-repeatable-item-opened > .ff-repeatable-header {
- margin: 0;
- -webkit-box-shadow: none !important;
- -moz-box-shadow: none !important;
- -o-box-shadow: none !important;
- -ms-box-shadow: none !important;
- box-shadow: none !important;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-controls-bottom {
- top: 105%;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-controls-bottom > .ff-repeatable-add-below {
- border-radius: 5px;
- background-color: #ddd;
- width: 30px;
- height: 30px;
- line-height: 30px;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-controls-bottom > .ff-repeatable-add-below:before {
- content: '\f132';
- -moz-osx-font-smoothing: grayscale;
- display: inline-block;
- font-family: 'dashicons';
- font-size: 20px;
- font-style: normal;
- font-weight: 400;
- height: 20px;
- line-height: 1;
- text-align: center;
- text-decoration: inherit;
- vertical-align: top;
- width: 20px;
- background: none;
- border-radius: 0;
- position: static !important;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-controls-bottom > .ff-repeatable-add-below:after {
- display: none;
- }
- */
- .ffb-options p.description code {
- padding: 1px 6px;
- font-size: 11px;
- font-style: normal;
- }
- .ffb-options input.input-short {
- width: 80px;
- max-width: auto;
- min-width: 0;
- }
- .ffb-options select.select-short {
- width: 80px;
- max-width: auto;
- min-width: 0;
- }
- .ffb-options input::-webkit-input-placeholder {
- color: #aaaaaa;
- }
- .ffb-options input::-moz-placeholder {
- color: #aaaaaa;
- opacity: 1;
- }
- .ffb-options input:-ms-input-placeholder {
- color: #aaaaaa;
- }
- .ffb-options table.ffb-box-model-table th {
- }
- .ffb-options table.ffb-box-model-table td {
- border: none;
- }
- .ffb-options table.ffb-box-model-table th,
- .ffb-options table.ffb-box-model-table td {
- padding: 2px 3px;
- }
- .ffb-options table.ffb-box-model-table input,
- .ffb-options table.ffb-box-model-table select {
- width: 120px;
- height: 28px;
- }
- .ffb-options table.ffb-box-model-table input,
- .ffb-options table.ffb-box-model-table select,
- .ffb-options table.ffb-box-model-table label {
- margin: 0 !important;
- }
- .ffb-options .ff-open-icon-library-button-wrapper,
- .ffb-options .ff-open-image-library-button-wrapper {
- display: inline-block;
- position: relative;
- }
- .ffb-options .ff-open-icon-library-button-wrapper .ff-open-library-remove,
- .ffb-options .ff-open-icon-library-button-wrapper-new .ff-open-library-remove{
- top: 5px;
- left: -26px;
- }
- .ffb-options .ff-open-image-library-button-wrapper .ff-open-library-remove,
- .ffb-options .ff-open-image-library-button-wrapper-new .ff-open-library-remove{
- top: -1px;
- left: -26px;
- }
- .ffb-options a.ff-open-library-button.ff-open-library-icon-button{
- vertical-align: middle;
- margin: 4px 6px 4px 0;
- }
- .ffb-options .ff-open-library-button-preview,
- .ffb-options .ff-open-library-button-title {
- height: 28px;
- }
- .ffb-options .ff-open-library-remove {
- position: absolute;
- top: 26px;
- left: -1px;
- padding-right: 3px;
- visibility: visible !important;
- opacity: 0;
- }
- .ffb-options .ff-open-image-library-button-wrapper .ff-open-library-remove:before {
- margin-top: 6px;
- }
- .ffb-options .ff-open-icon-library-button-wrapper:hover .ff-open-library-remove,
- .ffb-options .ff-open-library-button-wrapper:hover .ff-open-library-remove {
- opacity: 1;
- }
- /* ADVANCED SETTINGS MODAL */
- .ffb-modal-nested {
- display:none;
- }
- .ffb-options .ff-repeatable-item-closed__open-popup > .ff-repeatable-content {
- height: 0px;
- padding: 0;
- display: block !important;
- overflow: hidden;
- }
- .ffb-options .ff-advanced-options .ffb-modal__box {
- height: calc(100% - 80px);
- position: relative;
- left: 1.618%;
- top: -1%;
- }
- .ffb-options .ffb-modal-opener-button {
- display: none;
- }
- #post-body-content {
- /*height:0px;*/
- /*visibility:hidden;*/
- /*overflow:hidden;*/
- }
- /*
- #wp-content-editor-container {
- max-height: 200px;
- overflow: hidden;
- }*/
- /****************************************************************************************************************/
- /****************************************************************************************************************/
- /****************************************************************************************************************/
- /* COLOR PICKER WITH LIB */
- /****************************************************************************************************************/
- /****************************************************************************************************************/
- /****************************************************************************************************************/
- .qtip {
- border: none;
- max-width: 100%;
- }
- .qtip-modal {
- background-color: transparent;
- position: fixed; /* does not work on ubuntu without being fixed! was absolute before btw */
- }
- #qtip-overlay {
- position: fixed;
- }
- #qtip-overlay .qtip-overlay-minimal {
- background: none;
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- }
- .fftm__option-type--color-picker {
- display: inline-block;
- position: relative;
- vertical-align: middle;
- margin-left: -26px;
- margin-right: 12px;
- }
- .fftm__option-type--color-picker__select {
- width: 28px;
- height: 28px;
- line-height: 28px;
- font-size: 14px;
- font-weight: 700;
- text-align: center;
- background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==');
- background-position: 1px 1px;
- border-radius: 99px;
- cursor: pointer;
- float: right;
- margin: 1px 0 0 0;
- /*margin: 8px 0 18px 0;*/
- }
- .fftm__option-type--color-picker__select:hover {
- box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3);
- }
- .fftm__option-type--color-picker__label {
- cursor: default;
- }
- .ffb-options .form-table td fieldset label.fftm__option-type--color-picker__label {
- margin-top: 3px !important;
- margin-bottom: 5px !important;
- line-height: 22px;
- }
- .fftm__option-type--color-picker__select-preview-color {
- background: rgba(247,247,248,1);
- width: 100%;
- height: 100%;
- overflow: hidden;
- border-radius: 99px;
- box-shadow: inset 0 0 0 1px rgba(0,0,0,0.20111);
- }
- .fftm__option-type--color-picker__select .fftm__option-type--color-picker__window {
- display: none;
- }
- .fftm__option-type--color-picker__window {
- width: 588px;
- height: 349px;
- background: #ffffff;
- box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.31123);
- font-size: 12px;
- color: #424258;
- position: relative;
- left: -15px; /* because of reset div */
- }
- .fftm__option-type--color-picker--library-color-is-active:not(.fftm__option-type--color-picker--library-color-is-locked) + .fftm__option-type--color-picker__window-spacer {
- /* this will help with position calculation of the modal because the modal would otherwise have different size if you had the color library shown or hidden */
- width: 100%;
- height: 42px;
- }
- .fftm__option-type--color-picker__window .sp-container {
- border: none;
- background: none;
- overflow: visible;
- padding-top: 4px;
- }
- /*.fftm__option-type--color-picker__window .sp-container,
- .fftm__option-type--color-picker__window .sp-container * {
- box-sizing: border-box;aaaaaaaaaa
- }*/
- .fftm__option-type--color-picker__window .sp-dragger {
- background: none;
- box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px #000000;
- border: none;
- margin: 5px 0 0 5px;
- width: 10px;
- height: 10px;
- border-radius: 99px;
- cursor: pointer;
- }
- .fftm__option-type--color-picker__window .sp-color,
- .fftm__option-type--color-picker__window .sp-hue,
- .fftm__option-type--color-picker__window .sp-clear,
- .fftm__option-type--color-picker__window .sp-alpha-inner,
- .fftm__option-type--color-picker__window .sp-initial {
- border: none;
- }
- .fftm__option-type--color-picker__window .sp-val,
- .fftm__option-type--color-picker__window .sp-hue,
- .fftm__option-type--color-picker__window .sp-clear,
- .fftm__option-type--color-picker__window .sp-alpha-inner {
- box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
- }
- .fftm__option-type--color-picker__window .sp-picker-container {
- border: none;
- width: 212px;
- padding-top: 6px;
- }
- .fftm__option-type--color-picker__window .sp-picker-container,
- .sp-palette-container .fftm__option-type--color-picker__window {
- margin-bottom: 0;
- padding-bottom: 0;
- }
- .sp-initial span {
- width: 32px;
- height: 32px;
- }
- .sp-initial .sp-palette-row-initial span:first-child > span {
- box-shadow: inset 0px 1px 0 0px rgba(0,0,0,0.220111), inset 0px -1px 0 0px rgba(0,0,0,0.220111), inset 1px 0 0 0px rgba(0,0,0,0.220111);
- }
- .sp-initial .sp-palette-row-initial span:last-child > span {
- box-shadow: inset 0px 1px 0 0px rgba(0,0,0,0.220111), inset 0px -1px 0 0px rgba(0,0,0,0.220111), inset -1px 0 0 0px rgba(0,0,0,0.220111);
- }
- .sp-input-container {
- width: 121px;
- }
- .fftm__option-type--color-picker__window .sp-alpha-handle {
- background: #ffffff;
- opacity: 1;
- border: 1px solid rgba(0,0,0,0.9);
- box-shadow: 0 1px 2px 0 rgba(0,0,0,0.25);
- border-radius: 3px;
- width: 4px;
- margin-left: -1px;
- cursor: pointer;
- }
- /*
- .fftm__option-type--color-picker__window .sp-initial:after {
- content: ' ';
- position: absolute;
- top: 0;
- }*/
- .fftm__option-type--color-picker__window .sp-slider {
- background: #ffffff;
- opacity: 1;
- border: 1px solid rgba(0,0,0,0.9);
- box-shadow: 0 1px 2px 0 rgba(0,0,0,0.25);
- border-radius: 3px;
- height: 4px;
- cursor: pointer;
- margin-top: 1px;
- }
- .fftm__option-type--color-picker__window .sp-alpha {
- background-position: -2px -2px;
- }
- .fftm__option-type--color-picker__window .sp-input {
- border: 1px solid #dddddd;
- border-radius: 0;
- line-height: 22px;
- padding: 4px 7px;
- /*font-size: 11px !important;*/
- font-family: 'Open Sans', sans-serif;
- }
- .fftm__option-type--color-picker__window .sp-input:focus {
- border-color: #b4b4b8;
- }
- .fftm__option-type--color-picker__window .sp-thumb-el:not(.sp-thumb-active) .sp-thumb-inner {
- cursor: pointer;
- }
- .fftm__option-type--color-picker__window .sp-container {
- float: left;
- }
- .fftm__option-type--color-picker__window .sp-button-container {
- display: none;
- }
- .sp-thumb-el .sp-thumb-inner:hover:before,
- .sp-thumb-el .sp-thumb-inner:hover:after {
- content: ' ';
- display: block;
- position: absolute;
- top: -220px;
- right: -537px;
- bottom: -1px;
- left: 212px;
- }
- .sp-thumb-el .sp-thumb-inner:hover:before {
- background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==');
- background-repeat: repeat;
- }
- .sp-thumb-el .sp-thumb-inner:hover:after {
- background-color: inherit;
- }
- .sp-thumb-el:last-child .sp-thumb-inner:hover:before,
- .sp-thumb-el:last-child .sp-thumb-inner:hover:after {
- right: -505px;
- left: 180px;
- }
- .fftm__option-type--color-picker__library-tabs {
- border-left: 1px solid #d3d3d3;
- float: right;
- padding: 15px 6px 0 6px;
- text-align: center;
- /*height: 40px;*/
- }
- .fftm__option-type--color-picker__picker-tabs {
- float: left;
- width: 212px;
- text-align: center;
- padding: 10px 10px 0 10px;
- background-color: #f5f5f5;
- box-shadow: 0 -1px 0 0 #d3d3d3 inset;
- }
- .fftm__option-type--color-picker__picker-tab {
- display: block;
- padding: 12px 0;
- width: 50%;
- font-size: 12px;
- float: left;
- /*height: 26px;*/
- }
- .fftm__option-type--color-picker__picker-tab__picker {
- border-radius: 3px 3px 0 0;
- border: 1px solid #d3d3d3;
- }
- .fftm__option-type--color-picker__picker-tab__palette {
- border-radius: 3px 3px 0 0;
- border: 1px solid #d3d3d3;
- }
- .fftm__option-type--color-picker__picker-tab--active--picker .fftm__option-type--color-picker__picker-tab__picker {
- background-color: #ffffff;
- color: #424258;
- cursor: default;
- font-weight: 700;
- border-bottom-color: transparent;
- }
- .fftm__option-type--color-picker__picker-tab--active--picker .fftm__option-type--color-picker__picker-tab__palette {
- /*background-color: #f1f1f1;*/
- color: #666666;
- cursor: pointer;
- border-top-color: transparent;
- border-right-color: transparent;
- border-left-color: transparent;
- }
- .fftm__option-type--color-picker__picker-tab--active--palette .fftm__option-type--color-picker__picker-tab__picker {
- /*background-color: #f1f1f1;*/
- color: #666666;
- cursor: pointer;
- border-top-color: transparent;
- border-right-color: transparent;
- border-left-color: transparent;
- }
- .fftm__option-type--color-picker__picker-tab--active--palette .fftm__option-type--color-picker__picker-tab__palette {
- background-color: #ffffff;
- color: #424258;
- cursor: default;
- font-weight: 700;
- border-bottom-color: transparent;
- }
- .fftm__option-type--color-picker__palette {
- position: absolute;
- top: 64px;
- left: 10px;
- width: 192px;
- height: 176px;
- z-index: 9999995;
- }
- .fftm__option-type--color-picker__palette-color {
- float: left;
- width: 38.4px;
- height: 44px;
- margin: 0;
- cursor: pointer;
- box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
- }
- .fftm__option-type--color-picker__palette-color:nth-child(1) {
- box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.15) inset;
- }
- .fftm__option-type--color-picker__palette-color:nth-child(2),
- .fftm__option-type--color-picker__palette-color:nth-child(3),
- .fftm__option-type--color-picker__palette-color:nth-child(4) {
- box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15) inset;
- }
- .fftm__option-type--color-picker__palette-color:nth-child(5) {
- box-shadow: -1px 1px 0 0 rgba(0, 0, 0, 0.15) inset;
- }
- .fftm__option-type--color-picker__palette-color:nth-child(6),
- .fftm__option-type--color-picker__palette-color:nth-child(11) {
- box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.15) inset;
- }
- .fftm__option-type--color-picker__palette-color:nth-child(10),
- .fftm__option-type--color-picker__palette-color:nth-child(15) {
- box-shadow: -1px 0 0 0 rgba(0, 0, 0, 0.15) inset;
- }
- .fftm__option-type--color-picker__palette-color:nth-child(16) {
- box-shadow: 1px -1px 0 0 rgba(0, 0, 0, 0.15) inset;
- }
- .fftm__option-type--color-picker__palette-color:nth-child(17),
- .fftm__option-type--color-picker__palette-color:nth-child(18),
- .fftm__option-type--color-picker__palette-color:nth-child(19) {
- box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.15) inset;
- }
- .fftm__option-type--color-picker__palette-color:nth-child(20) {
- box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.15) inset;
- }
- .fftm__option-type--color-picker__palette-color:hover {
- transform: scale(1.2);
- transition: 0.15s transform ease, 0.15s box-shadow ease;
- box-shadow: 0 1px 12px rgba(0, 0, 0, 0.2);
- }
- .fftm__option-type--color-picker__picker-tab--active--picker .sp-top {
- visibility: visible;
- }
- .fftm__option-type--color-picker__picker-tab--active--picker .fftm__option-type--color-picker__palette {
- visibility: hidden;
- }
- .fftm__option-type--color-picker__picker-tab--active--palette .sp-top {
- visibility: hidden;
- }
- .fftm__option-type--color-picker__picker-tab--active--palette .fftm__option-type--color-picker__palette {
- visibility: visible;
- }
- .fftm__option-type--color-picker__library {
- padding: 10px 5px 10px 10px;
- border-left: 1px solid #d3d3d3;
- float: right;
- height: 235px;
- position: relative;
- }
- .fftm__option-type--color-picker__library:after {
- background-color: rgba(255,255,255,1);
- content: ' ';
- display: block;
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- }
- .fftm__option-type--color-picker--library-color-is-active:not(.fftm__option-type--color-picker--library-color-is-locked) .fftm__option-type--color-picker__library:after {
- display: none;
- }
- .fftm__option-type--color-picker--library-color-is-active:not(.fftm__option-type--color-picker--library-color-is-locked) .fftm__option-type--color-picker__no-library-text {
- display: none;
- }
- .fftm__option-type--color-picker--library-color-is-active:not(.fftm__option-type--color-picker--library-color-is-locked) .fftm__option-type--color-picker__library-color-position,
- .fftm__option-type--color-picker--library-color-is-active:not(.fftm__option-type--color-picker--library-color-is-locked) .fftm__option-type--color-picker__library-color-name {
- display: block;
- }
- .fftm__option-type--color-picker__library-tabs label {
- position: relative;
- top: 108px;
- z-index: 1;
- padding: 9px 12px 11px 12px;
- display: inline-block;
- }
- .fftm__option-type--color-picker--library-color-is-active:not(.fftm__option-type--color-picker--library-color-is-locked) .fftm__option-type--color-picker__library-tabs label {
- position: static;
- top: auto;
- font-size: 13px;
- }
- .fftm__option-type--color-picker__library,
- .fftm__option-type--color-picker__library-tabs {
- width: 376px;
- }
- .fftm__option-type--color-picker__library-colors {
- margin: 5px 0 0 -2px;
- visibility: hidden;
- }
- .fftm__option-type--color-picker--library-color-is-active:not(.fftm__option-type--color-picker--library-color-is-locked) .fftm__option-type--color-picker__library-colors {
- visibility: visible;
- }
- .fftm__option-type--color-picker__library-color__clicker {
- width: 36px;
- height: 36px;
- float: left;
- margin: 0;
- cursor: pointer;
- position: relative;
- z-index: 1;
- }
- .fftm__option-type--color-picker__library-color {
- pointer-events: none;
- width: 36px;
- height: 36px;
- line-height: 36px;
- text-align: center;
- font-size: 15px;
- font-weight: 700;
- float: left;
- margin: 0 0 0 -36px;
- cursor: pointer;
- position: relative;
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABlBMVEXMzMz////TjRV2AAAAHklEQVR4AWNghAIGCMDgjwgFCDDSw2M0PSCD0fQAACRcAgF4ciGUAAAAAElFTkSuQmCC);
- background-position: 0 0;
- }
- .fftm__option-type--color-picker__library-color-preview {
- background: rgba(247,247,248,1);
- width: 100%;
- height: 100%;
- box-shadow: 0 0 0 2px rgba(255,255,255,1) inset, 0 0 0 3px rgba(0, 0, 0, 0.12) inset;
- }
- .fftm__option-type--color-picker__library-color--active,
- .fftm__option-type--color-picker__library-color__clicker:hover + .fftm__option-type--color-picker__library-color {
- transform: scale(1.382);
- transition: 0.1s transform ease;
- border-radius: 200px;
- z-index: 2;
- }
- .fftm__option-type--color-picker__library-color--active {
- z-index: 1; /* needs to be under hover state which is "2" */
- }
- .fftm__option-type--color-picker__library-color--active .fftm__option-type--color-picker__library-color-preview,
- .fftm__option-type--color-picker__library-color__clicker:hover + .fftm__option-type--color-picker__library-color .fftm__option-type--color-picker__library-color-preview {
- box-shadow: 0 1px 12px rgba(0, 0, 0, 0.2);
- transition: 0.1s box-shadow ease;
- border-radius: 200px;
- }
- .fftm__option-type--color-picker__library-color__clicker:not(:hover) + .fftm__option-type--color-picker__library-color:not(.fftm__option-type--color-picker__library-color--active) .fftm__option-type--color-picker__library-color-preview {
- color: transparent !important;
- }
- .fftm__option-type--color-picker__library-color-position-wrapper {
- display: none;
- background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==');
- background-position: 1px 1px;
- float: left;
- width: 32px;
- height: 32px;
- line-height: 32px;
- font-size: 13px;
- font-weight: 700;
- margin: 0 4px 0 0;
- text-align: center;
- }
- .fftm__option-type--color-picker__library-color-position {
- display: none;
- width: 100%;
- height: 100%;
- box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
- }
- .fftm__option-type--color-picker__library-color-name {
- display: none;
- float: left;
- width: 356px;
- font-size: 12px;
- line-height: 22px;
- padding: 4px 7px;
- border: 1px solid #dddddd;
- margin: 0;
- }
- .fftm__option-type--color-picker__library-color-name:focus {
- border-color: #b4b4b8;
- }
- .fftm__option-type--color-picker__no-library-text {
- float: left;
- line-height: 32px;
- width: calc(100% - 4px);
- text-align: center;
- font-size: 12px;
- color: #b4b4b8;
- }
- .fftm__option-type--color-picker__window--library-color-yes .fftm__option-type--color-picker__no-library-text {
- display: none;
- }
- .fftm__option-type--color-picker__window--library-color-yes .fftm__option-type--color-picker__library-color-name,
- .fftm__option-type--color-picker__window--library-color-yes .fftm__option-type--color-picker__library-color-position {
- display: block;
- }
- .fftm__option-type--color-picker__library-color__tooltip {
- background: #ffffca;
- border-radius: 0;
- min-width: 140px;
- background: rgba(0,0,0,0.7);
- box-shadow: 0 2px 5px rgba(0,0,0,0.2);
- border-radius: 0;
- min-width: 0;
- color: #ffffff;
- padding: 4px 7px;
- margin: -8px 0 0 0px;
- font-size: 11px;
- line-height: 15px;
- }
- .fftm__option-type--color-picker__history-preview {
- width: 32px;
- height: 32px;
- position: absolute;
- z-index: 9999995;
- }
- .fftm__option-type--color-picker__history-old {
- top: 247px;
- left: 10px;
- box-shadow: inset 0px 1px 0 0px rgba(0,0,0,0.220111), inset 0px -1px 0 0px rgba(0,0,0,0.220111), inset 1px 0 0 0px rgba(0,0,0,0.220111);
- cursor: pointer;
- }
- .fftm__option-type--color-picker__history-new {
- top: 247px;
- left: 42px;
- box-shadow: inset 0px 1px 0 0px rgba(0,0,0,0.220111), inset 0px -1px 0 0px rgba(0,0,0,0.220111), inset -1px 0 0 0px rgba(0,0,0,0.220111);
- }
- .fftm__option-type--color-picker__history-mockup-wrapper {
- box-shadow: 0 1px 12px rgba(0, 0, 0, 0.2);
- /*border: 1px solid #b4b4b8;*/
- }
- .fftm__option-type--color-picker__history-mockup h2 {
- font-size: 28px;
- line-height: 40px;
- padding: 30px 30px 0 30px;
- margin: 0;
- background-color: inherit;
- color: inherit;
- }
- .fftm__option-type--color-picker__history-mockup p {
- font-size: 15px;
- line-height: 21px;
- padding: 0 30px 30px 30px;
- margin: 0 0 0 0;
- background-color: inherit;
- color: inherit;
- }
- .fftm__option-type--color-picker__history-preview__var1 h2,
- .fftm__option-type--color-picker__history-preview__var1 p {
- background-color: #ffffff;
- }
- .fftm__option-type--color-picker__history-preview__var2 h2,
- .fftm__option-type--color-picker__history-preview__var2 p {
- color: #ffffff;
- }
- .fftm__option-type--color-picker__history-preview__var3 h2,
- .fftm__option-type--color-picker__history-preview__var3 p {
- background-color: #000000;
- }
- .fftm__option-type--color-picker__history-preview__var4 h2,
- .fftm__option-type--color-picker__history-preview__var4 p {
- color: #000000;
- }
- .sp-thumb-inner {
- opacity: 0;
- }
- .qtip-content,
- .qtip-default {
- background: transparent;
- }
- .qtip-content {
- overflow: visible;
- padding: 0;
- }
- .fftm__option-type--color-picker__window:not(.fftm__option-type--color-picker--library-color-is-active),
- .fftm__option-type--color-picker__window.fftm__option-type--color-picker--library-color-is-locked {
- width: 212px;
- height: 384px;
- }
- .fftm__option-type--color-picker__window:not(.fftm__option-type--color-picker--library-color-is-active) .fftm__option-type--color-picker__library,
- .fftm__option-type--color-picker__window.fftm__option-type--color-picker--library-color-is-locked .fftm__option-type--color-picker__library {
- display: none;
- }
- .fftm__option-type--color-picker__window:not(.fftm__option-type--color-picker--library-color-is-active) .fftm__option-type--color-picker__library-tabs,
- .fftm__option-type--color-picker__window.fftm__option-type--color-picker--library-color-is-locked .fftm__option-type--color-picker__library-tabs {
- position: absolute;
- bottom: 58px;
- left: 0;
- width: 214px;
- z-index: 9999999;
- border: none;
- padding-top: 5px;
- padding-bottom: 5px;
- }
- .fftm__option-type--color-picker__window:not(.fftm__option-type--color-picker--library-color-is-active) .fftm__option-type--color-picker__library-tabs label,
- .fftm__option-type--color-picker__window.fftm__option-type--color-picker--library-color-is-locked .fftm__option-type--color-picker__library-tabs label {
- position: static;
- padding: 8px 8px;
- }
- /* LOCKED COLOR LIB - START */
- .fftm__option-type--color-picker__window.fftm__option-type--color-picker--library-color-is-locked {
- height: 347px;
- }
- .fftm__option-type--color-picker__window.fftm__option-type--color-picker--library-color-is-locked .fftm__option-type--color-picker__library-tabs label {
- display: none;
- }
- /* LOCKED COLOR LIB - END */
- /*
- .fftm__option-type--color-picker {
- position: relative;
- }
- .fftm__option-type--color-picker .fftm__option-type__reset {
- display: none;
- position: absolute;
- top: -6px;
- right: -6px;
- background-color: #ee0000;
- color: #ffffff;
- text-align: center;
- border-radius: 99px;
- width: 16px;
- height: 16px;
- line-height: 16px;
- font-size: 14px;
- overflow: hidden;
- }
- .fftm__option-type--color-picker .fftm__option-type__reset:after {
- content: "\f335";
- -moz-osx-font-smoothing: grayscale;
- display: inline-block;
- font-family: 'dashicons';
- display: block;
- width: 100%;
- height: 100%;
- }
- .fftm__option-type--color-picker:hover .fftm__option-type__reset {
- display: block;
- }
- */
- .fftm__option-type--color-picker .fftm__option-type__reset {
- display: inline-block;
- visibility: hidden;
- cursor: pointer;
- margin: 9px 4px 0 4px;
- }
- .fftm__option-type--color-picker:hover .fftm__option-type__reset {
- visibility: visible;
- }
- .fftm__option-type--color-picker .fftm__option-type__reset:before {
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
- font-family: 'dashicons';
- text-align: center;
- padding: 0;
- margin: 0;
- font-size: 19px;
- width: 18px;
- height: 14px;
- line-height: 14px;
- display: inline-block;
- content: "\f158";
- color: #aaaaaa;
- cursor: pointer;
- float: left;
- }
- .fftm__option-type--color-picker .fftm__option-type__reset:hover:before {
- color: #aa0000;
- }
- /*.fftm__option-type__is-reset:after {
- content: ' ';
- display: block;
- position: absolute;
- top: 2px;
- left: 0;
- width: 28px;
- height: 28px;
- border-radius: 99px;
- overflow: hidden;
- background-repeat: no-repeat;
- background-position: center center;
- box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset;
- }*/
- .fftm__option-type__is-reset .fftm__option-type--color-picker__select-preview-color {
- background: url('images/ffb-color-picker-is-reset2.png') !important;
- background-position: center center !important;
- overflow: hidden;
- text-indent: 50px;
- }
- .fftm__option-type--color-picker__btn-save,
- .fftm__option-type--color-picker__btn-cancel {
- border-radius: 2px;
- color: #ffffff;
- display: inline-block;
- padding: 0;
- text-decoration: none;
- width: 93px;
- height: 36px;
- line-height: 36px;
- text-align: center;
- position: absolute;
- bottom: 10px;
- cursor: pointer;
- z-index: 1;
- font-size: 13px;
- }
- .fftm__option-type--color-picker__btn-save {
- background-color: #32d316;
- left: 10px;
- }
- .ffbvr .fftm__option-type--color-picker__btn-save {
- background-color: #2eb515;
- }
- .fftm__option-type--color-picker__btn-save:hover,
- .fftm__option-type--color-picker__btn-save:focus {
- background-color: #22c306;
- }
- .ffbvr .fftm__option-type--color-picker__btn-save:hover,
- .ffbvr .fftm__option-type--color-picker__btn-save:focus {
- background-color: #1ea505;
- }
- .fftm__option-type--color-picker__btn-cancel {
- background-color: #888888;
- left: 109px;
- }
- .fftm__option-type--color-picker__btn-cancel:hover,
- .fftm__option-type--color-picker__btn-cancel:focus {
- background-color: #777777;
- }
- .fftm__option-type--color-picker__window:after {
- content: ' ';
- position: absolute;
- bottom: 0;
- width: 100%;
- height: 57px;
- left: 0;
- background-color: #f5f5f5;
- border-top: 1px solid #d3d3d3;
- }
- .ffb-options .ff-repeatable-boxed,
- .ffb-options .ff-repeatable-boxed .ff-repeatable-item,
- .ffb-options .ff-repeatable-boxed .ff-repeatable-header {
- box-shadow: none !important;
- border: none !important;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item.ui-sortable-helper.ff-repeatable-item-opened {
- box-shadow: 0 2px 16px rgba(0, 0, 0, 0.02) !important;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item.ui-sortable-helper.ff-repeatable-item-opened > .ff-repeatable-header {
- box-shadow: none !important;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-header {
- margin: 0 !important;
- background-color: #f5f5f5 !important;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-controls-top,
- .ffb-options .ff-repeatable-boxed .ff-repeatable-controls-bottom {
- display: none !important;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-item:last-child > .ff-repeatable-controls-bottom {
- display: block !important;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-controls-bottom {
- /*background-color: transparent !important;*/
- width: calc(100% + 2px) !important;
- height: 48px;
- padding: 0 !important;
- margin: 0 !important;
- top: auto !important;
- right: auto !important;
- bottom: -65px !important;
- left: -1px !important;
- /*border: 1px dashed transparent !important;*/
- background-color: transparent !important;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-boxed .ff-repeatable-controls-bottom {
- background-color: transparent !important;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-controls-bottom:hover {
- /*background-color: #fafafa !important; */
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-add-below {
- /*background-color: #32d316 !important;*/
- background-color: #fafafa !important;
- cursor: pointer !important;
- float: none !important;
- width: 100% !important;
- height: 40px !important;
- line-height: 40px !important;
- margin: 0 auto !important;
- padding: 0 !important;
- text-align: center !important;
- border-radius: 0 !important;
- font-size: 0 !important;
- text-indent: -200px;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-add-below:before {
- background-color: transparent !important;
- background-position: center center !important;
- background-repeat: no-repeat !important;
- content: ' ' !important;
- height: 22px !important;
- width: 22px !important;
- display: block !important;
- position: static !important;
- border-radius: 0 !important;
- position: relative !important;
- top: 9px !important;
- right: auto !important;
- bottom: auto !important;
- left: auto !important;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-add-below:before {
- content: ' ' !important;
- width: 22px !important;
- height: 22px !important;
- display: block !important;
- margin: 0 auto !important;
- background-image: url('images/ffb-add-repeatable-icon5.png') !important;
- background-repeat: no-repeat !important;
- }
- .ffbvr .ffb-options .ff-repeatable-boxed .ff-repeatable-add-below:before {
- background-image: url('images/ffbvr/ffb-add-repeatable-icon5.png') !important;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-add-below:before {
- background-position: -10px -10px !important;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-add-below:hover:before {
- background-position: -10px -110px !important;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item {
- transition: none !important;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-item {
- border: 1px solid #dddddd !important;
- box-shadow: 0 2px 16px rgba(0, 0, 0, 0.02) !important;
- background: none !important;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-item .ff-repeatable-item {
- background-color: #fafafa !important;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-item .ff-repeatable-item .ff-repeatable-item {
- background-color: #ffffff !important;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-item .ff-repeatable-item .ff-repeatable-item .ff-repeatable-item {
- background-color: #fafafa !important;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-item .ff-repeatable-item .ff-repeatable-item .ff-repeatable-item .ff-repeatable-item {
- background-color: #ffffff !important;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-item > .ff-repeatable-header {
- background-color: #fafafa !important;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-item .ff-repeatable-item > .ff-repeatable-header {
- background-color: #f5f5f5 !important;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-item .ff-repeatable-item .ff-repeatable-item > .ff-repeatable-header {
- background-color: #fafafa !important;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-item .ff-repeatable-item .ff-repeatable-item .ff-repeatable-item .ff-repeatable-item > .ff-repeatable-header {
- background-color: #f5f5f5 !important;
- }
- .ffb-options .ff-advanced-options + .ff-repeatable-boxed .ff-repeatable-item {
- margin-top: 16px !important;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-item {
- margin-bottom: 16px !important;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-item-opened > .ff-repeatable-header {
- border-bottom: 1px solid #dddddd !important;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-item-closed > .ff-repeatable-content {
- display: none;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-item-opened > .ff-repeatable-content {
- display: block !important;
- height: auto !important;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-boxed {
- margin: 20px 25px 70px 25px !important;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-controls-bottom,
- .ffb-options .ff-repeatable-boxed .ff-repeatable-item.ff-repeatable-item-empty-add {
- background: #ffffff !important;
- /*border: 1px dashed #dddddd !important;*/
- box-shadow: none !important;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-boxed .ff-repeatable-boxed .ff-repeatable-item.ff-repeatable-item-empty-add {
- background: #fafafa !important;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable,
- .ffb-options .ff-repeatable-boxed .ff-repeatable-content {
- padding: 0 !important;
- margin: 0 !important;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-content {
- /*padding: 15px 25px !important;*/
- /*padding: 18px 28px !important;*/
- padding: 21px 25px !important;
- background-color: #ffffff;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-boxed .ff-repeatable-content {
- background-color: #fafafa;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-boxed .ff-repeatable-boxed .ff-repeatable-content {
- background-color: #ffffff;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-boxed .ff-repeatable-boxed .ff-repeatable-boxed .ff-repeatable-content {
- background-color: #fafafa;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-boxed .ff-repeatable-content .ff-repeatable-item.ff-repeatable-item-empty-add-ffb {
- background-color: #f5f5f5 !important;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-boxed .ff-repeatable-boxed .ff-repeatable-content .ff-repeatable-item.ff-repeatable-item-empty-add-ffb {
- background-color: #fafafa !important;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-boxed .ff-repeatable-boxed .ff-repeatable-boxed .ff-repeatable-item.ff-repeatable-item-empty-add-ffb {
- background-color: #f5f5f5 !important;
- }
- /*.ffb-options .ff-repeatable-boxed.ff-can-be-empty,
- .ffb-options .ff-repeatable-boxed .ff-repeatable-boxed.ff-can-be-empty {
- margin-bottom: 68px !important;
- }*/
- .ffb-options .ff-repeatable-boxed .ff-repeatable-item.ff-repeatable-item-empty-add-ffb {
- margin-top: 16px;
- background-color: #fafafa !important;
- border: 1px dashed #d0d0d0 !important;
- /*border: 1px solid transparent !important;*/
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-item.ff-repeatable-item-empty-add-ffb:first-child {
- margin-top: 0 !important;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-item.ff-repeatable-item-empty-add-ffb:last-child {
- margin-bottom: 0 !important;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-item .ff-repeatable-item.ff-repeatable-item-empty-add-ffb:last-child:not(:first-child) {
- margin-bottom: 16px !important;
- }
- /* second modal start (keep in mind that it does not have to original from a modal, some modal options are printed directly into admin pages without being in physical modal) */
- .ffb-options .ff-repeatable-boxed .ffb-modal .ffb-options .ff-repeatable-boxed .ff-repeatable-item.ff-repeatable-item-empty-add {
- background-color: #fafafa !important;
- }
- .ffb-options .ff-repeatable-boxed .ffb-modal .ffb-options .ff-repeatable-boxed .ff-repeatable-item > .ff-repeatable-header {
- background-color: #fafafa !important;
- }
- .ffb-options .ff-repeatable-boxed .ffb-modal .ffb-options .ff-repeatable-boxed .ff-repeatable-content {
- background-color: #ffffff !important;
- }
- /* second modal end */
- .ffb-options .ff-repeatable-boxed .ff-repeatable-item.ff-repeatable-item-empty-add-ffb .ff-repeatable-add-ffb {
- height: 54px;
- position: relative;
- cursor: pointer;
- }
- .ffb-options .ff-repeatable-item.ff-repeatable-item-empty-add-ffb:before {
- content: ' ' !important;
- background-color: transparent !important;
- border-radius: 0 !important;
- position: absolute !important;
- top: 50% !important;
- left: 50% !important;
- right: auto !important;
- bottom: auto !important;
- width: 30px !important;
- height: 30px !important;
- display: block !important;
- margin: -15px 0 0 -15px !important;
- background-image: url('images/ffb-add-repeatable-icon5.png') !important;
- background-repeat: no-repeat !important;
- }
- .ffbvr .ffb-options .ff-repeatable-item.ff-repeatable-item-empty-add-ffb:before {
- background-image: url('images/ffbvr/ffb-add-repeatable-icon5.png') !important;
- }
- .ffb-options .ff-repeatable-item.ff-repeatable-item-empty-add-ffb:before {
- background-position: -10px -10px !important;
- }
- .ffb-options .ff-repeatable-item.ff-repeatable-item-empty-add-ffb:hover:before {
- background-position: -10px -110px !important;
- }
- /*.ffb-options .ff-repeatable-item .ff-repeatable-item.ff-repeatable-item-empty-add-ffb {
- margin-bottom: 20px;
- }
- */
- .ffb-options .ff-repeatable-template-holder + .ff-repeatable-item:last-child {
- margin-top: 0 !important;
- margin-bottom: 0 !important;
- }
- .ffb-options .ff-repeatable-boxed,
- .ffb-options .ff-repeatable-boxed .ff-repeatable-boxed {
- margin-top: 4px !important;
- margin-bottom: 4px !important;
- }
- .ffb-options .ff-popup-container {
- z-index: 1;
- }
- .ffb-options .ff-popup-button-wrapper:last-child .ff-popup-button {
- border-color: #bbbbbb;
- }
- .ffb-options .ff-popup .ff-popup-button:hover {
- background-color: #32d316;
- }
- .ffbvr .ffb-options .ff-popup .ff-popup-button:hover {
- background-color: #2eb515;
- }
- /*.ffb-options .ff-popup li:last-child .ff-popup-button:hover {
- background-color: #ff0048;
- }*/
- .ffb-options .ff-repeatable-add-below + .ff-popup-container {
- transform: translateY(-50%);
- bottom: auto !important;
- left: 55% !important;
- }
- .ffb-options-page .select2-drop.ff-select2 {
- position: fixed !important;
- }
- .ffb-options-page .select2-container,
- .ffb-options-page .select2-drop,
- .ffb-options-page .select2-search,
- .ffb-options-page .select2-search input{
- min-width: 190px;
- }
- .ffb-options label,
- .ffb-options .form-table td fieldset label,
- .ffb-options .form-table td p {
- margin: 4px 0 !important;
- }
- .ffb-modal .ff-popup-button.ff-repeatable-remove:hover,
- .ffb-options .ff-popup-button.ff-repeatable-remove:hover {
- background-color: #ff0048 !important;
- }
- .ffb-options-page .ff-modal-library .media-modal-icon {
- position: absolute;
- top: 50%;
- left: 50%;
- margin: -10px 0 0 -10px;
- width: 20px;
- height: 20px;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-item.ui-sortable-placeholder {
- background: none !important;
- border: none !important;
- box-shadow: none !important;
- width: 100% !important;
- height: 0 !important;
- margin: 0 !important;
- padding: 0 !important;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-item.ui-sortable-placeholder:before {
- content: ' ' !important;
- position: absolute !important;
- display: block !important;
- top: auto !important;
- right: auto !important;
- bottom: 6px !important;
- left: 0 !important;
- width: 100% !important;
- height: 4px !important;
- border: none !important;
- background-color: #32d316 !important;
- }
- .ffbvr .ffb-options .ff-repeatable-boxed .ff-repeatable-item.ui-sortable-placeholder:before {
- background-color: #2eb515 !important;
- }
- .ffb-options .ff-repeatable-boxed .ff-repeatable-item.ui-sortable-placeholder:after {
- display: none !important;
- }
- .ffb-options .ff-options__tinymce-holder--tinymce-disabled .ff-options__tinymce-disable {
- display: none;
- }
- .ffb-options .ff-options__tinymce-holder--tinymce-enabled .ff-options__tinymce-enable {
- display: none;
- }
- .ffb-options .ff-options__tinymce-disable,
- .ffb-options .ff-options__tinymce-enable {
- margin-bottom: 10px;
- }
- .ffb-options .ff-options__tinymce-holder .mce-tinymce {
- border: 1px solid #dddddd;
- }
- /*
- .ffb-options-page .mce-menu .mce-menu-item-normal.mce-active,
- .ffb-options-page .mce-menu .mce-menu-item-preview.mce-active,
- .ffb-options-page .mce-menu .mce-menu-item.mce-selected,
- .ffb-options-page .mce-menu .mce-menu-item:focus,
- .ffb-options-page .mce-menu .mce-menu-item:hover {
- background-color: #666666;
- }
- .ffb-options-page .mce-menu-item:hover,
- .ffb-options-page .mce-menu-item.mce-selected,
- .ffb-options-page .mce-menu-item:focus {
- background-color: #666666;
- }*/
- .ffb-options textarea {
- line-height: 20px !important;
- padding: 5px 8px !important;
- }
- .ffb-options p.description {
- line-height: 20px !important;
- }
- .ffb-options p.warning {
- line-height: 20px !important;
- color: #ff1833;
- border: 1px solid #ff1833;
- padding: 10px 16px;
- border-radius: 3px;
- }
- .ffb-modal-add-element .ffb-modal__footer .ffb-modal__button-image_preview,
- .ffb-modal-add-element .ffb-modal__footer .ffb-modal__button-save,
- .ffb-modal-add-element .ff-global-style-select,
- .ffb-modal-add-element .ffb-modal__footer .ffb-modal__button-save_all {
- display: none;
- }
- .ff-select2-minwidth {
- min-width: 190px;
- }
- .ffb-modal-save-default-element-settings {
- font-size: 12px;
- position: relative;
- left: 180px;
- top: -68px;
- color: white;
- opacity: 0.5;
- cursor: pointer;
- }
- .ffb-modal-save-default-element-settings:hover {
- opacity: 1;
- background: red;
- color: yellow;
- }
- /* code areas */
- .ffb-options .ffb-options-textarea-code-wrapper {
- /*color: #aaaaaa;*/
- /*color: #ff4992;*/
- /*color: #00ff9c;*/
- color: rgba(0,255,156,0.65);
- padding: 5px 0;
- /*border-left: 40px solid rgba(255,255,255,0.15);*/
- }
- .ffb-options .ffb-options-textarea-code-wrapper,
- .ffb-options .ffb-options-textarea-code-wrapper textarea,
- .ffb-options textarea.ff-options__tinymce {
- font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace !important;
- font-size: 12px !important;
- line-height: 16px !important;
- /*background-color: #0000aa;*/
- background-color: #5900ff !important;
- }
- .ffb-options .ffb-options-textarea-code-prefix {
- padding-left: 9px;
- }
- .ffb-options .form-table td fieldset .ffb-options-textarea-code-wrapper {
- padding: 5px 0 !important;
- margin: 0 0 0 0 !important;
- width: auto !important;
- display: block !important;
- }
- .ffb-options .form-table td fieldset .ffb-options-textarea-code-wrapper textarea{
- padding-left: 40px !important;
- }
- .ffb-options .form-table td fieldset .ffb-options-textarea-code-wrapper .ff-hiding-box:not([style*="display: none"]) + .ff-opt-label-textarea > textarea {
- padding-left: 71px !important;
- }
- .ffb-options .ffb-options-textarea-code-wrapper textarea,
- .ffb-options textarea.ff-options__tinymce {
- height: 157px;
- /*color: #ffffff !important;*/
- color: rgb(0,255,156) !important;
- padding: 0 !important;
- margin: 0 !important;
- border-radius: 3px !important;
- }
- .ffb-options textarea.ff-options__tinymce {
- padding: 5px 8px !important;
- }
- .ffb-options .ffb-options-textarea-code-wrapper textarea,
- .ffb-options .ffb-options-textarea-code-wrapper textarea:hover,
- .ffb-options .ffb-options-textarea-code-wrapper textarea:active,
- .ffb-options .ffb-options-textarea-code-wrapper textarea:focus,
- .ffb-options textarea.ff-options__tinymce,
- .ffb-options textarea.ff-options__tinymce:hover,
- .ffb-options textarea.ff-options__tinymce:active,
- .ffb-options textarea.ff-options__tinymce:focus {
- border: none !important;
- overflow: auto !important;
- outline: none !important;
- -webkit-box-shadow: none !important;
- -moz-box-shadow: none !important;
- box-shadow: none !important;
- }
- /* element JavaScript */
- .ffb-options .ffb-options-textarea-code-el-js .ffb-options-textarea-code-js-start:before {
- content: '<script type="text/javascript">';
- display: block;
- }
- .ffb-options .ffb-options-textarea-code-el-js .ffb-options-textarea-code-js-end:before {
- content: '</script>';
- display: block;
- }
- .ffb-options .ffb-options-textarea-code-el-js .ffb-options-textarea-code-jquery-start:before {
- content: '(function($){';
- display: block;
- padding-left: 31px;
- }
- .ffb-options .ffb-options-textarea-code-el-js .ffb-options-textarea-code-jquery-end:before {
- content: '})(jQuery);';
- display: block;
- padding-left: 31px;
- }
- .ffb-options .form-table td fieldset .ffb-options-textarea-code-el-js .ffb-options-textarea-code-js-start + .ff-hiding-box:not([style*="display: none"]) + textarea {
- padding-left: 71px !important;
- }
- /* custom code CSS */
- .ffb-options .ffb-options-textarea-code-cc-css .ff-media-query-before:not(:empty) + .ff-selector {
- padding-left: 31px;
- }
- .ffb-options .ffb-options-textarea-code-cc-css .ff-media-query-before:not(:empty) ~ .ff-selector-after {
- padding-left: 31px;
- }
- .ffb-options .form-table td fieldset .ffb-options-textarea-code-cc-css .ff-media-query-before:not(:empty) ~ textarea {
- padding-left: 71px !important;
- }
- /* custom code JS */
- .ffb-options .ffb-options-textarea-code-cc-js .ffb-options-textarea-code-cc-js-js-start:before {
- content: '<script type="text/javascript">';
- display: block;
- }
- .ffb-options .ffb-options-textarea-code-cc-js .ffb-options-textarea-code-cc-js-js-end:before {
- content: '</script>';
- display: block;
- }
- .ffb-options .ffb-options-textarea-code-cc-js .ffb-options-textarea-code-cc-js-jquery-start:before {
- content: '(function($){';
- display: block;
- padding-left: 31px;
- }
- .ffb-options .ffb-options-textarea-code-cc-js .ffb-options-textarea-code-cc-js-jquery-end:before {
- content: '})(jQuery);';
- display: block;
- padding-left: 31px;
- }
- .ffb-options .ffb-options-textarea-code-cc-js .ffb-options-textarea-code-cc-js-docready-start:before {
- content: '$(document).ready(function(){';
- display: block;
- padding-left: 62px;
- }
- .ffb-options .ffb-options-textarea-code-cc-js .ffb-options-textarea-code-cc-js-docready-end:before {
- content: '});';
- display: block;
- padding-left: 62px;
- }
- .ffb-options .form-table td fieldset .ffb-options-textarea-code-cc-js .ffb-options-textarea-code-cc-js-js-start + .ff-hiding-box:not([style*="display: none"]) + .ff-hiding-box:not([style*="display: none"]) + textarea {
- padding-left: 102px !important;
- }
- .ffb-options .form-table td fieldset .ffb-options-textarea-code-cc-js .ffb-options-textarea-code-cc-js-js-start + .ff-hiding-box:not([style*="display: none"]) + .ff-hiding-box[style*="display: none"] + textarea {
- padding-left: 71px !important;
- }
- .ffb-options .form-table td fieldset .ffb-options-textarea-code-cc-js .ffb-options-textarea-code-cc-js-js-start + .ff-hiding-box[style*="display: none"] + .ff-hiding-box[style*="display: none"] + textarea {
- padding-left: 40px !important;
- }
- .ffb-options .ff-unique-css-class-box-styling {
- /*background-color: #5900ff;*/
- background-color: #fafafa !important;
- color: #ff00aa !important;
- font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace !important;
- font-size: 14px !important;
- line-height: 20px !important;
- padding: 12px 15px !important;
- display: inline-block !important;
- }
- /**********************************************************************************************************************/
- /* NOTIFICATION SYSTEM
- /**********************************************************************************************************************/
- .ffb-notification-box {
- position: fixed;
- bottom: 122px;
- left: 16px;
- z-index: 99999999;
- }
- /*.fftm-notify {
- position: fixed;
- bottom: 20px;
- left: 320px;
- }*/
- .fftm-canvas__editor-mode--off .fftm-notify {
- left: 20px;
- }
- .fftm-notify__item {
- margin: 20px 35px 0 0;
- padding: 8px 20px 8px 52px;
- border-radius: 3px;
- color: #ffffff;
- font-size: 15px;
- line-height: 28px;
- font-family: 'Roboto', sans-serif;
- position: relative;
- float: left;
- clear: both;
- /*-webkit-transition: all 0.4s ease;
- -moz-transition: all 0.4s ease;
- transition: all 0.4s ease;*/
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
- .fftm-notify__item-content {
- position: relative;
- z-index: 1;
- }
- .fftm-notify__item i {
- float: left;
- margin-right: 20px;
- font-size: 28px;
- line-height: 28px;
- }
- .fftm-notify__item .fftm-notify__item-type-icon {
- position: absolute;
- display: block;
- margin: 0;
- padding: 0;
- z-index: 0;
- top: 8px;
- left: 10px;
- color: rgba(255,255,255,0.5);
- font-size: 28px;
- line-height: 1;
- width: 32px;
- text-align: center;
- }
- .fftm-notify__item-type--info {
- background: rgba(0,0,0,0.6924);
- }
- .fftm-notify__item-type--success {
- background: rgba(50,211,22,0.9);
- }
- .fftm-notify__item-type--warning {
- background: rgba(255,163,0,0.9);
- }
- .fftm-notify__item-type--error {
- background: rgba(255,50,50,0.9);
- }
- .fftm-notify__item-type--info,
- .fftm-notify__item-type--success,
- .fftm-notify__item-type--warning {
- cursor: pointer;
- }
- .fftm-notify__item--anim-enter--ended.fftm-notify__item-type--info:hover,
- .fftm-notify__item--anim-enter--ended.fftm-notify__item-type--success:hover,
- .fftm-notify__item--anim-enter--ended.fftm-notify__item-type--warning:hover {
- opacity: 0.8 !important;
- }
- .fftm-notify__item-type--error {
- cursor: not-allowed;
- }
- .fftm-notify__item--anim-enter {
- -webkit-animation: notifyItemEnter ease 0.247s forwards;
- animation: notifyItemEnter ease 0.247s forwards;
- transform-origin: 0 50%;
- }
- .fftm-notify__item--anim-exit {
- -webkit-animation: notifyItemExit ease 0.437s forwards;
- animation: notifyItemExit ease 0.437s forwards;
- }
- @-webkit-keyframes notifyItemEnter{
- 0% {
- opacity: 0;
- transform: scale(1.5);
- }
- 100% {
- opacity: 1;
- transform: scale(1);
- }
- }
- @keyframes notifyItemEnter{
- 0% {
- opacity: 0;
- transform: scale(1.5);
- }
- 100% {
- opacity: 1;
- transform: scale(1);
- }
- }
- @-webkit-keyframes notifyItemExit{
- 0% {
- -webkit-filter: opacity(1) blur(0);
- }
- 100% {
- -webkit-filter: opacity(0) blur(40px);
- -webkit-filter: opacity(0) blur(40px);
- -webkit-filter: opacity(0) blur(40px);
- }
- }
- @keyframes notifyItemExit{
- 0% {
- -webkit-filter: opacity(1) blur(0);
- -moz-filter: opacity(1) blur(0);
- filter: opacity(1) blur(0);
- }
- 100% {
- -webkit-filter: opacity(0) blur(40px);
- -moz-filter: opacity(0) blur(40px);
- filter: opacity(0) blur(40px);
- }
- }
- .ff-default-image-placeholder-qtip ul {
- position: fixed;
- top: 0;
- bottom: 0;
- width: 600px;
- overflow-y: scroll;
- background-color: rgba(0,0,0,0.5);
- }
- .ff-default-image-placeholder-qtip li {
- border-bottom: 1px solid #ffffff;
- border-right: 1px solid #ffffff;
- width: 195px;
- float: left;
- }
- .ff-default-image-placeholder-qtip li img {
- width: 100%;
- height: auto;
- }
- .ff-default-image-placeholder-qtip li img:hover {
- box-shadow: 0 0 0 20px #32d316;
- cursor: pointer;
- }
- .ffbvr .ff-default-image-placeholder-qtip li img:hover {
- box-shadow: 0 0 0 20px #2eb515;
- }
- .fftm__option-type--color-picker__window, .fftm__option-type--color-picker__window *, .fftm__option-type--color-picker__window *:before, .fftm__option-type--color-picker__window *:after {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
- /*
- .ffb-options .ffb-input-differ-from-default-value > input,
- .ffb-options .ffb-input-differ-from-default-value > select,
- .ffb-options .ffb-input-differ-from-default-value > textarea{
- box-shadow: 0 0 0 2px rgba(255,0,170,0.6) !important;
- }
- .ffb-options .ffb-input-differ-from-default-value.fftm__option-type--color-picker__select{
- box-shadow: 0 0 0 2px rgba(255,0,170,0.6) !important;
- }*/
- .ffb-options .ffb-input-differ-from-default-value > input,
- .ffb-options .ffb-input-differ-from-default-value > select,
- .ffb-options .ffb-input-differ-from-default-value > textarea,
- .ffb-options .ffb-input-differ-from-default-value .ff-select2 {
- border-color: rgba(255,0,170,0.6) !important;
- box-shadow: 0 0 0 1px rgba(255,0,170,0.6) !important;
- }
- .ffb-options .ffb-input-differ-from-default-value.fftm__option-type--color-picker__select {
- width: 22px;
- height: 22px;
- line-height: 22px;
- margin-top: 3px;
- margin-right: 3px;
- margin-left: 3px;
- }
- .ffb-options .ffb-input-differ-from-default-value.fftm__option-type--color-picker__select .fftm__option-type--color-picker__select-preview-color {
- /*box-shadow: none !important;
- border: 2px solid rgba(255,0,170,0.6) !important;*/
- box-shadow: 0 0 0 2px rgba(255,255,255,1), 0 0 0 4px rgba(255,0,170,0.6) !important;
- }
- .ffb-global-options-temporary-holder .ffb-options .ffb-input-differ-from-default-value > input,
- .ffb-global-options-temporary-holder .ffb-options .ffb-input-differ-from-default-value > select,
- .ffb-global-options-temporary-holder .ffb-options .ffb-input-differ-from-default-value > textarea,
- .ffb-global-options-temporary-holder .ffb-options .ffb-input-differ-from-default-value .ff-select2{
- border-color: rgba(75,75,255,0.8) !important;
- box-shadow: 0 0 0 1px rgba(75,75,255,0.8) !important;
- }
- .ffb-global-options-temporary-holder .ffb-options .ffb-input-differ-from-default-value.fftm__option-type--color-picker__select {
- width: 22px;
- height: 22px;
- line-height: 22px;
- margin-top: 3px;
- margin-right: 3px;
- margin-left: 3px;
- }
- .ffb-global-options-temporary-holder .ffb-options .ffb-input-differ-from-default-value.fftm__option-type--color-picker__select .fftm__option-type--color-picker__select-preview-color {
- /*box-shadow: none !important;
- border: 2px solid rgba(75,75,255,0.8) !important;*/
- box-shadow: 0 0 0 2px rgba(255,255,255,1), 0 0 0 4px rgba(75,75,255,0.8) !important;
- }
- /*.ffb-options .ff-repeatable.ffb-input-differ-from-default-value .ff-repeatable-item:not(.ff-repeatable-item-empty-add) {
- box-shadow: 0 2px 16px rgba(0, 0, 0, 0.02), 0 0 0 2px rgba(255,0,170,0.6) !important;
- }*/
- #FreshBuilder {
- display: none;
- }
- .ff-save-default-data {
- cursor: pointer;
- float: right;
- opacity: 0.3;
- top: -13px;
- line-height: 10px;
- font-size: 10px;
- left: 0px;
- position: absolute;
- }
- .ff-save-default-data:hover {
- opacity: 1;
- }
- .ff-global-style-select {
- display: inline-block;
- text-align: center;
- line-height: 33px;
- /* background-color: rgba(70,70,255,1); */
- background-color: rgba(70,70,255,0.1);
- color: #ffffff;
- text-decoration: none;
- border-radius: 99px;
- padding: 0px 36px 0px 21px;
- font-size: 13px;
- cursor: pointer;
- vertical-align: middle;
- position: relative;
- margin: -6px 0 0 18px;
- /* text-transform: uppercase; */
- font-weight: 600;
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
- .ff-global-style-select:hover {
- /*background-color: #1166ef;*/
- background-color: rgba(70,70,255,1);
- }
- .ff-global-style-select:after {
- content: '\f0d7';
- font-family: 'ff-font-awesome';
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- position: absolute;
- width: 10px;
- height: 10px;
- line-height: 10px;
- text-align: center;
- right: 15px;
- top: 12px;
- opacity: 1;
- font-size: 13px;
- text-align: center;
- }
- .ff-modal-menu-item[data-value="inherit"] .ff-modal-menu-item-inner,
- .ff-modal-menu-item[data-value="dark"] .ff-modal-menu-item-inner,
- .ff-modal-menu-item[data-value="light"] .ff-modal-menu-item-inner,
- .ff-modal-menu-item[data-value="force-to-child-inherit"] .ff-modal-menu-item-inner,
- .ff-modal-menu-item[data-value="force-to-child-dark"] .ff-modal-menu-item-inner,
- .ff-modal-menu-item[data-value="force-to-child-light"] .ff-modal-menu-item-inner {
- padding-left: 39px;
- }
- .ff-modal-menu-item[data-value="inherit"] .ff-modal-menu-item-inner:before,
- .ff-modal-menu-item[data-value="dark"] .ff-modal-menu-item-inner:before,
- .ff-modal-menu-item[data-value="light"] .ff-modal-menu-item-inner:before,
- .ff-modal-menu-item[data-value="force-to-child-inherit"] .ff-modal-menu-item-inner:before,
- .ff-modal-menu-item[data-value="force-to-child-dark"] .ff-modal-menu-item-inner:before,
- .ff-modal-menu-item[data-value="force-to-child-light"] .ff-modal-menu-item-inner:before {
- content: ' ';
- position: absolute;
- left: 14px;
- top: 7px;
- width: 24px;
- height: 24px;
- line-height: 24px;
- margin: 0 5px 0 0;
- background-image: url('images/ffb-header-icons5.png');
- background-repeat: no-repeat;
- }
- .ffbvr .ff-modal-menu-item[data-value="inherit"] .ff-modal-menu-item-inner:before,
- .ffbvr .ff-modal-menu-item[data-value="dark"] .ff-modal-menu-item-inner:before,
- .ffbvr .ff-modal-menu-item[data-value="light"] .ff-modal-menu-item-inner:before,
- .ffbvr .ff-modal-menu-item[data-value="force-to-child-inherit"] .ff-modal-menu-item-inner:before,
- .ffbvr .ff-modal-menu-item[data-value="force-to-child-dark"] .ff-modal-menu-item-inner:before,
- .ffbvr .ff-modal-menu-item[data-value="force-to-child-light"] .ff-modal-menu-item-inner:before {
- background-image: url('images/ffbvr/ffb-header-icons5.png');
- }
- .ff-modal-menu-item[data-value="light"] .ff-modal-menu-item-inner:before,
- .ff-modal-menu-item[data-value="force-to-child-light"] .ff-modal-menu-item-inner:before {
- background-position: -408px -48px;
- }
- .ff-modal-menu-item[data-value="dark"] .ff-modal-menu-item-inner:before,
- .ff-modal-menu-item[data-value="force-to-child-dark"] .ff-modal-menu-item-inner:before {
- background-position: -368px -48px;
- }
- .ff-modal-menu-item[data-value="inherit"] .ff-modal-menu-item-inner:before,
- .ff-modal-menu-item[data-value="force-to-child-inherit"] .ff-modal-menu-item-inner:before {
- background-position: -448px -48px;
- }
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle,
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-settings,
- .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-show-advanced-tools {
- display: block;
- }
- .ff-repeatable-ig-changed-wrapper {
- position: absolute;
- top: 0;
- right: 57px;
- padding: 0 11px 0 0;
- }
- .ff-repeatable-instance-changed,
- .ff-repeatable-global-changed {
- float: left;
- padding: 0 4px;
- height: 12px;
- line-height: 12px;
- text-align: center;
- border-radius: 99px;
- z-index: 1;
- background-color: #ff00aa;
- color: #ffffff;
- font-weight: 500;
- /* opacity: 0.25; */
- opacity: 1;
- display: none;
- font-size: 8px;
- margin: 8px 0 0 5px;
- }
- .ff-repeatable-instance-changed:before {
- content: 'EDIT';
- }
- .ff-repeatable-global-changed:before {
- content: 'GLB';
- }
- .ff-repeatable-global-changed {
- background-color: rgba(70,70,255,1);
- }
- .ff-repeatable-item.ff-repeatable-instance-changed-active > .ff-repeatable-header .ff-repeatable-instance-changed,
- .ff-repeatable-item.ff-repeatable-global-changed-active > .ff-repeatable-header .ff-repeatable-global-changed {
- display: block;
- }
- /*.ff-repeatable-item:hover .ff-repeatable-instance-changed,
- .ff-repeatable-item:hover .ff-repeatable-global-changed {
- opacity: 1;
- }*/
- /*
- .ffb-modal__tab-content-instance-changed .ffb-gl-switcher-holder .ffb-switch-to__instance,
- .ffb-modal__tab-content-instance-changed ~ .ffb-global-options-temporary-holder .ffb-gl-switcher-holder .ffb-switch-to__instance {
- color: #ff00aa !important;
- }
- .ffb-modal__tab-content-global-changed .ffb-gl-switcher-holder .ffb-switch-to__global,
- .ffb-modal__tab-content-global-changed ~ .ffb-global-options-temporary-holder .ffb-gl-switcher-holder .ffb-switch-to__global {
- color: rgba(70,70,255,1) !important;
- }
- */
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement