API tools faq
paste
Advertisement
Guest User

xsfd

a guest
Nov 22nd, 2014
162
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 13.53 KB | None | 0 0
raw download clone embed print report
  1. /*!
  2. *  - v1.0.6
  3. * Homepage: http://bqworks.com/slider-pro/
  4. * Author: bqworks
  5. * Author URL: http://bqworks.com/
  6. */
  7. /* Core
  8. --------------------------------------------------*/
  9. .slider-pro {
  10.     position: relative;
  11.     margin: 0 auto;
  12. }
  13.  
  14. .sp-slides-container {
  15.     position: relative;
  16. }
  17.  
  18. .sp-mask {
  19.     position: relative;
  20.     overflow: hidden;
  21. }
  22.  
  23. .sp-slides {
  24.     position: relative;
  25.     -webkit-backface-visibility: hidden;
  26.     -webkit-perspective: 1000;
  27. }
  28.  
  29. .sp-slide {
  30.     position: absolute;
  31. }
  32.  
  33. .sp-image-container {
  34.     overflow: hidden;
  35. }
  36.  
  37. .sp-image {
  38.     position: relative;
  39.     display: block;
  40.     border: none;
  41. }
  42.  
  43. .sp-no-js {
  44.     overflow: hidden;
  45.     max-width: 100%;
  46. }
  47.  
  48. /* Thumbnails
  49. --------------------------------------------------*/
  50. .sp-thumbnails-container {
  51.     position: relative;
  52.     overflow: hidden;
  53. }
  54.  
  55. .sp-top-thumbnails,
  56. .sp-bottom-thumbnails  {
  57.     left: 0;
  58.     margin: 0 auto;
  59. }
  60.  
  61. .sp-top-thumbnails {
  62.     position: absolute;
  63.     top: 0;
  64.     margin-bottom: 4px;
  65. }
  66.  
  67. .sp-bottom-thumbnails {
  68.     margin-top: 4px;
  69. }
  70.  
  71. .sp-left-thumbnails,
  72. .sp-right-thumbnails {
  73.     position: absolute;
  74.     top: 0;
  75. }
  76.  
  77. .sp-right-thumbnails {
  78.     right: 0;
  79.     margin-left: 4px;
  80. }
  81.  
  82. .sp-left-thumbnails {
  83.     left: 0;
  84.     margin-right: 4px;
  85. }
  86.  
  87. .sp-thumbnails {
  88.     position: relative;
  89. }
  90.  
  91. .sp-thumbnail {
  92.     border: none;
  93. }
  94.  
  95. .sp-thumbnail-container {
  96.     position: relative;
  97.     display: block;
  98.     overflow: hidden;
  99.     float: left;
  100.     -moz-box-sizing: border-box;
  101.     box-sizing: border-box;
  102. }
  103.  
  104. /* Horizontal thumbnails
  105. ------------------------*/
  106. .sp-top-thumbnails .sp-thumbnail-container,
  107. .sp-bottom-thumbnails .sp-thumbnail-container {
  108.     margin-left: 2px;
  109.     margin-right: 2px;
  110. }
  111.  
  112. .sp-top-thumbnails .sp-thumbnail-container:first-child,
  113. .sp-bottom-thumbnails .sp-thumbnail-container:first-child {
  114.     margin-left: 0;
  115. }
  116.  
  117. .sp-top-thumbnails .sp-thumbnail-container:last-child,
  118. .sp-bottom-thumbnails .sp-thumbnail-container:last-child {
  119.     margin-right: 0;
  120. }
  121.  
  122. /* Vertical thumbnails
  123. ----------------------*/
  124. .sp-left-thumbnails .sp-thumbnail-container,
  125. .sp-right-thumbnails .sp-thumbnail-container {
  126.     margin-top: 2px;
  127.     margin-bottom: 2px;
  128. }
  129.  
  130. .sp-left-thumbnails .sp-thumbnail-container:first-child,
  131. .sp-right-thumbnails .sp-thumbnail-container:first-child {
  132.     margin-top: 0;
  133. }
  134.  
  135. .sp-left-thumbnails .sp-thumbnail-container:last-child,
  136. .sp-right-thumbnails .sp-thumbnail-container:last-child {
  137.     margin-bottom: 0;
  138. }
  139.  
  140. /* Right thumbnails with pointer
  141. --------------------------------*/
  142. .sp-right-thumbnails.sp-has-pointer {
  143.     margin-left: -13px;
  144. }
  145.  
  146. .sp-right-thumbnails.sp-has-pointer .sp-thumbnail {
  147.     position: absolute;
  148.     left: 18px;
  149.     margin-left: 0 !important;
  150. }
  151.  
  152. .sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail:before {
  153.     content: '';
  154.     position: absolute;
  155.     height: 100%;
  156.     border-left: 5px solid #F00;
  157.     left: 0;
  158.     top: 0;
  159.     margin-left: 13px;
  160. }
  161.  
  162. .sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail:after {
  163.     content: '\25c0';
  164.     position: absolute;
  165.     font-family: Arial;
  166.     font-size: 16px;
  167.     line-height: 1;
  168.     color: #F00;
  169.     left: 0;
  170.     top: 50%;
  171.     margin-top: -6px;
  172. }
  173.  
  174. .ie11 .sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail:after,
  175. .ie10 .sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail:after,
  176. .ie9 .sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail:after {
  177.     content: '\25bc';
  178.     -ms-transform: rotate(90deg);
  179.     transform: rotate(90deg);
  180. }
  181.  
  182. /* Left thumbnails with pointer
  183. -------------------------------*/
  184. .sp-left-thumbnails.sp-has-pointer {
  185.     margin-right: -13px;
  186. }
  187.  
  188. .sp-left-thumbnails.sp-has-pointer .sp-thumbnail {
  189.     position: absolute;
  190.     right: 18px;
  191. }
  192.  
  193. .sp-left-thumbnails.sp-has-pointer .sp-selected-thumbnail:before {
  194.     content: '';
  195.     position: absolute;
  196.     height: 100%;
  197.     border-left: 5px solid #F00;
  198.     right: 0;
  199.     top: 0;
  200.     margin-right: 13px;
  201. }
  202.  
  203. .sp-left-thumbnails.sp-has-pointer .sp-selected-thumbnail:after {
  204.     content: '\25ba';
  205.     position: absolute;
  206.     font-family: Arial;
  207.     font-size: 16px;
  208.     line-height: 1;
  209.     color: #F00;
  210.     right: 0;
  211.     top: 50%;
  212.     margin-top: -6px;
  213. }
  214.  
  215. .ie11 .sp-left-thumbnails.sp-has-pointer .sp-selected-thumbnail:after,
  216. .ie10 .sp-left-thumbnails.sp-has-pointer .sp-selected-thumbnail:after,
  217. .ie9 .sp-left-thumbnails.sp-has-pointer .sp-selected-thumbnail:after {
  218.     content: '\25b2';
  219.     -ms-transform: rotate(90deg);
  220.     transform: rotate(90deg);
  221. }
  222.  
  223. /* Bottom thumbnails with pointer
  224. ---------------------------------*/
  225. .sp-bottom-thumbnails.sp-has-pointer {
  226.     margin-top: -13px;
  227. }
  228.  
  229. .sp-bottom-thumbnails.sp-has-pointer .sp-thumbnail {
  230.     position: absolute;
  231.     top: 18px;
  232.     margin-top: 0 !important;
  233. }
  234.  
  235. .sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:before {
  236.     content: '';
  237.     position: absolute;
  238.     width: 100%;
  239.     border-bottom: 5px solid #F00;
  240.     top: 0;
  241.     margin-top: 13px;
  242. }
  243.  
  244. .sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:after {
  245.     content: '\25b2';
  246.     position: absolute;
  247.     font-family: Arial;
  248.     font-size: 16px;
  249.     line-height: 1;
  250.     color: #F00;
  251.     left: 50%;
  252.     top: 0;
  253.     margin-left: -9px;
  254. }
  255.  
  256. /* Top thumbnails with pointer
  257. ------------------------------*/
  258. .sp-top-thumbnails.sp-has-pointer {
  259.     margin-bottom: -13px;
  260. }
  261.  
  262. .sp-top-thumbnails.sp-has-pointer .sp-thumbnail {
  263.     position: absolute;
  264.     bottom: 18px;
  265. }
  266.  
  267. .sp-top-thumbnails.sp-has-pointer .sp-selected-thumbnail:before {
  268.     content: '';
  269.     position: absolute;
  270.     width: 100%;
  271.     border-bottom: 5px solid #F00;
  272.     bottom: 0;
  273.     margin-bottom: 13px;
  274. }
  275.  
  276. .sp-top-thumbnails.sp-has-pointer .sp-selected-thumbnail:after {
  277.     content: '\25bc';
  278.     position: absolute;
  279.     font-family: Arial;
  280.     font-size: 16px;
  281.     line-height: 1;
  282.     color: #F00;
  283.     left: 50%;
  284.     bottom: 0;
  285.     margin-left: -9px;
  286. }
  287.  
  288. /* Layers
  289. --------------------------------------------------*/
  290. .sp-layer {
  291.     position: absolute;
  292.     margin: 0;
  293.     box-sizing: border-box;
  294.     -moz-box-sizing: border-box;
  295.     -webkit-box-sizing: border-box;
  296.     -webkit-font-smoothing: subpixel-antialiased;
  297.     -webkit-backface-visibility: hidden;
  298. }
  299.  
  300. .sp-black {
  301.     color: #FFF;
  302.     background: rgb(0, 0, 0);
  303.     background: rgba(0, 0, 0, 0.7);
  304. }
  305.  
  306. .sp-white {
  307.     color: #000;
  308.     background: rgb(255, 255, 255);
  309.     background: rgba(255, 255, 255, 0.7);
  310. }
  311.  
  312. .sp-rounded {
  313.     border-radius: 10px;
  314. }
  315.  
  316. .sp-padding {
  317.     padding: 10px;
  318. }
  319.  
  320. /* Touch Swipe
  321. --------------------------------------------------*/
  322. .sp-grab {
  323.     cursor: url(images/openhand.cur), move;
  324. }
  325.  
  326. .sp-grabbing {
  327.     cursor: url(images/closedhand.cur), move;
  328. }
  329.  
  330. .sp-selectable {
  331.     cursor: default;
  332. }
  333.  
  334. /* Caption
  335. --------------------------------------------------*/
  336. .sp-caption-container {
  337.     text-align: center;
  338.     margin-top: 10px;
  339. }
  340.  
  341. /* Full Screen
  342. --------------------------------------------------*/
  343. .sp-full-screen {
  344.     margin: 0 !important;
  345.     background-color: #000;
  346. }
  347.  
  348. .sp-full-screen-button {
  349.     position: absolute;
  350.     top: 5px;
  351.     right: 10px;
  352.     font-size: 30px;
  353.     line-height: 1;
  354.     cursor: pointer;
  355.     -webkit-transform: rotate(45deg);
  356.     -ms-transform: rotate(45deg);
  357.     transform: rotate(45deg);
  358. }
  359.  
  360. .sp-full-screen-button:before {
  361.     content: '\2195';
  362. }
  363.  
  364. .sp-fade-full-screen {
  365.     opacity: 0;
  366.     -webkit-transition: opacity 0.5s;
  367.     transition: opacity 0.5s;
  368. }
  369.  
  370. .slider-pro:hover .sp-fade-full-screen {
  371.     opacity: 1;
  372. }
  373.  
  374. /* Buttons
  375. --------------------------------------------------*/
  376. .sp-buttons {
  377.     position: relative;
  378.     width: 100%;
  379.     text-align: center;
  380.     padding-top: 10px;
  381. }
  382.  
  383. .sp-button {
  384.     width: 10px;
  385.     height: 10px;
  386.     border: 2px solid #000;
  387.     border-radius: 50%;
  388.     margin: 4px;
  389.     display: inline-block;
  390.     -moz-box-sizing: border-box;
  391.     -webkit-box-sizing: border-box;
  392.     box-sizing: border-box;
  393.     cursor: pointer;
  394. }
  395.  
  396. .sp-selected-button {
  397.     background-color: #000;
  398. }
  399.  
  400. @media only screen and (min-width: 768px) and (max-width: 1024px) {
  401.     .sp-button {
  402.         width: 14px;
  403.         height: 14px;
  404.     }
  405. }
  406.  
  407. @media only screen and (min-width: 568px) and (max-width: 768px) {
  408.     .sp-button {
  409.         width: 16px;
  410.         height: 16px;
  411.     }
  412. }
  413.  
  414. @media only screen and (min-width: 320px) and (max-width: 568px) {
  415.     .sp-button {
  416.         width: 18px;
  417.         height: 18px;
  418.     }
  419. }
  420.  
  421. /* Arrows
  422. --------------------------------------------------*/
  423. .sp-fade-arrows {
  424.     opacity: 0;
  425.     -webkit-transition: opacity 0.5s;
  426.     transition: opacity 0.5s;
  427. }
  428.  
  429. .sp-slides-container:hover .sp-fade-arrows {
  430.     opacity: 1;
  431. }
  432.  
  433. .sp-arrow {
  434.     position: absolute;
  435.     font-size: 40px;
  436.     color: #FFF;
  437.     text-shadow: 1px 1px 1px #666;
  438.     cursor: pointer;
  439. }
  440.  
  441. .sp-vertical .sp-arrow {
  442.     -webkit-transform: rotate(90deg);
  443.     -ms-transform: rotate(90deg);
  444.     transform: rotate(90deg);
  445. }
  446.  
  447. .sp-horizontal .sp-arrow {
  448.     top: 50%;
  449.     margin-top: -20px;
  450. }
  451.  
  452. .sp-vertical .sp-arrow {
  453.     left: 50%;
  454.     margin-left: -10px;
  455. }
  456.  
  457. .sp-previous-arrow:before {
  458.     content: '\276e';
  459. }
  460.  
  461. .ios .sp-previous-arrow:before,
  462. .ie9 .sp-previous-arrow:before,
  463. .ie8 .sp-previous-arrow:before,
  464. .ie7 .sp-previous-arrow:before {
  465.     content: '\25c0';
  466. }
  467.  
  468. .ie8.sp-vertical .sp-previous-arrow:before,
  469. .ie7.sp-vertical .sp-previous-arrow:before {
  470.     content: '\25b2';
  471. }
  472.  
  473. .sp-next-arrow:before {
  474.     content: '\276f';
  475. }
  476.  
  477. .ios .sp-next-arrow:before,
  478. .ie9 .sp-next-arrow:before,
  479. .ie8 .sp-next-arrow:before,
  480. .ie7 .sp-next-arrow:before {
  481.     content: '\25b6';
  482. }
  483.  
  484. .ie8.sp-vertical .sp-next-arrow:before,
  485. .ie7.sp-vertical .sp-next-arrow:before {
  486.     content: '\25bc';
  487. }
  488.  
  489. .sp-horizontal .sp-previous-arrow {
  490.     left: 20px;
  491. }
  492.  
  493. .sp-horizontal .sp-next-arrow {
  494.     right: 20px;
  495. }
  496.  
  497. .sp-vertical .sp-previous-arrow {
  498.     top: 20px;
  499. }
  500.  
  501. .sp-vertical .sp-next-arrow {
  502.     bottom: 20px;
  503. }
  504.  
  505. /* Thumbnail Arrows
  506. --------------------------------------------------*/
  507. .sp-thumbnail-arrows {
  508.     position: absolute;
  509. }
  510.  
  511. .sp-fade-thumbnail-arrows {
  512.     opacity: 0;
  513.     -webkit-transition: opacity 0.5s;
  514.     transition: opacity 0.5s;
  515. }
  516.  
  517. .sp-thumbnails-container:hover .sp-fade-thumbnail-arrows {
  518.     opacity: 1;
  519. }
  520.  
  521. .sp-top-thumbnails .sp-thumbnail-arrows,
  522. .sp-bottom-thumbnails .sp-thumbnail-arrows {
  523.     width: 100%;
  524.     top: 50%;
  525.     left: 0;
  526.     margin-top: -10px;
  527. }
  528.  
  529. .sp-left-thumbnails .sp-thumbnail-arrows,
  530. .sp-right-thumbnails .sp-thumbnail-arrows {
  531.     height: 100%;
  532.     top: 0;
  533.     left: 50%;
  534.     margin-left: -5px;
  535. }
  536.  
  537. .sp-thumbnail-arrow {
  538.     position: absolute;
  539.     font-size: 20px;
  540.     color: #FFF;
  541.     text-shadow: 1px 1px 1px #666;
  542.     cursor: pointer;
  543. }
  544.  
  545. .sp-left-thumbnails .sp-thumbnail-arrows .sp-thumbnail-arrow,
  546. .sp-right-thumbnails .sp-thumbnail-arrows .sp-thumbnail-arrow {
  547.     -ms-transform: rotate(90deg);
  548.     -webkit-transform: rotate(90deg);
  549.     transform: rotate(90deg);
  550. }
  551.  
  552. .sp-previous-thumbnail-arrow:before {
  553.     content: '\276e';
  554. }
  555.  
  556. .ios .sp-previous-thumbnail-arrow:before,
  557. .ie7 .sp-previous-thumbnail-arrow:before,
  558. .ie8 .sp-previous-thumbnail-arrow:before,
  559. .ie9 .sp-previous-thumbnail-arrow:before {
  560.     content: '\25c0';
  561. }
  562.  
  563. .ie8.sp-vertical .sp-previous-thumbnail-arrow:before,
  564. .ie7.sp-vertical .sp-previous-thumbnail-arrow:before {
  565.     content: '\25b2';
  566. }
  567.  
  568. .sp-next-thumbnail-arrow:before {
  569.     content: '\276f';
  570. }
  571.  
  572. .ios .sp-next-thumbnail-arrow:before,
  573. .ie7 .sp-next-thumbnail-arrow:before,
  574. .ie8 .sp-next-thumbnail-arrow:before,
  575. .ie9 .sp-next-thumbnail-arrow:before {
  576.     content: '\25b6';
  577. }
  578.  
  579. .ie8.sp-vertical .sp-next-thumbnail-arrow:before,
  580. .ie7.sp-vertical .sp-next-thumbnail-arrow:before {
  581.     content: '\25bc';
  582. }
  583.  
  584. .sp-top-thumbnails .sp-previous-thumbnail-arrow,
  585. .sp-bottom-thumbnails .sp-previous-thumbnail-arrow {
  586.     left: 0px;
  587. }
  588.  
  589. .sp-top-thumbnails .sp-next-thumbnail-arrow,
  590. .sp-bottom-thumbnails .sp-next-thumbnail-arrow {
  591.     right: 0px;
  592. }
  593.  
  594. .sp-left-thumbnails .sp-previous-thumbnail-arrow,
  595. .sp-right-thumbnails .sp-previous-thumbnail-arrow {
  596.     top: 0px;
  597. }
  598.  
  599. .sp-left-thumbnails .sp-next-thumbnail-arrow,
  600. .sp-right-thumbnails .sp-next-thumbnail-arrow {
  601.     bottom: 0px;
  602. }
  603.  
  604. /* Video
  605. --------------------------------------------------*/
  606. a.sp-video {
  607.     text-decoration: none;
  608. }
  609.  
  610. a.sp-video img {
  611.     -webkit-backface-visibility: hidden;
  612.     border: none;
  613. }
  614.  
  615. a.sp-video:after {
  616.     content: '\25B6';
  617.     position: absolute;
  618.     width: 45px;
  619.     padding-left: 5px;
  620.     height: 50px;
  621.     border: 2px solid #FFF;
  622.     text-align: center;
  623.     font-size: 30px;
  624.     border-radius: 30px;
  625.     top: 0;
  626.     color: #FFF;
  627.     bottom: 0;
  628.     left: 0;
  629.     right: 0;
  630.     background-color: rgba(0, 0, 0, 0.2);
  631.     margin: auto;
  632.     line-height: 52px;
  633. }
  634.  
  635. /* CSS for preventing styling issues in WordPress
  636. --------------------------------------------------*/
  637. .slider-pro img.sp-image,
  638. .slider-pro img.sp-thumbnail {
  639.     max-width: none !important;
  640.     max-height: none !important;
  641.     border: none !important;
  642.     border-radius: 0 !important;
  643.     margin: 0 !important;
  644.     padding: 0 !important;
  645.     -webkit-box-shadow: none !important;
  646.     -mox-box-shadow: none !important;
  647.     box-shadow: none !important;
  648.     transition: none;
  649.     -moz-transition: none;
  650.     -webkit-transition: none;
  651.     -o-transition: none;
  652. }
  653.  
  654. .slider-pro a {
  655.     position: static;
  656.     transition: none !important;
  657.     -moz-transition: none !important;
  658.     -webkit-transition: none !important;
  659.     -o-transition: none !important;
  660. }
  661.  
  662. .slider-pro iframe,
  663. .slider-pro object,
  664. .slider-pro video,
  665. .slider-pro embed,
  666. .slider-pro canvas {
  667.     max-width: none;
  668.     max-height: none;
  669. }
  670.  
  671. .slider-pro p.sp-layer {
  672.     font-size: 14px;
  673.     line-height: 1.4;
  674.     margin: 0;
  675. }
  676.  
  677. .slider-pro h1.sp-layer {
  678.     font-size: 32px;
  679.     line-height: 1.4;
  680.     margin: 0;
  681. }
  682.  
  683. .slider-pro h2.sp-layer {
  684.     font-size: 24px;
  685.     line-height: 1.4;
  686.     margin: 0;
  687. }
  688.  
  689. .slider-pro h3.sp-layer {
  690.     font-size: 19px;
  691.     line-height: 1.4;
  692.     margin: 0;
  693. }
  694.  
  695. .slider-pro h4.sp-layer {
  696.     font-size: 16px;
  697.     line-height: 1.4;
  698.     margin: 0;
  699. }
  700.  
  701. .slider-pro h5.sp-layer {
  702.     font-size: 13px;
  703.     line-height: 1.4;
  704.     margin: 0;
  705. }
  706.  
  707. .slider-pro h6.sp-layer {
  708.     font-size: 11px;
  709.     line-height: 1.4;
  710.     margin: 0;
  711. }
  712.  
  713. .slider-pro img.sp-layer {
  714.     border: none;
  715. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!