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-09-22 14:20:18 +02:00
parent 386bdd026b
commit 86d3e07f6f
16 changed files with 33 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/playground/src/home/ItemSectionWithPreviews.tsx
View file

@ -49,7 +49,7 @@ export const ItemSectionWithPreviews = (props: {
const SectionHeader = styled.h3<{collapsible: boolean}>` const SectionHeader = styled.h3<{collapsible: boolean}>`
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: normal;
font-size: 16px; font-size: 16px;
line-height: 19px; line-height: 19px;
@ -75,7 +75,7 @@ const ItemDesc = styled.div`
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
font-style: normal; font-style: normal;
font-weight: 600; font-weight: normal;
font-size: 15px; font-size: 15px;
line-height: 18px; line-height: 18px;
@ -85,7 +85,7 @@ const ItemDesc = styled.div`
& > p { & > p {
margin: 0; margin: 0;
font-weight: 400; font-weight: normal;
font-size: 13px; font-size: 13px;
line-height: 16px; line-height: 16px;
/* identical to box height, or 123% */ /* identical to box height, or 123% */

6
packages/playground/src/home/PlaygroundHeader.tsx
View file

@ -19,9 +19,9 @@ const PlaygroundHeaderVersion = styled.div`
background: rgba(34, 103, 99, 0.38); background: rgba(34, 103, 99, 0.38);
border-radius: 30px; border-radius: 30px;
font-family: 'Source Code Pro', 'Monaco', monospace; font-family: 'Tonka', 'Monaco', monospace;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: normal;
font-size: 13px; font-size: 13px;
line-height: 17px; line-height: 17px;
@ -41,7 +41,7 @@ const HeaderGroup = styled.div`
const HeaderLink = styled.a` const HeaderLink = styled.a`
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: normal;
font-size: 16px; font-size: 16px;
line-height: 1; line-height: 1;

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

@ -100,7 +100,7 @@ const NotificationContainer = styled.div`
const NotificationTitle = styled.div` const NotificationTitle = styled.div`
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: normal;
color: #fff; color: #fff;
` `
@ -127,7 +127,7 @@ const NotificationMessage = styled.div`
} }
strong { strong {
font-weight: bold; font-weight: normal;
color: #d5d5d5; color: #d5d5d5;
} }
@ -159,7 +159,7 @@ const NotificationMessage = styled.div`
const DismissButton = styled.button` const DismissButton = styled.button`
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);
font-weight: 500; font-weight: normal;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

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

@ -54,7 +54,7 @@ export const TitleBar = styled.div`
// background-color: #a5a5a5; // background-color: #a5a5a5;
border-bottom: 1px dashed #91919177; border-bottom: 1px dashed #91919177;
font-size: 10px; font-size: 10px;
font-weight: 500; font-weight: normal;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;

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

@ -55,7 +55,7 @@ const Container = styled.div<{pin: boolean}>`
const Title = styled.div` const Title = styled.div`
margin: 0 10px; margin: 0 10px;
color: #000000; color: #000000;
font-weight: bold; font-weight: normal;
font-size: 10px; font-size: 10px;
user-select: none; user-select: none;
${pointerEventsAutoInNormalMode}; ${pointerEventsAutoInNormalMode};

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

@ -85,7 +85,7 @@ const Head_Label = styled.span`
` `
const Head_IconContainer = styled.div` const Head_IconContainer = styled.div`
font-weight: 500; font-weight: normal;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

4
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/DeterminePropEditorForSingleKeyframe.tsx
View file

@ -23,13 +23,15 @@ const SingleKeyframePropEditorContainer = styled.div`
` `
const SingleKeyframePropLabel = styled.div` const SingleKeyframePropLabel = styled.div`
font-style: normal; font-style: normal;
font-weight: 400; font-weight: normal;
font-size: 11px; font-size: 11px;
line-height: 13px; line-height: 13px;
letter-spacing: 0.01em; letter-spacing: 0.01em;
padding: 6px 6px 6px 0; padding: 6px 6px 6px 0;
width: 40%; width: 40%;
font-family: 'Tonka';
font-variation-settings: 'wght' 500;
color: #606060; color: #606060;

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

@ -2,7 +2,7 @@ import type {PropHighlighted} from '@theatre/studio/panels/SequenceEditorPanel/w
import {css} from 'styled-components' import {css} from 'styled-components'
export const propNameTextCSS = css<{isHighlighted?: PropHighlighted}>` export const propNameTextCSS = css<{isHighlighted?: PropHighlighted}>`
font-weight: 300; font-weight: normal;
font-size: 12px; font-size: 12px;
font-variation-settings: 'wght' 500; font-variation-settings: 'wght' 500;
color: ${(props) => (props.isHighlighted === 'self' ? '#000000' : '#000000')}; color: ${(props) => (props.isHighlighted === 'self' ? '#000000' : '#000000')};

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

@ -42,7 +42,9 @@ const NumberOfConflictsIndicator = styled.div`
border-radius: 4px; border-radius: 4px;
text-align: center; text-align: center;
line-height: 14px; line-height: 14px;
font-weight: 600; font-family: 'Tonka';
font-variation-settings: 'wght' 500;
font-weight: normal;
font-size: 8px; font-size: 8px;
position: relative; position: relative;
left: -6px; left: -6px;

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

@ -34,8 +34,10 @@ const Container = styled.div`
const Item = styled.div` const Item = styled.div`
position: relative; position: relative;
padding: 0px 12px; padding: 0px 12px;
font-weight: 400; font-weight: normal;
font-size: 11px; font-size: 11px;
font-family: 'Tonka';
font-variation-settings: 'wght' 500;
height: 32px; height: 32px;
text-decoration: none; text-decoration: none;
user-select: none; user-select: none;
@ -82,7 +84,7 @@ const VersionContainer = styled(Item)`
` `
const VersionLabel = styled.div` const VersionLabel = styled.div`
font-weight: 600; font-weight: normal;
` `
const VersionValueRow = styled.div` const VersionValueRow = styled.div`

2
theatre/studio/src/uiComponents/DetailPanelButton.tsx
View file

@ -7,7 +7,7 @@ const DetailPanelButton = styled.button<{disabled?: boolean}>`
border: 1px solid #627b7b87; border: 1px solid #627b7b87;
background-color: #4b787d3d; background-color: #4b787d3d;
color: #eaeaea; color: #eaeaea;
font-weight: 400; font-weight: normal;
display: block; display: block;
appearance: none; appearance: none;
flex-grow: 1; flex-grow: 1;

6
theatre/studio/src/uiComponents/Popover/BasicPopover.tsx
View file

@ -5,13 +5,13 @@ import React from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import PopoverArrow from './PopoverArrow' import PopoverArrow from './PopoverArrow'
export const popoverBackgroundColor = transparentize(0.08, `#999999`) export const popoverBackgroundColor = transparentize(0.09, `#b4b4b4`)
const Container = styled.div` const Container = styled.div`
position: absolute; position: absolute;
--popover-bg: ${popoverBackgroundColor}; --popover-bg: ${popoverBackgroundColor};
--popover-inner-stroke: #505159; --popover-inner-stroke: transparent;
--popover-outer-stroke: #111; --popover-outer-stroke: transparent;
background: var(--popover-bg); background: var(--popover-bg);

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

@ -40,7 +40,7 @@ const Container = styled.div`
` `
const Input = styled.input` const Input = styled.input`
background: rgba(255, 255, 255, 1); background: rgb(255, 255, 255);
border: none; border: none;
color: rgba(0, 0, 0, 1); color: rgba(0, 0, 0, 1);
padding: 3px 6px 1px 6px; padding: 3px 6px 1px 6px;

4
theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/BaseMenu.tsx
View file

@ -29,8 +29,10 @@ const MenuTitle = styled.div`
padding: 4px 10px; padding: 4px 10px;
border-bottom: 1px solid #6262626d; border-bottom: 1px solid #6262626d;
color: #000000; color: #000000;
font-family: 'Tonka';
font-variation-settings: 'wght' 500;
font-size: 11px; font-size: 11px;
font-weight: 500; font-weight: normal;
` `
type MenuItem = { type MenuItem = {

2
theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx
View file

@ -12,7 +12,7 @@ const ItemContainer = styled.li<{enabled: boolean}>`
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 11px; font-size: 11px;
font-weight: 400; font-weight: normal;
position: relative; position: relative;
font-family: 'Tonka'; font-family: 'Tonka';
font-variation-settings: 'wght' 800; font-variation-settings: 'wght' 800;

2
theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx
View file

@ -14,7 +14,7 @@ export const Container = styled.button`
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: normal;
width: 32px; width: 32px;
height: 32px; height: 32px;
outline: none; outline: none;