From b6c66e497a303ce3605a32e806c28e1d83544998 Mon Sep 17 00:00:00 2001 From: Aidan Cornelius-Bell Date: Mon, 13 Jan 2025 14:13:03 +1030 Subject: [PATCH] CSS: fixed checkboxes for light mode --- app/assets/stylesheets/application.css | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 7b2e3e0..f1b0f26 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -101,6 +101,12 @@ --danger-bg: #dc3545; --danger-text: #ffffff; + + --checkbox-bg: var(--standout-form-bg); + --checkbox-border: var(--accent-a); + --checkbox-checked-bg: var(--filter-button-active); + --checkbox-checked-border: var(--filter-button-active); + --checkbox-check: #ffffff; /* The checkmark color */ } /* Light mode, overwrites at the top of the CSS so it doesn't need to be repeated elsewhere */ @@ -132,6 +138,12 @@ --danger-bg: #dc3545; --danger-text: #ffffff; + + --checkbox-bg: #ffffff; + --checkbox-border: var(--accent-a); + --checkbox-checked-bg: var(--filter-button-active); + --checkbox-checked-border: var(--filter-button-active); + --checkbox-check: #ffffff; } } @@ -252,9 +264,9 @@ input[type="checkbox"] { appearance: none; width: 16px; height: 16px; - border: 1px solid var(--accent-a); + border: 1px solid var(--checkbox-border); border-radius: 3px; - background-color: var(--standout-form-bg); + background-color: var(--checkbox-bg); cursor: pointer; position: relative; vertical-align: middle; @@ -262,8 +274,8 @@ input[type="checkbox"] { } input[type="checkbox"]:checked { - background-color: var(--filter-button-active); - border-color: var(--filter-button-active); + background-color: var(--checkbox-checked-bg); + border-color: var(--checkbox-checked-border); } input[type="checkbox"]:checked::after { @@ -273,7 +285,7 @@ input[type="checkbox"]:checked::after { top: 1px; width: 5px; height: 10px; - border: solid var(--standout-form-button-text); + border: solid var(--checkbox-check); border-width: 0 2px 2px 0; transform: rotate(45deg); } -- 2.39.5