diff --git a/packages/r3f/src/extension/components/SnapshotEditor.tsx b/packages/r3f/src/extension/components/SnapshotEditor.tsx index 8d98067..db6dcce 100644 --- a/packages/r3f/src/extension/components/SnapshotEditor.tsx +++ b/packages/r3f/src/extension/components/SnapshotEditor.tsx @@ -140,7 +140,7 @@ const WaitForSceneInitMessage = styled.div<{active?: boolean}>` background: rgba(40, 43, 47, 0.8); @supports not (backdrop-filter: blur()) { - background-color: rgba(40, 43, 47, 0.95); + // background-color: rgba(40, 43, 47, 0.95); } ` diff --git a/theatre/studio/src/notify.tsx b/theatre/studio/src/notify.tsx index b94971f..3946d51 100644 --- a/theatre/studio/src/notify.tsx +++ b/theatre/studio/src/notify.tsx @@ -94,7 +94,7 @@ const NotificationContainer = styled.div` backdrop-filter: blur(14px); @supports not (backdrop-filter: blur()) { - background: rgba(40, 43, 47, 0.95); + // background: rgba(40, 43, 47, 0.95); } ` @@ -300,7 +300,7 @@ const Button = styled.button<{danger?: boolean}>` } @supports not (backdrop-filter: blur()) { - background: rgba(40, 43, 47, 0.95); + // background: rgba(40, 43, 47, 0.95); } ` diff --git a/theatre/studio/src/panels/BasePanel/common.tsx b/theatre/studio/src/panels/BasePanel/common.tsx index 10501b8..1bce423 100644 --- a/theatre/studio/src/panels/BasePanel/common.tsx +++ b/theatre/studio/src/panels/BasePanel/common.tsx @@ -51,7 +51,8 @@ export const TitleBar = styled.div` padding: 0 10px; position: relative; color: black; - background-color: #a5a5a5; + // background-color: #a5a5a5; + border-bottom: 1px dashed #91919177; font-size: 10px; font-weight: 500; overflow: hidden; diff --git a/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx b/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx index 8df9ad4..7fb4a27 100644 --- a/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx +++ b/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx @@ -12,7 +12,6 @@ import {isProject, isSheetObject} from '@theatre/shared/instanceTypes' import { panelZIndexes, TitleBar_Piece, - TitleBar_Punctuation, } from '@theatre/studio/panels/BasePanel/common' import {pointerEventsAutoInNormalMode} from '@theatre/studio/css' import ObjectDetails from './ObjectDetails' @@ -157,14 +156,14 @@ const DetailPanel: React.FC<{}> = (props) => { ${obj.address.objectKey}`} > - <TitleBar_Piece>{obj.sheet.address.sheetId} </TitleBar_Piece> + {/*<TitleBar_Piece>{obj.sheet.address.sheetId} </TitleBar_Piece> <TitleBar_Punctuation>{':'} </TitleBar_Punctuation> <TitleBar_Piece> {obj.sheet.address.sheetInstanceId}{' '} </TitleBar_Piece> - <TitleBar_Punctuation> → </TitleBar_Punctuation> + <TitleBar_Punctuation> → </TitleBar_Punctuation>*/} <TitleBar_Piece>{obj.address.objectKey}</TitleBar_Piece> diff --git a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx index dbaaac7..03f28df 100644 --- a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx +++ b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx @@ -3,7 +3,7 @@ import React from 'react' import styled, {css} from 'styled-components' import noop from '@theatre/shared/utils/noop' import {pointerEventsAutoInNormalMode} from '@theatre/studio/css' -import {ChevronDown, Package} from '@theatre/studio/uiComponents/icons' +import { Package} from '@theatre/studio/uiComponents/icons' export const Container = styled.li` margin: 0; @@ -60,7 +60,7 @@ const Header = styled(BaseHeader)` } @supports not (backdrop-filter: blur()) { - background: rgba(40, 43, 47, 0.95); + // background: rgba(40, 43, 47, 0.95); } ` @@ -169,9 +169,7 @@ const BaseItem: React.FC<{ evt.preventDefault() setIsCollapsed?.(!collapsed) }} - > - - + > ) : ( )} diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeVisualDot.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeVisualDot.tsx index 1af3b40..b60271b 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeVisualDot.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeVisualDot.tsx @@ -58,9 +58,9 @@ type IDotThemeValues = { isSelected: AggregateKeyframePositionIsSelected | undefined flag: PresenceFlag | undefined } -const SELECTED_COLOR = '#F2C95C' -const DEFAULT_PRIMARY_COLOR = '#40AAA4' -const DEFAULT_SECONDARY_COLOR = '#45747C' +const SELECTED_COLOR = '#5280d5' +const DEFAULT_PRIMARY_COLOR = '#ea2333' +const DEFAULT_SECONDARY_COLOR = '#c073b8' const selectionColorAll = (theme: IDotThemeValues) => theme.isSelected === AggregateKeyframePositionIsSelected.AllSelected ? SELECTED_COLOR @@ -84,19 +84,20 @@ const AggregateDotAllHereSvg = (theme: IDotThemeValues) => ( xmlns="http://www.w3.org/2000/svg" > - + ( diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/colors.ts b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/colors.ts index abb6877..fd6d849 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/colors.ts +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/colors.ts @@ -1,5 +1,5 @@ export const COLOR_POPOVER_BACK = 'rgba(156, 156, 156, 0.97);' -export const COLOR_BASE = '#272B2F' +export const COLOR_BASE = '#FFFFFF' export const COLOR_FOCUS_OUTLINE = '#ffffff' diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot.tsx index 13f6636..bb34f42 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot.tsx @@ -28,12 +28,12 @@ import usePresence, { PresenceFlag, } from '@theatre/studio/uiComponents/usePresence' -export const DOT_SIZE_PX = 6 +export const DOT_SIZE_PX = 8 const DOT_HOVER_SIZE_PX = DOT_SIZE_PX + 2 const dotTheme = { - normalColor: '#40AAA4', - selectedColor: '#F2C95C', + normalColor: '#ea2333', + selectedColor: '#1cba94', inlineEditorOpenColor: '#FCF3DC', selectedAndInlineEditorOpenColor: '#CBEBEA', } @@ -66,6 +66,7 @@ const Diamond = styled.div` background: ${(props) => selectBackgroundForDiamond(props)}; transform: rotateZ(45deg); + border-radius: 2px; ${(props) => props.flag === PresenceFlag.Primary ? 'outline: 2px solid white;' : ''}; diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/keyframeRowUI/ConnectorLine.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/keyframeRowUI/ConnectorLine.tsx index bf36b14..3e23cb9 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/keyframeRowUI/ConnectorLine.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/keyframeRowUI/ConnectorLine.tsx @@ -13,7 +13,7 @@ export type IConnectorThemeValues = { export const CONNECTOR_THEME = { normalColor: `#FFFFFF`, // (greenish-blueish)ish - selectedColor: `#8A7842`, + selectedColor: `#65d8bc`, barColor: (values: IConnectorThemeValues) => { const base = values.isSelected ? CONNECTOR_THEME.selectedColor diff --git a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/TopStrip.tsx b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/TopStrip.tsx index ef3a7c6..2259a42 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/TopStrip.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/TopStrip.tsx @@ -23,7 +23,7 @@ const Container = styled.div` height: ${topStripHeight}px; box-sizing: border-box; background: ${topStripTheme.backgroundColor}; - border-bottom: 1px solid ${topStripTheme.borderColor}; + border-bottom: 1px dashed #91919177; ${pointerEventsAutoInNormalMode}; ` diff --git a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx b/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx index 7a202a0..0404efb 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx @@ -25,7 +25,6 @@ import { panelZIndexes, TitleBar, TitleBar_Piece, - TitleBar_Punctuation, } from '@theatre/studio/panels/BasePanel/common' import type {UIPanelId} from '@theatre/shared/utils/ids' import {usePresenceListenersOnRootElement} from '@theatre/studio/uiComponents/usePresence' @@ -203,12 +202,12 @@ const Header: React.FC<{layoutP: Pointer}> = ({ }} > - {sheet.address.sheetId} + {/* {sheet.address.sheetId} {':'}  {sheet.address.sheetInstanceId} -  {'>'}  +  {'>'} */} Sequence diff --git a/theatre/studio/src/panels/SequenceEditorPanel/VerticalScrollContainer.tsx b/theatre/studio/src/panels/SequenceEditorPanel/VerticalScrollContainer.tsx index 771303a..d28d50b 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/VerticalScrollContainer.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/VerticalScrollContainer.tsx @@ -11,6 +11,7 @@ const Container = styled.div` bottom: 0; overflow-x: hidden; overflow-y: scroll; + border-bottom: 1px dashed #91919177; z-index: ${() => zIndexes.scrollableArea}; &::-webkit-scrollbar { diff --git a/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx b/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx index 3895a84..d3714ec 100644 --- a/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx +++ b/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx @@ -23,7 +23,6 @@ const Container = styled.div` border-radius: 3px; z-index: 10000; border: 1px solid var(--popover-inner-stroke); - box-shadow: 0 0 0 1px var(--popover-outer-stroke), 0 6px 8px -4px black; backdrop-filter: blur(8px); & a { diff --git a/theatre/studio/src/uiComponents/icons/Package.tsx b/theatre/studio/src/uiComponents/icons/Package.tsx index 0f6952f..7f247fb 100644 --- a/theatre/studio/src/uiComponents/icons/Package.tsx +++ b/theatre/studio/src/uiComponents/icons/Package.tsx @@ -10,10 +10,7 @@ function Package(props: React.SVGProps) { xmlns="http://www.w3.org/2000/svg" {...props} > - + ) } diff --git a/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx b/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx index d08d136..785285d 100644 --- a/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx +++ b/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx @@ -63,7 +63,7 @@ export const Container = styled.button` } @supports not (backdrop-filter: blur()) { - background: rgba(40, 43, 47, 0.95); + // background: rgba(40, 43, 47, 0.95); } `