From 8b969dc64d1625284839203f9a241d10b6dd9e64 Mon Sep 17 00:00:00 2001 From: Aidan Cornelius-Bell Date: Mon, 13 Jan 2025 14:01:16 +1030 Subject: [PATCH] CSS: Consolidated the reg-form styles --- app/assets/stylesheets/application.css | 139 +++++++------------------ 1 file changed, 40 insertions(+), 99 deletions(-) diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 65515d2..52e0d21 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -246,91 +246,12 @@ select:focus { outline: none; } -.reg-form input[type="submit"], -.reg-form button { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} - -/* Light mode specific styles */ -@media (prefers-color-scheme: light) { - .reg-form input[type="submit"], - .reg-form button { - background-color: var( - --standout-form-bg - ) !important; /* White background */ - color: var(--standout-form-text) !important; /* Black text */ - border: 1px solid var(--link-color) !important; /* Brown border */ - } - - .reg-form input[type="submit"]:hover, - .reg-form button:hover { - background-color: var(--filter-button-hover) !important; - color: var( - --standout-form-button-text - ) !important; /* White text on hover */ - } -} - -/* Dark mode specific styles */ -@media (prefers-color-scheme: dark) { - .reg-form input[type="submit"], - .reg-form button { - background-color: var(--filter-button-active) !important; - color: var(--standout-form-button-text) !important; - } -} - label { font-weight: bold; margin-bottom: 5px; display: block; } -.reg-form { - border: 1px solid var(--accent-a); - border-radius: 3px; - padding: 1em 2em; - background: var(--standout-bg); - color: var(--standout-text); -} - -.reg-form input { - background-color: var(--standout-form-bg) !important; - color: var(--standout-form-button-text) !important; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} - -.reg-form .help-text { - margin-bottom: 0; - color: var(--standout-form-text); -} - -.reg-form select { - background-color: var(--standout-form-bg) !important; - color: var(--standout-form-text) !important; - border: 1px solid var(--accent-a); -} - -select option { - background-color: var(--standout-form-bg); - color: var(--standout-form-text); -} - -.reg-form h1, -.reg-form h2, -.reg-form h3, -.reg-form h4 { - margin-top: 0; -} - -.reg-form hr { - margin: 1em 0; -} - input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; @@ -363,15 +284,42 @@ input[type="checkbox"]:checked::after { transform: rotate(45deg); } -/* Specific styles for checkboxes in .reg-form */ -.reg-form input[type="checkbox"] { +/* Consolidated .reg-form styles */ +.reg-form { + border: 1px solid var(--accent-a); + border-radius: 3px; + padding: 1em 2em; + background: var(--standout-bg); + color: var(--standout-text); +} + +.reg-form input, +.reg-form select { background-color: var(--standout-form-bg) !important; - border-color: var(--accent-a) !important; + color: var(--standout-form-text) !important; + border: 1px solid var(--accent-a); } -.reg-form input[type="checkbox"]:checked { +.reg-form input[type="submit"], +.reg-form button { background-color: var(--filter-button-active) !important; - border-color: var(--filter-button-active) !important; + color: var(--standout-form-button-text) !important; +} + +.reg-form .help-text { + margin-bottom: 0; + color: var(--standout-form-text); +} + +.reg-form h1, +.reg-form h2, +.reg-form h3, +.reg-form h4 { + margin-top: 0; +} + +.reg-form hr { + margin: 1em 0; } .subheading { @@ -420,8 +368,14 @@ input[type="reset"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; - background-color: var(--filter-button); - color: var(--filter-button-text); + display: inline-block; + padding: 0.5rem 1rem; + text-decoration: none; + background-color: var(--quote-bg); + color: var(--link-color); + border-radius: 0.25rem; + margin-right: 0.5rem; + cursor: pointer; } hr { @@ -707,19 +661,6 @@ th { font-weight: bold; } -button, -input[type="submit"], -.button { - display: inline-block; - padding: 0.5rem 1rem; - text-decoration: none; - background-color: var(--quote-bg); - color: var(--link-color); - border-radius: 0.25rem; - margin-right: 0.5rem; - cursor: pointer; -} - .button.small { padding: 0.25rem 0.5rem; font-size: 0.875rem; -- 2.39.5