Improved: Dark mode of Origine (#5229)

* fix

* fix button
This commit is contained in:
maTh
2023-03-26 21:55:46 +02:00
committed by GitHub
parent 9604856482
commit 05e10f0e75
2 changed files with 50 additions and 20 deletions

View File

@@ -5,7 +5,8 @@
:root {
--frss-padding-top-bottom: 0.5rem;
--background-color-light-gradient: #eee;
--background-color-light-gradient1: #fff;
--background-color-light-gradient2: #eee;
--background-color-light: #fff;
--background-color-light-shadowed: #f6f6f6;
--background-color-grey: #f0f0f0;
@@ -260,7 +261,7 @@ form th {
.btn {
margin: 0;
padding: 5px 10px;
background-image: linear-gradient(to bottom, var(--background-color-light) 0%, var(--background-color-light-gradient) 100%);
background-image: linear-gradient(to bottom, var(--background-color-light-gradient1) 0%, var(--background-color-light-gradient2) 100%);
display: inline-block;
color: var(--font-color-grey);
font-size: 0.9rem;
@@ -1187,12 +1188,14 @@ a.btn-attention:hover {
--frss-background-color-transparent: #000000a3;
--frss-scrollbar-handle: #fff1;
--frss-scrollbar-handle-hover: #fff4;
--frss-font-color-grey-light: #555;
--background-color-light-gradient: #111;
--background-color-light-gradient1: #1c1c1c;
--background-color-light-gradient2: #111;
--background-color-light: #111;
--background-color-light-shadowed: #191919;
--background-color-grey: #1f1f1f;
--background-color-hover: #09090977;
--background-color-hover: #222;
--unread-article-background-color: #201f1e;
--unread-article-background-color-hover: #1a1918;
@@ -1245,7 +1248,7 @@ a.btn-attention:hover {
--text-shadow-color: #1c1c1c;
--text-shadow-color-dark: #666;
--box-shadow-color: #4446;
--box-shadow-color: #0009;
--box-shadow-color-inset: #1f1f1f;
--font-color-link: #467eb3;
@@ -1255,16 +1258,28 @@ a.btn-attention:hover {
--border-color-shadow-side: #333;
--contrast-border-color-active: #0062be;
--form-element-font-color-focus: #879db1;
--form-element-font-color-focus: #b8d0e7;
--form-element-border-color-focus: #0062be;
--form-element-focus-box-shadow-color-inset: #110;
--form-element-border-color-invalid: #f00;
--form-element-invalid-box-shadow-color-inset: #fdd;
--form-element-invalid-box-shadow-color-inset: none;
}
.btn.active,
.btn:active,
.dropdown-target:target ~ .btn.dropdown-toggle {
:root .darkMode_auto .btn {
color: #777;
}
:root .darkMode_auto .btn:hover {
color: var(--font-color-grey);
}
:root .darkMode_auto .btn.active,
:root .darkMode_auto .btn:active,
:root .darkMode_auto .dropdown-target:target ~ .btn.dropdown-toggle {
background: var(--border-color);
}
:root .darkMode_auto .dropdown-menu {
background-color: #0a0a0a;
}
}

View File

@@ -5,7 +5,8 @@
:root {
--frss-padding-top-bottom: 0.5rem;
--background-color-light-gradient: #eee;
--background-color-light-gradient1: #fff;
--background-color-light-gradient2: #eee;
--background-color-light: #fff;
--background-color-light-shadowed: #f6f6f6;
--background-color-grey: #f0f0f0;
@@ -260,7 +261,7 @@ form th {
.btn {
margin: 0;
padding: 5px 10px;
background-image: linear-gradient(to bottom, var(--background-color-light) 0%, var(--background-color-light-gradient) 100%);
background-image: linear-gradient(to bottom, var(--background-color-light-gradient1) 0%, var(--background-color-light-gradient2) 100%);
display: inline-block;
color: var(--font-color-grey);
font-size: 0.9rem;
@@ -1187,12 +1188,14 @@ a.btn-attention:hover {
--frss-background-color-transparent: #000000a3;
--frss-scrollbar-handle: #fff1;
--frss-scrollbar-handle-hover: #fff4;
--frss-font-color-grey-light: #555;
--background-color-light-gradient: #111;
--background-color-light-gradient1: #1c1c1c;
--background-color-light-gradient2: #111;
--background-color-light: #111;
--background-color-light-shadowed: #191919;
--background-color-grey: #1f1f1f;
--background-color-hover: #09090977;
--background-color-hover: #222;
--unread-article-background-color: #201f1e;
--unread-article-background-color-hover: #1a1918;
@@ -1245,7 +1248,7 @@ a.btn-attention:hover {
--text-shadow-color: #1c1c1c;
--text-shadow-color-dark: #666;
--box-shadow-color: #4446;
--box-shadow-color: #0009;
--box-shadow-color-inset: #1f1f1f;
--font-color-link: #467eb3;
@@ -1255,16 +1258,28 @@ a.btn-attention:hover {
--border-color-shadow-side: #333;
--contrast-border-color-active: #0062be;
--form-element-font-color-focus: #879db1;
--form-element-font-color-focus: #b8d0e7;
--form-element-border-color-focus: #0062be;
--form-element-focus-box-shadow-color-inset: #110;
--form-element-border-color-invalid: #f00;
--form-element-invalid-box-shadow-color-inset: #fdd;
--form-element-invalid-box-shadow-color-inset: none;
}
.btn.active,
.btn:active,
.dropdown-target:target ~ .btn.dropdown-toggle {
:root .darkMode_auto .btn {
color: #777;
}
:root .darkMode_auto .btn:hover {
color: var(--font-color-grey);
}
:root .darkMode_auto .btn.active,
:root .darkMode_auto .btn:active,
:root .darkMode_auto .dropdown-target:target ~ .btn.dropdown-toggle {
background: var(--border-color);
}
:root .darkMode_auto .dropdown-menu {
background-color: #0a0a0a;
}
}