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

Theme tweaks

Browse Source 
See https://github.com/jonaswinkler/paperless-ng/issues/194
This commit is contained in:
Michael Shamoon
2020-12-28 12:56:00 -08:00
parent 40c0a4c0d4
commit 23b116d41f
2 changed files with 48 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
View File

@@ -1,6 +1,6 @@
<div class="col p-2 h-100"> <div class="col p-2 h-100">
<div class="card h-100 shadow-sm" [class.card-selected]="selected"> <div class="card h-100 shadow-sm" [class.card-selected]="selected">
<div class="border-bottom" [class.doc-img-background-selected]="selected"> <div class="border-bottom doc-img-container" [class.doc-img-background-selected]="selected">
<img class="card-img doc-img" [src]="getThumbUrl()" (click)="setSelected(!selected)"> <img class="card-img doc-img" [src]="getThumbUrl()" (click)="setSelected(!selected)">
<div class="border-right border-bottom bg-light p-1 rounded document-card-check"> <div class="border-right border-bottom bg-light p-1 rounded document-card-check">

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

@@ -1,3 +1,5 @@
$primary-dark-mode: #346e2c;
$danger-dark-mode: #9c142a;
$bg-dark-mode: #161618; $bg-dark-mode: #161618;
$bg-light-dark-mode: #1c1c1f; $bg-light-dark-mode: #1c1c1f;
$text-color-dark-mode: #abb2bf; $text-color-dark-mode: #abb2bf;
@@ -7,6 +9,7 @@ $border-color-dark-mode: #47494f;
* { * {
transition: background-color 0.3s ease, border-color 0.3s ease; transition: background-color 0.3s ease, border-color 0.3s ease;
} }
@mixin dark-mode { @mixin dark-mode {
background-color: $bg-dark-mode !important; background-color: $bg-dark-mode !important;
color: $text-color-dark-mode; color: $text-color-dark-mode;
@@ -74,9 +77,13 @@ $border-color-dark-mode: #47494f;
} }
} }
.modal-content, .modal-header, .modal-body, .modal-footer {
background-color: $bg-light-dark-mode;
border-color: $border-color-dark-mode;
}
app-tag .badge { app-tag .badge {
opacity: 0.8; filter: brightness(.8);
color: $bg-dark-mode !important;
} }
.badge-light { .badge-light {
@@ -84,17 +91,19 @@ $border-color-dark-mode: #47494f;
color: $text-color-dark-mode-accent; color: $text-color-dark-mode-accent;
} }
.doc-img-container {
border: none !important;
}
.doc-img { .doc-img {
background-color: lighten($bg-light-dark-mode, 30%); mix-blend-mode: normal;
mix-blend-mode: soft-light; filter: invert(95%) hue-rotate(180deg);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
} }
.doc-img-background { .card-selected .doc-img {
background-color: lighten($bg-light-dark-mode, 30%); mix-blend-mode: luminosity;
}
.doc-img-background-selected {
background-color: lighten($bg-light-dark-mode, 35%);
} }
.toast { .toast {
@@ -128,20 +137,39 @@ $border-color-dark-mode: #47494f;
text-shadow: 0 1px 0 #666; text-shadow: 0 1px 0 #666;
} }
.btn-outline-primary:hover { .btn-outline-primary{
background-color: darken($primary, 10%); border-color: $primary-dark-mode;
color: $text-color-dark-mode-accent; color: $primary-dark-mode;
&:hover {
background-color: darken($primary-dark-mode, 10%);
color: $text-color-dark-mode-accent;
}
} }
.btn-outline-secondary { .btn-outline-secondary {
border-color: $border-color-dark-mode; border-color: $text-color-dark-mode;
color: $border-color-dark-mode; color: $text-color-dark-mode;
&:hover { &:hover {
background-color: $bg-dark-mode; background-color: $bg-dark-mode;
} }
} }
.btn-outline-danger {
border-color: $danger-dark-mode;
color: $danger-dark-mode;
&:hover {
background-color: darken($danger-dark-mode, 10%);
color: $text-color-dark-mode-accent;
}
}
.btn-link:not(:disabled):not(.disabled) {
color: $primary-dark-mode;
}
.btn-link:hover, .btn-link:hover,
.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled):active,
@@ -149,6 +177,10 @@ $border-color-dark-mode: #47494f;
color: $text-color-dark-mode-accent; color: $text-color-dark-mode-accent;
} }
button.bg-light:hover {
background-color: $bg-dark-mode !important;
}
.form-control, .form-control,
input, input,
select, select,