vue-liveplayer-wrapper/dist/style.css

Vue 3 wrapper for @liveqing/liveplayer-v3 with recording and playback control features

.live-player-wrapper[data-v-215ac3e9]{position:relative;width:100%;height:100%;overflow:hidden;background-color:#000}.live-player-wrapper[data-v-215ac3e9] .video-js{width:100%;height:100%}.recording-overlay[data-v-215ac3e9]{position:absolute;top:40px;left:10px;z-index:1000}.recording-indicator[data-v-215ac3e9]{background:rgba(255,0,0,.8);color:#fff;padding:8px 12px;border-radius:20px;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700}.recording-dot[data-v-215ac3e9]{width:8px;height:8px;background:white;border-radius:50%;animation:blink-215ac3e9 1s infinite}@keyframes blink-215ac3e9{0%,50%{opacity:1}51%,to{opacity:0}}.recording-time[data-v-215ac3e9]{font-family:monospace;font-size:16px}.video-hidden-overlay[data-v-215ac3e9]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:999;pointer-events:none}.video-hidden-indicator[data-v-215ac3e9]{background:rgba(0,0,0,.8);color:#fff;padding:20px;border-radius:10px;text-align:center;display:flex;flex-direction:column;gap:10px}.video-hidden-indicator span[data-v-215ac3e9]:first-child{font-size:18px;font-weight:700}.video-hidden-indicator span[data-v-215ac3e9]:last-child{font-size:14px;opacity:.8}[data-v-215ac3e9] .vjs-icon-record{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyBjbGFzcz0iaWNvbiIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzIuMDBweCIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGw9IiNmZmZmZmYiIGQ9Ik02NDcuNzI1IDg0MC44OTdzOTMuMDkxIDAgOTMuMDkxLTkzLjA5MVYyODIuMzUzYzAtOTMuMDkxLTkzLjA5MS05My4wOTEtOTMuMDkxLTkzLjA5MUg5My4wOTFTMCAxODkuMjYyIDAgMjgyLjM1M3Y0NjUuNDUzYzAgOTMuMDkxIDkzLjA5MSA5My4wOTEgOTMuMDkxIDkzLjA5MWg1NTQuNjM0eiBtMTQ3LjMxNi00NjkuNzgyVjY2MC43MmwyMjguOTU2IDE4MC4xNzdWMTg5LjI2M0w3OTUuMDQxIDM3MS4xMTV6IiAvPjwvc3ZnPg==);background-size:100% 100%;background-repeat:no-repeat;background-position:center;width:20px!important;height:20px!important;display:block;margin-left:16px}[data-v-215ac3e9] .vjs-icon-switch{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyBjbGFzcz0iaWNvbiIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzIuMDBweCIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGw9IiNmZmZmZmYiIGQ9Ik03MDIuMDYwMDc2IDEyMy44MjUzNTRjLTIxLjQwNTM2Ny05LjQxMzU2NS00Ni40MDgyNzYgMC4yODk4MDItNTUuODMxODM0IDIxLjcwNTE2Mi05LjQyMzU1OCAyMS40MDUzNjcgMC4yOTk3OTUgNDYuNDA4Mjc2IDIxLjcwNTE2MyA1NS44MjE4NDEgMTM5LjY5NDUwNiA2MS40OTc5NiAyMjkuOTcyNzkyIDE5OS44MTM0MDkgMjI5Ljk3Mjc5MiAzNTIuNDE5MDg4IDAgMTAyLjc3OTc0LTQwLjAzMjYzNCAxOTkuNDIzNjc1LTExMi43MTI5NSAyNzIuMTAzOTkyLTcyLjY4MDMxNiA3Mi42ODAzMTYtMTY5LjMyNDI1MSAxMTIuNzEyOTUtMjcyLjEwMzk5MiAxMTIuNzEyOTUtMTAyLjc4OTczNCAwLTE5OS40MzM2NjgtNDAuMDMyNjM0LTI3Mi4xMTM5ODQtMTEyLjcxMjk1QzE2OC4yOTQ5NTUgNzUzLjE5NTEyMSAxMjguMjYyMzIxIDY1Ni41NTExODYgMTI4LjI2MjMyMSA1NTMuNzcxNDQ1YzAtMTUzLjQ3NTA4NSA5MC45ODc4MDEtMjkyLjExMDMxNSAyMzEuODAxNTQyLTM1My4yMDg1NDkgMjEuNDU1MzMzLTkuMzEzNjMzIDMxLjMwODU5OC0zNC4yNTY1ODIgMjEuOTk0OTY0LTU1LjcxMTkxNS05LjMxMzYzMy0yMS40NjUzMjYtMzQuMjU2NTgyLTMxLjMwODU5OC01NS43MTE5MTYtMjEuOTk0OTY1QzE1NC41NDQzNTQgMTk3LjM5NTA2MiA0My41NTAyMjkgMzY2LjUyOTQ0MyA0My41NTAyMjkgNTUzLjc3MTQ0NWMwIDYzLjM2NjY4MyAxMi40MTE1MTYgMTI0Ljg2NDY0MyAzNi45MTQ3NjYgMTgyLjc3NTA1NiAyMy42NTM4MyA1NS45MjE3NzIgNTcuNTAwNjkzIDEwNi4xMjc0NTIgMTAwLjYxMTIyMiAxNDkuMjM3OTgyIDQzLjEwMDUzNyA0My4xMDA1MzcgOTMuMzE2MjEgNzYuOTU3MzkyIDE0OS4yMzc5ODIgMTAwLjYxMTIyMyA1Ny45MTA0MTMgMjQuNDkzMjU3IDExOS40MDgzNzMgMzYuOTE0NzY1IDE4Mi43NzUwNTYgMzYuOTE0NzY1IDYzLjM2NjY4MyAwIDEyNC44NjQ2NDMtMTIuNDIxNTA5IDE4Mi43NzUwNTctMzYuOTE0NzY1IDU1LjkyMTc3Mi0yMy42NTM4MyAxMDYuMTI3NDUyLTU3LjUwMDY5MyAxNDkuMjM3OTgxLTEwMC42MTEyMjMgNDMuMTAwNTM3LTQzLjEwMDUzNyA3Ni45NTczOTItOTMuMzE2MjEgMTAwLjYxMTIyMy0xNDkuMjM3OTgyIDI0LjQ5MzI1Ny01Ny45MTA0MTMgMzYuOTE0NzY1LTExOS40MDgzNzMgMzYuOTE0NzY1LTE4Mi43NzUwNTYtMC4wMTk5ODYtMTg2LjE3MjczMy0xMTAuMTQ0NzA2LTM1NC45MzczNjctMjgwLjU2ODIwNS00MjkuOTQ2MDkxeiBtMCAwIiAgLz48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNNTEzLjk2ODY1NCA1MTEuMjkwNDg1YzIzLjM5NDAwOCAwIDQyLjM1MTA0OS0xOC45NjcwMzQgNDIuMzUxMDQ5LTQyLjM1MTA0OVY0Mi4zNTEwNDljMC0yMy4zOTQwMDgtMTguOTU3MDQxLTQyLjM1MTA0OS00Mi4zNTEwNDktNDIuMzUxMDQ5LTIzLjM5NDAwOCAwLTQyLjM1MTA0OSAxOC45NjcwMzQtNDIuMzUxMDQ5IDQyLjM1MTA0OXY0MjYuNTg4Mzg3Yy0wLjAwOTk5MyAyMy4zODQwMTUgMTguOTU3MDQxIDQyLjM1MTA0OSA0Mi4zNTEwNDkgNDIuMzUxMDQ5eiBtMCAwIiAgLz48L3N2Zz4=);background-size:100% 100%;background-repeat:no-repeat;background-position:center;width:20px!important;height:20px!important;display:block;margin-left:16px}[data-v-215ac3e9] .vjs-icon-spinner{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyBjbGFzcz0iaWNvbiIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzIuMDBweCIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGw9IiNmZmZmZmYiIGQ9Ik05MjkuNSAyMjQuNUg3NTFjLTguMyAwLTE1LTYuNy0xNS0xNXYtMjBjMC01MS45LTQyLjEtOTQtOTQtOTRIMzgyYy01MS45IDAtOTQgNDIuMS05NCA5NHYyMGMwIDguMy02LjcgMTUtMTUgMTVIOTQuNWMtNTEuOSAwLTk0IDQyLjEtOTQgOTR2NTE2YzAgNTEuOSA0Mi4xIDk0IDk0IDk0aDgzNWM1MS45IDAgOTQtNDIuMSA5NC05NHYtNTE2YzAtNTEuOS00Mi4xLTk0LTk0LTk0eiBtMzQgNjEwYzAgMTguOC0xNS4yIDM0LTM0IDM0aC04MzVjLTE4LjggMC0zNC0xNS4yLTM0LTM0di01MTZjMC0xOC44IDE1LjItMzQgMzQtMzRIMzE4YzE2LjYgMCAzMC0xMy40IDMwLTMwdi02NWMwLTE4LjggMTUuMi0zNCAzNC0zNGgyNjBjMTguOCAwIDM0IDE1LjIgMzQgMzR2NjVjMCAxNi42IDEzLjQgMzAgMzAgMzBoMjIzLjVjMTguOCAwIDM0IDE1LjIgMzQgMzR2NTE2eiIgIC8+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTUxMyAzNTJjLTU5LjggMC0xMTYuMSAyMy4zLTE1OC40IDY1LjZDMzEyLjMgNDU5LjkgMjg5IDUxNi4yIDI4OSA1NzZjMCA1OS44IDIzLjMgMTE2LjEgNjUuNiAxNTguNEMzOTYuOSA3NzYuNyA0NTMuMiA4MDAgNTEzIDgwMGM1OS44IDAgMTE2LjEtMjMuMyAxNTguNC02NS42QzcxMy43IDY5Mi4xIDczNyA2MzUuOCA3MzcgNTc2YzAtNTkuOC0yMy4zLTExNi4xLTY1LjYtMTU4LjRDNjI5LjEgMzc1LjMgNTcyLjggMzUyIDUxMyAzNTJ6IG0wIDM4OGMtOTAuNCAwLTE2NC03My42LTE2NC0xNjRzNzMuNi0xNjQgMTY0LTE2NCAxNjQgNzMuNiAxNjQgMTY0LTczLjYgMTY0LTE2NCAxNjR6IiAgLz48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNODMyIDM4Ni41bS02NCAwYTY0IDY0IDAgMSAwIDEyOCAwIDY0IDY0IDAgMSAwLTEyOCAwWiIgIC8+PC9zdmc+);background-size:100% 100%;background-repeat:no-repeat;background-position:center;width:20px!important;height:20px!important;display:block;margin-left:16px}[data-v-215ac3e9] .vjs-icon-spinner:before{content:""}[data-v-215ac3e9] .video-wrapper .video-js .video-title{width:100%!important;position:absolute;top:0;left:0;z-index:1000;max-width:100%!important;height:30px!important;text-align:center;line-height:18px;opacity:0;transition:opacity .3s ease}[data-v-215ac3e9] .video-wrapper .video-js:hover .video-title{opacity:1}.video-hidden[data-v-215ac3e9] .video-js video{opacity:0;transition:opacity .3s ease}.video-hidden[data-v-215ac3e9] .video-js .vjs-poster,.video-hidden[data-v-215ac3e9] .video-js .vjs-tech{opacity:0;transition:opacity .3s ease}.video-hidden[data-v-215ac3e9] .video-js{background-color:#2c3e50!important;display:block!important;position:relative!important;width:100%!important;height:100%!important;pointer-events:auto!important}.video-hidden[data-v-215ac3e9] .video-js .vjs-control-bar{position:absolute!important;bottom:0!important;left:0!important;right:0!important;top:auto!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;opacity:1!important;visibility:visible!important;z-index:1000!important;pointer-events:auto!important;transform:none!important;margin:0!important;padding:0!important;border:none!important}.video-hidden[data-v-215ac3e9] .video-js button{opacity:1!important;visibility:visible!important;pointer-events:auto!important}.video-hidden[data-v-215ac3e9] .video-js .vjs-custom-button{opacity:1!important;visibility:visible!important}.confirm-dialog-overlay[data-v-215ac3e9]{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:10000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.confirm-dialog[data-v-215ac3e9]{background:white;border-radius:12px;box-shadow:0 20px 40px #0000004d;max-width:400px;width:90%;animation:dialogSlideIn-215ac3e9 .3s ease-out}@keyframes dialogSlideIn-215ac3e9{0%{opacity:0;transform:scale(.8) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}.confirm-dialog-header[data-v-215ac3e9]{padding:10px 24px;border-bottom:1px solid #e5e7eb}.confirm-dialog-title[data-v-215ac3e9]{display:flex;align-items:center;gap:12px}.recording-dot-small[data-v-215ac3e9]{width:8px;height:8px;background:white;border-radius:50%;animation:blink-215ac3e9 1s infinite}.confirm-dialog-header h3[data-v-215ac3e9]{margin:0;font-size:18px;font-weight:600;color:#1f2937}.confirm-dialog-body[data-v-215ac3e9]{padding:20px 24px}.confirm-dialog-body p[data-v-215ac3e9]{margin:0;font-size:16px;line-height:1.5;color:#374151}.confirm-dialog-footer[data-v-215ac3e9]{padding:0 24px 20px;display:flex;gap:12px;justify-content:flex-end}.confirm-btn[data-v-215ac3e9]{padding:10px 20px;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;min-width:80px}.confirm-btn-cancel[data-v-215ac3e9]{background:#f3f4f6;color:#374151}.confirm-btn-cancel[data-v-215ac3e9]:hover{background:#e5e7eb;transform:translateY(-1px)}.confirm-btn-confirm[data-v-215ac3e9]{background:#dc2626;color:#fff}.confirm-btn-confirm[data-v-215ac3e9]:hover{background:#b91c1c;transform:translateY(-1px)}.confirm-btn[data-v-215ac3e9]:active{transform:translateY(0)}