mirror of
https://github.com/paperless-ngx/paperless-ngx.git
synced 2025-04-02 13:45:10 -05:00
Theme tweaks
See https://github.com/jonaswinkler/paperless-ng/issues/194
This commit is contained in:
parent
ebcf4e2d81
commit
1297c0911c
@ -1,6 +1,6 @@
|
||||
<div class="col p-2 h-100">
|
||||
<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)">
|
||||
|
||||
<div class="border-right border-bottom bg-light p-1 rounded document-card-check">
|
||||
|
@ -1,3 +1,5 @@
|
||||
$primary-dark-mode: #346e2c;
|
||||
$danger-dark-mode: #9c142a;
|
||||
$bg-dark-mode: #161618;
|
||||
$bg-light-dark-mode: #1c1c1f;
|
||||
$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;
|
||||
}
|
||||
|
||||
@mixin dark-mode {
|
||||
background-color: $bg-dark-mode !important;
|
||||
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 {
|
||||
opacity: 0.8;
|
||||
color: $bg-dark-mode !important;
|
||||
filter: brightness(.8);
|
||||
}
|
||||
|
||||
.badge-light {
|
||||
@ -84,17 +91,19 @@ $border-color-dark-mode: #47494f;
|
||||
color: $text-color-dark-mode-accent;
|
||||
}
|
||||
|
||||
.doc-img-container {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.doc-img {
|
||||
background-color: lighten($bg-light-dark-mode, 30%);
|
||||
mix-blend-mode: soft-light;
|
||||
mix-blend-mode: normal;
|
||||
filter: invert(95%) hue-rotate(180deg);
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.doc-img-background {
|
||||
background-color: lighten($bg-light-dark-mode, 30%);
|
||||
}
|
||||
|
||||
.doc-img-background-selected {
|
||||
background-color: lighten($bg-light-dark-mode, 35%);
|
||||
.card-selected .doc-img {
|
||||
mix-blend-mode: luminosity;
|
||||
}
|
||||
|
||||
.toast {
|
||||
@ -128,20 +137,39 @@ $border-color-dark-mode: #47494f;
|
||||
text-shadow: 0 1px 0 #666;
|
||||
}
|
||||
|
||||
.btn-outline-primary:hover {
|
||||
background-color: darken($primary, 10%);
|
||||
color: $text-color-dark-mode-accent;
|
||||
.btn-outline-primary{
|
||||
border-color: $primary-dark-mode;
|
||||
color: $primary-dark-mode;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($primary-dark-mode, 10%);
|
||||
color: $text-color-dark-mode-accent;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
border-color: $border-color-dark-mode;
|
||||
color: $border-color-dark-mode;
|
||||
border-color: $text-color-dark-mode;
|
||||
color: $text-color-dark-mode;
|
||||
|
||||
&:hover {
|
||||
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-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;
|
||||
}
|
||||
|
||||
button.bg-light:hover {
|
||||
background-color: $bg-dark-mode !important;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
input,
|
||||
select,
|
||||
|
Loading…
x
Reference in New Issue
Block a user