From 610ce42fa2abeb1b3bd26714f15c3bf959901888 Mon Sep 17 00:00:00 2001 From: Sven Heidemann Date: Sat, 18 Feb 2023 13:37:03 +0100 Subject: [PATCH] Fixed styling & added game server to profile #130 --- .../bot_data/model/user_joined_game_server.py | 4 + .../model/userJoinedGameServer.gql | 1 + .../queries/user_joined_game_server_query.py | 4 + kdb-web/src/app/models/data/user.model.ts | 3 +- .../data/user_joined_game_server.model.ts | 11 + .../src/app/models/graphql/queries.model.ts | 1 + .../auth-user/auth-user.component.html | 2 +- .../src/app/modules/shared/shared.module.ts | 3 + .../server/members/members.component.html | 2 +- .../server/profile/profile.component.html | 92 +- kdb-web/src/assets/i18n/de.json | 15 +- kdb-web/src/styles.scss | 4 + .../src/styles/themes/default-dark-theme.scss | 997 ++++++++-------- .../styles/themes/default-light-theme.scss | 1035 ++++++++-------- .../styles/themes/sh-edraft-dark-theme.scss | 999 ++++++++-------- .../styles/themes/sh-edraft-light-theme.scss | 1053 +++++++++-------- 16 files changed, 2190 insertions(+), 2036 deletions(-) create mode 100644 kdb-web/src/app/models/data/user_joined_game_server.model.ts diff --git a/kdb-bot/src/bot_data/model/user_joined_game_server.py b/kdb-bot/src/bot_data/model/user_joined_game_server.py index c00e3447..964a19d0 100644 --- a/kdb-bot/src/bot_data/model/user_joined_game_server.py +++ b/kdb-bot/src/bot_data/model/user_joined_game_server.py @@ -38,6 +38,10 @@ class UserJoinedGameServer(TableABC): def game_server(self) -> str: return self._game_server + @property + def time(self) -> float: + return round((self.leaved_on - self.joined_on).total_seconds() / 3600, 2) + @property def joined_on(self) -> datetime: return self._joined_on diff --git a/kdb-bot/src/bot_graphql/model/userJoinedGameServer.gql b/kdb-bot/src/bot_graphql/model/userJoinedGameServer.gql index 63d66daa..44aa523b 100644 --- a/kdb-bot/src/bot_graphql/model/userJoinedGameServer.gql +++ b/kdb-bot/src/bot_graphql/model/userJoinedGameServer.gql @@ -2,6 +2,7 @@ type UserJoinedGameServer implements TableQuery { id: ID gameServer: String user: User + time: Float joinedOn: String leavedOn: String diff --git a/kdb-bot/src/bot_graphql/queries/user_joined_game_server_query.py b/kdb-bot/src/bot_graphql/queries/user_joined_game_server_query.py index 877fa8b7..6e29ec7d 100644 --- a/kdb-bot/src/bot_graphql/queries/user_joined_game_server_query.py +++ b/kdb-bot/src/bot_graphql/queries/user_joined_game_server_query.py @@ -28,6 +28,10 @@ class UserJoinedGameServerQuery(DataQueryABC): def resolve_user(x: UserJoinedGameServer, *_): return x.user + @staticmethod + def resolve_time(x: UserJoinedGameServer, *_): + return x.time + @staticmethod def resolve_joined_on(x: UserJoinedGameServer, *_): return x.joined_on diff --git a/kdb-web/src/app/models/data/user.model.ts b/kdb-web/src/app/models/data/user.model.ts index 385e6c6c..e55e5e19 100644 --- a/kdb-web/src/app/models/data/user.model.ts +++ b/kdb-web/src/app/models/data/user.model.ts @@ -3,6 +3,7 @@ import { Level, LevelFilter } from "./level.model"; import { Server, ServerFilter } from "./server.model"; import { UserJoinedServer } from "./user_joined_server.model"; import { UserJoinedVoiceChannel } from "./user_joined_voice_channel.model"; +import { UserJoinedGameServer } from "./user_joined_game_server.model"; export interface User extends Data { id?: number; @@ -22,7 +23,7 @@ export interface User extends Data { joinedVoiceChannels?: UserJoinedVoiceChannel[]; userJoinedGameServerCount?: number; - userJoinedGameServers?: []; + userJoinedGameServers?: UserJoinedGameServer[]; } export interface UserFilter { diff --git a/kdb-web/src/app/models/data/user_joined_game_server.model.ts b/kdb-web/src/app/models/data/user_joined_game_server.model.ts new file mode 100644 index 00000000..b8ce5e72 --- /dev/null +++ b/kdb-web/src/app/models/data/user_joined_game_server.model.ts @@ -0,0 +1,11 @@ +import { Data } from "./data.model"; +import { User } from "./user.model"; + +export interface UserJoinedGameServer extends Data { + id: number; + gameServer: string; + user: User; + time: number; + joinedOn: string; + leavedOn: string; +} diff --git a/kdb-web/src/app/models/graphql/queries.model.ts b/kdb-web/src/app/models/graphql/queries.model.ts index 436e97a0..73baaf4a 100644 --- a/kdb-web/src/app/models/graphql/queries.model.ts +++ b/kdb-web/src/app/models/graphql/queries.model.ts @@ -122,6 +122,7 @@ export class Queries { userJoinedGameServers { id gameServer + time joinedOn leavedOn } diff --git a/kdb-web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.html b/kdb-web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.html index bcb77b39..4aefe844 100644 --- a/kdb-web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.html +++ b/kdb-web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.html @@ -224,7 +224,7 @@ - {{'admin.auth_users.no_entries_found' | translate}} + {{'admin.auth_users.no_entries_found' | translate}} diff --git a/kdb-web/src/app/modules/shared/shared.module.ts b/kdb-web/src/app/modules/shared/shared.module.ts index 59c0d0ef..bf719ea6 100644 --- a/kdb-web/src/app/modules/shared/shared.module.ts +++ b/kdb-web/src/app/modules/shared/shared.module.ts @@ -19,6 +19,7 @@ import { AuthRolePipe } from './pipes/auth-role.pipe'; import { IpAddressPipe } from './pipes/ip-address.pipe'; import { BoolPipe } from './pipes/bool.pipe'; import { PanelMenuModule } from 'primeng/panelmenu'; +import { PanelModule } from "primeng/panel"; @@ -47,6 +48,7 @@ import { PanelMenuModule } from 'primeng/panelmenu'; TranslateModule, DynamicDialogModule, PanelMenuModule, + PanelModule, ], exports: [ ButtonModule, @@ -66,6 +68,7 @@ import { PanelMenuModule } from 'primeng/panelmenu'; TranslateModule, DynamicDialogModule, PanelMenuModule, + PanelModule, AuthRolePipe, IpAddressPipe, BoolPipe, diff --git a/kdb-web/src/app/modules/view/server/members/members.component.html b/kdb-web/src/app/modules/view/server/members/members.component.html index a512a85d..e8e51b34 100644 --- a/kdb-web/src/app/modules/view/server/members/members.component.html +++ b/kdb-web/src/app/modules/view/server/members/members.component.html @@ -238,7 +238,7 @@ - {{'view.server.members.no_entries_found' | translate}} + {{'view.server.members.no_entries_found' | translate}} diff --git a/kdb-web/src/app/modules/view/server/profile/profile.component.html b/kdb-web/src/app/modules/view/server/profile/profile.component.html index 1fdf1ec7..a1a38b43 100644 --- a/kdb-web/src/app/modules/view/server/profile/profile.component.html +++ b/kdb-web/src/app/modules/view/server/profile/profile.component.html @@ -77,51 +77,73 @@
-
-

{{'view.server.profile.joined_voice_channel.header' | translate}}

-
-
-
-
-
{{'view.server.profile.joined_voice_channel.time' | translate}}:
-
{{join.time}} {{'general.hours' | translate}}
-
+ +
+
+
+
{{'view.server.profile.joined_voice_channel.time' | translate}}:
+
{{join.time}} {{'general.hours' | translate}}
+
-
-
{{'view.server.profile.joined_voice_channel.channel' | translate}}:
-
{{join.channelName}}
-
+
+
{{'view.server.profile.joined_voice_channel.channel' | translate}}:
+
{{join.channelName}}
+
-
-
{{'view.server.profile.joined_voice_channel.joined_at' | translate}}:
-
{{join.joinedOn | date:'dd.MM.yyyy HH:mm:ss'}}
-
+
+
{{'common.joined_at' | translate}}:
+
{{join.joinedOn | date:'dd.MM.yyyy HH:mm:ss'}}
+
-
-
{{'view.server.profile.joined_voice_channel.leaved_at' | translate}}:
-
{{join.leavedOn | date:'dd.MM.yyyy HH:mm:ss'}}
+
+
{{'common.leaved_at' | translate}}:
+
{{join.leavedOn | date:'dd.MM.yyyy HH:mm:ss'}}
+
-
-
-
-

{{'view.server.profile.joined_server.header' | translate}}

-
+
+ +
+
+
+
{{'view.server.profile.joined_game_server.time' | translate}}:
+
{{join.time}} {{'general.hours' | translate}}
+
-
-
-
-
{{'view.server.profile.joined_server.joined_at' | translate}}:
-
{{join.joinedOn | date:'dd.MM.yyyy HH:mm:ss'}}
-
+
+
{{'view.server.profile.joined_game_server.name' | translate}}:
+
{{join.gameServer}}
+
-
-
{{'view.server.profile.joined_server.leaved_at' | translate}}:
-
{{join.leavedOn | date:'dd.MM.yyyy HH:mm:ss'}}
+
+
{{'common.joined_at' | translate}}:
+
{{join.joinedOn | date:'dd.MM.yyyy HH:mm:ss'}}
+
+ +
+
{{'common.leaved_at' | translate}}:
+
{{join.leavedOn | date:'dd.MM.yyyy HH:mm:ss'}}
+
-
+ + + +
+
+
+
{{'common.joined_at' | translate}}:
+
{{join.joinedOn | date:'dd.MM.yyyy HH:mm:ss'}}
+
+ +
+
{{'common.leaved_at' | translate}}:
+
{{join.leavedOn | date:'dd.MM.yyyy HH:mm:ss'}}
+
+
+
+
diff --git a/kdb-web/src/assets/i18n/de.json b/kdb-web/src/assets/i18n/de.json index c582b6c1..b94c3045 100644 --- a/kdb-web/src/assets/i18n/de.json +++ b/kdb-web/src/assets/i18n/de.json @@ -173,15 +173,16 @@ "joined_voice_channel": { "header": "Sprachkanal-beitritte", "time": "Zeit", - "channel": "Sprachkanal", - "joined_at": "Beigetreten am", - "leaved_at": "Verlassen am" + "channel": "Sprachkanal" + }, + "joined_game_server": { + "header": "Gameserver-beitritte", + "time": "Spielzeit", + "name": "Gameserver" }, "joined_server": { "header": "Server-beitritte", - "time": "Zeit", - "joined_at": "Beigetreten am", - "leaved_at": "Verlassen am" + "time": "Zeit" }, "permission_denied": "Zugriff Verweigert!", "permission_denied_d": "Du musst Moderator sein, um andere Profile sehen zu können!" @@ -264,6 +265,8 @@ "common": { "created_at": "Erstellt am", "modified_at": "Bearbeitet am", + "joined_at": "Beigetreten am", + "leaved_at": "Verlassen am", "bool_as_string": { "true": "Ja", "false": "Nein" diff --git a/kdb-web/src/styles.scss b/kdb-web/src/styles.scss index 2b131359..0fa6ae5a 100644 --- a/kdb-web/src/styles.scss +++ b/kdb-web/src/styles.scss @@ -152,6 +152,10 @@ header { margin: 5px 0; } + p-panel { + margin: 5px 0; + } + .content-input-field { width: 50% !important; margin: 0 !important; diff --git a/kdb-web/src/styles/themes/default-dark-theme.scss b/kdb-web/src/styles/themes/default-dark-theme.scss index 9f0e2f6e..f0a7658b 100644 --- a/kdb-web/src/styles/themes/default-dark-theme.scss +++ b/kdb-web/src/styles/themes/default-dark-theme.scss @@ -1,558 +1,583 @@ .default-dark-theme { - $primaryTextColor: #fff; - $secondayTextColor: #000; - $secondayTextColor2: #1e88e5; + $primaryTextColor: #fff; + $secondayTextColor: #000; + $secondayTextColor2: #1e88e5; - $primaryHeaderColor: #1e88e5; - $secondaryHeaderColor: #6ab7ff; - $secondaryHeaderColor2: #005cb2; + $primaryHeaderColor: #1e88e5; + $secondaryHeaderColor: #6ab7ff; + $secondaryHeaderColor2: #005cb2; - $primaryBackgroundColor: #272727; - $secondaryBackgroundColor: #4f4f4f; - $secondaryBackgroundColor2: #fff; - $secondaryBackgroundColor3: #cccccc; + $primaryBackgroundColor: #272727; + $secondaryBackgroundColor: #4f4f4f; + $secondaryBackgroundColor2: #fff; + $secondaryBackgroundColor3: #cccccc; - $primaryErrorColor: #b00020; - $secondaryErrorColor: #e94948; + $primaryErrorColor: #b00020; + $secondaryErrorColor: #e94948; - $default-border: 2px solid $secondaryBackgroundColor3; + $default-border: 2px solid $secondaryBackgroundColor3; + background-color: $primaryBackgroundColor; + + h1, + h2 { + color: $primaryHeaderColor; + } + + input, + p { + color: $primaryTextColor; + } + + input { + background-color: $secondaryBackgroundColor !important; + } + + .input-field-info-text { + color: $primaryTextColor; + } + + /* Change Autocomplete styles in Chrome*/ + input:-webkit-autofill, + input:-webkit-autofill:hover, + input:-webkit-autofill:focus, + textarea:-webkit-autofill, + textarea:-webkit-autofill:hover, + textarea:-webkit-autofill:focus, + select:-webkit-autofill, + select:-webkit-autofill:hover, + select:-webkit-autofill:focus { + border: 1px solid $primaryHeaderColor; + -webkit-text-fill-color: $primaryTextColor; + -webkit-box-shadow: 0 0 0 1000px $secondaryBackgroundColor inset; + transition: background-color 5000s ease-in-out 0s; + } + + header { background-color: $primaryBackgroundColor; - h1, - h2 { - color: $primaryHeaderColor; - } - - input, - p { - color: $primaryTextColor; - } - - input { - background-color: $secondaryBackgroundColor !important; - } - - .input-field-info-text { - color: $primaryTextColor; - } - - /* Change Autocomplete styles in Chrome*/ - input:-webkit-autofill, - input:-webkit-autofill:hover, - input:-webkit-autofill:focus, - textarea:-webkit-autofill, - textarea:-webkit-autofill:hover, - textarea:-webkit-autofill:focus, - select:-webkit-autofill, - select:-webkit-autofill:hover, - select:-webkit-autofill:focus { - border: 1px solid $primaryHeaderColor; - -webkit-text-fill-color: $primaryTextColor; - -webkit-box-shadow: 0 0 0px 1000px $secondaryBackgroundColor inset; - transition: background-color 5000s ease-in-out 0s; - } - - header { - background-color: $primaryBackgroundColor; - - .logo-button-wrapper { - .p-button.p-button-text { - color: $primaryTextColor; - - &:hover { - color: $primaryTextColor; - background-color: $primaryBackgroundColor; - } - } - } - - .logo { - color: $primaryHeaderColor; - } - } - - h1 { - color: $primaryHeaderColor; - } - - .app { - .sidebar { - background-color: $primaryBackgroundColor; - - .menu { - color: $primaryTextColor; - } - } - - .component-wrapper { - color: $primaryTextColor; - - .component { - background-color: $secondaryBackgroundColor; - - .content-wrapper { - background-color: $primaryBackgroundColor; - border-top: 2px solid $primaryHeaderColor; - - .content-header { - border-bottom: $default-border; - } - - .content { - .content-row { - } - - .content-column { - } - - .content-data-name { - } - - .content-data-value { - } - - .content-divider { - border-bottom: $default-border; - } - - .server-list-wrapper { - .server-filter { - } - - .server-count { - } - - .server-list { - .server { - border: $default-border; - border-radius: 15px; - - .logo { - img { - border-radius: 100%; - } - } - - .name { - color: $primaryHeaderColor; - } - - &:hover { - border-color: $primaryHeaderColor !important; - } - } - } - } - } - } - } - } - } - - .p-dialog-header { - background-color: $secondaryBackgroundColor !important; - color: $primaryTextColor !important; - } - - .p-dialog-content { - .content-data-name, - .content-data-value { - color: $primaryTextColor; - - .text-btn { - font-size: 18px !important; - font-weight: 400 !important; - } - } - } - - footer { - background-color: $primaryBackgroundColor; + .logo-button-wrapper { + .p-button.p-button-text { color: $primaryTextColor; - a { - color: $primaryTextColor; + &:hover { + color: $primaryTextColor; + background-color: $primaryBackgroundColor; } + } } - .invalid-feedback { - color: $primaryErrorColor; + .logo { + color: $primaryHeaderColor; + } + } + + h1 { + color: $primaryHeaderColor; + } + + .app { + .sidebar { + background-color: $primaryBackgroundColor; + + .menu { + color: $primaryTextColor; + } } - .invalid-feedback-input, - .invalid-feedback-input:focus, - .invalid-feedback-input:hover { - input, - input:enabled:focus { - outline: 1px solid $primaryErrorColor !important; - border: 1px solid $primaryErrorColor !important; - border-color: $primaryErrorColor !important; - } - } + .component-wrapper { + color: $primaryTextColor; - .login-wrapper { + .component { background-color: $secondaryBackgroundColor; - .login-form-wrapper, - .auth-header { - background-color: $primaryBackgroundColor; + .content-wrapper { + background-color: $primaryBackgroundColor; + border-top: 2px solid $primaryHeaderColor; - .login-form { - .input-field { - input, - .p-password { - } - } + .content-header { + border-bottom: $default-border; + } - .login-form-submit { - .login-form-submit-btn { - } - } - - .login-form-sub-button-wrapper { - .login-form-sub-btn { - background-color: $primaryBackgroundColor; - color: $secondayTextColor2; - border: 2px solid $secondayTextColor2; - - &:hover { - background-color: $primaryHeaderColor !important; - color: $primaryTextColor !important; - } - } - - .login-form-sub-login-btn { - border: none; - } - } + .content { + .content-row { } - } - } - .spinner-component-wrapper { - background-color: rgba($secondaryBackgroundColor, 0.5); + .content-column { + } - .spinner-wrapper { - .custom-spinner .p-progress-spinner-circle { + .content-data-name { + } + + .content-data-value { + } + + .content-divider { + border-bottom: $default-border; + } + + .server-list-wrapper { + .server-filter { + } + + .server-count { + } + + .server-list { + .server { + border: $default-border; + border-radius: 15px; + + .logo { + img { + border-radius: 100%; + } + } + + .name { + color: $primaryHeaderColor; + } + + &:hover { + border-color: $primaryHeaderColor !important; + } + } + } + } + + p-panel { + .p-panel-header, + .p-panel-content { + border: $default-border; + } + + .p-panel-title { color: $primaryHeaderColor; - } - } - } + } - .wrapper-right { - justify-content: flex-end !important; - } + .p-panel-header { + background-color: $primaryBackgroundColor; - /* - PrimeNG Fixes - */ - .p-progress-spinner-circle { - stroke: $primaryHeaderColor !important; - } - - .p-menu, - .p-panelmenu { - color: $primaryTextColor !important; - - .p-menuitem-link .p-menuitem-text, - .p-menuitem-link .p-menuitem-icon, - .p-panelmenu-header > a { - color: $primaryTextColor !important; - background: transparent !important; - font-size: 1rem !important; - font-weight: normal !important; - } - - .p-menuitem-link:focus, - .p-panelmenu-header > a:focus, - .p-panelmenu-content .p-menuitem .p-menuitem-link:focus { - box-shadow: none !important; - } - - .p-menuitem-link:hover, - .p-panelmenu-header > a:hover, - .p-panelmenu-content .p-menuitem .p-menuitem-link:hover { - background-color: $secondaryBackgroundColor !important; - $border-radius: 20px; - border-radius: $border-radius 0px 0px $border-radius; - - .p-menuitem-text, - .p-menuitem-icon, - .p-menuitem-text, - .p-panelmenu-icon { - color: $primaryHeaderColor !important; - } - } - - .p-panelmenu-content { - margin: 5px 0px 5px 10px; - } - } - - .p-menu-overlay { - background-color: $primaryBackgroundColor !important; - color: $primaryTextColor !important; - border-top: 2px solid $primaryHeaderColor !important; - - .p-menuitem-link:hover { - background-color: $primaryBackgroundColor !important; - .p-menuitem-text, - .p-menuitem-icon { - color: $primaryHeaderColor !important; - } - } - } - - p-dropdown { - .p-dropdown { - background-color: $primaryBackgroundColor !important; - border-color: $primaryTextColor !important; - color: $primaryTextColor !important; - - span { - color: $primaryTextColor; - } - - .p-dropdown-panel { - background-color: $secondaryBackgroundColor !important; - - .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { - background-color: $secondaryBackgroundColor !important; - color: $primaryHeaderColor !important; - - span { - color: $primaryHeaderColor !important; - } - } - - .p-dropdown-items .p-dropdown-item.p-highlight { - background-color: $secondaryBackgroundColor !important; - color: $primaryHeaderColor !important; - - span { - color: $primaryHeaderColor !important; - } + .p-panel-header-icon { + color: $primaryHeaderColor; } + } } + + .p-panel-content { + background-color: $primaryBackgroundColor; + color: $primaryTextColor; + border-top: none !important; + } + } } + } } + } - p-table { - background-color: $primaryBackgroundColor; - color: $primaryTextColor !important; + .p-dialog-header { + background-color: $secondaryBackgroundColor !important; + color: $primaryTextColor !important; + } - .table-caption { - .table-caption-text { - } + .p-dialog-content { + .content-data-name, + .content-data-value { + color: $primaryTextColor; - .table-caption-search-wrapper { - .table-caption-search { - height: 30px !important; - - .table-caption-search-icon { - } - - .table-caption-search-input { - height: 100% !important; - - &:focus { - outline-color: $primaryHeaderColor; - } - } - } - } - - .table-caption-btn-wrapper { - height: 30px !important; - } - } - - .table-edit-input { - width: 100% !important; - } + .text-btn { + font-size: 18px !important; + font-weight: 400 !important; + } } + } - p-checkbox { - .p-checkbox .p-checkbox-box { - background: $primaryBackgroundColor !important; - background-color: $primaryBackgroundColor !important; - } + footer { + background-color: $primaryBackgroundColor; + color: $primaryTextColor; - .p-checkbox .p-checkbox-box.p-highlight { - background: $primaryBackgroundColor !important; - background-color: $primaryBackgroundColor !important; - border-color: $primaryTextColor !important; - box-shadow: none !important; - } - - .p-checkbox .p-checkbox-box .p-checkbox-icon { - color: $primaryTextColor !important; - } - - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus, - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: $primaryHeaderColor !important; - box-shadow: none !important; - - .p-checkbox-icon { - color: $primaryHeaderColor !important; - } - } + a { + color: $primaryTextColor; } + } - p-dialog, - p-confirmdialog, - p-dynamicdialog { - .p-dialog.p-confirm-dialog .p-confirm-dialog-message { - margin-left: 0px !important; - } - - .p-dialog { - background-color: $secondaryBackgroundColor !important; - - .p-dialog-header { - background-color: $primaryBackgroundColor !important; - color: $primaryTextColor !important; - } - - .p-dialog-content, - .p-dialog-footer { - background-color: $secondaryBackgroundColor !important; - color: $primaryTextColor !important; - } - } - } + .invalid-feedback { + color: $primaryErrorColor; + } + .invalid-feedback-input, + .invalid-feedback-input:focus, + .invalid-feedback-input:hover { input, - .p-password input { - border-radius: 10px; - border: $default-border; + input:enabled:focus { + outline: 1px solid $primaryErrorColor !important; + border: 1px solid $primaryErrorColor !important; + border-color: $primaryErrorColor !important; + } + } - &:focus { - box-shadow: none !important; + .login-wrapper { + background-color: $secondaryBackgroundColor; + + .login-form-wrapper, + .auth-header { + background-color: $primaryBackgroundColor; + + .login-form { + .input-field { + input, + .p-password { + } } - &:hover, - &:active, - &:enabled:focus { - border-color: $primaryHeaderColor !important; + .login-form-submit { + .login-form-submit-btn { + } } + + .login-form-sub-button-wrapper { + .login-form-sub-btn { + background-color: $primaryBackgroundColor; + color: $secondayTextColor2; + border: 2px solid $secondayTextColor2; + + &:hover { + background-color: $primaryHeaderColor !important; + color: $primaryTextColor !important; + } + } + + .login-form-sub-login-btn { + border: none; + } + } + } + } + } + + .spinner-component-wrapper { + background-color: rgba($secondaryBackgroundColor, 0.5); + + .spinner-wrapper { + .custom-spinner .p-progress-spinner-circle { + color: $primaryHeaderColor; + } + } + } + + .wrapper-right { + justify-content: flex-end !important; + } + + /* + PrimeNG Fixes + */ + .p-progress-spinner-circle { + stroke: $primaryHeaderColor !important; + } + + .p-menu, + .p-panelmenu { + color: $primaryTextColor !important; + + .p-menuitem-link .p-menuitem-text, + .p-menuitem-link .p-menuitem-icon, + .p-panelmenu-header > a { + color: $primaryTextColor !important; + background: transparent !important; + font-size: 1rem !important; + font-weight: normal !important; } - .btn-wrapper { - display: flex !important; - align-items: center !important; + .p-menuitem-link:focus, + .p-panelmenu-header > a:focus, + .p-panelmenu-content .p-menuitem .p-menuitem-link:focus { + box-shadow: none !important; } - .btn { - background-color: $primaryHeaderColor; + .p-menuitem-link:hover, + .p-panelmenu-header > a:hover, + .p-panelmenu-content .p-menuitem .p-menuitem-link:hover { + background-color: $secondaryBackgroundColor !important; + $border-radius: 20px; + border-radius: $border-radius 0 0 $border-radius; + + .p-menuitem-text, + .p-menuitem-icon, + .p-menuitem-text, + .p-panelmenu-icon { + color: $primaryHeaderColor !important; + } + } + + .p-panelmenu-content { + margin: 5px 0 5px 10px; + } + } + + .p-menu-overlay { + background-color: $primaryBackgroundColor !important; + color: $primaryTextColor !important; + border-top: 2px solid $primaryHeaderColor !important; + + .p-menuitem-link:hover { + background-color: $primaryBackgroundColor !important; + + .p-menuitem-text, + .p-menuitem-icon { + color: $primaryHeaderColor !important; + } + } + } + + p-dropdown { + .p-dropdown { + background-color: $primaryBackgroundColor !important; + border-color: $primaryTextColor !important; + color: $primaryTextColor !important; + + span { color: $primaryTextColor; - border: 0; + } - &:hover, - &:enabled:hover { - background-color: $primaryHeaderColor; - color: $primaryTextColor; - border: 0; - } - } + .p-dropdown-panel { + background-color: $secondaryBackgroundColor !important; - .icon-btn { - background-color: transparent !important; - color: $primaryTextColor !important; - border: 0 !important; + .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + background-color: $secondaryBackgroundColor !important; + color: $primaryHeaderColor !important; - .pi { - font-size: 1.275rem !important; - } - } - - .text-btn { - background-color: transparent !important; - color: $primaryTextColor !important; - border: 0 !important; - padding: 0px !important; - - &:hover { - background-color: transparent !important; + span { color: $primaryHeaderColor !important; - border: 0; + } } - } - .icon-btn-without-hover { - &:hover { - background-color: transparent !important; - color: $primaryTextColor !important; - border: 0 !important; - } - } + .p-dropdown-items .p-dropdown-item.p-highlight { + background-color: $secondaryBackgroundColor !important; + color: $primaryHeaderColor !important; - .icon-btn { - &:hover { - background-color: transparent !important; + span { color: $primaryHeaderColor !important; - border: 0; + } } + } + } + } + + p-table { + background-color: $primaryBackgroundColor; + color: $primaryTextColor !important; + + .table-caption { + .table-caption-text { + } + + .table-caption-search-wrapper { + .table-caption-search { + height: 30px !important; + + .table-caption-search-icon { + } + + .table-caption-search-input { + height: 100% !important; + + &:focus { + outline-color: $primaryHeaderColor; + } + } + } + } + + .table-caption-btn-wrapper { + height: 30px !important; + } } - .danger-icon-btn { - background-color: transparent !important; - color: $primaryTextColor !important; - border: 0 !important; + .table-edit-input { + width: 100% !important; + } + } - &:hover { - background-color: transparent !important; - color: $primaryErrorColor !important; - border: 0; - } - - .pi { - font-size: 1.275rem !important; - } + p-checkbox { + .p-checkbox .p-checkbox-box { + background: $primaryBackgroundColor !important; + background-color: $primaryBackgroundColor !important; } - .danger-btn { - background-color: $primaryErrorColor !important; - color: $primaryErrorColor !important; - border: 0 !important; - - &:hover { - background-color: $primaryErrorColor !important; - color: $primaryTextColor !important; - border: 0; - } - - .pi { - font-size: 1.275rem !important; - } + .p-checkbox .p-checkbox-box.p-highlight { + background: $primaryBackgroundColor !important; + background-color: $primaryBackgroundColor !important; + border-color: $primaryTextColor !important; + box-shadow: none !important; } - .p-datatable .p-sortable-column.p-highlight, - .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon { + .p-checkbox .p-checkbox-box .p-checkbox-icon { + color: $primaryTextColor !important; + } + + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus, + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: $primaryHeaderColor !important; + box-shadow: none !important; + + .p-checkbox-icon { color: $primaryHeaderColor !important; + } + } + } + + p-dialog, + p-confirmdialog, + p-dynamicdialog { + .p-dialog.p-confirm-dialog .p-confirm-dialog-message { + margin-left: 0 !important; } - .p-dropdown:not(.p-disabled):hover, - .p-dropdown:not(.p-disabled).p-focus, - .p-link:focus { - border-color: $primaryHeaderColor !important; - box-shadow: none !important; - } + .p-dialog { + background-color: $secondaryBackgroundColor !important; - .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { - background: transparent !important; - background-color: transparent !important; - color: $primaryHeaderColor !important; - } - - .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover, - .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { + .p-dialog-header { background-color: $primaryBackgroundColor !important; - color: $primaryHeaderColor !important; + color: $primaryTextColor !important; + } + + .p-dialog-content, + .p-dialog-footer { + background-color: $secondaryBackgroundColor !important; + color: $primaryTextColor !important; + } } + } + + input, + .p-password input { + border-radius: 10px; + border: $default-border; + + &:focus { + box-shadow: none !important; + } + + &:hover, + &:active, + &:enabled:focus { + border-color: $primaryHeaderColor !important; + } + } + + .btn-wrapper { + display: flex !important; + align-items: center !important; + } + + .btn { + background-color: $primaryHeaderColor; + color: $primaryTextColor; + border: 0; + + &:hover, + &:enabled:hover { + background-color: $primaryHeaderColor; + color: $primaryTextColor; + border: 0; + } + } + + .icon-btn { + background-color: transparent !important; + color: $primaryTextColor !important; + border: 0 !important; + + .pi { + font-size: 1.275rem !important; + } + } + + .text-btn { + background-color: transparent !important; + color: $primaryTextColor !important; + border: 0 !important; + padding: 0 !important; + + &:hover { + background-color: transparent !important; + color: $primaryHeaderColor !important; + border: 0; + } + } + + .icon-btn-without-hover { + &:hover { + background-color: transparent !important; + color: $primaryTextColor !important; + border: 0 !important; + } + } + + .icon-btn { + &:hover { + background-color: transparent !important; + color: $primaryHeaderColor !important; + border: 0; + } + } + + .danger-icon-btn { + background-color: transparent !important; + color: $primaryTextColor !important; + border: 0 !important; + + &:hover { + background-color: transparent !important; + color: $primaryErrorColor !important; + border: 0; + } + + .pi { + font-size: 1.275rem !important; + } + } + + .danger-btn { + background-color: $primaryErrorColor !important; + color: $primaryErrorColor !important; + border: 0 !important; + + &:hover { + background-color: $primaryErrorColor !important; + color: $primaryTextColor !important; + border: 0; + } + + .pi { + font-size: 1.275rem !important; + } + } + + .p-datatable .p-sortable-column.p-highlight, + .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon { + color: $primaryHeaderColor !important; + } + + .p-dropdown:not(.p-disabled):hover, + .p-dropdown:not(.p-disabled).p-focus, + .p-link:focus { + border-color: $primaryHeaderColor !important; + box-shadow: none !important; + } + + .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { + background: transparent !important; + color: $primaryHeaderColor !important; + } + + .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover, + .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, + .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, + .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, + .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { + background-color: $primaryBackgroundColor !important; + color: $primaryHeaderColor !important; + } } diff --git a/kdb-web/src/styles/themes/default-light-theme.scss b/kdb-web/src/styles/themes/default-light-theme.scss index 69a1b97d..4c37c304 100644 --- a/kdb-web/src/styles/themes/default-light-theme.scss +++ b/kdb-web/src/styles/themes/default-light-theme.scss @@ -1,558 +1,583 @@ .default-light-theme { - $primaryTextColor: #272727; - $secondayTextColor: #fff; - $secondayTextColor2: #1e88e5; + $primaryTextColor: #272727; + $secondayTextColor: #fff; + $secondayTextColor2: #1e88e5; - $primaryHeaderColor: #1e88e5; - $secondaryHeaderColor: #6ab7ff; - $secondaryHeaderColor2: #005cb2; + $primaryHeaderColor: #1e88e5; + $secondaryHeaderColor: #6ab7ff; + $secondaryHeaderColor2: #005cb2; - $primaryBackgroundColor: #fff; - $secondaryBackgroundColor: #cccccc; - $secondaryBackgroundColor2: #4f4f4f; - $secondaryBackgroundColor3: #272727; + $primaryBackgroundColor: #fff; + $secondaryBackgroundColor: #cccccc; + $secondaryBackgroundColor2: #4f4f4f; + $secondaryBackgroundColor3: #272727; - $primaryErrorColor: #b00020; - $secondaryErrorColor: #e94948; + $primaryErrorColor: #b00020; + $secondaryErrorColor: #e94948; - $default-border: 2px solid $secondaryBackgroundColor; + $default-border: 2px solid $secondaryBackgroundColor; + background-color: $primaryBackgroundColor; + + h1, + h2 { + color: $primaryHeaderColor; + } + + input, + p { + color: $primaryTextColor; + } + + input { + background-color: $primaryBackgroundColor !important; + } + + .input-field-info-text { + color: $primaryTextColor; + } + + /* Change Autocomplete styles in Chrome*/ + input:-webkit-autofill, + input:-webkit-autofill:hover, + input:-webkit-autofill:focus, + textarea:-webkit-autofill, + textarea:-webkit-autofill:hover, + textarea:-webkit-autofill:focus, + select:-webkit-autofill, + select:-webkit-autofill:hover, + select:-webkit-autofill:focus { + border: 1px solid $primaryHeaderColor; + -webkit-text-fill-color: $primaryTextColor; + -webkit-box-shadow: 0 0 0 1000px $primaryBackgroundColor inset; + transition: background-color 5000s ease-in-out 0s; + } + + header { background-color: $primaryBackgroundColor; - h1, - h2 { - color: $primaryHeaderColor; - } - - input, - p { - color: $primaryTextColor; - } - - input { - background-color: $primaryBackgroundColor !important; - } - - .input-field-info-text { - color: $primaryTextColor; - } - - /* Change Autocomplete styles in Chrome*/ - input:-webkit-autofill, - input:-webkit-autofill:hover, - input:-webkit-autofill:focus, - textarea:-webkit-autofill, - textarea:-webkit-autofill:hover, - textarea:-webkit-autofill:focus, - select:-webkit-autofill, - select:-webkit-autofill:hover, - select:-webkit-autofill:focus { - border: 1px solid $primaryHeaderColor; - -webkit-text-fill-color: $primaryTextColor; - -webkit-box-shadow: 0 0 0px 1000px $primaryBackgroundColor inset; - transition: background-color 5000s ease-in-out 0s; - } - - header { - background-color: $primaryBackgroundColor; - - .logo-button-wrapper { - .p-button.p-button-text { - color: $primaryTextColor; - - &:hover { - color: $primaryTextColor; - background-color: $primaryBackgroundColor; - } - } - } - - .logo { - color: $primaryHeaderColor; - } - } - - h1 { - color: $primaryHeaderColor; - } - - .app { - .sidebar { - background-color: $primaryBackgroundColor; - - .menu { - color: $primaryTextColor; - } - } - - .component-wrapper { - color: $primaryTextColor; - - .component { - background-color: $secondaryBackgroundColor; - - .content-wrapper { - background-color: $primaryBackgroundColor; - border-top: 2px solid $primaryHeaderColor; - - .content-header { - border-bottom: $default-border; - } - - .content { - .content-row { - } - - .content-column { - } - - .content-data-name { - } - - .content-data-value { - } - - .content-divider { - border-bottom: $default-border; - } - - .server-list-wrapper { - .server-filter { - } - - .server-count { - } - - .server-list { - .server { - border: $default-border; - border-radius: 15px; - - .logo { - img { - border-radius: 100%; - } - } - - .name { - color: $primaryHeaderColor; - } - - &:hover { - border-color: $primaryHeaderColor !important; - } - } - } - } - } - } - } - } - } - - .p-dialog-header { - background-color: $secondaryBackgroundColor !important; - color: $primaryTextColor !important; - } - - .p-dialog-content { - .content-data-name, - .content-data-value { - color: $primaryTextColor; - - .text-btn { - font-size: 18px !important; - font-weight: 400 !important; - } - } - } - - footer { - background-color: $primaryBackgroundColor; + .logo-button-wrapper { + .p-button.p-button-text { color: $primaryTextColor; - a { - color: $primaryTextColor; + &:hover { + color: $primaryTextColor; + background-color: $primaryBackgroundColor; } + } } - .invalid-feedback { - color: $primaryErrorColor; + .logo { + color: $primaryHeaderColor; + } + } + + h1 { + color: $primaryHeaderColor; + } + + .app { + .sidebar { + background-color: $primaryBackgroundColor; + + .menu { + color: $primaryTextColor; + } } - .invalid-feedback-input, - .invalid-feedback-input:focus, - .invalid-feedback-input:hover { - input, - input:enabled:focus { - outline: 1px solid $primaryErrorColor !important; - border: 1px solid $primaryErrorColor !important; - border-color: $primaryErrorColor !important; - } - } + .component-wrapper { + color: $primaryTextColor; - .login-wrapper { + .component { background-color: $secondaryBackgroundColor; - .login-form-wrapper, - .auth-header { - background-color: $primaryBackgroundColor; + .content-wrapper { + background-color: $primaryBackgroundColor; + border-top: 2px solid $primaryHeaderColor; - .login-form { - .input-field { - input, - .p-password { - } - } + .content-header { + border-bottom: $default-border; + } - .login-form-submit { - .login-form-submit-btn { - } - } - - .login-form-sub-button-wrapper { - .login-form-sub-btn { - background-color: $primaryBackgroundColor; - color: $secondayTextColor2; - border: 2px solid $secondayTextColor2; - - &:hover { - background-color: $primaryHeaderColor !important; - color: $primaryTextColor !important; - } - } - - .login-form-sub-login-btn { - border: none; - } - } + .content { + .content-row { } - } - } - .spinner-component-wrapper { - background-color: rgba($secondaryBackgroundColor, 0.5); + .content-column { + } - .spinner-wrapper { - .custom-spinner .p-progress-spinner-circle { + .content-data-name { + } + + .content-data-value { + } + + .content-divider { + border-bottom: $default-border; + } + + .server-list-wrapper { + .server-filter { + } + + .server-count { + } + + .server-list { + .server { + border: $default-border; + border-radius: 15px; + + .logo { + img { + border-radius: 100%; + } + } + + .name { + color: $primaryHeaderColor; + } + + &:hover { + border-color: $primaryHeaderColor !important; + } + } + } + } + + p-panel { + .p-panel-header, + .p-panel-content { + border: $default-border; + } + + .p-panel-title { color: $primaryHeaderColor; - } - } - } + } - .wrapper-right { - justify-content: flex-end !important; - } + .p-panel-header { + background-color: $primaryBackgroundColor; - /* - PrimeNG Fixes - */ - .p-progress-spinner-circle { - stroke: $primaryHeaderColor !important; - } - - .p-menu, - .p-panelmenu { - color: $primaryTextColor !important; - - .p-menuitem-link .p-menuitem-text, - .p-menuitem-link .p-menuitem-icon, - .p-panelmenu-header > a { - color: $primaryTextColor !important; - background: transparent !important; - font-size: 1rem !important; - font-weight: normal !important; - } - - .p-menuitem-link:focus, - .p-panelmenu-header > a:focus, - .p-panelmenu-content .p-menuitem .p-menuitem-link:focus { - box-shadow: none !important; - } - - .p-menuitem-link:hover, - .p-panelmenu-header > a:hover, - .p-panelmenu-content .p-menuitem .p-menuitem-link:hover { - background-color: $secondaryBackgroundColor !important; - $border-radius: 20px; - border-radius: $border-radius 0px 0px $border-radius; - - .p-menuitem-text, - .p-menuitem-icon, - .p-menuitem-text, - .p-panelmenu-icon { - color: $primaryHeaderColor !important; - } - } - - .p-panelmenu-content { - margin: 5px 0px 5px 10px; - } - } - - .p-menu-overlay { - background-color: $primaryBackgroundColor !important; - color: $primaryTextColor !important; - border-top: 2px solid $primaryHeaderColor !important; - - .p-menuitem-link:hover { - background-color: $primaryBackgroundColor !important; - .p-menuitem-text, - .p-menuitem-icon { - color: $primaryHeaderColor !important; - } - } - } - - p-dropdown { - .p-dropdown { - background-color: $primaryBackgroundColor !important; - border-color: $primaryTextColor !important; - color: $primaryTextColor !important; - - span { - color: $primaryTextColor; - } - - .p-dropdown-panel { - background-color: $primaryBackgroundColor !important; - - .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { - background-color: $primaryBackgroundColor !important; - color: $primaryHeaderColor !important; - - span { - color: $primaryHeaderColor !important; - } - } - - .p-dropdown-items .p-dropdown-item.p-highlight { - background-color: $primaryBackgroundColor !important; - color: $primaryHeaderColor !important; - - span { - color: $primaryHeaderColor !important; - } + .p-panel-header-icon { + color: $primaryHeaderColor; } + } } + + .p-panel-content { + background-color: $primaryBackgroundColor; + color: $primaryTextColor; + border-top: none !important; + } + } } + } } + } - p-table { - background-color: $primaryBackgroundColor; - color: $primaryTextColor !important; + .p-dialog-header { + background-color: $secondaryBackgroundColor !important; + color: $primaryTextColor !important; + } - .table-caption { - .table-caption-text { - } + .p-dialog-content { + .content-data-name, + .content-data-value { + color: $primaryTextColor; - .table-caption-search-wrapper { - .table-caption-search { - height: 30px !important; - - .table-caption-search-icon { - } - - .table-caption-search-input { - height: 100% !important; - - &:focus { - outline-color: $primaryHeaderColor; - } - } - } - } - - .table-caption-btn-wrapper { - height: 30px !important; - } - } - - .table-edit-input { - width: 100% !important; - } + .text-btn { + font-size: 18px !important; + font-weight: 400 !important; + } } + } - p-checkbox { - .p-checkbox .p-checkbox-box { - background: $primaryBackgroundColor !important; - background-color: $primaryBackgroundColor !important; - } + footer { + background-color: $primaryBackgroundColor; + color: $primaryTextColor; - .p-checkbox .p-checkbox-box.p-highlight { - background: $primaryBackgroundColor !important; - background-color: $primaryBackgroundColor !important; - border-color: $primaryTextColor !important; - box-shadow: none !important; - } - - .p-checkbox .p-checkbox-box .p-checkbox-icon { - color: $primaryTextColor !important; - } - - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus, - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: $primaryHeaderColor !important; - box-shadow: none !important; - - .p-checkbox-icon { - color: $primaryHeaderColor !important; - } - } + a { + color: $primaryTextColor; } + } - p-dialog, - p-confirmdialog, - p-dynamicdialog { - .p-dialog.p-confirm-dialog .p-confirm-dialog-message { - margin-left: 0px !important; - } - - .p-dialog { - background-color: $primaryBackgroundColor !important; - - .p-dialog-header { - background-color: $secondaryBackgroundColor !important; - color: $primaryTextColor !important; - } - - .p-dialog-content, - .p-dialog-footer { - background-color: $primaryBackgroundColor !important; - color: $primaryTextColor !important; - } - } - } + .invalid-feedback { + color: $primaryErrorColor; + } + .invalid-feedback-input, + .invalid-feedback-input:focus, + .invalid-feedback-input:hover { input, - .p-password input { - border-radius: 10px; - border: $default-border; + input:enabled:focus { + outline: 1px solid $primaryErrorColor !important; + border: 1px solid $primaryErrorColor !important; + border-color: $primaryErrorColor !important; + } + } - &:focus { - box-shadow: none !important; + .login-wrapper { + background-color: $secondaryBackgroundColor; + + .login-form-wrapper, + .auth-header { + background-color: $primaryBackgroundColor; + + .login-form { + .input-field { + input, + .p-password { + } } - &:hover, - &:active, - &:enabled:focus { - border-color: $primaryHeaderColor !important; + .login-form-submit { + .login-form-submit-btn { + } } + + .login-form-sub-button-wrapper { + .login-form-sub-btn { + background-color: $primaryBackgroundColor; + color: $secondayTextColor2; + border: 2px solid $secondayTextColor2; + + &:hover { + background-color: $primaryHeaderColor !important; + color: $primaryTextColor !important; + } + } + + .login-form-sub-login-btn { + border: none; + } + } + } + } + } + + .spinner-component-wrapper { + background-color: rgba($secondaryBackgroundColor, 0.5); + + .spinner-wrapper { + .custom-spinner .p-progress-spinner-circle { + color: $primaryHeaderColor; + } + } + } + + .wrapper-right { + justify-content: flex-end !important; + } + + /* + PrimeNG Fixes + */ + .p-progress-spinner-circle { + stroke: $primaryHeaderColor !important; + } + + .p-menu, + .p-panelmenu { + color: $primaryTextColor !important; + + .p-menuitem-link .p-menuitem-text, + .p-menuitem-link .p-menuitem-icon, + .p-panelmenu-header > a { + color: $primaryTextColor !important; + background: transparent !important; + font-size: 1rem !important; + font-weight: normal !important; } - .btn-wrapper { - display: flex !important; - align-items: center !important; + .p-menuitem-link:focus, + .p-panelmenu-header > a:focus, + .p-panelmenu-content .p-menuitem .p-menuitem-link:focus { + box-shadow: none !important; } - .btn { - background-color: $primaryHeaderColor; + .p-menuitem-link:hover, + .p-panelmenu-header > a:hover, + .p-panelmenu-content .p-menuitem .p-menuitem-link:hover { + background-color: $secondaryBackgroundColor !important; + $border-radius: 20px; + border-radius: $border-radius 0 0 $border-radius; + + .p-menuitem-text, + .p-menuitem-icon, + .p-menuitem-text, + .p-panelmenu-icon { + color: $primaryHeaderColor !important; + } + } + + .p-panelmenu-content { + margin: 5px 0 5px 10px; + } + } + + .p-menu-overlay { + background-color: $primaryBackgroundColor !important; + color: $primaryTextColor !important; + border-top: 2px solid $primaryHeaderColor !important; + + .p-menuitem-link:hover { + background-color: $primaryBackgroundColor !important; + + .p-menuitem-text, + .p-menuitem-icon { + color: $primaryHeaderColor !important; + } + } + } + + p-dropdown { + .p-dropdown { + background-color: $primaryBackgroundColor !important; + border-color: $primaryTextColor !important; + color: $primaryTextColor !important; + + span { color: $primaryTextColor; - border: 0; + } - &:hover, - &:enabled:hover { - background-color: $primaryHeaderColor; - color: $primaryTextColor; - border: 0; - } - } - - .icon-btn { - background-color: transparent !important; - color: $primaryTextColor !important; - border: 0 !important; - - .pi { - font-size: 1.275rem !important; - } - } - - .text-btn { - background-color: transparent !important; - color: $primaryTextColor !important; - border: 0 !important; - padding: 0px !important; - - &:hover { - background-color: transparent !important; - color: $primaryHeaderColor !important; - border: 0; - } - } - - .icon-btn-without-hover { - &:hover { - background-color: transparent !important; - color: $primaryTextColor !important; - border: 0 !important; - } - } - - .icon-btn { - &:hover { - background-color: transparent !important; - color: $primaryHeaderColor !important; - border: 0; - } - } - - .danger-icon-btn { - background-color: transparent !important; - color: $primaryTextColor !important; - border: 0 !important; - - &:hover { - background-color: transparent !important; - color: $primaryErrorColor !important; - border: 0; - } - - .pi { - font-size: 1.275rem !important; - } - } - - .danger-btn { - background-color: $primaryErrorColor !important; - color: $primaryErrorColor !important; - border: 0 !important; - - &:hover { - background-color: $primaryErrorColor !important; - color: $primaryTextColor !important; - border: 0; - } - - .pi { - font-size: 1.275rem !important; - } - } - - .p-datatable .p-sortable-column.p-highlight, - .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon { - color: $primaryHeaderColor !important; - } - - .p-dropdown:not(.p-disabled):hover, - .p-dropdown:not(.p-disabled).p-focus, - .p-link:focus { - border-color: $primaryHeaderColor !important; - box-shadow: none !important; - } - - .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { - background: transparent !important; - background-color: transparent !important; - color: $primaryHeaderColor !important; - } - - .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover, - .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { + .p-dropdown-panel { background-color: $primaryBackgroundColor !important; - color: $primaryHeaderColor !important; + + .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + background-color: $primaryBackgroundColor !important; + color: $primaryHeaderColor !important; + + span { + color: $primaryHeaderColor !important; + } + } + + .p-dropdown-items .p-dropdown-item.p-highlight { + background-color: $primaryBackgroundColor !important; + color: $primaryHeaderColor !important; + + span { + color: $primaryHeaderColor !important; + } + } + } } + } + + p-table { + background-color: $primaryBackgroundColor; + color: $primaryTextColor !important; + + .table-caption { + .table-caption-text { + } + + .table-caption-search-wrapper { + .table-caption-search { + height: 30px !important; + + .table-caption-search-icon { + } + + .table-caption-search-input { + height: 100% !important; + + &:focus { + outline-color: $primaryHeaderColor; + } + } + } + } + + .table-caption-btn-wrapper { + height: 30px !important; + } + } + + .table-edit-input { + width: 100% !important; + } + } + + p-checkbox { + .p-checkbox .p-checkbox-box { + background: $primaryBackgroundColor !important; + background-color: $primaryBackgroundColor !important; + } + + .p-checkbox .p-checkbox-box.p-highlight { + background: $primaryBackgroundColor !important; + background-color: $primaryBackgroundColor !important; + border-color: $primaryTextColor !important; + box-shadow: none !important; + } + + .p-checkbox .p-checkbox-box .p-checkbox-icon { + color: $primaryTextColor !important; + } + + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus, + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: $primaryHeaderColor !important; + box-shadow: none !important; + + .p-checkbox-icon { + color: $primaryHeaderColor !important; + } + } + } + + p-dialog, + p-confirmdialog, + p-dynamicdialog { + .p-dialog.p-confirm-dialog .p-confirm-dialog-message { + margin-left: 0 !important; + } + + .p-dialog { + background-color: $primaryBackgroundColor !important; + + .p-dialog-header { + background-color: $secondaryBackgroundColor !important; + color: $primaryTextColor !important; + } + + .p-dialog-content, + .p-dialog-footer { + background-color: $primaryBackgroundColor !important; + color: $primaryTextColor !important; + } + } + } + + input, + .p-password input { + border-radius: 10px; + border: $default-border; + + &:focus { + box-shadow: none !important; + } + + &:hover, + &:active, + &:enabled:focus { + border-color: $primaryHeaderColor !important; + } + } + + .btn-wrapper { + display: flex !important; + align-items: center !important; + } + + .btn { + background-color: $primaryHeaderColor; + color: $primaryTextColor; + border: 0; + + &:hover, + &:enabled:hover { + background-color: $primaryHeaderColor; + color: $primaryTextColor; + border: 0; + } + } + + .icon-btn { + background-color: transparent !important; + color: $primaryTextColor !important; + border: 0 !important; + + .pi { + font-size: 1.275rem !important; + } + } + + .text-btn { + background-color: transparent !important; + color: $primaryTextColor !important; + border: 0 !important; + padding: 0 !important; + + &:hover { + background-color: transparent !important; + color: $primaryHeaderColor !important; + border: 0; + } + } + + .icon-btn-without-hover { + &:hover { + background-color: transparent !important; + color: $primaryTextColor !important; + border: 0 !important; + } + } + + .icon-btn { + &:hover { + background-color: transparent !important; + color: $primaryHeaderColor !important; + border: 0; + } + } + + .danger-icon-btn { + background-color: transparent !important; + color: $primaryTextColor !important; + border: 0 !important; + + &:hover { + background-color: transparent !important; + color: $primaryErrorColor !important; + border: 0; + } + + .pi { + font-size: 1.275rem !important; + } + } + + .danger-btn { + background-color: $primaryErrorColor !important; + color: $primaryErrorColor !important; + border: 0 !important; + + &:hover { + background-color: $primaryErrorColor !important; + color: $primaryTextColor !important; + border: 0; + } + + .pi { + font-size: 1.275rem !important; + } + } + + .p-datatable .p-sortable-column.p-highlight, + .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon { + color: $primaryHeaderColor !important; + } + + .p-dropdown:not(.p-disabled):hover, + .p-dropdown:not(.p-disabled).p-focus, + .p-link:focus { + border-color: $primaryHeaderColor !important; + box-shadow: none !important; + } + + .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { + background: transparent !important; + color: $primaryHeaderColor !important; + } + + .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover, + .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, + .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, + .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, + .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { + background-color: $primaryBackgroundColor !important; + color: $primaryHeaderColor !important; + } } diff --git a/kdb-web/src/styles/themes/sh-edraft-dark-theme.scss b/kdb-web/src/styles/themes/sh-edraft-dark-theme.scss index cef76707..d05d920f 100644 --- a/kdb-web/src/styles/themes/sh-edraft-dark-theme.scss +++ b/kdb-web/src/styles/themes/sh-edraft-dark-theme.scss @@ -1,560 +1,585 @@ .sh-edraft-dark-theme { - $primaryTextColor: #fff; - $secondayTextColor: #000; - $secondayTextColor2: #ef9d0d; + $primaryTextColor: #fff; + $secondayTextColor: #000; + $secondayTextColor2: #ef9d0d; - $primaryHeaderColor: #ef9d0d; - $secondaryHeaderColor: #ffce4c; - $secondaryHeaderColor2: #b76f00; + $primaryHeaderColor: #ef9d0d; + $secondaryHeaderColor: #ffce4c; + $secondaryHeaderColor2: #b76f00; - $primaryBackgroundColor: #272727; - $secondaryBackgroundColor: #4f4f4f; - $secondaryBackgroundColor2: #fff; - $secondaryBackgroundColor3: #cccccc; + $primaryBackgroundColor: #272727; + $secondaryBackgroundColor: #4f4f4f; + $secondaryBackgroundColor2: #fff; + $secondaryBackgroundColor3: #cccccc; - $primaryErrorColor: #b00020; - $secondaryErrorColor: #e94948; + $primaryErrorColor: #b00020; + $secondaryErrorColor: #e94948; - $default-border: 2px solid $secondaryBackgroundColor3; + $default-border: 2px solid $secondaryBackgroundColor3; + background-color: $primaryBackgroundColor; + + h1, + h2 { + color: $primaryHeaderColor; + } + + input, + p { + color: $primaryTextColor; + } + + input { + background-color: $secondaryBackgroundColor !important; + } + + .input-field-info-text { + color: $primaryTextColor; + } + + /* Change Autocomplete styles in Chrome*/ + input:-webkit-autofill, + input:-webkit-autofill:hover, + input:-webkit-autofill:focus, + textarea:-webkit-autofill, + textarea:-webkit-autofill:hover, + textarea:-webkit-autofill:focus, + select:-webkit-autofill, + select:-webkit-autofill:hover, + select:-webkit-autofill:focus { + border: 1px solid $primaryHeaderColor; + -webkit-text-fill-color: $primaryTextColor; + -webkit-box-shadow: 0 0 0 1000px $secondaryBackgroundColor inset; + transition: background-color 5000s ease-in-out 0s; + } + + header { background-color: $primaryBackgroundColor; - h1, - h2 { - color: $primaryHeaderColor; - } - - input, - p { - color: $primaryTextColor; - } - - input { - background-color: $secondaryBackgroundColor !important; - } - - .input-field-info-text { - color: $primaryTextColor; - } - - /* Change Autocomplete styles in Chrome*/ - input:-webkit-autofill, - input:-webkit-autofill:hover, - input:-webkit-autofill:focus, - textarea:-webkit-autofill, - textarea:-webkit-autofill:hover, - textarea:-webkit-autofill:focus, - select:-webkit-autofill, - select:-webkit-autofill:hover, - select:-webkit-autofill:focus { - border: 1px solid $primaryHeaderColor; - -webkit-text-fill-color: $primaryTextColor; - -webkit-box-shadow: 0 0 0px 1000px $secondaryBackgroundColor inset; - transition: background-color 5000s ease-in-out 0s; - } - - header { - background-color: $primaryBackgroundColor; - - .logo-button-wrapper { - .p-button.p-button-text { - color: $primaryTextColor; - - &:hover { - color: $primaryTextColor; - background-color: $primaryBackgroundColor; - } - } - } - - .logo { - color: $primaryHeaderColor; - } - } - - h1 { - color: $primaryHeaderColor; - } - - .app { - .sidebar { - background-color: $primaryBackgroundColor; - - .menu { - color: $primaryTextColor; - } - } - - .component-wrapper { - color: $primaryTextColor; - - .component { - background-color: $secondaryBackgroundColor; - - .content-wrapper { - background-color: $primaryBackgroundColor; - border-top: 2px solid $primaryHeaderColor; - - .content-header { - border-bottom: $default-border; - } - - .content { - .content-row { - } - - .content-column { - } - - .content-data-name { - } - - .content-data-value { - } - - .content-divider { - border-bottom: $default-border; - } - - .server-list-wrapper { - .server-filter { - } - - .server-count { - } - - .server-list { - .server { - border: $default-border; - border-radius: 15px; - - .logo { - img { - border-radius: 100%; - } - } - - .name { - color: $primaryHeaderColor; - } - - &:hover { - border-color: $primaryHeaderColor !important; - } - } - } - } - } - } - } - } - } - - .p-dialog-header { - background-color: $primaryBackgroundColor !important; - color: $primaryTextColor !important; - } - - .p-dialog-content { - background-color: $secondaryBackgroundColor !important; - - .content-data-name, - .content-data-value { - color: $primaryTextColor; - - .text-btn { - font-size: 18px !important; - font-weight: 400 !important; - } - } - } - - footer { - background-color: $primaryBackgroundColor; + .logo-button-wrapper { + .p-button.p-button-text { color: $primaryTextColor; - a { - color: $primaryTextColor; + &:hover { + color: $primaryTextColor; + background-color: $primaryBackgroundColor; } + } } - .invalid-feedback { - color: $primaryErrorColor; + .logo { + color: $primaryHeaderColor; + } + } + + h1 { + color: $primaryHeaderColor; + } + + .app { + .sidebar { + background-color: $primaryBackgroundColor; + + .menu { + color: $primaryTextColor; + } } - .invalid-feedback-input, - .invalid-feedback-input:focus, - .invalid-feedback-input:hover { - input, - input:enabled:focus { - outline: 1px solid $primaryErrorColor !important; - border: 1px solid $primaryErrorColor !important; - border-color: $primaryErrorColor !important; - } - } + .component-wrapper { + color: $primaryTextColor; - .login-wrapper { + .component { background-color: $secondaryBackgroundColor; - .login-form-wrapper, - .auth-header { - background-color: $primaryBackgroundColor; + .content-wrapper { + background-color: $primaryBackgroundColor; + border-top: 2px solid $primaryHeaderColor; - .login-form { - .input-field { - input, - .p-password { - } - } + .content-header { + border-bottom: $default-border; + } - .login-form-submit { - .login-form-submit-btn { - } - } - - .login-form-sub-button-wrapper { - .login-form-sub-btn { - background-color: $primaryBackgroundColor; - color: $secondayTextColor2; - border: 2px solid $secondayTextColor2; - - &:hover { - background-color: $primaryHeaderColor !important; - color: $primaryTextColor !important; - } - } - - .login-form-sub-login-btn { - border: none; - } - } + .content { + .content-row { } - } - } - .spinner-component-wrapper { - background-color: rgba($secondaryBackgroundColor, 0.5); + .content-column { + } - .spinner-wrapper { - .custom-spinner .p-progress-spinner-circle { + .content-data-name { + } + + .content-data-value { + } + + .content-divider { + border-bottom: $default-border; + } + + .server-list-wrapper { + .server-filter { + } + + .server-count { + } + + .server-list { + .server { + border: $default-border; + border-radius: 15px; + + .logo { + img { + border-radius: 100%; + } + } + + .name { + color: $primaryHeaderColor; + } + + &:hover { + border-color: $primaryHeaderColor !important; + } + } + } + } + + p-panel { + .p-panel-header, + .p-panel-content { + border: $default-border; + } + + .p-panel-title { color: $primaryHeaderColor; - } - } - } + } - .wrapper-right { - justify-content: flex-end !important; - } + .p-panel-header { + background-color: $primaryBackgroundColor; - /* - PrimeNG Fixes - */ - .p-progress-spinner-circle { - stroke: $primaryHeaderColor !important; - } - - .p-menu, - .p-panelmenu { - color: $primaryTextColor !important; - - .p-menuitem-link .p-menuitem-text, - .p-menuitem-link .p-menuitem-icon, - .p-panelmenu-header > a { - color: $primaryTextColor !important; - background: transparent !important; - font-size: 1rem !important; - font-weight: normal !important; - } - - .p-menuitem-link:focus, - .p-panelmenu-header > a:focus, - .p-panelmenu-content .p-menuitem .p-menuitem-link:focus { - box-shadow: none !important; - } - - .p-menuitem-link:hover, - .p-panelmenu-header > a:hover, - .p-panelmenu-content .p-menuitem .p-menuitem-link:hover { - background-color: $secondaryBackgroundColor !important; - $border-radius: 20px; - border-radius: $border-radius 0px 0px $border-radius; - - .p-menuitem-text, - .p-menuitem-icon, - .p-menuitem-text, - .p-panelmenu-icon { - color: $primaryHeaderColor !important; - } - } - - .p-panelmenu-content { - margin: 5px 0px 5px 10px; - } - } - - .p-menu-overlay { - background-color: $primaryBackgroundColor !important; - color: $primaryTextColor !important; - border-top: 2px solid $primaryHeaderColor !important; - - .p-menuitem-link:hover { - background-color: $primaryBackgroundColor !important; - .p-menuitem-text, - .p-menuitem-icon { - color: $primaryHeaderColor !important; - } - } - } - - p-dropdown { - .p-dropdown { - background-color: $primaryBackgroundColor !important; - border-color: $primaryTextColor !important; - color: $primaryTextColor !important; - - span { - color: $primaryTextColor; - } - - .p-dropdown-panel { - background-color: $secondaryBackgroundColor !important; - - .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { - background-color: $secondaryBackgroundColor !important; - color: $primaryHeaderColor !important; - - span { - color: $primaryHeaderColor !important; - } - } - - .p-dropdown-items .p-dropdown-item.p-highlight { - background-color: $secondaryBackgroundColor !important; - color: $primaryHeaderColor !important; - - span { - color: $primaryHeaderColor !important; - } + .p-panel-header-icon { + color: $primaryHeaderColor; } + } } + + .p-panel-content { + background-color: $primaryBackgroundColor; + color: $primaryTextColor; + border-top: none !important; + } + } } + } } + } - p-table { - background-color: $primaryBackgroundColor; - color: $primaryTextColor !important; + .p-dialog-header { + background-color: $primaryBackgroundColor !important; + color: $primaryTextColor !important; + } - .table-caption { - .table-caption-text { - } + .p-dialog-content { + background-color: $secondaryBackgroundColor !important; - .table-caption-search-wrapper { - .table-caption-search { - height: 30px !important; + .content-data-name, + .content-data-value { + color: $primaryTextColor; - .table-caption-search-icon { - } - - .table-caption-search-input { - height: 100% !important; - - &:focus { - outline-color: $primaryHeaderColor; - } - } - } - } - - .table-caption-btn-wrapper { - height: 30px !important; - } - } - - .table-edit-input { - width: 100% !important; - } + .text-btn { + font-size: 18px !important; + font-weight: 400 !important; + } } + } - p-checkbox { - .p-checkbox .p-checkbox-box { - background: $primaryBackgroundColor !important; - background-color: $primaryBackgroundColor !important; - } + footer { + background-color: $primaryBackgroundColor; + color: $primaryTextColor; - .p-checkbox .p-checkbox-box.p-highlight { - background: $primaryBackgroundColor !important; - background-color: $primaryBackgroundColor !important; - border-color: $primaryTextColor !important; - box-shadow: none !important; - } - - .p-checkbox .p-checkbox-box .p-checkbox-icon { - color: $primaryTextColor !important; - } - - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus, - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: $primaryHeaderColor !important; - box-shadow: none !important; - - .p-checkbox-icon { - color: $primaryHeaderColor !important; - } - } + a { + color: $primaryTextColor; } + } - p-dialog, - p-confirmdialog, - p-dynamicdialog { - .p-dialog.p-confirm-dialog .p-confirm-dialog-message { - margin-left: 0px !important; - } - - .p-dialog { - background-color: $secondaryBackgroundColor !important; - - .p-dialog-header { - background-color: $primaryBackgroundColor !important; - color: $primaryTextColor !important; - } - - .p-dialog-content, - .p-dialog-footer { - background-color: $secondaryBackgroundColor !important; - color: $primaryTextColor !important; - } - } - } + .invalid-feedback { + color: $primaryErrorColor; + } + .invalid-feedback-input, + .invalid-feedback-input:focus, + .invalid-feedback-input:hover { input, - .p-password input { - border-radius: 10px; - border: $default-border; + input:enabled:focus { + outline: 1px solid $primaryErrorColor !important; + border: 1px solid $primaryErrorColor !important; + border-color: $primaryErrorColor !important; + } + } - &:focus { - box-shadow: none !important; + .login-wrapper { + background-color: $secondaryBackgroundColor; + + .login-form-wrapper, + .auth-header { + background-color: $primaryBackgroundColor; + + .login-form { + .input-field { + input, + .p-password { + } } - &:hover, - &:active, - &:enabled:focus { - border-color: $primaryHeaderColor !important; + .login-form-submit { + .login-form-submit-btn { + } } + + .login-form-sub-button-wrapper { + .login-form-sub-btn { + background-color: $primaryBackgroundColor; + color: $secondayTextColor2; + border: 2px solid $secondayTextColor2; + + &:hover { + background-color: $primaryHeaderColor !important; + color: $primaryTextColor !important; + } + } + + .login-form-sub-login-btn { + border: none; + } + } + } + } + } + + .spinner-component-wrapper { + background-color: rgba($secondaryBackgroundColor, 0.5); + + .spinner-wrapper { + .custom-spinner .p-progress-spinner-circle { + color: $primaryHeaderColor; + } + } + } + + .wrapper-right { + justify-content: flex-end !important; + } + + /* + PrimeNG Fixes + */ + .p-progress-spinner-circle { + stroke: $primaryHeaderColor !important; + } + + .p-menu, + .p-panelmenu { + color: $primaryTextColor !important; + + .p-menuitem-link .p-menuitem-text, + .p-menuitem-link .p-menuitem-icon, + .p-panelmenu-header > a { + color: $primaryTextColor !important; + background: transparent !important; + font-size: 1rem !important; + font-weight: normal !important; } - .btn-wrapper { - display: flex !important; - align-items: center !important; + .p-menuitem-link:focus, + .p-panelmenu-header > a:focus, + .p-panelmenu-content .p-menuitem .p-menuitem-link:focus { + box-shadow: none !important; } - .btn { - background-color: $primaryHeaderColor; + .p-menuitem-link:hover, + .p-panelmenu-header > a:hover, + .p-panelmenu-content .p-menuitem .p-menuitem-link:hover { + background-color: $secondaryBackgroundColor !important; + $border-radius: 20px; + border-radius: $border-radius 0 0 $border-radius; + + .p-menuitem-text, + .p-menuitem-icon, + .p-menuitem-text, + .p-panelmenu-icon { + color: $primaryHeaderColor !important; + } + } + + .p-panelmenu-content { + margin: 5px 0 5px 10px; + } + } + + .p-menu-overlay { + background-color: $primaryBackgroundColor !important; + color: $primaryTextColor !important; + border-top: 2px solid $primaryHeaderColor !important; + + .p-menuitem-link:hover { + background-color: $primaryBackgroundColor !important; + + .p-menuitem-text, + .p-menuitem-icon { + color: $primaryHeaderColor !important; + } + } + } + + p-dropdown { + .p-dropdown { + background-color: $primaryBackgroundColor !important; + border-color: $primaryTextColor !important; + color: $primaryTextColor !important; + + span { color: $primaryTextColor; - border: 0; + } - &:hover, - &:enabled:hover { - background-color: $primaryHeaderColor; - color: $primaryTextColor; - border: 0; - } - } + .p-dropdown-panel { + background-color: $secondaryBackgroundColor !important; - .icon-btn { - background-color: transparent !important; - color: $primaryTextColor !important; - border: 0 !important; + .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + background-color: $secondaryBackgroundColor !important; + color: $primaryHeaderColor !important; - .pi { - font-size: 1.275rem !important; - } - } - - .text-btn { - background-color: transparent !important; - color: $primaryTextColor !important; - border: 0 !important; - padding: 0px !important; - - &:hover { - background-color: transparent !important; + span { color: $primaryHeaderColor !important; - border: 0; + } } - } - .icon-btn-without-hover { - &:hover { - background-color: transparent !important; - color: $primaryTextColor !important; - border: 0 !important; - } - } + .p-dropdown-items .p-dropdown-item.p-highlight { + background-color: $secondaryBackgroundColor !important; + color: $primaryHeaderColor !important; - .icon-btn { - &:hover { - background-color: transparent !important; + span { color: $primaryHeaderColor !important; - border: 0; + } } + } + } + } + + p-table { + background-color: $primaryBackgroundColor; + color: $primaryTextColor !important; + + .table-caption { + .table-caption-text { + } + + .table-caption-search-wrapper { + .table-caption-search { + height: 30px !important; + + .table-caption-search-icon { + } + + .table-caption-search-input { + height: 100% !important; + + &:focus { + outline-color: $primaryHeaderColor; + } + } + } + } + + .table-caption-btn-wrapper { + height: 30px !important; + } } - .danger-icon-btn { - background-color: transparent !important; - color: $primaryTextColor !important; - border: 0 !important; + .table-edit-input { + width: 100% !important; + } + } - &:hover { - background-color: transparent !important; - color: $primaryErrorColor !important; - border: 0; - } - - .pi { - font-size: 1.275rem !important; - } + p-checkbox { + .p-checkbox .p-checkbox-box { + background: $primaryBackgroundColor !important; + background-color: $primaryBackgroundColor !important; } - .danger-btn { - background-color: $primaryErrorColor !important; - color: $primaryErrorColor !important; - border: 0 !important; - - &:hover { - background-color: $primaryErrorColor !important; - color: $primaryTextColor !important; - border: 0; - } - - .pi { - font-size: 1.275rem !important; - } + .p-checkbox .p-checkbox-box.p-highlight { + background: $primaryBackgroundColor !important; + background-color: $primaryBackgroundColor !important; + border-color: $primaryTextColor !important; + box-shadow: none !important; } - .p-datatable .p-sortable-column.p-highlight, - .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon { + .p-checkbox .p-checkbox-box .p-checkbox-icon { + color: $primaryTextColor !important; + } + + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus, + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: $primaryHeaderColor !important; + box-shadow: none !important; + + .p-checkbox-icon { color: $primaryHeaderColor !important; + } + } + } + + p-dialog, + p-confirmdialog, + p-dynamicdialog { + .p-dialog.p-confirm-dialog .p-confirm-dialog-message { + margin-left: 0 !important; } - .p-dropdown:not(.p-disabled):hover, - .p-dropdown:not(.p-disabled).p-focus, - .p-link:focus { - border-color: $primaryHeaderColor !important; - box-shadow: none !important; - } + .p-dialog { + background-color: $secondaryBackgroundColor !important; - .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { - background: transparent !important; - background-color: transparent !important; - color: $primaryHeaderColor !important; - } - - .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover, - .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { + .p-dialog-header { background-color: $primaryBackgroundColor !important; - color: $primaryHeaderColor !important; + color: $primaryTextColor !important; + } + + .p-dialog-content, + .p-dialog-footer { + background-color: $secondaryBackgroundColor !important; + color: $primaryTextColor !important; + } } + } + + input, + .p-password input { + border-radius: 10px; + border: $default-border; + + &:focus { + box-shadow: none !important; + } + + &:hover, + &:active, + &:enabled:focus { + border-color: $primaryHeaderColor !important; + } + } + + .btn-wrapper { + display: flex !important; + align-items: center !important; + } + + .btn { + background-color: $primaryHeaderColor; + color: $primaryTextColor; + border: 0; + + &:hover, + &:enabled:hover { + background-color: $primaryHeaderColor; + color: $primaryTextColor; + border: 0; + } + } + + .icon-btn { + background-color: transparent !important; + color: $primaryTextColor !important; + border: 0 !important; + + .pi { + font-size: 1.275rem !important; + } + } + + .text-btn { + background-color: transparent !important; + color: $primaryTextColor !important; + border: 0 !important; + padding: 0 !important; + + &:hover { + background-color: transparent !important; + color: $primaryHeaderColor !important; + border: 0; + } + } + + .icon-btn-without-hover { + &:hover { + background-color: transparent !important; + color: $primaryTextColor !important; + border: 0 !important; + } + } + + .icon-btn { + &:hover { + background-color: transparent !important; + color: $primaryHeaderColor !important; + border: 0; + } + } + + .danger-icon-btn { + background-color: transparent !important; + color: $primaryTextColor !important; + border: 0 !important; + + &:hover { + background-color: transparent !important; + color: $primaryErrorColor !important; + border: 0; + } + + .pi { + font-size: 1.275rem !important; + } + } + + .danger-btn { + background-color: $primaryErrorColor !important; + color: $primaryErrorColor !important; + border: 0 !important; + + &:hover { + background-color: $primaryErrorColor !important; + color: $primaryTextColor !important; + border: 0; + } + + .pi { + font-size: 1.275rem !important; + } + } + + .p-datatable .p-sortable-column.p-highlight, + .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon { + color: $primaryHeaderColor !important; + } + + .p-dropdown:not(.p-disabled):hover, + .p-dropdown:not(.p-disabled).p-focus, + .p-link:focus { + border-color: $primaryHeaderColor !important; + box-shadow: none !important; + } + + .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { + background: transparent !important; + color: $primaryHeaderColor !important; + } + + .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover, + .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, + .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, + .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, + .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { + background-color: $primaryBackgroundColor !important; + color: $primaryHeaderColor !important; + } } diff --git a/kdb-web/src/styles/themes/sh-edraft-light-theme.scss b/kdb-web/src/styles/themes/sh-edraft-light-theme.scss index 8ae5f724..6d3e5f42 100644 --- a/kdb-web/src/styles/themes/sh-edraft-light-theme.scss +++ b/kdb-web/src/styles/themes/sh-edraft-light-theme.scss @@ -1,558 +1,583 @@ .sh-edraft-light-theme { - $primaryTextColor: #272727; - $secondayTextColor: #fff; - $secondayTextColor2: #ef9d0d; + $primaryTextColor: #272727; + $secondayTextColor: #fff; + $secondayTextColor2: #ef9d0d; - $primaryHeaderColor: #ef9d0d; - $secondaryHeaderColor: #ffce4c; - $secondaryHeaderColor2: #b76f00; + $primaryHeaderColor: #ef9d0d; + $secondaryHeaderColor: #ffce4c; + $secondaryHeaderColor2: #b76f00; - $primaryBackgroundColor: #fff; - $secondaryBackgroundColor: #cccccc; - $secondaryBackgroundColor2: #4f4f4f; - $secondaryBackgroundColor3: #272727; + $primaryBackgroundColor: #fff; + $secondaryBackgroundColor: #cccccc; + $secondaryBackgroundColor2: #4f4f4f; + $secondaryBackgroundColor3: #272727; - $primaryErrorColor: #b00020; - $secondaryErrorColor: #e94948; + $primaryErrorColor: #b00020; + $secondaryErrorColor: #e94948; - $default-border: 2px solid $secondaryBackgroundColor; + $default-border: 2px solid $secondaryBackgroundColor; + background-color: $primaryBackgroundColor; + + h1, + h2 { + color: $primaryHeaderColor; + } + + input, + p { + color: $primaryTextColor; + } + + input { + background-color: $primaryBackgroundColor !important; + } + + .input-field-info-text { + color: $primaryTextColor; + } + + /* Change Autocomplete styles in Chrome*/ + input:-webkit-autofill, + input:-webkit-autofill:hover, + input:-webkit-autofill:focus, + textarea:-webkit-autofill, + textarea:-webkit-autofill:hover, + textarea:-webkit-autofill:focus, + select:-webkit-autofill, + select:-webkit-autofill:hover, + select:-webkit-autofill:focus { + border: 1px solid $primaryHeaderColor; + -webkit-text-fill-color: $primaryTextColor; + -webkit-box-shadow: 0 0 0 1000px $primaryBackgroundColor inset; + transition: background-color 5000s ease-in-out 0s; + } + + header { background-color: $primaryBackgroundColor; - h1, - h2 { - color: $primaryHeaderColor; - } - - input, - p { - color: $primaryTextColor; - } - - input { - background-color: $primaryBackgroundColor !important; - } - - .input-field-info-text { - color: $primaryTextColor; - } - - /* Change Autocomplete styles in Chrome*/ - input:-webkit-autofill, - input:-webkit-autofill:hover, - input:-webkit-autofill:focus, - textarea:-webkit-autofill, - textarea:-webkit-autofill:hover, - textarea:-webkit-autofill:focus, - select:-webkit-autofill, - select:-webkit-autofill:hover, - select:-webkit-autofill:focus { - border: 1px solid $primaryHeaderColor; - -webkit-text-fill-color: $primaryTextColor; - -webkit-box-shadow: 0 0 0px 1000px $primaryBackgroundColor inset; - transition: background-color 5000s ease-in-out 0s; - } - - header { - background-color: $primaryBackgroundColor; - - .logo-button-wrapper { - .p-button.p-button-text { - color: $primaryTextColor; - - &:hover { - color: $primaryTextColor; - background-color: $primaryBackgroundColor; - } - } - } - - .logo { - color: $primaryHeaderColor; - } - } - - h1 { - color: $primaryHeaderColor; - } - - .app { - .sidebar { - background-color: $primaryBackgroundColor; - - .menu { - color: $primaryTextColor; - } - } - - .component-wrapper { - color: $primaryTextColor; - - .component { - background-color: $secondaryBackgroundColor; - - .content-wrapper { - background-color: $primaryBackgroundColor; - border-top: 2px solid $primaryHeaderColor; - - .content-header { - border-bottom: $default-border; - } - - .content { - .content-row { - } - - .content-column { - } - - .content-data-name { - } - - .content-data-value { - } - - .content-divider { - border-bottom: $default-border; - } - } - - .server-list-wrapper { - .server-filter { - } - - .server-count { - } - - .server-list { - .server { - border: $default-border; - border-radius: 15px; - - .logo { - img { - border-radius: 100%; - } - } - - .name { - color: $primaryHeaderColor; - } - - &:hover { - border-color: $primaryHeaderColor !important; - } - } - } - } - } - } - } - } - - .p-dialog-header { - background-color: $secondaryBackgroundColor !important; - color: $primaryTextColor !important; - } - - .p-dialog-content { - .content-data-name, - .content-data-value { - color: $primaryTextColor; - - .text-btn { - font-size: 18px !important; - font-weight: 400 !important; - } - } - } - - footer { - background-color: $primaryBackgroundColor; + .logo-button-wrapper { + .p-button.p-button-text { color: $primaryTextColor; - a { - color: $primaryTextColor; + &:hover { + color: $primaryTextColor; + background-color: $primaryBackgroundColor; } + } } - .invalid-feedback { - color: $primaryErrorColor; + .logo { + color: $primaryHeaderColor; + } + } + + h1 { + color: $primaryHeaderColor; + } + + .app { + .sidebar { + background-color: $primaryBackgroundColor; + + .menu { + color: $primaryTextColor; + } } - .invalid-feedback-input, - .invalid-feedback-input:focus, - .invalid-feedback-input:hover { - input, - input:enabled:focus { - outline: 1px solid $primaryErrorColor !important; - border: 1px solid $primaryErrorColor !important; - border-color: $primaryErrorColor !important; - } - } + .component-wrapper { + color: $primaryTextColor; - .login-wrapper { + .component { background-color: $secondaryBackgroundColor; - .login-form-wrapper, - .auth-header { - background-color: $primaryBackgroundColor; + .content-wrapper { + background-color: $primaryBackgroundColor; + border-top: 2px solid $primaryHeaderColor; - .login-form { - .input-field { - input, - .p-password { - } - } + .content-header { + border-bottom: $default-border; + } - .login-form-submit { - .login-form-submit-btn { - } - } - - .login-form-sub-button-wrapper { - .login-form-sub-btn { - background-color: $primaryBackgroundColor; - color: $secondayTextColor2; - border: 2px solid $secondayTextColor2; - - &:hover { - background-color: $primaryHeaderColor !important; - color: $primaryTextColor !important; - } - } - - .login-form-sub-login-btn { - border: none; - } - } + .content { + .content-row { } - } - } - .spinner-component-wrapper { - background-color: rgba($secondaryBackgroundColor, 0.5); + .content-column { + } - .spinner-wrapper { - .custom-spinner .p-progress-spinner-circle { + .content-data-name { + } + + .content-data-value { + } + + .content-divider { + border-bottom: $default-border; + } + } + + p-panel { + .p-panel-header, + .p-panel-content { + border: $default-border; + } + + .p-panel-title { + color: $primaryHeaderColor; + } + + .p-panel-header { + background-color: $primaryBackgroundColor; + + .p-panel-header-icon { color: $primaryHeaderColor; + } } - } - } + } - .wrapper-right { - justify-content: flex-end !important; - } - - /* - PrimeNG Fixes - */ - .p-progress-spinner-circle { - stroke: $primaryHeaderColor !important; - } - - .p-menu, - .p-panelmenu { - color: $primaryTextColor !important; - - .p-menuitem-link .p-menuitem-text, - .p-menuitem-link .p-menuitem-icon, - .p-panelmenu-header > a { - color: $primaryTextColor !important; - background: transparent !important; - font-size: 1rem !important; - font-weight: normal !important; - } - - .p-menuitem-link:focus, - .p-panelmenu-header > a:focus, - .p-panelmenu-content .p-menuitem .p-menuitem-link:focus { - box-shadow: none !important; - } - - .p-menuitem-link:hover, - .p-panelmenu-header > a:hover, - .p-panelmenu-content .p-menuitem .p-menuitem-link:hover { - background-color: $secondaryBackgroundColor !important; - $border-radius: 20px; - border-radius: $border-radius 0px 0px $border-radius; - - .p-menuitem-text, - .p-menuitem-icon, - .p-menuitem-text, - .p-panelmenu-icon { - color: $primaryHeaderColor !important; - } - } - - .p-panelmenu-content { - margin: 5px 0px 5px 10px; - } - } - - .p-menu-overlay { - background-color: $primaryBackgroundColor !important; - color: $primaryTextColor !important; - border-top: 2px solid $primaryHeaderColor !important; - - .p-menuitem-link:hover { - background-color: $primaryBackgroundColor !important; - .p-menuitem-text, - .p-menuitem-icon { - color: $primaryHeaderColor !important; - } - } - } - - p-dropdown { - .p-dropdown { - background-color: $primaryBackgroundColor !important; - border-color: $primaryTextColor !important; - color: $primaryTextColor !important; - - span { - color: $primaryTextColor; - } - - .p-dropdown-panel { - background-color: $primaryBackgroundColor !important; - - .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { - background-color: $primaryBackgroundColor !important; - color: $primaryHeaderColor !important; - - span { - color: $primaryHeaderColor !important; - } - } - - .p-dropdown-items .p-dropdown-item.p-highlight { - background-color: $primaryBackgroundColor !important; - color: $primaryHeaderColor !important; - - span { - color: $primaryHeaderColor !important; - } - } - } - } - } - - p-table { - background-color: $primaryBackgroundColor; - color: $primaryTextColor !important; - - .table-caption { - .table-caption-text { - } - - .table-caption-search-wrapper { - .table-caption-search { - height: 30px !important; - - .table-caption-search-icon { - } - - .table-caption-search-input { - height: 100% !important; - - &:focus { - outline-color: $primaryHeaderColor; - } - } - } - } - - .table-caption-btn-wrapper { - height: 30px !important; - } - } - - .table-edit-input { - width: 100% !important; - } - } - - p-checkbox { - .p-checkbox .p-checkbox-box { - background: $primaryBackgroundColor !important; - background-color: $primaryBackgroundColor !important; - } - - .p-checkbox .p-checkbox-box.p-highlight { - background: $primaryBackgroundColor !important; - background-color: $primaryBackgroundColor !important; - border-color: $primaryTextColor !important; - box-shadow: none !important; - } - - .p-checkbox .p-checkbox-box .p-checkbox-icon { - color: $primaryTextColor !important; - } - - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus, - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: $primaryHeaderColor !important; - box-shadow: none !important; - - .p-checkbox-icon { - color: $primaryHeaderColor !important; - } - } - } - - p-dialog, - p-confirmdialog, - p-dynamicdialog { - .p-dialog.p-confirm-dialog .p-confirm-dialog-message { - margin-left: 0px !important; - } - - .p-dialog { - background-color: $primaryBackgroundColor !important; - - .p-dialog-header { - background-color: $secondaryBackgroundColor !important; - color: $primaryTextColor !important; - } - - .p-dialog-content, - .p-dialog-footer { - background-color: $primaryBackgroundColor !important; - color: $primaryTextColor !important; - } - } - } - - input, - .p-password input { - border-radius: 10px; - border: $default-border; - - &:focus { - box-shadow: none !important; - } - - &:hover, - &:active, - &:enabled:focus { - border-color: $primaryHeaderColor !important; - } - } - - .btn-wrapper { - display: flex !important; - align-items: center !important; - } - - .btn { - background-color: $primaryHeaderColor; - color: $primaryTextColor; - border: 0; - - &:hover, - &:enabled:hover { - background-color: $primaryHeaderColor; + .p-panel-content { + background-color: $primaryBackgroundColor; color: $primaryTextColor; - border: 0; + border-top: none !important; + } + + .server-list-wrapper { + .server-filter { + } + + .server-count { + } + + .server-list { + .server { + border: $default-border; + border-radius: 15px; + + .logo { + img { + border-radius: 100%; + } + } + + .name { + color: $primaryHeaderColor; + } + + &:hover { + border-color: $primaryHeaderColor !important; + } + } + } + } } + } + } + } + + .p-dialog-header { + background-color: $secondaryBackgroundColor !important; + color: $primaryTextColor !important; + } + + .p-dialog-content { + .content-data-name, + .content-data-value { + color: $primaryTextColor; + + .text-btn { + font-size: 18px !important; + font-weight: 400 !important; + } + } + } + + footer { + background-color: $primaryBackgroundColor; + color: $primaryTextColor; + + a { + color: $primaryTextColor; + } + } + + .invalid-feedback { + color: $primaryErrorColor; + } + + .invalid-feedback-input, + .invalid-feedback-input:focus, + .invalid-feedback-input:hover { + input, + input:enabled:focus { + outline: 1px solid $primaryErrorColor !important; + border: 1px solid $primaryErrorColor !important; + border-color: $primaryErrorColor !important; + } + } + + .login-wrapper { + background-color: $secondaryBackgroundColor; + + .login-form-wrapper, + .auth-header { + background-color: $primaryBackgroundColor; + + .login-form { + .input-field { + input, + .p-password { + } + } + + .login-form-submit { + .login-form-submit-btn { + } + } + + .login-form-sub-button-wrapper { + .login-form-sub-btn { + background-color: $primaryBackgroundColor; + color: $secondayTextColor2; + border: 2px solid $secondayTextColor2; + + &:hover { + background-color: $primaryHeaderColor !important; + color: $primaryTextColor !important; + } + } + + .login-form-sub-login-btn { + border: none; + } + } + } + } + } + + .spinner-component-wrapper { + background-color: rgba($secondaryBackgroundColor, 0.5); + + .spinner-wrapper { + .custom-spinner .p-progress-spinner-circle { + color: $primaryHeaderColor; + } + } + } + + .wrapper-right { + justify-content: flex-end !important; + } + + /* + PrimeNG Fixes + */ + .p-progress-spinner-circle { + stroke: $primaryHeaderColor !important; + } + + .p-menu, + .p-panelmenu { + color: $primaryTextColor !important; + + .p-menuitem-link .p-menuitem-text, + .p-menuitem-link .p-menuitem-icon, + .p-panelmenu-header > a { + color: $primaryTextColor !important; + background: transparent !important; + font-size: 1rem !important; + font-weight: normal !important; } - .icon-btn { - background-color: transparent !important; - color: $primaryTextColor !important; - border: 0 !important; - - .pi { - font-size: 1.275rem !important; - } + .p-menuitem-link:focus, + .p-panelmenu-header > a:focus, + .p-panelmenu-content .p-menuitem .p-menuitem-link:focus { + box-shadow: none !important; } - .text-btn { - background-color: transparent !important; - color: $primaryTextColor !important; - border: 0 !important; - padding: 0px !important; + .p-menuitem-link:hover, + .p-panelmenu-header > a:hover, + .p-panelmenu-content .p-menuitem .p-menuitem-link:hover { + background-color: $secondaryBackgroundColor !important; + $border-radius: 20px; + border-radius: $border-radius 0 0 $border-radius; - &:hover { - background-color: transparent !important; - color: $primaryHeaderColor !important; - border: 0; - } - } - - .icon-btn-without-hover { - &:hover { - background-color: transparent !important; - color: $primaryTextColor !important; - border: 0 !important; - } - } - - .icon-btn { - &:hover { - background-color: transparent !important; - color: $primaryHeaderColor !important; - border: 0; - } - } - - .danger-icon-btn { - background-color: transparent !important; - color: $primaryTextColor !important; - border: 0 !important; - - &:hover { - background-color: transparent !important; - color: $primaryErrorColor !important; - border: 0; - } - - .pi { - font-size: 1.275rem !important; - } - } - - .danger-btn { - background-color: $primaryErrorColor !important; - color: $primaryErrorColor !important; - border: 0 !important; - - &:hover { - background-color: $primaryErrorColor !important; - color: $primaryTextColor !important; - border: 0; - } - - .pi { - font-size: 1.275rem !important; - } - } - - .p-datatable .p-sortable-column.p-highlight, - .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon { + .p-menuitem-text, + .p-menuitem-icon, + .p-menuitem-text, + .p-panelmenu-icon { color: $primaryHeaderColor !important; + } } - .p-dropdown:not(.p-disabled):hover, - .p-dropdown:not(.p-disabled).p-focus, - .p-link:focus { - border-color: $primaryHeaderColor !important; - box-shadow: none !important; + .p-panelmenu-content { + margin: 5px 0 5px 10px; } + } - .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { - background: transparent !important; - background-color: transparent !important; + .p-menu-overlay { + background-color: $primaryBackgroundColor !important; + color: $primaryTextColor !important; + border-top: 2px solid $primaryHeaderColor !important; + + .p-menuitem-link:hover { + background-color: $primaryBackgroundColor !important; + + .p-menuitem-text, + .p-menuitem-icon { color: $primaryHeaderColor !important; + } } + } - .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover, - .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { + p-dropdown { + .p-dropdown { + background-color: $primaryBackgroundColor !important; + border-color: $primaryTextColor !important; + color: $primaryTextColor !important; + + span { + color: $primaryTextColor; + } + + .p-dropdown-panel { background-color: $primaryBackgroundColor !important; - color: $primaryHeaderColor !important; + + .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + background-color: $primaryBackgroundColor !important; + color: $primaryHeaderColor !important; + + span { + color: $primaryHeaderColor !important; + } + } + + .p-dropdown-items .p-dropdown-item.p-highlight { + background-color: $primaryBackgroundColor !important; + color: $primaryHeaderColor !important; + + span { + color: $primaryHeaderColor !important; + } + } + } } + } + + p-table { + background-color: $primaryBackgroundColor; + color: $primaryTextColor !important; + + .table-caption { + .table-caption-text { + } + + .table-caption-search-wrapper { + .table-caption-search { + height: 30px !important; + + .table-caption-search-icon { + } + + .table-caption-search-input { + height: 100% !important; + + &:focus { + outline-color: $primaryHeaderColor; + } + } + } + } + + .table-caption-btn-wrapper { + height: 30px !important; + } + } + + .table-edit-input { + width: 100% !important; + } + } + + p-checkbox { + .p-checkbox .p-checkbox-box { + background: $primaryBackgroundColor !important; + background-color: $primaryBackgroundColor !important; + } + + .p-checkbox .p-checkbox-box.p-highlight { + background: $primaryBackgroundColor !important; + background-color: $primaryBackgroundColor !important; + border-color: $primaryTextColor !important; + box-shadow: none !important; + } + + .p-checkbox .p-checkbox-box .p-checkbox-icon { + color: $primaryTextColor !important; + } + + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus, + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: $primaryHeaderColor !important; + box-shadow: none !important; + + .p-checkbox-icon { + color: $primaryHeaderColor !important; + } + } + } + + p-dialog, + p-confirmdialog, + p-dynamicdialog { + .p-dialog.p-confirm-dialog .p-confirm-dialog-message { + margin-left: 0 !important; + } + + .p-dialog { + background-color: $primaryBackgroundColor !important; + + .p-dialog-header { + background-color: $secondaryBackgroundColor !important; + color: $primaryTextColor !important; + } + + .p-dialog-content, + .p-dialog-footer { + background-color: $primaryBackgroundColor !important; + color: $primaryTextColor !important; + } + } + } + + input, + .p-password input { + border-radius: 10px; + border: $default-border; + + &:focus { + box-shadow: none !important; + } + + &:hover, + &:active, + &:enabled:focus { + border-color: $primaryHeaderColor !important; + } + } + + .btn-wrapper { + display: flex !important; + align-items: center !important; + } + + .btn { + background-color: $primaryHeaderColor; + color: $primaryTextColor; + border: 0; + + &:hover, + &:enabled:hover { + background-color: $primaryHeaderColor; + color: $primaryTextColor; + border: 0; + } + } + + .icon-btn { + background-color: transparent !important; + color: $primaryTextColor !important; + border: 0 !important; + + .pi { + font-size: 1.275rem !important; + } + } + + .text-btn { + background-color: transparent !important; + color: $primaryTextColor !important; + border: 0 !important; + padding: 0 !important; + + &:hover { + background-color: transparent !important; + color: $primaryHeaderColor !important; + border: 0; + } + } + + .icon-btn-without-hover { + &:hover { + background-color: transparent !important; + color: $primaryTextColor !important; + border: 0 !important; + } + } + + .icon-btn { + &:hover { + background-color: transparent !important; + color: $primaryHeaderColor !important; + border: 0; + } + } + + .danger-icon-btn { + background-color: transparent !important; + color: $primaryTextColor !important; + border: 0 !important; + + &:hover { + background-color: transparent !important; + color: $primaryErrorColor !important; + border: 0; + } + + .pi { + font-size: 1.275rem !important; + } + } + + .danger-btn { + background-color: $primaryErrorColor !important; + color: $primaryErrorColor !important; + border: 0 !important; + + &:hover { + background-color: $primaryErrorColor !important; + color: $primaryTextColor !important; + border: 0; + } + + .pi { + font-size: 1.275rem !important; + } + } + + .p-datatable .p-sortable-column.p-highlight, + .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon { + color: $primaryHeaderColor !important; + } + + .p-dropdown:not(.p-disabled):hover, + .p-dropdown:not(.p-disabled).p-focus, + .p-link:focus { + border-color: $primaryHeaderColor !important; + box-shadow: none !important; + } + + .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { + background: transparent !important; + color: $primaryHeaderColor !important; + } + + .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover, + .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, + .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, + .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, + .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { + background-color: $primaryBackgroundColor !important; + color: $primaryHeaderColor !important; + } }