CSS   28
Glossy Square Gray css
Guest on 17th March 2023 12:12:03 AM


  1. /*
  2.         Skin Name: Glossy Square Gray
  3.         Class: glossy-square-gray
  4.         Description: Glossy Square Gray skin for Advanced Slider jQuery plugin
  5.         Author: David
  6. */
  7.  
  8.  
  9. /* MAIN SLIDE */
  10.  
  11. .glossy-square-gray .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-square-gray .slide {
  21.         background-color: #FFF;
  22. }
  23.  
  24. /* END OF MAIN SLIDE */
  25.  
  26.  
  27. /* SLIDE ARROWS */
  28.  
  29. .glossy-square-gray .slide-arrows a {
  30.         background: url(images/arrows.png) no-repeat;
  31.         width: 64px;
  32.         height: 64px;
  33.         top: 50%;
  34.         margin-top: -32px;
  35. }
  36.  
  37.  
  38. .glossy-square-gray .slide-arrows a.previous {
  39.         left: -32px;
  40. }
  41.  
  42.  
  43. .glossy-square-gray .slide-arrows a.next {
  44.         right: -32px;
  45.         background-position: -64px 0;
  46. }
  47.  
  48. /* SLIDE ARROWS */
  49.  
  50.  
  51. /* SLIDESHOW CONTROLS */
  52.  
  53. .glossy-square-gray .slideshow-controls {
  54.         background: url(images/playpause.png) no-repeat;
  55.         width: 64px;
  56.         height: 64px;
  57.         top: 50%;
  58.         left: 50%;
  59.         margin-top: -32px;
  60.         margin-left: -32px;
  61. }
  62.  
  63.  
  64. .glossy-square-gray .slideshow-controls.pause {
  65.         background-position: 0 0;
  66. }
  67.  
  68.  
  69. .glossy-square-gray .slideshow-controls.play {
  70.         background-position: -64px 0;
  71. }
  72.  
  73. /* END OF SLIDESHOW CONTROLS */
  74.  
  75.  
  76. /* TIMER ANIMATION */
  77.  
  78. .glossy-square-gray .timer-animation {
  79.         top: 20px;
  80.         right: 20px;
  81. }
  82.  
  83. /* END OF TIMER ANIMATION */
  84.  
  85.  
  86. /* SLIDE CAPTION */
  87.  
  88. .glossy-square-gray .caption-container .background {
  89.         background-color: #000;
  90.         width: 100%;
  91.         height: 100%;
  92. }
  93.  
  94.  
  95. .glossy-square-gray .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-square-gray .slide-buttons {
  110.         margin-top: 40px;
  111. }
  112.  
  113.  
  114. .glossy-square-gray .slide-buttons .left,
  115. .glossy-square-gray .slide-buttons .right {
  116. }
  117.  
  118.  
  119. .glossy-square-gray .slide-buttons .left {
  120. }
  121.  
  122.  
  123. .glossy-square-gray .slide-buttons .middle {
  124. }
  125.  
  126.  
  127. .glossy-square-gray .slide-buttons .right {
  128. }
  129.  
  130.  
  131. /* this contains the buttons */
  132. .glossy-square-gray .slide-buttons .buttons-inner {
  133. }
  134.  
  135.  
  136. /* this contains the buttons */
  137. .glossy-square-gray .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-square-gray .slide-buttons .buttons-inner a.over {
  147.         background-position: -14px 0;
  148. }
  149.  
  150.  
  151. .glossy-square-gray .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-square-gray .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-square-gray .slide-buttons .buttons-inner a.over .number {
  167.         color: #FFF;
  168. }
  169.  
  170.  
  171. .glossy-square-gray .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-square-gray .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-square-gray .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-square-gray .thumbnail-scroller.horizontal {
  205.         bottom: 0;
  206.         left: 0;
  207.         /*padding: 0 50px;*/
  208.         margin-top: 7px;
  209. }
  210.  
  211.  
  212. .glossy-square-gray .thumbnail-scroller.horizontal.overlay {
  213.         bottom: 80px;
  214.         margin-top: 0;
  215. }
  216.  
  217.  
  218. .glossy-square-gray .thumbnail-scroller.vertical {
  219.         right: 0;
  220.         top: 0;
  221.         padding: 50px 0;
  222.         margin-left: 30px;
  223. }
  224.  
  225.  
  226. .glossy-square-gray .thumbnail-scroller.vertical.overlay {
  227.         right: 80px;
  228.         margin-left: 0;
  229. }
  230.  
  231.  
  232. .glossy-square-gray .thumbnail-scroller .thumbnail-wrapper {
  233.         margin: 5px;
  234.         padding: 4px;
  235. }
  236.  
  237.  
  238. .glossy-square-gray .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-square-gray .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-square-gray .thumbnail .caption .background {
  261.         background-color: #000;
  262.         filter: alpha(opacity=50);
  263.         opacity: 0.5;
  264. }
  265.  
  266.  
  267. .glossy-square-gray .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-square-gray .thumbnail-scroller .arrows a {
  282.         background: url(images/arrows_small.png) no-repeat;
  283.         width: 22px;
  284.         height: 30px;
  285.         margin-left:-20px;
  286. }
  287.  
  288.  
  289. .glossy-square-gray .thumbnail-scroller.vertical .arrows a {
  290.         background: url(images/arrows_v_small.png) no-repeat;
  291.         width: 30px;
  292.         height: 22px;
  293.        
  294. }
  295.  
  296.  
  297. .glossy-square-gray .thumbnail-scroller.horizontal .arrows a.previous {
  298.         left: 0;
  299. }
  300.  
  301.  
  302. .glossy-square-gray .thumbnail-scroller.horizontal .arrows a.next {
  303.         right: -20px;
  304.         background-position: -22px 0;
  305. }
  306.  
  307.  
  308. .glossy-square-gray .thumbnail-scroller.vertical .arrows a.previous {
  309.         top: 0;
  310. }
  311.  
  312.  
  313. .glossy-square-gray .thumbnail-scroller.vertical .arrows a.next {
  314.         bottom: 0;
  315.         background-position: 0 -22px;
  316. }
  317.  
  318. /* END OF THUMBNAIL SCROLLER ARROWS */
  319.  
  320.  
  321. /* THUMBNAIL SCROLLER BUTTONS */
  322.  
  323. .glossy-square-gray .thumbnail-scroller .buttons a {
  324.         background: url(images/buttons_small.png) no-repeat;
  325.         background-position: 0 0;
  326.         width: 11px;
  327.         height: 12px;
  328.         margin: 2px;
  329. }
  330.  
  331.  
  332. .glossy-square-gray .thumbnail-scroller .buttons a.over {
  333.         background-position: -11px 0;
  334. }
  335.  
  336.  
  337. .glossy-square-gray .thumbnail-scroller .buttons a.select {
  338.         background-position: -22px 0;
  339. }
  340.  
  341. /* END OF THUMBNAIL SCROLLER BUTTONS */
  342.  
  343.  
  344. /* THUMBNAIL SCROLLER SCROLLBAR */
  345.  
  346. .glossy-square-gray .thumbnail-scroller.horizontal .scrollbar {
  347.         margin-top: 30px;
  348. }
  349.  
  350.  
  351. .glossy-square-gray .thumbnail-scroller.vertical .scrollbar {
  352.         margin-left: 30px;
  353. }
  354.  
  355. /* END OF THUMBNAIL SCROLLER SCROLLBAR */
  356.  
  357. /* END OF THUMBNAIL SCROLLER */
  358.  
  359.  
  360. /* TOOLTIP */
  361.  
  362. .tooltip {
  363.         background-color: #DDD;
  364.         margin-bottom: 20px;
  365.         border: #EEE solid 4px;
  366.         border-radius: 8px;
  367.         -moz-border-radius: 8px;
  368.         -webkit-border-radius: 8px;
  369. }
  370.  
  371.  
  372. .tooltip .content {
  373.         color: #999;
  374.         padding: 10px;
  375.         margin: 0;
  376. }
  377.  
  378. /* END OF TOOLTIP */
Raw Paste

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