You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

132 lines
2.8 KiB

  1. /*!
  2. * pagepiling.js 1.5.6
  3. *
  4. * https://github.com/alvarotrigo/pagePiling.js
  5. * @license MIT licensed
  6. *
  7. * Copyright (C) 2016 alvarotrigo.com - A project by Alvaro Trigo
  8. */
  9. html, body {
  10. overflow:hidden;
  11. margin:0;
  12. padding:0;
  13. /*Avoid flicker on slides transitions for mobile phones #336 */
  14. -webkit-tap-highlight-color: rgba(0,0,0,0);
  15. }
  16. .pp-section {
  17. height:100%;
  18. position:absolute;
  19. width:100%;
  20. /* fixes flickering in firefox*/
  21. backface-visibility: hidden;
  22. }
  23. .pp-easing {
  24. -webkit-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
  25. -moz-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
  26. -o-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
  27. transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
  28. /* custom */
  29. -webkit-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
  30. -moz-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
  31. -o-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
  32. transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
  33. /* custom */
  34. }
  35. #pp-nav {
  36. position: fixed;
  37. z-index: 100;
  38. margin-top: -32px;
  39. top: 50%;
  40. opacity: 1;
  41. }
  42. #pp-nav.right {
  43. right: 17px;
  44. }
  45. #pp-nav.left {
  46. left: 17px;
  47. }
  48. .pp-section.pp-table{
  49. display: table;
  50. }
  51. .pp-tableCell {
  52. display: table-cell;
  53. vertical-align: middle;
  54. width: 100%;
  55. height: 100%;
  56. }
  57. .pp-slidesNav{
  58. position: absolute;
  59. z-index: 4;
  60. left: 50%;
  61. opacity: 1;
  62. }
  63. .pp-slidesNav.bottom {
  64. bottom: 17px;
  65. }
  66. .pp-slidesNav.top {
  67. top: 17px;
  68. }
  69. #pp-nav ul,
  70. .pp-slidesNav ul {
  71. margin: 0;
  72. padding: 0;
  73. }
  74. #pp-nav li,
  75. .pp-slidesNav li {
  76. display: block;
  77. width: 14px;
  78. height: 13px;
  79. margin: 7px;
  80. position:relative;
  81. }
  82. .pp-slidesNav li {
  83. display: inline-block;
  84. }
  85. #pp-nav li a,
  86. .pp-slidesNav li a {
  87. display: block;
  88. position: relative;
  89. z-index: 1;
  90. width: 100%;
  91. height: 100%;
  92. cursor: pointer;
  93. text-decoration: none;
  94. }
  95. #pp-nav li .active span,
  96. .pp-slidesNav .active span {
  97. background: #333;
  98. }
  99. #pp-nav span,
  100. .pp-slidesNav span {
  101. top: 2px;
  102. left: 2px;
  103. width: 8px;
  104. height: 8px;
  105. border: 1px solid #000;
  106. background: rgba(0, 0, 0, 0);
  107. border-radius: 50%;
  108. position: absolute;
  109. z-index: 1;
  110. }
  111. .pp-tooltip {
  112. position: absolute;
  113. top: -2px;
  114. color: #fff;
  115. font-size: 14px;
  116. font-family: arial, helvetica, sans-serif;
  117. white-space: nowrap;
  118. max-width: 220px;
  119. }
  120. .pp-tooltip.right {
  121. right: 20px;
  122. }
  123. .pp-tooltip.left {
  124. left: 20px;
  125. }
  126. .pp-scrollable{
  127. overflow-y: scroll;
  128. height: 100%;
  129. }