Merge pull request #50 from VaagenIM/feature/front-end

Hotfix for themes not considering styles for <blockquote> elements.
VaagenIM · Sep 30, 2024 · f674d94 · f674d94
2 parents d0c00e0 + d3803aa
commit f674d94
Show file tree

Hide file tree

Showing 8 changed files with 15 additions and 2 deletions.
diff --git a/piggy/static/css/styles.css b/piggy/static/css/styles.css
@@ -672,4 +672,9 @@ details p:nth-child(2) {
   padding-top: 0.6rem !important;
   padding-bottom: 0.6rem !important;
   font-size: 1rem !important;
+}
+
+.md-content blockquote {
+  color: var(--piggy-neutral) !important;
+  border-left: .2rem solid var(--piggy-neutral) !important;
 }
diff --git a/piggy/static/css/themes/classic.css b/piggy/static/css/themes/classic.css
@@ -7,6 +7,7 @@ description: The classic look of piggy!
 [data-theme="classic"] {
   --piggy-main: #ece4ec; 
   --piggy-light: #ffffff;
+  --piggy-neutral: #747070; /* Gray */
   --piggy-dark: #000000;
 
   --piggy-text-main: var(--piggy-dark);

diff --git a/piggy/static/css/themes/dark.css b/piggy/static/css/themes/dark.css
@@ -8,10 +8,12 @@ description: The default dark theme.
   /* piggy colors */
   --piggy-main: rgb(34, 41, 47); /* A darker, more muted tone */
   --piggy-light: #f0f4f8; /* A soft off-white */
+  --piggy-neutral: #60656B; /* Gray */
   --piggy-dark: rgb(51, 61, 71); /* Darker tone with reduced contrast */
 
   --piggy-text-main: var(--piggy-light);
   --piggy-text-light: var(--piggy-light);
+  --piggy-text-neutral: var(--piggy-neutral);
   --piggy-text-dark: var(--piggy-dark);
 
   --piggy-shadow-text: #00000029; /* Softer shadows */

diff --git a/piggy/static/css/themes/high-contrast.css b/piggy/static/css/themes/high-contrast.css
@@ -6,6 +6,7 @@ description: High contrast theme for maximum visibility.
 [data-theme="high-contrast"] {
   --piggy-main: #000000; /* Pure black background */
   --piggy-light: #ffffff; /* Pure white for high contrast text */
+  --piggy-neutral: #7f7f7f; /* Gray */
   --piggy-dark: #ffffff; /* White text for maximum contrast */
 
   --piggy-text-main: var(--piggy-light); /* White text for readability */

diff --git a/piggy/static/css/themes/light.css b/piggy/static/css/themes/light.css
@@ -8,6 +8,7 @@ description: The default light theme.
   /* Softer light mode theme with more contrast */
   --piggy-main: rgb(225, 225, 225); /* Slightly darker gray for the main background */
   --piggy-light: #fefefe; /* Almost white, but still soft for highlights */
+  --piggy-neutral: #757575; /* Gray */
   --piggy-dark: rgb(60, 60, 60); /* Darker text for better contrast */
 
   --piggy-text-main: var(--piggy-dark); /* Darker text for readability */

diff --git a/piggy/static/css/themes/piggy-dark.css b/piggy/static/css/themes/piggy-dark.css
@@ -8,6 +8,7 @@ description: A dark pink theme.
   /* Dark theme piggy colors */
   --piggy-main: #2e1f24; /* Dark reddish-brown background */
   --piggy-light: #3d2a30; /* Slightly lighter for contrast */
+  --piggy-neutral: #8a767c; /* Gray */
   --piggy-dark: #f0e1e4; /* Light pink for text contrast */
 
   --piggy-text-main: var(--piggy-dark); /* Light text for readability */

diff --git a/piggy/static/css/themes/piggy.css b/piggy/static/css/themes/piggy.css
@@ -7,6 +7,7 @@ description: Relaxing pastel pink theme.
 [data-theme="piggy"] {
   --piggy-main: #ffe6e9; /* Soft pink background */
   --piggy-light: #ffffff; /* White for highlights */
+  --piggy-neutral: #7a6e72; /* Gray */
   --piggy-dark: #4d4d4d; /* Dark gray for text contrast */
 
   --piggy-text-main: var(--piggy-dark); /* Dark text for readability */

diff --git a/piggy/static/css/themes/synthwave.css b/piggy/static/css/themes/synthwave.css
@@ -8,6 +8,7 @@ description: Fancy sunset, purple, neon, gradients!
   /* Synthwave sunset colors */
   --piggy-main: rgb(34, 18, 48); /* Deep, rich sunset purple */
   --piggy-light: #ffd27f; /* Warm, soft golden yellow */
+  --piggy-neutral: #866997; /* Gray */
   --piggy-dark: rgb(48, 20, 58); /* Darker purple for contrast */
 
   --piggy-text-main: #ffcc66; /* Soft, glowing sunset orange */
@@ -95,11 +96,11 @@ description: Fancy sunset, purple, neon, gradients!
 }
 
 [data-theme="synthwave"] .md-content tr:nth-child(odd) td {
-  background-color: #49160c;
+  background-color: #41140b;
 }
 
 [data-theme="synthwave"] .md-content tr:nth-child(even) td {
-  background-color: #5e2015;
+  background-color: #572118;
 }
 
 [data-theme="synthwave"] .md-content details,