antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2026-03-01 12:44:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

styling

Browse Source
This commit is contained in:
Anton Tranelis 2025-05-29 11:48:25 +02:00
parent 353ca60398
commit ab5e31b29f
3 changed files with 25 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/Components/Input/TextAreaInput.tsx
View File

@ -38,14 +38,15 @@ export function TextAreaInput({
const containerRef = useRef<HTMLDivElement>(null)
const [containerHeight, setContainerHeight] = useState<string>('100%')
const [containerHeight, setContainerHeight] = useState<string>('0px')
useEffect(() => {
if (containerRef.current) {
const height = containerRef.current.offsetHeight
setContainerHeight(`${height - 200}px`)
setContainerHeight(`${height - 61}px`)
console.log(height)
}
}, [])
}, [containerStyle])
useEffect(() => {
setInputValue(defaultValue)
@ -75,9 +76,11 @@ export function TextAreaInput({
status: false,
lineNumbers: false,
minHeight: size === 'small' ? '100%' : '100%',
maxHeight: size === 'small' ? '30px' : containerHeight,
maxHeight: size === 'small' ? '50px' : containerHeight,
forceSync: true,
autoDownloadFontAwesome: false,
nativeSpellcheck: false,
spellChecker: false,
/*
autoDownloadFontAwesome?: boolean;
autofocus?: boolean;

2
src/Components/Profile/Templates/TabsForm.tsx
View File

@ -101,7 +101,7 @@ export const TabsForm = ({
}))
}
size='full'
containerStyle='tw:grow'
containerStyle='tw:grow tw:h-full'
inputStyle={`tw:h-full ${!item.layer.itemType.show_start_end_input && 'tw:border-t-0 tw:rounded-tl-none'}`}
/>
<TextAreaInput

20
src/assets/css/easymde.css
View File

@ -49,7 +49,12 @@
.CodeMirror {
background-color: var(--color-base-100) !important;
color: var(--color-base-content) !important;
caret-color: var(--color-base-content) !important;
border-color: color-mix(in oklab, var(--color-base-content) 20%, #0000)!important;
border-end-start-radius: var(--radius-field) !important;
border-end-end-radius: var(--radius-field) !important;
border-width: var(--border) !important;
border-top-width: 0 !important;
}
.editor-preview-side {
@ -57,7 +62,16 @@
color: var(--color-base-content) !important;
}
.hide-toolbar .EasyMDEContainer .editor-toolbar {
display: none;
.editor-toolbar {
padding: 3px 10px !important;
border-color: color-mix(in oklab, var(--color-base-content) 20%, #0000)!important;
border-start-start-radius: var(--radius-field) !important;
border-start-end-radius: var(--radius-field) !important;
border-width: var(--border) !important;
}
.separator {
border-color: color-mix(in oklab, var(--color-base-content) 20%, #0000)!important;
border-width: 1px !important;
}
}