123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292 |
- .video-item {
- width: 100%;
- height: 100%;
- padding-bottom: 3px;
- position: relative;
- overflow: hidden;
- background: #3A3A3AFF;
- .video-wrapper {
- .vjs-loading-spinner {
- display: none;
- }
- .vjs-big-play-button {
- display: none;
- }
- .vjs-control-bar {
- display: none;
- }
- .vjs-modal-dialog {
- display: none;
- }
- }
- .select-speed {
- position: absolute;
- bottom: 55px;
- right: 35px;
- width: 80px;
- background: #3A3A3AFF;
- border-radius: 4px;
- z-index: 99;
- .item {
- height: 40px;
- line-height: 40px;
- text-align: center;
- font-size: 12px;
- color: rgba(255, 255, 255, 0.6);
- cursor: pointer;
- }
- .item.active {
- color: #fff;
- }
- }
- .video-bottom {
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- user-select: none;
- }
- .ant-slider {
- margin: 0;
- .ant-slider-rail {
- border-radius: 0;
- background: #616161FF;
- }
- .ant-slider-track {
- background: #4292f0;
- }
- .ant-slider-handle {
- border: none;
- // background-color: transparent;
- box-shadow: none;
- width: 4px;
- height: 4px;
- margin-top: 0;
- margin-left: -2px;
- }
- .ant-slider-handle-click-focused {
- box-shadow: none;
- }
- }
- .progress {
- height: 3px;
- background: #616161FF;
- }
- .show-progress-tip {
- display: none;
- position: absolute;
- top: -26px;
- color: #fff;
- padding: 2px 5px;
- background: rgba(0, 0, 0, 0.5);
- text-align: center;
- }
- .action-bar {
- height: 50px;
- line-height: 50px;
- padding: 0 20px;
- display: flex;
- .assets {
- cursor: pointer;
- }
- .fix-btn-action {
- transform: translateY(-1px);
- }
- .btn-action {
- display: inline-block;
- font-size: 12px;
- line-height: 12px;
- padding: 6px 10px;
- color: #fff;
- background: #696969FF;
- text-align: center;
- cursor: pointer;
- border-radius: 12px;
- }
- // .btn:hover {
- // background: darken(#696969, 10);
- // }
- .btn-action.active,
- .btn-action.active:hover {
- background: #4292f0;
- }
- }
- .video-wrapper {
- width: 100%;
- height: 100%;
- position: relative;
- .vjs_video_3-dimensions {
- width: 100% !important;
- height: 100% !important;
- .vjs-text-track-display {
- display: none;
- }
- .vjs-loading-spinner {
- display: none;
- }
- .vjs-big-play-button {
- display: none;
- }
- .vjs-error-display {
- display: none;
- }
- .vjs-modal-dialog {
- display: none;
- }
- .vjs-control-bar {
- position: absolute;
- bottom: -53px;
- left: 0;
- right: 0;
- height: 70px;
- padding-top: 20px;
- line-height: 50px;
- padding-left: 90px;
- overflow: hidden;
- button {
- display: none;
- }
- .vjs-volume-panel {
- display: none;
- }
- .vjs-control-text {
- display: none;
- }
- .vjs-current-time {
- display: inline-block;
- color: #fff;
- font-size: 12px;
- }
- .vjs-time-divider {
- display: inline-block;
- color: #fff;
- font-size: 12px;
- margin: 0 5px;
- }
- .vjs-duration {
- display: inline-block;
- color: #fff;
- font-size: 12px;
- }
- .vjs-progress-control:hover {
- .vjs-mouse-display {
- opacity: 1;
- }
- }
- .vjs-progress-control {
- position: absolute;
- height: 3px;
- top: 17px;
- left: 0;
- right: 0;
- .vjs-load-progress {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: rgb(168, 168, 168);
- z-index: 1;
- }
- .vjs-mouse-display {
- position: absolute;
- width: 8px;
- height: 8px;
- background: #fff;
- border-radius: 4px;
- top: -2px;
- z-index: 2;
- opacity: 0;
- .vjs-time-tooltip {
- color: #fff;
- position: absolute;
- top: -35px;
- font-size: 12px;
- }
- }
- .vjs-play-progress {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: #4292f0;
- z-index: 1;
- .vjs-time-tooltip {
- display: none;
- }
- }
- }
- }
- }
- .assets {
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- }
- .stop {
- display: none;
- }
- }
- .video-wrapper:hover {
- .stop {
- display: block;
- }
- }
- video {
- width: 100%;
- height: 100%;
- }
- }
- .video-item.action {
- padding-bottom: 53px;
- }
|