mirrors
/
AdGuardHome
mirror of https://github.com/AdguardTeam/AdGuardHome.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix dark theme bugs 

Updates #5433.
Updates #5439.
Updates #5441.
Updates #5442.

Squashed commit of the following:

commit 8a250106c73dfdde503f9bcb3fa8f43e6a6cb855
Merge: a336858f 3a0b27e7
Author: Arseny Lisin <a.lisin@adguard.com>
Date:   Wed Feb 22 13:04:58 2023 +0200

    Merge branch 'master' into 5433-dark-theme-bugs

commit a336858fcd9db6361a2ba716317e3d80b2536c62
Author: Arseny Lisin <a.lisin@adguard.com>
Date:   Wed Feb 22 11:08:29 2023 +0200

    Review fix

commit 42606014394d10651aef8e9219474e9ee5307c10
Author: Arseny Lisin <a.lisin@adguard.com>
Date:   Tue Feb 21 15:47:41 2023 +0200

    Fix checkbox, dots bg color in dark mode

commit ea5602f5d825e60bca39ea2afc5f37a24de6db43
Author: Arseny Lisin <a.lisin@adguard.com>
Date:   Tue Feb 21 13:59:12 2023 +0200

    Fix dark theme bugs
This commit is contained in:
Arseny Lisin 2023-02-22 14:12:53 +03:00
parent 3a0b27e7e8
commit 304f2ba2cc
4 changed files with 26 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
client/src/components/App/index.css
View File

@ -30,6 +30,11 @@
--loading-bg: rgba(255, 255, 255, 0.48); --loading-bg: rgba(255, 255, 255, 0.48);
--font-family-monospace: Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace; --font-family-monospace: Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;
--font-size-disable-autozoom: 1rem; --font-size-disable-autozoom: 1rem;
--alert-message-color: #24426c;
--alert-message-border: #cbdbf2;
--alert-message-bg: #dae5f5;
--checkbox-bg: #e2e2e2;
--radio-bg: #ffffff;
} }
[data-theme="dark"] { [data-theme="dark"] {
@ -59,6 +64,11 @@
--detailed-info-color: #fff; --detailed-info-color: #fff;
--gray300: #f3f3f3; --gray300: #f3f3f3;
--loading-bg: #131313; --loading-bg: #131313;
--alert-message-color: #e6e6e6;
--alert-message-border: #363648;
--alert-message-bg: #363648;
--checkbox-bg: #a4a4a4;
--radio-bg: #a4a4a4;
} }
body { body {

8
client/src/components/Logs/Logs.css
View File

@ -130,6 +130,10 @@
background-color: transparent !important; background-color: transparent !important;
} }
[data-theme="dark"] .form-control--transparent option {
background-color: var(--card-bgcolor);
}
.input-group-search { .input-group-search {
background-color: transparent; background-color: transparent;
position: relative; position: relative;
@ -400,6 +404,10 @@
background-color: var(--logs__row--blue-bgcolor); background-color: var(--logs__row--blue-bgcolor);
} }
[data-theme="dark"] .logs__row--blue .logs__text--link {
color: var(--white);
}
.logs__row--green { .logs__row--green {
background-color: var(--green-pale); background-color: var(--green-pale);
} }

2
client/src/components/ui/Checkbox.css
View File

@ -48,7 +48,7 @@
height: 20px; height: 20px;
min-width: 20px; min-width: 20px;
margin-right: 10px; margin-right: 10px;
background-color: #e2e2e2; background-color: var(--checkbox-bg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
background-size: 12px 10px; background-size: 12px 10px;

14
client/src/components/ui/Tabler.css
View File

@ -5047,9 +5047,9 @@ tbody.collapse.show {
} }
.alert-primary { .alert-primary {
color: #24426c; color: var(--alert-message-color);
background-color: #dae5f5; background-color: var(--alert-message-bg);
border-color: #cbdbf2; border-color: var(--alert-message-border);
} }
.alert-primary hr { .alert-primary hr {
@ -5089,9 +5089,9 @@ tbody.collapse.show {
} }
.alert-info { .alert-info {
color: #24587e; color: var(--alert-message-color);
background-color: #daeefc; background-color: var(--alert-message-bg);
border-color: #cbe7fb; border-color: var(--alert-message-border);
} }
.alert-info hr { .alert-info hr {
@ -14317,7 +14317,7 @@ textarea[cols] {
.custom-control-label:before { .custom-control-label:before {
border: 1px solid rgba(0, 40, 100, 0.12); border: 1px solid rgba(0, 40, 100, 0.12);
background-color: #fff; background-color: var(--radio-bg);
background-size: 0.5rem; background-size: 0.5rem;
} }