Add New WebUI and Desktop Mode

Co-Authored-By: psychedelicious <4822129+psychedelicious@users.noreply.github.com>

frontend/src/styles/Mixins/Buttons.scss

@@ -0,0 +1,28 @@
+@mixin Button(
+  $btn-color: rgb(45, 45, 55),
+  $btn-color-hover: rgb(65, 65, 75),
+  $btn-width: 100%,
+  $btn-height: 100%,
+  $icon-size: 20px
+) {
+  min-width: $btn-width;
+  min-height: $btn-height;
+  background-color: $btn-color;
+
+  &:hover {
+    background-color: $btn-color-hover;
+  }
+
+  &:disabled {
+    background-color: rgb(45, 45, 55);
+    &:hover {
+      background-color: rgb(45, 45, 55);
+    }
+  }
+
+  svg {
+    width: $icon-size;
+    height: $icon-size;
+    color: var(--btn-svg-color);
+  }
+}

frontend/src/styles/Mixins/_Shared.scss

@@ -0,0 +1,7 @@
+@mixin HideScrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}

frontend/src/styles/Mixins/_Variables.scss

@@ -0,0 +1,14 @@
+// Calc Values
+$app-cutoff: 1.6rem;
+$app-content-height-cutoff: 7rem; // default: 7rem
+
+// Usage Variables
+// app
+$app-width: calc(100vw - $app-cutoff);
+$app-height: calc(100vh - $app-cutoff);
+$app-content-height: calc(100vh - $app-content-height-cutoff);
+$app-gallery-height: calc(100vh - ($app-content-height-cutoff + 6rem));
+$app-metadata-height: calc(100vh - ($app-content-height-cutoff + 4.4rem));
+
+// option bar
+$options-bar-max-width: 22.5rem;

frontend/src/styles/Mixins/index.scss

@@ -0,0 +1,3 @@
+@forward './Shared';
+@forward './Buttons';
+@forward './Variables';

frontend/src/styles/_Colors_Dark.scss

@@ -0,0 +1,92 @@
+[data-theme='dark'] {
+  // General Colors
+  --white: rgb(255, 255, 255);
+
+  // App Colors
+  --root-bg-color: rgb(10, 10, 10);
+  --background-color: rgb(20, 20, 26);
+  --background-color-secondary: rgb(16, 16, 22);
+
+  --text-color: rgb(255, 255, 255);
+  --text-color-secondary: rgb(160, 162, 188);
+
+  --subtext-color: rgb(24, 24, 34);
+  --subtext-color-bright: rgb(48, 48, 64);
+
+  --border-color: rgb(30, 30, 46);
+  --border-color-light: rgb(60, 60, 76);
+
+  --invalid: rgb(255, 75, 75);
+  --invalid-secondary: rgb(120, 5, 5);
+
+  // Error status colors
+  --border-color-invalid: rgb(255, 80, 50);
+  --box-shadow-color-invalid: rgb(210, 30, 10);
+
+  --svg-color: rgb(24, 24, 34);
+
+  // Progress Bar Color
+  --progress-bar-color: rgb(100, 50, 245);
+
+  // Prompt Box Colors
+  --prompt-bg-color: rgb(10, 10, 10);
+  --prompt-border-color: rgb(140, 110, 255);
+  --prompt-box-shadow-color: rgb(80, 30, 210);
+
+  // Button Colors
+  --btn-svg-color: rgb(255, 255, 255);
+
+  --btn-grey: rgb(30, 32, 42);
+  --btn-grey-hover: rgb(46, 48, 68);
+
+  --btn-purple: rgb(80, 40, 200);
+  --btn-purple-hover: rgb(104, 60, 230);
+
+  --btn-red: rgb(185, 55, 55);
+  --btn-red-hover: rgb(255, 75, 75);
+
+  --btn-load-more: rgb(30, 32, 42);
+  --btn-load-more-hover: rgb(36, 38, 48);
+
+  // Switch
+  --switch-bg-color: rgb(100, 102, 110);
+  --switch-bg-active-color: rgb(80, 40, 200);
+
+  // Tabs
+  --tab-color: rgb(30, 32, 42);
+  --tab-hover-color: rgb(36, 38, 48);
+  --tab-list-bg: rgb(100, 50, 255);
+  --tab-list-text: rgb(20, 20, 20);
+  --tab-list-text-inactive: rgb(92, 94, 114);
+  --tab-panel-bg: rgb(20, 22, 28);
+
+  // Metadata Viewer
+  --metadata-bg-color: rgba(0, 0, 0, 0.7);
+  --metadata-json-bg-color: rgba(255, 255, 255, 0.1);
+
+  // Status Message
+  --status-good-color: rgb(125, 255, 100);
+  --status-good-glow: rgb(40, 215, 40);
+  --status-working-color: rgb(255, 175, 55);
+  --status-working-glow: rgb(255, 160, 55);
+  --status-bad-color: rgb(255, 90, 90);
+  --status-bad-glow: rgb(255, 40, 40);
+
+  // Settings Modal
+  --settings-modal-bg: rgb(30, 32, 42);
+
+  // Input
+  --input-checkbox-bg: rgb(90, 90, 120);
+  --input-checkbox-checked-bg: rgb(80, 40, 200);
+  --input-checkbox-checked-tick: rgb(0, 0, 0);
+
+  // Console
+  --error-level-info: rgb(200, 202, 224);
+  --error-level-warning: rgb(255, 225, 105);
+  --error-level-error: rgb(255, 81, 46);
+  --console-bg-color: rgb(30, 30, 36);
+  --console-border-color: rgb(80, 82, 112);
+
+  --console-icon-button-bg-color: rgb(50, 53, 64);
+  --console-icon-button-bg-color-hover: rgb(70, 73, 84);
+}

frontend/src/styles/_Colors_Light.scss

@@ -0,0 +1,91 @@
+[data-theme='light'] {
+  // General Colors
+  --white: rgb(255, 255, 255);
+
+  // App Colors
+  --root-bg-color: rgb(255, 255, 255);
+  --background-color: rgb(220, 222, 224);
+  --background-color-secondary: rgb(204, 206, 208);
+
+  --text-color: rgb(0, 0, 0);
+  --text-color-secondary: rgb(40, 40, 40);
+
+  --subtext-color: rgb(24, 24, 34);
+  --subtext-color-bright: rgb(142, 144, 146);
+
+  --border-color: rgb(200, 200, 200);
+  --border-color-light: rgb(147, 147, 147);
+
+  --invalid: rgb(255, 75, 75);
+  --invalid-secondary: rgb(120, 5, 5);
+
+  // Error status colors
+  --border-color-invalid: rgb(255, 80, 50);
+  --box-shadow-color-invalid: none;
+
+  --svg-color: rgb(186, 188, 190);
+
+  // Progress Bar Color
+  --progress-bar-color: rgb(235, 185, 5);
+
+  // Prompt Box Colors
+  --prompt-bg-color: rgb(225, 227, 229);
+  --prompt-border-color: rgb(0, 0, 0);
+  --prompt-box-shadow-color: rgb(217, 217, 217);
+
+  // Button Colors
+  --btn-svg-color: rgb(0, 0, 0);
+
+  --btn-grey: rgb(220, 222, 224);
+  --btn-grey-hover: rgb(230, 232, 234);
+
+  --btn-purple: rgb(235, 185, 5);
+  --btn-purple-hover: rgb(255, 200, 0);
+
+  --btn-red: rgb(237, 51, 51);
+  --btn-red-hover: rgb(255, 55, 55);
+
+  --btn-load-more: rgb(202, 204, 206);
+  --btn-load-more-hover: rgb(206, 208, 210);
+
+  // Switch
+  --switch-bg-color: rgb(178, 180, 182);
+  --switch-bg-active-color: rgb(235, 185, 5);
+
+  // Tabs
+  --tab-color: rgb(202, 204, 206);
+  --tab-hover-color: rgb(206, 208, 210);
+  --tab-list-bg: rgb(235, 185, 5);
+  --tab-list-text: rgb(0, 0, 0);
+  --tab-list-text-inactive: rgb(106, 108, 110);
+  --tab-panel-bg: rgb(214, 216, 218);
+
+  // Metadata Viewer
+  --metadata-bg-color: rgba(230, 230, 230, 0.9);
+  --metadata-json-bg-color: rgba(0, 0, 0, 0.1);
+
+  // Status Message
+  --status-good-color: rgb(21, 126, 0);
+  --status-good-glow: var(--background-color);
+  --status-working-color: rgb(235, 141, 0);
+  --status-working-glow: var(--background-color);
+  --status-bad-color: rgb(202, 0, 0);
+  --status-bad-glow: var(--background-color);
+
+  // Settings Modal
+  --settings-modal-bg: rgb(202, 204, 206);
+
+  // Input
+  --input-checkbox-bg: rgb(90, 90, 120);
+  --input-checkbox-checked-bg: rgb(235, 185, 5);
+  --input-checkbox-checked-tick: rgb(0, 0, 0);
+
+  // Console
+  --error-level-info: rgb(42, 42, 42);
+  --error-level-warning: rgb(173, 121, 0);
+  --error-level-error: rgb(145, 14, 0);
+  --console-bg-color: rgb(220, 224, 230);
+  --console-border-color: rgb(160, 162, 164);
+  --console-icon-button-bg-color: var(--switch-bg-color);
+  --console-icon-button-bg-color-hover: var(--console-border-color);
+}

frontend/src/styles/_Fonts.scss

@@ -0,0 +1,15 @@
+@font-face {
+  font-family: 'Inter';
+  src: url(../assets/fonts/Inter/Inter.ttf);
+  font-display: swap;
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url(../assets/fonts/Inter/Inter-Bold.ttf);
+  font-display: swap;
+  font-weight: 600;
+  font-style: normal;
+}

frontend/src/styles/index.scss

@@ -0,0 +1,62 @@
+// General Imports
+@use 'Colors_Dark';
+@use 'Colors_Light';
+@use 'Fonts';
+
+// Component Styles
+//app
+@use '../app/App.scss';
+
+//systen
+@use '../features/system/SiteHeader.scss';
+@use '../features/system/StatusIndicator.scss';
+@use '../features/system/SettingsModal/SettingsModal.scss';
+@use '../features/system/Console.scss';
+
+// options
+@use '../features/options/PromptInput/PromptInput.scss';
+@use '../features/options/ProcessButtons/ProcessButtons.scss';
+@use '../features/options/MainOptions/MainOptions.scss';
+@use '../features/options/AccordionItems/AdvancedSettings.scss';
+@use '../features/options/AdvancedOptions/Upscale/UpscaleOptions.scss';
+@use '../features/system/ProgressBar.scss';
+
+// gallery
+@use '../features/gallery/CurrentImageDisplay.scss';
+@use '../features/gallery/ImageGallery.scss';
+@use '../features/gallery/InvokePopover.scss';
+
+// Tabs
+@use '../features/tabs/InvokeTabs.scss';
+@use '../features/tabs/TextToImage/TextToImage.scss';
+
+// Component Shared
+@use '../common/components/IAINumberInput.scss';
+@use '../common/components/IAIInput.scss';
+@use '../common/components/IAISelect.scss';
+@use '../common/components/IAISwitch.scss';
+@use '../common/components/WorkInProgress/WorkInProgress.scss';
+@use '../common/components/GuidePopover.scss';
+
+// Shared Styles
+@use './Mixins/' as *;
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body {
+  @include HideScrollbar;
+  background-color: var(--root-bg-color);
+}
+
+#root {
+  background-color: var(--root-bg-color);
+  color: var(--text-color);
+  font-family: 'Inter', Arial, Helvetica, sans-serif;
+}