/* This is the core CSS of Tooltipster */
/* GENERAL STRUCTURE RULES (do not edit this section) */
.tooltipster-base {
/* this ensures that a constrained height set by functionPosition,
if greater that the natural height of the tooltip, will be enforced
in browsers that support display:flex */
display: flex;
pointer-events: none;
/* this may be overriden in JS for fixed position origins */
position: absolute;
}
.tooltipster-box {
/* see .tooltipster-base. flex-shrink 1 is only necessary for IE10-
and flex-basis auto for IE11- (at least) */
flex: 1 1 auto;
}
.tooltipster-content {
/* prevents an overflow if the user adds padding to the div */
box-sizing: border-box;
/* these make sure we'll be able to detect any overflow */
max-height: 100%;
max-width: 100%;
overflow: auto;
}
.tooltipster-ruler {
/* these let us test the size of the tooltip without overflowing the window */
bottom: 0;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
top: 0;
visibility: hidden;
}
/* ANIMATIONS */
/* Open/close animations */
/* fade */
.tooltipster-fade {
opacity: 0;
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-o-transition-property: opacity;
-ms-transition-property: opacity;
transition-property: opacity;
}
.tooltipster-fade.tooltipster-show {
opacity: 1;
}
/* grow */
.tooltipster-grow {
-webkit-transform: scale(0,0);
-moz-transform: scale(0,0);
-o-transform: scale(0,0);
-ms-transform: scale(0,0);
transform: scale(0,0);
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -ms-transform;
transition-property: transform;
-webkit-backface-visibility: hidden;
}
.tooltipster-grow.tooltipster-show {
-webkit-transform: scale(1,1);
-moz-transform: scale(1,1);
-o-transform: scale(1,1);
-ms-transform: scale(1,1);
transform: scale(1,1);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}
/* swing */
.tooltipster-swing {
opacity: 0;
-webkit-transform: rotateZ(4deg);
-moz-transform: rotateZ(4deg);
-o-transform: rotateZ(4deg);
-ms-transform: rotateZ(4deg);
transform: rotateZ(4deg);
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -ms-transform;
transition-property: transform;
}
.tooltipster-swing.tooltipster-show {
opacity: 1;
-webkit-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
transform: rotateZ(0deg);
-webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 1);
-webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
-moz-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
-ms-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
-o-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
}
/* fall */
.tooltipster-fall {
-webkit-transition-property: top;
-moz-transition-property: top;
-o-transition-property: top;
-ms-transition-property: top;
transition-property: top;
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}
.tooltipster-fall.tooltipster-initial {
top: 0 !important;
}
.tooltipster-fall.tooltipster-show {
}
.tooltipster-fall.tooltipster-dying {
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
-ms-transition-property: all;
transition-property: all;
top: 0 !important;
opacity: 0;
}
/* slide */
.tooltipster-slide {
-webkit-transition-property: left;
-moz-transition-property: left;
-o-transition-property: left;
-ms-transition-property: left;
transition-property: left;
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}
.tooltipster-slide.tooltipster-initial {
left: -40px !important;
}
.tooltipster-slide.tooltipster-show {
}
.tooltipster-slide.tooltipster-dying {
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
-ms-transition-property: all;
transition-property: all;
left: 0 !important;
opacity: 0;
}
/* Update animations */
/* We use animations rather than transitions here because
transition durations may be specified in the style tag due to
animationDuration, and we try to avoid collisions and the use
of !important */
/* fade */
@keyframes tooltipster-fading {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.tooltipster-update-fade {
animation: tooltipster-fading 400ms;
}
/* rotate */
@keyframes tooltipster-rotating {
25% {
transform: rotate(-2deg);
}
75% {
transform: rotate(2deg);
}
100% {
transform: rotate(0);
}
}
.tooltipster-update-rotate {
animation: tooltipster-rotating 600ms;
}
/* scale */
@keyframes tooltipster-scaling {
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.tooltipster-update-scale {
animation: tooltipster-scaling 600ms;
}
/**
* DEFAULT STYLE OF THE SIDETIP PLUGIN
*
* All styles are "namespaced" with .tooltipster-sidetip to prevent
* conflicts between plugins.
*/
/* .tooltipster-box */
.tooltipster-sidetip .tooltipster-box {
background: #565656;
border: 2px solid black;
border-radius: 4px;
}
.tooltipster-sidetip.tooltipster-left .tooltipster-box {
margin-right: 8px;
}
.tooltipster-sidetip.tooltipster-right .tooltipster-box {
margin-left: 8px;
}
.tooltipster-sidetip.tooltipster-top .tooltipster-box {
margin-bottom: 8px;
}
/* .tooltipster-content */
.tooltipster-sidetip .tooltipster-content {
color: white;
line-height: 18px;
padding: 6px 14px;
}
/* .tooltipster-arrow : will keep only the zone of .tooltipster-arrow-uncropped that
corresponds to the arrow we want to display */
.tooltipster-sidetip .tooltipster-arrow {
overflow: hidden;
position: absolute;
}
.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow {
height: 10px;
/* half the width, for centering */
margin-left: -10px;
top: 0;
width: 20px;
}
.tooltipster-sidetip.tooltipster-left .tooltipster-arrow {
height: 20px;
margin-top: -10px;
right: 0;
/* top 0 to keep the arrow from overflowing .tooltipster-base when it has not
been positioned yet */
top: 0;
width: 10px;
}
.tooltipster-sidetip.tooltipster-right .tooltipster-arrow {
height: 20px;
margin-top: -10px;
left: 0;
/* same as .tooltipster-left .tooltipster-arrow */
top: 0;
width: 10px;
}
.tooltipster-sidetip.tooltipster-top .tooltipster-arrow {
bottom: 0;
height: 10px;
margin-left: -10px;
width: 20px;
}
/* common rules between .tooltipster-arrow-background and .tooltipster-arrow-border */
.tooltipster-sidetip .tooltipster-arrow-background, .tooltipster-sidetip .tooltipster-arrow-border {
height: 0;
position: absolute;
width: 0;
}
/* .tooltipster-arrow-background */
.tooltipster-sidetip .tooltipster-arrow-background {
border: 10px solid transparent;
}
.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background {
border-bottom-color: #565656;
left: 0;
top: 3px;
}
.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-background {
border-left-color: #565656;
left: -3px;
top: 0;
}
.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-background {
border-right-color: #565656;
left: 3px;
top: 0;
}
.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background {
border-top-color: #565656;
left: 0;
top: -3px;
}
/* .tooltipster-arrow-border */
.tooltipster-sidetip .tooltipster-arrow-border {
border: 10px solid transparent;
left: 0;
top: 0;
}
.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border {
border-bottom-color: black;
}
.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-border {
border-left-color: black;
}
.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border {
border-right-color: black;
}
.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border {
border-top-color: black;
}
/* tooltipster-arrow-uncropped */
.tooltipster-sidetip .tooltipster-arrow-uncropped {
position: relative;
}
.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-uncropped {
top: -10px;
}
.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-uncropped {
left: -10px;
}
@media (min-width: 960px) {
body .sby-tooltip-wizard.tooltipster-sidetip {
left: 50px !important;
top: 74px !important;
}
}
.wp-editor .sby-tooltip-wizard{
-webkit-transform: translateY(63px) translateX(17px);
transform: translateY(63px) translateX(17px);
}
.sby-tooltip-wizard.tooltipster-sidetip .tooltipster-box{
background: #fff!important;
border: 1px solid #eee!important;
border-radius: 2px!important;
box-shadow: 0px 1px 18px rgba(0,0,0,0.2)!important;
}
.sby-tooltip-wizard.tooltipster-sidetip .tooltipster-content{
color: #434960!important;
line-height: 18px;
padding: 6px 20px!important;
position: relative;
}
.sby-tooltip-wizard .sby-tooltip-wizard-head {
color: #141B38;
font-size: 15px;
margin-bottom: 8px;
width: 100%;
float: left;
display: block
}
.sby-tooltip-wizard .sby-tooltip-wizard-txt{
margin-bottom: 15px;
}
.sby-tooltip-wizard .sby-tooltip-wizard-actions button{
background: #F3F4F5!important;
cursor: pointer!important;
border: 1px solid #DCDDE1!important;
padding: 5px 20px!important;
}
.sby-tooltip-wizard .sby-tooltip-wizard-actions{
margin-bottom: 10px;
}
.sby-tooltip-wizard.tooltipster-sidetip .tooltipster-box:before, .sby-tooltip-wizard.tooltipster-sidetip .tooltipster-box:after {
content: '';
position: absolute;
width: 20px;
height: 20px;
left: 20%;
top: -8px;
background: #fff;
box-shadow: 0px 1px 18px rgba(0,0,0,0.2);
z-index: 3;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.sby-tooltip-wizard.tooltipster-sidetip .tooltipster-box:after {
background: #fff;
z-index: 999;
top: 2px;
margin-left: -10px;
width: 40px;
box-shadow: unset;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.sby-tooltip-wizard.tooltipster-sidetip .tooltipster-arrow{
display: none;
}
#sby-gutenberg-tooltip-content{
display: none;
}
.sby-tlp-wizard-cls{
position: absolute;
width: 20px;
height: 20px;
right: 14px;
top: 14px;
cursor: pointer;
}
.sby-tlp-wizard-cls:before, .sby-tlp-wizard-cls:after{
content: '';
position: absolute;
width: 16px;
height: 2px;
background: #141B38;
left: 3px;
top: 7px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.sby-tlp-wizard-cls:after{
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.sby-tooltip-wizard.tooltipster-sidetip #sby-gutenberg-tooltip-content{
display: block;
}
.sby-tooltip-wizard.tooltipster-sidetip {
margin-top: 40px;
margin-left: 74px;
}
.is-fullscreen-mode .sby-tooltip-wizard.tooltipster-sidetip {
margin-top: 10px;
margin-left: -28px;
}
@media (max-width: 960px) {
.sby-tooltip-wizard.tooltipster-sidetip {
margin-left: 0;
}
}
@media (max-width: 782px) {
.sby-tooltip-wizard.tooltipster-sidetip .tooltipster-box:before,
.sby-tooltip-wizard.tooltipster-sidetip .tooltipster-box:after {
left: 30px;
}
}
@media (max-width: 599px) {
.sby-tooltip-wizard.tooltipster-sidetip .tooltipster-box:before,
.sby-tooltip-wizard.tooltipster-sidetip .tooltipster-box:after {
left: 15px;
}
}