You are here

Home » API reference » Media Hero Slider 8.4

varbase_hero_slider_media.style.css in Media Hero Slider 8.4 

/* Varbase Hero slider media style */
.varbase-heroslider-media .slide__caption {
  position: absolute;
  left: 0;
  bottom: 20%;
  top: auto;
}
.varbase-heroslider-media .slide__caption .slide__title a {
  color: #fff;
}
.varbase-heroslider-media .slide__caption .slick__text {
  color: #fff;
}
.varbase-heroslider-media .slick__arrow .slick-arrow::before {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
}
.varbase-heroslider-media .slide__link {
  margin: 10px auto;
}
.varbase-heroslider-media .slide__link a {
  color: #fff;
}
.varbase-heroslider-media .slick-slide .slide__caption {
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transform: scale(0.95);
  transform: scale(0.95);
  -webkit-transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s;
  transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s;
  transition: transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s;
}
.varbase-heroslider-media .slick-slide .img-responsive {
  -webkit-transition: -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
}
.varbase-heroslider-media .slick-slide .unpublished {
  padding: 0;
  height: auto;
}
.varbase-heroslider-media .slick-active .slide__caption {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, -webkit-transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
  transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, -webkit-transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
  transition: transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
  transition: transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, -webkit-transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.varbase-heroslider-media .slick-active .img-responsive {
  webkit-transition: -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.varbase-heroslider-media .node--type-varbase-heroslider-media.node--view-mode-full {
  position: relative;
}
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content {
  position: absolute;
  bottom: 7%;
  padding: 1.2em;
  z-index: 999;
  width: 100%;
}
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .container .row {
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.3);
}
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field {
  padding: 1.2em;
  color: #fff;
}
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title {
  bottom: 30%;
}
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h2,
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h3 {
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: 3em;
}
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-field-brief {
  bottom: 20%;
  color: #fff;
}
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-field-link {
  bottom: 10%;
}
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-field-link a {
  color: #fff;
  text-decoration: none;
}
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-field-link a:hover,
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-field-link a:focus,
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-field-link a:active {
  opacity: 0.7;
}
.varbase-heroslider-media > .view-empty {
  background-color: #e0e0e0;
  padding: 385px 0 75px;
  text-align: center;
  color: #666;
  background-repeat: no-repeat;
  background-position: 50% 75px;
  font-size: 20pt;
  /* Icons made by DinosoftLabs (https://www.flaticon.com/authors/dinosoftlabs) from www.flaticon.com. And is licensed by CC 3.0 BY. */
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAzMjEuNDk0IDMyMS40OTQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyMS40OTQgMzIxLjQ5NDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIyNTZweCIgaGVpZ2h0PSIyNTZweCI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTY2Ljg4LDIwOC43NDd2NzcuNzVsNjcuMzY3LTM4LjgxN0w2Ni44OCwyMDguNzQ3eiBNODAuNzQ3LDIzMi44NTRsMjUuODEzLDE0LjkzM2wtMjUuODEzLDE0LjgyN1YyMzIuODU0eiIgZmlsbD0iI2E4YThhOCIvPgoJPC9nPgo8L2c+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTAsMTczLjg2N3YxNDcuNjI3aDE4Ny43MzNWMTczLjg2N0gweiBNMTczLjg2NywzMDcuNjI3aC0xNjBWMTg3LjczNGgxNjBWMzA3LjYyN3oiIGZpbGw9IiNhOGE4YTgiLz4KCTwvZz4KPC9nPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik02Ni44OCwwdjE2MC45NmgyNTQuNjEzVjBINjYuODh6IE0zMDcuNjI4LDE0Ny4wOTRIODAuNzQ3VjEzLjg2N2gyMjYuODhWMTQ3LjA5NHoiIGZpbGw9IiNhOGE4YTgiLz4KCTwvZz4KPC9nPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0xNTkuMjU1LDIwLjY5NGMtMTEuOTQ3LDAtMjEuNzYsOS44MTMtMjEuNzYsMjEuNzZjMCwxMS45NDcsOS44MTMsMjEuNzYsMjEuNzYsMjEuNzZjMTEuOTQ2LDAsMjEuNzYtOS44MTMsMjEuNzYtMjEuNzYgICAgQzE4MS4wMTUsMzAuNTA3LDE3MS4yMDEsMjAuNjk0LDE1OS4yNTUsMjAuNjk0eiBNMTU5LjI1NSw1MC4zNDZjLTQuMzczLDAtNy44OTMtMy41Mi03Ljg5My03Ljg5M3MzLjUyLTcuODkzLDcuODkzLTcuODkzICAgIHM3Ljg5MywzLjUyLDcuODkzLDcuODkzUzE2My42MjgsNTAuMzQ2LDE1OS4yNTUsNTAuMzQ2eiIgZmlsbD0iI2E4YThhOCIvPgoJPC9nPgo8L2c+CjxnPgoJPGc+CgkJPHBvbHlnb24gcG9pbnRzPSIzMDkuNzYsMjkuOTc0IDI1MS43MzQsODUuNTQ3IDIxNy43MDgsNTIuOTA3IDE2Mi43NzUsMTA1LjQ5NCAxMjYuMTg3LDcwLjUwNyA2OS4wMTUsMTI1LjEyIDc4LjYxNCwxMzUuMTQ3ICAgICAxMjYuMTg3LDg5LjcwNyAxNjIuNzc1LDEyNC42OTQgMjE3LjcwOCw3Mi4xMDcgMjUxLjczNCwxMDQuNzQ3IDMxOS4zNjEsNDAgICAiIGZpbGw9IiNhOGE4YTgiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
}
@media all and (max-width: 750px) {
  .varbase-heroslider-media > .view-empty {
    padding: 165px 0 75px;
    background-position: 50% 13%;
    font-size: 17pt;
    background-size: 100px;
  }
}
body .hero_slider {
  color: #fff;
  margin-bottom: 50px;
  position: relative;
  top: -20px;
}

File

css/varbase_hero_slider_media.style.css
View source 
  1. /* Varbase Hero slider media style */

  2. .varbase-heroslider-media .slide__caption {

  3.   position: absolute;

  4.   left: 0;

  5.   bottom: 20%;

  6.   top: auto;

  7. }

  8. .varbase-heroslider-media .slide__caption .slide__title a {

  9.   color: #fff;

  10. }

  11. .varbase-heroslider-media .slide__caption .slick__text {

  12.   color: #fff;

  13. }

  14. .varbase-heroslider-media .slick__arrow .slick-arrow::before {

  15.   color: #fff;

  16.   background-color: rgba(0, 0, 0, 0.3);

  17.   border-radius: 50%;

  18. }

  19. .varbase-heroslider-media .slide__link {

  20.   margin: 10px auto;

  21. }

  22. .varbase-heroslider-media .slide__link a {

  23.   color: #fff;

  24. }

  25. .varbase-heroslider-media .slick-slide .slide__caption {

  26.   opacity: 0;

  27.   filter: alpha(opacity=0);

  28.   -webkit-transform: scale(0.95);

  29.   transform: scale(0.95);

  30.   -webkit-transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s;

  31.   transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s;

  32.   transition: transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  33.   transition: transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s;

  34. }

  35. .varbase-heroslider-media .slick-slide .img-responsive {

  36.   -webkit-transition: -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  37.   transition: -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  38.   transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  39.   transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  40.   -webkit-transform: scale(1.15);

  41.   transform: scale(1.15);

  42. }

  43. .varbase-heroslider-media .slick-slide .unpublished {

  44.   padding: 0;

  45.   height: auto;

  46. }

  47. .varbase-heroslider-media .slick-active .slide__caption {

  48.   opacity: 1;

  49.   filter: alpha(opacity=100);

  50.   -webkit-transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, -webkit-transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;

  51.   transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, -webkit-transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;

  52.   transition: transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;

  53.   transition: transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, -webkit-transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;

  54.   -webkit-transform: scale(1);

  55.   transform: scale(1);

  56. }

  57. .varbase-heroslider-media .slick-active .img-responsive {

  58.   webkit-transition: -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  59.   transition: -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  60.   transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  61.   transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  62.   -webkit-transform: scale(1);

  63.   transform: scale(1);

  64. }

  65. .varbase-heroslider-media .node--type-varbase-heroslider-media.node--view-mode-full {

  66.   position: relative;

  67. }

  68. .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content {

  69.   position: absolute;

  70.   bottom: 7%;

  71.   padding: 1.2em;

  72.   z-index: 999;

  73.   width: 100%;

  74. }

  75. .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .container .row {

  76.   background-color: #000000;

  77.   background-color: rgba(0, 0, 0, 0.3);

  78. }

  79. .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field {

  80.   padding: 1.2em;

  81.   color: #fff;

  82. }

  83. .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title {

  84.   bottom: 30%;

  85. }

  86. .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h2,

  87. .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-node-title h3 {

  88.   margin: 0;

  89.   padding: 0;

  90.   color: #fff;

  91.   font-size: 3em;

  92. }

  93. .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-field-brief {

  94.   bottom: 20%;

  95.   color: #fff;

  96. }

  97. .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-field-link {

  98.   bottom: 10%;

  99. }

  100. .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-field-link a {

  101.   color: #fff;

  102.   text-decoration: none;

  103. }

  104. .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-field-link a:hover,

  105. .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-field-link a:focus,

  106. .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content .field--name-field-link a:active {

  107.   opacity: 0.7;

  108. }

  109. .varbase-heroslider-media > .view-empty {

  110.   background-color: #e0e0e0;

  111.   padding: 385px 0 75px;

  112.   text-align: center;

  113.   color: #666;

  114.   background-repeat: no-repeat;

  115.   background-position: 50% 75px;

  116.   font-size: 20pt;

  117.   /* Icons made by DinosoftLabs (https://www.flaticon.com/authors/dinosoftlabs) from www.flaticon.com. And is licensed by CC 3.0 BY. */

  118.   background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAzMjEuNDk0IDMyMS40OTQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyMS40OTQgMzIxLjQ5NDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIyNTZweCIgaGVpZ2h0PSIyNTZweCI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTY2Ljg4LDIwOC43NDd2NzcuNzVsNjcuMzY3LTM4LjgxN0w2Ni44OCwyMDguNzQ3eiBNODAuNzQ3LDIzMi44NTRsMjUuODEzLDE0LjkzM2wtMjUuODEzLDE0LjgyN1YyMzIuODU0eiIgZmlsbD0iI2E4YThhOCIvPgoJPC9nPgo8L2c+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTAsMTczLjg2N3YxNDcuNjI3aDE4Ny43MzNWMTczLjg2N0gweiBNMTczLjg2NywzMDcuNjI3aC0xNjBWMTg3LjczNGgxNjBWMzA3LjYyN3oiIGZpbGw9IiNhOGE4YTgiLz4KCTwvZz4KPC9nPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik02Ni44OCwwdjE2MC45NmgyNTQuNjEzVjBINjYuODh6IE0zMDcuNjI4LDE0Ny4wOTRIODAuNzQ3VjEzLjg2N2gyMjYuODhWMTQ3LjA5NHoiIGZpbGw9IiNhOGE4YTgiLz4KCTwvZz4KPC9nPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0xNTkuMjU1LDIwLjY5NGMtMTEuOTQ3LDAtMjEuNzYsOS44MTMtMjEuNzYsMjEuNzZjMCwxMS45NDcsOS44MTMsMjEuNzYsMjEuNzYsMjEuNzZjMTEuOTQ2LDAsMjEuNzYtOS44MTMsMjEuNzYtMjEuNzYgICAgQzE4MS4wMTUsMzAuNTA3LDE3MS4yMDEsMjAuNjk0LDE1OS4yNTUsMjAuNjk0eiBNMTU5LjI1NSw1MC4zNDZjLTQuMzczLDAtNy44OTMtMy41Mi03Ljg5My03Ljg5M3MzLjUyLTcuODkzLDcuODkzLTcuODkzICAgIHM3Ljg5MywzLjUyLDcuODkzLDcuODkzUzE2My42MjgsNTAuMzQ2LDE1OS4yNTUsNTAuMzQ2eiIgZmlsbD0iI2E4YThhOCIvPgoJPC9nPgo8L2c+CjxnPgoJPGc+CgkJPHBvbHlnb24gcG9pbnRzPSIzMDkuNzYsMjkuOTc0IDI1MS43MzQsODUuNTQ3IDIxNy43MDgsNTIuOTA3IDE2Mi43NzUsMTA1LjQ5NCAxMjYuMTg3LDcwLjUwNyA2OS4wMTUsMTI1LjEyIDc4LjYxNCwxMzUuMTQ3ICAgICAxMjYuMTg3LDg5LjcwNyAxNjIuNzc1LDEyNC42OTQgMjE3LjcwOCw3Mi4xMDcgMjUxLjczNCwxMDQuNzQ3IDMxOS4zNjEsNDAgICAiIGZpbGw9IiNhOGE4YTgiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);

  119. }

  120. @media all and (max-width: 750px) {

  121.   .varbase-heroslider-media > .view-empty {

  122.     padding: 165px 0 75px;

  123.     background-position: 50% 13%;

  124.     font-size: 17pt;

  125.     background-size: 100px;

  126.   }

  127. }

  128. body .hero_slider {

  129.   color: #fff;

  130.   margin-bottom: 50px;

  131.   position: relative;

  132.   top: -20px;

  133. }