peppermint.appearance.css 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. .peppermint {
  2. text-align: center;
  3. }
  4. .peppermint figure {
  5. margin: 0 0 1.5em 0;
  6. }
  7. .peppermint figure img {
  8. vertical-align: top;
  9. max-width: 100%;
  10. -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
  11. box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
  12. }
  13. .peppermint figure figcaption {
  14. font-style: italic;
  15. color: #787575;
  16. font-size: 0.8em;
  17. margin-top: 0.5em;
  18. }
  19. .peppermint.peppermint-active {
  20. margin-bottom: 1.5em;
  21. }
  22. .peppermint-slides {
  23. padding-top: 0.5em;
  24. padding-bottom: 0.5em;
  25. }
  26. /* dots */
  27. ul.peppermint-dots {
  28. margin: 0.6em 0;
  29. padding: 0;
  30. text-align: center;
  31. list-style-type: none;
  32. }
  33. .peppermint.peppermint-active ul.peppermint-dots {
  34. margin: 0 0 0.6em 0;
  35. }
  36. .peppermint.peppermint-active .peppermint-slides + ul.peppermint-dots {
  37. margin: 0.6em 0 0 0;
  38. }
  39. ul.peppermint-dots > li {
  40. display: inline-block;
  41. position: relative;
  42. padding: 0.5em 0.6em;
  43. width: 12px;
  44. height: 12px;
  45. cursor: pointer;
  46. text-align: center;
  47. vertical-align: middle;
  48. -webkit-user-select: none;
  49. -moz-user-select: none;
  50. -ms-user-select: none;
  51. user-select: none;
  52. -webkit-tap-highlight-color: transparent;
  53. /* ie7 fallback */
  54. *display: inline;
  55. *zoom: 1;
  56. }
  57. ul.peppermint-dots > li.peppermint-mouse-clicked,
  58. ul.peppermint-dots > li:active {
  59. outline: 0;
  60. }
  61. ul.peppermint-dots > li > span {
  62. display: inline-block;
  63. position: absolute;
  64. top: 50%;
  65. left: 50%;
  66. margin: -4px 0 0 -4px;
  67. width: 8px;
  68. height: 8px;
  69. border-radius: 50%;
  70. background: #9b9890;
  71. }
  72. ul.peppermint-dots > li.peppermint-active-dot > span {
  73. margin: -6px 0 0 -6px;
  74. width: 10px;
  75. height: 10px;
  76. border: 1px solid #9b9890;
  77. background: transparent;
  78. }