diff --git a/src/Core/WebServer.cs b/src/Core/WebServer.cs index 0c35f274..03817968 100644 --- a/src/Core/WebServer.cs +++ b/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)); } /// Main prep, called by , generally should not be touched externally. diff --git a/src/wwwroot/css/themes/aquamarine.css b/src/wwwroot/css/themes/aquamarine.css new file mode 100644 index 00000000..97dddfdb --- /dev/null +++ b/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); +} diff --git a/src/wwwroot/css/themes/luminous.css b/src/wwwroot/css/themes/luminous.css new file mode 100644 index 00000000..ccb02329 --- /dev/null +++ b/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; +} diff --git a/src/wwwroot/css/themes/pastel.css b/src/wwwroot/css/themes/pastel.css new file mode 100644 index 00000000..0ecee3d6 --- /dev/null +++ b/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); +}