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

Merge pull request #745 from paperless-ngx/1.7.0-rc1-css-fixes-1

Browse Source 
Beta 1.7.0 rc1 CSS Fixes #1
This commit is contained in:
shamoon 2022-04-18 12:02:14 -07:00 committed by GitHub
commit 09d62d76b2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 29 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src-ui/src/app/components/manage/settings/settings.component.html
View File

@ -7,7 +7,7 @@
<ul ngbNav #nav="ngbNav" class="nav-tabs"> <ul ngbNav #nav="ngbNav" class="nav-tabs">
<li [ngbNavItem]="1"> <li [ngbNavItem]="1">
<a ngbNavLink i18n>General settings</a> <a ngbNavLink i18n>General</a>
<ng-template ngbNavContent> <ng-template ngbNavContent>
<h4 i18n>Appearance</h4> <h4 i18n>Appearance</h4>
@ -104,7 +104,7 @@
<div class="col-md-3 col-form-label"> <div class="col-md-3 col-form-label">
<span i18n>Theme Color</span> <span i18n>Theme Color</span>
</div> </div>
<div class="col-3"> <div class="col col-md-3">
<app-input-color i18n-title formControlName="themeColor" [error]="error?.color"></app-input-color> <app-input-color i18n-title formControlName="themeColor" [error]="error?.color"></app-input-color>
</div> </div>
<div class="col-2"> <div class="col-2">

6
src-ui/src/styles.scss
View File

@ -442,10 +442,8 @@ table.table {
border-color: var(--bs-danger); border-color: var(--bs-danger);
} }
.alert-secondary { .progress {
background-color: var(--pngx-primary-darken-18); background-color: var(--bs-body-bg);
border-color: var(--pngx-primary-darken-15);
color: var(--bs-body-color);
} }
.ngb-dp-header, .ngb-dp-header,

49
src-ui/src/theme.scss
View File

@ -15,6 +15,7 @@ body {
--pngx-primary-darken-5: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 5%)); --pngx-primary-darken-5: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 5%));
--pngx-primary-darken-15: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 15%)); --pngx-primary-darken-15: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 15%));
--pngx-primary-darken-18: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 18%)); --pngx-primary-darken-18: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 18%));
--pngx-bg-alt: #fff;
--pngx-bg-darker: var(--bs-gray-100); --pngx-bg-darker: var(--bs-gray-100);
--pngx-focus-alpha: 0.3; --pngx-focus-alpha: 0.3;
} }
@ -24,8 +25,8 @@ $text-color-light-bg: #212529;
$text-color-dark-bg: #abb2bf; $text-color-dark-bg: #abb2bf;
$text-color-dark-bg-accent: lighten($text-color-dark-bg, 10%); $text-color-dark-bg-accent: lighten($text-color-dark-bg, 10%);
// Taken from bootstrap // Taken from bootstrap
$form-check-input-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#212529' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>"); $form-check-input-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$text-color-light-bg}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>");
$form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#212529'/></svg>"); $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$text-color-light-bg}'/></svg>");
.primary-light { .primary-light {
--pngx-primary-text-contrast: #{$text-color-light-bg} !important; --pngx-primary-text-contrast: #{$text-color-light-bg} !important;
@ -37,6 +38,10 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='htt
.form-check-input:checked[type=radio] { .form-check-input:checked[type=radio] {
background-image: escape-svg($form-check-radio-checked-bg-image-dark); background-image: escape-svg($form-check-radio-checked-bg-image-dark);
} }
.btn-close {
filter: none !important;
}
} }
.primary-dark { .primary-dark {
@ -48,28 +53,18 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='htt
--pngx-primary-lightness: 31%; --pngx-primary-lightness: 31%;
} }
$danger-dark-mode: #b71631;
$danger-dark-mode-rgb: 183, 22, 49;
$bg-dark-mode: #161618;
$bg-dark-mode-rgb: 22, 22, 24;
$bg-dark-mode-accent: #101216;
$bg-dark-mode-alt: #242529;
$bg-light-dark-mode: #1c1c1f;
$bg-light-dark-mode-rgb: 28, 28, 31;
$border-color-dark-mode: #47494f;
@mixin dark-mode { @mixin dark-mode {
--bs-body-color: #{$text-color-dark-bg}; --bs-body-color: #{$text-color-dark-bg};
--pngx-body-color-accent: #{$text-color-dark-bg-accent}; --pngx-body-color-accent: #{$text-color-dark-bg-accent};
--bs-danger: #{$danger-dark-mode}; --bs-danger: #b71631;
--bs-danger-rgb: #{$danger-dark-mode-rgb}; --bs-danger-rgb: 183, 22, 49;
--bs-body-bg: #{$bg-dark-mode}; --bs-body-bg: #161618;
--bs-body-bg-rgb: #{$bg-dark-mode-rgb}; --bs-body-bg-rgb: 22, 22, 24;
--bs-light: #{$bg-light-dark-mode}; --bs-light: #1c1c1f;
--bs-light-rgb: #{$bg-light-dark-mode-rgb}; --bs-light-rgb: 28, 28, 31;
--bs-border-color: #{$border-color-dark-mode}; --bs-border-color: #47494f;
--pngx-bg-darker: #{$bg-dark-mode-accent}; --pngx-bg-darker: #101216;
--pngx-bg-alt: #{$bg-dark-mode-alt}; --pngx-bg-alt: #242529;
--pngx-focus-alpha: 0.6; --pngx-focus-alpha: 0.6;
--pngx-primary-faded: var(--pngx-primary-darken-15); --pngx-primary-faded: var(--pngx-primary-darken-15);
--pngx-primary-text-contrast: var(--bs-body-color); --pngx-primary-text-contrast: var(--bs-body-color);
@ -145,7 +140,7 @@ $border-color-dark-mode: #47494f;
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option:hover, .ng-dropdown-panel .ng-dropdown-panel-items .ng-option:hover,
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked { .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
background-color: $bg-light-dark-mode; background-color: var(--bs-light);
} }
table { table {
@ -157,12 +152,18 @@ $border-color-dark-mode: #47494f;
} }
&.table-hover > tbody > tr:hover > * { &.table-hover > tbody > tr:hover > * {
background-color: $bg-light-dark-mode; background-color: var(--bs-light);
color: var(--pngx-body-color-accent); color: var(--pngx-body-color-accent);
} }
} }
.alert-secondary {
background-color: var(--bs-light);
border-color: var(--pngx-bg-darker);
color: var(--bs-body-color);
}
.table-striped > tbody > tr:nth-of-type(odd) > * { .table-striped > tbody > tr:nth-of-type(odd) > * {
color: var(--pngx-body-color-accent); color: var(--pngx-body-color-accent);
} }
@ -171,7 +172,7 @@ $border-color-dark-mode: #47494f;
text-shadow: 0 1px 0 #666; text-shadow: 0 1px 0 #666;
} }
.modal .btn-close, .alert .btn-close { .modal .btn-close, .alert .btn-close, .toast .btn-close {
filter: invert(1) grayscale(100%) brightness(200%); filter: invert(1) grayscale(100%) brightness(200%);
} }