CSS   103
Text Thumbnail Pointer
Guest on 17th March 2023 12:17:37 AM


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

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