You are here

Home » API reference » Views FractionSlider 7

fractionslider.css in Views FractionSlider 7 

.fractionslider-wrapper {
    background: none repeat scroll 0 0 #1B1B1B;
    border: 1px solid #000000;
    box-shadow: 0 3px 5px #666666;
}
.fractionslider {
    height: 500px;
}
.fractionslider .views-field {
    color: #FFFFFF;
    position: absolute;
    top: -200px;
    white-space: normal;
    z-index: 8000;
}
.fraction-slider {
    height: 100%;
    overflow: visible;
    position: relative;
    width: 100%;
}
.fraction-slider .slide {
    display: none;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 5000;
}
.fraction-slider .active-slide {
    z-index: 9999;
}
.fraction-slider .fs_obj {
    display: none;
    left: 100%;
    position: absolute;
    top: 0;
    z-index: 7000;
}
.fraction-slider .fs_fixed_obj {
    left: 0;
    z-index: 6000;
}
.fraction-slider .fs_obj * {
    display: inline-block;
    left: 0;
    position: relative;
    top: 0;
}
.fs_loader {
    background: url("images/fs.spinner.gif") no-repeat scroll center center transparent;
    height: 400px;
    width: 100%;
}
.fraction-slider .prev, .fraction-slider .next {
    display: none;
    height: 45px;
    position: absolute;
    width: 45px;
    z-index: 9999;
}
.fraction-slider .prev {
    background: url("images/fs.prevnext.png") no-repeat scroll 0 0 transparent;
    left: 10px;
    top: 45%;
}
.fraction-slider .prev:hover {
    background: url("images/fs.prevnext.png") no-repeat scroll 0 -45px transparent;
}
.fraction-slider .next {
    background: url("images/fs.prevnext.png") no-repeat scroll -45px 0 transparent;
    right: 10px;
    top: 185px;
}
.fraction-slider .next:hover {
    background: url("images/fs.prevnext.png") no-repeat scroll -45px -45px transparent;
}
.fraction-slider:hover .prev, .fraction-slider:hover .next {
    display: block;
}
.fs-pager-wrapper {
    bottom: 10px;
    left: 10px;
    position: absolute;
    z-index: 9999;
}
.fs-pager-wrapper a {
    background: url("images/fs.pager.png") no-repeat scroll 0 -14px transparent;
    display: inline-block;
    height: 14px;
    margin: 0 5px 0 0;
    width: 14px;
}
.fs-pager-wrapper .active {
    background: url("images/fs.pager.png") no-repeat scroll 0 0 transparent;
}

File

fractionslider/css/fractionslider.css
View source 
  1. 

  2. .fractionslider-wrapper {

  3.     background: none repeat scroll 0 0 #1B1B1B;

  4.     border: 1px solid #000000;

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

  6. }

  7. .fractionslider {

  8.     height: 500px;

  9. }

  10. .fractionslider .views-field {

  11.     color: #FFFFFF;

  12.     position: absolute;

  13.     top: -200px;

  14.     white-space: normal;

  15.     z-index: 8000;

  16. }

  17. .fraction-slider {

  18.     height: 100%;

  19.     overflow: visible;

  20.     position: relative;

  21.     width: 100%;

  22. }

  23. .fraction-slider .slide {

  24.     display: none;

  25.     height: 100%;

  26.     position: absolute;

  27.     width: 100%;

  28.     z-index: 5000;

  29. }

  30. .fraction-slider .active-slide {

  31.     z-index: 9999;

  32. }

  33. .fraction-slider .fs_obj {

  34.     display: none;

  35.     left: 100%;

  36.     position: absolute;

  37.     top: 0;

  38.     z-index: 7000;

  39. }

  40. .fraction-slider .fs_fixed_obj {

  41.     left: 0;

  42.     z-index: 6000;

  43. }

  44. .fraction-slider .fs_obj * {

  45.     display: inline-block;

  46.     left: 0;

  47.     position: relative;

  48.     top: 0;

  49. }

  50. .fs_loader {

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

  52.     height: 400px;

  53.     width: 100%;

  54. }

  55. .fraction-slider .prev, .fraction-slider .next {

  56.     display: none;

  57.     height: 45px;

  58.     position: absolute;

  59.     width: 45px;

  60.     z-index: 9999;

  61. }

  62. .fraction-slider .prev {

  63.     background: url("images/fs.prevnext.png") no-repeat scroll 0 0 transparent;

  64.     left: 10px;

  65.     top: 45%;

  66. }

  67. .fraction-slider .prev:hover {

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

  69. }

  70. .fraction-slider .next {

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

  72.     right: 10px;

  73.     top: 185px;

  74. }

  75. .fraction-slider .next:hover {

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

  77. }

  78. .fraction-slider:hover .prev, .fraction-slider:hover .next {

  79.     display: block;

  80. }

  81. .fs-pager-wrapper {

  82.     bottom: 10px;

  83.     left: 10px;

  84.     position: absolute;

  85.     z-index: 9999;

  86. }

  87. .fs-pager-wrapper a {

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

  89.     display: inline-block;

  90.     height: 14px;

  91.     margin: 0 5px 0 0;

  92.     width: 14px;

  93. }

  94. .fs-pager-wrapper .active {

  95.     background: url("images/fs.pager.png") no-repeat scroll 0 0 transparent;

  96. }