paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-04-25 10:49:30 -05:00
Code Issues Packages Projects Releases Wiki Activity

Many small fixes to theme & inline logo

Browse Source
This commit is contained in:
Michael Shamoon 2020-12-28 16:46:08 -08:00
parent e6164eb1ab
commit edb9264d78
3 changed files with 87 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src-ui/src/app/components/dashboard/dashboard.component.html
View File

File diff suppressed because one or more lines are too long

96
src-ui/src/assets/logo-dark.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 8.8 KiB

95
src-ui/src/theme_dark.scss
View File

@ -18,34 +18,65 @@ $border-color-dark-mode: #47494f;
color: $text-color-dark-mode;
}
svg.logo {
.leaf {
color: $primary-dark-mode !important;
}
.text {
fill: $text-color-dark-mode !important;
}
}
.bg-light {
background-color: $bg-light-dark-mode !important;
a,
div {
color: $text-color-dark-mode !important;
color: $text-color-dark-mode;
}
}
.border,
.border-bottom,
.border-left,
.border-right {
.border {
border-color: $border-color-dark-mode !important;
}
.nav-link.active {
background-color: $bg-dark-mode;
color: $text-color-dark-mode;
border-color: $border-color-dark-mode $border-color-dark-mode $bg-dark-mode;
.border-right {
border-right: 1px solid $border-color-dark-mode !important;
}
.nav-link:hover {
border-color: $border-color-dark-mode $border-color-dark-mode $bg-dark-mode;
.border-left {
border-left: 1px solid $border-color-dark-mode !important;
}
.border-bottom {
border-bottom: 1px solid $border-color-dark-mode !important;
}
.nav-link {
color: $text-color-dark-mode !important;
&.active {
background-color: $bg-dark-mode;
color: $text-color-dark-mode;
border-color: $border-color-dark-mode $border-color-dark-mode $bg-dark-mode;
}
&:hover {
color: $text-color-dark-mode-accent !important;
border-color: $border-color-dark-mode $border-color-dark-mode $bg-dark-mode;
}
}
.nav-tabs {
border-color: $border-color-dark-mode;
.nav-link {
color: $primary-dark-mode !important;
&.active {
color: $text-color-dark-mode !important;
}
}
}
.dropdown-menu {
@ -77,6 +108,10 @@ $border-color-dark-mode: #47494f;
}
}
.text-dark {
color: $text-color-dark-mode !important;
}
.modal-content, .modal-header, .modal-body, .modal-footer {
background-color: $bg-light-dark-mode;
border-color: $border-color-dark-mode;
@ -93,15 +128,20 @@ $border-color-dark-mode: #47494f;
.doc-img-container {
border: none !important;
border-radius: .25rem;
border-top-left-radius: .25rem;
border-top-right-radius: .25rem;
overflow: hidden;
}
.doc-img {
mix-blend-mode: normal;
filter: invert(95%) hue-rotate(180deg);
border-color: $border-color-dark-mode;
border-radius: 0;
border-color: $bg-dark-mode;
&.border-right {
border-right: none !important;
}
}
.card-selected .doc-img {
@ -116,14 +156,23 @@ $border-color-dark-mode: #47494f;
background-color: opacify($bg-dark-mode, .85);
}
a:hover {
color: lighten($primary, 10%);
a {
color: $primary-dark-mode;
&:hover {
color: lighten($primary, 10%);
}
}
table {
background-color: $bg-dark-mode;
background-color: $bg-light-dark-mode;
color: $text-color-dark-mode;
border-color: $border-color-dark-mode;
tr:hover {
background-color: $bg-light-dark-mode;
color: $text-color-dark-mode-accent;
}
}
.table td,
@ -136,6 +185,7 @@ $border-color-dark-mode: #47494f;
}
.close {
color: $text-color-dark-mode;
text-shadow: 0 1px 0 #666;
}
@ -168,6 +218,15 @@ $border-color-dark-mode: #47494f;
}
}
.btn-outline-dark {
border-color: $border-color-dark-mode;
color: $text-color-dark-mode;
&:hover {
color: $text-color-dark-mode-accent;
}
}
.btn-link:not(:disabled):not(.disabled) {
color: $primary-dark-mode;
}
@ -254,6 +313,10 @@ $border-color-dark-mode: #47494f;
border-color: $border-color-dark-mode;
color: $text-color-dark-mode-accent;
}
.progress {
background-color: $border-color-dark-mode;
}
}
body.dark-mode {