diff --git a/src/app/elements/content/content.component.html b/src/app/elements/content/content.component.html
index 4c791d2d..be887b82 100644
--- a/src/app/elements/content/content.component.html
+++ b/src/app/elements/content/content.component.html
@@ -48,15 +48,15 @@
diff --git a/src/app/elements/content/content.component.scss b/src/app/elements/content/content.component.scss
index 5efe6c35..567f4841 100644
--- a/src/app/elements/content/content.component.scss
+++ b/src/app/elements/content/content.component.scss
@@ -1,5 +1,5 @@
$-border-x: #5a5959;
-$-border-y: #1f1b1b;
+$-border-y: var(--el-main-bg-color);
#content {
height: calc(100% - 30px);
@@ -95,7 +95,7 @@ $-border-y: #1f1b1b;
}
}
- .batch-input {
+ &.batch-input {
height: calc(100% - 30px);
}
}
@@ -123,7 +123,7 @@ $-border-y: #1f1b1b;
border-left: solid 1px $-border-y;
width: 100%;
padding: 0 2px 0 0;
- background: #2f2a2a;
+ background: var(--el-main-bg-color);
&:focus-visible {
outline: none;
@@ -133,6 +133,7 @@ $-border-y: #1f1b1b;
margin: auto 7px;
color: #ffffff;
cursor: pointer;
+
&:hover {
color: #d6cbcb;
}
@@ -160,7 +161,7 @@ $-border-y: #1f1b1b;
width: 100%;
line-height: 29px;
border: none;
- background: #2f2a2a;
+ background: var(--el-main-bg-color);
color: #ffffff;
&:focus-visible {
@@ -172,18 +173,22 @@ $-border-y: #1f1b1b;
.send-range {
width: auto;
margin-left: 5px;
+
&::ng-deep .mat-select-trigger {
min-width: 70px;
line-height: 29px;
+
.mat-select-value {
max-width: none;
color: #ffffff;
}
+
.mat-select-arrow {
color: #ffffff;
}
}
}
+
.command-list {
width: 100%;
height: 100%;
@@ -192,6 +197,7 @@ $-border-y: #1f1b1b;
overflow: hidden;
white-space: nowrap;
transition: all .3s;
+
.command-box {
display: inline-block;
max-width: 260px;
@@ -207,24 +213,29 @@ $-border-y: #1f1b1b;
user-select: none;
color: #d6cbcb;
background-color: #463e3e;
+
&:hover {
color: #ffffff;
}
+
&:active {
color: #ccc8c8;
}
}
}
+
.not-command {
flex: 1;
line-height: 29px;
padding-left: 6px;
color: #717171;
}
+
.action-left,
.action-right {
line-height: 29px;
}
+
.action-right {
display: flex;
}
@@ -232,25 +243,29 @@ $-border-y: #1f1b1b;
::ng-deep .command-panel.mat-select-panel {
margin-top: 27px;
- min-width: 100%!important;
- border-radius: initial!important;
+ min-width: 100% !important;
+ border-radius: initial !important;
background: black;
padding: 10px 0 !important;
}
+
::ng-deep .command-panel .mat-option {
color: #f0f0f1;
+
&:hover {
- background-color: rgba(53, 54, 51, 0.7)!important;
+ background-color: rgba(53, 54, 51, 0.7) !important;
}
}
+
::ng-deep .command-panel .mat-option.mat-active {
color: #f0f0f1;
font-weight: bold;
- background-color: rgba(53, 54, 51, 0.8)!important;
+ background-color: rgba(53, 54, 51, 0.8) !important;
}
+
.command-option {
- line-height: 2.2em!important;
- height: 2.2em!important;
+ line-height: 2.2em !important;
+ height: 2.2em !important;
}
.view-menu {
@@ -323,8 +338,9 @@ $-border-y: #1f1b1b;
-moz-border-radius: 0;
border-radius: 0;
margin: 2px 0;
+
&:hover {
- background-color: rgba(53,54,51, 0.7);
+ background-color: rgba(53, 54, 51, 0.7);
}
}
diff --git a/src/app/elements/content/content.component.ts b/src/app/elements/content/content.component.ts
index 05e277c6..2955f201 100644
--- a/src/app/elements/content/content.component.ts
+++ b/src/app/elements/content/content.component.ts
@@ -1,10 +1,9 @@
-import {Component, ElementRef, EventEmitter, OnInit, OnDestroy, Output, ViewChild} from '@angular/core';
+import {Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, ViewChild} from '@angular/core';
import {View, ViewAction} from '@app/model';
-import {ConnectTokenService, I18nService, LogService, SettingService, ViewService, HttpService} from '@app/services';
+import {ConnectTokenService, HttpService, I18nService, LogService, SettingService, ViewService} from '@app/services';
import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
import {MatDialog} from '@angular/material';
import {ElementCommandDialogComponent} from '@app/elements/content/command-dialog/command-dialog.component';
-import {ElementSendCommandDialogComponent} from '@app/elements/content/send-command-dialog/send-command-dialog.component';
import {fromEvent, Subscription} from 'rxjs';
import * as jQuery from 'jquery/dist/jquery.min.js';
@@ -86,6 +85,7 @@ export class ElementContentComponent implements OnInit, OnDestroy {
this.handleKeyDownTabChange();
document.addEventListener('click', this.hideRMenu.bind(this), false);
}
+
ngOnDestroy() {
this.keyboardSubscription.unsubscribe();
}
@@ -338,7 +338,9 @@ export class ElementContentComponent implements OnInit, OnDestroy {
}
onSendCommand() {
- if (!this.batchCommand) { return; }
+ if (!this.batchCommand) {
+ return;
+ }
this._dialog.open(
ElementCommandDialogComponent,
diff --git a/src/app/pages/connect/connect.component.scss b/src/app/pages/connect/connect.component.scss
index b1adc656..a2a517d1 100644
--- a/src/app/pages/connect/connect.component.scss
+++ b/src/app/pages/connect/connect.component.scss
@@ -3,5 +3,5 @@
width: 100%;
padding: 0;
margin: 0;
- background-color: #1f1b1b;
+ background-color: var(--el-main-bg-color);
}
diff --git a/src/app/pages/kubernetes/main.component.scss b/src/app/pages/kubernetes/main.component.scss
index 37f58c52..7390d226 100644
--- a/src/app/pages/kubernetes/main.component.scss
+++ b/src/app/pages/kubernetes/main.component.scss
@@ -3,13 +3,13 @@
width: 100%;
padding: 0;
margin: 0;
- background-color: #1f1b1b;
+ background-color: var(--el-main-bg-color);
}
.content {
height: 100%;
padding: 0;
- background-color: #1f1b1b;
+ background-color: var(--el-main-bg-color);
/*background-color: red;*/
margin: 0;
width: 100%;
diff --git a/src/app/pages/main/main.component.css b/src/app/pages/main/main.component.scss
similarity index 97%
rename from src/app/pages/main/main.component.css
rename to src/app/pages/main/main.component.scss
index 31a68539..6327444b 100644
--- a/src/app/pages/main/main.component.css
+++ b/src/app/pages/main/main.component.scss
@@ -3,13 +3,13 @@
width: 100%;
padding: 0;
margin: 0;
- background-color: #1f1b1b;
+ background-color: var(--el-main-bg-color);
}
.content {
height: 100%;
padding: 0;
- background-color: #1f1b1b;
+ background-color: var(--el-main-bg-color);
margin: 0;
width: 100%;
position: initial;
diff --git a/src/app/pages/main/main.component.ts b/src/app/pages/main/main.component.ts
index 5031a719..5cced4b0 100644
--- a/src/app/pages/main/main.component.ts
+++ b/src/app/pages/main/main.component.ts
@@ -1,5 +1,5 @@
import {Component, ElementRef, HostListener, OnInit, ViewChild} from '@angular/core';
-import {DataStore, DEFAULT_ORG_ID, SYSTEM_ORG_ID, User} from '@app/globals';
+import {DataStore, User} from '@app/globals';
import {IOutputData, SplitComponent} from 'angular-split';
import {HttpService, LogService, SettingService, ViewService} from '@app/services';
import * as _ from 'lodash';
@@ -8,7 +8,7 @@ import {environment} from '@src/environments/environment';
@Component({
selector: 'pages-main',
templateUrl: './main.component.html',
- styleUrls: ['./main.component.css'],
+ styleUrls: ['./main.component.scss'],
})
export class PageMainComponent implements OnInit {
@ViewChild(SplitComponent, {read: false, static: false}) split: SplitComponent;
diff --git a/src/sass/theme/header.ts b/src/sass/theme/header.ts
index bccd3708..0aa80db1 100644
--- a/src/sass/theme/header.ts
+++ b/src/sass/theme/header.ts
@@ -1,4 +1,4 @@
-import { Theme } from './interface/index';
+import {Theme} from './interface/index';
export const headerTheme: Record = {
default: {