mirror of
https://github.com/AdguardTeam/AdGuardHome.git
synced 2024-12-14 18:51:34 +03:00
Fix dark theme bugs
Updates #5375 Squashed commit of the following: commit 40666b010697381e11b3a36d9c2ed1c1507f27ed Author: Arseny Lisin <a.lisin@adguard.com> Date: Tue Jan 31 18:34:06 2023 +0200 Review fix commit 44f3d6095bc9b426e8142f8c9d915a1441f3d791 Author: Arseny Lisin <a.lisin@adguard.com> Date: Tue Jan 31 17:02:38 2023 +0200 Clear commit 44274ba54c9ff2bd2caf5fa69bf06c587f8858e5 Author: Arseny Lisin <a.lisin@adguard.com> Date: Tue Jan 31 13:25:01 2023 +0200 Clear commit 8b48c523cbbe3f73160331a9c516388c7965a7a2 Author: Arseny Lisin <a.lisin@adguard.com> Date: Tue Jan 31 12:14:37 2023 +0200 Review fix commit 3b8cd94cdd8d3fc90cdc27053964489414055cc9 Author: Arseny Lisin <a.lisin@adguard.com> Date: Mon Jan 30 16:13:15 2023 +0200 Fix query log popup bg commit 14d4c87164200f7c918bac02c9cc5f1cffb83932 Author: Arseny Lisin <a.lisin@adguard.com> Date: Mon Jan 30 15:03:06 2023 +0200 revert icons commit 98b042726e1510f85c9cf5a4caba2d56885f120b Author: Arseny Lisin <a.lisin@adguard.com> Date: Mon Jan 30 14:45:35 2023 +0200 Fix dark theme bugs
This commit is contained in:
Arseny Lisin
parent
d52f1d0e70
commit
46382e8825
@ -1,4 +1,5 @@
|
||||
:root {
|
||||
--black: #131313;
|
||||
--bgcolor: #f5f7fb;
|
||||
--mcolor: #495057;
|
||||
--scolor: rgba(74, 74, 74, 0.7);
|
||||
@ -26,11 +27,13 @@
|
||||
--gray-a5: #a5a5a5;
|
||||
--gray-d8: #d8d8d8;
|
||||
--gray-f3: #f3f3f3;
|
||||
--loading-bg: rgba(255, 255, 255, 0.48);
|
||||
--font-family-monospace: Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;
|
||||
--font-size-disable-autozoom: 1rem;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--black: #ffffff;
|
||||
--bgcolor: #131313;
|
||||
--mcolor: #e6e6e6;
|
||||
--scolor: #a5a5a5;
|
||||
@ -44,16 +47,18 @@
|
||||
--ctrl-dropdown-bgcolor-focus: #000;
|
||||
--ctrl-dropdown-color-focus: #fff;
|
||||
--btn-success-bgcolor: #67b279;
|
||||
--form-disabled-bgcolor: #3d3d3d;
|
||||
--form-disabled-bgcolor: #2d2d2d;
|
||||
--form-disabled-color: #a5a5a5;
|
||||
--logs__text-color: #f3f3f3;
|
||||
--rt-nodata-bgcolor: #1c1c1c;
|
||||
--rt-nodata-color: #fff;
|
||||
--modal-overlay-bgcolor: #1c1c1c;
|
||||
--modal-overlay-bgcolor: rgba(19, 19, 19, 0.75);
|
||||
--logs__table-bgcolor: #3d3d3d;
|
||||
--logs__row--blue-bgcolor: #467fcf;
|
||||
--logs__row--white-bgcolor: #1c1c1c;
|
||||
--detailed-info-color: #fff;
|
||||
--gray300: #f3f3f3;
|
||||
--loading-bg: #131313;
|
||||
}
|
||||
|
||||
body {
|
||||
|
||||
@ -54,7 +54,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid #dee2e6;
|
||||
border-top: 1px solid var(--card-border-color);
|
||||
padding: 0.75rem 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
.nav-tabs .nav-link.active {
|
||||
border-color: var(--green-74);
|
||||
color: var(--green-74);
|
||||
border-color: var(--btn-success-bgcolor);
|
||||
color: var(--btn-success-bgcolor);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-link.active:hover {
|
||||
border-color: #58a273;
|
||||
color: #58a273;
|
||||
border-color: #4b9400;
|
||||
color: #4b9400;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
border-radius: 4px !important;
|
||||
pointer-events: auto !important;
|
||||
background-color: var(--ctrl-bgcolor);
|
||||
color: var(--scolor);
|
||||
color: var(--mcolor);
|
||||
z-index: 102;
|
||||
overflow-y: auto;
|
||||
max-height: 100%;
|
||||
|
||||
@ -24,6 +24,12 @@
|
||||
--option-border-radius: 4px;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--red: rgba(223, 56, 18, 0.25);
|
||||
--green-pale: rgba(103, 178, 121, 0.25);
|
||||
--yellow: rgba(247, 181, 0, 0.2);
|
||||
}
|
||||
|
||||
.logs__text {
|
||||
padding: 0 1px;
|
||||
text-overflow: ellipsis;
|
||||
@ -36,6 +42,14 @@
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .logs__text a {
|
||||
color: var(--gray-f3);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .logs__text a:hover {
|
||||
color: var(--gray-f3);
|
||||
}
|
||||
|
||||
.logs__text--bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
@ -66,6 +80,10 @@
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
[data-theme=dark] .icon--selected {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.text-pre {
|
||||
white-space: pre-wrap !important;
|
||||
overflow-wrap: break-word;
|
||||
@ -205,6 +223,12 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.logs__cell--client {
|
||||
width: 13rem;
|
||||
}
|
||||
}
|
||||
|
||||
.logs__cell--header__container > .logs__cell--header__item {
|
||||
border-right: 0;
|
||||
font-size: 1rem;
|
||||
@ -340,6 +364,10 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .tooltip-custom__container .button-action--arrow-option:not(:disabled):hover {
|
||||
background: var(--ctrl-dropdown-bgcolor-focus);
|
||||
}
|
||||
|
||||
.button-action--arrow-option-container {
|
||||
overflow: visible;
|
||||
transform-origin: left;
|
||||
@ -482,6 +510,10 @@
|
||||
color: var(--green79);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .logs__question.icon--lightgray {
|
||||
color: var(--gray-f3);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.logs__question {
|
||||
display: none;
|
||||
@ -491,3 +523,8 @@
|
||||
.logs__modal {
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
.logs__modal-wrap {
|
||||
padding: 1rem 1.5rem;
|
||||
background-color: var(--card-bgcolor);
|
||||
}
|
||||
|
||||
@ -195,11 +195,11 @@ const Logs = () => {
|
||||
onRequestClose={closeModal}
|
||||
style={{
|
||||
content: {
|
||||
width: '100%',
|
||||
width: 'calc(100% - 32px)',
|
||||
height: 'fit-content',
|
||||
left: '50%',
|
||||
top: 47,
|
||||
padding: '1rem 1.5rem 1rem',
|
||||
padding: '0',
|
||||
maxWidth: '720px',
|
||||
transform: 'translateX(-50%)',
|
||||
},
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
padding: 10px 15px;
|
||||
border: 1px solid #eee;
|
||||
border: 1px solid var(--card-border-color);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.dropdown-item.active,
|
||||
.dropdown-item:active {
|
||||
background-color: var(--green-74);
|
||||
background-color: var(--btn-success-bgcolor);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import classNames from 'classnames';
|
||||
@ -10,7 +10,7 @@ import i18n from '../../i18n';
|
||||
import Version from './Version';
|
||||
import './Footer.css';
|
||||
import './Select.css';
|
||||
import { setHtmlLangAttr } from '../../helpers/helpers';
|
||||
import { setHtmlLangAttr, setUITheme } from '../../helpers/helpers';
|
||||
import { changeTheme } from '../../actions';
|
||||
|
||||
const linksData = [
|
||||
@ -36,6 +36,13 @@ const Footer = () => {
|
||||
const currentTheme = useSelector((state) => (state.dashboard ? state.dashboard.theme : 'auto'));
|
||||
const profileName = useSelector((state) => (state.dashboard ? state.dashboard.name : ''));
|
||||
const isLoggedIn = profileName !== '';
|
||||
const [currentThemeLocal, setCurrentThemeLocal] = useState('auto');
|
||||
|
||||
useEffect(() => {
|
||||
if (!isLoggedIn) {
|
||||
setUITheme(window.matchMedia('(prefers-color-scheme: dark)').matches ? THEMES.dark : THEMES.light);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const getYear = () => {
|
||||
const today = new Date();
|
||||
@ -53,6 +60,12 @@ const Footer = () => {
|
||||
dispatch(changeTheme(value));
|
||||
};
|
||||
|
||||
const onThemeChangedLocal = (event) => {
|
||||
const { value } = event.target;
|
||||
setUITheme(value);
|
||||
setCurrentThemeLocal(value);
|
||||
};
|
||||
|
||||
const renderCopyright = () => <div className="footer__column">
|
||||
<div className="footer__copyright">
|
||||
{t('copyright')} © {getYear()}{' '}
|
||||
@ -70,24 +83,34 @@ const Footer = () => {
|
||||
{t(name)}
|
||||
</a>);
|
||||
|
||||
const renderThemeSelect = (currentTheme, isLoggedIn) => {
|
||||
if (!isLoggedIn) {
|
||||
return '';
|
||||
}
|
||||
const themeSelectOptions = () => (
|
||||
Object.values(THEMES)
|
||||
.map((theme) => (
|
||||
<option key={theme} value={theme}>
|
||||
{t(`theme_${theme}`)}
|
||||
</option>
|
||||
))
|
||||
);
|
||||
|
||||
return <select
|
||||
const renderThemeSelect = () => (
|
||||
<select
|
||||
className="form-control select select--theme"
|
||||
value={currentTheme}
|
||||
onChange={onThemeChanged}
|
||||
>
|
||||
{Object.values(THEMES)
|
||||
.map((theme) => (
|
||||
<option key={theme} value={theme}>
|
||||
{t(`theme_${theme}`)}
|
||||
</option>
|
||||
))}
|
||||
</select>;
|
||||
};
|
||||
{themeSelectOptions()}
|
||||
</select>
|
||||
);
|
||||
|
||||
const renderThemeSelectLocal = () => (
|
||||
<select
|
||||
className="form-control select select--theme"
|
||||
value={currentThemeLocal}
|
||||
onChange={onThemeChangedLocal}
|
||||
>
|
||||
{themeSelectOptions()}
|
||||
</select>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -98,7 +121,7 @@ const Footer = () => {
|
||||
{renderLinks(linksData)}
|
||||
</div>
|
||||
<div className="footer__column footer__column--theme">
|
||||
{renderThemeSelect(currentTheme, isLoggedIn)}
|
||||
{isLoggedIn ? renderThemeSelect() : renderThemeSelectLocal()}
|
||||
</div>
|
||||
<div className="footer__column footer__column--language">
|
||||
<select
|
||||
|
||||
@ -11,6 +11,10 @@
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.card-chart-bg {
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
.card-chart-bg path[d^="M0,32"] {
|
||||
transform: translateY(32px);
|
||||
}
|
||||
|
||||
@ -25,9 +25,9 @@ const Line = ({
|
||||
theme={{
|
||||
crosshair: {
|
||||
line: {
|
||||
stroke: 'black',
|
||||
stroke: 'currentColor',
|
||||
strokeWidth: 1,
|
||||
strokeOpacity: 0.35,
|
||||
strokeOpacity: 0.5,
|
||||
},
|
||||
},
|
||||
}}
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background-color: rgba(255, 255, 255, 0.48);
|
||||
background-color: var(--loading-bg);
|
||||
}
|
||||
|
||||
.loading:after {
|
||||
|
||||
@ -23,14 +23,29 @@
|
||||
background-color: var(--rt-nodata-bgcolor);
|
||||
}
|
||||
|
||||
.ReactTable .-loading .-loading-inner {
|
||||
color: var(--gray300);
|
||||
}
|
||||
|
||||
.ReactTable .-pagination input, .ReactTable .-pagination select {
|
||||
color: var(--rt-nodata-color);
|
||||
background-color: var(--rt-nodata-bgcolor);
|
||||
}
|
||||
|
||||
[data-theme=dark] .ReactTable .rt-table::-webkit-scrollbar-track {
|
||||
background-color: var(--card-bgcolor);
|
||||
}
|
||||
|
||||
[data-theme=dark] .ReactTable .rt-table::-webkit-scrollbar-thumb {
|
||||
background-color: #888888;
|
||||
}
|
||||
|
||||
[data-theme=dark] .ReactTable .-pagination .-btn {
|
||||
color: var(--scolor);
|
||||
background-color: var(--ctrl-bgcolor);
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
[data-theme=dark] .ReactTable .-pagination .-btn:disabled {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.rt-tr-group.logs__row--red {
|
||||
|
||||
@ -2579,16 +2579,58 @@ fieldset:disabled a.btn {
|
||||
box-shadow: 0 0 0 2px rgba(134, 142, 150, 0.5);
|
||||
}
|
||||
|
||||
[data-theme=dark] .btn-secondary {
|
||||
color: #868e96;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-color: #868e96;
|
||||
}
|
||||
|
||||
[data-theme=dark] .btn-secondary:hover {
|
||||
color: #fff;
|
||||
background-color: #868e96;
|
||||
border-color: #868e96;
|
||||
}
|
||||
|
||||
[data-theme=dark] .btn-secondary:focus,
|
||||
[data-theme=dark] .btn-secondary.focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
[data-theme=dark] .btn-secondary:focus-visible,
|
||||
[data-theme=dark] .btn-secondary.focus {
|
||||
box-shadow: 0 0 0 2px rgba(134, 142, 150, 0.5);
|
||||
}
|
||||
|
||||
[data-theme=dark] .btn-secondary.disabled,
|
||||
[data-theme=dark] .btn-secondary:disabled {
|
||||
color: #868e96;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
[data-theme=dark] .btn-secondary:not(:disabled):not(.disabled):active,
|
||||
[data-theme=dark] .btn-secondary:not(:disabled):not(.disabled).active {
|
||||
color: #fff;
|
||||
background-color: #868e96;
|
||||
border-color: #868e96;
|
||||
}
|
||||
|
||||
[data-theme=dark] .btn-secondary:not(:disabled):not(.disabled):active:focus,
|
||||
[data-theme=dark] .btn-secondary:not(:disabled):not(.disabled).active:focus {
|
||||
box-shadow: 0 0 0 2px rgba(134, 142, 150, 0.5);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
color: #fff;
|
||||
background-color: var(--btn-success-bgcolor);
|
||||
border-color: #5eba00;
|
||||
border-color: var(--btn-success-bgcolor);
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
color: #fff;
|
||||
background-color: #4b9400;
|
||||
border-color: #448700;
|
||||
border-color: #4b9400;
|
||||
}
|
||||
|
||||
.btn-success:focus,
|
||||
@ -2608,7 +2650,7 @@ fieldset:disabled a.btn {
|
||||
.show>.btn-success.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: #448700;
|
||||
border-color: #3e7a00;
|
||||
border-color: #448700;
|
||||
}
|
||||
|
||||
.btn-success:not(:disabled):not(.disabled):active:focus,
|
||||
@ -3251,6 +3293,10 @@ tbody.collapse.show {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
[data-theme=dark] .dropdown-menu {
|
||||
border: 1px solid var(--card-border-color);
|
||||
}
|
||||
|
||||
.dropup .dropdown-menu {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.125rem;
|
||||
@ -5509,7 +5555,7 @@ button.close {
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
border-bottom: 1px solid var(--card-border-color);
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
}
|
||||
@ -5539,7 +5585,7 @@ button.close {
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
padding: 1rem;
|
||||
border-top: 1px solid #e9ecef;
|
||||
border-top: 1px solid var(--card-border-color);
|
||||
}
|
||||
|
||||
.modal-footer> :not(:first-child) {
|
||||
@ -13679,6 +13725,10 @@ Card alert
|
||||
color: #6e7687;
|
||||
}
|
||||
|
||||
[data-theme=dark] .dropdown-item {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.dropdown-menu-arrow:before {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
@ -13706,6 +13756,10 @@ Card alert
|
||||
content: "";
|
||||
}
|
||||
|
||||
[data-theme=dark] .dropdown-menu-arrow:after {
|
||||
border-bottom: 5px solid var(--card-border-color);
|
||||
}
|
||||
|
||||
.dropdown-menu-arrow.dropdown-menu-right:before,
|
||||
.dropdown-menu-arrow.dropdown-menu-right:after {
|
||||
left: auto;
|
||||
@ -15473,6 +15527,10 @@ a.tag-addon:hover {
|
||||
transition: 0.3s border-color, 0.3s background-color;
|
||||
}
|
||||
|
||||
[data-theme=dark] .custom-switch-indicator {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.custom-switch-indicator:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15px;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
border-bottom: 1px solid var(--card-border-color);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@ -40,6 +40,10 @@
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
[data-theme=dark] .tab__control {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.tab__control {
|
||||
white-space: normal;
|
||||
|
||||
@ -21,11 +21,16 @@
|
||||
margin: 0 auto;
|
||||
padding: 30px 20px;
|
||||
line-height: 1.6;
|
||||
background-color: #fff;
|
||||
background-color: var(--card-bgcolor);
|
||||
box-shadow: 0 1px 4px rgba(74, 74, 74, 0.36);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
[data-theme=dark] .setup__container {
|
||||
box-shadow: none;
|
||||
border: 1px solid var(--card-border-color);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.setup__container {
|
||||
width: 650px;
|
||||
@ -39,6 +44,10 @@
|
||||
max-width: 140px;
|
||||
}
|
||||
|
||||
[data-theme=dark] .setup__logo {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
.setup__nav {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -13,6 +13,10 @@
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
[data-theme=dark] .login__logo {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
.login__form {
|
||||
margin: auto;
|
||||
padding: 40px 15px 100px;
|
||||
|
||||
@ -36,7 +36,7 @@ class Login extends Component {
|
||||
<div className="login">
|
||||
<div className="login__form">
|
||||
<div className="text-center mb-6">
|
||||
<img src={logo} className="h-6" alt="logo" />
|
||||
<img src={logo} className="h-6 login__logo" alt="logo" />
|
||||
</div>
|
||||
<Form onSubmit={this.handleSubmit} processing={processingLogin} />
|
||||
<div className="login__info">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user