@rocketshow/designer 1.69.0 → 1.71.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -13256,11 +13256,11 @@ class IntroComponent {
|
|
|
13256
13256
|
this.introService.setShowIntro(false);
|
|
13257
13257
|
}
|
|
13258
13258
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IntroComponent, deps: [{ token: IntroService }, { token: HardwarePromoService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13259
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: IntroComponent, isStandalone: false, selector: "lib-app-intro", ngImport: i0, template: "@if (introService.showIntro) {\n<div\n class=\"card border-secondary h-100 panel card-intro-active\"\n [ngStyle]=\"{\n top: 'calc(' + introService.positionTopPercentage + '% - 150px)',\n left: 'calc(' + introService.positionLeftPercentage + '% - 200px)'\n }\"\n>\n <div class=\"card-header d-flex\">\n <div>\n <i class=\"fa fa-info-circle mr-1\" aria-hidden=\"true\"></i>\n {{ 'designer.intro.title-' + introService.activeStep | translate }}\n </div>\n <div class=\"ml-auto\">\n <
|
|
13259
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: IntroComponent, isStandalone: false, selector: "lib-app-intro", ngImport: i0, template: "@if (introService.showIntro) {\n<div\n class=\"card border-secondary h-100 panel card-intro-active\"\n [ngStyle]=\"{\n top: 'calc(' + introService.positionTopPercentage + '% - 150px)',\n left: 'calc(' + introService.positionLeftPercentage + '% - 200px)'\n }\"\n>\n <div class=\"card-header d-flex\">\n <div>\n <i class=\"fa fa-info-circle mr-1\" aria-hidden=\"true\"></i>\n {{ 'designer.intro.title-' + introService.activeStep | translate }}\n </div>\n <div class=\"ml-auto\">\n <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"close(); (false)\">\n <span aria-hidden=\"true\">×</span>\n </button>\n </div>\n </div>\n <div class=\"card-body h-100\">\n <p>{{ 'designer.intro.step-' + introService.activeStep | translate }}</p>\n\n <!-- the user just walked through the whole designer: a good moment to mention the hardware -->\n @if (introService.activeStep == 'finish' && hardwarePromoService.enabled) {\n <p class=\"mb-0\">\n {{ 'designer.hardware-promo.intro-finish' | translate }}\n <a [href]=\"promoLink\" target=\"_blank\" rel=\"noopener\">{{ 'designer.hardware-promo.cta' | translate }}</a>\n </p>\n }\n </div>\n <div class=\"card-footer\">\n @if (introService.activeStep != 'start') {\n <button type=\"button\" class=\"btn btn-secondary\" (click)=\"introService.back()\">\n <i class=\"fa fa-chevron-left\" aria-hidden=\"true\"></i> {{ 'designer.intro.back' | translate }}\n </button>\n } @if (introService.activeStep != 'finish') {\n <button type=\"button\" class=\"btn btn-secondary pull-right\" (click)=\"introService.next()\">\n {{ 'designer.intro.next' | translate }} <i class=\"fa fa-chevron-right\" aria-hidden=\"true\"></i>\n </button>\n } @if (introService.activeStep == 'finish') {\n <button type=\"button\" class=\"btn btn-secondary pull-right\" (click)=\"close()\">\n {{ 'designer.intro.close' | translate }}\n </button>\n }\n </div>\n</div>\n}\n", styles: [".card{position:absolute;width:400px;height:350px!important;z-index:999999}\n"], dependencies: [{ kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
|
|
13260
13260
|
}
|
|
13261
13261
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IntroComponent, decorators: [{
|
|
13262
13262
|
type: Component,
|
|
13263
|
-
args: [{ selector: 'lib-app-intro', standalone: false, template: "@if (introService.showIntro) {\n<div\n class=\"card border-secondary h-100 panel card-intro-active\"\n [ngStyle]=\"{\n top: 'calc(' + introService.positionTopPercentage + '% - 150px)',\n left: 'calc(' + introService.positionLeftPercentage + '% - 200px)'\n }\"\n>\n <div class=\"card-header d-flex\">\n <div>\n <i class=\"fa fa-info-circle mr-1\" aria-hidden=\"true\"></i>\n {{ 'designer.intro.title-' + introService.activeStep | translate }}\n </div>\n <div class=\"ml-auto\">\n <
|
|
13263
|
+
args: [{ selector: 'lib-app-intro', standalone: false, template: "@if (introService.showIntro) {\n<div\n class=\"card border-secondary h-100 panel card-intro-active\"\n [ngStyle]=\"{\n top: 'calc(' + introService.positionTopPercentage + '% - 150px)',\n left: 'calc(' + introService.positionLeftPercentage + '% - 200px)'\n }\"\n>\n <div class=\"card-header d-flex\">\n <div>\n <i class=\"fa fa-info-circle mr-1\" aria-hidden=\"true\"></i>\n {{ 'designer.intro.title-' + introService.activeStep | translate }}\n </div>\n <div class=\"ml-auto\">\n <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"close(); (false)\">\n <span aria-hidden=\"true\">×</span>\n </button>\n </div>\n </div>\n <div class=\"card-body h-100\">\n <p>{{ 'designer.intro.step-' + introService.activeStep | translate }}</p>\n\n <!-- the user just walked through the whole designer: a good moment to mention the hardware -->\n @if (introService.activeStep == 'finish' && hardwarePromoService.enabled) {\n <p class=\"mb-0\">\n {{ 'designer.hardware-promo.intro-finish' | translate }}\n <a [href]=\"promoLink\" target=\"_blank\" rel=\"noopener\">{{ 'designer.hardware-promo.cta' | translate }}</a>\n </p>\n }\n </div>\n <div class=\"card-footer\">\n @if (introService.activeStep != 'start') {\n <button type=\"button\" class=\"btn btn-secondary\" (click)=\"introService.back()\">\n <i class=\"fa fa-chevron-left\" aria-hidden=\"true\"></i> {{ 'designer.intro.back' | translate }}\n </button>\n } @if (introService.activeStep != 'finish') {\n <button type=\"button\" class=\"btn btn-secondary pull-right\" (click)=\"introService.next()\">\n {{ 'designer.intro.next' | translate }} <i class=\"fa fa-chevron-right\" aria-hidden=\"true\"></i>\n </button>\n } @if (introService.activeStep == 'finish') {\n <button type=\"button\" class=\"btn btn-secondary pull-right\" (click)=\"close()\">\n {{ 'designer.intro.close' | translate }}\n </button>\n }\n </div>\n</div>\n}\n", styles: [".card{position:absolute;width:400px;height:350px!important;z-index:999999}\n"] }]
|
|
13264
13264
|
}], ctorParameters: () => [{ type: IntroService }, { type: HardwarePromoService }] });
|
|
13265
13265
|
|
|
13266
13266
|
class PresetStepSettingsComponent {
|
|
@@ -13836,11 +13836,11 @@ class DesignerComponent {
|
|
|
13836
13836
|
localStorage.setItem('language', language);
|
|
13837
13837
|
}
|
|
13838
13838
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DesignerComponent, deps: [{ token: i4.TranslateService }, { token: ProjectService }, { token: ConfigService }, { token: FixturePoolService }, { token: HotkeyTargetExcludeService }, { token: i1$1.BsModalService }, { token: UserService }, { token: UserEnsureLoginService }, { token: ProjectLoadService }, { token: WarningDialogService }, { token: ErrorDialogService }, { token: FixtureService }, { token: TimelineService }, { token: IntroService }, { token: PresetService }, { token: ColorService }, { token: EffectService }, { token: HardwarePromoService }, { token: UndoService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13839
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DesignerComponent, isStandalone: false, selector: "lib-designer", inputs: { menuHeightPx: "menuHeightPx", externalCompositionsAvailable: "externalCompositionsAvailable", restUrl: "restUrl", enableMediaLibrary: "enableMediaLibrary", loginAvailable: "loginAvailable", shareAvailable: "shareAvailable", languageSwitch: "languageSwitch", livePreview: "livePreview", localProfiles: "localProfiles", intro: "intro", uniqueProjectNames: "uniqueProjectNames", dropzoneChunking: "dropzoneChunking", universes: "universes", freeUniverseEdit: "freeUniverseEdit", hardwarePromo: "hardwarePromo" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "previewComponent", first: true, predicate: PreviewComponent, descendants: true }, { propertyName: "timelineComponent", first: true, predicate: TimelineComponent, descendants: true }], ngImport: i0, template: "<!-- Wrap the whole component inside a div to encapsulate the CSS -->\n\n<!-- 100 % height minus the menu bar above and the gutter size of 13 px -->\n<!-- <div style=\"height: calc(100% - 33px)\"> -->\n<div id=\"designer\" [ngStyle]=\"{ height: 'calc(100% - ' + totalMenuHeightPx + 'px)' }\">\n <!-- Navigation -->\n <nav class=\"navbar navbar-expand-lg navbar-light bg-light\" style=\"z-index: 9999\">\n <!-- Menu buttons -->\n <ul class=\"navbar-nav mr-auto\">\n <li class=\"nav-item dropdown\">\n <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"fileDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n {{ 'designer.navigation.project' | translate }}\n </a>\n <div class=\"dropdown-menu\" aria-labelledby=\"fileDropdown\">\n <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectNew(); (false)\"\n ><i class=\"fa fa-fw fa-file-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-new' | translate }}</a\n >\n <a class=\"dropdown-item\" href=\"#\" (click)=\"projectOpen(); (false)\"\n ><i class=\"fa fa-fw fa-folder-open-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-open' | translate }}</a\n >\n <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectSave(); (false)\"\n ><i class=\"fa fa-fw fa-floppy-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-save' | translate }}</a\n >\n <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectSaveAs(); (false)\"\n ><i class=\"fa fa-fw fa-floppy-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-save-as' | translate }}</a\n >\n <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectImport(); (false)\"\n ><i class=\"fa fa-fw fa-download\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-import' | translate }}</a\n >\n <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectExport(); (false)\"\n ><i class=\"fa fa-fw fa-external-link\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-export' | translate }}</a\n >\n </div>\n </li>\n <li class=\"nav-item dropdown d-none d-md-block\">\n <!-- collect what has been changed so far before showing whether there is anything to undo -->\n <a\n class=\"nav-link dropdown-toggle\"\n href=\"#\"\n id=\"editDropdown\"\n data-toggle=\"dropdown\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\"\n (click)=\"undoService.captureChanges()\"\n >\n {{ 'designer.navigation.edit' | translate }}\n </a>\n <div class=\"dropdown-menu\" aria-labelledby=\"editDropdown\">\n <a class=\"dropdown-item\" [class.disabled]=\"!undoService.canUndo\" href=\"#\" (click)=\"undo(); (false)\"\n ><i class=\"fa fa-fw fa-undo\" aria-hidden=\"true\"></i> {{ 'designer.navigation.undo' | translate }}</a\n >\n <a class=\"dropdown-item\" [class.disabled]=\"!undoService.canRedo\" href=\"#\" (click)=\"redo(); (false)\"\n ><i class=\"fa fa-fw fa-repeat\" aria-hidden=\"true\"></i> {{ 'designer.navigation.redo' | translate }}</a\n >\n </div>\n </li>\n <li class=\"nav-item dropdown d-none d-md-block\">\n <a\n class=\"nav-link dropdown-toggle\"\n href=\"#\"\n id=\"settingsDropdown\"\n data-toggle=\"dropdown\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\"\n >\n {{ 'designer.navigation.settings' | translate }}\n </a>\n <div class=\"dropdown-menu\" aria-labelledby=\"settingsDropdown\">\n <a class=\"dropdown-item\" href=\"#\" (click)=\"openFixturePool(); (false)\">{{ 'designer.navigation.fixture-pool' | translate }}</a>\n <!-- <a class=\"dropdown-item\" href=\"#\">{{ 'designer.navigation.stage' | translate }}</a> -->\n </div>\n </li>\n <li class=\"nav-item dropdown d-none d-md-block\">\n <a\n class=\"nav-link dropdown-toggle\"\n href=\"#\"\n id=\"settingsDropdown\"\n data-toggle=\"dropdown\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\"\n >\n {{ 'designer.navigation.help' | translate }}\n </a>\n <div class=\"dropdown-menu\" aria-labelledby=\"settingsDropdown\">\n <a class=\"dropdown-item\" href=\"#\" (click)=\"introService.reset(); (false)\">{{ 'designer.navigation.reset-intro' | translate }}</a>\n <a class=\"dropdown-item\" href=\"https://rocketshow.net/support/\" target=\"_blank\">{{\n 'designer.navigation.support' | translate\n }}</a>\n </div>\n </li>\n </ul>\n\n <!-- Project name shown in the middle, editable inline -->\n @if (projectService.project) {\n <lib-app-inline-edit\n class=\"project-name d-none d-md-inline-flex\"\n [value]=\"projectService.project.name\"\n [placeholder]=\"'designer.project.name' | translate\"\n (valueChange)=\"setProjectName($event)\"\n ></lib-app-inline-edit>\n }\n\n <ul class=\"navbar-nav\">\n @if (configService.shareAvailable) {\n <li class=\"nav-item d-none d-md-flex\" data-toggle=\"collapse\">\n <a class=\"nav-link text-primary\" (click)=\"projectShare(); (false)\" routerLinkActive=\"active\"\n ><i class=\"fa fa-share-alt\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-share' | translate }}</a\n >\n </li>\n } @if (configService.languageSwitch) {\n <li class=\"nav-item dropdown\">\n <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"settingsDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"\n ><i class=\"fa fa-globe\" aria-hidden=\"true\"></i>\n {{ 'designer.misc.language' | translate }}\n </a>\n <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"settingsDropdown\">\n <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('de'); (false)\" target=\"_blank\">Deutsch</a>\n <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('en'); (false)\" target=\"_blank\">English</a>\n <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('es'); (false)\" target=\"_blank\">Espa\u00F1ol</a>\n <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('fr'); (false)\" target=\"_blank\">Fran\u00E7ais</a>\n <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('it'); (false)\" target=\"_blank\">Italiano</a>\n <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('pt'); (false)\" target=\"_blank\">Portugu\u00EAs</a>\n <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('zh'); (false)\" target=\"_blank\">\u4E2D\u6587</a>\n </div>\n </li>\n } @if (configService.loginAvailable && !userService.isLoggedIn()) {\n <li class=\"nav-item\" data-toggle=\"collapse\">\n <a class=\"nav-link\" (click)=\"userRegister(); (false)\" routerLinkActive=\"active\"\n ><i class=\"fa fa-user\" aria-hidden=\"true\"></i> {{ 'designer.navigation.login' | translate }}</a\n >\n </li>\n } @if (configService.loginAvailable && userService.isLoggedIn()) {\n <li class=\"nav-item dropdown\">\n <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"settingsDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"\n ><i class=\"fa fa-user\" aria-hidden=\"true\"></i>\n {{ userService.username }}\n </a>\n <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"settingsDropdown\">\n <a class=\"dropdown-item\" href=\"#\" (click)=\"userService.logout(); (false)\" target=\"_blank\"\n ><i class=\"fa fa-sign-out\" aria-hidden=\"true\"></i> {{ 'designer.navigation.logout' | translate }}</a\n >\n </div>\n </li>\n }\n </ul>\n </nav>\n\n <!-- The main content for larger screens -->\n <div class=\"h-100 d-none d-md-block\">\n <div id=\"row1\" class=\"split split-vertical clearfix pt-3 pl-3\">\n <!-- Scenes -->\n <div id=\"scenes\" class=\"split split-horizontal h-100\">\n @if (projectService.project) {\n <lib-app-scene></lib-app-scene>\n }\n </div>\n\n <!-- Presets -->\n <div id=\"presets\" class=\"split split-horizontal h-100\">\n @if (projectService.project) {\n <lib-app-preset></lib-app-preset>\n }\n </div>\n\n <!-- 3D preview -->\n <div id=\"preview\" class=\"split split-horizontal h-100 pr-3\">\n @if (projectService.project) {\n <div class=\"card border-secondary h-100\" [class.card-intro-active]=\"introService.showStep('preview')\">\n <div class=\"card-body p-0 h-100\">\n <lib-app-preview class=\"h-100\"></lib-app-preview>\n </div>\n </div>\n }\n </div>\n </div>\n\n <div id=\"row2\" class=\"split split-vertical clearfix px-3 d-flex\" style=\"flex-direction: row\">\n <!-- Menu for the capabilities, channels, effects and settings -->\n @if (projectService.project) {\n <div class=\"tab-rail col col-auto p-0 h-100\" style=\"margin-right: -1px\">\n <div class=\"nav flex-column nav-pills nav-pills-attached h-100\" id=\"v-pills-tab\" role=\"tablist\" aria-orientation=\"vertical\">\n <a\n class=\"nav-link px-3 active\"\n (click)=\"openTab('capabilities')\"\n id=\"v-pills-capabilities-tab\"\n popover=\"{{ 'designer.misc.capabilities' | translate }}\"\n container=\"body\"\n placement=\"right\"\n triggers=\"mouseenter:mouseleave\"\n data-toggle=\"pill\"\n href=\"#v-pills-capabilities\"\n role=\"tab\"\n aria-controls=\"v-pills-capabilities\"\n aria-selected=\"true\"\n >\n <i class=\"fa fa-bolt fa-fw\" aria-hidden=\"true\"></i>\n </a>\n <a\n class=\"nav-link px-3\"\n (click)=\"openTab('channels')\"\n id=\"v-pills-channels-tab\"\n popover=\"{{ 'designer.misc.channels' | translate }}\"\n container=\"body\"\n placement=\"right\"\n triggers=\"mouseenter:mouseleave\"\n data-toggle=\"pill\"\n href=\"#v-pills-channels\"\n role=\"tab\"\n aria-controls=\"v-pills-channels\"\n aria-selected=\"false\"\n >\n <i class=\"fa fa-sliders fa-fw\" aria-hidden=\"true\"></i>\n </a>\n <a\n class=\"nav-link px-3\"\n (click)=\"openTab('effects')\"\n id=\"v-pills-effects-tab\"\n popover=\"{{ 'designer.misc.effects' | translate }}\"\n container=\"body\"\n placement=\"right\"\n triggers=\"mouseenter:mouseleave\"\n data-toggle=\"pill\"\n href=\"#v-pills-effects\"\n role=\"tab\"\n aria-controls=\"v-pills-effects\"\n aria-selected=\"false\"\n >\n <i class=\"fa fa-magic fa-fw\" aria-hidden=\"true\"></i>\n </a>\n\n <a\n class=\"nav-link px-3 nav-link-divider\"\n href=\"#\"\n [class.text-primary]=\"presetService.stepsVisible\"\n popover=\"{{ 'designer.preset.steps' | translate }}\"\n container=\"body\"\n placement=\"right\"\n triggers=\"mouseenter:mouseleave\"\n (click)=\"presetService.switchStepsVisible(); (false)\"\n >\n <i class=\"fa fa-tasks fa-fw\" aria-hidden=\"true\"></i>\n </a>\n\n <a\n class=\"nav-link px-3 nav-link-divider\"\n (click)=\"openTab('settings')\"\n id=\"v-pills-settings-tab\"\n popover=\"{{ 'designer.misc.settings' | translate }}\"\n container=\"body\"\n placement=\"right\"\n triggers=\"mouseenter:mouseleave\"\n data-toggle=\"pill\"\n href=\"#v-pills-settings\"\n role=\"tab\"\n aria-controls=\"v-pills-settings\"\n aria-selected=\"false\"\n >\n <i class=\"fa fa-cog fa-fw\" aria-hidden=\"true\"></i>\n </a>\n </div>\n\n <!-- which preset the panels on the right are editing, marked the way the preset\n list marks it -->\n @if (presetService.selectedPreset) {\n <div class=\"edit-target\">\n <i\n class=\"fa fa-fw {{ presetService.getPresetIcon(presetService.selectedPreset) }}\"\n [style.color]=\"colorService.getPresetColor(presetService.selectedPreset)\"\n aria-hidden=\"true\"\n ></i>\n {{ presetService.selectedPreset.name }}\n </div>\n }\n </div>\n }\n\n <div id=\"capabilities\" class=\"split split-horizontal h-100\">\n @if (projectService.project) {\n <div class=\"row h-100 flex-nowrap\">\n <!-- which step of the selected preset these panels are editing -->\n <div class=\"col col-auto p-0 h-100\">\n <lib-app-preset-step></lib-app-preset-step>\n </div>\n\n <!-- Content for the capabilities, channels, effects and settings -->\n <div class=\"col px-0 h-100\">\n <div class=\"tab-content h-100\" id=\"v-pills-tabContent\">\n <div class=\"tab-pane h-100 show active\" id=\"v-pills-capabilities\" role=\"tabpanel\">\n <lib-app-fixture-capability></lib-app-fixture-capability>\n </div>\n <div class=\"tab-pane h-100 show\" id=\"v-pills-channels\" role=\"tabpanel\">\n <lib-app-fixture-channel></lib-app-fixture-channel>\n </div>\n <div class=\"tab-pane h-100\" id=\"v-pills-effects\" role=\"tabpanel\" aria-labelledby=\"v-pills-profile-tab\">\n <lib-app-effect></lib-app-effect>\n </div>\n <div class=\"tab-pane h-100\" id=\"v-pills-settings\" role=\"tabpanel\" aria-labelledby=\"v-pills-home-tab\">\n <lib-app-fixture-settings></lib-app-fixture-settings>\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n\n <!-- Fixtures -->\n <div id=\"fixtures\" class=\"split split-horizontal h-100\">\n @if (projectService.project) {\n <lib-app-fixture></lib-app-fixture>\n }\n </div>\n\n <!-- Master dimmer -->\n <div id=\"masterDimmer\" class=\"split split-horizontal h-100\">\n @if (projectService.project) {\n <lib-app-master-dimmer></lib-app-master-dimmer>\n }\n </div>\n </div>\n\n <!-- Timeline -->\n <div id=\"row3\" class=\"split split-vertical clearfix px-3 pb-3\">\n @if (projectService.project) {\n <lib-app-timeline></lib-app-timeline>\n }\n </div>\n </div>\n\n <!-- The components for small screens -->\n <div class=\"d-md-none p-3\">\n <div>\n @if (projectService.project) {\n <lib-app-master-dimmer></lib-app-master-dimmer>\n }\n </div>\n\n <div class=\"mt-3\">\n @if (projectService.project) {\n <lib-app-scene></lib-app-scene>\n }\n </div>\n </div>\n</div>\n\n<lib-app-intro class=\"d-none d-md-flex\"></lib-app-intro>\n\n<lib-app-hardware-promo-bar class=\"d-none d-md-block\"></lib-app-hardware-promo-bar>\n", styles: [":root{--sd-bg: #131519;--sd-surface-1: #191c21;--sd-surface-2: #1f232a;--sd-surface-3: #272c34;--sd-surface-4: #323841;--sd-border: #2b3038;--sd-border-strong: #3b424d;--sd-text: #dfe3e8;--sd-text-muted: #99a1ac;--sd-text-dim: #6b7280;--sd-primary: #fd7e14;--sd-primary-hover: #ff9440;--sd-primary-active: #e56f0b;--sd-primary-text: #ffa45c;--sd-on-primary: #1a1206;--sd-primary-soft: rgba(253, 126, 20, .16);--sd-primary-soft-hover: rgba(253, 126, 20, .24);--sd-primary-soft-strong: rgba(253, 126, 20, .28);--sd-success: #2eb872;--sd-info: #3d9df0;--sd-warning: #f0a92e;--sd-danger: #e5544b;--sd-radius-sm: 4px;--sd-radius: 6px;--sd-radius-lg: 10px;--sd-space-1: 4px;--sd-space-2: 8px;--sd-space-3: 12px;--sd-space-4: 16px;--sd-space-5: 20px;--sd-space-6: 24px;--sd-control-height: 28px;--sd-control-height-sm: 22px;--sd-row-height: 28px;--sd-shadow-1: 0 1px 2px rgba(0, 0, 0, .3);--sd-shadow-2: 0 4px 12px rgba(0, 0, 0, .35);--sd-shadow-3: 0 12px 32px rgba(0, 0, 0, .45);--sd-focus-ring: 0 0 0 2px rgba(253, 126, 20, .45)}.modal-full{max-width:unset!important;margin:20px!important}.modal-full .modal-content{max-height:calc(100vh - 40px)}.modal-full .modal-content>*{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}.modal-full .modal-body{flex:1 1 auto;overflow-y:auto;min-height:0}.modal .modal-full *{transition:none!important}.modal{z-index:10001}.modal .card{background-color:#191c21;border:1px solid #2b3038;border-radius:10px}.modal .card.panel{overflow:hidden}.modal .card-header{display:flex;align-items:center;gap:8px;min-height:30px;margin-bottom:0;padding:0 12px;background-color:#1f232a;border-bottom:1px solid #2b3038;border-radius:9px 9px 0 0;font-size:.75rem;font-weight:600;color:#dfe3e8;line-height:1.4}.modal .card-body{overflow:auto;padding:12px}.modal .card-footer{padding:8px 12px;background-color:transparent;border-top:1px solid #2b3038}.modal .card-header .btn,.modal .card-header a.btn,.modal .step-list .btn,.modal .step-list a.btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;min-height:0;padding:0!important;border:none;border-radius:4px;background-color:transparent;color:#99a1ac;font-size:.8125rem;transition:color .12s ease,background-color .12s ease}.modal .card-header .btn:hover,.modal .card-header .btn:focus,.modal .card-header a.btn:hover,.modal .card-header a.btn:focus,.modal .step-list .btn:hover,.modal .step-list .btn:focus,.modal .step-list a.btn:hover,.modal .step-list a.btn:focus{color:#dfe3e8;background-color:#323841;box-shadow:none}.modal .card-header .btn.text-primary,.modal .card-header a.btn.text-primary,.modal .step-list .btn.text-primary,.modal .step-list a.btn.text-primary{color:#ffa45c!important}.modal .card-header input,.modal .card-header select{font-weight:400}.modal .card-header .pull-right,.modal .card-header .ml-auto{margin-left:auto}.modal .btn{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;min-height:28px;padding:0 12px;border-radius:6px;font-size:.8125rem;font-weight:500;line-height:1.4;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.modal .btn-sm{min-height:22px;padding:0 8px;font-size:.75rem;border-radius:4px}.modal .btn-primary{background-color:#fd7e14;border-color:#fd7e14;color:#fff}.modal .btn-primary:hover,.modal .btn-primary:focus{background-color:#ff9440;border-color:#ff9440;color:#fff}.modal .btn-primary:active,.modal .btn-primary:not(:disabled):not(.disabled):active{background-color:#e56f0b;border-color:#e56f0b}.modal .btn-secondary{background-color:#272c34;border-color:#3b424d;color:#dfe3e8}.modal .btn-secondary:hover,.modal .btn-secondary:focus{background-color:#323841;border-color:#3b424d;color:#dfe3e8}.modal .btn-secondary:active,.modal .btn-secondary:not(:disabled):not(.disabled):active{background-color:#323841;border-color:#3b424d}.modal .btn-link{color:#dfe3e8}.modal .btn-link:hover{color:#ffa45c}.modal .btn-group>.btn{border-radius:0}.modal .btn-group>.btn:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.modal .btn-group>.btn:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.modal .btn-group>.btn+.btn{border-left:1px solid rgba(0,0,0,.25)}.modal input,.modal select,.modal textarea,.modal .form-control,.modal .custom-select{height:28px;padding:0 8px;background-color:#1f232a;border:1px solid #3b424d;border-radius:6px;color:#dfe3e8;font-size:.8125rem;line-height:1.4;transition:border-color .12s ease,background-color .12s ease}.modal input:hover:not(:disabled):not([readonly]),.modal select:hover:not(:disabled):not([readonly]),.modal textarea:hover:not(:disabled):not([readonly]),.modal .form-control:hover:not(:disabled):not([readonly]),.modal .custom-select:hover:not(:disabled):not([readonly]){border-color:#6b7280}.modal input:focus,.modal select:focus,.modal textarea:focus,.modal .form-control:focus,.modal .custom-select:focus{background-color:#1f232a;border-color:#fd7e14;color:#dfe3e8;box-shadow:none;outline:none}.modal input:focus-visible,.modal select:focus-visible,.modal textarea:focus-visible,.modal .form-control:focus-visible,.modal .custom-select:focus-visible{box-shadow:0 0 0 2px #fd7e1473}.modal input:disabled,.modal input[readonly],.modal select:disabled,.modal select[readonly],.modal textarea:disabled,.modal textarea[readonly],.modal .form-control:disabled,.modal .form-control[readonly],.modal .custom-select:disabled,.modal .custom-select[readonly]{background-color:#191c21;border-color:#2b3038;color:#6b7280;cursor:not-allowed}.modal input::placeholder,.modal select::placeholder,.modal textarea::placeholder,.modal .form-control::placeholder,.modal .custom-select::placeholder{color:#6b7280}.modal textarea,.modal textarea.form-control{height:auto;padding:8px;line-height:1.5}.modal select,.modal .custom-select{cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:24px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2399a1ac' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 8px center;background-size:14px 14px}.modal select option,.modal .custom-select option{background-color:#1f232a;color:#dfe3e8}.modal .input-group-text{height:28px;padding:0 8px;background-color:#272c34;border:1px solid #3b424d;border-radius:6px;color:#99a1ac;font-size:.8125rem}.modal .sd-value-input{width:64px;min-width:0;max-width:100%;text-align:center;font-family:SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.75rem;padding:0 4px}.modal .sd-value-input-hex{width:72px}.modal .sd-value-input-time{width:88px}.modal .sd-time-field{flex:0 0 auto;width:120px}.modal label{margin-bottom:0;color:#99a1ac;font-size:.8125rem}.modal .col-form-label{padding-top:0;padding-bottom:0;line-height:28px}.modal .form-group{margin-bottom:12px}.modal .form-check{position:relative;display:block;min-height:18px;padding-left:24px;margin-bottom:0}.modal .form-check-label{color:#dfe3e8;font-size:.8125rem;line-height:1.4;cursor:pointer}.modal input[type=checkbox],.modal input[type=radio]{appearance:none;-webkit-appearance:none;-moz-appearance:none;flex:0 0 auto;width:16px;height:16px;min-height:0;padding:0;margin:0;background-color:#272c34;background-repeat:no-repeat;background-position:center;background-size:100% 100%;border:1px solid #3b424d;border-radius:4px;cursor:pointer;vertical-align:middle;transition:background-color .12s ease,border-color .12s ease}.modal input[type=checkbox]:hover:not(:disabled),.modal input[type=radio]:hover:not(:disabled){border-color:#6b7280;background-color:#323841}.modal input[type=checkbox]:checked,.modal input[type=radio]:checked{background-color:#fd7e14;border-color:#fd7e14}.modal input[type=checkbox]:checked:hover,.modal input[type=radio]:checked:hover{background-color:#ff9440;border-color:#ff9440}.modal input[type=checkbox]:disabled,.modal input[type=radio]:disabled{opacity:.45;cursor:not-allowed}.modal input[type=checkbox]:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M5.5 10.5l3 3 6-6'/%3E%3C/svg%3E\")}.modal input[type=checkbox]:indeterminate{background-color:#fd7e14;border-color:#fd7e14;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath stroke='%23fff' stroke-width='2.6' stroke-linecap='round' d='M6 10h8'/%3E%3C/svg%3E\")}.modal input[type=radio]{border-radius:50%}.modal input[type=radio]:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%23fff'/%3E%3C/svg%3E\")}.modal .form-check-input{position:absolute;top:50%;left:0;margin:0;transform:translateY(-50%)}.modal span.bigcheck-target{font-family:FontAwesome;color:#99a1ac}.modal input[type=checkbox].bigcheck{position:absolute;left:-999em}.modal input[type=checkbox].bigcheck+span.bigcheck-target:after{content:\"\\f096\"}.modal input[type=checkbox].bigcheck:checked+span.bigcheck-target{color:#fd7e14}.modal input[type=checkbox].bigcheck:checked+span.bigcheck-target:after{content:\"\\f046\"}.modal .list-group-item{display:flex;align-items:center;min-height:28px;padding:.3125rem 12px;background-color:transparent;border:none;border-bottom:1px solid #2b3038;border-radius:0;color:#dfe3e8;white-space:nowrap;transition:background-color .12s ease}.modal .list-group-item:last-child{border-bottom:none}.modal .list-group-item:hover{background-color:#ffffff0a}.modal .list-group-item>.row{width:100%;margin-left:0;margin-right:0}.modal .list-group-item .row>div{min-width:0;overflow:hidden;text-overflow:ellipsis}.modal .list-group-item.active{background-color:#fd7e1447!important;border-color:#2b3038!important;color:#ffd0a8!important}.modal .list-group-item.active:hover{background-color:#fd7e1457!important}.modal .list-group-item.focused{outline:1px solid #fd7e14;outline-offset:-1px}.modal .inactive-list-item{opacity:.4}.modal .list-sort-handle{padding-left:0;padding-right:8px;color:#6b7280}.modal .list-sort-handle:hover{color:#99a1ac}.modal .nav a,.modal .panel-title .btn-link{color:#dfe3e8}.modal .nav-tabs{border-bottom:1px solid #2b3038}.modal .nav-tabs .nav-link{border:none;border-bottom:2px solid transparent;border-radius:0;color:#99a1ac;padding:8px 12px}.modal .nav-tabs .nav-link:hover{color:#dfe3e8;border-bottom-color:#3b424d}.modal .nav-tabs .nav-link.active{background-color:transparent;color:#dfe3e8;border-bottom-color:#fd7e14}.modal .slider{cursor:pointer}.modal .slider-track,.modal .slider-track-low,.modal .slider-track-high,.modal .slider-selection{border-radius:3px!important;background-image:none!important;box-shadow:none!important}.modal .slider-track{background-color:#323841!important}.modal .slider-track-low,.modal .slider-track-high{background-color:transparent!important}.modal .slider-selection{background-color:#fd7e14!important}.modal .slider-vertical .slider-selection{background-color:transparent!important}.modal .slider-vertical .slider-track-high{background-color:#fd7e14!important}.modal .slider-handle{width:14px!important;height:14px!important;background-color:#eef1f5!important;background-image:none!important;border:none;box-shadow:0 1px 2px #0000004d,0 0 0 1px #00000059!important;transition:transform .1s ease,background-color .12s ease}.modal .slider-handle:hover{background-color:#fff!important;transform:scale(1.12)}.modal .slider.slider-horizontal{height:20px}.modal .slider.slider-horizontal .slider-track{height:4px!important;top:50%!important;margin-top:-2px!important}.modal .slider.slider-horizontal .slider-handle{top:50%!important;margin-top:-7px!important;margin-left:-7px!important}.modal .slider.slider-vertical .slider-track{width:4px!important;left:50%!important;margin-left:-2px!important}.modal .slider.slider-vertical .slider-handle{left:50%!important;margin-left:-7px!important;margin-top:-7px!important}.modal .sd-slider-fill{flex:1 1 0;min-width:0}.modal .sd-slider-fill .slider.slider-horizontal{width:100%}.modal .slider-input,.modal .slider-input-readonly{width:64px;margin-left:8px;text-align:center;font-family:SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.75rem;padding:0 4px}.modal .slider-input-readonly{color:#6b7280;border-color:#2b3038}.modal .alert{padding:12px 16px;border-radius:6px;border:1px solid #3b424d;background-color:#1f232a;color:#dfe3e8;font-size:.8125rem}.modal .alert-primary{border-color:#fd7e1466;background-color:#fd7e1429;color:#dfe3e8}.modal .alert-success{border-color:#2eb87266;background-color:#2eb87224;color:#dfe3e8}.modal .alert-danger{border-color:#e5544b66;background-color:#e5544b24;color:#dfe3e8}.modal .progress{height:6px;background-color:#272c34;border-radius:3px}.modal .progress-bar{background-color:#fd7e14}.modal .table{color:#dfe3e8}.modal .table th,.modal .table td{border-top-color:#2b3038;padding:8px 12px}.modal .table thead th{border-bottom-color:#2b3038;color:#99a1ac;font-size:.75rem;font-weight:600}.modal-backdrop{background-color:#05060a}.modal-backdrop.show{opacity:.65}.modal-content{background-color:#191c21;border:1px solid #2b3038;border-radius:10px;box-shadow:0 12px 32px #00000073;overflow:hidden}.modal-header{align-items:center;padding:12px 20px;background-color:#1f232a;border-bottom:1px solid #2b3038}.modal-title{font-size:.9375rem;font-weight:600;color:#dfe3e8;line-height:1.4}.modal-body{padding:20px}.modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;background-color:transparent;border-top:1px solid #2b3038}.modal-footer>*{margin:0}.modal .card-modal .card{background-color:transparent;border:none;border-radius:0;box-shadow:none}.modal .card-modal .card-header{padding:12px 20px;font-size:.9375rem}.modal .card-modal .card-body{padding:20px}.modal .card-modal .card-footer{padding:12px 20px}.modal .close,.card-modal .close{padding:0;margin:0 0 0 auto;width:26px;height:26px;font-size:1.25rem;font-weight:400;line-height:1;color:#99a1ac;border-radius:4px;opacity:1;transition:color .12s ease,background-color .12s ease}.modal .close:hover,.card-modal .close:hover{color:#dfe3e8;background-color:#272c34;opacity:1}.dropdown-menu{z-index:100000;padding:4px;background-color:#1f232a;border:1px solid #2b3038;border-radius:6px;box-shadow:0 4px 12px #00000059;font-size:.8125rem}.dropdown-item{padding:.3125rem 8px;border-radius:4px;color:#dfe3e8}.dropdown-item:hover,.dropdown-item:focus{background-color:#272c34;color:#dfe3e8}.dropdown-item.active,.dropdown-item:active{background-color:#fd7e14;color:#fff}.dropdown-item .fa{color:#99a1ac;margin-right:4px}.dropdown-item:hover .fa{color:#dfe3e8}.tab-rail{position:relative}.edit-target{position:absolute;top:191px;bottom:12px;left:50%;writing-mode:vertical-rl;transform:translate(-50%) rotate(180deg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#99a1ac;font-size:.75rem;letter-spacing:.02em;-webkit-user-select:none;user-select:none;pointer-events:none}.edit-target .fa{display:inline-block;writing-mode:horizontal-tb;transform:rotate(180deg);margin-bottom:4px;font-size:.8125rem}.dropdown-divider{border-top-color:#2b3038}.popover{background-color:#272c34;border:1px solid #3b424d;border-radius:6px;box-shadow:0 4px 12px #00000059;font-size:.75rem;pointer-events:none}.popover-body{padding:.3125rem 8px;color:#dfe3e8}.popover-header{background-color:#323841;border-bottom-color:#3b424d;color:#dfe3e8}.bs-popover-right>.arrow:after,.bs-popover-auto[x-placement^=right]>.arrow:after{border-right-color:#272c34}.bs-popover-left>.arrow:after,.bs-popover-auto[x-placement^=left]>.arrow:after{border-left-color:#272c34}.bs-popover-bottom>.arrow:after,.bs-popover-auto[x-placement^=bottom]>.arrow:after{border-bottom-color:#272c34}.bs-popover-top>.arrow:after,.bs-popover-auto[x-placement^=top]>.arrow:after{border-top-color:#272c34}.bs-popover-right>.arrow:before,.bs-popover-auto[x-placement^=right]>.arrow:before{border-right-color:#3b424d}.bs-popover-left>.arrow:before,.bs-popover-auto[x-placement^=left]>.arrow:before{border-left-color:#3b424d}.bs-popover-bottom>.arrow:before,.bs-popover-auto[x-placement^=bottom]>.arrow:before{border-bottom-color:#3b424d}.bs-popover-top>.arrow:before,.bs-popover-auto[x-placement^=top]>.arrow:before{border-top-color:#3b424d}.hardware-promo-hint{display:flex;align-items:baseline;gap:8px;margin:0;padding:8px 12px;border:1px solid #2b3038;border-left:2px solid #fd7e14;border-radius:4px;background-color:#fd7e1429;color:#99a1ac;font-size:.75rem;line-height:1.5}.hardware-promo-hint .fa-lightbulb-o{color:#ffa45c}.hardware-promo-hint a{color:#ffa45c;white-space:nowrap}#designer{font-size:.8125rem;color:#dfe3e8;background-color:#131519}#designer .card{background-color:#191c21;border:1px solid #2b3038;border-radius:10px}#designer .card.panel{overflow:hidden}#designer .card-header{display:flex;align-items:center;gap:8px;min-height:30px;margin-bottom:0;padding:0 12px;background-color:#1f232a;border-bottom:1px solid #2b3038;border-radius:9px 9px 0 0;font-size:.75rem;font-weight:600;color:#dfe3e8;line-height:1.4}#designer .card-body{overflow:auto;padding:12px}#designer .card-footer{padding:8px 12px;background-color:transparent;border-top:1px solid #2b3038}#designer .card-header .btn,#designer .card-header a.btn,#designer .step-list .btn,#designer .step-list a.btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;min-height:0;padding:0!important;border:none;border-radius:4px;background-color:transparent;color:#99a1ac;font-size:.8125rem;transition:color .12s ease,background-color .12s ease}#designer .card-header .btn:hover,#designer .card-header .btn:focus,#designer .card-header a.btn:hover,#designer .card-header a.btn:focus,#designer .step-list .btn:hover,#designer .step-list .btn:focus,#designer .step-list a.btn:hover,#designer .step-list a.btn:focus{color:#dfe3e8;background-color:#323841;box-shadow:none}#designer .card-header .btn.text-primary,#designer .card-header a.btn.text-primary,#designer .step-list .btn.text-primary,#designer .step-list a.btn.text-primary{color:#ffa45c!important}#designer .card-header input,#designer .card-header select{font-weight:400}#designer .card-header .pull-right,#designer .card-header .ml-auto{margin-left:auto}#designer .btn{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;min-height:28px;padding:0 12px;border-radius:6px;font-size:.8125rem;font-weight:500;line-height:1.4;transition:background-color .12s ease,border-color .12s ease,color .12s ease}#designer .btn-sm{min-height:22px;padding:0 8px;font-size:.75rem;border-radius:4px}#designer .btn-primary{background-color:#fd7e14;border-color:#fd7e14;color:#fff}#designer .btn-primary:hover,#designer .btn-primary:focus{background-color:#ff9440;border-color:#ff9440;color:#fff}#designer .btn-primary:active,#designer .btn-primary:not(:disabled):not(.disabled):active{background-color:#e56f0b;border-color:#e56f0b}#designer .btn-secondary{background-color:#272c34;border-color:#3b424d;color:#dfe3e8}#designer .btn-secondary:hover,#designer .btn-secondary:focus{background-color:#323841;border-color:#3b424d;color:#dfe3e8}#designer .btn-secondary:active,#designer .btn-secondary:not(:disabled):not(.disabled):active{background-color:#323841;border-color:#3b424d}#designer .btn-link{color:#dfe3e8}#designer .btn-link:hover{color:#ffa45c}#designer .btn-group>.btn{border-radius:0}#designer .btn-group>.btn:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}#designer .btn-group>.btn:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}#designer .btn-group>.btn+.btn{border-left:1px solid rgba(0,0,0,.25)}#designer input,#designer select,#designer textarea,#designer .form-control,#designer .custom-select{height:28px;padding:0 8px;background-color:#1f232a;border:1px solid #3b424d;border-radius:6px;color:#dfe3e8;font-size:.8125rem;line-height:1.4;transition:border-color .12s ease,background-color .12s ease}#designer input:hover:not(:disabled):not([readonly]),#designer select:hover:not(:disabled):not([readonly]),#designer textarea:hover:not(:disabled):not([readonly]),#designer .form-control:hover:not(:disabled):not([readonly]),#designer .custom-select:hover:not(:disabled):not([readonly]){border-color:#6b7280}#designer input:focus,#designer select:focus,#designer textarea:focus,#designer .form-control:focus,#designer .custom-select:focus{background-color:#1f232a;border-color:#fd7e14;color:#dfe3e8;box-shadow:none;outline:none}#designer input:focus-visible,#designer select:focus-visible,#designer textarea:focus-visible,#designer .form-control:focus-visible,#designer .custom-select:focus-visible{box-shadow:0 0 0 2px #fd7e1473}#designer input:disabled,#designer input[readonly],#designer select:disabled,#designer select[readonly],#designer textarea:disabled,#designer textarea[readonly],#designer .form-control:disabled,#designer .form-control[readonly],#designer .custom-select:disabled,#designer .custom-select[readonly]{background-color:#191c21;border-color:#2b3038;color:#6b7280;cursor:not-allowed}#designer input::placeholder,#designer select::placeholder,#designer textarea::placeholder,#designer .form-control::placeholder,#designer .custom-select::placeholder{color:#6b7280}#designer textarea,#designer textarea.form-control{height:auto;padding:8px;line-height:1.5}#designer select,#designer .custom-select{cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:24px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2399a1ac' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 8px center;background-size:14px 14px}#designer select option,#designer .custom-select option{background-color:#1f232a;color:#dfe3e8}#designer .input-group-text{height:28px;padding:0 8px;background-color:#272c34;border:1px solid #3b424d;border-radius:6px;color:#99a1ac;font-size:.8125rem}#designer .sd-value-input{width:64px;min-width:0;max-width:100%;text-align:center;font-family:SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.75rem;padding:0 4px}#designer .sd-value-input-hex{width:72px}#designer .sd-value-input-time{width:88px}#designer .sd-time-field{flex:0 0 auto;width:120px}#designer label{margin-bottom:0;color:#99a1ac;font-size:.8125rem}#designer .col-form-label{padding-top:0;padding-bottom:0;line-height:28px}#designer .form-group{margin-bottom:12px}#designer .form-check{position:relative;display:block;min-height:18px;padding-left:24px;margin-bottom:0}#designer .form-check-label{color:#dfe3e8;font-size:.8125rem;line-height:1.4;cursor:pointer}#designer input[type=checkbox],#designer input[type=radio]{appearance:none;-webkit-appearance:none;-moz-appearance:none;flex:0 0 auto;width:16px;height:16px;min-height:0;padding:0;margin:0;background-color:#272c34;background-repeat:no-repeat;background-position:center;background-size:100% 100%;border:1px solid #3b424d;border-radius:4px;cursor:pointer;vertical-align:middle;transition:background-color .12s ease,border-color .12s ease}#designer input[type=checkbox]:hover:not(:disabled),#designer input[type=radio]:hover:not(:disabled){border-color:#6b7280;background-color:#323841}#designer input[type=checkbox]:checked,#designer input[type=radio]:checked{background-color:#fd7e14;border-color:#fd7e14}#designer input[type=checkbox]:checked:hover,#designer input[type=radio]:checked:hover{background-color:#ff9440;border-color:#ff9440}#designer input[type=checkbox]:disabled,#designer input[type=radio]:disabled{opacity:.45;cursor:not-allowed}#designer input[type=checkbox]:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M5.5 10.5l3 3 6-6'/%3E%3C/svg%3E\")}#designer input[type=checkbox]:indeterminate{background-color:#fd7e14;border-color:#fd7e14;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath stroke='%23fff' stroke-width='2.6' stroke-linecap='round' d='M6 10h8'/%3E%3C/svg%3E\")}#designer input[type=radio]{border-radius:50%}#designer input[type=radio]:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%23fff'/%3E%3C/svg%3E\")}#designer .form-check-input{position:absolute;top:50%;left:0;margin:0;transform:translateY(-50%)}#designer span.bigcheck-target{font-family:FontAwesome;color:#99a1ac}#designer input[type=checkbox].bigcheck{position:absolute;left:-999em}#designer input[type=checkbox].bigcheck+span.bigcheck-target:after{content:\"\\f096\"}#designer input[type=checkbox].bigcheck:checked+span.bigcheck-target{color:#fd7e14}#designer input[type=checkbox].bigcheck:checked+span.bigcheck-target:after{content:\"\\f046\"}#designer .list-group-item{display:flex;align-items:center;min-height:28px;padding:.3125rem 12px;background-color:transparent;border:none;border-bottom:1px solid #2b3038;border-radius:0;color:#dfe3e8;white-space:nowrap;transition:background-color .12s ease}#designer .list-group-item:last-child{border-bottom:none}#designer .list-group-item:hover{background-color:#ffffff0a}#designer .list-group-item>.row{width:100%;margin-left:0;margin-right:0}#designer .list-group-item .row>div{min-width:0;overflow:hidden;text-overflow:ellipsis}#designer .list-group-item.active{background-color:#fd7e1447!important;border-color:#2b3038!important;color:#ffd0a8!important}#designer .list-group-item.active:hover{background-color:#fd7e1457!important}#designer .list-group-item.focused{outline:1px solid #fd7e14;outline-offset:-1px}#designer .inactive-list-item{opacity:.4}#designer .list-sort-handle{padding-left:0;padding-right:8px;color:#6b7280}#designer .list-sort-handle:hover{color:#99a1ac}#designer .nav a,#designer .panel-title .btn-link{color:#dfe3e8}#designer .nav-tabs{border-bottom:1px solid #2b3038}#designer .nav-tabs .nav-link{border:none;border-bottom:2px solid transparent;border-radius:0;color:#99a1ac;padding:8px 12px}#designer .nav-tabs .nav-link:hover{color:#dfe3e8;border-bottom-color:#3b424d}#designer .nav-tabs .nav-link.active{background-color:transparent;color:#dfe3e8;border-bottom-color:#fd7e14}#designer .slider{cursor:pointer}#designer .slider-track,#designer .slider-track-low,#designer .slider-track-high,#designer .slider-selection{border-radius:3px!important;background-image:none!important;box-shadow:none!important}#designer .slider-track{background-color:#323841!important}#designer .slider-track-low,#designer .slider-track-high{background-color:transparent!important}#designer .slider-selection{background-color:#fd7e14!important}#designer .slider-vertical .slider-selection{background-color:transparent!important}#designer .slider-vertical .slider-track-high{background-color:#fd7e14!important}#designer .slider-handle{width:14px!important;height:14px!important;background-color:#eef1f5!important;background-image:none!important;border:none;box-shadow:0 1px 2px #0000004d,0 0 0 1px #00000059!important;transition:transform .1s ease,background-color .12s ease}#designer .slider-handle:hover{background-color:#fff!important;transform:scale(1.12)}#designer .slider.slider-horizontal{height:20px}#designer .slider.slider-horizontal .slider-track{height:4px!important;top:50%!important;margin-top:-2px!important}#designer .slider.slider-horizontal .slider-handle{top:50%!important;margin-top:-7px!important;margin-left:-7px!important}#designer .slider.slider-vertical .slider-track{width:4px!important;left:50%!important;margin-left:-2px!important}#designer .slider.slider-vertical .slider-handle{left:50%!important;margin-left:-7px!important;margin-top:-7px!important}#designer .sd-slider-fill{flex:1 1 0;min-width:0}#designer .sd-slider-fill .slider.slider-horizontal{width:100%}#designer .slider-input,#designer .slider-input-readonly{width:64px;margin-left:8px;text-align:center;font-family:SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.75rem;padding:0 4px}#designer .slider-input-readonly{color:#6b7280;border-color:#2b3038}#designer .alert{padding:12px 16px;border-radius:6px;border:1px solid #3b424d;background-color:#1f232a;color:#dfe3e8;font-size:.8125rem}#designer .alert-primary{border-color:#fd7e1466;background-color:#fd7e1429;color:#dfe3e8}#designer .alert-success{border-color:#2eb87266;background-color:#2eb87224;color:#dfe3e8}#designer .alert-danger{border-color:#e5544b66;background-color:#e5544b24;color:#dfe3e8}#designer .progress{height:6px;background-color:#272c34;border-radius:3px}#designer .progress-bar{background-color:#fd7e14}#designer .table{color:#dfe3e8}#designer .table th,#designer .table td{border-top-color:#2b3038;padding:8px 12px}#designer .table thead th{border-bottom-color:#2b3038;color:#99a1ac;font-size:.75rem;font-weight:600}#designer .row{flex-wrap:unset}#designer .capability-container{padding:0;height:0}#designer .gutter{background-color:transparent;position:relative}#designer .gutter:after{content:\"\";position:absolute;background-color:transparent;border-radius:2px;transition:background-color .15s ease}#designer .gutter:hover:after{background-color:#3b424d}#designer .gutter.gutter-horizontal{cursor:ew-resize}#designer .gutter.gutter-horizontal:after{top:25%;bottom:25%;left:50%;width:2px;transform:translate(-50%)}#designer .gutter.gutter-vertical{cursor:ns-resize}#designer .gutter.gutter-vertical:after{left:25%;right:25%;top:50%;height:2px;transform:translateY(-50%)}#designer .split-horizontal,#designer .gutter.gutter-horizontal{float:left}#designer .split-vertical,#designer .gutter.gutter-horizontal{height:100%}#designer .split{overflow-y:hidden;overflow-x:hidden}#designer .panel{background-color:transparent}#designer .panel-body{background-color:#1f232a}#designer #masterDimmer .card-body{padding-left:8px;padding-right:8px}#designer .navbar{height:34px;padding:0 8px;background-color:#191c21!important;border-bottom:1px solid #2b3038}#designer .navbar-nav{flex-direction:row!important;align-items:center}#designer .navbar-expand-lg{flex-flow:row nowrap!important;justify-content:flex-start!important}#designer .nav-link{cursor:pointer}#designer .navbar .nav-link{display:flex;align-items:center;gap:.375rem;height:24px;padding:0 8px!important;border-radius:4px;color:#99a1ac;font-size:.8125rem;transition:color .12s ease,background-color .12s ease}#designer .navbar .nav-link:hover,#designer .navbar .nav-link:focus{color:#dfe3e8;background-color:#272c34}#designer .navbar .nav-link.text-primary{color:#ffa45c!important}#designer .navbar .nav-link.text-primary:hover{color:#ff9440!important}#designer .navbar .nav-item.show>.nav-link{color:#dfe3e8;background-color:#272c34}#designer .navbar-nav .dropdown-menu{position:absolute;float:none}#designer .navbar .dropdown-toggle:after{margin-left:.125rem;opacity:.6}#designer .navbar .project-name{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#dfe3e8}#designer .capability{overflow:visible}#designer .capability-deactivated{opacity:.4}#designer .nav-pills{background-color:#191c21;border:1px solid #2b3038;border-radius:10px;padding:4px;gap:2px}#designer .nav-pills .nav-link{display:flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0!important;border-radius:6px;color:#99a1ac;transition:color .12s ease,background-color .12s ease}#designer .nav-pills .nav-link:hover{color:#dfe3e8;background-color:#272c34}#designer .nav-pills .nav-link.active,#designer .nav-pills .show>.nav-link{background-color:#fd7e1447;color:#ffa45c}#designer .nav-pills.nav-pills-attached{border-radius:10px 0 0 10px}#designer .nav-pills .nav-link.nav-link-divider{position:relative;margin-top:8px}#designer .nav-pills .nav-link.nav-link-divider:before{content:\"\";position:absolute;top:-5px;left:3px;right:3px;height:1px;background-color:#2b3038}#designer #preview .card{overflow:hidden}#designer #capabilities>.row{margin-left:0;margin-right:0}#designer #capabilities>.row>.col{min-width:0}#designer #capabilities .tab-pane>*>.card{border-top-left-radius:0;border-bottom-left-radius:0}#designer .card-header .panel-title{flex:1 1 auto;min-width:0}#designer .accordion-toggle .btn,#designer .accordion-toggle button{display:flex;align-items:center;justify-content:flex-start;width:100%;height:auto;min-height:0;padding:0;border:none;background-color:transparent;color:#dfe3e8;text-align:left}#designer .accordion-toggle .btn:hover,#designer .accordion-toggle .btn:focus,#designer .accordion-toggle .btn:active,#designer .accordion-toggle button:hover,#designer .accordion-toggle button:focus,#designer .accordion-toggle button:active{background-color:transparent;box-shadow:none;color:#dfe3e8}#designer accordion-group{display:block}#designer accordion-group .card{margin:0;border:none;border-radius:0;background-color:transparent;overflow:visible}#designer accordion-group .card-header{border-radius:0;cursor:pointer;transition:background-color .12s ease}#designer accordion-group .card-header:hover{background-color:#272c34}#designer accordion-group+accordion-group .card-header{border-top:1px solid #2b3038}#designer accordion-group:first-of-type .card-header{border-top-left-radius:10px;border-top-right-radius:10px}#designer accordion-group:last-of-type:not(.panel-open) .card-header{border-bottom-left-radius:10px;border-bottom-right-radius:10px}#designer .iro__wheel,#designer .iro__slider{cursor:pointer}#designer .pan-tilt-grid path{fill:none;stroke:#99a1ac;stroke-width:10px}#designer .pan-tilt-grid circle{fill:#fd7e14;stroke:#191c21;stroke-width:3px}#designer .wavesurfer-region{z-index:5!important;border-radius:4px}#designer .wavesurfer-region[data-region-selected=true]{z-index:6!important}#designer .wavesurfer-region[data-region-preset=true]{height:50%!important;top:50%!important}#designer .wavesurfer-region[data-region-name]:after{content:attr(data-region-name);margin-left:20px;font-size:.75rem}#designer .step-marker{position:absolute;top:0;bottom:0;pointer-events:none}#designer .step-marker-tick{width:1px;background-color:#ffffff80}#designer .step-marker-tick:after{content:attr(data-step-name);position:absolute;top:2px;left:3px;color:#99a1ac;font-size:.7rem;white-space:nowrap}#designer .step-marker-tick[data-step-selected=true]{width:2px;background-color:#fd7e14}#designer .step-marker-tick[data-step-selected=true]:after{color:#ffa45c}#designer .step-marker-transition{background:linear-gradient(to right,#ffffff38,#fff0)}#designer .step-marker-transition[data-step-selected=true]{background:linear-gradient(to right,#fd7e1473,#fd7e1400)}#designer .wavesurfer-handle{width:10px!important;max-width:10px!important;border:1px solid rgba(255,255,255,.35);background:#00000026;box-sizing:border-box;opacity:0;cursor:unset!important}#designer .wavesurfer-handle-end{margin-left:-10px}#designer .wavesurfer-region[data-region-selectable=true] .wavesurfer-handle{opacity:1;cursor:col-resize!important}#designer .wavesurfer-handle:before,#designer .wavesurfer-handle:after{content:\"\";display:block;position:absolute;z-index:1;border-top:1px solid rgba(255,255,255,.7);border-bottom:1px solid rgba(255,255,255,.7);height:4px;left:5%;right:5%;top:50%;transform:translateY(-50%)}#designer .wavesurfer-handle:before{margin-top:-3px}#designer timeline{overflow:scroll!important;overflow:-moz-scrollbars-none;-ms-overflow-style:none;scrollbar-width:none;cursor:s-resize}#designer timeline::-webkit-scrollbar{height:0!important}#designer cursor{top:-20px!important}#designer wave{border-right-color:#fd7e14!important;cursor:col-resize}#designer wave canvas{opacity:.35}\n"], dependencies: [{ kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i10.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: PreviewComponent, selector: "lib-app-preview" }, { kind: "component", type: SceneComponent, selector: "lib-app-scene" }, { kind: "component", type: TimelineComponent, selector: "lib-app-timeline" }, { kind: "component", type: FixtureComponent, selector: "lib-app-fixture" }, { kind: "component", type: FixtureCapabilityComponent, selector: "lib-app-fixture-capability" }, { kind: "component", type: FixtureSettingsComponent, selector: "lib-app-fixture-settings" }, { kind: "component", type: EffectComponent, selector: "lib-app-effect" }, { kind: "component", type: PresetComponent, selector: "lib-app-preset" }, { kind: "component", type: MasterDimmerComponent, selector: "lib-app-master-dimmer" }, { kind: "component", type: FixtureChannelComponent, selector: "lib-app-fixture-channel" }, { kind: "component", type: IntroComponent, selector: "lib-app-intro" }, { kind: "component", type: PresetStepComponent, selector: "lib-app-preset-step" }, { kind: "component", type: InlineEditComponent, selector: "lib-app-inline-edit", inputs: ["value", "placeholder"], outputs: ["valueChange"] }, { kind: "component", type: HardwarePromoBarComponent, selector: "lib-app-hardware-promo-bar" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
13839
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DesignerComponent, isStandalone: false, selector: "lib-designer", inputs: { menuHeightPx: "menuHeightPx", externalCompositionsAvailable: "externalCompositionsAvailable", restUrl: "restUrl", enableMediaLibrary: "enableMediaLibrary", loginAvailable: "loginAvailable", shareAvailable: "shareAvailable", languageSwitch: "languageSwitch", livePreview: "livePreview", localProfiles: "localProfiles", intro: "intro", uniqueProjectNames: "uniqueProjectNames", dropzoneChunking: "dropzoneChunking", universes: "universes", freeUniverseEdit: "freeUniverseEdit", hardwarePromo: "hardwarePromo" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "previewComponent", first: true, predicate: PreviewComponent, descendants: true }, { propertyName: "timelineComponent", first: true, predicate: TimelineComponent, descendants: true }], ngImport: i0, template: "<!-- Wrap the whole component inside a div to encapsulate the CSS -->\n\n<!-- 100 % height minus the menu bar above and the gutter size of 13 px -->\n<!-- <div style=\"height: calc(100% - 33px)\"> -->\n<div id=\"designer\" [ngStyle]=\"{ height: 'calc(100% - ' + totalMenuHeightPx + 'px)' }\">\n <!-- Navigation -->\n <nav class=\"navbar navbar-expand-lg navbar-light bg-light\">\n <!-- Menu buttons -->\n <ul class=\"navbar-nav mr-auto\">\n <li class=\"nav-item dropdown\">\n <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"fileDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n {{ 'designer.navigation.project' | translate }}\n </a>\n <div class=\"dropdown-menu\" aria-labelledby=\"fileDropdown\">\n <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectNew(); (false)\"\n ><i class=\"fa fa-fw fa-file-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-new' | translate }}</a\n >\n <a class=\"dropdown-item\" href=\"#\" (click)=\"projectOpen(); (false)\"\n ><i class=\"fa fa-fw fa-folder-open-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-open' | translate }}</a\n >\n <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectSave(); (false)\"\n ><i class=\"fa fa-fw fa-floppy-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-save' | translate }}</a\n >\n <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectSaveAs(); (false)\"\n ><i class=\"fa fa-fw fa-floppy-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-save-as' | translate }}</a\n >\n <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectImport(); (false)\"\n ><i class=\"fa fa-fw fa-download\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-import' | translate }}</a\n >\n <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectExport(); (false)\"\n ><i class=\"fa fa-fw fa-external-link\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-export' | translate }}</a\n >\n </div>\n </li>\n <li class=\"nav-item dropdown d-none d-md-block\">\n <!-- collect what has been changed so far before showing whether there is anything to undo -->\n <a\n class=\"nav-link dropdown-toggle\"\n href=\"#\"\n id=\"editDropdown\"\n data-toggle=\"dropdown\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\"\n (click)=\"undoService.captureChanges()\"\n >\n {{ 'designer.navigation.edit' | translate }}\n </a>\n <div class=\"dropdown-menu\" aria-labelledby=\"editDropdown\">\n <a class=\"dropdown-item\" [class.disabled]=\"!undoService.canUndo\" href=\"#\" (click)=\"undo(); (false)\"\n ><i class=\"fa fa-fw fa-undo\" aria-hidden=\"true\"></i> {{ 'designer.navigation.undo' | translate }}</a\n >\n <a class=\"dropdown-item\" [class.disabled]=\"!undoService.canRedo\" href=\"#\" (click)=\"redo(); (false)\"\n ><i class=\"fa fa-fw fa-repeat\" aria-hidden=\"true\"></i> {{ 'designer.navigation.redo' | translate }}</a\n >\n </div>\n </li>\n <li class=\"nav-item dropdown d-none d-md-block\">\n <a\n class=\"nav-link dropdown-toggle\"\n href=\"#\"\n id=\"settingsDropdown\"\n data-toggle=\"dropdown\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\"\n >\n {{ 'designer.navigation.settings' | translate }}\n </a>\n <div class=\"dropdown-menu\" aria-labelledby=\"settingsDropdown\">\n <a class=\"dropdown-item\" href=\"#\" (click)=\"openFixturePool(); (false)\">{{ 'designer.navigation.fixture-pool' | translate }}</a>\n <!-- <a class=\"dropdown-item\" href=\"#\">{{ 'designer.navigation.stage' | translate }}</a> -->\n </div>\n </li>\n <li class=\"nav-item dropdown d-none d-md-block\">\n <a\n class=\"nav-link dropdown-toggle\"\n href=\"#\"\n id=\"settingsDropdown\"\n data-toggle=\"dropdown\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\"\n >\n {{ 'designer.navigation.help' | translate }}\n </a>\n <div class=\"dropdown-menu\" aria-labelledby=\"settingsDropdown\">\n <a class=\"dropdown-item\" href=\"#\" (click)=\"introService.reset(); (false)\">{{ 'designer.navigation.reset-intro' | translate }}</a>\n <a class=\"dropdown-item\" href=\"https://rocketshow.net/support/\" target=\"_blank\">{{\n 'designer.navigation.support' | translate\n }}</a>\n </div>\n </li>\n </ul>\n\n <!-- Project name shown in the middle, editable inline -->\n @if (projectService.project) {\n <lib-app-inline-edit\n class=\"project-name d-none d-md-inline-flex\"\n [value]=\"projectService.project.name\"\n [placeholder]=\"'designer.project.name' | translate\"\n (valueChange)=\"setProjectName($event)\"\n ></lib-app-inline-edit>\n }\n\n <ul class=\"navbar-nav\">\n @if (configService.shareAvailable) {\n <li class=\"nav-item d-none d-md-flex\" data-toggle=\"collapse\">\n <a class=\"nav-link text-primary\" (click)=\"projectShare(); (false)\" routerLinkActive=\"active\"\n ><i class=\"fa fa-share-alt\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-share' | translate }}</a\n >\n </li>\n } @if (configService.languageSwitch) {\n <li class=\"nav-item dropdown\">\n <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"settingsDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"\n ><i class=\"fa fa-globe\" aria-hidden=\"true\"></i>\n {{ 'designer.misc.language' | translate }}\n </a>\n <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"settingsDropdown\">\n <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('de'); (false)\" target=\"_blank\">Deutsch</a>\n <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('en'); (false)\" target=\"_blank\">English</a>\n <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('es'); (false)\" target=\"_blank\">Espa\u00F1ol</a>\n <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('fr'); (false)\" target=\"_blank\">Fran\u00E7ais</a>\n <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('it'); (false)\" target=\"_blank\">Italiano</a>\n <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('pt'); (false)\" target=\"_blank\">Portugu\u00EAs</a>\n <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('zh'); (false)\" target=\"_blank\">\u4E2D\u6587</a>\n </div>\n </li>\n } @if (configService.loginAvailable && !userService.isLoggedIn()) {\n <li class=\"nav-item\" data-toggle=\"collapse\">\n <a class=\"nav-link\" (click)=\"userRegister(); (false)\" routerLinkActive=\"active\"\n ><i class=\"fa fa-user\" aria-hidden=\"true\"></i> {{ 'designer.navigation.login' | translate }}</a\n >\n </li>\n } @if (configService.loginAvailable && userService.isLoggedIn()) {\n <li class=\"nav-item dropdown\">\n <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"settingsDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"\n ><i class=\"fa fa-user\" aria-hidden=\"true\"></i>\n {{ userService.username }}\n </a>\n <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"settingsDropdown\">\n <a class=\"dropdown-item\" href=\"#\" (click)=\"userService.logout(); (false)\" target=\"_blank\"\n ><i class=\"fa fa-sign-out\" aria-hidden=\"true\"></i> {{ 'designer.navigation.logout' | translate }}</a\n >\n </div>\n </li>\n }\n </ul>\n </nav>\n\n <!-- The main content for larger screens -->\n <div class=\"h-100 d-none d-md-block\">\n <div id=\"row1\" class=\"split split-vertical clearfix pt-3 pl-3\">\n <!-- Scenes -->\n <div id=\"scenes\" class=\"split split-horizontal h-100\">\n @if (projectService.project) {\n <lib-app-scene></lib-app-scene>\n }\n </div>\n\n <!-- Presets -->\n <div id=\"presets\" class=\"split split-horizontal h-100\">\n @if (projectService.project) {\n <lib-app-preset></lib-app-preset>\n }\n </div>\n\n <!-- 3D preview -->\n <div id=\"preview\" class=\"split split-horizontal h-100 pr-3\">\n @if (projectService.project) {\n <div class=\"card border-secondary h-100\" [class.card-intro-active]=\"introService.showStep('preview')\">\n <div class=\"card-body p-0 h-100\">\n <lib-app-preview class=\"h-100\"></lib-app-preview>\n </div>\n </div>\n }\n </div>\n </div>\n\n <div id=\"row2\" class=\"split split-vertical clearfix px-3 d-flex\" style=\"flex-direction: row\">\n <!-- Menu for the capabilities, channels, effects and settings -->\n @if (projectService.project) {\n <div class=\"tab-rail col col-auto p-0 h-100\" style=\"margin-right: -1px\">\n <div class=\"nav flex-column nav-pills nav-pills-attached h-100\" id=\"v-pills-tab\" role=\"tablist\" aria-orientation=\"vertical\">\n <a\n class=\"nav-link px-3 active\"\n (click)=\"openTab('capabilities')\"\n id=\"v-pills-capabilities-tab\"\n popover=\"{{ 'designer.misc.capabilities' | translate }}\"\n container=\"body\"\n placement=\"right\"\n triggers=\"mouseenter:mouseleave\"\n data-toggle=\"pill\"\n href=\"#v-pills-capabilities\"\n role=\"tab\"\n aria-controls=\"v-pills-capabilities\"\n aria-selected=\"true\"\n >\n <i class=\"fa fa-bolt fa-fw\" aria-hidden=\"true\"></i>\n </a>\n <a\n class=\"nav-link px-3\"\n (click)=\"openTab('channels')\"\n id=\"v-pills-channels-tab\"\n popover=\"{{ 'designer.misc.channels' | translate }}\"\n container=\"body\"\n placement=\"right\"\n triggers=\"mouseenter:mouseleave\"\n data-toggle=\"pill\"\n href=\"#v-pills-channels\"\n role=\"tab\"\n aria-controls=\"v-pills-channels\"\n aria-selected=\"false\"\n >\n <i class=\"fa fa-sliders fa-fw\" aria-hidden=\"true\"></i>\n </a>\n <a\n class=\"nav-link px-3\"\n (click)=\"openTab('effects')\"\n id=\"v-pills-effects-tab\"\n popover=\"{{ 'designer.misc.effects' | translate }}\"\n container=\"body\"\n placement=\"right\"\n triggers=\"mouseenter:mouseleave\"\n data-toggle=\"pill\"\n href=\"#v-pills-effects\"\n role=\"tab\"\n aria-controls=\"v-pills-effects\"\n aria-selected=\"false\"\n >\n <i class=\"fa fa-magic fa-fw\" aria-hidden=\"true\"></i>\n </a>\n\n <a\n class=\"nav-link px-3 nav-link-divider\"\n href=\"#\"\n [class.text-primary]=\"presetService.stepsVisible\"\n popover=\"{{ 'designer.preset.steps' | translate }}\"\n container=\"body\"\n placement=\"right\"\n triggers=\"mouseenter:mouseleave\"\n (click)=\"presetService.switchStepsVisible(); (false)\"\n >\n <i class=\"fa fa-tasks fa-fw\" aria-hidden=\"true\"></i>\n </a>\n\n <a\n class=\"nav-link px-3 nav-link-divider\"\n (click)=\"openTab('settings')\"\n id=\"v-pills-settings-tab\"\n popover=\"{{ 'designer.misc.settings' | translate }}\"\n container=\"body\"\n placement=\"right\"\n triggers=\"mouseenter:mouseleave\"\n data-toggle=\"pill\"\n href=\"#v-pills-settings\"\n role=\"tab\"\n aria-controls=\"v-pills-settings\"\n aria-selected=\"false\"\n >\n <i class=\"fa fa-cog fa-fw\" aria-hidden=\"true\"></i>\n </a>\n </div>\n\n <!-- which preset the panels on the right are editing, marked the way the preset\n list marks it -->\n @if (presetService.selectedPreset) {\n <div class=\"edit-target\">\n <i\n class=\"fa fa-fw {{ presetService.getPresetIcon(presetService.selectedPreset) }}\"\n [style.color]=\"colorService.getPresetColor(presetService.selectedPreset)\"\n aria-hidden=\"true\"\n ></i>\n {{ presetService.selectedPreset.name }}\n </div>\n }\n </div>\n }\n\n <div id=\"capabilities\" class=\"split split-horizontal h-100\">\n @if (projectService.project) {\n <div class=\"row h-100 flex-nowrap\">\n <!-- which step of the selected preset these panels are editing -->\n <div class=\"col col-auto p-0 h-100\">\n <lib-app-preset-step></lib-app-preset-step>\n </div>\n\n <!-- Content for the capabilities, channels, effects and settings -->\n <div class=\"col px-0 h-100\">\n <div class=\"tab-content h-100\" id=\"v-pills-tabContent\">\n <div class=\"tab-pane h-100 show active\" id=\"v-pills-capabilities\" role=\"tabpanel\">\n <lib-app-fixture-capability></lib-app-fixture-capability>\n </div>\n <div class=\"tab-pane h-100 show\" id=\"v-pills-channels\" role=\"tabpanel\">\n <lib-app-fixture-channel></lib-app-fixture-channel>\n </div>\n <div class=\"tab-pane h-100\" id=\"v-pills-effects\" role=\"tabpanel\" aria-labelledby=\"v-pills-profile-tab\">\n <lib-app-effect></lib-app-effect>\n </div>\n <div class=\"tab-pane h-100\" id=\"v-pills-settings\" role=\"tabpanel\" aria-labelledby=\"v-pills-home-tab\">\n <lib-app-fixture-settings></lib-app-fixture-settings>\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n\n <!-- Fixtures -->\n <div id=\"fixtures\" class=\"split split-horizontal h-100\">\n @if (projectService.project) {\n <lib-app-fixture></lib-app-fixture>\n }\n </div>\n\n <!-- Master dimmer -->\n <div id=\"masterDimmer\" class=\"split split-horizontal h-100\">\n @if (projectService.project) {\n <lib-app-master-dimmer></lib-app-master-dimmer>\n }\n </div>\n </div>\n\n <!-- Timeline -->\n <div id=\"row3\" class=\"split split-vertical clearfix px-3 pb-3\">\n @if (projectService.project) {\n <lib-app-timeline></lib-app-timeline>\n }\n </div>\n </div>\n\n <!-- The components for small screens -->\n <div class=\"d-md-none p-3\">\n <div>\n @if (projectService.project) {\n <lib-app-master-dimmer></lib-app-master-dimmer>\n }\n </div>\n\n <div class=\"mt-3\">\n @if (projectService.project) {\n <lib-app-scene></lib-app-scene>\n }\n </div>\n </div>\n</div>\n\n<lib-app-intro class=\"d-none d-md-flex\"></lib-app-intro>\n\n<lib-app-hardware-promo-bar class=\"d-none d-md-block\"></lib-app-hardware-promo-bar>\n", styles: [":root{--sd-bg: #131519;--sd-surface-1: #191c21;--sd-surface-2: #1f232a;--sd-surface-3: #272c34;--sd-surface-4: #323841;--sd-border: #2b3038;--sd-border-strong: #3b424d;--sd-text: #dfe3e8;--sd-text-muted: #99a1ac;--sd-text-dim: #6b7280;--sd-primary: #fd7e14;--sd-primary-hover: #ff9440;--sd-primary-active: #e56f0b;--sd-primary-text: #ffa45c;--sd-on-primary: #1a1206;--sd-primary-soft: rgba(253, 126, 20, .16);--sd-primary-soft-hover: rgba(253, 126, 20, .24);--sd-primary-soft-strong: rgba(253, 126, 20, .28);--sd-success: #2eb872;--sd-info: #3d9df0;--sd-warning: #f0a92e;--sd-danger: #e5544b;--sd-radius-sm: 4px;--sd-radius: 6px;--sd-radius-lg: 10px;--sd-space-1: 4px;--sd-space-2: 8px;--sd-space-3: 12px;--sd-space-4: 16px;--sd-space-5: 20px;--sd-space-6: 24px;--sd-control-height: 28px;--sd-control-height-sm: 22px;--sd-row-height: 28px;--sd-shadow-1: 0 1px 2px rgba(0, 0, 0, .3);--sd-shadow-2: 0 4px 12px rgba(0, 0, 0, .35);--sd-shadow-3: 0 12px 32px rgba(0, 0, 0, .45);--sd-focus-ring: 0 0 0 2px rgba(253, 126, 20, .45)}.modal-full{max-width:unset!important;margin:20px!important}.modal-full .modal-content{max-height:calc(100vh - 40px)}.modal-full .modal-content>*{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}.modal-full .modal-body{flex:1 1 auto;overflow-y:auto;min-height:0}.modal .modal-full *{transition:none!important}.modal{z-index:10001}.modal .card{background-color:#191c21;border:1px solid #2b3038;border-radius:10px}.modal .card.panel{overflow:hidden}.modal .card-header{display:flex;align-items:center;gap:8px;min-height:30px;margin-bottom:0;padding:0 12px;background-color:#1f232a;border-bottom:1px solid #2b3038;border-radius:9px 9px 0 0;font-size:.75rem;font-weight:600;color:#dfe3e8;line-height:1.4}.modal .card-body{overflow:auto;padding:12px}.modal .card-footer{padding:8px 12px;background-color:transparent;border-top:1px solid #2b3038}.modal .card-header .btn,.modal .card-header a.btn,.modal .step-list .btn,.modal .step-list a.btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;min-height:0;padding:0!important;border:none;border-radius:4px;background-color:transparent;color:#99a1ac;font-size:.8125rem;transition:color .12s ease,background-color .12s ease}.modal .card-header .btn:hover,.modal .card-header .btn:focus,.modal .card-header a.btn:hover,.modal .card-header a.btn:focus,.modal .step-list .btn:hover,.modal .step-list .btn:focus,.modal .step-list a.btn:hover,.modal .step-list a.btn:focus{color:#dfe3e8;background-color:#323841;box-shadow:none}.modal .card-header .btn.text-primary,.modal .card-header a.btn.text-primary,.modal .step-list .btn.text-primary,.modal .step-list a.btn.text-primary{color:#ffa45c!important}.modal .card-header input,.modal .card-header select{font-weight:400}.modal .card-header .pull-right,.modal .card-header .ml-auto{margin-left:auto}.modal .btn{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;min-height:28px;padding:0 12px;border-radius:6px;font-size:.8125rem;font-weight:500;line-height:1.4;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.modal .btn-sm{min-height:22px;padding:0 8px;font-size:.75rem;border-radius:4px}.modal .btn-primary{background-color:#fd7e14;border-color:#fd7e14;color:#fff}.modal .btn-primary:hover,.modal .btn-primary:focus{background-color:#ff9440;border-color:#ff9440;color:#fff}.modal .btn-primary:active,.modal .btn-primary:not(:disabled):not(.disabled):active{background-color:#e56f0b;border-color:#e56f0b}.modal .btn-secondary{background-color:#272c34;border-color:#3b424d;color:#dfe3e8}.modal .btn-secondary:hover,.modal .btn-secondary:focus{background-color:#323841;border-color:#3b424d;color:#dfe3e8}.modal .btn-secondary:active,.modal .btn-secondary:not(:disabled):not(.disabled):active{background-color:#323841;border-color:#3b424d}.modal .btn-link{color:#dfe3e8}.modal .btn-link:hover{color:#ffa45c}.modal .btn-group>.btn{border-radius:0}.modal .btn-group>.btn:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.modal .btn-group>.btn:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.modal .btn-group>.btn+.btn{border-left:1px solid rgba(0,0,0,.25)}.modal input,.modal select,.modal textarea,.modal .form-control,.modal .custom-select{height:28px;padding:0 8px;background-color:#1f232a;border:1px solid #3b424d;border-radius:6px;color:#dfe3e8;font-size:.8125rem;line-height:1.4;transition:border-color .12s ease,background-color .12s ease}.modal input:hover:not(:disabled):not([readonly]),.modal select:hover:not(:disabled):not([readonly]),.modal textarea:hover:not(:disabled):not([readonly]),.modal .form-control:hover:not(:disabled):not([readonly]),.modal .custom-select:hover:not(:disabled):not([readonly]){border-color:#6b7280}.modal input:focus,.modal select:focus,.modal textarea:focus,.modal .form-control:focus,.modal .custom-select:focus{background-color:#1f232a;border-color:#fd7e14;color:#dfe3e8;box-shadow:none;outline:none}.modal input:focus-visible,.modal select:focus-visible,.modal textarea:focus-visible,.modal .form-control:focus-visible,.modal .custom-select:focus-visible{box-shadow:0 0 0 2px #fd7e1473}.modal input:disabled,.modal input[readonly],.modal select:disabled,.modal select[readonly],.modal textarea:disabled,.modal textarea[readonly],.modal .form-control:disabled,.modal .form-control[readonly],.modal .custom-select:disabled,.modal .custom-select[readonly]{background-color:#191c21;border-color:#2b3038;color:#6b7280;cursor:not-allowed}.modal input::placeholder,.modal select::placeholder,.modal textarea::placeholder,.modal .form-control::placeholder,.modal .custom-select::placeholder{color:#6b7280}.modal textarea,.modal textarea.form-control{height:auto;padding:8px;line-height:1.5}.modal select,.modal .custom-select{cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:24px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2399a1ac' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 8px center;background-size:14px 14px}.modal select option,.modal .custom-select option{background-color:#1f232a;color:#dfe3e8}.modal .input-group-text{height:28px;padding:0 8px;background-color:#272c34;border:1px solid #3b424d;border-radius:6px;color:#99a1ac;font-size:.8125rem}.modal .sd-value-input{width:64px;min-width:0;max-width:100%;text-align:center;font-family:SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.75rem;padding:0 4px}.modal .sd-value-input-hex{width:72px}.modal .sd-value-input-time{width:88px}.modal .sd-time-field{flex:0 0 auto;width:120px}.modal label{margin-bottom:0;color:#99a1ac;font-size:.8125rem}.modal .col-form-label{padding-top:0;padding-bottom:0;line-height:28px}.modal .form-group{margin-bottom:12px}.modal .form-check{position:relative;display:block;min-height:18px;padding-left:24px;margin-bottom:0}.modal .form-check-label{color:#dfe3e8;font-size:.8125rem;line-height:1.4;cursor:pointer}.modal input[type=checkbox],.modal input[type=radio]{appearance:none;-webkit-appearance:none;-moz-appearance:none;flex:0 0 auto;width:16px;height:16px;min-height:0;padding:0;margin:0;background-color:#272c34;background-repeat:no-repeat;background-position:center;background-size:100% 100%;border:1px solid #3b424d;border-radius:4px;cursor:pointer;vertical-align:middle;transition:background-color .12s ease,border-color .12s ease}.modal input[type=checkbox]:hover:not(:disabled),.modal input[type=radio]:hover:not(:disabled){border-color:#6b7280;background-color:#323841}.modal input[type=checkbox]:checked,.modal input[type=radio]:checked{background-color:#fd7e14;border-color:#fd7e14}.modal input[type=checkbox]:checked:hover,.modal input[type=radio]:checked:hover{background-color:#ff9440;border-color:#ff9440}.modal input[type=checkbox]:disabled,.modal input[type=radio]:disabled{opacity:.45;cursor:not-allowed}.modal input[type=checkbox]:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M5.5 10.5l3 3 6-6'/%3E%3C/svg%3E\")}.modal input[type=checkbox]:indeterminate{background-color:#fd7e14;border-color:#fd7e14;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath stroke='%23fff' stroke-width='2.6' stroke-linecap='round' d='M6 10h8'/%3E%3C/svg%3E\")}.modal input[type=radio]{border-radius:50%}.modal input[type=radio]:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%23fff'/%3E%3C/svg%3E\")}.modal .form-check-input{position:absolute;top:50%;left:0;margin:0;transform:translateY(-50%)}.modal span.bigcheck-target{font-family:FontAwesome;color:#99a1ac}.modal input[type=checkbox].bigcheck{position:absolute;left:-999em}.modal input[type=checkbox].bigcheck+span.bigcheck-target:after{content:\"\\f096\"}.modal input[type=checkbox].bigcheck:checked+span.bigcheck-target{color:#fd7e14}.modal input[type=checkbox].bigcheck:checked+span.bigcheck-target:after{content:\"\\f046\"}.modal .list-group-item{display:flex;align-items:center;min-height:28px;padding:.3125rem 12px;background-color:transparent;border:none;border-bottom:1px solid #2b3038;border-radius:0;color:#dfe3e8;white-space:nowrap;transition:background-color .12s ease}.modal .list-group-item:last-child{border-bottom:none}.modal .list-group-item:hover{background-color:#ffffff0a}.modal .list-group-item>.row{width:100%;margin-left:0;margin-right:0}.modal .list-group-item .row>div{min-width:0;overflow:hidden;text-overflow:ellipsis}.modal .list-group-item.active{background-color:#fd7e1447!important;border-color:#2b3038!important;color:#ffd0a8!important}.modal .list-group-item.active:hover{background-color:#fd7e1457!important}.modal .list-group-item.focused{outline:1px solid #fd7e14;outline-offset:-1px}.modal .inactive-list-item{opacity:.4}.modal .list-sort-handle{padding-left:0;padding-right:8px;color:#6b7280}.modal .list-sort-handle:hover{color:#99a1ac}.modal .nav a,.modal .panel-title .btn-link{color:#dfe3e8}.modal .nav-tabs{border-bottom:1px solid #2b3038}.modal .nav-tabs .nav-link{border:none;border-bottom:2px solid transparent;border-radius:0;color:#99a1ac;padding:8px 12px}.modal .nav-tabs .nav-link:hover{color:#dfe3e8;border-bottom-color:#3b424d}.modal .nav-tabs .nav-link.active{background-color:transparent;color:#dfe3e8;border-bottom-color:#fd7e14}.modal .slider{cursor:pointer}.modal .slider-track,.modal .slider-track-low,.modal .slider-track-high,.modal .slider-selection{border-radius:3px!important;background-image:none!important;box-shadow:none!important}.modal .slider-track{background-color:#323841!important}.modal .slider-track-low,.modal .slider-track-high{background-color:transparent!important}.modal .slider-selection{background-color:#fd7e14!important}.modal .slider-vertical .slider-selection{background-color:transparent!important}.modal .slider-vertical .slider-track-high{background-color:#fd7e14!important}.modal .slider-handle{width:14px!important;height:14px!important;background-color:#eef1f5!important;background-image:none!important;border:none;box-shadow:0 1px 2px #0000004d,0 0 0 1px #00000059!important;transition:transform .1s ease,background-color .12s ease}.modal .slider-handle:hover{background-color:#fff!important;transform:scale(1.12)}.modal .slider.slider-horizontal{height:20px}.modal .slider.slider-horizontal .slider-track{height:4px!important;top:50%!important;margin-top:-2px!important}.modal .slider.slider-horizontal .slider-handle{top:50%!important;margin-top:-7px!important;margin-left:-7px!important}.modal .slider.slider-vertical .slider-track{width:4px!important;left:50%!important;margin-left:-2px!important}.modal .slider.slider-vertical .slider-handle{left:50%!important;margin-left:-7px!important;margin-top:-7px!important}.modal .sd-slider-fill{flex:1 1 0;min-width:0}.modal .sd-slider-fill .slider.slider-horizontal{width:100%}.modal .slider-input,.modal .slider-input-readonly{width:64px;margin-left:8px;text-align:center;font-family:SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.75rem;padding:0 4px}.modal .slider-input-readonly{color:#6b7280;border-color:#2b3038}.modal .alert{padding:12px 16px;border-radius:6px;border:1px solid #3b424d;background-color:#1f232a;color:#dfe3e8;font-size:.8125rem}.modal .alert-primary{border-color:#fd7e1466;background-color:#fd7e1429;color:#dfe3e8}.modal .alert-success{border-color:#2eb87266;background-color:#2eb87224;color:#dfe3e8}.modal .alert-danger{border-color:#e5544b66;background-color:#e5544b24;color:#dfe3e8}.modal .progress{height:6px;background-color:#272c34;border-radius:3px}.modal .progress-bar{background-color:#fd7e14}.modal .table{color:#dfe3e8}.modal .table th,.modal .table td{border-top-color:#2b3038;padding:8px 12px}.modal .table thead th{border-bottom-color:#2b3038;color:#99a1ac;font-size:.75rem;font-weight:600}.modal-backdrop{background-color:#05060a}.modal-backdrop.show{opacity:.65}.modal-content{background-color:#191c21;border:1px solid #2b3038;border-radius:10px;box-shadow:0 12px 32px #00000073;overflow:hidden}.modal-header{align-items:center;padding:12px 20px;background-color:#1f232a;border-bottom:1px solid #2b3038}.modal-title{font-size:.9375rem;font-weight:600;color:#dfe3e8;line-height:1.4}.modal-body{padding:20px}.modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;background-color:transparent;border-top:1px solid #2b3038}.modal-footer>*{margin:0}.modal .card-modal .card{background-color:transparent;border:none;border-radius:0;box-shadow:none}.modal .card-modal .card-header{padding:12px 20px;font-size:.9375rem}.modal .card-modal .card-body{padding:20px}.modal .card-modal .card-footer{padding:12px 20px}.modal .close,.card-modal .close{padding:0;margin:0 0 0 auto;width:26px;height:26px;font-size:1.25rem;font-weight:400;line-height:1;color:#99a1ac;border-radius:4px;opacity:1;transition:color .12s ease,background-color .12s ease}.modal .close:hover,.card-modal .close:hover{color:#dfe3e8;background-color:#272c34;opacity:1}.dropdown-menu{z-index:100000;padding:4px;background-color:#1f232a;border:1px solid #2b3038;border-radius:6px;box-shadow:0 4px 12px #00000059;font-size:.8125rem}.dropdown-item{padding:.3125rem 8px;border-radius:4px;color:#dfe3e8}.dropdown-item:hover,.dropdown-item:focus{background-color:#272c34;color:#dfe3e8}.dropdown-item.active,.dropdown-item:active{background-color:#fd7e14;color:#fff}.dropdown-item .fa{color:#99a1ac;margin-right:4px}.dropdown-item:hover .fa{color:#dfe3e8}.tab-rail{position:relative}.edit-target{position:absolute;top:191px;bottom:12px;left:50%;writing-mode:vertical-rl;transform:translate(-50%) rotate(180deg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#99a1ac;font-size:.75rem;letter-spacing:.02em;-webkit-user-select:none;user-select:none;pointer-events:none}.edit-target .fa{display:inline-block;writing-mode:horizontal-tb;transform:rotate(180deg);margin-bottom:4px;font-size:.8125rem}.dropdown-divider{border-top-color:#2b3038}.popover{background-color:#272c34;border:1px solid #3b424d;border-radius:6px;box-shadow:0 4px 12px #00000059;font-size:.75rem;pointer-events:none}.popover-body{padding:.3125rem 8px;color:#dfe3e8}.popover-header{background-color:#323841;border-bottom-color:#3b424d;color:#dfe3e8}.bs-popover-right>.arrow:after,.bs-popover-auto[x-placement^=right]>.arrow:after{border-right-color:#272c34}.bs-popover-left>.arrow:after,.bs-popover-auto[x-placement^=left]>.arrow:after{border-left-color:#272c34}.bs-popover-bottom>.arrow:after,.bs-popover-auto[x-placement^=bottom]>.arrow:after{border-bottom-color:#272c34}.bs-popover-top>.arrow:after,.bs-popover-auto[x-placement^=top]>.arrow:after{border-top-color:#272c34}.bs-popover-right>.arrow:before,.bs-popover-auto[x-placement^=right]>.arrow:before{border-right-color:#3b424d}.bs-popover-left>.arrow:before,.bs-popover-auto[x-placement^=left]>.arrow:before{border-left-color:#3b424d}.bs-popover-bottom>.arrow:before,.bs-popover-auto[x-placement^=bottom]>.arrow:before{border-bottom-color:#3b424d}.bs-popover-top>.arrow:before,.bs-popover-auto[x-placement^=top]>.arrow:before{border-top-color:#3b424d}.hardware-promo-hint{display:flex;align-items:baseline;gap:8px;margin:0;padding:8px 12px;border:1px solid #2b3038;border-left:2px solid #fd7e14;border-radius:4px;background-color:#fd7e1429;color:#99a1ac;font-size:.75rem;line-height:1.5}.hardware-promo-hint .fa-lightbulb-o{color:#ffa45c}.hardware-promo-hint a{color:#ffa45c;white-space:nowrap}#designer{font-size:.8125rem;color:#dfe3e8;background-color:#131519}#designer .card{background-color:#191c21;border:1px solid #2b3038;border-radius:10px}#designer .card.panel{overflow:hidden}#designer .card-header{display:flex;align-items:center;gap:8px;min-height:30px;margin-bottom:0;padding:0 12px;background-color:#1f232a;border-bottom:1px solid #2b3038;border-radius:9px 9px 0 0;font-size:.75rem;font-weight:600;color:#dfe3e8;line-height:1.4}#designer .card-body{overflow:auto;padding:12px}#designer .card-footer{padding:8px 12px;background-color:transparent;border-top:1px solid #2b3038}#designer .card-header .btn,#designer .card-header a.btn,#designer .step-list .btn,#designer .step-list a.btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;min-height:0;padding:0!important;border:none;border-radius:4px;background-color:transparent;color:#99a1ac;font-size:.8125rem;transition:color .12s ease,background-color .12s ease}#designer .card-header .btn:hover,#designer .card-header .btn:focus,#designer .card-header a.btn:hover,#designer .card-header a.btn:focus,#designer .step-list .btn:hover,#designer .step-list .btn:focus,#designer .step-list a.btn:hover,#designer .step-list a.btn:focus{color:#dfe3e8;background-color:#323841;box-shadow:none}#designer .card-header .btn.text-primary,#designer .card-header a.btn.text-primary,#designer .step-list .btn.text-primary,#designer .step-list a.btn.text-primary{color:#ffa45c!important}#designer .card-header input,#designer .card-header select{font-weight:400}#designer .card-header .pull-right,#designer .card-header .ml-auto{margin-left:auto}#designer .btn{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;min-height:28px;padding:0 12px;border-radius:6px;font-size:.8125rem;font-weight:500;line-height:1.4;transition:background-color .12s ease,border-color .12s ease,color .12s ease}#designer .btn-sm{min-height:22px;padding:0 8px;font-size:.75rem;border-radius:4px}#designer .btn-primary{background-color:#fd7e14;border-color:#fd7e14;color:#fff}#designer .btn-primary:hover,#designer .btn-primary:focus{background-color:#ff9440;border-color:#ff9440;color:#fff}#designer .btn-primary:active,#designer .btn-primary:not(:disabled):not(.disabled):active{background-color:#e56f0b;border-color:#e56f0b}#designer .btn-secondary{background-color:#272c34;border-color:#3b424d;color:#dfe3e8}#designer .btn-secondary:hover,#designer .btn-secondary:focus{background-color:#323841;border-color:#3b424d;color:#dfe3e8}#designer .btn-secondary:active,#designer .btn-secondary:not(:disabled):not(.disabled):active{background-color:#323841;border-color:#3b424d}#designer .btn-link{color:#dfe3e8}#designer .btn-link:hover{color:#ffa45c}#designer .btn-group>.btn{border-radius:0}#designer .btn-group>.btn:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}#designer .btn-group>.btn:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}#designer .btn-group>.btn+.btn{border-left:1px solid rgba(0,0,0,.25)}#designer input,#designer select,#designer textarea,#designer .form-control,#designer .custom-select{height:28px;padding:0 8px;background-color:#1f232a;border:1px solid #3b424d;border-radius:6px;color:#dfe3e8;font-size:.8125rem;line-height:1.4;transition:border-color .12s ease,background-color .12s ease}#designer input:hover:not(:disabled):not([readonly]),#designer select:hover:not(:disabled):not([readonly]),#designer textarea:hover:not(:disabled):not([readonly]),#designer .form-control:hover:not(:disabled):not([readonly]),#designer .custom-select:hover:not(:disabled):not([readonly]){border-color:#6b7280}#designer input:focus,#designer select:focus,#designer textarea:focus,#designer .form-control:focus,#designer .custom-select:focus{background-color:#1f232a;border-color:#fd7e14;color:#dfe3e8;box-shadow:none;outline:none}#designer input:focus-visible,#designer select:focus-visible,#designer textarea:focus-visible,#designer .form-control:focus-visible,#designer .custom-select:focus-visible{box-shadow:0 0 0 2px #fd7e1473}#designer input:disabled,#designer input[readonly],#designer select:disabled,#designer select[readonly],#designer textarea:disabled,#designer textarea[readonly],#designer .form-control:disabled,#designer .form-control[readonly],#designer .custom-select:disabled,#designer .custom-select[readonly]{background-color:#191c21;border-color:#2b3038;color:#6b7280;cursor:not-allowed}#designer input::placeholder,#designer select::placeholder,#designer textarea::placeholder,#designer .form-control::placeholder,#designer .custom-select::placeholder{color:#6b7280}#designer textarea,#designer textarea.form-control{height:auto;padding:8px;line-height:1.5}#designer select,#designer .custom-select{cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:24px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2399a1ac' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 8px center;background-size:14px 14px}#designer select option,#designer .custom-select option{background-color:#1f232a;color:#dfe3e8}#designer .input-group-text{height:28px;padding:0 8px;background-color:#272c34;border:1px solid #3b424d;border-radius:6px;color:#99a1ac;font-size:.8125rem}#designer .sd-value-input{width:64px;min-width:0;max-width:100%;text-align:center;font-family:SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.75rem;padding:0 4px}#designer .sd-value-input-hex{width:72px}#designer .sd-value-input-time{width:88px}#designer .sd-time-field{flex:0 0 auto;width:120px}#designer label{margin-bottom:0;color:#99a1ac;font-size:.8125rem}#designer .col-form-label{padding-top:0;padding-bottom:0;line-height:28px}#designer .form-group{margin-bottom:12px}#designer .form-check{position:relative;display:block;min-height:18px;padding-left:24px;margin-bottom:0}#designer .form-check-label{color:#dfe3e8;font-size:.8125rem;line-height:1.4;cursor:pointer}#designer input[type=checkbox],#designer input[type=radio]{appearance:none;-webkit-appearance:none;-moz-appearance:none;flex:0 0 auto;width:16px;height:16px;min-height:0;padding:0;margin:0;background-color:#272c34;background-repeat:no-repeat;background-position:center;background-size:100% 100%;border:1px solid #3b424d;border-radius:4px;cursor:pointer;vertical-align:middle;transition:background-color .12s ease,border-color .12s ease}#designer input[type=checkbox]:hover:not(:disabled),#designer input[type=radio]:hover:not(:disabled){border-color:#6b7280;background-color:#323841}#designer input[type=checkbox]:checked,#designer input[type=radio]:checked{background-color:#fd7e14;border-color:#fd7e14}#designer input[type=checkbox]:checked:hover,#designer input[type=radio]:checked:hover{background-color:#ff9440;border-color:#ff9440}#designer input[type=checkbox]:disabled,#designer input[type=radio]:disabled{opacity:.45;cursor:not-allowed}#designer input[type=checkbox]:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M5.5 10.5l3 3 6-6'/%3E%3C/svg%3E\")}#designer input[type=checkbox]:indeterminate{background-color:#fd7e14;border-color:#fd7e14;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath stroke='%23fff' stroke-width='2.6' stroke-linecap='round' d='M6 10h8'/%3E%3C/svg%3E\")}#designer input[type=radio]{border-radius:50%}#designer input[type=radio]:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%23fff'/%3E%3C/svg%3E\")}#designer .form-check-input{position:absolute;top:50%;left:0;margin:0;transform:translateY(-50%)}#designer span.bigcheck-target{font-family:FontAwesome;color:#99a1ac}#designer input[type=checkbox].bigcheck{position:absolute;left:-999em}#designer input[type=checkbox].bigcheck+span.bigcheck-target:after{content:\"\\f096\"}#designer input[type=checkbox].bigcheck:checked+span.bigcheck-target{color:#fd7e14}#designer input[type=checkbox].bigcheck:checked+span.bigcheck-target:after{content:\"\\f046\"}#designer .list-group-item{display:flex;align-items:center;min-height:28px;padding:.3125rem 12px;background-color:transparent;border:none;border-bottom:1px solid #2b3038;border-radius:0;color:#dfe3e8;white-space:nowrap;transition:background-color .12s ease}#designer .list-group-item:last-child{border-bottom:none}#designer .list-group-item:hover{background-color:#ffffff0a}#designer .list-group-item>.row{width:100%;margin-left:0;margin-right:0}#designer .list-group-item .row>div{min-width:0;overflow:hidden;text-overflow:ellipsis}#designer .list-group-item.active{background-color:#fd7e1447!important;border-color:#2b3038!important;color:#ffd0a8!important}#designer .list-group-item.active:hover{background-color:#fd7e1457!important}#designer .list-group-item.focused{outline:1px solid #fd7e14;outline-offset:-1px}#designer .inactive-list-item{opacity:.4}#designer .list-sort-handle{padding-left:0;padding-right:8px;color:#6b7280}#designer .list-sort-handle:hover{color:#99a1ac}#designer .nav a,#designer .panel-title .btn-link{color:#dfe3e8}#designer .nav-tabs{border-bottom:1px solid #2b3038}#designer .nav-tabs .nav-link{border:none;border-bottom:2px solid transparent;border-radius:0;color:#99a1ac;padding:8px 12px}#designer .nav-tabs .nav-link:hover{color:#dfe3e8;border-bottom-color:#3b424d}#designer .nav-tabs .nav-link.active{background-color:transparent;color:#dfe3e8;border-bottom-color:#fd7e14}#designer .slider{cursor:pointer}#designer .slider-track,#designer .slider-track-low,#designer .slider-track-high,#designer .slider-selection{border-radius:3px!important;background-image:none!important;box-shadow:none!important}#designer .slider-track{background-color:#323841!important}#designer .slider-track-low,#designer .slider-track-high{background-color:transparent!important}#designer .slider-selection{background-color:#fd7e14!important}#designer .slider-vertical .slider-selection{background-color:transparent!important}#designer .slider-vertical .slider-track-high{background-color:#fd7e14!important}#designer .slider-handle{width:14px!important;height:14px!important;background-color:#eef1f5!important;background-image:none!important;border:none;box-shadow:0 1px 2px #0000004d,0 0 0 1px #00000059!important;transition:transform .1s ease,background-color .12s ease}#designer .slider-handle:hover{background-color:#fff!important;transform:scale(1.12)}#designer .slider.slider-horizontal{height:20px}#designer .slider.slider-horizontal .slider-track{height:4px!important;top:50%!important;margin-top:-2px!important}#designer .slider.slider-horizontal .slider-handle{top:50%!important;margin-top:-7px!important;margin-left:-7px!important}#designer .slider.slider-vertical .slider-track{width:4px!important;left:50%!important;margin-left:-2px!important}#designer .slider.slider-vertical .slider-handle{left:50%!important;margin-left:-7px!important;margin-top:-7px!important}#designer .sd-slider-fill{flex:1 1 0;min-width:0}#designer .sd-slider-fill .slider.slider-horizontal{width:100%}#designer .slider-input,#designer .slider-input-readonly{width:64px;margin-left:8px;text-align:center;font-family:SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.75rem;padding:0 4px}#designer .slider-input-readonly{color:#6b7280;border-color:#2b3038}#designer .alert{padding:12px 16px;border-radius:6px;border:1px solid #3b424d;background-color:#1f232a;color:#dfe3e8;font-size:.8125rem}#designer .alert-primary{border-color:#fd7e1466;background-color:#fd7e1429;color:#dfe3e8}#designer .alert-success{border-color:#2eb87266;background-color:#2eb87224;color:#dfe3e8}#designer .alert-danger{border-color:#e5544b66;background-color:#e5544b24;color:#dfe3e8}#designer .progress{height:6px;background-color:#272c34;border-radius:3px}#designer .progress-bar{background-color:#fd7e14}#designer .table{color:#dfe3e8}#designer .table th,#designer .table td{border-top-color:#2b3038;padding:8px 12px}#designer .table thead th{border-bottom-color:#2b3038;color:#99a1ac;font-size:.75rem;font-weight:600}#designer .row{flex-wrap:unset}#designer .capability-container{padding:0;height:0}#designer .gutter{background-color:transparent;position:relative}#designer .gutter:after{content:\"\";position:absolute;background-color:transparent;border-radius:2px;transition:background-color .15s ease}#designer .gutter:hover:after{background-color:#3b424d}#designer .gutter.gutter-horizontal{cursor:ew-resize}#designer .gutter.gutter-horizontal:after{top:25%;bottom:25%;left:50%;width:2px;transform:translate(-50%)}#designer .gutter.gutter-vertical{cursor:ns-resize}#designer .gutter.gutter-vertical:after{left:25%;right:25%;top:50%;height:2px;transform:translateY(-50%)}#designer .split-horizontal,#designer .gutter.gutter-horizontal{float:left}#designer .split-vertical,#designer .gutter.gutter-horizontal{height:100%}#designer .split{overflow-y:hidden;overflow-x:hidden}#designer .panel{background-color:transparent}#designer .panel-body{background-color:#1f232a}#designer #masterDimmer .card-body{padding-left:8px;padding-right:8px}#designer .navbar{height:34px;padding:0 8px;background-color:#191c21!important;border-bottom:1px solid #2b3038}#designer .navbar-nav{flex-direction:row!important;align-items:center}#designer .navbar-expand-lg{flex-flow:row nowrap!important;justify-content:flex-start!important}#designer .nav-link{cursor:pointer}#designer .navbar .nav-link{display:flex;align-items:center;gap:.375rem;height:24px;padding:0 8px!important;border-radius:4px;color:#99a1ac;font-size:.8125rem;transition:color .12s ease,background-color .12s ease}#designer .navbar .nav-link:hover,#designer .navbar .nav-link:focus{color:#dfe3e8;background-color:#272c34}#designer .navbar .nav-link.text-primary{color:#ffa45c!important}#designer .navbar .nav-link.text-primary:hover{color:#ff9440!important}#designer .navbar .nav-item.show>.nav-link{color:#dfe3e8;background-color:#272c34}#designer .navbar-nav .dropdown-menu{position:absolute;float:none}#designer .navbar .dropdown-toggle:after{margin-left:.125rem;opacity:.6}#designer .navbar .project-name{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#dfe3e8}#designer .capability{overflow:visible}#designer .capability-deactivated{opacity:.4}#designer .nav-pills{background-color:#191c21;border:1px solid #2b3038;border-radius:10px;padding:4px;gap:2px}#designer .nav-pills .nav-link{display:flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0!important;border-radius:6px;color:#99a1ac;transition:color .12s ease,background-color .12s ease}#designer .nav-pills .nav-link:hover{color:#dfe3e8;background-color:#272c34}#designer .nav-pills .nav-link.active,#designer .nav-pills .show>.nav-link{background-color:#fd7e1447;color:#ffa45c}#designer .nav-pills.nav-pills-attached{border-radius:10px 0 0 10px}#designer .nav-pills .nav-link.nav-link-divider{position:relative;margin-top:8px}#designer .nav-pills .nav-link.nav-link-divider:before{content:\"\";position:absolute;top:-5px;left:3px;right:3px;height:1px;background-color:#2b3038}#designer #preview .card{overflow:hidden}#designer #capabilities>.row{margin-left:0;margin-right:0}#designer #capabilities>.row>.col{min-width:0}#designer #capabilities .tab-pane>*>.card{border-top-left-radius:0;border-bottom-left-radius:0}#designer .card-header .panel-title{flex:1 1 auto;min-width:0}#designer .accordion-toggle .btn,#designer .accordion-toggle button{display:flex;align-items:center;justify-content:flex-start;width:100%;height:auto;min-height:0;padding:0;border:none;background-color:transparent;color:#dfe3e8;text-align:left}#designer .accordion-toggle .btn:hover,#designer .accordion-toggle .btn:focus,#designer .accordion-toggle .btn:active,#designer .accordion-toggle button:hover,#designer .accordion-toggle button:focus,#designer .accordion-toggle button:active{background-color:transparent;box-shadow:none;color:#dfe3e8}#designer accordion-group{display:block}#designer accordion-group .card{margin:0;border:none;border-radius:0;background-color:transparent;overflow:visible}#designer accordion-group .card-header{border-radius:0;cursor:pointer;transition:background-color .12s ease}#designer accordion-group .card-header:hover{background-color:#272c34}#designer accordion-group+accordion-group .card-header{border-top:1px solid #2b3038}#designer accordion-group:first-of-type .card-header{border-top-left-radius:10px;border-top-right-radius:10px}#designer accordion-group:last-of-type:not(.panel-open) .card-header{border-bottom-left-radius:10px;border-bottom-right-radius:10px}#designer .iro__wheel,#designer .iro__slider{cursor:pointer}#designer .pan-tilt-grid path{fill:none;stroke:#99a1ac;stroke-width:10px}#designer .pan-tilt-grid circle{fill:#fd7e14;stroke:#191c21;stroke-width:3px}#designer .wavesurfer-region{z-index:5!important;border-radius:4px}#designer .wavesurfer-region[data-region-selected=true]{z-index:6!important}#designer .wavesurfer-region[data-region-preset=true]{height:50%!important;top:50%!important}#designer .wavesurfer-region[data-region-name]:after{content:attr(data-region-name);margin-left:20px;font-size:.75rem}#designer .step-marker{position:absolute;top:0;bottom:0;pointer-events:none}#designer .step-marker-tick{width:1px;background-color:#ffffff80}#designer .step-marker-tick:after{content:attr(data-step-name);position:absolute;top:2px;left:3px;color:#99a1ac;font-size:.7rem;white-space:nowrap}#designer .step-marker-tick[data-step-selected=true]{width:2px;background-color:#fd7e14}#designer .step-marker-tick[data-step-selected=true]:after{color:#ffa45c}#designer .step-marker-transition{background:linear-gradient(to right,#ffffff38,#fff0)}#designer .step-marker-transition[data-step-selected=true]{background:linear-gradient(to right,#fd7e1473,#fd7e1400)}#designer .wavesurfer-handle{width:10px!important;max-width:10px!important;border:1px solid rgba(255,255,255,.35);background:#00000026;box-sizing:border-box;opacity:0;cursor:unset!important}#designer .wavesurfer-handle-end{margin-left:-10px}#designer .wavesurfer-region[data-region-selectable=true] .wavesurfer-handle{opacity:1;cursor:col-resize!important}#designer .wavesurfer-handle:before,#designer .wavesurfer-handle:after{content:\"\";display:block;position:absolute;z-index:1;border-top:1px solid rgba(255,255,255,.7);border-bottom:1px solid rgba(255,255,255,.7);height:4px;left:5%;right:5%;top:50%;transform:translateY(-50%)}#designer .wavesurfer-handle:before{margin-top:-3px}#designer timeline{overflow:scroll!important;overflow:-moz-scrollbars-none;-ms-overflow-style:none;scrollbar-width:none;cursor:s-resize}#designer timeline::-webkit-scrollbar{height:0!important}#designer cursor{top:-20px!important}#designer wave{border-right-color:#fd7e14!important;cursor:col-resize}#designer wave canvas{opacity:.35}\n"], dependencies: [{ kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i10.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: PreviewComponent, selector: "lib-app-preview" }, { kind: "component", type: SceneComponent, selector: "lib-app-scene" }, { kind: "component", type: TimelineComponent, selector: "lib-app-timeline" }, { kind: "component", type: FixtureComponent, selector: "lib-app-fixture" }, { kind: "component", type: FixtureCapabilityComponent, selector: "lib-app-fixture-capability" }, { kind: "component", type: FixtureSettingsComponent, selector: "lib-app-fixture-settings" }, { kind: "component", type: EffectComponent, selector: "lib-app-effect" }, { kind: "component", type: PresetComponent, selector: "lib-app-preset" }, { kind: "component", type: MasterDimmerComponent, selector: "lib-app-master-dimmer" }, { kind: "component", type: FixtureChannelComponent, selector: "lib-app-fixture-channel" }, { kind: "component", type: IntroComponent, selector: "lib-app-intro" }, { kind: "component", type: PresetStepComponent, selector: "lib-app-preset-step" }, { kind: "component", type: InlineEditComponent, selector: "lib-app-inline-edit", inputs: ["value", "placeholder"], outputs: ["valueChange"] }, { kind: "component", type: HardwarePromoBarComponent, selector: "lib-app-hardware-promo-bar" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
13840
13840
|
}
|
|
13841
13841
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DesignerComponent, decorators: [{
|
|
13842
13842
|
type: Component,
|
|
13843
|
-
args: [{ selector: 'lib-designer', encapsulation: ViewEncapsulation.None, standalone: false, template: "<!-- Wrap the whole component inside a div to encapsulate the CSS -->\n\n<!-- 100 % height minus the menu bar above and the gutter size of 13 px -->\n<!-- <div style=\"height: calc(100% - 33px)\"> -->\n<div id=\"designer\" [ngStyle]=\"{ height: 'calc(100% - ' + totalMenuHeightPx + 'px)' }\">\n <!-- Navigation -->\n <nav class=\"navbar navbar-expand-lg navbar-light bg-light\" style=\"z-index: 9999\">\n <!-- Menu buttons -->\n <ul class=\"navbar-nav mr-auto\">\n <li class=\"nav-item dropdown\">\n <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"fileDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n {{ 'designer.navigation.project' | translate }}\n </a>\n <div class=\"dropdown-menu\" aria-labelledby=\"fileDropdown\">\n <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectNew(); (false)\"\n ><i class=\"fa fa-fw fa-file-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-new' | translate }}</a\n >\n <a class=\"dropdown-item\" href=\"#\" (click)=\"projectOpen(); (false)\"\n ><i class=\"fa fa-fw fa-folder-open-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-open' | translate }}</a\n >\n <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectSave(); (false)\"\n ><i class=\"fa fa-fw fa-floppy-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-save' | translate }}</a\n >\n <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectSaveAs(); (false)\"\n ><i class=\"fa fa-fw fa-floppy-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-save-as' | translate }}</a\n >\n <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectImport(); (false)\"\n ><i class=\"fa fa-fw fa-download\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-import' | translate }}</a\n >\n <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectExport(); (false)\"\n ><i class=\"fa fa-fw fa-external-link\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-export' | translate }}</a\n >\n </div>\n </li>\n <li class=\"nav-item dropdown d-none d-md-block\">\n <!-- collect what has been changed so far before showing whether there is anything to undo -->\n <a\n class=\"nav-link dropdown-toggle\"\n href=\"#\"\n id=\"editDropdown\"\n data-toggle=\"dropdown\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\"\n (click)=\"undoService.captureChanges()\"\n >\n {{ 'designer.navigation.edit' | translate }}\n </a>\n <div class=\"dropdown-menu\" aria-labelledby=\"editDropdown\">\n <a class=\"dropdown-item\" [class.disabled]=\"!undoService.canUndo\" href=\"#\" (click)=\"undo(); (false)\"\n ><i class=\"fa fa-fw fa-undo\" aria-hidden=\"true\"></i> {{ 'designer.navigation.undo' | translate }}</a\n >\n <a class=\"dropdown-item\" [class.disabled]=\"!undoService.canRedo\" href=\"#\" (click)=\"redo(); (false)\"\n ><i class=\"fa fa-fw fa-repeat\" aria-hidden=\"true\"></i> {{ 'designer.navigation.redo' | translate }}</a\n >\n </div>\n </li>\n <li class=\"nav-item dropdown d-none d-md-block\">\n <a\n class=\"nav-link dropdown-toggle\"\n href=\"#\"\n id=\"settingsDropdown\"\n data-toggle=\"dropdown\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\"\n >\n {{ 'designer.navigation.settings' | translate }}\n </a>\n <div class=\"dropdown-menu\" aria-labelledby=\"settingsDropdown\">\n <a class=\"dropdown-item\" href=\"#\" (click)=\"openFixturePool(); (false)\">{{ 'designer.navigation.fixture-pool' | translate }}</a>\n <!-- <a class=\"dropdown-item\" href=\"#\">{{ 'designer.navigation.stage' | translate }}</a> -->\n </div>\n </li>\n <li class=\"nav-item dropdown d-none d-md-block\">\n <a\n class=\"nav-link dropdown-toggle\"\n href=\"#\"\n id=\"settingsDropdown\"\n data-toggle=\"dropdown\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\"\n >\n {{ 'designer.navigation.help' | translate }}\n </a>\n <div class=\"dropdown-menu\" aria-labelledby=\"settingsDropdown\">\n <a class=\"dropdown-item\" href=\"#\" (click)=\"introService.reset(); (false)\">{{ 'designer.navigation.reset-intro' | translate }}</a>\n <a class=\"dropdown-item\" href=\"https://rocketshow.net/support/\" target=\"_blank\">{{\n 'designer.navigation.support' | translate\n }}</a>\n </div>\n </li>\n </ul>\n\n <!-- Project name shown in the middle, editable inline -->\n @if (projectService.project) {\n <lib-app-inline-edit\n class=\"project-name d-none d-md-inline-flex\"\n [value]=\"projectService.project.name\"\n [placeholder]=\"'designer.project.name' | translate\"\n (valueChange)=\"setProjectName($event)\"\n ></lib-app-inline-edit>\n }\n\n <ul class=\"navbar-nav\">\n @if (configService.shareAvailable) {\n <li class=\"nav-item d-none d-md-flex\" data-toggle=\"collapse\">\n <a class=\"nav-link text-primary\" (click)=\"projectShare(); (false)\" routerLinkActive=\"active\"\n ><i class=\"fa fa-share-alt\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-share' | translate }}</a\n >\n </li>\n } @if (configService.languageSwitch) {\n <li class=\"nav-item dropdown\">\n <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"settingsDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"\n ><i class=\"fa fa-globe\" aria-hidden=\"true\"></i>\n {{ 'designer.misc.language' | translate }}\n </a>\n <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"settingsDropdown\">\n <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('de'); (false)\" target=\"_blank\">Deutsch</a>\n <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('en'); (false)\" target=\"_blank\">English</a>\n <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('es'); (false)\" target=\"_blank\">Espa\u00F1ol</a>\n <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('fr'); (false)\" target=\"_blank\">Fran\u00E7ais</a>\n <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('it'); (false)\" target=\"_blank\">Italiano</a>\n <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('pt'); (false)\" target=\"_blank\">Portugu\u00EAs</a>\n <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('zh'); (false)\" target=\"_blank\">\u4E2D\u6587</a>\n </div>\n </li>\n } @if (configService.loginAvailable && !userService.isLoggedIn()) {\n <li class=\"nav-item\" data-toggle=\"collapse\">\n <a class=\"nav-link\" (click)=\"userRegister(); (false)\" routerLinkActive=\"active\"\n ><i class=\"fa fa-user\" aria-hidden=\"true\"></i> {{ 'designer.navigation.login' | translate }}</a\n >\n </li>\n } @if (configService.loginAvailable && userService.isLoggedIn()) {\n <li class=\"nav-item dropdown\">\n <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"settingsDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"\n ><i class=\"fa fa-user\" aria-hidden=\"true\"></i>\n {{ userService.username }}\n </a>\n <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"settingsDropdown\">\n <a class=\"dropdown-item\" href=\"#\" (click)=\"userService.logout(); (false)\" target=\"_blank\"\n ><i class=\"fa fa-sign-out\" aria-hidden=\"true\"></i> {{ 'designer.navigation.logout' | translate }}</a\n >\n </div>\n </li>\n }\n </ul>\n </nav>\n\n <!-- The main content for larger screens -->\n <div class=\"h-100 d-none d-md-block\">\n <div id=\"row1\" class=\"split split-vertical clearfix pt-3 pl-3\">\n <!-- Scenes -->\n <div id=\"scenes\" class=\"split split-horizontal h-100\">\n @if (projectService.project) {\n <lib-app-scene></lib-app-scene>\n }\n </div>\n\n <!-- Presets -->\n <div id=\"presets\" class=\"split split-horizontal h-100\">\n @if (projectService.project) {\n <lib-app-preset></lib-app-preset>\n }\n </div>\n\n <!-- 3D preview -->\n <div id=\"preview\" class=\"split split-horizontal h-100 pr-3\">\n @if (projectService.project) {\n <div class=\"card border-secondary h-100\" [class.card-intro-active]=\"introService.showStep('preview')\">\n <div class=\"card-body p-0 h-100\">\n <lib-app-preview class=\"h-100\"></lib-app-preview>\n </div>\n </div>\n }\n </div>\n </div>\n\n <div id=\"row2\" class=\"split split-vertical clearfix px-3 d-flex\" style=\"flex-direction: row\">\n <!-- Menu for the capabilities, channels, effects and settings -->\n @if (projectService.project) {\n <div class=\"tab-rail col col-auto p-0 h-100\" style=\"margin-right: -1px\">\n <div class=\"nav flex-column nav-pills nav-pills-attached h-100\" id=\"v-pills-tab\" role=\"tablist\" aria-orientation=\"vertical\">\n <a\n class=\"nav-link px-3 active\"\n (click)=\"openTab('capabilities')\"\n id=\"v-pills-capabilities-tab\"\n popover=\"{{ 'designer.misc.capabilities' | translate }}\"\n container=\"body\"\n placement=\"right\"\n triggers=\"mouseenter:mouseleave\"\n data-toggle=\"pill\"\n href=\"#v-pills-capabilities\"\n role=\"tab\"\n aria-controls=\"v-pills-capabilities\"\n aria-selected=\"true\"\n >\n <i class=\"fa fa-bolt fa-fw\" aria-hidden=\"true\"></i>\n </a>\n <a\n class=\"nav-link px-3\"\n (click)=\"openTab('channels')\"\n id=\"v-pills-channels-tab\"\n popover=\"{{ 'designer.misc.channels' | translate }}\"\n container=\"body\"\n placement=\"right\"\n triggers=\"mouseenter:mouseleave\"\n data-toggle=\"pill\"\n href=\"#v-pills-channels\"\n role=\"tab\"\n aria-controls=\"v-pills-channels\"\n aria-selected=\"false\"\n >\n <i class=\"fa fa-sliders fa-fw\" aria-hidden=\"true\"></i>\n </a>\n <a\n class=\"nav-link px-3\"\n (click)=\"openTab('effects')\"\n id=\"v-pills-effects-tab\"\n popover=\"{{ 'designer.misc.effects' | translate }}\"\n container=\"body\"\n placement=\"right\"\n triggers=\"mouseenter:mouseleave\"\n data-toggle=\"pill\"\n href=\"#v-pills-effects\"\n role=\"tab\"\n aria-controls=\"v-pills-effects\"\n aria-selected=\"false\"\n >\n <i class=\"fa fa-magic fa-fw\" aria-hidden=\"true\"></i>\n </a>\n\n <a\n class=\"nav-link px-3 nav-link-divider\"\n href=\"#\"\n [class.text-primary]=\"presetService.stepsVisible\"\n popover=\"{{ 'designer.preset.steps' | translate }}\"\n container=\"body\"\n placement=\"right\"\n triggers=\"mouseenter:mouseleave\"\n (click)=\"presetService.switchStepsVisible(); (false)\"\n >\n <i class=\"fa fa-tasks fa-fw\" aria-hidden=\"true\"></i>\n </a>\n\n <a\n class=\"nav-link px-3 nav-link-divider\"\n (click)=\"openTab('settings')\"\n id=\"v-pills-settings-tab\"\n popover=\"{{ 'designer.misc.settings' | translate }}\"\n container=\"body\"\n placement=\"right\"\n triggers=\"mouseenter:mouseleave\"\n data-toggle=\"pill\"\n href=\"#v-pills-settings\"\n role=\"tab\"\n aria-controls=\"v-pills-settings\"\n aria-selected=\"false\"\n >\n <i class=\"fa fa-cog fa-fw\" aria-hidden=\"true\"></i>\n </a>\n </div>\n\n <!-- which preset the panels on the right are editing, marked the way the preset\n list marks it -->\n @if (presetService.selectedPreset) {\n <div class=\"edit-target\">\n <i\n class=\"fa fa-fw {{ presetService.getPresetIcon(presetService.selectedPreset) }}\"\n [style.color]=\"colorService.getPresetColor(presetService.selectedPreset)\"\n aria-hidden=\"true\"\n ></i>\n {{ presetService.selectedPreset.name }}\n </div>\n }\n </div>\n }\n\n <div id=\"capabilities\" class=\"split split-horizontal h-100\">\n @if (projectService.project) {\n <div class=\"row h-100 flex-nowrap\">\n <!-- which step of the selected preset these panels are editing -->\n <div class=\"col col-auto p-0 h-100\">\n <lib-app-preset-step></lib-app-preset-step>\n </div>\n\n <!-- Content for the capabilities, channels, effects and settings -->\n <div class=\"col px-0 h-100\">\n <div class=\"tab-content h-100\" id=\"v-pills-tabContent\">\n <div class=\"tab-pane h-100 show active\" id=\"v-pills-capabilities\" role=\"tabpanel\">\n <lib-app-fixture-capability></lib-app-fixture-capability>\n </div>\n <div class=\"tab-pane h-100 show\" id=\"v-pills-channels\" role=\"tabpanel\">\n <lib-app-fixture-channel></lib-app-fixture-channel>\n </div>\n <div class=\"tab-pane h-100\" id=\"v-pills-effects\" role=\"tabpanel\" aria-labelledby=\"v-pills-profile-tab\">\n <lib-app-effect></lib-app-effect>\n </div>\n <div class=\"tab-pane h-100\" id=\"v-pills-settings\" role=\"tabpanel\" aria-labelledby=\"v-pills-home-tab\">\n <lib-app-fixture-settings></lib-app-fixture-settings>\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n\n <!-- Fixtures -->\n <div id=\"fixtures\" class=\"split split-horizontal h-100\">\n @if (projectService.project) {\n <lib-app-fixture></lib-app-fixture>\n }\n </div>\n\n <!-- Master dimmer -->\n <div id=\"masterDimmer\" class=\"split split-horizontal h-100\">\n @if (projectService.project) {\n <lib-app-master-dimmer></lib-app-master-dimmer>\n }\n </div>\n </div>\n\n <!-- Timeline -->\n <div id=\"row3\" class=\"split split-vertical clearfix px-3 pb-3\">\n @if (projectService.project) {\n <lib-app-timeline></lib-app-timeline>\n }\n </div>\n </div>\n\n <!-- The components for small screens -->\n <div class=\"d-md-none p-3\">\n <div>\n @if (projectService.project) {\n <lib-app-master-dimmer></lib-app-master-dimmer>\n }\n </div>\n\n <div class=\"mt-3\">\n @if (projectService.project) {\n <lib-app-scene></lib-app-scene>\n }\n </div>\n </div>\n</div>\n\n<lib-app-intro class=\"d-none d-md-flex\"></lib-app-intro>\n\n<lib-app-hardware-promo-bar class=\"d-none d-md-block\"></lib-app-hardware-promo-bar>\n", styles: [":root{--sd-bg: #131519;--sd-surface-1: #191c21;--sd-surface-2: #1f232a;--sd-surface-3: #272c34;--sd-surface-4: #323841;--sd-border: #2b3038;--sd-border-strong: #3b424d;--sd-text: #dfe3e8;--sd-text-muted: #99a1ac;--sd-text-dim: #6b7280;--sd-primary: #fd7e14;--sd-primary-hover: #ff9440;--sd-primary-active: #e56f0b;--sd-primary-text: #ffa45c;--sd-on-primary: #1a1206;--sd-primary-soft: rgba(253, 126, 20, .16);--sd-primary-soft-hover: rgba(253, 126, 20, .24);--sd-primary-soft-strong: rgba(253, 126, 20, .28);--sd-success: #2eb872;--sd-info: #3d9df0;--sd-warning: #f0a92e;--sd-danger: #e5544b;--sd-radius-sm: 4px;--sd-radius: 6px;--sd-radius-lg: 10px;--sd-space-1: 4px;--sd-space-2: 8px;--sd-space-3: 12px;--sd-space-4: 16px;--sd-space-5: 20px;--sd-space-6: 24px;--sd-control-height: 28px;--sd-control-height-sm: 22px;--sd-row-height: 28px;--sd-shadow-1: 0 1px 2px rgba(0, 0, 0, .3);--sd-shadow-2: 0 4px 12px rgba(0, 0, 0, .35);--sd-shadow-3: 0 12px 32px rgba(0, 0, 0, .45);--sd-focus-ring: 0 0 0 2px rgba(253, 126, 20, .45)}.modal-full{max-width:unset!important;margin:20px!important}.modal-full .modal-content{max-height:calc(100vh - 40px)}.modal-full .modal-content>*{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}.modal-full .modal-body{flex:1 1 auto;overflow-y:auto;min-height:0}.modal .modal-full *{transition:none!important}.modal{z-index:10001}.modal .card{background-color:#191c21;border:1px solid #2b3038;border-radius:10px}.modal .card.panel{overflow:hidden}.modal .card-header{display:flex;align-items:center;gap:8px;min-height:30px;margin-bottom:0;padding:0 12px;background-color:#1f232a;border-bottom:1px solid #2b3038;border-radius:9px 9px 0 0;font-size:.75rem;font-weight:600;color:#dfe3e8;line-height:1.4}.modal .card-body{overflow:auto;padding:12px}.modal .card-footer{padding:8px 12px;background-color:transparent;border-top:1px solid #2b3038}.modal .card-header .btn,.modal .card-header a.btn,.modal .step-list .btn,.modal .step-list a.btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;min-height:0;padding:0!important;border:none;border-radius:4px;background-color:transparent;color:#99a1ac;font-size:.8125rem;transition:color .12s ease,background-color .12s ease}.modal .card-header .btn:hover,.modal .card-header .btn:focus,.modal .card-header a.btn:hover,.modal .card-header a.btn:focus,.modal .step-list .btn:hover,.modal .step-list .btn:focus,.modal .step-list a.btn:hover,.modal .step-list a.btn:focus{color:#dfe3e8;background-color:#323841;box-shadow:none}.modal .card-header .btn.text-primary,.modal .card-header a.btn.text-primary,.modal .step-list .btn.text-primary,.modal .step-list a.btn.text-primary{color:#ffa45c!important}.modal .card-header input,.modal .card-header select{font-weight:400}.modal .card-header .pull-right,.modal .card-header .ml-auto{margin-left:auto}.modal .btn{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;min-height:28px;padding:0 12px;border-radius:6px;font-size:.8125rem;font-weight:500;line-height:1.4;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.modal .btn-sm{min-height:22px;padding:0 8px;font-size:.75rem;border-radius:4px}.modal .btn-primary{background-color:#fd7e14;border-color:#fd7e14;color:#fff}.modal .btn-primary:hover,.modal .btn-primary:focus{background-color:#ff9440;border-color:#ff9440;color:#fff}.modal .btn-primary:active,.modal .btn-primary:not(:disabled):not(.disabled):active{background-color:#e56f0b;border-color:#e56f0b}.modal .btn-secondary{background-color:#272c34;border-color:#3b424d;color:#dfe3e8}.modal .btn-secondary:hover,.modal .btn-secondary:focus{background-color:#323841;border-color:#3b424d;color:#dfe3e8}.modal .btn-secondary:active,.modal .btn-secondary:not(:disabled):not(.disabled):active{background-color:#323841;border-color:#3b424d}.modal .btn-link{color:#dfe3e8}.modal .btn-link:hover{color:#ffa45c}.modal .btn-group>.btn{border-radius:0}.modal .btn-group>.btn:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.modal .btn-group>.btn:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.modal .btn-group>.btn+.btn{border-left:1px solid rgba(0,0,0,.25)}.modal input,.modal select,.modal textarea,.modal .form-control,.modal .custom-select{height:28px;padding:0 8px;background-color:#1f232a;border:1px solid #3b424d;border-radius:6px;color:#dfe3e8;font-size:.8125rem;line-height:1.4;transition:border-color .12s ease,background-color .12s ease}.modal input:hover:not(:disabled):not([readonly]),.modal select:hover:not(:disabled):not([readonly]),.modal textarea:hover:not(:disabled):not([readonly]),.modal .form-control:hover:not(:disabled):not([readonly]),.modal .custom-select:hover:not(:disabled):not([readonly]){border-color:#6b7280}.modal input:focus,.modal select:focus,.modal textarea:focus,.modal .form-control:focus,.modal .custom-select:focus{background-color:#1f232a;border-color:#fd7e14;color:#dfe3e8;box-shadow:none;outline:none}.modal input:focus-visible,.modal select:focus-visible,.modal textarea:focus-visible,.modal .form-control:focus-visible,.modal .custom-select:focus-visible{box-shadow:0 0 0 2px #fd7e1473}.modal input:disabled,.modal input[readonly],.modal select:disabled,.modal select[readonly],.modal textarea:disabled,.modal textarea[readonly],.modal .form-control:disabled,.modal .form-control[readonly],.modal .custom-select:disabled,.modal .custom-select[readonly]{background-color:#191c21;border-color:#2b3038;color:#6b7280;cursor:not-allowed}.modal input::placeholder,.modal select::placeholder,.modal textarea::placeholder,.modal .form-control::placeholder,.modal .custom-select::placeholder{color:#6b7280}.modal textarea,.modal textarea.form-control{height:auto;padding:8px;line-height:1.5}.modal select,.modal .custom-select{cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:24px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2399a1ac' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 8px center;background-size:14px 14px}.modal select option,.modal .custom-select option{background-color:#1f232a;color:#dfe3e8}.modal .input-group-text{height:28px;padding:0 8px;background-color:#272c34;border:1px solid #3b424d;border-radius:6px;color:#99a1ac;font-size:.8125rem}.modal .sd-value-input{width:64px;min-width:0;max-width:100%;text-align:center;font-family:SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.75rem;padding:0 4px}.modal .sd-value-input-hex{width:72px}.modal .sd-value-input-time{width:88px}.modal .sd-time-field{flex:0 0 auto;width:120px}.modal label{margin-bottom:0;color:#99a1ac;font-size:.8125rem}.modal .col-form-label{padding-top:0;padding-bottom:0;line-height:28px}.modal .form-group{margin-bottom:12px}.modal .form-check{position:relative;display:block;min-height:18px;padding-left:24px;margin-bottom:0}.modal .form-check-label{color:#dfe3e8;font-size:.8125rem;line-height:1.4;cursor:pointer}.modal input[type=checkbox],.modal input[type=radio]{appearance:none;-webkit-appearance:none;-moz-appearance:none;flex:0 0 auto;width:16px;height:16px;min-height:0;padding:0;margin:0;background-color:#272c34;background-repeat:no-repeat;background-position:center;background-size:100% 100%;border:1px solid #3b424d;border-radius:4px;cursor:pointer;vertical-align:middle;transition:background-color .12s ease,border-color .12s ease}.modal input[type=checkbox]:hover:not(:disabled),.modal input[type=radio]:hover:not(:disabled){border-color:#6b7280;background-color:#323841}.modal input[type=checkbox]:checked,.modal input[type=radio]:checked{background-color:#fd7e14;border-color:#fd7e14}.modal input[type=checkbox]:checked:hover,.modal input[type=radio]:checked:hover{background-color:#ff9440;border-color:#ff9440}.modal input[type=checkbox]:disabled,.modal input[type=radio]:disabled{opacity:.45;cursor:not-allowed}.modal input[type=checkbox]:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M5.5 10.5l3 3 6-6'/%3E%3C/svg%3E\")}.modal input[type=checkbox]:indeterminate{background-color:#fd7e14;border-color:#fd7e14;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath stroke='%23fff' stroke-width='2.6' stroke-linecap='round' d='M6 10h8'/%3E%3C/svg%3E\")}.modal input[type=radio]{border-radius:50%}.modal input[type=radio]:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%23fff'/%3E%3C/svg%3E\")}.modal .form-check-input{position:absolute;top:50%;left:0;margin:0;transform:translateY(-50%)}.modal span.bigcheck-target{font-family:FontAwesome;color:#99a1ac}.modal input[type=checkbox].bigcheck{position:absolute;left:-999em}.modal input[type=checkbox].bigcheck+span.bigcheck-target:after{content:\"\\f096\"}.modal input[type=checkbox].bigcheck:checked+span.bigcheck-target{color:#fd7e14}.modal input[type=checkbox].bigcheck:checked+span.bigcheck-target:after{content:\"\\f046\"}.modal .list-group-item{display:flex;align-items:center;min-height:28px;padding:.3125rem 12px;background-color:transparent;border:none;border-bottom:1px solid #2b3038;border-radius:0;color:#dfe3e8;white-space:nowrap;transition:background-color .12s ease}.modal .list-group-item:last-child{border-bottom:none}.modal .list-group-item:hover{background-color:#ffffff0a}.modal .list-group-item>.row{width:100%;margin-left:0;margin-right:0}.modal .list-group-item .row>div{min-width:0;overflow:hidden;text-overflow:ellipsis}.modal .list-group-item.active{background-color:#fd7e1447!important;border-color:#2b3038!important;color:#ffd0a8!important}.modal .list-group-item.active:hover{background-color:#fd7e1457!important}.modal .list-group-item.focused{outline:1px solid #fd7e14;outline-offset:-1px}.modal .inactive-list-item{opacity:.4}.modal .list-sort-handle{padding-left:0;padding-right:8px;color:#6b7280}.modal .list-sort-handle:hover{color:#99a1ac}.modal .nav a,.modal .panel-title .btn-link{color:#dfe3e8}.modal .nav-tabs{border-bottom:1px solid #2b3038}.modal .nav-tabs .nav-link{border:none;border-bottom:2px solid transparent;border-radius:0;color:#99a1ac;padding:8px 12px}.modal .nav-tabs .nav-link:hover{color:#dfe3e8;border-bottom-color:#3b424d}.modal .nav-tabs .nav-link.active{background-color:transparent;color:#dfe3e8;border-bottom-color:#fd7e14}.modal .slider{cursor:pointer}.modal .slider-track,.modal .slider-track-low,.modal .slider-track-high,.modal .slider-selection{border-radius:3px!important;background-image:none!important;box-shadow:none!important}.modal .slider-track{background-color:#323841!important}.modal .slider-track-low,.modal .slider-track-high{background-color:transparent!important}.modal .slider-selection{background-color:#fd7e14!important}.modal .slider-vertical .slider-selection{background-color:transparent!important}.modal .slider-vertical .slider-track-high{background-color:#fd7e14!important}.modal .slider-handle{width:14px!important;height:14px!important;background-color:#eef1f5!important;background-image:none!important;border:none;box-shadow:0 1px 2px #0000004d,0 0 0 1px #00000059!important;transition:transform .1s ease,background-color .12s ease}.modal .slider-handle:hover{background-color:#fff!important;transform:scale(1.12)}.modal .slider.slider-horizontal{height:20px}.modal .slider.slider-horizontal .slider-track{height:4px!important;top:50%!important;margin-top:-2px!important}.modal .slider.slider-horizontal .slider-handle{top:50%!important;margin-top:-7px!important;margin-left:-7px!important}.modal .slider.slider-vertical .slider-track{width:4px!important;left:50%!important;margin-left:-2px!important}.modal .slider.slider-vertical .slider-handle{left:50%!important;margin-left:-7px!important;margin-top:-7px!important}.modal .sd-slider-fill{flex:1 1 0;min-width:0}.modal .sd-slider-fill .slider.slider-horizontal{width:100%}.modal .slider-input,.modal .slider-input-readonly{width:64px;margin-left:8px;text-align:center;font-family:SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.75rem;padding:0 4px}.modal .slider-input-readonly{color:#6b7280;border-color:#2b3038}.modal .alert{padding:12px 16px;border-radius:6px;border:1px solid #3b424d;background-color:#1f232a;color:#dfe3e8;font-size:.8125rem}.modal .alert-primary{border-color:#fd7e1466;background-color:#fd7e1429;color:#dfe3e8}.modal .alert-success{border-color:#2eb87266;background-color:#2eb87224;color:#dfe3e8}.modal .alert-danger{border-color:#e5544b66;background-color:#e5544b24;color:#dfe3e8}.modal .progress{height:6px;background-color:#272c34;border-radius:3px}.modal .progress-bar{background-color:#fd7e14}.modal .table{color:#dfe3e8}.modal .table th,.modal .table td{border-top-color:#2b3038;padding:8px 12px}.modal .table thead th{border-bottom-color:#2b3038;color:#99a1ac;font-size:.75rem;font-weight:600}.modal-backdrop{background-color:#05060a}.modal-backdrop.show{opacity:.65}.modal-content{background-color:#191c21;border:1px solid #2b3038;border-radius:10px;box-shadow:0 12px 32px #00000073;overflow:hidden}.modal-header{align-items:center;padding:12px 20px;background-color:#1f232a;border-bottom:1px solid #2b3038}.modal-title{font-size:.9375rem;font-weight:600;color:#dfe3e8;line-height:1.4}.modal-body{padding:20px}.modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;background-color:transparent;border-top:1px solid #2b3038}.modal-footer>*{margin:0}.modal .card-modal .card{background-color:transparent;border:none;border-radius:0;box-shadow:none}.modal .card-modal .card-header{padding:12px 20px;font-size:.9375rem}.modal .card-modal .card-body{padding:20px}.modal .card-modal .card-footer{padding:12px 20px}.modal .close,.card-modal .close{padding:0;margin:0 0 0 auto;width:26px;height:26px;font-size:1.25rem;font-weight:400;line-height:1;color:#99a1ac;border-radius:4px;opacity:1;transition:color .12s ease,background-color .12s ease}.modal .close:hover,.card-modal .close:hover{color:#dfe3e8;background-color:#272c34;opacity:1}.dropdown-menu{z-index:100000;padding:4px;background-color:#1f232a;border:1px solid #2b3038;border-radius:6px;box-shadow:0 4px 12px #00000059;font-size:.8125rem}.dropdown-item{padding:.3125rem 8px;border-radius:4px;color:#dfe3e8}.dropdown-item:hover,.dropdown-item:focus{background-color:#272c34;color:#dfe3e8}.dropdown-item.active,.dropdown-item:active{background-color:#fd7e14;color:#fff}.dropdown-item .fa{color:#99a1ac;margin-right:4px}.dropdown-item:hover .fa{color:#dfe3e8}.tab-rail{position:relative}.edit-target{position:absolute;top:191px;bottom:12px;left:50%;writing-mode:vertical-rl;transform:translate(-50%) rotate(180deg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#99a1ac;font-size:.75rem;letter-spacing:.02em;-webkit-user-select:none;user-select:none;pointer-events:none}.edit-target .fa{display:inline-block;writing-mode:horizontal-tb;transform:rotate(180deg);margin-bottom:4px;font-size:.8125rem}.dropdown-divider{border-top-color:#2b3038}.popover{background-color:#272c34;border:1px solid #3b424d;border-radius:6px;box-shadow:0 4px 12px #00000059;font-size:.75rem;pointer-events:none}.popover-body{padding:.3125rem 8px;color:#dfe3e8}.popover-header{background-color:#323841;border-bottom-color:#3b424d;color:#dfe3e8}.bs-popover-right>.arrow:after,.bs-popover-auto[x-placement^=right]>.arrow:after{border-right-color:#272c34}.bs-popover-left>.arrow:after,.bs-popover-auto[x-placement^=left]>.arrow:after{border-left-color:#272c34}.bs-popover-bottom>.arrow:after,.bs-popover-auto[x-placement^=bottom]>.arrow:after{border-bottom-color:#272c34}.bs-popover-top>.arrow:after,.bs-popover-auto[x-placement^=top]>.arrow:after{border-top-color:#272c34}.bs-popover-right>.arrow:before,.bs-popover-auto[x-placement^=right]>.arrow:before{border-right-color:#3b424d}.bs-popover-left>.arrow:before,.bs-popover-auto[x-placement^=left]>.arrow:before{border-left-color:#3b424d}.bs-popover-bottom>.arrow:before,.bs-popover-auto[x-placement^=bottom]>.arrow:before{border-bottom-color:#3b424d}.bs-popover-top>.arrow:before,.bs-popover-auto[x-placement^=top]>.arrow:before{border-top-color:#3b424d}.hardware-promo-hint{display:flex;align-items:baseline;gap:8px;margin:0;padding:8px 12px;border:1px solid #2b3038;border-left:2px solid #fd7e14;border-radius:4px;background-color:#fd7e1429;color:#99a1ac;font-size:.75rem;line-height:1.5}.hardware-promo-hint .fa-lightbulb-o{color:#ffa45c}.hardware-promo-hint a{color:#ffa45c;white-space:nowrap}#designer{font-size:.8125rem;color:#dfe3e8;background-color:#131519}#designer .card{background-color:#191c21;border:1px solid #2b3038;border-radius:10px}#designer .card.panel{overflow:hidden}#designer .card-header{display:flex;align-items:center;gap:8px;min-height:30px;margin-bottom:0;padding:0 12px;background-color:#1f232a;border-bottom:1px solid #2b3038;border-radius:9px 9px 0 0;font-size:.75rem;font-weight:600;color:#dfe3e8;line-height:1.4}#designer .card-body{overflow:auto;padding:12px}#designer .card-footer{padding:8px 12px;background-color:transparent;border-top:1px solid #2b3038}#designer .card-header .btn,#designer .card-header a.btn,#designer .step-list .btn,#designer .step-list a.btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;min-height:0;padding:0!important;border:none;border-radius:4px;background-color:transparent;color:#99a1ac;font-size:.8125rem;transition:color .12s ease,background-color .12s ease}#designer .card-header .btn:hover,#designer .card-header .btn:focus,#designer .card-header a.btn:hover,#designer .card-header a.btn:focus,#designer .step-list .btn:hover,#designer .step-list .btn:focus,#designer .step-list a.btn:hover,#designer .step-list a.btn:focus{color:#dfe3e8;background-color:#323841;box-shadow:none}#designer .card-header .btn.text-primary,#designer .card-header a.btn.text-primary,#designer .step-list .btn.text-primary,#designer .step-list a.btn.text-primary{color:#ffa45c!important}#designer .card-header input,#designer .card-header select{font-weight:400}#designer .card-header .pull-right,#designer .card-header .ml-auto{margin-left:auto}#designer .btn{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;min-height:28px;padding:0 12px;border-radius:6px;font-size:.8125rem;font-weight:500;line-height:1.4;transition:background-color .12s ease,border-color .12s ease,color .12s ease}#designer .btn-sm{min-height:22px;padding:0 8px;font-size:.75rem;border-radius:4px}#designer .btn-primary{background-color:#fd7e14;border-color:#fd7e14;color:#fff}#designer .btn-primary:hover,#designer .btn-primary:focus{background-color:#ff9440;border-color:#ff9440;color:#fff}#designer .btn-primary:active,#designer .btn-primary:not(:disabled):not(.disabled):active{background-color:#e56f0b;border-color:#e56f0b}#designer .btn-secondary{background-color:#272c34;border-color:#3b424d;color:#dfe3e8}#designer .btn-secondary:hover,#designer .btn-secondary:focus{background-color:#323841;border-color:#3b424d;color:#dfe3e8}#designer .btn-secondary:active,#designer .btn-secondary:not(:disabled):not(.disabled):active{background-color:#323841;border-color:#3b424d}#designer .btn-link{color:#dfe3e8}#designer .btn-link:hover{color:#ffa45c}#designer .btn-group>.btn{border-radius:0}#designer .btn-group>.btn:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}#designer .btn-group>.btn:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}#designer .btn-group>.btn+.btn{border-left:1px solid rgba(0,0,0,.25)}#designer input,#designer select,#designer textarea,#designer .form-control,#designer .custom-select{height:28px;padding:0 8px;background-color:#1f232a;border:1px solid #3b424d;border-radius:6px;color:#dfe3e8;font-size:.8125rem;line-height:1.4;transition:border-color .12s ease,background-color .12s ease}#designer input:hover:not(:disabled):not([readonly]),#designer select:hover:not(:disabled):not([readonly]),#designer textarea:hover:not(:disabled):not([readonly]),#designer .form-control:hover:not(:disabled):not([readonly]),#designer .custom-select:hover:not(:disabled):not([readonly]){border-color:#6b7280}#designer input:focus,#designer select:focus,#designer textarea:focus,#designer .form-control:focus,#designer .custom-select:focus{background-color:#1f232a;border-color:#fd7e14;color:#dfe3e8;box-shadow:none;outline:none}#designer input:focus-visible,#designer select:focus-visible,#designer textarea:focus-visible,#designer .form-control:focus-visible,#designer .custom-select:focus-visible{box-shadow:0 0 0 2px #fd7e1473}#designer input:disabled,#designer input[readonly],#designer select:disabled,#designer select[readonly],#designer textarea:disabled,#designer textarea[readonly],#designer .form-control:disabled,#designer .form-control[readonly],#designer .custom-select:disabled,#designer .custom-select[readonly]{background-color:#191c21;border-color:#2b3038;color:#6b7280;cursor:not-allowed}#designer input::placeholder,#designer select::placeholder,#designer textarea::placeholder,#designer .form-control::placeholder,#designer .custom-select::placeholder{color:#6b7280}#designer textarea,#designer textarea.form-control{height:auto;padding:8px;line-height:1.5}#designer select,#designer .custom-select{cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:24px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2399a1ac' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 8px center;background-size:14px 14px}#designer select option,#designer .custom-select option{background-color:#1f232a;color:#dfe3e8}#designer .input-group-text{height:28px;padding:0 8px;background-color:#272c34;border:1px solid #3b424d;border-radius:6px;color:#99a1ac;font-size:.8125rem}#designer .sd-value-input{width:64px;min-width:0;max-width:100%;text-align:center;font-family:SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.75rem;padding:0 4px}#designer .sd-value-input-hex{width:72px}#designer .sd-value-input-time{width:88px}#designer .sd-time-field{flex:0 0 auto;width:120px}#designer label{margin-bottom:0;color:#99a1ac;font-size:.8125rem}#designer .col-form-label{padding-top:0;padding-bottom:0;line-height:28px}#designer .form-group{margin-bottom:12px}#designer .form-check{position:relative;display:block;min-height:18px;padding-left:24px;margin-bottom:0}#designer .form-check-label{color:#dfe3e8;font-size:.8125rem;line-height:1.4;cursor:pointer}#designer input[type=checkbox],#designer input[type=radio]{appearance:none;-webkit-appearance:none;-moz-appearance:none;flex:0 0 auto;width:16px;height:16px;min-height:0;padding:0;margin:0;background-color:#272c34;background-repeat:no-repeat;background-position:center;background-size:100% 100%;border:1px solid #3b424d;border-radius:4px;cursor:pointer;vertical-align:middle;transition:background-color .12s ease,border-color .12s ease}#designer input[type=checkbox]:hover:not(:disabled),#designer input[type=radio]:hover:not(:disabled){border-color:#6b7280;background-color:#323841}#designer input[type=checkbox]:checked,#designer input[type=radio]:checked{background-color:#fd7e14;border-color:#fd7e14}#designer input[type=checkbox]:checked:hover,#designer input[type=radio]:checked:hover{background-color:#ff9440;border-color:#ff9440}#designer input[type=checkbox]:disabled,#designer input[type=radio]:disabled{opacity:.45;cursor:not-allowed}#designer input[type=checkbox]:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M5.5 10.5l3 3 6-6'/%3E%3C/svg%3E\")}#designer input[type=checkbox]:indeterminate{background-color:#fd7e14;border-color:#fd7e14;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath stroke='%23fff' stroke-width='2.6' stroke-linecap='round' d='M6 10h8'/%3E%3C/svg%3E\")}#designer input[type=radio]{border-radius:50%}#designer input[type=radio]:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%23fff'/%3E%3C/svg%3E\")}#designer .form-check-input{position:absolute;top:50%;left:0;margin:0;transform:translateY(-50%)}#designer span.bigcheck-target{font-family:FontAwesome;color:#99a1ac}#designer input[type=checkbox].bigcheck{position:absolute;left:-999em}#designer input[type=checkbox].bigcheck+span.bigcheck-target:after{content:\"\\f096\"}#designer input[type=checkbox].bigcheck:checked+span.bigcheck-target{color:#fd7e14}#designer input[type=checkbox].bigcheck:checked+span.bigcheck-target:after{content:\"\\f046\"}#designer .list-group-item{display:flex;align-items:center;min-height:28px;padding:.3125rem 12px;background-color:transparent;border:none;border-bottom:1px solid #2b3038;border-radius:0;color:#dfe3e8;white-space:nowrap;transition:background-color .12s ease}#designer .list-group-item:last-child{border-bottom:none}#designer .list-group-item:hover{background-color:#ffffff0a}#designer .list-group-item>.row{width:100%;margin-left:0;margin-right:0}#designer .list-group-item .row>div{min-width:0;overflow:hidden;text-overflow:ellipsis}#designer .list-group-item.active{background-color:#fd7e1447!important;border-color:#2b3038!important;color:#ffd0a8!important}#designer .list-group-item.active:hover{background-color:#fd7e1457!important}#designer .list-group-item.focused{outline:1px solid #fd7e14;outline-offset:-1px}#designer .inactive-list-item{opacity:.4}#designer .list-sort-handle{padding-left:0;padding-right:8px;color:#6b7280}#designer .list-sort-handle:hover{color:#99a1ac}#designer .nav a,#designer .panel-title .btn-link{color:#dfe3e8}#designer .nav-tabs{border-bottom:1px solid #2b3038}#designer .nav-tabs .nav-link{border:none;border-bottom:2px solid transparent;border-radius:0;color:#99a1ac;padding:8px 12px}#designer .nav-tabs .nav-link:hover{color:#dfe3e8;border-bottom-color:#3b424d}#designer .nav-tabs .nav-link.active{background-color:transparent;color:#dfe3e8;border-bottom-color:#fd7e14}#designer .slider{cursor:pointer}#designer .slider-track,#designer .slider-track-low,#designer .slider-track-high,#designer .slider-selection{border-radius:3px!important;background-image:none!important;box-shadow:none!important}#designer .slider-track{background-color:#323841!important}#designer .slider-track-low,#designer .slider-track-high{background-color:transparent!important}#designer .slider-selection{background-color:#fd7e14!important}#designer .slider-vertical .slider-selection{background-color:transparent!important}#designer .slider-vertical .slider-track-high{background-color:#fd7e14!important}#designer .slider-handle{width:14px!important;height:14px!important;background-color:#eef1f5!important;background-image:none!important;border:none;box-shadow:0 1px 2px #0000004d,0 0 0 1px #00000059!important;transition:transform .1s ease,background-color .12s ease}#designer .slider-handle:hover{background-color:#fff!important;transform:scale(1.12)}#designer .slider.slider-horizontal{height:20px}#designer .slider.slider-horizontal .slider-track{height:4px!important;top:50%!important;margin-top:-2px!important}#designer .slider.slider-horizontal .slider-handle{top:50%!important;margin-top:-7px!important;margin-left:-7px!important}#designer .slider.slider-vertical .slider-track{width:4px!important;left:50%!important;margin-left:-2px!important}#designer .slider.slider-vertical .slider-handle{left:50%!important;margin-left:-7px!important;margin-top:-7px!important}#designer .sd-slider-fill{flex:1 1 0;min-width:0}#designer .sd-slider-fill .slider.slider-horizontal{width:100%}#designer .slider-input,#designer .slider-input-readonly{width:64px;margin-left:8px;text-align:center;font-family:SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.75rem;padding:0 4px}#designer .slider-input-readonly{color:#6b7280;border-color:#2b3038}#designer .alert{padding:12px 16px;border-radius:6px;border:1px solid #3b424d;background-color:#1f232a;color:#dfe3e8;font-size:.8125rem}#designer .alert-primary{border-color:#fd7e1466;background-color:#fd7e1429;color:#dfe3e8}#designer .alert-success{border-color:#2eb87266;background-color:#2eb87224;color:#dfe3e8}#designer .alert-danger{border-color:#e5544b66;background-color:#e5544b24;color:#dfe3e8}#designer .progress{height:6px;background-color:#272c34;border-radius:3px}#designer .progress-bar{background-color:#fd7e14}#designer .table{color:#dfe3e8}#designer .table th,#designer .table td{border-top-color:#2b3038;padding:8px 12px}#designer .table thead th{border-bottom-color:#2b3038;color:#99a1ac;font-size:.75rem;font-weight:600}#designer .row{flex-wrap:unset}#designer .capability-container{padding:0;height:0}#designer .gutter{background-color:transparent;position:relative}#designer .gutter:after{content:\"\";position:absolute;background-color:transparent;border-radius:2px;transition:background-color .15s ease}#designer .gutter:hover:after{background-color:#3b424d}#designer .gutter.gutter-horizontal{cursor:ew-resize}#designer .gutter.gutter-horizontal:after{top:25%;bottom:25%;left:50%;width:2px;transform:translate(-50%)}#designer .gutter.gutter-vertical{cursor:ns-resize}#designer .gutter.gutter-vertical:after{left:25%;right:25%;top:50%;height:2px;transform:translateY(-50%)}#designer .split-horizontal,#designer .gutter.gutter-horizontal{float:left}#designer .split-vertical,#designer .gutter.gutter-horizontal{height:100%}#designer .split{overflow-y:hidden;overflow-x:hidden}#designer .panel{background-color:transparent}#designer .panel-body{background-color:#1f232a}#designer #masterDimmer .card-body{padding-left:8px;padding-right:8px}#designer .navbar{height:34px;padding:0 8px;background-color:#191c21!important;border-bottom:1px solid #2b3038}#designer .navbar-nav{flex-direction:row!important;align-items:center}#designer .navbar-expand-lg{flex-flow:row nowrap!important;justify-content:flex-start!important}#designer .nav-link{cursor:pointer}#designer .navbar .nav-link{display:flex;align-items:center;gap:.375rem;height:24px;padding:0 8px!important;border-radius:4px;color:#99a1ac;font-size:.8125rem;transition:color .12s ease,background-color .12s ease}#designer .navbar .nav-link:hover,#designer .navbar .nav-link:focus{color:#dfe3e8;background-color:#272c34}#designer .navbar .nav-link.text-primary{color:#ffa45c!important}#designer .navbar .nav-link.text-primary:hover{color:#ff9440!important}#designer .navbar .nav-item.show>.nav-link{color:#dfe3e8;background-color:#272c34}#designer .navbar-nav .dropdown-menu{position:absolute;float:none}#designer .navbar .dropdown-toggle:after{margin-left:.125rem;opacity:.6}#designer .navbar .project-name{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#dfe3e8}#designer .capability{overflow:visible}#designer .capability-deactivated{opacity:.4}#designer .nav-pills{background-color:#191c21;border:1px solid #2b3038;border-radius:10px;padding:4px;gap:2px}#designer .nav-pills .nav-link{display:flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0!important;border-radius:6px;color:#99a1ac;transition:color .12s ease,background-color .12s ease}#designer .nav-pills .nav-link:hover{color:#dfe3e8;background-color:#272c34}#designer .nav-pills .nav-link.active,#designer .nav-pills .show>.nav-link{background-color:#fd7e1447;color:#ffa45c}#designer .nav-pills.nav-pills-attached{border-radius:10px 0 0 10px}#designer .nav-pills .nav-link.nav-link-divider{position:relative;margin-top:8px}#designer .nav-pills .nav-link.nav-link-divider:before{content:\"\";position:absolute;top:-5px;left:3px;right:3px;height:1px;background-color:#2b3038}#designer #preview .card{overflow:hidden}#designer #capabilities>.row{margin-left:0;margin-right:0}#designer #capabilities>.row>.col{min-width:0}#designer #capabilities .tab-pane>*>.card{border-top-left-radius:0;border-bottom-left-radius:0}#designer .card-header .panel-title{flex:1 1 auto;min-width:0}#designer .accordion-toggle .btn,#designer .accordion-toggle button{display:flex;align-items:center;justify-content:flex-start;width:100%;height:auto;min-height:0;padding:0;border:none;background-color:transparent;color:#dfe3e8;text-align:left}#designer .accordion-toggle .btn:hover,#designer .accordion-toggle .btn:focus,#designer .accordion-toggle .btn:active,#designer .accordion-toggle button:hover,#designer .accordion-toggle button:focus,#designer .accordion-toggle button:active{background-color:transparent;box-shadow:none;color:#dfe3e8}#designer accordion-group{display:block}#designer accordion-group .card{margin:0;border:none;border-radius:0;background-color:transparent;overflow:visible}#designer accordion-group .card-header{border-radius:0;cursor:pointer;transition:background-color .12s ease}#designer accordion-group .card-header:hover{background-color:#272c34}#designer accordion-group+accordion-group .card-header{border-top:1px solid #2b3038}#designer accordion-group:first-of-type .card-header{border-top-left-radius:10px;border-top-right-radius:10px}#designer accordion-group:last-of-type:not(.panel-open) .card-header{border-bottom-left-radius:10px;border-bottom-right-radius:10px}#designer .iro__wheel,#designer .iro__slider{cursor:pointer}#designer .pan-tilt-grid path{fill:none;stroke:#99a1ac;stroke-width:10px}#designer .pan-tilt-grid circle{fill:#fd7e14;stroke:#191c21;stroke-width:3px}#designer .wavesurfer-region{z-index:5!important;border-radius:4px}#designer .wavesurfer-region[data-region-selected=true]{z-index:6!important}#designer .wavesurfer-region[data-region-preset=true]{height:50%!important;top:50%!important}#designer .wavesurfer-region[data-region-name]:after{content:attr(data-region-name);margin-left:20px;font-size:.75rem}#designer .step-marker{position:absolute;top:0;bottom:0;pointer-events:none}#designer .step-marker-tick{width:1px;background-color:#ffffff80}#designer .step-marker-tick:after{content:attr(data-step-name);position:absolute;top:2px;left:3px;color:#99a1ac;font-size:.7rem;white-space:nowrap}#designer .step-marker-tick[data-step-selected=true]{width:2px;background-color:#fd7e14}#designer .step-marker-tick[data-step-selected=true]:after{color:#ffa45c}#designer .step-marker-transition{background:linear-gradient(to right,#ffffff38,#fff0)}#designer .step-marker-transition[data-step-selected=true]{background:linear-gradient(to right,#fd7e1473,#fd7e1400)}#designer .wavesurfer-handle{width:10px!important;max-width:10px!important;border:1px solid rgba(255,255,255,.35);background:#00000026;box-sizing:border-box;opacity:0;cursor:unset!important}#designer .wavesurfer-handle-end{margin-left:-10px}#designer .wavesurfer-region[data-region-selectable=true] .wavesurfer-handle{opacity:1;cursor:col-resize!important}#designer .wavesurfer-handle:before,#designer .wavesurfer-handle:after{content:\"\";display:block;position:absolute;z-index:1;border-top:1px solid rgba(255,255,255,.7);border-bottom:1px solid rgba(255,255,255,.7);height:4px;left:5%;right:5%;top:50%;transform:translateY(-50%)}#designer .wavesurfer-handle:before{margin-top:-3px}#designer timeline{overflow:scroll!important;overflow:-moz-scrollbars-none;-ms-overflow-style:none;scrollbar-width:none;cursor:s-resize}#designer timeline::-webkit-scrollbar{height:0!important}#designer cursor{top:-20px!important}#designer wave{border-right-color:#fd7e14!important;cursor:col-resize}#designer wave canvas{opacity:.35}\n"] }]
|
|
13843
|
+
args: [{ selector: 'lib-designer', encapsulation: ViewEncapsulation.None, standalone: false, template: "<!-- Wrap the whole component inside a div to encapsulate the CSS -->\n\n<!-- 100 % height minus the menu bar above and the gutter size of 13 px -->\n<!-- <div style=\"height: calc(100% - 33px)\"> -->\n<div id=\"designer\" [ngStyle]=\"{ height: 'calc(100% - ' + totalMenuHeightPx + 'px)' }\">\n <!-- Navigation -->\n <nav class=\"navbar navbar-expand-lg navbar-light bg-light\">\n <!-- Menu buttons -->\n <ul class=\"navbar-nav mr-auto\">\n <li class=\"nav-item dropdown\">\n <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"fileDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n {{ 'designer.navigation.project' | translate }}\n </a>\n <div class=\"dropdown-menu\" aria-labelledby=\"fileDropdown\">\n <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectNew(); (false)\"\n ><i class=\"fa fa-fw fa-file-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-new' | translate }}</a\n >\n <a class=\"dropdown-item\" href=\"#\" (click)=\"projectOpen(); (false)\"\n ><i class=\"fa fa-fw fa-folder-open-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-open' | translate }}</a\n >\n <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectSave(); (false)\"\n ><i class=\"fa fa-fw fa-floppy-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-save' | translate }}</a\n >\n <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectSaveAs(); (false)\"\n ><i class=\"fa fa-fw fa-floppy-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-save-as' | translate }}</a\n >\n <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectImport(); (false)\"\n ><i class=\"fa fa-fw fa-download\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-import' | translate }}</a\n >\n <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectExport(); (false)\"\n ><i class=\"fa fa-fw fa-external-link\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-export' | translate }}</a\n >\n </div>\n </li>\n <li class=\"nav-item dropdown d-none d-md-block\">\n <!-- collect what has been changed so far before showing whether there is anything to undo -->\n <a\n class=\"nav-link dropdown-toggle\"\n href=\"#\"\n id=\"editDropdown\"\n data-toggle=\"dropdown\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\"\n (click)=\"undoService.captureChanges()\"\n >\n {{ 'designer.navigation.edit' | translate }}\n </a>\n <div class=\"dropdown-menu\" aria-labelledby=\"editDropdown\">\n <a class=\"dropdown-item\" [class.disabled]=\"!undoService.canUndo\" href=\"#\" (click)=\"undo(); (false)\"\n ><i class=\"fa fa-fw fa-undo\" aria-hidden=\"true\"></i> {{ 'designer.navigation.undo' | translate }}</a\n >\n <a class=\"dropdown-item\" [class.disabled]=\"!undoService.canRedo\" href=\"#\" (click)=\"redo(); (false)\"\n ><i class=\"fa fa-fw fa-repeat\" aria-hidden=\"true\"></i> {{ 'designer.navigation.redo' | translate }}</a\n >\n </div>\n </li>\n <li class=\"nav-item dropdown d-none d-md-block\">\n <a\n class=\"nav-link dropdown-toggle\"\n href=\"#\"\n id=\"settingsDropdown\"\n data-toggle=\"dropdown\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\"\n >\n {{ 'designer.navigation.settings' | translate }}\n </a>\n <div class=\"dropdown-menu\" aria-labelledby=\"settingsDropdown\">\n <a class=\"dropdown-item\" href=\"#\" (click)=\"openFixturePool(); (false)\">{{ 'designer.navigation.fixture-pool' | translate }}</a>\n <!-- <a class=\"dropdown-item\" href=\"#\">{{ 'designer.navigation.stage' | translate }}</a> -->\n </div>\n </li>\n <li class=\"nav-item dropdown d-none d-md-block\">\n <a\n class=\"nav-link dropdown-toggle\"\n href=\"#\"\n id=\"settingsDropdown\"\n data-toggle=\"dropdown\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\"\n >\n {{ 'designer.navigation.help' | translate }}\n </a>\n <div class=\"dropdown-menu\" aria-labelledby=\"settingsDropdown\">\n <a class=\"dropdown-item\" href=\"#\" (click)=\"introService.reset(); (false)\">{{ 'designer.navigation.reset-intro' | translate }}</a>\n <a class=\"dropdown-item\" href=\"https://rocketshow.net/support/\" target=\"_blank\">{{\n 'designer.navigation.support' | translate\n }}</a>\n </div>\n </li>\n </ul>\n\n <!-- Project name shown in the middle, editable inline -->\n @if (projectService.project) {\n <lib-app-inline-edit\n class=\"project-name d-none d-md-inline-flex\"\n [value]=\"projectService.project.name\"\n [placeholder]=\"'designer.project.name' | translate\"\n (valueChange)=\"setProjectName($event)\"\n ></lib-app-inline-edit>\n }\n\n <ul class=\"navbar-nav\">\n @if (configService.shareAvailable) {\n <li class=\"nav-item d-none d-md-flex\" data-toggle=\"collapse\">\n <a class=\"nav-link text-primary\" (click)=\"projectShare(); (false)\" routerLinkActive=\"active\"\n ><i class=\"fa fa-share-alt\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-share' | translate }}</a\n >\n </li>\n } @if (configService.languageSwitch) {\n <li class=\"nav-item dropdown\">\n <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"settingsDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"\n ><i class=\"fa fa-globe\" aria-hidden=\"true\"></i>\n {{ 'designer.misc.language' | translate }}\n </a>\n <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"settingsDropdown\">\n <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('de'); (false)\" target=\"_blank\">Deutsch</a>\n <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('en'); (false)\" target=\"_blank\">English</a>\n <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('es'); (false)\" target=\"_blank\">Espa\u00F1ol</a>\n <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('fr'); (false)\" target=\"_blank\">Fran\u00E7ais</a>\n <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('it'); (false)\" target=\"_blank\">Italiano</a>\n <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('pt'); (false)\" target=\"_blank\">Portugu\u00EAs</a>\n <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('zh'); (false)\" target=\"_blank\">\u4E2D\u6587</a>\n </div>\n </li>\n } @if (configService.loginAvailable && !userService.isLoggedIn()) {\n <li class=\"nav-item\" data-toggle=\"collapse\">\n <a class=\"nav-link\" (click)=\"userRegister(); (false)\" routerLinkActive=\"active\"\n ><i class=\"fa fa-user\" aria-hidden=\"true\"></i> {{ 'designer.navigation.login' | translate }}</a\n >\n </li>\n } @if (configService.loginAvailable && userService.isLoggedIn()) {\n <li class=\"nav-item dropdown\">\n <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"settingsDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"\n ><i class=\"fa fa-user\" aria-hidden=\"true\"></i>\n {{ userService.username }}\n </a>\n <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"settingsDropdown\">\n <a class=\"dropdown-item\" href=\"#\" (click)=\"userService.logout(); (false)\" target=\"_blank\"\n ><i class=\"fa fa-sign-out\" aria-hidden=\"true\"></i> {{ 'designer.navigation.logout' | translate }}</a\n >\n </div>\n </li>\n }\n </ul>\n </nav>\n\n <!-- The main content for larger screens -->\n <div class=\"h-100 d-none d-md-block\">\n <div id=\"row1\" class=\"split split-vertical clearfix pt-3 pl-3\">\n <!-- Scenes -->\n <div id=\"scenes\" class=\"split split-horizontal h-100\">\n @if (projectService.project) {\n <lib-app-scene></lib-app-scene>\n }\n </div>\n\n <!-- Presets -->\n <div id=\"presets\" class=\"split split-horizontal h-100\">\n @if (projectService.project) {\n <lib-app-preset></lib-app-preset>\n }\n </div>\n\n <!-- 3D preview -->\n <div id=\"preview\" class=\"split split-horizontal h-100 pr-3\">\n @if (projectService.project) {\n <div class=\"card border-secondary h-100\" [class.card-intro-active]=\"introService.showStep('preview')\">\n <div class=\"card-body p-0 h-100\">\n <lib-app-preview class=\"h-100\"></lib-app-preview>\n </div>\n </div>\n }\n </div>\n </div>\n\n <div id=\"row2\" class=\"split split-vertical clearfix px-3 d-flex\" style=\"flex-direction: row\">\n <!-- Menu for the capabilities, channels, effects and settings -->\n @if (projectService.project) {\n <div class=\"tab-rail col col-auto p-0 h-100\" style=\"margin-right: -1px\">\n <div class=\"nav flex-column nav-pills nav-pills-attached h-100\" id=\"v-pills-tab\" role=\"tablist\" aria-orientation=\"vertical\">\n <a\n class=\"nav-link px-3 active\"\n (click)=\"openTab('capabilities')\"\n id=\"v-pills-capabilities-tab\"\n popover=\"{{ 'designer.misc.capabilities' | translate }}\"\n container=\"body\"\n placement=\"right\"\n triggers=\"mouseenter:mouseleave\"\n data-toggle=\"pill\"\n href=\"#v-pills-capabilities\"\n role=\"tab\"\n aria-controls=\"v-pills-capabilities\"\n aria-selected=\"true\"\n >\n <i class=\"fa fa-bolt fa-fw\" aria-hidden=\"true\"></i>\n </a>\n <a\n class=\"nav-link px-3\"\n (click)=\"openTab('channels')\"\n id=\"v-pills-channels-tab\"\n popover=\"{{ 'designer.misc.channels' | translate }}\"\n container=\"body\"\n placement=\"right\"\n triggers=\"mouseenter:mouseleave\"\n data-toggle=\"pill\"\n href=\"#v-pills-channels\"\n role=\"tab\"\n aria-controls=\"v-pills-channels\"\n aria-selected=\"false\"\n >\n <i class=\"fa fa-sliders fa-fw\" aria-hidden=\"true\"></i>\n </a>\n <a\n class=\"nav-link px-3\"\n (click)=\"openTab('effects')\"\n id=\"v-pills-effects-tab\"\n popover=\"{{ 'designer.misc.effects' | translate }}\"\n container=\"body\"\n placement=\"right\"\n triggers=\"mouseenter:mouseleave\"\n data-toggle=\"pill\"\n href=\"#v-pills-effects\"\n role=\"tab\"\n aria-controls=\"v-pills-effects\"\n aria-selected=\"false\"\n >\n <i class=\"fa fa-magic fa-fw\" aria-hidden=\"true\"></i>\n </a>\n\n <a\n class=\"nav-link px-3 nav-link-divider\"\n href=\"#\"\n [class.text-primary]=\"presetService.stepsVisible\"\n popover=\"{{ 'designer.preset.steps' | translate }}\"\n container=\"body\"\n placement=\"right\"\n triggers=\"mouseenter:mouseleave\"\n (click)=\"presetService.switchStepsVisible(); (false)\"\n >\n <i class=\"fa fa-tasks fa-fw\" aria-hidden=\"true\"></i>\n </a>\n\n <a\n class=\"nav-link px-3 nav-link-divider\"\n (click)=\"openTab('settings')\"\n id=\"v-pills-settings-tab\"\n popover=\"{{ 'designer.misc.settings' | translate }}\"\n container=\"body\"\n placement=\"right\"\n triggers=\"mouseenter:mouseleave\"\n data-toggle=\"pill\"\n href=\"#v-pills-settings\"\n role=\"tab\"\n aria-controls=\"v-pills-settings\"\n aria-selected=\"false\"\n >\n <i class=\"fa fa-cog fa-fw\" aria-hidden=\"true\"></i>\n </a>\n </div>\n\n <!-- which preset the panels on the right are editing, marked the way the preset\n list marks it -->\n @if (presetService.selectedPreset) {\n <div class=\"edit-target\">\n <i\n class=\"fa fa-fw {{ presetService.getPresetIcon(presetService.selectedPreset) }}\"\n [style.color]=\"colorService.getPresetColor(presetService.selectedPreset)\"\n aria-hidden=\"true\"\n ></i>\n {{ presetService.selectedPreset.name }}\n </div>\n }\n </div>\n }\n\n <div id=\"capabilities\" class=\"split split-horizontal h-100\">\n @if (projectService.project) {\n <div class=\"row h-100 flex-nowrap\">\n <!-- which step of the selected preset these panels are editing -->\n <div class=\"col col-auto p-0 h-100\">\n <lib-app-preset-step></lib-app-preset-step>\n </div>\n\n <!-- Content for the capabilities, channels, effects and settings -->\n <div class=\"col px-0 h-100\">\n <div class=\"tab-content h-100\" id=\"v-pills-tabContent\">\n <div class=\"tab-pane h-100 show active\" id=\"v-pills-capabilities\" role=\"tabpanel\">\n <lib-app-fixture-capability></lib-app-fixture-capability>\n </div>\n <div class=\"tab-pane h-100 show\" id=\"v-pills-channels\" role=\"tabpanel\">\n <lib-app-fixture-channel></lib-app-fixture-channel>\n </div>\n <div class=\"tab-pane h-100\" id=\"v-pills-effects\" role=\"tabpanel\" aria-labelledby=\"v-pills-profile-tab\">\n <lib-app-effect></lib-app-effect>\n </div>\n <div class=\"tab-pane h-100\" id=\"v-pills-settings\" role=\"tabpanel\" aria-labelledby=\"v-pills-home-tab\">\n <lib-app-fixture-settings></lib-app-fixture-settings>\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n\n <!-- Fixtures -->\n <div id=\"fixtures\" class=\"split split-horizontal h-100\">\n @if (projectService.project) {\n <lib-app-fixture></lib-app-fixture>\n }\n </div>\n\n <!-- Master dimmer -->\n <div id=\"masterDimmer\" class=\"split split-horizontal h-100\">\n @if (projectService.project) {\n <lib-app-master-dimmer></lib-app-master-dimmer>\n }\n </div>\n </div>\n\n <!-- Timeline -->\n <div id=\"row3\" class=\"split split-vertical clearfix px-3 pb-3\">\n @if (projectService.project) {\n <lib-app-timeline></lib-app-timeline>\n }\n </div>\n </div>\n\n <!-- The components for small screens -->\n <div class=\"d-md-none p-3\">\n <div>\n @if (projectService.project) {\n <lib-app-master-dimmer></lib-app-master-dimmer>\n }\n </div>\n\n <div class=\"mt-3\">\n @if (projectService.project) {\n <lib-app-scene></lib-app-scene>\n }\n </div>\n </div>\n</div>\n\n<lib-app-intro class=\"d-none d-md-flex\"></lib-app-intro>\n\n<lib-app-hardware-promo-bar class=\"d-none d-md-block\"></lib-app-hardware-promo-bar>\n", styles: [":root{--sd-bg: #131519;--sd-surface-1: #191c21;--sd-surface-2: #1f232a;--sd-surface-3: #272c34;--sd-surface-4: #323841;--sd-border: #2b3038;--sd-border-strong: #3b424d;--sd-text: #dfe3e8;--sd-text-muted: #99a1ac;--sd-text-dim: #6b7280;--sd-primary: #fd7e14;--sd-primary-hover: #ff9440;--sd-primary-active: #e56f0b;--sd-primary-text: #ffa45c;--sd-on-primary: #1a1206;--sd-primary-soft: rgba(253, 126, 20, .16);--sd-primary-soft-hover: rgba(253, 126, 20, .24);--sd-primary-soft-strong: rgba(253, 126, 20, .28);--sd-success: #2eb872;--sd-info: #3d9df0;--sd-warning: #f0a92e;--sd-danger: #e5544b;--sd-radius-sm: 4px;--sd-radius: 6px;--sd-radius-lg: 10px;--sd-space-1: 4px;--sd-space-2: 8px;--sd-space-3: 12px;--sd-space-4: 16px;--sd-space-5: 20px;--sd-space-6: 24px;--sd-control-height: 28px;--sd-control-height-sm: 22px;--sd-row-height: 28px;--sd-shadow-1: 0 1px 2px rgba(0, 0, 0, .3);--sd-shadow-2: 0 4px 12px rgba(0, 0, 0, .35);--sd-shadow-3: 0 12px 32px rgba(0, 0, 0, .45);--sd-focus-ring: 0 0 0 2px rgba(253, 126, 20, .45)}.modal-full{max-width:unset!important;margin:20px!important}.modal-full .modal-content{max-height:calc(100vh - 40px)}.modal-full .modal-content>*{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}.modal-full .modal-body{flex:1 1 auto;overflow-y:auto;min-height:0}.modal .modal-full *{transition:none!important}.modal{z-index:10001}.modal .card{background-color:#191c21;border:1px solid #2b3038;border-radius:10px}.modal .card.panel{overflow:hidden}.modal .card-header{display:flex;align-items:center;gap:8px;min-height:30px;margin-bottom:0;padding:0 12px;background-color:#1f232a;border-bottom:1px solid #2b3038;border-radius:9px 9px 0 0;font-size:.75rem;font-weight:600;color:#dfe3e8;line-height:1.4}.modal .card-body{overflow:auto;padding:12px}.modal .card-footer{padding:8px 12px;background-color:transparent;border-top:1px solid #2b3038}.modal .card-header .btn,.modal .card-header a.btn,.modal .step-list .btn,.modal .step-list a.btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;min-height:0;padding:0!important;border:none;border-radius:4px;background-color:transparent;color:#99a1ac;font-size:.8125rem;transition:color .12s ease,background-color .12s ease}.modal .card-header .btn:hover,.modal .card-header .btn:focus,.modal .card-header a.btn:hover,.modal .card-header a.btn:focus,.modal .step-list .btn:hover,.modal .step-list .btn:focus,.modal .step-list a.btn:hover,.modal .step-list a.btn:focus{color:#dfe3e8;background-color:#323841;box-shadow:none}.modal .card-header .btn.text-primary,.modal .card-header a.btn.text-primary,.modal .step-list .btn.text-primary,.modal .step-list a.btn.text-primary{color:#ffa45c!important}.modal .card-header input,.modal .card-header select{font-weight:400}.modal .card-header .pull-right,.modal .card-header .ml-auto{margin-left:auto}.modal .btn{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;min-height:28px;padding:0 12px;border-radius:6px;font-size:.8125rem;font-weight:500;line-height:1.4;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.modal .btn-sm{min-height:22px;padding:0 8px;font-size:.75rem;border-radius:4px}.modal .btn-primary{background-color:#fd7e14;border-color:#fd7e14;color:#fff}.modal .btn-primary:hover,.modal .btn-primary:focus{background-color:#ff9440;border-color:#ff9440;color:#fff}.modal .btn-primary:active,.modal .btn-primary:not(:disabled):not(.disabled):active{background-color:#e56f0b;border-color:#e56f0b}.modal .btn-secondary{background-color:#272c34;border-color:#3b424d;color:#dfe3e8}.modal .btn-secondary:hover,.modal .btn-secondary:focus{background-color:#323841;border-color:#3b424d;color:#dfe3e8}.modal .btn-secondary:active,.modal .btn-secondary:not(:disabled):not(.disabled):active{background-color:#323841;border-color:#3b424d}.modal .btn-link{color:#dfe3e8}.modal .btn-link:hover{color:#ffa45c}.modal .btn-group>.btn{border-radius:0}.modal .btn-group>.btn:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.modal .btn-group>.btn:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.modal .btn-group>.btn+.btn{border-left:1px solid rgba(0,0,0,.25)}.modal input,.modal select,.modal textarea,.modal .form-control,.modal .custom-select{height:28px;padding:0 8px;background-color:#1f232a;border:1px solid #3b424d;border-radius:6px;color:#dfe3e8;font-size:.8125rem;line-height:1.4;transition:border-color .12s ease,background-color .12s ease}.modal input:hover:not(:disabled):not([readonly]),.modal select:hover:not(:disabled):not([readonly]),.modal textarea:hover:not(:disabled):not([readonly]),.modal .form-control:hover:not(:disabled):not([readonly]),.modal .custom-select:hover:not(:disabled):not([readonly]){border-color:#6b7280}.modal input:focus,.modal select:focus,.modal textarea:focus,.modal .form-control:focus,.modal .custom-select:focus{background-color:#1f232a;border-color:#fd7e14;color:#dfe3e8;box-shadow:none;outline:none}.modal input:focus-visible,.modal select:focus-visible,.modal textarea:focus-visible,.modal .form-control:focus-visible,.modal .custom-select:focus-visible{box-shadow:0 0 0 2px #fd7e1473}.modal input:disabled,.modal input[readonly],.modal select:disabled,.modal select[readonly],.modal textarea:disabled,.modal textarea[readonly],.modal .form-control:disabled,.modal .form-control[readonly],.modal .custom-select:disabled,.modal .custom-select[readonly]{background-color:#191c21;border-color:#2b3038;color:#6b7280;cursor:not-allowed}.modal input::placeholder,.modal select::placeholder,.modal textarea::placeholder,.modal .form-control::placeholder,.modal .custom-select::placeholder{color:#6b7280}.modal textarea,.modal textarea.form-control{height:auto;padding:8px;line-height:1.5}.modal select,.modal .custom-select{cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:24px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2399a1ac' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 8px center;background-size:14px 14px}.modal select option,.modal .custom-select option{background-color:#1f232a;color:#dfe3e8}.modal .input-group-text{height:28px;padding:0 8px;background-color:#272c34;border:1px solid #3b424d;border-radius:6px;color:#99a1ac;font-size:.8125rem}.modal .sd-value-input{width:64px;min-width:0;max-width:100%;text-align:center;font-family:SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.75rem;padding:0 4px}.modal .sd-value-input-hex{width:72px}.modal .sd-value-input-time{width:88px}.modal .sd-time-field{flex:0 0 auto;width:120px}.modal label{margin-bottom:0;color:#99a1ac;font-size:.8125rem}.modal .col-form-label{padding-top:0;padding-bottom:0;line-height:28px}.modal .form-group{margin-bottom:12px}.modal .form-check{position:relative;display:block;min-height:18px;padding-left:24px;margin-bottom:0}.modal .form-check-label{color:#dfe3e8;font-size:.8125rem;line-height:1.4;cursor:pointer}.modal input[type=checkbox],.modal input[type=radio]{appearance:none;-webkit-appearance:none;-moz-appearance:none;flex:0 0 auto;width:16px;height:16px;min-height:0;padding:0;margin:0;background-color:#272c34;background-repeat:no-repeat;background-position:center;background-size:100% 100%;border:1px solid #3b424d;border-radius:4px;cursor:pointer;vertical-align:middle;transition:background-color .12s ease,border-color .12s ease}.modal input[type=checkbox]:hover:not(:disabled),.modal input[type=radio]:hover:not(:disabled){border-color:#6b7280;background-color:#323841}.modal input[type=checkbox]:checked,.modal input[type=radio]:checked{background-color:#fd7e14;border-color:#fd7e14}.modal input[type=checkbox]:checked:hover,.modal input[type=radio]:checked:hover{background-color:#ff9440;border-color:#ff9440}.modal input[type=checkbox]:disabled,.modal input[type=radio]:disabled{opacity:.45;cursor:not-allowed}.modal input[type=checkbox]:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M5.5 10.5l3 3 6-6'/%3E%3C/svg%3E\")}.modal input[type=checkbox]:indeterminate{background-color:#fd7e14;border-color:#fd7e14;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath stroke='%23fff' stroke-width='2.6' stroke-linecap='round' d='M6 10h8'/%3E%3C/svg%3E\")}.modal input[type=radio]{border-radius:50%}.modal input[type=radio]:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%23fff'/%3E%3C/svg%3E\")}.modal .form-check-input{position:absolute;top:50%;left:0;margin:0;transform:translateY(-50%)}.modal span.bigcheck-target{font-family:FontAwesome;color:#99a1ac}.modal input[type=checkbox].bigcheck{position:absolute;left:-999em}.modal input[type=checkbox].bigcheck+span.bigcheck-target:after{content:\"\\f096\"}.modal input[type=checkbox].bigcheck:checked+span.bigcheck-target{color:#fd7e14}.modal input[type=checkbox].bigcheck:checked+span.bigcheck-target:after{content:\"\\f046\"}.modal .list-group-item{display:flex;align-items:center;min-height:28px;padding:.3125rem 12px;background-color:transparent;border:none;border-bottom:1px solid #2b3038;border-radius:0;color:#dfe3e8;white-space:nowrap;transition:background-color .12s ease}.modal .list-group-item:last-child{border-bottom:none}.modal .list-group-item:hover{background-color:#ffffff0a}.modal .list-group-item>.row{width:100%;margin-left:0;margin-right:0}.modal .list-group-item .row>div{min-width:0;overflow:hidden;text-overflow:ellipsis}.modal .list-group-item.active{background-color:#fd7e1447!important;border-color:#2b3038!important;color:#ffd0a8!important}.modal .list-group-item.active:hover{background-color:#fd7e1457!important}.modal .list-group-item.focused{outline:1px solid #fd7e14;outline-offset:-1px}.modal .inactive-list-item{opacity:.4}.modal .list-sort-handle{padding-left:0;padding-right:8px;color:#6b7280}.modal .list-sort-handle:hover{color:#99a1ac}.modal .nav a,.modal .panel-title .btn-link{color:#dfe3e8}.modal .nav-tabs{border-bottom:1px solid #2b3038}.modal .nav-tabs .nav-link{border:none;border-bottom:2px solid transparent;border-radius:0;color:#99a1ac;padding:8px 12px}.modal .nav-tabs .nav-link:hover{color:#dfe3e8;border-bottom-color:#3b424d}.modal .nav-tabs .nav-link.active{background-color:transparent;color:#dfe3e8;border-bottom-color:#fd7e14}.modal .slider{cursor:pointer}.modal .slider-track,.modal .slider-track-low,.modal .slider-track-high,.modal .slider-selection{border-radius:3px!important;background-image:none!important;box-shadow:none!important}.modal .slider-track{background-color:#323841!important}.modal .slider-track-low,.modal .slider-track-high{background-color:transparent!important}.modal .slider-selection{background-color:#fd7e14!important}.modal .slider-vertical .slider-selection{background-color:transparent!important}.modal .slider-vertical .slider-track-high{background-color:#fd7e14!important}.modal .slider-handle{width:14px!important;height:14px!important;background-color:#eef1f5!important;background-image:none!important;border:none;box-shadow:0 1px 2px #0000004d,0 0 0 1px #00000059!important;transition:transform .1s ease,background-color .12s ease}.modal .slider-handle:hover{background-color:#fff!important;transform:scale(1.12)}.modal .slider.slider-horizontal{height:20px}.modal .slider.slider-horizontal .slider-track{height:4px!important;top:50%!important;margin-top:-2px!important}.modal .slider.slider-horizontal .slider-handle{top:50%!important;margin-top:-7px!important;margin-left:-7px!important}.modal .slider.slider-vertical .slider-track{width:4px!important;left:50%!important;margin-left:-2px!important}.modal .slider.slider-vertical .slider-handle{left:50%!important;margin-left:-7px!important;margin-top:-7px!important}.modal .sd-slider-fill{flex:1 1 0;min-width:0}.modal .sd-slider-fill .slider.slider-horizontal{width:100%}.modal .slider-input,.modal .slider-input-readonly{width:64px;margin-left:8px;text-align:center;font-family:SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.75rem;padding:0 4px}.modal .slider-input-readonly{color:#6b7280;border-color:#2b3038}.modal .alert{padding:12px 16px;border-radius:6px;border:1px solid #3b424d;background-color:#1f232a;color:#dfe3e8;font-size:.8125rem}.modal .alert-primary{border-color:#fd7e1466;background-color:#fd7e1429;color:#dfe3e8}.modal .alert-success{border-color:#2eb87266;background-color:#2eb87224;color:#dfe3e8}.modal .alert-danger{border-color:#e5544b66;background-color:#e5544b24;color:#dfe3e8}.modal .progress{height:6px;background-color:#272c34;border-radius:3px}.modal .progress-bar{background-color:#fd7e14}.modal .table{color:#dfe3e8}.modal .table th,.modal .table td{border-top-color:#2b3038;padding:8px 12px}.modal .table thead th{border-bottom-color:#2b3038;color:#99a1ac;font-size:.75rem;font-weight:600}.modal-backdrop{background-color:#05060a}.modal-backdrop.show{opacity:.65}.modal-content{background-color:#191c21;border:1px solid #2b3038;border-radius:10px;box-shadow:0 12px 32px #00000073;overflow:hidden}.modal-header{align-items:center;padding:12px 20px;background-color:#1f232a;border-bottom:1px solid #2b3038}.modal-title{font-size:.9375rem;font-weight:600;color:#dfe3e8;line-height:1.4}.modal-body{padding:20px}.modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;background-color:transparent;border-top:1px solid #2b3038}.modal-footer>*{margin:0}.modal .card-modal .card{background-color:transparent;border:none;border-radius:0;box-shadow:none}.modal .card-modal .card-header{padding:12px 20px;font-size:.9375rem}.modal .card-modal .card-body{padding:20px}.modal .card-modal .card-footer{padding:12px 20px}.modal .close,.card-modal .close{padding:0;margin:0 0 0 auto;width:26px;height:26px;font-size:1.25rem;font-weight:400;line-height:1;color:#99a1ac;border-radius:4px;opacity:1;transition:color .12s ease,background-color .12s ease}.modal .close:hover,.card-modal .close:hover{color:#dfe3e8;background-color:#272c34;opacity:1}.dropdown-menu{z-index:100000;padding:4px;background-color:#1f232a;border:1px solid #2b3038;border-radius:6px;box-shadow:0 4px 12px #00000059;font-size:.8125rem}.dropdown-item{padding:.3125rem 8px;border-radius:4px;color:#dfe3e8}.dropdown-item:hover,.dropdown-item:focus{background-color:#272c34;color:#dfe3e8}.dropdown-item.active,.dropdown-item:active{background-color:#fd7e14;color:#fff}.dropdown-item .fa{color:#99a1ac;margin-right:4px}.dropdown-item:hover .fa{color:#dfe3e8}.tab-rail{position:relative}.edit-target{position:absolute;top:191px;bottom:12px;left:50%;writing-mode:vertical-rl;transform:translate(-50%) rotate(180deg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#99a1ac;font-size:.75rem;letter-spacing:.02em;-webkit-user-select:none;user-select:none;pointer-events:none}.edit-target .fa{display:inline-block;writing-mode:horizontal-tb;transform:rotate(180deg);margin-bottom:4px;font-size:.8125rem}.dropdown-divider{border-top-color:#2b3038}.popover{background-color:#272c34;border:1px solid #3b424d;border-radius:6px;box-shadow:0 4px 12px #00000059;font-size:.75rem;pointer-events:none}.popover-body{padding:.3125rem 8px;color:#dfe3e8}.popover-header{background-color:#323841;border-bottom-color:#3b424d;color:#dfe3e8}.bs-popover-right>.arrow:after,.bs-popover-auto[x-placement^=right]>.arrow:after{border-right-color:#272c34}.bs-popover-left>.arrow:after,.bs-popover-auto[x-placement^=left]>.arrow:after{border-left-color:#272c34}.bs-popover-bottom>.arrow:after,.bs-popover-auto[x-placement^=bottom]>.arrow:after{border-bottom-color:#272c34}.bs-popover-top>.arrow:after,.bs-popover-auto[x-placement^=top]>.arrow:after{border-top-color:#272c34}.bs-popover-right>.arrow:before,.bs-popover-auto[x-placement^=right]>.arrow:before{border-right-color:#3b424d}.bs-popover-left>.arrow:before,.bs-popover-auto[x-placement^=left]>.arrow:before{border-left-color:#3b424d}.bs-popover-bottom>.arrow:before,.bs-popover-auto[x-placement^=bottom]>.arrow:before{border-bottom-color:#3b424d}.bs-popover-top>.arrow:before,.bs-popover-auto[x-placement^=top]>.arrow:before{border-top-color:#3b424d}.hardware-promo-hint{display:flex;align-items:baseline;gap:8px;margin:0;padding:8px 12px;border:1px solid #2b3038;border-left:2px solid #fd7e14;border-radius:4px;background-color:#fd7e1429;color:#99a1ac;font-size:.75rem;line-height:1.5}.hardware-promo-hint .fa-lightbulb-o{color:#ffa45c}.hardware-promo-hint a{color:#ffa45c;white-space:nowrap}#designer{font-size:.8125rem;color:#dfe3e8;background-color:#131519}#designer .card{background-color:#191c21;border:1px solid #2b3038;border-radius:10px}#designer .card.panel{overflow:hidden}#designer .card-header{display:flex;align-items:center;gap:8px;min-height:30px;margin-bottom:0;padding:0 12px;background-color:#1f232a;border-bottom:1px solid #2b3038;border-radius:9px 9px 0 0;font-size:.75rem;font-weight:600;color:#dfe3e8;line-height:1.4}#designer .card-body{overflow:auto;padding:12px}#designer .card-footer{padding:8px 12px;background-color:transparent;border-top:1px solid #2b3038}#designer .card-header .btn,#designer .card-header a.btn,#designer .step-list .btn,#designer .step-list a.btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;min-height:0;padding:0!important;border:none;border-radius:4px;background-color:transparent;color:#99a1ac;font-size:.8125rem;transition:color .12s ease,background-color .12s ease}#designer .card-header .btn:hover,#designer .card-header .btn:focus,#designer .card-header a.btn:hover,#designer .card-header a.btn:focus,#designer .step-list .btn:hover,#designer .step-list .btn:focus,#designer .step-list a.btn:hover,#designer .step-list a.btn:focus{color:#dfe3e8;background-color:#323841;box-shadow:none}#designer .card-header .btn.text-primary,#designer .card-header a.btn.text-primary,#designer .step-list .btn.text-primary,#designer .step-list a.btn.text-primary{color:#ffa45c!important}#designer .card-header input,#designer .card-header select{font-weight:400}#designer .card-header .pull-right,#designer .card-header .ml-auto{margin-left:auto}#designer .btn{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;min-height:28px;padding:0 12px;border-radius:6px;font-size:.8125rem;font-weight:500;line-height:1.4;transition:background-color .12s ease,border-color .12s ease,color .12s ease}#designer .btn-sm{min-height:22px;padding:0 8px;font-size:.75rem;border-radius:4px}#designer .btn-primary{background-color:#fd7e14;border-color:#fd7e14;color:#fff}#designer .btn-primary:hover,#designer .btn-primary:focus{background-color:#ff9440;border-color:#ff9440;color:#fff}#designer .btn-primary:active,#designer .btn-primary:not(:disabled):not(.disabled):active{background-color:#e56f0b;border-color:#e56f0b}#designer .btn-secondary{background-color:#272c34;border-color:#3b424d;color:#dfe3e8}#designer .btn-secondary:hover,#designer .btn-secondary:focus{background-color:#323841;border-color:#3b424d;color:#dfe3e8}#designer .btn-secondary:active,#designer .btn-secondary:not(:disabled):not(.disabled):active{background-color:#323841;border-color:#3b424d}#designer .btn-link{color:#dfe3e8}#designer .btn-link:hover{color:#ffa45c}#designer .btn-group>.btn{border-radius:0}#designer .btn-group>.btn:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}#designer .btn-group>.btn:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}#designer .btn-group>.btn+.btn{border-left:1px solid rgba(0,0,0,.25)}#designer input,#designer select,#designer textarea,#designer .form-control,#designer .custom-select{height:28px;padding:0 8px;background-color:#1f232a;border:1px solid #3b424d;border-radius:6px;color:#dfe3e8;font-size:.8125rem;line-height:1.4;transition:border-color .12s ease,background-color .12s ease}#designer input:hover:not(:disabled):not([readonly]),#designer select:hover:not(:disabled):not([readonly]),#designer textarea:hover:not(:disabled):not([readonly]),#designer .form-control:hover:not(:disabled):not([readonly]),#designer .custom-select:hover:not(:disabled):not([readonly]){border-color:#6b7280}#designer input:focus,#designer select:focus,#designer textarea:focus,#designer .form-control:focus,#designer .custom-select:focus{background-color:#1f232a;border-color:#fd7e14;color:#dfe3e8;box-shadow:none;outline:none}#designer input:focus-visible,#designer select:focus-visible,#designer textarea:focus-visible,#designer .form-control:focus-visible,#designer .custom-select:focus-visible{box-shadow:0 0 0 2px #fd7e1473}#designer input:disabled,#designer input[readonly],#designer select:disabled,#designer select[readonly],#designer textarea:disabled,#designer textarea[readonly],#designer .form-control:disabled,#designer .form-control[readonly],#designer .custom-select:disabled,#designer .custom-select[readonly]{background-color:#191c21;border-color:#2b3038;color:#6b7280;cursor:not-allowed}#designer input::placeholder,#designer select::placeholder,#designer textarea::placeholder,#designer .form-control::placeholder,#designer .custom-select::placeholder{color:#6b7280}#designer textarea,#designer textarea.form-control{height:auto;padding:8px;line-height:1.5}#designer select,#designer .custom-select{cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:24px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2399a1ac' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 8px center;background-size:14px 14px}#designer select option,#designer .custom-select option{background-color:#1f232a;color:#dfe3e8}#designer .input-group-text{height:28px;padding:0 8px;background-color:#272c34;border:1px solid #3b424d;border-radius:6px;color:#99a1ac;font-size:.8125rem}#designer .sd-value-input{width:64px;min-width:0;max-width:100%;text-align:center;font-family:SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.75rem;padding:0 4px}#designer .sd-value-input-hex{width:72px}#designer .sd-value-input-time{width:88px}#designer .sd-time-field{flex:0 0 auto;width:120px}#designer label{margin-bottom:0;color:#99a1ac;font-size:.8125rem}#designer .col-form-label{padding-top:0;padding-bottom:0;line-height:28px}#designer .form-group{margin-bottom:12px}#designer .form-check{position:relative;display:block;min-height:18px;padding-left:24px;margin-bottom:0}#designer .form-check-label{color:#dfe3e8;font-size:.8125rem;line-height:1.4;cursor:pointer}#designer input[type=checkbox],#designer input[type=radio]{appearance:none;-webkit-appearance:none;-moz-appearance:none;flex:0 0 auto;width:16px;height:16px;min-height:0;padding:0;margin:0;background-color:#272c34;background-repeat:no-repeat;background-position:center;background-size:100% 100%;border:1px solid #3b424d;border-radius:4px;cursor:pointer;vertical-align:middle;transition:background-color .12s ease,border-color .12s ease}#designer input[type=checkbox]:hover:not(:disabled),#designer input[type=radio]:hover:not(:disabled){border-color:#6b7280;background-color:#323841}#designer input[type=checkbox]:checked,#designer input[type=radio]:checked{background-color:#fd7e14;border-color:#fd7e14}#designer input[type=checkbox]:checked:hover,#designer input[type=radio]:checked:hover{background-color:#ff9440;border-color:#ff9440}#designer input[type=checkbox]:disabled,#designer input[type=radio]:disabled{opacity:.45;cursor:not-allowed}#designer input[type=checkbox]:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M5.5 10.5l3 3 6-6'/%3E%3C/svg%3E\")}#designer input[type=checkbox]:indeterminate{background-color:#fd7e14;border-color:#fd7e14;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath stroke='%23fff' stroke-width='2.6' stroke-linecap='round' d='M6 10h8'/%3E%3C/svg%3E\")}#designer input[type=radio]{border-radius:50%}#designer input[type=radio]:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%23fff'/%3E%3C/svg%3E\")}#designer .form-check-input{position:absolute;top:50%;left:0;margin:0;transform:translateY(-50%)}#designer span.bigcheck-target{font-family:FontAwesome;color:#99a1ac}#designer input[type=checkbox].bigcheck{position:absolute;left:-999em}#designer input[type=checkbox].bigcheck+span.bigcheck-target:after{content:\"\\f096\"}#designer input[type=checkbox].bigcheck:checked+span.bigcheck-target{color:#fd7e14}#designer input[type=checkbox].bigcheck:checked+span.bigcheck-target:after{content:\"\\f046\"}#designer .list-group-item{display:flex;align-items:center;min-height:28px;padding:.3125rem 12px;background-color:transparent;border:none;border-bottom:1px solid #2b3038;border-radius:0;color:#dfe3e8;white-space:nowrap;transition:background-color .12s ease}#designer .list-group-item:last-child{border-bottom:none}#designer .list-group-item:hover{background-color:#ffffff0a}#designer .list-group-item>.row{width:100%;margin-left:0;margin-right:0}#designer .list-group-item .row>div{min-width:0;overflow:hidden;text-overflow:ellipsis}#designer .list-group-item.active{background-color:#fd7e1447!important;border-color:#2b3038!important;color:#ffd0a8!important}#designer .list-group-item.active:hover{background-color:#fd7e1457!important}#designer .list-group-item.focused{outline:1px solid #fd7e14;outline-offset:-1px}#designer .inactive-list-item{opacity:.4}#designer .list-sort-handle{padding-left:0;padding-right:8px;color:#6b7280}#designer .list-sort-handle:hover{color:#99a1ac}#designer .nav a,#designer .panel-title .btn-link{color:#dfe3e8}#designer .nav-tabs{border-bottom:1px solid #2b3038}#designer .nav-tabs .nav-link{border:none;border-bottom:2px solid transparent;border-radius:0;color:#99a1ac;padding:8px 12px}#designer .nav-tabs .nav-link:hover{color:#dfe3e8;border-bottom-color:#3b424d}#designer .nav-tabs .nav-link.active{background-color:transparent;color:#dfe3e8;border-bottom-color:#fd7e14}#designer .slider{cursor:pointer}#designer .slider-track,#designer .slider-track-low,#designer .slider-track-high,#designer .slider-selection{border-radius:3px!important;background-image:none!important;box-shadow:none!important}#designer .slider-track{background-color:#323841!important}#designer .slider-track-low,#designer .slider-track-high{background-color:transparent!important}#designer .slider-selection{background-color:#fd7e14!important}#designer .slider-vertical .slider-selection{background-color:transparent!important}#designer .slider-vertical .slider-track-high{background-color:#fd7e14!important}#designer .slider-handle{width:14px!important;height:14px!important;background-color:#eef1f5!important;background-image:none!important;border:none;box-shadow:0 1px 2px #0000004d,0 0 0 1px #00000059!important;transition:transform .1s ease,background-color .12s ease}#designer .slider-handle:hover{background-color:#fff!important;transform:scale(1.12)}#designer .slider.slider-horizontal{height:20px}#designer .slider.slider-horizontal .slider-track{height:4px!important;top:50%!important;margin-top:-2px!important}#designer .slider.slider-horizontal .slider-handle{top:50%!important;margin-top:-7px!important;margin-left:-7px!important}#designer .slider.slider-vertical .slider-track{width:4px!important;left:50%!important;margin-left:-2px!important}#designer .slider.slider-vertical .slider-handle{left:50%!important;margin-left:-7px!important;margin-top:-7px!important}#designer .sd-slider-fill{flex:1 1 0;min-width:0}#designer .sd-slider-fill .slider.slider-horizontal{width:100%}#designer .slider-input,#designer .slider-input-readonly{width:64px;margin-left:8px;text-align:center;font-family:SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.75rem;padding:0 4px}#designer .slider-input-readonly{color:#6b7280;border-color:#2b3038}#designer .alert{padding:12px 16px;border-radius:6px;border:1px solid #3b424d;background-color:#1f232a;color:#dfe3e8;font-size:.8125rem}#designer .alert-primary{border-color:#fd7e1466;background-color:#fd7e1429;color:#dfe3e8}#designer .alert-success{border-color:#2eb87266;background-color:#2eb87224;color:#dfe3e8}#designer .alert-danger{border-color:#e5544b66;background-color:#e5544b24;color:#dfe3e8}#designer .progress{height:6px;background-color:#272c34;border-radius:3px}#designer .progress-bar{background-color:#fd7e14}#designer .table{color:#dfe3e8}#designer .table th,#designer .table td{border-top-color:#2b3038;padding:8px 12px}#designer .table thead th{border-bottom-color:#2b3038;color:#99a1ac;font-size:.75rem;font-weight:600}#designer .row{flex-wrap:unset}#designer .capability-container{padding:0;height:0}#designer .gutter{background-color:transparent;position:relative}#designer .gutter:after{content:\"\";position:absolute;background-color:transparent;border-radius:2px;transition:background-color .15s ease}#designer .gutter:hover:after{background-color:#3b424d}#designer .gutter.gutter-horizontal{cursor:ew-resize}#designer .gutter.gutter-horizontal:after{top:25%;bottom:25%;left:50%;width:2px;transform:translate(-50%)}#designer .gutter.gutter-vertical{cursor:ns-resize}#designer .gutter.gutter-vertical:after{left:25%;right:25%;top:50%;height:2px;transform:translateY(-50%)}#designer .split-horizontal,#designer .gutter.gutter-horizontal{float:left}#designer .split-vertical,#designer .gutter.gutter-horizontal{height:100%}#designer .split{overflow-y:hidden;overflow-x:hidden}#designer .panel{background-color:transparent}#designer .panel-body{background-color:#1f232a}#designer #masterDimmer .card-body{padding-left:8px;padding-right:8px}#designer .navbar{height:34px;padding:0 8px;background-color:#191c21!important;border-bottom:1px solid #2b3038}#designer .navbar-nav{flex-direction:row!important;align-items:center}#designer .navbar-expand-lg{flex-flow:row nowrap!important;justify-content:flex-start!important}#designer .nav-link{cursor:pointer}#designer .navbar .nav-link{display:flex;align-items:center;gap:.375rem;height:24px;padding:0 8px!important;border-radius:4px;color:#99a1ac;font-size:.8125rem;transition:color .12s ease,background-color .12s ease}#designer .navbar .nav-link:hover,#designer .navbar .nav-link:focus{color:#dfe3e8;background-color:#272c34}#designer .navbar .nav-link.text-primary{color:#ffa45c!important}#designer .navbar .nav-link.text-primary:hover{color:#ff9440!important}#designer .navbar .nav-item.show>.nav-link{color:#dfe3e8;background-color:#272c34}#designer .navbar-nav .dropdown-menu{position:absolute;float:none}#designer .navbar .dropdown-toggle:after{margin-left:.125rem;opacity:.6}#designer .navbar .project-name{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#dfe3e8}#designer .capability{overflow:visible}#designer .capability-deactivated{opacity:.4}#designer .nav-pills{background-color:#191c21;border:1px solid #2b3038;border-radius:10px;padding:4px;gap:2px}#designer .nav-pills .nav-link{display:flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0!important;border-radius:6px;color:#99a1ac;transition:color .12s ease,background-color .12s ease}#designer .nav-pills .nav-link:hover{color:#dfe3e8;background-color:#272c34}#designer .nav-pills .nav-link.active,#designer .nav-pills .show>.nav-link{background-color:#fd7e1447;color:#ffa45c}#designer .nav-pills.nav-pills-attached{border-radius:10px 0 0 10px}#designer .nav-pills .nav-link.nav-link-divider{position:relative;margin-top:8px}#designer .nav-pills .nav-link.nav-link-divider:before{content:\"\";position:absolute;top:-5px;left:3px;right:3px;height:1px;background-color:#2b3038}#designer #preview .card{overflow:hidden}#designer #capabilities>.row{margin-left:0;margin-right:0}#designer #capabilities>.row>.col{min-width:0}#designer #capabilities .tab-pane>*>.card{border-top-left-radius:0;border-bottom-left-radius:0}#designer .card-header .panel-title{flex:1 1 auto;min-width:0}#designer .accordion-toggle .btn,#designer .accordion-toggle button{display:flex;align-items:center;justify-content:flex-start;width:100%;height:auto;min-height:0;padding:0;border:none;background-color:transparent;color:#dfe3e8;text-align:left}#designer .accordion-toggle .btn:hover,#designer .accordion-toggle .btn:focus,#designer .accordion-toggle .btn:active,#designer .accordion-toggle button:hover,#designer .accordion-toggle button:focus,#designer .accordion-toggle button:active{background-color:transparent;box-shadow:none;color:#dfe3e8}#designer accordion-group{display:block}#designer accordion-group .card{margin:0;border:none;border-radius:0;background-color:transparent;overflow:visible}#designer accordion-group .card-header{border-radius:0;cursor:pointer;transition:background-color .12s ease}#designer accordion-group .card-header:hover{background-color:#272c34}#designer accordion-group+accordion-group .card-header{border-top:1px solid #2b3038}#designer accordion-group:first-of-type .card-header{border-top-left-radius:10px;border-top-right-radius:10px}#designer accordion-group:last-of-type:not(.panel-open) .card-header{border-bottom-left-radius:10px;border-bottom-right-radius:10px}#designer .iro__wheel,#designer .iro__slider{cursor:pointer}#designer .pan-tilt-grid path{fill:none;stroke:#99a1ac;stroke-width:10px}#designer .pan-tilt-grid circle{fill:#fd7e14;stroke:#191c21;stroke-width:3px}#designer .wavesurfer-region{z-index:5!important;border-radius:4px}#designer .wavesurfer-region[data-region-selected=true]{z-index:6!important}#designer .wavesurfer-region[data-region-preset=true]{height:50%!important;top:50%!important}#designer .wavesurfer-region[data-region-name]:after{content:attr(data-region-name);margin-left:20px;font-size:.75rem}#designer .step-marker{position:absolute;top:0;bottom:0;pointer-events:none}#designer .step-marker-tick{width:1px;background-color:#ffffff80}#designer .step-marker-tick:after{content:attr(data-step-name);position:absolute;top:2px;left:3px;color:#99a1ac;font-size:.7rem;white-space:nowrap}#designer .step-marker-tick[data-step-selected=true]{width:2px;background-color:#fd7e14}#designer .step-marker-tick[data-step-selected=true]:after{color:#ffa45c}#designer .step-marker-transition{background:linear-gradient(to right,#ffffff38,#fff0)}#designer .step-marker-transition[data-step-selected=true]{background:linear-gradient(to right,#fd7e1473,#fd7e1400)}#designer .wavesurfer-handle{width:10px!important;max-width:10px!important;border:1px solid rgba(255,255,255,.35);background:#00000026;box-sizing:border-box;opacity:0;cursor:unset!important}#designer .wavesurfer-handle-end{margin-left:-10px}#designer .wavesurfer-region[data-region-selectable=true] .wavesurfer-handle{opacity:1;cursor:col-resize!important}#designer .wavesurfer-handle:before,#designer .wavesurfer-handle:after{content:\"\";display:block;position:absolute;z-index:1;border-top:1px solid rgba(255,255,255,.7);border-bottom:1px solid rgba(255,255,255,.7);height:4px;left:5%;right:5%;top:50%;transform:translateY(-50%)}#designer .wavesurfer-handle:before{margin-top:-3px}#designer timeline{overflow:scroll!important;overflow:-moz-scrollbars-none;-ms-overflow-style:none;scrollbar-width:none;cursor:s-resize}#designer timeline::-webkit-scrollbar{height:0!important}#designer cursor{top:-20px!important}#designer wave{border-right-color:#fd7e14!important;cursor:col-resize}#designer wave canvas{opacity:.35}\n"] }]
|
|
13844
13844
|
}], ctorParameters: () => [{ type: i4.TranslateService }, { type: ProjectService }, { type: ConfigService }, { type: FixturePoolService }, { type: HotkeyTargetExcludeService }, { type: i1$1.BsModalService }, { type: UserService }, { type: UserEnsureLoginService }, { type: ProjectLoadService }, { type: WarningDialogService }, { type: ErrorDialogService }, { type: FixtureService }, { type: TimelineService }, { type: IntroService }, { type: PresetService }, { type: ColorService }, { type: EffectService }, { type: HardwarePromoService }, { type: UndoService }], propDecorators: { menuHeightPx: [{
|
|
13845
13845
|
type: Input
|
|
13846
13846
|
}], externalCompositionsAvailable: [{
|