CSS   23
Glossy Curved Black css
Guest on 17th March 2023 12:08:29 AM


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

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