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

feat(ui): pedantic mantine select theming

Browse Source
This commit is contained in:
psychedelicious 2023-06-12 21:27:31 +10:00
parent 9cfbea4c25
commit 14cdc800c3
1 changed files with 24 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
View File

@ -9,32 +9,46 @@ const IAIMantineSelect = (props: IAISelectProps) => {
<Select <Select
searchable={searchable} searchable={searchable}
styles={() => ({ styles={() => ({
root: {},
label: { label: {
color: 'var(--invokeai-colors-base-300)', color: 'var(--invokeai-colors-base-300)',
fontWeight: 'normal', fontWeight: 'normal',
}, },
input: { input: {
backgroundColor: 'var(--invokeai-colors-base-900)', backgroundColor: 'var(--invokeai-colors-base-900)',
border: 'none', borderWidth: '2px',
borderColor: 'var(--invokeai-colors-base-800)',
color: 'var(--invokeai-colors-base-100)', color: 'var(--invokeai-colors-base-100)',
fontWeight: 500, fontWeight: 600,
'&:hover': { borderColor: 'var(--invokeai-colors-base-700)' },
'&:focus': {
borderColor: 'var(--invokeai-colors-accent-600)',
},
}, },
dropdown: { dropdown: {
backgroundColor: 'var(--invokeai-colors-base-800)', backgroundColor: 'var(--invokeai-colors-base-800)',
borderColor: 'var(--invokeai-colors-base-700)', borderColor: 'var(--invokeai-colors-base-700)',
}, },
item: { item: {
color: 'var(--invokeai-colors-base-300)', backgroundColor: 'var(--invokeai-colors-base-800)',
':hover': { color: 'var(--invokeai-colors-base-200)',
color: 'var(--invokeai-colors-base-300)', '&[data-hovered]': {
backgroundColor: 'var(--invokeai-colors-accent-750)', color: 'var(--invokeai-colors-base-100)',
backgroundColor: 'var(--invokeai-colors-base-750)',
},
'&[data-active]': {
backgroundColor: 'var(--invokeai-colors-base-750)',
'&:hover': {
color: 'var(--invokeai-colors-base-100)',
backgroundColor: 'var(--invokeai-colors-base-750)',
},
}, },
'&[data-selected]': { '&[data-selected]': {
color: 'var(--invokeai-colors-base-300)', color: 'var(--invokeai-colors-base-50)',
backgroundColor: 'var(--invokeai-colors-accent-750)', backgroundColor: 'var(--invokeai-colors-accent-750)',
fontWeight: 500, fontWeight: 600,
':hover': { '&:hover': {
backgroundColor: 'var(--invokeai-colors-accent-750)', backgroundColor: 'var(--invokeai-colors-accent-700)',
}, },
}, },
}, },