github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merges development

Browse Source
This commit is contained in:
psychedelicious
2022-10-27 15:24:00 +11:00
parent 7b46d5f823
commit 44599a239f
119 changed files with 4981 additions and 1058 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/styles/Mixins/Buttons.scss
View File

@@ -7,16 +7,16 @@
) {
min-width: $btn-width;
min-height: $btn-height;
background-color: $btn-color;
background-color: $btn-color !important;
&:hover {
background-color: $btn-color-hover;
background-color: $btn-color-hover !important;
}
&:disabled {
background-color: rgb(45, 45, 55);
background-color: rgb(45, 45, 55) !important;
&:hover {
background-color: rgb(45, 45, 55);
background-color: rgb(45, 45, 55) !important;
}
}

24
frontend/src/styles/_Colors_Dark.scss
View File

@@ -19,6 +19,12 @@
--invalid: rgb(255, 75, 75);
--invalid-secondary: rgb(120, 5, 5);
--accent-color: rgb(80, 40, 200);
--accent-color-hover: rgb(104, 60, 230);
--destructive-color: rgb(185, 55, 55);
--destructive-color-hover: rgb(255, 75, 75);
// Error status colors
--border-color-invalid: rgb(255, 80, 50);
--box-shadow-color-invalid: rgb(210, 30, 10);
@@ -30,8 +36,6 @@
// 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);
@@ -39,12 +43,6 @@
--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(54, 56, 66);
@@ -52,6 +50,9 @@
--switch-bg-color: rgb(100, 102, 110);
--switch-bg-active-color: rgb(80, 40, 200);
// Resizable
--resizeable-handle-border-color: rgb(80, 82, 112);
// Tabs
--tab-color: rgb(30, 32, 42);
--tab-hover-color: rgb(36, 38, 48);
@@ -79,13 +80,14 @@
--input-checkbox-bg: rgb(90, 90, 120);
--input-checkbox-checked-bg: rgb(80, 40, 200);
--input-checkbox-checked-tick: rgb(0, 0, 0);
--input-border-color: rgb(140, 110, 255);
--input-box-shadow-color: rgb(80, 30, 210);
// 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);
@@ -94,10 +96,12 @@
--img2img-img-bg-color: rgb(30, 32, 42);
// Gallery
--gallery-resizeable-color: rgb(36, 38, 48);
// Context Menus
--context-menu-bg-color: rgb(46, 48, 58);
--context-menu-box-shadow: none;
--context-menu-bg-color-hover: rgb(30, 32, 42);
// Inpainting
--inpaint-bg-color: rgb(30, 32, 42);
}

27
frontend/src/styles/_Colors_Light.scss
View File

@@ -19,6 +19,12 @@
--invalid: rgb(255, 75, 75);
--invalid-secondary: rgb(120, 5, 5);
--accent-color: rgb(235, 185, 5);
--accent-color-hover: rgb(255, 200, 0);
--destructive-color: rgb(237, 51, 51);
--destructive-color-hover: rgb(255, 55, 55);
// Error status colors
--border-color-invalid: rgb(255, 80, 50);
--box-shadow-color-invalid: none;
@@ -30,8 +36,6 @@
// 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);
@@ -39,12 +43,6 @@
--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(178, 180, 182);
@@ -52,6 +50,9 @@
--switch-bg-color: rgb(178, 180, 182);
--switch-bg-active-color: rgb(235, 185, 5);
// Resizable
--resizeable-handle-border-color: rgb(160, 162, 164);
// Tabs
--tab-color: rgb(202, 204, 206);
--tab-hover-color: rgb(206, 208, 210);
@@ -79,26 +80,28 @@
--input-checkbox-bg: rgb(90, 90, 120);
--input-checkbox-checked-bg: rgb(235, 185, 5);
--input-checkbox-checked-tick: rgb(0, 0, 0);
--input-border-color: rgb(0, 0, 0);
--input-box-shadow-color: none;
// 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);
--console-icon-button-bg-color-hover: var(--resizeable-handle-border-color);
// Img2Img
--img2img-img-bg-color: rgb(180, 182, 184);
// Gallery
--gallery-resizeable-color: rgb(192, 194, 196);
// Context Menus
--context-menu-bg-color: var(--background-color);
--context-menu-box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35),
--context-menu-box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35),
0px 10px 20px -15px rgba(22, 23, 24, 0.2);
--context-menu-bg-color-hover: var(--background-color-secondary);
// Inpainting
--inpaint-bg-color: rgb(180, 182, 184);
}

13
frontend/src/styles/_Misc.scss Normal file
View File

@@ -0,0 +1,13 @@
.checkerboard {
background-position: 0px 0px, 10px 10px;
background-size: 20px 20px;
background-image: linear-gradient(
45deg,
#eee 25%,
transparent 25%,
transparent 75%,
#eee 75%,
#eee 100%
),
linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
}

18
frontend/src/styles/index.scss
View File

@@ -3,12 +3,13 @@
@use 'Colors_Light';
@use 'Fonts';
@use 'Animations';
@use 'Misc';
// Component Styles
//app
@use '../app/App.scss';
//systen
//system
@use '../features/system/SiteHeader.scss';
@use '../features/system/StatusIndicator.scss';
@use '../features/system/SettingsModal/SettingsModal.scss';
@@ -21,6 +22,7 @@
@use '../features/options/MainOptions/MainOptions.scss';
@use '../features/options/AccordionItems/AdvancedSettings.scss';
@use '../features/options/AdvancedOptions/Upscale/UpscaleOptions.scss';
@use '../features/options/AdvancedOptions/Inpainting/BoundingBoxDimensions.scss';
@use '../features/system/ProgressBar.scss';
// gallery
@@ -28,21 +30,33 @@
@use '../features/gallery/ImageGallery.scss';
@use '../features/gallery/HoverableImage.scss';
@use '../features/gallery/InvokePopover.scss';
@use '../features/gallery/ShowHideGalleryButton.scss';
@use '../features/gallery/ImageMetaDataViewer/ImageMetadataViewer.scss';
// Tabs
@use '../features/tabs/InvokeTabs.scss';
@use '../features/tabs/InvokeWorkarea.scss';
@use '../features/tabs/TextToImage/TextToImage.scss';
@use '../features/tabs/ImageToImage/ImageToImage.scss';
@use '../features/tabs/Inpainting/Inpainting.scss';
// Component Shared
@use '../common/components/IAINumberInput.scss';
@use '../common/components/IAIInput.scss';
@use '../common/components/IAISelect.scss';
@use '../common/components/IAIIconButton.scss';
@use '../common/components/IAISwitch.scss';
@use '../common/components/IAISelect.scss';
@use '../common/components/IAISlider.scss';
@use '../common/components/IAICheckbox.scss';
@use '../common/components/IAIPopover.scss';
@use '../common/components/IAIColorPicker.scss';
@use '../common/components/WorkInProgress/WorkInProgress.scss';
@use '../common/components/GuidePopover.scss';
// Component Shared - Radix UI
// @use '../common/components/radix-ui/IAISlider.scss';
// @use '../common/components/radix-ui/IAITooltip.scss';
// Shared Styles
@use './Mixins/' as *;