Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(ui): remove unused scss files

Browse Source
This commit is contained in:
psychedelicious 2023-03-06 20:06:23 +11:00
parent 57144ac0cf
commit 41b2e4633f
8 changed files with 0 additions and 652 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
invokeai/frontend/web/src/styles/Mixins/Buttons.scss
View File

@ -1,40 +0,0 @@
@mixin Button(
$btn-color: rgb(45, 49, 53),
$btn-color-hover: rgb(65, 69, 73),
$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: var(--btn-base-color);
// &:hover {
// background-color: var(--btn-base-color);
// }
// }
// svg {
// width: $icon-size;
// height: $icon-size;
// color: var(--btn-svg-color);
// }
}
@mixin BaseButton {
// background-color: var(--btn-base-color);
// &:hover {
// background-color: var(--btn-base-color-hover);
// }
// &:disabled {
// &:hover {
// background-color: var(--btn-base-color);
// }
// }
}

159
invokeai/frontend/web/src/styles/Mixins/_Responsive.scss
View File

@ -1,159 +0,0 @@
// @media (max-width: 600px) {
// #root {
// .app-content {
// padding: 5px;
// .site-header {
// position: fixed;
// display: flex;
// height: 100px;
// z-index: 1;
// .site-header-left-side {
// position: absolute;
// display: flex;
// min-width: 145px;
// float: left;
// padding-left: 0;
// }
// .site-header-right-side {
// display: grid;
// grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
// grid-template-rows: 25px 25px 25px;
// grid-template-areas:
// 'logoSpace logoSpace logoSpace sampler sampler sampler'
// 'status status status status status status'
// 'btn1 btn2 btn3 btn4 btn5 btn6';
// row-gap: 15px;
// .chakra-popover__popper {
// grid-area: logoSpace;
// }
// > :nth-child(1).chakra-text {
// grid-area: status;
// width: 100%;
// display: flex;
// justify-content: center;
// }
// > :nth-child(2) {
// grid-area: sampler;
// display: flex;
// justify-content: center;
// align-items: center;
// select {
// width: 185px;
// margin-top: 10px;
// }
// .chakra-select__icon-wrapper {
// right: 10px;
// svg {
// margin-top: 10px;
// }
// }
// }
// > :nth-child(3) {
// grid-area: btn1;
// }
// > :nth-child(4) {
// grid-area: btn2;
// }
// > :nth-child(6) {
// grid-area: btn3;
// }
// > :nth-child(7) {
// grid-area: btn4;
// }
// > :nth-child(8) {
// grid-area: btn5;
// }
// > :nth-child(9) {
// grid-area: btn6;
// }
// }
// }
// .app-tabs {
// position: fixed;
// display: flex;
// flex-direction: column;
// row-gap: 15px;
// max-width: 100%;
// overflow: hidden;
// margin-top: 120px;
// .app-tabs-list {
// display: flex;
// justify-content: space-between;
// }
// .app-tabs-panels {
// overflow: hidden;
// overflow-y: scroll;
// .workarea-main {
// display: grid;
// grid-template-areas:
// 'workarea'
// 'options'
// 'gallery';
// row-gap: 15px;
// .parameters-panel-wrapper {
// grid-area: options;
// width: 100%;
// max-width: 100%;
// height: inherit;
// overflow: inherit;
// padding: 0 10px;
// .main-settings-row {
// max-width: 100%;
// }
// .advanced-parameters-item {
// max-width: 100%;
// }
// }
// .workarea-children-wrapper {
// grid-area: workarea;
// .workarea-split-view {
// display: flex;
// flex-direction: column;
// }
// .current-image-options {
// column-gap: 3px;
// }
// .text-to-image-area {
// padding: 0;
// }
// .current-image-preview {
// height: 430px;
// }
// //image 2 image
// .image-upload-button {
// row-gap: 10px;
// padding: 5px;
// svg {
// width: 2rem;
// height: 2rem;
// margin-top: 10px;
// }
// }
// //Cavas Painting
// .inpainting-settings {
// display: flex;
// flex-wrap: wrap;
// row-gap: 10px;
// }
// .inpainting-canvas-area {
// .konvajs-content {
// height: 400px !important;
// }
// }
// }
// .image-gallery-wrapper {
// grid-area: gallery;
// min-height: 400px;
// .image-gallery-popup {
// width: 100% !important;
// max-width: 100% !important;
// }
// }
// }
// }
// }
// }
// }
// }

7
invokeai/frontend/web/src/styles/Mixins/_Shared.scss
View File

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

20
invokeai/frontend/web/src/styles/Mixins/_Variables.scss
View File

@ -1,20 +0,0 @@
// Calc Values
$app-cutoff: 0px;
$app-content-height-cutoff: calc(70px + 1rem); // default: 7rem
// Usage Variables
// app
$app-padding: 1rem;
$progress-bar-thickness: 0.3rem;
$app-width: calc(100vw - $app-cutoff);
$app-height: calc(100vh - $progress-bar-thickness);
$app-content-height: calc(100vh - $app-content-height-cutoff);
$app-gallery-height: calc(100vh - ($app-content-height-cutoff + 5.5rem));
$app-gallery-popover-height: calc(100vh - ($app-content-height-cutoff + 6rem));
$app-metadata-height: calc(100vh - ($app-content-height-cutoff + 4.4rem));
$app-text-to-image-height: calc(
100vh - 9.4375rem - 1.925rem - 1.15rem
); // do not touch ffs
// option bar
$options-bar-max-width: 22.5rem;

4
invokeai/frontend/web/src/styles/Mixins/index.scss
View File

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

143
invokeai/frontend/web/src/styles/Themes/_Colors_Dark.scss
View File

@ -1,143 +0,0 @@
[data-theme='asdf'] {
// General Colors
--white: rgb(255, 255, 255);
// Accent Colors
--accent-color-dim: rgb(57, 25, 153);
--accent-color: rgb(80, 40, 200);
--accent-color-bright: rgb(104, 60, 230);
--accent-color-hover: var(--accent-color-bright);
// App Colors
--root-bg-color: rgb(10, 10, 10);
--background-color: rgb(26, 26, 32);
--background-color-light: rgb(40, 44, 48);
--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);
--svg-color: rgb(255, 255, 255);
--invalid: rgb(255, 75, 75);
--invalid-secondary: rgb(120, 5, 5);
--destructive-color: rgb(185, 55, 55);
--destructive-color-hover: rgb(255, 75, 75);
--warning-color: rgb(200, 88, 40);
--warning-color-hover: rgb(230, 117, 60);
// Error status colors
--border-color-invalid: rgb(255, 80, 50);
--box-shadow-color-invalid: rgb(210, 30, 10);
// Tabs
--tab-color: rgb(30, 32, 42);
--tab-hover-color: rgb(46, 48, 58);
--tab-panel-bg: rgb(36, 38, 48);
--tab-list-bg: var(--accent-color);
--tab-list-text: rgb(202, 204, 216);
--tab-list-text-inactive: rgb(92, 94, 114);
// Button Colors
--btn-base-color: rgb(30, 32, 42);
--btn-base-color-hover: rgb(46, 48, 68);
--btn-load-more: rgb(30, 32, 42);
--btn-load-more-hover: rgb(54, 56, 66);
--btn-svg-color: rgb(255, 255, 255);
--btn-delete-image: rgb(182, 46, 46);
// IAI Button Colors
--btn-checkbox-border-hover: rgb(46, 48, 68);
// Progress Bar Color
--progress-bar-color: var(--accent-color);
// Prompt Box Colors
--prompt-bg-color: rgb(10, 10, 10);
// Switch
--switch-bg-color: rgb(100, 102, 110);
--switch-bg-active-color: var(--accent-color);
// Slider
--slider-color: var(--accent-color-bright);
// Slider
--slider-color: rgb(151, 113, 255);
--slider-mark-color: rgb(151, 113, 255);
// Resizable
--resizeable-handle-border-color: var(--accent-color);
// 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);
--notice-color: rgb(130, 71, 19);
// Settings Modal
--settings-modal-bg: rgb(30, 32, 42);
// Input
--input-checkbox-bg: rgb(60, 64, 68);
--input-checkbox-checked-bg: var(--accent-color);
--input-checkbox-checked-tick: rgb(0, 0, 0);
--input-border-color: var(--accent-color-bright);
--input-box-shadow-color: var(--accent-color);
// 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-icon-button-bg-color: rgb(50, 53, 64);
--console-icon-button-bg-color-hover: rgb(70, 73, 84);
// Img2Img
--img2img-img-bg-color: rgb(30, 32, 42);
// Gallery
// Context Menus
--context-menu-bg-color: rgb(46, 48, 58);
--context-menu-box-shadow: none;
--context-menu-bg-color-hover: rgb(30, 32, 42);
// Shadows
--floating-button-drop-shadow-color: var(--accent-color);
// Canvas
--inpainting-alerts-bg: rgba(20, 20, 26, 0.75);
--inpainting-alerts-icon-color: rgb(255, 255, 255);
--inpainting-alerts-bg-active: var(--accent-color);
--inpainting-alerts-icon-active: rgb(255, 255, 255);
--inpainting-alerts-bg-alert: var(--invalid);
--inpainting-alerts-icon-alert: rgb(255, 255, 255);
// Checkerboard
--checkboard-dots-color: rgb(35, 35, 39);
// Scrollbar
--scrollbar-color: var(--accent-color);
--scrollbar-color-hover: var(--accent-color-bright);
// SubHook
--subhook-color: var(--accent-color);
}

141
invokeai/frontend/web/src/styles/Themes/_Colors_Green.scss
View File

@ -1,141 +0,0 @@
[data-theme='green'] {
// General Colors
--white: rgb(255, 255, 255);
// Accent Colors
--accent-color-dim: rgb(10, 60, 40);
--accent-color: rgb(20, 110, 70);
--accent-color-bright: rgb(30, 180, 100);
--accent-color-hover: var(--accent-color-bright);
// App Colors
--root-bg-color: rgb(10, 10, 14);
--background-color: rgb(30, 32, 37);
--background-color-light: rgb(40, 44, 48);
--background-color-secondary: rgb(22, 24, 28);
--text-color: rgb(255, 255, 255);
--text-color-secondary: rgb(160, 164, 168);
--subtext-color: rgb(24, 24, 28);
--subtext-color-bright: rgb(68, 72, 76);
--border-color: rgb(40, 44, 48);
--border-color-light: rgb(60, 60, 64);
--svg-color: rgb(220, 224, 228);
--invalid: rgb(255, 75, 75);
--invalid-secondary: rgb(120, 5, 5);
--destructive-color: rgb(185, 55, 55);
--destructive-color-hover: rgb(255, 75, 75);
--warning-color: rgb(200, 88, 40);
--warning-color-hover: rgb(230, 117, 60);
// Error status colors
--border-color-invalid: rgb(255, 80, 50);
--box-shadow-color-invalid: rgb(210, 30, 10);
// Tabs
--tab-color: rgb(40, 44, 48);
--tab-hover-color: rgb(48, 52, 56); //done
--tab-panel-bg: rgb(36, 40, 44);
--tab-list-bg: var(--accent-color);
--tab-list-text: rgb(202, 204, 206);
--tab-list-text-inactive: rgb(92, 94, 96); //done
// Button Colors
--btn-base-color: rgb(40, 44, 48);
--btn-base-color-hover: rgb(56, 60, 64);
--btn-load-more: rgb(30, 32, 42);
--btn-load-more-hover: rgb(54, 56, 66);
--btn-svg-color: rgb(255, 255, 255);
--btn-delete-image: rgb(182, 46, 46);
// IAI Button Colors
--btn-checkbox-border-hover: rgb(46, 48, 68);
// Progress Bar Color
--progress-bar-color: var(--accent-color);
// Prompt Box Colors
--prompt-bg-color: rgb(10, 10, 14);
// Switch
--switch-bg-color: rgb(100, 102, 110);
--switch-bg-active-color: var(--accent-color);
// Slider
--slider-color: var(--accent-color-bright);
--slider-mark-color: var(--accent-color-bright);
// Resizable
--resizeable-handle-border-color: var(--accent-color);
// 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);
--notice-color: rgb(130, 71, 19);
// Settings Modal
--settings-modal-bg: rgb(30, 32, 42);
// Input
--input-checkbox-bg: rgb(60, 64, 68);
--input-checkbox-checked-bg: var(--accent-color);
--input-checkbox-checked-tick: rgb(0, 0, 0);
--input-border-color: var(--accent-color-bright);
--input-box-shadow-color: var(--accent-color);
// 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-icon-button-bg-color: rgb(50, 53, 64);
--console-icon-button-bg-color-hover: rgb(70, 73, 84);
// Img2Img
--img2img-img-bg-color: rgb(30, 32, 42);
// Gallery
// Context Menus
--context-menu-bg-color: rgb(46, 48, 58);
--context-menu-box-shadow: none;
--context-menu-bg-color-hover: rgb(30, 32, 42);
// Shadows
--floating-button-drop-shadow-color: var(--accent-color);
// Canvas
--inpainting-alerts-bg: rgba(20, 20, 26, 0.75);
--inpainting-alerts-icon-color: rgb(255, 255, 255);
--inpainting-alerts-bg-active: var(--accent-color);
--inpainting-alerts-icon-active: rgb(255, 255, 255);
--inpainting-alerts-bg-alert: var(--invalid);
--inpainting-alerts-icon-alert: rgb(255, 255, 255);
//Checkerboard
--checkboard-dots-color: rgb(35, 35, 39);
// Scrollbar
--scrollbar-color: var(--accent-color);
--scrollbar-color-hover: var(--accent-color-bright);
// SubHook
--subhook-color: var(--accent-color);
}

138
invokeai/frontend/web/src/styles/Themes/_Colors_Light.scss
View File

@ -1,138 +0,0 @@
// [data-theme='light'] {
// // General Colors
// --white: rgb(255, 255, 255);
// // Accent Colors
// --accent-color-dim: rgb(186, 146, 0);
// --accent-color: rgb(235, 185, 5);
// --accent-color-bright: rgb(255, 200, 0);
// --accent-color-hover: var(--accent-color-bright);
// // App Colors
// --root-bg-color: rgb(255, 255, 255);
// --background-color: rgb(220, 222, 224);
// --background-color-light: rgb(250, 252, 254);
// --background-color-secondary: rgb(208, 210, 212);
// --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);
// --svg-color: rgb(50, 50, 50);
// --invalid: rgb(255, 75, 75);
// --invalid-secondary: rgb(120, 5, 5);
// --destructive-color: rgb(237, 51, 51);
// --destructive-color-hover: rgb(255, 55, 55);
// --warning-color: rgb(224, 142, 42);
// --warning-color-hover: rgb(255, 167, 60);
// // Error status colors
// --border-color-invalid: rgb(255, 80, 50);
// --box-shadow-color-invalid: none;
// // Tabs
// --tab-color: rgb(202, 204, 206);
// --tab-hover-color: rgb(196, 198, 200);
// --tab-panel-bg: 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);
// // Button Colors
// --btn-base-color: rgb(184, 186, 188);
// --btn-base-color-hover: rgb(230, 232, 234);
// --btn-load-more: rgb(202, 204, 206);
// --btn-load-more-hover: rgb(178, 180, 182);
// --btn-svg-color: rgb(0, 0, 0);
// --btn-delete-image: rgb(213, 49, 49);
// // IAI Button Colors
// --btn-checkbox-border-hover: rgb(176, 178, 182);
// // Progress Bar Color
// --progress-bar-color: rgb(235, 185, 5);
// // Prompt Box Colors
// --prompt-bg-color: rgb(225, 227, 229);
// // Switch
// --switch-bg-color: rgb(178, 180, 182);
// --switch-bg-active-color: rgb(235, 185, 5);
// // Slider
// --slider-color: var(--accent-color);
// --slider-mark-color: rgb(0, 0, 0);
// // Resizable
// --resizeable-handle-border-color: rgb(160, 162, 164);
// // 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);
// --notice-color: rgb(255, 71, 90);
// // Settings Modal
// --settings-modal-bg: rgb(202, 204, 206);
// // Input
// --input-checkbox-bg: rgb(167, 167, 171);
// --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-icon-button-bg-color: var(--switch-bg-color);
// --console-icon-button-bg-color-hover: var(--resizeable-handle-border-color);
// // Img2Img
// --img2img-img-bg-color: rgb(180, 182, 184);
// // Gallery
// // Context Menus
// --context-menu-bg-color: var(--background-color);
// --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);
// // Shadows
// --floating-button-drop-shadow-color: rgba(0, 0, 0, 0.7);
// // Canvas
// --inpainting-alerts-bg: rgba(220, 222, 224, 0.75);
// --inpainting-alerts-icon-color: rgb(0, 0, 0);
// --inpainting-alerts-bg-active: rgb(255, 200, 0);
// --inpainting-alerts-icon-active: rgb(0, 0, 0);
// --inpainting-alerts-bg-alert: var(--invalid);
// --inpainting-alerts-icon-alert: rgb(0, 0, 0);
// // Checkerboard
// --checkboard-dots-color: rgb(160, 160, 172);
// // Scrollbar
// --scrollbar-color: rgb(180, 180, 184);
// --scrollbar-color-hover: rgb(150, 150, 154);
// // SubHook
// --subhook-color: rgb(0, 0, 0);
// }