diff --git a/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx b/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx index 01417e0..2cf4b4a 100644 --- a/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx +++ b/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx @@ -19,8 +19,8 @@ const Container = styled.div` inset: 1px 0 2px; display: block; content: ' '; - background-color: #2525252b; - border: 1px solid #1c2123; + background-color: transparent; + border: 1px solid transparent; z-index: -2; box-sizing: border-box; border-radius: 1px; @@ -31,7 +31,6 @@ const Container = styled.div` &.editingViaKeyboard { &:after { background-color: #10101042; - /* background-color: ${darken(0.2, theme.panel.bg)}; */ border-color: #00000059; } } diff --git a/theatre/studio/src/uiComponents/form/BasicSelect.tsx b/theatre/studio/src/uiComponents/form/BasicSelect.tsx index ef69df8..b799f54 100644 --- a/theatre/studio/src/uiComponents/form/BasicSelect.tsx +++ b/theatre/studio/src/uiComponents/form/BasicSelect.tsx @@ -1,5 +1,3 @@ -import {theme} from '@theatre/studio/css' -import {darken, lighten} from 'polished' import React, {useCallback} from 'react' import styled from 'styled-components' import {CgSelect} from 'react-icons/all' @@ -19,6 +17,7 @@ const IconContainer = styled.div` display: flex; align-items: center; color: #6b7280; + pointer-events: none; ` const Select = styled.select` @@ -39,8 +38,8 @@ const Select = styled.select` &:hover, &:focus { - background-color: ${darken(0.9, theme.panel.bg)}; - border: 1px solid ${lighten(0.1, theme.panel.bg)}; + background-color: #10101042; + border-color: #00000059; } ` diff --git a/theatre/studio/src/uiComponents/form/BasicSwitch.tsx b/theatre/studio/src/uiComponents/form/BasicSwitch.tsx index 0f2f0ce..2a3a1ef 100644 --- a/theatre/studio/src/uiComponents/form/BasicSwitch.tsx +++ b/theatre/studio/src/uiComponents/form/BasicSwitch.tsx @@ -20,7 +20,7 @@ const Label = styled.label` justify-content: center; flex-grow: 1; color: #a7a7a7; - border: 1px solid #1c2123; + border: 1px solid transparent; box-sizing: border-box; border-right-width: 0px; @@ -29,6 +29,7 @@ const Label = styled.label` } ${Container}:hover > & { + border-color: #1c2123; /* background-color: #373748; */ /* color: ${darken(0.1, 'white')}; */ }