Files
idpan.poznan.pl/components/com_pagebuilderck/assets/pagebuilderck.css
2026-02-08 21:16:11 +01:00

837 lines
16 KiB
CSS

/**
* @name Page Builder CK
* @package com_pagebuilderck
* @copyright Copyright (C) 2015. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
* @author Cedric Keiflin - https://www.template-creator.com - https://www.joomlack.fr
*/
/* Fix for Firefox where the elements go out of the page in edition mode */
.edit.item-page fieldset,
#item-form fieldset {
/*display: table-cell;
min-width: auto;*/
}
/* For elements to get the correct size */
#workspaceck *, #popup_editionck *, #menuck *, .pagebuilderck * {
box-sizing: border-box;
}
#workspaceck .inner:before, .pagebuilderck .inner:before {
border-radius: inherit;
}
/* For equal heights */
.blockck > .inner {
/*height: 100%;*/
box-sizing: border-box;
flex: 1 1 auto;
/*overflow: hidden;*/ /* fix for IE, to remove unwanted space */
}
.pagebuilderck {
/*overflow-x: hidden;*/ /* do not use, causes scroll bar to appear : fix for animation that are outside the screen */
}
.pagebuilderck img {
max-width: 100%;
height: auto;
display: inline-block;
}
.workspaceck.ckresponsiveactive:not([ckresponsiverange="5"]) .rowck > .inner,
.rowck.ckadvancedlayout > .inner,
.rowck > .inner {
flex-wrap: wrap;
}
/* ---------------------------------------
Responsive design code
Needed for V1 B/C
-----------------------------------------*/
@media screen and (max-width: 524px) {
.pagebuilderck .row-fluid:not([class*="ckstack"]) .ckhidephone {
display: none !important;
}
.pagebuilderck .row-fluid:not([class*="ckstack"]) .blockck[class*="span"] {
display: block;
float: none !important;
width: 100% !important;
margin-left: 0 !important;
}
.rowck.row-fluid:not([class*="ckstack"]) > .inner {
display: block !important;
}
}
@media screen and (min-width: 525px) {
.pagebuilderck .row-fluid:not([class*="ckstack"]) .ckhidedesktop {
display: none !important;
}
}
.pagebuilderck {
clear: both;
}
.pagebuilderck img, .workspaceck img {
max-width: 100%;
height: auto;
}
.blockck {
display: flex;
flex-direction: column;
float: left;
min-height: 1px; /* needed else the empty blocks will not take place */
}
.rowck > .inner {
display: flex;
}
.rowck > .inner:before,
.rowck > .inner:after {
display: none;;
}
/*------------- default width for columns (from bootstrap) ------------------*/
.pagebuilderck .row-fluid {
width: 100%;
*zoom: 1;
}
.pagebuilderck .row-fluid:before,
.pagebuilderck .row-fluid:after {
display: table;
line-height: 0;
content: "";
}
.pagebuilderck .row-fluid:after {
clear: both;
}
.pagebuilderck .row-fluid [class*="span"] {
display: block;
float: left;
width: 100%;
min-height: 30px;
margin-left: 2.127659574468085%;
*margin-left: 2.074468085106383%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.pagebuilderck .row-fluid [class*="span"]:first-child {
margin-left: 0;
}
.pagebuilderck .row-fluid .controls-row [class*="span"] + [class*="span"] {
margin-left: 2.127659574468085%;
}
.pagebuilderck .row-fluid .span12 {
width: 100%;
*width: 99.94680851063829%;
}
.pagebuilderck .row-fluid .span11 {
width: 91.48936170212765%;
*width: 91.43617021276594%;
}
.pagebuilderck .row-fluid .span10 {
width: 82.97872340425532%;
*width: 82.92553191489361%;
}
.pagebuilderck .row-fluid .span9 {
width: 74.46808510638297%;
*width: 74.41489361702126%;
}
.pagebuilderck .row-fluid .span8 {
width: 65.95744680851064%;
*width: 65.90425531914893%;
}
.pagebuilderck .row-fluid .span7 {
width: 57.44680851063829%;
*width: 57.39361702127659%;
}
.pagebuilderck .row-fluid .span6 {
width: 48.93617021276595%;
*width: 48.88297872340425%;
}
.pagebuilderck .row-fluid .span5 {
width: 40.42553191489362%;
*width: 40.37234042553192%;
}
.pagebuilderck .row-fluid .span4 {
width: 31.914893617021278%;
*width: 31.861702127659576%;
}
.pagebuilderck .row-fluid .span3 {
width: 23.404255319148934%;
*width: 23.351063829787233%;
}
.pagebuilderck .row-fluid .span2 {
width: 14.893617021276595%;
*width: 14.840425531914894%;
}
.pagebuilderck .row-fluid .span1 {
width: 6.382978723404255%;
*width: 6.329787234042553%;
}
/*------------- default jquery ui styles ------------------*/
.cktype .ui-helper-clearfix::before, .cktype .ui-helper-clearfix::after {
border-collapse: collapse;
content: "";
display: table;
}
.cktype .ui-helper-clearfix::after {
clear: both;
}
/*------------- styles for accordion ------------------*/
.cktype:not([data-type="faq"]) .ui-accordion .ui-accordion-header {
background: #fff;
display: block;
cursor: pointer;
position: relative;
margin: 2px 0 0 0;
padding: .5em .5em .5em .7em;
min-height: 0; /* support: IE7 */
font-size: 100%;
border: 1px solid #ddd;
border-radius: 0;
}
.cktype:not([data-type="faq"]) .ui-accordion .ui-accordion-icons {
padding-left: 2.2em;
}
.cktype:not([data-type="faq"]) .ui-accordion .ui-accordion-icons .ui-accordion-icons {
padding-left: 2.2em;
}
.cktype:not([data-type="faq"]) .ui-accordion .ui-accordion-header .ui-accordion-header-icon {
position: absolute;
left: .5em;
top: 50%;
margin-top: -8px;
}
.cktype:not([data-type="faq"]) .ui-accordion .ui-accordion-content {
padding: 1em 2.2em;
border-top: 0;
overflow: auto;
border: 1px solid #ddd;
border-top: none;
border-radius: 0;
}
.cktype:not([data-type="faq"]) .ui-icon {
display: block;
text-indent: -99999px;
overflow: hidden;
background-repeat: no-repeat;
}
.cktype:not([data-type="faq"]) .ui-accordion .ui-accordion-header .ui-accordion-header-icon {
position: absolute;
left: .5em;
top: 50%;
margin-top: -4px;
margin-left: 5px;
}
.cktype:not([data-type="faq"]) .ui-icon-triangle-1-e {
height: 0;
width: 0;
border-color: transparent transparent transparent #ddd;
border-style: solid;
border-width: 4px 0 4px 6px;
}
.cktype:not([data-type="faq"]) .ui-icon-triangle-1-s {
height: 0;
width: 0;
border-color: #ddd transparent transparent transparent;
border-style: solid;
border-width: 6px 4px 0 4px;
}
.cktype:not([data-type="faq"]) .ui-accordion .ui-accordion-header svg {
vertical-align: middle;
}
/*------------- styles for tabs ------------------*/
.cktype .ui-tabs {
border: none;
background: none;
border-radius: 0;
position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
padding: .2em;
}
.cktype .ui-tabs::after {
display: block;
content: "";
clear: both;
}
.cktype .ui-tabs .ui-tabs-nav {
border: none;
background: none;
border-radius: 0;
margin: 0;
padding: 0;
display: block;
}
.cktype > .ui-tabs.vertical_tabsck > .ui-tabs-nav {
float: left;
width: 200px;
}
.cktype > .ui-tabs.vertical_tabsck > .ui-tabs-nav ~ .tabck {
margin-left: 200px;
}
.cktype .ui-tabs .ui-tabs-nav li {
background: #fff;
list-style: none;
float: left;
position: relative;
top: 0;
margin: 1px .2em 0 0;
border-color: #ddd;
border-style: solid;
border-width: 1px;
border-bottom-width: 0;
padding: 0;
/*white-space: nowrap;*/
}
.cktype > .ui-tabs.vertical_tabsck > .ui-tabs-nav > li {
float: none;
border-bottom-width: 1px;
}
.cktype > .ui-tabs.vertical_tabsck > .ui-tabs-nav > li > a {
display: block;
float: none;
}
.cktype .ui-tabs .ui-tabs-nav li.ui-state-default {
background: #eee;
}
.cktype .ui-tabs .ui-tabs-nav li.ui-tabs-active {
background: #fff;
}
.cktype .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
float: left;
padding: .5em 1em;
text-decoration: none;
cursor: pointer;
}
.cktype .ui-tabs:not(.vertical_tabsck) .ui-tabs-nav li.ui-tabs-active {
margin-bottom: -1px;
padding-bottom: 1px;
}
.cktype .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.cktype .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.cktype .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
cursor: text;
}
.cktype .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
cursor: pointer;
}
.cktype .ui-tabs .ui-tabs-panel {
background: #fff;
display: block;
border-width: 0;
padding: 1em 1.4em;
background: none;
}
.cktype .ui-tabs.vertical_tabsck .ui-tabs-nav li svg {
vertical-align: middle;
}
/*------------- styles for button ------------------*/
.cktype > a.buttonck {
display: inline-block;
cursor: pointer;
}
/*------------- styles for message ------------------*/
.messageck > div {
display: inline-block;
}
.alertck {
padding: 8px 35px 8px 14px;
margin-bottom: 18px;
margin-top: 9px;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
background-color: #fcf8e3;
border: 1px solid #fbeed5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.alertck,
.alertck .messageck_title {
color: #c09853;
}
.alertck .messageck_title {
font-size: 14px;
line-height: 16px;
font-weight: bold;
margin: 0;
}
.alertck p {
padding: 5px 0;
margin: 0;
}
.alertck .close {
position: relative;
top: -2px;
right: -21px;
line-height: 18px;
}
.alertck-success {
background-color: #dff0d8;
border-color: #d6e9c6;
color: #468847;
}
.alertck-success .messageck_title {
color: #468847;
}
.alertck-danger,
.alertck-error {
background-color: #f2dede;
border-color: #eed3d7;
color: #b94a48;
}
.alertck-danger .messageck_title,
.alertck-error .messageck_title {
color: #b94a48;
}
.alertck-info {
background-color: #d9edf7;
border-color: #bce8f1;
color: #3a87ad;
}
.alertck-info .messageck_title {
color: #3a87ad;
}
/*------------- styles for separator ------------------*/
.separatorck {
overflow: hidden;
text-align: center;
padding: 10px;
color: #000;
}
.separatorck .separatorck_before,
.separatorck .separatorck_after {
background-color: #000;
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
.separatorck .separatorck_before {
right: 0.5em;
margin-left: -50%;
}
.separatorck .separatorck_after {
left: 0.5em;
margin-right: -50%;
}
/*------------- best compatibility for image effect CK ------------------*/
.imageck figure.imageeffectck {
/*display: block;
margin: 0;*/
}
/*------------- styles for video and other iframes ------------------*/
.videock, .iframeck {
position: relative;
height: 0;
overflow: hidden;
width: 100%;
padding-bottom: 56.25%;
max-width: 100%;
display: inline-block;
}
.videock iframe, .videock video,
.iframeck iframe, .iframeck video {
position: absolute;
height: 100%;
width: 100%;
border: none;
margin: 0;
padding: 0;
left: 0;
top: 0;
object-fit: cover;
}
.videockbackground {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background-size: cover;
}
.hasvideockbackground {
z-index: 0;
}
.pagebuilderck [data-type="icontext"] > .inner,
.pagebuilderck [data-layout] > .inner {
display: flex;
flex-direction: column;
}
.pagebuilderck [data-type="button"][data-layout] > .inner {
display: inline-flex;
}
/*.pagebuilderck [data-type="icontext"] .iconck,*/
.pagebuilderck [data-layout="left"] .iconck,
.pagebuilderck [data-layout="right"] .iconck {
align-self: center;
}
.pagebuilderck [data-layout] .titleck {
flex: 1 1 auto;
}
.pagebuilderck [data-type="icontext"][data-layout="bottom"] > .inner,
.pagebuilderck [data-layout="bottom"] > .inner {
flex-direction: column-reverse;
}
.pagebuilderck [data-type="icontext"][data-layout="left"] > .inner,
.pagebuilderck [data-layout="left"] > .inner {
flex-direction: row;
}
.pagebuilderck [data-type="icontext"][data-layout="right"] > .inner,
.pagebuilderck [data-layout="right"] > .inner {
flex-direction: row-reverse;
}
/* for shape divider */
.pbck-divider-container {
position: absolute;
overflow: hidden;
left: 0;
width: 100%;
}
.pbck-divider-container > svg {
position: relative;
height: 100%;
left: 50%;
transform: translate(-50%);
min-width: 100%;
}
.pbck-divider-container.pbck-divider-top {
top: -1px;
}
.pbck-divider-container.pbck-divider-bottom {
bottom: -1px;
}
.pbck-divider-container.pbck-divider-over {
z-index: 1;
}
.pbck-divider-container.pbck-divider-under {
z-index: 0;
}
.ckflip-horizontal > svg {
transform: rotateY(180deg) translate(50%);
}
.ckflip-vertical > svg {
transform: rotateX(180deg) translate(-50%);
}
.ckflip-horizontal.ckflip-vertical > svg {
transform: rotate(180deg) translate(50%);
}
.valign-top {
align-self: flex-start;
}
.valign-center {
align-self: center;
}
.valign-bottom {
align-self: flex-end;
}
.ckcustomcssfield {
display: none;
}
.rowck > .inner {
margin: auto;
}
/** for content type layout **/
.pagebuilderck div[class*="-group"].inner {
display: flex;
flex-direction: column;
margin-bottom: 5px;
}
.pagebuilderck div[class*="-group"][data-align="horizontal"].inner,
.pagebuilderck [data-align="horizontal"] {
flex-direction: row;
}
/** for columns space between **/
[data-columns-space-between="1"] > .inner,
.rowck > .inner {
justify-content: space-between;
}
[data-columns-space-between="0"] > .inner {
justify-content: normal;
}
.pbck-has-link-wrap {
position: relative;
}
a.pbck-link-wrap {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
background: transparent;
color: transparent;
text-indent: -999em;
}
a.pbck-link-wrap[data-custom-text="1"] {
color: inherit;
text-indent: inherit;
}
a.pbck-link-wrap[data-link-icon="1"]:hover::after,
.ckfakehover:hover > a.pbck-link-wrap[data-link-icon="1"]::after {
display: block;
content: "\f0c1";
text-indent: 0;
position: absolute;
left: 0;
top: 50%;
width: 100%;
color: inherit;
text-align: center;
transform: translate(0, -50%);
font-family: FontAwesome;
cursor: pointer;
}
.pagebuilderck audio {
min-height: 54px;
}
.messageck button.close {
padding: 3px;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
float: right;
font-size: 20px;
font-weight: bold;
line-height: 18px;
color: #000;
text-shadow: 0 1px 0 #ffffff;
opacity: 0.2;
filter: alpha(opacity=20);
}
.messageck button.close:hover {
color: #000;
text-decoration: none;
cursor: pointer;
opacity: 0.4;
filter: alpha(opacity=40);
}
.pagebuilderck .videock {
position: relative;
background: #000;
}
.pagebuilderck .videock-youtube-thumb {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
width: 100%;
left: 0;
}
.pagebuilderck .videock i-frame:before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 50px;
width: 70px;
background: rgba(0,0,0, 0.7);
border-radius: 50% / 15%;
pointer-events: none;
}
.pagebuilderck .videock:hover i-frame:before {
background: red;
}
.pagebuilderck .videock i-frame:after {
border-style: solid;
border-width: 1em 0 1em 1.732em;
border-color: transparent transparent transparent rgba(255, 255, 255, 1);
content: ' ';
font-size: 0.75em;
height: 0;
margin: -1em 0 0 -0.75em;
top: 50%;
left: 50%;
position: absolute;
width: 0;
pointer-events: none;
}
.cktype[data-type="faq"] [data-accordion="1"] .faqck-heading {
cursor: pointer;
}
.pagebuilderck [data-type="icontext"] .contentck {
flex: 1 1;
}
.pbck-divider-container svg {
max-width: none;
}
.separatorck[data-text="0"] .separatorck_after, .separatorck[data-text="0"] .separatorck_text {
display: none;
}
.separatorck[data-text="0"] .separatorck_before {
width: 100%;
margin-left: initial;
position: static;
}
.pagebuilderck:not(.workspaceck) .faqsck[data-display="accordion"] .faqck-heading + div {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.faqsck[data-display="accordion"] .faqck-heading {
cursor: pointer;
}
.noanimationck {
transition: none !important;
}
.moduleck svg,
.pageck svg {
max-width: 30px;
max-height: 30px;
fill: rgba(0,0,0,0.3);
float: left;
margin-right: 10px;
}
.workspaceck .moduleck,
.workspaceck .pageck {
border: 4px solid rgba(0,0,0,0.3);
border-radius: 8px;
padding: 10px;
margin: 3px;
display: flex;
align-items: center;
}
.moduleck_content {
display: flex;
}
.modulerow_title,
.pagerow_title {
margin-right: 10px;
display: inline-block;
}
.cktype[data-type="list"][data-orientation="horizontal"] .pbck_list_item,
.cktype[data-type="list"] .pbck_list_has_columns .pbck_list_item {
display: inline-block;
}
.cktype[data-type="list"] .pbck_list_has_columns .pbck_list_item {
min-width: 60%; /* used to avoid the items to align horizontally in the same row of the column */
}
.pbckicon {
line-height: 1;
}
.pbck_list_item {
display: flex;
}
.pbck_list_item .iconck {
flex: 0 0 auto;
}
/* for social icons */
a.pbck_social_icon {
text-decoration: none;
}
a.pbck_social_icon:before {
display: none;
}
.pbck_social_icons {
display: flex;
}