2 lines
17 KiB
CSS
2 lines
17 KiB
CSS
:root{--bg-primary: #1a1a1a;--bg-secondary: #2d2d2d;--bg-tertiary: #404040;--text-primary: #ffffff;--text-secondary: #cccccc;--accent-green: #00ff41;--accent-red: #ff4444;--accent-blue: #4488ff;--accent-orange: #ff8800;--border-color: #555555;--hover-color: #555555;--tab-active: #333333}*{margin:0;padding:0;box-sizing:border-box}.config-section{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg-primary);display:flex;align-items:center;justify-content:center;z-index:1000}.config-content{background:var(--bg-secondary);padding:2rem;border-radius:8px;border:2px solid var(--border-color);text-align:center;min-width:300px}.config-content h2{color:var(--text-primary);margin-bottom:1.5rem}.config-row{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;justify-content:center}.config-row label{color:var(--text-secondary);font-weight:500}.config-input{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;padding:.5rem;color:var(--text-primary);font-size:1rem;width:80px;text-align:center}.config-buttons{display:flex;gap:1rem;justify-content:center;margin-bottom:1rem}.config-btn{border:none;border-radius:4px;padding:.8rem 1.5rem;cursor:pointer;font-size:1rem;font-weight:500;transition:all .2s ease}.config-btn.primary{background:var(--accent-blue);color:#fff}.config-btn.primary:hover{background:#69d;transform:scale(1.05)}.config-btn.secondary{background:var(--accent-red);color:#fff}.config-btn.secondary:hover{background:#d44;transform:scale(1.05)}.config-info{background:#00ff411a;border:1px solid var(--accent-green);border-radius:4px;padding:.8rem;margin-top:1rem}.config-info p{color:var(--accent-green);font-size:.9rem;margin:0}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow-x:auto;font-size:14px}.header{background-color:var(--bg-secondary);padding:.4rem 1rem;border-bottom:2px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;height:50px}.header-left{display:flex;align-items:center;gap:1rem}.header h1{font-size:1.1rem;font-weight:600;color:var(--accent-green);margin:0}.status-indicators{display:flex;gap:1rem}.global-controls{display:flex;gap:.4rem;align-items:center}.set-to-container{display:flex;align-items:center;gap:0;background-color:var(--accent-primary);border-radius:4px;overflow:hidden}.set-to-container .set-all-btn{border-radius:0;margin:0}.camera-selector{display:flex;gap:.4rem;align-items:center;padding:.3rem .6rem;background-color:#0003}.camera-checkbox-label{display:flex;align-items:center;gap:.3rem;cursor:pointer;font-size:.75rem;color:#ffffffe6;padding:.2rem .4rem;border-radius:3px;transition:all .2s ease}.camera-checkbox-label:hover{background-color:#ffffff1a;color:#fff}.camera-checkbox-label input[type=checkbox]{margin:0;cursor:pointer}.camera-checkbox-label span{-webkit-user-select:none;user-select:none}.global-enable-btn{background-color:#a00;color:#fff;border:none;border-radius:4px;padding:.4rem .8rem;font-weight:700;cursor:pointer;transition:all .2s ease;font-size:.8rem}.global-enable-btn.enabled{background-color:#0a0}.global-enable-btn:hover{transform:scale(1.05)}.set-all-btn{background-color:var(--accent-primary);color:#fff;border:none;border-radius:4px;padding:.4rem .8rem;cursor:pointer;transition:all .2s ease;font-size:.8rem}.set-all-btn:hover{background-color:var(--accent-secondary);transform:scale(1.05)}.status-item{display:flex;align-items:center;gap:.4rem}.status-label{font-size:.8rem;font-weight:500;color:var(--text-secondary)}.status-light{width:10px;height:10px;border-radius:50%;background-color:var(--accent-red);box-shadow:0 0 6px #ff444480;transition:all .3s ease}.status-light.connected{background-color:var(--accent-green);box-shadow:0 0 6px #00ff4180}.status-light.connecting{background-color:var(--accent-orange);box-shadow:0 0 6px #ff880080;animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.main-content{padding:.3rem;height:calc(100vh - 50px);overflow:hidden;display:flex;gap:.3rem}.ptz-controllers{display:flex;gap:.3rem;flex:0 0 auto}.ptz-controller{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;padding:.4rem;width:190px;display:flex;flex-direction:column;align-items:center;gap:.5rem;height:calc(100vh - 56px);overflow:hidden}.ptz-header{text-align:center;width:100%}.ptz-header h3{color:var(--accent-green);font-size:.8rem;margin-bottom:.2rem}.connection-controls{display:flex;flex-direction:column;gap:.5rem;width:100%}.video-preview{width:100%;margin-bottom:.3rem;background-color:#000;border-radius:4px;overflow:hidden;border:1px solid var(--border-color);position:relative;flex-shrink:0}.preview-video{width:100%;height:100px;background-color:#000;object-fit:cover;display:block}@keyframes loading{0%{background-position:0px 0px}to{background-position:40px 40px}}.ptz-joystick{width:100px;height:100px;background-color:var(--bg-primary);border:2px solid var(--border-color);border-radius:50%;position:relative;cursor:grab;transition:all .2s ease;flex-shrink:0}.ptz-joystick:hover{border-color:var(--accent-blue)}.ptz-joystick:active{cursor:grabbing}.ptz-controls-fixed{width:100%;display:flex;flex-direction:column;gap:.3rem;flex-shrink:0}.home-button-container{display:flex;justify-content:center;padding:.2rem 0}.home-btn{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;padding:.3rem .6rem;font-size:1.2rem;cursor:pointer;transition:all .2s ease;color:var(--text-primary)}.home-btn:hover{background:var(--accent-blue);border-color:var(--accent-blue);transform:scale(1.1)}.home-btn:active{transform:scale(.95)}.home-btn:disabled{opacity:.5;cursor:not-allowed}.ptz-controls{width:100%;display:flex;flex-direction:column;gap:.3rem;overflow-y:auto;overflow-x:hidden;flex:1;min-height:0;padding-right:.2rem}.ptz-controls::-webkit-scrollbar{width:6px}.ptz-controls::-webkit-scrollbar-track{background:var(--bg-primary);border-radius:3px}.ptz-controls::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.ptz-controls::-webkit-scrollbar-thumb:hover{background:var(--accent-blue)}.pan-tilt-section,.zoom-section,.focus-section{display:flex;flex-direction:column;gap:.2rem}.pan-tilt-section label,.zoom-section label,.focus-section label{font-size:.7rem;color:var(--text-secondary);text-align:center;margin:0}.pan-tilt-speed-slider,.zoom-speed-slider,.focus-speed-slider{width:100%;height:4px;background-color:var(--bg-tertiary);border-radius:2px;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.zoom-speed-slider::-webkit-slider-thumb,.focus-speed-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:20px;background-color:var(--accent-blue);border-radius:3px;cursor:pointer}.zoom-speed-slider::-moz-range-thumb,.focus-speed-slider::-moz-range-thumb{width:12px;height:20px;background-color:var(--accent-blue);border-radius:3px;cursor:pointer;border:none}.pan-tilt-speed-value,.zoom-speed-value,.focus-speed-value{font-size:.8rem;color:var(--text-primary);text-align:center;font-weight:600}.zoom-buttons,.focus-buttons{display:flex;gap:.3rem}.zoom-btn,.focus-btn{flex:1;padding:.5rem;background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);font-size:.7rem;font-weight:600;cursor:pointer;transition:all .2s ease}.zoom-btn:hover,.focus-btn:hover{background-color:var(--hover-color);border-color:var(--accent-blue)}.zoom-btn:active,.focus-btn:active{transform:scale(.95)}.focus-btn.active{background-color:var(--accent-blue);border-color:var(--accent-blue)}.dynamic-slider-container{display:flex;align-items:center;gap:.5rem;padding:.3rem 0}.dynamic-label{font-size:.65rem;color:var(--text-secondary);font-weight:600;min-width:25px;text-align:center}.dynamic-slider{flex:1;height:4px;background:linear-gradient(to right,var(--accent-red) 0%,var(--bg-tertiary) 50%,var(--accent-blue) 100%);border-radius:2px;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.dynamic-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:22px;background-color:var(--text-primary);border:2px solid var(--accent-blue);border-radius:3px;cursor:grab;transition:all .1s ease}.dynamic-slider::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.1)}.dynamic-slider::-moz-range-thumb{width:14px;height:22px;background-color:var(--text-primary);border:2px solid var(--accent-blue);border-radius:3px;cursor:grab}.dynamic-slider::-moz-range-thumb:active{cursor:grabbing;transform:scale(1.1)}.sensitivity-control{display:flex;align-items:center;gap:.3rem;padding:.2rem 0}.sensitivity-control label{font-size:.65rem;color:var(--text-secondary);min-width:55px}.sensitivity-slider{flex:1;height:3px;background-color:var(--bg-tertiary);border-radius:2px;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.sensitivity-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:10px;height:16px;background-color:var(--accent-blue);border-radius:2px;cursor:pointer}.sensitivity-slider::-moz-range-thumb{width:10px;height:16px;background-color:var(--accent-blue);border-radius:2px;cursor:pointer;border:none}.sensitivity-value{font-size:.7rem;color:var(--text-primary);min-width:12px;text-align:center;font-weight:600}.preset-section{display:flex;flex-direction:column;gap:.3rem}.preset-section label{font-size:.7rem;color:var(--text-secondary);text-align:center;margin:0}.preset-select{background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);font-size:.75rem;padding:.4rem;width:100%}.preset-select:focus{outline:none;border-color:var(--accent-blue)}.preset-buttons{display:flex;gap:.3rem}.preset-btn{flex:1;padding:.5rem;background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);font-size:.7rem;font-weight:600;cursor:pointer;transition:all .2s ease}.preset-btn:hover{background-color:var(--hover-color);border-color:var(--accent-blue)}.preset-btn:active{transform:scale(.95)}.quick-presets-section{display:flex;flex-direction:column;gap:.3rem}.quick-presets-section label{font-size:.7rem;color:var(--text-secondary);text-align:center;margin:0}.quick-presets-grid{display:flex;flex-direction:column;gap:.25rem}.quick-preset-item{display:flex;align-items:center;gap:.3rem;width:100%;height:26px}.quick-recall-btn,.quick-set-btn{padding:.3rem .5rem;background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);font-size:.65rem;font-weight:600;cursor:pointer;transition:all .2s ease;white-space:nowrap}.quick-recall-btn{flex:0 0 30px}.quick-set-btn{flex:0 0 35px}.quick-recall-btn:hover,.quick-set-btn:hover{background-color:var(--hover-color);border-color:var(--accent-blue)}.quick-recall-btn:active,.quick-set-btn:active{transform:scale(.95)}.quick-preset-label{flex:1;background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:3px;padding:.3rem .4rem;color:var(--text-primary);font-size:.65rem;min-width:0;height:100%}.quick-preset-label:focus{outline:none;border-color:var(--accent-blue)}.preset-feedback{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#000c;color:var(--accent-green);padding:.5rem 1rem;border-radius:4px;font-size:.9rem;font-weight:600;z-index:10;pointer-events:none;animation:fadeOut 2s forwards}@keyframes fadeOut{0%{opacity:1}80%{opacity:1}to{opacity:0}}.global-settings-panel{flex:1;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;overflow:hidden;display:flex;flex-direction:column}.settings-header{background-color:var(--bg-tertiary);padding:1rem;border-bottom:1px solid var(--border-color)}.settings-header h2{font-size:1.2rem;color:var(--accent-green);font-weight:600;margin:0}.camera-tabs{display:flex;border-bottom:1px solid var(--border-color);background-color:var(--bg-primary)}.camera-tab{flex:1;padding:1rem;background:none;border:none;border-bottom:3px solid transparent;color:var(--text-secondary);font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease}.camera-tab:hover{color:var(--text-primary);background-color:var(--hover-color)}.camera-tab.active{color:var(--accent-green);border-bottom-color:var(--accent-green);background-color:var(--bg-secondary)}.settings-content{flex:1;overflow-y:auto;padding:1.5rem}.camera-settings{display:none}.camera-settings.active{display:block}.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.settings-group{background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;padding:1.25rem}.settings-group h4{font-size:1rem;color:var(--accent-blue);margin:0 0 1rem;font-weight:600;display:flex;align-items:center;justify-content:space-between}.copy-checkbox-label{display:flex;align-items:center;gap:.4rem;font-size:.75rem;color:var(--text-secondary);cursor:pointer;font-weight:400}.copy-checkbox-label span{-webkit-user-select:none;user-select:none}.copy-setting-checkbox{width:14px;height:14px;accent-color:var(--accent-blue);cursor:pointer}.setting-with-checkbox{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.setting-with-checkbox label{font-size:.9rem;color:var(--text-secondary);font-weight:500}.slider-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}.slider-row .copy-setting-checkbox{flex-shrink:0}.ip-input{background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:3px;padding:.4rem .6rem;color:var(--text-primary);font-size:.8rem;width:100%}.ip-input:focus{outline:none;border-color:var(--accent-blue)}.setting-select{width:100%;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:4px;padding:.6rem;color:var(--text-primary);font-size:.9rem;margin-bottom:1rem}.setting-select:focus{outline:none;border-color:var(--accent-blue)}.setting-btn{width:100%;background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;padding:.6rem;color:var(--text-primary);font-size:.9rem;cursor:pointer;transition:all .2s ease;margin-bottom:1rem}.setting-btn:hover{background-color:var(--hover-color);border-color:var(--accent-blue)}.slider-row{display:flex;align-items:center;gap:1rem;margin-bottom:.75rem}.slider-row label{font-size:.9rem;color:var(--text-secondary);min-width:100px;font-weight:500}.checkbox-row{margin-bottom:.75rem}.checkbox-label{display:flex;align-items:center;gap:.75rem;font-size:.9rem;color:var(--text-secondary);cursor:pointer}.checkbox-label input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent-blue)}.connect-btn{background-color:var(--accent-green);border:none;border-radius:3px;padding:.5rem;color:var(--bg-primary);font-weight:600;cursor:pointer;transition:all .2s ease;font-size:.8rem;width:100%}.connect-btn:hover{background-color:#0c3}.connect-btn.connecting{background-color:var(--accent-orange);cursor:not-allowed}.connect-btn.connected{background-color:var(--accent-red)}.setting-slider{flex:1;height:6px;background-color:var(--bg-tertiary);border-radius:3px;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.setting-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:20px;background-color:var(--accent-blue);border-radius:3px;cursor:pointer;transition:all .2s ease}.setting-slider::-webkit-slider-thumb:hover{background-color:#59f;transform:scale(1.1)}.setting-slider::-moz-range-thumb{width:12px;height:20px;background-color:var(--accent-blue);border-radius:3px;cursor:pointer;border:none;transition:all .2s ease}.slider-value{font-size:.9rem;color:var(--text-primary);min-width:35px;text-align:center;font-weight:600}@media (min-width: 768px) and (max-width: 1024px){.main-content,.ptz-controllers{gap:.2rem}.ptz-controller{padding:.3rem}.settings-section label{font-size:.7rem}.settings-section input,.settings-section select{font-size:.7rem;padding:.2rem .3rem}.camera-tab{font-size:.7rem;padding:.4rem .6rem}.connection-section{gap:.2rem}.ip-input{font-size:.7rem;padding:.2rem}.connect-btn{font-size:.7rem;padding:.3rem .6rem}}@media (max-width: 1200px){.settings-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}}@media (max-width: 900px){.main-content{flex-direction:column;height:auto;overflow-y:auto}.ptz-controllers{flex-wrap:wrap;justify-content:center}.ptz-controller{width:180px}.settings-grid{grid-template-columns:1fr}}@media (max-width: 768px){.header{flex-direction:column;gap:.75rem;padding:.75rem;height:auto}.status-indicators{gap:1rem}.main-content{padding:.75rem}.ptz-controller{width:160px;padding:.75rem}.ptz-joystick{width:100px;height:100px}.camera-tabs{flex-direction:column}.camera-tab{padding:.75rem;border-right:3px solid transparent;border-bottom:none}.camera-tab.active{border-right-color:var(--accent-green);border-bottom:none}.settings-content{padding:1rem}}
|