Fix(Structure): Split styles.css into separate files for different components and sections.

2025-03-05 16:52:10 +00:00
parent bd58bd82ed
commit b4927ac440
13 changed files with 484 additions and 466 deletions
--- a/styles/themes.css
+++ b/styles/themes.css
@@ -0,0 +1,135 @@
+/* Modern CSS reset and variables */
+:root {
+    /* Claude dark blue / grey theme */
+    --text-colour: #1a202c;
+    --primary-colour: #2d3748;
+    --secondary-colour: #4a5568;
+    --accent-colour: #4299e1;
+    --page-background-colour: #f7fafc;
+    --text-background-colour: white;
+}
+:root[data-theme="purple"] {
+    /* Purple theme 
+        - https://coolors.co/palette/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff
+    */
+    --text-colour: #10002B; /* very dark */
+    --primary-colour: #240046; /* medium dark */
+    --secondary-colour: #3C096C; /* dark */
+    --accent-colour: #C77DFF; /* light */
+    --page-background-colour: #E0AAFF; /* very light */
+    --text-background-colour: white;
+}
+:root[data-theme="red"],
+:root[data-theme="light"] {
+    /* Red theme 
+        - https://coolors.co/palette/2b0000-4f0000-740000-980000-b50000-d30000-eb1d1d-f50f0f-ff0000
+        - https://coolors.co/palette/9c191b-ac1c1e-bd1f21-d02224-dd2c2f-e35053-e66063-ec8385-f1a7a9-f6cacc
+    */
+    --text-colour: #2B0000;
+    --primary-colour: #740000;
+    --secondary-colour: #B50000;
+    --accent-colour: #E35053;
+    --page-background-colour: #F6CACC;
+    --text-background-colour: white;
+}
+:root[data-theme="dark"] {
+    /*
+    --text-colour: #E0E0E0;
+    --primary-colour: #BB86FC;
+    --secondary-colour: #03DAC6;
+    --accent-colour: #FF4081;
+    --page-background-colour: #121212;
+    --text-background-colour: black;
+    */
+    /*
+    --text-colour: #E0E0E0; /* Light * /
+    --primary-colour: #740000; /* Dark * /
+    --secondary-colour: #B50000; /* Medium * /
+    --accent-colour: #FF4081; /* Light-medium * /
+    --page-background-colour: #121212; /* Dark * /
+    --text-background-colour: black; /* Black * /
+    */
+    --text-colour: #E0E0E0; /* Light Gray */
+    --primary-colour: #980000; /* Slightly lighter Dark Red */
+    --secondary-colour: #D30000; /* Slightly lighter Medium Red */
+    --accent-colour: #FF4081; /* Pink */
+    --page-background-colour: #121212; /* Dark Gray */
+    --text-background-colour: black; /* Dark Red */
+}
+
+/* Toggle light mode / dark mode button */
+.theme-switch {
+    background: none;
+    border: none;
+    cursor: pointer;
+    width: 5vh;
+    height: 5vh;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    margin-top: auto;
+    border-radius: 2.5vh;
+}
+.theme-switch:hover {
+    background-color: var(--primary-colour);
+}
+.theme-switch img.theme-icon,
+.theme-switch svg.theme-icon {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    transition: opacity 1s ease, transform 1s ease;
+    position: absolute;
+    margin-top: auto;
+}
+img.theme-icon.dark-mode-icon {
+    top: 0vh;
+    left: -0.1vh;
+}
+svg.theme-icon.light-mode-icon {
+    width: 4vh;
+    height: 4vh;
+    top: 0.55vh;
+    left: 0.45vh;
+}
+svg.theme-icon.light-mode-icon .background {
+    fill: var(--secondary-colour);
+}
+.theme-switch:hover svg.theme-icon.light-mode-icon .background {
+    fill: var(--primary-colour);
+}
+svg.theme-icon.light-mode-icon .sun {
+    fill: var(--text-colour);
+    stroke: var(--text-colour);
+}
+/*
+svg.theme-icon {
+    width: 2vh;
+    height: 2vh;
+}
+*/
+
+/* Hide the icon that doesn't match the current theme */
+[data-theme="light"] .theme-switch .dark-mode-icon {
+    opacity: 1;
+    display: block;
+    transform: rotate(0deg);
+}
+[data-theme="light"] .theme-switch .light-mode-icon {
+    opacity: 0;
+    display: none;
+    transform: rotate(90deg);
+}
+
+[data-theme="dark"] .theme-switch .dark-mode-icon {
+    opacity: 0;
+    display: none;
+    transform: rotate(-90deg);
+}
+[data-theme="dark"] .theme-switch .light-mode-icon {
+    opacity: 1;
+    display: block;
+    transform: rotate(0deg);
+}