CSS: Fixed overzealous merging of styles etc

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 52e0d2111c9cb33189eee5d78504082bd362c649..7b2e3e0dc5cbe88db48861c42cdf9ee2fd180a51 100644 (file)
--- 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;