variablelab/theatre
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

changed css

Browse source
This commit is contained in:
asuk 2023-06-09 08:35:16 +02:00
parent a47ca9254f
commit 8d7a3007e2
15 changed files with 44 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/r3f/src/extension/components/SnapshotEditor.tsx
View file

@ -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);
}
`

4
theatre/studio/src/notify.tsx
View file

@ -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);
}
`

3
theatre/studio/src/panels/BasePanel/common.tsx
View file

@ -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;

5
theatre/studio/src/panels/DetailPanel/DetailPanel.tsx
View file

@ -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) => {
<Title
title={`${obj.sheet.address.sheetId}: ${obj.sheet.address.sheetInstanceId} > ${obj.address.objectKey}`}
>
<TitleBar_Piece>{obj.sheet.address.sheetId} </TitleBar_Piece>
{/*<TitleBar_Piece>{obj.sheet.address.sheetId} </TitleBar_Piece>
<TitleBar_Punctuation>{':'}&nbsp;</TitleBar_Punctuation>
<TitleBar_Piece>
{obj.sheet.address.sheetInstanceId}{' '}
</TitleBar_Piece>
<TitleBar_Punctuation>&nbsp;&rarr;&nbsp;</TitleBar_Punctuation>
<TitleBar_Punctuation>&nbsp;&rarr;&nbsp;</TitleBar_Punctuation>*/}
<TitleBar_Piece>{obj.address.objectKey}</TitleBar_Piece>
</Title>
</Header>

8
theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
View file

@ -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)
}}
>
<ChevronDown />
</Head_Icon_WithDescendants>
></Head_Icon_WithDescendants>
) : (
<Package />
)}

42
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeVisualDot.tsx
View file

@ -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"
>
<rect
x="4.46443"
y="10.0078"
width="5"
height="5"
transform="rotate(-45 4.46443 10.0078)"
fill="#212327" // background knockout fill
stroke={selectionColorSome(theme)}
/>
<rect
x="3.75732"
y="6.01953"
x="5.46443"
y="11.0078"
width="6"
height="6"
transform="rotate(-45 4.46443 10.0078)"
fill={selectionColorSome(theme)} // background knockout fill
stroke="none"
rx="2"
/>
<rect
x="4.75732"
y="7.01953"
width="7"
height="7"
transform="rotate(-45 3.75732 6.01953)"
fill={selectionColorAll(theme)}
stroke={theme.flag === PresenceFlag.Primary ? 'white' : undefined}
@ -116,13 +117,14 @@ const AggregateDotSomeHereSvg = (theme: IDotThemeValues) => (
<rect
x="4.46443"
y="8"
width="5"
height="5"
width="6"
height="6"
rx="2"
transform="rotate(-45 4.46443 8)"
fill="#23262B"
stroke={
theme.flag === PresenceFlag.Primary ? 'white' : selectionColorAll(theme)
}
fill="#000000b3"
// stroke={
// theme.flag === PresenceFlag.Primary ? 'white' : selectionColorAll(theme)
// }
strokeWidth={theme.flag === PresenceFlag.Primary ? '2px' : undefined}
/>
</svg>

2
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/colors.ts
View file

@ -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'

7
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot.tsx
View file

@ -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<IDiamond>`
background: ${(props) => selectBackgroundForDiamond(props)};
transform: rotateZ(45deg);
border-radius: 2px;
${(props) =>
props.flag === PresenceFlag.Primary ? 'outline: 2px solid white;' : ''};

2
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/keyframeRowUI/ConnectorLine.tsx
View file

@ -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

2
theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/TopStrip.tsx
View file

@ -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};
`

5
theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx
View file

@ -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<SequenceEditorPanelLayout>}> = ({
}}
>
<TitleBar>
<TitleBar_Piece>{sheet.address.sheetId} </TitleBar_Piece>
{/* <TitleBar_Piece>{sheet.address.sheetId} </TitleBar_Piece>
<TitleBar_Punctuation>{':'}&nbsp;</TitleBar_Punctuation>
<TitleBar_Piece>{sheet.address.sheetInstanceId} </TitleBar_Piece>
<TitleBar_Punctuation>&nbsp;{'>'}&nbsp;</TitleBar_Punctuation>
<TitleBar_Punctuation>&nbsp;{'>'}&nbsp;</TitleBar_Punctuation>*/}
<TitleBar_Piece>Sequence</TitleBar_Piece>
</TitleBar>
</Header_Container>

1
theatre/studio/src/panels/SequenceEditorPanel/VerticalScrollContainer.tsx
View file

@ -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 {

1
theatre/studio/src/uiComponents/Popover/BasicPopover.tsx
View file

@ -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 {

5
theatre/studio/src/uiComponents/icons/Package.tsx
View file

@ -10,10 +10,7 @@ function Package(props: React.SVGProps<SVGSVGElement>) {
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M8.339 4.5l-2.055.644 4.451 1.393v2.748l-2.966.928-2.504-.783V6.738l2.42.758 2.055-.644-4.458-1.395L4 5.858v4.463L7.768 11.5 12 10.175V5.646L8.339 4.5z"
fill="currentColor"
/>
<circle cx="8" cy="8" r="4" fill="currentColor" />
</svg>
)
}

2
theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx
View file

@ -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);
}
`