QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-18 22:00:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

wip darkmode

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2025-08-04 12:25:27 +02:00
parent 456a9e1ad9
commit d9a716a46f
170 changed files with 2006 additions and 1018 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
packages/webapp/src/style/pages/Dashboard/Dashboard.scss
View File

@@ -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;

10
packages/webapp/src/style/pages/FinancialStatements/FinancialSheets.scss
View File

@@ -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
packages/webapp/src/style/pages/Preferences/GeneralForm.scss
View File

@@ -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 {

2
packages/webapp/src/style/pages/Preferences/Page.scss
View File

@@ -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 {

21
packages/webapp/src/style/pages/Preferences/Sidebar.scss
View File

@@ -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);
}
}
}

6
packages/webapp/src/style/pages/Preferences/Topbar.scss
View File

@@ -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);
}
}