diff --git a/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx b/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx index e4de85f..4c1dc0c 100644 --- a/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx +++ b/theatre/studio/src/panels/ObjectEditorPanel/ObjectEditorPanel.tsx @@ -16,8 +16,8 @@ const Container = styled(PanelWrapper)` overflow-y: hidden; display: flex; flex-direction: column; - /* background-color: transparent; */ - background-color: #282b2ff0; + background-color: transparent; + /* background-color: #282b2ff0; */ box-shadow: none; &:after { @@ -28,7 +28,7 @@ const Container = styled(PanelWrapper)` width: 1px; bottom: 0; top: 0; - border-left: 1px solid #3a3a44; + /* border-left: 1px solid #3a3a44; */ } ` diff --git a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx index 75b8f9f..cd5e037 100644 --- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx +++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx @@ -20,15 +20,15 @@ const Container = styled.div` ` export const rowBg = css` - /* &:after { + &:after { position: absolute; display: block; - inset: 0px 0 0px calc(10px + var(--left-pad) + var(--depth) * var(--step)); + inset: 0px 0 1px calc(0px + var(--left-pad) + var(--depth) * var(--step)); content: ' '; z-index: -1; background-color: #282b2f; - opacity: 0.97; - } */ + opacity: 0.95; + } ` const Header = styled.div` @@ -42,15 +42,17 @@ const Header = styled.div` ${rowBg}; ` +export const indentationFormula = `calc(var(--left-pad) + var(--depth) * var(--step))` + const IconContainer = styled.div` width: 12px; margin-right: -12px; - margin-left: calc(var(--left-pad) + var(--depth) * var(--step)); + margin-left: ${indentationFormula}; font-size: 9px; text-align: center; transform: rotateZ(90deg); position: relative; - left: -10px; + left: -14px; ` const PropName = styled.div` diff --git a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx index 779063f..f8291e1 100644 --- a/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx +++ b/theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx @@ -8,7 +8,10 @@ import React from 'react' import type {useEditingToolsForPrimitiveProp} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/useEditingToolsForPrimitiveProp' import {shadeToColor} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/useEditingToolsForPrimitiveProp' import styled, {css} from 'styled-components' -import {rowBg} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/CompoundPropEditor' +import { + indentationFormula, + rowBg, +} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/CompoundPropEditor' export const propNameText = css` font-weight: 300; @@ -34,7 +37,7 @@ const Row = styled.div` const Left = styled.div` box-sizing: border-box; - padding-left: calc(var(--left-pad) + (var(--depth) + 1) * var(--step)); + padding-left: ${indentationFormula}; padding-right: 4px; display: flex; flex-direction: row;