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

fancyapp.css 19 kB

3 years ago
3 years ago
3 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730
  1. .carousel {
  2. position:relative;
  3. box-sizing:border-box
  4. }
  5. .carousel *,
  6. .carousel *:before,
  7. .carousel *:after {
  8. box-sizing:inherit
  9. }
  10. .carousel.is-draggable {
  11. cursor:move;
  12. cursor:grab
  13. }
  14. .carousel.is-dragging {
  15. cursor:move;
  16. cursor:grabbing
  17. }
  18. .carousel__viewport {
  19. position:relative;
  20. overflow:hidden;
  21. max-width:100%;
  22. max-height:100%
  23. }
  24. .carousel__track {
  25. display:flex
  26. }
  27. .carousel__slide {
  28. flex:0 0 auto;
  29. width:var(--carousel-slide-width, 60%);
  30. max-width:100%;
  31. padding:1rem;
  32. position:relative;
  33. overflow-x:hidden;
  34. overflow-y:auto;
  35. overscroll-behavior:contain
  36. }
  37. .has-dots {
  38. margin-bottom:calc(0.5rem + 22px)
  39. }
  40. .carousel__dots {
  41. margin:0 auto;
  42. padding:0;
  43. position:absolute;
  44. top:calc(100% + 0.5rem);
  45. left:0;
  46. right:0;
  47. display:flex;
  48. justify-content:center;
  49. list-style:none;
  50. user-select:none
  51. }
  52. .carousel__dots .carousel__dot {
  53. margin:0;
  54. padding:0;
  55. display:block;
  56. position:relative;
  57. width:22px;
  58. height:22px;
  59. cursor:pointer
  60. }
  61. .carousel__dots .carousel__dot:after {
  62. content:"";
  63. width:8px;
  64. height:8px;
  65. border-radius:50%;
  66. position:absolute;
  67. top:50%;
  68. left:50%;
  69. transform:translate(-50%, -50%);
  70. background-color:currentColor;
  71. opacity:.25;
  72. transition:opacity .15s ease-in-out
  73. }
  74. .carousel__dots .carousel__dot.is-selected:after {
  75. opacity:1
  76. }
  77. .carousel__button {
  78. width:var(--carousel-button-width, 48px);
  79. height:var(--carousel-button-height, 48px);
  80. padding:0;
  81. border:0;
  82. display:flex;
  83. justify-content:center;
  84. align-items:center;
  85. pointer-events:all;
  86. cursor:pointer;
  87. color:var(--carousel-button-color, currentColor);
  88. background:var(--carousel-button-bg, transparent);
  89. border-radius:var(--carousel-button-border-radius, 50%);
  90. box-shadow:var(--carousel-button-shadow, none);
  91. transition:opacity .15s ease
  92. }
  93. .carousel__button.is-prev,
  94. .carousel__button.is-next {
  95. position:absolute;
  96. top:50%;
  97. transform:translateY(-50%)
  98. }
  99. .carousel__button.is-prev {
  100. left:10px
  101. }
  102. .carousel__button.is-next {
  103. right:10px
  104. }
  105. .carousel__button[disabled] {
  106. cursor:default;
  107. opacity:.3
  108. }
  109. .carousel__button svg {
  110. width:var(--carousel-button-svg-width, 50%);
  111. height:var(--carousel-button-svg-height, 50%);
  112. fill:none;
  113. stroke:currentColor;
  114. stroke-width:var(--carousel-button-svg-stroke-width, 1.5);
  115. stroke-linejoin:bevel;
  116. stroke-linecap:round;
  117. filter:var(--carousel-button-svg-filter, none);
  118. pointer-events:none
  119. }
  120. html.with-fancybox {
  121. scroll-behavior:auto
  122. }
  123. body.compensate-for-scrollbar {
  124. overflow:hidden !important;
  125. touch-action:none
  126. }
  127. .fancybox__container {
  128. position:fixed;
  129. top:0;
  130. left:0;
  131. bottom:0;
  132. right:0;
  133. direction:ltr;
  134. margin:0;
  135. padding:env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  136. box-sizing:border-box;
  137. display:flex;
  138. flex-direction:column;
  139. color:var(--fancybox-color, #fff);
  140. -webkit-tap-highlight-color:rgba(0,0,0,0);
  141. overflow:hidden;
  142. z-index:1050;
  143. outline:none;
  144. transform-origin:top left;
  145. --carousel-button-width: 48px;
  146. --carousel-button-height: 48px;
  147. --carousel-button-svg-width: 24px;
  148. --carousel-button-svg-height: 24px;
  149. --carousel-button-svg-stroke-width: 2.5;
  150. --carousel-button-svg-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.4));
  151. }
  152. .fancybox__container *,
  153. .fancybox__container *::before,
  154. .fancybox__container *::after {
  155. box-sizing:inherit
  156. }
  157. .fancybox__container :focus {
  158. outline:none
  159. }
  160. body:not(.is-using-mouse) .fancybox__container :focus {
  161. box-shadow:0 0 0 1px #fff,0 0 0 2px var(--fancybox-accent-color, rgba(1, 210, 232, 0.94))
  162. }
  163. @media all and (min-width: 1024px) {
  164. .fancybox__container {
  165. --carousel-button-width:48px;
  166. --carousel-button-height:48px;
  167. --carousel-button-svg-width:27px;
  168. --carousel-button-svg-height:27px
  169. }
  170. }
  171. .fancybox__backdrop {
  172. position:absolute;
  173. top:0;
  174. right:0;
  175. bottom:0;
  176. left:0;
  177. z-index:-1;
  178. background:var(--fancybox-bg, rgba(24, 24, 27, 0.92))
  179. }
  180. .fancybox__carousel {
  181. position:relative;
  182. flex:1 1 auto;
  183. min-height:0;
  184. height:100%;
  185. z-index:10
  186. }
  187. .fancybox__carousel.has-dots {
  188. margin-bottom:calc(0.5rem + 22px)
  189. }
  190. .fancybox__viewport {
  191. position:relative;
  192. width:100%;
  193. height:100%;
  194. overflow:visible;
  195. cursor:default
  196. }
  197. .fancybox__track {
  198. display:flex;
  199. height:100%
  200. }
  201. .fancybox__slide {
  202. flex:0 0 auto;
  203. width:100%;
  204. max-width:100%;
  205. margin:0;
  206. padding:48px 8px 8px 8px;
  207. position:relative;
  208. overscroll-behavior:contain;
  209. display:flex;
  210. flex-direction:column;
  211. outline:0;
  212. overflow:auto;
  213. --carousel-button-width: 36px;
  214. --carousel-button-height: 36px;
  215. --carousel-button-svg-width: 22px;
  216. --carousel-button-svg-height: 22px
  217. }
  218. .fancybox__slide::before,
  219. .fancybox__slide::after {
  220. content:"";
  221. flex:0 0 0;
  222. margin:auto
  223. }
  224. @media all and (min-width: 1024px) {
  225. .fancybox__slide {
  226. padding:64px 100px
  227. }
  228. }
  229. .fancybox__content {
  230. margin:0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
  231. padding:36px;
  232. color:var(--fancybox-content-color, #374151);
  233. background:var(--fancybox-content-bg, #fff);
  234. position:relative;
  235. align-self:center;
  236. display:flex;
  237. flex-direction:column;
  238. z-index:20
  239. }
  240. .fancybox__content :focus:not(.carousel__button.is-close) {
  241. outline:thin dotted;
  242. box-shadow:none
  243. }
  244. .fancybox__caption {
  245. align-self:center;
  246. max-width:100%;
  247. margin:0;
  248. padding:1rem 0 0 0;
  249. line-height:1.375;
  250. color:var(--fancybox-color, currentColor);
  251. visibility:visible;
  252. cursor:auto;
  253. flex-shrink:0;
  254. overflow-wrap:anywhere
  255. }
  256. .is-loading .fancybox__caption {
  257. visibility:hidden
  258. }
  259. .fancybox__container>.carousel__dots {
  260. top:100%;
  261. color:var(--fancybox-color, #fff)
  262. }
  263. .fancybox__nav .carousel__button {
  264. z-index:40
  265. }
  266. .fancybox__nav .carousel__button.is-next {
  267. right:8px
  268. }
  269. @media all and (min-width: 1024px) {
  270. .fancybox__nav .carousel__button.is-next {
  271. right:40px
  272. }
  273. }
  274. .fancybox__nav .carousel__button.is-prev {
  275. left:8px
  276. }
  277. @media all and (min-width: 1024px) {
  278. .fancybox__nav .carousel__button.is-prev {
  279. left:40px
  280. }
  281. }
  282. .carousel__button.is-close {
  283. position:absolute;
  284. top:8px;
  285. right:8px;
  286. top:calc(env(safe-area-inset-top, 0px) + 8px);
  287. right:calc(env(safe-area-inset-right, 0px) + 8px);
  288. z-index:40
  289. }
  290. @media all and (min-width: 1024px) {
  291. .carousel__button.is-close {
  292. right:40px
  293. }
  294. }
  295. .fancybox__content>.carousel__button.is-close {
  296. position:absolute;
  297. top:-40px;
  298. right:0;
  299. color:var(--fancybox-color, #fff)
  300. }
  301. .fancybox__no-click,
  302. .fancybox__no-click button {
  303. pointer-events:none
  304. }
  305. .fancybox__spinner {
  306. position:absolute;
  307. top:50%;
  308. left:50%;
  309. transform:translate(-50%, -50%);
  310. width:50px;
  311. height:50px;
  312. color:var(--fancybox-color, currentColor)
  313. }
  314. .fancybox__slide .fancybox__spinner {
  315. cursor:pointer;
  316. z-index:1053
  317. }
  318. .fancybox__spinner svg {
  319. animation:fancybox-rotate 2s linear infinite;
  320. transform-origin:center center;
  321. position:absolute;
  322. top:0;
  323. right:0;
  324. bottom:0;
  325. left:0;
  326. margin:auto;
  327. width:100%;
  328. height:100%
  329. }
  330. .fancybox__spinner svg circle {
  331. fill:none;
  332. stroke-width:2.75;
  333. stroke-miterlimit:10;
  334. stroke-dasharray:1,200;
  335. stroke-dashoffset:0;
  336. animation:fancybox-dash 1.5s ease-in-out infinite;
  337. stroke-linecap:round;
  338. stroke:currentColor
  339. }
  340. @keyframes fancybox-rotate {
  341. 100% {
  342. transform:rotate(360deg)
  343. }
  344. }
  345. @keyframes fancybox-dash {
  346. 0% {
  347. stroke-dasharray:1,200;
  348. stroke-dashoffset:0
  349. }
  350. 50% {
  351. stroke-dasharray:89,200;
  352. stroke-dashoffset:-35px
  353. }
  354. 100% {
  355. stroke-dasharray:89,200;
  356. stroke-dashoffset:-124px
  357. }
  358. }
  359. .fancybox__backdrop,
  360. .fancybox__caption,
  361. .fancybox__nav,
  362. .carousel__dots,
  363. .carousel__button.is-close {
  364. opacity:var(--fancybox-opacity, 1)
  365. }
  366. .fancybox__container.is-animated[aria-hidden=false] .fancybox__backdrop,
  367. .fancybox__container.is-animated[aria-hidden=false] .fancybox__caption,
  368. .fancybox__container.is-animated[aria-hidden=false] .fancybox__nav,
  369. .fancybox__container.is-animated[aria-hidden=false] .carousel__dots,
  370. .fancybox__container.is-animated[aria-hidden=false] .carousel__button.is-close {
  371. animation:.15s ease backwards fancybox-fadeIn
  372. }
  373. .fancybox__container.is-animated.is-closing .fancybox__backdrop,
  374. .fancybox__container.is-animated.is-closing .fancybox__caption,
  375. .fancybox__container.is-animated.is-closing .fancybox__nav,
  376. .fancybox__container.is-animated.is-closing .carousel__dots,
  377. .fancybox__container.is-animated.is-closing .carousel__button.is-close {
  378. animation:.15s ease both fancybox-fadeOut
  379. }
  380. .fancybox-fadeIn {
  381. animation:.15s ease both fancybox-fadeIn
  382. }
  383. .fancybox-fadeOut {
  384. animation:.1s ease both fancybox-fadeOut
  385. }
  386. .fancybox-zoomInUp {
  387. animation:.2s ease both fancybox-zoomInUp
  388. }
  389. .fancybox-zoomOutDown {
  390. animation:.15s ease both fancybox-zoomOutDown
  391. }
  392. .fancybox-throwOutUp {
  393. animation:.15s ease both fancybox-throwOutUp
  394. }
  395. .fancybox-throwOutDown {
  396. animation:.15s ease both fancybox-throwOutDown
  397. }
  398. @keyframes fancybox-fadeIn {
  399. from {
  400. opacity:0
  401. }
  402. to {
  403. opacity:1
  404. }
  405. }
  406. @keyframes fancybox-fadeOut {
  407. to {
  408. opacity:0
  409. }
  410. }
  411. @keyframes fancybox-zoomInUp {
  412. from {
  413. transform:scale(0.97) translate3d(0, 16px, 0);
  414. opacity:0
  415. }
  416. to {
  417. transform:scale(1) translate3d(0, 0, 0);
  418. opacity:1
  419. }
  420. }
  421. @keyframes fancybox-zoomOutDown {
  422. to {
  423. transform:scale(0.97) translate3d(0, 16px, 0);
  424. opacity:0
  425. }
  426. }
  427. @keyframes fancybox-throwOutUp {
  428. to {
  429. transform:translate3d(0, -30%, 0);
  430. opacity:0
  431. }
  432. }
  433. @keyframes fancybox-throwOutDown {
  434. to {
  435. transform:translate3d(0, 30%, 0);
  436. opacity:0
  437. }
  438. }
  439. .fancybox__carousel .carousel__slide {
  440. scrollbar-width:thin;
  441. scrollbar-color:#ccc rgba(255,255,255,.1)
  442. }
  443. .fancybox__carousel .carousel__slide::-webkit-scrollbar {
  444. width:8px;
  445. height:8px
  446. }
  447. .fancybox__carousel .carousel__slide::-webkit-scrollbar-track {
  448. background-color:rgba(255,255,255,.1)
  449. }
  450. .fancybox__carousel .carousel__slide::-webkit-scrollbar-thumb {
  451. background-color:#ccc;
  452. border-radius:2px;
  453. box-shadow:inset 0 0 4px rgba(0,0,0,.2)
  454. }
  455. .fancybox__carousel.is-draggable .fancybox__slide,
  456. .fancybox__carousel.is-draggable .fancybox__slide .fancybox__content {
  457. cursor:move;
  458. cursor:grab
  459. }
  460. .fancybox__carousel.is-dragging .fancybox__slide,
  461. .fancybox__carousel.is-dragging .fancybox__slide .fancybox__content {
  462. cursor:move;
  463. cursor:grabbing
  464. }
  465. .fancybox__carousel .fancybox__slide .fancybox__content {
  466. cursor:auto
  467. }
  468. .fancybox__carousel .fancybox__slide.can-zoom_in .fancybox__content {
  469. cursor:zoom-in
  470. }
  471. .fancybox__carousel .fancybox__slide.can-zoom_out .fancybox__content {
  472. cursor:zoom-out
  473. }
  474. .fancybox__carousel .fancybox__slide.is-draggable .fancybox__content {
  475. cursor:move;
  476. cursor:grab
  477. }
  478. .fancybox__carousel .fancybox__slide.is-dragging .fancybox__content {
  479. cursor:move;
  480. cursor:grabbing
  481. }
  482. .fancybox__image {
  483. transform-origin:0 0;
  484. user-select:none;
  485. transition:none
  486. }
  487. .has-image .fancybox__content {
  488. padding:0;
  489. background:rgba(0,0,0,0);
  490. min-height:1px
  491. }
  492. .is-closing .has-image .fancybox__content {
  493. overflow:visible
  494. }
  495. .has-image[data-image-fit=contain] {
  496. overflow:visible;
  497. touch-action:none
  498. }
  499. .has-image[data-image-fit=contain] .fancybox__content {
  500. flex-direction:row;
  501. flex-wrap:wrap
  502. }
  503. .has-image[data-image-fit=contain] .fancybox__image {
  504. max-width:100%;
  505. max-height:100%;
  506. object-fit:contain
  507. }
  508. .has-image[data-image-fit=contain-w] {
  509. overflow-x:hidden;
  510. overflow-y:auto
  511. }
  512. .has-image[data-image-fit=contain-w] .fancybox__content {
  513. min-height:auto
  514. }
  515. .has-image[data-image-fit=contain-w] .fancybox__image {
  516. max-width:100%;
  517. height:auto
  518. }
  519. .has-image[data-image-fit=cover] {
  520. overflow:visible;
  521. touch-action:none
  522. }
  523. .has-image[data-image-fit=cover] .fancybox__content {
  524. width:100%;
  525. height:100%
  526. }
  527. .has-image[data-image-fit=cover] .fancybox__image {
  528. width:100%;
  529. height:100%;
  530. object-fit:cover
  531. }
  532. .fancybox__carousel .fancybox__slide.has-iframe .fancybox__content,
  533. .fancybox__carousel .fancybox__slide.has-map .fancybox__content,
  534. .fancybox__carousel .fancybox__slide.has-pdf .fancybox__content,
  535. .fancybox__carousel .fancybox__slide.has-video .fancybox__content,
  536. .fancybox__carousel .fancybox__slide.has-html5video .fancybox__content {
  537. max-width:100%;
  538. flex-shrink:1;
  539. min-height:1px;
  540. overflow:visible
  541. }
  542. .fancybox__carousel .fancybox__slide.has-iframe .fancybox__content,
  543. .fancybox__carousel .fancybox__slide.has-map .fancybox__content,
  544. .fancybox__carousel .fancybox__slide.has-pdf .fancybox__content {
  545. width:100%;
  546. height:80%
  547. }
  548. .fancybox__carousel .fancybox__slide.has-video .fancybox__content,
  549. .fancybox__carousel .fancybox__slide.has-html5video .fancybox__content {
  550. width:960px;
  551. height:540px;
  552. max-width:100%;
  553. max-height:100%
  554. }
  555. .fancybox__carousel .fancybox__slide.has-map .fancybox__content,
  556. .fancybox__carousel .fancybox__slide.has-pdf .fancybox__content,
  557. .fancybox__carousel .fancybox__slide.has-video .fancybox__content,
  558. .fancybox__carousel .fancybox__slide.has-html5video .fancybox__content {
  559. padding:0;
  560. background:rgba(24,24,27,.9);
  561. color:#fff
  562. }
  563. .fancybox__carousel .fancybox__slide.has-map .fancybox__content {
  564. background:#e5e3df
  565. }
  566. .fancybox__html5video,
  567. .fancybox__iframe {
  568. border:0;
  569. display:block;
  570. height:100%;
  571. width:100%;
  572. background:rgba(0,0,0,0)
  573. }
  574. .fancybox-placeholder {
  575. position:absolute;
  576. width:1px;
  577. height:1px;
  578. padding:0;
  579. margin:-1px;
  580. overflow:hidden;
  581. clip:rect(0, 0, 0, 0);
  582. white-space:nowrap;
  583. border-width:0
  584. }
  585. .fancybox__thumbs {
  586. flex:0 0 auto;
  587. position:relative;
  588. padding:0px 3px;
  589. opacity:var(--fancybox-opacity, 1)
  590. }
  591. .fancybox__container.is-animated[aria-hidden=false] .fancybox__thumbs {
  592. animation:.15s ease-in backwards fancybox-fadeIn
  593. }
  594. .fancybox__container.is-animated.is-closing .fancybox__thumbs {
  595. opacity:0
  596. }
  597. .fancybox__thumbs .carousel__slide {
  598. flex:0 0 auto;
  599. width:var(--fancybox-thumbs-width, 96px);
  600. margin:0;
  601. padding:8px 3px;
  602. box-sizing:content-box;
  603. display:flex;
  604. align-items:center;
  605. justify-content:center;
  606. overflow:visible;
  607. cursor:pointer
  608. }
  609. .fancybox__thumbs .carousel__slide .fancybox__thumb::after {
  610. content:"";
  611. position:absolute;
  612. top:0;
  613. left:0;
  614. right:0;
  615. bottom:0;
  616. border-width:5px;
  617. border-style:solid;
  618. border-color:var(--fancybox-accent-color, rgba(34, 213, 233, 0.96));
  619. opacity:0;
  620. transition:opacity .15s ease;
  621. border-radius:var(--fancybox-thumbs-border-radius, 4px)
  622. }
  623. .fancybox__thumbs .carousel__slide.is-nav-selected .fancybox__thumb::after {
  624. opacity:.92
  625. }
  626. .fancybox__thumbs .carousel__slide>* {
  627. pointer-events:none;
  628. user-select:none
  629. }
  630. .fancybox__thumb {
  631. position:relative;
  632. width:100%;
  633. padding-top:calc(100%/(var(--fancybox-thumbs-ratio, 1.5)));
  634. background-size:cover;
  635. background-position:center center;
  636. background-color:rgba(255,255,255,.1);
  637. background-repeat:no-repeat;
  638. border-radius:var(--fancybox-thumbs-border-radius, 4px)
  639. }
  640. .fancybox__toolbar {
  641. position:absolute;
  642. top:0;
  643. right:0;
  644. left:0;
  645. z-index:20;
  646. background:linear-gradient(to top, hsla(0deg, 0%, 0%, 0) 0%, hsla(0deg, 0%, 0%, 0.006) 8.1%, hsla(0deg, 0%, 0%, 0.021) 15.5%, hsla(0deg, 0%, 0%, 0.046) 22.5%, hsla(0deg, 0%, 0%, 0.077) 29%, hsla(0deg, 0%, 0%, 0.114) 35.3%, hsla(0deg, 0%, 0%, 0.155) 41.2%, hsla(0deg, 0%, 0%, 0.198) 47.1%, hsla(0deg, 0%, 0%, 0.242) 52.9%, hsla(0deg, 0%, 0%, 0.285) 58.8%, hsla(0deg, 0%, 0%, 0.326) 64.7%, hsla(0deg, 0%, 0%, 0.363) 71%, hsla(0deg, 0%, 0%, 0.394) 77.5%, hsla(0deg, 0%, 0%, 0.419) 84.5%, hsla(0deg, 0%, 0%, 0.434) 91.9%, hsla(0deg, 0%, 0%, 0.44) 100%);
  647. padding:0;
  648. touch-action:none;
  649. display:flex;
  650. justify-content:space-between;
  651. --carousel-button-svg-width: 20px;
  652. --carousel-button-svg-height: 20px;
  653. opacity:var(--fancybox-opacity, 1);
  654. text-shadow:var(--fancybox-toolbar-text-shadow, 1px 1px 1px rgba(0, 0, 0, 0.4))
  655. }
  656. @media all and (min-width: 1024px) {
  657. .fancybox__toolbar {
  658. padding:8px
  659. }
  660. }
  661. .fancybox__container.is-animated[aria-hidden=false] .fancybox__toolbar {
  662. animation:.15s ease-in backwards fancybox-fadeIn
  663. }
  664. .fancybox__container.is-animated.is-closing .fancybox__toolbar {
  665. opacity:0
  666. }
  667. .fancybox__toolbar__items {
  668. display:flex
  669. }
  670. .fancybox__toolbar__items--left {
  671. margin-right:auto
  672. }
  673. .fancybox__toolbar__items--center {
  674. position:absolute;
  675. left:50%;
  676. transform:translateX(-50%)
  677. }
  678. .fancybox__toolbar__items--right {
  679. margin-left:auto
  680. }
  681. @media(max-width: 640px) {
  682. .fancybox__toolbar__items--center:not(:last-child) {
  683. display:none
  684. }
  685. }
  686. .fancybox__counter {
  687. min-width:72px;
  688. padding:0 10px;
  689. line-height:var(--carousel-button-height, 48px);
  690. text-align:center;
  691. font-size:17px;
  692. font-variant-numeric:tabular-nums;
  693. -webkit-font-smoothing:subpixel-antialiased
  694. }
  695. .fancybox__progress {
  696. background:var(--fancybox-accent-color, rgba(34, 213, 233, 0.96));
  697. height:3px;
  698. left:0;
  699. position:absolute;
  700. right:0;
  701. top:0;
  702. transform:scaleX(0);
  703. transform-origin:0;
  704. transition-property:transform;
  705. transition-timing-function:linear;
  706. z-index:30;
  707. user-select:none
  708. }
  709. .fancybox__container:fullscreen::backdrop {
  710. opacity:0
  711. }
  712. .fancybox__button--fullscreen g:nth-child(2) {
  713. display:none
  714. }
  715. .fancybox__container:fullscreen .fancybox__button--fullscreen g:nth-child(1) {
  716. display:none
  717. }
  718. .fancybox__container:fullscreen .fancybox__button--fullscreen g:nth-child(2) {
  719. display:block
  720. }
  721. .fancybox__button--slideshow g:nth-child(2) {
  722. display:none
  723. }
  724. .fancybox__container.has-slideshow .fancybox__button--slideshow g:nth-child(1) {
  725. display:none
  726. }
  727. .fancybox__container.has-slideshow .fancybox__button--slideshow g:nth-child(2) {
  728. display:block
  729. }