mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-18 22:00:31 +00:00
wip darkmode
This commit is contained in:
Ahmed Bouhuolia
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user