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

Styling updates

Browse Source
This commit is contained in:
psychedelicious 2022-11-20 19:35:32 +11:00 committed by blessedcoolant
parent b81231823e
commit b72b61b790
7 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/features/canvas/components/IAICanvasGrid.tsx
View File

@ -21,6 +21,12 @@ const selector = createSelector(
}
);
const gridLinesColor = {
dark: 'rgba(255, 255, 255, 0.2)',
green: 'rgba(255, 255, 255, 0.2)',
light: 'rgba(0, 0, 0, 0.2)',
};
const IAICanvasGrid = () => {
const { colorMode } = useColorMode();
const { stageScale, stageCoordinates, stageDimensions } =
@ -35,8 +41,7 @@ const IAICanvasGrid = () => {
);
useLayoutEffect(() => {
const gridLineColor =
colorMode === 'light' ? 'rgba(136, 136, 136, 1)' : 'rgba(84, 84, 84, 1)';
const gridLineColor = gridLinesColor[colorMode];
const { width, height } = stageDimensions;
const { x, y } = stageCoordinates;

1
frontend/src/features/gallery/components/HoverableImage.tsx
View File

@ -167,6 +167,7 @@ const HoverableImage = memo((props: HoverableImageProps) => {
className="hoverable-image"
onMouseOver={handleMouseOver}
onMouseOut={handleMouseOut}
userSelect={'none'}
>
<Image
className="hoverable-image-image"

3
frontend/src/features/tabs/components/FloatingButton.scss
View File

@ -48,5 +48,8 @@
}
.show-hide-button-gallery {
padding-left: 0.75rem;
padding-right: 0.75rem;
background-color: var(--background-color) !important;
filter: drop-shadow(0.5rem 0px 1rem var(--floating-button-drop-shadow-color));
}

5
frontend/src/features/tabs/components/InvokeOptionsPanel.tsx
View File

@ -155,6 +155,11 @@ const InvokeOptionsPanel = (props: Props) => {
onMouseOver={
!shouldPinOptionsPanel ? cancelCloseOptionsPanelTimer : undefined
}
style={{
borderRight: !shouldPinOptionsPanel
? '0.3rem solid var(--tab-list-text-inactive)'
: '',
}}
>
<div className="options-panel-margin">
<div

2
frontend/src/styles/Themes/_Colors_Dark.scss
View File

@ -119,7 +119,7 @@
--context-menu-bg-color-hover: rgb(30, 32, 42);
// Shadows
--floating-button-drop-shadow: drop-shadow(0 0 1rem rgba(140, 101, 255, 0.5));
--floating-button-drop-shadow-color: var(--accent-color);
// Canvas
--inpainting-alerts-bg: rgba(20, 20, 26, 0.75);

2
frontend/src/styles/Themes/_Colors_Green.scss
View File

@ -117,7 +117,7 @@
--context-menu-bg-color-hover: rgb(30, 32, 42);
// Shadows
--floating-button-drop-shadow: drop-shadow(0 0 1rem rgba(140, 101, 255, 0.5));
--floating-button-drop-shadow-color: var(--accent-color);
// Canvas
--inpainting-alerts-bg: rgba(20, 20, 26, 0.75);

2
frontend/src/styles/Themes/_Colors_Light.scss
View File

@ -114,7 +114,7 @@
--context-menu-bg-color-hover: var(--background-color-secondary);
// Shadows
--floating-button-drop-shadow: drop-shadow(0 0 1rem rgba(0, 0, 0, 0.3));
--floating-button-drop-shadow-color: rgba(0, 0, 0, 0.7);
// Canvas
--inpainting-alerts-bg: rgba(220, 222, 224, 0.75);