Feat(SQL, UI): Logic for Get-Many SQL Stored Procedures refactored to use Calc Stored Procedures and Dog Command Links page styling improved.

static/css/themes/dark.css

@@ -1,3 +1,4 @@
+/*
 :root {
     --background-color: #121212;
     --text-color: #e0e0e0;
@@ -12,34 +13,35 @@
     --border-color: #333333;
     --shadow-color: rgba(255, 255, 255, 0.1);
     
-    /* Header */
+    /* Header * /
     --header-bg: #1f1f1f;
     --header-text: #e0e0e0;
     
-    /* Footer */
+    /* Footer * /
     --footer-bg: #1f1f1f;
     --footer-text: #a0a0a0;
     
-    /* Navigation */
+    /* Navigation * /
     --nav-bg: #1f1f1f;
     --nav-text: #e0e0e0;
     --nav-hover-bg: #2c2c2c;
     --nav-hover-text: #bb86fc;
     
-    /* Buttons */
+    /* Buttons * /
     --Button-primary-bg: #bb86fc;
     --Button-primary-text: #121212;
     --Button-secondary-bg: #03dac6;
     --Button-secondary-text: #121212;
     
-    /* Forms */
+    /* Forms * /
     --input-bg: #2c2c2c;
     --input-border: #454545;
     --input-text: #e0e0e0;
     --input-focus-border: #bb86fc;
     
-    /* Cards */
+    /* Cards * /
     --card-bg: #1f1f1f;
     --card-border: #333333;
     --card-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.05);
-}
+}
+*/

static/css/themes/icons.css

@@ -0,0 +1,77 @@
+
+/* Toggle light mode / dark mode button */
+.theme-switch {
+    background: none;
+    border: none;
+    cursor: pointer;
+    width: 4vh;
+    height: 4vh;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    margin-top: auto;
+    border-radius: 2vh;
+}
+.theme-switch:hover {
+    background-color: var(--colour-primary);
+}
+.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: 0vh;
+}
+svg.theme-icon.light-mode-icon {
+    width: 3.5vh;
+    height: 3.5vh;
+    top: 0.25vh;
+    left: 0.25vh;
+}
+svg.theme-icon.light-mode-icon .background {
+    fill: var(--colour-secondary);
+}
+.theme-switch:hover svg.theme-icon.light-mode-icon .background {
+    fill: var(--colour-primary);
+}
+svg.theme-icon.light-mode-icon .sun {
+    fill: var(--colour-text);
+    stroke: var(--colour-text);
+}
+/*
+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);
+}

static/css/themes/light.css

@@ -1 +1,33 @@
-/* Default */
+/* Default */
+:root {
+    /* Claude dark blue / grey theme */
+    --colour-accent: #C77DFF;
+    --colour-error: red;
+    --colour-page-background: #E0AAFF;
+    --colour-page-background-1: #F5ECFE;
+    --colour-page-background-2: #FAE0E2;
+    --colour-primary: #240046;
+    --colour-secondary: #3C096C;
+    --colour-text: #10002B;
+    --colour-text-background: white;
+    --colour-text-link-unvisited: #0000EE;
+    --colour-text-link-visited: #551A8B;
+}
+
+/*
+--c_purple_darker: #310055;
+--c_purple_dark: #4A0A77;
+--c_purple: #6818A5;
+--c_purple_light: #CBAFFE;
+--c_purple_lighter: #F5ECFE;
+
+--c_blue: #0044FF;
+--c_blue_pastel: #B8E0FF;
+--c_blue_light: #73E8FF;
+--c_blue_dark: #003ADB;
+/* --c_red: * /
+--c-red: #FF0000;
+--c_red_pastel: #FAE0E2;
+--c_red_lighter: #FAE0E2;
+}
+*/