You are here

Home » API reference » Views FractionSlider 7.2

fractionslider.css in Views FractionSlider 7.2

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

.slider-wrapper {
  background: #1b1b1b none repeat scroll 0 0;
  border: 1px solid #000000;
  box-shadow: 0 3px 5px #666666;
  height: auto;
  max-height: 400px;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.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;
}
div.contextual-links-wrapper {
  z-index: 99999;
}
.views-ui-dialog {
  z-index: 99999;
}

File

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

  2. 

  3. .slider-wrapper {

  4.   background: #1b1b1b none repeat scroll 0 0;

  5.   border: 1px solid #000000;

  6.   box-shadow: 0 3px 5px #666666;

  7.   height: auto;

  8.   max-height: 400px;

  9.   overflow: hidden;

  10.   position: relative;

  11.   width: 100%;

  12. }

  13. .slider {

  14.   position: relative;

  15.   width: 100%;

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

  17.   margin: 0 auto;

  18.   background: #1b1b1b;

  19. }

  20. 

  21. /* ELEMENT STYLES */

  22. 

  23. .slider-wrapper p {

  24.   position: absolute;

  25.   top: -200px;

  26.   z-index: 8000;

  27.   padding: 1% 3%;

  28.   font-size: 24px;

  29.   line-height: 100%;

  30.   color: #fff;

  31.   white-space: nowrap;

  32. }

  33. .view .slider-wrapper p {

  34.   padding: 0;

  35.   position: static;

  36.   white-space: pre-wrap;

  37. }

  38. .claim {

  39.   line-height: 100%;

  40. }

  41. .slider-wrapper .teaser {

  42.   padding: 0.5% 1.5%;

  43.   font-size: 14px;

  44.   line-height: 100%;

  45. }

  46. .small {

  47.   width: 250px;

  48.   padding-left: 0;

  49.   padding-right: 0px;

  50.   text-align: center;

  51. }

  52. .light-green {

  53.   background: #95c542;

  54. }

  55. .green {

  56.   background: #7cb761;

  57. }

  58. .orange {

  59.   background: #ef7d00;

  60. }

  61. .turky {

  62.   background: #348e8a;

  63. }

  64. .white {

  65.   background: #fff;

  66.   color: #333;

  67. }

  68. .fraction-slider {

  69.   position: relative;

  70.   width: 100%;

  71.   height: 100%;

  72.   overflow: visible;

  73. }

  74. .fraction-slider .slide {

  75.   display: none;

  76.   width: 100%;

  77.   height: 100%;

  78.   position: absolute;

  79.   z-index: 5000;

  80. }

  81. .fraction-slider .active-slide {

  82.   z-index: 9999;

  83. }

  84. .fraction-slider .fs_obj {

  85.   display: block;

  86.   display: none;

  87.   position: absolute;

  88.   top: 0px;

  89.   left: 100%;

  90.   z-index: 7000;

  91. }

  92. .fraction-slider .fs_fixed_obj {

  93.   z-index: 6000;

  94.   left: 0;

  95. }

  96. .fraction-slider .fs_obj * {

  97.   display: inline-block;

  98.   position: relative;

  99.   top: 0px;

  100.   left: 0px;

  101. }

  102. .fs_loader {

  103.   width: 100%;

  104.   height: 400px;

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

  106. }

  107. 

  108. /** CONTROLS **/

  109. 

  110. .fraction-slider .prev,

  111. .fraction-slider .next {

  112.   display: none;

  113.   position: absolute;

  114.   width: 45px;

  115.   height: 45px;

  116.   z-index: 9999;

  117. }

  118. .fraction-slider .prev {

  119.   left: 10px;

  120.   top: 48%;

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

  122. }

  123. .fraction-slider .prev:hover {

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

  125. }

  126. .fraction-slider .next {

  127.   right: 10px;

  128.   top: 48%;

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

  130. }

  131. .fraction-slider .next:hover {

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

  133. }

  134. .fraction-slider:hover .prev,

  135. .fraction-slider:hover .next {

  136.   display: block;

  137. }

  138. 

  139. /** PAGER **/

  140. 

  141. .fs-pager-wrapper {

  142.   position: absolute;

  143.   left: 10px;

  144.   bottom: 10px;

  145.   z-index: 9999;

  146. }

  147. .fs-pager-wrapper a,

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

  149.   display: inline-block;

  150.   width: 14px;

  151.   height: 14px;

  152.   margin: 0 5px 0 0;

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

  154. }

  155. .fs-pager-wrapper .active,

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

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

  158. }

  159. div.contextual-links-wrapper {

  160.   z-index: 99999;

  161. }

  162. .views-ui-dialog {

  163.   z-index: 99999;

  164. }