From 230851959642435bb4c4c32168ef19c68366ff65 Mon Sep 17 00:00:00 2001 From: Yogi_Wang Date: Mon, 6 Jan 2020 17:52:43 +0800 Subject: [PATCH] Refactor styles.css 1.refactor styles.css 2.modify theme mode 3.fix bug #9939 Signed-off-by: Yogi_Wang --- src/portal/angular.json | 4 +- .../app/config/auth/config-auth.component.ts | 1 + .../project/scanner/scanner.component.scss | 1 - src/portal/src/css/common.scss | 109 ++++++++++++++- src/portal/src/css/dark-theme.scss | 127 +++--------------- src/portal/src/css/light-theme.scss | 22 ++- src/portal/src/global.scss | 119 ++++++++++++++++ .../vulnerability-config.component.scss | 1 - .../create-edit-rule.component.scss | 2 - .../operation/operation.component.css | 2 - .../project-policy-config.component.scss | 1 - .../replication-tasks.component.scss | 1 - .../repository/repository.component.scss | 1 - .../src/lib/components/tag/tag.component.scss | 1 - .../result-tip-histogram.component.scss | 4 - src/portal/src/styles.css | 111 --------------- 16 files changed, 265 insertions(+), 242 deletions(-) delete mode 100644 src/portal/src/styles.css diff --git a/src/portal/angular.json b/src/portal/angular.json index 18f5ba6ea..4a7aabfd2 100644 --- a/src/portal/angular.json +++ b/src/portal/angular.json @@ -28,7 +28,6 @@ "node_modules/swagger-ui/dist/swagger-ui.css", "node_modules/prismjs/themes/prism-solarizedlight.css", "src/global.scss", - "src/styles.css", { "input": "src/css/dark-theme.scss", "bundleName": "dark-theme", @@ -108,8 +107,7 @@ "styles": [ "node_modules/@clr/icons/clr-icons.min.css", "node_modules/@clr/ui/clr-ui.min.css", - "node_modules/prismjs/themes/prism-solarizedlight.css", - "src/styles.css" + "node_modules/prismjs/themes/prism-solarizedlight.css" ], "assets": [ "src/images", diff --git a/src/portal/src/app/config/auth/config-auth.component.ts b/src/portal/src/app/config/auth/config-auth.component.ts index a49009ef0..b3affd1ea 100644 --- a/src/portal/src/app/config/auth/config-auth.component.ts +++ b/src/portal/src/app/config/auth/config-auth.component.ts @@ -156,6 +156,7 @@ export class ConfigurationAuthComponent implements OnChanges, OnInit { settings['verify_cert'] = this.currentConfig[prop].value; } } + this.testingOnGoing = true; this.configService.testOIDCServer(settings) .subscribe(respone => { this.testingOnGoing = false; diff --git a/src/portal/src/app/project/scanner/scanner.component.scss b/src/portal/src/app/project/scanner/scanner.component.scss index c27d8e614..a07114414 100644 --- a/src/portal/src/app/project/scanner/scanner.component.scss +++ b/src/portal/src/app/project/scanner/scanner.component.scss @@ -1,6 +1,5 @@ .scanner-name { height: 1rem; - color: #000; display: inline-block; padding: 0 .25rem; max-height: 1rem; diff --git a/src/portal/src/css/common.scss b/src/portal/src/css/common.scss index 06c40fdf5..24f620b5b 100644 --- a/src/portal/src/css/common.scss +++ b/src/portal/src/css/common.scss @@ -3,9 +3,116 @@ .tabs-overflow { > .nav-item { > button { - box-shadow: 0 -3px 0 $dark-active-tab-color inset; + box-shadow: 0 -3px 0 $mode-link-color2 inset; color: 0077b8; } } } +} +.label-form { + background-color: $label-form-color !important; +} +.esxc-gauge-circle-bgc-dark { + background-color: $mode-background-color1 ; +} + +.harbor-icon { + filter: drop-shadow($fill-color1 58px 2px) !important; +} + +.color-white-dark { + color: $right-status-fill-color; +} + +.label-filter-panel { + background-color: $mode-background-color !important; +} + +.filter-dark { + color: $mode-font-color1 !important; +} +.side-form { + background-color: $mode-background-color !important; +} +.toolBar { + background-color: $mode-background-color !important; +} + +.search-overlay { + background-color: $mode-background-color2 !important; +} + +.add-modal-dark { + background: $mode-background-color3 !important; +} +.license { + background-color: $mode-background-color !important; +} + +.pagination-list { + .pagination-current { + color: $mode-font-color1 !important; + } +} +.no-info-div, +.info-div { + background-color: $mode-background-color !important; +} +.bottom-line-project-config { + color: $mode-font-color3 !important; +} +.config-subtext { + color: $mode-font-color4 !important; +} +.permission-dark { + color: $mode-font-color3 !important; +} +.scanner-name { + color: $mode-font-color3 !important; +} +.summary-dark { + color: $mode-font-color3 !important; + h5 { + color: $mode-font-color3 !important; + } +} +.about-version { + color: $mode-font-color2 !important; +} +.update-time { + color: $mode-font-color3 !important; +} +.font-style { + color: $mode-font-color3 !important; +} +.go-link { + color: $mode-link-color1 !important; + border-bottom: 1px solid $mode-link-color1 !important; +} +.circle-block { + color: $mode-font-color5 !important; +} +.executions-detail { + label { + color: $mode-font-color3 !important; + } +} +.black-point { + background-color: $mode-font-color3 !important; +} +clr-dg-action-overflow { + clr-icon { + fill: $mode-font-color3 !important; + } +} +.oidc-tip { + color: $mode-font-color3 !important; +} +.clr-select-wrapper{ + select { + option { + background: $select-back-color; + color: $select-option-color; + } + } } \ No newline at end of file diff --git a/src/portal/src/css/dark-theme.scss b/src/portal/src/css/dark-theme.scss index 2ecf4eb2c..7a50d8101 100644 --- a/src/portal/src/css/dark-theme.scss +++ b/src/portal/src/css/dark-theme.scss @@ -1,117 +1,22 @@ // Variables for dark theme should be defined here. @import "../../node_modules/@clr/ui/clr-ui-dark.min.css"; -$dark-background-color: rgb(27, 42, 50) !important; -$dark-font-color1: #acbac3 !important; -$dark-font-color-title1: #eaedf0 !important; -$dark-active-tab-color: #4aaed9; +$mode-background-color: rgb(27, 42, 50); +$mode-background-color1: $mode-background-color !important; +$mode-background-color2: $mode-background-color; +$mode-background-color3: #17242b; -.label-form { - background-color: #212129 !important; -} -.esxc-gauge-circle-bgc-dark { - background-color: $dark-background-color; -} +$mode-font-color1: #acbac3; +$mode-font-color3: $mode-font-color1; +$mode-font-color4: $mode-font-color1; +$mode-font-color5: $mode-font-color1; +$mode-font-color2: #eaedf0; +$mode-link-color1: #4aaed9; +$mode-link-color2: $mode-link-color1; +$select-option-color: #1b2a32; +$select-back-color: #acbac3; -.harbor-icon { - filter: drop-shadow(#ccc 58px 2px) !important; -} - -.color-white-dark { - color: white; -} - -.label-filter-panel { - background-color: $dark-background-color; -} - -.filter-dark { - color: $dark-font-color1; -} -.side-form { - background-color: $dark-background-color; -} -.toolBar { - background-color: $dark-background-color; -} - -.search-overlay { - background-color: $dark-background-color; -} - -.add-modal-dark { - background: $dark-background-color; -} -.license { - background-color: $dark-background-color; -} - -.pagination-list { - .pagination-current { - color: $dark-font-color1; - } -} -.no-info-div, -.info-div { - background-color: $dark-background-color; -} -.bottom-line-project-config { - color: $dark-font-color1; -} -.config-subtext { - color: $dark-font-color1; -} -.permission-dark { - color: $dark-font-color1; -} -.scanner-name { - color: $dark-font-color1; -} -.permission-dark { - color: $dark-font-color1; -} -.summary-dark { - color: $dark-font-color1; - h5 { - color: $dark-font-color1; - } -} -.about-version { - color: $dark-font-color-title1; -} -.update-time { - color: $dark-font-color1; -} -.font-style { - color: $dark-font-color1; -} -.go-link { - color: #4aaed9 !important; - border-bottom-color: #4aaed9 !important; -} -.circle-block { - color: $dark-font-color1; -} -.executions-detail { - color: $dark-font-color1; -} -.black-point { - background-color: $dark-font-color1; -} -clr-dg-action-overflow { - clr-icon { - fill: $dark-font-color1; - } -} -.oidc-tip { - color: $dark-font-color1; -} -.clr-select-wrapper{ - select { - option { - background: $dark-font-color1; - color: #1b2a32; - } - } -} +$label-form-color: #212129; +$fill-color1: #ccc; +$right-status-fill-color: white; @import "./common.scss"; \ No newline at end of file diff --git a/src/portal/src/css/light-theme.scss b/src/portal/src/css/light-theme.scss index 8d93ad912..380cc24b3 100644 --- a/src/portal/src/css/light-theme.scss +++ b/src/portal/src/css/light-theme.scss @@ -1,5 +1,23 @@ -// Variables for dark theme should be defined here. +// Variables for light theme should be defined here. @import "../../node_modules/@clr/ui/clr-ui.min.css"; -$dark-active-tab-color: #0077b8; + +$mode-background-color: #fff; +$mode-background-color1: $mode-background-color; +$mode-background-color2: #fafafa; +$mode-background-color3: #eee; +$fill-color1: #000; + +$mode-font-color1: #313131; +$mode-font-color3: $fill-color1; +$mode-font-color4: unset; +$mode-font-color5: #575757; +$mode-font-color2: #565656; +$mode-link-color1: blue; +$mode-link-color2: #0077b8; +$select-option-color: #1b2a32; +$select-back-color: $mode-background-color; + +$label-form-color: $mode-background-color3; +$right-status-fill-color: #1d5100; @import "./common.scss"; \ No newline at end of file diff --git a/src/portal/src/global.scss b/src/portal/src/global.scss index aaba04213..1379615dd 100644 --- a/src/portal/src/global.scss +++ b/src/portal/src/global.scss @@ -1,3 +1,122 @@ +body { + overflow-y: hidden; +} + +.app-loading { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + width: 108px !important; + height: 108px !important; +} + +/*Hack Clarity alert*/ + +.alert-global { + font-size: 16px; + font-weight: 400; + font-family: Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif; + padding: 12px !important; + border: none !important; + margin-top: 0px !important; + max-height: 96px; +} + +.alert-global-align { + -webkit-box-pack: center; + justify-content: center; + -webkit-box-align: center; + align-items: center; + overflow-y: auto; + overflow-x: hidden; +} +.tooltip-content { + white-space: normal; + word-wrap: break-word; +} + +.alert.alert-warning { + padding: 10px 12px; +} +.alert-warning { + .alert-actions { + button { + margin: -2px 0 0px 0; + } + } +} +.modal-header { + padding: 0; +} +.rotate-90 { + -webkit-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + -o-transform: rotate(-90deg); + transform: rotate(-90deg); +} + +/* set overflow bar style */ +::-webkit-scrollbar { + width: 8px; + background: transparent; +} +::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3); + border-radius: 4px; +} +::-webkit-scrollbar-thumb { + border-radius: 4px; + background: #ccc; + -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5); +} +::-webkit-scrollbar-thumb:window-inactive { + background: rgba(255, 0, 0, 0.4); +} +.custom-h2 { + line-height: 24px; +} + +.datagrid-header { + z-index: 0 !important; +} + +.color-green { + color: #1d5100; +} + +.color-red { + color: red; +} + +.datagrid-table, +.datagrid-header { + position: inherit !important; +} + +.required:after { + content: "*"; + font-size: 0.58479532rem; + line-height: 0.5rem; + color: #c92100; + margin-left: 0.25rem; +} + +.flex-items-xs-right { + justify-content: flex-end; +} + +.clr-vertical-nav .nav-link { + border-radius: 5px; +} + +button:focus { + outline: none; +} + .w-100 { width: 100% !important; } diff --git a/src/portal/src/lib/components/config/vulnerability/vulnerability-config.component.scss b/src/portal/src/lib/components/config/vulnerability/vulnerability-config.component.scss index c093ccde7..6bd9e932a 100644 --- a/src/portal/src/lib/components/config/vulnerability/vulnerability-config.component.scss +++ b/src/portal/src/lib/components/config/vulnerability/vulnerability-config.component.scss @@ -44,7 +44,6 @@ } .update-time { - color: #000; font-size: .541667rem; width: 200px; padding-right: 1rem; diff --git a/src/portal/src/lib/components/create-edit-rule/create-edit-rule.component.scss b/src/portal/src/lib/components/create-edit-rule/create-edit-rule.component.scss index 122b5b1e3..720ba8e40 100644 --- a/src/portal/src/lib/components/create-edit-rule/create-edit-rule.component.scss +++ b/src/portal/src/lib/components/create-edit-rule/create-edit-rule.component.scss @@ -154,8 +154,6 @@ h4 { } .go-link { - color: blue; - border-bottom: 1px solid blue; line-height: 1rem; cursor: pointer; } diff --git a/src/portal/src/lib/components/operation/operation.component.css b/src/portal/src/lib/components/operation/operation.component.css index f0d82523d..73780d0ed 100644 --- a/src/portal/src/lib/components/operation/operation.component.css +++ b/src/portal/src/lib/components/operation/operation.component.css @@ -5,7 +5,6 @@ height: 100%; left:28px; padding-top: 20px; - background: #fff; border-left: 1px solid #e0e0e0; } .eventInfo {display: flex; justify-content: flex-start; align-content: flex-start; @@ -35,7 +34,6 @@ padding: 0 10px; height: 25px; line-height: 25px; - background-color: white; letter-spacing: 1.2px; font-weight: 500; box-shadow: -2px -1px 3px #bebbbb; diff --git a/src/portal/src/lib/components/project-policy-config/project-policy-config.component.scss b/src/portal/src/lib/components/project-policy-config/project-policy-config.component.scss index 7175ef948..21f9c48fb 100644 --- a/src/portal/src/lib/components/project-policy-config/project-policy-config.component.scss +++ b/src/portal/src/lib/components/project-policy-config/project-policy-config.component.scss @@ -51,7 +51,6 @@ .add-modal { position: absolute; padding: 0 8px; - background-color: rgb(238, 238, 238); .flex-direction-column { flex-direction: column; } diff --git a/src/portal/src/lib/components/replication/replication-tasks/replication-tasks.component.scss b/src/portal/src/lib/components/replication/replication-tasks/replication-tasks.component.scss index 0a16d9471..19b7cf918 100644 --- a/src/portal/src/lib/components/replication/replication-tasks/replication-tasks.component.scss +++ b/src/portal/src/lib/components/replication/replication-tasks/replication-tasks.component.scss @@ -73,7 +73,6 @@ width: 400px; label { display: inline-block; - color: black; width: 120px; } >div { diff --git a/src/portal/src/lib/components/repository/repository.component.scss b/src/portal/src/lib/components/repository/repository.component.scss index 2cf436db4..f7e1e5930 100644 --- a/src/portal/src/lib/components/repository/repository.component.scss +++ b/src/portal/src/lib/components/repository/repository.component.scss @@ -32,7 +32,6 @@ } .info-div { - background: white; border: 1px; border-style: solid; border-color: #CCCCCC; diff --git a/src/portal/src/lib/components/tag/tag.component.scss b/src/portal/src/lib/components/tag/tag.component.scss index 640cf3a7a..7930e9d87 100644 --- a/src/portal/src/lib/components/tag/tag.component.scss +++ b/src/portal/src/lib/components/tag/tag.component.scss @@ -139,7 +139,6 @@ position: relative; -ms-flex-direction: column; flex-direction: column; - background: #fff; padding: .5rem 0; border: 1px solid #ccc; box-shadow: 0 1px 0.125rem hsla(0, 0%, 45%, .25); diff --git a/src/portal/src/lib/components/vulnerability-scanning/result-tip-histogram/result-tip-histogram.component.scss b/src/portal/src/lib/components/vulnerability-scanning/result-tip-histogram/result-tip-histogram.component.scss index a22e514ed..d06ac7803 100644 --- a/src/portal/src/lib/components/vulnerability-scanning/result-tip-histogram/result-tip-histogram.component.scss +++ b/src/portal/src/lib/components/vulnerability-scanning/result-tip-histogram/result-tip-histogram.component.scss @@ -219,9 +219,6 @@ hr { .width-150 { width: 150px; } -.circle-block { - color: #575757; -} .level-border>div{ display: inline-flex; @@ -277,7 +274,6 @@ hr { .black-point { position: absolute; width: 4px; - background-color: #000; height: 4px; border-radius: 50%; } diff --git a/src/portal/src/styles.css b/src/portal/src/styles.css deleted file mode 100644 index 5ddc58276..000000000 --- a/src/portal/src/styles.css +++ /dev/null @@ -1,111 +0,0 @@ -body { - overflow-y: hidden; -} - -.app-loading { - position: absolute; - top: 0; - left: 0; - right:0; - bottom:0; - margin:auto; - width: 108px !important; - height: 108px !important; -} - - -/*Hack Clarity alert*/ - -.alert-global { - font-size: 16px; - font-weight: 400; - font-family: Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif; - padding: 12px !important; - border: none !important; - margin-top: 0px !important; - max-height: 96px; -} - -.alert-global-align { - -webkit-box-pack: center; - justify-content: center; - -webkit-box-align: center; - align-items: center; - overflow-y: auto; - overflow-x: hidden; -} -.tooltip-content{white-space: normal;word-wrap: break-word;} - - .alert.alert-warning{ - padding:10px 12px; -} - .alert-warning .alert-actions button{ - margin: -2px 0 0px 0; -} - .modal-header{ - padding: 0; - } -.rotate-90 { - -webkit-transform: rotate(-90deg); - -moz-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - -o-transform: rotate(-90deg); - transform: rotate(-90deg); -} - -/* set overflow bar style */ -::-webkit-scrollbar { - width: 8px; - background:transparent; -} -::-webkit-scrollbar-track { - -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3); - border-radius: 4px; -} -::-webkit-scrollbar-thumb { - border-radius: 4px; - background: #ccc; - -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.5); -} -::-webkit-scrollbar-thumb:window-inactive { - background: rgba(255,0,0,0.4); -} -.custom-h2 { - line-height: 24px; -} - -.datagrid-header{ - z-index: 0 !important; -} - -.color-green { - color: #1D5100; -} - -.color-red { - color: red; -} - -.datagrid-table,.datagrid-header{ - position: inherit !important; -} - -.required:after { - content: '*'; - font-size: .58479532rem; - line-height: .5rem; - color: #c92100; - margin-left: .25rem; -} - -.flex-items-xs-right { - justify-content: flex-end; -} - -.clr-vertical-nav .nav-link { - border-radius: 5px; -} - -button:focus { - outline: none; -}