From 434eb7dc0faa64c56220c13777194262ad0abd7e Mon Sep 17 00:00:00 2001 From: Aidan Cornelius-Bell Date: Mon, 13 Jan 2025 14:05:08 +1030 Subject: [PATCH] CSS: Fixed overzealous merging of styles etc --- app/assets/stylesheets/application.css | 73 +++++++++++++++++++++----- 1 file changed, 60 insertions(+), 13 deletions(-) diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 52e0d21..7b2e3e0 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -76,18 +76,6 @@ /* Root variables (Dark mode) */ :root { - --post-bg: #1a1f2c; /* Deep blue-grey for content areas */ - --body-bg: #242936; /* Slightly lighter blue-grey for main background */ - --quote-bg: #2d3340; /* Medium blue-grey for quoted content */ - --link-color: #847091; /* #66aaff Bright blue for links */ - --accent-a: #3388dd; /* Primary blue */ - --accent-b: #4499ee; /* Secondary blue */ - --accent-c: #55aaff; /* Tertiary blue */ - --body-text: #c5d1e6; /* Soft blue-white for main text */ - --dark-text: #ffffff; /* Pure white for headers */ - --light-text: #8899bb; /* Muted blue for secondary text */ - --code-text: #77ccff; /* Bright blue for code/special text */ - --post-bg: #2b2b2b; /* Deep blue-grey for content areas */ --body-bg: #262626; /* Slightly lighter blue-grey for main background */ --quote-bg: #4a4a4a; /* Medium blue-grey for quoted content */ @@ -110,9 +98,12 @@ --standout-form-bg: #333333; --standout-form-text: #ffffff; --standout-form-button-text: #ffffff; + + --danger-bg: #dc3545; + --danger-text: #ffffff; } -/* Light mode */ +/* Light mode, overwrites at the top of the CSS so it doesn't need to be repeated elsewhere */ @media (prefers-color-scheme: light) { :root { --post-bg: #fdf6f0; @@ -138,6 +129,9 @@ --standout-form-bg: #ffffff; --standout-form-text: #333333; --standout-form-button-text: #ffffff; + + --danger-bg: #dc3545; + --danger-text: #ffffff; } } @@ -580,6 +574,59 @@ ul .pinned::before { color: var(--accent-a); } +/* Base button and .button styles */ +button, +input[type="submit"], +input[type="reset"] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + display: inline-block; + padding: 0.5rem 1rem; + text-decoration: none; + border: none; + border-radius: 0.25rem; + margin-right: 0.5rem; + cursor: pointer; + font: inherit; + background-color: var(--filter-button); + color: var(--filter-button-text); +} + +/* Separate .button styles because they have different colors */ +.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; +} + +.button.summary { + margin-top: 5px; +} + +.button.danger { + background-color: var(--button-danger-bg); + color: var(--button-danger-text); +} + +button:hover, +input[type="submit"]:hover, +input[type="reset"]:hover, +.button:hover { + opacity: 0.8; + text-decoration: none; +} + .filter-buttons { margin: 20px auto auto; text-align: center; -- 2.39.5