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

adjust css

Browse source
This commit is contained in:
asuk 2023-03-10 14:08:04 +01:00
parent 8495c9c808
commit ca2a337916
16 changed files with 51 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
theatre/studio/src/css.tsx
View file

@ -25,13 +25,13 @@ export const pointerEventsAutoInNormalMode = css`
export const theme = {
panel: {
bg: `#282b2f`,
bg: `#0092FF77`,
head: {
title: {
color: `#bbb`,
color: `#0092FF`,
},
punctuation: {
color: `#808080`,
color: `#0092FF`,
},
},
body: {

1
theatre/studio/src/panels/BasePanel/PanelWrapper.tsx
View file

@ -8,6 +8,7 @@ const Container = styled.div`
position: absolute;
user-select: none;
box-sizing: border-box;
font-family: 'Tonka';
${pointerEventsAutoInNormalMode};
/* box-shadow: 1px 2px 10px -5px black; */

4
theatre/studio/src/panels/BasePanel/common.tsx
View file

@ -50,9 +50,9 @@ export const TitleBar = styled.div`
align-items: center;
padding: 0 10px;
position: relative;
color: #adadadb3;
color: #ffffffb3;
border-bottom: 1px solid rgb(0 0 0 / 13%);
background-color: #25272b;
background-color: #0092ff;
font-size: 10px;
font-weight: 500;
overflow: hidden;

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

@ -28,7 +28,11 @@ const headerHeight = `32px`
const Container = styled.div<{pin: boolean}>`
${pointerEventsAutoInNormalMode};
background-color: rgba(40, 43, 47, 0.8);
font-family: 'Tonka';
background-color: rgba(255, 255, 255, 1);
border: 2px solid rgba(0, 146, 255, 1);
border-radius: 15px;
color: black;
position: fixed;
right: 8px;
top: 50px;
@ -37,9 +41,9 @@ const Container = styled.div<{pin: boolean}>`
height: fit-content;
z-index: ${panelZIndexes.propsPanel};
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15);
box-shadow: 0 10px 10px rgba(0, 146, 255, 0.25),
0 10px 10px rgba(0, 146, 255 0.15);
backdrop-filter: blur(14px);
border-radius: 2px;
display: ${({pin}) => (pin ? 'block' : 'none')};
@ -48,14 +52,14 @@ const Container = styled.div<{pin: boolean}>`
}
@supports not (backdrop-filter: blur()) {
background: rgba(40, 43, 47, 0.95);
background: rgba(0, 146, 255 0.75);
}
`
const Title = styled.div`
margin: 0 10px;
color: #919191;
font-weight: 500;
color: #0092ff;
font-weight: bold;
font-size: 10px;
user-select: none;
${pointerEventsAutoInNormalMode};

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

@ -33,17 +33,18 @@ const Header = styled(BaseHeader)`
align-items: center;
pointer-events: none;
white-space: nowrap;
font-family: 'Tonka';
border-radius: 2px;
box-shadow: 0 3px 4px -1px rgba(0, 0, 0, 0.48);
/*box-shadow: 0 3px 4px -1px rgba(0, 0, 0, 0.48);*/
color: rgba(255, 255, 255, 0.9);
background: rgba(40, 43, 47, 0.65);
color: rgba(0, 146, 255, 0.9);
background: rgba(255, 255, 255, 0.65);
backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
&.descendant-is-selected {
background: rgba(29, 53, 59, 0.7);
background: rgba(255, 255, 255, 0.7);
}
${pointerEventsAutoInNormalMode};
@ -59,7 +60,7 @@ const Header = styled(BaseHeader)`
}
&.selected {
background: rgba(30, 88, 102, 0.7);
background: rgba(255, 255, 255, 0.7);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

2
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/keyframeRowUI/ConnectorLine.tsx
View file

@ -12,7 +12,7 @@ export type IConnectorThemeValues = {
}
export const CONNECTOR_THEME = {
normalColor: `#365b59`, // (greenish-blueish)ish
normalColor: `#FFFFFF`, // (greenish-blueish)ish
selectedColor: `#8A7842`,
barColor: (values: IConnectorThemeValues) => {
const base = values.isSelected

2
theatre/studio/src/panels/SequenceEditorPanel/FrameGrid/StampsGrid.tsx
View file

@ -17,7 +17,7 @@ const Container = styled.div`
`
export const stampsGridTheme = {
fullUnitStampColor: `#6a6a6a`,
fullUnitStampColor: `#ffffff`,
stampFontSize: '10px',
get subUnitStampColor(): string {
return darken(0.2, stampsGridTheme.fullUnitStampColor)

6
theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/GraphEditor.tsx
View file

@ -15,8 +15,8 @@ import FrameGrid from '@theatre/studio/panels/SequenceEditorPanel/FrameGrid/Fram
import {transparentize} from 'polished'
export const graphEditorColors = {
'1': {iconColor: '#b98b08'},
'2': {iconColor: '#70a904'},
'1': {iconColor: '#AF007E'},
'2': {iconColor: '#0600FF'},
'3': {iconColor: '#2e928a'},
'4': {iconColor: '#a943bb'},
'5': {iconColor: '#b90808'},
@ -27,7 +27,7 @@ const Container = styled.div`
position: absolute;
right: 0;
bottom: 0;
background: ${transparentize(0.03, '#1a1c1e')};
background: ${transparentize(0.1, '#0092FF')};
`
const SVGContainer = styled.svg`

3
theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeThumb.tsx
View file

@ -53,6 +53,9 @@ const TheDiv = styled.div<{enabled: boolean; type: 'start' | 'end'}>`
#pointer-root.normal & {
pointer-events: auto;
border-radius: 15px;
overflow: hidden;
border: 2px solid #0092ff;
}
#pointer-root.draggingPositionInSequenceEditor & {

2
theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx
View file

@ -177,7 +177,7 @@ const Tooltip = styled.div`
left: 4px;
padding: 0 2px;
transform: translateX(-50%);
background: #1a1a1a;
background: #0092ff;
border-radius: 4px;
color: #fff;
font-size: 10px;

4
theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/TopStrip.tsx
View file

@ -11,8 +11,8 @@ import FocusRangeZone from './FocusRangeZone/FocusRangeZone'
export const topStripHeight = 18
export const topStripTheme = {
backgroundColor: `#1f2120eb`,
borderColor: `#1c1e21`,
backgroundColor: `#0092FFeb`,
borderColor: `#0092FF`,
}
const Container = styled.div`

5
theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx
View file

@ -36,13 +36,16 @@ const Container = styled(PanelWrapper)`
`
const LeftBackground = styled.div`
background-color: rgba(40, 43, 47, 0.99);
background-color: #ffffff;
color: #ffffff;
position: absolute;
left: 0;
top: 0;
bottom: 0;
z-index: -1;
pointer-events: none;
/* border-bottom: 2px solid #0092FF;
border-left: 2px solid #0092FF; */
`
export const zIndexes = (() => {

1
theatre/studio/src/propEditors/simpleEditors/RgbaPropEditor.tsx
View file

@ -35,6 +35,7 @@ const ColorPreviewPuck = styled.div.attrs<ColorPreviewPuckProps>((props) => ({
height: 18px;
aspect-ratio: 1;
border-radius: 99999px;
border: 1px solid #0092ff;
`
const HexInput = styled(BasicStringInput)`

5
theatre/studio/src/propEditors/utils/propNameTextCSS.tsx
View file

@ -4,6 +4,7 @@ import {css} from 'styled-components'
export const propNameTextCSS = css<{isHighlighted?: PropHighlighted}>`
font-weight: 300;
font-size: 11px;
color: ${(props) => (props.isHighlighted === 'self' ? '#CCC' : '#919191')};
text-shadow: 0.5px 0.5px 2px rgba(0, 0, 0, 0.3);
color: ${(props) =>
props.isHighlighted === 'self' ? '#FFFFFF77' : '#0092FF'};
text-shadow: 0.5px 0.5px 2px rgba(0, 146, 255, 0.3);
`

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

@ -34,16 +34,16 @@ const Container = styled.div`
&.dragging,
&.editingViaKeyboard {
&:after {
background-color: #10101042;
border-color: #00000059;
background-color: rgba(0, 146, 255, 0.8);
border-color: rgba(0, 146, 255, 1);
}
}
`
const Input = styled.input`
background: transparent;
border: 1px solid transparent;
color: rgba(255, 255, 255, 0.9);
background: rgba(0, 146, 255, 0.1);
border: 3px solid white;
color: rgba(0, 146, 255, 1);
padding: 1px 6px;
font: inherit;
outline: none;
@ -51,7 +51,7 @@ const Input = styled.input`
text-align: left;
width: 100%;
height: calc(100% - 4px);
border-radius: 2px;
border-radius: 5px;
&:focus {
cursor: text;
@ -69,7 +69,7 @@ const FillIndicator = styled.div`
pointer-events: none;
${Container}.dragging &, ${Container}.noFocus:hover & {
background-color: #338198;
background-color: rgba(0, 146, 255, 0.8);
}
`

6
theatre/studio/src/uiComponents/form/BasicStringInput.tsx
View file

@ -1,6 +1,6 @@
import styled from 'styled-components'
import type {MutableRefObject} from 'react';
import { useEffect} from 'react'
import type {MutableRefObject} from 'react'
import {useEffect} from 'react'
import React, {useMemo, useRef} from 'react'
import mergeRefs from 'react-merge-refs'
import useRefAndState from '@theatre/studio/utils/useRefAndState'
@ -9,7 +9,7 @@ import useOnClickOutside from '@theatre/studio/uiComponents/useOnClickOutside'
const Input = styled.input.attrs({type: 'text'})`
background: transparent;
border: 1px solid transparent;
color: rgba(255, 255, 255, 0.9);
color: rgba(0, 146, 255, 1);
padding: 1px 6px;
font: inherit;
outline: none;