From 05e10f0e757bcb381e84ad3b2dccd2738e29ff08 Mon Sep 17 00:00:00 2001 From: maTh Date: Sun, 26 Mar 2023 21:55:46 +0200 Subject: [PATCH] Improved: Dark mode of Origine (#5229) * fix * fix button --- p/themes/Origine/origine.css | 35 +++++++++++++++++++++++--------- p/themes/Origine/origine.rtl.css | 35 +++++++++++++++++++++++--------- 2 files changed, 50 insertions(+), 20 deletions(-) diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css index b2bcb668e..0893c7a2c 100644 --- a/p/themes/Origine/origine.css +++ b/p/themes/Origine/origine.css @@ -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; + } } diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css index b297228de..cb6d5e137 100644 --- a/p/themes/Origine/origine.rtl.css +++ b/p/themes/Origine/origine.rtl.css @@ -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; + } }