antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2026-04-06 01:25:33 +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 containerRef = useRef<HTMLDivElement>(null)
const [containerHeight, setContainerHeight] = useState<string>('100%') const [containerHeight, setContainerHeight] = useState<string>('0px')
useEffect(() => { useEffect(() => {
if (containerRef.current) { if (containerRef.current) {
const height = containerRef.current.offsetHeight const height = containerRef.current.offsetHeight
setContainerHeight(`${height - 200}px`) setContainerHeight(`${height - 61}px`)
console.log(height)
} }
}, []) }, [containerStyle])
useEffect(() => { useEffect(() => {
setInputValue(defaultValue) setInputValue(defaultValue)
@ -75,9 +76,11 @@ export function TextAreaInput({
status: false, status: false,
lineNumbers: false, lineNumbers: false,
minHeight: size === 'small' ? '100%' : '100%', minHeight: size === 'small' ? '100%' : '100%',
maxHeight: size === 'small' ? '30px' : containerHeight, maxHeight: size === 'small' ? '50px' : containerHeight,
forceSync: true, forceSync: true,
autoDownloadFontAwesome: false, autoDownloadFontAwesome: false,
nativeSpellcheck: false,
spellChecker: false,
/* /*
autoDownloadFontAwesome?: boolean; autoDownloadFontAwesome?: boolean;
autofocus?: boolean; autofocus?: boolean;

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

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

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

@ -49,7 +49,12 @@
.CodeMirror { .CodeMirror {
background-color: var(--color-base-100) !important; background-color: var(--color-base-100) !important;
color: var(--color-base-content) !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 { .editor-preview-side {
@ -57,7 +62,16 @@
color: var(--color-base-content) !important; color: var(--color-base-content) !important;
} }
.hide-toolbar .EasyMDEContainer .editor-toolbar { .editor-toolbar {
display: none; 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;
} }
} }