From 5da76ddeaff65634a61449e5f04b3f41f490ae31 Mon Sep 17 00:00:00 2001 From: Bryce Willey Date: Tue, 5 Dec 2023 12:34:47 -0500 Subject: [PATCH] Fixes issues with dark mode and assembly line * an upstream work around to make checkboxes and radio buttons dark * makes the radial markers work on the interview list page * makes terms and footer links light for correct contrast --- .../data/static/interview_list.css | 56 +++++++++++-------- .../AssemblyLine/data/static/styles.css | 30 +++++++++- 2 files changed, 62 insertions(+), 24 deletions(-) diff --git a/docassemble/AssemblyLine/data/static/interview_list.css b/docassemble/AssemblyLine/data/static/interview_list.css index a90d90c9..9af3c300 100644 --- a/docassemble/AssemblyLine/data/static/interview_list.css +++ b/docassemble/AssemblyLine/data/static/interview_list.css @@ -32,9 +32,15 @@ display: -webkit-box; display: -ms-flexbox; display: flex; - background: #ddd; + --radial-background: #ddd; + background: var(--radial-background); margin: .2rem; } + +[data-bs-theme=dark] .radialProgressBar { + --radial-background: #212529; +} + .radialProgressBar .overlay { border-radius: 50%; width: 2.3rem; @@ -45,57 +51,61 @@ padding-top: 10%; } +[data-bs-theme=dark] .radialProgressBar .overlay { + background: #212529; +} + .progress-0 { - background-image: -webkit-linear-gradient(left, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, #ddd 50%); - background-image: linear-gradient(90deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%); + background-image: -webkit-linear-gradient(left, var(--radial-background) 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, var(--radial-background) 50%); + background-image: linear-gradient(90deg, var(--radial-background) 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, var(--radial-background) 50%); } .progress-10 { - background-image: -webkit-linear-gradient(36deg, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, #ddd 50%); - background-image: linear-gradient(54deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%); + background-image: -webkit-linear-gradient(36deg, var(--radial-background) 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, var(--radial-background) 50%); + background-image: linear-gradient(54deg, var(--radial-background) 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, var(--radial-background) 50%); } .progress-20 { - background-image: -webkit-linear-gradient(72deg, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, #ddd 50%); - background-image: linear-gradient(18deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%); + background-image: -webkit-linear-gradient(72deg, var(--radial-background) 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, var(--radial-background) 50%); + background-image: linear-gradient(18deg, var(--radial-background) 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, var(--radial-background) 50%); } .progress-30 { - background-image: -webkit-linear-gradient(108deg, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, #ddd 50%); - background-image: linear-gradient(-18deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%); + background-image: -webkit-linear-gradient(108deg, var(--radial-background) 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, var(--radial-background) 50%); + background-image: linear-gradient(-18deg, var(--radial-background) 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, var(--radial-background) 50%); } .progress-40 { - background-image: -webkit-linear-gradient(144deg, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, #ddd 50%); - background-image: linear-gradient(-54deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%); + background-image: -webkit-linear-gradient(144deg, var(--radial-background) 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, var(--radial-background) 50%); + background-image: linear-gradient(-54deg, var(--radial-background) 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, var(--radial-background) 50%); } .progress-50 { - background-image: -webkit-linear-gradient(right, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, #ddd 50%); - background-image: linear-gradient(-90deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%); + background-image: -webkit-linear-gradient(right, var(--radial-background) 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, var(--radial-background) 50%); + background-image: linear-gradient(-90deg, var(--radial-background) 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, var(--radial-background) 50%); } .progress-60 { - background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(36deg, #028cd5 50%, #ddd 50%); - background-image: linear-gradient(90deg, #028cd5 50%, transparent 50%), linear-gradient(54deg, #028cd5 50%, #ddd 50%); + background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(36deg, #028cd5 50%, var(--radial-background) 50%); + background-image: linear-gradient(90deg, #028cd5 50%, transparent 50%), linear-gradient(54deg, #028cd5 50%, var(--radial-background) 50%); } .progress-70 { - background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(72deg, #028cd5 50%, #ddd 50%); - background-image: linear-gradient(90deg, #028cd5 50%, transparent 50%), linear-gradient(18deg, #028cd5 50%, #ddd 50%); + background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(72deg, #028cd5 50%, var(--radial-background) 50%); + background-image: linear-gradient(90deg, #028cd5 50%, transparent 50%), linear-gradient(18deg, #028cd5 50%, var(--radial-background) 50%); } .progress-80 { - background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(108deg, #028cd5 50%, #ddd 50%); - background-image: linear-gradient(90deg, #028cd5 50%, transparent 50%), linear-gradient(-18deg, #028cd5 50%, #ddd 50%); + background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(108deg, #028cd5 50%, var(--radial-background) 50%); + background-image: linear-gradient(90deg, #028cd5 50%, transparent 50%), linear-gradient(-18deg, #028cd5 50%, var(--radial-background) 50%); } .progress-90 { - background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(144deg, #028cd5 50%, #ddd 50%); - background-image: linear-gradient(90deg, #028cd5 50%, transparent 50%), linear-gradient(-54deg, #028cd5 50%, #ddd 50%); + background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(144deg, #028cd5 50%, var(--radial-background) 50%); + background-image: linear-gradient(90deg, #028cd5 50%, transparent 50%), linear-gradient(-54deg, #028cd5 50%, var(--radial-background) 50%); } .progress-100 { - background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(right, #028cd5 50%, #ddd 50%); - background-image: linear-gradient(90deg, #028cd5 50%, transparent 50%), linear-gradient(-90deg, #028cd5 50%, #ddd 50%); + background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(right, #028cd5 50%, var(--radial-background) 50%); + background-image: linear-gradient(90deg, #028cd5 50%, transparent 50%), linear-gradient(-90deg, #028cd5 50%, var(--radial-background) 50%); } diff --git a/docassemble/AssemblyLine/data/static/styles.css b/docassemble/AssemblyLine/data/static/styles.css index 4a826ec7..6f369671 100644 --- a/docassemble/AssemblyLine/data/static/styles.css +++ b/docassemble/AssemblyLine/data/static/styles.css @@ -126,16 +126,44 @@ input[type=number] { min-width: 8em; } -/* Make the footer links and da terms slightly darker for better contrast */ +/* Make the footer links and da terms slightly darker in light mode + and lighter in dark mode for better contrast */ footer a { color: #0264F7; } + +[data-bs-theme=dark] footer a { + color: #3988FF +} + .daterm { color: #3b842c; text-decoration: dashed; text-decoration-line: underline; } +[data-bs-theme=dark] .daterm { + color: #4fa23e; +} + .daquestionbackbutton { --bs-btn-focus-shadow-rgb: 49,132,253; } + +/* An upstream fix for dark mode, with radio buttons and checkboxes. See https://github.com/jhpyle/docassemble/pull/718 */ +[data-bs-theme=dark] .btn-light.dalabelauty { + --bs-btn-color: #fff; + --bs-btn-bg: #212529; + --bs-btn-border-color: #212529; + --bs-btn-hover-color: #fff; + --bs-btn-hover-bg: #424649; + --bs-btn-hover-border-color: #373b3e; + --bs-btn-focus-shadow-rgb: 66, 70, 73; + --bs-btn-active-color: #fff; + --bs-btn-active-bg: #4d5154; + --bs-btn-active-border-color: #373b3e; + --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); + --bs-btn-disabled-color: #fff; + --bs-btn-disabled-bg: #212529; + --bs-btn-disabled-border-color: #212529; +}