This is an automated email from the ASF dual-hosted git repository. riemer pushed a commit to branch improve-css in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit b9bcf26211d7b8d2aca59653e4dd29f635aee843 Author: Dominik Riemer <[email protected]> AuthorDate: Mon Jun 5 22:46:53 2023 +0200 [hotfix] Remove unused CSS, improve theming --- ui/.gitignore | 1 - ui/deployment/_variables.scss | 132 +++++ ui/deployment/prebuild.js | 4 +- .../basic-view/basic-view.component.scss | 5 +- .../core/components/iconbar/iconbar.component.scss | 2 +- .../streampipes/streampipes.component.html | 7 +- .../streampipes/streampipes.component.scss | 3 +- .../streampipes/streampipes.component.ts | 10 + .../core/components/toolbar/toolbar.component.ts | 1 + .../data-explorer-dashboard-panel.component.html | 2 +- .../pipeline-assembly.component.html | 2 +- .../pipeline-element-icon-stand.component.html | 5 +- .../pipeline-element-icon-stand.component.scss | 2 +- ui/src/app/editor/editor.component.html | 7 +- ui/src/app/editor/editor.component.scss | 4 + ui/src/scss/_variables.scss | 100 +++- ui/src/scss/main.scss | 5 - ui/src/scss/sp/animations.ng1.scss | 118 ---- ui/src/scss/sp/buttons.ng1.scss | 6 + ui/src/scss/sp/buttons.scss | 2 +- ui/src/scss/sp/colors.scss | 70 --- ui/src/scss/sp/input.ng1.scss | 88 --- ui/src/scss/sp/layout.scss | 1 + ui/src/scss/sp/main.scss | 619 +-------------------- ui/src/scss/sp/pipeline-assembly.scss | 17 - ui/{deployment => src/scss/sp}/sp-theme.scss | 68 +-- 26 files changed, 283 insertions(+), 998 deletions(-) diff --git a/ui/.gitignore b/ui/.gitignore index caa27ff0d..efee6ac97 100644 --- a/ui/.gitignore +++ b/ui/.gitignore @@ -30,7 +30,6 @@ src/app/core/components/base-navigation.component.ts src/assets/img/sp/logo.png src/assets/img/sp/logo-navigation.png src/assets/img/favicon/favicon-96x96.png -src/scss/sp/sp-theme.scss webpack.partial.dev.js # compiled output diff --git a/ui/deployment/_variables.scss b/ui/deployment/_variables.scss new file mode 100644 index 000000000..c8de0a5a4 --- /dev/null +++ b/ui/deployment/_variables.scss @@ -0,0 +1,132 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + */ + +$sp-color-primary: rgb(57, 181, 74); +$sp-color-primary-600: #06c12a; + +$sp-color-accent: #1b1464; + +$sp-color-accent-light-blue: rgb(59, 92, 149); +$sp-color-accent-light: rgb(156, 156, 156); +$sp-color-accent-light-transparent: rgba(156, 156, 156, 0.4); + +$sp-color-accent-dark: #83a3de; + +$sp-color-stream: #ffeb3b; +$sp-color-set: #ffa23b; +$sp-color-processor: #009688; +$sp-color-sink: #3f51b5; + +$sp-color-error: #b71c1c; + +body { + --color-data-view: rgb(122, 206, 227); + --color-dashboard: rgb(76, 115, 164); + --color-adapter: rgb(182, 140, 97); + --color-data-source: #ffa23b; + --color-pipeline: rgb(102, 185, 114); + --color-measurement: rgb(39, 164, 155); + --color-file: rgb(163, 98, 190); + + --button-border-radius: 5px; + --iconbar-width: 35px; + --navbar-icon-border-radius: 0; + --navbar-icon-padding: 0; +} + +:root { + --color-loading-bar: #{$sp-color-accent}; +} + +.dark-mode { + --color-primary: #{$sp-color-primary}; + --color-accent: #{$sp-color-accent-dark}; + --color-bg-outer: var(--color-bg-1); + --color-bg-page-container: var(--color-bg-0); + --color-bg-main-panel-header: var(--color-bg-0); + --color-bg-main-panel-content: var(--color-bg-0); + --color-bg-navbar-icon: inherit; + --color-bg-navbar-icon-selected: inherit; + --color-bg-0: #121212; + --color-bg-1: #282828; + --color-bg-2: #404040; + --color-bg-3: #424242; + --color-bg-4: #5f5f5f; + --color-bg-dialog: rgb(66, 66, 66); + --color-shadow: #c4c4c4; + --color-pe: #404040; + --color-default-text: rgba(255, 255, 255, 0.87); + --color-warn: #b36161; + + --color-tab-border: #cccccc; + + --color-navigation-bg: var(--color-primary); + --color-navigation-link-text: var(--color-bg-0); + --color-navigation-text: #121212; + --color-navigation-selected: #{$sp-color-primary}; + --color-navigation-hover: #{$sp-color-primary-600}; + --color-navigation-bg-selected: var(--color-bg-1); + --color-navigation-divider: #{$sp-color-primary}; + + --content-box-color: #404040; + --canvas-color: linear-gradient( + 90deg, + rgba(50, 50, 50, 0.5) 10%, + transparent 0% + ), + linear-gradient(rgba(50, 50, 50, 0.5) 10%, transparent 0%); +} + +.light-mode { + --color-primary: #{$sp-color-primary}; + --color-accent: #{$sp-color-accent}; + --color-bg-outer: var(--color-bg-1); + --color-bg-page-container: var(--color-bg-0); + --color-bg-main-panel-header: var(--color-bg-0); + --color-bg-main-panel-content: var(--color-bg-0); + --color-bg-navbar-icon: inherit; + --color-bg-navbar-icon-selected: inherit; + --color-bg-0: #ffffff; + --color-bg-1: #fafafa; + --color-bg-2: #f1f1f1; + --color-bg-3: rgb(224, 224, 224); + --color-bg-4: rgb(212, 212, 212); + --color-bg-dialog: #ffffff; + --color-shadow: #555; + --color-pe: #ffffff; + --color-default-text: #121212; + --color-warn: #b71c1c; + + --color-tab-border: #cccccc; + + --color-navigation-bg: var(--color-primary); + --color-navigation-link-text: var(--color-bg-0); + --color-navigation-text: #ffffff; + --color-navigation-selected: #{$sp-color-primary}; + --color-navigation-hover: #{$sp-color-primary-600}; + --color-navigation-bg-selected: var(--color-bg-1); + --color-navigation-divider: var(--color-primary); + + --content-box-color: rgb(156, 156, 156); + --canvas-color: linear-gradient( + 90deg, + rgba(208, 208, 208, 0.5) 10%, + transparent 0% + ), + linear-gradient(rgba(208, 208, 208, 0.5) 10%, transparent 0%); +} diff --git a/ui/deployment/prebuild.js b/ui/deployment/prebuild.js index e236e0d1f..c3455bcc8 100644 --- a/ui/deployment/prebuild.js +++ b/ui/deployment/prebuild.js @@ -120,8 +120,8 @@ fs.writeFileSync( fs.readFileSync('deployment/apps.ts'), ); fs.writeFileSync( - 'src/scss/sp/sp-theme.scss', - fs.readFileSync('deployment/sp-theme.scss'), + 'src/scss/_variables.scss', + fs.readFileSync('deployment/_variables.scss'), ); fs.writeFileSync( 'src/app/services/app.constants.ts', diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.scss b/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.scss index 634103995..ed922b94a 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.scss +++ b/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.scss @@ -32,17 +32,18 @@ } .sp-bg-lightgray { - background-color: var(--color-bg-1); + background-color: var(--color-bg-main-panel-header); } .sp-tab-bg { - background-color: var(--color-bg-1); + background-color: var(--color-bg-main-panel-header); } .page-container { margin: 10px; border: 1px solid var(--color-bg-3); min-height: calc(100vh - 90px); + background-color: var(--color-bg-main-panel-content); } .page-container-padding-inner { diff --git a/ui/src/app/core/components/iconbar/iconbar.component.scss b/ui/src/app/core/components/iconbar/iconbar.component.scss index 3c5c1cd93..57f257247 100644 --- a/ui/src/app/core/components/iconbar/iconbar.component.scss +++ b/ui/src/app/core/components/iconbar/iconbar.component.scss @@ -17,5 +17,5 @@ */ .iconbar-size { - width: 35px; + width: var(--iconbar-width); } diff --git a/ui/src/app/core/components/streampipes/streampipes.component.html b/ui/src/app/core/components/streampipes/streampipes.component.html index 5099262a2..1b78eef96 100644 --- a/ui/src/app/core/components/streampipes/streampipes.component.html +++ b/ui/src/app/core/components/streampipes/streampipes.component.html @@ -16,12 +16,15 @@ ~ --> -<div [ngClass]="darkMode ? 'dark-mode base-style' : 'light-mode base-style'"> +<div + [ngClass]="darkMode ? 'dark-mode base-style' : 'light-mode base-style'" + @fadeSlideInOut +> <div class="sp-toolbar-outer"> <sp-toolbar></sp-toolbar> </div> <div style="display: flex; flex-direction: row; height: calc(100vh - 40px)"> - <div style="width: 35px; color: white" class="iconbar"> + <div style="color: white" class="iconbar"> <sp-iconbar></sp-iconbar> </div> <div style="width: 100%; height: 100%; overflow-y: auto" class="base"> diff --git a/ui/src/app/core/components/streampipes/streampipes.component.scss b/ui/src/app/core/components/streampipes/streampipes.component.scss index 7d816cf2a..fafd7754b 100644 --- a/ui/src/app/core/components/streampipes/streampipes.component.scss +++ b/ui/src/app/core/components/streampipes/streampipes.component.scss @@ -20,11 +20,12 @@ .iconbar { background: var(--color-navigation-bg); + width: var(--iconbar-width); } .base { color: var(--color-default-text); - background: var(--color-bg-0); + background: var(--color-bg-outer); } .sp-toolbar-outer { diff --git a/ui/src/app/core/components/streampipes/streampipes.component.ts b/ui/src/app/core/components/streampipes/streampipes.component.ts index d6ee34903..c9d599eb8 100644 --- a/ui/src/app/core/components/streampipes/streampipes.component.ts +++ b/ui/src/app/core/components/streampipes/streampipes.component.ts @@ -18,11 +18,21 @@ import { Component, OnInit } from '@angular/core'; import { AuthService } from '../../../services/auth.service'; +import { animate, style, transition, trigger } from '@angular/animations'; @Component({ selector: 'sp-streampipes', templateUrl: './streampipes.component.html', styleUrls: ['./streampipes.component.scss'], + animations: [ + trigger('fadeSlideInOut', [ + transition(':enter', [ + style({ opacity: 0 }), + animate('1000ms', style({ opacity: 1 })), + ]), + transition(':leave', [animate('1000ms', style({ opacity: 0 }))]), + ]), + ], }) export class StreampipesComponent implements OnInit { darkMode: boolean; diff --git a/ui/src/app/core/components/toolbar/toolbar.component.ts b/ui/src/app/core/components/toolbar/toolbar.component.ts index a82edc822..85cb63269 100644 --- a/ui/src/app/core/components/toolbar/toolbar.component.ts +++ b/ui/src/app/core/components/toolbar/toolbar.component.ts @@ -85,6 +85,7 @@ export class ToolbarComponent this.profileService .getUserProfile(user.username) .subscribe(userInfo => { + this.authService.darkMode$.next(userInfo.darkMode); this.darkMode = this.authService.darkMode$.getValue(); this.modifyAppearance(userInfo.darkMode); }); diff --git a/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.html b/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.html index 14928a701..90d6db2b4 100644 --- a/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.html +++ b/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.html @@ -19,7 +19,7 @@ <div fxLayout="column" class="page-container"> <div fxLayout="column" fxFlex="100" *ngIf="dashboardLoaded"> <div - class="fixed-height data-explorer-options sp-tab-bg page-container-nav" + class="fixed-height data-explorer-options page-container-nav" fxLayout="row" > <div diff --git a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.html b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.html index 3b0b7a66c..afba6db58 100644 --- a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.html +++ b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.html @@ -17,7 +17,7 @@ --> <div fxFlex="100" fxLayout="column"> - <div class="pipeline-assembly-options sp-bg-lightgray page-container-nav"> + <div class="pipeline-assembly-options page-container-nav"> <div fxFlex="100" fxLayout="row" fxLayoutAlign="start center"> <button mat-button diff --git a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.html b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.html index 6b632de6a..02550e0d5 100644 --- a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.html +++ b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.html @@ -22,10 +22,7 @@ style="width: 250px" [attr.data-cy]="'sp-pipeline-element-selection'" > - <div - class="editorIconStandOptions sp-bg-lightgray page-container-nav" - style="padding: 0px" - > + <div class="editorIconStandOptions page-container-nav" style="padding: 0px"> <div fxFlex="100" fxLayout="row" diff --git a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.scss b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.scss index 76b298677..e6bb8bb5e 100644 --- a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.scss +++ b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.scss @@ -27,7 +27,7 @@ .icon-stand { max-height: calc(100vh - 148px); overflow-y: auto; - background: var(--color-bg-1); + //background: var(--color-bg-1); margin-top: 5px; } diff --git a/ui/src/app/editor/editor.component.html b/ui/src/app/editor/editor.component.html index ddd45dd0e..299937cb7 100644 --- a/ui/src/app/editor/editor.component.html +++ b/ui/src/app/editor/editor.component.html @@ -17,7 +17,12 @@ --> <div fxLayout="column" class="page-container"> - <div class="fixed-height" fxLayout="row" fxFlex="100"> + <div + class="fixed-height" + fxLayout="row" + fxFlex="100" + class="editor-container-inner" + > <div fxFlex="250px"> <div fxFlex="100" diff --git a/ui/src/app/editor/editor.component.scss b/ui/src/app/editor/editor.component.scss index 7eb1f8c3e..a2358c079 100644 --- a/ui/src/app/editor/editor.component.scss +++ b/ui/src/app/editor/editor.component.scss @@ -34,3 +34,7 @@ padding: 0; background-color: var(--color-bg-1); } + +.editor-container-inner { + background-color: var(--color-bg-1); +} diff --git a/ui/src/scss/_variables.scss b/ui/src/scss/_variables.scss index ff4e87ab7..6b7868710 100644 --- a/ui/src/scss/_variables.scss +++ b/ui/src/scss/_variables.scss @@ -16,13 +16,24 @@ * */ +/* + * + * DO NOT EDIT THIS FILE DIRECTLY + * USE THE TEMPLATE IN ui/deployment/_variables.scss to change the look and feel + * +*/ + $sp-color-primary: rgb(57, 181, 74); -$sp-color-primary-light: rgb(59, 205, 76); +$sp-color-primary-600: #06c12a; + $sp-color-accent: #1b1464; + $sp-color-accent-light-blue: rgb(59, 92, 149); $sp-color-accent-light: rgb(156, 156, 156); $sp-color-accent-light-transparent: rgba(156, 156, 156, 0.4); +$sp-color-accent-dark: #83a3de; + $sp-color-stream: #ffeb3b; $sp-color-set: #ffa23b; $sp-color-processor: #009688; @@ -38,4 +49,91 @@ body { --color-pipeline: rgb(102, 185, 114); --color-measurement: rgb(39, 164, 155); --color-file: rgb(163, 98, 190); + + --button-border-radius: 5px; + --iconbar-width: 35px; + --navbar-icon-border-radius: 0; + --navbar-icon-padding: 0; +} + +:root { + --color-loading-bar: #{$sp-color-accent}; +} + +.dark-mode { + --color-primary: #{$sp-color-primary}; + --color-accent: #{$sp-color-accent-dark}; + --color-bg-outer: var(--color-bg-1); + --color-bg-page-container: var(--color-bg-0); + --color-bg-main-panel-header: var(--color-bg-0); + --color-bg-main-panel-content: var(--color-bg-0); + --color-bg-navbar-icon: inherit; + --color-bg-navbar-icon-selected: inherit; + --color-bg-0: #121212; + --color-bg-1: #282828; + --color-bg-2: #404040; + --color-bg-3: #424242; + --color-bg-4: #5f5f5f; + --color-bg-dialog: rgb(66, 66, 66); + --color-shadow: #c4c4c4; + --color-pe: #404040; + --color-default-text: rgba(255, 255, 255, 0.87); + --color-warn: #b36161; + + --color-tab-border: #cccccc; + + --color-navigation-bg: var(--color-primary); + --color-navigation-link-text: var(--color-bg-0); + --color-navigation-text: #121212; + --color-navigation-selected: #{$sp-color-primary}; + --color-navigation-hover: #{$sp-color-primary-600}; + --color-navigation-bg-selected: var(--color-bg-1); + --color-navigation-divider: #{$sp-color-primary}; + + --content-box-color: #404040; + --canvas-color: linear-gradient( + 90deg, + rgba(50, 50, 50, 0.5) 10%, + transparent 0% + ), + linear-gradient(rgba(50, 50, 50, 0.5) 10%, transparent 0%); +} + +.light-mode { + --color-primary: #{$sp-color-primary}; + --color-accent: #{$sp-color-accent}; + --color-bg-outer: var(--color-bg-1); + --color-bg-page-container: var(--color-bg-0); + --color-bg-main-panel-header: var(--color-bg-0); + --color-bg-main-panel-content: var(--color-bg-0); + --color-bg-navbar-icon: inherit; + --color-bg-navbar-icon-selected: inherit; + --color-bg-0: #ffffff; + --color-bg-1: #fafafa; + --color-bg-2: #f1f1f1; + --color-bg-3: rgb(224, 224, 224); + --color-bg-4: rgb(212, 212, 212); + --color-bg-dialog: #ffffff; + --color-shadow: #555; + --color-pe: #ffffff; + --color-default-text: #121212; + --color-warn: #b71c1c; + + --color-tab-border: #cccccc; + + --color-navigation-bg: var(--color-primary); + --color-navigation-link-text: var(--color-bg-0); + --color-navigation-text: #ffffff; + --color-navigation-selected: #{$sp-color-primary}; + --color-navigation-hover: #{$sp-color-primary-600}; + --color-navigation-bg-selected: var(--color-bg-1); + --color-navigation-divider: var(--color-primary); + + --content-box-color: rgb(156, 156, 156); + --canvas-color: linear-gradient( + 90deg, + rgba(208, 208, 208, 0.5) 10%, + transparent 0% + ), + linear-gradient(rgba(208, 208, 208, 0.5) 10%, transparent 0%); } diff --git a/ui/src/scss/main.scss b/ui/src/scss/main.scss index 95757a391..fb968e3d7 100644 --- a/ui/src/scss/main.scss +++ b/ui/src/scss/main.scss @@ -16,8 +16,6 @@ * */ -@import './_variables'; - @import '~@circlon/angular-tree-component/css/angular-tree-component.css'; @import '~datatables.net-dt/css/jquery.dataTables.css'; @import '~@fortawesome/fontawesome-free/css/all.css'; @@ -46,18 +44,15 @@ @import './sp/pipeline-element-loading'; @import './sp/pipeline-element'; @import './sp/pipeline-validation'; -@import './sp/animations.ng1'; @import './sp/mat-tab'; @import './sp/dialog.ng5'; @import './sp/feedback.ng1'; -@import './sp/pipeline-assembly.scss'; @import './sp/widgets.scss'; @import './sp/progress-bar.scss'; @import './sp/jsplumb'; @import './sp/layout'; -@import './sp/input.ng1'; @import './sp/documentation.ng1'; @import './sp/stepper'; diff --git a/ui/src/scss/sp/animations.ng1.scss b/ui/src/scss/sp/animations.ng1.scss deleted file mode 100644 index 3979246cc..000000000 --- a/ui/src/scss/sp/animations.ng1.scss +++ /dev/null @@ -1,118 +0,0 @@ -/*! - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - */ - -@keyframes appear { - from { - opacity: 0; - } - to { - opacity: 1; - } -} -@keyframes disappear { - from { - opacity: 1; - } - to { - opacity: 0; - } -} - -@keyframes appear-opacity { - from { - opacity: 0; - } - to { - opacity: 0.8; - } -} -@keyframes disappear-opacity { - from { - opacity: 0.8; - } - to { - opacity: 0; - } -} - -@keyframes move-top-enter { - from { - top: 100vh; - } - to { - top: 0vh; - } -} -@keyframes move-top-leave { - from { - top: 0vh; - } - to { - top: -100vh; - } -} - -.sp-move-top.ng-enter { - position: absolute; - width: 100%; - animation: 0.75s move-top-enter; -} - -.sp-move-top.ng-leave { - position: absolute; - width: 100%; - animation: 0.75s move-top-leave; -} - -.sp-fade-opacity.ng-enter { - animation: 2s appear-opacity; -} - -.sp-fade-opacity.ng-leave { - animation: 1s disappear-opacity; -} - -.sp-fade-options.ng-hide { - animation: 0.5s disappear; -} - -.sp-fade.ng-enter { - animation: 2s appear; -} - -.sp-fade.ng-leave { - animation: 1s disappear; -} - -.sp-fade.ng-leave.ng-leave-active, -.sp-fade.ng-move, -.sp-fade.ng-enter { - opacity: 0; - max-height: 0; -} - -.sp-fade.ng-leave, -.sp-fade.ng-move.ng-move-active, -.sp-fade.ng-enter.ng-enter-active { - opacity: 1; - max-height: 20px; -} - -.sp-fade-only-enter.ng-enter { - animation: 1s appear; -} diff --git a/ui/src/scss/sp/buttons.ng1.scss b/ui/src/scss/sp/buttons.ng1.scss index d4843c30a..5c2901268 100644 --- a/ui/src/scss/sp/buttons.ng1.scss +++ b/ui/src/scss/sp/buttons.ng1.scss @@ -35,10 +35,16 @@ .sp-navbar-icon { color: var(--color-navigation-link-text); + background: var(--color-bg-navbar-icon); + padding: var(--navbar-icon-padding); + border-radius: var(--navbar-icon-border-radius); } .sp-navbar-icon-selected { color: var(--color-navigation-selected); + background: var(--color-bg-navbar-icon-selected); + padding: var(--navbar-icon-padding); + border-radius: var(--navbar-icon-border-radius); } .sp-icon-button:hover { diff --git a/ui/src/scss/sp/buttons.scss b/ui/src/scss/sp/buttons.scss index 98c163aed..e6446866f 100644 --- a/ui/src/scss/sp/buttons.scss +++ b/ui/src/scss/sp/buttons.scss @@ -30,7 +30,7 @@ display: inline-block; vertical-align: middle; border: 0; - border-radius: 3px; + border-radius: var(--button-border-radius) !important; cursor: pointer; font-family: inherit; font-weight: bold; diff --git a/ui/src/scss/sp/colors.scss b/ui/src/scss/sp/colors.scss index 5ee9e14c2..632700c4c 100644 --- a/ui/src/scss/sp/colors.scss +++ b/ui/src/scss/sp/colors.scss @@ -18,66 +18,12 @@ @import '../_variables'; -.sp-darkblue { - background: var(--color-primary); -} - -.sp-darkblue-text { - color: var(--color-primary); -} - -.sp-darkblue-border { - border: 1px solid var(--color-primary); -} - -.sp-blue-100-border { - border: 2px solid rgb(63, 81, 181); -} - -.sp-gray-border { - border: 2px solid #cccccc; -} - -.sp-blue { - color: var(--content-box-color); -} - .sp-blue-bg { background: var(--content-box-color); } -.sp-border-round { - border-radius: 5px 5px 0px 0px; -} - .sp-blue-border { border: 3px solid var(--content-box-color); - //padding-top:20px; - //padding-bottom:20px; -} - -.sp-border-left-accent-light { - border-left: 2px solid var(--content-box-color); -} - -.sp-blue-border-nopadding { - border: 3px solid var(--content-box-color); -} - -.sp-lightblue { - color: #d9e8f5; -} - -.sp-white { - color: #ffffff; -} - -.sp-green { - color: var(--color-accent); -} - -.sp-darkgreen { - color: #007f54; } .sp-accent { @@ -88,22 +34,6 @@ background: var(--color-accent); } -.sp-primary { - color: var(--color-primary); -} - -.sp-primary-bg { - background: var(--color-primary); -} - -.sp-accent-light { - color: var(--content-box-color); -} - -.sp-primary-border-1px { - border: 1px solid $sp-color-primary; -} - .sp-bg-lightgray { background-color: var(--color-bg-1); } diff --git a/ui/src/scss/sp/input.ng1.scss b/ui/src/scss/sp/input.ng1.scss deleted file mode 100644 index 0e17a979a..000000000 --- a/ui/src/scss/sp/input.ng1.scss +++ /dev/null @@ -1,88 +0,0 @@ -/*! - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - */ - -@import '../_variables'; - -md-input-container { - margin: 5px; -} - -md-input-container.sp .md-input { - border: 2px solid $sp-color-accent; - border-radius: 3px; - background: #f6f6f6; -} - -md-input-container.sp.md-input-invalid { - border-radius: 3px; -} - -md-input-container.sp.md-input-invalid .md-input { - border: 2px solid $sp-color-error; - border-radius: 3px; - background: white; -} - -md-input-container.sp { - border-radius: 3px; -} - -md-input-container.sp.md-input-focused.md-input-invalid { - background: $sp-color-error; -} - -md-input-container.sp.md-input-focused { - background: $sp-color-accent; - -webkit-transition: background cubic-bezier(0.25, 0.8, 0.25, 1) 0.6s, - -webkit-transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.6s; - transition: background cubic-bezier(0.25, 0.8, 0.25, 1) 0.6s, - -webkit-transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.6s; - transition: transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.6s, - background cubic-bezier(0.25, 0.8, 0.25, 1) 0.6s; - transition: transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.6s, - background cubic-bezier(0.25, 0.8, 0.25, 1) 0.6s, - -webkit-transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.6s; -} - -md-input-container.sp label:not(.md-no-float) { - //transform: translate3d(0, -28px, 0) scale(1); -} - -md-input-container.sp.md-input-focused label:not(.md-no-float), -md-input-container.sp.md-input-has-placeholder label:not(.md-no-float), -md-input-container.sp.md-input-has-value label:not(.md-no-float) { - -webkit-transform: translate3d(0, 55px, 0) scale(0.75); - color: white; -} - -md-input-container.sp label:not(.md-container-ignore).md-required:after { - color: white; -} - -md-input-container.sp.md-input-focused .md-input { - border-width: 2px; -} - -md-input-container.sp label:not(.md-no-float):not(.md-container-ignore), -md-input-container.sp .md-placeholder { - padding-left: 10px; -} - -label { - margin-bottom: 0px; -} diff --git a/ui/src/scss/sp/layout.scss b/ui/src/scss/sp/layout.scss index 1a73cdf87..a51428f58 100644 --- a/ui/src/scss/sp/layout.scss +++ b/ui/src/scss/sp/layout.scss @@ -116,6 +116,7 @@ line-height: 24px; height: 50px; border-bottom: 1px solid var(--color-bg-3); + background: var(--color-bg-main-panel-header); } .text-center { diff --git a/ui/src/scss/sp/main.scss b/ui/src/scss/sp/main.scss index a7480832f..61cadfbca 100644 --- a/ui/src/scss/sp/main.scss +++ b/ui/src/scss/sp/main.scss @@ -84,15 +84,6 @@ pre[class*='language-'] { 0px 5px 24px 4px rgba(0, 0, 0, 0.12); } -md-dialog.colored-frame { - border-top: 4px solid $sp-color-primary; - border-radius: 10px; -} - -md-dialog-actions { - border-top: 1px solid #cccccc; -} - .mat-step-header .mat-step-icon { background-color: $sp-color-accent; } @@ -107,7 +98,6 @@ md-dialog-actions { top: -100px; border-radius: 50%; pointer-events: none; - /*margin-left: -13em;*/ -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; @@ -121,20 +111,6 @@ md-dialog-actions { visibility: visible; } -/*.cv-wrapper li {*/ -/*margin-left: -40px;*/ -/*margin-top: -40px;*/ -/*width: 190px;*/ -/*height: 190px;*/ -/*position: absolute;*/ -/*left: -0px;*/ -/*top: -0px;*/ -/*background: lightgrey;*/ -/*opacity: 0.7;*/ -/*transform-origin: 100% 100%;*/ -/*overflow:hidden;*/ -/*}*/ - .cv-wrapper li { pointer-events: all; position: absolute; @@ -147,8 +123,6 @@ md-dialog-actions { overflow: hidden; left: 0%; top: 0%; - /*margin-top: -20px;*/ - /*margin-left: -20px;*/ -webkit-transition: border 0.3s ease; -moz-transition: border 0.3s ease; transition: border 0.3s ease; @@ -166,8 +140,6 @@ md-dialog-actions { bottom: -150px; border-radius: 50%; text-decoration: none; - /*color: #fff;*/ - /*padding-top: 1.8em;*/ text-align: center; -webkit-backface-visibility: hidden; -webkit-transition: opacity 0.3s, color 0.3s; @@ -191,12 +163,6 @@ md-dialog-actions { background-color: #4f65e6; } -/*!* active style *!*/ -/*.cv-wrapper li.active a {*/ -/*background-color: #b31515;*/ -/*background-color: hsla(0, 88%, 70%, 1);*/ -/*}*/ - /* hover style */ .cv-wrapper li a:hover, .cv-wrapper li a:active, @@ -217,67 +183,6 @@ md-toolbar:not(.md-menu-toolbar) { font-family: Arial !important; } -.home-image-wrapper { - margin-bottom: 10px; - cursor: pointer; -} - -.home-image { - opacity: 0.6; - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - background-color: rgba(114, 160, 178, 0.8); - background-size: cover; -} - -.home-image:hover { - opacity: 1; -} - -.home-image-caption { - top: 0px; - padding: 5px; - margin-bottom: 0px; - text-align: center; - color: white; - opacity: 0.9; -} - -.btn-6a { - border: 4px solid #226fbe; -} - -.btn-6 { - color: #fff; - background: #226fbe; - -webkit-transition: none; - -moz-transition: none; - transition: none; -} - -.btn-t { - border: none; - font-family: inherit; - font-size: inherit; - color: inherit; - background: none; - cursor: pointer; - padding: 25px 80px; - display: inline-block; - margin: 15px 30px; - text-transform: uppercase; - letter-spacing: 1px; - font-weight: 700; - outline: none; - position: relative; - -webkit-transition: all 0.3s; - -moz-transition: all 0.3s; - transition: all 0.3s; -} - .angular-notifications-container { left: -7px !important; } @@ -318,58 +223,11 @@ md-content { background: #fff !important; } -.current-nav-page-box { - //margin-top: 25px; - //position: relative; - //z-index: 1; - white-space: nowrap; - align-items: end; - margin-top: 1px; -} - -.current-nav-page-content { - position: relative; - display: inline-block; - padding: 1.5em 1.5em 1em; - color: inherit; - text-decoration: none; - margin: 0 -7px; - top: -10px; - height: 40px; -} - -.current-nav-page-content::before { - content: ''; /* To generate the box */ - position: absolute; - top: 0; - right: 0; - bottom: 0.5em; - left: 0; - z-index: -1; - border-radius: 10px 10px 0 0; - background: #fff; - box-shadow: 0 2px #fff inset; - transform: perspective(4px) rotateX(-1deg); - transform-origin: bottom; - //height: calc(100% - 20px); - border: 0px solid $sp-color-accent; - border-bottom: 0.1em none #fff; -} - -.current-nav-page { - padding: 10px; - border-bottom: 2px solid #304269; - display: inline-block; - margin-top: 20px; - background: white; - border-bottom: 0px; -} - .page-container { margin: 10px; border: 1px solid var(--color-bg-3); min-height: calc(100% - 60px); - //height: 100%; + background: var(--color-bg-page-container); } .sp-full-height { @@ -411,29 +269,11 @@ md-content { border-bottom-right-radius: 20em; } -md-toolbar.top-nav { - min-height: 40px !important; -} - .top-nav { height: 40px !important; border-bottom: 0px solid $sp-color-accent; } -md-list-item > .md-button { - padding: 0px; - min-width: 0px; -} - -md-list-item.md-no-proxy, -md-list-item .md-no-style { - padding: 0px 7px !important; -} - -md-list-item._md-button-wrap > div.md-button:first-child { - padding: 0px 7px !important; -} - .angular-google-map-container { height: 400px; } @@ -489,28 +329,6 @@ md-list-item._md-button-wrap > div.md-button:first-child { justify-content: center; } -.centered { - align-items: center; - justify-content: center; - padding: 5px; -} - -.md-padding-left { - padding-left: 16px; -} - -md-input-container.md-default-theme label, -md-input-container label, -md-input-container.md-default-theme .md-placeholder, -md-input-container .md-placeholder { - color: rgba(0, 0, 0, 0.66); -} - -md-select.md-default-theme .md-select-value.md-select-placeholder, -md-select .md-select-value.md-select-placeholder { - color: rgba(0, 0, 0, 0.66); -} - .wizard-row:before { top: 210px; bottom: 0; @@ -578,15 +396,6 @@ md-select .md-select-value.md-select-placeholder { 0px 2px 4px -1px rgba(0, 0, 0, 0.12); } -.logo-production { - background: url('/assets/img/login/background.png') no-repeat center center - fixed; - -webkit-background-size: cover; - -moz-background-size: cover; - -o-background-size: cover; - background-size: cover; -} - .circle { border-radius: 50%; width: 150px; @@ -597,15 +406,6 @@ md-select .md-select-value.md-select-placeholder { text-align: center; } -.md-dialog-container, -md-backdrop { - position: fixed; -} - -.md-dialog-is-showing { - overflow: visible; -} - .panel-margin { margin: 10px; padding: 10px; @@ -620,66 +420,6 @@ md-backdrop { padding: 10px; } -.customize-item-title { - /* background: rgb(140,158,255); */ - color: white; - font-size: 12pt; - padding: 5px; -} - -.customize-item-main-help { - border: 2px solid $sp-color-accent; - border-radius: 5px; - margin: 5px; -} - -.customize-item-title-help { - background: $sp-color-accent; - color: white; - font-size: 12pt; - padding: 5px; -} - -.ontology-panel-main { - margin-top: 5px; - margin-bottom: 5px; - border-radius: 0px; -} - -.ontology-panel-title { - padding: 5px; - font-size: 16pt; - color: #ffffff; -} - -.ontology-panel-title-property { - background: #009688; -} - -.ontology-panel-property { - border: 1px solid #009688; -} - -.ontology-panel-pipeline-configurator { - border: 1px solid rgb(63, 81, 181); -} - -.ontology-panel-title-concept { - background: #f9a825; -} - -.ontology-panel-concept { - border: 1px solid #f9a825; -} - -.ontology-panel-title-instance { - background: #9c27b0; -} - -.ontology-panel-instance { - border: 1px solid #9c27b0; -} - .tree-node-title { color: black; padding: 3px; @@ -699,21 +439,6 @@ md-backdrop { margin: 5px; } -.color-instance { - background: #f3e5f5; - border: 1px solid #9c27b0; -} - -.color-concept { - background: #fffde7; - border: 1px solid #f9a825; -} - -.color-property { - background: #f8faff; - border: 1px solid #009688; -} - .sidebar-badge { display: inline-block; min-width: 24px; @@ -731,25 +456,7 @@ md-backdrop { vertical-align: middle; } -.panel-sources { - background: #b2dfdb; -} - -.panel-streams { - background: #b2ebf2; -} - -.panel-actions { - background: #ef9a9a; -} - -.content-padding { - padding-left: 5%; - padding-right: 5%; -} - #sources { - /*margin-left: 5%;*/ width: 100%; height: 100px; margin-top: 1%; @@ -765,15 +472,12 @@ md-backdrop { line-height: 90px; margin-left: 3%; margin-right: 3%; - /*padding: .5vh;*/ vertical-align: middle; cursor: pointer; text-align: center; } .clickable-img { - /*margin-top: 14%;*/ - /*margin-right: auto;*/ height: 80px; width: 80px; margin-bottom: 0; @@ -849,24 +553,19 @@ md-backdrop { } .draggable-img { - /*font-size: 60px;*/ - /*margin-top: 14%;*/ height: 50px; width: 50px; - /*margin-bottom: 0;*/ color: #d22; } .sepa > .draggable-img { height: 70px; width: 70px; - /*margin-top: 5px;*/ } .sepa > p > .draggable-img { height: 70px; width: 70px; - /*margin-top: 5px;*/ } .ui-selectable-helper { @@ -878,7 +577,6 @@ md-backdrop { } .draggable-img-dragging { - /*margin-left: 14%;*/ position: absolute; } @@ -890,26 +588,20 @@ md-backdrop { .assemblyOptions { color: white; padding: 5px; - //box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12); margin-top: 1%; } .assembly-options-preview { color: white; padding: 5px; - //box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12); } .editorIconStandOptions { - /* background: white; */ - /* border: 2px solid rgb(63,81,181);; */ - /* border-bottom: 2px solid rgb(63,81,181); */ color: black; background: var(--color-bg-1); border-bottom: 1px solid var(--color-bg-3); padding: 0px; width: 100%; - /* margin-top: 1%; */ } .outer-assembly-preview { @@ -941,37 +633,10 @@ md-backdrop { z-index: 0; } -#pipelineDisplay { - margin-top: 100px; - height: 500px; - box-shadow: 0 0 15px #333; - position: relative; - background: white; -} - -.pipeline-display { - height: 300px; -} - .shadow { box-shadow: 0 0 5px #333; } -/*.nav-tabs{ - border-bottom: 0px; -} - -.navbar{ - min-height: 40px; - height: 40px; -} -.container-fluid { - min-height: 40px; -} - -.nav{ - height:40px; -}*/ ._jsPlumb_endpoint { z-index: -1; } @@ -1028,15 +693,6 @@ md-backdrop { width: 72%; } -/*.action>.connectable-img {*/ -/*margin-top: 8.5%;*/ -/*margin-left: 8.5%;*/ -/*}*/ -/*.action>p>.connectable-img {*/ -/*margin-top: 10.5%;*/ -/*margin-left: 10.5%; -}*/ - .element-container { position: relative; } @@ -1131,72 +787,11 @@ ul.circleMenu-closed { padding: 3px; } -/*Finetuning für größe nötig*/ - -#addTextInput { - margin-top: 5%; - width: 80%; - margin-left: 10%; - margin-right: 10%; -} - -.sse-working { - color: black; -} - -.sse-success { - color: #33dd33; -} - -.sse-error { - color: #dd3333; -} - .wrapper { width: 100%; margin-bottom: 10%; } -#navbar { - color: #000000; -} - -#navbar:active { - color: #000000; -} - -#login-form-dropdown { - padding: 10px; - background: #ffffff; /* Old browsers */ - background: -moz-linear-gradient(top, #ffffff 0%, #eee 100%); /* FF3.6+ */ - background: -webkit-gradient( - linear, - left top, - left bottom, - color-stop(0%, #ffffff), - color-stop(100%, #eee) - ); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient( - top, - #ffffff 0%, - #eee 100% - ); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient( - top, - #ffffff 0%, - #eee 100% - ); /* Opera 11.10+ */ - background: -ms-linear-gradient(top, #ffffff 0%, #eee 100%); /* IE10+ */ - background: linear-gradient(to bottom, #ffffff 0%, #eee 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eee', GradientType=0); /* IE6-9 */ - - max-width: 20vw; - max-height: 25vh; - - min-width: 280px; - min-height: 200px; -} - .panel-body { padding: 0; width: 100%; @@ -1207,12 +802,6 @@ h4.panel-title { line-height: 1.5; } -.btngroup { - position: relative; - - vertical-align: middle; -} - .disabled { /*opacity : 0.3;*/ border: 2px solid red; @@ -1229,185 +818,14 @@ h4.panel-title { stroke-width: 4; } -#accordion { - width: 100%; - /*margin-left: 5%;*/ -} - td { vertical-align: middle !important; } -.hoverable { - opacity: 0.2; -} - -.hoverable:hover { - cursor: pointer; - opacity: 0.5; -} - -#pipelineList { - padding-top: 100px; -} - -#streamDisplay { - padding: 5px 0 5px 5px; - display: inline-block; - width: 20%; - height: 100%; - position: relative; -} - -#sepaDisplay { - padding: 5px 0 5px 0; - display: inline-block; - width: 60%; - height: 100%; - position: relative; -} - -#actionDisplay { - padding: 5px 5px 5px 0; - display: inline-block; - width: 19%; - height: 100%; - position: relative; -} - -#savedOptions { - padding-top: 30px; -} - textarea { resize: none; } -#adjustString { - font-size: 30px; - color: #666; - opacity: 0.5; - position: absolute; - - width: 100%; - text-align: center; -} - -.connectable-block { - position: absolute; - cursor: pointer; - height: 180px; - width: 150px; - background: white; - border-radius: 5px; - box-shadow: -2px 2px 5px rgb(153, 153, 153); - border: 1px solid rgb(153, 153, 153); -} - -.block-name { - font-size: 20px; - /*height: 30px;*/ - vertical-align: middle; - text-align: center; - border-bottom: 1px solid #cccccc; -} - -.block-img-container { - height: 150px; - width: 150px; - padding: 25px; - /*border-top: 3px solid rgb(51, 51, 51);*/ -} - -.block-img { - height: 100px; - width: 100px; -} - -.ui-autocomplete-input { - border: none; - font-size: 14px; - border: 1px solid #ddd !important; - padding-top: 0px !important; - z-index: 1511; - position: relative; -} - -.ui-menu .ui-menu-item a { - font-size: 12px; -} - -.ui-autocomplete { - position: absolute; - top: 0; - left: 0; - z-index: 1510 !important; - float: left; - display: none; - min-width: 160px; - width: 160px; - padding: 4px 0; - margin: 2px 0 0 0; - list-style: none; - background-color: #ffffff; - border-color: #ccc; - border-color: rgba(0, 0, 0, 0.2); - border-style: solid; - border-width: 1px; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - border-radius: 2px; - -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); - -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); - box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; - *border-right-width: 2px; - *border-bottom-width: 2px; -} - -.ui-menu-item > a.ui-corner-all { - display: block; - padding: 3px 15px; - clear: both; - font-weight: normal; - line-height: 18px; - color: #555555; - white-space: nowrap; - text-decoration: none; -} - -.ui-state-hover, -.ui-state-active { - color: #ffffff; - text-decoration: none; - background-color: #0088cc; - border-radius: 0px; - -webkit-border-radius: 0px; - -moz-border-radius: 0px; - background-image: none; -} - -#modalIns { - width: 500px; -} - -button.md-button.md-icon-button { - line-height: normal; -} - -.toolbar-icon { - height: 48px; - width: 48px; - margin-left: 10px; -} - -md-list .md-button { - width: 100%; - /*text-align: start;*/ -} - .element-text-icon { font-size: 20px; } @@ -1416,37 +834,6 @@ md-list .md-button { font-size: 18px; } -.pipeline-display-element { - height: 80px; - width: 80px; - display: block; - vertical-align: middle; - background-color: white; - line-height: 80px; - text-align: center; - margin-left: auto; - margin-right: auto; - font-size: 30px; - margin-top: 10px; -} - -.pipeline-display-element-img { - height: 72%; - width: 72%; -} - -.pipeline-active { - background-color: #5533dd33; -} - -.position-fixed { - position: fixed; -} - -.dropdown-menu { - cursor: pointer; -} - .property-selection { padding: 3px; padding-left: 10px; @@ -1455,3 +842,7 @@ md-list .md-button { background: #dfdfdf5e; border-left: 1px solid $sp-color-accent; } + +label { + margin-bottom: 0px; +} diff --git a/ui/src/scss/sp/pipeline-assembly.scss b/ui/src/scss/sp/pipeline-assembly.scss deleted file mode 100644 index e280dd74d..000000000 --- a/ui/src/scss/sp/pipeline-assembly.scss +++ /dev/null @@ -1,17 +0,0 @@ -/*! - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - */ diff --git a/ui/deployment/sp-theme.scss b/ui/src/scss/sp/sp-theme.scss similarity index 71% rename from ui/deployment/sp-theme.scss rename to ui/src/scss/sp/sp-theme.scss index 97f462cd8..8f7d5f47a 100644 --- a/ui/deployment/sp-theme.scss +++ b/ui/src/scss/sp/sp-theme.scss @@ -100,7 +100,7 @@ $mat-streampipes-accent-dark: ( 200: #4e3c93, 300: #2a0c9a, 400: #395481, - 500: #83a3de, + 500: $sp-color-accent-dark, 600: #0303a3, 700: #01016a, 800: #000039, @@ -173,10 +173,6 @@ $accent: map-get($custom-theme-light, accent); font-size: 11pt; } -:root { - --color-loading-bar: #{mat-color($accent)}; -} - .dark-mode { @include angular-material-theme($custom-theme-dark); @@ -206,37 +202,6 @@ $accent: map-get($custom-theme-light, accent); background-color: rgba(255, 255, 255, 0.87); font-size: 12px; } - - --color-primary: #{mat-color($primary)}; - --color-accent: #{mat-color($accent-dark)}; - --color-bg-0: #121212; - --color-bg-1: #282828; - --color-bg-2: #404040; - --color-bg-3: #424242; - --color-bg-4: #5f5f5f; - --color-bg-dialog: rgb(66, 66, 66); - --color-shadow: #c4c4c4; - --color-pe: #404040; - --color-default-text: rgba(255, 255, 255, 0.87); - --color-warn: #b36161; - - --color-tab-border: #cccccc; - - --color-navigation-bg: #{mat-color($primary)}; - --color-navigation-link-text: #121212; - --color-navigation-text: #121212; - --color-navigation-selected: #{mat-color($primary)}; - --color-navigation-hover: #{mat-color($primary, 600)}; - --color-navigation-bg-selected: #121212; - --color-navigation-divider: #{mat-color($primary)}; - - --content-box-color: #404040; - --canvas-color: linear-gradient( - 90deg, - rgba(50, 50, 50, 0.5) 10%, - transparent 0% - ), - linear-gradient(rgba(50, 50, 50, 0.5) 10%, transparent 0%); } .light-mode { @@ -259,35 +224,4 @@ $accent: map-get($custom-theme-light, accent); .mat-button-toggle-appearance-standard .mat-button-toggle-label-content { line-height: 30px; } - - --color-primary: #{mat-color($primary)}; - --color-accent: #{mat-color($accent)}; - --color-bg-0: #ffffff; - --color-bg-1: #fafafa; - --color-bg-2: #f1f1f1; - --color-bg-3: rgb(224, 224, 224); - --color-bg-4: rgb(212, 212, 212); - --color-bg-dialog: #ffffff; - --color-shadow: #555; - --color-pe: #ffffff; - --color-default-text: #121212; - --color-warn: #b71c1c; - - --color-tab-border: #cccccc; - - --color-navigation-bg: #{mat-color($primary)}; - --color-navigation-link-text: #ffffff; - --color-navigation-text: #ffffff; - --color-navigation-selected: #{mat-color($primary)}; - --color-navigation-hover: #{mat-color($primary, 600)}; - --color-navigation-bg-selected: #ffffff; - --color-navigation-divider: #{mat-color($primary)}; - - --content-box-color: rgb(156, 156, 156); - --canvas-color: linear-gradient( - 90deg, - rgba(208, 208, 208, 0.5) 10%, - transparent 0% - ), - linear-gradient(rgba(208, 208, 208, 0.5) 10%, transparent 0%); }
