| @import '~elements-sk/colors'; |
| |
| skottie-player-sk { |
| display: inline-block; |
| padding: 0; |
| margin: 0; |
| border: 0; |
| |
| .container { |
| position: relative; |
| overflow: visible; |
| margin: 0; |
| padding: 0; |
| border: 0; |
| } |
| |
| .player-loading { |
| position: relative; |
| text-align: center; |
| align-items: center; |
| } |
| |
| .player-loading > div { |
| padding: 20px 0 0 0; |
| border: none; |
| font-size: 120%; |
| font-weight: bold; |
| } |
| |
| .skottie-canvas { |
| display: block; |
| } |
| |
| .wrapper { |
| position: relative; |
| overflow: hidden; |
| display: inline-block; |
| margin: 0; |
| padding: 0; |
| border: 0; |
| } |
| |
| .controls { |
| position: absolute; |
| bottom: -26px; // height of controls container |
| width: 50%; |
| left: 50%; |
| transform: translateX(-50%); |
| padding: 0px; |
| background: var(--light-gray); |
| transition: bottom .25s ease-in; |
| } |
| |
| .wrapper:hover > .controls { |
| bottom: 12px; |
| z-index: 2; |
| } |
| } |
| |
| .skottie-player-scrubber { |
| appearance: none; |
| outline: none; |
| display: inline-block; |
| width: calc(100% - 60px); |
| height: 10px; |
| vertical-align: middle; |
| background: var(--light-gray); |
| margin: 0; |
| padding: 0; |
| border: 0; |
| } |
| |
| .skottie-player-settings-container { |
| position: absolute; |
| right: 0px; |
| bottom: 0px; |
| width: 200px; |
| background-color: var(--gray); |
| z-index: 3; |
| margin: 0; |
| padding: 0; |
| border: 0; |
| } |
| |
| .skottie-player-settings-row { |
| text-align: center; |
| margin: 0; |
| padding: 10px; |
| border: 0; |
| } |
| |
| .skottie-player-settings-divider { |
| margin: 5px 0 0 0; |
| } |
| |
| .skottie-player-settings-label { |
| text-align: left; |
| font-family: sans-serif; |
| color: var(--white); |
| margin: 0; |
| padding: 0 0 5px 0; |
| border: 0; |
| } |
| |
| .skottie-player-property-select { |
| display: inline; |
| width: 65%; |
| height: 25px; |
| margin: 0; |
| padding: 0; |
| border: 0; |
| } |
| |
| .skottie-player-picker { |
| display: inline-block; |
| width: 30%; |
| height: 25px; |
| vertical-align: middle; |
| margin: 0; |
| padding: 0; |
| border: 0; |
| } |