Current Path : /storage/v11800/affypharma/public_html/wp-content/plugins/cool-timeline/includes/shortcodes/assets/css/ |
Linux v11800 5.3.0-1023-aws #25~18.04.1-Ubuntu SMP Fri Jun 5 15:19:18 UTC 2020 aarch64
|
Current File : /storage/v11800/affypharma/public_html/wp-content/plugins/cool-timeline/includes/shortcodes/assets/css/ctl-horizontal-timeline.css |
/* --------------------------- Horizontal Wrapper --------------------------- */
.ctl-horizontal-timeline {
--ctw-ibx-position: 50;
--ctw-ybx-size: 50px;
--ctw-ybx-text-size: 16px;
--ctw-cbx-text-align: center;
--ctw-cbx-img-order: 0;
--nav-icon-height: 30px;
--nav-icon-width: 30px;
--nav-icon-color: var(--ctw-line-bg, #222);
--nav-icon-radius: 0;
--nav-icon-bd-width: 0px;
--nav-icon-bd-clr: var(--ctw-line-bg);
--nav-icon-bd-style: solid;
overflow: visible;
--ctw-ibx-radius: 0;
padding: 0px;
max-width: 100%;
--ctw-cbx-img-padding: 10px 10px 10px 10px;
}
.ctl-wrapper .ctl-horizontal-timeline{
--ctw-cbx-date-font-size: 13px;
--ctw-cbx-date-font-weight: 500;
--ctw-cbx-title-font-size: 15px;
--ctw-cbx-title-font-weight: 500;
}
.ctl-wrapper .ctl-horizontal-wrapper .ctl-story.odd .ctl-label-big {
--ctw-lbl-big-color: var(--ctw-lbel-big-color, var(--ctw-first-story-color));
}
.ctl-wrapper .ctl-horizontal-wrapper .ctl-story.even .ctl-label-big {
--ctw-lbl-big-color: var(--ctw-lbel-big-color, var(--ctw-second-story-color));
}
.ctl-wrapper .ctl-horizontal-timeline {
width: 100%;
display: block;
position: relative;
}
.ctl-wrapper .ctl-horizontal-timeline {
width: calc(100% - var(--nav-icon-width) * 2);
margin: 0 var(--nav-icon-width);
}
.ctl-wrapper-inside {
overflow: hidden;
position: relative;
}
/* ------------------------ Horizontal Wrapper - END ------------------------ */
/* --------------------------------- Slider --------------------------------- */
.ctl-wrapper .ctl-horizontal-timeline .ctl-slider-container {
width: calc(100% - var(--ctw-cbx-space));
margin: 0 calc(var(--ctw-cbx-space) * 0.5px);
display: block;
position: relative;
}
.ctl-wrapper .ctl-horizontal-timeline .ctl-slider-container.swiper-container {
overflow: hidden;
transition: height .3s ease-in-out;
}
/* ------------------------------ Slider - END ------------------------------ */
/* --------------------------- Next / Prev Buttons -------------------------- */
.ctl-wrapper .ctl-horizontal-timeline .ctl-button-prev,
.ctl-wrapper .ctl-horizontal-timeline .ctl-button-next {
position: absolute;
top: calc(calc(0px + var(--ctw-lbl-big-size) + var(--ctw-lbl-small-size) + var(--ctw-lbl-gap) + 20px + var(--ctw-ibx-size) - var(--nav-icon-height) * .5 + var(--lbl-bd-width)*2));
background: var(--nav-icon-background);
color: var(--nav-icon-color);
width: var(--nav-icon-width);
height: var(--nav-icon-height);
font-size: calc(var(--nav-icon-height) - 6px);
line-height: 1em;
border: var(--nav-icon-bd-width) var(--nav-icon-bd-style) var(--nav-icon-bd-clr);
display: flex;
justify-content: center;
align-items: center;
z-index: 9;
cursor: pointer;
border-radius: 50%;
font-size: 17px;
}
.ctl-wrapper .ctl-horizontal-timeline :where(.ctl-button-prev,.ctl-button-next).ctl-btn-click-effect::after{
content: '';
position: absolute;
width: calc(100% * 1.9);
height: calc(100% * 1.9);
background-color: var(--ctw-line-bg);
transform: scale3d(1.2, 1.2, 1);
animation: ctl-btn-effect 0.6s forwards;
z-index: -1;
border-radius: 50%;
}
@keyframes ctl-btn-effect {
0% {
transform: scale3d(0.3, 0.3, 1);
}
25%, 50% {
opacity: .2;
}
100% {
opacity: 0;
transform: scale3d(1.2, 1.2, 1);
}
}
.ctl-wrapper .ctl-horizontal-timeline .ctl-button-prev svg path,
.ctl-wrapper .ctl-horizontal-timeline .ctl-button-next svg path {
fill: var(--nav-icon-color);
}
.ctl-wrapper .ctl-horizontal-timeline .ctl-button-prev:hover svg path,
.ctl-wrapper .ctl-horizontal-timeline .ctl-button-next:hover svg path {
fill: #ffffff;
}
.ctl-wrapper .ctl-horizontal-timeline :where(.ctl-button-prev, .ctl-button-next).swiper-button-disabled {
opacity: 0.5;
cursor: not-allowed !important;
}
.ctl-wrapper .ctl-horizontal-timeline .ctl-button-prev:hover,
.ctl-wrapper .ctl-horizontal-timeline .ctl-button-next:hover {
background: var(--ctw-line-bg)!important;
color: #ffffff!important;
border-color: var(--ctw-line-bg)!important;
}
.ctl-wrapper .ctl-horizontal-timeline .ctl-button-next {
right: calc(0px - var(--nav-icon-width));
}
.ctl-wrapper .ctl-horizontal-timeline .ctl-button-prev {
left: calc(0px - var(--nav-icon-width));
}
.ctl-button-next i.fas.fa-long-arrow-alt-right {
display: block !important;
}
/* ------------------------ Next / Prev Buttons - END ----------------------- */
/* ---------------------------- Horizontal Line ---------------------------- */
.ctl-wrapper .ctl-horizontal-timeline .ctl-story-line {
position: absolute;
top: calc(0px - var(--ctw-ibx-size) - var(--ctw-line-width) / 2);
left: calc(0px - var(--ctw-cbx-space) * 0.5px);
display: block;
width: calc(100% + var(--ctw-cbx-space) * 1px);
height: var(--ctw-line-width);
background-color: var(--ctw-line-bg);
border-width: calc(var(--ctw-line-bd-width) * 1px) 0px calc(var(--ctw-line-bd-width) * 1px) 0px;
border-style: var(--ctw-line-bd-style);
border-color: var(--ctw-line-bd-color);
}
/* -------------------------- Horizontal Line - END ------------------------ */
/* -------------------------------- Line Fill ------------------------------- */
.ctl-wrapper .ctl-horizontal-timeline .ctl-h-line {
position: absolute;
top: calc(0px + var(--ctw-lbl-big-size) + var(--ctw-lbl-small-size) + var(--ctw-lbl-gap) + 20px + var(--ctw-ibx-size) - var(--ctw-line-width) * 0.5);
left: 0;
display: block;
width: 100%;
height: var(--ctw-line-width);
background-color: var(--ctw-line-bg);
border-width: calc(var(--ctw-line-bd-width) * 1px) 0px calc(var(--ctw-line-bd-width) * 1px) 0px;
border-style: var(--ctw-line-bd-style);
border-color: var(--ctw-line-bd-color);
}
/* ----------------------------- Line Fill - END ---------------------------- */
/* ------------------------ Line Year Box Horizontal ------------------------ */
.ctl-wrapper .ctl-horizontal-timeline .ctl-year {
position: absolute;
top: calc(var(--ctw-ibx-size) / 1 - var(--ctw-ibx-size) * 2 - (var(--ctw-ybx-size) * ((60 + var(--ctw-ibx-radius) / 1.25) / 100) - var(--ctw-ibx-size)) / 2);
margin: 0;
justify-content: flex-start;
width: auto;
}
.ctl-wrapper .ctl-horizontal-timeline :where(.ctl-year-text:before, .ctl-year-text:after) {
width: calc(var(--ctw-ybx-bd-width) + var(--ctw-line-width) * 0.1);
height: calc(var(--ctw-line-width) - var(--ctw-line-bd-width) * 2px);
top: calc(50% - (var(--ctw-line-width) - var(--ctw-line-bd-width) * 2px) / 2);
}
.ctl-wrapper .ctl-horizontal-timeline .ctl-year-text:before {
left: 0;
}
.ctl-wrapper .ctl-horizontal-timeline .ctl-year-text:after {
right: 0;
}
.ctl-wrapper .ctl-horizontal-wrapper .ctl-year-label.ctl-year-text {
position: absolute;
left: calc(100% - var(--ctw-ybx-size) * 2);
box-shadow: 0 0 0 2px white, inset 0 0 0 2px rgba(0, 0, 0, 0.05), 0 0 0 5px var(--ctw-line-bg);
}
.ctl-wrapper .ctl-horizontal-wrapper .ctl-year-label.ctl-year-text {
left: calc(100% - var(--ctw-ybx-size) * 1.5);
}
.ctl-wrapper .ctl-horizontal-wrapper .ctl-year-text {
box-shadow: none;
}
/* --------------------- Line Year Box Horizontal - END --------------------- */
/* ---------------------------- Labels Horizontal --------------------------- */
.ctl-wrapper .ctl-horizontal-timeline .ctl-labels {
justify-content: var(--ctw-lbl-justify);
top: calc(0px - (var(--ctw-lbl-big-size) + var(--ctw-lbl-small-size) + var(--ctw-lbl-gap)) - var(--ctw-ibx-size) * 2);
height: calc(var(--ctw-lbl-big-size) + var(--ctw-lbl-small-size) + var(--ctw-lbl-gap));
text-align: center;
}
.ctl-wrapper .ctl-horizontal-wrapper .ctl-story.even .ctl-labels {
padding-top: 40px;
}
/* ----------------------Label Arrow CSS - Start----------------------*/
.ctl-wrapper .ctl-horizontal-timeline .ctl-story {
margin-bottom: 10px;
margin-top: calc(var(--ctw-ibx-size) * 2 + var(--ctw-lbl-big-size) + var(--ctw-lbl-small-size) + var(--ctw-lbl-gap) + 20px + var(--lbl-bd-width)*2) !important;
display: flex;
justify-content: center;
}
/* ----------------------horizontal-line css style - start ----------------------*/
.ctl-wrapper .ctl-horizontal-timeline .ctl-h-line{
top: calc(0px + var(--ctw-lbl-big-size) + var(--ctw-lbl-small-size) + var(--ctw-lbl-gap) + 20px + var(--ctw-ibx-size) - var(--ctw-line-width) * .5 + var(--lbl-bd-width)*2) !important;
}
/* ----------------------horizontal-line css style - end ----------------------*/
/* ------------------------- Labels Horizontal - END ------------------------ */
/* ------------------------ Icon / Dot Box Horizontal ----------------------- */
.ctl-wrapper .ctl-horizontal-timeline .ctl-icon {
left: calc(var(--ctw-ibx-position) * 1% - var(--ctw-ibx-size) * var(--ctw-ibx-position) / 100);
top: calc(var(--ctw-ibx-size) / 2 - var(--ctw-ibx-size) * 2);
}
.ctl-wrapper .ctl-horizontal-timeline .ctl-icondot {
top: calc(var(--ctw-ibx-size) * 0.75 - var(--ctw-ibx-size) * 2);
left: calc(var(--ctw-ibx-position) * 1% - var(--ctw-ibx-size) * var(--ctw-ibx-position) / 100 + var(--ctw-ibx-size) / 4);
}
.ctl-wrapper .ctl-horizontal-timeline :where(.ctl-icondot:before, .ctl-icondot:after, .ctl-icon:before, .ctl-icon:after) {
width: calc(var(--ctw-ibx-bd-width) + var(--ctw-line-width) * 0.1);
height: calc(var(--ctw-line-width) - var(--ctw-line-bd-width) * 2px);
top: calc(50% - (var(--ctw-line-width) - var(--ctw-line-bd-width) * 2px) / 2);
}
.ctl-wrapper .ctl-horizontal-timeline :where(.ctl-icondot:before, .ctl-icon:before) {
left: calc(0px - var(--ctw-ibx-bd-width));
}
.ctl-wrapper .ctl-horizontal-timeline :where(.ctl-icondot:after, .ctl-icon:after) {
right: calc(0px - var(--ctw-ibx-bd-width));
}
.ctl-wrapper .ctl-horizontal-wrapper .ctl-media a {
width: calc(var(--ctw-cbx-img-width) - (var(--ctw-cbx-img-margin-left) + var(--ctw-cbx-img-margin-right)));
}
/* --------------------- Icon / Dot Box Horizontal - END -------------------- */
/* ----------------------- Story Box Arrow Horizontal ----------------------- */
.ctl-wrapper .ctl-horizontal-timeline .ctl-story {
display: flex;
justify-content: center;
}
.ctl-wrapper .ctl-horizontal-timeline .ctl-story:nth-child(odd) {
--ctw-arw-bg: var(--ctw-first-story-color, var(--ctw-cbx-des-color, var(--ctw-cbx-title-color)));
}
.ctl-wrapper .ctl-horizontal-timeline .ctl-story:nth-child(even) {
--ctw-arw-bg: var(--ctw-second-story-color, var(--ctw-cbx-des-color, var(--ctw-cbx-title-color)));
}
.ctl-wrapper .ctl-horizontal-timeline .ctl-arrow {
background: linear-gradient(to bottom right, var(--ctw-arw-bg, var(--ctw-cbx-title-bg)) 52%, transparent 48%);
top: calc(var(--ctw-ibx-size) / 7 - var(--ctw-ibx-size) / 2.65 + var(--ctw-cbx-bd-top-width) / 3);
left: calc(var(--ctw-ibx-position) * 1% - var(--ctw-ibx-size) * var(--ctw-ibx-position) / 100 + var(--ctw-ibx-size) / - var(--ctw-ibx-size) / 7);
border-width: var(--ctw-cbx-bd-top-width) 0 0 var(--ctw-cbx-bd-top-width);
}
/* -------------------- Story Box Arrow Horizontal - END -------------------- */
/* -------------------------- Story Box Horizontal -------------------------- */
.ctl-wrapper .ctl-horizontal-timeline .ctl-story {
margin-top: calc(var(--ctw-ibx-size) * 2 + var(--ctw-lbl-big-size) + var(--ctw-lbl-small-size) + var(--ctw-lbl-gap) + 20px);
}
.ctl-wrapper .ctl-horizontal-timeline .ctl-story.swiper-slide {
overflow: visible;
}
/* ----------------------- Story Box Horizontal - END ----------------------- */
/* ------------------------ Story Content Horizontal ------------------------ */
.ctl-wrapper .ctl-horizontal-timeline .ctl-content {
flex-flow: row;
flex-wrap: wrap;
margin: 0 10px;
height: 100%;
width: 100%;
}
.ctl-wrapper .ctl-horizontal-timeline .ctl-title {
width: 100%;
order: unset;
}
.ctl-wrapper .ctl-horizontal-wrapper .ctl-title {
background-color: #ffffff00 !important;
padding-top: 110px;
}
.ctl-wrapper .ctl-horizontal-wrapper .ctl-story.even .ctl-title {
padding-top: 60px;
}
.ctl-wrapper .ctl-horizontal-wrapper .ctl-title {
text-align: center;
}
.ctl-wrapper .ctl-horizontal-wrapper .ctl-story:nth-child(odd) .ctl-title :where(a, a:hover) {
color: var(--ctw-first-story-color);
}
.ctl-wrapper .ctl-horizontal-wrapper .ctl-story.even .ctl-title :where(a, a:hover) {
color: var(--ctw-second-story-color);
}
.ctl-wrapper .ctl-horizontal-wrapper :where(.ctl-media, .full-width, .ctl-description) {
display: none !important;
}
.ctl-wrapper .ctl-horizontal-wrapper .ctl-content {
background-color: #ffffff00 !important;
}
.ctl-wrapper .ctl-horizontal-wrapper .ctl-icondot {
border-radius: 50%;
}
/* --------------------- Story Content Horizontal - END --------------------- */
/* --------------Horizontal bottom start ------*/
.ctl-wrapper .ctl-horizontal-wrapper .ctl-arrow {
transform: rotate(360deg);
width: 2px;
height: 36px;
background: linear-gradient(to bottom, var(--ctw-arw-bg) 0, rgba(229, 229, 229, 0) 100%);
top: calc(var(--ctw-ibx-size) / 7 - var(--ctw-ibx-size) / 1.1 + var(--ctw-cbx-bd-top-width) / 3);
left: calc(var(--ctw-ibx-position) * 1% - var(--ctw-ibx-size) * var(--ctw-ibx-position) / 150 + var(--ctw-ibx-size) / 2.2 - var(--ctw-ibx-size) / 7);
z-index: 1;
}
.ctl-wrapper .ctl-horizontal-wrapper .ctl-story:nth-child(odd) .ctl-arrow {
background: linear-gradient(to bottom, var(--ctw-arw-bg) 0, rgba(229, 229, 229, 0) 100%);
height: 92px;
}
/* --------------Horizontal bottom End ------*/
.ctl-wrapper .ctl-horizontal-wrapper .ctl-labels {
top: unset;
z-index: 9;
padding-top: 100px;
}
.ctl-wrapper .ctl-horizontal-wrapper .ctl-story.odd .ctl-label-big {
color: var(--ctw-lbl-big-color);
}
.ctl-wrapper .ctl-horizontal-wrapper .ctl-story.even .ctl-label-big {
color: var(--ctw-lbl-big-color);
}
.ctl-wrapper .ctl-horizontal-wrapper .ctl-story.even .ctl-labels {
padding-top: 40px;
}
.ctl-wrapper .ctl-horizontal-wrapper .ctl-year-label.ctl-year-text {
top: -20px;
}
.ctl-wrapper .ctl-horizontal-wrapper .ctl-icon {
z-index: 2;
border-radius: 50%;
left: calc(var(--ctw-ibx-position) * 1% - var(--ctw-ibx-size) * var(--ctw-ibx-position) / 115);
}
.ctl-wrapper .ctl-horizontal-wrapper.ctl-content-empty .ctl-button-prev,
.ctl-wrapper .ctl-horizontal-wrapper.ctl-content-empty .ctl-button-next,
.ctl-wrapper .ctl-horizontal-wrapper.ctl-content-empty .ctl-h-line {
display: none;
}
.ctl-wrapper .ctl-horizontal-wrapper.ctl-content-empty .ctl-slider-wrapper {
display: flex;
justify-content: center;
}
.ctl-wrapper .ctl-horizontal-timeline.ctl-content-empty .ctl-slider-container {
margin-top: 0px;
}
@media screen and (max-width:768px) {
.ctl-wrapper .cool-timeline-wrapper.ctl-horizontal-wrapper .ctl-year-label.ctl-year-text {
left: calc(100% - var(--ctw-ybx-size) * 2);
}
}
@media (max-width: 445px) {
.ctl-wrapper .cool-timeline-wrapper.ctl-horizontal-wrapper .ctl-year-label.ctl-year-text {
left: calc(100% - var(--ctw-ybx-size) * 1.6);
}
.ctl-wrapper .ctl-horizontal-timeline .ctl-content
{
margin: 0px;
padding: 0px;
}
}