CSS   30
light round css
Guest on 17th March 2023 12:12:40 AM


  1. /*
  2.         Skin Name: Light Round
  3.         Class: light-round
  4.         Description: Light Round skin for Advanced Slider jQuery plugin
  5.         Author: David
  6. */
  7.  
  8.  
  9. /* MAIN SLIDE */
  10.  
  11. .light-round .slide-wrapper {
  12.         background-color: #FFF;
  13.         border: 4px solid #FFF;
  14.         -moz-box-shadow: 0 0 10px #CCC;
  15.         -webkit-box-shadow: 0 0 10px #CCC;
  16.         box-shadow: 0 0 10px #CCC;
  17. }
  18.  
  19.  
  20. .light-round .slide {
  21.         background-color: #FFF;
  22. }
  23.  
  24. /* END OF MAIN SLIDE */
  25.  
  26.  
  27. /* SLIDE ARROWS */
  28.  
  29. .light-round .slide-arrows a {
  30.         background: url(images/arrows.png) no-repeat;
  31.         width: 66px;
  32.         height: 66px;
  33.         top: 50%;
  34.         margin-top: -33px;
  35. }
  36.  
  37.  
  38. .light-round .slide-arrows a.previous {
  39.         left: 20px;
  40. }
  41.  
  42.  
  43. .light-round .slide-arrows a.next {
  44.         right: 20px;
  45.         background-position: -66px 0;
  46. }
  47.  
  48. /* SLIDE ARROWS */
  49.  
  50.  
  51. /* SLIDESHOW CONTROLS */
  52.  
  53. .light-round .slideshow-controls {
  54.         background: url(images/playpause.png) no-repeat;
  55.         width: 66px;
  56.         height: 66px;
  57.         top: 50%;
  58.         left: 50%;
  59.         margin-top: -33px;
  60.         margin-left: -33px;
  61. }
  62.  
  63.  
  64. .light-round .slideshow-controls.pause {
  65.         background-position: 0 0;
  66. }
  67.  
  68.  
  69. .light-round .slideshow-controls.play {
  70.         background-position: -66px 0;
  71. }
  72.  
  73. /* END OF SLIDESHOW CONTROLS */
  74.  
  75.  
  76. /* TIMER ANIMATION */
  77.  
  78. .light-round .timer-animation {
  79.         top: 20px;
  80.         right: 20px;
  81. }
  82.  
  83. /* END OF TIMER ANIMATION */
  84.  
  85.  
  86. /* SLIDE CAPTION */
  87.  
  88. .light-round .caption-container .background {
  89.         background-color: #000;
  90.         width: 100%;
  91.         height: 100%;
  92. }
  93.  
  94.  
  95. .light-round .caption-container .caption {
  96.         color: #FFF;
  97.         margin: 0;
  98.         padding: 8px;
  99.         font-size: 16px;
  100.         line-height: 18px;
  101. }
  102.  
  103. /* END OF SLIDE CAPTION */
  104.  
  105.  
  106. /* SLIDE BUTTONS/BULLETS */
  107.  
  108. /* main container of the navigation buttons */
  109. .light-round .slide-buttons {
  110.         margin-top: 40px;
  111. }
  112.  
  113.  
  114. /*
  115.  left, right and middle of the main container
  116.  for this skin, these elements are not styled by default
  117.  feel free to add your own styling
  118. */
  119. .light-round .slide-buttons .left,
  120. .light-round .slide-buttons .right {
  121. }
  122.  
  123.  
  124. .light-round .slide-buttons .left {
  125. }
  126.  
  127.  
  128. .light-round .slide-buttons .middle {
  129. }
  130.  
  131.  
  132. .light-round .slide-buttons .right {
  133. }
  134.  
  135.  
  136. /* this contains the buttons */
  137. .light-round .slide-buttons .buttons-inner {
  138. }
  139.  
  140.  
  141. /* this is a button */
  142. .light-round .slide-buttons .buttons-inner a {
  143.         background: url(images/buttons.png) no-repeat;
  144.         background-position: 0 0;
  145.         width: 14px;
  146.         height: 14px;
  147.         margin: 0 2px;
  148. }
  149.  
  150.  
  151. .light-round .slide-buttons .buttons-inner a.over {
  152.         background-position: -14px 0;
  153. }
  154.  
  155.  
  156. .light-round .slide-buttons .buttons-inner a.select {
  157.         background-position: -28px 0;
  158. }
  159.  
  160.  
  161. /* this is used to style the numbers from within the buttons, when they are used */
  162. .light-round .slide-buttons .buttons-inner a .number {
  163.         margin-top: 2px;
  164.         font-size: 8px;
  165.         line-height: 10px;
  166.         font-weight: bold;
  167.         color: #888;
  168. }
  169.  
  170.  
  171. .light-round .slide-buttons .buttons-inner a.over .number {
  172.         color: #666;
  173. }
  174.  
  175.  
  176. .light-round .slide-buttons .buttons-inner a.select .number {
  177.         color: #666;
  178. }
  179.  
  180.  
  181. /*
  182.  applied to the thumbnail when the thumbnail is used only as a tooltip
  183.  sets the distance between the button and the thumbnail
  184. */
  185. .light-round .slide-buttons .buttons-inner .thumbnail-wrapper {
  186.         margin-bottom: 10px;
  187. }
  188.  
  189. /* END OF SLIDE BUTTONS/BULLETS */
  190.  
  191.  
  192. /* THUMBNAIL IMAGE */
  193.  
  194. .light-round .thumbnail {
  195.         background-color: #FFF;
  196.         border: solid 3px #FFF;
  197.         -moz-box-shadow: 0 0 10px #AAA;
  198.         -webkit-box-shadow: 0 0 10px #AAA;
  199.         box-shadow: 0 0 10px #AAA;
  200.         -ms-filter: "progid: DXImageTransform.Microsoft.Shadow(Strength=4, Direction=130, Color='#AAAAAA')";
  201.         filter: progid: DXImageTransform.Microsoft.Shadow(Strength=4, Direction=130, Color='#AAAAAA');
  202. }
  203.  
  204. /* END OF THUMBNAIL IMAGE */
  205.  
  206.  
  207. /* THUMBNAIL SCROLLER */
  208.  
  209. .light-round .thumbnail-scroller.horizontal {
  210.         bottom: 0;
  211.         left: 0;
  212.         padding: 0 50px;
  213.         margin-top: 30px;
  214. }
  215.  
  216.  
  217. .light-round .thumbnail-scroller.horizontal.overlay {
  218.         bottom: 80px;
  219.         margin-top: 0;
  220. }
  221.  
  222.  
  223. .light-round .thumbnail-scroller.vertical {
  224.         right: 0;
  225.         top: 0;
  226.         padding: 50px 0;
  227.         margin-left: 30px;
  228. }
  229.  
  230.  
  231. .light-round .thumbnail-scroller.vertical.overlay {
  232.         right: 80px;
  233.         margin-left: 0;
  234. }
  235.  
  236.  
  237. .light-round .thumbnail-scroller .thumbnail-wrapper {
  238.         margin: 5px;
  239.         padding: 4px;
  240. }
  241.  
  242.  
  243. .light-round .thumbnail-scroller .thumbnail.over {
  244.         border: solid 3px #FFF;
  245.         -moz-box-shadow: 0 0 10px #555;
  246.         -webkit-box-shadow: 0 0 10px #555;
  247.         box-shadow: 0 0 10px #555;
  248.         -ms-filter: "progid: DXImageTransform.Microsoft.Shadow(Strength=4, Direction=130, Color='#555555')";
  249.         filter: progid: DXImageTransform.Microsoft.Shadow(Strength=4, Direction=130, Color='#555555');
  250. }
  251.  
  252.  
  253. .light-round .thumbnail-scroller .thumbnail.select {
  254.         border: solid 3px #FFF;
  255.         -moz-box-shadow: 0 0 10px #555;
  256.         -webkit-box-shadow: 0 0 10px #555;
  257.         box-shadow: 0 0 10px #555;
  258.         -ms-filter: "progid: DXImageTransform.Microsoft.Shadow(Strength=4, Direction=130, Color='#555555')";
  259.         filter: progid: DXImageTransform.Microsoft.Shadow(Strength=4, Direction=130, Color='#555555');
  260. }
  261.  
  262.  
  263. /* THUMBNAIL CAPTION */
  264.  
  265. .light-round .thumbnail .caption .background {
  266.         background-color: #000;
  267.         filter: alpha(opacity=50);
  268.         opacity: 0.5;
  269. }
  270.  
  271.  
  272. .light-round .thumbnail .caption .content {
  273.         color: #FFF;
  274.         font-size: 12px;
  275.         line-height: 14px;
  276.         text-align: center;
  277.         padding: 2px 0;
  278.         margin: 0;
  279. }
  280.  
  281. /* END OF THUMBNAIL CAPTION */
  282.  
  283.  
  284. /* THUMBNAIL SCROLLER ARROWS */
  285.  
  286. .light-round .thumbnail-scroller .arrows a {
  287.         background: url(images/arrows_small.png) no-repeat;
  288.         width: 40px;
  289.         height: 40px;
  290. }
  291.  
  292.  
  293. .light-round .thumbnail-scroller.vertical .arrows a {
  294.         background: url(images/arrows_v_small.png) no-repeat;
  295. }
  296.  
  297.  
  298. .light-round .thumbnail-scroller .arrows a.next {
  299.         background-position: -40px 0;
  300. }
  301.  
  302.  
  303. .light-round .thumbnail-scroller.horizontal .arrows a.previous {
  304.         left: 0;
  305. }
  306.  
  307.  
  308. .light-round .thumbnail-scroller.horizontal .arrows a.next {
  309.         right: 0;
  310. }
  311.  
  312.  
  313. .light-round .thumbnail-scroller.vertical .arrows a.previous {
  314.         top: 0;
  315. }
  316.  
  317.  
  318. .light-round .thumbnail-scroller.vertical .arrows a.next {
  319.         bottom: 0;
  320. }
  321.  
  322. /* END OF THUMBNAIL SCROLLER ARROWS */
  323.  
  324.  
  325. /* THUMBNAIL SCROLLER BUTTONS */
  326.  
  327. .light-round .thumbnail-scroller .buttons a {
  328.         background: url(images/buttons_small.png) no-repeat;
  329.         background-position: 0 0;
  330.         width: 10px;
  331.         height: 10px;
  332.         margin: 2px;
  333. }
  334.  
  335.  
  336. .light-round .thumbnail-scroller .buttons a.over {
  337.         background-position: -10px 0;
  338. }
  339.  
  340.  
  341. .light-round .thumbnail-scroller .buttons a.select {
  342.         background-position: -20px 0;
  343. }
  344.  
  345. /* END OF THUMBNAIL SCROLLER BUTTONS */
  346.  
  347.  
  348. /* THUMBNAIL SCROLLER SCROLLBAR */
  349.  
  350. .light-round .thumbnail-scroller.horizontal .scrollbar {
  351.         margin-top: 30px;
  352. }
  353.  
  354.  
  355. .light-round .thumbnail-scroller.vertical .scrollbar {
  356.         margin-left: 30px;
  357. }
  358.  
  359. /* END OF THUMBNAIL SCROLLER SCROLLBAR */
  360.  
  361. /* END OF THUMBNAIL SCROLLER  */
  362.  
  363.  
  364. /* TOOLTIP */
  365.  
  366. .tooltip {
  367.         background-color: #DDD;
  368.         margin-bottom: 20px;
  369.         border: #EEE solid 4px;
  370.         border-radius: 8px;
  371.         -moz-border-radius: 8px;
  372.         -webkit-border-radius: 8px;
  373. }
  374.  
  375.  
  376. .tooltip .content {
  377.         color: #999;
  378.         padding: 10px;
  379.         margin: 0;
  380. }
  381.  
  382. /* END OF TOOLTIP */
Raw Paste

Login or Register to edit or fork this paste. It's free.