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-28 12:02:57 +03:00
parent 25df6a9d8f
commit c072ec2e27
10 changed files with 21 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/red-ui/src/app/components/base-screen/base-screen.component.html
View File

@ -22,7 +22,7 @@
[placeholder]="'search.placeholder' | translate"
iqserHelpMode="search_in_entire_application"
></redaction-spotlight-search>
<iqser-help-button [dialogButton]="false"></iqser-help-button>
<iqser-help-button></iqser-help-button>
<redaction-notifications iqserHelpMode="open_notifications"></redaction-notifications>
</div>

2
apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.scss
View File

@ -1,7 +1,7 @@
@use 'common-mixins';
.content-container {
background-color: var(--iqser-grey-2);
background-color: var(--iqser-alt-background);
justify-content: center;
@include common-mixins.scroll-bar;
overflow: auto;

2
apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.scss
View File

@ -1,3 +1,3 @@
a {
color: black;
color: var(--iqser-text);
}

2
apps/red-ui/src/app/modules/admin/screens/entities/screens/info/info.component.scss
View File

@ -18,7 +18,7 @@
padding: 30px;
overflow: auto;
@include common-mixins.scroll-bar;
background-color: var(--iqser-grey-2);
background-color: var(--iqser-alt-background);
justify-content: center;
.dialog {

2
apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.scss
View File

@ -1,7 +1,7 @@
@use 'common-mixins';
.content-container {
background-color: var(--iqser-grey-2);
background-color: var(--iqser-alt-background);
display: flex;
flex-direction: column;
align-items: center;

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

@ -1,6 +1,6 @@
:host {
align-items: center;
background-color: var(--iqser-grey-2);
background-color: var(--iqser-alt-background);
.container {
padding: 32px;

2
apps/red-ui/src/app/modules/shared/components/donut-chart/donut-chart.component.scss
View File

@ -62,7 +62,7 @@
}
&:hover:not(.active):not(.filter-disabled) {
background-color: var(--iqser-grey-6);
background-color: var(--iqser-btn-bg);
}
&.active {

2
apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.scss
View File

@ -6,7 +6,7 @@
position: fixed;
bottom: 20px;
right: 20px;
box-shadow: 0 3px 12px 5px rgba(40, 50, 65, 0.14);
box-shadow: 0 3px 12px 5px rgba(var(--iqser-accent-rgb), 0.14);
border-radius: 8px;
overflow: hidden;
width: 400px;

5
apps/red-ui/src/assets/styles/red-editor.scss
View File

@ -1,4 +1,5 @@
@use 'variables';
@use 'common-mixins';
.monaco-diff-editor {
.editor.original {
@ -60,9 +61,9 @@
right: 40px;
border-radius: 8px;
padding: 16px 32px 16px 16px;
background-color: var(--iqser-white);
box-shadow: 0 2px 6px 0 rgba(40, 50, 65, 0.3);
background-color: var(--iqser-background);
z-index: 5000;
@include common-mixins.drop-shadow;
> *:not(:last-child) {
margin-right: 24px;

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

@ -11,6 +11,7 @@
$iqser-accent: vars.$accent,
$iqser-accent-rgb: common-functions.hexToRgb(vars.$accent),
$iqser-background: vars.$white,
$iqser-alt-background: vars.$grey-2,
$iqser-text: vars.$accent,
$iqser-text-rgb: common-functions.hexToRgb(vars.$accent),
$iqser-disabled: vars.$grey-7,
@ -31,7 +32,9 @@
$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-border: vars.$grey-5,
$iqser-popup-background: vars.$white,
$iqser-shadow: vars.$grey-4
);
@include common-variables.configureDark(
@ -41,12 +44,13 @@
$iqser-accent: vars.$accent,
$iqser-accent-rgb: common-functions.hexToRgb(vars.$accent),
$iqser-background: darken(vars.$accent, 10%),
$iqser-alt-background: darken(vars.$accent, 5%),
$iqser-text: vars.$white,
$iqser-text-rgb: common-functions.hexToRgb(vars.$white),
$iqser-disabled: vars.$grey-7,
$iqser-not-disabled-table-item: darken(vars.$accent, 5%),
$iqser-btn-bg-hover: darken(vars.$accent, 5%),
$iqser-btn-bg: darken(vars.$accent, 5%),
$iqser-btn-bg-hover: vars.$accent,
$iqser-btn-bg: darken(vars.$accent, 8%),
$iqser-side-nav: darken(vars.$accent, 8%),
$iqser-warn: vars.$warn,
$iqser-separator: vars.$accent,
@ -61,5 +65,7 @@
$iqser-yellow-1: vars.$yellow-1,
$iqser-yellow-2: vars.$yellow-2,
$iqser-helpmode-primary: vars.$green-2,
$iqser-inputs-border: lighten(vars.$accent, 10%)
$iqser-inputs-border: lighten(vars.$accent, 10%),
$iqser-popup-background: darken(vars.$accent, 5%),
$iqser-shadow: #00000060
);