fullpage.css 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310
  1. /*!
  2. * fullPage 4.0.20
  3. * https://github.com/alvarotrigo/fullPage.js
  4. *
  5. * @license GPLv3 for open source use only
  6. * or Fullpage Commercial License for commercial use
  7. * http://alvarotrigo.com/fullPage/pricing/
  8. *
  9. * Copyright (C) 2021 http://alvarotrigo.com/fullPage - A project by Alvaro Trigo
  10. */
  11. html.fp-enabled,
  12. .fp-enabled body {
  13. margin: 0;
  14. padding: 0;
  15. overflow:hidden;
  16. /*Avoid flicker on slides transitions for mobile phones #336 */
  17. -webkit-tap-highlight-color: rgba(0,0,0,0);
  18. }
  19. .fp-section {
  20. position: relative;
  21. -webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */
  22. -moz-box-sizing: border-box; /* <=28 */
  23. box-sizing: border-box;
  24. height: 100%;
  25. display: block;
  26. }
  27. .fp-slide {
  28. float: left;
  29. }
  30. .fp-slide, .fp-slidesContainer {
  31. height: 100%;
  32. display: block;
  33. }
  34. .fp-slides {
  35. z-index:1;
  36. height: 100%;
  37. overflow: hidden;
  38. position: relative;
  39. -webkit-transition: all 0.3s ease-out; /* Safari<=6 Android<=4.3 */
  40. transition: all 0.3s ease-out;
  41. }
  42. .fp-table{
  43. display: flex;
  44. flex-direction: column;
  45. justify-content: center;
  46. width: 100%;
  47. }
  48. .fp-slidesContainer {
  49. float: left;
  50. position: relative;
  51. }
  52. .fp-controlArrow {
  53. -webkit-user-select: none; /* webkit (safari, chrome) browsers */
  54. -moz-user-select: none; /* mozilla browsers */
  55. -khtml-user-select: none; /* webkit (konqueror) browsers */
  56. -ms-user-select: none; /* IE10+ */
  57. position: absolute;
  58. z-index: 4;
  59. top: 50%;
  60. cursor: pointer;
  61. margin-top: -38px;
  62. -webkit-transform: translate3d(0,0,0);
  63. -ms-transform: translate3d(0,0,0);
  64. transform: translate3d(0,0,0);
  65. }
  66. .fp-prev{
  67. left: 15px;
  68. }
  69. .fp-next{
  70. right: 15px;
  71. }
  72. .fp-arrow{
  73. width: 0;
  74. height: 0;
  75. border-style: solid;
  76. }
  77. .fp-arrow.fp-prev {
  78. border-width: 38.5px 34px 38.5px 0;
  79. border-color: transparent #fff transparent transparent;
  80. }
  81. .fp-arrow.fp-next {
  82. border-width: 38.5px 0 38.5px 34px;
  83. border-color: transparent transparent transparent #fff;
  84. }
  85. .fp-notransition {
  86. -webkit-transition: none !important;
  87. transition: none !important;
  88. }
  89. #fp-nav {
  90. position: fixed;
  91. z-index: 100;
  92. top: 50%;
  93. opacity: 1;
  94. transform: translateY(-50%);
  95. -ms-transform: translateY(-50%);
  96. -webkit-transform: translate3d(0,-50%,0);
  97. }
  98. #fp-nav.fp-right {
  99. right: 17px;
  100. }
  101. #fp-nav.fp-left {
  102. left: 17px;
  103. }
  104. .fp-slidesNav{
  105. position: absolute;
  106. z-index: 4;
  107. opacity: 1;
  108. -webkit-transform: translate3d(0,0,0);
  109. -ms-transform: translate3d(0,0,0);
  110. transform: translate3d(0,0,0);
  111. left: 0 !important;
  112. right: 0;
  113. margin: 0 auto !important;
  114. }
  115. .fp-slidesNav.fp-bottom {
  116. bottom: 17px;
  117. }
  118. .fp-slidesNav.fp-top {
  119. top: 17px;
  120. }
  121. #fp-nav ul,
  122. .fp-slidesNav ul {
  123. margin: 0;
  124. padding: 0;
  125. }
  126. #fp-nav ul li,
  127. .fp-slidesNav ul li {
  128. display: block;
  129. width: 14px;
  130. height: 13px;
  131. margin: 7px;
  132. position:relative;
  133. }
  134. .fp-slidesNav ul li {
  135. display: inline-block;
  136. }
  137. #fp-nav ul li a,
  138. .fp-slidesNav ul li a {
  139. display: block;
  140. position: relative;
  141. z-index: 1;
  142. width: 100%;
  143. height: 100%;
  144. cursor: pointer;
  145. text-decoration: none;
  146. }
  147. #fp-nav ul li a.active span,
  148. .fp-slidesNav ul li a.active span,
  149. #fp-nav ul li:hover a.active span,
  150. .fp-slidesNav ul li:hover a.active span{
  151. height: 12px;
  152. width: 12px;
  153. margin: -6px 0 0 -6px;
  154. border-radius: 100%;
  155. }
  156. #fp-nav ul li a span,
  157. .fp-slidesNav ul li a span {
  158. border-radius: 50%;
  159. position: absolute;
  160. z-index: 1;
  161. height: 4px;
  162. width: 4px;
  163. border: 0;
  164. background: #333;
  165. left: 50%;
  166. top: 50%;
  167. margin: -2px 0 0 -2px;
  168. -webkit-transition: all 0.1s ease-in-out;
  169. -moz-transition: all 0.1s ease-in-out;
  170. -o-transition: all 0.1s ease-in-out;
  171. transition: all 0.1s ease-in-out;
  172. }
  173. #fp-nav ul li:hover a span,
  174. .fp-slidesNav ul li:hover a span{
  175. width: 10px;
  176. height: 10px;
  177. margin: -5px 0px 0px -5px;
  178. }
  179. #fp-nav ul li .fp-tooltip {
  180. position: absolute;
  181. top: -2px;
  182. color: #fff;
  183. font-size: 14px;
  184. font-family: arial, helvetica, sans-serif;
  185. white-space: nowrap;
  186. max-width: 220px;
  187. overflow: hidden;
  188. display: block;
  189. opacity: 0;
  190. width: 0;
  191. cursor: pointer;
  192. }
  193. #fp-nav ul li:hover .fp-tooltip,
  194. #fp-nav.fp-show-active a.active + .fp-tooltip {
  195. -webkit-transition: opacity 0.2s ease-in;
  196. transition: opacity 0.2s ease-in;
  197. width: auto;
  198. opacity: 1;
  199. }
  200. #fp-nav ul li .fp-tooltip.fp-right {
  201. right: 20px;
  202. }
  203. #fp-nav ul li .fp-tooltip.fp-left {
  204. left: 20px;
  205. }
  206. .fp-auto-height.fp-section,
  207. .fp-auto-height .fp-slide{
  208. height: auto !important;
  209. }
  210. .fp-responsive .fp-is-overflow.fp-section{
  211. height: auto !important;
  212. }
  213. /* Used with autoScrolling: false */
  214. .fp-scrollable.fp-responsive .fp-is-overflow.fp-section,
  215. .fp-scrollable .fp-section,
  216. .fp-scrollable .fp-slide{
  217. /* Fallback for browsers that do not support Custom Properties */
  218. height: 100vh;
  219. height: calc(var(--vh, 1vh) * 100);
  220. }
  221. .fp-scrollable.fp-responsive .fp-is-overflow.fp-section:not(.fp-auto-height):not([data-percentage]),
  222. .fp-scrollable .fp-section:not(.fp-auto-height):not([data-percentage]),
  223. .fp-scrollable .fp-slide:not(.fp-auto-height):not([data-percentage]){
  224. /* Fallback for browsers that do not support Custom Properties */
  225. min-height: 100vh;
  226. min-height: calc(var(--vh, 1vh) * 100);
  227. }
  228. /* Disabling vertical centering on scrollable elements */
  229. .fp-overflow{
  230. justify-content: flex-start;
  231. max-height: 100vh;
  232. }
  233. /* No scrollable when using auto-height */
  234. .fp-scrollable .fp-auto-height .fp-overflow{
  235. max-height: none;
  236. }
  237. .fp-is-overflow .fp-overflow.fp-auto-height-responsive,
  238. .fp-is-overflow .fp-overflow.fp-auto-height,
  239. .fp-is-overflow > .fp-overflow{
  240. overflow-y: auto;
  241. }
  242. .fp-overflow{
  243. outline:none;
  244. }
  245. .fp-overflow.fp-table{
  246. display: block;
  247. }
  248. .fp-responsive .fp-auto-height-responsive.fp-section,
  249. .fp-responsive .fp-auto-height-responsive .fp-slide{
  250. height: auto !important;
  251. min-height: auto !important;
  252. }
  253. /*Only display content to screen readers*/
  254. .fp-sr-only{
  255. position: absolute;
  256. width: 1px;
  257. height: 1px;
  258. padding: 0;
  259. overflow: hidden;
  260. clip: rect(0, 0, 0, 0);
  261. white-space: nowrap;
  262. border: 0;
  263. }
  264. /* Customize website's scrollbar like Mac OS
  265. Not supports in Firefox and IE */
  266. .fp-scroll-mac .fp-overflow::-webkit-scrollbar {
  267. background-color: transparent;
  268. width: 9px;
  269. }
  270. .fp-scroll-mac .fp-overflow::-webkit-scrollbar-track {
  271. background-color: transparent;
  272. }
  273. .fp-scroll-mac .fp-overflow::-webkit-scrollbar-thumb {
  274. background-color: rgba(0,0,0,.4);
  275. border-radius: 16px;
  276. border: 4px solid transparent;
  277. }
  278. .fp-warning,
  279. .fp-watermark{
  280. z-index: 9999999;
  281. position: absolute;
  282. bottom: 0;
  283. }
  284. .fp-warning,
  285. .fp-watermark a{
  286. text-decoration: none;
  287. color: #000;
  288. background: rgba(255,255,255,0.6);
  289. padding: 5px 8px;
  290. font-size: 14px;
  291. font-family: arial;
  292. color: black;
  293. display: inline-block;
  294. border-radius: 3px;
  295. margin: 12px;
  296. }
  297. .fp-noscroll .fp-overflow{
  298. overflow: hidden;
  299. }