You are here

Home » API reference » Views FractionSlider 8

fractionslider.css in Views FractionSlider 8

Same filename and directory in other branches
  1. 7.2 css/fractionslider.css
/* SLIDER STYLES */

.slider-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
  background: #1b1b1b;
  border: 1px solid #000;
  box-shadow: 0 3px 5px #666;
}
.slider {
  position: relative;
  width: 100%;
  /*  height:400px; when responsive, comment this out */
  margin: 0 auto;
  background: #1b1b1b;
}

/* ELEMENT STYLES */

.slider-wrapper p {
  position: absolute;
  top: -200px;
  z-index: 8000;
  padding: 1% 3%;
  font-size: 24px;
  line-height: 100%;
  color: #fff;
  white-space: nowrap;
}
.view .slider-wrapper p {
  padding: 0;
  position: static;
  white-space: pre-wrap;
}
.claim {
  line-height: 100%;
}
.slider-wrapper .teaser {
  padding: 0.5% 1.5%;
  font-size: 14px;
  line-height: 100%;
}
.small {
  width: 250px;
  padding-left: 0;
  padding-right: 0px;
  text-align: center;
}
.light-green {
  background: #95c542;
}
.green {
  background: #7cb761;
}
.orange {
  background: #ef7d00;
}
.turky {
  background: #348e8a;
}
.white {
  background: #fff;
  color: #333;
}
.fraction-slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.fraction-slider .slide {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 5000;
}
.fraction-slider .active-slide {
  z-index: 9999;
}
.fraction-slider .fs_obj {
  display: block;
  display: none;
  position: absolute;
  top: 0px;
  left: 100%;
  z-index: 7000;
}
.fraction-slider .fs_fixed_obj {
  z-index: 6000;
  left: 0;
}
.fraction-slider .fs_obj * {
  display: inline-block;
  position: relative;
  top: 0px;
  left: 0px;
}
.fs_loader {
  width: 100%;
  height: 400px;
  background: url(images/fs.spinner.gif) center center no-repeat transparent;
}

/** CONTROLS **/

.fraction-slider .prev,
.fraction-slider .next {
  display: none;
  position: absolute;
  width: 45px;
  height: 45px;
  z-index: 9999;
}
.fraction-slider .prev {
  left: 10px;
  top: 48%;
  background: url(images/fs.prevnext.png) 0px 0px no-repeat transparent;
}
.fraction-slider .prev:hover {
  background: url(images/fs.prevnext.png) 0px -45px no-repeat transparent;
}
.fraction-slider .next {
  right: 10px;
  top: 48%;
  background: url(images/fs.prevnext.png) -45px 0px no-repeat transparent;
}
.fraction-slider .next:hover {
  background: url(images/fs.prevnext.png) -45px -45px no-repeat transparent;
}
.fraction-slider:hover .prev,
.fraction-slider:hover .next {
  display: block;
}

/** PAGER **/

.fs-pager-wrapper {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 9999;
}
.fs-pager-wrapper a,
.fs-custom-pager-wrapper a {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0 5px 0 0;
  background: url(images/fs.pager.png) 0px -14px no-repeat transparent;
}
.fs-pager-wrapper .active,
.fs-custom-pager-wrapper .active {
  background: url(images/fs.pager.png) 0px 0px no-repeat transparent;
}
.block-fractionslider .contextual {
  z-index: 99999;
}

File

css/fractionslider.css
View source 
  1. /* SLIDER STYLES */

  2. 

  3. .slider-wrapper {

  4.   position: relative;

  5.   overflow: hidden;

  6.   width: 100%;

  7.   height: auto;

  8.   background: #1b1b1b;

  9.   border: 1px solid #000;

  10.   box-shadow: 0 3px 5px #666;

  11. }

  12. .slider {

  13.   position: relative;

  14.   width: 100%;

  15.   /*  height:400px; when responsive, comment this out */

  16.   margin: 0 auto;

  17.   background: #1b1b1b;

  18. }

  19. 

  20. /* ELEMENT STYLES */

  21. 

  22. .slider-wrapper p {

  23.   position: absolute;

  24.   top: -200px;

  25.   z-index: 8000;

  26.   padding: 1% 3%;

  27.   font-size: 24px;

  28.   line-height: 100%;

  29.   color: #fff;

  30.   white-space: nowrap;

  31. }

  32. .view .slider-wrapper p {

  33.   padding: 0;

  34.   position: static;

  35.   white-space: pre-wrap;

  36. }

  37. .claim {

  38.   line-height: 100%;

  39. }

  40. .slider-wrapper .teaser {

  41.   padding: 0.5% 1.5%;

  42.   font-size: 14px;

  43.   line-height: 100%;

  44. }

  45. .small {

  46.   width: 250px;

  47.   padding-left: 0;

  48.   padding-right: 0px;

  49.   text-align: center;

  50. }

  51. .light-green {

  52.   background: #95c542;

  53. }

  54. .green {

  55.   background: #7cb761;

  56. }

  57. .orange {

  58.   background: #ef7d00;

  59. }

  60. .turky {

  61.   background: #348e8a;

  62. }

  63. .white {

  64.   background: #fff;

  65.   color: #333;

  66. }

  67. .fraction-slider {

  68.   position: relative;

  69.   width: 100%;

  70.   height: 100%;

  71.   overflow: visible;

  72. }

  73. .fraction-slider .slide {

  74.   display: none;

  75.   width: 100%;

  76.   height: 100%;

  77.   position: absolute;

  78.   z-index: 5000;

  79. }

  80. .fraction-slider .active-slide {

  81.   z-index: 9999;

  82. }

  83. .fraction-slider .fs_obj {

  84.   display: block;

  85.   display: none;

  86.   position: absolute;

  87.   top: 0px;

  88.   left: 100%;

  89.   z-index: 7000;

  90. }

  91. .fraction-slider .fs_fixed_obj {

  92.   z-index: 6000;

  93.   left: 0;

  94. }

  95. .fraction-slider .fs_obj * {

  96.   display: inline-block;

  97.   position: relative;

  98.   top: 0px;

  99.   left: 0px;

  100. }

  101. .fs_loader {

  102.   width: 100%;

  103.   height: 400px;

  104.   background: url(images/fs.spinner.gif) center center no-repeat transparent;

  105. }

  106. 

  107. /** CONTROLS **/

  108. 

  109. .fraction-slider .prev,

  110. .fraction-slider .next {

  111.   display: none;

  112.   position: absolute;

  113.   width: 45px;

  114.   height: 45px;

  115.   z-index: 9999;

  116. }

  117. .fraction-slider .prev {

  118.   left: 10px;

  119.   top: 48%;

  120.   background: url(images/fs.prevnext.png) 0px 0px no-repeat transparent;

  121. }

  122. .fraction-slider .prev:hover {

  123.   background: url(images/fs.prevnext.png) 0px -45px no-repeat transparent;

  124. }

  125. .fraction-slider .next {

  126.   right: 10px;

  127.   top: 48%;

  128.   background: url(images/fs.prevnext.png) -45px 0px no-repeat transparent;

  129. }

  130. .fraction-slider .next:hover {

  131.   background: url(images/fs.prevnext.png) -45px -45px no-repeat transparent;

  132. }

  133. .fraction-slider:hover .prev,

  134. .fraction-slider:hover .next {

  135.   display: block;

  136. }

  137. 

  138. /** PAGER **/

  139. 

  140. .fs-pager-wrapper {

  141.   position: absolute;

  142.   left: 10px;

  143.   bottom: 10px;

  144.   z-index: 9999;

  145. }

  146. .fs-pager-wrapper a,

  147. .fs-custom-pager-wrapper a {

  148.   display: inline-block;

  149.   width: 14px;

  150.   height: 14px;

  151.   margin: 0 5px 0 0;

  152.   background: url(images/fs.pager.png) 0px -14px no-repeat transparent;

  153. }

  154. .fs-pager-wrapper .active,

  155. .fs-custom-pager-wrapper .active {

  156.   background: url(images/fs.pager.png) 0px 0px no-repeat transparent;

  157. }

  158. .block-fractionslider .contextual {

  159.   z-index: 99999;

  160. }