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

a bunch of small css things

Browse source
This commit is contained in:
asuk 2023-05-19 18:42:20 +02:00
parent e6ceb6888a
commit cffd591186
21 changed files with 104 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx
View file

@ -64,7 +64,7 @@ const ClosePanelButton = styled.button`
display: flex;
align-items: center;
justify-content: center;
border-radius: 2px;
border-radius: 0px;
font-size: 11px;
height: 10px;
width: 18px;

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

@ -74,13 +74,22 @@ const Header = styled.div`
const Body = styled.div`
${pointerEventsAutoInNormalMode};
max-height: calc(100vh - 100px);
max-height: calc(80vh - 100px);
overflow-y: scroll;
&::-webkit-scrollbar {
display: none;
width: 6px;
}
&::-webkit-scrollbar-track {
background: #f1f1f1;
}
&::-webkit-scrollbar-thumb {
background: #c2c2c2;
}
&::-webkit-scrollbar-thumb:hover {
background: #888;
}
scrollbar-width: none;
scrollbar-width: 10px;
padding: 0;
user-select: none;

21
theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/DetailCompoundPropEditor.tsx
View file

@ -39,13 +39,13 @@ const Container = styled.div`
const Header = styled.div<{isHighlighted: PropHighlighted}>`
height: 30px;
display: flex;
display: grid;
align-items: stretch;
position: relative;
`
const Padding = styled.div<{isVectorProp: boolean}>`
padding-left: ${rowIndentationFormulaCSS};
/* padding-left: ${rowIndentationFormulaCSS}; */
display: flex;
align-items: center;
overflow: hidden;
@ -74,8 +74,9 @@ const PropName = deriver(styled.div<{isHighlighted: PropHighlighted}>`
`)
const CollapseIcon = styled.span<{isCollapsed: boolean; isVector: boolean}>`
width: 28px;
height: 28px;
width: 10px;
height: 10px;
padding-left: 10px;
font-size: 9px;
display: flex;
align-items: center;
@ -83,7 +84,7 @@ const CollapseIcon = styled.span<{isCollapsed: boolean; isVector: boolean}>`
transition: transform 0.05s ease-out, color 0.1s ease-out;
transform: rotateZ(${(props) => (props.isCollapsed ? 0 : 90)}deg);
color: #66686a;
color: black;
visibility: ${(props) =>
// If it's a vector, show the collapse icon only when it's expanded
@ -91,7 +92,7 @@ const CollapseIcon = styled.span<{isCollapsed: boolean; isVector: boolean}>`
// If it's a regular compond prop, show the collapse icon only when it's collapsed
(props.isVector && !props.isCollapsed)
? 'visible'
: 'hidden'};
: 'visible'};
${Header}:hover & {
visibility: visible;
@ -99,7 +100,7 @@ const CollapseIcon = styled.span<{isCollapsed: boolean; isVector: boolean}>`
&:hover {
transform: rotateZ(${(props) => (props.isCollapsed ? 15 : 75)}deg);
color: #c0c4c9;
color: black;
}
`
@ -147,12 +148,14 @@ const InputContainer = styled.div`
display: flex;
align-items: center;
justify-content: stretch;
padding: 0 8px 0 2px;
padding: 0 0px 0 0px;
box-sizing: border-box;
height: 100%;
width: var(--right-width);
width: 100%;
flex-shrink: 0;
flex-grow: 0;
padding-bottom: 4px;
padding-top: 4px;
`
export type ICompoundPropDetailEditorProps<

20
theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx
View file

@ -18,6 +18,8 @@ const Container = deriver(styled.div<{
isHighlighted: PropHighlighted
}>`
display: flex;
width: 100%;
padding-bottom: 0px;
// min-height: 30px;
justify-content: flex-start;
align-items: stretch;
@ -38,16 +40,16 @@ const Container = deriver(styled.div<{
const Left = styled.div`
box-sizing: border-box;
padding-left: ${rowIndentationFormulaCSS};
padding-right: 4px;
/* padding-left: ${rowIndentationFormulaCSS}; */
/* padding-right: 4px;*/
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
gap: 4px;
flex-grow: 0;
flex-shrink: 0;
width: calc(100% - var(--right-width));
flex-grow: 1;
flex-shrink: 1;
width: 100%;
`
const PropNameContainer = deriver(styled.div<{
@ -65,7 +67,7 @@ const PropNameContainer = deriver(styled.div<{
${propNameTextCSS};
&:hover {
color: white;
color: blue;
}
`)
@ -80,12 +82,14 @@ const InputContainer = styled.div`
display: flex;
align-items: center;
justify-content: stretch;
padding: 0 8px 0 2px;
padding: 0 0px 0 0px;
box-sizing: border-box;
height: 100%;
width: var(--right-width);
width: 50%;
flex-shrink: 0;
flex-grow: 0;
padding-bottom: 4px;
padding-top: 4px;
`
type ISingleRowPropEditorProps<T> = {

2
theatre/studio/src/panels/DetailPanel/ObjectDetails.tsx
View file

@ -19,7 +19,7 @@ const ActionButton = styled.button`
align-items: center;
justify-content: center;
outline: none;
border-radius: 2px;
border-radius: 0px;
color: #a8a8a9;
background: rgba(255, 255, 255, 0.1);

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

@ -19,13 +19,12 @@ export const BaseHeader = styled.div``
const Header = styled(BaseHeader)`
position: relative;
margin-top: 2px;
margin-bottom: 2px;
margin-left: calc(4px + var(--depth) * 16px);
padding-left: 4px;
padding-right: 8px;
gap: 4px;
height: 21px;
min-height: 21px;
line-height: 0;
box-sizing: border-box;
display: flex;
@ -38,7 +37,7 @@ const Header = styled(BaseHeader)`
color: rgba(0, 0, 0, 0.8);
background: rgba(255, 255, 255, 0.65);
backdrop-filter: blur(14px);
backdrop-filter: blur(2px);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
&.descendant-is-selected {
@ -47,18 +46,18 @@ const Header = styled(BaseHeader)`
${pointerEventsAutoInNormalMode};
&:not(.not-selectable):not(.selected):hover {
background: rgba(142, 142, 142, 1);
/* background: rgba(142, 142, 142, 1);
border-bottom: 1px solid rgba(255, 255, 255, 0.24);
border-bottom: 1px solid rgba(255, 255, 255, 0.24); */
}
&:not(.not-selectable):not(.selected):active {
background: rgba(82, 88, 96, 0.9);
border-bottom: 1px solid rgba(255, 255, 255, 0.24);
/* background: rgba(82, 88, 96, 0.9);
border-bottom: 1px solid rgba(255, 255, 255, 0.24);*/
}
&.selected {
background: rgba(142, 142, 142, 1);
/* background: rgba(142, 142, 142, 1);*/
}
@supports not (backdrop-filter: blur()) {
@ -81,7 +80,7 @@ const Head_Label = styled.span`
// Compensate for border bottom
top: 0.5px;
display: flex;
height: 20px;
min-height: 20px;
align-items: center;
box-sizing: border-box;
`

2
theatre/studio/src/panels/OutlinePanel/ProjectsList/ProjectListItem.tsx
View file

@ -14,7 +14,7 @@ const ConflictNotice = styled.div`
margin-left: 11px;
background: #4c282d;
padding: 2px 8px;
border-radius: 2px;
border-radius: 0px;
font-size: 10px;
box-shadow: 0 2px 8px -4px black;
`

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

@ -65,7 +65,7 @@ const OptionsContainer = styled.div`
const SearchBox = styled.input.attrs({type: 'text'})`
background-color: ${COLOR_BASE};
border: none;
border-radius: 2px;
border-radius: 0px;
color: rgba(255, 255, 255, 0.8);
padding: 6px;
font-size: 12px;

2
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/EasingOption.tsx
View file

@ -17,7 +17,7 @@ const Wrapper = styled.div<{isSelected: boolean}>`
transition: background-color 0.15s;
background-color: ${COLOR_BASE};
border-radius: 2px;
border-radius: 0px;
cursor: pointer;
outline: none;

4
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthIndicator.tsx
View file

@ -71,7 +71,7 @@ const Tooltip = styled.div`
font-size: 10px;
white-space: nowrap;
padding: 2px 8px;
border-radius: 2px;
border-radius: 0px;
${pointerEventsAutoInNormalMode};
cursor: ew-resize;
color: #464646;
@ -89,7 +89,7 @@ const Tumb = styled.div`
font-size: 10px;
white-space: nowrap;
padding: 1px 2px;
border-radius: 2px;
border-radius: 0px;
${pointerEventsAutoInNormalMode};
justify-content: center;
align-items: center;

9
theatre/studio/src/propEditors/DefaultValueIndicator.tsx
View file

@ -31,16 +31,19 @@ const Rect = styled.rect`
const DefaultIcon = styled.div`
width: 5px;
height: 5px;
border-radius: 1px;
/* border: 1px solid currentColor; */
background-color: currentColor;
border-radius: 0px;
transform: rotate(45deg);
border: 1px solid grey;
`
const FilledIcon = styled.div`
width: 5px;
height: 5px;
background-color: currentColor;
border-radius: 1px;
border-radius: 0px;
transform: rotate(45deg);
border: 1px solid grey;
`
const DefaultOrStaticValueIndicator: React.FC<{hasStaticOverride: boolean}> = (

55
theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx
View file

@ -2,7 +2,6 @@ import type {Keyframe} from '@theatre/core/projects/store/types/SheetState_Histo
import type {StudioSheetItemKey} from '@theatre/shared/utils/ids'
import type {VoidFn} from '@theatre/shared/utils/types'
import {pointerEventsAutoInNormalMode} from '@theatre/studio/css'
import {transparentize} from 'polished'
import React from 'react'
import styled, {css} from 'styled-components'
import {PresenceFlag} from '@theatre/studio/uiComponents/usePresence'
@ -41,7 +40,7 @@ const Container = styled.div`
content: ' ';
display: none;
z-index: -1;
background: ${transparentize(0.2, 'black')};
background: transparent;
}
&:hover {
@ -122,7 +121,7 @@ const Prev = styled(PrevOrNextButton)<{
}>`
transform: translateX(2px);
${Container}:hover & {
transform: translateX(-7px);
transform: translateX(-2px);
}
`
const Next = styled(PrevOrNextButton)<{
@ -131,7 +130,7 @@ const Next = styled(PrevOrNextButton)<{
}>`
transform: translateX(-2px);
${Container}:hover & {
transform: translateX(7px);
transform: translateX(2px);
}
`
@ -145,28 +144,40 @@ namespace Icons {
export const Prev = () => (
<svg
width="12"
height="12"
viewBox="0 0 12 12"
width="6.5"
height="9.3"
viewBox="0 0 6.5 9.3"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<Chevron_Group transform={`translate(6 3)`}>
<path d="M4 1L1 4L4 7" stroke="currentColor" />
<Chevron_Group transform={`translate(0 0)`}>
<path
fill="black"
d="M3.8,0c0.4,0,0.8,0.2,0.8,0.6c0,0.5-2.8,3-2.8,4c0,1,2.8,3.4,2.8,4c0,0.4-0.3,0.6-0.8,0.6C2.4,9.3,0,5.8,0,4.6
C0,3.5,2.4,0,3.8,0z M11,0.4c1.1,0,4.2,3,4.2,4.2c0,1.1-3,4.2-4.2,4.2c-1.1,0-4.2-3-4.2-4.2C6.8,3.4,9.9,0.4,11,0.4z M17.5,0.6
c0-0.4,0.3-0.6,0.8-0.6C19.6,0,22,3.5,22,4.6c0,1.2-2.4,4.6-3.8,4.6c-0.4,0-0.8-0.2-0.8-0.6c0-0.7,2.8-3.1,2.8-4
C20.3,3.6,17.5,1.1,17.5,0.6z"
/>
</Chevron_Group>
</svg>
)
export const Next = () => (
<svg
width="12"
height="12"
viewBox="0 0 12 12"
width="6.5"
height="9.3"
viewBox="0 0 6.5 9.3"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<Chevron_Group transform={`translate(1 3)`}>
<path d="M1 1L4 4L1 7" stroke="currentColor" />
<Chevron_Group transform={`translate(2 0)`}>
<path
fill="black"
d="M-13.7,0c0.4,0,0.8,0.2,0.8,0.6c0,0.5-2.8,3-2.8,4c0,1,2.8,3.4,2.8,4c0,0.4-0.3,0.6-0.8,0.6
c-1.3,0-3.8-3.4-3.8-4.6C-17.5,3.5-15.1,0-13.7,0z M-6.5,0.4c1.1,0,4.2,3,4.2,4.2c0,1.1-3,4.2-4.2,4.2c-1.1,0-4.2-3-4.2-4.2
C-10.7,3.4-7.6,0.4-6.5,0.4z M0,0.6C0,0.2,0.3,0,0.8,0c1.3,0,3.8,3.5,3.8,4.6c0,1.2-2.4,4.6-3.8,4.6C0.3,9.3,0,9,0,8.7
c0-0.7,2.8-3.1,2.8-4C2.8,3.6,0,1.1,0,0.6z"
/>
</Chevron_Group>
</svg>
)
@ -181,14 +192,20 @@ namespace Icons {
export const Cur = () => (
<svg
width="12"
height="14"
viewBox="0 0 8 12"
width="8.3"
height="9.3"
viewBox="0 0 8.3 9.3"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<Cur_Group transform="translate(1 4)">
<path d="M3 0L6 3L3 6L0 3L3 0Z" fill="currentColor" />
<Cur_Group transform="translate(0 0)">
<path
fill="black"
d="M-3.1,0c0.4,0,0.8,0.2,0.8,0.6c0,0.5-2.8,3-2.8,4c0,1,2.8,3.4,2.8,4c0,0.4-0.3,0.6-0.8,0.6
c-1.3,0-3.8-3.4-3.8-4.6C-6.8,3.5-4.4,0-3.1,0z M4.2,0.4c1.1,0,4.2,3,4.2,4.2c0,1.1-3,4.2-4.2,4.2C3,8.7,0,5.7,0,4.6
C0,3.4,3,0.4,4.2,0.4z M10.7,0.6C10.7,0.2,11,0,11.4,0c1.3,0,3.8,3.5,3.8,4.6c0,1.2-2.4,4.6-3.8,4.6c-0.4,0-0.8-0.2-0.8-0.6
c0-0.7,2.8-3.1,2.8-4C13.5,3.6,10.7,1.1,10.7,0.6z"
/>
</Cur_Group>
</svg>
)

2
theatre/studio/src/toolbars/MoreMenu/MoreMenu.tsx
View file

@ -6,7 +6,7 @@ import styled from 'styled-components'
const Container = styled.div`
width: 138px;
border-radius: 2px;
border-radius: 0px;
background-color: rgba(42, 45, 50, 0.9);
position: absolute;
display: flex;

2
theatre/studio/src/uiComponents/DetailPanelButton.tsx
View file

@ -3,7 +3,7 @@ import styled from 'styled-components'
const DetailPanelButton = styled.button<{disabled?: boolean}>`
text-align: center;
padding: 8px;
border-radius: 2px;
border-radius: 0px;
border: 1px solid #627b7b87;
background-color: #4b787d3d;
color: #eaeaea;

2
theatre/studio/src/uiComponents/colorPicker/components/common/Alpha.tsx
View file

@ -13,7 +13,7 @@ import styled from 'styled-components'
const Container = styled.div`
position: relative;
height: 16px;
border-radius: 2px;
border-radius: 0px;
// Checkerboard
background-color: #fff;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><rect x="8" width="8" height="8"/><rect y="8" width="8" height="8"/></svg>');

2
theatre/studio/src/uiComponents/colorPicker/components/common/Hue.tsx
View file

@ -12,7 +12,7 @@ import styled from 'styled-components'
const Container = styled.div`
position: relative;
height: 16px;
border-radius: 2px;
border-radius: 0px;
background: linear-gradient(
to right,

2
theatre/studio/src/uiComponents/colorPicker/components/common/Pointer.tsx
View file

@ -14,7 +14,7 @@ const Container = styled.div`
transform: translate(-50%, -50%);
background-color: #fff;
border: 1px solid #ffffff00;
border-radius: 2px;
border-radius: 0px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
${StyledInteractive}:focus & {

2
theatre/studio/src/uiComponents/colorPicker/components/common/Saturation.tsx
View file

@ -13,7 +13,7 @@ const Container = styled.div`
flex-grow: 1;
border-color: transparent; /* Fixes https://github.com/omgovich/react-colorful/issues/139 */
border-bottom: 12px solid #000;
border-radius: 2px;
border-radius: 0px;
background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)),
linear-gradient(to right, #fff, rgba(255, 255, 255, 0));

5
theatre/studio/src/uiComponents/form/BasicNumberInput.tsx
View file

@ -51,7 +51,8 @@ const Input = styled.input`
width: 100%;
height: calc(100% - 4px);
border-radius: 0px;
margin-bottom: 10px;
margin-bottom: 0px;
text-align: center;
&:focus {
cursor: text;
@ -60,7 +61,7 @@ const Input = styled.input`
const FillIndicator = styled.div`
position: absolute;
inset: 0px 0px 10px;
inset: 0px 0px 0px;
transform: scale(var(--percentage), 1);
transform-origin: top left;
background-color: #b4b4b4;

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

@ -25,7 +25,7 @@ export const Container = styled.button`
backdrop-filter: blur(14px);
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 2px;
border-radius: 0px;
svg {
display: block;

2
theatre/studio/src/uiComponents/toolbar/ToolbarSwitchSelectContainer.ts
View file

@ -5,7 +5,7 @@ const Container = styled(Group)`
display: flex;
height: fit-content;
backdrop-filter: blur(14px);
border-radius: 2px;
border-radius: 0px;
`
export default Container