diff --git a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx index 339ba9e..9a3043e 100644 --- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx +++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx @@ -33,9 +33,9 @@ export const rowBg = css` &:before { height: 2px; right: 0; - bottom: -1px; + bottom: 0px; left: calc(-2px + var(--left-pad) + var(--depth) * var(--step)); - background-color: ${transparentize(0.3, rowBgColor)}; + background-color: ${transparentize(0.2, rowBgColor)}; } ` diff --git a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx index dc4cacb..d3aaaf8 100644 --- a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx +++ b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx @@ -7,14 +7,17 @@ import {transparentize, darken, opacify, lighten} from 'polished' import {rowBgColor} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor' import {pointerEventsAutoInNormalMode} from '@theatre/studio/css' -export const Container = styled.li<{depth: number}>` - --depth: ${(props) => props.depth}; +export const Container = styled.li` margin: 0; padding: 0; list-style: none; + display: flex; + justify-content: flex-start; + flex-direction: column; + align-items: flex-start; ` -export const BaseHeader = styled.div<{}>`` +export const BaseHeader = styled.div`` const baseBg = lighten(0.05, rowBgColor) @@ -25,6 +28,7 @@ export const outlinePanelTheme = {baseBg, baseFontColor, baseBorderColor} const Header = styled(BaseHeader)` padding-left: calc(4px + var(--depth) * 16px); + padding-right: 8px; height: 24px; box-sizing: border-box; display: flex; @@ -155,7 +159,12 @@ const BaseItem: React.FC<{ const canContainChildren = children !== undefined return ( - +
{canContainChildren ? (