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

Style tweaks

Browse source
This commit is contained in:
Aria Minaei 2021-08-22 11:47:00 +02:00
parent 158961c82a
commit 6cac52675e
3 changed files with 11 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,7 +3,6 @@ import React from 'react'
import {GoChevronRight, DiHtml53DEffects} from 'react-icons/all' import {GoChevronRight, DiHtml53DEffects} from 'react-icons/all'
import styled, {css} from 'styled-components' import styled, {css} from 'styled-components'
import noop from '@theatre/shared/utils/noop' import noop from '@theatre/shared/utils/noop'
import {darken, lighten} from 'polished'
import {pointerEventsAutoInNormalMode} from '@theatre/studio/css' import {pointerEventsAutoInNormalMode} from '@theatre/studio/css'
export const Container = styled.li` export const Container = styled.li`
@ -40,22 +39,22 @@ const Header = styled(BaseHeader)`
&.descendant-is-selected { &.descendant-is-selected {
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);
--item-bg: ${() => darken(0.1, baseBg)}; --item-bg: #2e4244ed;
--item-border-color: ${baseBorderColor}; --item-border-color: #254355;
} }
&:hover { &:hover {
color: #fff; color: #fff;
--item-bg: ${() => darken(0.12, baseBg)}; --item-bg: #1e5866;
--item-border-color: ${lighten(0.1, baseBorderColor)}; --item-border-color: #152f42;
} }
&.selected { &.selected {
color: #fff; color: rgba(255, 255, 255, 0.9);
--item-bg: ${() => darken(0.15, baseBg)}; --item-bg: #1e5866;
--item-border-color: ${lighten(0.05, baseBorderColor)}; --item-border-color: #152f42;
} }
` `
@ -81,7 +80,7 @@ const Head_Label = styled.span`
&:after { &:after {
border: 1px solid var(--item-border-color); border: 1px solid var(--item-border-color);
position: absolute; position: absolute;
inset: -1px; inset: 0px;
display: block; display: block;
content: ' '; content: ' ';
z-index: -1; z-index: -1;
@ -121,7 +120,7 @@ const Head_IconContainer = styled.span`
inset: 0px; inset: 0px;
z-index: -1; z-index: -1;
background-color: var(--item-bg); background-color: var(--item-bg);
opacity: 1; opacity: 0.6;
border-radius: 2px; border-radius: 2px;
} }
` `

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

@ -144,7 +144,7 @@ const OutlinePanel: React.FC<{}> = (props) => {
}, []) }, [])
const [triggerTooltip, triggerButtonRef] = useTooltip( const [triggerTooltip, triggerButtonRef] = useTooltip(
{enterDelay: conflicts.length > 0 ? 0 : 200}, {enabled: conflicts.length > 0, enterDelay: conflicts.length > 0 ? 0 : 200},
() => () =>
conflicts.length > 0 ? ( conflicts.length > 0 ? (
<ErrorTooltip> <ErrorTooltip>

2
theatre/studio/src/uiComponents/Popover/BasicTooltip.tsx
View file

@ -4,7 +4,7 @@ import BasicPopover from './BasicPopover'
const BasicTooltip = styled(BasicPopover)` const BasicTooltip = styled(BasicPopover)`
padding: 1em; padding: 1em;
max-width: 240px; max-width: 240px;
pointer-events: none; pointer-events: none !important;
--popover-outer-stroke: transparent; --popover-outer-stroke: transparent;
--popover-inner-stroke: #45464d; --popover-inner-stroke: #45464d;
` `