[data-theme='light'] { /** Generic form elements **/ --button-state-disabled-color: var(--axis-gray-4); --button-state-focus-border-color: var(--axis-blue-4-brand); --button-state-focus-color: var(--axis-gray-6); --button-toggle-state-active-bg-color: var(--axis-gray-3); --button-toggle-state-active-border-color: var(--axis-gray-6); --button-toggle-state-active-box-shadow-color: rgba(var(--axis-black-values), 0.25); --button-toggle-state-active-color: var(--axis-gray-8); --button-toggle-state-normal-bg-color: var(--axis-white); --button-toggle-state-normal-border-color: var(--axis-gray-5); --button-toggle-state-normal-color: var(--axis-gray-8); --button-component-arrow-color: var(--axis-gray-8); --button-component-arrow-hover-color: var(--axis-gray-7); --button-component-arrow-selected-color: var(--axis-gray-7); --input-state-disabled-bg-color: var(--axis-gray-2); --input-state-disabled-border-color: var(--axis-gray-3); --input-state-disabled-color: var(--axis-gray-4); --input-state-focus-border-color: var(--axis-blue-4-brand); --input-state-focus-color: var(--axis-black); --input-state-hover-border-color: var(--axis-gray-6); --input-state-hover-color: var(--axis-gray-7); --input-state-normal-bg-color: var(--axis-white); --input-state-normal-border-color: var(--axis-gray-5); --input-state-normal-color: var(--axis-gray-7); --input-placeholder-color: var(--axis-gray-6); --link-state-active-color: var(--axis-blue-5); --link-state-disabled-color: var(--axis-gray-5); --link-state-focus-border-color: var(--axis-blue-4-brand); --link-state-focus-color: var(--axis-blue-4-brand); --link-state-hover-color: var(--axis-blue-3); --link-state-normal-color: var(--axis-blue-4-brand); --link-accent-state-active-color: var(--axis-blue-5); --link-accent-state-disabled-color: var(--axis-gray-5); --link-accent-state-focus-border-color: var(--axis-blue-4-brand); --link-accent-state-focus-color: var(--axis-blue-4-brand); --link-accent-state-hover-color: var(--axis-blue-3); --link-accent-state-normal-color: var(--axis-blue-4-brand); --radio-state-active-box-shadow-color: var(--axis-blue-6); --radio-state-active-box-shadow-color2: var(--axis-gray-6); --radio-state-disabled-box-shadow-color: var(--axis-gray-4); --radio-state-disabled-box-shadow-color2: var(--axis-gray-4); --radio-state-disabled-color: var(--axis-gray-5); --radio-state-focus-box-shadow-color: var(--axis-blue-4-brand); --radio-state-hover-box-shadow-color: var(--axis-blue-4-brand); --radio-state-hover-box-shadow-color2: var(--axis-gray-6); --radio-state-hover-outerring-color: var(--axis-gray-9); --radio-checked-state-active-box-shadow-color: var(--axis-blue-5); --radio-checked-state-active-box-shadow-color2: var(--axis-gray-6); --radio-checked-state-focus-box-shadow-color: var(--axis-blue-4-brand); --radio-checked-state-focus-box-shadow-color2: var(--axis-blue-4-brand); --radio-checked-state-normal-box-shadow-color: var(--axis-blue-4-brand); --radio-checked-state-normal-box-shadow-color2: var(--axis-gray-6); /** Settings and feedback **/ --axis-logo-state-normal-color: var(--axis-black); --body-state-normal-bg-color: var(--axis-white); --carousel-page-state-active-color: var(--axis-gray-7); --carousel-page-state-normal-color: var(--axis-gray-5); --group-state-normal-color: var(--axis-gray-8); --header-state-normal-bg-color: var(--axis-white); --header-state-normal-border-color: var(--axis-gray-5); --header-state-normal-color: var(--axis-gray-8); --icon-state-active-color: var(--axis-yellow-4-brand); --icon-state-disabled-color: var(--axis-gray-7); --icon-state-focus-border-color: var(--axis-blue-4-brand); --icon-state-focus-color: var(--axis-gray-8); --icon-state-hover-color: var(--axis-yellow-5); --icon-state-normal-bg-color: transparent; --icon-state-normal-color: var(--axis-gray-8); --icon-state-pressed-color: var(--axis-yellow-6); --icon-active-state-active-color: var(--axis-yellow-6); --icon-active-state-focus-color: var(--axis-yellow-5); --icon-active-state-hover-color: var(--axis-yellow-5); --icon-active-state-normal-color: var(--axis-yellow-4-brand); --icon-label-state-normal-color: var(--axis-gray-8); --navigation-state-active-color: var(--axis-gray-8); --navigation-state-focus-color: var(--axis-blue-4-brand); --navigation-state-normal-color: var(--axis-gray-8); --orientation-panel-state-normal-bg-color: var(--axis-white); --orientation-navbuttons-state-disabled-bg-color: var(--axis-white); --orientation-navbuttons-state-normal-bg-color: var(--axis-white); --settings-input-placeholder-state-normal-color: var(--axis-gray-9); --settings-input-state-normal-bg-color: var(--axis-gray-1); --settings-input-state-normal-color: var(--axis-gray-8); --settings-menu-state-active-color: var(--axis-gray-8); --settings-menu-state-normal-bg-color: var(--axis-gray-4); --settings-menu-state-normal-color: var(--axis-gray-8); --settings-menu-accent-state-active-color: var(--axis-yellow-4-brand); --settings-menu-accent-state-normal-border-color: var(--axis-gray-3); --settings-menu-inactive-state-normal-bg-color: var(--axis-gray-3); --settings-menu-selected-state-normal-color: var(--axis-gray-8); --settings-menu-selected-state-normal-bg-color: var(--axis-gray-2); --settings-menu-vertical-anchor-bg-color: var(--axis-gray-1); --settings-menu-vertical-state-active-bg-color: var(--axis-gray-3); --settings-menu-vertical-state-normal-border-color: var(--axis-gray-5); --settings-menu-vertical-state-normal-color: var(--axis-gray-8); --settings-navbuttons-state-disabled-bg-color: var(--axis-gray-2); --settings-navbuttons-state-disabled-color: var(--axis-gray-3); --settings-navbuttons-state-normal-bg-color: var(--axis-gray-2); --settings-navbuttons-state-normal-color: var(--axis-gray-9); --settings-navbuttons-state-normal-border-color: var(--axis-gray-4); --settings-panel-state-normal-bg-color: var(--axis-gray-2); --settings-panel-state-normal-color: #bcbcbc; /* WARNING */ --settings-toggle-state-normal-bg-color: var(--axis-yellow-4-brand); --settings-toggle-state-normal-color: var(--axis-gray-8); --workspace-full-screen-state-normal-bg-color: var(--axis-gray-9); --workspace-h1-state-normal-color: var(--axis-gray-8); --workspace-state-normal-bg-color: var(--axis-white); --workspace-title-state-normal-bg-color: var(--axis-yellow-4-brand); --wizard-error-color: var(--axis-red); --wizard-h1-color: var(--axis-gray-8); --wizard-h2-color: var(--axis-gray-8); --wizard-h3-color: var(--axis-gray-9); --navigator-state-normal-bg-color: color(var(--axis-white) a(0.4)); --navigator-state-normal-border-color: var(--axis-black); --navigator-vp-state-normal-bg-color: transparent; --navigator-vp-state-normal-border-color: var(--axis-yellow-4-brand); --navigator-icon-state-normal-color: var(--axis-yellow-4-brand); --app-install-active-color: var(--axis-gray-8); --app-install-inactive-color: var(--axis-gray-6); --app-install-success-color: var(--axis-green); --app-install-failure-color: var(--axis-red); /** Components **/ --component-alarmLevelGraph-levelbar-color: var(--axis-gray-5); --component-alarmLevelGraph-bg-color: var(--axis-gray-2); --component-alarmLevelGraph-border-color: var(--axis-gray-6); --component-alarmLevelGraph-limitbar-color: var(--axis-blue-4-brand); --component-alarmLevelGraph-alarm-color: var(--axis-red); --component-card-bg-color: var(--axis-white); --component-card-border-color: var(--axis-gray-3); --component-card-box-shadow-color: var(--axis-gray-3); --component-card-arrow-expanded-color: var(--axis-blue-5); --component-collapsibleInfo-state-focus-box-shadow-color: var(--axis-blue-4-brand); --component-collapsibleInfo-state-focus-color: var(--axis-black); --component-collapsibleInfo-state-hover-border-color: var(--axis-blue-2); --component-collapsibleInfo-state-hover-color: var(--axis-gray-6); --component-collapsibleInfo-state-normal-border-color: var(--axis-blue-4-brand); --component-collapsibleInfo-state-normal-color: var(--axis-gray-8); --component-error-state-normal-border-color: var(--axis-red); --component-foldableList-border-color: var(--axis-gray-3); --component-list-state-hover-bg-color: var(--axis-blue-4-brand); --component-list-state-hover-color: var(--axis-white); --component-list-state-normal-bg-color: var(--axis-gray-1); --component-list-state-normal-border-color: var(--axis-gray-4); --component-list-state-normal-color: var(--axis-gray-10); --component-list-child-state-hover-color: var(--axis-gray-5); --component-list-child-state-normal-bg-color: var(--axis-gray-3); --component-list-child-state-normal-color: inherit; --component-list-child-state-normal-border-color: var(--axis-gray-3); --component-expandable-list-hover-bg-color: var(--axis-gray-2); --component-expandable-list-hover-color: var(--axis-gray-9); --component-ptz-slider-border-color: var(--axis-yellow-4-brand); --component-ptz-slider-placeholder-color: var(--axis-yellow-4-brand); --component-ptz-slider-track-background-color: var(--axis-yellow-4-brand); --component-ptz-slider-track-ghost-background-color: var(--axis-yellow-4-brand); --component-ptz-button-selected-color: var(--axis-yellow-4-brand); --component-ptz-crosshair-color: var(--axis-yellow-4-brand); --component-title-state-normal-color: var(--axis-gray-8); --component-title-text-shadow: 0 1px 0 var(--axis-white); --component-tooltip-fill: var(--axis-gray-4); --component-tooltip-icon-fill: var(--axis-gray-5); --component-tooltip-background: var(--axis-white); --component-tooltip-border: var(--axis-gray-3); --component-tooltip-shadow: rgba(var(--axis-black-values), 0.1); --component-link-normal-color: var(--axis-blue-4-brand); --component-link-hover-color: var(--axis-blue-3); --component-link-active-color: var(--axis-blue-5); --component-link-focus-color: var(--axis-blue-4-brand); --component-link-visited-color: var(--axis-blue-4-brand); --component-popup-background-color: var(--axis-white); --component-popup-text-color: var(--axis-gray-10); --component-popup-box-shadow-color: rgba(var(--axis-black-values), 0.2); --component-popup-spinner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E %3Cstyle%3E /* %3C!%5BCDATA%5B */ @keyframes spinner-fade %7B0%25 %7Bopacity: 1 %7D 80%25 %7Bopacity: 0 %7D 100%25 %7Bopacity: 0 %7D %7D g.spinner rect %7Bfill: currentColor; will-change: opacity; opacity: 0; animation: spinner-fade 0.75s linear infinite;%7D /* %5D%5D%3E */ %3C/style%3E %3Cg class='spinner' fill='none' fill-rule='evenodd'%3E %3Crect style='animation-delay: -0.375s;' width='22' height='64' x='117' rx='9'/%3E %3Crect style='animation-delay: -0.3125s;' width='22' height='64' x='164.526' y='13.213' transform='rotate(30 175.526 45.213)' rx='9'/%3E %3Crect style='animation-delay: -0.25s;' width='22' height='64' x='200.213' y='48.133' transform='rotate(60 211.213 80.133)' rx='9'/%3E %3Crect style='animation-delay: -0.1875s;' width='22' height='64' x='212.846' y='95.449' transform='rotate(90 223.846 127.45)' rx='9'/%3E %3Crect style='animation-delay: -0.125s;' width='22' height='64' x='200.138' y='144.202' transform='rotate(120 211.138 176.202)' rx='9'/%3E %3Crect style='animation-delay: -0.0625s;' width='22' height='64' x='164.824' y='178.864' transform='rotate(150 175.824 210.864)' rx='9'/%3E %3Crect style='animation-delay: 0s;' width='22' height='64' x='117' y='192' transform='rotate(180 128 224)' rx='9'/%3E %3Crect style='animation-delay: 0.0625s;' width='22' height='64' x='69.003' y='179.378' transform='rotate(-150 80.003 211.378)' rx='9'/%3E %3Crect style='animation-delay: 0.125s;' width='22' height='64' x='33.735' y='144.011' transform='rotate(-120 44.735 176.011)' rx='9'/%3E %3Crect style='animation-delay: 0.1875s;' width='22' height='64' x='21' y='96' transform='rotate(-90 32 128)' rx='9'/%3E %3Crect style='animation-delay: 0.25s;' width='22' height='64' x='33.926' y='48.133' transform='rotate(-60 44.926 80.133)' rx='9'/%3E %3Crect style='animation-delay: 0.3125s;' width='22' height='64' x='69.068' y='12.838' transform='rotate(-30 80.068 44.838)' rx='9'/%3E %3C/g%3E %3C/svg%3E"); --component-wlan-check-icon-normal-color: var(--axis-yellow-5); --component-wlan-lock-icon-normal-color: var(--axis-gray-7); --component-wlan-strength-icon-bar-full-normal-color: var(--axis-gray-8); --component-wlan-strength-icon-bar-empty-normal-color: var(--axis-gray-5); --component-editablelist-accent-state-active-color: var(--axis-blue-5); /** Controls **/ --liveview-menu-bgcolor: var(--axis-white); --liveview-menu-border-color: var(--axis-gray-4); --liveview-menu-list-hover-bgcolor: var(--axis-gray-3); --liveview-menu-icon-state-inactive-color: var(--axis-gray-4); --liveview-menu-recordings-text-color: var(--axis-white); --liveview-menu-state-normal-color: var(--axis-black); --liveview-menu-video-settings-color: var(--axis-white); --liveview-menu-video-settings-bg-color: var(--axis-gray-10); --liveview-menu-video-settings-icon-color: var(--axis-yellow-4-brand); --liveview-menu-video-settings-icon-text-color: var(--axis-black); --liveview-menu-video-settings-on-off-checked-bg-color: var(--axis-yellow-4-brand); --source-icon-state-active-bg-color: var(--axis-yellow-4-brand); --source-icon-state-active-color: var(--axis-black); --source-icon-state-disabled-color: var(--axis-gray-7); --source-icon-state-disabled-fill: var(--axis-gray-8); --source-icon-state-normal-bg-color: var(--axis-gray-7); --source-icon-state-normal-color: var(--axis-white); --workspace-panel-group-border: var(--axis-gray-3); --workspace-panel-group-box-shadow: var(--axis-gray-3); /** Window content **/ --legal-page-div-color: var(--axis-gray-10); --legal-page-div-hover-color: var(--axis-white); --scrollbar-track-color: var(--axis-gray-3); --scrollbar-thumb-color: var(--axis-gray-5); --window-border-color: var(--axis-gray-4); /** Security **/ --security-tooltip-bg: var(--axis-gray-10); --security-tooltip-color: var(--axis-white); /** Special cases with no states **/ --help-menu-mobile-bg-color: var(--axis-white); --settings-menu-mobile-bg-color: var(--axis-gray-5); --user-menu-mobile-bg-color: var(--axis-white); --level-meter-background: var(--axis-gray-3); --level-meter-border: var(--axis-gray-2); --level-meter-audio-low: var(--axis-green); --level-meter-audio-middle: var(--axis-yellow-3); --level-meter-audio-high: var(--axis-red); --progress-bar-background-color: var(--axis-gray-4); --progress-bar-foreground-color: var(--axis-blue-4-brand); --svg-main-color: var(--axis-yellow-4-brand); --svg-contrast-color: rgba(var(--axis-black-values), 0.5); --svg-contrast-inverted-color: var(--axis-white); --svg-grid-color: var(--axis-yellow-4-brand); --lvc-button-background-color: var(--axis-gray-1); --lvc-button-color: var(--axis-gray-7); --lvc-button-active-box-shadow-color: rgba(var(--axis-black-value), 0.05); --lvc-button-arrow-inactive-color: var(--axis-gray-3); --lvc-button-menu-open: var(--axis-blue-4-brand); --lvc-menu-box-shadow-color: rgba(var(--axis-black-values), 0.3); --audio-clips-expanded-arrow-color: var(--axis-blue-4-brand); --audio-clips-hover-bg-color: var(--axis-gray-2); --audio-clips-border-color: var(--axis-gray-4); --certificates-expanded-arrow-color: var(--axis-blue-4-brand); --settings-overlay-background-color: var(--settings-panel-state-normal-bg-color); --settings-overlay-header-color: var(--component-title-state-normal-color); --settings-overlay-header-border-color: var(--header-state-normal-border-color); --settings-overlay-guard-tour-nav-fill-color: default; --settings-overlay-guard-tour-preset-counter-background-color: var(--axis-gray-8); --settings-overlay-guard-tour-preset-counter-color: var(--axis-white); --settings-overlay-guard-tour-preset-counter-highlighted-background-color: var(--axis-blue-4-brand); --settings-overlay-guard-tour-waiting-background-color: var(--settings-panel-state-normal-bg-color); --settings-overlay-guard-tour-preset-transition-spinner-background-color: var(--axis-white); --settings-overlay-guard-tour-preset-transition-spinner-border-color: var(--axis-gray-5); --settings-overlay-guard-tour-preset-transition-spinner-arrow-background-color: var(--axis-gray-8); --settings-overlay-guard-tour-preset-transition-spinner-arrow-highlighted-background-color: var(--axis-blue-4-brand); --settings-overlay-guard-tour-recorded-recording-color: var(--axis-red); --password-hint-default-color: var(--axis-gray-4); --password-hint-hover-color: var(--axis-gray-6); --password-hint-active-color: var(--axis-blue-4-brand); --status-indicator-on-color: var(--axis-green); --status-indicator-off-color: var(--axis-red); --onvif-group-title-color: var(--axis-gray-6); --onvif-group-divider-color: var(--axis-gray-3); --onvif-configuration-hover-color: var(--axis-gray-1); --table-row-striped-color: var(--axis-gray-4); --table-row-border-color: var(--axis-gray-3); --table-row-hover-color: var(--axis-gray-4); --table-head-border-color: var(--axis-black); --imageList-background-color: var(--axis-white); } [data-theme='dark'] { /** Generic form elements **/ --button-state-disabled-color: var(--axis-gray-6); --button-state-focus-border-color: var(--axis-blue-4-brand); --button-state-focus-color: var(--axis-gray-3); --button-toggle-state-active-bg-color: var(--axis-gray-11); --button-toggle-state-active-border-color: var(--axis-gray-6); --button-toggle-state-active-box-shadow-color: rgba(var(--axis-black-values), 0.25); --button-toggle-state-active-color: var(--axis-gray-3); --button-toggle-state-normal-bg-color: var(--axis-gray-10); --button-toggle-state-normal-border-color: var(--axis-gray-7); --button-toggle-state-normal-color: var(--axis-white); --button-component-arrow-color: var(--axis-gray-3); --button-component-arrow-hover-color: var(--axis-white); --button-component-arrow-selected-color: var(--axis-white); --input-state-disabled-bg-color: var(--axis-gray-9); --input-state-disabled-border-color: var(--axis-gray-8); --input-state-disabled-color: var(--axis-gray-7); --input-state-focus-border-color: var(--axis-blue-4-brand); --input-state-focus-color: var(--axis-white); --input-state-hover-border-color: var(--axis-gray-6); --input-state-hover-color: var(--axis-gray-3); --input-state-normal-bg-color: var(--axis-gray-10); --input-state-normal-border-color: var(--axis-gray-7); --input-state-normal-color: var(--axis-gray-3); --input-placeholder-color: var(--axis-gray-6); --link-state-active-color: var(--axis-gray-5); --link-state-disabled-color: var(--axis-gray-7); --link-state-focus-border-color: var(--axis-blue-4-brand); --link-state-focus-color: var(--axis-gray-3); --link-state-hover-color: var(--axis-white); --link-state-normal-color: var(--axis-gray-3); --link-accent-state-active-color: var(--axis-blue-5); --link-accent-state-disabled-color: var(--axis-gray-7); --link-accent-state-focus-border-color: var(--axis-blue-4-brand); --link-accent-state-focus-color: var(--axis-blue-4-brand); --link-accent-state-hover-color: var(--axis-blue-3); --link-accent-state-normal-color: var(--axis-blue-4-brand); --radio-state-active-box-shadow-color: var(--axis-blue-6); --radio-state-active-box-shadow-color2: var(--axis-gray-6); --radio-state-disabled-box-shadow-color: var(--axis-gray-8); --radio-state-disabled-box-shadow-color2: var(--axis-gray-9); --radio-state-disabled-color: var(--axis-gray-7); --radio-state-focus-box-shadow-color: var(--axis-blue-4-brand); --radio-state-hover-box-shadow-color: var(--axis-blue-4-brand); --radio-state-hover-box-shadow-color2: var(--axis-gray-6); --radio-state-hover-outerring-color: var(--axis-gray-5); --radio-checked-state-active-box-shadow-color: var(--axis-blue-5); --radio-checked-state-active-box-shadow-color2: var(--axis-gray-6); --radio-checked-state-focus-box-shadow-color: var(--axis-blue-4-brand); /* Fill color */ --radio-checked-state-focus-box-shadow-color2: var(--axis-blue-4-brand); /* Ring color */ --radio-checked-state-normal-box-shadow-color: var(--axis-blue-4-brand); /* Fill color */ --radio-checked-state-normal-box-shadow-color2: var(--axis-gray-7); /* Ring color */ /** Settings and feedback **/ --axis-logo-state-normal-color: var(--axis-white); --body-state-normal-bg-color: var(--axis-gray-11); --carousel-page-state-active-color: var(--axis-gray-4); --carousel-page-state-normal-color: var(--axis-gray-7); /* FIX - NON EXISTANT VALUE IN DARK THEME DESIGN */ --group-state-normal-color: var(--axis-gray-3); --header-state-normal-bg-color: var(--axis-black); --header-state-normal-border-color: var(--axis-gray-8); --header-state-normal-color: var(--axis-white); --icon-state-active-color: var(--axis-yellow-6); --icon-state-disabled-color: var(--axis-gray-7); --icon-state-focus-border-color: var(--axis-blue-4-brand); --icon-state-focus-color: var(--axis-white); --icon-state-hover-color: var(--axis-yellow-4-brand); --icon-state-normal-bg-color: transparent; --icon-state-normal-color: var(--axis-white); --icon-state-pressed-color: var(--axis-yellow-6); --icon-active-state-active-color: var(--axis-yellow-6); --icon-active-state-focus-color: var(--axis-yellow-4-brand); --icon-active-state-hover-color: var(--axis-yellow-4-brand); --icon-active-state-normal-color: var(--axis-yellow-4-brand); --icon-label-state-normal-color: var(--axis-white); --navigation-state-active-color: var(--axis-gray-3); --navigation-state-focus-color: var(--axis-blue-4-brand); --navigation-state-normal-color: var(--axis-gray-3); --orientation-panel-state-normal-bg-color: var(--axis-gray-9); --orientation-navbuttons-state-disabled-bg-color: var(--axis-gray-9); --orientation-navbuttons-state-normal-bg-color: var(--axis-gray-9); --settings-input-placeholder-state-normal-color: var(--axis-gray-7); --settings-input-state-normal-bg-color: var(--axis-gray-1); --settings-input-state-normal-color: var(--axis-gray-8); --settings-menu-state-active-color: var(--axis-gray-8); --settings-menu-state-normal-bg-color: var(--axis-gray-8); --settings-menu-state-normal-color: var(--axis-gray-3); --settings-menu-accent-state-active-color: var(--axis-yellow-4-brand); --settings-menu-accent-state-normal-border-color: var(--axis-gray-11); --settings-menu-inactive-state-normal-bg-color: var(--axis-gray-11); --settings-menu-selected-state-normal-color: var(--axis-gray-3); --settings-menu-selected-state-normal-bg-color: var(--axis-gray-9); --settings-menu-vertical-anchor-bg-color: var(--axis-gray-1); --settings-menu-vertical-state-active-bg-color: var(--axis-gray-3); --settings-menu-vertical-state-normal-border-color: var(--axis-gray-5); --settings-menu-vertical-state-normal-color: var(--axis-gray-3); --settings-navbuttons-state-disabled-bg-color: var(--axis-gray-9); --settings-navbuttons-state-disabled-color: var(--axis-gray-8); --settings-navbuttons-state-normal-bg-color: var(--axis-gray-9); --settings-navbuttons-state-normal-color: var(--axis-gray-3); --settings-navbuttons-state-normal-border-color: var(--axis-gray-8); --settings-panel-state-normal-bg-color: var(--axis-gray-9); --settings-panel-state-normal-color: #bcbcbc; /* WARNING */ --settings-toggle-state-normal-bg-color: var(--axis-yellow-4-brand); --settings-toggle-state-normal-color: var(--axis-gray-8); --workspace-full-screen-state-normal-bg-color: var(--axis-gray-9); --workspace-h1-state-normal-color: var(--axis-white); --workspace-state-normal-bg-color: var(--axis-gray-10); --workspace-title-state-normal-bg-color: var(--axis-yellow-4-brand); --wizard-error-color: var(--axis-red); --wizard-h1-color: var(--axis-gray-8); --wizard-h2-color: var(--axis-gray-8); --wizard-h3-color: var(--axis-gray-9); --app-install-active: var(--axis-gray-8); --app-install-inactive: var(--axis-gray-6); /** Components **/ --component-alarmLevelGraph-levelbar-color: var(--axis-gray-6); --component-alarmLevelGraph-bg-color: var(--axis-gray-8); --component-alarmLevelGraph-border-color: var(--axis-gray-8); --component-alarmLevelGraph-limitbar-color: var(--axis-blue-4-brand); --component-alarmLevelGraph-alarm-color: var(--axis-red); --component-card-bg-color: var(--axis-gray-10); --component-card-border-color: var(--axis-gray-8); --component-card-box-shadow-color: var(--axis-gray-11); --component-card-arrow-expanded-color: var(--axis-blue-5); --component-collapsibleInfo-state-focus-box-shadow-color: var(--axis-blue-4-brand); --component-collapsibleInfo-state-focus-color: var(--axis-gray-4); --component-collapsibleInfo-state-hover-border-color: var(--axis-blue-2); --component-collapsibleInfo-state-hover-color: var(--axis-gray-4); --component-collapsibleInfo-state-normal-border-color: var(--axis-blue-4-brand); --component-collapsibleInfo-state-normal-color: var(--axis-white); --component-error-state-normal-border-color: var(--axis-red); --component-foldableList-border-color: var(--axis-gray-7); --component-list-state-hover-bg-color: var(--axis-blue-4-brand); --component-list-state-hover-color: var(--axis-white); --component-list-state-normal-bg-color: var(--axis-gray-11); --component-list-state-normal-border-color: var(--axis-gray-9); --component-list-state-normal-color: var(--axis-white); --component-list-child-state-hover-color: var(--axis-gray-5); --component-list-child-state-normal-bg-color: var(--axis-gray-10); --component-list-child-state-normal-color: var(--axis-gray-5); --component-list-child-state-normal-border-color: var(--axis-gray-3); /* ? */ --component-expandable-list-hover-bg-color: var(--axis-gray-9); --component-expandable-list-hover-color: var(--axis-gray-3); --component-ptz-slider-border-color: var(--axis-yellow-4-brand); --component-ptz-slider-placeholder-color: var(--axis-yellow-4-brand); --component-ptz-slider-track-background-color: var(--axis-yellow-4-brand); --component-ptz-slider-track-ghost-background-color: var(--axis-yellow-4-brand); --component-ptz-button-selected-color: var(--axis-yellow-4-brand); --component-ptz-crosshair-color: var(--axis-yellow-4-brand); --component-title-state-normal-color: var(--axis-white); --component-title-text-shadow: 0 1px 0 var(--axis-gray-8); --component-tooltip-fill: var(--axis-white); --component-tooltip-icon-fill: var(--axis-gray-5); --component-tooltip-background: var(--axis-gray-9); --component-tooltip-border: var(--axis-gray-10); --component-tooltip-shadow: rgba(var(--axis-black-values), 0.1); --component-link-normal-color: var(--axis-blue-4-brand); --component-link-hover-color: var(--axis-blue-3); --component-link-active-color: var(--axis-blue-5); --component-link-focus-color: var(--axis-blue-4-brand); --component-link-visited-color: var(--axis-blue-4-brand); --component-popup-background-color: var(--axis-gray-11); --component-popup-text-color: var(--axis-white); --component-popup-box-shadow-color: rgba(var(--axis-black-values), 0.2); --component-popup-spinner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E %3Cstyle%3E /* %3C!%5BCDATA%5B */ @keyframes spinner-fade %7B0%25 %7Bopacity: 1 %7D 80%25 %7Bopacity: 0 %7D 100%25 %7Bopacity: 0 %7D %7D g.spinner rect %7Bwill-change: opacity; opacity: 0; animation: spinner-fade 0.75s linear infinite;%7D /* %5D%5D%3E */ %3C/style%3E %3Cg class='spinner' fill='none' fill-rule='evenodd'%3E %3Crect style='animation-delay: -0.375s;' width='22' height='64' x='117' fill='%23FFFFFF' rx='9'/%3E %3Crect style='animation-delay: -0.3125s;' width='22' height='64' x='164.526' y='13.213' fill='%23FFFFFF' transform='rotate(30 175.526 45.213)' rx='9'/%3E %3Crect style='animation-delay: -0.25s;' width='22' height='64' x='200.213' y='48.133' fill='%23FFFFFF' transform='rotate(60 211.213 80.133)' rx='9'/%3E %3Crect style='animation-delay: -0.1875s;' width='22' height='64' x='212.846' y='95.449' fill='%23FFFFFF' transform='rotate(90 223.846 127.45)' rx='9'/%3E %3Crect style='animation-delay: -0.125s;' width='22' height='64' x='200.138' y='144.202' fill='%23FFFFFF' transform='rotate(120 211.138 176.202)' rx='9'/%3E %3Crect style='animation-delay: -0.0625s;' width='22' height='64' x='164.824' y='178.864' fill='%23FFFFFF' transform='rotate(150 175.824 210.864)' rx='9'/%3E %3Crect style='animation-delay: 0s;' width='22' height='64' x='117' y='192' fill='%23FFFFFF' transform='rotate(180 128 224)' rx='9'/%3E %3Crect style='animation-delay: 0.0625s;' width='22' height='64' x='69.003' y='179.378' fill='%23FFFFFF' transform='rotate(-150 80.003 211.378)' rx='9'/%3E %3Crect style='animation-delay: 0.125s;' width='22' height='64' x='33.735' y='144.011' fill='%23FFFFFF' transform='rotate(-120 44.735 176.011)' rx='9'/%3E %3Crect style='animation-delay: 0.1875s;' width='22' height='64' x='21' y='96' fill='%23FFFFFF' transform='rotate(-90 32 128)' rx='9'/%3E %3Crect style='animation-delay: 0.25s;' width='22' height='64' x='33.926' y='48.133' fill='%23FFFFFF' transform='rotate(-60 44.926 80.133)' rx='9'/%3E %3Crect style='animation-delay: 0.3125s;' width='22' height='64' x='69.068' y='12.838' fill='%23FFFFFF' transform='rotate(-30 80.068 44.838)' rx='9'/%3E %3C/g%3E %3C/svg%3E"); --component-wlan-check-icon-normal-color: var(--axis-yellow-5); --component-wlan-lock-icon-normal-color: var(--axis-gray-3); --component-wlan-strength-icon-bar-full-normal-color: var(--axis-white); --component-wlan-strength-icon-bar-empty-normal-color: rgb(120, 120, 120); --component-editablelist-accent-state-active-color: var(--axis-blue-5); /** Controls **/ --liveview-menu-bgcolor: var(--axis-gray-9); --liveview-menu-border-color: var(--axis-gray-4); --liveview-menu-list-hover-bgcolor: var(--axis-gray-8); --liveview-menu-icon-state-inactive-color: var(--axis-gray-4); --liveview-menu-recordings-text-color: var(--axis-white); --liveview-menu-state-normal-color: var(--axis-white); --liveview-menu-video-settings-color: var(--axis-white); --liveview-menu-video-settings-bg-color: var(--axis-gray-10); --liveview-menu-video-settings-icon-color: var(--axis-yellow-4-brand); --liveview-menu-video-settings-icon-text-color: var(--axis-black); --liveview-menu-video-settings-on-off-checked-bg-color: var(--axis-yellow-4-brand); --source-icon-state-active-bg-color: var(--axis-yellow-4-brand); --source-icon-state-active-color: var(--axis-black); --source-icon-state-disabled-color: var(--axis-gray-7); --source-icon-state-disabled-fill: var(--axis-gray-8); --source-icon-state-normal-bg-color: var(--axis-gray-7); --source-icon-state-normal-color: var(--axis-white); --workspace-panel-group-border: var(--axis-gray-8); --workspace-panel-group-box-shadow: var(--axis-gray-11); /** Window content **/ --legal-page-div-color: var(--axis-gray-10); --legal-page-div-hover-color: var(--axis-white); --scrollbar-track-color: var(--axis-gray-7); --scrollbar-thumb-color: var(--axis-gray-9); --window-border-color: var(--axis-gray-4); /** Security **/ --security-tooltip-bg: var(--axis-gray-10); --security-tooltip-color: var(--axis-white); /** Special cases with no states **/ --help-menu-mobile-bg-color: var(--workspace-full-screen-state-normal-bg-color); --settings-menu-mobile-bg-color: var(--settings-menu-state-normal-bg-color); --user-menu-mobile-bg-color: var(--workspace-full-screen-state-normal-bg-color); --level-meter-background: var(--axis-gray-8); --level-meter-border: var(--axis-gray-9); --level-meter-audio-low: var(--axis-green); --level-meter-audio-middle: var(--axis-yellow-3); --level-meter-audio-high: var(--axis-red); --progress-bar-background-color: var(--axis-gray-8); --progress-bar-foreground-color: var(--axis-blue-4-brand); --svg-main-color: var(--axis-yellow-4-brand); --svg-contrast-color: rgba(var(--axis-black-values), 0.5); --svg-contrast-inverted-color: var(--axis-white); --svg-grid-color: var(--axis-yellow-4-brand); --lvc-button-background-color: var(--axis-gray-8); --lvc-button-color: var(--axis-white); --lvc-button-active-box-shadow-color: rgba(var(--axis-black-values), 0.1); --lvc-button-arrow-inactive-color: var(--axis-gray-9); --lvc-button-menu-open: var(--axis-blue-4-brand); --lvc-menu-box-shadow-color: rgba(var(--axis-black-values), 0.3); --audio-clips-expanded-arrow-color: var(--axis-blue-4-brand); --audio-clips-hover-bg-color: var(--axis-gray-10); --audio-clips-border-color: var(--axis-gray-8); --certificates-expanded-arrow-color: var(--axis-blue-4-brand); --settings-overlay-background-color: var(--settings-panel-state-normal-bg-color); --settings-overlay-header-color: var(--component-title-state-normal-color); --settings-overlay-header-border-color: var(--header-state-normal-border-color); --settings-overlay-guard-tour-nav-fill-color: var(--axis-gray-2); --settings-overlay-guard-tour-preset-counter-background-color: var(--axis-white); --settings-overlay-guard-tour-preset-counter-color: var(--axis-gray-8); --settings-overlay-guard-tour-preset-counter-highlighted-background-color: var(--axis-blue-4-brand); --settings-overlay-guard-tour-waiting-background-color: var(--settings-panel-state-normal-bg-color); --settings-overlay-guard-tour-preset-transition-spinner-background-color: var(--axis-gray-5); --settings-overlay-guard-tour-preset-transition-spinner-border-color: var(--axis-gray-7); --settings-overlay-guard-tour-preset-transition-spinner-arrow-background-color: var(--axis-gray-2); --settings-overlay-guard-tour-preset-transition-spinner-arrow-highlighted-background-color: var(--axis-blue-4-brand); --settings-overlay-guard-tour-recorded-recording-color: var(--axis-red); --password-hint-default-color: var(--axis-gray-7); --password-hint-hover-color: var(--axis-gray-4); --password-hint-active-color: var(--axis-blue-4-brand); --status-indicator-on-color: var(--axis-green); --status-indicator-off-color: var(--axis-red); --onvif-group-title-color: var(--axis-gray-5); --onvif-group-divider-color: var(--axis-gray-7); --onvif-configuration-hover-color: var(--axis-gray-9); --table-row-striped-color: var(--axis-gray-8); --table-row-border-color: var(--axis-gray-8); --table-row-hover-color: var(--axis-gray-8); --table-head-border-color: var(--axis-white); --imageList-background-color: var(--axis-gray-10); } /** * Main CSS file for ACA, Axis Communications. * * | _ | * . ,´:`, . Black Widow * \_\\_'_//_/ * /¯/(¯)\¯\ * | \` ´/ | * \ / */ /* @group Variables */ body { /* Borders */ --component-border-size: 1px; --page-section-border-size: 1px; --radio-border-size: 1px; /* Ensures that the border of radiobuttons stay at 1px width no matter the resolution */ --settings-menu-vertical-anchor-border-top: 1px solid var(--axis-gray-4); --settings-navbuttons-border-size: 1px; /* Spacings */ --panel-h-padding: 16px; --panel-v-padding: 0; --component-h-spacing: 10px; --component-right-spacing: 10px; --axis-logo-left: 16px; --axis-logo-top: 3px; --toggle-button-spacing: 40px; --input-padding: 4px; --expandablelist-spacing: 10px; /* Margins */ --carousel-page-margin: 3px; --component-left-margin: 4px; --component-top-margin: 4px; --component-icon-top-margin: 4px; --component-icon-bottom-margin: 8px; --video-feedback-bottom-margin: 4px; --video-outline-width: 3px; --video-top-margin: 8px; --video-bottom-margin: 8px; --settings-menu-top-margin: 4px; --settings-menu-right-margin: 1px; --workspace-component-bottom-margin: 10px; --workspace-title-underline-margin-top: 4px; --workspace-title-underline-margin-bottom: 8px; --workspace-title-margin-top: 4px; --window-content-h1-margin: 32px 0 16px; --window-content-h2-margin: 16px 0 16px; --multicolumn-grouping-v-margin: 8px; --component-label-margin-bottom: 4px; /* Paddings */ --help-padding: 16px; --settings-menu-horizontal-padding: 10px; --settings-menu-vertical-anchor-padding: 11px 16px; --settings-panel-top-padding: 12px; --toggle-button-left-padding: 10px; --toggle-button-right-padding: 10px; --video-controls-input-horizontal-padding: 5px; --video-controls-input-vertical-padding: 2px; /* Shadows */ --modal-box-shadow: 0 4px 12px; /* Fonts */ --base-font: arial, sans-serif; --input-base-font: arial, sans-serif; /* Font Sizes */ --header-h1-size: 12px; --settings-font-size: 11px; --component-label-font-size: 11px; --settings-small-size: 10px; --video-controls-size: 11px; --settings-menu-font-size: 12px; --workspace-h1-size: 14px; --header-back-button-size: 12px; --component-title-font-size: 12px; --list-font-size: 10px; --wizard-h1-size: 32px; --wizard-h3-size: 11px; --window-content-h1-font-size: 19px; --window-content-h2-font-size: 16px; --dialog-content-font-size: 12px; /* Component Specific Measurements */ --component-list-line-height: 20px; --component-list-padding-and-border: 2px; --dialog-content-line-height: 14px; /* Component Heights */ --base-component-height: 30px; --list-component-height: 112px; /* Sizes */ --arrow-pos: 50%; --arrow-size: 7px; --button-dialog-height: 28px; --button-dialog-min-width: 80px; --button-adjacent-width: 24px; --button-min-height: 22px; --button-min-width: 100px; --button-control-height: 20px; --button-icon-width: 14px; --button-icon-height: 14px; --controls-bottom-height: 26px; --one-pixel: 1px; --page-footer-height: 20px; --page-header-height: 40px; --page-banner-height: 32px; --page-settings-height: 224px; --setting-min-width: 60px; --settings-compartment-width: 320px; --settings-compartment-narrow-width: 248px; --settings-navigate-button-width: 38px; /* 1.250; */ --settings-width: calc((var(--settings-compartment-width) * 4) + 4); --settings-menu-item-height: 35px; --settings-menu-height: calc(var(--settings-menu-item-height) + var(--settings-menu-top-margin)); --settings-menu-accent-height: 3px; --settings-menu-active-accent-height: 4px; --settings-one-compartment-narrow-width: calc(var(--settings-compartment-narrow-width) + (2 * var(--settings-navigate-button-width))); --settings-one-compartment-width: calc(var(--settings-compartment-width) + (2 * var(--settings-navigate-button-width))); --textarea-height: 44px; --carousel-page-width: 8px; --carousel-page-height: 8px; --component-multiInput-height: var(--page-settings-height); --settings-panel-width: var(--settings-compartment-width); --settings-panel-narrow-width: var(--settings-compartment-narrow-width); --workspace-panel-width: var(--settings-panel-width); --workspace-panel-narrow-width: var(--settings-compartment-narrow-width); --workspace-compartment-narrow-width: var(--settings-compartment-narrow-width); --workspace-compartment-one-width: var(--settings-one-compartment-width); --workspace-compartment-two-width: 656px; --component-icon-img-height: 24px; --component-icon-img-container-height: calc(var(--component-icon-img-height) + 8px); --component-icon-width: 33.33%; --workspace-title-underline-height: 3px; --workspace-title-underline-width: 128px; --workspace-top: var(--page-header-height); --workspace-bottom: calc(var(--page-settings-height) + var(--page-footer-height) - 4px); --workspace-smallscreen-top: var(--page-header-height); --workspace-smallscreen-bottom: 0; --workspace-smallscreen-title-margin: -8px; --workspace-tinyscreen-title-margin: 16px; --wizard-step-content-width: 272px; --wizard-step-buttonrow-height: 50px; --radio-button-size: 14px; --spinner-size: 20px; --input-line-height: 12px; --window-navigation-button-height: 24px; --window-navigation-button-width: 25px; --navigator-vp-state-normal-border-size: 2px; --navigator-icon-state-normal-padding: 2px; --navigator-icon-state-normal-maxsize: 30px; --popup-max-height: 60vh; --popup-min-height: calc(var(--page-settings-height) - var(--page-footer-height)); --popup-compartments-max-height: 500px; --popup-bottom: var(--window-navigation-button-height); --source-select-label-max-width: 150px; --lvc-verticalMenu-bottom: 41px; --lvc-toggle-button-line-height: 40px; --lvc-ie11-extra-top-padding: 2px; /* Sizes for components overriden in special functionalities/pages */ /* SVG-drawer related sizes */ --resize-handle-stroke-width: 16px; /* Various sizes */ --base-contextual-select-component-button-width: 24px; --settings-overlay-height: calc(var(--page-settings-height) + var(--settings-menu-item-height) + var(--page-footer-height) - var(--settings-menu-height)); --settings-overlay-spacing: 10px; --settings-overlay-control-spacing: var(--settings-overlay-spacing); --settings-overlay-guard-tour-carousel-font-size: 10px; --settings-overlay-guard-tour-carousel-nav-margin: 20px; --settings-overlay-guard-tour-compartment-width: 100px; --settings-overlay-guard-tour-component-spacing: 8px; --settings-overlay-guard-tour-component-size: 70px; --settings-overlay-guard-tour-component-narrow-size: calc(var(--settings-overlay-guard-tour-component-size) - (2 * var(--settings-overlay-guard-tour-component-spacing))); --settings-overlay-guard-tour-component-counter-height: 7px; --settings-overlay-guard-tour-preset-step-icon-spacing: 5px; --settings-overlay-guard-tour-component-counter-vertical-offset: calc(var(--settings-overlay-guard-tour-component-counter-height) + var(--settings-overlay-guard-tour-preset-step-icon-spacing)); /* I/O ports */ --lvc-icon-height: 20px; /* Temporary fix for IE11, done in story #1057. */ /* Shall be removed together with all other IE11-specific styles in story #1093. */ --lvc-icon-width: 25px; /* Carousel global variables */ --carousel-narrow-width-compartment: var(--settings-compartment-narrow-width); /* Images */ --source-select-toggle-up-bg-img: url("data:image/svg+xml,%3C!-- Created with Inkscape (http://www.inkscape.org/) --%3E %3Csvg focusable='false' id='svg2820' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns='http://www.w3.org/2000/svg' height='16px' width='16px' version='1.1' xmlns:cc='http://creativecommons.org/ns%23' xmlns:dc='http://purl.org/dc/elements/1.1/'%3E %3Cdefs id='defs2822'%3E%3C/defs%3E %3Cmetadata id='metadata2825'%3E %3Crdf:RDF%3E %3Ccc:Work rdf:about=''%3E %3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E %3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage'/%3E %3Cdc:title/%3E %3C/cc:Work%3E %3C/rdf:RDF%3E %3C/metadata%3E %3Cg id='layer1'%3E %3Cpath id='path2832' fill='%23383838' d='m0,11.5,8-7,8,7-16,0z'/%3E %3C/g%3E %3C/svg%3E"); --source-select-toggle-down-bg-img: url("data:image/svg+xml,%3C!-- Created with Inkscape (http://www.inkscape.org/) --%3E %3Csvg focusable='false' id='svg2820' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns='http://www.w3.org/2000/svg' height='16px' width='16px' version='1.1' xmlns:cc='http://creativecommons.org/ns%23' xmlns:dc='http://purl.org/dc/elements/1.1/'%3E %3Cdefs id='defs2822'%3E%3C/defs%3E %3Cmetadata id='metadata2825'%3E %3Crdf:RDF%3E %3Ccc:Work rdf:about=''%3E %3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E %3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage'/%3E %3Cdc:title/%3E %3C/cc:Work%3E %3C/rdf:RDF%3E %3C/metadata%3E %3Cg id='layer1'%3E %3Cpath id='path2832' fill='%23383838' d='m0,4.5,8,7,8-7-16,0z'/%3E %3C/g%3E %3C/svg%3E"); --source-select-list-toggle-up-bg-img: url("data:image/svg+xml,%3C!-- Created with Inkscape (http://www.inkscape.org/) --%3E %3Csvg focusable='false' id='svg2820' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns='http://www.w3.org/2000/svg' height='16px' width='16px' version='1.1' xmlns:cc='http://creativecommons.org/ns%23' xmlns:dc='http://purl.org/dc/elements/1.1/'%3E %3Cdefs id='defs2822'%3E%3C/defs%3E %3Cmetadata id='metadata2825'%3E %3Crdf:RDF%3E %3Ccc:Work rdf:about=''%3E %3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E %3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage'/%3E %3Cdc:title/%3E %3C/cc:Work%3E %3C/rdf:RDF%3E %3C/metadata%3E %3Cg id='layer1'%3E %3Cpath id='path2832' fill='%23383838' d='m0,11.5,8-7,8,7-16,0z'/%3E %3C/g%3E %3C/svg%3E"); --source-select-list-toggle-down-bg-img: url("data:image/svg+xml,%3C!-- Created with Inkscape (http://www.inkscape.org/) --%3E %3Csvg focusable='false' id='svg2820' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns='http://www.w3.org/2000/svg' height='16px' width='16px' version='1.1' xmlns:cc='http://creativecommons.org/ns%23' xmlns:dc='http://purl.org/dc/elements/1.1/'%3E %3Cdefs id='defs2822'%3E%3C/defs%3E %3Cmetadata id='metadata2825'%3E %3Crdf:RDF%3E %3Ccc:Work rdf:about=''%3E %3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E %3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage'/%3E %3Cdc:title/%3E %3C/cc:Work%3E %3C/rdf:RDF%3E %3C/metadata%3E %3Cg id='layer1'%3E %3Cpath id='path2832' fill='%23383838' d='m0,4.5,8,7,8-7-16,0z'/%3E %3C/g%3E %3C/svg%3E"); --toggle-up-bg-img: url("data:image/svg+xml,%3C!-- Created with Inkscape (http://www.inkscape.org/) --%3E %3Csvg focusable='false' id='svg2820' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns='http://www.w3.org/2000/svg' height='16px' width='16px' version='1.1' xmlns:cc='http://creativecommons.org/ns%23' xmlns:dc='http://purl.org/dc/elements/1.1/'%3E %3Cdefs id='defs2822'%3E%3C/defs%3E %3Cmetadata id='metadata2825'%3E %3Crdf:RDF%3E %3Ccc:Work rdf:about=''%3E %3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E %3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage'/%3E %3Cdc:title/%3E %3C/cc:Work%3E %3C/rdf:RDF%3E %3C/metadata%3E %3Cg id='layer1'%3E %3Cpath id='path2832' fill='%23383838' d='m0,11.5,8-7,8,7-16,0z'/%3E %3C/g%3E %3C/svg%3E"); --toggle-down-bg-img: url("data:image/svg+xml,%3C!-- Created with Inkscape (http://www.inkscape.org/) --%3E %3Csvg focusable='false' id='svg2820' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns='http://www.w3.org/2000/svg' height='16px' width='16px' version='1.1' xmlns:cc='http://creativecommons.org/ns%23' xmlns:dc='http://purl.org/dc/elements/1.1/'%3E %3Cdefs id='defs2822'%3E%3C/defs%3E %3Cmetadata id='metadata2825'%3E %3Crdf:RDF%3E %3Ccc:Work rdf:about=''%3E %3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E %3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage'/%3E %3Cdc:title/%3E %3C/cc:Work%3E %3C/rdf:RDF%3E %3C/metadata%3E %3Cg id='layer1'%3E %3Cpath id='path2832' fill='%23383838' d='m0,4.5,8,7,8-7-16,0z'/%3E %3C/g%3E %3C/svg%3E"); /* Radius */ --default-radius: 4px; --video-controls-radius: 2px; --component-border-radius: 0; --button-dialog-radius: 2px; /* Z-index */ --lvc-wrap-zindex: 11; --popup-z-index-start: 300; --settings-button-zindex: 12; --settings-overlay-z-index: calc(var(--popup-z-index-start) - 50); --video-feedback-zindex: 1000; --notifications-z-index: 1000; /* Animation */ --swift-out-transition: cubic-bezier(0.55, 0, 0.1, 1); } /* @end */ /* @group Mixins */ /** * Mixins for general responsiveness * * em units are used for media queries to keep browser compatibility * See https://zellwk.com/blog/media-query-units/ for more information. */ /* 767px */ /* 768px */ /* 1025px */ /* 700px, 768px */ /* 396px */ /* 384px, 716px */ /* 384px */ /* 384px */ /* 396px, 396px */ /* 716px, 508px */ /* 716px */ .expand-collapse-arrow--before::before, .expand-collapse-arrow--after::after { --expand-collapse-arrow-size: 8px; --expand-collapse-arrow-size-divider: 2; --expand-collapse-arrow-rotation: 135deg; border-right: calc(var(--expand-collapse-arrow-size) / 4) solid currentColor; border-top: calc(var(--expand-collapse-arrow-size) / 4) solid currentColor; content: ''; display: inline-block; height: var(--expand-collapse-arrow-size); margin-top: calc((var(--expand-collapse-arrow-size) / var(--expand-collapse-arrow-size-divider)) * -1); pointer-events: none; transform: rotateZ(var(--expand-collapse-arrow-rotation)); width: var(--expand-collapse-arrow-size); } .list-control-arrow::after, .btn-control.has-menu::after, .btn.has-menu::after { border: calc(11px / 2) solid transparent; border-bottom-color: currentColor; border-top-color: currentColor; border-top-width: 0; content: ''; display: inline-block; height: 0; margin-left: 5px; margin-top: calc(5px / -2); overflow: hidden; white-space: nowrap; width: 0; } .list-control-arrow.selected::after, .btn-control.has-menu.selected::after, .btn.has-menu.selected::after { border-bottom-width: 0; border-top-width: calc(11px / 2); } /* @end */ /* @group Reset & default body styles */ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { border: 0; font: inherit; font-size: 100%; margin: 0; padding: 0; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: none; } table { border-collapse: collapse; border-spacing: 0; } input::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0; } /** * PLEASE NOTE * This is more or less a temporary file for stuff that originated from * webapp/theme. * Action to move rules to more permanent places needed. * * a --- Controversial to have it global? */ a { text-decoration: none; } /* @end */ /* @group Layout */ /* General layout rules */ html { box-sizing: border-box; height: 100%; } /* stylelint-disable-next-line selector-no-universal */ *, ::after, ::before { box-sizing: inherit; } body { background-color: var(--body-state-normal-bg-color); font-family: var(--base-font); line-height: 1.3; overflow: auto; touch-action: none; } button, input, select, textarea { font-family: inherit; } svg { fill: currentColor; } .noscript-content { display: table; float: none; font-weight: bold; line-height: 160%; margin-left: auto; margin-right: auto; position: relative; top: 30%; width: auto; } .page-wrap { /* min-height is needed in case the dialog is nested inside * of .page-wrap, e.g., autofocus dialog */ } .page-wrap.settings .peripheral-wrap { min-height: calc(var(--page-settings-height) + var(--page-footer-height)); } .page-wrap.view .peripheral-wrap { display: block } .page-wrap.view .peripheral-wrap .settings-menu { opacity: 0; pointer-events: none; } .page-wrap.view .peripheral-wrap .settings-popup { opacity: 0; } .page-wrap.view .peripheral-wrap .overlay { opacity: 0; } .workspace-wrap { background-color: var(--workspace-state-normal-bg-color); bottom: var(--workspace-bottom); display: none; left: 0; -webkit-overflow-scrolling: touch; overflow-x: hidden; overflow-y: auto; padding: 32px 0; position: absolute; right: 0; text-align: center; top: var(--workspace-top) } @media only handheld and (max-width: 44.75em),screen and (max-height: 31.75em) { .workspace-wrap { bottom: var(--workspace-smallscreen-bottom); top: var(--workspace-smallscreen-top); z-index: 300 } } .workspace-wrap.active { display: block; } .workspace-wrap .workspace-panel { font-size: 12px } .workspace-wrap .workspace-panel.active { display: inline-block; } .peripheral-wrap { bottom: 0; left: 0; position: fixed; right: 0; transition: transform 200ms; z-index: 11 } .peripheral-wrap .settings-menu { transition: opacity 200ms; } .peripheral-wrap .settings-panel { transition: opacity 200ms; } .peripheral-wrap .settings-popup { transition: opacity 200ms; } .peripheral-wrap .overlay { transition: opacity 200ms; } [data-theme='dark'] .waiting { --spinner-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E %3Cstyle%3E /* %3C!%5BCDATA%5B */ @keyframes spinner-fade %7B0%25 %7Bopacity: 1 %7D 80%25 %7Bopacity: 0 %7D 100%25 %7Bopacity: 0 %7D %7D g.spinner rect %7Bwill-change: opacity; opacity: 0; animation: spinner-fade 0.75s linear infinite;%7D /* %5D%5D%3E */ %3C/style%3E %3Cg class='spinner' fill='none' fill-rule='evenodd'%3E %3Crect style='animation-delay: -0.375s;' width='22' height='64' x='117' fill='%23FFFFFF' rx='9'/%3E %3Crect style='animation-delay: -0.3125s;' width='22' height='64' x='164.526' y='13.213' fill='%23FFFFFF' transform='rotate(30 175.526 45.213)' rx='9'/%3E %3Crect style='animation-delay: -0.25s;' width='22' height='64' x='200.213' y='48.133' fill='%23FFFFFF' transform='rotate(60 211.213 80.133)' rx='9'/%3E %3Crect style='animation-delay: -0.1875s;' width='22' height='64' x='212.846' y='95.449' fill='%23FFFFFF' transform='rotate(90 223.846 127.45)' rx='9'/%3E %3Crect style='animation-delay: -0.125s;' width='22' height='64' x='200.138' y='144.202' fill='%23FFFFFF' transform='rotate(120 211.138 176.202)' rx='9'/%3E %3Crect style='animation-delay: -0.0625s;' width='22' height='64' x='164.824' y='178.864' fill='%23FFFFFF' transform='rotate(150 175.824 210.864)' rx='9'/%3E %3Crect style='animation-delay: 0s;' width='22' height='64' x='117' y='192' fill='%23FFFFFF' transform='rotate(180 128 224)' rx='9'/%3E %3Crect style='animation-delay: 0.0625s;' width='22' height='64' x='69.003' y='179.378' fill='%23FFFFFF' transform='rotate(-150 80.003 211.378)' rx='9'/%3E %3Crect style='animation-delay: 0.125s;' width='22' height='64' x='33.735' y='144.011' fill='%23FFFFFF' transform='rotate(-120 44.735 176.011)' rx='9'/%3E %3Crect style='animation-delay: 0.1875s;' width='22' height='64' x='21' y='96' fill='%23FFFFFF' transform='rotate(-90 32 128)' rx='9'/%3E %3Crect style='animation-delay: 0.25s;' width='22' height='64' x='33.926' y='48.133' fill='%23FFFFFF' transform='rotate(-60 44.926 80.133)' rx='9'/%3E %3Crect style='animation-delay: 0.3125s;' width='22' height='64' x='69.068' y='12.838' fill='%23FFFFFF' transform='rotate(-30 80.068 44.838)' rx='9'/%3E %3C/g%3E %3C/svg%3E"); } [data-theme='light'] .waiting { --spinner-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E %3Cstyle%3E /* %3C!%5BCDATA%5B */ @keyframes spinner-fade %7B0%25 %7Bopacity: 1 %7D 80%25 %7Bopacity: 0 %7D 100%25 %7Bopacity: 0 %7D %7D g.spinner rect %7Bfill: currentColor; will-change: opacity; opacity: 0; animation: spinner-fade 0.75s linear infinite;%7D /* %5D%5D%3E */ %3C/style%3E %3Cg class='spinner' fill='none' fill-rule='evenodd'%3E %3Crect style='animation-delay: -0.375s;' width='22' height='64' x='117' rx='9'/%3E %3Crect style='animation-delay: -0.3125s;' width='22' height='64' x='164.526' y='13.213' transform='rotate(30 175.526 45.213)' rx='9'/%3E %3Crect style='animation-delay: -0.25s;' width='22' height='64' x='200.213' y='48.133' transform='rotate(60 211.213 80.133)' rx='9'/%3E %3Crect style='animation-delay: -0.1875s;' width='22' height='64' x='212.846' y='95.449' transform='rotate(90 223.846 127.45)' rx='9'/%3E %3Crect style='animation-delay: -0.125s;' width='22' height='64' x='200.138' y='144.202' transform='rotate(120 211.138 176.202)' rx='9'/%3E %3Crect style='animation-delay: -0.0625s;' width='22' height='64' x='164.824' y='178.864' transform='rotate(150 175.824 210.864)' rx='9'/%3E %3Crect style='animation-delay: 0s;' width='22' height='64' x='117' y='192' transform='rotate(180 128 224)' rx='9'/%3E %3Crect style='animation-delay: 0.0625s;' width='22' height='64' x='69.003' y='179.378' transform='rotate(-150 80.003 211.378)' rx='9'/%3E %3Crect style='animation-delay: 0.125s;' width='22' height='64' x='33.735' y='144.011' transform='rotate(-120 44.735 176.011)' rx='9'/%3E %3Crect style='animation-delay: 0.1875s;' width='22' height='64' x='21' y='96' transform='rotate(-90 32 128)' rx='9'/%3E %3Crect style='animation-delay: 0.25s;' width='22' height='64' x='33.926' y='48.133' transform='rotate(-60 44.926 80.133)' rx='9'/%3E %3Crect style='animation-delay: 0.3125s;' width='22' height='64' x='69.068' y='12.838' transform='rotate(-30 80.068 44.838)' rx='9'/%3E %3C/g%3E %3C/svg%3E"); } .waiting { background-image: var(--spinner-icon); background-position: 50% 50%; background-repeat: no-repeat; background-size: var(--spinner-size) var(--spinner-size); text-align: center } .waiting.multipleInstall { background-image: none; } .waiting::after { bottom: 52%; color: var(--workspace-h1-state-normal-color); content: attr(data-content); left: 0; position: absolute; right: 0; white-space: pre-line; } .arrow-marker.arrow-marker--top::before.center.arrow-marker--top::before, .arrow-marker.arrow-marker--bottom::after.center.arrow-marker--top::before { left: 50%; transform: translateX(-50%); } .vertical-menu { background-color: var(--component-list-state-normal-bg-color); border-bottom: 2px solid var(--axis-gray-7); border-top: 2px solid var(--axis-gray-7); font-size: 11px; position: absolute; transition: opacity 250ms; z-index: 300 } .vertical-menu.waiting { min-height: 40px; min-width: 80px; } .vertical-menu a { background-color: var(--settings-menu-vertical-anchor-bg-color); border-top: var(--settings-menu-vertical-anchor-border-top); cursor: pointer; display: block; padding: var(--settings-menu-vertical-anchor-padding) } .vertical-menu a:first-child { border-top: none; } .vertical-menu a:hover { background-color: var(--axis-gray-3); } @media only screen and (max-width: 24.75em),screen and (max-height: 24.75em) { .vertical-menu { border: 0 } .vertical-menu.menu-dispostion-above::after, .vertical-menu.menu-dispostion-above::before, .vertical-menu.menu-dispostion-below::after, .vertical-menu.menu-dispostion-below::before { display: none; } } @media screen and (max-width: 47.94em) { .hide-mobile { display: none !important; } } .full-screen-mode { /** * SASS apparently doesn't allow multiple pseudoclasses to be listed per style * declaration. * If possible refactor once we have migrated to PostCSS */ } .full-screen-mode:-webkit-full-screen { /* Necessary to specifically target Chrome */ /* stylelint-disable-line selector-no-vendor-prefix */ height: 100% !important; width: 100% !important; } .full-screen-mode:-ms-fullscreen { /* Necessary to specifically target MS browsers */ /* stylelint-disable-line selector-no-vendor-prefix */ height: 100% !important; width: 100% !important; } .full-screen-mode axis-video-player { /** * Special case: when using fullscreen we don't want the videoplayer to use * any inherited settings (should use full width/height of screen) */ display: block !important; height: 100% !important; width: 100% !important; } .video-wrap:-ms-fullscreen img { /* Necessary to specifically target MS browsers */ /* stylelint-disable-line selector-no-vendor-prefix */ position: fixed; } .video-wrap:full-screen-mode img { /* Necessary to specifically target MS browsers */ /* stylelint-disable-line selector-no-vendor-prefix */ position: fixed; } /* Remove controls for video tag */ video::-webkit-media-controls-enclosure { display: none !important; } .header-wrap { background-color: var(--header-state-normal-bg-color); border-bottom: var(--page-section-border-size) solid var(--header-state-normal-border-color); height: var(--page-header-height); left: 0; position: fixed; right: 0; top: 0; z-index: 10000; /* This rule applies only when Wizard page is active. */ } /* Product Name */ .header-wrap .header__title { align-items: center; color: var(--header-state-normal-color); display: flex; flex-direction: column; font-size: var(--header-h1-size); font-weight: bold; justify-content: center; line-height: 1; padding: 0 5px 0 120px; width: 100%; } @media screen and (max-width: 47.94em) { .header-wrap .header__title .title__full-name { display: none } } @media screen and (min-width: 48em) { .header-wrap .header__title .title__short-name { display: none } } /* Just above `windowView`s. Makes drop-down menus from `.header-wrap` appear above `windowView`s. */ .header-wrap .header { align-items: center; display: flex; height: 100%; justify-content: space-between; margin: 0; } /* Logo */ .header-wrap .header > svg { color: var(--axis-logo-state-normal-color); height: 34px; left: 16px; position: absolute; top: 3px; width: 96px; } /* Remove the stroke */ .header-wrap .header > svg path { stroke: none; } .header-wrap .header button span.icon { display: block; height: 16px; width: 16px; } .header-wrap .header button span.icon svg { height: 100%; width: 100%; } .header-wrap .header .controls { flex: 0 0 auto; margin-right: 16px; } .header-wrap .header .controls .control { display: inline-block; position: relative; } .header-wrap .header .controls .vertical-menu { bottom: auto; margin-top: 14px; position: absolute; right: 0; top: 100%; } .header-wrap .header .controls .vertical-menu .cell.pointer { width: 100%; } .header-wrap .header .controls .vertical-menu::before { left: auto; right: 9px; } .header-wrap .header .controls .vertical-menu.help-menu, .header-wrap .header .controls .vertical-menu.user-menu { min-width: 160px; } @media only handheld and (max-width: 44.75em),screen and (max-height: 31.75em) { .header-wrap .header .controls.hide-on-mobile { display: none } } .header-wrap .header .controls .userMenu .vertical-menu { background-color: var(--liveview-menu-bgcolor); box-shadow: 0 4px 16px var(--component-popup-box-shadow-color); color: var(--liveview-menu-state-normal-color); } .header-wrap .header .controls .userMenu .user-panel-content { padding: 15px 0 0 20px; } .header-wrap .header .controls .userMenu .user-panel-content .user-panel-info { margin-top: 15px; } .header-wrap .header .controls .userMenu .user-panel-content .user-panel-label { color: var(--component-title-state-normal-color); font-size: 11px; font-weight: bold; padding-bottom: 2px; } .header-wrap .header .controls .userMenu .user-panel-login { margin: 20px 0; text-align: center; } @media only screen and (max-width: 24.75em),screen and (max-height: 24.75em) { .header-wrap .header .controls .userMenu .maximize-on-mobile { background-color: var(--liveview-menu-bgcolor) !important } } .header-wrap .header .back-btn { background-color: var(--settings-toggle-state-normal-bg-color); border-bottom-left-radius: var(--default-radius); color: var(--settings-toggle-state-normal-color); display: none; font-size: var(--header-back-button-size); font-weight: bold; position: absolute; right: 0; top: 0; } .header-wrap .header .back-btn span { line-height: var(--page-header-height); padding: 0 16px; } @media only handheld and (max-width: 44.75em),screen and (max-height: 31.75em) { .header-wrap .header .back-btn.visible { display: block } } /* It's then toggled through JS. */ .header-wrap .header.wizard .header__title { padding: 0 5px; } .header-wrap .header.wizard .controls { display: none; } .info-banner { position: fixed; right: 16px; top: calc(var(--page-header-height) + 16px); width: 300px; z-index: 600; } [data-theme='light'] .videocontainer-wrap { --navigator-state-normal-bg-color: rgba(var(--axis-white-values), 0.4); --navigator-state-normal-border-color: var(--axis-black); --navigator-vp-state-normal-bg-color: transparent; --navigator-vp-state-normal-border-color: var(--axis-yellow-4-brand); --navigator-icon-state-normal-color: var(--axis-yellow-4-brand); } [data-theme='dark'] .videocontainer-wrap { --navigator-state-normal-bg-color: rgba(var(--axis-white-values), 0.4); --navigator-state-normal-border-color: var(--axis-black); --navigator-vp-state-normal-bg-color: transparent; --navigator-vp-state-normal-border-color: var(--axis-yellow-4-brand); --navigator-icon-state-normal-color: var(--axis-yellow-4-brand); } .videocontainer-wrap { left: 0; position: absolute; right: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .videocontainer-wrap[disabled] { display: none; } .page-wrap .videocontainer-wrap { bottom: calc(var(--page-settings-height) + var(--page-footer-height) + var(--video-outline-width) * 2); top: calc(var(--page-header-height) + var(--page-banner-height) + var(--video-top-margin) + var(--video-outline-width)); } .view .videocontainer-wrap { bottom: calc(var(--settings-menu-item-height) + var(--video-outline-width) * 2 + var(--video-bottom-margin)); top: calc(var(--page-header-height) + var(--page-banner-height) + var(--video-top-margin) + var(--video-outline-width)); } .videocontainer-wrap .videocontainer { background-color: var(--axis-black); max-height: 100%; max-width: 100%; min-height: 80px; min-width: 80px; outline: 3px solid #000; overflow: hidden; position: absolute; } .videocontainer-wrap .videocontainer .video { height: 100%; max-height: 100%; max-width: 100%; } .videocontainer-wrap .videocontainer .middle { bottom: 0; left: 0; margin: auto; position: absolute; right: 0; top: 0; } .videocontainer-wrap .videocontainer.pixel-mapping > .video-wrap { display: block; overflow: visible; position: absolute; text-align: left; } .videocontainer-wrap .video-wrap { display: flex; justify-content: center; overflow: hidden; position: relative; text-align: center } .videocontainer-wrap .video-wrap.scrollable { cursor: pointer; } .videocontainer-wrap .video-wrap.scrollable:active { cursor: move; } .videocontainer-wrap .videoplayer-wrap { align-self: center; } .videocontainer-wrap .snap-svg, .videocontainer-wrap axis-video-player { bottom: 0; left: 0; margin: auto; right: 0; top: 0; } .videocontainer-wrap axis-video-player > .player { transition: none; } .videocontainer-wrap axis-video-player { height: 100%; } .videocontainer-wrap .snap-svg { height: 100%; position: absolute; width: 100%; z-index: 1 } .videocontainer-wrap .snap-svg.inactive { pointer-events: none; } .videocontainer-wrap .navigator { background-color: var(--navigator-state-normal-bg-color); bottom: 40px; display: none; opacity: 1; outline: 1px solid var(--navigator-state-normal-border-color); overflow: hidden; position: absolute; right: 10px; transition: opacity 250ms ease-in; z-index: 2 } .videocontainer-wrap .navigator.fadeout { opacity: 0.2; } .videocontainer-wrap .navigator.active { display: block; } .videocontainer-wrap .navigator .navigator-viewport { align-items: center; background-color: var(--navigator-vp-state-normal-bg-color); border: var(--navigator-vp-state-normal-border-size) solid var(--navigator-vp-state-normal-border-color); box-sizing: border-box; color: var(--navigator-icon-state-normal-color); cursor: pointer; display: flex; justify-content: center; left: 0; outline: 320px solid var(--navigator-state-normal-bg-color); padding: var(--navigator-icon-state-normal-padding); position: absolute; top: 0 } .videocontainer-wrap .navigator .navigator-viewport:active { cursor: move; } .videocontainer-wrap .navigator .navigator-viewport svg { flex: 1 1 var(--navigator-icon-state-normal-maxsize); height: 100%; max-height: var(--navigator-icon-state-normal-maxsize); max-width: var(--navigator-icon-state-normal-maxsize); width: 100%; } .videocontainer-wrap .navigator .fisheye-navigator-viewport { border: none; } .videocontainer-wrap .navigator .fisheye-navigator-viewport svg { position: absolute; } .videocontainer-wrap .button-controls { --liveview-controls-pixel-counter-state-normal-bg-color: var(--axis-gray-5); background-color: var(--liveview-controls-pixel-counter-state-normal-bg-color); border-radius: var(--video-controls-radius); display: inline-block; font-size: var(--video-controls-size); margin: 0 8px; padding: 2px 4.5px; vertical-align: top } .videocontainer-wrap .button-controls label { display: inline; } .videocontainer-wrap .button-controls input { border-radius: var(--video-controls-radius); box-shadow: none; display: inline; font-size: var(--video-controls-size); padding: var(--video-controls-input-vertical-padding) var(--video-controls-input-horizontal-padding); } /* TODO: create _svg.scss? (STORY) */ .videocontainer-wrap g[data-id]:active { opacity: 0.5; } .videocontainer-wrap g[data-id]:active.transparent { opacity: 0.15; } /* Semitransparent overlay which contains play icon, and shown when videoplayer is paused. It is placed on top of the videoplayer container, and gets its size and coordinates dynamically in videoContainerView.js */ #overlay { --play-icon-height: 80px; --play-icon-width: 80px; --play-icon-smallscreen-height: 40px; --play-icon-smallscreen-width: 40px; background-color: rgba(var(--axis-black-values), 0.5); max-height: 100%; max-width: 100%; min-height: 80px; min-width: 80px; overflow: hidden; position: absolute; z-index: 11 } #overlay.invisible { display: none; } /* Play icon container. Horizontally and vertically centered inside the video container overlay (#overlay). */ #overlay div { left: calc(50% - var(--play-icon-width) / 2); position: absolute; top: calc(calc(50% - var(--play-icon-height) / 2) - 12px) } @media screen and (max-width: 47.94em) { #overlay div { left: calc(50% - var(--play-icon-smallscreen-width) / 2); top: calc(calc(50% - var(--play-icon-smallscreen-height) / 2) - 12px) } } #overlay div svg { cursor: pointer; height: var(--play-icon-height); width: var(--play-icon-width) } @media screen and (max-width: 47.94em) { #overlay div svg { height: var(--play-icon-smallscreen-height); width: var(--play-icon-smallscreen-width) } } .page-wrap .videocontainer-wrapper-no-header { top: calc(var(--video-top-margin) + var(--video-outline-width)); } .feedback { --feedback-info-h-padding: 10px; --feedback-info-v-padding: 12px; --feedback-padding: 7px; --feedback-text-size: 11px; --feedback-text-info-size: 12px; --feedback-icon-width: 35px; --feedback-history-width: 46px; --feedback-height: 34px; --feedback-margin: 16px 16px 0 0; --feedback-gap-spacing: 1px; --feedback-close-state-hover-bg-color: var(--axis-blue-4-brand); --feedback-history-system-state-normal-color: var(--axis-white); --feedback-info-state-normal-bg-color: rgba(var(--axis-black-values), 0.5); --feedback-info-system-state-normal-bg-color: rgba(var(--axis-gray-3-values), 0.6); --feedback-state-normal-bg-color: rgba(var(--axis-black-values), 0.7); --feedback-state-normal-color: var(--axis-gray-1); --feedback-system-state-normal-bg-color: rgba(var(--axis-gray-5-values), 0.65); --feedback-system-state-normal-color: var(--axis-gray-9); color: var(--feedback-state-normal-color); margin: var(--feedback-margin); position: fixed; right: 0; top: calc(var(--page-header-height) + var(--video-feedback-bottom-margin)); z-index: var(--video-feedback-zindex); } .feedback .feedback-list { text-align: right; vertical-align: top } .feedback .feedback-list:empty { display: none; } .feedback .feedback-history-button { background-color: var(--feedback-state-normal-bg-color); color: inherit; display: none; /* FUTURE:HISTORY Re-enable once history list is implemented */ float: right; font-size: 0; /* avoid spacing between elements */ height: var(--feedback-height); margin-left: var(--feedback-gap-spacing); text-align: center; width: var(--feedback-history-width); } .feedback .feedback-history-button svg { height: 20px; left: auto; transform: translateY(-50%) /* Icon */ } .feedback .feedback-history-button svg:first-child { width: 20px; } .feedback .feedback-history-button svg { /* Arrow */ } .feedback .feedback-history-button svg:last-child { width: 10px; } /* Special case for Live View page, */ /* feedback should be inside videocontainer */ .videocontainer .feedback { position: absolute; top: 0; } .alert { --alert-max-width: calc(var(--settings-compartment-narrow-width) - var(--feedback-history-width)); display: flex; flex-wrap: wrap; width: var(--alert-max-width) } .alert > * { /* Special case */ /* stylelint-disable-line selector-no-universal */ text-align: left; vertical-align: top; } .alert + .alert { margin-top: 6px; } .alert .feedback-text-wrapper { align-items: center; background-color: var(--feedback-state-normal-bg-color); display: inline-flex; height: var(--feedback-height); margin-left: var(--feedback-gap-spacing); padding: 0 var(--feedback-padding); width: calc(var(--alert-max-width) - var(--feedback-icon-width) - var(--feedback-gap-spacing)); } .alert .feedback-text-wrapper time { font-size: 11px; margin-left: auto; } @media only screen and (max-width: 24.78em) { .alert .feedback-text-wrapper { display: none } } .alert.info .feedback-text-wrapper, .alert.error .feedback-text-wrapper { width: calc(var(--alert-max-width) - var(--feedback-gap-spacing) - (2 * var(--feedback-icon-width))); } .alert.error .feedback-text-wrapper { display: inline-flex; } .alert .feedback-text { font-size: var(--feedback-text-size); line-height: 1.2; max-height: calc(var(--feedback-height) - var(--feedback-padding)); overflow: hidden; text-overflow: ellipsis; } .alert .feedback-info { background-color: var(--feedback-info-state-normal-bg-color); flex: 1 1 auto; font-size: var(--feedback-text-info-size); margin-top: var(--feedback-gap-spacing); padding: var(--feedback-info-v-padding) var(--feedback-info-h-padding); white-space: pre-wrap; word-wrap: break-word; } .alert .feedback-info p + p { margin-top: 8px; } .alert.info .feedback-info { font-size: var(--feedback-text-size); } .alert .close, .alert .feedback-icon { align-items: center; background-color: var(--feedback-state-normal-bg-color); display: flex; height: var(--feedback-height); justify-content: center; width: var(--feedback-icon-width); } .alert .close { cursor: pointer } .alert .close:hover { background-color: var(--feedback-close-state-hover-bg-color); } .alert .close svg { height: 16px; } .alert .feedback-icon svg { height: 20px; } .alert.success .feedback-icon { color: var(--axis-green); } .alert.error .feedback-icon { color: var(--axis-red); } .panel-group { break-inside: avoid; color: var(--group-state-normal-color); font-size: var(--settings-font-size); margin-right: 0; padding: var(--panel-v-padding) var(--panel-h-padding); position: relative; text-align: left; white-space: normal; } .panel-group .small { font-size: var(--settings-small-size); } .panel-group.expandable::after { cursor: pointer; position: absolute; right: 25px; top: 25px; transition: all 0.25s ease-in-out 0s; } .panel-group.expandable .component-title { cursor: pointer; } .panel-group.expandable.expanded::after { border-color: var(--axis-blue-5); top: 29px; transform: rotateZ(-45deg); } .panel-group.expandable.expanded > .expandableContent { display: inline; } .panel-group.expandable .expandableContent { display: none; } .panel-group.AXIS-network-settings .component { margin: 1px 0; min-height: 0; word-break: break-word; } .panel-group.AXIS-upgradeGroup .component.component-fileUpload { margin-bottom: 0; } .panel-group.AXIS-upgradeGroup .component.component-plainText { margin-bottom: 15px; margin-top: 0; } /* Styles for settings */ .settings-menu { left: 0; margin: 0 var(--settings-navigate-button-width); max-width: var(--settings-width); min-height: var(--settings-menu-height); position: relative; right: 0; top: 0; z-index: 10 } @media only screen and (max-width: 24.75em) { .settings-menu { margin-left: 0; max-width: var(--settings-compartment-narrow-width) } } @media only screen and (min-width: 24.78em) and (max-width: 44.75em) { .settings-menu { margin-left: 0 } } .horizontal-items { clear: both; display: flex; flex: 1 1 auto; margin: 0 var(--settings-navigate-button-width); white-space: nowrap; width: 0; } .horizontal-items > .settings-menu-item + .settings-menu-item { margin-left: var(--settings-menu-right-margin); } .horizontal-items .settings-menu-item { background-color: var(--settings-menu-inactive-state-normal-bg-color); display: inline-block; height: var(--settings-menu-item-height); margin-top: var(--settings-menu-right-margin); text-align: center; vertical-align: bottom } .horizontal-items .settings-menu-item a { border-bottom: var(--settings-menu-accent-height) solid var(--settings-menu-accent-state-normal-border-color); box-sizing: border-box; color: var(--navigation-state-normal-color); cursor: pointer; /* forces pointer -even on an a-tags without href */ display: inline-block; font-size: var(--settings-menu-font-size); height: var(--settings-menu-item-height); line-height: var(--settings-menu-item-height); outline: none; padding: 0 var(--settings-menu-horizontal-padding); text-decoration: none; /* transision is a hack to delay text color so that it doesn't flicker when clicking the tabs, */ /* but still needed when using tab. */ transition: color 110ms; width: 100% } .horizontal-items .settings-menu-item a:focus { color: var(--navigation-state-focus-color); } .horizontal-items .settings-menu-item a:active { color: var(--navigation-state-active-color); } .horizontal-items .settings-menu-item.selected > a { background-color: var(--settings-menu-selected-state-normal-bg-color); border-bottom: 0; border-top: var(--settings-menu-active-accent-height) solid var(--settings-menu-accent-state-active-color); color: var(--navigation-state-normal-color); cursor: default; line-height: calc(var(--settings-menu-item-height) - (var(--settings-menu-active-accent-height) * 2)) } .horizontal-items .settings-menu-item.selected > a:focus { color: var(--navigation-state-normal-color); } .horizontal-items .settings-menu-item.selected > a:active { color: var(--navigation-state-active-color); } .horizontal-items .settings-menu-item.menu { cursor: pointer; flex: none; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .horizontal-items .settings-menu-item.menu > a::after { content: '⋯'; } .horizontal-items .settings-menu-item.menu.selected { background-color: var(--settings-menu-selected-state-normal-bg-color); padding-left: 0 } .horizontal-items .settings-menu-item.menu.selected.active { background-color: var(--settings-menu-vertical-state-active-bg-color); } .horizontal-items .settings-menu-item.menu.selected.active > span { color: var(--settings-menu-vertical-state-normal-color); } .horizontal-items .settings-menu-item.menu.selected > a::after { /* Add margin so that the ⋯ (ellipses) is distanced from the text */ margin-left: 10px; } .vertical-items { background-color: var(--settings-menu-state-normal-bg-color); border-style: solid; bottom: calc(100% - 5px); display: block; position: absolute; right: -5px; } .vertical-items .settings-menu-item { display: block; margin: 1px; text-align: left; } .page-wrap.settings .settings-menu { z-index: var(--settings-button-zindex); } .nav-settings.isOffscreen { transition: transform 200ms 100ms ease-in-out; } .nav-settings { background-color: var(--settings-panel-state-normal-bg-color); transition: transform 200ms ease-in-out; } .nav-settings header { background-color: var(--settings-menu-state-normal-bg-color); } .settings-label { margin-right: 10px; } .settings-toggle svg { margin: 6px; } .settings-toggle { align-items: center; align-self: stretch; display: flex } .settings-toggle a { align-items: center; align-self: stretch; background-color: var(--settings-toggle-state-normal-bg-color); color: var(--settings-toggle-state-normal-color); display: flex; font-size: var(--settings-menu-font-size); font-weight: bold; justify-content: center; min-width: calc(var(--settings-navigate-button-width) - 1px); } .settings-panel { color: var(--settings-panel-state-normal-color); height: calc(var(--page-settings-height) + var(--page-footer-height) - var(--settings-menu-height)); margin: 0 auto; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100% } .settings-panel #systemPanel { /* We need a top spacing since we are forcefully hiding the titles */ padding-top: 24px; } .settings-panel #systemPanel .component-title { display: none; } .settings-panel .compartments { background-color: var(--settings-panel-state-normal-bg-color); display: none; height: inherit; left: 0; margin: 0 auto; position: absolute; /* so that the compartments can be stacked on top of eachother */ right: 0; z-index: -1 /* non-active compartments will end up below everything */ } .settings-panel .compartments.active { display: block; z-index: 1; } /* active compartments are visible again */ .settings-panel .compartments.active .waiting { background-color: var(--settings-panel-state-normal-bg-color); bottom: 0; height: 100%; left: 0; position: absolute; right: 0; top: 0; z-index: 2; } .settings-panel .compartments.no-padding { padding-top: 0 !important; } .settings-panel .navigate-prev, .settings-panel .navigate-next { background-color: var(--settings-navbuttons-state-normal-bg-color); color: var(--settings-navbuttons-state-normal-color); cursor: pointer; line-height: calc(var(--page-settings-height) + var(--page-footer-height) - var(--settings-menu-height)); position: absolute; top: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: var(--settings-navigate-button-width) } .settings-panel .navigate-prev.nav-disabled, .settings-panel .navigate-next.nav-disabled { background-color: var(--settings-navbuttons-state-disabled-bg-color); color: var(--settings-navbuttons-state-disabled-color); cursor: default; pointer-events: none; } .settings-panel .navigate-prev svg, .settings-panel .navigate-next svg { height: 30px; vertical-align: middle; } .settings-panel .navigate-prev { border-right: var(--settings-navbuttons-border-size) solid var(--settings-navbuttons-state-normal-border-color); left: 0; z-index: 1; } .settings-panel .navigate-next { border-left: var(--settings-navbuttons-border-size) solid var(--settings-navbuttons-state-normal-border-color); right: 0; z-index: 1; } .settings-panel .no-settings, .workspace-panel .no-settings { line-height: 20px; margin: 80px 40px; text-align: center; } .settings-panel .no-settings h2, .workspace-panel .no-settings h2 { color: var(--component-title-state-normal-color); font-size: var(--component-title-font-size); font-weight: bold; text-shadow: var(--component-title-text-shadow); } /* Styles related to the popup */ .overlay { background-color: var(--body-state-normal-bg-color); bottom: 0; left: 0; opacity: 0; position: absolute; right: 0; top: 0; transition: visibility 110ms linear 0.5s, opacity 0.5s linear; visibility: hidden; z-index: calc(var(--popup-z-index-start) - 1) } .overlay.active { opacity: 0.75; transition-delay: 110ms; visibility: visible; } .settings-popup .settings-popup { display: inline-block; } .settings-popup .popup { background-color: var(--body-state-normal-bg-color); bottom: var(--popup-bottom); box-shadow: var(--modal-box-shadow) var(--component-popup-box-shadow-color); display: inline-block; left: 0; min-height: var(--popup-min-height); opacity: 0; overflow: visible; position: absolute; right: 0; transition: visibility 110ms linear 0.5s, opacity 0.5s linear; visibility: hidden; /* hidden by default */ width: var(--settings-compartment-width); z-index: var(--popup-z-index-start); } .settings-popup .popup .panel-group { padding-top: var(--settings-panel-top-padding); } @media only screen and (max-width: 24.75em) { .settings-popup .popup { width: var(--settings-one-compartment-narrow-width) } } .settings-popup .popup.active { opacity: 1; transition-delay: 110ms; visibility: visible; /* show popup */ } .settings-popup .popup.waiting { background-image: var(--component-popup-spinner); } @media only screen and (max-width: 24.75em) { .settings-popup .popup .compartments { width: var(--settings-one-compartment-narrow-width) } } .settings-popup .popup .compartments .component-title span::after { content: none; } .settings-popup .popup .navigate-prev, .settings-popup .popup .navigate-next { top: 16px; } .settings-popup .popup.text-overlay, .settings-popup .popup.streamProfiles { bottom: 0; display: flex; flex-direction: column; height: auto; margin: 0; position: fixed; top: var(--page-header-height); width: 100% } .settings-popup .popup.text-overlay .popupControls, .settings-popup .popup.streamProfiles .popupControls { margin: 10px 16px 10px 0; position: static; } @media screen and (min-width: 48em) { .settings-popup .popup { height: auto; max-height: var(--popup-max-height) } .settings-popup .popup.text-overlay, .settings-popup .popup.streamProfiles { bottom: var(--popup-bottom); margin: auto; max-height: var(--popup-max-height); top: auto; width: var(--settings-compartment-width); } .settings-popup .popup .compartments { max-height: var(--popup-compartments-max-height); } } .settings-popup h1 { font-weight: bold; margin: 4px 16px; } .settings-popup .popupControls { bottom: 10px; left: 0; position: absolute; right: 16px; /* compensate for button padding-left */ text-align: center; z-index: 1 } .settings-popup .popupControls button[value='save'] { background-color: rgb(200, 255, 200); } .settings-popup .popupControls button[value='cancel'] { background-color: rgb(255, 200, 200); } .settings-popup .popupControls button[value='close'] { float: right; } .text-overlay .compartments.active { background-color: var(--body-state-normal-bg-color); display: flex; overflow: hidden; position: static; width: 100%; } .text-overlay .compartments.active .panel-group { display: flex; flex-direction: column; height: auto; width: 100%; } .text-overlay .compartments.active .panel-group .component-overlayTextarea { flex: 1 0 auto; } .text-overlay .compartments.active .panel-group .component-list { display: flex; flex-direction: column; flex-grow: 1; } .text-overlay .compartments.active .panel-group div.list { background-color: var(--body-state-normal-bg-color); height: 330px; } .text-overlay .compartments.active .panel-group div.list td { border-bottom: none; } .text-overlay .compartments.active .panel-group div.list button { background-color: var(--settings-navbuttons-state-normal-bg-color); border-color: var(--settings-navbuttons-state-normal-bg-color); border-radius: 3px; } #AXIS-overlayCaptureModePopup { background-color: var(--body-state-normal-bg-color); } #AXIS-currentCaptureMode .setting-label { margin-bottom: 5px; } /* Generic overlay styling */ .settings-overlay { background-color: var(--settings-overlay-background-color); bottom: 0; height: var(--settings-overlay-height); left: 0; opacity: 0; position: absolute; right: 0; transition: visibility 110ms linear 0.5s, opacity 0.5s linear; visibility: hidden; z-index: 0 } .settings-overlay.active { opacity: 1; transition-delay: 110ms; visibility: visible; z-index: var(--settings-overlay-z-index); } .settings-overlay { /* Because of the spinner shown when a guard tour is created, we discard the transition */ } .settings-overlay.no-transition { transition: none; transition-delay: 0s; } .settings-overlay .header-view { border-bottom: 1px solid var(--settings-overlay-header-border-color); display: flex; height: var(--settings-menu-item-height); padding-left: var(--settings-overlay-spacing); } .settings-overlay .header-view > h3:not(:last-child), .settings-overlay .header-view > button:not(:last-child) { margin-right: var(--settings-overlay-spacing); } .settings-overlay .header-view h3 { color: var(--settings-overlay-header-color); font-size: 13px; font-weight: bold; line-height: var(--settings-menu-item-height); } .settings-overlay .header-view button { margin-top: 4px; } .settings-overlay .main-view { align-items: center; display: flex; height: calc(var(--settings-overlay-height) - (var(--settings-menu-item-height) + var(--button-min-height) + var(--settings-overlay-control-spacing))); justify-content: center; overflow: hidden; padding: var(--settings-overlay-spacing); } .settings-overlay .controls { bottom: var(--settings-overlay-spacing); display: flex; left: var(--settings-overlay-spacing); position: absolute; right: var(--settings-overlay-spacing); } .settings-overlay .controls .btn { text-transform: none; } .settings-overlay .controls .left { order: 1 } .settings-overlay .controls .left:not(:first-child) { margin-right: var(--settings-overlay-control-spacing); } .settings-overlay .controls .spacer { flex: 1; order: 2; } .settings-overlay .controls .right { order: 3 } .settings-overlay .controls .right:not(:last-child) { margin-left: var(--settings-overlay-control-spacing); } .tooltipContent tr > *:first-child { padding-right: 12px; } .tooltipContent th { font-style: italic; } #storagePanel { --storage-margin-left: 28px; max-width: var(--workspace-compartment-one-width); text-align: center; } #storagePanel .panel-group .panel-group:first-of-type { border: none; box-shadow: none; margin: 0; max-width: 100%; padding: 0; } #storagePanel .panel-group .panel-group:first-of-type h2 { display: none; } #storagePanel .panel-group .component-storageFormat select, #storagePanel .panel-group .component-storageTools select, #storagePanel .panel-group .component-select select { width: inherit; } #storagePanel .panel-group .component-storageFormat button, #storagePanel .panel-group .component-storageTools button, #storagePanel .panel-group .component-select button { min-width: 31px } #storagePanel .panel-group .component-storageFormat button:hover, #storagePanel .panel-group .component-storageTools button:hover, #storagePanel .panel-group .component-select button:hover { min-width: 32px; } #storagePanel .component-icon { flex: none; height: auto; margin-bottom: 0; margin-right: 4px; vertical-align: baseline; width: auto } #storagePanel .component-icon:hover { color: inherit; } #storagePanel .component-icon.inactive { color: var(--axis-gray-4); } #storagePanel .component-button { flex: none; justify-content: flex-start; margin-bottom: 0; } #storagePanel .component-button label { width: auto /* Hide label if empty to get rid of margins */ } #storagePanel .component-button label:empty { display: none; } /* Make sure specific buttons vertically align nice */ #storagePanel .component-button ~ [id$='mount'] { margin-bottom: 0; margin-top: -15px; } #storagePanel .component-button ~ [id$='setup'] { margin-bottom: 0; margin-top: -39px; } #storagePanel .btn-simple { color: var(--axis-gray-6); } #storagePanel .header-text::before { content: none; } #storagePanel .expandable, #storagePanel .expanded { cursor: pointer; } #storagePanel .expandable .header-text::before, #storagePanel .expanded .header-text::before { content: ''; float: right; margin-left: 8px; margin-top: 0; transition: all 0.25s ease-in-out 0s; } #storagePanel .expanded .header-text::before { border-color: var(--axis-blue-5); transform: rotateZ(-45deg); } #storagePanel .expandable:not(.expanded) ~ .component { display: none; } #storagePanel .header-text { display: block; font-weight: bold; margin-bottom: 4px; position: relative; width: auto; } #storagePanel .info-container { display: inline-block; margin-top: 12px; max-width: 210px; min-width: 160px; vertical-align: top; } #storagePanel .component-storageView .component { margin-left: var(--storage-margin-left); } #storagePanel .component-storageView .component-storageInfo { display: block; margin-left: 0; } #storagePanel .component-storageView .storage-info div { word-wrap: break-word; } #storagePanel [id^='AXIS-onboardStorage-disk'] { display: none; } /* /////////////////////////////////////////////////// //// PARENT(SIBLING) COLLAPSED STATE CSS RULES //// /////////////////////////////////////////////////// */ .component-nasConnectionView, .dialog.storageFormatDialog .dialogContent p, .AXIS-nasConnection-host > :last-child { margin-bottom: 0 !important; } #AXIS-storage-networkShares .multicolumn { justify-content: flex-end !important; } #AXIS-storage-networkShares .component.disabled { color: var(--input-state-disabled-color); } #AXIS-nasSecurity-header { cursor: pointer; display: block !important; font-size: var(--settings-font-size); margin: 20px 0 !important; } [toggle='true'] > .expand-collapse-arrow--before { display: inline-block; font-weight: normal; margin-bottom: 4px; position: relative; } [toggle='true'] > .expand-collapse-arrow--before::before { content: ''; float: right; margin-left: 10px; margin-top: 1px; transition: all 0.25s ease-in-out 0s; } [toggle='true'] ~ #AXIS-nasSecurity-header, [toggle='true'] ~ #AXIS-nasSecurity-username, [toggle='true'] ~ #AXIS-nasSecurity-password, [toggle='true'] ~ #AXIS-nasSecurity-credentialsToggle, [toggle='true'] ~ #AXIS-nasSecurity-smb { display: none !important; } /* //////////////////////////////////////////////////// ///// PARENT(SIBLING) EXPANDED STATE CSS RULES ///// //////////////////////////////////////////////////// */ [toggle='true'].expanded > .expand-collapse-arrow--before::before { border-color: var(--axis-blue-5); margin-top: 4px; transform: rotateZ(-45deg); } [toggle='true'].expanded ~ #AXIS-nasSecurity-header, [toggle='true'].expanded ~ #AXIS-nasSecurity-username, [toggle='true'].expanded ~ #AXIS-nasSecurity-password, [toggle='true'].expanded ~ #AXIS-nasSecurity-credentialsToggle, [toggle='true'].expanded ~ #AXIS-nasSecurity-smb { display: flex !important; } #AXIS-nasSecurity-smb { margin-bottom: 30px; } #AXIS-nasSecurity-smb > label { margin: 0; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .workspace-wrap .workspace-panel { display: none; } .workspace-panel { box-sizing: border-box; max-width: var(--workspace-compartment-two-width); min-width: var(--workspace-compartment-narrow-width); text-align: left } @media only screen and (max-width: 44.75em) { .workspace-panel { max-width: var(--workspace-compartment-one-width); text-align: center; } .workspace-panel h1 { margin-left: var(--workspace-smallscreen-title-margin); } } @media only screen and (max-width: 24.75em),screen and (max-height: 24.75em) { .workspace-panel { text-align: left; } .workspace-panel h1 { margin-left: var(--workspace-tinyscreen-title-margin); } } .workspace-panel.waiting { height: 90%; } .workspace-panel.columns { columns: 2 var(--settings-compartment-width); } .workspace-panel.columns header { column-span: all; } .workspace-panel div.align-center { align-items: center; display: inline-flex; flex-direction: column; } .workspace-panel h1 { box-sizing: border-box; color: var(--workspace-h1-state-normal-color); display: inline-block; font-size: var(--workspace-h1-size); font-weight: bold; text-align: left; width: var(--workspace-panel-width) } @media only screen and (max-width: 24.75em) { .workspace-panel h1 { width: var(--workspace-panel-narrow-width) } } .workspace-panel h1::after { background-color: var(--workspace-title-state-normal-bg-color); content: ''; display: block; height: var(--workspace-title-underline-height); margin-bottom: var(--workspace-title-underline-margin-bottom); margin-top: var(--workspace-title-underline-margin-top); width: var(--workspace-title-underline-width); } .workspace-panel h2 { margin-top: var(--workspace-title-margin-top); text-transform: none; } .workspace-wrap .panel-group { border: 1px solid var(--workspace-panel-group-border); box-shadow: 0 2px 4px var(--workspace-panel-group-box-shadow); display: inline-block; margin-bottom: 8px; margin-right: 8px; padding-bottom: 10px; padding-top: 10px; vertical-align: top; width: var(--workspace-panel-width); } .workspace-wrap .panel-group .component-title { margin-top: 10px; } .workspace-wrap .panel-group .component-title span::after { display: none; } /* Right align buttons in panel-groups */ .workspace-wrap .panel-group .component-button { justify-content: flex-end; } .workspace-wrap [class^='panel-group AXIS-appsPlainConfigContainer'] { border: none; box-shadow: none; padding: 0; } .workspace-wrap [class^='panel-group AXIS-appsPlainConfigContainer'] .component { margin-top: 0; } .workspace-wrap [class^='panel-group AXIS-appsPlainConfigContainer'] .component > div { width: 100%; } .workspace-wrap [class^='panel-group AXIS-appsPlainConfigContainer'] .aca-panel-group { margin: 0; max-width: none; width: 100%; } @media only screen and (max-width: 24.75em),screen and (max-height: 24.75em) { .workspace-wrap { top: 24px; } .workspace-wrap .panel-group, .workspace-wrap .workspace-panel, .workspace-wrap .onvif-panel .card-list { width: 100%; } } #eventsPanel.active { display: flex; justify-content: center; margin: auto; } #AXIS-firmwareRollback { justify-content: flex-start; } .footer-wrap { bottom: 0; height: var(--page-footer-height); left: 0; position: absolute; right: 0; z-index: 2; } .carousel-pagination { align-items: center; display: flex; height: 100%; justify-content: center; line-height: 1; position: absolute; width: 100%; } .carousel-pagination > .page { background-color: var(--carousel-page-state-normal-color); border-radius: 50%; cursor: pointer; display: inline-block; height: var(--carousel-page-height); margin: 0 var(--carousel-page-margin); vertical-align: top; width: var(--carousel-page-width); } .carousel-pagination > .page.active { background-color: var(--carousel-page-state-active-color); cursor: default; } .window-container { height: 100%; padding-top: var(--page-header-height); /* Don't allow `windowView`s to be placed under the `.header-wrap` */ width: 100%; } .window-container-no-heading { padding-top: 0; } .window { --window-titlebar-height: 38px; background-color: var(--axis-white); border-bottom: 4px solid var(--axis-gray-8); box-shadow: 0 0 5px 0 var(--axis-gray-7); left: -16000px; position: relative !important; /* Because $ draggable is being naughty */ z-index: 9999 } @media screen and (max-width: 47.94em) { .window { /* Ignore $.resizable/$.draggable attributes and force the window to fill the screen */ height: 100% !important; left: 0 !important; top: 0 !important; width: 100% !important } } @media screen and (min-width: 48em) { .window { height: 300px; min-height: 300px; min-width: 256px; width: 400px } } .window .titlebar { background-color: var(--axis-gray-8); color: var(--axis-white); line-height: var(--window-titlebar-height); pointer-events: none; /* prevents dragging (.titlebar is a $.draggable handle) by default */ position: relative; z-index: 91 /* places it above the e-resize bar */ } @media screen and (min-width: 48em) { .window .titlebar { cursor: move; pointer-events: all /* re-enables dragging in tablet+ resolutions */ } } .window .titlebar .title { display: block; font-size: 16px; left: 0; margin: auto; max-width: 75%; overflow: hidden; right: 0; text-align: center; text-overflow: ellipsis; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; } .window .window-actions { color: var(--axis-white); font-size: 0; line-height: var(--window-titlebar-height); position: absolute; right: 0; top: 0; z-index: 92; } .window .window-actions button { color: var(--axis-white); height: var(--window-titlebar-height); margin: 0; pointer-events: all; /* ensure the button is clickable no matter the resolution */ width: var(--window-titlebar-height) } .window .window-actions button.icon:hover { color: inherit; } .window .window-actions button:hover { background-color: var(--axis-blue-4-brand); } .window .window-actions button svg { color: inherit !important; /* do not inherit the default icon colors, force it to inherit the ones from button */ height: 14px; width: 14px; } .window .content { height: calc(100% - var(--window-titlebar-height)); overflow: auto; padding: 0 var(--help-padding) var(--help-padding); white-space: pre-line; } .window .content a { color: var(--link-state-normal-color); } .window .content h1 { font-size: var(--window-content-h1-font-size); font-weight: bold; margin: var(--window-content-h1-margin); } .window .content h2 { font-size: var(--window-content-h2-font-size); font-weight: bold; margin: var(--window-content-h2-margin); } .window .content p { line-height: 1.4; margin-bottom: 16px; } /* Prevent resizing during mobile resolutions */ .window .ui-resizable-handle { --window-resize-handle-size: 32px; box-sizing: content-box; /* Allows us to adjust the size to fill the remaining gap */ pointer-events: none } @media screen and (min-width: 48em) { .window .ui-resizable-handle { bottom: calc(var(--window-resize-handle-size) * -1); cursor: se-resize; height: var(--window-resize-handle-size); pointer-events: all; /* re-enable resizing in tablet+ resolutions */ position: absolute; right: calc(var(--window-resize-handle-size) * -1); width: var(--window-resize-handle-size) } .window .ui-resizable-handle.ui-resizable-e { cursor: e-resize; height: 100%; } .window .ui-resizable-handle.ui-resizable-s { cursor: s-resize; padding-left: calc(var(--window-resize-handle-size) / 2); width: 100%; } } /* Customized list styling in windows */ div.window .vertical-menu { background-color: transparent; border: none; margin-left: calc(var(--help-padding) * -1); position: static; width: calc(100% + (2 * var(--help-padding))); } div.window .vertical-menu > .list { background-color: transparent; max-height: inherit; overflow: visible; } div.window .vertical-menu > .list li span.cell { font-size: 16px; padding: 3px 0 3px var(--help-padding); width: 100%; } div.window .vertical-menu > .list li, div.window .vertical-menu > .list li:hover { background-color: transparent; } /* Restore top border */ div.window .vertical-menu > .list li:first-child { border-top: 1px solid var(--component-list-state-normal-border-color); } div.window .vertical-menu > .list .expandable ul { margin: 8px 0 16px; } div.window .vertical-menu > .list .expanded li:hover { color: var(--axis-blue-4-brand); } div.window .vertical-menu > .list .expandable span { display: inline; } div.window .vertical-menu > .list .expandable li > span { display: inline-block; font-size: 13px; padding: 4px 0; } /* Remove border for sub topics */ div.window .vertical-menu > .list .expandable ul > li { border-bottom: none; border-top: none; } @media only screen and (max-width: 24.75em),screen and (max-height: 24.75em) { .maximize-on-mobile { bottom: var(--workspace-smallscreen-bottom); left: 0; max-height: none !important; position: fixed !important; right: 0; top: var(--workspace-smallscreen-top); z-index: 300; } .maximize-on-mobile li { font-size: 16px; } .maximize-on-mobile li span.cell { line-height: 20px; } } @keyframes sourceChangeFader { 100% { opacity: 1; } } [data-theme='light'] .source-change-wrapper { --source-change-background-color: var(--axis-white-values); } [data-theme='dark'] .source-change-wrapper { --source-change-background-color: var(--axis-gray-11-values); } .source-change-wrapper { align-items: center; animation: sourceChangeFader 0.6s cubic-bezier(0.3, 0, 0, 1) alternate 2; background-color: rgba(var(--source-change-background-color), 0.6); display: flex; height: 100%; justify-content: center; opacity: 0; position: absolute; width: 100%; z-index: 20; } .source-change-text { background-color: var(--source-change-background-color); box-shadow: var(--modal-box-shadow) rgba(var(--component-popup-box-shadow-color)); padding: 24px 64px; } .source-change-text h2 { color: var(--component-popup-text-color); font-size: 18px; max-width: var(--settings-compartment-width); overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; } /* Guard tour specific styling */ /* Hyphens were deprecated in Chrome 50 - therefore camelCase... */ @keyframes onPresetAnimation { 100% { background-color: var(--settings-overlay-guard-tour-preset-counter-highlighted-background-color); } } @keyframes spinner { 0% { fill: default; } 25% { fill: var(--settings-overlay-guard-tour-preset-transition-spinner-arrow-highlighted-background-color); } 50% { fill: default; } 100% { fill: default; } } .settings-overlay .guard-tour-carousel { align-items: center; counter-reset: section; display: flex; font-size: var(--settings-overlay-guard-tour-carousel-font-size); justify-content: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100%; } .settings-overlay .guard-tour-carousel .nav { cursor: pointer; margin-top: -20px; min-width: 20px; position: relative; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* Fix for Chrome Android */ /* stylelint-disable-line no-indistinguishable-colors */ width: 20px /* Both min-width and width are needed to please Chrome and IE/Edge */ /* Increase the clickable area */ } .settings-overlay .guard-tour-carousel .nav::before { bottom: calc(var(--settings-overlay-guard-tour-carousel-nav-margin) * -1); content: ''; left: calc(var(--settings-overlay-guard-tour-carousel-nav-margin) * -1); position: absolute; right: calc(var(--settings-overlay-guard-tour-carousel-nav-margin) * -1); top: calc(var(--settings-overlay-guard-tour-carousel-nav-margin) * -1); } .settings-overlay .guard-tour-carousel .nav svg path { fill: var(--settings-overlay-guard-tour-nav-fill-color); } .settings-overlay .guard-tour-carousel .nav.disabled { cursor: default; opacity: 0.1; pointer-events: none; } .settings-overlay .guard-tour-carousel .nav.left { align-content: flex-start; margin-right: var(--settings-overlay-guard-tour-carousel-nav-margin); } .settings-overlay .guard-tour-carousel .waiting { background-color: var(--settings-overlay-guard-tour-waiting-background-color); bottom: 0; content: ''; cursor: none; left: 0; position: absolute; right: 0; top: -5px; z-index: calc(var(--settings-overlay-z-index) + 2); } .settings-overlay .guard-tour-carousel .container-wrapper { display: flex; flex-grow: 1; justify-content: center; margin-top: calc(var(--settings-overlay-guard-tour-component-counter-vertical-offset) * -1); overflow: hidden; padding-top: var(--settings-overlay-guard-tour-component-counter-vertical-offset) } .settings-overlay .guard-tour-carousel .container-wrapper.scrollable { justify-content: flex-start; } .settings-overlay .guard-tour-carousel .container-wrapper .container { display: flex; position: relative; } .settings-overlay .guard-tour-carousel .container-wrapper .container > span { min-width: var(--settings-overlay-guard-tour-compartment-width); /* IE11 hack to prevent collapse */ position: relative; width: var(--settings-overlay-guard-tour-compartment-width); } .settings-overlay .guard-tour-carousel .container-wrapper .container > .in-progress { pointer-events: none; } .settings-overlay .guard-tour-carousel .container-wrapper .container:hover { cursor: pointer; } .settings-overlay .guard-tour-carousel .container-wrapper .container > :not(:last-child) { margin-right: 25px; } .settings-overlay .guard-tour-carousel .container-wrapper .container .component-icon { width: var(--settings-overlay-guard-tour-compartment-width) } .settings-overlay .guard-tour-carousel .container-wrapper .container .component-icon:hover { cursor: pointer; } .settings-overlay .guard-tour-carousel .container-wrapper .container .component-icon svg { height: 30px; } .settings-overlay .guard-tour-carousel .container-wrapper .container .component-icon > .waiting { background-position: 50% 25%; } .settings-overlay .guard-tour-carousel .nav.right { align-content: flex-end; margin-left: var(--settings-overlay-guard-tour-carousel-nav-margin); } .settings-overlay .preset { color: var(--icon-label-state-normal-color); display: block; margin-top: 4px; position: relative; text-align: center; } .settings-overlay .preset > div:not(:last-child) { margin-top: var(--settings-overlay-guard-tour-preset-step-icon-spacing); } .settings-overlay .preset > div:last-child { margin-top: 4px; } .settings-overlay .preset svg, .settings-overlay .preset svg path, .settings-overlay .preset span { pointer-events: none; } .settings-overlay .preset:focus { outline: none; } .settings-overlay .preset:focus svg { outline: 1px solid var(--icon-state-focus-border-color); outline-offset: 2px; } .settings-overlay .preset:hover { cursor: pointer; } .settings-overlay .preset:hover svg path { fill: var(--icon-state-hover-color); } .settings-overlay .preset:active svg path { fill: var(--icon-state-pressed-color); } .settings-overlay .preset .title { height: var(--settings-overlay-guard-tour-carousel-font-size); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .settings-overlay .preset::after { background-color: var(--settings-overlay-guard-tour-preset-counter-background-color); border-radius: 6px; /* Since we need to only use colours defined in the palette, here goes: */ /* stylelint-disable-next-line no-indistinguishable-colors */ color: var(--settings-overlay-guard-tour-preset-counter-color); content: '' counter(section) ''; counter-increment: section; font-size: calc(var(--settings-overlay-guard-tour-carousel-font-size) + 1px); font-weight: bold; height: 19px; padding: 4px 0 0 1px; position: absolute; right: 21px; text-align: center; top: calc(var(--settings-overlay-guard-tour-component-counter-vertical-offset) * -1); width: 19px; z-index: calc(var(--settings-overlay-z-index) + 1); } .settings-overlay .preset.active svg path.arrow { fill: var(--settings-overlay-guard-tour-preset-counter-highlighted-background-color); } .settings-overlay .preset.active::after { animation: onPresetAnimation 0.5s alternate; animation-iteration-count: infinite; } .settings-overlay .preset svg { height: calc(var(--settings-overlay-guard-tour-component-narrow-size) - 24px); width: var(--settings-overlay-guard-tour-component-narrow-size); } .settings-overlay .preset svg #settings { display: none; } .settings-overlay .transition-spinner { bottom: var(--settings-overlay-spacing); height: 38px; left: 50%; position: absolute; transform: translateX(-50%); width: 38px; z-index: calc(var(--popup-z-index-start) + 25); } .settings-overlay .transition-spinner rect { fill: var(--settings-overlay-background-color); stroke: var(--settings-overlay-guard-tour-preset-transition-spinner-border-color); } .settings-overlay .transition-spinner g.arrows polygon { animation: spinner 1.6s step-start infinite; fill: var(--settings-overlay-guard-tour-preset-transition-spinner-arrow-background-color) } .settings-overlay .transition-spinner g.arrows polygon:nth-of-type(2) { animation-delay: -400ms; } .settings-overlay .transition-spinner g.arrows polygon:nth-of-type(3) { animation-delay: -800ms; } .settings-overlay .transition-spinner g.arrows polygon:nth-of-type(4) { animation-delay: -1200ms; } .settings-popup .guard-tour.popup .component-title span::after { content: none; } .settings-popup .guard-tour.popup .compartments { background-color: var(--body-state-normal-bg-color); } .settings-popup .guard-tour.popup button[value='delete'] { float: left; margin-left: var(--panel-h-padding); min-width: auto; min-width: 0; } .settings-popup .guard-tour.popup #AXIS-guardTour-preset-waitTime-time { flex: none; } .settings-popup .guard-tour.popup #AXIS-guardTour-preset-waitTime-time input { width: 36px; } .settings-popup .guard-tour.popup #AXIS-guardTour-preset-waitTime-timeUnit label { display: none; } .settings-popup .guard-tour.popup .component-numericSlider label.setting-label { flex: 0 0 auto; margin-top: 0; position: static; } .settings-popup .guard-tour.popup .component-numericSlider .component-slider-inner { flex: 1; } .settings-popup .guard-tour.popup .component-numericSlider .component-slider-inner .numeric-input { width: 28px; } #AXIS-guardTour-recorded-record:not(:hover) svg, #AXIS-guardTour-recorded-rerecord:not(:hover) svg { fill: var(--settings-overlay-guard-tour-recorded-recording-color); } #AXIS-guardTour-recorded-rerecord svg { height: 30px; width: 30px; } .dialog.guard-tour label { margin-left: 2px; } .dialog.guard-tour p { margin-top: 8px; } #AXIS-guardTour-LVC-icon { margin-top: var(--component-top-margin); } #AXIS-guardTour-LVC-icon .icon { line-height: var(--lvc-toggle-button-line-height); margin-top: calc(var(--component-top-margin) * -1); /* Hack for IE11 */ margin-top: 0; /* Hack for IE11 */ } #AXIS-guardTour-LVC-toggle { margin-top: var(--component-top-margin); padding-top: var(--lvc-ie11-extra-top-padding); /* Hack for IE11 */ padding-top: 0; /* Hack for IE11 */ } .settings-panel.preset .compartments, .settings-panel.presetInfo .compartments { background-color: var(--body-state-normal-bg-color); } .preset.popup .popupControls, .presetInfo.popup .popupControls { left: 16px; } .preset.popup .popupControls .btn.btn-accent, .preset.popup .popupControls .btn.btn-secondary, .presetInfo.popup .popupControls .btn.btn-accent, .presetInfo.popup .popupControls .btn.btn-secondary { text-transform: none; } .preset.popup .popupControls button, .presetInfo.popup .popupControls button { float: right; } .preset.popup .popupControls button[value='cancel'], .presetInfo.popup .popupControls button[value='cancel'] { margin-right: 8px; } .preset.popup .popupControls button[value='update'], .preset.popup .popupControls button[value='save'], .presetInfo.popup .popupControls button[value='update'], .presetInfo.popup .popupControls button[value='save'] { margin-right: 0; } .preset.popup .popupControls button[value='delete'], .presetInfo.popup .popupControls button[value='delete'] { float: left; min-width: auto; min-width: 0; } .multicolumn > div[id^=AXIS-preset] { flex: none; } #AXIS-overlayAddPresetPopup .panel-group { height: auto; } #AXIS-ptzMaxProportionalSpeedSetting, #AXIS-presetReturnToOverviewSetting { width: 36px; } #AXIS-presetListSetting.dirty, #AXIS-presetListSetting.dirty > option[selected], #AXIS-presetListSetting.dirty > option:focus, #AXIS-presetListSetting.dirty > option:checked { color: var(--axis-gray-5); } #AXIS-presetListSetting.dirty > option { color: initial; } .settings-panel.limits .compartments { background-color: var(--body-state-normal-bg-color); } .limits .component-title { display: block; font-style: normal; height: 16px; overflow: hidden; padding-right: var(--component-right-spacing); white-space: normal; } .limits button span.icon svg { height: 18px; width: 18px; } .limits .btn { width: 40px; } .limits .component.component-plainText.align-right { margin-right: 15px; } .limits .component.multicolumn.compact { margin-top: 6px; } .limits .component { min-height: 2px; } #ioportsPanel > .panel-group { border: none; box-shadow: none; padding: 0 } @media screen and (min-width: 48em) { #ioportsPanel > .panel-group { align-content: space-between; display: flex; flex-wrap: wrap; max-width: 660px; width: 100% } } #ioportsPanel .component-button svg, #ioportsPanel .component-iconButton svg { height: 18px; width: 18px; } #ioportsPanel .component-button label { width: auto; } #ioportsPanel .component-button button { min-width: auto; } #ioportsPanel .component-iconButton { white-space: nowrap; } #ioportsPanel .component-iconButton .btn { border-left-width: 1px; box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.1); margin-left: -1px; padding: 0 4px; z-index: 1 } #ioportsPanel .component-iconButton .btn[disabled] { border-color: transparent; box-shadow: none; color: inherit; width: auto } #ioportsPanel .component-iconButton .btn[disabled]::after { content: none; } #ioportsPanel .component-input { margin-right: 0; position: relative; } #ioportsPanel .component-input .setting-label { position: absolute; top: -10px; } #ioportsPanel .component-input input { position: relative; } #ioportsPanel .component-input.error input, #ioportsPanel .component-input input:focus { z-index: 2; } #ioportsPanel .component.multicolumn.compact { margin-bottom: 0; } #ioportsPanel .component-plainText { min-height: auto; } #ioportsPanel .component-subPanelView { align-items: stretch; margin: 0; } #ioportsPanel .component-title { margin-bottom: 24px; } /* @end */ /* @group Components */ .activity-progress-bar { --progressBarColor: var(--axis-yellow-4-brand); --progressBarBackgroundColor: var(--axis-gray-5); background-color: var(--progressBarBackgroundColor); border: none /* Chrome / Blink progress value */ } .activity-progress-bar::-webkit-progress-value { background-color: var(--progressBarColor); border: none; } .activity-progress-bar { /* FF progress value */ } .activity-progress-bar::-moz-progress-bar { background-color: var(--progressBarColor); border: none; } .activity-progress-bar { /* Chrome / Blink progress bar */ } .activity-progress-bar::-webkit-progress-bar { background-color: var(--progressBarBackgroundColor); border: none; } .activity-progress-bar { /* Edge/ IE progress value */ /* Using fallback value since Edge doesn't support custom properties inside shadow elements */ } .activity-progress-bar::-ms-fill { background-color: var(--progressBarColor, rgb(255, 204, 51)); border: none; } /* Creates a triangular marker */ .arrow-marker { --arrow-marker-size: var(--arrow-size); --arrow-marker-color: var(--axis-gray-7); --arrow-marker-position: var(--arrow-pos); } .arrow-marker.arrow-marker--top::before, .arrow-marker.arrow-marker--bottom::after { border: var(--arrow-marker-size) solid transparent; content: ' '; height: 0; left: var(--arrow-marker-position); margin-left: calc(var(--arrow-marker-size) * -1); position: absolute; width: 0; } .arrow-marker.arrow-marker--top::before { border-bottom-color: var(--arrow-marker-color); margin-top: calc(var(--arrow-marker-size) * -2); } .arrow-marker.arrow-marker--bottom::after { border-top-color: var(--arrow-marker-color); bottom: calc(var(--arrow-marker-size) * -2); } /* Button */ [data-theme='light'] .btn { --button-selected-state-focus-border-color: var(--axis-gray-6); --button-state-active-bg-color: var(--axis-gray-3); --button-state-disabled-bg-gradient-from: var(--axis-white); --button-state-disabled-bg-gradient-to: var(--axis-gray-1); --button-state-disabled-border-color: var(--axis-gray-3); --button-state-hover-border-color: var(--axis-gray-6); --button-state-hover-bg-gradient-from: var(--axis-gray-1); --button-state-hover-bg-gradient-to: var(--axis-gray-3); --button-state-normal-bg-gradient-from: var(--axis-white); --button-state-normal-bg-gradient-to: var(--axis-gray-3); --button-state-normal-border-color: var(--axis-gray-4); --button-state-normal-color: var(--axis-black); --button-toggle-state-disabled-border-color: var(--axis-gray-3); --button-toggle-state-disabled-color: var(--axis-gray-4); --button-toggle-state-focus-border-color: var(--axis-blue-4-brand); --button-toggle-state-focus-color: var(--axis-gray-6); --button-toggle-state-hover-border-color: var(--axis-gray-6); --button-toggle-state-hover-color: var(--axis-gray-7); --button-accent-state-active-bg-color: var(--axis-blue-5); --button-accent-state-disabled-bg-gradient-from: var(--axis-blue-1); --button-accent-state-disabled-bg-gradient-to: var(--axis-blue-2); --button-accent-state-focus-bg-gradient-from: var(--axis-blue-2); --button-accent-state-focus-bg-gradient-to: var(--axis-blue-4-brand); --button-accent-state-focus-border-color: var(--axis-gray-7); --button-accent-state-hover-bg-gradient-from: var(--axis-blue-3); --button-accent-state-hover-bg-gradient-to: var(--axis-blue-5); --button-accent-state-normal-bg-gradient-from: var(--axis-blue-2); --button-accent-state-normal-bg-gradient-to: var(--axis-blue-4-brand); --button-accent-state-normal-color: var(--axis-white); --button-control-selected-state-border-color: var(--axis-blue-4-brand); --button-control-selected-state-normal-color: var(--axis-gray-8); } [data-theme='dark'] .btn { --button-selected-state-focus-border-color: var(--axis-blue-3); --button-state-active-bg-color: var(--axis-gray-11); --button-state-disabled-bg-gradient-from: var(--axis-gray-9); --button-state-disabled-bg-gradient-to: var(--axis-gray-12); --button-state-disabled-border-color: var(--axis-gray-8); --button-state-hover-border-color: var(--axis-gray-6); --button-state-hover-bg-gradient-from: var(--axis-gray-9); --button-state-hover-bg-gradient-to: var(--axis-gray-10); --button-state-normal-bg-gradient-from: var(--axis-gray-8); --button-state-normal-bg-gradient-to: var(--axis-gray-9); --button-state-normal-border-color: var(--axis-gray-7); --button-state-normal-color: var(--axis-white); --button-toggle-state-disabled-border-color: var(--axis-gray-8); --button-toggle-state-disabled-color: var(--axis-gray-7); --button-toggle-state-focus-border-color: var(--axis-blue-4-brand); --button-toggle-state-focus-color: var(--axis-gray-3); --button-toggle-state-hover-border-color: var(--axis-gray-6); --button-toggle-state-hover-color: var(--axis-white); --button-accent-state-active-bg-color: var(--axis-blue-5); --button-accent-state-disabled-bg-gradient-from: var(--axis-blue-1); --button-accent-state-disabled-bg-gradient-to: var(--axis-blue-2); --button-accent-state-focus-bg-gradient-from: var(--axis-blue-2); --button-accent-state-focus-bg-gradient-to: var(--axis-blue-4-brand); --button-accent-state-focus-border-color: var(--axis-gray-7); --button-accent-state-hover-bg-gradient-from: var(--axis-blue-3); --button-accent-state-hover-bg-gradient-to: var(--axis-blue-5); --button-accent-state-normal-bg-gradient-from: var(--axis-blue-2); --button-accent-state-normal-bg-gradient-to: var(--axis-blue-4-brand); --button-accent-state-normal-color: var(--axis-white); --button-control-selected-state-border-color: var(--axis-blue-4-brand); --button-control-selected-state-normal-color: var(--axis-gray-8); } .btn { --button-selected-state-normal-box-shadow-color: rgba(var(--axis-black-values), 0.25); --button-selected-state-normal-bg-color: var(--axis-blue-4-brand); --button-selected-state-normal-border-color: var(--axis-blue-5); --button-selected-state-normal-color: var(--axis-white); --button-state-active-border-color: var(--axis-gray-6); --button-state-active-box-shadow-color: rgba(var(--axis-black-values), 0.25); background-image: linear-gradient(var(--button-state-normal-bg-gradient-from) 0%, var(--button-state-normal-bg-gradient-to) 85%); border: var(--component-border-size); border-color: var(--button-state-normal-border-color); border-radius: var(--component-border-radius); border-style: solid; box-sizing: border-box; color: var(--button-state-normal-color); cursor: pointer; display: inline-block; font-size: 11px; margin-left: 0; margin-right: 0; min-height: var(--button-min-height); min-width: var(--button-min-width); outline: 0; overflow: visible; padding: 0 8px; text-align: center; text-decoration: none; width: auto; z-index: 1 } .btn.remove { border-radius: var(--button-dialog-radius); } .btn:hover { background-image: linear-gradient(var(--button-state-hover-bg-gradient-from) 0%, var(--button-state-hover-bg-gradient-to) 85%); border-color: var(--button-state-hover-border-color); box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05); z-index: 2; /* make sure the border is visible above other elements */ } .btn:focus { border-color: var(--button-state-focus-border-color); position: relative; z-index: 2; /* make sure the border is visible above other elements */ } .btn:active { background-color: var(--button-state-active-bg-color); border-color: var(--button-state-active-border-color); box-shadow: 0 2px 3px var(--button-state-active-box-shadow-color) inset; } .btn:disabled { background-image: linear-gradient(var(--button-state-disabled-bg-gradient-from) 0%, var(--button-state-disabled-bg-gradient-to) 85%); border-color: var(--button-state-disabled-border-color); color: var(--button-state-disabled-color); cursor: default; pointer-events: none; } .btn.btn-control { background-image: none; height: var(--button-control-height); margin: 0; min-width: 0 } .btn.btn-control.selected { border-color: var(--button-control-selected-state-border-color); box-shadow: none; color: var(--button-control-selected-state-normal-color); } .btn.btn-adjacent { border-left-width: 0; margin-left: 0; padding: 0 4px; vertical-align: middle } .btn.btn-adjacent:hover, .btn.btn-adjacent:focus { border-left-width: var(--component-border-size); margin-left: calc(var(--component-border-size) * -1); /* skip spacing */ } .btn.btn-simple, .btn.btn-toggle { background-color: var(--button-toggle-state-normal-bg-color); background-image: none; border-color: var(--button-toggle-state-normal-border-color); color: var(--button-toggle-state-normal-color); /* We need both auto and initial for it to work in IE and Safari */ min-width: auto; min-width: 0 } .btn.btn-simple:hover, .btn.btn-toggle:hover { border-color: var(--button-toggle-state-hover-border-color); z-index: 2; /* make sure the border is visible above other elements */ } .btn.btn-simple:focus, .btn.btn-toggle:focus { border-color: var(--button-toggle-state-focus-border-color); position: relative; z-index: 2; /* make sure the border is visible above other elements */ } .btn.btn-simple:active, .btn.btn-toggle:active { background-color: var(--button-toggle-state-active-bg-color); border-color: var(--button-toggle-state-active-border-color); box-shadow: 0 2px 3px var(--button-state-active-box-shadow-color) inset; color: var(--button-toggle-state-active-color); } .btn.btn-simple:disabled, .btn.btn-toggle:disabled { background-color: inherit; border-color: var(--button-toggle-state-disabled-border-color); color: var(--button-state-disabled-color); cursor: default; pointer-events: none; } .btn.btn-toggle.selected { background-color: var(--button-selected-state-normal-bg-color); border-color: var(--button-selected-state-normal-border-color); box-shadow: 0 2px 3px var(--button-selected-state-normal-box-shadow-color) inset; color: var(--button-selected-state-normal-color) } .btn.btn-toggle.selected:focus { border-color: var(--button-selected-state-focus-border-color); } .btn.btn-accent { background-image: linear-gradient(var(--button-accent-state-normal-bg-gradient-from) 0%, var(--button-accent-state-normal-bg-gradient-to) 85%); border: none; border-radius: var(--button-dialog-radius); color: var(--button-accent-state-normal-color); font-weight: bold; height: var(--button-dialog-height); line-height: normal; margin-left: 0; min-width: var(--button-dialog-min-width) } .btn.btn-accent.btn-small { height: var(--button-min-height); } .btn.btn-accent.btn-icon { min-width: 0; } .btn.btn-accent:focus { background-image: linear-gradient(var(--button-accent-state-focus-bg-gradient-from) 0%, var(--button-accent-state-focus-bg-gradient-to) 85%); border: solid 1px; border-color: var(--button-accent-state-focus-border-color); } .btn.btn-accent:hover { background-image: linear-gradient(var(--button-accent-state-hover-bg-gradient-from) 0%, var(--button-accent-state-hover-bg-gradient-to) 85%); } .btn.btn-accent:active { background-color: var(--button-accent-state-active-bg-color); } .btn.btn-accent:disabled { background-image: linear-gradient(var(--button-accent-state-disabled-bg-gradient-from) 0%, var(--button-accent-state-disabled-bg-gradient-to) 85%); } .btn.btn-secondary { border-radius: var(--button-dialog-radius); height: var(--button-dialog-height); line-height: normal; margin-left: 0; min-width: var(--button-dialog-min-width); text-transform: none } .btn.btn-secondary.btn-small { height: var(--button-min-height); } .btn.btn-secondary.btn-icon { min-width: 0; } .btn .label { pointer-events: none; } .btn.selected { background-color: var(--button-selected-state-normal-bg-color); background-image: none; border-color: var(--button-selected-state-normal-border-color); box-shadow: 0 2px 3px var(--button-selected-state-normal-box-shadow-color) inset; color: var(--button-selected-state-normal-color) } .btn.selected:focus { border-color: var(--button-selected-state-focus-border-color); } .btn.selected:disabled { background-color: inherit; border-color: var(--button-state-disabled-border-color); color: var(--button-state-disabled-color); pointer-events: none; } .btn.add, .btn.remove { min-width: 0; } .btnset { align-items: center; display: flex; } .btnset li { padding-bottom: 1px; } .btnset li .btn { margin-left: calc(var(--component-border-size) * -1); /* skip spacing */ position: relative } .btnset li .btn:focus, .btnset li .btn:hover { z-index: 3; } .btnset li:first-child .btn { margin-left: 0; /* restore left margin of first button */ } .icon-state:focus { color: var(--icon-state-focus-color); } .icon-state:focus .icon svg { outline: 1px solid var(--icon-state-focus-border-color); outline-offset: 2px; } .icon-state:hover { color: var(--icon-state-hover-color); } .icon-state:active { color: var(--icon-state-pressed-color); } .icon-state svg, .icon-state svg path, .icon-state span { pointer-events: none; } .icon-state.active-icon { /* The icon is open/active/visited */ color: var(--icon-active-state-normal-color) } .icon-state.active-icon:hover { color: var(--icon-active-state-hover-color); } .icon-state.active-icon:focus { color: var(--icon-active-state-focus-color); } .icon-state.active-icon:active { color: var(--icon-state-pressed-color); } button { --button-icon-size: 16px; } button span.icon svg { display: inline-block; /* prevents odd offset in IE */ height: var(--button-icon-height); overflow: visible; /* some SVGs overshoots the size ever so slightly */ pointer-events: none; vertical-align: middle; width: var(--button-icon-width); } button.icon { background-color: transparent; border: none; box-sizing: border-box; color: var(--icon-state-normal-color); cursor: pointer; display: inline-block; margin-bottom: 4px; margin-top: 0; padding-left: 8px; padding-right: 8px } button.icon:focus { outline: none; } button.icon svg { height: var(--button-icon-size); width: var(--button-icon-size); } /* Used to style file select buttons * not an actual button but a label * styled as a buton */ .fileSelectButton { display: inline-block; flex: none; height: auto; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .carousel { --compartment-width: var(--settings-compartment-width); --max-compartments-allowed: 8; --panel-height: calc(var(--page-settings-height) - var(--settings-menu-height) - 5px); --settings-total-columns: 1; font-size: 0; /* Prevents extra pixels height in the carousel elements */ text-align: center; } .carousel .panel-group { orphans: 2; } /** * Special support for Firefox and older iOS devices that do not * support orphans property. * REMOVE WHEN SUPPORT IS ADDED IN FIREFOX! */ /* stylelint-disable no-unsupported-browser-features */ @supports not (orphans:1) { .carousel .panel-group { page-break-inside: avoid; } } /* stylelint-enable no-unsupported-browser-features */ /** * Disable orphans for the panel-groups with icons since * it causes Chrome to flip out. * Remove when Chrome correctly fixes orphans support inside css columns */ #privacymaskPanel .panel-group, #systemPanel .panel-group, #appsPanel .panel-group, #viewareaPanel .panel-group, .orientation-wrap .panel-group { orphans: unset; } .carousel-outer { display: inline-block; margin: auto; position: relative; width: calc(var(--compartment-width) * var(--settings-total-columns)); } .carousel-inner { /** * Align all browsers to use `auto` otherwise Firefox and IE11 will use * `balance` as their initial value and therefore break privacy mask icon * alignment. */ column-fill: auto; column-gap: 0; column-width: var(--compartment-width); height: var(--panel-height); left: 0; margin-top: 5px; /* Increasing the top margin will result into overlapping the footer bar! */ overflow: hidden; white-space: nowrap; width: 100%; } @media only screen and (max-width: 24.75em) { .carousel { --compartment-width: var(--carousel-narrow-width-compartment); } } input[type='checkbox'] { /* We can't directly style the checkbox, so we will hide it */ display: none /* Style when it is hovered */ } input[type='checkbox']:hover + label span { cursor: pointer; } input[type='checkbox'] { /* Style when it is not checked */ } input[type='checkbox'] + label span { border: 1px solid var(--axis-gray-5); border-radius: 2px; display: inline-block; height: 16px; margin-right: 4px; vertical-align: middle; width: 16px; } input[type='checkbox'] { /* Style when it is checked */ } input[type='checkbox']:checked + label span { background-color: var(--axis-blue-4-brand); border: none; } input[type='checkbox'] { /* Style the check symbol */ } input[type='checkbox']:checked + label span::after { border: solid var(--axis-white); border-width: 0 2px 2px 0; content: ''; display: block; height: 10px; margin-left: 5px; margin-top: 2px; transform: rotate(45deg); width: 6px; } .component-checkbox label { align-items: center; display: flex; line-height: 1; } .component-collapsibleInfo { --title-min-width: 58px; --array-size: 4.5px; /* Using half pixels is correct in this case */ --array-size-fraction: calc(var(--array-size) / 3); display: block; font-style: italic; min-height: 0; } .component-collapsibleInfo .title { color: var(--component-collapsibleInfo-state-normal-color); cursor: pointer; display: inline-block; line-height: 24px; margin-bottom: 4px; outline: none } .component-collapsibleInfo .title::before { content: attr(data-expandLabel); display: inline-block; margin-right: 8px; min-width: var(--title-min-width); } .component-collapsibleInfo .title::after { border-right: var(--array-size-fraction) solid var(--component-collapsibleInfo-state-normal-border-color); border-top: var(--array-size-fraction) solid var(--component-collapsibleInfo-state-normal-border-color); content: ''; display: inline-block; height: var(--array-size); transform: translateY(calc(var(--array-size) * -0.5)) rotateZ(135deg); transition: transform, 0.2s, cubic-bezier(0.55, 0, 0.1, 1); width: var(--array-size); } .component-collapsibleInfo .title:hover { color: var(--component-collapsibleInfo-state-hover-color) } .component-collapsibleInfo .title:hover::after { border-color: var(--component-collapsibleInfo-state-hover-border-color); } .component-collapsibleInfo .title:focus { /** * Using box-shadow instead of border-bottom prevents elements below it to * 'jump'. */ box-shadow: 0 1px 0 var(--component-collapsibleInfo-state-focus-box-shadow-color); color: var(--component-collapsibleInfo-state-focus-color); } .component-collapsibleInfo .content { display: none; } .component-collapsibleInfo.expanded .title::before { content: attr(data-collapseLabel); } .component-collapsibleInfo.expanded .title::after { transform: rotateZ(-45deg); } .component-collapsibleInfo.expanded .content { display: block; } .contextual-select-component { display: flex /* Increase the priority so that .component in _components.css is not overwriting */ } .contextual-select-component.component { flex-wrap: nowrap; } /* This way we can scale the select component according to the number of buttons at runtime */ .contextual-select-component > button { flex: 0 0 auto; width: var(--base-contextual-select-component-button-width) } /* Buttons are placed before the select component and then reordered using flexbox order */ .contextual-select-component > button.btn.btn-adjacent:hover, .contextual-select-component > button.btn.btn-adjacent:focus { width: calc(var(--base-contextual-select-component-button-width) + 1px); /* Needed for IE11 */ } .contextual-select-component select { flex: 0 1 auto; } /* Basic styles for components */ /* Component: */ .component { align-items: center; break-inside: avoid; display: flex; flex-wrap: wrap; justify-content: flex-start; margin-top: var(--component-top-margin); min-height: var(--base-component-height); min-width: auto; min-width: 0; text-align: left /* Status */ } .component.error input[type='text'], .component.error input[type='number'], .component.error input[type='password'] { border-color: var(--component-error-state-normal-border-color); } .component { /* Prevent wrapping between select and adjacent button */ } .component.has-adjacent-button .setting { margin-right: var(--button-adjacent-width); } .component.has-adjacent-button .btn-adjacent { margin-left: calc(var(--button-adjacent-width) * -1) } .component.has-adjacent-button .btn-adjacent:hover, .component.has-adjacent-button .btn-adjacent:focus { margin-left: calc((var(--button-adjacent-width) * -1) - var(--component-border-size)); /* skip spacing */ } /* Immediate Children */ .component > label { display: block; padding-right: var(--component-h-spacing); white-space: normal } .component > label:empty { display: none; } .component > div.setting { align-items: center; display: flex; } .component > .postSetting-label { margin-left: var(--component-h-spacing); } .component > .postSetting-unitLabel { margin-left: 3px; } .component > .postSetting-valueDescription { margin-left: 3px; } .component > .ingress { font-weight: bold; margin-right: 4px; } .component .vertical-menu { bottom: 40px; text-align: left } .component .vertical-menu:empty { display: none; } .component .vertical-menu.menu-dispostion-above.arrow-marker.arrow-marker--bottom::after { left: 16px; } .component .tooltip { margin-left: 5px } .component .tooltip:hover .tooltipContent { transform: translateY(calc(-100% - 20px)); will-change: transform; } .component .tooltip .tooltipContent { bottom: initial; } .component .tooltip svg { height: 16px; width: 16px; } .component .tooltip header { background-color: var(--component-tooltip-background); } .component .fullwidth { flex: 1 1 auto; max-width: 100%; } /* Component labels and inputs are placed on separate rows under system settings */ .workspace-wrap .component, .wizard-wrap .component { margin-bottom: var(--workspace-component-bottom-margin); /* Restore with for onoff labels */ } .workspace-wrap .component label, .wizard-wrap .component label { margin-bottom: 4px; } /* Inputfields, lists, labels and selects fill out the entire row */ .workspace-wrap .component > label, .workspace-wrap .component > input:not(.numeric-setting):not(.noFill), .workspace-wrap .component > select, .workspace-wrap .component > ul, .wizard-wrap .component > label, .wizard-wrap .component > input:not(.numeric-setting):not(.noFill), .wizard-wrap .component > select, .wizard-wrap .component > ul { max-width: 100%; width: 100%; } .workspace-wrap .component.component-onoff, .wizard-wrap .component.component-onoff { min-height: auto; } .workspace-wrap .component.component-onoff > label, .wizard-wrap .component.component-onoff > label { width: auto; } .multicolumn { flex-wrap: nowrap; margin-top: 0; min-height: 0; /* Override component min-height. Necessary to prevent possible seemingly empty rows */ width: 100%; } .multicolumn > .component { flex: 1 1 auto; justify-content: flex-start; margin: 0 var(--component-h-spacing) 0 0; width: auto } .multicolumn > .component:last-child { margin-right: 0; } .multicolumn > .component.component-plainText.align-right { justify-content: flex-end; } .multicolumn > .component.component-plainText.align-right span { margin-left: 0; } .multicolumn.compact { flex-wrap: wrap; margin-bottom: -8px; } /* Compensates for added distance between wrapped components */ .multicolumn.compact > .component { flex: none; margin-bottom: 8px; /* Adds some distance between wrapped components */ width: auto; } .multicolumn + .multicolumn { margin-bottom: var(--multicolumn-grouping-v-margin); margin-top: calc(var(--multicolumn-grouping-v-margin) * -1); } .component-multiInput { align-items: flex-start } .component-multiInput.fixedHeight ul { height: var(--component-multiInput-height); overflow-x: hidden; overflow-y: auto; } .component-multiInput .multiInput-item { align-items: flex-start; display: flex; font-size: 0; padding: 2px 0; white-space: nowrap; } .component-multiInput input[type=text] { display: block; margin-bottom: 0; margin-top: 0; width: 100% } .component-multiInput input[type=text].error { border-color: var(--component-error-state-normal-border-color); } .component-multiInput .remove, .component-multiInput .add { align-self: stretch; font-size: 0; padding: 0 4px; } .component-multiInput .remove svg, .component-multiInput .add svg { height: 12px; pointer-events: none; vertical-align: middle; width: 12px; } .component-multiInput li:first-child:nth-last-child(1) .remove { /* the remove-button, if only one item exists */ display: none; } .component-select select, .component-niceNameSelect select { flex: 0 1 auto; max-width: 70%; } .component-select .fullwidth, .component-niceNameSelect .fullwidth { flex: 1 1 auto; max-width: 100%; } .component-select.auto-flow label, .component-niceNameSelect.auto-flow label { flex: 0 1 auto; white-space: nowrap; } .component-select.auto-flow select, .component-niceNameSelect.auto-flow select { flex: 1 1 0%; min-width: var(--setting-min-width); } /** * Special styling for a group of checkboxes and their label in radar * autotracking page. */ .panel-group.AXIS-RA-settings div[class$='multicolumn'] div { width: 100%; } .panel-group.AXIS-RA-settings div[class$='multicolumn'] div label span { margin-right: 5px; } #AXIS-RA-settings-object-type-heading { margin-bottom: auto; } /** * Special styling for labels in maintenance page. * IE 10-11 require a unit when using the flex shorthand, therefore we need '%'. */ #AXIS-maintenance-default label.setting-label, #AXIS-optics-calibrate label.setting-label, #AXIS-maintenance-ptr label.setting-label, #AXIS-maintenance-restart label.setting-label, #AXIS-maintenance-restore label.setting-label, #AXIS-maintenance-shutdown label.setting-label { flex: 1 0 0%; } .component-textarea textarea { resize: none; width: 100%; } .component-dynamicPlainText.plainText-compact { margin: 0; min-height: 0; word-break: break-word; } .component-dynamicPlainText.plainText-compact label { margin-bottom: 1px; } .plainText-italic { font-style: italic; } .component-title { --component-title-accent-height: 1px; --component-title-h-padding: 0; --component-title-v-padding: 2px; --component-title-bottom-margin: 12px; --component-title-state-normal-bg-color: transparent; --component-title-accent-left-margin: 12px; --component-title-accent-maxwidth: calc(var(--settings-panel-width) - 2 * var(--panel-h-padding) - var(--component-title-accent-left-margin) - 100%); --component-title-accent-narrow-maxwidth: calc(var(--settings-panel-narrow-width) - 2 * var(--panel-h-padding) - var(--component-title-accent-left-margin) - 100%); background-color: var(--component-title-state-normal-bg-color); color: var(--component-title-state-normal-color); font-size: var(--component-title-font-size); font-weight: bold; height: var(--component-title-font-size); margin-bottom: var(--component-title-bottom-margin); } [data-theme='light'] .component-title { --component-title-accent-state-normal-color: var(--axis-gray-4); } [data-theme='dark'] .component-title { --component-title-accent-state-normal-color: var(--axis-black); } .component-title span { align-items: center; display: flex } .component-title span::after { background-color: var(--component-title-accent-state-normal-color); content: ''; flex: 1 1 0%; height: var(--component-title-accent-height); margin-left: var(--component-title-accent-left-margin) } @media only screen and (max-width: 24.75em) { .component-title span::after { width: var(--component-title-accent-narrow-maxwidth) } } .component-title span:empty { padding-left: 0; padding-right: 0 } .component-title span:empty::after { margin-left: 0; } #AXIS-textEnabled { flex: auto; } .component-overlayTextarea textarea { height: var(--textarea-height); resize: none; width: 100%; } .component-overlayTextarea td:first-child { text-align: right; } .component-overlayTextarea .textarea-wrapper { width: 100%; } .component-overlayTextarea .btnset { background-color: var(--input-state-normal-bg-color); border-color: var(--input-state-normal-border-color); border-style: solid; border-width: var(--component-border-size); margin: 0; margin-top: 3px; padding: 5px; width: 100%; } /* properties */ .component-overlayTextarea .btnset button.btn { border-left-width: 1px; margin-right: 7px; } /* Increase specificity to overwrite default */ .component-overlayTextarea .btnset button.rounded { background-color: var(--button-toggle-state-active-bg-color); border-color: var(--button-toggle-state-active-bg-color); border-radius: 3px } .component-overlayTextarea .btnset button.rounded:focus { color: var(--button-toggle-state-normal-color); } .component-iconButton { position: relative; } .controlledSelect .controlled-select-wrapper { align-items: center; display: flex; justify-content: flex-start; line-height: 1; max-width: 75%; overflow: hidden; position: relative; } .controlledSelect .component-select { margin-top: 0; max-width: 89%; } .controlledSelect select { max-width: unset; width: 100%; } .controlledSelect button { border-left: none; min-width: auto !important; } .controlledSelect button:focus { border-left-width: 1px; border-style: solid; margin-left: -1px; } .panel-group.AXIS-ptzStatusGroup > div.component.component-dynamicPlainText:not(:nth-last-child(2)) { margin-bottom: 2px; margin-top: 0; min-height: 16px; } .component-dateTime { --textfieldSpacing: 8px; margin-top: 16px; min-width: 300px; } .component-dateTime > svg { height: 20px; margin: 1px var(--textfieldSpacing) 1px 0; /* When checkbox is clicked the checkbox/text is moved by 1 pixel */ width: 20px; } .component-dateTime > label.setting-label { display: inline-block; font-size: 9px; margin-top: -34px; overflow: visible; padding: 0; width: 0; } .component-dateTime > .numeric-setting { float: left; margin-right: var(--textfieldSpacing); text-align: center; } .component-dateTime input[type=number]:disabled { background-color: var(--input-state-normal-bg-color); color: var(--input-state-normal-color); } .component-dateTime select.meridiem { width: auto; } .dialog { -webkit-backface-visibility: hidden; backface-visibility: hidden; /* Causes bad anti aliasing issues in chrome if on */ background-color: var(--body-state-normal-bg-color); box-shadow: var(--modal-box-shadow) rgba(0, 0, 0, 0.3); color: var(--component-title-state-normal-color); display: flex; flex-direction: column; left: 0; margin: auto; max-width: 360px; min-width: 300px; padding: 30px 20px 20px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 100%; z-index: 9999 } @media screen and (max-width: 47.94em) { .dialog { height: auto; width: 100% } } .dialog .dialogHeader { font-weight: bold; padding-bottom: 20px; } .dialog .dialogButtons { align-items: center; display: flex; justify-content: flex-end; padding-top: 40px; } .dialog .dialogButtons button + button { margin-left: 15px; } .dialog .dialogButtons .btn { min-width: 75px; } .dialog .dialogButtons .btn.btn-accent, .dialog .dialogButtons .btn.btn-secondary { text-transform: none; } @media screen and (max-width: 47.94em) { .dialog .dialogButtons { margin-top: auto } } .dialog .dialogContent { font-size: var(--dialog-content-font-size); line-height: var(--dialog-content-line-height); white-space: pre-line; } .dialog .dialogContent h2 { font-size: calc(var(--dialog-content-font-size) + 2px); font-weight: bold; } .dialog .dialogContent h3 { font-weight: bold; } .dialog .dialogContent .progress { font-weight: bold; margin-top: 5px; } .dialog .dialogContent p { margin-bottom: var(--dialog-content-line-height); overflow: hidden; text-overflow: ellipsis; } .dialog .dialogContent b { font-weight: bold; } .dialog.scroll .dialogContent { max-height: 500px; overflow: auto; } .dialog.wait-info { background-position: 49% 75%; } .dialog input[type='text'].error, .dialog input[type='number'].error, .dialog input[type='password'].error { border-color: var(--component-error-state-normal-border-color); } /* Style for the input[type=file].error element * when a label is styled as the element */ .dialog input[type=file].error + .setting-wrapper .fileSelectButton { border-color: var(--component-error-state-normal-border-color); } /* Fix in the next story: * http://agile-dev/project/jonasgn-aca-release-10/us/597?kanban-status=1976, * antonbs, 2016-08-01 */ /* stylelint-disable selector-max-specificity, selector-max-compound-selectors */ .component-modifiableList { --arrowSize: 8px; --arrowSizeFraction: calc(var(--arrowSize) / 4); --li-hover-border-color: var(--axis-gray-6); margin-top: 0; } .component-modifiableList .editableListComponent { width: 100%; } .component-modifiableList .listItem > span.pointer > a.list-icon > span.icon > * { /* Fixed in next story */ /* stylelint-disable-line selector-no-universal */ max-width: 16px; } .component-modifiableList .addEditableListItem { border: 1px solid var(--workspace-panel-group-border); box-shadow: 0 2px 4px var(--workspace-panel-group-box-shadow); display: flex; padding: 0 } .component-modifiableList .addEditableListItem:disabled { opacity: 0.5; } .component-modifiableList .modifiable-vertical-menu > div.editablelist li { border: 1px solid var(--workspace-panel-group-border); box-shadow: 0 2px 4px var(--workspace-panel-group-box-shadow); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .component-modifiableList .modifiable-vertical-menu > div.editablelist li:hover { border-color: var(--li-hover-border-color); z-index: 1 /* make sure the border is visible above other elements */ } .component-modifiableList .modifiable-vertical-menu > div.editablelist li:hover.row-disabled { border-color: var(--workspace-panel-group-border); } .component-modifiableList .modifiable-vertical-menu > div.editablelist li span.cell { display: block; line-height: 16px; padding: 6px; white-space: nowrap; } .component-modifiableList .modifiable-vertical-menu > div.editablelist li.row-new span.cell, .component-modifiableList .modifiable-vertical-menu > div.editablelist li.row-dirty span.cell, .component-modifiableList .modifiable-vertical-menu > div.editablelist li.row-new .pointer, .component-modifiableList .modifiable-vertical-menu > div.editablelist li.row-dirty .pointer { cursor: default; pointer-events: none; } .component-modifiableList .modifiable-vertical-menu > div.editablelist span.iconSubTitle { float: left; } .component-modifiableList .modifiable-vertical-menu > div.editablelist li:not(.expanded-editable) > div.editableListContent { max-height: 0; overflow: hidden; transition: all, 0.2s, ease-in-out; } .component-modifiableList .modifiable-vertical-menu > div.editablelist .expanded-editable > div.editableListContent { max-height: 800px; padding: 16px; transition: all, 0.2s, ease-in-out; } .component-modifiableList .modifiable-vertical-menu > div.editablelist li:not(.list-transition) > div.editableListContent { opacity: 0; transition: all, 0.2s, ease-in-out; } .component-modifiableList .modifiable-vertical-menu > div.editablelist li.list-transition > div.editableListContent { cursor: default; opacity: 1; transition: all, 0.2s, ease-in-out; } .component-modifiableList .modifiable-vertical-menu > div.editablelist.default li.expandable-editable:first-child { margin-top: 0; } .component-modifiableList .modifiable-vertical-menu > div.editablelist.default li.expandable-editable { margin: 10px 0; position: relative /** * Temporary solution for the expand/collapse arrow until we have SVG's in * place & updated the state design. * The pseudo element is added to the cell rather than to row, because we * want cellClicked to trigger. */ } .component-modifiableList .modifiable-vertical-menu > div.editablelist.default li.expandable-editable .listItem .cell:first-child::after { border-right: var(--arrowSizeFraction) solid currentColor; border-top: var(--arrowSizeFraction) solid currentColor; content: ''; display: block; height: var(--arrowSize); margin-top: calc(var(--arrowSize) / -2); position: absolute; right: 16px; top: 16px; transform: rotateZ(135deg); transform-origin: 4px 4px; transition: all 0.25s ease-in-out 0s; width: var(--arrowSize); } .component-modifiableList .modifiable-vertical-menu > div.editablelist.default li.expandable-editable.expanded-editable .listItem .cell:first-child::after { border-color: var(--component-editablelist-accent-state-active-color); margin-top: calc(var(--arrowSizeFraction) * -1); transform: rotateZ(-45deg); } .component-modifiableList .modifiable-vertical-menu > div.editablelist.default li.expandable-editable.row-new .listItem .cell:first-child::after, .component-modifiableList .modifiable-vertical-menu > div.editablelist.default li.expandable-editable.row-dirty .listItem .cell:first-child::after { display: none; } .component-modifiableList .list-icon { display: inline-block; height: 23px; margin-right: 8px; margin-top: 4px; transition: color 150ms ease-in-out; width: 16px; } .component-modifiableList .title { display: block; font-size: 12px; font-weight: bold; margin-left: 8px; } .component-modifiableList .subTitle { margin-left: 34px; } .component-modifiableList .row-disabled { opacity: 0.25; pointer-events: none; } .component-modifiableList .btn.delete { min-width: 32px; } .component-modifiableList .user-controls { display: flex; justify-content: flex-end; } .component-modifiableList .user-controls > button { margin: 0; } .component-modifiableList .user-controls .cancel { margin-right: 10px; } /* TODO: Story #1464 normalize spacer class */ .component-modifiableList .user-controls #user-controls-spacer { flex: 1; } .component-modifiableList .ptz-component { margin: 8px 0; } .AXIS-getUsersGroup.panel-group { border: 0; box-shadow: none; margin: 0 8px 0 0; padding: 0; } .sequenceItemList { border: 1px solid; cursor: auto; margin-bottom: 12px; padding: 16px; } .panel-group.AXIS-networkShares, .panel-group.AXIS-getSequenceGroup, .panel-group.AXIS-getUsersGroup { border: 0; box-shadow: none; margin: 0; margin-right: 8px; padding: 0; } .panel-group.AXIS-networkShares .component, .panel-group.AXIS-getSequenceGroup .component, .panel-group.AXIS-getUsersGroup .component { margin-bottom: 6px; margin-top: 0; } ul.modifiableList { counter-reset: section; } ul.modifiableList .icon-counter::before { content: counter(section); counter-increment: section; } .panel-disabled { border: 1px solid rgb(230, 230, 230); box-shadow: 0 2px 4px rgb(230, 230, 230); opacity: 0.25; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* stylelint-enable */ .expandable-list { width: 100%; } .expandable-list .component-title span { padding: 0; } .expandable-list header h2 { float: left; } .expandable-list header .icon { float: right; margin: 0; } .expandable-list .expandable-item { border-bottom: var(--component-border-size) solid var(--component-list-child-state-normal-border-color); display: block; width: 100%; } .expandable-list .expandable-row { cursor: pointer; display: block; height: 32px; line-height: 32px; padding: 0 var(--expandablelist-spacing) } .expandable-list .expandable-row:hover { background-color: var(--component-expandable-list-hover-bg-color); color: var(--component-expandable-list-hover-color); } .expandable-list .expandable-row .expandable-column { float: left; height: 100%; } /* To fix margins being added in IE11 */ .expandable-list .expandable-row button { margin: 0; padding: 0; } .expandable-list .expandable-row svg { width: 19px; } .expandable-list .expandables { display: none; } .component-acapUpload > div, .component-fileUpload > div { width: 100%; } .component-acapUpload label, .component-fileUpload label { display: block; margin-bottom: 4px; } .component-acapUpload .setting-wrapper, .component-fileUpload .setting-wrapper { align-items: baseline; display: flex; } .component-acapUpload label[for], .component-fileUpload label[for] { /** * Since it is 'line-height', we subtract 'border-width' to get the correct * height value: */ line-height: calc(var(--button-min-height) - 2 * var(--component-border-size)); margin-bottom: 8px; } .component-acapUpload span, .component-fileUpload span { display: block; overflow: hidden; padding-left: 10px; text-overflow: ellipsis; white-space: nowrap; width: 100% } .component-acapUpload span.nothingSelected, .component-fileUpload span.nothingSelected { font-style: italic; } .component-acapUpload input, .component-fileUpload input { margin-bottom: 7px; } .component-acapUpload input[type='file'], .component-fileUpload input[type='file'] { left: 16000px; position: fixed } .component-acapUpload input[type='file']:focus + .setting-wrapper label, .component-fileUpload input[type='file']:focus + .setting-wrapper label { border-color: var(--button-state-focus-border-color); } .dialog.waiting .zipFileContent { display: inline-block; font-size: 12px; font-weight: normal; padding-left: 20px; text-align: left; width: 100%; } .dialog.waiting .zipFileContent li { color: var(--app-install-inactive-color); display: flex; height: 24px; justify-content: space-between; opacity: 0.5; position: relative; transition: 1s; } .dialog.waiting .zipFileContent li div { color: var(--component-title-state-normal-color); } .dialog.waiting .zipFileContent li div svg { height: 1em; width: 1em; } .dialog.waiting .zipFileContent li.in-progress { color: var(--app-install-active-color); } .dialog.waiting .zipFileContent li.done { color: var(--app-install-active-color); } .dialog.waiting .zipFileContent li.done svg { fill: var(--app-install-success-color); } .dialog.waiting .zipFileContent li.error { color: var(--app-install-failure-color); } .dialog.waiting .zipFileContent li.error svg { fill: var(--app-install-failure-color); } .dialog.waiting .zipFileContent li.in-progress, .dialog.waiting .zipFileContent li.done, .dialog.waiting .zipFileContent li.error { font-weight: bold; opacity: 1; } .component-icon, .component-iconLVC { background-color: var(--icon-state-normal-bg-color); color: var(--icon-state-normal-color); display: inline-block; margin-bottom: var(--component-icon-bottom-margin); margin-top: var(--component-icon-top-margin); outline: none; text-align: center; transition: color 150ms ease-in-out; vertical-align: top; width: var(--component-icon-width); } .component-icon .icon, .component-iconLVC .icon { display: block; height: var(--component-icon-img-container-height); position: relative; } .component-icon svg, .component-iconLVC svg { height: var(--component-icon-img-height); overflow: visible; } .component-icon img, .component-iconLVC img { visibility: hidden; /* Hides the placeholder, while the SVG is loading */ } .component-icon .editable-label, .component-icon .label, .component-iconLVC .editable-label, .component-iconLVC .label { -webkit-backface-visibility: hidden; backface-visibility: hidden; box-sizing: border-box; color: var(--icon-label-state-normal-color); display: block; font-size: var(--settings-font-size); max-width: 100%; overflow: hidden; padding: 5px; } .component-icon .editable-label, .component-iconLVC .editable-label { border: 0; outline: 1px solid var(--axis-gray-6); outline-offset: -1px; padding: 6px 5px; text-align: center } .component-icon .editable-label.readonly, .component-iconLVC .editable-label.readonly { background-color: var(--settings-panel-state-normal-bg-color); outline: none; } .component-icon .gear, .component-iconLVC .gear { visibility: hidden; } .component-icon .gear .gear-back, .component-iconLVC .gear .gear-back { fill: var(--axis-gray-6); } .component-icon .gear .gear-front, .component-iconLVC .gear .gear-front { fill: var(--axis-white); } .component-icon.active-icon .gear, .component-iconLVC.active-icon .gear { visibility: visible; } .component-icon.disabled, .component-icon.disabled.active-icon, .component-icon.disabled .label, .component-iconLVC.disabled, .component-iconLVC.disabled.active-icon, .component-iconLVC.disabled .label { opacity: 0.4; pointer-events: none; } .component-iconLVC { height: var(--lvc-icon-height); padding: 0 5px 0 0; width: var(--lvc-icon-width) } .component-iconLVC:hover { color: inherit; } .component-iconLVC svg { height: var(--lvc-icon-height); } .component-iconLVC .label { display: none; } .icon-color-black { color: var(--axis-black); } .icon-color-white { color: var(--axis-white); } [data-theme='light'] .icon-color-white { outline: 1px solid var(--axis-gray-4); } .icon-color-red { color: var(--axis-red); } .icon-color-green { color: var(--axis-green); } a:hover.component-icon { cursor: pointer; } .icon-app-status-indicator { animation-duration: 500ms; animation-timing-function: cubic-bezier(0.97, -0.49, 0, 1.65); border-radius: 50%; display: block; height: 6px; left: 56.25%; position: absolute; top: -2px; width: 6px; } .icon-app-status-indicator.failed, .icon-app-status-indicator.stopped { background-color: var(--status-indicator-off-color); } .icon-app-status-indicator.running { background-color: var(--status-indicator-on-color); } .icon-app-status-indicator.idle { background-color: var(--icon-active-state-normal-color); } .icon-app-status-indicator.animate { animation-name: bounceStatusIcon; } @keyframes bounceStatusIcon { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } } textarea, input[type=text], input[type=search], input[type=number], input[type=password], input[type=email] { background-color: var(--input-state-normal-bg-color); border-color: var(--input-state-normal-border-color); border-radius: var(--component-border-radius); border-style: solid; border-width: var(--component-border-size); box-sizing: border-box; color: var(--input-state-normal-color); display: block; font-family: var(--input-base-font); font-size: var(--settings-font-size); line-height: var(--input-line-height); outline: 0; padding: 0 var(--input-padding) } textarea:hover, input[type=text]:hover, input[type=search]:hover, input[type=number]:hover, input[type=password]:hover, input[type=email]:hover { border-color: var(--input-state-hover-border-color); color: var(--input-state-hover-color); } textarea:focus, input[type=text]:focus, input[type=search]:focus, input[type=number]:focus, input[type=password]:focus, input[type=email]:focus { border-color: var(--input-state-focus-border-color); color: var(--input-state-focus-color); } textarea:disabled, input[type=text]:disabled, input[type=search]:disabled, input[type=number]:disabled, input[type=password]:disabled, input[type=email]:disabled { background-color: var(--input-state-disabled-bg-color); border-color: var(--input-state-disabled-border-color); color: var(--input-state-disabled-color) } textarea:disabled::-ms-input-placeholder, input[type=text]:disabled::-ms-input-placeholder, input[type=search]:disabled::-ms-input-placeholder, input[type=number]:disabled::-ms-input-placeholder, input[type=password]:disabled::-ms-input-placeholder, input[type=email]:disabled::-ms-input-placeholder { color: inherit; } textarea:disabled::placeholder, input[type=text]:disabled::placeholder, input[type=search]:disabled::placeholder, input[type=number]:disabled::placeholder, input[type=password]:disabled::placeholder, input[type=email]:disabled::placeholder { color: inherit; } textarea.input-fullwidth, input[type=text].input-fullwidth, input[type=search].input-fullwidth, input[type=number].input-fullwidth, input[type=password].input-fullwidth, input[type=email].input-fullwidth { box-sizing: border-box; width: 100%; } input[type=text] { -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* Radio btn */ .radio-list-field.horizontal { display: flex; } .radio-list-field.horizontal .radiobutton-option { margin-right: 8px; } .radiobutton-option { --outerRingSize: 0 0 0 var(--radio-border-size); --outerRing: var(--outerRingSize) var(--radio-state-hover-box-shadow-color2); --innerFill: inset 0 0 0 16px; margin-bottom: 8px; margin-top: 8px; } input[type=radio] { display: none; /* Hide the native radio buttons */ font-size: 0; margin: 0; padding: 0 } input[type=radio] + label > span { vertical-align: text-top; } input[type=radio] + label::before { border: 3px solid transparent; border-radius: 50%; box-shadow: var(--outerRing); content: ''; cursor: pointer; display: inline-block; height: var(--radio-button-size); margin-right: 10px; position: relative; top: 1px; vertical-align: text-bottom; width: var(--radio-button-size); } input[type=radio]:hover + label::before { box-shadow: var(--outerRingSize) var(--radio-state-hover-outerring-color); } input[type=radio]:focus + label::before { box-shadow: var(--outerRingSize) var(--radio-state-focus-box-shadow-color); } input[type=radio]:active + label::before { box-shadow: var(--innerFill) var(--radio-state-active-box-shadow-color), var(--outerRing); } input[type=radio]:checked + label::before { box-shadow: var(--innerFill) var(--radio-checked-state-normal-box-shadow-color), var(--outerRing); } input[type=radio]:checked:hover + label::before { box-shadow: var(--innerFill) var(--radio-checked-state-normal-box-shadow-color), var(--outerRingSize) var(--radio-state-hover-outerring-color); } input[type=radio]:checked { /* Note special case for :active set on label here instead on the radiobutton. */ } input[type=radio]:checked + label:active::before { box-shadow: var(--innerFill) var(--radio-checked-state-active-box-shadow-color), var(--outerRing); } input[type=radio]:checked:focus + label::before { box-shadow: var(--innerFill) var(--radio-checked-state-focus-box-shadow-color), var(--outerRing); } input[type=radio]:checked:disabled + label::before { box-shadow: var(--innerFill) var(--radio-state-disabled-box-shadow-color), var(--outerRing); } input[type=radio]:disabled + label { color: var(--radio-state-disabled-color); pointer-events: none } input[type=radio]:disabled + label::before { box-shadow: var(--outerRingSize) var(--radio-state-disabled-box-shadow-color); } input[type=text], input[type=search], input[type=password], input[type=email] { padding: var(--input-padding) } input[type=text]::-ms-input-placeholder, input[type=search]::-ms-input-placeholder, input[type=password]::-ms-input-placeholder, input[type=email]::-ms-input-placeholder { color: var(--input-placeholder-color); font-style: normal; } input[type=text]::placeholder, input[type=search]::placeholder, input[type=password]::placeholder, input[type=email]::placeholder { color: var(--input-placeholder-color); font-style: normal; } textarea { line-height: 1.5; overflow: auto; padding: 5px 7px; } input[type='number'] { -moz-appearance: textfield; /* Fix for FF */ /* stylelint-disable-line property-no-vendor-prefix, no-unsupported-browser-features */ padding: var(--input-padding) 0; text-align: center } input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; } .input-wrap { position: relative; width: 100%; } .input-wrap svg { bottom: 0; color: var(--axis-gray-5); left: 8px; margin: auto; position: absolute; top: 0; width: 12px; } .input-wrap input { padding-left: 26px; } .input-wrap button.btn.btn-pass { border: 0; margin: 0; max-width: 50px; position: absolute; right: 6px; top: 6px; z-index: 2; } .input-wrap .password-hint { cursor: pointer; height: 20px; left: 240px; margin: auto; position: absolute; top: 7px; width: 25px; } .input-wrap .password-hint svg { color: var(--password-hint-default-color); left: 6px; } .input-wrap .password-hint.active svg, .input-wrap .password-hint.active:hover svg { color: var(--password-hint-active-color); } .input-wrap .password-hint:hover svg { color: var(--password-hint-hover-color); } .component-modifierList input { padding: 8px 4px 8px 26px; } .component-modifierList .input-wrap { margin-bottom: 8px; } input::-ms-clear { display: none; } ::-ms-input-placeholder { color: var(--settings-input-placeholder-state-normal-color); font-style: italic; } ::placeholder { color: var(--settings-input-placeholder-state-normal-color); font-style: italic; } input[maxlength] { box-sizing: content-box; min-width: 2em; } input[maxlength='1'] { width: 1em; } input[maxlength='2'] { width: 2em; } input[maxlength='3'] { width: 3em; } input[maxlength='4'] { width: 4em; } input[maxlength='5'] { width: 5em; } input[maxlength='6'] { width: 6em; } input[maxlength='7'] { width: 7em; } .component-link, .component-dialogLink { min-height: auto } .component-link.multi-row, .component-dialogLink.multi-row { align-items: flex-start; display: flex; flex-direction: column; justify-content: flex-start; } .component-link.multi-row .setting-label, .component-dialogLink.multi-row .setting-label { box-sizing: border-box; flex: 0 0 1; margin-bottom: 2px; max-width: 100%; } .component-link.multi-row .link, .component-dialogLink.multi-row .link { margin-bottom: 2px; } .externalLink, .component-link .link, .component-dialogLink .link { color: var(--component-link-normal-color); cursor: pointer } .externalLink:visited, .component-link .link:visited, .component-dialogLink .link:visited { color: var(--component-link-visited-color); } .externalLink:hover, .component-link .link:hover, .component-dialogLink .link:hover { color: var(--component-link-hover-color); } .externalLink:active, .component-link .link:active, .component-dialogLink .link:active { color: var(--component-link-active-color); } .externalLink:focus, .component-link .link:focus, .component-dialogLink .link:focus { color: var(--component-link-focus-color); outline: 1px solid var(--component-link-focus-color); outline-offset: 2px; } .externalLink[href^='http'], .component-link .link[href^='http'], .component-dialogLink .link[href^='http'] { text-decoration: underline; } .externalLink { text-decoration: underline; } .linkList { margin-left: 5px; } div.list { --li-border-bottom: 1px solid var(--component-list-state-normal-border-color); background-color: var(--component-list-state-normal-bg-color); box-sizing: border-box; height: var(--list-component-height); overflow: hidden; overflow-y: auto; position: relative; width: 100% } div.list.static-headers { padding-top: calc(var(--component-list-line-height) + var(--component-list-padding-and-border)); } div.list.static-headers th { padding: 0 var(--component-list-padding-and-border); } /* Override themes */ div.list.static-headers th div { line-height: var(--component-list-line-height); position: absolute; top: 0; } div.list table { width: 100%; } div.list .header-background { background-color: #fff; border-bottom: var(--component-list-padding-and-border) solid var(--settings-panel-state-normal-bg-color); height: var(--component-list-line-height); left: 0; position: absolute; right: 0; top: 0; } div.list thead { border-bottom: var(--component-list-padding-and-border) solid var(--settings-panel-state-normal-bg-color); } div.list.static-headers thead { border-bottom: none; } div.list th.sort-asc div::after { content: '\25B2'; margin-left: 2px; } div.list th.sort-desc div::after { content: '\25BC'; margin-left: 2px; } div.list td { background-color: transparent; border-bottom: var(--component-list-padding-and-border) solid var(--settings-panel-state-normal-bg-color); box-sizing: border-box; line-height: var(--component-list-line-height); padding: var(--component-list-padding-and-border); vertical-align: top; white-space: normal; } div.list tr:not(.list-subtitle):hover td { background-color: var(--component-list-state-hover-bg-color); } div.list .list-subtitle { font-weight: bold; } div.list button { /** * TODO: Make it possible to set this size directly on the button via * spec-file (STORY) */ width: 40px; } .header .vertical-menu div.list { font-size: 12px; } .header .vertical-menu div.list li:last-child { border-bottom: none; } .header .vertical-menu div.list li > div { text-indent: 10px; } .header .vertical-menu div.list li > ul { background-color: var(--component-list-child-state-normal-bg-color); } .vertical-menu div.list { font-size: var(--list-font-size); height: auto; max-height: calc(100vh - var(--page-header-height) + var(--controls-bottom-height)) } .vertical-menu div.list.shadow { box-shadow: 0 4px 16px var(--component-popup-box-shadow-color); } .vertical-menu div.list li { background-color: var(--component-list-state-normal-bg-color); border-bottom: var(--li-border-bottom); color: var(--component-list-state-normal-color); position: relative; } .vertical-menu div.list li div { display: flex; flex-wrap: nowrap; position: relative } .vertical-menu div.list li div:hover { background-color: var(--component-list-state-hover-bg-color); color: var(--component-list-state-hover-color); } .vertical-menu div.list li > ul { min-width: 100%; } .vertical-menu div.list li li { background-color: transparent; border-top-color: var(--component-list-child-state-normal-border-color); color: var(--component-list-child-state-normal-color); padding-left: 16px } .vertical-menu div.list li li:hover { background-color: var(--component-list-child-state-hover-color); color: var(--component-list-state-normal-color); } .vertical-menu div.list li span.cell { cursor: pointer; display: block; line-height: 16px; overflow: hidden; padding: 5px; text-overflow: ellipsis; white-space: nowrap } .vertical-menu div.list li span.cell:last-of-type { padding-right: 32px; } .vertical-menu div.list li:not(.expanded) > ul { display: none; } .vertical-menu div.list td:first-of-type { padding-left: 8px; } .vertical-menu div.list td:last-of-type { padding-right: 8px; } .vertical-menu div.list.default li.active div { background-color: var(--axis-yellow-4-brand) } .vertical-menu div.list.default li.active div:hover { background-color: var(--axis-yellow-4-brand); } .vertical-menu div.list.default li.expandable { /** * Temporary solution for the expand/collapse arrow until we have SVG's in * place & updated the state design. * The pseudo element is added to the cell rather than to row, because we * want cellClicked to trigger. */ } .vertical-menu div.list.default li.expandable > div > span:first-child::after { position: absolute; right: 16px; top: 50%; } .vertical-menu div.list.default li.expandable { /* Let the arrow receive the same bordercolor as the text */ } .vertical-menu div.list.default li.expandable.expanded > div:hover span:first-child::after { border-color: currentColor; } .vertical-menu div.list.default li.expandable.expanded > div > span:first-child::after { border-color: var(--axis-blue-4-brand); margin-top: -2px; transform: rotateZ(-45deg); } .vertical-menu div.list.check li div span:first-child { padding-right: 0; position: relative; width: 24px; } .vertical-menu div.list.check li div:hover svg { color: currentColor; } .vertical-menu div.list.check li div svg { color: var(--axis-blue-4-brand); height: 16px; overflow: hidden; position: absolute; width: 16px; } @media only screen and (max-width: 24.78em) { .vertical-menu div.list li > div { padding: 13px 0; } } @media only screen and (min-width: 24.78em) { .vertical-menu div.list li span.cell { max-width: var(--settings-compartment-width); } } @media only screen and (max-width: 24.75em),screen and (max-height: 24.75em) { .help-menu.vertical-menu div.list { background-color: var(--help-menu-mobile-bg-color) !important; } .help-menu.vertical-menu div.list li:last-child { border-bottom: var(--li-border-bottom); } } .offscreen { bottom: 0; left: 0; position: fixed; right: 0; } .offscreen_header { align-items: center; display: flex; } .offscreen_nav { display: flex; flex: 1 1 auto; width: 0; } .isOffscreen { transform: translateY(100%); } .osdPopupContent .tooltip { display: inline-block; vertical-align: middle; } .osdPopupContent p div { display: inline-block; } .osdButtonControls { display: grid; grid-gap: 6px; grid-template-columns: 1fr 1fr 1fr; margin: 18px auto 0; padding: 6px 0; } .osdButtonControls button { max-width: 80px; min-width: inherit; } .popup.wizard .compartments { background-color: var(--body-state-normal-bg-color); } .popup.wizard .component-plainText { font-size: 12px; line-height: 1.5; } .popup.wizard .ingress { margin-top: 24px; } .popup.wizard .popupControls { display: flex; justify-content: space-between; left: 16px; } .popup.wizard .popupControls button[value^='done'] { margin-left: auto; } .progress-bar { display: block; margin-top: 8px; width: 100% } .progress-bar.progress-fullscreen { background-color: var(--body-state-normal-bg-color); height: 100%; left: 0; overflow: auto; padding: 300px; position: fixed; top: 0; z-index: 999; } .progress-bar progress { margin-top: 4px } .progress-bar progress[value] { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; height: 12px; width: 100% } .progress-bar progress[value]::-webkit-progress-bar { background-color: var(--progress-bar-background-color); } .progress-bar progress[value]::-webkit-progress-value { background-color: var(--progress-bar-foreground-color); } .component-relativeFocusButtons { flex-wrap: nowrap; justify-content: space-between } @media only screen and (max-width: 24.75em) { .component-relativeFocusButtons { flex-wrap: wrap } } .component-relativeFocusButtons label { flex: 1 1 auto; margin: 0; max-width: 25%; overflow: hidden; padding: 0; text-overflow: ellipsis; white-space: nowrap; } .component-relativeFocusButtons .maxlabel { text-align: right; } .component-relativeFocusButtons .focusbuttons { display: flex; flex: 1 1 auto; flex-justify: space-between } @media only screen and (max-width: 24.75em) { .component-relativeFocusButtons .focusbuttons { order: 3; width: 100% } } .component-relativeFocusButtons .btn { margin: auto; width: 20% } .component-relativeFocusButtons .btn:first-child { margin-left: 0; } .component-relativeFocusButtons .btn:last-child { margin-right: 0; } .component-plainTextReveal { cursor: pointer } .component-plainTextReveal.expand-collapse-arrow--after::after { left: 160px; top: 22px; transition: all 0.25s ease-in-out 0s; } .component-plainTextReveal.expand-collapse-arrow--after.expanded::after { border-color: var(--axis-blue-5); transform: rotate(-45deg); } [data-theme='light'] select { --select-state-active-bg-color: var(--axis-gray-2); --select-state-active-border-color: var(--axis-gray-6); --select-state-active-box-shadow-color: rgba(var(--axis-black-values), 0.25); --select-state-active-color: inherit; --select-state-disabled-bg-color: var(--axis-gray-2); --select-state-disabled-border-color: var(--axis-gray-3); --select-state-disabled-color: var(--axis-gray-4); --select-state-focus-border-color: var(--axis-blue-4-brand); --select-state-hover-border-color: var(--axis-gray-6); --select-state-hover-color: inherit; --select-state-normal-bg-color: var(--axis-white); --select-state-normal-border-color: var(--axis-gray-5); --select-state-normal-color: var(--axis-gray-8); --select-state-placeholder-color: var(--axis-gray-6); --select-state-disabled-arrow: url("data:image/svg+xml,%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' version='1.1' width='10' height='16' id='svg2820'%3E %3Cdefs id='defs2822' /%3E %3Cmetadata id='metadata2825'%3E %3Crdf:RDF%3E %3Ccc:Work rdf:about=''%3E %3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E %3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E %3Cdc:title%3E%3C/dc:title%3E %3C/cc:Work%3E %3C/rdf:RDF%3E %3C/metadata%3E %3Cg transform='matrix(0.62711864,0,0,1,0.62711864,0)' id='layer1'%3E %3Cpath d='M 0,4 7,11 15,4 -1,4 z' id='path2832' style='fill:%23CDCDCD' /%3E %3C/g%3E %3C/svg%3E"); } [data-theme='dark'] select { --select-state-active-bg-color: var(--axis-gray-11); --select-state-active-border-color: var(--axis-gray-6); --select-state-active-box-shadow-color: rgba(var(--axis-black-values), 0.25); --select-state-active-color: var(--axis-white); --select-state-disabled-bg-color: var(--axis-gray-9); --select-state-disabled-border-color: var(--axis-gray-8); --select-state-disabled-color: var(--axis-gray-7); --select-state-focus-border-color: var(--axis-blue-4-brand); --select-state-hover-border-color: var(--axis-gray-6); --select-state-hover-color: var(--axis-white); --select-state-normal-bg-color: var(--axis-gray-10); --select-state-normal-border-color: var(--axis-gray-7); --select-state-normal-color: var(--axis-gray-3); --select-state-placeholder-color: var(--axis-gray-6); --select-state-disabled-arrow: url("data:image/svg+xml,%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' version='1.1' width='10' height='16' id='svg2820'%3E %3Cdefs id='defs2822' /%3E %3Cmetadata id='metadata2825'%3E %3Crdf:RDF%3E %3Ccc:Work rdf:about=''%3E %3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E %3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E %3Cdc:title%3E%3C/dc:title%3E %3C/cc:Work%3E %3C/rdf:RDF%3E %3C/metadata%3E %3Cg transform='matrix(0.62711864,0,0,1,0.62711864,0)' id='layer1'%3E %3Cpath d='M 0,4 7,11 15,4 -1,4 z' id='path2832' style='fill:%23666666' /%3E %3C/g%3E %3C/svg%3E"); } select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--select-state-normal-bg-color); background-image: url("data:image/svg+xml,%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' version='1.1' width='10' height='16' id='svg2820'%3E %3Cdefs id='defs2822' /%3E %3Cmetadata id='metadata2825'%3E %3Crdf:RDF%3E %3Ccc:Work rdf:about=''%3E %3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E %3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E %3Cdc:title%3E%3C/dc:title%3E %3C/cc:Work%3E %3C/rdf:RDF%3E %3C/metadata%3E %3Cg transform='matrix(0.62711864,0,0,1,0.62711864,0)' id='layer1'%3E %3Cpath d='M 0,4 7,11 15,4 -1,4 z' id='path2832' style='fill:%23878787' /%3E %3C/g%3E %3C/svg%3E"); background-position: right 6px center; background-repeat: no-repeat; border-color: var(--select-state-normal-border-color); border-radius: var(--component-border-radius); border-style: solid; border-width: var(--component-border-size); color: var(--select-state-normal-color); cursor: pointer; font-size: 100%; height: 22px; margin: 0; max-width: 100%; outline-width: 0; padding-left: 4px; padding-right: 20px } select:hover { border-color: var(--select-state-hover-border-color); color: var(--select-state-hover-color); } select:active, select:active:focus, select:active:hover { background-color: var(--select-state-active-bg-color); border-color: var(--select-state-active-border-color); box-shadow: 0 2px 3px var(--select-state-active-box-shadow-color) inset; } select:focus { border-color: var(--select-state-focus-border-color); } select:disabled { background-color: var(--select-state-disabled-bg-color); background-image: var(--select-state-disabled-arrow); border-color: var(--select-state-disabled-border-color); color: var(--select-state-disabled-color); pointer-events: none; } select::-ms-expand { display: none; } select:focus::-ms-value { /** * IE gets a solid blue background and white text on focus if it's not styled. */ background-color: transparent; color: var(--select-state-normal-color); } select.fullwidth { width: 100%; } /* Styles for slider component */ .component-slider-base { display: flex; position: relative; } [data-theme='light'] .component-slider-inner { --component-slider-state-disabled-color: var(--axis-gray-4); --component-slider-fill-state-disabled-bg-color: var(--axis-gray-4); --component-slider-fill-state-normal-bg-color: var(--axis-blue-4-brand); --component-slider-indicating-track-state-normal-bg-color: var(--axis-gray-6); --component-slider-thumb-state-active-bg-color: var(--axis-gray-3); --component-slider-thumb-state-active-border-color: var(--axis-gray-7); --component-slider-thumb-state-disabled-bg-color: var(--axis-gray-3); --component-slider-thumb-state-disabled-border-color: var(--axis-gray-3); --component-slider-thumb-state-focus-border-color: var(--axis-blue-4-brand); --component-slider-thumb-state-hover-bg-color: var(--axis-gray-1); --component-slider-thumb-state-hover-border-color: var(--axis-gray-7); --component-slider-thumb-state-normal-bg-color: var(--axis-gray-1); --component-slider-thumb-state-normal-border-color: var(--axis-gray-4); --component-slider-track-state-active-bg-color: var(--axis-gray-5); --component-slider-track-state-disabled-bg-color: var(--axis-gray-3); --component-slider-track-state-normal-bg-color: var(--axis-gray-4); --component-slider-placeholder-state-normal-color: var(--axis-blue-4-brand); } [data-theme='dark'] .component-slider-inner { --component-slider-state-disabled-color: var(--axis-gray-7); --component-slider-fill-state-disabled-bg-color: var(--axis-gray-7); --component-slider-fill-state-normal-bg-color: var(--axis-blue-4-brand); --component-slider-indicating-track-state-normal-bg-color: var(--axis-gray-6); --component-slider-thumb-state-active-bg-color: var(--axis-white); --component-slider-thumb-state-active-border-color: var(--axis-gray-7); --component-slider-thumb-state-disabled-bg-color: var(--axis-gray-8); --component-slider-thumb-state-disabled-border-color: var(--axis-gray-7); --component-slider-thumb-state-focus-border-color: var(--axis-blue-4-brand); --component-slider-thumb-state-hover-bg-color: var(--axis-white); --component-slider-thumb-state-hover-border-color: var(--axis-gray-6); --component-slider-thumb-state-normal-bg-color: var(--axis-gray-3); --component-slider-thumb-state-normal-border-color: var(--axis-gray-7); --component-slider-track-state-active-bg-color: var(--axis-gray-12); --component-slider-track-state-disabled-bg-color: var(--axis-gray-8); --component-slider-track-state-normal-bg-color: var(--axis-gray-12); --component-slider-placeholder-state-normal-color: var(--axis-blue-4-brand); } /* Using static values for `::range-thumb` since Edge doesn't support custom properties inside shadow elements */ [data-theme='light'] .component-slider-inner input[type='range']::-moz-range-thumb { background-color: rgb(250, 250, 250); border: 1px solid rgb(205, 205, 205); } [data-theme='light'] .component-slider-inner input[type='range']::-ms-thumb { background-color: rgb(250, 250, 250); border: 1px solid rgb(205, 205, 205); } [data-theme='light'] .component-slider-inner input[type='range']::-webkit-slider-thumb { background-color: rgb(250, 250, 250); border: 1px solid rgb(205, 205, 205); } [data-theme='light'] .component-slider-inner:hover input[type='range']::-moz-range-thumb { background-color: rgb(250, 250, 250); border-color: rgb(102, 102, 102); } [data-theme='light'] .component-slider-inner:hover input[type='range']::-ms-thumb { background-color: rgb(250, 250, 250); border-color: rgb(102, 102, 102); } [data-theme='light'] .component-slider-inner:hover input[type='range']::-webkit-slider-thumb { background-color: rgb(250, 250, 250); border-color: rgb(102, 102, 102); } [data-theme='light'] .component-slider-inner:focus input[type='range']::-moz-range-thumb { border-color: rgb(0, 157, 220); } [data-theme='light'] .component-slider-inner:focus input[type='range']::-ms-thumb { border-color: rgb(0, 157, 220); } [data-theme='light'] .component-slider-inner:focus input[type='range']::-webkit-slider-thumb { border-color: rgb(0, 157, 220); } [data-theme='light'] .component-slider-inner:active input[type='range']::-moz-range-thumb { background-color: rgb(230, 230, 230); border-color: rgb(102, 102, 102); } [data-theme='light'] .component-slider-inner:active input[type='range']::-ms-thumb { background-color: rgb(230, 230, 230); border-color: rgb(102, 102, 102); } [data-theme='light'] .component-slider-inner:active input[type='range']::-webkit-slider-thumb { background-color: rgb(230, 230, 230); border-color: rgb(102, 102, 102); } [data-theme='light'] .component-slider-inner:disabled { pointer-events: none } [data-theme='light'] .component-slider-inner:disabled input[type='range']::-moz-range-thumb { background-color: rgb(230, 230, 230); border-color: rgb(230, 230, 230); box-shadow: 0 2px 2px rgba(205, 250, 250, 0.1); } [data-theme='light'] .component-slider-inner:disabled input[type='range']::-ms-thumb { background-color: rgb(230, 230, 230); border-color: rgb(230, 230, 230); box-shadow: 0 2px 2px rgba(205, 250, 250, 0.1); } [data-theme='light'] .component-slider-inner:disabled input[type='range']::-webkit-slider-thumb { background-color: rgb(230, 230, 230); border-color: rgb(230, 230, 230); box-shadow: 0 2px 2px rgba(205, 250, 250, 0.1); } [data-theme='dark'] .component-slider-inner input[type='range']::-moz-range-thumb { background-color: rgb(230, 230, 230); border: 1px solid rgb(102, 102, 102); } [data-theme='dark'] .component-slider-inner input[type='range']::-ms-thumb { background-color: rgb(230, 230, 230); border: 1px solid rgb(102, 102, 102); } [data-theme='dark'] .component-slider-inner input[type='range']::-webkit-slider-thumb { background-color: rgb(230, 230, 230); border: 1px solid rgb(102, 102, 102); } [data-theme='dark'] .component-slider-inner:hover input[type='range']::-moz-range-thumb { background-color: rgb(255, 255, 255); border-color: rgb(140, 140, 140); } [data-theme='dark'] .component-slider-inner:hover input[type='range']::-ms-thumb { background-color: rgb(255, 255, 255); border-color: rgb(140, 140, 140); } [data-theme='dark'] .component-slider-inner:hover input[type='range']::-webkit-slider-thumb { background-color: rgb(255, 255, 255); border-color: rgb(140, 140, 140); } [data-theme='dark'] .component-slider-inner:focus input[type='range']::-moz-range-thumb { border-color: rgb(0, 157, 220); } [data-theme='dark'] .component-slider-inner:focus input[type='range']::-ms-thumb { border-color: rgb(0, 157, 220); } [data-theme='dark'] .component-slider-inner:focus input[type='range']::-webkit-slider-thumb { border-color: rgb(0, 157, 220); } [data-theme='dark'] .component-slider-inner:active input[type='range']::-moz-range-thumb { background-color: rgb(255, 255, 255); border-color: rgb(102, 102, 102); } [data-theme='dark'] .component-slider-inner:active input[type='range']::-ms-thumb { background-color: rgb(255, 255, 255); border-color: rgb(102, 102, 102); } [data-theme='dark'] .component-slider-inner:active input[type='range']::-webkit-slider-thumb { background-color: rgb(255, 255, 255); border-color: rgb(102, 102, 102); } [data-theme='dark'] .component-slider-inner:disabled { pointer-events: none } [data-theme='dark'] .component-slider-inner:disabled input[type='range']::-moz-range-thumb { background-color: rgb(77, 77, 77); border-color: rgb(102, 102, 102); box-shadow: 0 2px 2px rgba(205, 250, 250, 0.1); } [data-theme='dark'] .component-slider-inner:disabled input[type='range']::-ms-thumb { background-color: rgb(77, 77, 77); border-color: rgb(102, 102, 102); box-shadow: 0 2px 2px rgba(205, 250, 250, 0.1); } [data-theme='dark'] .component-slider-inner:disabled input[type='range']::-webkit-slider-thumb { background-color: rgb(77, 77, 77); border-color: rgb(102, 102, 102); box-shadow: 0 2px 2px rgba(205, 250, 250, 0.1); } .component-slider-inner { --component-slider-track-height: 4px; --component-slider-thumb-height: 15px; --component-slider-thumb-width: 15px; --component-slider-thumb-radii: 16px; width: 100%; } .component-slider-inner label.minlabel { padding: 0 2px 0 0; } .component-slider-inner label.maxlabel { padding: 0 0 0 2px; } .component-slider-inner.with-placeholder::after, .component-slider-inner.with-placeholder::before { border-bottom: 1px solid var(--component-slider-placeholder-state-normal-color); content: ''; display: block; flex-grow: 1; margin: 0 calc(var(--component-slider-thumb-width) / 4) 0 calc(var(--component-slider-thumb-width) / 4); } .component-slider-inner.with-placeholder .placeholder { color: var(--component-slider-placeholder-state-normal-color); } .component-slider-inner .numeric-input-wrapper { min-width: 64px; } .component-slider-inner .slider-input { padding: 0 6px; } .component-slider-inner .slider-wrapper { --slider-pos: 0; --tooltip-pos: 0; --tooltip-opacity: 0; --first-step-pos: 50%; --second-step-pos: 50%; --third-step-pos: 50%; --fourth-step-pos: 50%; align-items: center; background-image: linear-gradient(to right, var(--component-slider-fill-state-normal-bg-color) var(--slider-pos), var(--component-slider-track-state-normal-bg-color) var(--slider-pos)), linear-gradient(to left, var(--component-slider-track-state-normal-bg-color), var(--component-slider-track-state-normal-bg-color)); background-position: center; background-repeat: no-repeat; background-size: 97% var(--component-slider-track-height); display: flex; flex: 4 1 100%; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none /* Disables selecting */ } .component-slider-inner .slider-wrapper.centered { background-image: linear-gradient(to right, var(--component-slider-track-state-normal-bg-color) var(--first-step-pos), var(--component-slider-fill-state-normal-bg-color) var(--second-step-pos), var(--component-slider-fill-state-normal-bg-color) var(--third-step-pos), var(--component-slider-track-state-normal-bg-color) var(--fourth-step-pos)); } .component-slider-inner .slider-wrapper .slider-currentPos-indicator { background-color: var(--axis-yellow-4-brand); border-radius: 2px; color: var(--axis-gray-7); display: flex; flex-direction: column; font-size: 12px; justify-content: center; left: var(--tooltip-pos); line-height: 1; opacity: var(--tooltip-opacity); padding: 5px; position: absolute; text-align: center; top: -35px; transition: all 250ms ease-out, opacity 550ms ease-out; width: auto } .component-slider-inner .slider-wrapper .slider-currentPos-indicator::before { border-left: 1px dashed var(--axis-yellow-4-brand); content: ''; display: block; height: 19px; left: 50%; position: absolute; top: 100%; } .component-slider-inner .slider-wrapper .slider-currentPos-indicator .hidden { display: none; } .disabled .component-slider-inner label.maxlabel, .disabled .component-slider-inner label.minlabel { color: var(--component-slider-state-disabled-color); } .component-slider-inner input.numeric-input { flex: 0 0 auto; margin-left: var(--component-left-margin); } .component-slider-inner input[type='range'] { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; border: none; cursor: pointer; display: flex; font-size: 14px; /* Fixes IE-thumb size issues */ margin: 0; outline: none; padding: 0; position: relative; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* Fix for Chrome Android */ /* stylelint-disable-line no-indistinguishable-colors */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* Disables selecting, not inherited down unfortunately */ width: 100% } .component-slider-inner input[type='range']::-ms-fill-lower, .component-slider-inner input[type='range']::-ms-track { visibility: hidden; } .component-slider-inner input[type='range']::-webkit-slider-runnable-track { -webkit-appearance: none; /* Fix for Chrome */ /* stylelint-disable-line property-no-vendor-prefix, no-unsupported-browser-features */ } .component-slider-inner input[type='range']::-moz-range-track { visibility: hidden; } .component-slider-inner input[type='range']::-ms-tooltip { display: none; } .component-slider-inner input[type='range']::-moz-range-thumb { -moz-appearance: none; appearance: none; border-radius: 16px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); height: 15px; position: relative; width: 15px; } .component-slider-inner input[type='range']::-ms-thumb { appearance: none; border-radius: 16px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); height: 15px; position: relative; width: 15px; } .component-slider-inner input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; border-radius: 16px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); height: 15px; position: relative; width: 15px; } .component-slider-inner input[type='range'] { /* Introduced in Microsoft Edge 41 * This classnames is for a JS workaround/hack until it's been fixed from Microsoft. */ } .component-slider-inner input[type='range'].edge-slider-thumb-bug { margin-left: 1px; } .component-scaledSlider, .component-scaledSVGSlider { margin-bottom: 4px; } .component-scaledSlider .scale-value, .component-scaledSVGSlider .scale-value { font-size: 10px; margin-top: -4px; position: absolute; text-align: left; transform: translateX(-50%); } .indicating input[type='range']::-moz-range-thumb { -moz-appearance: none; appearance: none; position: relative; } .indicating input[type='range']::-ms-thumb { appearance: none; position: relative; } .indicating input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; position: relative; } .component-slidingEnum div.setting.component-slider-inner { margin-top: 10px; } .component-slidingEnum .btn-toggle { margin: 0; padding: 0 5px 0 0; } .component-slidingEnum .icon svg { height: 16px; width: 16px; } .component-sliderVertical { --verticalSliderHeight: 90px; --verticalSliderWidth: 26px; display: block; height: var(--verticalSliderHeight); margin-bottom: 4px; width: var(--verticalSliderWidth); } .component-sliderVertical .component-slider-inner { height: var(--verticalSliderWidth); left: 50%; position: absolute; transform: rotate(-90deg) translateY(-50%) translateX(-100%); transform-origin: top left; width: var(--verticalSliderHeight); } .component-sliderVertical input[type='range'] { vertical-align: middle } .component-sliderVertical input[type='range']::-moz-range-thumb { height: 14px; width: 14px; } .component-sliderVertical input[type='range']::-ms-thumb { height: 14px; width: 14px; } .component-sliderVertical input[type='range']::-webkit-slider-thumb { height: 14px; width: 14px; } .value-view { padding: 0; text-align: left; } .value-view label { float: left; margin-left: 2px; text-align: left; } .value-view .value-container { width: 40px; } .border-weight-slider { position: relative; } .border-weight-slider__track { background-color: var(--component-slider-track-state-normal-bg-color); display: block; height: var(--component-slider-track-height); left: 0; margin-left: 24px; margin-top: calc(var(--component-slider-track-height) / -2); /* this and top: 50% makes for vertical centering */ pointer-events: none; /* Make sure this is transparent to clicks */ position: absolute; right: calc(var(--component-slider-thumb-width) / 4); /* end track fill slightly right of center of the thumb */ top: 50%; /* this and margin-top makes for vertical centering */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* Disables selecting, not inherited down unfortunately */ } .border-weight-slider__fill { background-color: var(--component-slider-fill-state-normal-bg-color); display: block; height: var(--component-slider-track-height); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* Disables selecting, not inherited down unfortunately */ width: 0; } .strength-indicator { display: flex; margin-bottom: 10px; } .strength-indicator svg { max-height: 24px; } .strength-bar-wrapper { background-color: var(--axis-gray-4); } .strength-bar { height: 6px; transition: width 0.12s ease-in-out; width: 0 } .strength-bar[data-preset=blank] { background-color: var(--axis-red); width: 0; } .strength-bar[data-preset=weak] { background-color: var(--axis-red); width: 33%; } .strength-bar[data-preset=medium] { background-color: var(--axis-yellow-4-brand); width: 66%; } .strength-bar[data-preset=strong] { background-color: var(--axis-green); width: 100%; } .strength-label { font-size: 11px; margin-bottom: 3px; text-align: left; } .strength-status { flex: 1 1 auto; } .strength-tooltip { margin-left: 6px; margin-top: 8px; width: 24px } @media screen and (max-width: 47.94em) { .strength-tooltip .tooltipContent { left: -220px !important } } g .border { fill-opacity: 0; opacity: 1; shape-rendering: crispEdges; stroke: var(--svg-contrast-color); stroke-dasharray: 0; stroke-width: 1; } g .filling { cursor: pointer; fill-opacity: 0; opacity: 1; shape-rendering: crispEdges; stroke: var(--svg-main-color); stroke-opacity: 1; stroke-width: 1 } g .filling.draggable { cursor: move; } g .resize-handle { cursor: se-resize; fill: var(--svg-main-color); fill-opacity: 1; pointer-events: all; stroke: var(--svg-main-color); stroke-opacity: 0; stroke-width: var(--resize-handle-stroke-width); } g .inner-circle { cursor: pointer; fill-opacity: 0; opacity: 1; stroke: var(--svg-main-color); stroke-opacity: 1; stroke-width: 1 } g .inner-circle.draggable { cursor: move; } g .outer-circle { fill-opacity: 0; opacity: 1; stroke: var(--svg-contrast-color); stroke-opacity: 1; stroke-width: 1; } g.edge-grid line, g.full-grid line { fill: var(--svg-grid-color); stroke: var(--svg-grid-color); } g.edge-grid rect, g.full-grid rect { fill: transparent; stroke: var(--svg-grid-color); } g.contrast .border { stroke: var(--svg-contrast-color); } g.contrast .filling { fill-opacity: 0; opacity: 1; stroke: var(--svg-contrast-inverted-color); } .exposure-zone.locked .filling, .exposure-zone.locked .inner-circle { cursor: default; } .exposure-zone.locked .filling { fill: var(--svg-main-color); fill-opacity: 0.2; opacity: 1; } .tooltip { line-height: 0; position: relative; } .tooltip header { align-items: center; display: flex; font-weight: bold; padding-bottom: 5px } .tooltip header svg { margin-left: 5px; } .tooltip svg { fill: var(--component-tooltip-icon-fill); } .tooltip .tooltipContent { background-color: var(--component-tooltip-background); border: 1px solid var(--component-tooltip-border); bottom: 100%; box-shadow: 0 2px 20px 3px var(--component-tooltip-shadow); font-size: 11px; line-height: normal; margin: 0 -120px 0 0; padding: 10px; position: fixed; right: 50%; text-align: left; transition: visibility 0s; transition-delay: 100ms; visibility: inherit; width: 240px; /* Higher z-index as in _page.css for * .vertical-menu */ z-index: 500 } @media screen and (max-width: 47.94em) { .tooltip .tooltipContent { left: -188px } } .tooltip .tooltipContent p { margin-bottom: 11px; } .tooltip .tooltipContent svg { fill: var(--component-tooltip-fill); } .tooltip:not(:hover) .tooltipContent { transition-delay: 0s; visibility: hidden; } [data-theme='light'] { --component-onoff-state-disabled-bg-color: var(--axis-gray-3); --component-onoff-state-disabled-color: var(--axis-white); --component-onoff-state-focus-border-color: var(--axis-gray-7); --component-onoff-state-focus-box-shadow-color: var(--axis-blue-4-brand); --component-onoff-state-normal-bg-color: var(--axis-gray-5); --component-onoff-checked-state-focus-box-shadow-color: var(--axis-gray-7); --component-onoff-checked-state-normal-bg-color: var(--axis-blue-4-brand); --component-onoff-handle-state-disabled-bg-color: var(--axis-white); --component-onoff-handle-state-normal-bg-color: var(--axis-white); --component-onoff-handle-state-normal-color: var(--axis-white); } [data-theme='dark'] { --component-onoff-state-disabled-bg-color: var(--axis-gray-10); --component-onoff-state-disabled-color: var(--axis-gray-6); --component-onoff-state-focus-border-color: var(--axis-blue-2); --component-onoff-state-focus-box-shadow-color: var(--axis-blue-4-brand); --component-onoff-state-normal-bg-color: var(--axis-gray-12); --component-onoff-checked-state-focus-box-shadow-color: var(--axis-blue-2); --component-onoff-checked-state-normal-bg-color: var(--axis-blue-4-brand); --component-onoff-handle-state-disabled-bg-color: var(--axis-gray-8); --component-onoff-handle-state-normal-bg-color: var(--axis-white); --component-onoff-handle-state-normal-color: var(--axis-white); } input[type='checkbox'].on-off { cursor: default; display: none; /* hide the native element */ padding: 0 } input[type='checkbox'].on-off + label { --component-onoff-width: 38px; --component-onoff-handle-size: 16px; --component-onoff-state-disabled-opacity: 0.3; background-color: var(--component-onoff-state-normal-bg-color); border-radius: calc(var(--component-onoff-handle-size) / 2 + 1px); box-sizing: content-box; cursor: pointer; display: inline-block; font-size: 0; /* overflow: hidden; // See the comments below regarding css column bugs. Remove when issues have been fixed. Story #623 (Agron) */ padding: 1px; position: relative; top: -1px; transition: background-color 0.3s var(--swift-out-transition); width: var(--component-onoff-width); z-index: 1 /** * See the comments below regarding css column bugs. Remove these pseudo * elements when the issues have been fixed. */ } input[type='checkbox'].on-off + label::before, input[type='checkbox'].on-off + label::after { color: #fff; cursor: pointer; font-size: 10px; position: absolute; top: calc(var(--component-onoff-handle-size) / 3); z-index: -1; } input[type='checkbox'].on-off + label::before { border-left: 2px solid var(--component-onoff-handle-state-normal-color); content: ''; height: 8px; right: 28px; } input[type='checkbox'].on-off + label::after { border: 2px solid var(--component-onoff-handle-state-normal-color); border-radius: 50%; content: ''; height: 4px; left: 25px; width: 4px; } input[type='checkbox'].on-off + label.dragging { background-color: var(--component-onoff-state-normal-bg-color) !important; box-shadow: none !important; } input[type='checkbox'].on-off + label > .handle { background-color: var(--component-onoff-handle-state-normal-bg-color); border-radius: 50%; box-sizing: border-box; cursor: pointer; display: inline-block; height: var(--component-onoff-handle-size); left: 0; position: relative; transition: left 0.3s var(--swift-out-transition); width: var(--component-onoff-handle-size); z-index: auto /** * TODO: Due to various CSS column bugs in webkit the pseudo elements below will not * render consistently in both Chrome and Safari. The pseudo elements have been disabled until Chrome & Safari * have fixed their problems - Story #623 * Transformed descendants of overflow hidden within successive columns don't render: https://bugs.chromium.org/p/chromium/issues/detail?id=626507 * CSS Columns not rendering positioned child in overlow:hidden containing block: https://bugs.chromium.org/p/chromium/issues/detail?id=527709 * Content not displayed in multiple columns with overflow and border-radius: https://bugs.chromium.org/p/chromium/issues/detail?id=531528 * 0 & 1 labels * &::before, * &::after { * color: #fff; * cursor: default; * font-size: 10px; * height: 8px; * position: absolute; * top: var(--component-onoff-handle-size) / 4; * z-index: -1; * } * &::before { * border-left: 2px solid var(--component-onoff-handle-state-normal-color); * content: ''; * right: 25px; * } * &::after { * border: 2px solid var(--component-onoff-handle-state-normal-color); * border-radius: 50%; * content: ''; * left: 22px; * width: 8px; * } */ } input[type='checkbox'].on-off + label > .handle.ui-draggable-dragging { transition: none; } input[type='checkbox'].on-off:focus + label { box-shadow: 0 0 0 var(--one-pixel) var(--component-onoff-state-focus-box-shadow-color) inset; } input[type='checkbox'].on-off:checked + label { background-color: var(--component-onoff-checked-state-normal-bg-color); } input[type='checkbox'].on-off:checked + label > .handle { left: calc(var(--component-onoff-width) - var(--component-onoff-handle-size)); } input[type='checkbox'].on-off:checked:focus + label { box-shadow: 0 0 0 var(--one-pixel) var(--component-onoff-checked-state-focus-box-shadow-color) inset; } input[type='checkbox'].on-off:disabled + label { opacity: var(--component-onoff-state-disabled-opacity); pointer-events: none; } input[type='checkbox'].on-off:disabled + label > .handle { background-color: var(--component-onoff-handle-state-disabled-bg-color); } input[type='checkbox'].on-off:disabled + label > .handle::before, input[type='checkbox'].on-off:disabled + label > .handle::after { background-color: var(--component-onoff-state-disabled-bg-color); border-color: var(--component-onoff-state-disabled-color); } #AXIS-hdmiSequence .listItem { padding: 5px; } #AXIS-hdmiSequence .icon-label { color: rgb(178, 178, 178); float: left; font-size: 22px; height: 20px; padding-right: 14px; position: relative; top: 4px; } #AXIS-hdmiSequence .subTitle { left: 0; margin-left: 0; } label[for=AXIS-hdmiSelectSetting] { font-weight: bold; } .hdmi-quad-icon { height: 21px; margin-bottom: 7px; margin-top: 7px; width: 34px; } .hdmi-quad-icon img { visibility: hidden; /* Hides the placeholder, while the SVG is loading */ } .hdmi-quad-icon:hover { color: inherit; } .hdmi-quad-icon svg { height: var(--lvc-icon-height); overflow: visible; } #overlayPanel .no-settings svg { height: 16px; width: 16px; } .dynamicOverlay-color { margin: 4px 10px 4px 0; } .dynamicOverlay-color .label { display: none; } .dynamicOverlay-color svg { border: 1px solid var(--axis-gray-5) } .dynamicOverlay-color svg .checkmark { opacity: 0; } .dynamicOverlay-color .icon, .dynamicOverlay-color svg { height: 22px; width: 22px; } .dynamicOverlay-color:hover { cursor: pointer } .dynamicOverlay-color:hover svg { border: 1px solid var(--axis-gray-6); } .dynamicOverlay-color-selected svg .checkmark { opacity: 1; } .dynamicOverlay-color-black:hover,.dynamicOverlay-color-black { color: var(--axis-black); } .dynamicOverlay-color-black svg .checkmark { fill: var(--axis-white); } .dynamicOverlay-color-white:hover,.dynamicOverlay-color-white { color: var(--axis-white); } .dynamicOverlay-color-white svg .checkmark { fill: var(--axis-black); } .dynamicOverlay-color-red { --dynamicoverlay-red: rgb(255, 0, 0); } .dynamicOverlay-color-red:hover,.dynamicOverlay-color-red { color: var(--dynamicoverlay-red); } .dynamicOverlay-color-red svg .checkmark { fill: var(--axis-white); } .dynamicOverlay-color-transparent:hover,.dynamicOverlay-color-transparent ,.dynamicOverlay-color-semiTransparent:hover,.dynamicOverlay-color-semiTransparent { color: rgb(178, 178, 178); } .dynamicOverlay-color-transparent svg, .dynamicOverlay-color-semiTransparent svg { background-color: var(--axis-white) } .dynamicOverlay-color-transparent svg .checkmark, .dynamicOverlay-color-semiTransparent svg .checkmark { fill: var(--axis-black); } .dynamicOverlay-color-transparent svg .dynamicoverlay-semitransparent, .dynamicOverlay-color-semiTransparent svg .dynamicoverlay-semitransparent { opacity: 0; } .dynamicOverlay-color-semiTransparent svg .dynamicoverlay-semitransparent { fill: rgba(0, 0, 0); opacity: 0.3; } .component-dynamicOverlayImageSelect .imageselect-wrapper select { resize: none; width: 100%; } .component-dynamicOverlayImageSelect .btn-adjacent { vertical-align: top; } .text-color-overlay button { width: var(--button-min-height); } .component-dynamicOverlayTextarea textarea { height: var(--textarea-height); resize: none; width: 100%; } .component-dynamicOverlayTextarea td:first-child { text-align: right; } .component-dynamicOverlayTextarea .textarea-wrapper, .component-dynamicOverlayTextarea .imageselect-wrapper, .component-dynamicOverlayImageSelect .textarea-wrapper, .component-dynamicOverlayImageSelect .imageselect-wrapper { width: 100%; } .component-dynamicOverlayTextarea .btnset, .component-dynamicOverlayImageSelect .btnset { background-color: var(--input-state-normal-bg-color); border-color: var(--input-state-normal-border-color); border-style: solid; border-width: var(--component-border-size); margin: 0; margin-top: 3px; padding: 5px; width: 100%; } /* properties */ .component-dynamicOverlayTextarea .btnset button.btn, .component-dynamicOverlayImageSelect .btnset button.btn { border-left-width: 1px; margin-right: 4px; } /* Increase specificity to overwrite default */ .component-dynamicOverlayTextarea .btnset input, .component-dynamicOverlayImageSelect .btnset input { border-width: 0.9px; /* IE11 / EDGE hack */ margin-right: 4px; } .component-dynamicOverlayTextarea .btnset select, .component-dynamicOverlayImageSelect .btnset select { max-width: 74px; } .component-dynamicOverlayTextarea .btnset button.rounded, .component-dynamicOverlayImageSelect .btnset button.rounded { background-color: var(--button-toggle-state-active-bg-color); border-color: var(--button-toggle-state-active-bg-color); border-radius: 3px } .component-dynamicOverlayTextarea .btnset button.rounded:focus, .component-dynamicOverlayImageSelect .btnset button.rounded:focus { color: var(--button-toggle-state-normal-color); } .settings-popup .popup .component-dynamicOverlayTextarea { flex: 1 0 auto; } .settings-popup .popup.text-color-overlay { height: 220px; width: 180px; } .settings-popup .popup.text-color-overlay .multicolumn { width: 150px; } .settings-popup .popup.text-color-overlay .component-title { width: 200px; } .settings-popup .popup.text-color-overlay .component-title span::after { display: none; } .settings-popup .popup.text-color-overlay .component-title:not(:nth-child(1)) { font-weight: normal; margin-bottom: 3px; margin-top: 4px; } .panel-group .overlay-icon { margin: 28px 0; } #overlayPanel .panel-group { margin-bottom: 20px; } .rectangle.dynamicOverlaySVG:not(.selected) { opacity: 0; } .rectangle.dynamicOverlaySVG.disabled { cursor: default; pointer-events: none; } .sey-list { background-color: var(--input-state-normal-bg-color); box-shadow: 1px 2px 6px; color: var(--input-state-normal-color); display: none; list-style-type: none; margin: 0; max-height: 300px; max-width: var(--settings-compartment-width); overflow-y: scroll; padding: 0; position: absolute; transition: left 0.1s ease-in-out; width: 284px; } .sey-show { display: block; z-index: 1000000; } .sey-hide { display: none; } .sey-item { cursor: pointer; font-size: 10px; overflow: hidden; padding: 7px; text-overflow: ellipsis; white-space: nowrap; } .sey-item:hover { background-color: var(--axis-gray-7); color: var(--axis-white); } .sey-selected { background-color: var(--axis-gray-7); color: var(--axis-white); } .nvr__ns-input-search { font-size: 12px; height: 32px; text-indent: 2px; width: 100% } .nvr__ns-input-search:focus { outline: none; } [data-theme='dark'] .nvr__ns--loading { --spinner-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E %3Cstyle%3E /* %3C!%5BCDATA%5B */ @keyframes spinner-fade %7B0%25 %7Bopacity: 1 %7D 80%25 %7Bopacity: 0 %7D 100%25 %7Bopacity: 0 %7D %7D g.spinner rect %7Bwill-change: opacity; opacity: 0; animation: spinner-fade 0.75s linear infinite;%7D /* %5D%5D%3E */ %3C/style%3E %3Cg class='spinner' fill='none' fill-rule='evenodd'%3E %3Crect style='animation-delay: -0.375s;' width='22' height='64' x='117' fill='%23FFFFFF' rx='9'/%3E %3Crect style='animation-delay: -0.3125s;' width='22' height='64' x='164.526' y='13.213' fill='%23FFFFFF' transform='rotate(30 175.526 45.213)' rx='9'/%3E %3Crect style='animation-delay: -0.25s;' width='22' height='64' x='200.213' y='48.133' fill='%23FFFFFF' transform='rotate(60 211.213 80.133)' rx='9'/%3E %3Crect style='animation-delay: -0.1875s;' width='22' height='64' x='212.846' y='95.449' fill='%23FFFFFF' transform='rotate(90 223.846 127.45)' rx='9'/%3E %3Crect style='animation-delay: -0.125s;' width='22' height='64' x='200.138' y='144.202' fill='%23FFFFFF' transform='rotate(120 211.138 176.202)' rx='9'/%3E %3Crect style='animation-delay: -0.0625s;' width='22' height='64' x='164.824' y='178.864' fill='%23FFFFFF' transform='rotate(150 175.824 210.864)' rx='9'/%3E %3Crect style='animation-delay: 0s;' width='22' height='64' x='117' y='192' fill='%23FFFFFF' transform='rotate(180 128 224)' rx='9'/%3E %3Crect style='animation-delay: 0.0625s;' width='22' height='64' x='69.003' y='179.378' fill='%23FFFFFF' transform='rotate(-150 80.003 211.378)' rx='9'/%3E %3Crect style='animation-delay: 0.125s;' width='22' height='64' x='33.735' y='144.011' fill='%23FFFFFF' transform='rotate(-120 44.735 176.011)' rx='9'/%3E %3Crect style='animation-delay: 0.1875s;' width='22' height='64' x='21' y='96' fill='%23FFFFFF' transform='rotate(-90 32 128)' rx='9'/%3E %3Crect style='animation-delay: 0.25s;' width='22' height='64' x='33.926' y='48.133' fill='%23FFFFFF' transform='rotate(-60 44.926 80.133)' rx='9'/%3E %3Crect style='animation-delay: 0.3125s;' width='22' height='64' x='69.068' y='12.838' fill='%23FFFFFF' transform='rotate(-30 80.068 44.838)' rx='9'/%3E %3C/g%3E %3C/svg%3E"); } [data-theme='light'] .nvr__ns--loading { --spinner-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E %3Cstyle%3E /* %3C!%5BCDATA%5B */ @keyframes spinner-fade %7B0%25 %7Bopacity: 1 %7D 80%25 %7Bopacity: 0 %7D 100%25 %7Bopacity: 0 %7D %7D g.spinner rect %7Bfill: currentColor; will-change: opacity; opacity: 0; animation: spinner-fade 0.75s linear infinite;%7D /* %5D%5D%3E */ %3C/style%3E %3Cg class='spinner' fill='none' fill-rule='evenodd'%3E %3Crect style='animation-delay: -0.375s;' width='22' height='64' x='117' rx='9'/%3E %3Crect style='animation-delay: -0.3125s;' width='22' height='64' x='164.526' y='13.213' transform='rotate(30 175.526 45.213)' rx='9'/%3E %3Crect style='animation-delay: -0.25s;' width='22' height='64' x='200.213' y='48.133' transform='rotate(60 211.213 80.133)' rx='9'/%3E %3Crect style='animation-delay: -0.1875s;' width='22' height='64' x='212.846' y='95.449' transform='rotate(90 223.846 127.45)' rx='9'/%3E %3Crect style='animation-delay: -0.125s;' width='22' height='64' x='200.138' y='144.202' transform='rotate(120 211.138 176.202)' rx='9'/%3E %3Crect style='animation-delay: -0.0625s;' width='22' height='64' x='164.824' y='178.864' transform='rotate(150 175.824 210.864)' rx='9'/%3E %3Crect style='animation-delay: 0s;' width='22' height='64' x='117' y='192' transform='rotate(180 128 224)' rx='9'/%3E %3Crect style='animation-delay: 0.0625s;' width='22' height='64' x='69.003' y='179.378' transform='rotate(-150 80.003 211.378)' rx='9'/%3E %3Crect style='animation-delay: 0.125s;' width='22' height='64' x='33.735' y='144.011' transform='rotate(-120 44.735 176.011)' rx='9'/%3E %3Crect style='animation-delay: 0.1875s;' width='22' height='64' x='21' y='96' transform='rotate(-90 32 128)' rx='9'/%3E %3Crect style='animation-delay: 0.25s;' width='22' height='64' x='33.926' y='48.133' transform='rotate(-60 44.926 80.133)' rx='9'/%3E %3Crect style='animation-delay: 0.3125s;' width='22' height='64' x='69.068' y='12.838' transform='rotate(-30 80.068 44.838)' rx='9'/%3E %3C/g%3E %3C/svg%3E"); } .nvr__ns--loading { background-image: var(--spinner-icon); background-position: 50% 50%; background-repeat: no-repeat; background-size: var(--spinner-size) var(--spinner-size); min-height: 48px; min-width: 100%; } .nvr__wrapper { background-color: var(--workspace-state-normal-bg-color); bottom: var(--settings-menu-height); display: none; left: 0; -webkit-overflow-scrolling: touch; overflow-x: hidden; overflow-y: auto; padding: 0; position: absolute; right: 0; top: var(--workspace-top); } .settings .nvr__wrapper { bottom: var(--workspace-bottom); } .expanded-editable > div.listItem > span > .hideOnOpen { display: none !important; /* Important needed to override any local display setting */ } .nvr__wrap { max-width: 100%; } .nvr__wrap .nvr__box { background-color: var(--nvr-background); box-shadow: 0 2px 4px var(--workspace-panel-group-box-shadow); color: var(--nvr-color); margin-top: 16px; } @media only handheld and (max-width: 44.75em),screen and (max-height: 31.75em) { .nvr__wrap { bottom: var(--workspace-smallscreen-bottom); overflow-y: auto; top: 0; } .nvr__wrap .nvr__box { margin: 12px; margin-top: 0; } } .nvr__container { margin: 0 auto; max-width: 800px; padding: 16px; } .nvr__container h1 { font-size: 20px; font-weight: bold; margin-bottom: 8px; padding: 8px; padding-bottom: 0; } .nvr__container .nvr__sub-title { font-size: 12px; font-style: italic; padding-bottom: 8px; padding-left: 8px; } .modifiableList .nvr__sub-title { margin-left: 34px; } .nvr__bullet { list-style: initial; margin-left: 32px; } input.quota, input.description, .search > input { padding: 7px; } .vertical-menu div.list.default li.expandable { --arrowSize: 8px; --arrowSizeFraction: calc(var(--arrowSize) / 4) } .vertical-menu div.list.default li.expandable > ul > li, .vertical-menu div.list.default li.expandable > ul > li > span { cursor: default; } .vertical-menu div.list.default li.expandable { /** * Temporary solution for the expand/collapse arrow until we have SVG's in * place & updated the state design. * The pseudo element is added to the cell rather than to row, because we * want cellClicked to trigger. */ } .vertical-menu div.list.default li.expandable > div > span:first-child::after { border-right: var(--arrowSizeFraction) solid currentColor; border-top: var(--arrowSizeFraction) solid currentColor; content: ''; display: block; height: var(--arrowSize); margin-top: calc(var(--arrowSize) / -1); position: absolute; right: 16px; top: 16px; transform: rotateZ(135deg); transform-origin: 4px 4px; transition: all 0.25s ease-in-out 0s; width: var(--arrowSize); } .expandable-list .expandable-item:last-child { border-bottom: none; } .expandable-list .expandable-row .expandable-column { max-width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .expandable-list .expandable-row .expandable-column:last-child { float: right; max-width: 20%; } .expandable-list .expandable-details { line-height: var(--component-list-line-height); padding: 0 calc(var(--expandablelist-spacing) * 2); padding-bottom: calc(var(--expandablelist-spacing)); } .param-group { margin: 0; margin-bottom: 15px; } .param-group h2 { font-size: 12px; font-weight: bold; margin: 0; } .aca-input-label label { font-size: 11px; padding-right: var(--component-h-spacing); } .component-date, .component-time { --textfieldSpacing: 8px; margin-top: 16px; } .component-date > svg, .component-time > svg { height: 20px; margin: 1px var(--textfieldSpacing) 1px 0; /* When checkbox is clicked the checkbox/text is moved by 1 pixel */ width: 20px; } .component-date > label.setting-label, .component-time > label.setting-label { display: inline-block; font-size: 9px; margin-top: -34px; overflow: visible; padding: 0; width: 0; } .component-date > .numeric-setting, .component-time > .numeric-setting { float: left; margin-right: var(--textfieldSpacing); text-align: center; } .component-date input[type=number]:disabled, .component-time input[type=number]:disabled { background-color: var(--input-state-normal-bg-color); color: var(--input-state-normal-color); } .component-time select.time-period { width: auto; } .time-format { flex: 0 1 100%; margin: 8px 0 0 28px } .time-format label { align-items: center; display: inline-flex; } .nvr__flash-circle { background-color: var(--axis-green); border-radius: 50%; height: 8px; width: 8px; } .nvr__disk-label { margin-left: 10px; padding-right: 10px; } .nvr__disk-h2 { font-weight: bold; } .nvr__disk-status-row { font-size: 12px; margin-top: 0; padding-top: 0; } .nvr__disk-status-row span { width: 40%; } .nvr__disk-item-content > .component { font-size: 10px; } .nvr__disk-item-content > .component span { width: 40%; } .nvr__disk-item-view { border-width: 0 0 1px !important; box-shadow: inherit !important; margin-top: 0 !important; } [data-theme='light'] .nvr__disk-item-view:hover { border-color: var(--axis-gray-3) !important; } [data-theme='dark'] .nvr__disk-item-view:hover { border-color: var(--axis-gray-8) !important; } .nvr__disk-status--loading { background-color: var(--axis-gray-3); } .nvr__disk-status--warning { background-color: var(--axis-yellow-4-brand); } .nvr__disk-status--error { background-color: var(--axis-red); } .nvr__progress-bar { background-color: var(--axis-green); margin-top: 16px; padding: 8px; text-align: right; transition: all 1000ms; } .nvr__disk-fileupload { margin-left: 15px; } .nvr__disk-item-view, .nvr__port-item-view { border-bottom: var(--page-section-border-size) solid var(--component-editable-list-border-bottom); } .nvr__port-item-view { margin-bottom: 0 !important; } .nvr__disk-item-view { margin-bottom: 0 !important; } .nvr__port-item-view > .editableListContent { float: left; width: 100%; } .nvr__port--connected { color: var(--axis-green); } .nvr__port--not-connected { color: var(--axis-gray-4); } .nvr__port--error { color: var(--axis-red); } .nvr__port-status { float: left; font-size: 12px; margin-left: 4px; width: 100%; } .nvr__port-box { float: left; } .nvr__div-system-status { padding: 2px; text-align: center; } .nvr__div-system-status h1 { font-size: 20px; font-weight: bold; } .nvr__main-status-feed { font-size: 12px; padding: 8px; } .nvr__div-main-status { margin: 4px; } .nvr__port-notification { background-color: var(--axis-blue-4-brand); border-radius: 3px; height: 14px; left: 15px; opacity: 0.9; padding: 2px; position: absolute; text-align: center; top: -32px; width: 14px; } .nvr__port-notification svg { bottom: 25px; color: var(--axis-white); margin: 0 auto; margin-bottom: 8px; max-height: 10px; max-width: 11px; padding: 0; text-align: center; top: 10px; vertical-align: middle; } .nvr__port-notification:hover { animation-duration: 200ms; animation-iteration-count: 2; animation-timing-function: linear; transform-origin: 50% 50%; } .nvr__port-row-1, .nvr__port-row-2 { float: left; width: 100%; } .nvr__port-name { display: inline-block; font-weight: bold; overflow: hidden !important; text-overflow: ellipsis; white-space: nowrap; width: 100%; } .nvr__spinner-port { left: 40%; position: absolute !important; top: 16px; } .nvr__spinner-port-icon > svg { height: 20px; width: 20px; } .nvr__port-button { float: right; } .nvr__btn-refresh-ports > span { color: var(--button-toggle-state-normal-color); } .nvr__port-inner-content > .component > :nth-child(1) { width: 30%; } .nvr__port-content > .component > :nth-child(1) { width: 30%; } .nvr__port-number { left: -35px; margin-top: 25px; } .nvr__port-name-container { left: 45px; margin-top: -30px; position: absolute !important; width: 60%; } @media screen and (min-device-width: 800px) { .nvr__port-item-view { float: left; width: 25%; } .nvr__port-item-view .nvr__port-content-tablet { display: none; } .nvr__port-content--not-active { max-height: 0; } .nvr__port-content--not-active > div { display: none; max-height: 0; } .nvr__port-content--active { background-color: var(--desktop-item-ports-background); display: block; max-height: 250px; padding: 16px; width: 100%; } .nvr__port-content--active > div { display: block; font-size: 10px; max-height: none; } .nvr__port-row-rules { float: left; margin-top: 0; width: 100%; } li.pointer.expandable-editable.nvr__port-item-view.expanded-editable.list-transition { background-color: var(--desktop-item-ports-background); border-bottom: 1px solid var(--desktop-item-ports-background); box-shadow: none; } .nvr__connected-device-name { left: 1px; margin-top: -5px; } .nvr__connected-device-ip { margin-left: 1px; margin-top: -2px; } .nvr__connected-device-ip a { color: var(--axis-blue-5); font-size: 10px; } } @media screen and (max-device-width: 799px) { .nvr__port-item-view { background-color: var(--axis-gray-4); float: left; width: 100%; } .nvr__port-item-view .nvr__port-row-rules { display: none; } .nvr__port-item-view .nvr__port-content-tablet { float: right !important; max-width: 16px; min-width: 100%; } .nvr__port-row-1:last-child { border-bottom: var(--page-section-border-size) solid var(--component-editable-list-border-bottom) !important; } .nvr__connected-device-name { left: 5px; margin-top: -5px; } .nvr__connected-device-ip { margin-left: 5px; margin-top: -2px; } .nvr__connected-device-ip a { color: var(--axis-blue-5); font-size: 10px; } } .nvr__port-list-horizontal-vertical > div.editablelist { font-size: var(--list-font-size); } .nvr__port-list-horizontal-vertical > div.editablelist .list-icon { width: 24px; } .nvr__port-list-horizontal-vertical > div.editablelist .listItem { min-height: 45px; } .nvr__port-list-horizontal-vertical > div.editablelist li { background-color: var(--nvr-background); box-shadow: 0 2px 4px var(--workspace-panel-group-box-shadow); position: relative; } .nvr__port-list-horizontal-vertical > div.editablelist li div { flex-wrap: nowrap; position: relative; } .nvr__port-list-horizontal-vertical > div.editablelist li div.editableListContent { cursor: default; } .nvr__port-list-horizontal-vertical > div.editablelist li .cell { display: block; line-height: 16px; padding: 6px; white-space: nowrap; } .nvr__port-list-horizontal-vertical > div.editablelist span.nvr__sub-title { left: 48px; margin-top: 26px; position: absolute; } .nvr__port-list-horizontal-vertical > div.editablelist li:not(.expanded-editable) > div.editableListContent { max-height: 0; overflow: hidden; } .nvr__port-list-horizontal-vertical > div.editablelist .expanded-editable > div.editableListContent { max-height: 600px; overflow: hidden; padding: 16px; } .nvr__port-list-horizontal-vertical > div.editablelist li:not(.list-transition) > div.editableListContent { opacity: 0; } .nvr__port-list-horizontal-vertical > div.editablelist li.list-transition > div.editableListContent { opacity: 1; } .nvr__port-list-horizontal-vertical > div.editablelist.default li.expandable-editable { --arrowSize: 8px; --arrowSizeFraction: calc(var(--arrowSize) / 4); } .nvr__port-list-horizontal-vertical > div.editablelist.default li.expandable-editable > div > span:first-child::after { border-right: var(--arrowSizeFraction) solid currentColor; border-top: var(--arrowSizeFraction) solid currentColor; content: ''; display: block; height: var(--arrowSize); margin-top: calc(var(--arrowSize) / -2); position: absolute; right: 16px; top: 16px; transform: rotateZ(135deg); transform-origin: 4px 4px; transition: all 0.25s ease-in-out 0s; width: var(--arrowSize); } .nvr__port-list-horizontal-vertical > div.editablelist.default li.expandable-editable.expanded-editable > div > span:first-child::after { border-color: var(--axis-blue-5); margin-top: calc(var(--arrowSizeFraction) * -1); transform: rotateZ(-45deg); } .nvr__port-list-horizontal-vertical > div.editablelist.default li.expandable-editable { margin-bottom: 8px; } [data-theme='dark'] { --component-editable-list-border-bottom: var(--axis-gray-10); --nvr-background: var(--axis-gray-9); --nvr-color: var(--axis-white); --desktop-item-ports-background: var(--axis-gray-8); } [data-theme='light'] { --component-editable-list-border-bottom: var(--axis-gray-3); --nvr-background: var(--axis-gray-1); --nvr-color: var(--axis-gray-8); --desktop-item-ports-background: var(--axis-gray-2); } .component-presetInfo { display: block; } .component-presetInfo > div + div { margin-top: 16px; } .component-presetInfo > .presetInfoGroup > div + div { margin-top: 8px; } #AXIS-dewarpViewPopupPopup li { margin-bottom: 15px; } #AXIS-dewarpViewPopupPopup svg { display: block; float: right; height: 24px; margin-left: 25px; margin-right: 50px; margin-top: -3px; } /* @end */ /* @group Controls */ .control { position: relative; } .control svg { max-height: 100%; min-width: 16px; } .control .vertical-menu { bottom: 29px; text-align: left } .control .vertical-menu:empty { display: none; } .control .vertical-menu.menu-dispostion-above.arrow-marker.arrow-marker--bottom::after { left: 7px; } .control .btn svg { height: 16px; width: 16px; } .control .filled .icon { background-color: var(--axis-gray-12); border-radius: 2px; font-weight: bold; padding: 0 5px; } .control .filled.selected:not(:focus) { border-color: transparent; } .control .filled.selected .icon, .control .filled.selected .label { background-color: var(--axis-yellow-4-brand); color: var(--axis-black); } .control .filled svg { height: 14px; width: 14px; } .control .filled .label, .control .filledLabel .label { background-color: var(--axis-gray-12); border-radius: 3px; font-weight: bold; padding: 1px 5px; } .menu-button { background-image: var(--source-select-toggle-up-bg-img); background-position: calc(100% - 8px) 50%; background-repeat: no-repeat; background-size: auto 11px; max-width: 160px; overflow: hidden; padding-left: 5px; padding-right: 24px; text-overflow: ellipsis; white-space: nowrap } .menu-button.selected { background-image: var(--source-select-toggle-down-bg-img); } .menu-button .label { max-width: 131px; overflow: hidden; text-overflow: ellipsis; } .controls .control.fullScreen { margin-right: 0; } .controls .control.fullScreen .btn { background-color: transparent; border-color: transparent; margin-right: 0; padding: 0; width: 28px; } /* Live view customization of controls */ .videocontainer-wrap.with-controls .controls { opacity: 1 } .videocontainer-wrap.with-controls .controls.invisible { opacity: 0; } .videocontainer-wrap { --liveview-controls-padding-left: 3px; --divider-color: var(--axis-gray-12); --background-color: var(--axis-gray-11-values); --liveview-controls-state-active-color: var(--axis-gray-5); --liveview-controls-state-hover-color: var(--axis-gray-4); --liveview-controls-state-normal-bg-color: var(--axis-black); --liveview-controls-button-bg-color: var(--axis-gray-10); --liveview-controls-button-state-disabled-color: var(--axis-gray-7); --liveview-controls-button-state-normal-border-color: var(--axis-gray-10); --liveview-controls-button-state-normal-color: var(--axis-white); } .videocontainer-wrap .controls { bottom: 0; left: 0; opacity: 0; position: absolute; right: 0; text-align: center; transition: opacity 250ms ease-in; } .videocontainer-wrap .controls > .left, .videocontainer-wrap .controls > .right { display: none; width: 0; } .videocontainer-wrap .controls > .ptz { height: 28px; margin-top: -28px; padding-bottom: var(--video-outline-width); } .videocontainer-wrap .controls .spacer { margin: auto; } .videocontainer-wrap .controls .btn { background-color: var(--liveview-controls-button-bg-color); border-color: var(--liveview-controls-button-state-normal-border-color); color: var(--liveview-controls-button-state-normal-color); min-height: 0; padding: 0 4px } .videocontainer-wrap .controls .btn[disabled] { color: var(--liveview-controls-button-state-disabled-color); } .videocontainer-wrap .controls .btn:hover { color: var(--liveview-controls-state-hover-color); } .videocontainer-wrap .controls .btn:active { color: var(--liveview-controls-state-active-color); } .videocontainer-wrap .controls .btn:focus { border-color: var(--button-state-focus-border-color); z-index: 1; /* make sure the border is visible above other elements */ } .videocontainer-wrap .controls .btn .icon { display: inline-block; pointer-events: none; } /* Clicks pass through to the button enabling the focus state */ .videocontainer-wrap .controls .btn .label { pointer-events: none; } /* Rules for hiding/showing icon/label based on resolution */ .videocontainer-wrap .controls .presetSelect .btn-control.has-menu .icon, .videocontainer-wrap .controls .sourceSelect .btn-control.has-menu .icon, .videocontainer-wrap .controls .videoFormat .btn-control.has-menu .icon { display: none; } @media screen and (max-width: 47.94em) { .videocontainer-wrap .controls .presetSelect .btn-control.has-menu .icon, .videocontainer-wrap .controls .sourceSelect .btn-control.has-menu .icon, .videocontainer-wrap .controls .videoFormat .btn-control.has-menu .icon { display: inline-block; } .videocontainer-wrap .controls .presetSelect .btn-control.has-menu .label, .videocontainer-wrap .controls .sourceSelect .btn-control.has-menu .label, .videocontainer-wrap .controls .videoFormat .btn-control.has-menu .label { display: none; } } .videocontainer-wrap .controls .vertical-menu { background-color: transparent; border-color: var(--divider-color) } .videocontainer-wrap .controls .vertical-menu:empty { background-color: rgba(var(--axis-gray-11-values), 0.8); display: block; } .videocontainer-wrap .controls .vertical-menu::after { border-top-color: var(--divider-color); } .videocontainer-wrap .controls .vertical-menu.waiting { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E %3Cstyle%3E /* %3C!%5BCDATA%5B */ @keyframes spinner-fade %7B0%25 %7Bopacity: 1 %7D 80%25 %7Bopacity: 0 %7D 100%25 %7Bopacity: 0 %7D %7D g.spinner rect %7Bwill-change: opacity; opacity: 0; animation: spinner-fade 0.75s linear infinite;%7D /* %5D%5D%3E */ %3C/style%3E %3Cg class='spinner' fill='none' fill-rule='evenodd'%3E %3Crect style='animation-delay: -0.375s;' width='22' height='64' x='117' fill='%23FFFFFF' rx='9'/%3E %3Crect style='animation-delay: -0.3125s;' width='22' height='64' x='164.526' y='13.213' fill='%23FFFFFF' transform='rotate(30 175.526 45.213)' rx='9'/%3E %3Crect style='animation-delay: -0.25s;' width='22' height='64' x='200.213' y='48.133' fill='%23FFFFFF' transform='rotate(60 211.213 80.133)' rx='9'/%3E %3Crect style='animation-delay: -0.1875s;' width='22' height='64' x='212.846' y='95.449' fill='%23FFFFFF' transform='rotate(90 223.846 127.45)' rx='9'/%3E %3Crect style='animation-delay: -0.125s;' width='22' height='64' x='200.138' y='144.202' fill='%23FFFFFF' transform='rotate(120 211.138 176.202)' rx='9'/%3E %3Crect style='animation-delay: -0.0625s;' width='22' height='64' x='164.824' y='178.864' fill='%23FFFFFF' transform='rotate(150 175.824 210.864)' rx='9'/%3E %3Crect style='animation-delay: 0s;' width='22' height='64' x='117' y='192' fill='%23FFFFFF' transform='rotate(180 128 224)' rx='9'/%3E %3Crect style='animation-delay: 0.0625s;' width='22' height='64' x='69.003' y='179.378' fill='%23FFFFFF' transform='rotate(-150 80.003 211.378)' rx='9'/%3E %3Crect style='animation-delay: 0.125s;' width='22' height='64' x='33.735' y='144.011' fill='%23FFFFFF' transform='rotate(-120 44.735 176.011)' rx='9'/%3E %3Crect style='animation-delay: 0.1875s;' width='22' height='64' x='21' y='96' fill='%23FFFFFF' transform='rotate(-90 32 128)' rx='9'/%3E %3Crect style='animation-delay: 0.25s;' width='22' height='64' x='33.926' y='48.133' fill='%23FFFFFF' transform='rotate(-60 44.926 80.133)' rx='9'/%3E %3Crect style='animation-delay: 0.3125s;' width='22' height='64' x='69.068' y='12.838' fill='%23FFFFFF' transform='rotate(-30 80.068 44.838)' rx='9'/%3E %3C/g%3E %3C/svg%3E"); } .videocontainer-wrap .controls div.list { background-color: transparent; } .videocontainer-wrap .controls div.list li { background-color: rgba(var(--background-color), 0.9); border-color: var(--divider-color); color: var(--axis-white); } .videocontainer-wrap .controls div.list li > div:hover { background-color: var(--axis-yellow-4-brand); color: var(--axis-black); } .videocontainer-wrap .controls div.list li > div:hover svg { fill: currentColor; } .videocontainer-wrap .controls div.list li > div svg { fill: var(--axis-yellow-4-brand); } .videocontainer-wrap .controls div.list li ul li { background-color: rgba(var(--background-color), 0.8); } .videocontainer-wrap .livePanel, .videocontainer-wrap .recordingsPanel { background-color: var(--liveview-controls-state-normal-bg-color); display: flex; padding-left: var(--liveview-controls-padding-left); text-align: left; white-space: nowrap; } .videocontainer-wrap .livePanel.invisible { display: none; } .videocontainer-wrap .control { /* display: inline-block; */ margin: 4px 12px 2px 0; vertical-align: top } .videocontainer-wrap .control.liveVideoPause { margin: 4px 6px 2px 0; } /* Pause button in the live view control panel */ .control.liveVideoPause .btn-control { background-color: var(--axis-black); border: none; padding: 0; vertical-align: middle; } .control.liveVideoPause .btn-control.hidden { visibility: hidden; } .control.volume .vertical-menu { background-color: rgba(var(--background-color), 0.9); } .control.volume .component-sliderVertical .component-slider-inner { --component-slider-fill-state-normal-bg-color: var(--axis-yellow-4-brand); } .control.volume .btn.btn-control { vertical-align: middle; } .control.volume .btn-disabled { opacity: 0.5; pointer-events: none; } @keyframes flash { from { opacity: 0; } to { opacity: 1; } } .flash-animation::before { animation: flash 0.1s linear alternate 2; background-color: var(--axis-white); content: ''; display: block; height: 100%; opacity: 0; position: absolute; width: 100%; } .oneToOne .tooltip { height: 100%; left: 0; position: absolute; top: 0; white-space: normal; width: 100% } .oneToOne .tooltip .tooltipContent { background-color: var(--liveview-menu-video-settings-bg-color); border-color: var(--liveview-menu-video-settings-bg-color); color: var(--liveview-menu-video-settings-color); margin: 0 -5px 10px 0; right: 0 } .oneToOne .tooltip .tooltipContent svg { height: 10px; width: 10px; } .oneToOne .tooltip .tooltipContent p { line-height: 16px; } [data-theme='light'] .lvc-controlbar { --lvc-bar-background-color: var(--axis-gray-3); } [data-theme='dark'] .lvc-controlbar { --lvc-bar-background-color: var(--axis-gray-9); } .nav-lvc { transition: transform 100ms 100ms ease-in-out } .nav-lvc .settings-toggle svg { /* Match the height of the controls by adding 2px on top and bottom opposed to `margin: 6px;` that is the default in `settings.css` */ margin: 8px 6px; } .nav-lvc:not(.isOffscreen) { transition: transform 100ms; } /* Arrow for scrolling left or right in `.lvc-controls` */ .lvc-arrow { background-color: var(--lvc-bar-background-color); border: none; cursor: pointer; flex: 0 0 auto; min-width: 0; padding: 0 } .lvc-arrow:disabled { cursor: auto; } .lvc-arrow.lvc-arrow-hidden { visibility: hidden; } .lvc-arrow:focus { background-color: var(--axis-gray-4); } /* Size of `.lvc-btn` or `.lvc-arrow` is based on the size of the svg. `height`/`width` + `margin` */ .lvc-arrow > svg, .lvc-btn > svg { display: block; height: 24px; margin: 6px 10px; pointer-events: none; transition: transform 100ms ease-out; width: 24px; } /* Indicating an active button, for example when recording, fan or heater is active. For buttons with a countdown, like heater, a progress bar is used to display the progress. */ .lvc-active-indicator { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; height: 4px; left: 0; opacity: 0; position: absolute; top: 0; transform: translateY(-100%); transition: all 100ms ease-out; width: 100% } .lvc-active-indicator.lvc-active-indicator-visible { opacity: 1; } .lvc-controlbar { align-self: stretch; background-color: var(--lvc-bar-background-color); } .lvc-controls { display: flex; flex: 1 1 auto; overflow: hidden; white-space: nowrap; width: 100%; } .lvc-control { --control-margin: 2px; display: flex; margin: var(--control-margin) 0; /* * Unclip the menu inside the button from being clipped by * `overflow: hidden` in `.lvc-controls` */ position: static; } .lvc-control .vertical-menu.menu-dispostion-above.arrow-marker.arrow-marker--bottom::after { left: 20px; } .lvc-control.menu-open .lvc-btn, .lvc-control.active .lvc-btn { box-shadow: inset 5px 0 10px 0 var(--lvc-button-active-box-shadow-color), inset -5px 0 10px 0 var(--lvc-button-active-box-shadow-color); } .lvc-control.active .lvc-btn::after, .lvc-control.active .lvc-btn::before { opacity: 1; } .lvc-control.active .lvc-btn > svg { color: var(--lvc-button-color); transform: scale(0.85) translateY(2px); } .lvc-control.active .lvc-active-indicator { opacity: 1; transform: translateY(0%); } .lvc-control:focus { outline: none; } .lvc-control + .lvc-control { margin-left: var(--control-margin); } .lvc-osccontrol { display: flex; margin-left: 2px; } .lvc-osccontrol .lvc-control:last-of-type .lvc-menu { min-width: 270px; width: auto; } .lvc-btn { background-color: var(--lvc-button-background-color); background-image: none; border: none; color: var(--lvc-button-color); cursor: pointer; margin: 0; overflow: hidden; padding: 0; position: relative } .lvc-btn:active, .lvc-btn:hover, .lvc-btn.selected { background-color: var(--lvc-button-background-color); background-image: none; box-shadow: none; color: var(--lvc-button-color); } .lvc-btn:active { background-color: var(--axis-gray-2); } .lvc-btn:focus { outline: none; } /* Grouping two related buttons closer together in `.lvc-controls` */ .lvc-adjacent::before { align-self: center; background-color: var(--lvc-bar-background-color); content: ''; display: block; flex: 0 0 auto; height: 10px; margin: 0 -1px; width: 2px; z-index: 3; } .lvc-adjacent.active::before { content: none; } .lvc-control + .lvc-adjacent { /* Set margin to 0 to pull the controls adjacent to each other */ margin-left: 0; } .lvc-controlbar .vertical-menu { bottom: var(--lvc-verticalMenu-bottom); z-index: 3 } @media only screen and (max-width: 24.75em) { .lvc-controlbar .vertical-menu { left: 2%; max-height: calc(80vh - var(--page-header-height)); overflow-y: auto; right: 2%; top: auto; width: auto } } .lvc-menu { background-color: var(--liveview-menu-bgcolor); box-shadow: var(--modal-box-shadow) var(--lvc-menu-box-shadow-color); color: var(--liveview-menu-state-normal-color); width: 270px; } .lvc-menu a:not(:first-child) { background-color: var(--liveview-menu-bgcolor); } .lvc-menu .editPorts { margin: 10px; text-align: end; } .lvc-menu .editPorts #editBtn { color: var(--liveview-menu-state-normal-color); margin: 0; min-width: var(--button-min-width); } .lvc-menu .menu-top { display: flex; justify-content: space-between; margin: 10px 0; } .lvc-menu .setupContainer { border: none; color: var(--liveview-menu-state-normal-color); cursor: pointer; display: flex; justify-content: space-between; margin-right: 10px; padding: 0; } .lvc-menu .setupContainer.lvcPorts button { align-items: baseline; display: flex; flex-direction: row-reverse; font-size: 11px; } .lvc-menu .setupContainer.lvcPorts button svg { height: 20px; margin-left: 5px; width: 20px; } .lvc-menu .setupStorage { border: none; color: var(--liveview-menu-state-normal-color); cursor: pointer; display: flex; justify-content: center; margin-bottom: 10px; } .lvc-menu .component-title { margin: 0 0 0 10px; } .lvc-menu .panel-group .component-title { display: none; } .lvc-menu .lvc-temperature-control { margin: 0 10px; } .lvc-menu .lvc-temperature-control .lvc-timer { align-items: center; display: flex; } .lvc-menu .lvc-temperature-control .icon { color: var(--icon-state-normal-color); height: 20px; width: 20px; } .lvc-menu .lvc-temperature-control figcaption { color: var(--icon-label-state-normal-color); font-size: 14px; font-weight: bold; margin-left: 10px; } .lvc-menu .lvc-light-control { display: flex; flex-direction: column; margin: 0 10px; min-height: 124px; } .lvc-menu .lvc-light-control .brightnessSlider { margin-bottom: 10px; margin-top: 10px; } .lvc-menu .lvc-light-control .small { font-size: var(--settings-small-size); margin: 8px 0; } .lvc-menu .lvc-light-control [id^='AXIS-lvc-automaticIntensity-led'] li { display: inline-block; margin-right: 10px; } .lvc-menu #AXIS-lvcGuardTourList { /* To move element to next line in flex layout. More info on http://stackoverflow.com/questions/28755460/how-to-break-line-in-a-flex-layout */ flex-wrap: wrap; padding: 0 10px 10px } .lvc-menu #AXIS-lvcGuardTourList::after { content: ''; width: 100%; } .lvc-menu #AXIS-lvcGuardTourList select { max-width: 100%; width: 100%; width: auto; } .lvc-menu #AXIS-lvcGuardTourList button { margin-left: auto; margin-top: 10px; order: 1; } .lvc-menu .buttons { margin: 10px; text-align: right; } .lvc-menu #lvcPortWrapper { margin: 20px 15px; } .lvc-menu #top { display: flex; justify-content: space-between; } .lvc-menu #top .component { margin: 0 10px 0 0; min-height: 0; } .lvc-menu #top .btn { background-color: var(--liveview-menu-bgcolor); border: none; height: 20px; margin: 0 5px 0 0 } .lvc-menu #top .btn:hover { box-shadow: none; } .lvc-menu #top .btn.active { color: var(--axis-blue-5); cursor: auto; } .lvc-menu #top .pulseIcon { align-self: flex-end; color: var(--icon-state-normal-color); height: 15px; width: 20px; } .lvc-menu #left { display: flex; justify-content: space-between; } .lvc-menu #left .component-title { height: 100%; margin-bottom: 5px; margin-left: 15px; overflow: hidden; text-overflow: ellipsis; width: 150px; } .lvc-menu #pulseStatus { margin-left: 35px; } .lvc-menu #pulseInput { align-items: baseline; display: flex; margin-left: 35px; } .lvc-menu #pulseInputNbr { margin-right: 5px; } .lvc-menu input[type='number'] { margin-top: 3px; } .lvc-menu select { margin-top: 0; } .lvc-capture .lvc-menu { outline: 1px solid hsla(0, 0%, 70%, 0.3); outline-offset: -1px; width: auto; } .lvc-capture li { align-items: center; cursor: pointer; display: flex; list-style-type: none; padding: 7px 10px } .lvc-capture li:hover { background-color: var(--liveview-menu-list-hover-bgcolor); } .lvc-capture .capture-menu-icon { color: var(--lvc-button-color); display: flex; flex: 0 0 auto; } .lvc-capture .capture-menu-icon svg { height: 20px; width: 20px; } .lvc-capture .capture-menu-label { cursor: pointer; flex: 1 1 auto; padding-left: 5px } @media only screen and (max-width: 24.75em),screen and (max-height: 24.75em) { .lvc-capture .capture-menu-label { font-size: 14px } } .lvc-menu .illumination { align-items: center; display: flex; flex-direction: row; justify-content: flex-start; line-height: 23px; min-height: 23px; } .lvc-menu .illumination > .tooltip-wrapper { margin-left: 10px; width: 15px; } .lvc-light #setupIcon svg, .lvc-guardtour #setupIcon svg { height: 20px; margin-left: 5px; width: 20px; } /* Fix in the next story: * http://agile-dev/project/jonasgn-aca-release-10/us/597?kanban-status=1976, * antonbs, 2016-08-01 */ /* stylelint-disable selector-max-specificity */ #sourceSelect .btn { padding-left: 2px; vertical-align: middle; } #sourceSelect .btn .source-icon { margin-right: 4px; vertical-align: middle } #sourceSelect .btn .source-icon.numeric { color: var(--axis-black); } #sourceSelect .btn .label { display: none; vertical-align: middle; } /* Default styling for the source icon in the list & button */ #sourceSelect .source-icon { color: var(--source-icon-state-normal-color); display: inline-block; height: 16px; line-height: 16px; text-align: center; width: 16px; } #sourceSelect .source-icon svg { color: var(--source-icon-state-normal-bg-color); fill: var(--source-icon-state-normal-bg-color); } #sourceSelect .source-icon.active svg { color: var(--source-icon-state-active-bg-color); fill: var(--source-icon-state-active-bg-color); } #sourceSelect .source-icon.active.numeric { background-color: var(--source-icon-state-active-bg-color); } #sourceSelect .source-icon.active.spin { background-color: transparent; color: transparent; } #sourceSelect .source-icon.active.spin svg { color: var(--source-icon-state-active-bg-color); left: 3px; position: absolute; } #sourceSelect .source-icon.numeric { background-color: var(--source-icon-state-normal-bg-color); } #sourceSelect .source-icon + label { display: inline-block; height: 24px; line-height: 24px; } .settings #sourceSelect div.list { max-height: calc(100vh - (var(--page-header-height) + var(--page-settings-height) + var(--page-footer-height) + var(--video-feedback-bottom-margin) + var(--controls-bottom-height) + 2)); } @media only screen and (max-width: 24.75em),screen and (max-height: 24.75em) { #sourceSelect div.list { background-color: var(--workspace-full-screen-state-normal-bg-color) !important } } #sourceSelect div.list li { color: var(--axis-white); } #sourceSelect div.list li .source-icon { display: block; /* Fixes an issue where additional padding was added */ } #sourceSelect div.list li:hover { color: var(--axis-black); } #sourceSelect div.list li.active { /* But do highlight them on hover */ } /* Do not highlight active items by default */ #sourceSelect div.list li.active > div { background-color: transparent; } #sourceSelect div.list li.active:hover > div { background-color: var(--axis-yellow-4-brand); color: var(--axis-black); } /* on active state */ #sourceSelect div.list li.active .source-icon svg { color: var(--source-icon-state-active-bg-color); fill: var(--source-icon-state-active-bg-color); } /* Ensures that the .numeric and icons are colored correctly based */ #sourceSelect div.list li.active .source-icon.numeric { background-color: var(--source-icon-state-active-bg-color); color: var(--source-icon-state-active-color); } #sourceSelect div.list li.active:hover .source-icon svg { color: var(--source-icon-state-normal-bg-color); fill: var(--source-icon-state-normal-bg-color); } #sourceSelect div.list li.active:hover .source-icon.numeric { background-color: var(--source-icon-state-normal-bg-color); color: var(--source-icon-state-normal-color); } #sourceSelect div.list li li { text-indent: 28px; } #sourceSelect div.list span:nth-child(2) { display: inline-block; margin-right: auto; max-width: calc(var(--source-select-label-max-width) + 32px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #sourceSelect div.list span:nth-child(3) { /* The presets-info + arrow */ align-self: flex-end; background-image: var(--source-select-list-toggle-down-bg-img); /* FIXME */ background-position: calc(100% - 8px) 50%; background-repeat: no-repeat; background-size: auto 11px; } #sourceSelect div.list li.expanded span:nth-child(3) { background-image: var(--source-select-list-toggle-up-bg-img); /* FIXME */ } #sourceSelect div.list li.disabled { color: var(--source-icon-state-disabled-color); pointer-events: none; } #sourceSelect div.list li.disabled svg { fill: var(--source-icon-state-disabled-fill); } #sourceSelect div.list li.disabled .source-icon.numeric { background-color: #333; color: #555; } @media screen and (min-width: 48em) { #sourceSelect .btn .label { display: inline-block; margin-right: auto; max-width: calc(var(--source-select-label-max-width)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* stylelint-enable selector-max-specificity */ /* High specificity in this file is needed because of * _controls.css file */ .videoSettings.control { position: static } .videoSettings.control .icon svg { height: 18px; width: 18px; } .videoSettings.control { /* Overwrite the position of the arrow * for the current control */ } .videoSettings.control .vertical-menu.up.arrow-marker.arrow-marker--bottom::after { left: auto; right: 100px; } .videoSettings.control .btn { background-color: transparent; border-color: transparent; } .videoSettings.control menu.vertical-menu { background-color: var(--liveview-menu-video-settings-bg-color); bottom: calc(100% + 10px); color: var(--liveview-menu-video-settings-color); right: 10px; } .videoSettings.control .component-onoff { flex-wrap: nowrap } .videoSettings.control .component-onoff > label { white-space: nowrap; } .videoSettings.control .videoSettingsMenu { display: flex; flex-direction: column; min-width: 200px; padding: 10px } .videoSettings.control .videoSettingsMenu header { align-items: center; display: flex; font-weight: bold; padding-bottom: 25px } .videoSettings.control .videoSettingsMenu header label { flex: 1; } .videoSettings.control .videoFormat { cursor: pointer; display: flex; padding: 5px 0 } .videoSettings.control .videoFormat label { cursor: pointer; flex: 1; font-size: 11px; } .videoSettings.control .videoFormat.expand-collapse-arrow--after::after { --expand-collapse-arrow-size: 7px; --expand-collapse-arrow-size-divider: -2; --expand-collapse-arrow-rotation: 45deg; margin-left: 6px; margin-right: 2px; } .videoSettings.control .videoSettingsFormatSelect { min-width: 200px; padding: 10px 10px 0 } .videoSettings.control .videoSettingsFormatSelect .expand-collapse-arrow--before::before { --expand-collapse-arrow-size: 7px; --expand-collapse-arrow-size-divider: -2; --expand-collapse-arrow-rotation: 225deg; margin-right: 6px; } .videoSettings.control .videoSettingsFormatSelect div.list { font-size: 11px } .videoSettings.control .videoSettingsFormatSelect div.list label { cursor: pointer; display: flex; padding: 0 0 14px 1px; } .videoSettings.control .videoSettingsFormatSelect div.list ul { align-items: flex-end; display: flex; flex-direction: column } .videoSettings.control .videoSettingsFormatSelect div.list ul li { align-items: center; background-color: transparent; border: none; cursor: pointer; display: flex; justify-content: flex-end; line-height: 25px; width: 100% } .videoSettings.control .videoSettingsFormatSelect div.list ul li p.selected { height: 15px; width: 15px } .videoSettings.control .videoSettingsFormatSelect div.list ul li p.selected::before { border: solid var(--axis-yellow-4-brand); border-width: 0 2px 2px 0; content: ''; display: inline-block; height: 11px; left: 3px; position: absolute; transform: rotate(45deg); width: 6px; } .videoSettings.control .videoSettingsFormatSelect div.list ul li p:last-child { flex: 1; text-align: right; } .videoSettings.control input[type='checkbox'].on-off:checked + label { background-color: var(--liveview-menu-video-settings-on-off-checked-bg-color); } .videoSettings.control .refresh button { padding: 0; } .videoSettings.control .refresh .icon { display: inline; } .videoSettings.control input[type='checkbox'].on-off:disabled + label { opacity: 0.5; } .adaptiveStreamSettingsGear { fill: none; } .adaptiveStreamSettingsIcon { fill: var(--liveview-menu-video-settings-icon-color); } .adaptiveStreamSettingsIconText { fill: var(--liveview-menu-video-settings-icon-text-color); } #AXIS-adaptiveStream-OnOffSwitch label, #AXIS-statisticsControl label, #AXIS-ptzControl label { flex: 1; } .presetSelect .btn { vertical-align: middle } .presetSelect .btn:first-child svg { height: 13px; width: 13px; } .presetSelect > .btn > span.label { display: inline-block; max-width: 125px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; } .presetSelect .btn.btn-adjacent svg { padding: 1px; } .presetSelect .btn:first-child.dirty { color: var(--axis-gray-5); } .presetSelect div.list.check li div span:first-child { min-width: 24px; } @media only screen and (max-width: 24.75em),screen and (max-height: 24.75em) { .presetSelect div.list { background-color: var(--workspace-full-screen-state-normal-bg-color) !important } } .presetSelect div.list li { color: var(--axis-white) } .presetSelect div.list li:hover { color: var(--axis-black); } .presetSelect div.list li.active { /* But do highlight them on hover */ } /* Do not highlight active items by default */ .presetSelect div.list li.active > div { background-color: transparent; } .presetSelect div.list li.active:hover > div { background-color: var(--axis-yellow-4-brand); color: var(--axis-black); } /* @end */ /* @group Pages */ body.axis-flyer { background-attachment: fixed; background-image: url("data:image/svg+xml,%3Csvg focusable='false' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1920 988' enable-background='new 0 0 1920 988' xml:space='preserve' width='1920' height='988'%3E %3Cpolygon fill='none' points='1920,179.2 1111.2,988 1920,988 '/%3E %3ClinearGradient id='SVGID_1_' gradientUnits='userSpaceOnUse' x1='35762.3984' y1='30697.1484' x2='-4635.2734' y2='-9700.5234' gradientTransform='matrix(0.1333 0 0 -0.1333 721.9333 512.2)'%3E %3Cstop offset='0' style='stop-color:%23CBC1B8'/%3E %3Cstop offset='8.893950e-02' style='stop-color:%23D8CFC7'/%3E %3Cstop offset='1' style='stop-color:%23D8CFC7'/%3E %3C/linearGradient%3E %3Cpolygon fill='url(%23SVGID_1_)' points='1920,0 1719.8,0 731.8,988 1111.2,988 1920,179.2 '/%3E %3ClinearGradient id='SVGID_2_' gradientUnits='userSpaceOnUse' x1='-6066.5405' y1='-16399.1855' x2='11527.873' y2='1195.2294' gradientTransform='matrix(0.1333 0 0 0.1333 414.3876 383.0234)'%3E %3Cstop offset='0' style='stop-color:%23E8BD5D'/%3E %3Cstop offset='0.1655' style='stop-color:%23FEC94B'/%3E %3Cstop offset='1' style='stop-color:%23FEC94B'/%3E %3C/linearGradient%3E %3Cpolygon fill='url(%23SVGID_2_)' points='1856.6,257.9 1598.8,0 1219.3,0 1856.6,637.3 '/%3E %3ClinearGradient id='SVGID_3_' gradientUnits='userSpaceOnUse' x1='7797.5005' y1='-225.7499' x2='-3156.1072' y2='-11179.3574' gradientTransform='matrix(0.1333 0 0 -0.1333 721.9333 512.2)'%3E %3Cstop offset='0' style='stop-color:%23E8BD5D'/%3E %3Cstop offset='0.1655' style='stop-color:%23FEC94B'/%3E %3Cstop offset='1' style='stop-color:%23FEC94B'/%3E %3C/linearGradient%3E %3Cpolygon fill='url(%23SVGID_3_)' points='1666.7,447.4 1126.2,988 1505.6,988 1856.5,637.2 '/%3E %3C/svg%3E"); background-position: right center; background-repeat: no-repeat; background-size: cover; } #pageWrap { bottom: 0; left: 0; overflow: hidden; position: absolute; right: 0; top: 0; } #pageWrap.overlay { background-image: none; opacity: 0.1; pointer-events: none; visibility: visible; } loading-content, #pageWrap { transition: 250ms opacity linear; } loading-content { align-items: center; color: var(--workspace-h1-state-normal-color); display: flex; flex-direction: column; left: 50%; max-width: 360px; overflow: hidden; padding: 10px; position: absolute; text-align: center; top: 50%; transform: translateY(-50%) translateX(-50%); width: 100%; word-break: break-word; } loading-content.invisible, loading-content:not(.invisible) + * { opacity: 0 !important; z-index: -9999; } loading-content > .warning { height: 60px; } loading-content > .warning > svg { height: 100%; } loading-content > .message { margin: 3px 0 7px; width: 100%; } loading-content > .spinner { background-image: var(--spinner-icon); background-position: 50% 50%; background-repeat: no-repeat; background-size: var(--spinner-size) var(--spinner-size); height: 30px; width: 30px; } [data-theme='dark'] loading-content { --spinner-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E %3Cstyle%3E /* %3C!%5BCDATA%5B */ @keyframes spinner-fade %7B0%25 %7Bopacity: 1 %7D 80%25 %7Bopacity: 0 %7D 100%25 %7Bopacity: 0 %7D %7D g.spinner rect %7Bwill-change: opacity; opacity: 0; animation: spinner-fade 0.75s linear infinite;%7D /* %5D%5D%3E */ %3C/style%3E %3Cg class='spinner' fill='none' fill-rule='evenodd'%3E %3Crect style='animation-delay: -0.375s;' width='22' height='64' x='117' fill='%23FFFFFF' rx='9'/%3E %3Crect style='animation-delay: -0.3125s;' width='22' height='64' x='164.526' y='13.213' fill='%23FFFFFF' transform='rotate(30 175.526 45.213)' rx='9'/%3E %3Crect style='animation-delay: -0.25s;' width='22' height='64' x='200.213' y='48.133' fill='%23FFFFFF' transform='rotate(60 211.213 80.133)' rx='9'/%3E %3Crect style='animation-delay: -0.1875s;' width='22' height='64' x='212.846' y='95.449' fill='%23FFFFFF' transform='rotate(90 223.846 127.45)' rx='9'/%3E %3Crect style='animation-delay: -0.125s;' width='22' height='64' x='200.138' y='144.202' fill='%23FFFFFF' transform='rotate(120 211.138 176.202)' rx='9'/%3E %3Crect style='animation-delay: -0.0625s;' width='22' height='64' x='164.824' y='178.864' fill='%23FFFFFF' transform='rotate(150 175.824 210.864)' rx='9'/%3E %3Crect style='animation-delay: 0s;' width='22' height='64' x='117' y='192' fill='%23FFFFFF' transform='rotate(180 128 224)' rx='9'/%3E %3Crect style='animation-delay: 0.0625s;' width='22' height='64' x='69.003' y='179.378' fill='%23FFFFFF' transform='rotate(-150 80.003 211.378)' rx='9'/%3E %3Crect style='animation-delay: 0.125s;' width='22' height='64' x='33.735' y='144.011' fill='%23FFFFFF' transform='rotate(-120 44.735 176.011)' rx='9'/%3E %3Crect style='animation-delay: 0.1875s;' width='22' height='64' x='21' y='96' fill='%23FFFFFF' transform='rotate(-90 32 128)' rx='9'/%3E %3Crect style='animation-delay: 0.25s;' width='22' height='64' x='33.926' y='48.133' fill='%23FFFFFF' transform='rotate(-60 44.926 80.133)' rx='9'/%3E %3Crect style='animation-delay: 0.3125s;' width='22' height='64' x='69.068' y='12.838' fill='%23FFFFFF' transform='rotate(-30 80.068 44.838)' rx='9'/%3E %3C/g%3E %3C/svg%3E"); } [data-theme='light'] loading-content { --spinner-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E %3Cstyle%3E /* %3C!%5BCDATA%5B */ @keyframes spinner-fade %7B0%25 %7Bopacity: 1 %7D 80%25 %7Bopacity: 0 %7D 100%25 %7Bopacity: 0 %7D %7D g.spinner rect %7Bfill: currentColor; will-change: opacity; opacity: 0; animation: spinner-fade 0.75s linear infinite;%7D /* %5D%5D%3E */ %3C/style%3E %3Cg class='spinner' fill='none' fill-rule='evenodd'%3E %3Crect style='animation-delay: -0.375s;' width='22' height='64' x='117' rx='9'/%3E %3Crect style='animation-delay: -0.3125s;' width='22' height='64' x='164.526' y='13.213' transform='rotate(30 175.526 45.213)' rx='9'/%3E %3Crect style='animation-delay: -0.25s;' width='22' height='64' x='200.213' y='48.133' transform='rotate(60 211.213 80.133)' rx='9'/%3E %3Crect style='animation-delay: -0.1875s;' width='22' height='64' x='212.846' y='95.449' transform='rotate(90 223.846 127.45)' rx='9'/%3E %3Crect style='animation-delay: -0.125s;' width='22' height='64' x='200.138' y='144.202' transform='rotate(120 211.138 176.202)' rx='9'/%3E %3Crect style='animation-delay: -0.0625s;' width='22' height='64' x='164.824' y='178.864' transform='rotate(150 175.824 210.864)' rx='9'/%3E %3Crect style='animation-delay: 0s;' width='22' height='64' x='117' y='192' transform='rotate(180 128 224)' rx='9'/%3E %3Crect style='animation-delay: 0.0625s;' width='22' height='64' x='69.003' y='179.378' transform='rotate(-150 80.003 211.378)' rx='9'/%3E %3Crect style='animation-delay: 0.125s;' width='22' height='64' x='33.735' y='144.011' transform='rotate(-120 44.735 176.011)' rx='9'/%3E %3Crect style='animation-delay: 0.1875s;' width='22' height='64' x='21' y='96' transform='rotate(-90 32 128)' rx='9'/%3E %3Crect style='animation-delay: 0.25s;' width='22' height='64' x='33.926' y='48.133' transform='rotate(-60 44.926 80.133)' rx='9'/%3E %3Crect style='animation-delay: 0.3125s;' width='22' height='64' x='69.068' y='12.838' transform='rotate(-30 80.068 44.838)' rx='9'/%3E %3C/g%3E %3C/svg%3E"); } .wizard-wrap.wizard-password { --errorMessagePadding: 10px; --wizardButtonPadding: 10px; --wizard-password-tablet-step-height: 480px; padding-bottom: 0; } /* not visible on the root password page */ .wizard-wrap.wizard-password .wizard-step-header { display: none; } .wizard-wrap.wizard-password .wizard-step { margin-top: 0; min-height: calc(100vh - var(--page-header-height)); padding: 5px 16px 30px; } .wizard-wrap.wizard-password .wizard-step .emphasis { color: var(--axis-yellow-4-brand); font-family: serif; /* To make the dot round */ } .wizard-wrap.wizard-password .wizard-step .errorMessage { background-color: var(--wizard-error-color); color: var(--axis-white); margin-bottom: 16px; padding: var(--errorMessagePadding); } .wizard-wrap.wizard-password .wizard-step h1 { color: var(--wizard-h1-color); font-size: var(--wizard-h1-size); font-weight: bold; margin-bottom: 16px; margin-top: 16px; padding-left: 0; text-align: left; } .wizard-wrap.wizard-password .wizard-step h3 { color: var(--wizard-h3-color); font-size: var(--wizard-h3-size); margin-bottom: 8px; text-align: left; } .wizard-wrap.wizard-password .wizard-step .password-form { left: 0; margin: auto; max-width: var(--wizard-step-content-width); right: 0; } .wizard-wrap.wizard-password .wizard-step .password-form input, .wizard-wrap.wizard-password .wizard-step .password-form select, .wizard-wrap.wizard-password .wizard-step .password-form button { margin-bottom: 10px; width: 100%; } .wizard-wrap.wizard-password .wizard-step .password-form input[type='checkbox'] { display: none } .wizard-wrap.wizard-password .wizard-step .password-form input[type='checkbox'] + label { font-size: 11px; } .wizard-wrap.wizard-password .wizard-step .password-form .btn-pass { margin-bottom: 0; padding: 1px 6px; width: 25px; } .wizard-wrap.wizard-password .wizard-step .password-form .btn-pass .icon svg { left: 0; position: relative; } .wizard-wrap.wizard-password .wizard-step .password-form .btn-pass.selected .icon svg { color: var(--axis-white); } .wizard-wrap.wizard-password .wizard-step .password-form .input-wrap { position: relative; width: 100%; } .wizard-wrap.wizard-password .wizard-step .password-form .input-wrap input { padding-left: 26px; } .wizard-wrap.wizard-password .wizard-step .password-form .statsText { text-align: center; } @media screen and (min-height: 43.75em) and (min-width: 48em) { .wizard-wrap.wizard-password .wizard-step { height: auto; max-height: unset; min-height: var(--wizard-password-tablet-step-height) } } .wizard-wrap.wizard-password .wizard-step-buttonrow { display: inline; padding: 0; position: static; } .wizard-wrap.wizard-password .wizard-step-buttonrow .btn-accent { --button-accent-state-normal-bg-gradient-from: var(--axis-yellow-4-brand); --button-accent-state-normal-bg-gradient-to: var(--axis-yellow-5); display: inline-block; font-size: 16px; height: auto; margin: 0 auto 20px; max-width: var(--wizard-step-content-width); padding: var(--wizardButtonPadding); width: 100% } .wizard-wrap.wizard-password .wizard-step-buttonrow .btn-accent:hover { --button-accent-state-hover-bg-gradient-from: var(--axis-yellow-5); --button-accent-state-hover-bg-gradient-to: var(--axis-yellow-6); } .wizard-wrap.wizard-password .wizard-step-buttonrow .btn-accent:focus { --button-accent-state-focus-bg-gradient-from: var(--axis-yellow-4-brand); --button-accent-state-focus-bg-gradient-to: var(--axis-yellow-5); box-shadow: inset 0 0 0 1px var(--axis-gray-6); } .wizard-wrap.wizard-password .wizard-step-buttonrow .btn-accent:active { background-color: var(--axis-yellow-6); box-shadow: none; } .wizard-wrap.wizard-password .wizard-step-buttonrow .btn-accent:disabled { --button-accent-state-disabled-bg-gradient-from: var(--axis-yellow-2); --button-accent-state-disabled-bg-gradient-to: var(--axis-yellow-3); color: var(--axis-gray-1); } .wizard-wrap.wizard-password .tooltipContent { position: absolute; } .weak-warning { background-color: var(--axis-white); border: 1px solid var(--axis-gray-4); box-shadow: 1px 1px 2px 0 var(--axis-gray-4); cursor: pointer; display: flex; flex-direction: row; justify-content: space-around; margin-top: -2px; min-height: 45px; padding: 6px; position: absolute; text-align: left; width: 272px; } .weak-warning svg { height: 25px; width: 25px; } .weak-warning div { height: 100% } .weak-warning div.warning-text { font-size: 11px; line-height: 14px; } .weak-warning div.warning-text b { font-weight: bold; } .weak-warning::before { background-color: var(--axis-white); border: 1px solid var(--axis-gray-4); border-bottom: 1px; border-right: 1px; content: ''; height: 15px; left: 25px; position: absolute; top: -8px; transform: rotate(45deg); width: 15px; } .wizard-step { --multi-source-padding: 3px; } .wizard-wrap.wizard-capture .wizard-step select { font-size: var(--settings-font-size); height: 32px; max-width: 254px; padding: 0; padding-left: 8px; padding-right: 20px; width: 100%; } .wizard-wrap.wizard-capture .wizard-step #AXIS-captureFrequencySetting { max-width: 64px; } .wizard-wrap.wizard-capture .wizard-step.multiSource select { max-width: 235px; width: calc(100% - 32px - var(--multi-source-padding)); } .wizard-wrap.wizard-capture .wizard-step h2 { font-size: var(--workspace-h1-size); height: auto; margin-bottom: 12px; text-align: left; } .wizard-wrap.wizard-capture .wizard-step h2 > span::after { display: none; } .wizard-wrap.wizard-capture .wizard-step .panel-group { display: block; margin: 0 auto; max-width: var(--wizard-step-content-width); padding: 0; width: 100% !important } .wizard-wrap.wizard-capture .wizard-step .panel-group + .panel-group { margin-top: 16px; } .wizard-wrap.wizard-capture .wizard-step > div.capture-change { align-items: center; display: flex; flex: 1 1 100%; flex-direction: column; font-style: normal; height: 90%; justify-content: center; line-height: 20px; } /* Add source boxes next to dropdownlists */ .wizard-step.multiSource #AXIS-captureModeGroup ~ .component-niceNameSelect::before { background-color: var(--axis-yellow-4-brand); border: 1px solid var(--axis-gray-5); box-shadow: inset 0 0 0 4px #fff; box-sizing: border-box; content: attr(data-sourceNbr); display: inline-block; height: 32px; line-height: 32px; /* IE bug. We need to use px to make it crosscompatible: https://connect.microsoft.com/IE/feedback/details/776744 */ margin-right: var(--multi-source-padding); text-align: center; width: 32px; } .wizard-capture .radiobutton-option { margin-bottom: 16px; } .wizard-capture input[type=radio] + label svg { display: block; float: right; height: 24px; margin-right: 50px; margin-top: -4px; } .wizard-workspace .panel-group, .wizard-nvr_workspace .panel-group { display: inline-block; vertical-align: top; width: var(--settings-compartment-width); } .wizard-workspace .point-camera-button, .wizard-nvr_workspace .point-camera-button { cursor: pointer; float: right; margin-right: 40px; margin-top: 8px; } .wizard-workspace .point-camera-button svg, .wizard-nvr_workspace .point-camera-button svg { border: 2px solid var(--axis-gray-5); border-radius: 3px; color: var(--axis-gray-6); height: 32px; margin-right: 8px; vertical-align: middle; width: 32px; } .wizard-workspace .point-camera-button .label, .wizard-nvr_workspace .point-camera-button .label { font-size: small; vertical-align: middle; } #wizardSettingPanel { max-width: calc(var(--settings-compartment-width) * 2); text-align: left } @media screen and (max-width: 690px) { /* Center the panels on lower resolutions */ #wizardSettingPanel .panel-group { display: block; margin: 0 auto; } } .wizard-panel-wrap { display: inline-block; margin: auto; } .wizard-wrap { --wizard-step-width: 720px; --wizard-step-box-shadow: 0 0 0 1px rgba(var(--axis-gray-5-values), 0.5), 2px 2px 2px 0 rgba(var(--axis-gray-6-values), 0.5); --wizard-step-header-mobile-height: 116px; --wizard-step-header-height: 92px; --wizard-step-header-spacing: 8px; --wizard-step-header-padding: 28px 16px; --wizard-step-tablet-height: 650px; --wizard-step-height: calc(var(--page-header-height) + var(--wizard-step-buttonrow-height) + var(--wizard-step-header-mobile-height) + var(--wizard-step-header-spacing) + var(--wizard-step-header-spacing)); --wizard-input-padding: 10px; height: 100%; padding-bottom: var(--wizard-step-buttonrow-height); padding-top: var(--page-header-height); position: absolute; top: 0; width: 100% } @media screen and (min-height: 43.75em) and (min-width: 48em) { .wizard-wrap { height: 100vh; margin-top: 16px; padding-bottom: 0; padding-top: 0; position: static } } .wizard-wrap.wizard-capture input, .wizard-wrap.wizard-capture select, .wizard-wrap.wizard-password input, .wizard-wrap.wizard-password select { background-color: var(--axis-white); font-size: var(--settings-font-size); height: auto; padding: var(--wizard-input-padding); width: 60% } .wizard-wrap.wizard-capture input::-ms-input-placeholder, .wizard-wrap.wizard-capture select::-ms-input-placeholder, .wizard-wrap.wizard-password input::-ms-input-placeholder, .wizard-wrap.wizard-password select::-ms-input-placeholder { color: var(--axis-gray-6); font-style: normal; } .wizard-wrap.wizard-capture input::placeholder, .wizard-wrap.wizard-capture select::placeholder, .wizard-wrap.wizard-password input::placeholder, .wizard-wrap.wizard-password select::placeholder { color: var(--axis-gray-6); font-style: normal; } .wizard-wrap .window-container { left: 0; pointer-events: none; position: absolute; top: 0; } .wizard-wrap .window-container .window { pointer-events: all; } .wizard-wrap .feedback { position: fixed; top: var(--page-header-height) } @media screen and (min-height: 43.75em) and (min-width: 48em) { .wizard-wrap .feedback { top: 0 } } .wizard-step { margin-top: var(--wizard-step-header-spacing); /* adds spacing between wizard header and wizard step */ min-height: calc(100vh - var(--wizard-step-height)); padding: 0 16px 16px; position: relative; text-align: center } @media screen and (min-height: 43.75em) and (min-width: 48em) { .wizard-step { height: 100vh; max-height: var(--wizard-step-tablet-height); min-height: 0; overflow: auto } } /* Box styling and wraps the wizard header, step and button row and vertically centers it on tablet+ resolutions */ .wizard-layout-wrap { background-color: rgba(var(--axis-white-values), 0.82); box-shadow: var(--wizard-step-box-shadow); height: 100%; overflow: auto; position: relative; } .wizard-layout-wrap h1 { font-size: 36px; padding-bottom: 8px; padding-top: 20px; } .wizard-layout-wrap h1, .wizard-layout-wrap .wizard-subtitle { padding-left: 20px; text-align: left; } .wizard-layout-wrap .wizard-subtitle { font-size: 24px; } @media screen and (min-height: 43.75em) and (min-width: 48em) { .wizard-layout-wrap::after { clear: both; content: ''; display: table; } .wizard-layout-wrap { height: auto; margin-left: auto; margin-right: auto; max-width: var(--wizard-step-width); overflow: auto; top: 50%; transform: translateY(-50%); } .wizard-layout-wrap h1 { font-size: 24px; padding-top: 20px; } .wizard-layout-wrap h1, .wizard-layout-wrap .wizard-subtitle { padding-left: 20px; text-align: left; } .wizard-layout-wrap .wizard-subtitle { font-size: 16px; } } /* Container for the LogIn/Next-button. Aligns itself to the bottom of wizard-step */ .wizard-step-buttonrow { background-color: var(--axis-white); border-top: var(--page-section-border-size) solid var(--header-state-normal-border-color); bottom: 0; height: var(--wizard-step-buttonrow-height); left: 0; line-height: var(--wizard-step-buttonrow-height); padding: 0 8px; pointer-events: none; /* Disable any mouse events on this element since it can stay on top of form elements */ position: fixed; text-align: right; width: 100%; z-index: 1; } .wizard-step-buttonrow .btn-accent { margin-right: 10px; pointer-events: all; /* Restore pointer events for the actual button */ } @media screen and (min-height: 43.75em) and (min-width: 48em) { .wizard-step-buttonrow { background-color: transparent; border-top: none; bottom: 4px; left: 0; margin: auto; max-width: var(--wizard-step-width); padding-right: var(--wizard-input-padding); position: absolute; right: 16px } } .AXIS-cameraTamperingGroup > .component-label { font-weight: bold; margin-bottom: 0; min-height: auto; } .AXIS-cameraTamperingGroup > .component-label > label { margin: 0; } .AXIS-cameraTamperingGroup > .component-onoff:not(:last-child) { border-bottom: 1px solid var(--workspace-panel-group-border); padding-bottom: var(--workspace-component-bottom-margin); } #appsPanel { /* We need a top spacing since we are forcefully hiding the titles */ padding-top: 24px; } #appsPanel .component-title { display: none; } #appsPanel .component-icon { width: 50%; } #appsPanel .label { /* Only CSS solution to fix multiline clamp. */ display: inline-block; justify-content: center; -webkit-line-clamp: 2; overflow: hidden; padding: 4px; white-space: normal; } #appsPanel .label span:first-of-type { margin-right: 2px; } #appsPanel .label span:last-of-type { white-space: nowrap; } .workspace-panel { /* TODO: Temporary fix to align the 'button' and 'fileUpload' component. */ } /* goranm, 2016-11-29 */ .workspace-panel div[id^='AXIS-apps'] { flex: 0 0 auto; margin-bottom: 0; min-height: 0; } .workspace-panel div[id^='AXIS-apps'] > label.setting-label { flex: 1 0 0%; } .workspace-panel div[id^='AXIS-apps'] .title { display: block; font-size: 12px; font-weight: bold; } /* http://agile-dev/project/jonasgn-aca-release-10/us/1020?no-milestone=1 */ .workspace-panel div[id^='AXIS-apps'].component-statusIndicator label { padding: 0; } /* TODO: Fix panel-group style to avoid using wildcard stylerules, see */ .workspace-panel div[id^='AXIS-apps'].component-statusIndicator::before { background-color: var(--status-indicator-off-color); border-radius: 50%; bottom: 2px; content: ''; height: 6px; position: relative; right: 4px; width: 6px; } .workspace-panel div[id^='AXIS-apps'].component-statusIndicator.active::before { background-color: var(--status-indicator-on-color); } /* stylelint-disable-line selector-attribute-operator-blacklist */ .workspace-panel div[class*='AXIS-appsInfo'] .component-plainText { margin: 0; } .workspace-panel div[class*='AXIS-appsInfo'] .component-link { margin-top: 8px; } .workspace-panel div[class*='AXIS-appsInfo'] .multicolumn { justify-content: flex-end; } .workspace-panel div[class*='AXIS-appsInfo'] .multicolumn > .component:first-child { margin-right: auto; } .workspace-panel div[class*='AXIS-appsInfo'] .multicolumn:first-of-type { margin-top: 8px; } .workspace-panel div[class*='AXIS-appsInfo'] .multicolumn:last-of-type { margin-top: 14px; } .workspace-panel div[class*='AXIS-appsInfo'] .btn.btn-secondary.btn-small { min-width: 0; } /* andpn, 2018-03-01 */ /* stylelint-disable-line selector-attribute-operator-blacklist */ .workspace-panel div[class*='AXIS-appsLicense'] .fileSelectButton { margin-bottom: 0; } .workspace-panel div[class*='AXIS-appsLicense'] label:empty { display: none; } .workspace-panel div[class*='AXIS-appsLicense'] .component-fileUpload { flex: 0 1 auto; } .component-automaticLicense { align-content: center; justify-content: flex-start; } .automaticLicenseWrapper { display: flex; flex: 1 1 100%; flex-wrap: wrap; } .automaticLicenseWrapper textarea { flex: 1; margin-right: 10px; resize: none; } .automaticLicenseWrapper button { align-self: flex-end; } .settings-panel.popup.apps .compartments { background-color: var(--body-state-normal-bg-color); } .settings-panel.popup.apps .compartments .component-title span::after { content: none; } .settings-panel.popup.apps .compartments .component-input label { display: none; } .settings-panel.popup.apps .popupControls { left: auto; } .settings-panel.popup.apps .popupControls button[value^='install'] { float: right; margin-left: 10px; } #AXIS-more-apps svg { fill: var(--axis-gray-6); } .window.about-window { height: 464px; text-align: center; width: 460px; } .window.about-window > .content { display: flex; flex-direction: column; justify-content: center; } .about-window .about-window-content > div { font-size: 14px; } .about-window .about-window-content > svg { max-width: 168px; width: 100%; } .about-window .about-window-content > h1 { font-size: 15px; font-weight: bold; margin-bottom: 24px; } .about-window .about-window-content > .version p { margin-bottom: 0; } .about-window .about-window-content > .copyright { line-height: 22px; margin-top: 32px; } .about-window .about-window-content > .url { margin-top: 64px; } .about-window .about-window-content > .url p { margin-bottom: 0; } .about-window .about-window-content > .url a { color: var(--link-accent-state-active-color); } .helpindex-window-content { display: flex; flex: 1 1 auto; position: relative; } .helpindex-window { display: flex; flex-direction: column; height: 60%; width: 640px; } .helpindex-window .content { display: flex; flex-grow: 1; padding: 0; } .window.legal-information-window { height: 60%; width: 640px; } .window.legal-information-window .legal-information-window-content .list:not(:first-child) li:first-child { border-top: none; } .window.legal-information-window .legal-information-window-content .list { box-shadow: none; } .window.legal-information-window .legal-information-window-content .list li:first-child { border-top-color: var(--window-border-color); } .window.legal-information-window .legal-information-window-content .list div { color: var(--legal-page-div-color); padding: 13px 0 } .window.legal-information-window .legal-information-window-content .list div:hover { color: var(--legal-page-div-hover-color); } .window.legal-information-window .legal-information-window-content .list .cell { font-size: 14px; } .window.legal-information-window .legal-information-window-content .list li { border-bottom-color: var(--window-border-color); } .window.legal-information-window .legal-information-window-content .list li li { cursor: default; font-size: 0; padding: 0 0 13px 32px; white-space: nowrap; } .window.legal-information-window .legal-information-window-content .list li li pre { font-size: 13px; white-space: pre-wrap; } .window.legal-information-window .legal-information-window-content .list li li span:last-child { width: 40%; } .window.legal-information-window .legal-information-window-content .list li li:hover { color: var(--axis-black); } .window.legal-information-window .legal-information-window-content .list .license { display: flex; } .window.legal-information-window .legal-information-window-content .list .license a { background-color: transparent; display: inline-block; padding: 0; } .window.legal-information-window .legal-information-window-content .list .license a span { color: var(--component-link-normal-color); text-decoration: underline } .window.legal-information-window .legal-information-window-content .list .license a span:hover { color: var(--component-link-hover-color); } .window.legal-information-window .legal-information-window-content .list .license span { line-height: 20px; padding-left: 16px; } .window.legal-information-window .legal-information-window-content .list .license .licenseName { flex: 1; margin: 4px 0; } .window.legal-information-window .legal-information-window-content p { font-size: 14px; } .ptzGatekeeper-window { height: 480px; width: 440px; } .ptzGatekeeper-window .ptzGatekeeper-window-content > div { font-size: 14px; margin-left: 20px; margin-top: 20px; } .ptzGatekeeper-window .ptzGatekeeper-window-content a { color: var(--link-accent-state-active-color); } .ptzGatekeeper-window .ptzGatekeeper-window-content h1 { width: 320px; } .ptzGatekeeper-window .ptzGatekeeper-window-content &::after { background-color: #ffcc33; content: ''; display: block; height: 3px; margin-bottom: 8px; margin-top: 4px; width: 145px; } .ptzGatekeeper-window .ptzGatekeeper-window-content p { margin-bottom: 0; } .page-wrap.orientation .peripheral-wrap { transform: translateY(calc(var(--page-settings-height) - var(--settings-menu-height) + var(--page-footer-height) + var(--settings-menu-top-margin))); } .page-wrap.settings .orientation-wrap, .page-wrap.view .orientation-wrap { display: none; } .overlay { background-color: var(--body-state-normal-bg-color); bottom: 0; left: 0; opacity: 0; position: absolute; right: 0; top: 0; transition: visibility 110ms linear 0.5s, opacity 0.5s linear; visibility: hidden; z-index: calc(var(--popup-z-index-start) - 1) } .overlay.active { opacity: 0.75; transition-delay: 110ms; visibility: visible; } .orientation-wrap { --orientation-panel-height: 240px; --orientation-border-size: 1px; --orientation-menu-button-offset: 4px; border-top: var(--orientation-border-size) solid var(--settings-navbuttons-state-normal-border-color); bottom: 0; left: 0; min-height: var(--orientation-panel-height); position: absolute; right: 0; transition: transform 200ms; z-index: 11 } .orientation-wrap .settings-panel { background-color: var(--orientation-panel-state-normal-bg-color); height: var(--orientation-panel-height) } .orientation-wrap .settings-panel .compartments { background-color: transparent; z-index: inherit; } .orientation-wrap .settings-panel .navigate-prev, .orientation-wrap .settings-panel .navigate-next { background-color: var(--orientation-navbuttons-state-normal-bg-color); line-height: var(--orientation-panel-height) } .orientation-wrap .settings-panel .navigate-prev.nav-disabled, .orientation-wrap .settings-panel .navigate-next.nav-disabled { background-color: var(--orientation-navbuttons-state-disabled-bg-color); } .orientation-wrap .settings-panel .multicolumn { padding-bottom: 10px } .orientation-wrap .settings-panel .multicolumn .component { flex: none; width: auto /** * Required to fix `overflow: hidden` bug in Chrome * See story #623 */ } .orientation-wrap .settings-panel .multicolumn .component .vertical-menu { bottom: auto; margin-top: calc(var(--orientation-menu-button-offset) * -1); position: fixed; transform: translateY(-100%) /** * Disable transform on small screens since it won't work with .maximize-on-mobile */ } @media only screen and (max-width: 24.75em),screen and (max-height: 24.75em) { .orientation-wrap .settings-panel .multicolumn .component .vertical-menu { transform: none } } .orientation-wrap .carousel .carousel-outer::after, .orientation-wrap .carousel .carousel-outer::before { background-color: var(--orientation-panel-state-normal-bg-color); } .orientation-wrap .component-iconButton, .orientation-wrap .component-pixelCounter, .orientation-wrap .component-levelingGuide, .orientation-wrap .component-quadPlusOverview, .orientation-wrap .component-quadReposition, .orientation-wrap .component-rotation { display: inline-block; position: relative; } .orientation-wrap .component-iconButton .btn, .orientation-wrap .component-pixelCounter .btn, .orientation-wrap .component-levelingGuide .btn, .orientation-wrap .component-quadPlusOverview .btn, .orientation-wrap .component-quadReposition .btn, .orientation-wrap .component-rotation .btn { height: 32px; } .orientation-wrap .component-iconButton .icon svg, .orientation-wrap .component-pixelCounter .icon svg, .orientation-wrap .component-levelingGuide .icon svg, .orientation-wrap .component-quadPlusOverview .icon svg, .orientation-wrap .component-quadReposition .icon svg, .orientation-wrap .component-rotation .icon svg { --orientation-icon-size: 24px; height: var(--orientation-icon-size); width: var(--orientation-icon-size); } .orientation-wrap .pixel-counter-controls { background-color: var(--component-popup-background-color); box-shadow: 2px 2px 5px var(--component-popup-box-shadow-color); color: var(--component-popup-text-color); margin: 0; padding: 7px 10px; position: fixed; transform: translate3d(-64px, -96px, 0); width: 170px; z-index: 11; } .orientation-wrap .pixel-counter-controls .pixelCounterTitle { font-size: 12px; font-weight: bold; margin-bottom: 10px; } .orientation-wrap .pixel-counter-controls input { display: inline-block; margin-right: 9px; width: 50px; } #orientationDoneBtn { bottom: 20px; position: absolute; right: 55px; z-index: 1; } g.polygon-mask.enabled { opacity: 0 } g.polygon-mask.enabled.selected { fill: var(--svg-main-color); opacity: 1; stroke: var(--svg-main-color); } g.polygon-mask.enabled.selected .filling { cursor: grab; fill-opacity: 0.25; stroke-opacity: 0 } g.polygon-mask.enabled.selected .filling:active { cursor: grabbing; } g.polygon-mask.enabled.selected .border { stroke: var(--svg-main-color); stroke-opacity: 0.4 } g.polygon-mask.enabled.selected .border.intersect { stroke: #8c8c8c; /* stroke: red; */ stroke-opacity: 1; } g.polygon-mask.enabled.selected .border.marked { stroke-opacity: 1; } g.polygon-mask.enabled.selected .border.pop { stroke-opacity: 1; } g.polygon-mask.enabled.selected .bbox-border { opacity: 0; stroke-width: 15px } g.polygon-mask.enabled.selected .bbox-border.upper, g.polygon-mask.enabled.selected .bbox-border.lower { cursor: ns-resize; } g.polygon-mask.enabled.selected .bbox-border.left, g.polygon-mask.enabled.selected .bbox-border.right { cursor: ew-resize; } g.polygon-mask.enabled.selected .corner { fill: #ffffff } g.polygon-mask.enabled.selected .corner:hover { cursor: pointer; } g.polygon-mask.enabled.selected .corner.intersect { /* fill: red; */ cursor: not-allowed; stroke-width: 0; } g.polygon-mask.enabled.selected .corner.marked { fill: var(--svg-main-color); } g.polygon-mask.enabled.selected .bbox-corner { cursor: nesw-resize; opacity: 0; stroke-width: 25px } g.polygon-mask.enabled.selected .bbox-corner.upper-left, g.polygon-mask.enabled.selected .bbox-corner.lower-right { cursor: nwse-resize; } g.polygon-mask.enabled.selected .ghost-corner { fill: #ffffff; fill-opacity: 0.5; stroke-opacity: 0; stroke-width: 25px } g.polygon-mask.enabled.selected .ghost-corner:hover { cursor: pointer; fill-opacity: 1; } g.polygon-mask.enabled.selected .ghost-corner.pop { animation: poppy 300ms; } g.polygon-mask.disabled { display: none; opacity: 0; } @keyframes poppy { 50% { r: 5; } } g.rectangle-mask.enabled .filling { opacity: 0; } g.rectangle-mask.enabled .resize-handle { display: none; } g.rectangle-mask.enabled .border { stroke: none; stroke-width: 1; } g.rectangle-mask.enabled.selected .filling { fill: var(--svg-main-color); fill-opacity: 0.25; opacity: 1; } g.rectangle-mask.enabled.selected .resize-handle { display: inline; fill: var(--svg-main-color); stroke: var(--svg-main-color) } g.rectangle-mask.enabled.selected .resize-handle.spilling { display: none; } g.rectangle-mask.enabled.selected .border { stroke: var(--svg-main-color); } g.rectangle-mask.enabled.selected.transparent { fill-opacity: 0.5; opacity: 0.5; } g.rectangle-mask.disabled { display: none } g.rectangle-mask.disabled.selected { display: inherit; } g.rectangle-mask.disabled.selected .resize-handle { transform: translate(2px, 2px); } g.rectangle-mask.disabled.selected .border { stroke: var(--svg-main-color); stroke-dasharray: 8px; stroke-width: 2px; } g.rectangle-mask.disabled.selected .filling { opacity: 0; } #privacymaskPanel { /* We need a top spacing since we are forcefully hiding the titles */ padding-top: 24px; } #privacymaskPanel .component-title { display: none; } #privacymaskPanel [class^='pm_'] { display: none; } #privacymaskPanel .component-icon.off .pm_off, #privacymaskPanel .component-icon.on .pm_on, #privacymaskPanel .component-icon.zoom .pm_zoom { display: inline; } .settings-panel.popup.privacymask .compartments { background-color: var(--body-state-normal-bg-color); } .settings-panel.popup.privacymask .btn.btn-accent, .settings-panel.popup.privacymask .btn.btn-secondary { text-transform: none; } .settings-panel.popup.privacymask .popupControls { left: 16px; } .settings-panel.popup.privacymask .popupControls button[value^='destroy'] { float: left; min-width: auto; min-width: 0; } g.crosshair circle { fill-opacity: 0; stroke: var(--component-ptz-crosshair-color); } g.crosshair line { stroke: var(--component-ptz-crosshair-color); } g.crosshair polyline { fill: var(--component-ptz-crosshair-color); } g.crosshair.interaction circle { fill-opacity: 0.2; stroke-width: 2; } g.crosshair.interaction line { stroke-width: 2; } .control.ptzButton .filled svg { width: 19px; } .videocontainer-wrap .controls .ptz { --liveview-ptzbar-state-normal-bg-color: rgba(var(--axis-gray-9-values), 0.35); --ptz-font-size: 11px; align-items: center; background-color: var(--liveview-ptzbar-state-normal-bg-color); display: flex; font-size: var(--ptz-font-size); justify-content: center; transition: opacity 250ms ease-in-out } .videocontainer-wrap .controls .ptz.waiting { background-image: none; } .videocontainer-wrap .controls .ptz.waiting > svg { color: var(--axis-white); height: 16px; width: 16px; } .videocontainer-wrap .controls .ptz .ptzModeSelection button { pointer-events: none } .videocontainer-wrap .controls .ptz .ptzModeSelection button:hover { cursor: default; } .videocontainer-wrap .controls .ptz .ptzModeSelection button.has-menu { pointer-events: auto } .videocontainer-wrap .controls .ptz .ptzModeSelection button.has-menu:hover { cursor: pointer; } .videocontainer-wrap .controls .ptz.toneOut { opacity: 0; } .videocontainer-wrap .controls .ptz .control { display: block; } .videocontainer-wrap .controls .ptz .ptz-control { --ptz-bar-maxwidth: calc(var(--settings-compartment-width) * 1.5); display: flex; flex: 1 1 100%; flex-wrap: wrap; margin-right: 0; max-width: var(--ptz-bar-maxwidth); } .videocontainer-wrap .controls .ptz .ptz-control .component { flex: 0 1 auto; margin-top: 0; min-height: auto; min-width: auto; } .videocontainer-wrap .controls .ptz .ptz-control .component-slider { flex: 1 1 0%; } .videocontainer-wrap .controls .ptz .ptz-control .component-slider-inner { --component-slider-track-height: 1px; --component-slider-fill-state-normal-bg-color: var(--component-ptz-slider-track-background-color) } .videocontainer-wrap .controls .ptz .ptz-control .component-slider-inner.with-placeholder::before, .videocontainer-wrap .controls .ptz .ptz-control .component-slider-inner.with-placeholder::after { border-color: var(--component-ptz-slider-border-color); } .videocontainer-wrap .controls .ptz .ptz-control .component-slider-inner.with-placeholder .placeholder { color: var(--component-ptz-slider-placeholder-color); } .videocontainer-wrap .controls .ptz .ptz-control .component-slider-inner .fill { display: none; } .videocontainer-wrap .controls .ptz .ptz-control .component-slider-inner input[type='range'] { margin-top: calc(1px * -1) } .videocontainer-wrap .controls .ptz .ptz-control .component-slider-inner input[type='range']::-moz-range-thumb { height: 14px; transform: translateY(1px); width: 14px; } .videocontainer-wrap .controls .ptz .ptz-control .component-slider-inner input[type='range']::-ms-thumb { height: 14px; transform: translateY(1px); width: 14px; } .videocontainer-wrap .controls .ptz .ptz-control .component-slider-inner input[type='range']::-webkit-slider-thumb { height: 14px; transform: translateY(1px); width: 14px; } .videocontainer-wrap .controls .ptz .ptz-control .component-slider-inner input[type='range']::-moz-range-thumb::before { background-color: transparent; content: ''; height: 24px; left: 50%; margin-left: calc(12px * -1); margin-top: calc(12px * -1); position: absolute; top: 50%; width: 24px; } .videocontainer-wrap .controls .ptz .ptz-control .component-slider-inner input[type='range']::-ms-thumb::before { background-color: transparent; content: ''; height: 24px; left: 50%; margin-left: calc(12px * -1); margin-top: calc(12px * -1); position: absolute; top: 50%; width: 24px; } .videocontainer-wrap .controls .ptz .ptz-control .component-slider-inner input[type='range']::-webkit-slider-thumb::before { background-color: transparent; content: ''; height: 24px; left: 50%; margin-left: calc(12px * -1); margin-top: calc(12px * -1); position: absolute; top: 50%; width: 24px; } .videocontainer-wrap .controls .ptz .ptz-control .track { background-color: var(--component-ptz-slider-track-background-color); height: 1px; margin-top: calc(1px * -1); transform: translateY(0%); } .videocontainer-wrap .controls .ptz .ptz-control .track .ghost, .videocontainer-wrap .controls .ptz .ptz-control .track .hint { display: block; height: 7px; position: absolute; top: -3px; width: 2px; z-index: 2; } .videocontainer-wrap .controls .ptz .ptz-control .track .ghost { background-color: var(--component-ptz-slider-track-ghost-background-color); } .videocontainer-wrap .controls .ptz .ptz-control .track .hint { background-color: #ed1a3b; } .videocontainer-wrap .controls .ptz .btn { background-color: transparent; border: none; font-size: 11px; z-index: 0 } .videocontainer-wrap .controls .ptz .btn:active { box-shadow: none; } .videocontainer-wrap .controls .ptz .btn.selected { box-shadow: none; color: var(--component-ptz-button-selected-color); } @media only screen and (max-width: 24.78em) { .videocontainer-wrap .controls .ptz .btnset li { margin-left: 1px; /* Add space between icons */ } } @media only screen and (min-width: 24.78em) { .videocontainer-wrap .controls .ptz .btnset li { margin-left: 5px; /* Add space between icons */ } } .videocontainer-wrap .controls .ptz .btnset { /* === Small screen ===================================================== */ } .videocontainer-wrap .controls .ptz .btnset .btn:focus, .videocontainer-wrap .controls .ptz .btnset .btn:hover { border: none; } .videocontainer-wrap .controls .ptz .btnset li:not(:first-child) .btn { margin-left: var(--component-border-size); } .videocontainer-wrap .controls .ptz .btnset li { padding: 0; } .videocontainer-wrap .controls .ptz .btnset li:first-child:last-child button { pointer-events: none } .videocontainer-wrap .controls .ptz .btnset li:first-child:last-child button:hover { cursor: default; } @media only screen and (max-width: 24.78em) { .videocontainer-wrap .controls .ptz .btnset { align-items: flex-start; flex-direction: column-reverse; position: relative } } @media only screen and (max-width: 24.78em) { .videocontainer-wrap .controls .ptz .btnset li:not(:first-child) { background-color: var(--liveview-ptzbar-state-normal-bg-color); margin-left: 0; margin-top: -2px; /* This is to avoid the overlap of backgrounds with the ptz bar */ padding-bottom: 3px; padding-right: 4px; position: absolute } } @media only screen and (max-width: 24.78em) { .videocontainer-wrap .controls .ptz .btnset li:nth-child(2) { transform: translateY(-22px) } } @media only screen and (max-width: 24.78em) { .videocontainer-wrap .controls .ptz .btnset li:nth-child(3) { transform: translateY(-44px) } } #zonesPanel { /* We need a top spacing since we are forcefully hiding the titles */ padding-top: 24px; --lines-to-show: 2; } #zonesPanel .component-title { display: none; } #zonesPanel .label { /* Only CSS solution to fix multiline clamp. -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: var(--lines-to-show); */ overflow: hidden; white-space: normal; } #AXIS-radarCalibration-markManualCalibrationPoint { /* We need a margin-bottom set to 4 px because the .component { margin-top: var(--component-top-margin); } in the components.css is getting overwritten by the .multicolumn { margin-top: 0; } */ margin-bottom: 4px; } #AXIS-ORIENTATION-radar-wizard-calibration .setting-label { width: 100%; } .settings-panel.popup.radar { display: flex; flex-direction: column; height: auto; } .settings-panel.popup.radar .compartments { background-color: var(--body-state-normal-bg-color); padding-bottom: 50px; position: static; width: 100%; } .settings-panel.popup.radar .compartments .component-slider-inner { width: 50%; } .settings-panel.popup.radar .btn-accent, .settings-panel.popup.radar .btn-secondary { text-transform: none; } .settings-panel.popup.radar .popupControls { left: 0; } .settings-panel.popup.radar .popupControls button[value^='delete'] { float: left; margin-left: 16px; min-width: auto; min-width: 0; } .settings-panel.popup.radar div[class$='multicolumn'] div { width: 100%; } .settings-panel.popup.radar div[class$='multicolumn'] div label span { margin-right: 5px; } /* Edge filling for the zones */ g.radar .filling, g.radar .inner-polygon { cursor: grab; opacity: 1; shape-rendering: geometricPrecision; stroke-opacity: 1 } g.radar .filling:active, g.radar .inner-polygon:active { cursor: grabbing; } /* Drag handles and lines */ g.radar > line { stroke: var(--svg-contrast-color); stroke-opacity: 0.7; stroke-width: 1px; } g.radar > circle { fill: var(--svg-contrast-color); fill-opacity: 0.5; } g.radar.selected polygon { fill-opacity: 0.5; } g.radar.selected .corner, g.radar.selected .ghost-corner, g.radar.selected .border { stroke-opacity: 0.7; stroke-width: 2px; } g.radar.include polygon { fill: var(--axis-yellow-4-brand); } g.radar .border { stroke: var(--axis-black); stroke-opacity: 0.5; stroke-width: 2px; } g.radar .corner, g.radar .ghost-corner { fill: var(--axis-white); stroke: var(--axis-black); stroke-opacity: 0.7; stroke-width: 2px } g.radar .corner:hover, g.radar .ghost-corner:hover { cursor: pointer; fill: var(--axis-gray-4); } g.radar polygon { fill-opacity: 0.4; } .radar-basic-popup-view { min-width: 500px; padding: 0; width: 500px; } .radar-basic-popup-view > .aca-modal > div { box-shadow: 0 0 0; height: auto; max-width: inherit; padding: 10px; } g.polyline { /* Crossline line styling */ } /* Crossline bounding box styling */ g.polyline .bbox { cursor: grab; fill: #000000; fill-opacity: 0; opacity: 0; shape-rendering: crispEdges; stroke: #000000; stroke-dasharray: 5, 2; stroke-width: 1px } g.polyline .bbox:active { cursor: grabbing; } /* Crossline points styling */ g.polyline .point { cursor: pointer; fill: #cccccc; fill-opacity: 1; opacity: 1; stroke: rgb(255, 204, 51); stroke-dasharray: 0, 0; stroke-opacity: 1; stroke-width: 2px; } /* To be able to create new points */ g.polyline .draggable-border { cursor: pointer; hoveropacity: 0; opacity: 0; stroke: #000000; stroke-width: 5px; } g.polyline.polyline .border { cursor: pointer !important; stroke: rgb(255, 204, 51); stroke-width: 2px !important; } g.polyline { /* Crossline arrow styling */ } g.polyline.arrow.polyline.fence-arrow .border { stroke: #ff0000; stroke-width: 3px !important; } /* Crosslie drag-point styling */ .dragging-point, .draggable-border { cursor: pointer; fill: #fff; stroke: #fff; stroke-dasharray: 1; } .geolocation { display: flex 1 1 auto; justify-content: space-between; padding: 2px; width: 400px; } .geolocation div[class$='save-location'] { display: flex; justify-content: flex-end; } [data-theme='light'] { --recordings-spinner-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E %3Cstyle%3E /* %3C!%5BCDATA%5B */ @keyframes spinner-fade %7B0%25 %7Bopacity: 1 %7D 80%25 %7Bopacity: 0 %7D 100%25 %7Bopacity: 0 %7D %7D g.spinner rect %7Bwill-change: opacity; opacity: 0; animation: spinner-fade 0.75s linear infinite;%7D /* %5D%5D%3E */ %3C/style%3E %3Cg class='spinner' fill='none' fill-rule='evenodd'%3E %3Crect style='animation-delay: -0.375s;' width='22' height='64' x='117' fill='%23FFFFFF' rx='9'/%3E %3Crect style='animation-delay: -0.3125s;' width='22' height='64' x='164.526' y='13.213' fill='%23FFFFFF' transform='rotate(30 175.526 45.213)' rx='9'/%3E %3Crect style='animation-delay: -0.25s;' width='22' height='64' x='200.213' y='48.133' fill='%23FFFFFF' transform='rotate(60 211.213 80.133)' rx='9'/%3E %3Crect style='animation-delay: -0.1875s;' width='22' height='64' x='212.846' y='95.449' fill='%23FFFFFF' transform='rotate(90 223.846 127.45)' rx='9'/%3E %3Crect style='animation-delay: -0.125s;' width='22' height='64' x='200.138' y='144.202' fill='%23FFFFFF' transform='rotate(120 211.138 176.202)' rx='9'/%3E %3Crect style='animation-delay: -0.0625s;' width='22' height='64' x='164.824' y='178.864' fill='%23FFFFFF' transform='rotate(150 175.824 210.864)' rx='9'/%3E %3Crect style='animation-delay: 0s;' width='22' height='64' x='117' y='192' fill='%23FFFFFF' transform='rotate(180 128 224)' rx='9'/%3E %3Crect style='animation-delay: 0.0625s;' width='22' height='64' x='69.003' y='179.378' fill='%23FFFFFF' transform='rotate(-150 80.003 211.378)' rx='9'/%3E %3Crect style='animation-delay: 0.125s;' width='22' height='64' x='33.735' y='144.011' fill='%23FFFFFF' transform='rotate(-120 44.735 176.011)' rx='9'/%3E %3Crect style='animation-delay: 0.1875s;' width='22' height='64' x='21' y='96' fill='%23FFFFFF' transform='rotate(-90 32 128)' rx='9'/%3E %3Crect style='animation-delay: 0.25s;' width='22' height='64' x='33.926' y='48.133' fill='%23FFFFFF' transform='rotate(-60 44.926 80.133)' rx='9'/%3E %3Crect style='animation-delay: 0.3125s;' width='22' height='64' x='69.068' y='12.838' fill='%23FFFFFF' transform='rotate(-30 80.068 44.838)' rx='9'/%3E %3C/g%3E %3C/svg%3E"); --recordings-active-pagination-color: var(--axis-white); --recordings-header-arrow-color: var(--axis-yellow-4-brand); --recordings-header-button-border-color: var(--axis-gray-8); --recordings-header-button-gradient-from-color: var(--axis-gray-8); --recordings-header-button-gradient-to-color: var(--axis-gray-9); --recordings-header-color: var(--axis-white); --recordings-header-right-bg-color: var(--axis-blue-4-brand); --recordings-header-right-inactive-bg-color: var(--axis-gray-5); --recordings-header-select-bg-color: var(--axis-gray-10); --recordings-header-select-border-color: var(--axis-gray-7); --recordings-icon-color: var(--axis-white); --recordings-list-bg-color: var(--axis-gray-10-values); --recordings-list-border-color: var(--axis-gray-9); --recordings-list-color: var(--axis-white); --recordings-list-li-border-color: var(--axis-gray-8); --recordings-list-li-hover-bg-color: rgba(var(--axis-white-values), 0.04); --recordings-list-li-hover-color: var(--axis-white); --recordings-list-li-hover-start-time-bg-color: var(--axis-black); --recordings-list-ongoing-bg-color: var(--axis-red); --recordings-list-start-time-line-bg-color: var(--axis-white); --recordings-list-start-time-playing-border-color: var(--axis-yellow-4-brand); --recordings-list-storage-icon-color: var(--axis-gray-6); --recordings-mode-bg-color: var(--axis-gray-8); --recordings-mode-color: var(--axis-white); --recordings-panel-divider-color: var(--axis-gray-7); --recordings-progress-bg-color: var(--axis-gray-8-values); --recordings-progress-value-color: var(--axis-blue-5-values); } [data-theme='dark'] { --recordings-spinner-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E %3Cstyle%3E /* %3C!%5BCDATA%5B */ @keyframes spinner-fade %7B0%25 %7Bopacity: 1 %7D 80%25 %7Bopacity: 0 %7D 100%25 %7Bopacity: 0 %7D %7D g.spinner rect %7Bwill-change: opacity; opacity: 0; animation: spinner-fade 0.75s linear infinite;%7D /* %5D%5D%3E */ %3C/style%3E %3Cg class='spinner' fill='none' fill-rule='evenodd'%3E %3Crect style='animation-delay: -0.375s;' width='22' height='64' x='117' fill='%23FFFFFF' rx='9'/%3E %3Crect style='animation-delay: -0.3125s;' width='22' height='64' x='164.526' y='13.213' fill='%23FFFFFF' transform='rotate(30 175.526 45.213)' rx='9'/%3E %3Crect style='animation-delay: -0.25s;' width='22' height='64' x='200.213' y='48.133' fill='%23FFFFFF' transform='rotate(60 211.213 80.133)' rx='9'/%3E %3Crect style='animation-delay: -0.1875s;' width='22' height='64' x='212.846' y='95.449' fill='%23FFFFFF' transform='rotate(90 223.846 127.45)' rx='9'/%3E %3Crect style='animation-delay: -0.125s;' width='22' height='64' x='200.138' y='144.202' fill='%23FFFFFF' transform='rotate(120 211.138 176.202)' rx='9'/%3E %3Crect style='animation-delay: -0.0625s;' width='22' height='64' x='164.824' y='178.864' fill='%23FFFFFF' transform='rotate(150 175.824 210.864)' rx='9'/%3E %3Crect style='animation-delay: 0s;' width='22' height='64' x='117' y='192' fill='%23FFFFFF' transform='rotate(180 128 224)' rx='9'/%3E %3Crect style='animation-delay: 0.0625s;' width='22' height='64' x='69.003' y='179.378' fill='%23FFFFFF' transform='rotate(-150 80.003 211.378)' rx='9'/%3E %3Crect style='animation-delay: 0.125s;' width='22' height='64' x='33.735' y='144.011' fill='%23FFFFFF' transform='rotate(-120 44.735 176.011)' rx='9'/%3E %3Crect style='animation-delay: 0.1875s;' width='22' height='64' x='21' y='96' fill='%23FFFFFF' transform='rotate(-90 32 128)' rx='9'/%3E %3Crect style='animation-delay: 0.25s;' width='22' height='64' x='33.926' y='48.133' fill='%23FFFFFF' transform='rotate(-60 44.926 80.133)' rx='9'/%3E %3Crect style='animation-delay: 0.3125s;' width='22' height='64' x='69.068' y='12.838' fill='%23FFFFFF' transform='rotate(-30 80.068 44.838)' rx='9'/%3E %3C/g%3E %3C/svg%3E"); --recordings-active-pagination-color: var(--axis-white); --recordings-header-arrow-color: var(--axis-yellow-4-brand); --recordings-header-button-border-color: var(--axis-gray-8); --recordings-header-button-gradient-from-color: var(--axis-gray-8); --recordings-header-button-gradient-to-color: var(--axis-gray-9); --recordings-header-color: var(--axis-white); --recordings-header-right-bg-color: var(--axis-blue-4-brand); --recordings-header-right-inactive-bg-color: var(--axis-gray-5); --recordings-header-select-bg-color: var(--axis-gray-10); --recordings-header-select-border-color: var(--axis-gray-7); --recordings-icon-color: var(--axis-white); --recordings-list-bg-color: var(--axis-gray-10-values); --recordings-list-bg-hover-color: rgba(var(--axis-white-values), 0.04); --recordings-list-border-color: var(--axis-gray-9); --recordings-list-color: var(--axis-white); --recordings-list-li-border-color: var(--axis-gray-8); --recordings-list-li-hover-bg-color: rgba(var(--axis-white-values), 0.04); --recordings-list-li-hover-color: var(--axis-white); --recordings-list-li-hover-start-time-bg-color: var(--axis-black); --recordings-list-ongoing-bg-color: var(--axis-red); --recordings-list-start-time-line-bg-color: var(--axis-white); --recordings-list-start-time-playing-border-color: var(--axis-yellow-4-brand); --recordings-list-storage-icon-color: var(--axis-gray-6); --recordings-mode-bg-color: var(--axis-gray-8); --recordings-mode-color: var(--axis-white); --recordings-panel-divider-color: var(--axis-gray-7); --recordings-progress-bg-color: var(--axis-gray-8-values); --recordings-progress-value-color: var(--axis-blue-5-values); } .recordingsMode { background-color: var(--recordings-mode-bg-color); color: var(--recordings-mode-color) } .recordingsMode::before { content: attr(label); display: block; position: absolute; text-align: center; top: 50%; transform: translateY(-50%); width: 100%; } .recordings-wrap .settings-toggle { align-items: flex-end; bottom: 0; display: flex; justify-content: flex-end; position: absolute; z-index: var(--lvc-wrap-zindex); } .recordings-wrap .settings-toggle a { align-items: center; display: flex; justify-content: center; padding-right: 10px; } .recordingsProgress { /* Spacing between controls panel and progress bar */ --spacing: 3px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; bottom: calc(var(--controls-bottom-height) + var(--spacing)); height: 5px; left: 0; position: absolute; width: 100%; } .recordingsProgress.activity-progress-bar { --progressBarColor: rgba(var(--recordings-progress-value-color), 0.5); --progressBarBackgroundColor: rgba(var(--recordings-progress-bg-color), 0.4); } .recordingsList { background-color: rgb(var(--recordings-list-bg-color)); border-bottom: 2px solid var(--recordings-list-border-color); border-top: 2px solid var(--recordings-list-border-color); box-sizing: border-box; display: flex; flex-direction: column; height: calc(100% - 38px); left: 0; position: fixed; top: var(--page-header-height); transform: scale(1); transform-origin: bottom left; transition: transform 0.4s ease-in-out; width: 100%; z-index: 12 } .recordingsList.hide { transform: scale(0); transition: transform 0.2s ease-in-out; } .recordingsList.arrow-marker { --arrow-marker-size: var(--arrow-size); --arrow-marker-color: var(--recordings-list-border-color); --arrow-marker-position: 8%; } .recordingsList .waiting { background-image: var(--recordings-spinner-icon); } .recordingsList .listHeaderWrapper { flex: 0 0 auto; } .recordingsList .recordingsHeader { --recordings-list-header-height: 40px; color: var(--recordings-header-color); cursor: default; display: flex; font-size: 14px; height: var(--recordings-list-header-height); padding: 10px; } .recordingsList .recordingsHeader .filteredrecordingsNumber { display: flex; } .recordingsList .recordingsHeader .left-column, .recordingsList .recordingsHeader .right-column { align-items: center; display: flex; } .recordingsList .recordingsHeader .left-column { flex: 1; } .recordingsList .recordingsHeader .right-column { align-self: center; display: flex; font-size: 11px; line-height: inherit; } .recordingsList .recordingsHeader .right-column .total { background-color: var(--recordings-header-right-bg-color); margin-left: 5px; padding: 4px 10px; } .recordingsList .recordingsHeader .right-column .filterIcon { margin-right: 8px; width: 12px; } .recordingsList .recordingsHeader .recordingsIcon { color: var(--recordings-icon-color); width: 20px; } .recordingsList .recordingsHeader .title { display: flex; padding-left: 10px; } .recordingsList .filtersWrapper { border-bottom: 2px solid var(--recordings-list-li-border-color); flex: 0 0 auto; } .recordingsList .listWrapper { flex: 1; overflow: auto; } .recordingsList .list { background-color: transparent; color: var(--recordings-list-color); font-size: 12px; height: 100%; } .recordingsList .list li:not(:first-child) { border-top: 1px solid var(--recordings-list-li-border-color); } .recordingsList .list li { display: flex; font-size: 12px; font-weight: bold; padding: 8px 16px } .recordingsList .list li:last-child { border-bottom: 1px solid var(--recordings-list-li-border-color); } .recordingsList .list li:hover { background-color: var(--recordings-list-li-hover-bg-color); color: var(--recordings-list-li-hover-color); cursor: pointer; } .recordingsList .list li:hover .row::after { background-color: var(--recordings-list-li-hover-start-time-bg-color); } .recordingsList .list li:hover.playing .row::before { border-color: var(--recordings-list-li-hover-start-time-bg-color); } .recordingsList .list li .row { flex: 1; flex-direction: row; } .recordingsList .list li .left-column { flex: 5; font-size: 12px; } .recordingsList .list li .right-column { align-items: center; display: flex; flex: 1; justify-content: flex-end; } .recordingsList .list li .duration { font-weight: normal; text-align: right; } .recordingsList .list li .info { font-size: 11px; font-weight: normal; opacity: 0.8; padding-top: 6px; } .recordingsList .list li.playing { background-color: var(--axis-yellow-4-brand); border-color: var(--recordings-list-li-hover-start-time-bg-color); color: var(--axis-black); } .recordingsList .list li .separator { font-size: 13px; margin-left: 5px; margin-right: 5px; } .recordingsList .list li .ongoing::before { background-color: var(--recordings-list-ongoing-bg-color); border-radius: 10px; content: ''; display: inline-block; height: 10px; margin-right: 5px; width: 10px; } .recordingsList .emptyList { height: 100%; width: 100%; } .recordingsList .emptyList p { display: block; position: absolute; text-align: center; top: 50%; transform: translateY(-50%); width: 100%; } .recordingsPanel .control:not(.recordingsButton) { display: none; } .recordingsPanel .control { margin-right: 5px; } .recordingsPanel .control .btn:not(.filled) { background-color: transparent; border-color: transparent; } .recordingsPanel.unsupported .control.recordingsButton { flex: 1; } .recordingsPanel.unsupported .control.alwaysShown { display: inline; } .recordingsPanel.unsupported .control.recordingsSettings div.list { background-color: rgb(var(--recordings-list-bg-color)); } .recordingsPanel.unsupported .control.recordingsSettings .vertical-menu.menu-dispostion-above.arrow-marker.arrow-marker--bottom { right: 0 } .recordingsPanel.unsupported .control.recordingsSettings .vertical-menu.menu-dispostion-above.arrow-marker.arrow-marker--bottom::after { left: auto; right: 7px; } .recordingsPanel.playback .control { display: inline } .recordingsPanel.playback .control.recordingsTime { align-items: center; color: var(--recordings-mode-color); display: flex; flex: 1; font-size: 12px; } .recordingsPanel.playback .control.recordingsSettings div.list { background-color: rgb(var(--recordings-list-bg-color)); } .recordingsPanel.playback .control .pause, .recordingsPanel.playback .control .play { display: none; } .recordingsPanel.playback .control .paused .play, .recordingsPanel.playback .control .playing .pause { display: inline; } @media screen and (max-width: 47.94em) { .recordingsPanel.playback { flex-wrap: wrap; position: relative } .recordingsPanel.playback::after { border-top: 2px solid var(--recordings-panel-divider-color); content: ''; left: 0; position: absolute; top: 50%; width: 100%; } .recordingsPanel.playback .control { padding: 3px 0 } .recordingsPanel.playback .control.recordingsPlayback, .recordingsPanel.playback .control.recordingsTime { order: -1; } .recordingsPanel.playback .control.recordingsTime { flex: 1 0 auto; width: calc(100% - 45px); } .recordingsPanel.playback .control.recordingsButton { flex: 1 1 auto; } } .dialog.recordingProperties { max-height: 100vh; max-width: 450px; } .dialog.recordingProperties .dialogHeader { font-size: 14px; padding-bottom: 10px; } .dialog.recordingProperties .recordingPropertiesWrapper { max-height: 60vh; overflow: auto; } .dialog.recordingProperties .recordingPropertiesWrapper p { margin-bottom: 0; } .dialog.recordingProperties h3 { font-weight: bold; padding-top: 10px; } .dialog.recordingProperties section { font-size: 11px; padding-right: 60px; padding-top: 5px; } .dialog.recordingProperties .row { display: flex; } .dialog.recordingProperties .row p:last-child { margin-left: 5px; } .dialog.recordingExport { max-height: 450px; } .dialog.recordingExport .dialogHeader { font-size: 14px; padding-bottom: 2px; } .dialog.recordingExport section { font-size: 12px; padding-top: 15px; } .dialog.recordingExport input { width: calc(100% - 32px); } .dialog.recordingExport .encrypt { display: inline-block; width: auto; } .dialog.recordingExport .recordingSize { display: flex; } .dialog.recordingExport .recordingSize div:last-child { margin-left: 5px; } .dialog.recordingExport .nameWrapper { display: flex; } .dialog.recordingExport .nameWrapper .extension { align-items: center; display: flex; } .dialog.recordingExport p:last-child { margin-left: 5px; } .filtersWrapper { color: var(--recordings-header-color); font-size: 13px; padding: 10px } .filtersWrapper.filterExpanded { height: 100%; } .filtersWrapper .filtersHeader { cursor: pointer; padding-right: 20px; } .filtersWrapper .recordingsFilters { align-items: center; display: flex; flex-flow: row wrap; justify-content: space-between; } .filtersWrapper .filtersContent { width: 100%; } .filtersWrapper .expand-collapse-arrow--after::after { bottom: 2px; left: 10px; position: relative; } .filtersWrapper .expand-collapse-arrow--after.expanded::after { color: var(--recordings-header-arrow-color); top: 3px; transform: rotateZ(315deg); } .filtersWrapper .filtersContent, .filtersWrapper .sortPaginationWrapper { margin-bottom: 15px; } .filtersWrapper .filtersContent .row, .filtersWrapper .filtersContent section, .filtersWrapper .sortPaginationWrapper .row, .filtersWrapper .sortPaginationWrapper section { display: flex; flex-direction: column; } .filtersWrapper .filtersContent .row, .filtersWrapper .sortPaginationWrapper .row { flex: 1 } .filtersWrapper .filtersContent .row:first-child, .filtersWrapper .sortPaginationWrapper .row:first-child { margin-right: 15px; } .filtersWrapper .filtersContent section, .filtersWrapper .sortPaginationWrapper section { margin-top: 10px; } .filtersWrapper .filtersContent input, .filtersWrapper .filtersContent select, .filtersWrapper .sortPaginationWrapper input, .filtersWrapper .sortPaginationWrapper select { color: var(--recordings-header-color); padding-top: 3px; } .filtersWrapper .filtersContent input::-ms-input-placeholder, .filtersWrapper .sortPaginationWrapper input::-ms-input-placeholder { color: var(--recordings-header-color); } .filtersWrapper .filtersContent input::placeholder, .filtersWrapper .sortPaginationWrapper input::placeholder { color: var(--recordings-header-color); } .filtersWrapper .filtersContent input, .filtersWrapper .sortPaginationWrapper input { margin-top: 5px; } .filtersWrapper .filtersContent input, .filtersWrapper .filtersContent option, .filtersWrapper .filtersContent select, .filtersWrapper .sortPaginationWrapper input, .filtersWrapper .sortPaginationWrapper option, .filtersWrapper .sortPaginationWrapper select { background-color: var(--recordings-header-select-bg-color); border-color: var(--recordings-header-select-border-color) } .filtersWrapper .filtersContent input:active, .filtersWrapper .filtersContent option:active, .filtersWrapper .filtersContent select:active, .filtersWrapper .sortPaginationWrapper input:active, .filtersWrapper .sortPaginationWrapper option:active, .filtersWrapper .sortPaginationWrapper select:active { background-color: var(--recordings-header-select-bg-color); border-color: var(--recordings-header-select-border-color); color: var(--recordings-header-color); } .filtersWrapper .filtersContent input:focus, .filtersWrapper .filtersContent option:focus, .filtersWrapper .filtersContent select:focus, .filtersWrapper .sortPaginationWrapper input:focus, .filtersWrapper .sortPaginationWrapper option:focus, .filtersWrapper .sortPaginationWrapper select:focus { border-color: var(--select-state-focus-border-color); } .filtersWrapper .filtersContent .twoSelect, .filtersWrapper .sortPaginationWrapper .twoSelect { flex-direction: row; } .filtersWrapper .filtersContent .twoSelect label, .filtersWrapper .filtersContent .twoSelect select, .filtersWrapper .sortPaginationWrapper .twoSelect label, .filtersWrapper .sortPaginationWrapper .twoSelect select { width: 100%; } .filtersWrapper .filtersContent label, .filtersWrapper .sortPaginationWrapper label { margin-bottom: 2px; } .filtersWrapper .filtersContent .buttonWrapper, .filtersWrapper .sortPaginationWrapper .buttonWrapper { flex-direction: row-reverse; } .filtersWrapper .filtersContent .buttonWrapper button, .filtersWrapper .sortPaginationWrapper .buttonWrapper button { --button-state-normal-bg-gradient-from: var(--recordings-header-button-gradient-from-color); --button-state-normal-bg-gradient-to: var(--recordings-header-button-gradient-to-color); border-color: var(--recordings-header-button-border-color); color: var(--recordings-header-color) } .filtersWrapper .filtersContent .buttonWrapper button:hover, .filtersWrapper .sortPaginationWrapper .buttonWrapper button:hover { --button-state-hover-bg-gradient-from: var(--recordings-header-button-gradient-from-color); --button-state-hover-bg-gradient-to: var(--recordings-header-button-gradient-to-color); } .filtersWrapper .filtersContent .buttonWrapper button:focus, .filtersWrapper .sortPaginationWrapper .buttonWrapper button:focus { border-color: var(--button-state-focus-border-color); } .filtersWrapper .sortPaginationWrapper { display: flex; flex-direction: row; justify-content: flex-end; } .filtersWrapper .sortPaginationWrapper .recordingsPagination { align-items: center; display: flex; flex-direction: row; justify-content: flex-start; } .filtersWrapper .sortPaginationWrapper .recordingsPagination .prevRecordings, .filtersWrapper .sortPaginationWrapper .recordingsPagination .nextRecordings { border: solid var(--recordings-header-select-border-color) 1px; color: var(--recordings-header-select-border-color); height: 25px; position: relative; width: 30px } .filtersWrapper .sortPaginationWrapper .recordingsPagination .prevRecordings::before, .filtersWrapper .sortPaginationWrapper .recordingsPagination .nextRecordings::before { left: 50%; position: absolute; top: 50%; transform: translateX(-35%) rotateZ(225deg); } .filtersWrapper .sortPaginationWrapper .recordingsPagination .prevRecordings.active, .filtersWrapper .sortPaginationWrapper .recordingsPagination .nextRecordings.active { color: var(--recordings-active-pagination-color); cursor: pointer; } .filtersWrapper .sortPaginationWrapper .recordingsPagination .nextRecordings::before { transform: translateX(-65%) rotateZ(45deg); } .filtersWrapper .sortPaginationWrapper .recordingsPagination .prevRecordings { border-right: 0; } .filtersWrapper .sortPaginationWrapper .recordingsPagination div:not(.totalPages) { background-color: var(--recordings-header-select-bg-color); } .filtersWrapper .sortPaginationWrapper .recordingsPagination .currentPage { border: solid var(--recordings-header-select-border-color) 1px; height: 25px; margin: 0; min-width: 30px; padding: 0; text-align: center } .filtersWrapper .sortPaginationWrapper .recordingsPagination .currentPage:focus { border-color: var(--input-state-focus-border-color); } .filtersWrapper .sortPaginationWrapper .recordingsPagination .totalPages { margin: 0 10px; } .filtersWrapper .sortPaginationWrapper .recordingsPagination .totalPages span { vertical-align: middle; } .filtersWrapper .sortPaginationWrapper section { flex: 1 1 auto; } .filtersWrapper .sortPaginationWrapper #recordingsFilterSort { height: 25px; } @media screen and (min-width: 48em) { .filtersWrapper.filterExpanded { height: auto; } .recordingsList { /* TODO: Replace with an actual value when top bar is used */ --top-padding: 71px; --spacing: 12px; --recordings-list-width: 340px; background-color: rgba(var(--recordings-list-bg-color), 0.75); height: calc(100% - (var(--controls-bottom-height) + var(--top-padding) + var(--spacing))); left: var(--spacing); position: absolute; top: var(--top-padding); width: var(--recordings-list-width); } .recordingsPanel.playback .control.recordingsSettings div.list li { background-color: rgba(var(--recordings-list-bg-color), 0.75); border-color: var(--recordings-list-border-color); } .recordingsPanel.playback .control.recordingsSettings menu { border-color: var(--recordings-list-border-color) } .recordingsPanel.playback .control.recordingsSettings menu::after { border-top-color: var(--recordings-list-border-color); } .dialog.recordingProperties .recordingPropertiesWrapper { max-height: none; overflow: visible; } } .securityGroup { display: flex; flex-direction: column; margin-top: 15px; width: 100% } .securityGroup select[multiple='multiple'] { background-image: none; height: auto; min-height: 100px; padding-right: 0 /* Overwrites default active style for * the multiple select */ } .securityGroup select[multiple='multiple']:active, .securityGroup select[multiple='multiple']:active:focus, .securityGroup select[multiple='multiple']:active:hover { background-color: var(--select-state-normal-bg-color); border-color: var(--select-state-normal-border-color); box-shadow: none; } .securityGroup select[multiple='multiple']:hover { border-color: var(--select-state-normal-border-color); } .securityGroup .btn.btn-secondary.btn-small { margin-left: 10px; min-width: auto; min-width: 0; } .caCertificateControls, .certificateControls { display: flex; flex-direction: row; justify-content: flex-end; margin-top: 12px; } .copyIconFill, .securityIconShield { fill: none; } .createSelfSignedWrapper section { display: flex; flex-direction: column; margin-top: 10px; } .dialog .certificateMoreHeaderWrapper { flex-direction: row; margin-top: 10px } .dialog .certificateMoreHeaderWrapper p { margin-bottom: 0; } .certificateMore { margin-top: 20px; } .certificatesMandatory { flex: 1; text-align: end; } .certificateKeyHeader, .certificatePemHeader, .certificateSignatureAlgorithmHeader { cursor: pointer; display: flex; margin-top: 20px; } .dialog .certificateKeyHeader .arrow, .dialog .certificatePemHeader .arrow { flex: 1 } .dialog .certificateKeyHeader .arrow::after, .dialog .certificatePemHeader .arrow::after { left: 20px; position: relative; top: 5px; } .dialog .certificateKeyHeader.expanded .arrow::after, .dialog .certificatePemHeader.expanded .arrow::after { border-right-color: var(--certificates-expanded-arrow-color); border-top-color: var(--certificates-expanded-arrow-color); top: 8px; transform: rotateZ(315deg); } .certificateSignatureAlgorithmHeader, .dialog .certificateMoreHeader { cursor: pointer; flex: 1 } .certificateSignatureAlgorithmHeader p::after, .dialog .certificateMoreHeader p::after { bottom: 2px; left: 10px; position: relative; } .certificateSignatureAlgorithmHeader.expanded p::after, .dialog .certificateMoreHeader.expanded p::after { border-right-color: var(--certificates-expanded-arrow-color); border-top-color: var(--certificates-expanded-arrow-color); top: 3px; transform: rotateZ(315deg); } .component-securityTextarea { align-items: flex-end; flex-direction: column } .component-securityTextarea textarea { font-family: monospace; margin: 0 5% 10px; min-height: 280px; resize: none; width: 90% } .component-securityTextarea textarea:active, .component-securityTextarea textarea:hover { border-color: var(--input-state-normal-border-color); color: var(--input-state-normal-color); } .component-securityTextarea textarea:focus { color: var(--input-state-normal-color); } .securityTextareaIcon { align-items: flex-end; display: flex; justify-content: flex-end; margin-right: 5% } .securityTextareaIcon button.btn { min-width: 0; } .securityTextareaIcon .icon { cursor: pointer; width: 24px; } .certificateSignRequest { margin-top: 20px; } .certificateWaiting { background-position: 50% 70%; } .caCertificateFileWrapper, .certificateFileWrapper, .certificateKeyFileWrapper, .firmwareCertificateFileWrapper { align-items: flex-start; display: flex; margin-top: 15px } .caCertificateFileWrapper label[for], .certificateFileWrapper label[for], .certificateKeyFileWrapper label[for], .firmwareCertificateFileWrapper label[for] { align-self: baseline; line-height: 20px; } .caCertificateFileWrapper .setting-label, .certificateFileWrapper .setting-label, .certificateKeyFileWrapper .setting-label, .firmwareCertificateFileWrapper .setting-label { margin: 5px 10px 0 0; } .caCertificateFileWrapper .setting-wrapper, .certificateFileWrapper .setting-wrapper, .certificateKeyFileWrapper .setting-wrapper, .firmwareCertificateFileWrapper .setting-wrapper { display: flex; flex-direction: column } .caCertificateFileWrapper .setting-wrapper span, .certificateFileWrapper .setting-wrapper span, .certificateKeyFileWrapper .setting-wrapper span, .firmwareCertificateFileWrapper .setting-wrapper span { margin-top: 5px; min-height: 14px; } .caCertificateFileWrapper input[type=file], .certificateFileWrapper input[type=file], .certificateKeyFileWrapper input[type=file], .firmwareCertificateFileWrapper input[type=file] { display: none; } .caCertificateFileWrapper { margin-top: 0; } .uploadCertificate h2 { margin-bottom: 15px; } .certificateGroup div { display: flex } .certificateGroup div dt { margin-right: 5px; } .certificateGroup div b { font-weight: bold; } .dialog.certificateInfo { max-height: 90vh } .dialog.certificateInfo .dialogContent { overflow: auto } .dialog.certificateInfo .dialogContent dl { margin-bottom: 5px; } .certificateIssued { margin: 10px 0 } .certificateIssued header { font-size: 15px; margin: 15px 0 10px; } .certificateIssued .certificateGroup div { margin-left: 15px; } .pemCertificate.dialog { max-width: 480px; } .dialog .dialogContent .certificateHeading { font-weight: bold; overflow: visible; } .certificatePemContent, .certificateKeyContent, .certificateSignatureAlgorithmContent { margin-top: 5px; } .certificateSignatureLabel { flex: 1 0 auto; } .certificatePemWrapper { display: flex; margin-top: 20px } .certificatePemWrapper .component-icon.icon { cursor: pointer; text-align: left; } .certificatePemHeader { margin-top: 0 } .certificatePemHeader .arrow { min-width: 80px; } .component-httpSettings section, .component-ieee8021x section { display: flex; flex-direction: column; margin-top: 15px; width: 100%; } section.connectionPorts { flex-direction: row } section.connectionPorts .component-input { align-items: flex-start; display: flex; flex-direction: column; } .httpSettingsButton, .ieee8021xButton { align-items: flex-end; display: flex; } section.ieee8021xVersionWrapper { align-items: center; flex-direction: row } section.ieee8021xVersionWrapper label[for='ieee8021xVersion'] { margin-right: 20px; } .ieee8021xStatus { flex: 1 0 auto; } .component-ieee8021x section.ieee8021xButton { flex-direction: row; } .securityTextareaButton { position: relative } .securityTextareaButton::after { background-color: var(--security-tooltip-bg); color: var(--security-tooltip-color); content: attr(data-tooltip); padding: 5px 15px; position: absolute; /* Dialog uses overflow property * which cuts the content * that's why we want to align * the tooltip to the right border */ right: 0; top: 28px; } .securityTextareaButton.hiddenTooltip::after { display: none; } .certificatePemContent { /* Prevents 'jumping' when the * tooltip is shown */ margin-bottom: 40px; } .certificateSignatureWrapper { flex-direction: column; } .AXIS-snmpGroup .component-checkbox { margin-bottom: 0; margin-top: 0; } .streamProfiles .compartments.active { background-color: var(--body-state-normal-bg-color); display: flex; overflow: hidden; position: static; width: 100%; } .streamProfiles .compartments.active .panel-group { display: flex; flex-direction: column; max-width: 100%; padding: 0; position: static; width: 100%; } .streamProfiles .compartments.active .panel-group .header { display: flex; justify-content: space-between; min-height: 25px; padding: 10px 10px 0; } .streamProfiles .compartments.active .panel-group .header h2 { margin: 0; } .streamProfiles.popup.active { min-height: 450px; } .streamProfiles.popup.active .component { width: 100%; } .streamProfiles.popup.active .component > label { max-width: 100%; width: 100%; } .streamProfiles.popup.active .component textarea { resize: none; } .streamProfiles__content { display: flex; flex-direction: column; flex-grow: 1; overflow: auto; } .streamProfiles__main { padding: 10px; position: relative; } .streamProfiles__main textarea { max-width: 100%; width: 100%; } .streamProfiles__groups { border-top: 1px solid var(--component-foldableList-border-color); flex-grow: 1; margin-bottom: 50px; overflow: auto; } .streamProfiles__groups:empty { border-top: 0; } .streamProfiles__controls { background-color: var(--body-state-normal-bg-color); border-top: 1px solid var(--component-foldableList-border-color); bottom: 0; display: flex; justify-content: space-between; left: 0; min-height: 42px; padding: 10px; position: absolute; right: 0; z-index: 1; } .streamProfiles__controls .btn + .btn { margin-left: 10px; } .streamProfile__setting { align-items: flex-end; display: flex; } .streamProfile__setting-enabler { align-self: flex-start; margin-top: 16px; padding: 8px; } .streamProfile__setting-field { align-self: stretch; border-left: 1px solid var(--component-foldableList-border-color); flex-grow: 1; padding: 3px 8px; } .streamProfiles__preview-link { display: flex; max-width: 80px; overflow: hidden; position: absolute; right: 10px; text-align: left; top: 78%; word-break: break-all; } .streamProfiles__preview-link > span { color: var(--component-link-normal-color); cursor: pointer; } .dialog-centered-btn-wrapper { align-items: center; display: flex; flex-direction: column; justify-content: center; width: 100%; } @keyframes viewAreaAdded { 0% { fill-opacity: 0; } 40% { fill-opacity: 0.05; } 80% { fill-opacity: 0.05; } 100% { fill-opacity: 0; } } @keyframes viewAreaAddedScale { /* Needed so that the initial placement on the screen is centered */ 0% { transform: scale(1); transform-origin: center; } /* Now we can start the actual transformation */ 1% { transform: scale(0.7); transform-origin: center; } 50% { transform: scale(0.7); transform-origin: center; } 100% { transform: scale(1); transform-origin: center; } } #viewareaPanel { /* We need a top spacing since we are forcefully hiding the titles */ padding-top: 24px; } #viewareaPanel .component-title { display: none; } .settings-panel.popup.viewarea .compartments { background-color: var(--body-state-normal-bg-color); } .settings-panel.popup.viewarea .btn.btn-accent, .settings-panel.popup.viewarea .btn.btn-secondary { text-transform: none; } .settings-panel.popup.viewarea .popupControls { left: 16px; } .settings-panel.popup.viewarea .popupControls button[value^='disable'] { float: left; min-width: auto; min-width: 0; } g.view-area.enabled.view-area-added { animation: 600ms cubic-bezier(0.07, 0.82, 0.16, 1) viewAreaAddedScale; } g.view-area.enabled.view-area-added .filling { animation: 600ms ease-in-out viewAreaAdded; fill: var(--svg-main-color); } g.view-area.enabled .filling, g.view-area.enabled .border { stroke: rgba(var(--axis-white-values), 0.5); } g.view-area.enabled.selected .filling, g.view-area.enabled.selected .border { stroke: var(--svg-main-color); } g.view-area.enabled.selected .filling { stroke: var(--svg-main-color); stroke-width: 1; } g.view-area.enabled.selected .header-background { display: inline; fill-opacity: 0.3; } g.view-area.enabled.selected .header-text { color: var(--svg-main-color); display: inline; font-size: 12px; } g.view-area.enabled.selected .resize-handle { display: inline; } g.view-area.disabled { pointer-events: none; } g.view-area.disabled .resize-handle { display: none !important; } g.view-area.disabled .filling, g.view-area.disabled .border { stroke: rgba(var(--axis-white-values), 0.5); } g.view-area.disabled.selected .filling, g.view-area.disabled.selected .border { stroke: var(--svg-main-color); } g.view-area.disabled.selected .filling { stroke-width: 1; } g.view-area .header-background { display: none; } g.view-area .header-text { display: none; } g.view-area .resize-handle { display: none; } .component-wlan { /* Align with setting header */ margin: 0; } .component-wlan .expandable-list .component-title { margin-top: 8px; } .component-wlan .expandable-list .component-title .wireless-network-title { cursor: pointer; } /* Header */ .component-wlan header .icon { margin-right: 2px; } .component-wlan header .icon svg { height: 12px; width: 12px; } .component-wlan header button:focus.icon svg { outline: none; } .component-wlan header .expanded svg { fill: var(--component-editablelist-accent-state-active-color); } .component-wlan .waiting { background-position: 93% 40%; } /* Network row */ .component-wlan .expandable-list .expandable-row { display: flex; padding-left: 0; } .component-wlan .expandable-list .expandable-row .icon { padding: 0 0 0 1px; } .component-wlan .expandable-list .expandable-row .icon svg { height: 12px; } .component-wlan .expandable-list .expandable-row .icon.disabled { visibility: hidden; } .component-wlan .expandable-list .expandable-row .icon.wlan-high path { fill: var(--component-wlan-strength-icon-bar-full-normal-color); } .component-wlan .expandable-list .expandable-row .icon.wlan-low path:nth-child(3) { fill: var(--component-wlan-strength-icon-bar-full-normal-color); } .component-wlan .expandable-list .expandable-row .icon.wlan-low path:nth-child(-n+2) { fill: var(--component-wlan-strength-icon-bar-empty-normal-color); } .component-wlan .expandable-list .expandable-row .icon.wlan-middle path:nth-child(n+2) { fill: var(--component-wlan-strength-icon-bar-full-normal-color); } .component-wlan .expandable-list .expandable-row .icon.wlan-middle path:nth-child(1) { fill: var(--component-wlan-strength-icon-bar-empty-normal-color); } .component-wlan .expandable-list .expandable-row .icon.wlan-none path { fill: var(--component-wlan-strength-icon-bar-empty-normal-color); } .component-wlan .expandable-list .expandable-row .expandable-column:nth-child(2) { margin-right: auto; } .component-wlan .expandable-list .expandable-row svg { fill: var(--component-wlan-lock-icon-normal-color); } .component-wlan .expandable-list .expandable-row .expandable-column:first-child .icon { padding: 0 3px 0 0; } .component-wlan .expandable-list .expandable-row .expandable-column:first-child .icon svg { height: 10px; } /* Selected network */ .component-wlan .selection .expandable-row .expandable-column:first-of-type svg { fill: var(--component-wlan-check-icon-normal-color); } .component-wlan .selection #AXIS-WLAN-forget { visibility: visible; } /* Settings */ .component-wlan .wlan-settings { padding: 10px; } .component-wlan .wlan-settings .inputs .panel-group { border: 0; box-shadow: none; padding: 10px 0 0; width: 100%; } .component-wlan .wlan-settings .inputs .panel-group .multicolumn { justify-content: flex-end; } .component-wlan .wlan-settings .inputs .panel-group .multicolumn div { flex: 0 1 auto; } .component-wlan .wlan-settings .labelNotSupported { padding: 20px; text-align: center; } .component-wlan #AXIS-WLAN-forget { visibility: hidden; } .component-wlan #AXIS-Dot1XCACertificate { padding-top: 14px; } .component-wlan .no-network-selected { border-bottom: var(--component-border-size) solid var(--component-list-child-state-normal-border-color); } .component-wlan .no-network-selected-text { cursor: default; height: 32px; line-height: 32px; padding: 0 25px } .component-wlan .no-network-selected-text:hover { background-color: transparent; } /* @end */ /* @group Utilities */ /* Will visually hide an element if: 1. The direct parent is NOT being hovered and the element to be hidden contains `data-hoverable` as an attribute, or; 2. The `visuallyhidden` class is used and `data-hoverable` attribute is not present. See https://allyjs.io/tutorials/hiding-elements.html#2017-edition-of-visuallyhidden for more information regarding the accessiblity aspects */ :not(:hover) > .visuallyhidden[data-hoverable], .visuallyhidden:not(:focus):not(:active):not([data-hoverable]) { border: 0; clip: rect(0 0 0 0); /* For browsers not supporting clip-path */ /* stylelint-disable-line order/properties-alphabetical-order */ -webkit-clip-path: inset(100%); clip-path: inset(100%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; } .pointer { cursor: pointer; } .hidden { display: none !important; /* Important needed to override any local display setting */ } .center { text-align: center; } /* @end */ html { /* Axis Color Palette */ --axis-black-values: 0, 0, 0; --axis-white-values: 255, 255, 255; --axis-gray-1-values: 250, 250, 250; --axis-gray-2-values: 244, 244, 244; --axis-gray-3-values: 230, 230, 230; --axis-gray-4-values: 205, 205, 205; --axis-gray-5-values: 178, 178, 178; --axis-gray-6-values: 140, 140, 140; --axis-gray-7-values: 102, 102, 102; --axis-gray-8-values: 77, 77, 77; --axis-gray-9-values: 55, 55, 55; --axis-gray-10-values: 43, 43, 43; --axis-gray-11-values: 33, 33, 33; --axis-gray-12-values: 18, 18, 18; --axis-yellow-1-values: 255, 248, 227; --axis-yellow-2-values: 255, 233, 169; --axis-yellow-3-values: 255, 219, 110; --axis-yellow-4-brand-values: 255, 204, 51; --axis-yellow-5-values: 240, 180, 0; --axis-yellow-6-values: 214, 161, 0; --axis-yellow-7-values: 188, 141, 0; --axis-blue-1-values: 176, 233, 255; --axis-blue-2-values: 120, 217, 255; --axis-blue-3-values: 61, 200, 255; --axis-blue-4-brand-values: 0, 157, 220; --axis-blue-5-values: 0, 130, 181; --axis-blue-6-values: 0, 102, 143; --axis-blue-7-values: 0, 73, 102; --axis-red-values: 237, 26, 59; --axis-green-values: 141, 198, 63; --axis-black: rgb(var(--axis-black-values)); --axis-white: rgb(var(--axis-white-values)); --axis-gray-1: rgb(var(--axis-gray-1-values)); --axis-gray-2: rgb(var(--axis-gray-2-values)); --axis-gray-3: rgb(var(--axis-gray-3-values)); --axis-gray-4: rgb(var(--axis-gray-4-values)); --axis-gray-5: rgb(var(--axis-gray-5-values)); --axis-gray-6: rgb(var(--axis-gray-6-values)); --axis-gray-7: rgb(var(--axis-gray-7-values)); --axis-gray-8: rgb(var(--axis-gray-8-values)); --axis-gray-9: rgb(var(--axis-gray-9-values)); --axis-gray-10: rgb(var(--axis-gray-10-values)); --axis-gray-11: rgb(var(--axis-gray-11-values)); --axis-gray-12: rgb(var(--axis-gray-12-values)); --axis-yellow-1: rgb(var(--axis-yellow-1-values)); --axis-yellow-2: rgb(var(--axis-yellow-2-values)); --axis-yellow-3: rgb(var(--axis-yellow-3-values)); --axis-yellow-4-brand: rgb(var(--axis-yellow-4-brand-values)); --axis-yellow-5: rgb(var(--axis-yellow-5-values)); --axis-yellow-6: rgb(var(--axis-yellow-6-values)); --axis-yellow-7: rgb(var(--axis-yellow-7-values)); --axis-blue-1: rgb(var(--axis-blue-1-values)); --axis-blue-2: rgb(var(--axis-blue-2-values)); --axis-blue-3: rgb(var(--axis-blue-3-values)); --axis-blue-4-brand: rgb(var(--axis-blue-4-brand-values)); --axis-blue-5: rgb(var(--axis-blue-5-values)); --axis-blue-6: rgb(var(--axis-blue-6-values)); --axis-blue-7: rgb(var(--axis-blue-7-values)); --axis-red: rgb(var(--axis-red-values)); --axis-green: rgb(var(--axis-green-values)); }