Added angular frontend #70
This commit is contained in:
517
kdb-web/src/styles/themes/default-dark-theme.scss
Normal file
517
kdb-web/src/styles/themes/default-dark-theme.scss
Normal file
@@ -0,0 +1,517 @@
|
||||
.default-dark-theme {
|
||||
$primaryTextColor: #fff;
|
||||
$secondayTextColor: #000;
|
||||
$secondayTextColor2: #1e88e5;
|
||||
|
||||
$primaryHeaderColor: #1e88e5;
|
||||
$secondaryHeaderColor: #6ab7ff;
|
||||
$secondaryHeaderColor2: #005cb2;
|
||||
|
||||
$primaryBackgroundColor: #272727;
|
||||
$secondaryBackgroundColor: #4f4f4f;
|
||||
$secondaryBackgroundColor2: #fff;
|
||||
$secondaryBackgroundColor3: #cccccc;
|
||||
|
||||
$primaryErrorColor: #b00020;
|
||||
$secondaryErrorColor: #e94948;
|
||||
|
||||
$default-border: 1px solid $secondaryBackgroundColor3;
|
||||
|
||||
background-color: $primaryBackgroundColor !important;
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
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 {
|
||||
color: $primaryTextColor !important;
|
||||
|
||||
.p-menuitem-link .p-menuitem-text,
|
||||
.p-menuitem-link .p-menuitem-icon {
|
||||
color: $primaryTextColor !important;
|
||||
}
|
||||
|
||||
.p-menuitem-link:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.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 {
|
||||
color: $primaryHeaderColor !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-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-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: $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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
.p-password {
|
||||
&: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: 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 {
|
||||
background-color: $primaryBackgroundColor !important;
|
||||
color: $primaryHeaderColor !important;
|
||||
}
|
||||
}
|
||||
515
kdb-web/src/styles/themes/default-light-theme.scss
Normal file
515
kdb-web/src/styles/themes/default-light-theme.scss
Normal file
@@ -0,0 +1,515 @@
|
||||
.default-light-theme {
|
||||
$primaryTextColor: #272727;
|
||||
$secondayTextColor: #fff;
|
||||
$secondayTextColor2: #1e88e5;
|
||||
|
||||
$primaryHeaderColor: #1e88e5;
|
||||
$secondaryHeaderColor: #6ab7ff;
|
||||
$secondaryHeaderColor2: #005cb2;
|
||||
|
||||
$primaryBackgroundColor: #fff;
|
||||
$secondaryBackgroundColor: #cccccc;
|
||||
$secondaryBackgroundColor2: #4f4f4f;
|
||||
$secondaryBackgroundColor3: #272727;
|
||||
|
||||
$primaryErrorColor: #b00020;
|
||||
$secondaryErrorColor: #e94948;
|
||||
|
||||
$default-border: 1px solid $secondaryBackgroundColor;
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
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 {
|
||||
color: $primaryTextColor !important;
|
||||
|
||||
.p-menuitem-link .p-menuitem-text,
|
||||
.p-menuitem-link .p-menuitem-icon {
|
||||
color: $primaryTextColor !important;
|
||||
}
|
||||
|
||||
.p-menuitem-link:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.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 {
|
||||
color: $primaryHeaderColor !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-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 {
|
||||
&: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: 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 {
|
||||
background-color: $primaryBackgroundColor !important;
|
||||
color: $primaryHeaderColor !important;
|
||||
}
|
||||
}
|
||||
519
kdb-web/src/styles/themes/sh-edraft-dark-theme.scss
Normal file
519
kdb-web/src/styles/themes/sh-edraft-dark-theme.scss
Normal file
@@ -0,0 +1,519 @@
|
||||
.sh-edraft-dark-theme {
|
||||
$primaryTextColor: #fff;
|
||||
$secondayTextColor: #000;
|
||||
$secondayTextColor2: #ef9d0d;
|
||||
|
||||
$primaryHeaderColor: #ef9d0d;
|
||||
$secondaryHeaderColor: #ffce4c;
|
||||
$secondaryHeaderColor2: #b76f00;
|
||||
|
||||
$primaryBackgroundColor: #272727;
|
||||
$secondaryBackgroundColor: #4f4f4f;
|
||||
$secondaryBackgroundColor2: #fff;
|
||||
$secondaryBackgroundColor3: #cccccc;
|
||||
|
||||
$primaryErrorColor: #b00020;
|
||||
$secondaryErrorColor: #e94948;
|
||||
|
||||
$default-border: 1px solid $secondaryBackgroundColor3;
|
||||
|
||||
background-color: $primaryBackgroundColor !important;
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
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 {
|
||||
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 {
|
||||
color: $primaryTextColor !important;
|
||||
|
||||
.p-menuitem-link .p-menuitem-text,
|
||||
.p-menuitem-link .p-menuitem-icon {
|
||||
color: $primaryTextColor !important;
|
||||
}
|
||||
|
||||
.p-menuitem-link:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.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 {
|
||||
color: $primaryHeaderColor !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-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-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: $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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
.p-password {
|
||||
&: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: 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 {
|
||||
background-color: $primaryBackgroundColor !important;
|
||||
color: $primaryHeaderColor !important;
|
||||
}
|
||||
}
|
||||
515
kdb-web/src/styles/themes/sh-edraft-light-theme.scss
Normal file
515
kdb-web/src/styles/themes/sh-edraft-light-theme.scss
Normal file
@@ -0,0 +1,515 @@
|
||||
.sh-edraft-light-theme {
|
||||
$primaryTextColor: #272727;
|
||||
$secondayTextColor: #fff;
|
||||
$secondayTextColor2: #ef9d0d;
|
||||
|
||||
$primaryHeaderColor: #ef9d0d;
|
||||
$secondaryHeaderColor: #ffce4c;
|
||||
$secondaryHeaderColor2: #b76f00;
|
||||
|
||||
$primaryBackgroundColor: #fff;
|
||||
$secondaryBackgroundColor: #cccccc;
|
||||
$secondaryBackgroundColor2: #4f4f4f;
|
||||
$secondaryBackgroundColor3: #272727;
|
||||
|
||||
$primaryErrorColor: #b00020;
|
||||
$secondaryErrorColor: #e94948;
|
||||
|
||||
$default-border: 1px solid $secondaryBackgroundColor;
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
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 {
|
||||
color: $primaryTextColor !important;
|
||||
|
||||
.p-menuitem-link .p-menuitem-text,
|
||||
.p-menuitem-link .p-menuitem-icon {
|
||||
color: $primaryTextColor !important;
|
||||
}
|
||||
|
||||
.p-menuitem-link:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.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 {
|
||||
color: $primaryHeaderColor !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-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 {
|
||||
&: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: 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 {
|
||||
background-color: $primaryBackgroundColor !important;
|
||||
color: $primaryHeaderColor !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user