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

Update Icon Button Checkbox Style Styling

Browse Source
This commit is contained in:
blessedcoolant 2022-11-03 00:50:44 +13:00 committed by Lincoln Stein
parent d439abdb89
commit 1d9edbd0dd
3 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/common/components/IAIIconButton.scss
View File

@ -24,22 +24,26 @@
} }
&[data-as-checkbox='true'] { &[data-as-checkbox='true'] {
border: 2px solid var(--switch-bg-color); background-color: var(--btn-grey);
background: none !important; border: 3px solid var(--btn-grey);
svg { svg {
fill: var(--input-checkbox-bg); fill: var(--text-color);
} }
&:hover { &:hover {
background-color: var(--btn-grey);
border-color: var(--btn-checkbox-border-hover);
svg { svg {
fill: var(--text-color-secondary); fill: var(--text-color);
} }
border-color: var(--accent-color);
} }
&[data-selected='true'] { &[data-selected='true'] {
border-color: var(--accent-color); border-color: var(--accent-color);
&:hover { background-color: var(--btn-grey);
border-color: var(--accent-color-hover); svg {
fill: var(--text-color);
} }
} }
} }

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

@ -46,6 +46,9 @@
--btn-load-more: rgb(30, 32, 42); --btn-load-more: rgb(30, 32, 42);
--btn-load-more-hover: rgb(54, 56, 66); --btn-load-more-hover: rgb(54, 56, 66);
// IAI Button Colors
--btn-checkbox-border-hover: rgb(46, 48, 68);
// Switch // Switch
--switch-bg-color: rgb(100, 102, 110); --switch-bg-color: rgb(100, 102, 110);
--switch-bg-active-color: rgb(80, 40, 200); --switch-bg-active-color: rgb(80, 40, 200);

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

@ -46,6 +46,9 @@
--btn-load-more: rgb(202, 204, 206); --btn-load-more: rgb(202, 204, 206);
--btn-load-more-hover: rgb(178, 180, 182); --btn-load-more-hover: rgb(178, 180, 182);
// IAI Button Colors
--btn-checkbox-border-hover: rgb(176, 178, 182);
// Switch // Switch
--switch-bg-color: rgb(178, 180, 182); --switch-bg-color: rgb(178, 180, 182);
--switch-bg-active-color: rgb(235, 185, 5); --switch-bg-active-color: rgb(235, 185, 5);