fl-slideshow.css 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552
  1. /**
  2. * Slideshow CSS Bundle
  3. *
  4. * @file slideshow.css
  5. * @copyright (C) FastLine Media (www.fastlinemedia.com)
  6. * @license http://cdn.fastlinemedia.com/fastlinejs/license.txt
  7. */
  8. /**
  9. * @style slideshow
  10. */
  11. /* Wrapper
  12. --------------------------------------------------------------*/
  13. .fl-slideshow {
  14. color: #8c8d8e;
  15. font-family: Helvetica, Verdana, Arial, sans-serif;
  16. font-size: 13px;
  17. letter-spacing: normal;
  18. position: relative;
  19. word-spacing: normal;
  20. }
  21. .fl-slideshow-content {
  22. position: relative;
  23. }
  24. .fl-slideshow .yui3-widget-content-expanded {
  25. box-sizing: content-box;
  26. -moz-box-sizing: content-box;
  27. -webkit-box-sizing: content-box;
  28. -ms-box-sizing: content-box;
  29. }
  30. .fl-slideshow.fl-fullscreen-active {
  31. background: #1c1d1f !important;
  32. }
  33. .fl-slideshow a {
  34. outline: none;
  35. }
  36. /* Loading Image
  37. --------------------------------------------------------------*/
  38. .fl-loading-image {
  39. width: 42px;
  40. height: 42px;
  41. background: #000;
  42. border-radius: 6px;
  43. -webkit-border-radius: 6px;
  44. -moz-border-radius: 6px;
  45. }
  46. /* Fullscreen
  47. --------------------------------------------------------------*/
  48. .fl-fullscreen-close-message {
  49. position: absolute;
  50. z-index: 1000;
  51. top:200px;
  52. width: 100%;
  53. text-align: center;
  54. }
  55. .fl-fullscreen-close-message span {
  56. display: inline-block;
  57. padding: 15px 25px;
  58. background: url('../img/slideshow/transparent-bg-dark.png') repeat;
  59. border-radius: 8px;
  60. -moz-border-radius: 8px;
  61. -webkit-border-radius: 8px;
  62. color: #fff;
  63. font-size: 16px;
  64. line-height: 26px;
  65. }
  66. .fl-fullscreen-active.fl-slideshow {
  67. margin: 0;
  68. padding: 0;
  69. }
  70. /* Images
  71. --------------------------------------------------------------*/
  72. .fl-slideshow-image {
  73. overflow: hidden;
  74. position: relative;
  75. }
  76. .fl-slideshow-image,
  77. .fl-slideshow-image img {
  78. backface-visibility: hidden;
  79. -moz-backface-visibility: hidden;
  80. -webkit-backface-visibility: hidden;
  81. }
  82. .fl-slideshow-image img {
  83. position: absolute;
  84. z-index: 1;
  85. -webkit-touch-callout: none;
  86. }
  87. .fl-slideshow-video-button {
  88. display: block;
  89. width: 88px;
  90. height: 60px;
  91. position: absolute;
  92. z-index: 2;
  93. background: url('../img/slideshow/icons-light.png') -120px -80px no-repeat;
  94. }
  95. .fl-slideshow-video-button:hover {
  96. background-position: -220px -80px;
  97. }
  98. .fl-slideshow-video {
  99. position: fixed;
  100. top: 0;
  101. right: 0;
  102. bottom: 0;
  103. left: 0;
  104. z-index: 1000;
  105. background: url('../img/slideshow/transparent-bg-dark.png') repeat;
  106. }
  107. .fl-slideshow-video-wrap {
  108. top: 45px;
  109. right: 45px;
  110. bottom: 45px;
  111. left: 45px;
  112. position: fixed;
  113. z-index: 1001;
  114. }
  115. .fl-slideshow-video iframe {
  116. border: none;
  117. display: block;
  118. line-height: 0;
  119. margin: 0;
  120. padding: 0;
  121. position: relative;
  122. z-index: 1001;
  123. }
  124. .fl-slideshow-video-close {
  125. position: absolute;
  126. z-index: 10000;
  127. left: 5px;
  128. top: 5px;
  129. width: 40px;
  130. height: 40px;
  131. background: url('../img/slideshow/icons-light.png') 0 -80px no-repeat;
  132. }
  133. .fl-slideshow-video-close:hover {
  134. background-position: -40px -80px;
  135. }
  136. /* Image Transtion Slices
  137. --------------------------------------------------------------*/
  138. .fl-slideshow-transition-slice {
  139. opacity: 0;
  140. overflow: hidden;
  141. position: absolute;
  142. }
  143. .fl-slideshow-transition-slice img {
  144. display: block;
  145. position: absolute;
  146. }
  147. /* Main Image
  148. --------------------------------------------------------------*/
  149. .fl-slideshow-main-image {
  150. z-index: 2;
  151. }
  152. /* Frame
  153. --------------------------------------------------------------*/
  154. .fl-slideshow-frame {
  155. position: relative;
  156. }
  157. .fl-slideshow-frame-content {
  158. height: 100%;
  159. }
  160. .fl-slideshow-frame.fl-click-action-enabled .fl-slideshow-image-img {
  161. cursor: pointer;
  162. }
  163. /* Nav
  164. --------------------------------------------------------------*/
  165. .fl-slideshow-main-nav {
  166. position: relative;
  167. height: 40px;
  168. }
  169. .fl-slideshow-main-nav.fl-slideshow-overlay {
  170. left: 0;
  171. right: 0;
  172. z-index: 10;
  173. }
  174. /* Nav Buttons
  175. --------------------------------------------------------------*/
  176. .fl-slideshow-nav-buttons {
  177. text-align: center;
  178. }
  179. .fl-slideshow-nav-buttons-left {
  180. position: absolute;
  181. top: 0;
  182. left: 0;
  183. height: 100%;
  184. padding-left: 5px;
  185. }
  186. .fl-slideshow-nav-buttons-right {
  187. position: absolute;
  188. top: 0;
  189. right: 0;
  190. height: 100%;
  191. padding-right: 5px;
  192. }
  193. .fl-slideshow-nav a {
  194. display: inline-block;
  195. width: 40px;
  196. height: 40px;
  197. background-image: url('../img/slideshow/icons-light.png');
  198. vertical-align: middle;
  199. }
  200. .fl-slideshow-nav-count {
  201. display: inline-block;
  202. height: 9px;
  203. line-height: 12px;
  204. padding: 14px 14px 0px;
  205. }
  206. .fl-slideshow-nav-thumbs { background-position: 0 0; }
  207. .fl-slideshow-nav-thumbs:hover { background-position: 0 -40px; }
  208. .fl-slideshow-nav-buy { background-position: -40px 0; }
  209. .fl-slideshow-nav-buy:hover { background-position: -40px -40px; }
  210. .fl-slideshow-nav-caption { background-position: -80px 0; }
  211. .fl-slideshow-nav-caption:hover { background-position: -80px -40px; }
  212. .fl-slideshow-nav-caption-disabled,
  213. .fl-slideshow-nav-caption-disabled:hover { background-position: -80px 0; opacity: 0.35; cursor: default; }
  214. .fl-slideshow-nav-social { background-position: -120px 0; }
  215. .fl-slideshow-nav-social:hover { background-position: -120px -40px; }
  216. .fl-slideshow-nav-prev,
  217. .fl-slideshow-nav-prevPage { background-position: -160px 0; }
  218. .fl-slideshow-nav-prev:hover,
  219. .fl-slideshow-nav-prevPage:hover { background-position: -160px -40px; }
  220. .fl-slideshow-nav-pause { background-position: -200px 0; }
  221. .fl-slideshow-nav-pause:hover { background-position: -200px -40px; }
  222. .fl-slideshow-nav-play { background-position: -240px 0; }
  223. .fl-slideshow-nav-play:hover { background-position: -240px -40px; }
  224. .fl-slideshow-nav-next,
  225. .fl-slideshow-nav-nextPage { background-position: -280px 0; }
  226. .fl-slideshow-nav-next:hover,
  227. .fl-slideshow-nav-nextPage:hover { background-position: -280px -40px; }
  228. .fl-slideshow-nav-fullscreen { background-position: -320px 0; }
  229. .fl-slideshow-nav-fullscreen:hover { background-position: -320px -40px; }
  230. .fl-fullscreen-active .fl-slideshow-nav-fullscreen { background-position: -360px 0; }
  231. .fl-fullscreen-active .fl-slideshow-nav-fullscreen:hover { background-position: -360px -40px; }
  232. .fl-slideshow-nav-close { background-position: -400px 0; }
  233. .fl-slideshow-nav-close:hover { background-position: -400px -40px; }
  234. /* Image Nav
  235. --------------------------------------------------------------*/
  236. .fl-slideshow-image-nav-left,
  237. .fl-slideshow-image-nav-left .fl-slideshow-nav-buttons,
  238. .fl-slideshow-image-nav-left a {
  239. display: block;
  240. position: absolute;
  241. left: 0;
  242. top: 0;
  243. z-index: 7;
  244. width: 100px;
  245. height: 55px;
  246. background: none !important;
  247. }
  248. .fl-slideshow-image-nav-left a {
  249. background: url('../img/slideshow/arrows-prev.png') left center no-repeat !important;
  250. }
  251. .fl-slideshow-image-nav-left a:hover {
  252. background-position: -70px center !important;
  253. }
  254. .fl-slideshow-image-nav-right,
  255. .fl-slideshow-image-nav-right .fl-slideshow-nav-buttons,
  256. .fl-slideshow-image-nav-right a {
  257. display: block;
  258. position: absolute;
  259. right: 0;
  260. top: 0;
  261. z-index: 7;
  262. width: 100px;
  263. height: 55px;
  264. background: none !important;
  265. }
  266. .fl-slideshow-image-nav-right a {
  267. background: url('../img/slideshow/arrows-next.png') right center no-repeat !important;
  268. }
  269. .fl-slideshow-image-nav-right a:hover {
  270. background-position: 30px center !important;
  271. }
  272. .fl-slideshow-image-nav-left .fl-slideshow-nav-buttons,
  273. .fl-slideshow-image-nav-left a,
  274. .fl-slideshow-image-nav-right .fl-slideshow-nav-buttons,
  275. .fl-slideshow-image-nav-right a {
  276. width: 100%;
  277. }
  278. /* Mouse Nav
  279. --------------------------------------------------------------*/
  280. .fl-slideshow-mouse-nav-prev,
  281. .fl-slideshow-mouse-nav-prev div,
  282. .fl-slideshow-mouse-nav-prev img {
  283. cursor: url('../img/slideshow/arrow-prev.png'), w-resize !important;
  284. }
  285. .fl-slideshow-mouse-nav-next,
  286. .fl-slideshow-mouse-nav-next div,
  287. .fl-slideshow-mouse-nav-next img {
  288. cursor: url('../img/slideshow/arrow-next.png'), e-resize !important;
  289. }
  290. /* Thumbs
  291. --------------------------------------------------------------*/
  292. .fl-slideshow-thumbs {
  293. position: relative;
  294. z-index: 1;
  295. }
  296. .fl-slideshow-thumbs-content {
  297. height: 100%;
  298. margin: 0 auto;
  299. position: relative;
  300. }
  301. .fl-slideshow-thumbs.fl-slideshow-overlay {
  302. z-index: 9;
  303. }
  304. .fl-slideshow-thumbs-clip {
  305. overflow: hidden;
  306. position: relative;
  307. -webkit-backface-visibility: hidden;
  308. }
  309. .fl-slideshow-thumbs-pages {
  310. position: relative;
  311. -webkit-backface-visibility: hidden;
  312. }
  313. .fl-slideshow-thumbs-page {
  314. position: absolute;
  315. -webkit-backface-visibility: hidden;
  316. }
  317. .fl-slideshow-thumbs .fl-slideshow-image {
  318. background: #2e3033;
  319. border: 1px solid #7d818a;
  320. float: left;
  321. }
  322. .fl-slideshow-thumbs .fl-slideshow-image-active,
  323. .fl-slideshow-thumbs .fl-slideshow-image:hover {
  324. border: 1px solid #fff;
  325. }
  326. .fl-slideshow-thumbs img {
  327. cursor: pointer !important;
  328. }
  329. /* Thumbs Nav
  330. --------------------------------------------------------------*/
  331. .fl-slideshow-thumbs-left-nav .fl-slideshow-nav-buttons {
  332. padding: 0 15px;
  333. }
  334. .fl-slideshow-thumbs-right-nav .fl-slideshow-nav-buttons {
  335. padding: 0 15px;
  336. }
  337. /* Vertical Thumbs
  338. --------------------------------------------------------------*/
  339. .fl-slideshow-vertical-thumbs {
  340. position: absolute;
  341. top: 0;
  342. z-index: 20;
  343. }
  344. /* Caption
  345. --------------------------------------------------------------*/
  346. .fl-slideshow-caption {
  347. width: 100%;
  348. z-index: 8;
  349. color: #fff;
  350. }
  351. .fl-slideshow-caption a {
  352. color: #fff;
  353. }
  354. .fl-slideshow-caption-content {
  355. padding: 20px;
  356. }
  357. .fl-slideshow-caption-toggle {
  358. display: inline-block;
  359. padding: 0 20px 20px;
  360. }
  361. /* Social
  362. --------------------------------------------------------------*/
  363. .fl-slideshow-social {
  364. width: 100%;
  365. z-index: 8;
  366. }
  367. .fl-slideshow-social-content {
  368. padding: 20px 25px 15px;
  369. }
  370. /* Overlays
  371. --------------------------------------------------------------*/
  372. .fl-slideshow-overlay {
  373. background: url('../img/slideshow/transparent-bg-dark.png') repeat;
  374. }
  375. .fl-slideshow-overlay iframe {
  376. border:none;
  377. }
  378. .fl-slideshow-overlay a {
  379. display: inline-block;
  380. vertical-align: top;
  381. }
  382. .fl-slideshow-overlay-close {
  383. position: absolute;
  384. z-index: 1000;
  385. right: 0;
  386. width: 40px;
  387. height: 40px;
  388. background: url('../img/slideshow/icons-light.png') 0 -80px no-repeat;
  389. }
  390. .fl-slideshow-overlay-close:hover {
  391. background-position: -40px -80px;
  392. }
  393. .fl-slideshow-caption .fl-slideshow-overlay-close,
  394. .fl-slideshow-social .fl-slideshow-overlay-close {
  395. width: 30px;
  396. height: 30px;
  397. background: url('../img/slideshow/icons-light.png') -80px -80px no-repeat;
  398. }
  399. .fl-slideshow-caption .fl-slideshow-overlay-close:hover,
  400. .fl-slideshow-social .fl-slideshow-overlay-close:hover {
  401. background-position: -80px -110px;
  402. }
  403. /* Color - Light
  404. --------------------------------------------------------------*/
  405. /* Wrapper */
  406. .fl-slideshow-light {
  407. color: #333333;
  408. }
  409. .fl-slideshow-light.fl-fullscreen-active {
  410. background: #f2f2f2 !important;
  411. }
  412. /* Loading Image */
  413. .fl-slideshow-light .fl-loading-image {
  414. background: #fff;
  415. }
  416. /* Nav */
  417. .fl-slideshow-light .fl-slideshow-nav a {
  418. background-image: url('../img/slideshow/icons-dark.png');
  419. }
  420. /* Video */
  421. .fl-slideshow-light .fl-slideshow-video {
  422. background: url('../img/slideshow/transparent-bg-light.png') repeat;
  423. }
  424. .fl-slideshow-light .fl-slideshow-video-close {
  425. background: url('../img/slideshow/icons-dark.png') 0 -80px no-repeat;
  426. }
  427. .fl-slideshow-light .fl-slideshow-video-close:hover {
  428. background-position: -40px -80px;
  429. }
  430. /* Thumbs */
  431. .fl-slideshow-light .fl-slideshow-thumbs .fl-slideshow-frame {
  432. background: #dadde6;
  433. }
  434. .fl-slideshow-light .fl-slideshow-thumbs .fl-slideshow-image {
  435. border: 1px solid #737373;
  436. }
  437. .fl-slideshow-light .fl-slideshow-thumbs .fl-slideshow-frame-active .fl-slideshow-image,
  438. .fl-slideshow-light .fl-slideshow-thumbs .fl-slideshow-image:hover {
  439. border: 1px solid #000;
  440. }
  441. /* Caption */
  442. .fl-slideshow-light .fl-slideshow-caption,
  443. .fl-slideshow-light .fl-slideshow-caption a {
  444. color: #333;
  445. }
  446. /* Overlays */
  447. .fl-slideshow-light .fl-slideshow-overlay {
  448. background-image: url('../img/slideshow/transparent-bg-light.png');
  449. }
  450. .fl-slideshow-light .fl-slideshow-overlay-close {
  451. background-image: url('../img/slideshow/icons-dark.png');
  452. }
  453. .fl-slideshow-light .fl-slideshow-caption .fl-slideshow-overlay-close,
  454. .fl-slideshow-light .fl-slideshow-social .fl-slideshow-overlay-close {
  455. background-image: url('../img/slideshow/icons-dark.png');
  456. }
  457. /* SM Font Icon Overrides
  458. --------------------------------------------------------------*/
  459. /* Nav Buttons */
  460. .fl-slideshow-nav a.sm-fonticon,
  461. .fl-slideshow-nav a.sm-fonticon:hover {
  462. background-image: none !important;
  463. height: 24px;
  464. line-height: 24px;
  465. margin: 5px 7px;
  466. text-decoration: none;
  467. vertical-align: middle;
  468. width: 24px;
  469. }
  470. .fl-slideshow-nav-count.fonticons-enabled {
  471. display: inline-block;
  472. font-size: 13px;
  473. height: 24px;
  474. line-height: 32px;
  475. margin: 5px 15px;
  476. padding: 0;
  477. vertical-align: middle;
  478. }
  479. /* Video */
  480. .fl-slideshow-video-close.sm-fonticon {
  481. background-image: none !important;
  482. height: 16px;
  483. font-size: 32px;
  484. line-height: 16px;
  485. text-decoration: none;
  486. width: 16px;
  487. }
  488. /* Overlays */
  489. .fl-slideshow-overlay-close.sm-fonticon {
  490. background-image: none !important;
  491. height: 25px;
  492. line-height: 25px;
  493. text-decoration: none;
  494. width: 25px;
  495. }