mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-17 21:30:31 +00:00
wip darkmode
This commit is contained in:
Ahmed Bouhuolia
@@ -40,6 +40,8 @@
|
||||
|
||||
.App {
|
||||
min-width: 1100px;
|
||||
min-height: 100vh;
|
||||
background-color: $app-bg;
|
||||
}
|
||||
|
||||
// =======
|
||||
@@ -254,7 +256,7 @@ html[lang^='ar'] {
|
||||
}
|
||||
|
||||
.bp4-drawer {
|
||||
border-left: 1px solid #00115e;
|
||||
border-left: 1px solid var(--color-drawer-border-left);
|
||||
}
|
||||
|
||||
.drawer-portal {
|
||||
|
||||
@@ -1,14 +1,446 @@
|
||||
@import "@blueprintjs/colors/lib/scss/colors";
|
||||
@import '@blueprintjs/colors/lib/scss/colors';
|
||||
@import '@blueprintjs/core/src/common/variables';
|
||||
|
||||
$ns: bp4;
|
||||
|
||||
$pt-popover-box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.02),
|
||||
0 2px 4px rgba(16, 22, 26, 0.1), 0 8px 24px rgba(16, 22, 26, 0.1);
|
||||
:root {
|
||||
--color-primary: #8abbff;
|
||||
--color-danger: red;
|
||||
|
||||
--color-dark-gray5: #404854;
|
||||
--color-dark-gray4: #383e47;
|
||||
--color-dark-gray3: #2f343c;
|
||||
--color-dark-gray2: #252a31;
|
||||
--color-dark-gray1: #1c2127;
|
||||
|
||||
--color-light-gray1: #d3d8de;
|
||||
--color-light-gray2: #dce0e5;
|
||||
--color-light-gray3: #e5e8eb;
|
||||
--color-light-gray4: #edeff2;
|
||||
--color-light-gray5: #f6f7f9;
|
||||
|
||||
--color-white: #fff;
|
||||
--color-black: #000;
|
||||
|
||||
--color-muted-text: #abb3bf;
|
||||
|
||||
// Alerts
|
||||
--color-alert-default-background: transparent;
|
||||
--color-alert-default-description-text: var(--color-light-gray4);
|
||||
--color-alert-default-title-text: var(--color-light-gray2);
|
||||
|
||||
// Alert danger.
|
||||
--color-alert-danger-background: transparent;
|
||||
--color-alert-danger-border: #2d72d2;
|
||||
--color-alert-danger-description-text: var(--color-light-gray1);
|
||||
--color-alert-danger-title-text: #8abbff;
|
||||
|
||||
// Alert primary
|
||||
--color-alert-primary-background: transparent;
|
||||
--color-alert-primary-border: #2d72d2;
|
||||
--color-alert-primary-title-text: #8abbff;
|
||||
--color-alert-primary-description-text: var(--color-light-gray1);
|
||||
|
||||
// Background
|
||||
--color-ui-background-primary: var(--color-base-sand-0);
|
||||
--color-ui-background-secondary: var(--color-base-sand-10);
|
||||
--color-ui-background-tertiary: var(--color-base-sand-20);
|
||||
|
||||
// Input
|
||||
--color-ui-input-border: #ced4da;
|
||||
--color-ui-input-border: rgba(255, 255, 255, 0.15);
|
||||
|
||||
--color-ui-input-background: rgba(17, 20, 24, 0.3);
|
||||
|
||||
--color-ui-input-group-prepend-background: #e9ecef;
|
||||
--color-ui-input-group-prepend-color: #495057;
|
||||
--color-ui-input-group-prepend-border: #ced4da;
|
||||
|
||||
--color-ui-input-group-prepend-background: var(--color-dark-gray3);
|
||||
--color-ui-input-group-prepend-color: rgba(255, 255, 255, 0.6);
|
||||
--color-ui-input-group-prepend-border: rgba(255, 255, 255, 0.15);
|
||||
|
||||
--color-ui-html-select-background: #fff;
|
||||
--color-ui-html-select-border: #ced4da;
|
||||
|
||||
--color-ui-menu-select-item-hover-background: #edeff2;
|
||||
--color-ui-menu-select-item-hover-background: rgba(143, 153, 168, .15);
|
||||
--color-ui-menu-select-item-active-background: var(--color-primary);
|
||||
|
||||
// # Splash screen.
|
||||
--color-splash-screen-background: #fff;
|
||||
--color-splash-screen-background: var(--color-dark-gray1);
|
||||
|
||||
// # Sidebar.
|
||||
--color-sidebar-toggle: #6b8193;
|
||||
--color-sidebar-toggle: rgba(255, 255, 255, 0.5);
|
||||
--color-sidebar-background: var(--color-dark-gray3);
|
||||
--color-sidebar-text: var(--color-white);
|
||||
--color-sidebar-scrollbars-background: rgba(255, 255, 255, 0.25);
|
||||
--color-sidebar-menu-item-text: #ffff;
|
||||
--color-sidebar-menu-item-hover-background: var(--color-dark-gray5);
|
||||
--color-sidebar-menu-item-text-hover: #fff;
|
||||
--color-sidebar-menu-item-active-background: var(--color-dark-gray5);
|
||||
--color-sidebar-menu-item-active-text: #fff;
|
||||
--color-sidebar-menu-item-focus-background: #01143e;
|
||||
--color-sidebar-menu-label-color: rgba(255, 255, 255, 0.4);
|
||||
|
||||
// Sidebar overlay.
|
||||
--color-sidebar-overlay-background: var(--color-dark-gray5);
|
||||
--color-sidebar-overlay-hover-background: var(--color-dark-gray3);
|
||||
--color-sidebar-overlay-item-text: var(--color-white);
|
||||
--color-sidebar-overlay-item-hover-text: var(--color-white);
|
||||
--color-sidebar-overlay-divider-background: rgba(255, 255, 255, 0.15);
|
||||
--color-sidebar-overlay-label-text: rgba(255, 255, 255, 0.5);
|
||||
--color-sidebar-overlay-label-border: var(
|
||||
--color-sidebar-overlay-divider-background
|
||||
);
|
||||
--color-sidebar-overlay-backdrop: rgba(17, 20, 24, 0.25);
|
||||
}
|
||||
|
||||
.bp4-dark :root {
|
||||
--color-primary: #8abbff;
|
||||
--color-danger: red;
|
||||
|
||||
--color-dark-gray5: #404854;
|
||||
--color-dark-gray4: #383e47;
|
||||
--color-dark-gray3: #2f343c;
|
||||
--color-dark-gray2: #252a31;
|
||||
--color-dark-gray1: #1c2127;
|
||||
|
||||
--color-light-gray1: #d3d8de;
|
||||
--color-light-gray2: #dce0e5;
|
||||
--color-light-gray3: #e5e8eb;
|
||||
--color-light-gray4: #edeff2;
|
||||
--color-light-gray5: #f6f7f9;
|
||||
|
||||
--color-white: #fff;
|
||||
--color-black: #000;
|
||||
|
||||
--color-muted-text: #abb3bf;
|
||||
|
||||
// Alerts
|
||||
--color-alert-default-background: transparent;
|
||||
--color-alert-default-description-text: var(--color-light-gray4);
|
||||
--color-alert-default-title-text: var(--color-light-gray2);
|
||||
|
||||
--color-alert-danger-background: transparent;
|
||||
--color-alert-danger-border: #2d72d2;
|
||||
--color-alert-danger-description-text: var(--color-light-gray1);
|
||||
--color-alert-danger-title-text: #8abbff;
|
||||
|
||||
--color-alert-primary-background: transparent;
|
||||
--color-alert-primary-border: #2d72d2;
|
||||
--color-alert-primary-title-text: #8abbff;
|
||||
--color-alert-primary-description-text: var(--color-light-gray1);
|
||||
|
||||
// Background
|
||||
--color-ui-background-primary: var(--color-base-sand-0);
|
||||
--color-ui-background-secondary: var(--color-base-sand-10);
|
||||
--color-ui-background-tertiary: var(--color-base-sand-20);
|
||||
|
||||
// Input
|
||||
--color-ui-input-border: #ced4da;
|
||||
--color-ui-input-border: rgba(255, 255, 255, 0.15);
|
||||
|
||||
--color-ui-input-background: rgba(17, 20, 24, 0.3);
|
||||
|
||||
--color-ui-input-group-prepend-background: #e9ecef;
|
||||
--color-ui-input-group-prepend-color: #495057;
|
||||
--color-ui-input-group-prepend-border: #ced4da;
|
||||
|
||||
--color-ui-input-group-prepend-background: var(--color-dark-gray3);
|
||||
--color-ui-input-group-prepend-color: rgba(255, 255, 255, 0.6);
|
||||
--color-ui-input-group-prepend-border: rgba(255, 255, 255, 0.15);
|
||||
|
||||
--color-ui-html-select-background: #fff;
|
||||
--color-ui-html-select-border: #ced4da;
|
||||
|
||||
--color-ui-menu-select-item-hover-background: #edeff2;
|
||||
--color-ui-menu-select-item-hover-background: rgba(143, 153, 168, .15);
|
||||
--color-ui-menu-select-item-active-background: var(--color-primary);
|
||||
|
||||
// Splash screen.
|
||||
--color-splash-screen-background: #fff;
|
||||
--color-splash-screen-background: var(--color-dark-gray1);
|
||||
|
||||
// Main Dashboard.
|
||||
--color-dashboard-insider-background: var(--color-dark-gray1);
|
||||
--color-dashboard-topbar-background: var(--color-dark-gray1);
|
||||
--color-dashboard-topbar-border-color: transparent;
|
||||
--color-dashboard-datatable-background: var(--color-dark-gray1);
|
||||
--color-dashboard-datatable-border: var(--color-dark-gray3);
|
||||
|
||||
// Dashboard error boundary.
|
||||
--color-dashboard-error-boundary-title-text: #2c3a5d;
|
||||
--color-dashboard-error-boundary-description-text: #1f3255;
|
||||
|
||||
--color-dashboard-error-boundary-title-text: rgba(255, 255, 255, 0.75);
|
||||
--color-dashboard-error-boundary-description-text: rgba(255, 255, 255, 0.6);
|
||||
--color-dashboard-error-boundary-logo: #a1afca;
|
||||
--color-dashboard-error-boundary-logo: rgba(255, 255, 255, 0.45);
|
||||
|
||||
--color-dashboard-navbar-background: var(--color-dark-gray1);
|
||||
--color-dashboard-navbar-item-text: var(--color-light-gray3);
|
||||
|
||||
--color-dashboard-navbar-item-hover-text: #32304a;
|
||||
--color-dashboard-navbar-item-hover-background: rgba(167, 182, 194, 0.12);
|
||||
|
||||
--color-dashboard-navbar-item-hover-text: var(--color-light-gray5);
|
||||
--color-dashboard-navbar-item-hover-background: var(--color-dark-gray3);
|
||||
|
||||
--color-dashboard-navbar-item-active-text: #32304a;
|
||||
--color-dashboard-navbar-item-active-background: #a7b6c21f;
|
||||
|
||||
--color-dashboard-navbar-item-active-text: var(--color-light-gray5);
|
||||
--color-dashboard-navbar-item-active-background: var(--color-dark-gray3);
|
||||
|
||||
--color-dashboard-navbar-item-icon: #32304a;
|
||||
|
||||
--color-dashboard-topbar-title-text: var(--color-white);
|
||||
|
||||
--color-dashboard-actionsbar-border: var(--color-dark-gray4);
|
||||
--color-dashboard-actionsbar-divider: rgba(255, 255, 255, 0.2);
|
||||
|
||||
// Datatable
|
||||
--color-datatable-head-background: var(--color-dark-gray3);
|
||||
--color-datatable-head-text: var(--color-white);
|
||||
--color-datatable-head-border: var(--color-dark-gray4);
|
||||
--color-datatable-cell-hover-background: var(--color-dark-gray3);
|
||||
--color-datatable-cell-border: var(--color-dark-gray4);
|
||||
--color-datatable-cell-focus-border: rgba(0, 82, 204, 0.7);
|
||||
--color-datatable-cell-focus-border: var(--color-primary);
|
||||
--color-datatable-no-results-text: #777;
|
||||
--color-datatable-no-results-text: rgba(255, 255, 255, 0.5);
|
||||
|
||||
--color-datatable-caret: rgba(255, 255, 255, 0.25);
|
||||
--color-datatable-caret-hover: rgba(255, 255, 255, 0.25);
|
||||
|
||||
// Sidebar
|
||||
--color-sidebar-toggle: #6b8193;
|
||||
--color-sidebar-toggle: rgba(255, 255, 255, 0.5);
|
||||
--color-sidebar-background: var(--color-dark-gray3);
|
||||
--color-sidebar-text: var(--color-white);
|
||||
--color-sidebar-scrollbars-background: rgba(255, 255, 255, 0.25);
|
||||
|
||||
--color-sidebar-menu-item-text: #ffff;
|
||||
|
||||
--color-sidebar-menu-item-hover-background: var(--color-dark-gray5);
|
||||
--color-sidebar-menu-item-text-hover: #fff;
|
||||
|
||||
--color-sidebar-menu-item-active-background: var(--color-dark-gray5);
|
||||
--color-sidebar-menu-item-active-text: #fff;
|
||||
|
||||
--color-sidebar-menu-item-focus-background: #01143e;
|
||||
--color-sidebar-menu-label-color: rgba(255, 255, 255, 0.4);
|
||||
|
||||
// Sidebar overlay
|
||||
--color-sidebar-overlay-background: var(--color-dark-gray5);
|
||||
--color-sidebar-overlay-hover-background: var(--color-dark-gray3);
|
||||
--color-sidebar-overlay-item-text: var(--color-white);
|
||||
--color-sidebar-overlay-item-hover-text: var(--color-white);
|
||||
--color-sidebar-overlay-divider-background: rgba(255, 255, 255, 0.15);
|
||||
--color-sidebar-overlay-label-text: rgba(255, 255, 255, 0.5);
|
||||
--color-sidebar-overlay-label-border: var(
|
||||
--color-sidebar-overlay-divider-background
|
||||
);
|
||||
--color-sidebar-overlay-backdrop: rgba(17, 20, 24, 0.25);
|
||||
|
||||
--color-financial-report-background: var(--color-dark-gray2);
|
||||
|
||||
--color-datatable-text: var(--color-white);
|
||||
|
||||
--color-datatable-constrant-text: var(--color-light-gray2);
|
||||
--color-datatable-constrant-cell-border: var(--color-dark-gray5);
|
||||
|
||||
--color-datatable-constrant-head-text: var(--color-light-gray2);
|
||||
--color-datatable-constrant-head-border: var(--color-dark-gray5);
|
||||
|
||||
--color-card-background: var(--color-dark-gray4);
|
||||
--color-card-border: #d2dce2;
|
||||
--color-card-border: rgba(255, 255, 255, 0.2);
|
||||
|
||||
// Bank accounts.
|
||||
--color-bank-account-card-background: var(--color-card-background);
|
||||
--color-bank-account-card-text: var(--color-light-gray5);
|
||||
--color-bank-account-card-border: #c8cad0;
|
||||
--color-bank-account-card-border: rgba(255, 255, 255, 0.2);
|
||||
--color-bank-account-card-hover-border: #0153cc;
|
||||
|
||||
--color-bank-account-card-tag-background: rgb(223, 225, 230);
|
||||
--color-bank-account-card-tag-background: rgba(255, 255, 255, 0.2);
|
||||
|
||||
--color-bank-account-code-text: rgb(23, 43, 77);
|
||||
--color-bank-account-code-text: var(--color-muted-text);
|
||||
|
||||
--color-bank-transactions-details-bar-background: var(--color-dark-gray1);
|
||||
--color-bank-transactions-details-bar-text: var(--color-light-gray2);
|
||||
--color-bank-transactions-details-bar-divider: var(--color-dark-gray5);
|
||||
|
||||
--color-bank-transactions-content-background: #fff;
|
||||
--color-bank-transactions-content-background: var(--color-dark-gray1);
|
||||
|
||||
--color-bank-transactions-content-border: #f0f0f0;
|
||||
--color-bank-transactions-content-border: var(--color-dark-gray2);
|
||||
|
||||
// Bank account transactions.
|
||||
--color-bank-transactions-datatable-card-background: var(--color-dark-gray1);
|
||||
--color-bank-transactions-datatable-card-border: #f0f0f0;
|
||||
|
||||
--color-bank-transaction-matching-aside: red;
|
||||
--color-bank-transaction-matching-divider: var(--color-dark-gray4);
|
||||
--color-bank-transaction-matching-aside-header: var(--white);
|
||||
--color-bank-transaction-matching-aside-header: var(--color-dark-gray1);
|
||||
--color-bank-transaction-matching-aside-footer: var(--color-dark-gray1);
|
||||
|
||||
--color-sidebar-preferences-background: var(--color-dark-gray1);
|
||||
--color-sidebar-preferences-border: #c6d0d9;
|
||||
--color-sidebar-preferences-border: rgba(255, 255, 255, 0.25);
|
||||
|
||||
// Sidebar preferences.
|
||||
--color-sidebar-preferences-item-background: transparent;
|
||||
--color-sidebar-preferences-item-text: #fff;
|
||||
|
||||
--color-sidebar-preferences-item-hover-background: var(--color-dark-gray4);
|
||||
--color-sidebar-preferences-item-hover-text: #fff;
|
||||
|
||||
--color-preferences-sidebar-head-border: #bbcbd0;
|
||||
--color-preferences-sidebar-head-text: #3b3b4c;
|
||||
|
||||
--color-preferences-sidebar-head-border: rgba(255, 255, 255, 0.25);
|
||||
--color-preferences-sidebar-head-text: rgba(255, 255, 255, 0.85);
|
||||
|
||||
--color-preferences-topbar-background: var(--color-dark-gray1);
|
||||
--color-preferences-topbar-border: var(--color-dark-gray3);
|
||||
--color-preferences-topbar-title: rgba(255, 255, 255, 0.85);
|
||||
|
||||
--color-preferences-content-background: var(--color-dark-gray2);
|
||||
|
||||
// Financial sheet.
|
||||
--color-financial-sheet-card-border: var(--color-dark-gray5);
|
||||
--color-financial-sheet-title-text: var(--color-light-gray1);
|
||||
--color-financial-sheet-type-text: var(--color-light-gray1);
|
||||
--color-financial-sheet-date-text: var(--color-light-gray1);
|
||||
--color-financial-sheet-footer-text: var(--color-light-gray1);
|
||||
--color-financial-sheet-minimal-title-text: var(--color-white);
|
||||
|
||||
// Transaction locking.
|
||||
--color-transaction-locking-item-background: var(--color-dark-gray2);
|
||||
--color-transaction-locking-item-border: var(--color-dark-gray3);
|
||||
--color-transaction-locking-item-icon-border: var(--color-dark-gray5);
|
||||
--color-transaction-locking-item-enabled-border: var(--color-dark-gray5);
|
||||
|
||||
// Reports items.
|
||||
--color-report-section-title-text: var(var(--color-light-gray1));
|
||||
--color-report-item-background: var(--color-dark-gray3);
|
||||
--color-report-item-border: var(--color-dark-gray5);
|
||||
--color-report-item-top-border: var(--color-dark-gray5);
|
||||
--color-report-item-text: var(--color-light-gray2);
|
||||
|
||||
--color-financial-report-drawer-tab-text: var(--color-light-gray3);
|
||||
|
||||
--color-element-customize-header-background: var(--color-dark-gray2);
|
||||
--color-element-customize-header-title-text: var(--color-light-gray4);
|
||||
|
||||
--color-element-customize-background: var(--color-dark-gray2);
|
||||
--color-element-customize-preview-background: var(--color-dark-gray5);
|
||||
|
||||
--color-element-customize-header-tabs-background: var(--color-dark-gray2);
|
||||
--color-ekement-customize-header-tabs-text: #5f6b7c;
|
||||
--color-ekement-customize-header-tabs-text: var(--color-muted-text);
|
||||
|
||||
--color-element-customize-divider: var(--color-dark-gray5);
|
||||
|
||||
// Universal search
|
||||
--color-universal-search-background: var(--color-dark-gray3);
|
||||
--color-universal-search-footer-divider: var(--color-dark-gray4);
|
||||
--color-universal-search-tag-background: #708392;
|
||||
--color-universal-search-tag-background: var(--color-dark-gray4);
|
||||
--color-universal-search-menu-border: #d3dce2;
|
||||
--color-universal-search-menu-border: rgba(255, 255, 255, 0.15);
|
||||
|
||||
--color-datatable-empty-status-title: #2c3a5d;
|
||||
--color-datatable-empty-status-description: #1f3255;
|
||||
|
||||
--color-datatable-empty-status-title: var(--color-light-gray4);
|
||||
--color-datatable-empty-status-description: var(--color-light-gray5);
|
||||
|
||||
--color-content-tab-background: var(--color-dark-gray4);
|
||||
|
||||
--color-content-tab-border: #e1e2e8;
|
||||
--color-content-tab-border: rgba(255, 255, 255, 0.15);
|
||||
|
||||
--color-content-tab-hover-border: rgba(255, 255, 255, 0.3);
|
||||
--color-content-tab-active-border: var(--color-primary);
|
||||
|
||||
--color-content-tab-text: #2f343c;
|
||||
--color-content-tab-text: var(--color-light-gray1);
|
||||
|
||||
--color-content-tab-active-text: #1552c8;
|
||||
--color-content-tab-active-text: var(--color-light-gray1);
|
||||
|
||||
--color-aside-background: #fff;
|
||||
--color-aside-background: var(--color-dark-gray2);
|
||||
|
||||
--color-aside-title-background: #fff;
|
||||
--color-aside-title-background: var(--color-dark-gray1);
|
||||
|
||||
--color-aside-divider: #E1E2E9;
|
||||
--color-aside-divider: var(--color-dark-gray5);
|
||||
|
||||
--color-app-shell-divider: var(--color-dark-gray5);
|
||||
|
||||
--color-select-button-background: #fff;
|
||||
--color-select-button-border: #fff;
|
||||
|
||||
--color-stepper-step-background: #9e9e9e;
|
||||
--color-stepper-step-active-background: rgb(0, 82, 204);
|
||||
--color-stepper-separator: #c5cbd3;
|
||||
--color-stepper-step-text: #fff;
|
||||
|
||||
--color-stepper-step-title-text: #738091;
|
||||
--color-stepper-step-title-active-text: var(--color-primary);
|
||||
|
||||
--color-stepper-step-description-text: #738091;
|
||||
--color-stepper-step-description-active-text: var(--color-primary);
|
||||
|
||||
--color-stepper-step-title-text: var(--color-light-gray1);
|
||||
--color-stepper-step-title-active-text: var(--color-primary);
|
||||
|
||||
--color-stepper-step-description-text: var(--color-light-gray1);
|
||||
--color-stepper-step-description-active-text: var(--color-primary);
|
||||
|
||||
--color-stepper-step-background: var(--color-dark-gray4);
|
||||
--color-stepper-step-active-background: var(--color-dark-gray5);
|
||||
--color-stepper-separator: var(--color-dark-gray4);
|
||||
--color-stepper-step-text: #fff;
|
||||
|
||||
--color-drawer-border-left: var(--color-primary);
|
||||
--color-drawer-border-left: transparent;
|
||||
|
||||
--color-drawer-header-background: #fff;
|
||||
--color-drawer-header-background: transparent;
|
||||
|
||||
--color-drawer-header-border: rgba(255, 255, 255, 0.2);
|
||||
|
||||
--color-drawer-header-text: #354152;
|
||||
--color-drawer-header-text: #fff;
|
||||
|
||||
--color-drawer-insider-background: #fbfbfb;
|
||||
--color-drawer-insider-background: transparent;
|
||||
--color-drawer-tabs-background: #fff;
|
||||
--color-drawer-tabs-background: transparent;
|
||||
}
|
||||
|
||||
$pt-popover-box-shadow:
|
||||
0 0 0 1px rgba(16, 22, 26, 0.02),
|
||||
0 2px 4px rgba(16, 22, 26, 0.1),
|
||||
0 8px 24px rgba(16, 22, 26, 0.1);
|
||||
|
||||
$blue1: #0069ff;
|
||||
$blue2: #0052ff;
|
||||
$blue3: rgb(0, 82, 204);
|
||||
|
||||
$pt-link-color: $blue3;
|
||||
$pt-intent-primary: $blue1;
|
||||
$menu-item-color-hover: $light-gray4;
|
||||
@@ -17,9 +449,19 @@ $menu-item-color-active: $light-gray3;
|
||||
$breadcrumbs-collapsed-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#6B8193' enable-background='new 0 0 16 16' xml:space='preserve'><g><circle cx='2' cy='8.03' r='2'/><circle cx='14' cy='8.03' r='2'/><circle cx='8' cy='8.03' r='2'/></g></svg>");
|
||||
|
||||
$sidebar-zindex: 16;
|
||||
$pt-font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont,
|
||||
Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue,
|
||||
Icons16, sans-serif;
|
||||
$pt-font-family:
|
||||
'Noto Sans',
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
Segoe UI,
|
||||
Roboto,
|
||||
Oxygen,
|
||||
Ubuntu,
|
||||
Cantarell,
|
||||
Open Sans,
|
||||
Helvetica Neue,
|
||||
Icons16,
|
||||
sans-serif;
|
||||
|
||||
$button-box-shadow: 0 0 0 !default;
|
||||
$button-box-shadow-active: 0 0 0 !default;
|
||||
@@ -30,13 +472,15 @@ $button-background-color-disabled: #e9ecef !default;
|
||||
$button-background-color: #e6effb !default;
|
||||
$button-background-color-hover: #cfdcee !default;
|
||||
|
||||
$sidebar-background: #01115e;
|
||||
$sidebar-text-color: #fff;
|
||||
$app-bg: var(--color-dark-gray1);
|
||||
|
||||
$sidebar-background: var(--color-sidebar-background);
|
||||
$sidebar-text-color: var(--sidebar-text-color);
|
||||
$sidebar-width: 100%;
|
||||
$sidebar-menu-item-color: rgb(255, 255, 255);
|
||||
$sidebar-menu-item-color-active: rgb(255, 255, 255);
|
||||
$sidebar-menu-item-color: var(--color-sidebar-menu-item-color);
|
||||
$sidebar-menu-item-color-active: var(--color-sidebar-menu-item-active-color);
|
||||
$sidebar-popover-submenu-bg: rgb(1, 20, 62);
|
||||
$sidebar-menu-label-color: rgba(255, 255, 255, 0.5);
|
||||
$sidebar-menu-label-color: var(--color-sidebar-menu-label-color);
|
||||
$sidebar-submenu-item-color: rgba(255, 255, 255, 0.85);
|
||||
$sidebar-submenu-item-hover-color: rgb(255, 255, 255);
|
||||
$sidebar-logo-opacity: 0.5;
|
||||
@@ -55,4 +499,9 @@ $zindex-toast: 40;
|
||||
$control-checked-background-color: #0069ff !default;
|
||||
$control-checked-background-color-hover: #0069ff !default;
|
||||
$control-checked-background-color-active: #0069ff !default;
|
||||
$control-box-shadow: inset 0 0 0 1px #666 !default;
|
||||
$control-box-shadow: inset 0 0 0 1px #666 !default;
|
||||
|
||||
// Drawer
|
||||
$drawer-background-color: $white !default;
|
||||
$dark-drawer-background-color: $dark-gray2 !default;
|
||||
|
||||
|
||||
@@ -1,9 +1,15 @@
|
||||
|
||||
.big-amount{
|
||||
--x-color-amount-text: #343463;
|
||||
--x-color-label-text: #5d6f90;
|
||||
|
||||
--x-color-label-text: var(--color-light-gray1);
|
||||
--x-color-amount-text: var(--color-light-gray2);
|
||||
|
||||
text-align: right;
|
||||
|
||||
&__label{
|
||||
color: #5d6f90;
|
||||
color: var(--x-color-label-text);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
@@ -14,7 +20,7 @@
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
margin-top: 6px;
|
||||
color: #343463;
|
||||
color: var(--x-color-amount-text);
|
||||
line-height: 1;
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
display: flex;
|
||||
background: #fff;
|
||||
background: var(--color-splash-screen-background);
|
||||
z-index: $zindex-dashboard-splash-screen;
|
||||
|
||||
.center {
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
border-spacing: 0;
|
||||
min-width: 100%;
|
||||
display: block;
|
||||
color: #101219;
|
||||
// color: #101219;
|
||||
|
||||
.thead .thead-inner,
|
||||
.tbody .tbody-inner {
|
||||
@@ -20,11 +20,11 @@
|
||||
|
||||
.th {
|
||||
padding: 0.68rem 0.5rem;
|
||||
background: #f5f5f5;
|
||||
background: var(--color-datatable-head-background);
|
||||
font-size: 14px;
|
||||
color: #424853;
|
||||
color: var(--color-datatable-head-text);
|
||||
font-weight: 400;
|
||||
border-bottom: 1px solid #d2dde2;
|
||||
border-bottom: 1px solid var(--color-datatable-head-border);
|
||||
|
||||
> div {
|
||||
overflow: hidden;
|
||||
@@ -61,7 +61,7 @@
|
||||
|
||||
&:last-child {
|
||||
.td {
|
||||
border-bottom: 0;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -116,7 +116,7 @@
|
||||
.inner-resizer {
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
border-left: 1px solid #e6e6e6;
|
||||
border-left: 1px solid var(--color-datatable-head-border);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@@ -135,12 +135,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
.bp4-control.bp4-checkbox input:not(:checked):not(:indeterminate) ~ .bp4-control-indicator{
|
||||
box-shadow: inset 0 0 0 1px #C5CBD3;
|
||||
.bp4-control.bp4-checkbox
|
||||
input:not(:checked):not(:indeterminate)
|
||||
~ .bp4-control-indicator {
|
||||
// box-shadow: inset 0 0 0 1px #c5cbd3;
|
||||
}
|
||||
|
||||
.skeleton {
|
||||
animation: skeleton-fade-in 0.3s linear forwards,
|
||||
animation:
|
||||
skeleton-fade-in 0.3s linear forwards,
|
||||
skeleton-glow 1s linear infinite alternate;
|
||||
|
||||
animation-delay: 0s, 0.3s;
|
||||
@@ -175,15 +178,14 @@
|
||||
overflow: auto;
|
||||
|
||||
.tbody-inner {
|
||||
>.loading {
|
||||
> .loading {
|
||||
padding-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.tr .td {
|
||||
border-bottom: 1px solid #ececec;
|
||||
border-bottom: 1px solid var(--color-datatable-cell-border);
|
||||
align-items: center;
|
||||
|
||||
|
||||
.placeholder {
|
||||
color: #a0a0a0;
|
||||
@@ -206,13 +208,13 @@
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
outline: 1px solid rgba(0, 82, 204, 0.7);
|
||||
outline: 1px solid var(--color-datatable-cell-focus-border);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
.tr:hover .td {
|
||||
background: #f3f7fc;
|
||||
background: var(--color-datatable-cell-hover-background);
|
||||
}
|
||||
|
||||
.tr.is-context-menu-active .td {
|
||||
@@ -244,10 +246,10 @@
|
||||
.td {
|
||||
flex-direction: column;
|
||||
padding: 18px 20px;
|
||||
color: #777;
|
||||
color: var(--color-datatable-no-results-text);
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
border-bottom: 0;
|
||||
border-bottom-width: 0;
|
||||
|
||||
&:hover {
|
||||
background: transparent;
|
||||
@@ -255,7 +257,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
>.loading {
|
||||
> .loading {
|
||||
padding-top: 50px;
|
||||
}
|
||||
}
|
||||
@@ -276,9 +278,9 @@
|
||||
height: 0;
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-left: 8px solid #acacac;
|
||||
border-left: 8px solid var(--color-datatable-caret);
|
||||
display: block;
|
||||
transition: all 0.1s cubic-bezier(.4, 1, .75, .9);
|
||||
transition: all 0.1s cubic-bezier(0.4, 1, 0.75, 0.9);
|
||||
|
||||
&.is-expanded {
|
||||
transform: rotate(90deg);
|
||||
@@ -287,7 +289,7 @@
|
||||
|
||||
&:hover {
|
||||
.expand-arrow {
|
||||
border-left-color: #7d8593;
|
||||
border-left-color: var(--color-datatable-caret-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -299,7 +301,6 @@
|
||||
}
|
||||
|
||||
&-size {
|
||||
|
||||
&--medium {
|
||||
.tbody .tr {
|
||||
background-size: red;
|
||||
@@ -334,7 +335,6 @@
|
||||
}
|
||||
|
||||
&.has-sticky {
|
||||
|
||||
.thead,
|
||||
.tfoot {
|
||||
position: sticky;
|
||||
@@ -358,9 +358,11 @@
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
[data-sticky-last-left-td] {}
|
||||
[data-sticky-last-left-td] {
|
||||
}
|
||||
|
||||
[data-sticky-first-right-td] {}
|
||||
[data-sticky-first-right-td] {
|
||||
}
|
||||
}
|
||||
|
||||
&.has-virtualized-rows {
|
||||
@@ -378,25 +380,24 @@
|
||||
.table-constrant,
|
||||
.table--constrant {
|
||||
.table {
|
||||
color: #000;
|
||||
|
||||
.thead {
|
||||
.tr:first-of-type .th {
|
||||
border-top: 1px solid #000000;
|
||||
border-top: 1px solid var(--color-datatable-constrant-head-border);
|
||||
}
|
||||
}
|
||||
|
||||
.thead .th {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
border-bottom: 1px solid #000000;
|
||||
background: transparent;
|
||||
color: var(--color-datatable-constrant-head-text);
|
||||
border-bottom: 1px solid var(--color-datatable-constrant-head-border);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
.tbody .tr .td {
|
||||
background: #fff;
|
||||
background: transparent;
|
||||
padding: 0.5rem 0.5rem;
|
||||
border-bottom: 0;
|
||||
border-bottom-width: 0;
|
||||
color: var(--color-datatable-constrant-text);
|
||||
border-color: var(--color-datatable-constrant-cell-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
|
||||
&_title {
|
||||
font-size: 20px;
|
||||
color: #2c3a5d;
|
||||
color: var(--color-datatable-empty-status-title);
|
||||
font-weight: 600;
|
||||
margin-left: auto;
|
||||
margin-bottom: 10px;
|
||||
@@ -21,7 +21,7 @@
|
||||
}
|
||||
&_desc {
|
||||
font-size: 16px;
|
||||
color: #1f3255;
|
||||
color: var(--color-datatable-empty-status-description);
|
||||
opacity: 0.8;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
.details-menu {
|
||||
--color-detail-item-label: #727983;
|
||||
--color-detail-item-label: rgba(255, 255, 255, 0.65);
|
||||
|
||||
&--vertical {
|
||||
display: flex;
|
||||
@@ -41,7 +43,7 @@
|
||||
display: flex;
|
||||
|
||||
&__label {
|
||||
color: #727983;
|
||||
color: var(--color-detail-item-label);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,17 +1,19 @@
|
||||
@import '../_base.scss';
|
||||
|
||||
.bp4-drawer {
|
||||
|
||||
|
||||
.bp4-drawer-header {
|
||||
margin-bottom: 2px;
|
||||
background-color: #FFF;
|
||||
background-color: var(--color-drawer-header-background);
|
||||
box-shadow: 0 1px 0 var(--color-drawer-header-border);
|
||||
|
||||
.bp4-heading {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.bp4-heading,
|
||||
.bp4-icon {
|
||||
color: #354152;
|
||||
color: var(--color-drawer-header-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -20,48 +22,47 @@
|
||||
&__insider{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--color-drawer-insider-background);
|
||||
flex: 1 0 0;
|
||||
background-color: #fbfbfb;
|
||||
}
|
||||
|
||||
&__main-tabs{
|
||||
.bp4-tabs {
|
||||
.bp4-tab-list {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
// &__main-tabs{
|
||||
// .bp4-tabs {
|
||||
// .bp4-tab-list {
|
||||
// position: relative;
|
||||
// background-color: var(--color-drawer-tabs-background);
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: #e1e2e8;
|
||||
}
|
||||
// &:before {
|
||||
// content: '';
|
||||
// position: absolute;
|
||||
// bottom: 0;
|
||||
// width: 100%;
|
||||
// height: 2px;
|
||||
// background: #e1e2e8;
|
||||
// }
|
||||
|
||||
> *:not(:last-child) {
|
||||
margin-right: 25px;
|
||||
}
|
||||
// > *:not(:last-child) {
|
||||
// margin-right: 25px;
|
||||
// }
|
||||
|
||||
&.bp4-large > .bp4-tab {
|
||||
font-size: 15px;
|
||||
color: #555;
|
||||
margin: 0 0.8rem;
|
||||
// &.bp4-large > .bp4-tab {
|
||||
// font-size: 15px;
|
||||
// color: #555;
|
||||
// margin: 0 0.8rem;
|
||||
|
||||
&[aria-selected='true'],
|
||||
&:not([aria-disabled='true']):hover {
|
||||
color: $pt-link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// &[aria-selected='true'],
|
||||
// &:not([aria-disabled='true']):hover {
|
||||
// color: $pt-link-color;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.bp4-tab-panel {
|
||||
margin-top: 0;
|
||||
// .bp4-tab-panel {
|
||||
// margin-top: 0;
|
||||
|
||||
.card {
|
||||
margin: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// .card {
|
||||
// margin: 15px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
@@ -24,8 +24,11 @@
|
||||
}
|
||||
|
||||
.details-menu--vertical {
|
||||
--x-border-color: #e2e2e2;
|
||||
--x-border-color: rgba(255, 255, 255, 0.2);
|
||||
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid #e2e2e2;
|
||||
border-bottom: 1px solid var(--x-border-color);
|
||||
}
|
||||
|
||||
.details-menu--horizantal {
|
||||
|
||||
@@ -35,7 +35,7 @@ progress[value] {
|
||||
overflow: hidden;
|
||||
|
||||
.indeterminate {
|
||||
background-color: #002fff;
|
||||
background-color: var(--color-primary);
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
.bp4-menu-item {
|
||||
|
||||
&:hover{
|
||||
background-color: var(--color-ui-menu-select-item-hover-background);
|
||||
}
|
||||
.menu-item-space {
|
||||
width: 6px;
|
||||
display: inline-block;
|
||||
|
||||
@@ -2,5 +2,5 @@
|
||||
|
||||
|
||||
.bp4-overlay-backdrop {
|
||||
background-color: rgba(0, 10, 30, 0.7);
|
||||
// background-color: rgba(0, 10, 30, 0.7);
|
||||
}
|
||||
@@ -3,17 +3,34 @@
|
||||
// > .page-form__content
|
||||
// > .page-form__floating-actions
|
||||
.page-form {
|
||||
--color-page-form-background: #fff;
|
||||
|
||||
--color-page-form-header-background: #fff;
|
||||
--color-page-form-header-border: #d2dce2;
|
||||
|
||||
--color-page-form-header-background: var(--color-dark-gray1);
|
||||
--color-page-form-header-border: rgba(255, 255, 255, 0.1);
|
||||
|
||||
$self: '.page-form';
|
||||
padding-bottom: 20px;
|
||||
|
||||
|
||||
&__floating-actions {
|
||||
--color-page-form-floating-actions-background: #fff;
|
||||
--color-page-form-floating-actions-border: rgb(210, 221, 226);
|
||||
--color-page-form-floating-actions-shadow: rgba(0, 0, 0, 0.05);
|
||||
|
||||
--color-page-form-floating-actions-background: var(--color-dark-gray1);
|
||||
--color-page-form-floating-actions-border: var(--color-dark-gray5);
|
||||
--color-page-form-floating-actions-shadow: rgba(0, 0, 0, 0.05);
|
||||
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
padding: 14px 18px;
|
||||
border-top: 1px solid rgb(210, 221, 226);
|
||||
box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.05);
|
||||
background: var(--color-page-form-floating-actions-background);
|
||||
border-top: 1px solid var(--color-page-form-floating-actions-border);
|
||||
box-shadow: 0px -1px 4px 0px var(--color-page-form-floating-actions-shadow);
|
||||
|
||||
.bp4-button-group{
|
||||
|
||||
@@ -43,9 +60,9 @@
|
||||
}
|
||||
}
|
||||
#{$self}__header {
|
||||
background-color: #FFF;
|
||||
background-color: var(--color-page-form-header-background);
|
||||
border-bottom: 1px solid var(--color-page-form-header-border);
|
||||
padding: 25px 32px;
|
||||
border-bottom: 1px solid #d2dce2;
|
||||
|
||||
.bp4-form-group.bp4-inline label.bp4-label {
|
||||
font-weight: 500;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.sidebar-overlay {
|
||||
background: #fff;
|
||||
background: var(--color-sidebar-overlay-background);
|
||||
height: 100%;
|
||||
width: 225px;
|
||||
outline: 0;
|
||||
@@ -11,7 +11,6 @@
|
||||
}
|
||||
|
||||
.ScrollbarsCustom-Track {
|
||||
|
||||
&.ScrollbarsCustom-TrackY,
|
||||
&.ScrollbarsCustom-TrackX {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
@@ -19,7 +18,6 @@
|
||||
}
|
||||
|
||||
.ScrollbarsCustom-Thumb {
|
||||
|
||||
&.ScrollbarsCustom-ThumbX,
|
||||
&.ScrollbarsCustom-ThumbY {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
@@ -34,7 +32,6 @@
|
||||
|
||||
&:hover {
|
||||
.ScrollbarsCustom-Thumb {
|
||||
|
||||
&.ScrollbarsCustom-ThumbX,
|
||||
&.ScrollbarsCustom-ThumbY {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
@@ -48,7 +45,7 @@
|
||||
|
||||
&__item {
|
||||
font-size: 15px;
|
||||
color: #00102b;
|
||||
color: var(--color-sidebar-overlay-item-text);
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
@@ -58,7 +55,8 @@
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: #f3f3f3;
|
||||
color: var(--color-sidebar-overlay-item-text-hover);
|
||||
background-color: var(--color-sidebar-overlay-hover-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -66,7 +64,7 @@
|
||||
&__divider {
|
||||
height: 1px;
|
||||
margin: 6px 0;
|
||||
background: #e2e5ec;
|
||||
background: var(--color-sidebar-overlay-divider-background);
|
||||
}
|
||||
|
||||
&__label {
|
||||
@@ -74,8 +72,8 @@
|
||||
font-size: 12px;
|
||||
padding: 14px 20px 10px;
|
||||
letter-spacing: 1px;
|
||||
color: #707a85;
|
||||
border-bottom: 1px solid #e2e5ec;
|
||||
color: var(--color-sidebar-overlay-label-text);
|
||||
border-bottom: 1px solid var(--color-sidebar-overlay-label-border);
|
||||
margin-bottom: 6px;
|
||||
|
||||
html[lang^="ar"] & {
|
||||
@@ -127,6 +125,6 @@
|
||||
}
|
||||
|
||||
.sidebar-overlay-backdrop {
|
||||
background-color: rgba(0, 10, 30, 0.15);
|
||||
background-color: var(--color-sidebar-overlay-backdrop);
|
||||
z-index: 14;
|
||||
}
|
||||
@@ -2,9 +2,10 @@
|
||||
position: fixed;
|
||||
filter: blur(0);
|
||||
opacity: 1;
|
||||
background-color: #fff;
|
||||
background-color: var(--color-universal-search-background);
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 4px 8px rgba(16, 22, 26, 0.2),
|
||||
box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1),
|
||||
0 4px 8px rgba(16, 22, 26, 0.2),
|
||||
0 18px 46px 6px rgba(16, 22, 26, 0.2);
|
||||
left: calc(50% - 250px);
|
||||
top: 20vh;
|
||||
@@ -16,7 +17,6 @@
|
||||
filter: blur(20px);
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
&.bp4-overlay-appear-active,
|
||||
&.bp4-overlay-enter-active {
|
||||
filter: blur(0);
|
||||
@@ -26,12 +26,10 @@
|
||||
transition-property: filter, opacity;
|
||||
transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9);
|
||||
}
|
||||
|
||||
&.bp4-overlay-exit {
|
||||
filter: blur(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.bp4-overlay-exit-active {
|
||||
filter: blur(20px);
|
||||
opacity: 0.2;
|
||||
@@ -61,7 +59,6 @@
|
||||
line-height: 50px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.bp4-input-group.bp4-large .bp4-input:not(:first-child) {
|
||||
padding-left: 50px !important;
|
||||
}
|
||||
@@ -82,7 +79,7 @@
|
||||
}
|
||||
|
||||
.bp4-menu {
|
||||
border-top: 1px solid #d3dce2;
|
||||
border-top: 1px solid var(--color-universal-search-menu-border);
|
||||
max-height: calc(60vh - 20px);
|
||||
overflow: auto;
|
||||
|
||||
@@ -128,7 +125,7 @@
|
||||
|
||||
&__footer {
|
||||
padding: 12px 12px;
|
||||
border-top: 1px solid #d3dce2;
|
||||
border-top: 1px solid var(--color-universal-search-footer-divider);
|
||||
}
|
||||
|
||||
&__actions {
|
||||
@@ -141,9 +138,8 @@
|
||||
}
|
||||
|
||||
.bp4-tag {
|
||||
background: #708392;
|
||||
background: var(--color-universal-search-tag-background);
|
||||
}
|
||||
|
||||
&--arrows {
|
||||
.bp4-tag {
|
||||
padding: 0;
|
||||
@@ -201,7 +197,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.universal-search-overlay .bp4-overlay-backdrop {
|
||||
background: rgba(0, 10, 30, 0.3);
|
||||
}
|
||||
|
||||
@@ -1,15 +1,13 @@
|
||||
@import 'src/style/_base.scss';
|
||||
|
||||
.sidebar {
|
||||
background: $sidebar-background;
|
||||
width: $sidebar-width;
|
||||
color: $sidebar-text-color;
|
||||
background: var(--color-sidebar-background);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: $sidebar-zindex;
|
||||
position: relative;
|
||||
|
||||
.ScrollbarsCustom-Track {
|
||||
|
||||
&.ScrollbarsCustom-TrackY,
|
||||
&.ScrollbarsCustom-TrackX {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
@@ -17,7 +15,6 @@
|
||||
}
|
||||
|
||||
.ScrollbarsCustom-Thumb {
|
||||
|
||||
&.ScrollbarsCustom-ThumbX,
|
||||
&.ScrollbarsCustom-ThumbY {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
@@ -32,10 +29,9 @@
|
||||
|
||||
&:hover {
|
||||
.ScrollbarsCustom-Thumb {
|
||||
|
||||
&.ScrollbarsCustom-ThumbX,
|
||||
&.ScrollbarsCustom-ThumbY {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
background: var(--color-sidebar-scrollbars-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -138,7 +134,7 @@
|
||||
padding-bottom: 2rem;
|
||||
|
||||
.#{$ns}-menu-item {
|
||||
color: $sidebar-menu-item-color;
|
||||
color: var(--color-sidebar-menu-item-text);
|
||||
border-radius: 0;
|
||||
padding: 8px 20px;
|
||||
font-size: 15px;
|
||||
@@ -146,13 +142,12 @@
|
||||
|
||||
&:hover,
|
||||
&.bp4-active {
|
||||
background: $sidebar-submenu-item-bg-color;
|
||||
color: $sidebar-menu-item-color-active;
|
||||
background: var(--color-sidebar-menu-item-hover-background);
|
||||
color: var(--color-sidebar-menu-item-text-hover);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
background: #01143e;
|
||||
background: var(--color-sidebar-menu-item-focus-background);
|
||||
}
|
||||
|
||||
>.#{$ns}-icon {
|
||||
@@ -169,7 +164,7 @@
|
||||
|
||||
&-labeler {
|
||||
display: block;
|
||||
color: $sidebar-menu-label-color;
|
||||
color: var(--color-sidebar-menu-label-color);
|
||||
font-size: 11px;
|
||||
padding: 8px 20px;
|
||||
margin-top: 4px;
|
||||
|
||||
@@ -2,6 +2,17 @@
|
||||
// Financial sheet - Drawer header.
|
||||
// --------------------
|
||||
.financial-header-drawer {
|
||||
--x-color-background: var(--color-dark-gray1);
|
||||
--x-color-backdrop-background: rgba(2, 9, 19, 0.65);
|
||||
|
||||
--x-color-tabs-border: var(--color-dark-gray2);
|
||||
--x-color-tabs-tab-item-background: var(--color-dark-gray3);
|
||||
--x-color-tabs-indicator-background: var(--color-dark-gray2);
|
||||
--x-color-tabs-indicator-border: var(--color-primary);
|
||||
|
||||
--x-color-footer-background: var(--color-dark-gray3);
|
||||
--x-color-footer-border: var(--color-dark-gray1);
|
||||
|
||||
padding: 25px 26px 25px;
|
||||
position: absolute;
|
||||
top: 101px;
|
||||
@@ -18,8 +29,11 @@
|
||||
max-height: 550px;
|
||||
height: 100%;
|
||||
padding-bottom: 49px;
|
||||
background-color: #fff;
|
||||
|
||||
&,
|
||||
.bp4-dark & {
|
||||
background-color: var(--x-color-background);
|
||||
}
|
||||
> form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -27,7 +41,7 @@
|
||||
height: 100%;
|
||||
}
|
||||
.bp4-drawer-backdrop {
|
||||
background-color: rgba(2, 9, 19, 0.65);
|
||||
background-color: var(--x-color-backdrop-background);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -60,7 +74,7 @@
|
||||
|
||||
.bp4-tab-list {
|
||||
width: 220px;
|
||||
border-right: 1px solid #c3cdd5;
|
||||
border-right: 1px solid var(--color-dark-gray2);
|
||||
padding-top: 10px;
|
||||
|
||||
> *:not(:last-child) {
|
||||
@@ -70,14 +84,14 @@
|
||||
width: 100%;
|
||||
|
||||
.bp4-tab-indicator {
|
||||
border-left: 3px solid #0350f8;
|
||||
background-color: #edf5ff;
|
||||
border-left: 3px solid var(--x-color-tabs-indicator-border);
|
||||
background-color: var(--x-color-tabs-indicator-background);
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bp4-tab {
|
||||
color: #333;
|
||||
color: var(--color-financial-report-drawer-tab-text);
|
||||
line-height: 45px;
|
||||
border-radius: 0;
|
||||
padding-left: 14px;
|
||||
@@ -88,8 +102,8 @@
|
||||
}
|
||||
|
||||
&__footer {
|
||||
background-color: #ecf0f3;
|
||||
border-top: 1px solid #c3cdd5;
|
||||
background-color: var(--x-color-footer-background);
|
||||
border-top: 1px solid var(--x-color-footer-border);
|
||||
padding: 8px;
|
||||
padding-left: 230px;
|
||||
position: absolute;
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
|
||||
|
||||
.bp4-button {
|
||||
--color-button-color: #555;
|
||||
--color-button-color: var(--color-light-gray3);
|
||||
|
||||
min-width: 32px;
|
||||
min-height: 32px;
|
||||
padding-left: 12px;
|
||||
@@ -12,7 +15,7 @@
|
||||
}
|
||||
|
||||
.bp4-button:not([class*='bp4-intent-']):not(.bp4-minimal) {
|
||||
color: #555555;
|
||||
color: var(--color-button-color);
|
||||
box-shadow: 0 0 0 transparent;
|
||||
|
||||
&.bp4-small {
|
||||
|
||||
@@ -29,13 +29,16 @@ label.bp4-label {
|
||||
|
||||
// Form input.
|
||||
.#{$ns}-input {
|
||||
box-shadow: 0 0 0 transparent;
|
||||
border: 1px solid #ced4da;
|
||||
border: 1px solid var(--color-ui-input-border);
|
||||
border-radius: 2px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
color: #333;
|
||||
|
||||
&,
|
||||
.bp4-dark & {
|
||||
box-shadow: 0 0 0 transparent;
|
||||
}
|
||||
&:focus,
|
||||
&.bp4-active {
|
||||
box-shadow: 0 0 0 1px #116cd0;
|
||||
@@ -102,12 +105,14 @@ label.bp4-label {
|
||||
border-radius: 2px;
|
||||
|
||||
&,
|
||||
&:hover {
|
||||
background: #fff;
|
||||
&:hover,
|
||||
.bp4-dark &,
|
||||
.bp4-dark &:hover {
|
||||
box-shadow: none;
|
||||
border: 1px solid #ced4da;
|
||||
background-color: var(--color-ui-input-background);
|
||||
border: 1px solid var(--color-ui-input-border);
|
||||
}
|
||||
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
|
||||
border-color: #80bdff;
|
||||
@@ -123,11 +128,11 @@ label.bp4-label {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #495057;
|
||||
color: var(--color-ui-input-group-prepend-color);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
background-color: #e9ecef;
|
||||
border: 1px solid #ced4da;
|
||||
background-color: var(--color-ui-input-group-prepend-background);
|
||||
border: 1px solid var(--color-ui-input-group-prepend-border);
|
||||
border-radius: 0.25rem;
|
||||
height: 100%;
|
||||
|
||||
@@ -144,7 +149,6 @@ label.bp4-label {
|
||||
.bp4-input-group {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.bp4-control-group {
|
||||
>.input-group-prepend:first-child .input-group-text {
|
||||
border-top-right-radius: 0;
|
||||
@@ -295,8 +299,8 @@ label.bp4-label {
|
||||
color: #495057;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
background-color: #e9ecef;
|
||||
border: 1px solid #ced4da;
|
||||
background-color: var(--color-ui-input-group-prepend-background);
|
||||
border: 1px solid var(--color-ui-input-group-prepend-border);
|
||||
border-radius: 0 3px 3px 0;
|
||||
|
||||
.bp4-icon {
|
||||
|
||||
@@ -10,23 +10,26 @@ $dashboard-views-bar-height: 44px;
|
||||
min-height: 60px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #c7d5db;
|
||||
background-color: var(--color-dashboard-topbar-background);
|
||||
border-bottom: 1px solid var(--color-dashboard-topbar-border-color);
|
||||
|
||||
&-right,
|
||||
&-left {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&-actions {}
|
||||
&-actions {
|
||||
}
|
||||
|
||||
&-sidebar-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 2px;
|
||||
|
||||
.#{$ns}-button {
|
||||
color: #6b8193;
|
||||
.bp4-button.bp4-minimal {
|
||||
&,
|
||||
.bp4-dark & {
|
||||
color: var(--color-sidebar-toggle);
|
||||
|
||||
&,
|
||||
&:hover,
|
||||
@@ -38,6 +41,7 @@ $dashboard-views-bar-height: 44px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-navbar {
|
||||
display: flex;
|
||||
@@ -126,6 +130,13 @@ $dashboard-views-bar-height: 44px;
|
||||
background: $light-gray2;
|
||||
}
|
||||
|
||||
.bp4-dark & {
|
||||
background: var(--color-dark-gray4);
|
||||
|
||||
&:hover {
|
||||
background: var(--color-dark-gray5);
|
||||
}
|
||||
}
|
||||
&::before {
|
||||
background: escape-svg($breadcrumbs-collapsed-icon) center center;
|
||||
width: 15px;
|
||||
@@ -155,16 +166,17 @@ $dashboard-views-bar-height: 44px;
|
||||
}
|
||||
|
||||
&__actions-bar {
|
||||
border-bottom: 2px solid #e1e2e8;
|
||||
border-bottom: 2px solid var(--color-dashboard-actionsbar-border);
|
||||
|
||||
.bp4-navbar-divider {
|
||||
border-left-color: rgb(199, 214, 219);
|
||||
border-left-color: var(--color-dashboard-actionsbar-divider);
|
||||
}
|
||||
|
||||
.#{$ns}-navbar {
|
||||
box-shadow: none;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
background-color: var(--color-dashboard-navbar-background);
|
||||
|
||||
&,
|
||||
&-group {
|
||||
@@ -177,25 +189,23 @@ $dashboard-views-bar-height: 44px;
|
||||
}
|
||||
|
||||
.#{$ns}-button {
|
||||
color: #32304a;
|
||||
color: var(--color-dashboard-navbar-item-text);
|
||||
padding: 8px 12px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(167, 182, 194, 0.12);
|
||||
color: #32304a;
|
||||
background: var(--color-dashboard-navbar-item-hover-background);
|
||||
color: var(--color-dashboard-navbar-item-hover-text);
|
||||
}
|
||||
|
||||
&.bp4-minimal:active,
|
||||
&.bp4-minimal.bp4-active {
|
||||
background: #a7b6c21f;
|
||||
color: #32304a;
|
||||
background: var(--color-dashboard-navbar-item-active-background);
|
||||
color: var(--color-dashboard-navbar-item-active-text);
|
||||
}
|
||||
&.bp4-disabled{
|
||||
&.bp4-disabled {
|
||||
background: transparent;
|
||||
color: rgba(50, 48, 74, 0.4);
|
||||
}
|
||||
&.has-active-filters {
|
||||
|
||||
&,
|
||||
&.bp4-active,
|
||||
&:active {
|
||||
@@ -204,22 +214,21 @@ $dashboard-views-bar-height: 44px;
|
||||
}
|
||||
|
||||
.#{$ns}-icon {
|
||||
color: #32304a;
|
||||
// color: var(--color-dashboard-navbar-item-icon);
|
||||
}
|
||||
|
||||
&.#{$ns}-minimal.#{$ns}-intent-danger {
|
||||
color: rgb(194, 48, 48);
|
||||
|
||||
&:not(.bp4-disabled)
|
||||
&:hover,
|
||||
&:not(.bp4-disabled) &:hover,
|
||||
&:focus {
|
||||
background: rgba(219, 55, 55, 0.1);
|
||||
}
|
||||
&.bp4-disabled{
|
||||
&.bp4-disabled {
|
||||
color: rgb(194, 48, 48, 0.6);
|
||||
}
|
||||
}
|
||||
&.#{$ns}-minimal.#{$ns}-intent-success{
|
||||
&.#{$ns}-minimal.#{$ns}-intent-success {
|
||||
color: #1c6e42;
|
||||
|
||||
&:hover,
|
||||
@@ -229,14 +238,14 @@ $dashboard-views-bar-height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{$ns}-minimal.#{$ns}-intent-warning{
|
||||
&.#{$ns}-minimal.#{$ns}-intent-warning {
|
||||
color: #cc7e25;
|
||||
}
|
||||
&.#{$ns}-minimal.#{$ns}-intent-primary{
|
||||
&.#{$ns}-minimal.#{$ns}-intent-primary {
|
||||
color: #223fc5;
|
||||
|
||||
|
||||
&:hover,
|
||||
&:focus{
|
||||
&:focus {
|
||||
color: #223fc5;
|
||||
background: rgba(34, 63, 197, 0.08);
|
||||
}
|
||||
@@ -273,7 +282,7 @@ $dashboard-views-bar-height: 44px;
|
||||
.bp4-control.bp4-switch {
|
||||
margin-bottom: 0;
|
||||
margin-left: 8px;
|
||||
color: #3d3b53;
|
||||
color: var(--color-dashboard-navbar-item-text);
|
||||
|
||||
.bp4-control-indicator {
|
||||
height: 16px;
|
||||
@@ -284,11 +293,11 @@ $dashboard-views-bar-height: 44px;
|
||||
box-shadow: 0 0 0;
|
||||
}
|
||||
|
||||
input~.bp4-control-indicator {
|
||||
input ~ .bp4-control-indicator {
|
||||
background: rgba(167, 182, 194, 0.55);
|
||||
}
|
||||
|
||||
input:checked~.bp4-control-indicator {
|
||||
input:checked ~ .bp4-control-indicator {
|
||||
background: #0069ff;
|
||||
}
|
||||
}
|
||||
@@ -308,12 +317,13 @@ $dashboard-views-bar-height: 44px;
|
||||
|
||||
h1 {
|
||||
font-size: 22px;
|
||||
color: #48485c;
|
||||
color: var(--color-dashboard-topbar-title-text);
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h3 {}
|
||||
h3 {
|
||||
}
|
||||
|
||||
.button--view-edit {
|
||||
svg {
|
||||
@@ -335,9 +345,11 @@ $dashboard-views-bar-height: 44px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
&__subtitle {}
|
||||
&__subtitle {
|
||||
}
|
||||
|
||||
&__insider {}
|
||||
&__insider {
|
||||
}
|
||||
|
||||
&__offline-badge {
|
||||
display: flex;
|
||||
@@ -360,7 +372,7 @@ $dashboard-views-bar-height: 44px;
|
||||
height: 100%;
|
||||
min-width: 850px;
|
||||
|
||||
.sidebar--mini-sidebar+& {
|
||||
.sidebar--mini-sidebar + & {
|
||||
margin-left: 50px;
|
||||
width: calc(100% - 50px);
|
||||
}
|
||||
@@ -370,9 +382,9 @@ $dashboard-views-bar-height: 44px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 0 0;
|
||||
background-color: #fbfbfb;
|
||||
background-color: var(--color-dashboard-insider-background);
|
||||
|
||||
>.dashboard__loading-indicator {
|
||||
> .dashboard__loading-indicator {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
@@ -402,10 +414,8 @@ $dashboard-views-bar-height: 44px;
|
||||
|
||||
.bigcapital-datatable {
|
||||
.table {
|
||||
|
||||
.thead,
|
||||
.tbody {
|
||||
|
||||
.th.selection,
|
||||
.td.selection {
|
||||
padding-left: 16px;
|
||||
@@ -435,9 +445,9 @@ $dashboard-views-bar-height: 44px;
|
||||
display: flex;
|
||||
flex: 1 0 0;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
background: var(--color-dashboard-datatable-background);
|
||||
margin: 22px 32px;
|
||||
border: 1px solid #d2dce2;
|
||||
border: 1px solid var(--color-dashboard-datatable-border);
|
||||
|
||||
.bigcapital-datatable {
|
||||
display: flex;
|
||||
@@ -460,7 +470,8 @@ $dashboard-views-bar-height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
&__preferences-topbar {}
|
||||
&__preferences-topbar {
|
||||
}
|
||||
|
||||
&__footer {
|
||||
margin-top: auto;
|
||||
@@ -470,7 +481,7 @@ $dashboard-views-bar-height: 44px;
|
||||
.footer-links {
|
||||
text-align: center;
|
||||
|
||||
>div {
|
||||
> div {
|
||||
font-size: 12px;
|
||||
margin-right: 20px;
|
||||
display: inline;
|
||||
@@ -505,20 +516,18 @@ $dashboard-views-bar-height: 44px;
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
margin: 0px 0 10px;
|
||||
color: #2c3a5d;
|
||||
color: var(--color-dashboard-error-boundary-title-text);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
color: #1f3255;
|
||||
color: var(--color-dashboard-error-boundary-description-text);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.bp4-icon {
|
||||
margin-top: 6px;
|
||||
|
||||
path {
|
||||
fill: #a1afca;
|
||||
fill: var(--color-dashboard-error-boundary-logo);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -602,7 +611,9 @@ $dashboard-views-bar-height: 44px;
|
||||
left: calc(50% - 250px);
|
||||
z-index: 21;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 4px 8px rgba(16, 22, 26, 0.2),
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(16, 22, 26, 0.1),
|
||||
0 4px 8px rgba(16, 22, 26, 0.2),
|
||||
0 18px 46px 6px rgba(16, 22, 26, 0.2);
|
||||
background-color: #fff;
|
||||
width: 600px;
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
font-weight: 600;
|
||||
margin-bottom: 1.4rem;
|
||||
font-size: 18px;
|
||||
color: rgb(31, 50, 85);
|
||||
color: var(--color-report-section-title-text);
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@@ -19,9 +19,9 @@
|
||||
min-height: 140px;
|
||||
margin-bottom: 16px;
|
||||
margin-left: 16px;
|
||||
border: 1px solid #d1dee2;
|
||||
border-top: 3px solid #d1dee2;
|
||||
background: #fff;
|
||||
border: 1px solid var(--color-report-item-border);
|
||||
border-top: 3px solid var(--color-report-item-top-border);
|
||||
background: var(--color-report-item-background);
|
||||
padding: 18px;
|
||||
|
||||
.title {
|
||||
@@ -29,7 +29,7 @@
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: rgb(31, 50, 85);
|
||||
color: var(--color-report-item-text);
|
||||
line-height: 1.55;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 0;
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
// General page
|
||||
//---------------------------------
|
||||
.preferences-page__inside-content--general {
|
||||
|
||||
.bp4-form-group {
|
||||
max-width: 650px;
|
||||
margin-bottom: 24px;
|
||||
@@ -11,7 +10,7 @@
|
||||
.bp4-label {
|
||||
min-width: 190px;
|
||||
font-weight: 600;
|
||||
color: #38414e;
|
||||
// color: #38414e;
|
||||
}
|
||||
|
||||
.bp4-form-content {
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
flex-direction: row;
|
||||
flex: 1 0 0;
|
||||
min-width: auto;
|
||||
background-color: #fbfbfb;
|
||||
background-color: var(--color-preferences-content-background);
|
||||
}
|
||||
.dashboard {
|
||||
&__preferences-content {
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
// Preferences sidebar.
|
||||
// -----------------------------
|
||||
.preferences-sidebar {
|
||||
background: #eaeef6;
|
||||
border-right: 1px solid #c6d0d9;
|
||||
background: var(--color-sidebar-preferences-background);
|
||||
border-right: 1px solid var(--color-sidebar-preferences-border);
|
||||
min-width: 220px;
|
||||
max-width: 220px;
|
||||
height: 100%;
|
||||
@@ -46,11 +46,11 @@
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
padding: 0 22px;
|
||||
border-bottom: 1px solid #bbcbd0;
|
||||
border-bottom: 1px solid var(--color-preferences-sidebar-head-border);
|
||||
|
||||
h2 {
|
||||
font-size: 22px;
|
||||
color: #3b3b4c;
|
||||
color: var(--color-preferences-sidebar-head-text);
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
}
|
||||
@@ -60,16 +60,23 @@
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
|
||||
&.#{$ns}-menu {
|
||||
&,
|
||||
.bp4-dark & {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}-menu-item {
|
||||
padding: 8px 18px;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
color: var(--color-sidebar-preferences-item-text);
|
||||
|
||||
&:hover,
|
||||
&.#{$ns}-active {
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
color: #333;
|
||||
background-color: var(--color-sidebar-preferences-item-hover-background);
|
||||
color: var(--color-sidebar-preferences-item-hover-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
// Preferences topbar.
|
||||
// -----------------------------
|
||||
.preferences-topbar {
|
||||
border-bottom: 1px solid #d2dde2;
|
||||
min-height: 60px;
|
||||
flex: 60px 0 0;
|
||||
padding: 0 0 0 22px;
|
||||
@@ -11,14 +10,15 @@
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
background-color: var(--color-preferences-topbar-background);
|
||||
border-bottom: 1px solid var(--color-preferences-topbar-border);
|
||||
|
||||
&__title {
|
||||
h2 {
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
color: #48485b;
|
||||
color: var(--color-preferences-topbar-title);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -29,14 +29,14 @@
|
||||
.bp4-html-select::after,
|
||||
.form-group--select-list .bp4-button::after{
|
||||
margin-right: 6px;
|
||||
border-top-color: #c5c5c5;
|
||||
// border-top-color: #c5c5c5;
|
||||
}
|
||||
.bp4-html-select,
|
||||
.bp4-input,
|
||||
.form-group--select-list .bp4-button{
|
||||
|
||||
&:not(:focus){
|
||||
border-color: #d3d9de;
|
||||
// border-color: #d3d9de;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user