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.

888 lines
18 KiB

2 years ago
  1. body.compensate-for-scrollbar {
  2. overflow: hidden;
  3. }
  4. .fancybox-active {
  5. height: auto;
  6. }
  7. .fancybox-is-hidden {
  8. left: -9999px;
  9. margin: 0;
  10. position: absolute !important;
  11. top: -9999px;
  12. visibility: hidden;
  13. }
  14. .fancybox-container {
  15. -webkit-backface-visibility: hidden;
  16. height: 100%;
  17. left: 0;
  18. outline: none;
  19. position: fixed;
  20. -webkit-tap-highlight-color: transparent;
  21. top: 0;
  22. -ms-touch-action: manipulation;
  23. touch-action: manipulation;
  24. transform: translateZ(0);
  25. width: 100%;
  26. z-index: 99999;
  27. }
  28. .fancybox-container * {
  29. box-sizing: border-box;
  30. }
  31. .fancybox-outer,
  32. .fancybox-inner,
  33. .fancybox-bg,
  34. .fancybox-stage {
  35. bottom: 0;
  36. left: 0;
  37. position: absolute;
  38. right: 0;
  39. top: 0;
  40. }
  41. .fancybox-outer {
  42. -webkit-overflow-scrolling: touch;
  43. overflow-y: auto;
  44. }
  45. .fancybox-bg {
  46. background: rgb(30, 30, 30);
  47. opacity: 0;
  48. transition-duration: inherit;
  49. transition-property: opacity;
  50. transition-timing-function: cubic-bezier(.47, 0, .74, .71);
  51. }
  52. .fancybox-is-open .fancybox-bg {
  53. opacity: .9;
  54. transition-timing-function: cubic-bezier(.22, .61, .36, 1);
  55. }
  56. .fancybox-infobar,
  57. .fancybox-toolbar,
  58. .fancybox-caption,
  59. .fancybox-navigation .fancybox-button {
  60. direction: ltr;
  61. opacity: 0;
  62. position: absolute;
  63. transition: opacity .25s ease, visibility 0s ease .25s;
  64. visibility: hidden;
  65. z-index: 99997;
  66. }
  67. .fancybox-show-infobar .fancybox-infobar,
  68. .fancybox-show-toolbar .fancybox-toolbar,
  69. .fancybox-show-caption .fancybox-caption,
  70. .fancybox-show-nav .fancybox-navigation .fancybox-button {
  71. opacity: 1;
  72. transition: opacity .25s ease 0s, visibility 0s ease 0s;
  73. visibility: visible;
  74. }
  75. .fancybox-infobar {
  76. color: #ccc;
  77. font-size: 13px;
  78. -webkit-font-smoothing: subpixel-antialiased;
  79. height: 44px;
  80. left: 0;
  81. line-height: 44px;
  82. min-width: 44px;
  83. mix-blend-mode: difference;
  84. padding: 0 10px;
  85. pointer-events: none;
  86. top: 0;
  87. -webkit-touch-callout: none;
  88. -webkit-user-select: none;
  89. -moz-user-select: none;
  90. -ms-user-select: none;
  91. user-select: none;
  92. }
  93. .fancybox-toolbar {
  94. right: 0;
  95. top: 0;
  96. }
  97. .fancybox-stage {
  98. direction: ltr;
  99. overflow: visible;
  100. transform: translateZ(0);
  101. z-index: 99994;
  102. }
  103. .fancybox-is-open .fancybox-stage {
  104. overflow: hidden;
  105. }
  106. .fancybox-slide {
  107. -webkit-backface-visibility: hidden; /* Using without prefix would break IE11 */
  108. display: none;
  109. height: 100%;
  110. left: 0;
  111. outline: none;
  112. overflow: auto;
  113. -webkit-overflow-scrolling: touch;
  114. padding: 44px;
  115. position: absolute;
  116. text-align: center;
  117. top: 0;
  118. transition-property: transform, opacity;
  119. white-space: normal;
  120. width: 100%;
  121. z-index: 99994;
  122. }
  123. .fancybox-slide::before {
  124. content: '';
  125. display: inline-block;
  126. font-size: 0;
  127. height: 100%;
  128. vertical-align: middle;
  129. width: 0;
  130. }
  131. .fancybox-is-sliding .fancybox-slide,
  132. .fancybox-slide--previous,
  133. .fancybox-slide--current,
  134. .fancybox-slide--next {
  135. display: block;
  136. }
  137. .fancybox-slide--image {
  138. overflow: hidden;
  139. padding: 44px 0;
  140. }
  141. .fancybox-slide--image::before {
  142. display: none;
  143. }
  144. .fancybox-slide--html {
  145. padding: 6px;
  146. }
  147. .fancybox-content {
  148. background: #fff;
  149. display: inline-block;
  150. margin: 0;
  151. max-width: 100%;
  152. overflow: auto;
  153. -webkit-overflow-scrolling: touch;
  154. padding: 44px;
  155. position: relative;
  156. text-align: left;
  157. vertical-align: middle;
  158. }
  159. .fancybox-slide--image .fancybox-content {
  160. animation-timing-function: cubic-bezier(.5, 0, .14, 1);
  161. -webkit-backface-visibility: hidden;
  162. background: transparent;
  163. background-repeat: no-repeat;
  164. background-size: 100% 100%;
  165. left: 0;
  166. max-width: none;
  167. overflow: visible;
  168. padding: 0;
  169. position: absolute;
  170. top: 0;
  171. -ms-transform-origin: top left;
  172. transform-origin: top left;
  173. transition-property: transform, opacity;
  174. -webkit-user-select: none;
  175. -moz-user-select: none;
  176. -ms-user-select: none;
  177. user-select: none;
  178. z-index: 99995;
  179. }
  180. .fancybox-can-zoomOut .fancybox-content {
  181. cursor: zoom-out;
  182. }
  183. .fancybox-can-zoomIn .fancybox-content {
  184. cursor: zoom-in;
  185. }
  186. .fancybox-can-swipe .fancybox-content,
  187. .fancybox-can-pan .fancybox-content {
  188. cursor: -webkit-grab;
  189. cursor: grab;
  190. }
  191. .fancybox-is-grabbing .fancybox-content {
  192. cursor: -webkit-grabbing;
  193. cursor: grabbing;
  194. }
  195. .fancybox-container [data-selectable='true'] {
  196. cursor: text;
  197. }
  198. .fancybox-image,
  199. .fancybox-spaceball {
  200. background: transparent;
  201. border: 0;
  202. height: 100%;
  203. left: 0;
  204. margin: 0;
  205. max-height: none;
  206. max-width: none;
  207. padding: 0;
  208. position: absolute;
  209. top: 0;
  210. -webkit-user-select: none;
  211. -moz-user-select: none;
  212. -ms-user-select: none;
  213. user-select: none;
  214. width: 100%;
  215. }
  216. .fancybox-spaceball {
  217. z-index: 1;
  218. }
  219. .fancybox-slide--video .fancybox-content,
  220. .fancybox-slide--map .fancybox-content,
  221. .fancybox-slide--pdf .fancybox-content,
  222. .fancybox-slide--iframe .fancybox-content {
  223. height: 100%;
  224. overflow: visible;
  225. padding: 0;
  226. width: 100%;
  227. }
  228. .fancybox-slide--video .fancybox-content {
  229. background: #000;
  230. }
  231. .fancybox-slide--map .fancybox-content {
  232. background: #e5e3df;
  233. }
  234. .fancybox-slide--iframe .fancybox-content {
  235. background: #fff;
  236. }
  237. .fancybox-video,
  238. .fancybox-iframe {
  239. background: transparent;
  240. border: 0;
  241. display: block;
  242. height: 100%;
  243. margin: 0;
  244. overflow: hidden;
  245. padding: 0;
  246. width: 100%;
  247. }
  248. /* Fix iOS */
  249. .fancybox-iframe {
  250. left: 0;
  251. position: absolute;
  252. top: 0;
  253. }
  254. .fancybox-error {
  255. background: #fff;
  256. cursor: default;
  257. max-width: 400px;
  258. padding: 40px;
  259. width: 100%;
  260. }
  261. .fancybox-error p {
  262. color: #444;
  263. font-size: 16px;
  264. line-height: 20px;
  265. margin: 0;
  266. padding: 0;
  267. }
  268. /* Buttons */
  269. .fancybox-button {
  270. background: rgba(30, 30, 30, .6);
  271. border: 0;
  272. border-radius: 0;
  273. box-shadow: none;
  274. cursor: pointer;
  275. display: inline-block;
  276. height: 44px;
  277. margin: 0;
  278. padding: 10px;
  279. position: relative;
  280. transition: color .2s;
  281. vertical-align: top;
  282. visibility: inherit;
  283. width: 44px;
  284. }
  285. .fancybox-button,
  286. .fancybox-button:visited,
  287. .fancybox-button:link {
  288. color: #ccc;
  289. }
  290. .fancybox-button:hover {
  291. color: #fff;
  292. }
  293. .fancybox-button:focus {
  294. outline: none;
  295. }
  296. .fancybox-button.fancybox-focus {
  297. outline: 1px dotted;
  298. }
  299. .fancybox-button[disabled],
  300. .fancybox-button[disabled]:hover {
  301. color: #888;
  302. cursor: default;
  303. outline: none;
  304. }
  305. /* Fix IE11 */
  306. .fancybox-button div {
  307. height: 100%;
  308. }
  309. .fancybox-button svg {
  310. display: block;
  311. height: 100%;
  312. overflow: visible;
  313. position: relative;
  314. width: 100%;
  315. }
  316. .fancybox-button svg path {
  317. fill: currentColor;
  318. stroke-width: 0;
  319. }
  320. .fancybox-button--play svg:nth-child(2),
  321. .fancybox-button--fsenter svg:nth-child(2) {
  322. display: none;
  323. }
  324. .fancybox-button--pause svg:nth-child(1),
  325. .fancybox-button--fsexit svg:nth-child(1) {
  326. display: none;
  327. }
  328. .fancybox-progress {
  329. background: #ff5268;
  330. height: 2px;
  331. left: 0;
  332. position: absolute;
  333. right: 0;
  334. top: 0;
  335. -ms-transform: scaleX(0);
  336. transform: scaleX(0);
  337. -ms-transform-origin: 0;
  338. transform-origin: 0;
  339. transition-property: transform;
  340. transition-timing-function: linear;
  341. z-index: 99998;
  342. }
  343. /* Close button on the top right corner of html content */
  344. .fancybox-close-small {
  345. background: transparent;
  346. border: 0;
  347. border-radius: 0;
  348. color: #ccc;
  349. cursor: pointer;
  350. opacity: .8;
  351. padding: 8px;
  352. position: absolute;
  353. right: -12px;
  354. top: -44px;
  355. z-index: 401;
  356. }
  357. .fancybox-close-small:hover {
  358. color: #fff;
  359. opacity: 1;
  360. }
  361. .fancybox-slide--html .fancybox-close-small {
  362. color: currentColor;
  363. padding: 10px;
  364. right: 0;
  365. top: 0;
  366. }
  367. .fancybox-slide--image.fancybox-is-scaling .fancybox-content {
  368. overflow: hidden;
  369. }
  370. .fancybox-is-scaling .fancybox-close-small,
  371. .fancybox-is-zoomable.fancybox-can-pan .fancybox-close-small {
  372. display: none;
  373. }
  374. /* Navigation arrows */
  375. .fancybox-navigation .fancybox-button {
  376. background-clip: content-box;
  377. height: 100px;
  378. opacity: 0;
  379. position: absolute;
  380. top: calc(50% - 50px);
  381. width: 70px;
  382. }
  383. .fancybox-navigation .fancybox-button div {
  384. padding: 7px;
  385. }
  386. .fancybox-navigation .fancybox-button--arrow_left {
  387. left: 0;
  388. left: env(safe-area-inset-left);
  389. padding: 31px 26px 31px 6px;
  390. }
  391. .fancybox-navigation .fancybox-button--arrow_right {
  392. padding: 31px 6px 31px 26px;
  393. right: 0;
  394. right: env(safe-area-inset-right);
  395. }
  396. /* Caption */
  397. .fancybox-caption {
  398. background: linear-gradient( to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, .15) 65%, rgba(0, 0, 0, .075) 75.5%, rgba(0, 0, 0, .037) 82.85%, rgba(0, 0, 0, .019) 88%, rgba(0, 0, 0, 0) 100% );
  399. bottom: 0;
  400. color: #eee;
  401. font-size: 14px;
  402. font-weight: 400;
  403. left: 0;
  404. line-height: 1.5;
  405. padding: 75px 44px 25px 44px;
  406. pointer-events: none;
  407. right: 0;
  408. text-align: center;
  409. z-index: 99996;
  410. }
  411. @supports (padding: max(0px)) {
  412. .fancybox-caption {
  413. padding: 75px max(44px, env(safe-area-inset-right)) max(25px, env(safe-area-inset-bottom)) max(44px, env(safe-area-inset-left));
  414. }
  415. }
  416. .fancybox-caption--separate {
  417. margin-top: -50px;
  418. }
  419. .fancybox-caption__body {
  420. max-height: 50vh;
  421. overflow: auto;
  422. pointer-events: all;
  423. }
  424. .fancybox-caption a,
  425. .fancybox-caption a:link,
  426. .fancybox-caption a:visited {
  427. color: #ccc;
  428. text-decoration: none;
  429. }
  430. .fancybox-caption a:hover {
  431. color: #fff;
  432. text-decoration: underline;
  433. }
  434. /* Loading indicator */
  435. .fancybox-loading {
  436. animation: fancybox-rotate 1s linear infinite;
  437. background: transparent;
  438. border: 4px solid #888;
  439. border-bottom-color: #fff;
  440. border-radius: 50%;
  441. height: 50px;
  442. left: 50%;
  443. margin: -25px 0 0 -25px;
  444. opacity: .7;
  445. padding: 0;
  446. position: absolute;
  447. top: 50%;
  448. width: 50px;
  449. z-index: 99999;
  450. }
  451. @keyframes fancybox-rotate {
  452. 100% {
  453. transform: rotate(360deg);
  454. }
  455. }
  456. /* Transition effects */
  457. .fancybox-animated {
  458. transition-timing-function: cubic-bezier(0, 0, .25, 1);
  459. }
  460. /* transitionEffect: slide */
  461. .fancybox-fx-slide.fancybox-slide--previous {
  462. opacity: 0;
  463. transform: translate3d(-100%, 0, 0);
  464. }
  465. .fancybox-fx-slide.fancybox-slide--next {
  466. opacity: 0;
  467. transform: translate3d(100%, 0, 0);
  468. }
  469. .fancybox-fx-slide.fancybox-slide--current {
  470. opacity: 1;
  471. transform: translate3d(0, 0, 0);
  472. }
  473. /* transitionEffect: fade */
  474. .fancybox-fx-fade.fancybox-slide--previous,
  475. .fancybox-fx-fade.fancybox-slide--next {
  476. opacity: 0;
  477. transition-timing-function: cubic-bezier(.19, 1, .22, 1);
  478. }
  479. .fancybox-fx-fade.fancybox-slide--current {
  480. opacity: 1;
  481. }
  482. /* transitionEffect: zoom-in-out */
  483. .fancybox-fx-zoom-in-out.fancybox-slide--previous {
  484. opacity: 0;
  485. transform: scale3d(1.5, 1.5, 1.5);
  486. }
  487. .fancybox-fx-zoom-in-out.fancybox-slide--next {
  488. opacity: 0;
  489. transform: scale3d(.5, .5, .5);
  490. }
  491. .fancybox-fx-zoom-in-out.fancybox-slide--current {
  492. opacity: 1;
  493. transform: scale3d(1, 1, 1);
  494. }
  495. /* transitionEffect: rotate */
  496. .fancybox-fx-rotate.fancybox-slide--previous {
  497. opacity: 0;
  498. -ms-transform: rotate(-360deg);
  499. transform: rotate(-360deg);
  500. }
  501. .fancybox-fx-rotate.fancybox-slide--next {
  502. opacity: 0;
  503. -ms-transform: rotate(360deg);
  504. transform: rotate(360deg);
  505. }
  506. .fancybox-fx-rotate.fancybox-slide--current {
  507. opacity: 1;
  508. -ms-transform: rotate(0deg);
  509. transform: rotate(0deg);
  510. }
  511. /* transitionEffect: circular */
  512. .fancybox-fx-circular.fancybox-slide--previous {
  513. opacity: 0;
  514. transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0);
  515. }
  516. .fancybox-fx-circular.fancybox-slide--next {
  517. opacity: 0;
  518. transform: scale3d(0, 0, 0) translate3d(100%, 0, 0);
  519. }
  520. .fancybox-fx-circular.fancybox-slide--current {
  521. opacity: 1;
  522. transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  523. }
  524. /* transitionEffect: tube */
  525. .fancybox-fx-tube.fancybox-slide--previous {
  526. transform: translate3d(-100%, 0, 0) scale(.1) skew(-10deg);
  527. }
  528. .fancybox-fx-tube.fancybox-slide--next {
  529. transform: translate3d(100%, 0, 0) scale(.1) skew(10deg);
  530. }
  531. .fancybox-fx-tube.fancybox-slide--current {
  532. transform: translate3d(0, 0, 0) scale(1);
  533. }
  534. /* Styling for Small-Screen Devices */
  535. @media all and (max-height: 576px) {
  536. .fancybox-slide {
  537. padding-left: 6px;
  538. padding-right: 6px;
  539. }
  540. .fancybox-slide--image {
  541. padding: 6px 0;
  542. }
  543. .fancybox-close-small {
  544. right: -6px;
  545. }
  546. .fancybox-slide--image .fancybox-close-small {
  547. background: #4e4e4e;
  548. color: #f2f4f6;
  549. height: 36px;
  550. opacity: 1;
  551. padding: 6px;
  552. right: 0;
  553. top: 0;
  554. width: 36px;
  555. }
  556. .fancybox-caption {
  557. padding-left: 12px;
  558. padding-right: 12px;
  559. }
  560. @supports (padding: max(0px)) {
  561. .fancybox-caption {
  562. padding-left: max(12px, env(safe-area-inset-left));
  563. padding-right: max(12px, env(safe-area-inset-right));
  564. }
  565. }
  566. }
  567. /* Share */
  568. .fancybox-share {
  569. background: #f4f4f4;
  570. border-radius: 3px;
  571. max-width: 90%;
  572. padding: 30px;
  573. text-align: center;
  574. }
  575. .fancybox-share h1 {
  576. color: #222;
  577. font-size: 35px;
  578. font-weight: 700;
  579. margin: 0 0 20px 0;
  580. }
  581. .fancybox-share p {
  582. margin: 0;
  583. padding: 0;
  584. }
  585. .fancybox-share__button {
  586. border: 0;
  587. border-radius: 3px;
  588. display: inline-block;
  589. font-size: 14px;
  590. font-weight: 700;
  591. line-height: 40px;
  592. margin: 0 5px 10px 5px;
  593. min-width: 130px;
  594. padding: 0 15px;
  595. text-decoration: none;
  596. transition: all .2s;
  597. -webkit-user-select: none;
  598. -moz-user-select: none;
  599. -ms-user-select: none;
  600. user-select: none;
  601. white-space: nowrap;
  602. }
  603. .fancybox-share__button:visited,
  604. .fancybox-share__button:link {
  605. color: #fff;
  606. }
  607. .fancybox-share__button:hover {
  608. text-decoration: none;
  609. }
  610. .fancybox-share__button--fb {
  611. background: #3b5998;
  612. }
  613. .fancybox-share__button--fb:hover {
  614. background: #344e86;
  615. }
  616. .fancybox-share__button--pt {
  617. background: #bd081d;
  618. }
  619. .fancybox-share__button--pt:hover {
  620. background: #aa0719;
  621. }
  622. .fancybox-share__button--tw {
  623. background: #1da1f2;
  624. }
  625. .fancybox-share__button--tw:hover {
  626. background: #0d95e8;
  627. }
  628. .fancybox-share__button svg {
  629. height: 25px;
  630. margin-right: 7px;
  631. position: relative;
  632. top: -1px;
  633. vertical-align: middle;
  634. width: 25px;
  635. }
  636. .fancybox-share__button svg path {
  637. fill: #fff;
  638. }
  639. .fancybox-share__input {
  640. background: transparent;
  641. border: 0;
  642. border-bottom: 1px solid #d7d7d7;
  643. border-radius: 0;
  644. color: #5d5b5b;
  645. font-size: 14px;
  646. margin: 10px 0 0 0;
  647. outline: none;
  648. padding: 10px 15px;
  649. width: 100%;
  650. }
  651. /* Thumbs */
  652. .fancybox-thumbs {
  653. background: #ddd;
  654. bottom: 0;
  655. display: none;
  656. margin: 0;
  657. -webkit-overflow-scrolling: touch;
  658. -ms-overflow-style: -ms-autohiding-scrollbar;
  659. padding: 2px 2px 4px 2px;
  660. position: absolute;
  661. right: 0;
  662. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  663. top: 0;
  664. width: 212px;
  665. z-index: 99995;
  666. }
  667. .fancybox-thumbs-x {
  668. overflow-x: auto;
  669. overflow-y: hidden;
  670. }
  671. .fancybox-show-thumbs .fancybox-thumbs {
  672. display: block;
  673. }
  674. .fancybox-show-thumbs .fancybox-inner {
  675. right: 212px;
  676. }
  677. .fancybox-thumbs__list {
  678. font-size: 0;
  679. height: 100%;
  680. list-style: none;
  681. margin: 0;
  682. overflow-x: hidden;
  683. overflow-y: auto;
  684. padding: 0;
  685. position: absolute;
  686. position: relative;
  687. white-space: nowrap;
  688. width: 100%;
  689. }
  690. .fancybox-thumbs-x .fancybox-thumbs__list {
  691. overflow: hidden;
  692. }
  693. .fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar {
  694. width: 7px;
  695. }
  696. .fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-track {
  697. background: #fff;
  698. border-radius: 10px;
  699. box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  700. }
  701. .fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-thumb {
  702. background: #2a2a2a;
  703. border-radius: 10px;
  704. }
  705. .fancybox-thumbs__list a {
  706. -webkit-backface-visibility: hidden;
  707. backface-visibility: hidden;
  708. background-color: rgba(0, 0, 0, .1);
  709. background-position: center center;
  710. background-repeat: no-repeat;
  711. background-size: cover;
  712. cursor: pointer;
  713. float: left;
  714. height: 75px;
  715. margin: 2px;
  716. max-height: calc(100% - 8px);
  717. max-width: calc(50% - 4px);
  718. outline: none;
  719. overflow: hidden;
  720. padding: 0;
  721. position: relative;
  722. -webkit-tap-highlight-color: transparent;
  723. width: 100px;
  724. }
  725. .fancybox-thumbs__list a::before {
  726. border: 6px solid #ff5268;
  727. bottom: 0;
  728. content: '';
  729. left: 0;
  730. opacity: 0;
  731. position: absolute;
  732. right: 0;
  733. top: 0;
  734. transition: all .2s cubic-bezier(.25, .46, .45, .94);
  735. z-index: 99991;
  736. }
  737. .fancybox-thumbs__list a:focus::before {
  738. opacity: .5;
  739. }
  740. .fancybox-thumbs__list a.fancybox-thumbs-active::before {
  741. opacity: 1;
  742. }
  743. /* Styling for Small-Screen Devices */
  744. @media all and (max-width: 576px) {
  745. .fancybox-thumbs {
  746. width: 110px;
  747. }
  748. .fancybox-show-thumbs .fancybox-inner {
  749. right: 110px;
  750. }
  751. .fancybox-thumbs__list a {
  752. max-width: calc(100% - 10px);
  753. }
  754. }