CSS   100
Text Thumbnail css
Guest on 17th March 2023 12:18:55 AM


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

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