Moved folders #405
This commit is contained in:
2
web/src/styles/constants.scss
Normal file
2
web/src/styles/constants.scss
Normal file
@@ -0,0 +1,2 @@
|
||||
$headerHeight: 50px;
|
||||
$footerHeight: 25px;
|
||||
116
web/src/styles/primeng-fixes.scss
Normal file
116
web/src/styles/primeng-fixes.scss
Normal file
@@ -0,0 +1,116 @@
|
||||
@import "./constants.scss";
|
||||
|
||||
.btn {
|
||||
&:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.p-menu,
|
||||
.p-panelmenu {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
width: auto !important;
|
||||
border-radius: 0 !important;
|
||||
padding: 0 !important;
|
||||
|
||||
.p-menuitem-link,
|
||||
.p-panelmenu-header > a,
|
||||
.p-panelmenu-content .p-menuitem .p-menuitem-link {
|
||||
$distance: 10px;
|
||||
padding: $distance 0 $distance $distance !important;
|
||||
margin: 4px 0 4px 6px !important;
|
||||
}
|
||||
}
|
||||
|
||||
header,
|
||||
.app {
|
||||
.p-menu-overlay {
|
||||
top: $headerHeight !important;
|
||||
}
|
||||
}
|
||||
|
||||
.p-panelmenu {
|
||||
.p-panelmenu-icon {
|
||||
order: 1; // to be the first item on right side.
|
||||
}
|
||||
|
||||
.p-menuitem-text {
|
||||
flex-grow: 1; // to fill the whole space and push the icon to the end
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: normal !important;
|
||||
}
|
||||
|
||||
.p-panelmenu-header > a {
|
||||
border: none !important;
|
||||
border-radius: unset !important;
|
||||
font-weight: unset !important;
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.p-panelmenu-content {
|
||||
border: none !important;
|
||||
background: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
ui-menu .ui-menu-parent .ui-menu-child {
|
||||
width: 400px; /* exagerated !! */
|
||||
}
|
||||
|
||||
.p-toast-detail {
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.p-datatable .p-sortable-column:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.p-datatable > .p-datatable-wrapper {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.p-password {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.p-paginator {
|
||||
background-color: transparent !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
p-table {
|
||||
.p-datatable .p-datatable-header {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.p-datatable .p-datatable-header,
|
||||
.p-datatable .p-datatable-tbody > tr,
|
||||
.p-datatable .p-datatable-thead > tr > th {
|
||||
background-color: transparent !important;
|
||||
color: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
.content-row {
|
||||
p-dropdown,
|
||||
.p-dropdown,
|
||||
p-calendar,
|
||||
.p-calendar, {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.pi-sort-alt:before {
|
||||
content: "\e915" !important;
|
||||
}
|
||||
|
||||
.pi-sort-amount-up-alt:before {
|
||||
content: "\e914" !important;
|
||||
}
|
||||
|
||||
.pi-sort-amount-down:before {
|
||||
content: "\e913" !important;
|
||||
}
|
||||
664
web/src/styles/themes/default-dark-theme.scss
Normal file
664
web/src/styles/themes/default-dark-theme.scss
Normal file
@@ -0,0 +1,664 @@
|
||||
.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: 2px solid $secondaryBackgroundColor3;
|
||||
|
||||
background-color: $primaryBackgroundColor;
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
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;
|
||||
|
||||
.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-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-panel-content {
|
||||
background-color: $primaryBackgroundColor;
|
||||
color: $primaryTextColor;
|
||||
border-top: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.history {
|
||||
background-color: $primaryBackgroundColor;
|
||||
color: $primaryTextColor;
|
||||
|
||||
.entry-list {
|
||||
.entry {
|
||||
border-bottom: 1px solid $primaryHeaderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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,
|
||||
.auth-footer {
|
||||
background-color: $primaryBackgroundColor;
|
||||
color: $primaryTextColor !important;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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 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;
|
||||
}
|
||||
|
||||
.p-dropdown-panel .p-dropdown-items .p-dropdown-item {
|
||||
color: $primaryTextColor !important;
|
||||
}
|
||||
|
||||
.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-table-info {
|
||||
.table-caption-text {
|
||||
}
|
||||
|
||||
.table-caption-column-select {
|
||||
}
|
||||
}
|
||||
|
||||
.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-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: $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 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;
|
||||
}
|
||||
|
||||
.input-number {
|
||||
span {
|
||||
.p-button {
|
||||
background-color: $primaryHeaderColor !important;
|
||||
border: 1px solid $primaryHeaderColor !important;
|
||||
|
||||
&:hover {
|
||||
background-color: $secondaryHeaderColor !important;
|
||||
border: 1px solid $secondaryHeaderColor !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-multiselect {
|
||||
background-color: $primaryBackgroundColor !important;
|
||||
color: $primaryTextColor !important;
|
||||
|
||||
&:focus,
|
||||
&.p-focus,
|
||||
&:not(.p-disabled):hover {
|
||||
border-color: $primaryHeaderColor !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.p-multiselect-panel {
|
||||
.p-multiselect-header {
|
||||
background-color: $primaryBackgroundColor !important;
|
||||
}
|
||||
|
||||
.p-multiselect-items,
|
||||
.p-multiselect-item {
|
||||
background-color: $secondaryBackgroundColor !important;
|
||||
}
|
||||
|
||||
.p-multiselect-item {
|
||||
color: $primaryTextColor !important;
|
||||
border: 1px solid transparent !important;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid $primaryHeaderColor !important;
|
||||
color: $primaryHeaderColor !important;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.p-checkbox .p-checkbox-box.p-highlight {
|
||||
border-color: $primaryHeaderColor !important;
|
||||
background: $primaryHeaderColor !important;
|
||||
}
|
||||
|
||||
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
|
||||
border-color: $primaryHeaderColor !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
664
web/src/styles/themes/default-light-theme.scss
Normal file
664
web/src/styles/themes/default-light-theme.scss
Normal file
@@ -0,0 +1,664 @@
|
||||
.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: 2px solid $secondaryBackgroundColor;
|
||||
|
||||
background-color: $primaryBackgroundColor;
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
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;
|
||||
|
||||
.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-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-panel-content {
|
||||
background-color: $primaryBackgroundColor;
|
||||
color: $primaryTextColor;
|
||||
border-top: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.history {
|
||||
background-color: $primaryBackgroundColor;
|
||||
color: $primaryTextColor;
|
||||
|
||||
.entry-list {
|
||||
.entry {
|
||||
border-bottom: 1px solid $primaryHeaderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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,
|
||||
.auth-footer {
|
||||
background-color: $primaryBackgroundColor;
|
||||
color: $primaryTextColor !important;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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 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;
|
||||
}
|
||||
|
||||
.p-dropdown-panel .p-dropdown-items .p-dropdown-item {
|
||||
color: $primaryTextColor !important;
|
||||
}
|
||||
|
||||
.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-table-info {
|
||||
.table-caption-text {
|
||||
}
|
||||
|
||||
.table-caption-column-select {
|
||||
}
|
||||
}
|
||||
|
||||
.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-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;
|
||||
}
|
||||
|
||||
.input-number {
|
||||
span {
|
||||
.p-button {
|
||||
background-color: $primaryHeaderColor !important;
|
||||
border: 1px solid $primaryHeaderColor !important;
|
||||
|
||||
&:hover {
|
||||
background-color: $secondaryHeaderColor !important;
|
||||
border: 1px solid $secondaryHeaderColor !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-multiselect {
|
||||
background-color: $primaryBackgroundColor !important;
|
||||
color: $primaryTextColor !important;
|
||||
|
||||
&:focus,
|
||||
&.p-focus,
|
||||
&:not(.p-disabled):hover {
|
||||
border-color: $primaryHeaderColor !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.p-multiselect-panel {
|
||||
.p-multiselect-header {
|
||||
background-color: $secondaryBackgroundColor !important;
|
||||
}
|
||||
|
||||
.p-multiselect-items,
|
||||
.p-multiselect-item {
|
||||
background-color: $primaryBackgroundColor !important;
|
||||
}
|
||||
|
||||
.p-multiselect-item {
|
||||
color: $primaryTextColor !important;
|
||||
border: 1px solid transparent !important;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid $primaryHeaderColor !important;
|
||||
color: $primaryHeaderColor !important;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.p-checkbox .p-checkbox-box.p-highlight {
|
||||
border-color: $primaryHeaderColor !important;
|
||||
background: $primaryHeaderColor !important;
|
||||
}
|
||||
|
||||
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
|
||||
border-color: $primaryHeaderColor !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
759
web/src/styles/themes/sh-edraft-dark-theme.scss
Normal file
759
web/src/styles/themes/sh-edraft-dark-theme.scss
Normal file
@@ -0,0 +1,759 @@
|
||||
.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: 2px solid $secondaryBackgroundColor3;
|
||||
|
||||
background-color: $primaryBackgroundColor;
|
||||
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
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;
|
||||
|
||||
.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-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-panel-content {
|
||||
background-color: $primaryBackgroundColor;
|
||||
color: $primaryTextColor;
|
||||
border-top: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.history {
|
||||
background-color: $primaryBackgroundColor;
|
||||
color: $primaryTextColor;
|
||||
|
||||
.entry-list {
|
||||
.entry {
|
||||
border-bottom: 1px solid $primaryHeaderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.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,
|
||||
.auth-header,
|
||||
.auth-footer {
|
||||
background-color: $primaryBackgroundColor;
|
||||
color: $primaryTextColor !important;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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 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 {
|
||||
border: $default-border;
|
||||
border-radius: 10px;
|
||||
background-color: $secondaryBackgroundColor !important;
|
||||
color: $primaryTextColor !important;
|
||||
|
||||
span {
|
||||
color: $primaryTextColor;
|
||||
}
|
||||
|
||||
.p-dropdown-panel .p-dropdown-items .p-dropdown-item {
|
||||
color: $primaryTextColor !important;
|
||||
}
|
||||
|
||||
.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-table-info {
|
||||
.table-caption-text {
|
||||
}
|
||||
|
||||
.table-caption-column-select {
|
||||
}
|
||||
}
|
||||
|
||||
.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-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: $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 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 {
|
||||
.p-button-label {
|
||||
transition-duration: unset !important;
|
||||
}
|
||||
|
||||
&: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-datatable .p-sortable-column:not(.p-highlight):hover {
|
||||
color: $primaryHeaderColor !important;
|
||||
background-color: transparent !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;
|
||||
}
|
||||
|
||||
.input-number {
|
||||
span {
|
||||
.p-button {
|
||||
background-color: $primaryHeaderColor !important;
|
||||
border: 1px solid $primaryHeaderColor !important;
|
||||
|
||||
&:hover {
|
||||
background-color: $secondaryHeaderColor !important;
|
||||
border: 1px solid $secondaryHeaderColor !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-multiselect {
|
||||
background-color: $primaryBackgroundColor !important;
|
||||
color: $primaryTextColor !important;
|
||||
|
||||
&:focus,
|
||||
&.p-focus,
|
||||
&:not(.p-disabled):hover {
|
||||
border-color: $primaryHeaderColor !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.p-multiselect-panel {
|
||||
.p-multiselect-header {
|
||||
background-color: $primaryBackgroundColor !important;
|
||||
}
|
||||
|
||||
.p-multiselect-items,
|
||||
.p-multiselect-item {
|
||||
background-color: $secondaryBackgroundColor !important;
|
||||
}
|
||||
|
||||
.p-multiselect-item {
|
||||
color: $primaryTextColor !important;
|
||||
border: 1px solid transparent !important;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid $primaryHeaderColor !important;
|
||||
color: $primaryHeaderColor !important;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.p-checkbox .p-checkbox-box.p-highlight {
|
||||
border-color: $primaryHeaderColor !important;
|
||||
background: $primaryHeaderColor !important;
|
||||
}
|
||||
|
||||
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
|
||||
border-color: $primaryHeaderColor !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
|
||||
background: $primaryHeaderColor !important;
|
||||
}
|
||||
|
||||
.p-inputswitch.p-focus .p-inputswitch-slider {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
p-inputNumber {
|
||||
background-color: $primaryBackgroundColor !important;
|
||||
}
|
||||
|
||||
p-calendar > span > button {
|
||||
background-color: $primaryHeaderColor !important;
|
||||
border: 1px solid $primaryHeaderColor !important;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.p-calendar {
|
||||
.p-datepicker:not(.p-datepicker-inline) {
|
||||
background-color: $secondaryBackgroundColor !important;
|
||||
}
|
||||
|
||||
.p-datepicker {
|
||||
.p-datepicker-header {
|
||||
color: $primaryHeaderColor !important;
|
||||
background-color: $primaryBackgroundColor !important;
|
||||
|
||||
.p-datepicker-title .p-datepicker-year,
|
||||
.p-datepicker-title .p-datepicker-month,
|
||||
.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
|
||||
color: $primaryTextColor !important;
|
||||
|
||||
&:hover {
|
||||
color: $primaryHeaderColor !important;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table td > span {
|
||||
color: $primaryTextColor !important;
|
||||
|
||||
&:hover {
|
||||
color: $primaryHeaderColor !important;
|
||||
background-color: $primaryBackgroundColor !important;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
table td.p-datepicker-today > span {
|
||||
color: $primaryHeaderColor !important;
|
||||
background-color: $primaryBackgroundColor !important;
|
||||
}
|
||||
|
||||
table td > span.p-highlight {
|
||||
color: $primaryHeaderColor !important;
|
||||
background-color: $primaryBackgroundColor !important;
|
||||
}
|
||||
|
||||
.p-yearpicker .p-yearpicker-year,
|
||||
.p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight) {
|
||||
color: $primaryTextColor !important;
|
||||
background-color: $secondaryBackgroundColor !important;
|
||||
|
||||
&:hover {
|
||||
color: $primaryHeaderColor !important;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
664
web/src/styles/themes/sh-edraft-light-theme.scss
Normal file
664
web/src/styles/themes/sh-edraft-light-theme.scss
Normal file
@@ -0,0 +1,664 @@
|
||||
.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: 2px solid $secondaryBackgroundColor;
|
||||
|
||||
background-color: $primaryBackgroundColor;
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
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;
|
||||
|
||||
.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-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-panel-content {
|
||||
background-color: $primaryBackgroundColor;
|
||||
color: $primaryTextColor;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.history {
|
||||
background-color: $primaryBackgroundColor;
|
||||
color: $primaryTextColor;
|
||||
|
||||
.entry-list {
|
||||
.entry {
|
||||
border-bottom: 1px solid $primaryHeaderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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,
|
||||
.auth-footer {
|
||||
background-color: $primaryBackgroundColor;
|
||||
color: $primaryTextColor !important;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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 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;
|
||||
}
|
||||
|
||||
.p-dropdown-panel .p-dropdown-items .p-dropdown-item {
|
||||
color: $primaryTextColor !important;
|
||||
}
|
||||
|
||||
.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-table-info {
|
||||
.table-caption-text {
|
||||
}
|
||||
|
||||
.table-caption-column-select {
|
||||
}
|
||||
}
|
||||
|
||||
.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-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;
|
||||
}
|
||||
|
||||
.input-number {
|
||||
span {
|
||||
.p-button {
|
||||
background-color: $primaryHeaderColor !important;
|
||||
border: 1px solid $primaryHeaderColor !important;
|
||||
|
||||
&:hover {
|
||||
background-color: $secondaryHeaderColor !important;
|
||||
border: 1px solid $secondaryHeaderColor !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-multiselect {
|
||||
background-color: $primaryBackgroundColor !important;
|
||||
color: $primaryTextColor !important;
|
||||
|
||||
&:focus,
|
||||
&.p-focus,
|
||||
&:not(.p-disabled):hover {
|
||||
border-color: $primaryHeaderColor !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.p-multiselect-panel {
|
||||
.p-multiselect-header {
|
||||
background-color: $secondaryBackgroundColor !important;
|
||||
}
|
||||
|
||||
.p-multiselect-items,
|
||||
.p-multiselect-item {
|
||||
background-color: $primaryBackgroundColor !important;
|
||||
}
|
||||
|
||||
.p-multiselect-item {
|
||||
color: $primaryTextColor !important;
|
||||
border: 1px solid transparent !important;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid $primaryHeaderColor !important;
|
||||
color: $primaryHeaderColor !important;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.p-checkbox .p-checkbox-box.p-highlight {
|
||||
border-color: $primaryHeaderColor !important;
|
||||
background: $primaryHeaderColor !important;
|
||||
}
|
||||
|
||||
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
|
||||
border-color: $primaryHeaderColor !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user