CSS   95
Minimal Small css
Guest on 17th March 2023 12:14:26 AM


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