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

css changes

Browse source
This commit is contained in:
asuk 2023-05-09 15:19:05 +02:00
parent ded18a63c3
commit 398b67ab61
25 changed files with 75 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/playground/devEnv/home/PlaygroundHeader.tsx
View file

@ -52,7 +52,7 @@ const HeaderLink = styled.a`
/* identical to box height, or 169% */
/* White/White100 */
color: #ffffff;
color: #000000;
transition: color 0.2s ease-in;

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

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

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

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

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

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

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

@ -28,23 +28,19 @@ const headerHeight = `32px`
const Container = styled.div<{pin: boolean}>`
${pointerEventsAutoInNormalMode};
font-family: 'OPS-Cubic';
text-transform: uppercase;
background-color: rgba(255, 255, 255, 1);
border: 2px solid rgba(0, 146, 255, 1);
border-radius: 15px;
font-family: 'Tonka';
// text-transform: uppercase;
background: rgba(242, 242, 242, 0.9);
border-radius: 0px;
color: black;
position: fixed;
right: 8px;
top: 50px;
right: 10px;
top: 10px;
// Temporary, see comment about CSS grid in SingleRowPropEditor.
width: 280px;
height: fit-content;
z-index: ${panelZIndexes.propsPanel};
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(2px);
display: ${({pin}) => (pin ? 'block' : 'none')};
@ -53,13 +49,13 @@ const Container = styled.div<{pin: boolean}>`
}
@supports not (backdrop-filter: blur()) {
background: rgba(0, 146, 255 0.75);
background: rgba(242, 242, 242, 0.9);
}
`
const Title = styled.div`
margin: 0 10px;
color: #0092ff;
color: #000000;
font-weight: bold;
font-size: 10px;
user-select: none;
@ -73,6 +69,7 @@ const Header = styled.div`
height: ${headerHeight};
display: flex;
align-items: center;
border-bottom: 1px dashed #91919177;
`
const Body = styled.div`

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

@ -33,23 +33,21 @@ const Header = styled(BaseHeader)`
align-items: center;
pointer-events: none;
white-space: nowrap;
font-family: 'OPS-Cubic';
border-radius: 2px;
font-family: 'Tonka';
/*box-shadow: 0 3px 4px -1px rgba(0, 0, 0, 0.48);*/
color: rgba(0, 146, 255, 0.9);
color: rgba(0, 0, 0, 0.8);
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(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 1);
}
${pointerEventsAutoInNormalMode};
&:not(.not-selectable):not(.selected):hover {
background: rgba(59, 63, 69, 0.9);
background: rgba(142, 142, 142, 1);
border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}
@ -60,8 +58,7 @@ const Header = styled(BaseHeader)`
}
&.selected {
background: rgba(255, 255, 255, 0.7);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(142, 142, 142, 1);
}
@supports not (backdrop-filter: blur()) {
@ -71,7 +68,7 @@ const Header = styled(BaseHeader)`
export const outlineItemFont = css`
font-weight: 500;
font-size: 11px;
font-size: 12px;
& {
}
`

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

@ -14,10 +14,10 @@ const Container = styled.div<{pin: boolean}>`
${pointerEventsAutoInNormalMode};
background-color: transparent;
position: absolute;
left: 8px;
left: 10px;
z-index: ${panelZIndexes.outlinePanel};
top: calc(${headerHeight} + 8px);
top: 10px;
height: fit-content;
max-height: calc(100% - ${headerHeight});
overflow-y: scroll;

5
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetBackground.tsx
View file

@ -1,9 +1,8 @@
import {theme} from '@theatre/studio/css'
import type {SequenceEditorPanelLayout} from '@theatre/studio/panels/SequenceEditorPanel/layout/layout'
import {zIndexes} from '@theatre/studio/panels/SequenceEditorPanel/SequenceEditorPanel'
import {useVal} from '@theatre/react'
import type {Pointer} from '@theatre/dataverse'
import {darken, transparentize} from 'polished'
import { transparentize} from 'polished'
import React from 'react'
import styled from 'styled-components'
import FrameGrid from '@theatre/studio/panels/SequenceEditorPanel/FrameGrid/FrameGrid'
@ -15,7 +14,7 @@ const Container = styled.div`
bottom: 0;
z-index: ${() => zIndexes.rightBackground};
overflow: hidden;
background: ${transparentize(0.01, darken(1 * 0.03, theme.panel.bg))};
background: ${transparentize(0.1, '#f2f2f2')};
pointer-events: none;
`

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

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

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

@ -27,7 +27,8 @@ const Container = styled.div`
position: absolute;
right: 0;
bottom: 0;
background: ${transparentize(0.1, '#0092FF')};
background: ${transparentize(0.1, '#c9c9c9')};
backdrop-filter: blur(2px);
`
const SVGContainer = styled.svg`

9
theatre/studio/src/panels/SequenceEditorPanel/GraphEditorToggle.tsx
View file

@ -10,15 +10,14 @@ import {includeLockFrameStampAttrs} from './FrameStampPositionProvider'
const Container = styled.button`
outline: none;
background-color: #1c1d21;
border: 1px solid #191919;
border-radius: 2px;
background-color: #ffffff;
border: none;
border-radius: 0px;
display: flex;
bottom: 14px;
right: 8px;
z-index: 1;
position: absolute;
padding: 4px 8px;
display: flex;
color: #656d77;
@ -26,7 +25,7 @@ const Container = styled.button`
font-size: 10px;
&:hover {
color: white;
color: black;
}
& > svg {

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

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

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

@ -14,7 +14,7 @@ import useDrag from '@theatre/studio/uiComponents/useDrag'
const Container = styled.div`
--threadHeight: 6px;
--bg-inactive: #32353b;
--bg-inactive: #a5a5a5;
--bg-active: #5b5c5d;
position: absolute;
height: 0;

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

@ -33,7 +33,7 @@ import {
} from '@theatre/studio/panels/SequenceEditorPanel/DopeSheet/Right/KeyframeSnapTarget'
const Container = styled.div<{isVisible: boolean}>`
--thumbColor: #00e0ff;
--thumbColor: #ff2a00;
position: absolute;
top: 0;
left: 0;
@ -50,7 +50,7 @@ const Rod = styled.div`
top: 8px;
width: 0;
height: calc(100% - 8px);
border-left: 1px solid #27e0fd;
border-left: 1px solid #ff2a00;
z-index: 10;
pointer-events: none;
@ -177,7 +177,7 @@ const Tooltip = styled.div`
left: 4px;
padding: 0 2px;
transform: translateX(-50%);
background: #0092ff;
background: #000000;
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: `#0092FFeb`,
borderColor: `#0092FF`,
backgroundColor: `#f2f2f2`,
borderColor: `#000000`,
}
const Container = styled.div`

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

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

4
theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx
View file

@ -78,7 +78,7 @@ const Button = styled.div`
export const nextPrevCursorsTheme = {
offColor: '#555',
onColor: '#0092FF',
onColor: '#000000',
}
const CurButton = styled(Button)<{
@ -86,7 +86,7 @@ const CurButton = styled(Button)<{
presence: PresenceFlag | undefined
}>`
&:hover {
color: #0092ff;
color: #000000;
}
color: ${(props) =>

2
theatre/studio/src/propEditors/simpleEditors/BooleanPropEditor.tsx
View file

@ -5,7 +5,7 @@ import BasicCheckbox from '@theatre/studio/uiComponents/form/BasicCheckbox'
import type {ISimplePropEditorReactProps} from './ISimplePropEditorReactProps'
const Input = styled(BasicCheckbox)`
margin-left: 6px;
margin-bottom: 10px;
:focus {
outline: 1px solid #555;

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

@ -32,10 +32,10 @@ const ColorPreviewPuck = styled.div.attrs<ColorPreviewPuckProps>((props) => ({
background: rgba2hex(props.rgbaColor),
},
}))<ColorPreviewPuckProps>`
height: 18px;
height: 23px;
aspect-ratio: 1;
border-radius: 99999px;
border: 1px solid #0092ff;
border: 1px solid #000000;
`
const HexInput = styled(BasicStringInput)`

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

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

2
theatre/studio/src/toolbars/GlobalToolbar.tsx
View file

@ -29,7 +29,7 @@ const Container = styled.div`
height: 36px;
pointer-events: none;
display: flex;
display: none;
justify-content: space-between;
padding: 12px;
`

2
theatre/studio/src/toolbars/MoreMenu/MoreMenu.tsx
View file

@ -62,7 +62,7 @@ const Link = styled(Item)`
&:hover {
/* background-color: #398995; */
color: white !important;
color: grey;
&:before {
opacity: 1;
}

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

@ -34,16 +34,15 @@ const Container = styled.div`
&.dragging,
&.editingViaKeyboard {
&:after {
background-color: rgba(0, 146, 255, 0.8);
border-color: rgba(0, 146, 255, 1);
// background-color: rgba(255, 255, 255, 1);
}
}
`
const Input = styled.input`
background: rgba(0, 146, 255, 0.1);
border: 3px solid white;
color: rgba(0, 146, 255, 1);
background: rgba(255, 255, 255, 1);
border: none;
color: rgba(0, 0, 0, 1);
padding: 1px 6px;
font: inherit;
outline: none;
@ -51,7 +50,8 @@ const Input = styled.input`
text-align: left;
width: 100%;
height: calc(100% - 4px);
border-radius: 5px;
border-radius: 0px;
margin-bottom: 10px;
&:focus {
cursor: text;
@ -60,16 +60,17 @@ const Input = styled.input`
const FillIndicator = styled.div`
position: absolute;
inset: 3px 2px 4px;
inset: 0px 0px 10px;
transform: scale(var(--percentage), 1);
transform-origin: top left;
background-color: #2d5561;
z-index: -1;
background-color: #b4b4b4;
z-index: 0;
border-radius: 2px;
pointer-events: none;
pointer-events: none !important;
mix-blend-mode: multiply;
${Container}.dragging &, ${Container}.noFocus:hover & {
background-color: rgba(0, 146, 255, 0.8);
background-color: rgba(188, 188, 188, 0.8);
}
`

7
theatre/studio/src/uiComponents/form/BasicSelect.tsx
View file

@ -22,16 +22,16 @@ const IconContainer = styled.div`
const Select = styled.select`
appearance: none;
background-color: transparent;
background-color: white;
box-sizing: border-box;
border: 1px solid transparent;
color: rgba(255, 255, 255, 0.85);
color: rgba(0, 0, 0, 1);
padding: 1px 6px;
font: inherit;
outline: none;
text-align: left;
width: 100%;
border-radius: 2px;
border-radius: 0px;
/*
looks like putting percentages in the height of a select box doesn't work in Firefox. Not sure why.
So we're hard-coding the height to 26px, unlike all other inputs that use a relative height.
@ -46,7 +46,6 @@ const Select = styled.select`
&:hover,
&:focus {
background-color: #10101042;
border-color: #00000059;
}
`

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

@ -7,9 +7,9 @@ import useRefAndState from '@theatre/studio/utils/useRefAndState'
import useOnClickOutside from '@theatre/studio/uiComponents/useOnClickOutside'
const StyledTextarea = styled.textarea.attrs({type: 'text'})`
background: transparent;
border: 1px solid transparent;
color: rgba(0, 146, 255, 1);
background: #ffffff;
border: none;
color: rgba(0, 0, 0, 1);
padding: 1px 6px;
font: inherit;
outline: none;
@ -17,9 +17,9 @@ const StyledTextarea = styled.textarea.attrs({type: 'text'})`
text-align: left;
width: 100%;
height: calc(100% - 4px);
border-radius: 2px;
border: 1px solid transparent;
border-radius: 0px;
box-sizing: border-box;
margin-bottom: 10px;
&:hover {
background-color: #10101042;