| :root{ |
| --primary-color:#ffffff; |
| } |
| #spotlight { |
| position: fixed; |
| top: -1px; |
| bottom: -1px; |
| width: 100%; |
| z-index: 99999; |
| color: #fff; |
| background-color: #000; |
| opacity: 0; |
| overflow: hidden; |
| user-select: none; |
| transition: opacity 0.2s ease-out; |
| font-family: Arial, sans-serif; |
| font-size: 16px; |
| font-weight: 400; |
| contain: strict; |
| touch-action: none; |
| pointer-events: none; |
| } |
| #spotlight.show { |
| opacity: 1; |
| transition: none; |
| pointer-events: auto; |
| } |
| #spotlight.white { |
| color: #212529; |
| background-color: #fff; |
| } |
| #spotlight.white .spl-spinner, |
| #spotlight.white .spl-prev, |
| #spotlight.white .spl-next, |
| #spotlight.white .spl-page ~ * { |
| filter: invert(1); |
| } |
| #spotlight.white .spl-progress { |
| background-color: rgba(0, 0, 0, 0.35); |
| } |
| #spotlight.white .spl-header, |
| #spotlight.white .spl-footer { |
| background-color: rgba(255, 255, 255, 0.65); |
| } |
| #spotlight.white .spl-button { |
| background: #212529; |
| color: #fff; |
| } |
| #spotlight .cover { |
| object-fit: cover; |
| height: 100%; |
| width: 100%; |
| } |
| #spotlight .contain { |
| object-fit: contain; |
| height: 100%; |
| width: 100%; |
| } |
| #spotlight .autofit { |
| object-fit: none; |
| width: auto; |
| height: auto; |
| max-height: none; |
| max-width: none; |
| transition: none; |
| } |
| .spl-track { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| contain: strict; |
| } |
| .spl-spinner { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| background-position: center; |
| background-repeat: no-repeat; |
| background-size: 42px; |
| opacity: 0; |
| } |
| .spl-spinner.spin { |
| background-image: url("svg/spotlight/preloader.svg"); |
| transition: opacity 0.2s linear 0.25s; |
| opacity: 1; |
| } |
| .spl-spinner.error { |
| background-image: url("svg/spotlight/error.svg"); |
| background-size: 128px; |
| transition: none; |
| opacity: 0.5; |
| } |
| .spl-scene { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| transition: transform 0.65s cubic-bezier(0.1, 1, 0.1, 1); |
| contain: layout size; |
| will-change: transform; |
| } |
| .spl-pane > * { |
| position: absolute; |
| width: auto; |
| height: auto; |
| max-width: 100%; |
| max-height: 100%; |
| left: 50%; |
| top: 50%; |
| margin: 0; |
| padding: 0; |
| border: 0; |
| transform: translate(-50%, -50%) scale(1); |
| transition: transform 0.65s cubic-bezier(0.3, 1, 0.3, 1), opacity 0.65s ease; |
| contain: layout style; |
| will-change: transform, opacity; |
| visibility: hidden; |
| } |
| .spl-pane { |
| position: absolute; |
| top: 0; |
| width: 100%; |
| height: 100%; |
| transition: transform 0.65s cubic-bezier(0.3, 1, 0.3, 1); |
| contain: layout size; |
| will-change: transform, contents; |
| } |
| .spl-pane.hide img { |
| display:none !important; |
| } |
| .spl-pane.hide { |
| background-size: 100%; |
| transition: background-size 0.65s cubic-bezier(0.3, 1, 0.3, 1) !important; |
| will-change: background-size !important; |
| transform: translate(0, 0) !important; |
| } |
| .spl-header { |
| position: absolute; |
| top: 0; |
| width: 100%; |
| height: 50px; |
| text-align: right; |
| background-color: rgba(0, 0, 0, 0.45); |
| transform: translateY(-100px); |
| transition: transform 0.35s ease; |
| overflow: hidden; |
| will-change: transform; |
| } |
| #spotlight.menu .spl-header, |
| .spl-header:hover { |
| transform: translateY(0); |
| } |
| .spl-header div { |
| display: inline-block; |
| vertical-align: middle; |
| white-space: nowrap; |
| width: 50px; |
| height: 50px; |
| opacity: 0.5; |
| } |
| .spl-progress { |
| position: absolute; |
| top: 0; |
| width: 100%; |
| height: 3px; |
| background-color: rgba(255, 255, 255, 0.45); |
| transform: translateX(-100%); |
| transition: transform linear; |
| } |
| .spl-footer { |
| position: absolute; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background-color: rgba(0, 0, 0, 0.45); |
| line-height: 20px; |
| padding: 20px 20px 0 20px; |
| padding-bottom: env(safe-area-inset-bottom, 0); |
| text-align: left; |
| font-size: 15px; |
| font-weight: 400; |
| transform: translateY(100%); |
| transition: transform 0.35s ease; |
| will-change: transform; |
| } |
| #spotlight.menu .spl-footer, |
| .spl-footer:hover { |
| transform: translateY(0); |
| } |
| .spl-title { |
| font-size: 22px; |
| margin-bottom: 20px; |
| } |
| .spl-description { |
| margin-bottom: 20px; |
| } |
| .spl-button { |
| display: inline-block; |
| background: #fff; |
| color: #000; |
| border-radius: 5px; |
| padding: 10px 20px; |
| margin-bottom: 20px; |
| cursor: pointer; |
| } |
| .spl-page { |
| float: left; |
| width: auto; |
| line-height: 50px; |
| } |
| .spl-page ~ * { |
| background-position: center; |
| background-repeat: no-repeat; |
| background-size: 21px; |
| float: right; |
| } |
| .spl-fullscreen { |
| background-color:var(--primary-color); |
| -webkit-mask: url("svg/fullscreen-line.svg") no-repeat 50% 50%; |
| mask: url("svg/fullscreen-line.svg") no-repeat 50% 50%; |
| } |
| .spl-fullscreen.on { |
| background-color:var(--primary-color); |
| -webkit-mask: url("svg/fullscreen-exit-line.svg") no-repeat 50% 50%; |
| mask: url("svg/fullscreen-exit-line.svg") no-repeat 50% 50%; |
| } |
| .spl-autofit { |
| background-color:var(--primary-color); |
| -webkit-mask: url("svg/aspect-ratio-line.svg") no-repeat 50% 50%; |
| mask: url("svg/aspect-ratio-line.svg") no-repeat 50% 50%; |
| } |
| .spl-zoom-out { |
| background-color:var(--primary-color); |
| -webkit-mask: url("svg/zoom-out-line.svg") no-repeat 50% 50%; |
| mask: url("svg/zoom-out-line.svg") no-repeat 50% 50%; |
| background-size: 22px; |
| } |
| .spl-zoom-in { |
| background-color:var(--primary-color); |
| -webkit-mask: url("svg/zoom-in-line.svg") no-repeat 50% 50%; |
| mask: url("svg/zoom-in-line.svg") no-repeat 50% 50%; |
| background-size: 22px; |
| } |
| .spl-download { |
| background-color:var(--primary-color); |
| -webkit-mask: url("svg/file-download-line.svg") no-repeat 50% 50%; |
| mask: url("svg/file-download-line.svg") no-repeat 50% 50%; |
| background-size: 20px; |
| } |
| .spl-theme { |
| background-image: url("svg/spotlight/theme.svg"); |
| } |
| .spl-play { |
| background-image: url("svg/spotlight/play.svg"); |
| } |
| .spl-play.on { |
| background-image: url("svg/spotlight/pause.svg"); |
| animation: pulsate 1s ease infinite; |
| } |
| .spl-close { |
| background-color:var(--primary-color); |
| -webkit-mask: url("svg/close-line.svg") no-repeat 50% 50%; |
| mask: url("svg/close-line.svg") no-repeat 50% 50%; |
| } |
| .spl-like{ |
| background-color:var(--primary-color); |
| -webkit-mask: url("svg/heart-line.svg") no-repeat 50% 50%; |
| mask: url("svg/heart-line.svg") no-repeat 50% 50%; |
| background-size: 22px; |
| } |
| .spl-like.on{ |
| background-color:var(--primary-color); |
| -webkit-mask: url("svg/heart-fill.svg") no-repeat 50% 50%; |
| mask: url("svg/heart-fill.svg") no-repeat 50% 50%; |
| } |
| .spl-tile{ |
| background-color:var(--primary-color); |
| -webkit-mask: url("svg/grid-line.svg") no-repeat 50% 50%; |
| mask: url("svg/grid-line.svg") no-repeat 50% 50%; |
| background-size: 22px; |
| } |
| .spl-tile.on{ |
| background-color:var(--primary-color); |
| -webkit-mask: url("svg/grid-fill.svg") no-repeat 50% 50%; |
| mask: url("svg/grid-fill.svg") no-repeat 50% 50%; |
| } |
|
|
| .spl-prev, |
| .spl-next { |
| position: absolute; |
| top: 50%; |
| left: 20px; |
| width: 50px; |
| height: 50px; |
| opacity: 0.65; |
| background-color: rgba(0, 0, 0, 0.45); |
| border-radius: 100%; |
| cursor: pointer; |
| margin-top: -25px; |
| transform: translateX(-100px); |
| transition: transform 0.35s ease; |
| background-image: url("svg/spotlight/arrow.svg"); |
| background-position: center; |
| background-repeat: no-repeat; |
| background-size: 30px; |
| will-change: transform; |
| } |
| .spl-next { |
| left: auto; |
| right: 20px; |
| transform: translateX(100px) scaleX(-1); |
| } |
| #spotlight.menu .spl-prev { |
| transform: translateX(0); |
| } |
| #spotlight.menu .spl-next { |
| transform: translateX(0) scaleX(-1); |
| } |
| @media (hover: hover) { |
| .spl-page ~ div { |
| cursor: pointer; |
| transition: opacity 0.2s ease; |
| } |
| .spl-page ~ div:hover, |
| .spl-prev:hover, |
| .spl-next:hover { |
| opacity: 1; |
| } |
| } |
| @media (max-width: 500px) { |
| .spl-header div { |
| width: 44px; |
| } |
| .spl-footer .spl-title { |
| font-size: 20px; |
| } |
| .spl-footer { |
| font-size: 14px; |
| } |
| .spl-prev, |
| .spl-next { |
| width: 35px; |
| height: 35px; |
| margin-top: -17.5px; |
| background-size: 15px 15px; |
| } |
| .spl-spinner { |
| background-size: 30px 30px; |
| } |
| } |
| .hide-scrollbars { |
| overflow: hidden !important; |
| } |
| @keyframes pulsate { |
| 0% { |
| opacity: 1; |
| } |
| 50% { |
| opacity: 0.2; |
| } |
| 100% { |
| opacity: 1; |
| } |
| } |
