240 lines
11 KiB
CSS
240 lines
11 KiB
CSS
/* stylelint-disable length-zero-no-unit */
|
|
/* stylelint-enable length-zero-no-unit */
|
|
.awb-circles-info {
|
|
--awb-max-width: 500px;
|
|
--awb-margin-top: 0;
|
|
--awb-margin-right: auto;
|
|
--awb-margin-bottom: 0;
|
|
--awb-margin-left: auto;
|
|
--awb-box-shadow-horizontal: 2px;
|
|
--awb-box-shadow-vertical: 2px;
|
|
--awb-box-shadow-blur: 5px;
|
|
--awb-box-shadow-spread: 1px;
|
|
--awb-box-shadow-color: var(--awb-color3);
|
|
--awb-content-padding: 7%;
|
|
--awb-icon-circle-size: 1px;
|
|
--awb-icon-circle-border-style: solid;
|
|
--awb-icon-circle-color: var(--awb-color3);
|
|
--awb-content-circle-size: 1px;
|
|
--awb-content-circle-border-style: solid;
|
|
--awb-content-circle-color: var(--awb-color3);
|
|
--awb-title-font-family: var(--h3_typography-font-family);
|
|
--awb-title-font-weight: var(--h3_typography-font-weight);
|
|
--awb-title-font-size: var(--h3_typography-font-style);
|
|
--awb-title-letter-spacing: var(--h3_typography-letter-spacing);
|
|
--awb-title-line-height: var(--h3_typography-line-height);
|
|
--awb-title-text-transform: var(--h3_typography-text-transform);
|
|
--awb-title-color: var(--awb-color8);
|
|
--awb-title-hover-color: var(--awb-color4);
|
|
--awb-content-font-family: var(--body_typography-font-family);
|
|
--awb-content-font-weight: var(--body_typography-font-weight);
|
|
--awb-content-font-size: var(--body_typography-font-size);
|
|
--awb-content-letter-spacing: var(--body_typography-letter-spacing);
|
|
--awb-content-line-height: var(--body_typography-line-height);
|
|
--awb-content-text-transform: none;
|
|
--awb-content-color: var(--awb-color8);
|
|
--awb-icon-size: 16px;
|
|
--awb-icon-bg-color: var(--awb-color4);
|
|
--awb-icon-border-size: 0;
|
|
--awb-icon-border-style: solid;
|
|
--awb-icon-border-color: var(--awb-color3);
|
|
--awb-icon-color: var(--awb-color1);
|
|
--awb-icon-bg-active-color: var(--awb-color8);
|
|
--awb-icon-active-color: var(--awb-color1);
|
|
--awb-icon-active-border-size: 0;
|
|
--awb-icon-active-border-style: solid;
|
|
--awb-icon-border-active-color: var(--awb-color8);
|
|
--awb-linear-angle: 180deg;
|
|
--awb-gradient-start-position: 0%;
|
|
--awb-gradient-end-position: 100%;
|
|
--awb-radial-direction: "circle at center center";
|
|
--awb-background-blend-mode: "normal";
|
|
max-width: var(--awb-max-width);
|
|
max-height: var(--awb-max-width);
|
|
width: 80vw;
|
|
height: 80vw;
|
|
border-radius: 100%;
|
|
position: relative;
|
|
margin-top: var(--awb-margin-top);
|
|
margin-right: var(--awb-margin-right);
|
|
margin-bottom: var(--awb-margin-bottom);
|
|
margin-left: var(--awb-margin-left);
|
|
}
|
|
.awb-circles-info.has-box-shadow .awb-circles-info-tab-link {
|
|
box-shadow: var(--awb-box-shadow-horizontal) var(--awb-box-shadow-vertical) var(--awb-box-shadow-blur) var(--awb-box-shadow-spread) var(--awb-box-shadow-color);
|
|
}
|
|
.awb-circles-info .awb-circles-info-wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: var(--awb-content-padding);
|
|
border: var(--awb-icon-circle-size) var(--awb-icon-circle-border-style) var(--awb-icon-circle-color);
|
|
border-radius: 100%;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
}
|
|
.awb-circles-info .awb-circles-info-wrapper .awb-circles-info-content-wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
overflow: hidden;
|
|
position: relative;
|
|
border: var(--awb-content-circle-size) var(--awb-content-circle-border-style) var(--awb-content-circle-color);
|
|
}
|
|
.awb-circles-info .awb-circles-info-wrapper .awb-circles-info-content-wrapper .awb-circles-info-title {
|
|
font-family: var(--awb-title-font-family);
|
|
font-weight: var(--awb-title-font-weight);
|
|
font-size: var(--awb-title-font-size);
|
|
letter-spacing: var(--awb-title-letter-spacing);
|
|
line-height: var(--awb-title-line-height);
|
|
text-transform: var(--awb-title-text-transform);
|
|
color: var(--awb-title-color);
|
|
}
|
|
.awb-circles-info .awb-circles-info-wrapper .awb-circles-info-content-wrapper .awb-circles-info-title a {
|
|
font-family: inherit;
|
|
font-weight: inherit;
|
|
font-size: inherit;
|
|
letter-spacing: inherit;
|
|
line-height: inherit;
|
|
text-transform: inherit;
|
|
color: inherit;
|
|
}
|
|
.awb-circles-info .awb-circles-info-wrapper .awb-circles-info-content-wrapper .awb-circles-info-title a:hover {
|
|
color: var(--awb-title-hover-color);
|
|
}
|
|
.awb-circles-info .awb-circles-info-wrapper .awb-circles-info-content-wrapper .awb-circles-info-title:hover {
|
|
color: var(--awb-title-hover-color);
|
|
}
|
|
.awb-circles-info .awb-circles-info-wrapper .awb-circles-info-content-wrapper .awb-circles-info-text {
|
|
font-family: var(--awb-content-font-family);
|
|
font-weight: var(--awb-content-font-weight);
|
|
font-size: var(--awb-content-font-size);
|
|
letter-spacing: var(--awb-content-letter-spacing);
|
|
line-height: var(--awb-content-line-height);
|
|
text-transform: var(--awb-content-text-transform);
|
|
color: var(--awb-content-color);
|
|
margin-top: 0.5em;
|
|
}
|
|
.awb-circles-info .awb-circles-info-wrapper .awb-circles-info-content-wrapper .awb-circles-info-content-area {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
flex-flow: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
padding: var(--awb-content-padding);
|
|
box-sizing: border-box;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
.awb-circles-info .awb-circles-info-wrapper .awb-circles-info-content-wrapper .awb-circles-info-content-area.link-area-box:hover {
|
|
cursor: pointer;
|
|
}
|
|
.awb-circles-info .awb-circles-info-wrapper .awb-circles-info-content-wrapper .awb-circles-info-content-area.link-area-box .awb-circles-info-title {
|
|
pointer-events: none;
|
|
}
|
|
.awb-circles-info .awb-circles-info-wrapper .awb-circles-info-content-wrapper .awb-circles-info-content-area.active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
.awb-circles-info .awb-circles-info-wrapper .awb-circles-info-icons-wrapper {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 50%;
|
|
z-index: 1;
|
|
transition: 1s transform ease-in-out;
|
|
}
|
|
.awb-circles-info .awb-circles-info-wrapper .awb-circles-info-icons-wrapper .awb-circles-info-tab-link {
|
|
width: calc(30px + var(--awb-icon-size));
|
|
height: calc(30px + var(--awb-icon-size));
|
|
background-color: var(--awb-icon-bg-color);
|
|
border-radius: 100%;
|
|
cursor: pointer;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
position: absolute;
|
|
z-index: 9;
|
|
border: var(--awb-icon-border-size) var(--awb-icon-border-style) var(--awb-icon-border-color);
|
|
color: var(--awb-icon-color);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin: auto;
|
|
transition: 0.5s background ease-in-out, 0.5s border-color ease-in-out, 0.7s transform ease-in-out;
|
|
font-size: var(--awb-icon-size);
|
|
}
|
|
.awb-circles-info .awb-circles-info-wrapper .awb-circles-info-icons-wrapper .awb-circles-info-tab-link span {
|
|
color: inherit;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.awb-circles-info .awb-circles-info-wrapper .awb-circles-info-icons-wrapper .awb-circles-info-tab-link i {
|
|
transition: 2s transform ease-in-out;
|
|
}
|
|
.awb-circles-info .awb-circles-info-wrapper .awb-circles-info-icons-wrapper .awb-circles-info-tab-link.active,
|
|
.awb-circles-info .awb-circles-info-wrapper .awb-circles-info-icons-wrapper .awb-circles-info-tab-link:hover {
|
|
background-color: var(--awb-icon-bg-active-color);
|
|
color: var(--awb-icon-active-color);
|
|
border: var(--awb-icon-active-border-size) var(--awb-icon-active-border-style) var(--awb-icon-border-active-color);
|
|
}
|
|
.awb-circles-info.has-bg-color .awb-circles-info-content-area:not(.has-bg-color) {
|
|
background-color: var(--awb-background-color);
|
|
}
|
|
.awb-circles-info.has-bg-gradient .awb-circles-info-content-area:not(.has-bg-color) {
|
|
background: linear-gradient(var(--awb-linear-angle), var(--awb-gradient-start-color) var(--awb-gradient-start-position), var(--awb-gradient-end-color) var(--awb-gradient-end-position));
|
|
}
|
|
.awb-circles-info.has-bg-gradient.gradient-type-radial .awb-circles-info-content-area:not(.has-bg-color) {
|
|
background: radial-gradient(var(--awb-radial-direction), var(--awb-gradient-start-color) var(--awb-gradient-start-position), var(--awb-gradient-end-color) var(--awb-gradient-end-position));
|
|
}
|
|
.awb-circles-info.has-bg-gradient.has-bg-image.gradient-type-radial .awb-circles-info-content-area:not(.has-bg-color) {
|
|
background-image: radial-gradient(var(--awb-radial-direction), var(--awb-gradient-start-color) var(--awb-gradient-start-position), var(--awb-gradient-end-color) var(--awb-gradient-end-position)), var(--awb-background-image) !important;
|
|
}
|
|
.awb-circles-info.has-bg-gradient.has-bg-image.gradient-type-linear .awb-circles-info-content-area:not(.has-bg-color) {
|
|
background-image: linear-gradient(var(--awb-gradient-start-color) var(--awb-gradient-start-position), var(--awb-gradient-end-color) var(--awb-gradient-end-position)), var(--awb-background-image) !important;
|
|
}
|
|
.awb-circles-info.has-bg-image .awb-circles-info-content-area:not(.has-bg-color) {
|
|
background-image: var(--awb-background-image) !important;
|
|
background-size: cover !important;
|
|
background-position: var(--awb-background-position) !important;
|
|
background-blend-mode: var(--awb-background-blend-mode) !important;
|
|
}
|
|
.awb-circles-info .awb-circles-info-content-wrapper .fusion-builder-live-child-element {
|
|
height: inherit;
|
|
position: initial;
|
|
}
|
|
.awb-circles-info .awb-circles-info-content-wrapper .fusion-builder-live-child-element .fusion-builder-child-element-content {
|
|
height: inherit;
|
|
position: initial;
|
|
}
|
|
.awb-circles-info .awb-circles-info-content-wrapper .awb-circles-info-content-area.has-bg-color {
|
|
background-color: var(--awb-background-color);
|
|
}
|
|
.awb-circles-info .awb-circles-info-content-wrapper .awb-circles-info-content-area.has-bg-gradient.gradient-type-linear {
|
|
background: linear-gradient(var(--awb-linear-angle), var(--awb-gradient-start-color) var(--awb-gradient-start-position), var(--awb-gradient-end-color) var(--awb-gradient-end-position));
|
|
}
|
|
.awb-circles-info .awb-circles-info-content-wrapper .awb-circles-info-content-area.has-bg-gradient.gradient-type-radial {
|
|
background: radial-gradient(var(--awb-radial-direction), var(--awb-gradient-start-color) var(--awb-gradient-start-position), var(--awb-gradient-end-color) var(--awb-gradient-end-position));
|
|
}
|
|
.awb-circles-info .awb-circles-info-content-wrapper .awb-circles-info-content-area.has-bg-gradient.has-bg-image.gradient-type-linear {
|
|
background-image: linear-gradient(var(--awb-gradient-start-color) var(--awb-gradient-start-position), var(--awb-gradient-end-color) var(--awb-gradient-end-position)), var(--awb-background-image) !important;
|
|
}
|
|
.awb-circles-info .awb-circles-info-content-wrapper .awb-circles-info-content-area.has-bg-gradient.has-bg-image.gradient-type-radial {
|
|
background-image: radial-gradient(var(--awb-radial-direction), var(--awb-gradient-start-color) var(--awb-gradient-start-position), var(--awb-gradient-end-color) var(--awb-gradient-end-position)), var(--awb-background-image) !important;
|
|
}
|
|
.awb-circles-info .awb-circles-info-content-wrapper .awb-circles-info-content-area.has-bg-image {
|
|
background-image: var(--awb-background-image) !important;
|
|
background-size: cover !important;
|
|
background-position: var(--awb-background-position) !important;
|
|
background-blend-mode: var(--awb-background-blend-mode) !important;
|
|
}
|