theme.less 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309
  1. /* ====================================================================================================================
  2. * DEFAULT THEME
  3. * ====================================================================================================================*/
  4. .flexslider {
  5. margin: @flexslider-margin;
  6. background: @flexslider-bg;
  7. border: @flexslider-border;
  8. position: relative;
  9. zoom: 1;
  10. .border-radius( @flexslider-border-radius );
  11. .box-shadow( @flexslider-box-shadow-x-axis, @flexslider-box-shadow-y-axis, @flexslider-box-shadow-blur, @flexslider-box-shadow-color, @flexslider-box-shadow-inset);
  12. .slides {
  13. zoom: 1;
  14. img {
  15. height: auto;
  16. -moz-user-select: none;
  17. }
  18. }
  19. }
  20. .flex-viewport {
  21. max-height: @flex-viewport-max-height;
  22. .transition();
  23. .loading &{
  24. max-height: @flex-viewport-loading-max-height;
  25. }
  26. }
  27. .carousel li {
  28. margin-right: 5px;
  29. }
  30. //
  31. // Direction Nav
  32. //
  33. .flex-direction-nav {
  34. *height: 0;
  35. //
  36. // Global styles
  37. //
  38. a {
  39. text-decoration: none;
  40. display: block;
  41. width: 40px;
  42. height: 40px;
  43. margin: -20px 0 0;
  44. position: absolute;
  45. top: 50%;
  46. z-index: 10;
  47. overflow: hidden;
  48. opacity: 0;
  49. cursor: pointer;
  50. color: @flex-direction-nav-color;
  51. text-shadow: @flex-direction-nav-text-shadow;
  52. .transition( 0.3s, ease-in-out );
  53. &:before {
  54. font-family: "@{font-name}";
  55. font-size: 40px;
  56. display: inline-block;
  57. content: @flex-direction-nav-icon-prev;
  58. color: @flex-direction-nav-icon-color;
  59. text-shadow: @flex-direction-nav-icon-text-shadow;
  60. }
  61. &.flex-next:before {
  62. content: @flex-direction-nav-icon-next;
  63. }
  64. }
  65. //
  66. // Prev
  67. //
  68. .flex-prev {
  69. left: -50px;
  70. }
  71. //
  72. // Next
  73. //
  74. .flex-next {
  75. right: -50px;
  76. text-align: right;
  77. }
  78. //
  79. // Hover states
  80. //
  81. .flexslider:hover &{
  82. .flex-prev {
  83. opacity: 0.7;
  84. left: 10px;
  85. &:hover{
  86. opacity: 1;
  87. }
  88. }
  89. .flex-next {
  90. opacity: 0.7;
  91. right: 10px;
  92. &:hover{
  93. opacity: 1;
  94. }
  95. }
  96. }
  97. //
  98. // Disabled
  99. //
  100. .flex-disabled {
  101. opacity: 0!important;
  102. filter: alpha(opacity=0);
  103. cursor: default;
  104. z-index: -1;
  105. }
  106. }
  107. //
  108. // Pause/Play
  109. //
  110. .flex-pauseplay a {
  111. display: block;
  112. width: 20px;
  113. height: 20px;
  114. position: absolute;
  115. bottom: 5px;
  116. left: 10px;
  117. opacity: 0.8;
  118. z-index: 10;
  119. overflow: hidden;
  120. cursor: pointer;
  121. color: #000;
  122. &:before {
  123. font-family: "@{font-name}";
  124. font-size: 20px;
  125. display: inline-block;
  126. content: @flex-pauseplay-icon-pause;
  127. }
  128. &:hover {
  129. opacity: 1;
  130. }
  131. &.flex-play:before {
  132. content: @flex-pauseplay-icon-play;
  133. }
  134. }
  135. //
  136. // Control Nav
  137. //
  138. .flex-control-nav {
  139. width: 100%;
  140. position: absolute;
  141. bottom: -40px;
  142. text-align: center;
  143. li {
  144. margin: 0 6px;
  145. display: inline-block;
  146. zoom: 1;
  147. *display: inline;
  148. }
  149. }
  150. //
  151. // Control paging
  152. //
  153. .flex-control-paging li {
  154. a {
  155. width: 11px;
  156. height: 11px;
  157. display: block;
  158. background: #666;
  159. background: rgba(0,0,0,0.5);
  160. cursor: pointer;
  161. text-indent: -9999px;
  162. .box-shadow( 0, 0, 3px, rgba(0,0,0,0.3), inset );
  163. .border-radius( 20px );
  164. &:hover {
  165. background: #333;
  166. background: rgba(0,0,0,0.7);
  167. }
  168. &.flex-active {
  169. background: #000;
  170. background: rgba( 0, 0, 0, 0.9 );
  171. cursor: default;
  172. }
  173. }
  174. }
  175. .flex-control-thumbs {
  176. margin: @flex-control-thumbs;
  177. position: static;
  178. overflow: hidden;
  179. li {
  180. width: 25%;
  181. float: left;
  182. margin: 0;
  183. }
  184. img {
  185. width: 100%;
  186. height: auto;
  187. display: block;
  188. opacity: .7;
  189. cursor: pointer;
  190. -moz-user-select: none;
  191. .transition();
  192. &:hover {opacity: 1;}
  193. }
  194. .flex-active {
  195. opacity: 1;
  196. cursor: default;
  197. }
  198. }