Two new themes, a stylesheet, and old theme updates OH MY!

src/Core/WebServer.cs

@@ -97,8 +97,14 @@ public void PreInit()
         RegisterTheme(new("cyber_swarm", "Cyber Swarm", ["/css/themes/cyber_swarm.css"], true));
         RegisterTheme(new("punked", "Punked", ["/css/themes/punked.css"], true));
         RegisterTheme(new("eyesear_white", "Eyesear White", ["/css/themes/eyesear_white.css"], false));
-        RegisterTheme(new("swarmpunk", "Swarm Punk", ["/css/themes/modern.css", "/css/themes/swarmpunk.css"], true));
-        RegisterTheme(new("beweish", "Beweish", ["/css/themes/modern.css", "/css/themes/beweish.css"], true));
+        RegisterTheme(new("swarmpunk", "Swarm Punk Modern", ["/css/themes/modern.css", "/css/themes/swarmpunk.css"], true));
+        RegisterTheme(new("beweish", "Beweish Modern", ["/css/themes/modern.css", "/css/themes/beweish.css"], true));
+        RegisterTheme(new("aquamarine_modern", "Aquamarine Modern", ["/css/themes/modern.css", "/css/themes/aquamarine.css"], true));
+        RegisterTheme(new("pastel_modern", "Pastel Modern", ["/css/themes/modern.css", "/css/themes/pastel.css"], true));
+        RegisterTheme(new("swarmpunk_luminous", "Swarm Punk Luminous", ["/css/themes/luminous.css", "/css/themes/swarmpunk.css"], true));
+        RegisterTheme(new("beweish_luminous", "Beweish Luminous", ["/css/themes/luminous.css", "/css/themes/beweish.css"], true));
+        RegisterTheme(new("aquamarine_luminous", "Aquamarine Luminous", ["/css/themes/luminous.css", "/css/themes/aquamarine.css"], true));
+        RegisterTheme(new("pastel_luminous", "Pastel Luminous", ["/css/themes/luminous.css", "/css/themes/pastel.css"], true));
     }
 
     /// <summary>Main prep, called by <see cref="Program"/>, generally should not be touched externally.</summary>

src/wwwroot/css/themes/aquamarine.css

@@ -0,0 +1,66 @@
+:root {
+    /* Core colors */
+    --background: #1a1a1a;
+    --background-soft: #2a2a2a;
+    --background-gray: #333333;
+    --background-gray-danger: #b22222;
+    --background-danger: #ff4c4c;
+    --shadow: rgba(0, 0, 0, 0.7);
+    --light-border: #444444;
+
+    /* Text colors */
+    --text: #e0e0e0;
+    --text-soft: #b0b0b0;
+    --popup-front: #ffffff;
+
+    /* UI Elements */
+    --emphasis: #00ffcc;
+    --emphasis-soft: #66ffe0;
+    --emphasis-text: #ffffff;
+    --border-color: #444444;
+
+    /* Buttons */
+    --button-text: #ffffff;
+    --button-background: #333333;
+    --button-background-hover: #444444;
+    --button-foreground-hover: #00ffcc;
+    --button-foreground-disabled: #666666;
+    --button-background-disabled: #333333;
+    --button-border: #444444;
+
+    /* Danger buttons */
+    --danger-button-background-hover: color-mix(in srgb, #ff4c4c 70%, black);
+    --danger-button-foreground-hover: #ffffff;
+    --danger-button-border: #ff4c4c;
+    --danger-button-foreground: #ffffff;
+    --danger-button-background: #b22222;
+
+    /* Panels and backgrounds */
+    --background-panel: #2a2a2a;
+    --background-panel-subtle: rgba(0, 255, 204, 0.1);
+
+    /* Input elements */
+    --range-track-color: #444444;
+    --range-thumb-color: #00ffcc;
+
+    /* Other UI elements */
+    --qbutton: var(--emphasis);
+    --batch-0: rgba(0, 255, 204, 0.3);
+    --batch-1: rgba(0, 200, 150, 0.3);
+    --popup-back: var(--background);
+
+    /* Selection colors */
+    --box-selected-border: rgba(0, 255, 204, 0.8);
+    --box-selected-background: rgba(0, 255, 204, 0.2);
+    --box-selected-border-stronger: rgba(0, 255, 204, 1.0);
+    --box-selected-background-stronger: rgba(0, 255, 204, 0.3);
+
+    /* Standard colors */
+    --red: #ff4c4c;
+    --green: #4caf50;
+
+    /* Shadow variables */
+    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5);
+    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.6);
+    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.7);
+}

src/wwwroot/css/themes/luminous.css

@@ -0,0 +1,191 @@
+/* Navi-Tab Styling*/
+.nav-tabs {
+    background-color: var(--background-panel) !important;
+    border-bottom: 1px solid var(--border-color) !important;
+    padding: 0.5rem 0.5rem 0 0.5rem;
+}
+
+.nav-link {
+    color: var(--text) !important;
+    border: 1px solid transparent;
+    text-shadow: 0 0 5px var(--text);
+}
+
+.nav-link:hover, .nav-link.active {
+    color: var(--emphasis) !important;
+    border-color: var(--border-color);
+    background-color: var(--background-soft);
+    text-shadow: 0 0 10px var(--emphasis);
+}
+
+/*Card Glow Effect*/
+.card {
+    background: var(--background-panel);
+    border: 1px solid var(--border-color);
+    box-shadow: 0 0 20px var(--emphasis-soft);
+}
+
+/* Menu Headers */
+.input-group-header {
+    background-color: var(--background-gray);
+    color: var(--text);
+    padding: 0.5rem;
+    border-bottom: 1px solid var(--border-color);
+    text-shadow: 0 0 5px var(--text);
+}
+
+/* Neon glow effects */
+.basic-button {
+    box-shadow: 0 0 10px var(--emphasis);
+    border: 1px solid var(--emphasis);
+    transition: all 0.3s ease;
+    background-color: var(--button-background);
+    color: var(--button-text);
+}
+
+.basic-button:hover {
+    box-shadow: 0 0 20px var(--emphasis);
+    text-shadow: 0 0 10px var(--text);
+    background-color: var(--button-background-hover);
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--background);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--emphasis);
+    border-radius: 4px;
+    box-shadow: 0 0 5px var(--emphasis);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--emphasis-soft);
+    box-shadow: 0 0 10px var(--emphasis-soft);
+}
+
+/* Quick tools styling */
+.t2i-area-quicktools {
+    border: 1px solid var(--border-color) !important;
+    box-shadow: var(--shadow-md) !important;
+    margin-top: -20px;
+    padding: 0.5rem;
+}
+
+/* Category Headers and Expand/Retract Buttons */
+.auto-symbol {
+    display: inline-block;
+    text-align: center;
+    font-size: 20px;
+    width: 20px;
+    height: 17px;
+    background: var(--background-panel);
+    margin-right: 10px;
+    position: relative;
+    top: 0px;
+    transition: all 0.3s ease;
+    color: var(--text) !important;
+}
+
+.input-group .header-label {
+    font-size: 15px;
+    color: var(--text);
+    text-shadow: 0 0 5px var(--text);
+}
+
+.input-group .input-group-header {
+    position: unset;
+    margin: 0;
+    height: auto;
+    min-height: 32px;
+    color: var(--text);
+    user-select: none;
+    background-color: var(--background-panel);
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    text-shadow: 0 0 5px var(--text);
+}
+
+.input-group .input-group-header:hover {
+    color: var(--emphasis);
+    text-shadow: 0 0 10px var(--emphasis);
+}
+
+/* Add this to ensure proper spacing in the input group */
+.input-group .input-group-content {
+    --spacing: 30px;
+    padding: 0;
+    max-width: unset;
+    margin-top: 10px;
+}
+
+.input-group .input-group-content > div {
+    padding: 5px 10px;
+    align-items: center;
+}
+
+.input-group .auto-input-name {
+    margin-right: 10px;
+    display: inline-flex;
+    flex-direction: row-reverse;
+    gap: 5px;
+    text-align: left;
+}
+
+/* Add styling for the quick buttons */
+.auto-input-qbutton {
+    text-align: center;
+    border-color: var(--border-color) !important;
+    color: var(--text) !important;
+    align-self: center;
+    width: 20px;
+    height: 20px;
+    line-height: 18px;
+    margin-left: auto;
+    margin-right: 10px;
+    box-shadow: 0 0 5px var(--emphasis);
+}
+
+/* Input group header and expand/retract styling */
+.input-group .input-group-header {
+    position: unset;
+    margin: 0;
+    height: auto;
+    min-height: 32px;
+    color: var(--text);
+    user-select: none;
+    background-color: var(--background-panel);
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    text-shadow: 0 0 5px var(--text);
+}
+
+.input-group .header-label-wrap {
+    position: relative;
+    top: unset;
+    left: unset;
+    margin: unset;
+    width: 100% !important;
+}
+
+.input-group .header-label {
+    font-size: 15px;
+}
+
+.input-group .input-group-header-shrinkable:hover {
+    color: var(--button-foreground-hover);
+}
+
+.input-group .input-group-header-activated {
+    background: transparent !important;
+}

src/wwwroot/css/themes/pastel.css

@@ -0,0 +1,66 @@
+:root {
+    /* Core colors */
+    --background: #3c3c3c;
+    --background-soft: #4a4a4a;
+    --background-gray: #555555;
+    --background-gray-danger: #b22222;
+    --background-danger: #ff4c4c;
+    --shadow: rgba(0, 0, 0, 0.5);
+    --light-border: #666666;
+
+    /* Text colors */
+    --text: #e0e0e0;
+    --text-soft: #b0b0b0;
+    --popup-front: #ffffff;
+
+    /* UI Elements */
+    --emphasis: #ff9f5e;
+    --emphasis-soft: #ff8f6c;
+    --emphasis-text: #ffffff;
+    --border-color: #7172b3;
+
+    /* Buttons */
+    --button-text: #ffffff;
+    --button-background: #4db683;
+    --button-background-hover: #4db683;
+    --button-foreground-hover: #ff9f5e;
+    --button-foreground-disabled: #d3d3d3;
+    --button-background-disabled: #555555;
+    --button-border: #666666;
+
+    /* Danger buttons */
+    --danger-button-background-hover: color-mix(in srgb, #ff4c4c 70%, black);
+    --danger-button-foreground-hover: #ffffff;
+    --danger-button-border: #ff4c4c;
+    --danger-button-foreground: #ffffff;
+    --danger-button-background: #b22222;
+
+    /* Panels and backgrounds */
+    --background-panel: #4a4a4a;
+    --background-panel-subtle: rgba(255, 159, 94, 0.1);
+
+    /* Input elements */
+    --range-track-color: #666666;
+    --range-thumb-color: #4db683;
+
+    /* Other UI elements */
+    --qbutton: var(--emphasis);
+    --batch-0: rgba(255, 159, 94, 0.3);
+    --batch-1: rgba(77, 182, 131, 0.3);
+    --popup-back: var(--background);
+
+    /* Selection colors */
+    --box-selected-border: rgba(77, 182, 131, 0.8);
+    --box-selected-background: rgba(77, 182, 131, 0.2);
+    --box-selected-border-stronger: rgba(77, 182, 131, 1.0);
+    --box-selected-background-stronger: rgba(77, 182, 131, 0.3);
+
+    /* Standard colors */
+    --red: #ff4c4c;
+    --green: #4db683;
+
+    /* Shadow variables */
+    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
+    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
+}