You are here

views_galleriffic_default.css in Views Galleriffic 7

Same filename and directory in other branches
  1. 6 css/views_galleriffic_default.css
/* Views Galleriffic default css
 * Based off of css from original: http://www.twospy.com/galleriffic/index.html
 */

#galleriffic .controls {
  width: 500px;
}
#galleriffic span.image-caption {
  top: 0;
  left: 0;
  border: 1px solid #ccc;
  background-color: #eaeaea;
  width: 100%;
  position: absolute;
  display: block;
  width: 500px;
}
#galleriffic #thumbs {
  float: left;
  width: 190px;
}
#galleriffic .loader {
  background-image: url('loader.gif');
  background-repeat: no-repeat;
  background-position: center;
  width: 510px;
  height: 350px
}
#slideshow-container {
  position: relative;
  clear: both;
  padding: 0 0 10px 0;
}
#galleriffic .content a, #galleriffic .navigation a {
  text-decoration: none;
  color: #777;
}
#galleriffic .content  a:focus, #galleriffic .content  a:hover, #galleriffic .content  a:active {
  text-decoration: underline;
}
#galleriffic .controls a {
  padding: 0 5px;
}
#galleriffic .content {
  float: left;
}
#galleriffic .ss-controls {
  float: left;
}
#galleriffic .nav-controls {
  float: right;
}
#galleriffic .slideshow {
  position: relative;
}
#galleriffic .slideshow img {
  border: none;
  display: block;
}
#galleriffic .download {
  float: right;
}
#galleriffic .image-title {
  font-weight: bold;
  font-size: 1.4em;
}
#galleriffic .image-desc {
  line-height: 1.3em;
  padding-top: 12px;
}
#galleriffic ul.thumbs {
  clear: both;
  margin: 0;
  padding: 0;
}
#galleriffic ul.thumbs li {
  float: left;
  padding: 0;
  margin: 5px 10px 5px 0;
  list-style: none;
}
#galleriffic a.thumb {
  padding: 2px;
  display: block;
  border: 1px solid #ccc;
}
#galleriffic ul.thumbs li.selected a.thumb {
   background: #000;
}
#galleriffic a.thumb:focus {
  outline: none;
}
#galleriffic ul.thumbs img {
  border: none;
  display: block;
}
#galleriffic .pagination {
  clear: both;
}
#galleriffic .navigation.top {
  margin-bottom: 12px;
  height: 11px;
}
#galleriffic .navigation.bottom {
  margin-top: 12px;
}
#galleriffic .pagination a, #galleriffic .pagination span.current {
  display: block;
  float: left;
  margin-right: 2px;
  padding: 4px 7px 2px 7px;
  border: 1px solid #ccc;
}
#galleriffic .pagination a:hover {
  background-color: #eee;
  text-decoration: none;
}
#galleriffic .pagination span.current {
  font-weight: bold;
  background-color: #000;
  border-color: #000;
  color: #fff;
}
#galleriffic .slideshow,
#galleriffic .loader,
#galleriffic .slideshow a.advance-link,
#galleriffic .caption-container {
  clear: both;
}
#galleriffic .slideshow-container {
  position: relative;
  clear: both;
  float: left;
}
#galleriffic .slideshow span.image-wrapper {
  display: block;
  position: absolute;
  left: 0;
}
#galleriffic .slideshow a.advance-link {
  display: block;
  line-height: 402px; /* This should be set to be at least the height of the largest image in the slideshow with padding */
  text-align: center;
  display: block;
}
#galleriffic .slideshow a.advance-link img {
  padding: 2px;
  border: 1px solid #ccc;
}
#galleriffic .slideshow a.advance-link:hover,
#galleriffic .slideshow a.advance-link:active,
#galleriffic .slideshow a.advance-link:visited {
  text-decoration: none;
}
#galleriffic #caption {
  position: relative;
  margin: 0 7px 0 0;
}
#galleriffic .caption {
  padding: 0 5px;
}
#galleriffic span.image-wrapper {
  top: 0;
  width: 100%;
  position: absolute;
}
#galleriffic .ellipsis {
  float: left;
}

File

css/views_galleriffic_default.css
View source
  1. /* Views Galleriffic default css
  2. * Based off of css from original: http://www.twospy.com/galleriffic/index.html
  3. */
  4. #galleriffic .controls {
  5. width: 500px;
  6. }
  7. #galleriffic span.image-caption {
  8. top: 0;
  9. left: 0;
  10. border: 1px solid #ccc;
  11. background-color: #eaeaea;
  12. width: 100%;
  13. position: absolute;
  14. display: block;
  15. width: 500px;
  16. }
  17. #galleriffic #thumbs {
  18. float: left;
  19. width: 190px;
  20. }
  21. #galleriffic .loader {
  22. background-image: url('loader.gif');
  23. background-repeat: no-repeat;
  24. background-position: center;
  25. width: 510px;
  26. height: 350px
  27. }
  28. #slideshow-container {
  29. position: relative;
  30. clear: both;
  31. padding: 0 0 10px 0;
  32. }
  33. #galleriffic .content a, #galleriffic .navigation a {
  34. text-decoration: none;
  35. color: #777;
  36. }
  37. #galleriffic .content a:focus, #galleriffic .content a:hover, #galleriffic .content a:active {
  38. text-decoration: underline;
  39. }
  40. #galleriffic .controls a {
  41. padding: 0 5px;
  42. }
  43. #galleriffic .content {
  44. float: left;
  45. }
  46. #galleriffic .ss-controls {
  47. float: left;
  48. }
  49. #galleriffic .nav-controls {
  50. float: right;
  51. }
  52. #galleriffic .slideshow {
  53. position: relative;
  54. }
  55. #galleriffic .slideshow img {
  56. border: none;
  57. display: block;
  58. }
  59. #galleriffic .download {
  60. float: right;
  61. }
  62. #galleriffic .image-title {
  63. font-weight: bold;
  64. font-size: 1.4em;
  65. }
  66. #galleriffic .image-desc {
  67. line-height: 1.3em;
  68. padding-top: 12px;
  69. }
  70. #galleriffic ul.thumbs {
  71. clear: both;
  72. margin: 0;
  73. padding: 0;
  74. }
  75. #galleriffic ul.thumbs li {
  76. float: left;
  77. padding: 0;
  78. margin: 5px 10px 5px 0;
  79. list-style: none;
  80. }
  81. #galleriffic a.thumb {
  82. padding: 2px;
  83. display: block;
  84. border: 1px solid #ccc;
  85. }
  86. #galleriffic ul.thumbs li.selected a.thumb {
  87. background: #000;
  88. }
  89. #galleriffic a.thumb:focus {
  90. outline: none;
  91. }
  92. #galleriffic ul.thumbs img {
  93. border: none;
  94. display: block;
  95. }
  96. #galleriffic .pagination {
  97. clear: both;
  98. }
  99. #galleriffic .navigation.top {
  100. margin-bottom: 12px;
  101. height: 11px;
  102. }
  103. #galleriffic .navigation.bottom {
  104. margin-top: 12px;
  105. }
  106. #galleriffic .pagination a, #galleriffic .pagination span.current {
  107. display: block;
  108. float: left;
  109. margin-right: 2px;
  110. padding: 4px 7px 2px 7px;
  111. border: 1px solid #ccc;
  112. }
  113. #galleriffic .pagination a:hover {
  114. background-color: #eee;
  115. text-decoration: none;
  116. }
  117. #galleriffic .pagination span.current {
  118. font-weight: bold;
  119. background-color: #000;
  120. border-color: #000;
  121. color: #fff;
  122. }
  123. #galleriffic .slideshow,
  124. #galleriffic .loader,
  125. #galleriffic .slideshow a.advance-link,
  126. #galleriffic .caption-container {
  127. clear: both;
  128. }
  129. #galleriffic .slideshow-container {
  130. position: relative;
  131. clear: both;
  132. float: left;
  133. }
  134. #galleriffic .slideshow span.image-wrapper {
  135. display: block;
  136. position: absolute;
  137. left: 0;
  138. }
  139. #galleriffic .slideshow a.advance-link {
  140. display: block;
  141. line-height: 402px; /* This should be set to be at least the height of the largest image in the slideshow with padding */
  142. text-align: center;
  143. display: block;
  144. }
  145. #galleriffic .slideshow a.advance-link img {
  146. padding: 2px;
  147. border: 1px solid #ccc;
  148. }
  149. #galleriffic .slideshow a.advance-link:hover,
  150. #galleriffic .slideshow a.advance-link:active,
  151. #galleriffic .slideshow a.advance-link:visited {
  152. text-decoration: none;
  153. }
  154. #galleriffic #caption {
  155. position: relative;
  156. margin: 0 7px 0 0;
  157. }
  158. #galleriffic .caption {
  159. padding: 0 5px;
  160. }
  161. #galleriffic span.image-wrapper {
  162. top: 0;
  163. width: 100%;
  164. position: absolute;
  165. }
  166. #galleriffic .ellipsis {
  167. float: left;
  168. }