From 8e827b9c49f0da2848550e0cf3d855bf58f17ce0 Mon Sep 17 00:00:00 2001 From: svHvidsten Date: Mon, 30 Sep 2024 21:29:36 +0200 Subject: [PATCH] Fixed an issue where
elements were not styled or considered when using themes --- piggy/static/css/styles.css | 5 +++++ piggy/static/css/themes/classic.css | 1 + piggy/static/css/themes/dark.css | 2 ++ piggy/static/css/themes/high-contrast.css | 1 + piggy/static/css/themes/light.css | 1 + piggy/static/css/themes/piggy-dark.css | 1 + piggy/static/css/themes/piggy.css | 1 + piggy/static/css/themes/synthwave.css | 5 +++-- 8 files changed, 15 insertions(+), 2 deletions(-) diff --git a/piggy/static/css/styles.css b/piggy/static/css/styles.css index 15e13e5..606d5ab 100644 --- 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; } \ No newline at end of file diff --git a/piggy/static/css/themes/classic.css b/piggy/static/css/themes/classic.css index b5b098c..3de6b74 100644 --- 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 index 9a16051..4d777e2 100644 --- 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 index 4283037..04675fc 100644 --- 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 index 5ed77b9..27b336b 100644 --- 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 index c430e1b..7ce2f92 100644 --- 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 index f95eac5..2c5a939 100644 --- 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 index b547975..68c32dd 100644 --- 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,