@nice2dev/ui-video 1.2.0 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/ui-video.css CHANGED
@@ -1 +1 @@
1
- .nice-video-editor,.nice-screen-recorder,.nice-live-streaming{--video-primary: var(--nice-info, #6366f1);--video-secondary: var(--nice-accent, #8b5cf6);--video-success: var(--nice-success, #10b981);--video-warning: var(--nice-warning, #f59e0b);--video-error: var(--nice-danger, #ef4444);--video-bg: var(--nice-bg, #1e1e2e);--video-surface: var(--nice-bg-secondary, #2d2d3d);--video-border: var(--nice-border-color, #3d3d4d);--video-text: var(--nice-text-primary, #ffffff);--video-text-secondary: var(--nice-text-secondary, #a0a0b0);--video-timeline-bg: var(--nice-bg-tertiary, #252535);--video-track-bg: var(--nice-bg-secondary, #2a2a3a);--video-item-video: var(--nice-info, #6366f1);--video-item-audio: var(--nice-success, #10b981);--video-item-text: var(--nice-warning, #f59e0b);--video-recording: var(--nice-danger, #ef4444);--video-live: var(--nice-danger, #ef4444)}.nice-video-editor{background:var(--video-bg);color:var(--video-text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.video-editor__header{display:flex;align-items:center;justify-content:space-between;padding:var(--nice-space-3, 12px) var(--nice-space-4, 16px);background:var(--video-surface);border-bottom:1px solid var(--video-border)}.header__project-info{display:flex;flex-direction:column;gap:var(--nice-space-1, 4px)}.project-name-input{background:transparent;border:none;color:var(--video-text);font-size:16px;font-weight:600;padding:var(--nice-space-1, 4px) var(--nice-space-2, 8px);border-radius:var(--nice-radius-sm, 4px);outline:none}.project-name-input:hover,.project-name-input:focus{background:var(--video-bg)}.project-settings{font-size:12px;color:var(--video-text-secondary);padding-left:var(--nice-space-2, 8px)}.header__tabs{display:flex;gap:var(--nice-space-1, 4px)}.tab-button{padding:var(--nice-space-2, 8px) var(--nice-space-4, 16px);background:transparent;border:none;color:var(--video-text-secondary);cursor:pointer;border-radius:var(--nice-radius-sm, 4px);transition:all .2s}.tab-button:hover{background:var(--video-bg);color:var(--video-text)}.tab-button--active{background:var(--video-primary);color:#fff}.header__actions{display:flex;gap:var(--nice-space-2, 8px)}.action-button{padding:var(--nice-space-2, 8px) var(--nice-space-5, 20px);border:none;border-radius:var(--nice-radius-md, 6px);cursor:pointer;font-weight:500;transition:all .2s}.action-button--primary{background:var(--video-primary);color:#fff}.action-button--primary:hover{background:var(--video-secondary)}.action-button--primary:disabled{background:var(--video-border);cursor:not-allowed}.video-editor__asset-library{width:250px;height:100%;background:var(--video-surface);border-right:1px solid var(--video-border);display:flex;flex-direction:column}.asset-library__header{display:flex;justify-content:space-between;align-items:center;padding:var(--nice-space-3, 12px) var(--nice-space-4, 16px);border-bottom:1px solid var(--video-border)}.asset-library__header h3{margin:0;font-size:14px}.close-button{background:transparent;border:none;color:var(--video-text-secondary);cursor:pointer;font-size:20px;line-height:1}.asset-library__upload{padding:var(--nice-space-4, 16px);border-bottom:1px solid var(--video-border)}.upload-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--nice-space-6, 24px);border:2px dashed var(--video-border);border-radius:var(--nice-radius-lg, 8px);cursor:pointer;transition:all .2s;gap:var(--nice-space-2, 8px)}.upload-zone:hover{border-color:var(--video-primary);background:var(--nice-accent-tint-10, rgba(99, 102, 241, .1))}.upload-icon{font-size:24px}.asset-library__list{flex:1;overflow-y:auto;padding:var(--nice-space-2, 8px)}.asset-item{display:flex;align-items:center;gap:var(--nice-space-3, 12px);padding:var(--nice-space-2, 8px);border-radius:var(--nice-radius-md, 6px);cursor:grab;transition:background .2s}.asset-item:hover{background:var(--video-bg)}.asset-thumbnail{width:48px;height:48px;background:var(--video-bg);border-radius:var(--nice-radius-sm, 4px);display:flex;align-items:center;justify-content:center;overflow:hidden}.asset-thumbnail img{width:100%;height:100%;object-fit:cover}.asset-type-icon{font-size:20px}.asset-info{flex:1;display:flex;flex-direction:column;gap:var(--nice-space-0-5, 2px);min-width:0}.asset-name{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.asset-meta{font-size:11px;color:var(--video-text-secondary)}.video-editor__preview-area{flex:1;display:flex;flex-direction:column;overflow:hidden}.preview-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--nice-space-4, 16px);background:#000}.preview-canvas{max-width:100%;max-height:100%;background:var(--video-bg);position:relative;border-radius:var(--nice-radius-sm, 4px);overflow:hidden}.preview-overlay{position:absolute;top:8px;left:8px}.toggle-library-button{background:var(--video-surface);border:none;border-radius:var(--nice-radius-sm, 4px);padding:var(--nice-space-2, 8px);cursor:pointer;opacity:.7;transition:opacity .2s}.toggle-library-button:hover{opacity:1}.playback-controls{display:flex;align-items:center;gap:var(--nice-space-2, 8px);padding:var(--nice-space-3, 12px);background:var(--video-surface);border-radius:var(--nice-radius-lg, 8px);margin-top:var(--nice-space-3, 12px)}.playback-controls button{background:transparent;border:none;font-size:20px;cursor:pointer;padding:var(--nice-space-1, 4px) var(--nice-space-2, 8px);border-radius:var(--nice-radius-sm, 4px);transition:background .2s}.playback-controls button:hover{background:var(--video-bg)}.play-button{background:var(--video-primary)!important;border-radius:var(--nice-radius-full, 50%)!important;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.time-display{font-family:monospace;font-size:14px;color:var(--video-text-secondary);margin-left:var(--nice-space-2, 8px)}.item-inspector{width:200px;height:100%;overflow-y:auto;padding:var(--nice-space-4, 16px);background:var(--video-surface);border-left:1px solid var(--video-border)}.item-inspector h4{margin:0 0 var(--nice-space-3, 12px) 0;font-size:13px;color:var(--video-text-secondary);text-transform:uppercase}.inspector-section label{display:flex;flex-direction:column;gap:var(--nice-space-1, 4px);margin-bottom:var(--nice-space-3, 12px);font-size:12px;color:var(--video-text-secondary)}.inspector-section input{background:var(--video-bg);border:1px solid var(--video-border);border-radius:var(--nice-radius-sm, 4px);padding:var(--nice-space-1-5, 6px) var(--nice-space-2, 8px);color:var(--video-text);font-size:13px}.effects-list{display:flex;flex-wrap:wrap;gap:var(--nice-space-1, 4px)}.effect-badge{padding:var(--nice-space-1, 4px) var(--nice-space-2, 8px);background:var(--video-primary);border-radius:var(--nice-radius-sm, 4px);font-size:11px}.video-editor__panel{height:250px;background:var(--video-surface);border-top:1px solid var(--video-border)}.timeline-panel{height:100%;display:flex;flex-direction:column}.timeline-toolbar{display:flex;justify-content:space-between;padding:var(--nice-space-2, 8px) var(--nice-space-4, 16px);border-bottom:1px solid var(--video-border)}.track-buttons{display:flex;gap:var(--nice-space-2, 8px)}.track-buttons button{padding:var(--nice-space-1-5, 6px) var(--nice-space-3, 12px);background:var(--video-bg);border:1px solid var(--video-border);border-radius:var(--nice-radius-sm, 4px);color:var(--video-text);cursor:pointer;font-size:12px}.track-buttons button:hover{border-color:var(--video-primary)}.zoom-controls{display:flex;align-items:center;gap:var(--nice-space-2, 8px)}.zoom-controls button{width:28px;height:28px;background:var(--video-bg);border:1px solid var(--video-border);border-radius:var(--nice-radius-sm, 4px);color:var(--video-text);cursor:pointer}.zoom-controls span{font-size:12px;min-width:40px;text-align:center}.timeline-container{flex:1;overflow:auto;position:relative}.timeline-ruler{height:24px;background:var(--video-timeline-bg);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--video-border)}.ruler-mark{position:absolute;top:0;height:100%;padding-left:var(--nice-space-1, 4px);font-size:10px;color:var(--video-text-secondary);border-left:1px solid var(--video-border);display:flex;align-items:center}.timeline-playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--video-error);z-index:20;pointer-events:none}.timeline-playhead:before{content:"";position:absolute;top:0;left:-6px;width:14px;height:14px;background:var(--video-error);clip-path:polygon(50% 100%,0 0,100% 0)}.timeline-tracks{min-height:100%}.timeline-track{display:flex;height:60px;border-bottom:1px solid var(--video-border)}.timeline-track--selected{background:var(--nice-accent-tint-10, rgba(99, 102, 241, .1))}.timeline-track--locked{opacity:.6}.track-header{width:150px;padding:var(--nice-space-2, 8px) var(--nice-space-3, 12px);background:var(--video-track-bg);border-right:1px solid var(--video-border);display:flex;flex-direction:column;gap:var(--nice-space-1, 4px)}.track-name{font-size:13px;font-weight:500}.track-controls{display:flex;gap:var(--nice-space-1, 4px)}.track-controls button{color:inherit;background:transparent;border:none;cursor:pointer;font-size:14px;opacity:.6;transition:opacity .2s}.track-controls button:hover,.track-controls button.active{opacity:1}.track-items{flex:1;position:relative;background:var(--video-timeline-bg)}.track-item{position:absolute;top:4px;height:calc(100% - 8px);border-radius:var(--nice-radius-sm, 4px);display:flex;align-items:center;padding:0 var(--nice-space-2, 8px);cursor:pointer;overflow:hidden;transition:transform .1s}.track-item:hover{transform:scaleY(1.05)}.track-item--selected{outline:2px solid white}.track-item--video{background:var(--video-item-video)}.track-item--audio{background:var(--video-item-audio)}.track-item--text{background:var(--video-item-text)}.track-item--image{background:var(--video-secondary)}.item-name{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-transitions,.item-effects{margin-left:var(--nice-space-1, 4px);font-size:10px}.effects-panel,.transitions-panel,.export-panel{padding:var(--nice-space-4, 16px);height:100%;overflow-y:auto}.effects-panel h3,.transitions-panel h3,.export-panel h3{margin:0 0 var(--nice-space-2, 8px) 0;font-size:16px}.panel-hint{color:var(--video-text-secondary);font-size:13px;margin-bottom:var(--nice-space-4, 16px)}.effects-grid,.transitions-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:var(--nice-space-2, 8px)}.effect-preset{display:flex;flex-direction:column;align-items:center;gap:var(--nice-space-2, 8px);padding:var(--nice-space-4, 16px);background:var(--video-bg);border:1px solid var(--video-border);border-radius:var(--nice-radius-lg, 8px);cursor:pointer;transition:all .2s}.effect-preset:hover:not(:disabled){border-color:var(--video-primary);background:var(--nice-accent-tint-10, rgba(99, 102, 241, .1))}.effect-preset:disabled{opacity:.5;cursor:not-allowed}.effect-icon{font-size:24px}.effect-name{font-size:12px}.transition-preset{display:flex;justify-content:space-between;align-items:center;padding:var(--nice-space-3, 12px) var(--nice-space-4, 16px);background:var(--video-bg);border:1px solid var(--video-border);border-radius:var(--nice-radius-lg, 8px)}.transition-name{font-size:14px}.transition-buttons{display:flex;gap:var(--nice-space-1, 4px)}.transition-buttons button{padding:var(--nice-space-1, 4px) var(--nice-space-3, 12px);background:var(--video-surface);border:1px solid var(--video-border);border-radius:var(--nice-radius-sm, 4px);color:var(--video-text);cursor:pointer;font-size:12px}.transition-buttons button:hover:not(:disabled){border-color:var(--video-primary)}.transition-buttons button:disabled{opacity:.5;cursor:not-allowed}.export-settings{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--nice-space-4, 16px);margin-bottom:var(--nice-space-6, 24px)}.setting-group{display:flex;flex-direction:column;gap:var(--nice-space-1, 4px)}.setting-group label{font-size:12px;color:var(--video-text-secondary)}.setting-group select,.setting-group input{padding:var(--nice-space-2, 8px) var(--nice-space-3, 12px);background:var(--video-bg);border:1px solid var(--video-border);border-radius:var(--nice-radius-sm, 4px);color:var(--video-text);font-size:13px}.export-button{width:100%;padding:var(--nice-space-3, 12px);background:var(--video-primary);border:none;border-radius:var(--nice-radius-md, 6px);color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s}.export-button:hover:not(:disabled){background:var(--video-secondary)}.export-button:disabled{background:var(--video-border);cursor:not-allowed}.export-progress{height:4px;background:var(--video-bg);border-radius:var(--nice-radius-sm, 2px);margin-top:var(--nice-space-3, 12px);overflow:hidden}.export-progress-bar{height:100%;background:var(--video-success);transition:width .3s}.nice-screen-recorder{display:flex;flex-direction:column;background:var(--video-bg);color:var(--video-text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;border-radius:var(--nice-radius-xl, 12px);overflow:hidden}.recorder__preview{position:relative;aspect-ratio:16/9;background:#000}.preview-video{width:100%;height:100%;object-fit:contain}.preview-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}.start-preview-button{display:flex;flex-direction:column;align-items:center;gap:var(--nice-space-3, 12px);padding:var(--nice-space-8, 32px) var(--nice-space-12, 48px);background:var(--video-surface);border:2px dashed var(--video-border);border-radius:var(--nice-radius-xl, 12px);color:var(--video-text);cursor:pointer;transition:all .2s}.start-preview-button:hover{border-color:var(--video-primary);background:var(--nice-accent-tint-10, rgba(99, 102, 241, .1))}.start-preview-button .icon{font-size:48px}.countdown-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:var(--nice-overlay-80, rgba(0, 0, 0, .8));z-index:100}.countdown-number{font-size:120px;font-weight:700;color:#fff;animation:countdown-pulse 1s ease-in-out}@keyframes countdown-pulse{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.2);opacity:1}to{transform:scale(1);opacity:.8}}.recording-indicator{position:absolute;top:16px;right:16px;display:flex;align-items:center;gap:var(--nice-space-2, 8px);padding:var(--nice-space-2, 8px) var(--nice-space-4, 16px);background:#ef4444e6;border-radius:var(--nice-radius-xl, 20px);font-weight:600}.recording-dot{width:12px;height:12px;background:#fff;border-radius:var(--nice-radius-full, 50%);animation:recording-blink 1s ease-in-out infinite}@keyframes recording-blink{0%,to{opacity:1}50%{opacity:.3}}.annotation-canvas{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:auto}.recorder__controls{display:flex;justify-content:space-between;padding:var(--nice-space-4, 16px);background:var(--video-surface);border-top:1px solid var(--video-border)}.controls__main,.controls__secondary{display:flex;gap:var(--nice-space-2, 8px)}.control-button{display:flex;align-items:center;gap:var(--nice-space-2, 8px);padding:var(--nice-space-2-5, 10px) var(--nice-space-5, 20px);background:var(--video-bg);border:1px solid var(--video-border);border-radius:var(--nice-radius-lg, 8px);color:var(--video-text);cursor:pointer;transition:all .2s}.control-button:hover:not(:disabled){border-color:var(--video-primary)}.control-button:disabled{opacity:.5;cursor:not-allowed}.control-button--record{background:var(--video-recording);border-color:var(--video-recording)}.control-button--record:hover:not(:disabled){background:var(--nice-danger-dark, #dc2626)}.control-button--stop{background:var(--video-error);border-color:var(--video-error)}.control-button--active{background:var(--video-primary);border-color:var(--video-primary)}.control-button .icon{font-size:16px}.recorder__status{display:flex;justify-content:space-between;padding:var(--nice-space-3, 12px) var(--nice-space-4, 16px);background:var(--video-bg);font-size:13px}.status__info,.status__quality{display:flex;gap:var(--nice-space-4, 16px)}.status-item strong{color:var(--video-text-secondary);margin-right:var(--nice-space-1, 4px)}.audio-on{color:var(--video-success)}.audio-off{color:var(--video-error)}.recorder__annotation-tools{display:flex;justify-content:center;gap:var(--nice-space-4, 16px);padding:var(--nice-space-3, 12px);background:var(--video-surface);border-top:1px solid var(--video-border)}.tool-group,.color-group{display:flex;gap:var(--nice-space-1, 4px)}.tool-button{color:inherit;width:36px;height:36px;background:var(--video-bg);border:1px solid var(--video-border);border-radius:var(--nice-radius-md, 6px);cursor:pointer;transition:all .2s}.tool-button:hover,.tool-button--active{border-color:var(--video-primary);background:var(--nice-accent-tint-20, rgba(99, 102, 241, .2))}.color-button{width:28px;height:28px;border:2px solid var(--video-border);border-radius:var(--nice-radius-full, 50%);cursor:pointer}.color-button--active{border-color:#fff;box-shadow:0 0 0 2px var(--video-primary)}.recorder__markers{padding:var(--nice-space-3, 12px) var(--nice-space-4, 16px);background:var(--video-surface);border-top:1px solid var(--video-border)}.recorder__markers h4{margin:0 0 var(--nice-space-2, 8px) 0;font-size:13px;color:var(--video-text-secondary)}.markers-list{display:flex;flex-direction:column;gap:var(--nice-space-1, 4px);max-height:120px;overflow-y:auto}.marker-item{display:flex;align-items:center;gap:var(--nice-space-3, 12px);padding:var(--nice-space-2, 8px) var(--nice-space-3, 12px);background:var(--video-bg);border-radius:var(--nice-radius-md, 6px);border-left:3px solid}.marker-time{font-family:monospace;font-size:12px;color:var(--video-text-secondary)}.marker-label{flex:1;background:transparent;border:none;color:var(--video-text);font-size:13px;outline:none}.marker-remove{background:transparent;border:none;color:var(--video-text-secondary);cursor:pointer;font-size:18px}.marker-remove:hover{color:var(--video-error)}.recorder__settings{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:400px;max-height:80vh;background:var(--video-surface);border-radius:var(--nice-radius-xl, 12px);box-shadow:0 20px 40px var(--nice-overlay-40, rgba(0, 0, 0, .4));overflow:auto;z-index:200}.settings-header{display:flex;justify-content:space-between;align-items:center;padding:var(--nice-space-4, 16px) var(--nice-space-5, 20px);border-bottom:1px solid var(--video-border)}.settings-header h3{margin:0}.settings-section{padding:var(--nice-space-4, 16px) var(--nice-space-5, 20px);border-bottom:1px solid var(--video-border)}.settings-section:last-child{border-bottom:none}.settings-section h4{margin:0 0 var(--nice-space-3, 12px) 0;font-size:14px;color:var(--video-text-secondary)}.settings-section label{display:flex;flex-direction:column;gap:var(--nice-space-1, 4px);margin-bottom:var(--nice-space-3, 12px);font-size:13px}.settings-section select,.settings-section input[type=number],.settings-section input[type=text]{padding:var(--nice-space-2, 8px) var(--nice-space-3, 12px);background:var(--video-bg);border:1px solid var(--video-border);border-radius:var(--nice-radius-md, 6px);color:var(--video-text);font-size:13px}.checkbox-label{flex-direction:row!important;align-items:center;cursor:pointer}.checkbox-label input{width:18px;height:18px;margin-right:var(--nice-space-2, 8px)}.nice-live-streaming{display:flex;flex-direction:column;height:100%;min-height:600px;background:var(--video-bg);color:var(--video-text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.streaming__header{display:flex;align-items:center;justify-content:space-between;padding:var(--nice-space-3, 12px) var(--nice-space-5, 20px);background:var(--video-surface);border-bottom:1px solid var(--video-border)}.header__title{display:flex;align-items:center;gap:var(--nice-space-4, 16px)}.stream-name-input{background:transparent;border:none;color:var(--video-text);font-size:18px;font-weight:600;padding:var(--nice-space-1, 4px) var(--nice-space-2, 8px);border-radius:var(--nice-radius-sm, 4px);outline:none}.stream-name-input:hover,.stream-name-input:focus{background:var(--video-bg)}.live-badge{display:flex;align-items:center;gap:var(--nice-space-2, 8px);padding:var(--nice-space-1-5, 6px) var(--nice-space-3-5, 14px);background:var(--video-live);border-radius:var(--nice-radius-xl, 20px);font-size:12px;font-weight:700}.live-dot{width:8px;height:8px;background:#fff;border-radius:var(--nice-radius-full, 50%);animation:recording-blink 1s ease-in-out infinite}.header__stats{display:flex;gap:var(--nice-space-5, 20px)}.stat-item{font-size:13px;color:var(--video-text-secondary)}.action-button--go-live{background:var(--video-live);border-color:var(--video-live);padding:var(--nice-space-2-5, 10px) var(--nice-space-6, 24px);font-size:14px}.action-button--go-live:hover:not(:disabled){background:var(--nice-danger-dark, #dc2626)}.action-button--stop{background:var(--video-error);border-color:var(--video-error)}.streaming__main{display:flex;flex:1;overflow:hidden}.streaming__preview{flex:1;display:flex;flex-direction:column;padding:var(--nice-space-4, 16px)}.scenes-bar{display:flex;gap:var(--nice-space-2, 8px);margin-bottom:var(--nice-space-3, 12px)}.scene-button{padding:var(--nice-space-2, 8px) var(--nice-space-4, 16px);background:var(--video-surface);border:1px solid var(--video-border);border-radius:var(--nice-radius-md, 6px);color:var(--video-text);cursor:pointer;transition:all .2s}.scene-button:hover{border-color:var(--video-primary)}.scene-button--active{background:var(--video-primary);border-color:var(--video-primary)}.scene-button--add{background:transparent;border-style:dashed}.streaming__preview .preview-canvas{flex:1;position:relative;border-radius:var(--nice-radius-lg, 8px);overflow:hidden}.canvas-layer{position:absolute;border:2px solid transparent;border-radius:var(--nice-radius-sm, 4px);transition:border-color .2s;cursor:move}.canvas-layer:hover{border-color:var(--nice-accent-tint-50, rgba(99, 102, 241, .5))}.canvas-layer--selected{border-color:var(--video-primary)}.layer-content{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--video-surface);opacity:.9}.layer-icon{font-size:32px}.layer-name{font-size:12px;margin-top:var(--nice-space-2, 8px)}.streaming__panel{width:320px;background:var(--video-surface);border-left:1px solid var(--video-border);display:flex;flex-direction:column}.panel-tabs{display:flex;border-bottom:1px solid var(--video-border)}.panel-tab{flex:1;padding:var(--nice-space-3, 12px);background:transparent;border:none;color:var(--video-text-secondary);cursor:pointer;font-size:12px;transition:all .2s}.panel-tab:hover{color:var(--video-text)}.panel-tab--active{color:var(--video-text);border-bottom:2px solid var(--video-primary)}.panel-content{flex:1;overflow-y:auto}.sources-panel,.audio-panel,.destinations-panel,.settings-panel{padding:var(--nice-space-4, 16px)}.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--nice-space-4, 16px)}.panel-header h3{margin:0;font-size:14px}.add-button{padding:var(--nice-space-1-5, 6px) var(--nice-space-3, 12px);background:var(--video-primary);border:none;border-radius:var(--nice-radius-sm, 4px);color:#fff;cursor:pointer;font-size:12px}.add-button:hover:not(:disabled){background:var(--video-secondary)}.add-button:disabled{opacity:.5;cursor:not-allowed}.sources-list,.destinations-list{display:flex;flex-direction:column;gap:var(--nice-space-2, 8px)}.source-item{display:flex;align-items:center;gap:var(--nice-space-2-5, 10px);padding:var(--nice-space-2-5, 10px) var(--nice-space-3, 12px);background:var(--video-bg);border-radius:var(--nice-radius-md, 6px);cursor:pointer;transition:background .2s}.source-item:hover,.source-item--selected{background:var(--nice-accent-tint-20, rgba(99, 102, 241, .2))}.source-icon{font-size:18px}.source-name{flex:1;font-size:13px}.source-controls{display:flex;gap:var(--nice-space-0-5, 2px)}.source-controls button{color:inherit;background:transparent;border:none;font-size:14px;cursor:pointer;padding:var(--nice-space-1, 4px);opacity:.6;transition:opacity .2s}.source-controls button:hover:not(:disabled),.source-controls button.active{opacity:1}.source-controls button.inactive{opacity:.3}.source-controls button:disabled{cursor:not-allowed}.layer-properties{margin-top:var(--nice-space-4, 16px);padding-top:var(--nice-space-4, 16px);border-top:1px solid var(--video-border)}.layer-properties h4{margin:0 0 var(--nice-space-3, 12px) 0;font-size:13px;color:var(--video-text-secondary)}.layer-properties label{display:flex;flex-direction:column;gap:var(--nice-space-1, 4px);margin-bottom:var(--nice-space-2-5, 10px);font-size:12px;color:var(--video-text-secondary)}.layer-properties input{padding:var(--nice-space-1-5, 6px) var(--nice-space-2-5, 10px);background:var(--video-bg);border:1px solid var(--video-border);border-radius:var(--nice-radius-sm, 4px);color:var(--video-text);font-size:13px}.audio-sources{display:flex;flex-direction:column;gap:var(--nice-space-3, 12px)}.audio-source{background:var(--video-bg);border-radius:var(--nice-radius-lg, 8px);padding:var(--nice-space-3, 12px)}.audio-header{display:flex;align-items:center;gap:var(--nice-space-2, 8px);margin-bottom:var(--nice-space-2, 8px)}.audio-icon{font-size:16px}.audio-name{flex:1;font-size:13px}.audio-header button{color:inherit;background:transparent;border:none;font-size:16px;cursor:pointer;opacity:.7}.audio-header button:hover{opacity:1}.audio-header button.muted{color:var(--video-error);opacity:1}.audio-slider{display:flex;align-items:center;gap:var(--nice-space-2, 8px)}.audio-slider input{flex:1;height:4px;accent-color:var(--video-primary)}.volume-value{font-size:11px;color:var(--video-text-secondary);min-width:36px;text-align:right}.audio-meter{height:3px;background:var(--video-surface);border-radius:var(--nice-radius-xs, 1.5px);margin-top:var(--nice-space-1-5, 6px);overflow:hidden}.meter-fill{height:100%;background:linear-gradient(to right,var(--video-success),var(--video-warning),var(--video-error));transition:width .1s}.empty-message{color:var(--video-text-secondary);font-size:13px;text-align:center;padding:var(--nice-space-5, 20px)}.destination-item{background:var(--video-bg);border-radius:var(--nice-radius-lg, 8px);padding:var(--nice-space-3, 12px);margin-bottom:var(--nice-space-2, 8px)}.destination-header{display:flex;align-items:center;gap:var(--nice-space-2-5, 10px);margin-bottom:var(--nice-space-3, 12px)}.status-indicator{width:10px;height:10px;border-radius:var(--nice-radius-full, 50%)}.destination-icon{font-size:18px}.destination-name{flex:1;font-size:14px;font-weight:500}.toggle{position:relative;cursor:pointer}.toggle input{opacity:0;width:0;height:0}.toggle-slider{display:block;width:36px;height:20px;background:var(--video-border);border-radius:var(--nice-radius-lg, 10px);position:relative;transition:background .2s}.toggle-slider:before{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:var(--nice-radius-full, 50%);transition:transform .2s}.toggle input:checked+.toggle-slider{background:var(--video-success)}.toggle input:checked+.toggle-slider:before{transform:translate(16px)}.toggle input:disabled+.toggle-slider{opacity:.5}.destination-config{margin-bottom:var(--nice-space-2, 8px)}.destination-config label{display:flex;flex-direction:column;gap:var(--nice-space-1, 4px);margin-bottom:var(--nice-space-2, 8px);font-size:12px;color:var(--video-text-secondary)}.destination-config input{padding:var(--nice-space-2, 8px) var(--nice-space-2-5, 10px);background:var(--video-surface);border:1px solid var(--video-border);border-radius:var(--nice-radius-sm, 4px);color:var(--video-text);font-size:13px}.destination-config input:disabled{opacity:.6}.remove-button{width:100%;padding:var(--nice-space-1-5, 6px);background:transparent;border:1px solid var(--video-border);border-radius:var(--nice-radius-sm, 4px);color:var(--video-text-secondary);cursor:pointer;font-size:12px;transition:all .2s}.remove-button:hover:not(:disabled){border-color:var(--video-error);color:var(--video-error)}.remove-button:disabled{opacity:.5;cursor:not-allowed}.setting-section{margin-bottom:var(--nice-space-5, 20px)}.setting-section h4{margin:0 0 var(--nice-space-3, 12px) 0;font-size:13px;color:var(--video-text-secondary);text-transform:uppercase}.setting-section label{display:flex;flex-direction:column;gap:var(--nice-space-1, 4px);margin-bottom:var(--nice-space-3, 12px);font-size:12px;color:var(--video-text-secondary)}.setting-section select,.setting-section input{padding:var(--nice-space-2, 8px) var(--nice-space-2-5, 10px);background:var(--video-bg);border:1px solid var(--video-border);border-radius:var(--nice-radius-sm, 4px);color:var(--video-text);font-size:13px}.setting-section select:disabled,.setting-section input:disabled{opacity:.6}.streaming__footer{padding:var(--nice-space-2, 8px) var(--nice-space-5, 20px);background:var(--video-surface);border-top:1px solid var(--video-border)}.footer-stats{display:flex;gap:var(--nice-space-6, 24px)}.footer-stats .stat{display:flex;flex-direction:column;gap:var(--nice-space-0-5, 2px)}.footer-stats .stat label{font-size:10px;color:var(--video-text-secondary);text-transform:uppercase}.footer-stats .stat .value{font-size:13px;font-weight:500}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--nice-overlay-70, rgba(0, 0, 0, .7));display:flex;align-items:center;justify-content:center;z-index:1000}.modal{width:90%;max-width:500px;background:var(--video-surface);border-radius:var(--nice-radius-xl, 12px);overflow:hidden}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--nice-space-4, 16px) var(--nice-space-5, 20px);border-bottom:1px solid var(--video-border)}.modal-header h3{margin:0}.modal-content{padding:var(--nice-space-5, 20px)}.source-type-grid,.platform-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--nice-space-3, 12px)}.source-type-button,.platform-button{display:flex;flex-direction:column;align-items:center;gap:var(--nice-space-2, 8px);padding:var(--nice-space-5, 20px);background:var(--video-bg);border:1px solid var(--video-border);border-radius:var(--nice-radius-lg, 8px);color:var(--video-text);cursor:pointer;transition:all .2s}.source-type-button:hover,.platform-button:hover{border-color:var(--video-primary);background:var(--nice-accent-tint-10, rgba(99, 102, 241, .1))}.source-type-button .icon,.platform-button .icon{font-size:28px}.source-type-button .name,.platform-button .name{font-size:12px;text-align:center}
1
+ .nice-video-studio,.nice-screen-recorder,.nice-live-streaming{--video-primary: var(--nice-info, #6366f1);--video-secondary: var(--nice-accent, #8b5cf6);--video-success: var(--nice-success, #10b981);--video-warning: var(--nice-warning, #f59e0b);--video-error: var(--nice-danger, #ef4444);--video-bg: var(--nice-bg, #1e1e2e);--video-surface: var(--nice-bg-secondary, #2d2d3d);--video-border: var(--nice-border-color, #3d3d4d);--video-text: var(--nice-text-primary, #ffffff);--video-text-secondary: var(--nice-text-secondary, #a0a0b0);--video-timeline-bg: var(--nice-bg-tertiary, #252535);--video-track-bg: var(--nice-bg-secondary, #2a2a3a);--video-item-video: var(--nice-info, #6366f1);--video-item-audio: var(--nice-success, #10b981);--video-item-text: var(--nice-warning, #f59e0b);--video-recording: var(--nice-danger, #ef4444);--video-live: var(--nice-danger, #ef4444)}.nice-video-studio{background:var(--video-bg);color:var(--video-text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.nice-video-studio__header{display:flex;align-items:center;justify-content:space-between;padding:var(--nice-space-3, 12px) var(--nice-space-4, 16px);background:var(--video-surface);border-bottom:1px solid var(--video-border)}.nice-video-studio__header-project-info{display:flex;flex-direction:column;gap:var(--nice-space-1, 4px)}.nice-video-studio__project-name-input{background:transparent;border:none;color:var(--video-text);font-size:16px;font-weight:600;padding:var(--nice-space-1, 4px) var(--nice-space-2, 8px);border-radius:var(--nice-radius-sm, 4px);outline:none}.nice-video-studio__project-name-input:hover,.nice-video-studio__project-name-input:focus{background:var(--video-bg)}.nice-video-studio__project-settings{font-size:12px;color:var(--video-text-secondary);padding-left:var(--nice-space-2, 8px)}.nice-video-studio__header-tabs{display:flex;gap:var(--nice-space-1, 4px)}.nice-video-studio__tab-button{padding:var(--nice-space-2, 8px) var(--nice-space-4, 16px);background:transparent;border:none;color:var(--video-text-secondary);cursor:pointer;border-radius:var(--nice-radius-sm, 4px);transition:all .2s}.nice-video-studio__tab-button:hover{background:var(--video-bg);color:var(--video-text)}.nice-video-studio__tab-button--active{background:var(--video-primary);color:#fff}.nice-video-studio__header-actions,.nice-live-streaming__header-actions{display:flex;gap:var(--nice-space-2, 8px)}.nice-video-studio__action-button,.nice-live-streaming__action-button{padding:var(--nice-space-2, 8px) var(--nice-space-5, 20px);border:none;border-radius:var(--nice-radius-md, 6px);cursor:pointer;font-weight:500;transition:all .2s}.nice-video-studio__action-button--primary{background:var(--video-primary);color:#fff}.nice-video-studio__action-button--primary:hover{background:var(--video-secondary)}.nice-video-studio__action-button--primary:disabled{background:var(--video-border);cursor:not-allowed}.nice-video-studio__asset-library{width:250px;height:100%;background:var(--video-surface);border-right:1px solid var(--video-border);display:flex;flex-direction:column}.nice-video-studio__asset-library-header{display:flex;justify-content:space-between;align-items:center;padding:var(--nice-space-3, 12px) var(--nice-space-4, 16px);border-bottom:1px solid var(--video-border)}.nice-video-studio__asset-library-header h3{margin:0;font-size:14px}.nice-video-studio__close-button,.nice-screen-recorder__close-button,.nice-live-streaming__close-button{background:transparent;border:none;color:var(--video-text-secondary);cursor:pointer;font-size:20px;line-height:1}.nice-video-studio__asset-library-upload{padding:var(--nice-space-4, 16px);border-bottom:1px solid var(--video-border)}.nice-video-studio__upload-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--nice-space-6, 24px);border:2px dashed var(--video-border);border-radius:var(--nice-radius-lg, 8px);cursor:pointer;transition:all .2s;gap:var(--nice-space-2, 8px)}.nice-video-studio__upload-zone:hover{border-color:var(--video-primary);background:var(--nice-accent-tint-10, rgba(99, 102, 241, .1))}.nice-video-studio__upload-icon{font-size:24px}.nice-video-studio__asset-library-list{flex:1;overflow-y:auto;padding:var(--nice-space-2, 8px)}.nice-video-studio__asset-item{display:flex;align-items:center;gap:var(--nice-space-3, 12px);padding:var(--nice-space-2, 8px);border-radius:var(--nice-radius-md, 6px);cursor:grab;transition:background .2s}.nice-video-studio__asset-item:hover{background:var(--video-bg)}.nice-video-studio__asset-thumbnail{width:48px;height:48px;background:var(--video-bg);border-radius:var(--nice-radius-sm, 4px);display:flex;align-items:center;justify-content:center;overflow:hidden}.nice-video-studio__asset-thumbnail img{width:100%;height:100%;object-fit:cover}.nice-video-studio__asset-type-icon{font-size:20px}.nice-video-studio__asset-info{flex:1;display:flex;flex-direction:column;gap:var(--nice-space-0-5, 2px);min-width:0}.nice-video-studio__asset-name{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nice-video-studio__asset-meta{font-size:11px;color:var(--video-text-secondary)}.nice-video-studio__preview-area{flex:1;display:flex;flex-direction:column;overflow:hidden}.nice-video-studio__preview-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--nice-space-4, 16px);background:#000}.nice-video-studio__preview-canvas,.nice-live-streaming__preview-canvas{max-width:100%;max-height:100%;background:var(--video-bg);position:relative;border-radius:var(--nice-radius-sm, 4px);overflow:hidden}.nice-video-studio__preview-overlay{position:absolute;top:8px;left:8px}.nice-video-studio__toggle-library-button{background:var(--video-surface);border:none;border-radius:var(--nice-radius-sm, 4px);padding:var(--nice-space-2, 8px);cursor:pointer;opacity:.7;transition:opacity .2s}.nice-video-studio__toggle-library-button:hover{opacity:1}.nice-video-studio__playback-controls{display:flex;align-items:center;gap:var(--nice-space-2, 8px);padding:var(--nice-space-3, 12px);background:var(--video-surface);border-radius:var(--nice-radius-lg, 8px);margin-top:var(--nice-space-3, 12px)}.nice-video-studio__playback-controls button{background:transparent;border:none;font-size:20px;cursor:pointer;padding:var(--nice-space-1, 4px) var(--nice-space-2, 8px);border-radius:var(--nice-radius-sm, 4px);transition:background .2s}.nice-video-studio__playback-controls button:hover{background:var(--video-bg)}.nice-video-studio__play-button{background:var(--video-primary)!important;border-radius:var(--nice-radius-full, 50%)!important;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.nice-video-studio__time-display{font-family:monospace;font-size:14px;color:var(--video-text-secondary);margin-left:var(--nice-space-2, 8px)}.nice-video-studio__item-inspector{width:200px;height:100%;overflow-y:auto;padding:var(--nice-space-4, 16px);background:var(--video-surface);border-left:1px solid var(--video-border)}.nice-video-studio__item-inspector h4{margin:0 0 var(--nice-space-3, 12px) 0;font-size:13px;color:var(--video-text-secondary);text-transform:uppercase}.nice-video-studio__inspector-section label{display:flex;flex-direction:column;gap:var(--nice-space-1, 4px);margin-bottom:var(--nice-space-3, 12px);font-size:12px;color:var(--video-text-secondary)}.nice-video-studio__inspector-section input{background:var(--video-bg);border:1px solid var(--video-border);border-radius:var(--nice-radius-sm, 4px);padding:var(--nice-space-1-5, 6px) var(--nice-space-2, 8px);color:var(--video-text);font-size:13px}.nice-video-studio__effects-list{display:flex;flex-wrap:wrap;gap:var(--nice-space-1, 4px)}.nice-video-studio__effect-badge{padding:var(--nice-space-1, 4px) var(--nice-space-2, 8px);background:var(--video-primary);border-radius:var(--nice-radius-sm, 4px);font-size:11px}.nice-video-studio__panel{height:250px;background:var(--video-surface);border-top:1px solid var(--video-border)}.nice-video-studio__timeline-panel{height:100%;display:flex;flex-direction:column}.nice-video-studio__timeline-toolbar{display:flex;justify-content:space-between;padding:var(--nice-space-2, 8px) var(--nice-space-4, 16px);border-bottom:1px solid var(--video-border)}.nice-video-studio__track-buttons{display:flex;gap:var(--nice-space-2, 8px)}.nice-video-studio__track-buttons button{padding:var(--nice-space-1-5, 6px) var(--nice-space-3, 12px);background:var(--video-bg);border:1px solid var(--video-border);border-radius:var(--nice-radius-sm, 4px);color:var(--video-text);cursor:pointer;font-size:12px}.nice-video-studio__track-buttons button:hover{border-color:var(--video-primary)}.nice-video-studio__zoom-controls{display:flex;align-items:center;gap:var(--nice-space-2, 8px)}.nice-video-studio__zoom-controls button{width:28px;height:28px;background:var(--video-bg);border:1px solid var(--video-border);border-radius:var(--nice-radius-sm, 4px);color:var(--video-text);cursor:pointer}.nice-video-studio__zoom-controls span{font-size:12px;min-width:40px;text-align:center}.nice-video-studio__timeline-container{flex:1;overflow:auto;position:relative}.nice-video-studio__timeline-ruler{height:24px;background:var(--video-timeline-bg);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--video-border)}.nice-video-studio__ruler-mark{position:absolute;top:0;height:100%;padding-left:var(--nice-space-1, 4px);font-size:10px;color:var(--video-text-secondary);border-left:1px solid var(--video-border);display:flex;align-items:center}.nice-video-studio__timeline-playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--video-error);z-index:20;pointer-events:none}.nice-video-studio__timeline-playhead:before{content:"";position:absolute;top:0;left:-6px;width:14px;height:14px;background:var(--video-error);clip-path:polygon(50% 100%,0 0,100% 0)}.nice-video-studio__timeline-tracks{min-height:100%}.nice-video-studio__timeline-track{display:flex;height:60px;border-bottom:1px solid var(--video-border)}.nice-video-studio__timeline-track--selected{background:var(--nice-accent-tint-10, rgba(99, 102, 241, .1))}.nice-video-studio__timeline-track--locked{opacity:.6}.nice-video-studio__track-header{width:150px;padding:var(--nice-space-2, 8px) var(--nice-space-3, 12px);background:var(--video-track-bg);border-right:1px solid var(--video-border);display:flex;flex-direction:column;gap:var(--nice-space-1, 4px)}.nice-video-studio__track-name{font-size:13px;font-weight:500}.nice-video-studio__track-controls{display:flex;gap:var(--nice-space-1, 4px)}.nice-video-studio__track-controls button{color:inherit;background:transparent;border:none;cursor:pointer;font-size:14px;opacity:.6;transition:opacity .2s}.nice-video-studio__track-controls button:hover,.nice-video-studio__track-controls button.nice-video-studio__track-toggle--active{opacity:1}.nice-video-studio__track-items{flex:1;position:relative;background:var(--video-timeline-bg)}.nice-video-studio__track-item{position:absolute;top:4px;height:calc(100% - 8px);border-radius:var(--nice-radius-sm, 4px);display:flex;align-items:center;padding:0 var(--nice-space-2, 8px);cursor:pointer;overflow:hidden;transition:transform .1s}.nice-video-studio__track-item:hover{transform:scaleY(1.05)}.nice-video-studio__track-item--selected{outline:2px solid white}.nice-video-studio__track-item--video{background:var(--video-item-video)}.nice-video-studio__track-item--audio{background:var(--video-item-audio)}.nice-video-studio__track-item--text{background:var(--video-item-text)}.nice-video-studio__track-item--image{background:var(--video-secondary)}.nice-video-studio__item-name{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nice-video-studio__item-transitions,.nice-video-studio__item-effects{margin-left:var(--nice-space-1, 4px);font-size:10px}.nice-video-studio__effects-panel,.nice-video-studio__transitions-panel,.nice-video-studio__export-panel{padding:var(--nice-space-4, 16px);height:100%;overflow-y:auto}.nice-video-studio__effects-panel h3,.nice-video-studio__transitions-panel h3,.nice-video-studio__export-panel h3{margin:0 0 var(--nice-space-2, 8px) 0;font-size:16px}.nice-video-studio__panel-hint{color:var(--video-text-secondary);font-size:13px;margin-bottom:var(--nice-space-4, 16px)}.nice-video-studio__effects-grid,.nice-video-studio__transitions-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:var(--nice-space-2, 8px)}.nice-video-studio__effect-preset{display:flex;flex-direction:column;align-items:center;gap:var(--nice-space-2, 8px);padding:var(--nice-space-4, 16px);background:var(--video-bg);border:1px solid var(--video-border);border-radius:var(--nice-radius-lg, 8px);cursor:pointer;transition:all .2s}.nice-video-studio__effect-preset:hover:not(:disabled){border-color:var(--video-primary);background:var(--nice-accent-tint-10, rgba(99, 102, 241, .1))}.nice-video-studio__effect-preset:disabled{opacity:.5;cursor:not-allowed}.nice-video-studio__effect-icon{font-size:24px}.nice-video-studio__effect-name{font-size:12px}.nice-video-studio__transition-preset{display:flex;justify-content:space-between;align-items:center;padding:var(--nice-space-3, 12px) var(--nice-space-4, 16px);background:var(--video-bg);border:1px solid var(--video-border);border-radius:var(--nice-radius-lg, 8px)}.nice-video-studio__transition-name{font-size:14px}.nice-video-studio__transition-buttons{display:flex;gap:var(--nice-space-1, 4px)}.nice-video-studio__transition-buttons button{padding:var(--nice-space-1, 4px) var(--nice-space-3, 12px);background:var(--video-surface);border:1px solid var(--video-border);border-radius:var(--nice-radius-sm, 4px);color:var(--video-text);cursor:pointer;font-size:12px}.nice-video-studio__transition-buttons button:hover:not(:disabled){border-color:var(--video-primary)}.nice-video-studio__transition-buttons button:disabled{opacity:.5;cursor:not-allowed}.nice-video-studio__export-settings{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--nice-space-4, 16px);margin-bottom:var(--nice-space-6, 24px)}.nice-video-studio__setting-group{display:flex;flex-direction:column;gap:var(--nice-space-1, 4px)}.nice-video-studio__setting-group label{font-size:12px;color:var(--video-text-secondary)}.nice-video-studio__setting-group select,.nice-video-studio__setting-group input{padding:var(--nice-space-2, 8px) var(--nice-space-3, 12px);background:var(--video-bg);border:1px solid var(--video-border);border-radius:var(--nice-radius-sm, 4px);color:var(--video-text);font-size:13px}.nice-video-studio__export-button{width:100%;padding:var(--nice-space-3, 12px);background:var(--video-primary);border:none;border-radius:var(--nice-radius-md, 6px);color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s}.nice-video-studio__export-button:hover:not(:disabled){background:var(--video-secondary)}.nice-video-studio__export-button:disabled{background:var(--video-border);cursor:not-allowed}.nice-video-studio__export-progress{height:4px;background:var(--video-bg);border-radius:var(--nice-radius-sm, 2px);margin-top:var(--nice-space-3, 12px);overflow:hidden}.nice-video-studio__export-progress-bar{height:100%;background:var(--video-success);transition:width .3s}.nice-screen-recorder{display:flex;flex-direction:column;background:var(--video-bg);color:var(--video-text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;border-radius:var(--nice-radius-xl, 12px);overflow:hidden}.nice-screen-recorder__preview{position:relative;aspect-ratio:16/9;background:#000}.nice-video-studio__preview-video,.nice-screen-recorder__preview-video{width:100%;height:100%;object-fit:contain}.nice-screen-recorder__preview-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}.nice-screen-recorder__start-preview-button{display:flex;flex-direction:column;align-items:center;gap:var(--nice-space-3, 12px);padding:var(--nice-space-8, 32px) var(--nice-space-12, 48px);background:var(--video-surface);border:2px dashed var(--video-border);border-radius:var(--nice-radius-xl, 12px);color:var(--video-text);cursor:pointer;transition:all .2s}.nice-screen-recorder__start-preview-button:hover{border-color:var(--video-primary);background:var(--nice-accent-tint-10, rgba(99, 102, 241, .1))}.nice-screen-recorder__start-preview-button .nice-screen-recorder__icon{font-size:48px}.nice-screen-recorder__countdown-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:var(--nice-overlay-80, rgba(0, 0, 0, .8));z-index:100}.nice-screen-recorder__countdown-number{font-size:120px;font-weight:700;color:#fff;animation:nice-screen-recorder-countdown-pulse 1s ease-in-out}@keyframes nice-screen-recorder-countdown-pulse{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.2);opacity:1}to{transform:scale(1);opacity:.8}}.nice-screen-recorder__recording-indicator{position:absolute;top:16px;right:16px;display:flex;align-items:center;gap:var(--nice-space-2, 8px);padding:var(--nice-space-2, 8px) var(--nice-space-4, 16px);background:color-mix(in srgb,var(--nice-color-danger, #ef4444) 90%,transparent);border-radius:var(--nice-radius-xl, 20px);font-weight:600}.nice-screen-recorder__recording-dot{width:12px;height:12px;background:#fff;border-radius:var(--nice-radius-full, 50%);animation:nice-screen-recorder-recording-blink 1s ease-in-out infinite}@keyframes nice-screen-recorder-recording-blink{0%,to{opacity:1}50%{opacity:.3}}.nice-screen-recorder__annotation-canvas{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:auto}.nice-screen-recorder__controls{display:flex;justify-content:space-between;padding:var(--nice-space-4, 16px);background:var(--video-surface);border-top:1px solid var(--video-border)}.nice-screen-recorder__controls-main,.nice-screen-recorder__controls-secondary{display:flex;gap:var(--nice-space-2, 8px)}.nice-screen-recorder__control-button{display:flex;align-items:center;gap:var(--nice-space-2, 8px);padding:var(--nice-space-2-5, 10px) var(--nice-space-5, 20px);background:var(--video-bg);border:1px solid var(--video-border);border-radius:var(--nice-radius-lg, 8px);color:var(--video-text);cursor:pointer;transition:all .2s}.nice-screen-recorder__control-button:hover:not(:disabled){border-color:var(--video-primary)}.nice-screen-recorder__control-button:disabled{opacity:.5;cursor:not-allowed}.nice-screen-recorder__control-button--record{background:var(--video-recording);border-color:var(--video-recording)}.nice-screen-recorder__control-button--record:hover:not(:disabled){background:var(--nice-danger-dark, #dc2626)}.nice-screen-recorder__control-button--stop{background:var(--video-error);border-color:var(--video-error)}.nice-screen-recorder__control-button--active{background:var(--video-primary);border-color:var(--video-primary)}.nice-screen-recorder__control-button .nice-screen-recorder__icon{font-size:16px}.nice-screen-recorder__status{display:flex;justify-content:space-between;padding:var(--nice-space-3, 12px) var(--nice-space-4, 16px);background:var(--video-bg);font-size:13px}.nice-screen-recorder__status-info,.nice-screen-recorder__status-quality{display:flex;gap:var(--nice-space-4, 16px)}.nice-screen-recorder__status-item strong{color:var(--video-text-secondary);margin-right:var(--nice-space-1, 4px)}.nice-screen-recorder__audio-status--on{color:var(--video-success)}.nice-screen-recorder__audio-status--off{color:var(--video-error)}.nice-screen-recorder__annotation-tools{display:flex;justify-content:center;gap:var(--nice-space-4, 16px);padding:var(--nice-space-3, 12px);background:var(--video-surface);border-top:1px solid var(--video-border)}.nice-screen-recorder__tool-group,.nice-screen-recorder__color-group{display:flex;gap:var(--nice-space-1, 4px)}.nice-screen-recorder__tool-button{color:inherit;width:36px;height:36px;background:var(--video-bg);border:1px solid var(--video-border);border-radius:var(--nice-radius-md, 6px);cursor:pointer;transition:all .2s}.nice-screen-recorder__tool-button:hover,.nice-screen-recorder__tool-button--active{border-color:var(--video-primary);background:var(--nice-accent-tint-20, rgba(99, 102, 241, .2))}.nice-screen-recorder__color-button{width:28px;height:28px;border:2px solid var(--video-border);border-radius:var(--nice-radius-full, 50%);cursor:pointer}.nice-screen-recorder__color-button--active{border-color:#fff;box-shadow:0 0 0 2px var(--video-primary)}.nice-screen-recorder__markers{padding:var(--nice-space-3, 12px) var(--nice-space-4, 16px);background:var(--video-surface);border-top:1px solid var(--video-border)}.nice-screen-recorder__markers h4{margin:0 0 var(--nice-space-2, 8px) 0;font-size:13px;color:var(--video-text-secondary)}.nice-screen-recorder__markers-list{display:flex;flex-direction:column;gap:var(--nice-space-1, 4px);max-height:120px;overflow-y:auto}.nice-screen-recorder__marker-item{display:flex;align-items:center;gap:var(--nice-space-3, 12px);padding:var(--nice-space-2, 8px) var(--nice-space-3, 12px);background:var(--video-bg);border-radius:var(--nice-radius-md, 6px);border-left:3px solid}.nice-screen-recorder__marker-time{font-family:monospace;font-size:12px;color:var(--video-text-secondary)}.nice-screen-recorder__marker-label{flex:1;background:transparent;border:none;color:var(--video-text);font-size:13px;outline:none}.nice-screen-recorder__marker-remove{background:transparent;border:none;color:var(--video-text-secondary);cursor:pointer;font-size:18px}.nice-screen-recorder__marker-remove:hover{color:var(--video-error)}.nice-screen-recorder__settings{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:400px;max-height:80vh;background:var(--video-surface);border-radius:var(--nice-radius-xl, 12px);box-shadow:0 20px 40px var(--nice-overlay-40, rgba(0, 0, 0, .4));overflow:auto;z-index:200}.nice-screen-recorder__settings-header{display:flex;justify-content:space-between;align-items:center;padding:var(--nice-space-4, 16px) var(--nice-space-5, 20px);border-bottom:1px solid var(--video-border)}.nice-screen-recorder__settings-header h3{margin:0}.nice-screen-recorder__settings-section{padding:var(--nice-space-4, 16px) var(--nice-space-5, 20px);border-bottom:1px solid var(--video-border)}.nice-screen-recorder__settings-section:last-child{border-bottom:none}.nice-screen-recorder__settings-section h4{margin:0 0 var(--nice-space-3, 12px) 0;font-size:14px;color:var(--video-text-secondary)}.nice-screen-recorder__settings-section label{display:flex;flex-direction:column;gap:var(--nice-space-1, 4px);margin-bottom:var(--nice-space-3, 12px);font-size:13px}.nice-screen-recorder__settings-section select,.nice-screen-recorder__settings-section input[type=number],.nice-screen-recorder__settings-section input[type=text]{padding:var(--nice-space-2, 8px) var(--nice-space-3, 12px);background:var(--video-bg);border:1px solid var(--video-border);border-radius:var(--nice-radius-md, 6px);color:var(--video-text);font-size:13px}.nice-screen-recorder__checkbox-label{flex-direction:row!important;align-items:center;cursor:pointer}.nice-screen-recorder__checkbox-label input{width:18px;height:18px;margin-right:var(--nice-space-2, 8px)}.nice-live-streaming{display:flex;flex-direction:column;height:100%;min-height:600px;background:var(--video-bg);color:var(--video-text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.nice-live-streaming__header{display:flex;align-items:center;justify-content:space-between;padding:var(--nice-space-3, 12px) var(--nice-space-5, 20px);background:var(--video-surface);border-bottom:1px solid var(--video-border)}.nice-live-streaming__header-title{display:flex;align-items:center;gap:var(--nice-space-4, 16px)}.nice-live-streaming__stream-name-input{background:transparent;border:none;color:var(--video-text);font-size:18px;font-weight:600;padding:var(--nice-space-1, 4px) var(--nice-space-2, 8px);border-radius:var(--nice-radius-sm, 4px);outline:none}.nice-live-streaming__stream-name-input:hover,.nice-live-streaming__stream-name-input:focus{background:var(--video-bg)}.nice-live-streaming__live-badge{display:flex;align-items:center;gap:var(--nice-space-2, 8px);padding:var(--nice-space-1-5, 6px) var(--nice-space-3-5, 14px);background:var(--video-live);border-radius:var(--nice-radius-xl, 20px);font-size:12px;font-weight:700}.nice-live-streaming__live-dot{width:8px;height:8px;background:#fff;border-radius:var(--nice-radius-full, 50%);animation:nice-screen-recorder-recording-blink 1s ease-in-out infinite}.nice-live-streaming__header-stats{display:flex;gap:var(--nice-space-5, 20px)}.nice-live-streaming__stat-item{font-size:13px;color:var(--video-text-secondary)}.nice-live-streaming__action-button--go-live{background:var(--video-live);border-color:var(--video-live);padding:var(--nice-space-2-5, 10px) var(--nice-space-6, 24px);font-size:14px}.nice-live-streaming__action-button--go-live:hover:not(:disabled){background:var(--nice-danger-dark, #dc2626)}.nice-live-streaming__action-button--stop{background:var(--video-error);border-color:var(--video-error)}.nice-live-streaming__main{display:flex;flex:1;overflow:hidden}.nice-live-streaming__preview{flex:1;display:flex;flex-direction:column;padding:var(--nice-space-4, 16px)}.nice-live-streaming__scenes-bar{display:flex;gap:var(--nice-space-2, 8px);margin-bottom:var(--nice-space-3, 12px)}.nice-live-streaming__scene-button{padding:var(--nice-space-2, 8px) var(--nice-space-4, 16px);background:var(--video-surface);border:1px solid var(--video-border);border-radius:var(--nice-radius-md, 6px);color:var(--video-text);cursor:pointer;transition:all .2s}.nice-live-streaming__scene-button:hover{border-color:var(--video-primary)}.nice-live-streaming__scene-button--active{background:var(--video-primary);border-color:var(--video-primary)}.nice-live-streaming__scene-button--add{background:transparent;border-style:dashed}.nice-live-streaming__preview .nice-live-streaming__preview-canvas{flex:1;position:relative;border-radius:var(--nice-radius-lg, 8px);overflow:hidden}.nice-live-streaming__canvas-layer{position:absolute;border:2px solid transparent;border-radius:var(--nice-radius-sm, 4px);transition:border-color .2s;cursor:move}.nice-live-streaming__canvas-layer:hover{border-color:var(--nice-accent-tint-50, rgba(99, 102, 241, .5))}.nice-live-streaming__canvas-layer--selected{border-color:var(--video-primary)}.nice-live-streaming__layer-content{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--video-surface);opacity:.9}.nice-live-streaming__layer-icon{font-size:32px}.nice-live-streaming__layer-name{font-size:12px;margin-top:var(--nice-space-2, 8px)}.nice-live-streaming__panel{width:320px;background:var(--video-surface);border-left:1px solid var(--video-border);display:flex;flex-direction:column}.nice-live-streaming__panel-tabs{display:flex;border-bottom:1px solid var(--video-border)}.nice-live-streaming__panel-tab{flex:1;padding:var(--nice-space-3, 12px);background:transparent;border:none;color:var(--video-text-secondary);cursor:pointer;font-size:12px;transition:all .2s}.nice-live-streaming__panel-tab:hover{color:var(--video-text)}.nice-live-streaming__panel-tab--active{color:var(--video-text);border-bottom:2px solid var(--video-primary)}.nice-live-streaming__panel-content{flex:1;overflow-y:auto}.nice-live-streaming__sources-panel,.nice-live-streaming__audio-panel,.nice-live-streaming__destinations-panel,.nice-live-streaming__settings-panel{padding:var(--nice-space-4, 16px)}.nice-live-streaming__panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--nice-space-4, 16px)}.nice-live-streaming__panel-header h3{margin:0;font-size:14px}.nice-live-streaming__add-button{padding:var(--nice-space-1-5, 6px) var(--nice-space-3, 12px);background:var(--video-primary);border:none;border-radius:var(--nice-radius-sm, 4px);color:#fff;cursor:pointer;font-size:12px}.nice-live-streaming__add-button:hover:not(:disabled){background:var(--video-secondary)}.nice-live-streaming__add-button:disabled{opacity:.5;cursor:not-allowed}.nice-live-streaming__sources-list,.nice-live-streaming__destinations-list{display:flex;flex-direction:column;gap:var(--nice-space-2, 8px)}.nice-live-streaming__source-item{display:flex;align-items:center;gap:var(--nice-space-2-5, 10px);padding:var(--nice-space-2-5, 10px) var(--nice-space-3, 12px);background:var(--video-bg);border-radius:var(--nice-radius-md, 6px);cursor:pointer;transition:background .2s}.nice-live-streaming__source-item:hover,.nice-live-streaming__source-item--selected{background:var(--nice-accent-tint-20, rgba(99, 102, 241, .2))}.nice-live-streaming__source-icon{font-size:18px}.nice-live-streaming__source-name{flex:1;font-size:13px}.nice-live-streaming__source-controls{display:flex;gap:var(--nice-space-0-5, 2px)}.nice-live-streaming__source-controls button{color:inherit;background:transparent;border:none;font-size:14px;cursor:pointer;padding:var(--nice-space-1, 4px);opacity:.6;transition:opacity .2s}.nice-live-streaming__source-controls button:hover:not(:disabled){opacity:1}.nice-live-streaming__source-controls button.nice-live-streaming__visibility-toggle--hidden{opacity:.3}.nice-live-streaming__source-controls button:disabled{cursor:not-allowed}.nice-live-streaming__layer-properties{margin-top:var(--nice-space-4, 16px);padding-top:var(--nice-space-4, 16px);border-top:1px solid var(--video-border)}.nice-live-streaming__layer-properties h4{margin:0 0 var(--nice-space-3, 12px) 0;font-size:13px;color:var(--video-text-secondary)}.nice-live-streaming__layer-properties label{display:flex;flex-direction:column;gap:var(--nice-space-1, 4px);margin-bottom:var(--nice-space-2-5, 10px);font-size:12px;color:var(--video-text-secondary)}.nice-live-streaming__layer-properties input{padding:var(--nice-space-1-5, 6px) var(--nice-space-2-5, 10px);background:var(--video-bg);border:1px solid var(--video-border);border-radius:var(--nice-radius-sm, 4px);color:var(--video-text);font-size:13px}.nice-live-streaming__audio-sources{display:flex;flex-direction:column;gap:var(--nice-space-3, 12px)}.nice-live-streaming__audio-source{background:var(--video-bg);border-radius:var(--nice-radius-lg, 8px);padding:var(--nice-space-3, 12px)}.nice-live-streaming__audio-header{display:flex;align-items:center;gap:var(--nice-space-2, 8px);margin-bottom:var(--nice-space-2, 8px)}.nice-live-streaming__audio-icon{font-size:16px}.nice-live-streaming__audio-name{flex:1;font-size:13px}.nice-live-streaming__audio-header button{color:inherit;background:transparent;border:none;font-size:16px;cursor:pointer;opacity:.7}.nice-live-streaming__audio-header button:hover{opacity:1}.nice-live-streaming__audio-header button.nice-live-streaming__mute-toggle--muted{color:var(--video-error);opacity:1}.nice-live-streaming__audio-slider{display:flex;align-items:center;gap:var(--nice-space-2, 8px)}.nice-live-streaming__audio-slider input{flex:1;height:4px;accent-color:var(--video-primary)}.nice-live-streaming__volume-value{font-size:11px;color:var(--video-text-secondary);min-width:36px;text-align:right}.nice-live-streaming__audio-meter{height:3px;background:var(--video-surface);border-radius:var(--nice-radius-xs, 1.5px);margin-top:var(--nice-space-1-5, 6px);overflow:hidden}.nice-live-streaming__meter-fill{height:100%;background:linear-gradient(to right,var(--video-success),var(--video-warning),var(--video-error));transition:width .1s}.nice-live-streaming__empty-message{color:var(--video-text-secondary);font-size:13px;text-align:center;padding:var(--nice-space-5, 20px)}.nice-live-streaming__destination-item{background:var(--video-bg);border-radius:var(--nice-radius-lg, 8px);padding:var(--nice-space-3, 12px);margin-bottom:var(--nice-space-2, 8px)}.nice-live-streaming__destination-header{display:flex;align-items:center;gap:var(--nice-space-2-5, 10px);margin-bottom:var(--nice-space-3, 12px)}.nice-live-streaming__status-indicator{width:10px;height:10px;border-radius:var(--nice-radius-full, 50%)}.nice-live-streaming__destination-icon{font-size:18px}.nice-live-streaming__destination-name{flex:1;font-size:14px;font-weight:500}.nice-live-streaming__toggle{position:relative;cursor:pointer}.nice-live-streaming__toggle input{opacity:0;width:0;height:0}.nice-live-streaming__toggle-slider{display:block;width:36px;height:20px;background:var(--video-border);border-radius:var(--nice-radius-lg, 10px);position:relative;transition:background .2s}.nice-live-streaming__toggle-slider:before{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:var(--nice-radius-full, 50%);transition:transform .2s}.nice-live-streaming__toggle input:checked+.nice-live-streaming__toggle-slider{background:var(--video-success)}.nice-live-streaming__toggle input:checked+.nice-live-streaming__toggle-slider:before{transform:translate(16px)}.nice-live-streaming__toggle input:disabled+.nice-live-streaming__toggle-slider{opacity:.5}.nice-live-streaming__destination-config{margin-bottom:var(--nice-space-2, 8px)}.nice-live-streaming__destination-config label{display:flex;flex-direction:column;gap:var(--nice-space-1, 4px);margin-bottom:var(--nice-space-2, 8px);font-size:12px;color:var(--video-text-secondary)}.nice-live-streaming__destination-config input{padding:var(--nice-space-2, 8px) var(--nice-space-2-5, 10px);background:var(--video-surface);border:1px solid var(--video-border);border-radius:var(--nice-radius-sm, 4px);color:var(--video-text);font-size:13px}.nice-live-streaming__destination-config input:disabled{opacity:.6}.nice-live-streaming__remove-button{width:100%;padding:var(--nice-space-1-5, 6px);background:transparent;border:1px solid var(--video-border);border-radius:var(--nice-radius-sm, 4px);color:var(--video-text-secondary);cursor:pointer;font-size:12px;transition:all .2s}.nice-live-streaming__remove-button:hover:not(:disabled){border-color:var(--video-error);color:var(--video-error)}.nice-live-streaming__remove-button:disabled{opacity:.5;cursor:not-allowed}.nice-live-streaming__setting-section{margin-bottom:var(--nice-space-5, 20px)}.nice-live-streaming__setting-section h4{margin:0 0 var(--nice-space-3, 12px) 0;font-size:13px;color:var(--video-text-secondary);text-transform:uppercase}.nice-live-streaming__setting-section label{display:flex;flex-direction:column;gap:var(--nice-space-1, 4px);margin-bottom:var(--nice-space-3, 12px);font-size:12px;color:var(--video-text-secondary)}.nice-live-streaming__setting-section select,.nice-live-streaming__setting-section input{padding:var(--nice-space-2, 8px) var(--nice-space-2-5, 10px);background:var(--video-bg);border:1px solid var(--video-border);border-radius:var(--nice-radius-sm, 4px);color:var(--video-text);font-size:13px}.nice-live-streaming__setting-section select:disabled,.nice-live-streaming__setting-section input:disabled{opacity:.6}.nice-live-streaming__footer{padding:var(--nice-space-2, 8px) var(--nice-space-5, 20px);background:var(--video-surface);border-top:1px solid var(--video-border)}.nice-live-streaming__footer-stats{display:flex;gap:var(--nice-space-6, 24px)}.nice-live-streaming__footer-stats .nice-live-streaming__stat{display:flex;flex-direction:column;gap:var(--nice-space-0-5, 2px)}.nice-live-streaming__footer-stats .nice-live-streaming__stat label{font-size:10px;color:var(--video-text-secondary);text-transform:uppercase}.nice-live-streaming__footer-stats .nice-live-streaming__stat .nice-live-streaming__value{font-size:13px;font-weight:500}.nice-live-streaming__modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--nice-overlay-70, rgba(0, 0, 0, .7));display:flex;align-items:center;justify-content:center;z-index:1000}.nice-live-streaming__modal{width:90%;max-width:500px;background:var(--video-surface);border-radius:var(--nice-radius-xl, 12px);overflow:hidden}.nice-live-streaming__modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--nice-space-4, 16px) var(--nice-space-5, 20px);border-bottom:1px solid var(--video-border)}.nice-live-streaming__modal-header h3{margin:0}.nice-live-streaming__modal-content{padding:var(--nice-space-5, 20px)}.nice-live-streaming__source-type-grid,.nice-live-streaming__platform-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--nice-space-3, 12px)}.nice-live-streaming__source-type-button,.nice-live-streaming__platform-button{display:flex;flex-direction:column;align-items:center;gap:var(--nice-space-2, 8px);padding:var(--nice-space-5, 20px);background:var(--video-bg);border:1px solid var(--video-border);border-radius:var(--nice-radius-lg, 8px);color:var(--video-text);cursor:pointer;transition:all .2s}.nice-live-streaming__source-type-button:hover,.nice-live-streaming__platform-button:hover{border-color:var(--video-primary);background:var(--nice-accent-tint-10, rgba(99, 102, 241, .1))}.nice-live-streaming__source-type-button .nice-live-streaming__icon,.nice-live-streaming__platform-button .nice-live-streaming__icon{font-size:28px}.nice-live-streaming__source-type-button .nice-live-streaming__name,.nice-live-streaming__platform-button .nice-live-streaming__name{font-size:12px;text-align:center}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nice2dev/ui-video",
3
- "version": "1.2.0",
3
+ "version": "1.2.2",
4
4
  "description": "Nice2Dev Video Components - Video editor, screen recorder, and live streaming",
5
5
  "type": "module",
6
6
  "sideEffects": [
@@ -32,14 +32,14 @@
32
32
  },
33
33
  "dependencies": {},
34
34
  "peerDependencies": {
35
- "@nice2dev/ui": "^1.0.28",
36
- "@nice2dev/ui-core": "^1.0.28",
35
+ "@nice2dev/ui": "^1.2.0",
36
+ "@nice2dev/ui-core": "^1.2.0",
37
37
  "react": ">=17.0.0",
38
38
  "react-dom": ">=17.0.0"
39
39
  },
40
40
  "devDependencies": {
41
- "@nice2dev/ui": "^1.2.0",
42
- "@nice2dev/ui-core": "^1.2.0",
41
+ "@nice2dev/ui": "^1.2.2",
42
+ "@nice2dev/ui-core": "^1.2.2",
43
43
  "@testing-library/react": "^16.3.3",
44
44
  "@types/react": "^19.2.18",
45
45
  "@types/react-dom": "^19.2.7",