Файловый менеджер

Файловый менеджер - Редактировать - /home/pimjdymy/public_html/zeroesops/wp-content/themes/zeroesops/assets/scss/elements/_popup-video.scss

Назад
/======================================== = 21. Video Popup Css = ==========================================/ .single-popup-wrap { position: relative; } .video-link { transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); display: block; & .ht-popup-video { &.video-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background-color: rgba(8,106,216,0.8); } &.video-button { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; & .video-mark { position: absolute; top: 50%; left: 50%; transform: translateY(-50%, -50%); pointer-events: none; & .wave-pulse { width: 1px; height: 0; margin: 0 auto; &::after , &::before { opacity: 0; content: ''; display: block; position: absolute; width: 200px; height: 200px; top: 50%; left: 50%; border-radius: 50%; border: 3px solid $theme-color--default;; animation: zoomBig 3.25s linear infinite; animation-delay: 0s; } &::before { animation-delay: .75s; } } } } & .video-button { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; &__one{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); & .video-play { width: 72px; height: 72px; background: transparent; border: 6px solid #fff; border-radius: 50%; transition: all 1s cubic-bezier(0, 0, 0.2, 1) !important; } & .video-play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); line-height: 1; margin-left: 1px; &::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 0; transform: translate(-50%, -50%); border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-left: 17px solid #fff; } } } &__two { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); & .video-play { width: 78px; height: 78px; background: $theme-color--default; box-shadow: 0 2px 41px 0 rgba(91, 99, 254, 0.36); border-radius: 50%; transition: all 1s cubic-bezier(0, 0, 0.2, 1) !important; box-shadow: 0 20px 30px rgba(0, 0, 0, 0.07); } & .video-play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); line-height: 1; margin-left: 1px; &::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 0; transform: translate(-50%, -50%); border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-left: 17px solid #fff; border-top-width: 12px; border-bottom-width: 12px; border-left-width: 19px; border-left-color: $white; } } } } } &:hover { & .video-play { transform: scale3d(1.15, 1.15, 1.15); } } } @keyframes zoomBig { 0% { transform: translate(-50%, -50%) scale(0); opacity: 1; border-width: 3px; } 40% { opacity: .5; border-width: 2px; } 65% { border-width: 1px; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; border-width: 1px; } } @keyframes zoomBig { 0% { transform: translate(-50%, -50%) scale(0); opacity: 1; border-width: 3px; } 40% { opacity: .5; border-width: 2px; } 65% { border-width: 1px; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; border-width: 1px; } }

| ver. 1.4 | Github | .