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; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 2px; border-radius: 0px;
font-size: 11px; font-size: 11px;
height: 10px; height: 10px;
width: 18px; width: 18px;

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

@ -74,13 +74,22 @@ const Header = styled.div`
const Body = styled.div` const Body = styled.div`
${pointerEventsAutoInNormalMode}; ${pointerEventsAutoInNormalMode};
max-height: calc(100vh - 100px); max-height: calc(80vh - 100px);
overflow-y: scroll; overflow-y: scroll;
&::-webkit-scrollbar { &::-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; padding: 0;
user-select: none; 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}>` const Header = styled.div<{isHighlighted: PropHighlighted}>`
height: 30px; height: 30px;
display: flex; display: grid;
align-items: stretch; align-items: stretch;
position: relative; position: relative;
` `
const Padding = styled.div<{isVectorProp: boolean}>` const Padding = styled.div<{isVectorProp: boolean}>`
padding-left: ${rowIndentationFormulaCSS}; /* padding-left: ${rowIndentationFormulaCSS}; */
display: flex; display: flex;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
@ -74,8 +74,9 @@ const PropName = deriver(styled.div<{isHighlighted: PropHighlighted}>`
`) `)
const CollapseIcon = styled.span<{isCollapsed: boolean; isVector: boolean}>` const CollapseIcon = styled.span<{isCollapsed: boolean; isVector: boolean}>`
width: 28px; width: 10px;
height: 28px; height: 10px;
padding-left: 10px;
font-size: 9px; font-size: 9px;
display: flex; display: flex;
align-items: center; 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; transition: transform 0.05s ease-out, color 0.1s ease-out;
transform: rotateZ(${(props) => (props.isCollapsed ? 0 : 90)}deg); transform: rotateZ(${(props) => (props.isCollapsed ? 0 : 90)}deg);
color: #66686a; color: black;
visibility: ${(props) => visibility: ${(props) =>
// If it's a vector, show the collapse icon only when it's expanded // 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 // If it's a regular compond prop, show the collapse icon only when it's collapsed
(props.isVector && !props.isCollapsed) (props.isVector && !props.isCollapsed)
? 'visible' ? 'visible'
: 'hidden'}; : 'visible'};
${Header}:hover & { ${Header}:hover & {
visibility: visible; visibility: visible;
@ -99,7 +100,7 @@ const CollapseIcon = styled.span<{isCollapsed: boolean; isVector: boolean}>`
&:hover { &:hover {
transform: rotateZ(${(props) => (props.isCollapsed ? 15 : 75)}deg); transform: rotateZ(${(props) => (props.isCollapsed ? 15 : 75)}deg);
color: #c0c4c9; color: black;
} }
` `
@ -147,12 +148,14 @@ const InputContainer = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: stretch; justify-content: stretch;
padding: 0 8px 0 2px; padding: 0 0px 0 0px;
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
width: var(--right-width); width: 100%;
flex-shrink: 0; flex-shrink: 0;
flex-grow: 0; flex-grow: 0;
padding-bottom: 4px;
padding-top: 4px;
` `
export type ICompoundPropDetailEditorProps< 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 isHighlighted: PropHighlighted
}>` }>`
display: flex; display: flex;
width: 100%;
padding-bottom: 0px;
// min-height: 30px; // min-height: 30px;
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
@ -38,16 +40,16 @@ const Container = deriver(styled.div<{
const Left = styled.div` const Left = styled.div`
box-sizing: border-box; box-sizing: border-box;
padding-left: ${rowIndentationFormulaCSS}; /* padding-left: ${rowIndentationFormulaCSS}; */
padding-right: 4px; /* padding-right: 4px;*/
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
gap: 4px; gap: 4px;
flex-grow: 0; flex-grow: 1;
flex-shrink: 0; flex-shrink: 1;
width: calc(100% - var(--right-width)); width: 100%;
` `
const PropNameContainer = deriver(styled.div<{ const PropNameContainer = deriver(styled.div<{
@ -65,7 +67,7 @@ const PropNameContainer = deriver(styled.div<{
${propNameTextCSS}; ${propNameTextCSS};
&:hover { &:hover {
color: white; color: blue;
} }
`) `)
@ -80,12 +82,14 @@ const InputContainer = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: stretch; justify-content: stretch;
padding: 0 8px 0 2px; padding: 0 0px 0 0px;
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
width: var(--right-width); width: 50%;
flex-shrink: 0; flex-shrink: 0;
flex-grow: 0; flex-grow: 0;
padding-bottom: 4px;
padding-top: 4px;
` `
type ISingleRowPropEditorProps<T> = { type ISingleRowPropEditorProps<T> = {

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

@ -19,7 +19,7 @@ const ActionButton = styled.button`
align-items: center; align-items: center;
justify-content: center; justify-content: center;
outline: none; outline: none;
border-radius: 2px; border-radius: 0px;
color: #a8a8a9; color: #a8a8a9;
background: rgba(255, 255, 255, 0.1); 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)` const Header = styled(BaseHeader)`
position: relative; position: relative;
margin-top: 2px;
margin-bottom: 2px; margin-bottom: 2px;
margin-left: calc(4px + var(--depth) * 16px); margin-left: calc(4px + var(--depth) * 16px);
padding-left: 4px; padding-left: 4px;
padding-right: 8px; padding-right: 8px;
gap: 4px; gap: 4px;
height: 21px; min-height: 21px;
line-height: 0; line-height: 0;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
@ -38,7 +37,7 @@ const Header = styled(BaseHeader)`
color: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.8);
background: rgba(255, 255, 255, 0.65); 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); border-bottom: 1px solid rgba(255, 255, 255, 0.08);
&.descendant-is-selected { &.descendant-is-selected {
@ -47,18 +46,18 @@ const Header = styled(BaseHeader)`
${pointerEventsAutoInNormalMode}; ${pointerEventsAutoInNormalMode};
&:not(.not-selectable):not(.selected):hover { &: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 { &:not(.not-selectable):not(.selected):active {
background: rgba(82, 88, 96, 0.9); /* background: rgba(82, 88, 96, 0.9);
border-bottom: 1px solid rgba(255, 255, 255, 0.24); border-bottom: 1px solid rgba(255, 255, 255, 0.24);*/
} }
&.selected { &.selected {
background: rgba(142, 142, 142, 1); /* background: rgba(142, 142, 142, 1);*/
} }
@supports not (backdrop-filter: blur()) { @supports not (backdrop-filter: blur()) {
@ -81,7 +80,7 @@ const Head_Label = styled.span`
// Compensate for border bottom // Compensate for border bottom
top: 0.5px; top: 0.5px;
display: flex; display: flex;
height: 20px; min-height: 20px;
align-items: center; align-items: center;
box-sizing: border-box; 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; margin-left: 11px;
background: #4c282d; background: #4c282d;
padding: 2px 8px; padding: 2px 8px;
border-radius: 2px; border-radius: 0px;
font-size: 10px; font-size: 10px;
box-shadow: 0 2px 8px -4px black; 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'})` const SearchBox = styled.input.attrs({type: 'text'})`
background-color: ${COLOR_BASE}; background-color: ${COLOR_BASE};
border: none; border: none;
border-radius: 2px; border-radius: 0px;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
padding: 6px; padding: 6px;
font-size: 12px; 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; transition: background-color 0.15s;
background-color: ${COLOR_BASE}; background-color: ${COLOR_BASE};
border-radius: 2px; border-radius: 0px;
cursor: pointer; cursor: pointer;
outline: none; 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; font-size: 10px;
white-space: nowrap; white-space: nowrap;
padding: 2px 8px; padding: 2px 8px;
border-radius: 2px; border-radius: 0px;
${pointerEventsAutoInNormalMode}; ${pointerEventsAutoInNormalMode};
cursor: ew-resize; cursor: ew-resize;
color: #464646; color: #464646;
@ -89,7 +89,7 @@ const Tumb = styled.div`
font-size: 10px; font-size: 10px;
white-space: nowrap; white-space: nowrap;
padding: 1px 2px; padding: 1px 2px;
border-radius: 2px; border-radius: 0px;
${pointerEventsAutoInNormalMode}; ${pointerEventsAutoInNormalMode};
justify-content: center; justify-content: center;
align-items: 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` const DefaultIcon = styled.div`
width: 5px; width: 5px;
height: 5px; height: 5px;
border-radius: 1px;
/* border: 1px solid currentColor; */
background-color: currentColor; background-color: currentColor;
border-radius: 0px;
transform: rotate(45deg);
border: 1px solid grey;
` `
const FilledIcon = styled.div` const FilledIcon = styled.div`
width: 5px; width: 5px;
height: 5px; height: 5px;
background-color: currentColor; background-color: currentColor;
border-radius: 1px; border-radius: 0px;
transform: rotate(45deg);
border: 1px solid grey;
` `
const DefaultOrStaticValueIndicator: React.FC<{hasStaticOverride: boolean}> = ( 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 {StudioSheetItemKey} from '@theatre/shared/utils/ids'
import type {VoidFn} from '@theatre/shared/utils/types' import type {VoidFn} from '@theatre/shared/utils/types'
import {pointerEventsAutoInNormalMode} from '@theatre/studio/css' import {pointerEventsAutoInNormalMode} from '@theatre/studio/css'
import {transparentize} from 'polished'
import React from 'react' import React from 'react'
import styled, {css} from 'styled-components' import styled, {css} from 'styled-components'
import {PresenceFlag} from '@theatre/studio/uiComponents/usePresence' import {PresenceFlag} from '@theatre/studio/uiComponents/usePresence'
@ -41,7 +40,7 @@ const Container = styled.div`
content: ' '; content: ' ';
display: none; display: none;
z-index: -1; z-index: -1;
background: ${transparentize(0.2, 'black')}; background: transparent;
} }
&:hover { &:hover {
@ -122,7 +121,7 @@ const Prev = styled(PrevOrNextButton)<{
}>` }>`
transform: translateX(2px); transform: translateX(2px);
${Container}:hover & { ${Container}:hover & {
transform: translateX(-7px); transform: translateX(-2px);
} }
` `
const Next = styled(PrevOrNextButton)<{ const Next = styled(PrevOrNextButton)<{
@ -131,7 +130,7 @@ const Next = styled(PrevOrNextButton)<{
}>` }>`
transform: translateX(-2px); transform: translateX(-2px);
${Container}:hover & { ${Container}:hover & {
transform: translateX(7px); transform: translateX(2px);
} }
` `
@ -145,28 +144,40 @@ namespace Icons {
export const Prev = () => ( export const Prev = () => (
<svg <svg
width="12" width="6.5"
height="12" height="9.3"
viewBox="0 0 12 12" viewBox="0 0 6.5 9.3"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<Chevron_Group transform={`translate(6 3)`}> <Chevron_Group transform={`translate(0 0)`}>
<path d="M4 1L1 4L4 7" stroke="currentColor" /> <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> </Chevron_Group>
</svg> </svg>
) )
export const Next = () => ( export const Next = () => (
<svg <svg
width="12" width="6.5"
height="12" height="9.3"
viewBox="0 0 12 12" viewBox="0 0 6.5 9.3"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<Chevron_Group transform={`translate(1 3)`}> <Chevron_Group transform={`translate(2 0)`}>
<path d="M1 1L4 4L1 7" stroke="currentColor" /> <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> </Chevron_Group>
</svg> </svg>
) )
@ -181,14 +192,20 @@ namespace Icons {
export const Cur = () => ( export const Cur = () => (
<svg <svg
width="12" width="8.3"
height="14" height="9.3"
viewBox="0 0 8 12" viewBox="0 0 8.3 9.3"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<Cur_Group transform="translate(1 4)"> <Cur_Group transform="translate(0 0)">
<path d="M3 0L6 3L3 6L0 3L3 0Z" fill="currentColor" /> <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> </Cur_Group>
</svg> </svg>
) )

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

@ -6,7 +6,7 @@ import styled from 'styled-components'
const Container = styled.div` const Container = styled.div`
width: 138px; width: 138px;
border-radius: 2px; border-radius: 0px;
background-color: rgba(42, 45, 50, 0.9); background-color: rgba(42, 45, 50, 0.9);
position: absolute; position: absolute;
display: flex; 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}>` const DetailPanelButton = styled.button<{disabled?: boolean}>`
text-align: center; text-align: center;
padding: 8px; padding: 8px;
border-radius: 2px; border-radius: 0px;
border: 1px solid #627b7b87; border: 1px solid #627b7b87;
background-color: #4b787d3d; background-color: #4b787d3d;
color: #eaeaea; 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` const Container = styled.div`
position: relative; position: relative;
height: 16px; height: 16px;
border-radius: 2px; border-radius: 0px;
// Checkerboard // Checkerboard
background-color: #fff; 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>'); 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` const Container = styled.div`
position: relative; position: relative;
height: 16px; height: 16px;
border-radius: 2px; border-radius: 0px;
background: linear-gradient( background: linear-gradient(
to right, 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%); transform: translate(-50%, -50%);
background-color: #fff; background-color: #fff;
border: 1px solid #ffffff00; border: 1px solid #ffffff00;
border-radius: 2px; border-radius: 0px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
${StyledInteractive}:focus & { ${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; flex-grow: 1;
border-color: transparent; /* Fixes https://github.com/omgovich/react-colorful/issues/139 */ border-color: transparent; /* Fixes https://github.com/omgovich/react-colorful/issues/139 */
border-bottom: 12px solid #000; border-bottom: 12px solid #000;
border-radius: 2px; border-radius: 0px;
background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)),
linear-gradient(to right, #fff, rgba(255, 255, 255, 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%; width: 100%;
height: calc(100% - 4px); height: calc(100% - 4px);
border-radius: 0px; border-radius: 0px;
margin-bottom: 10px; margin-bottom: 0px;
text-align: center;
&:focus { &:focus {
cursor: text; cursor: text;
@ -60,7 +61,7 @@ const Input = styled.input`
const FillIndicator = styled.div` const FillIndicator = styled.div`
position: absolute; position: absolute;
inset: 0px 0px 10px; inset: 0px 0px 0px;
transform: scale(var(--percentage), 1); transform: scale(var(--percentage), 1);
transform-origin: top left; transform-origin: top left;
background-color: #b4b4b4; 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); backdrop-filter: blur(14px);
border: none; border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 2px; border-radius: 0px;
svg { svg {
display: block; display: block;

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

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