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 = { export const theme = {
panel: { panel: {
bg: `#282b2f`, bg: `#0092FF77`,
head: { head: {
title: { title: {
color: `#bbb`, color: `#0092FF`,
}, },
punctuation: { punctuation: {
color: `#808080`, color: `#0092FF`,
}, },
}, },
body: { body: {

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

@ -8,6 +8,7 @@ const Container = styled.div`
position: absolute; position: absolute;
user-select: none; user-select: none;
box-sizing: border-box; box-sizing: border-box;
font-family: 'Tonka';
${pointerEventsAutoInNormalMode}; ${pointerEventsAutoInNormalMode};
/* box-shadow: 1px 2px 10px -5px black; */ /* 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; align-items: center;
padding: 0 10px; padding: 0 10px;
position: relative; position: relative;
color: #adadadb3; color: #ffffffb3;
border-bottom: 1px solid rgb(0 0 0 / 13%); border-bottom: 1px solid rgb(0 0 0 / 13%);
background-color: #25272b; background-color: #0092ff;
font-size: 10px; font-size: 10px;
font-weight: 500; font-weight: 500;
overflow: hidden; 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}>` const Container = styled.div<{pin: boolean}>`
${pointerEventsAutoInNormalMode}; ${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; position: fixed;
right: 8px; right: 8px;
top: 50px; top: 50px;
@ -37,9 +41,9 @@ const Container = styled.div<{pin: boolean}>`
height: fit-content; height: fit-content;
z-index: ${panelZIndexes.propsPanel}; 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); backdrop-filter: blur(14px);
border-radius: 2px;
display: ${({pin}) => (pin ? 'block' : 'none')}; display: ${({pin}) => (pin ? 'block' : 'none')};
@ -48,14 +52,14 @@ const Container = styled.div<{pin: boolean}>`
} }
@supports not (backdrop-filter: blur()) { @supports not (backdrop-filter: blur()) {
background: rgba(40, 43, 47, 0.95); background: rgba(0, 146, 255 0.75);
} }
` `
const Title = styled.div` const Title = styled.div`
margin: 0 10px; margin: 0 10px;
color: #919191; color: #0092ff;
font-weight: 500; font-weight: bold;
font-size: 10px; font-size: 10px;
user-select: none; user-select: none;
${pointerEventsAutoInNormalMode}; ${pointerEventsAutoInNormalMode};

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

@ -33,17 +33,18 @@ const Header = styled(BaseHeader)`
align-items: center; align-items: center;
pointer-events: none; pointer-events: none;
white-space: nowrap; white-space: nowrap;
font-family: 'Tonka';
border-radius: 2px; 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); color: rgba(0, 146, 255, 0.9);
background: rgba(40, 43, 47, 0.65); background: rgba(255, 255, 255, 0.65);
backdrop-filter: blur(14px); backdrop-filter: blur(14px);
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 {
background: rgba(29, 53, 59, 0.7); background: rgba(255, 255, 255, 0.7);
} }
${pointerEventsAutoInNormalMode}; ${pointerEventsAutoInNormalMode};
@ -59,7 +60,7 @@ const Header = styled(BaseHeader)`
} }
&.selected { &.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); 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 = { export const CONNECTOR_THEME = {
normalColor: `#365b59`, // (greenish-blueish)ish normalColor: `#FFFFFF`, // (greenish-blueish)ish
selectedColor: `#8A7842`, selectedColor: `#8A7842`,
barColor: (values: IConnectorThemeValues) => { barColor: (values: IConnectorThemeValues) => {
const base = values.isSelected 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 = { export const stampsGridTheme = {
fullUnitStampColor: `#6a6a6a`, fullUnitStampColor: `#ffffff`,
stampFontSize: '10px', stampFontSize: '10px',
get subUnitStampColor(): string { get subUnitStampColor(): string {
return darken(0.2, stampsGridTheme.fullUnitStampColor) 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' import {transparentize} from 'polished'
export const graphEditorColors = { export const graphEditorColors = {
'1': {iconColor: '#b98b08'}, '1': {iconColor: '#AF007E'},
'2': {iconColor: '#70a904'}, '2': {iconColor: '#0600FF'},
'3': {iconColor: '#2e928a'}, '3': {iconColor: '#2e928a'},
'4': {iconColor: '#a943bb'}, '4': {iconColor: '#a943bb'},
'5': {iconColor: '#b90808'}, '5': {iconColor: '#b90808'},
@ -27,7 +27,7 @@ const Container = styled.div`
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: ${transparentize(0.03, '#1a1c1e')}; background: ${transparentize(0.1, '#0092FF')};
` `
const SVGContainer = styled.svg` 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-root.normal & {
pointer-events: auto; pointer-events: auto;
border-radius: 15px;
overflow: hidden;
border: 2px solid #0092ff;
} }
#pointer-root.draggingPositionInSequenceEditor & { #pointer-root.draggingPositionInSequenceEditor & {

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

@ -177,7 +177,7 @@ const Tooltip = styled.div`
left: 4px; left: 4px;
padding: 0 2px; padding: 0 2px;
transform: translateX(-50%); transform: translateX(-50%);
background: #1a1a1a; background: #0092ff;
border-radius: 4px; border-radius: 4px;
color: #fff; color: #fff;
font-size: 10px; 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 topStripHeight = 18
export const topStripTheme = { export const topStripTheme = {
backgroundColor: `#1f2120eb`, backgroundColor: `#0092FFeb`,
borderColor: `#1c1e21`, borderColor: `#0092FF`,
} }
const Container = styled.div` 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` const LeftBackground = styled.div`
background-color: rgba(40, 43, 47, 0.99); background-color: #ffffff;
color: #ffffff;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
z-index: -1; z-index: -1;
pointer-events: none; pointer-events: none;
/* border-bottom: 2px solid #0092FF;
border-left: 2px solid #0092FF; */
` `
export const zIndexes = (() => { 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; height: 18px;
aspect-ratio: 1; aspect-ratio: 1;
border-radius: 99999px; border-radius: 99999px;
border: 1px solid #0092ff;
` `
const HexInput = styled(BasicStringInput)` 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}>` export const propNameTextCSS = css<{isHighlighted?: PropHighlighted}>`
font-weight: 300; font-weight: 300;
font-size: 11px; font-size: 11px;
color: ${(props) => (props.isHighlighted === 'self' ? '#CCC' : '#919191')}; color: ${(props) =>
text-shadow: 0.5px 0.5px 2px rgba(0, 0, 0, 0.3); 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, &.dragging,
&.editingViaKeyboard { &.editingViaKeyboard {
&:after { &:after {
background-color: #10101042; background-color: rgba(0, 146, 255, 0.8);
border-color: #00000059; border-color: rgba(0, 146, 255, 1);
} }
} }
` `
const Input = styled.input` const Input = styled.input`
background: transparent; background: rgba(0, 146, 255, 0.1);
border: 1px solid transparent; border: 3px solid white;
color: rgba(255, 255, 255, 0.9); color: rgba(0, 146, 255, 1);
padding: 1px 6px; padding: 1px 6px;
font: inherit; font: inherit;
outline: none; outline: none;
@ -51,7 +51,7 @@ const Input = styled.input`
text-align: left; text-align: left;
width: 100%; width: 100%;
height: calc(100% - 4px); height: calc(100% - 4px);
border-radius: 2px; border-radius: 5px;
&:focus { &:focus {
cursor: text; cursor: text;
@ -69,7 +69,7 @@ const FillIndicator = styled.div`
pointer-events: none; pointer-events: none;
${Container}.dragging &, ${Container}.noFocus:hover & { ${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 styled from 'styled-components'
import type {MutableRefObject} from 'react'; import type {MutableRefObject} from 'react'
import { useEffect} from 'react' import {useEffect} from 'react'
import React, {useMemo, useRef} from 'react' import React, {useMemo, useRef} from 'react'
import mergeRefs from 'react-merge-refs' import mergeRefs from 'react-merge-refs'
import useRefAndState from '@theatre/studio/utils/useRefAndState' 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'})` const Input = styled.input.attrs({type: 'text'})`
background: transparent; background: transparent;
border: 1px solid transparent; border: 1px solid transparent;
color: rgba(255, 255, 255, 0.9); color: rgba(0, 146, 255, 1);
padding: 1px 6px; padding: 1px 6px;
font: inherit; font: inherit;
outline: none; outline: none;