Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

RED-4397: Dark theme WIP

Browse Source
This commit is contained in:
Adina Țeudan 2022-06-29 03:20:11 +03:00
parent e25b59fca7
commit e53a54c0d2
12 changed files with 40 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.scss
View File

@ -29,7 +29,7 @@
padding: 3px 8px;
&:hover {
background-color: var(--iqser-grey-6);
background-color: var(--iqser-tab-hover);
}
&.active {

2
apps/red-ui/src/app/modules/file-preview/components/annotation-details/annotation-details.component.scss
View File

@ -28,7 +28,7 @@
height: 24px;
&:hover {
background-color: var(--iqser-grey-6);
background-color: var(--iqser-tab-hover);
border-radius: 12px;
mat-icon {

4
apps/red-ui/src/app/modules/file-preview/components/annotation-wrapper/annotation-wrapper.component.scss
View File

@ -52,7 +52,7 @@
}
&:hover {
background-color: var(--iqser-grey-4);
background-color: var(--iqser-annotation-comments-hover);
}
}
}
@ -60,7 +60,7 @@
&:hover,
&.help-mode {
background-color: var(--iqser-grey-8);
background-color: var(--iqser-annotation-hover);
::ng-deep .annotation-actions {
display: flex;

4
apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.scss
View File

@ -78,7 +78,7 @@
outline: none;
&.active-panel {
background-color: #fafafa;
background-color: var(--iqser-workload-pages-bg);
}
}
@ -98,7 +98,7 @@
transition: background-color 0.25s;
&:not(.disabled):hover {
background-color: var(--iqser-grey-6);
background-color: var(--iqser-tab-hover);
}
mat-icon {

8
apps/red-ui/src/app/modules/file-preview/components/page-indicator/page-indicator.component.scss
View File

@ -1,12 +1,12 @@
.page-wrapper {
color: var(--iqser-accent);
color: var(--iqser-text);
position: relative;
padding: 12px 14px 12px 8px;
cursor: pointer;
border-left: 4px solid transparent;
&:hover {
background-color: var(--iqser-grey-2);
background-color: var(--iqser-alt-background);
}
&.active {
@ -33,10 +33,10 @@
}
&.read {
color: var(--iqser-grey-5);
color: var(--iqser-inputs-outline);
.text {
color: var(--iqser-accent);
color: var(--iqser-text);
}
}

2
apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss
View File

@ -1,7 +1,7 @@
.vertical-line {
width: 1px;
height: 30px;
background-color: var(--iqser-grey-4);
background-color: var(--iqser-separator);
margin: 0 16px;
}

5
apps/red-ui/src/app/modules/pdf-viewer/components/paginator/paginator.component.scss
View File

@ -4,7 +4,7 @@
bottom: 20px;
left: calc(50% - (var(--workload-width) / 2));
transform: translate(-50%);
background: var(--iqser-white);
background: var(--iqser-background);
color: var(--iqser-grey-7);
border: 1px solid var(--iqser-grey-7);
border-radius: 8px;
@ -32,6 +32,7 @@
margin: 0;
}
background-color: var(--iqser-background);
color: var(--iqser-grey-7);
text-decoration: none;
outline: none;
@ -55,7 +56,7 @@
padding-right: 4px;
&:hover {
color: var(--iqser-accent);
color: var(--iqser-text);
}
}
}

10
apps/red-ui/src/assets/icons/general/reference.svg
View File

@ -1,10 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Styleguide" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Styleguide-Actions" transform="translate(-979.000000, -588.000000)" fill="#283241" fill-rule="nonzero">
<svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px" xmlns="http://www.w3.org/2000/svg"
>
<g fill="none" fill-rule="evenodd" id="Styleguide" stroke="none" stroke-width="1">
<g fill="currentColor" fill-rule="nonzero" id="Styleguide-Actions" transform="translate(-979.000000, -588.000000)">
<g id="reference" transform="translate(969.000000, 578.000000)">
<g id="status" transform="translate(10.000000, 10.000000)">
<polygon id="Path" points="14 6.3 8.68 6.3 12.46 2.52 11.48 1.54 7.7 5.32 7.7 0 6.3 0 6.3 5.32 2.52 1.54 1.54 2.52 5.32 6.3 0 6.3 0 7.7 5.32 7.7 1.54 11.48 2.52 12.46 6.3 8.68 6.3 14 7.7 14 7.7 8.68 11.48 12.46 12.46 11.48 8.68 7.7 14 7.7"></polygon>
<polygon id="Path"
points="14 6.3 8.68 6.3 12.46 2.52 11.48 1.54 7.7 5.32 7.7 0 6.3 0 6.3 5.32 2.52 1.54 1.54 2.52 5.32 6.3 0 6.3 0 7.7 5.32 7.7 1.54 11.48 2.52 12.46 6.3 8.68 6.3 14 7.7 14 7.7 8.68 11.48 12.46 12.46 11.48 8.68 7.7 14 7.7"></polygon>
</g>
</g>
</g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 881 B

After

Width:  |  Height:  |  Size: 873 B

5
apps/red-ui/src/assets/pdftron/stylesheet.css
View File

@ -37,3 +37,8 @@
.excluded-page {
border: 2px solid #dd4d5080;
}
.AnnotationPopup {
--component-background: white;
--popup-button-hover: #e7edf3;
}

2
apps/red-ui/src/assets/styles/_variables.scss
View File

@ -31,5 +31,3 @@ $accent: $grey-1;
$warn: $yellow-2;
$light: $white;
$dark: $black;
$separator: rgba(226, 228, 233, 0.9);

2
apps/red-ui/src/assets/styles/red-components.scss
View File

@ -88,7 +88,7 @@
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--iqser-grey-6);
background-color: var(--iqser-btn-bg);
> div {
display: flex;

20
apps/red-ui/src/styles.scss
View File

@ -20,7 +20,7 @@
$iqser-btn-bg: vars.$grey-6,
$iqser-side-nav: vars.$grey-2,
$iqser-warn: vars.$warn,
$iqser-separator: vars.$separator,
$iqser-separator: rgba(vars.$grey-4, 0.9),
$iqser-grey-2: vars.$grey-2,
$iqser-grey-3: vars.$grey-3,
$iqser-grey-4: vars.$grey-4,
@ -32,13 +32,17 @@
$iqser-yellow-1: vars.$yellow-1,
$iqser-yellow-2: vars.$yellow-2,
$iqser-helpmode-primary: vars.$green-2,
$iqser-inputs-border: vars.$grey-5,
$iqser-inputs-outline: vars.$grey-5,
$iqser-popup-background: vars.$white,
$iqser-shadow: vars.$grey-4,
$iqser-toggle-bg: vars.$grey-4,
$iqser-file-drop-drag-over: #e2eefd,
$iqser-user-avatar-1: vars.$grey-6,
$iqser-user-avatar-2: vars.$grey-4
$iqser-user-avatar-2: vars.$grey-4,
$iqser-annotation-hover: vars.$grey-8,
$iqser-annotation-comments-hover: vars.$grey-4,
$iqser-workload-pages-bg: vars.$grey-8,
$iqser-tab-hover: vars.$grey-6
);
$light-accent-5: lighten(vars.$accent, 5%);
@ -61,7 +65,7 @@ $dark-accent-10: darken(vars.$accent, 10%);
$iqser-disabled: vars.$grey-7,
$iqser-not-disabled-table-item: $dark-accent-5,
$iqser-btn-bg-hover: vars.$accent,
$iqser-btn-bg: $dark-accent-8,
$iqser-btn-bg: $dark-accent-5,
$iqser-side-nav: $dark-accent-8,
$iqser-warn: vars.$warn,
$iqser-separator: vars.$accent,
@ -76,11 +80,15 @@ $dark-accent-10: darken(vars.$accent, 10%);
$iqser-yellow-1: vars.$yellow-1,
$iqser-yellow-2: vars.$yellow-2,
$iqser-helpmode-primary: vars.$green-2,
$iqser-inputs-border: $light-accent-10,
$iqser-inputs-outline: $light-accent-10,
$iqser-popup-background: $dark-accent-5,
$iqser-shadow: rgba(0, 0, 0, 0.4),
$iqser-toggle-bg: $light-accent-5,
$iqser-file-drop-drag-over: $light-accent-10,
$iqser-user-avatar-1: $light-accent-5,
$iqser-user-avatar-2: $light-accent-10
$iqser-user-avatar-2: $light-accent-10,
$iqser-annotation-hover: $dark-accent-5,
$iqser-annotation-comments-hover: $light-accent-5,
$iqser-workload-pages-bg: $dark-accent-8,
$iqser-tab-hover: vars.$accent
);