From cffd591186e06101e3fa3abe6f04f51b612ae2eb Mon Sep 17 00:00:00 2001 From: asuk Date: Fri, 19 May 2023 18:42:20 +0200 Subject: [PATCH] a bunch of small css things --- .../panels/BasePanel/ExtensionPaneWrapper.tsx | 2 +- .../src/panels/DetailPanel/DetailPanel.tsx | 15 ++++- .../DetailCompoundPropEditor.tsx | 21 ++++--- .../SingleRowPropEditor.tsx | 20 ++++--- .../src/panels/DetailPanel/ObjectDetails.tsx | 2 +- .../src/panels/OutlinePanel/BaseItem.tsx | 17 +++--- .../ProjectsList/ProjectListItem.tsx | 2 +- .../CurveEditorPopover/CurveEditorPopover.tsx | 2 +- .../CurveEditorPopover/EasingOption.tsx | 2 +- .../Right/LengthIndicator/LengthIndicator.tsx | 4 +- .../src/propEditors/DefaultValueIndicator.tsx | 9 ++- .../propEditors/NextPrevKeyframeCursors.tsx | 55 ++++++++++++------- .../studio/src/toolbars/MoreMenu/MoreMenu.tsx | 2 +- .../src/uiComponents/DetailPanelButton.tsx | 2 +- .../colorPicker/components/common/Alpha.tsx | 2 +- .../colorPicker/components/common/Hue.tsx | 2 +- .../colorPicker/components/common/Pointer.tsx | 2 +- .../components/common/Saturation.tsx | 2 +- .../uiComponents/form/BasicNumberInput.tsx | 5 +- .../toolbar/ToolbarIconButton.tsx | 2 +- .../toolbar/ToolbarSwitchSelectContainer.ts | 2 +- 21 files changed, 104 insertions(+), 68 deletions(-) diff --git a/theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx b/theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx index 19b023c..f137b25 100644 --- a/theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx +++ b/theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx @@ -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; diff --git a/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx b/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx index 281b5bc..9653c88 100644 --- a/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx +++ b/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx @@ -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; diff --git a/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/DetailCompoundPropEditor.tsx b/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/DetailCompoundPropEditor.tsx index 602e68f..c4e7649 100644 --- a/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/DetailCompoundPropEditor.tsx +++ b/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/DetailCompoundPropEditor.tsx @@ -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< diff --git a/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx b/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx index dad5529..8ee4eac 100644 --- a/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx +++ b/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx @@ -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 = { diff --git a/theatre/studio/src/panels/DetailPanel/ObjectDetails.tsx b/theatre/studio/src/panels/DetailPanel/ObjectDetails.tsx index 58c146d..9bbd1b7 100644 --- a/theatre/studio/src/panels/DetailPanel/ObjectDetails.tsx +++ b/theatre/studio/src/panels/DetailPanel/ObjectDetails.tsx @@ -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); diff --git a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx index ae86f50..51ff6b0 100644 --- a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx +++ b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx @@ -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; ` diff --git a/theatre/studio/src/panels/OutlinePanel/ProjectsList/ProjectListItem.tsx b/theatre/studio/src/panels/OutlinePanel/ProjectsList/ProjectListItem.tsx index 4d159ff..e3073e0 100644 --- a/theatre/studio/src/panels/OutlinePanel/ProjectsList/ProjectListItem.tsx +++ b/theatre/studio/src/panels/OutlinePanel/ProjectsList/ProjectListItem.tsx @@ -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; ` diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveEditorPopover.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveEditorPopover.tsx index cc9222f..4e9c73a 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveEditorPopover.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveEditorPopover.tsx @@ -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; diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/EasingOption.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/EasingOption.tsx index e63b956..5e7571f 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/EasingOption.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/EasingOption.tsx @@ -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; diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthIndicator.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthIndicator.tsx index 461aebf..a7e9ff9 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthIndicator.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthIndicator.tsx @@ -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; diff --git a/theatre/studio/src/propEditors/DefaultValueIndicator.tsx b/theatre/studio/src/propEditors/DefaultValueIndicator.tsx index c4f7cb5..a5869d6 100644 --- a/theatre/studio/src/propEditors/DefaultValueIndicator.tsx +++ b/theatre/studio/src/propEditors/DefaultValueIndicator.tsx @@ -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}> = ( diff --git a/theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx b/theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx index 9bc615d..63f16a5 100644 --- a/theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx +++ b/theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx @@ -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 = () => ( - - + + ) export const Next = () => ( - - + + ) @@ -181,14 +192,20 @@ namespace Icons { export const Cur = () => ( - - + + ) diff --git a/theatre/studio/src/toolbars/MoreMenu/MoreMenu.tsx b/theatre/studio/src/toolbars/MoreMenu/MoreMenu.tsx index 05432f4..ee75ca9 100644 --- a/theatre/studio/src/toolbars/MoreMenu/MoreMenu.tsx +++ b/theatre/studio/src/toolbars/MoreMenu/MoreMenu.tsx @@ -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; diff --git a/theatre/studio/src/uiComponents/DetailPanelButton.tsx b/theatre/studio/src/uiComponents/DetailPanelButton.tsx index 3a1d29c..aca62ee 100644 --- a/theatre/studio/src/uiComponents/DetailPanelButton.tsx +++ b/theatre/studio/src/uiComponents/DetailPanelButton.tsx @@ -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; diff --git a/theatre/studio/src/uiComponents/colorPicker/components/common/Alpha.tsx b/theatre/studio/src/uiComponents/colorPicker/components/common/Alpha.tsx index 74fb397..8503df7 100644 --- a/theatre/studio/src/uiComponents/colorPicker/components/common/Alpha.tsx +++ b/theatre/studio/src/uiComponents/colorPicker/components/common/Alpha.tsx @@ -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,'); diff --git a/theatre/studio/src/uiComponents/colorPicker/components/common/Hue.tsx b/theatre/studio/src/uiComponents/colorPicker/components/common/Hue.tsx index 9b39f9b..0088b67 100644 --- a/theatre/studio/src/uiComponents/colorPicker/components/common/Hue.tsx +++ b/theatre/studio/src/uiComponents/colorPicker/components/common/Hue.tsx @@ -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, diff --git a/theatre/studio/src/uiComponents/colorPicker/components/common/Pointer.tsx b/theatre/studio/src/uiComponents/colorPicker/components/common/Pointer.tsx index a6fa83c..c140a37 100644 --- a/theatre/studio/src/uiComponents/colorPicker/components/common/Pointer.tsx +++ b/theatre/studio/src/uiComponents/colorPicker/components/common/Pointer.tsx @@ -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 & { diff --git a/theatre/studio/src/uiComponents/colorPicker/components/common/Saturation.tsx b/theatre/studio/src/uiComponents/colorPicker/components/common/Saturation.tsx index 5b6dfbe..5b5942b 100644 --- a/theatre/studio/src/uiComponents/colorPicker/components/common/Saturation.tsx +++ b/theatre/studio/src/uiComponents/colorPicker/components/common/Saturation.tsx @@ -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)); diff --git a/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx b/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx index 0807407..dfc09fd 100644 --- a/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx +++ b/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx @@ -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; diff --git a/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx b/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx index 08e5fef..d08d136 100644 --- a/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx +++ b/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx @@ -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; diff --git a/theatre/studio/src/uiComponents/toolbar/ToolbarSwitchSelectContainer.ts b/theatre/studio/src/uiComponents/toolbar/ToolbarSwitchSelectContainer.ts index 459608c..3cebb4d 100644 --- a/theatre/studio/src/uiComponents/toolbar/ToolbarSwitchSelectContainer.ts +++ b/theatre/studio/src/uiComponents/toolbar/ToolbarSwitchSelectContainer.ts @@ -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