css changes
This commit is contained in:
parent
386bdd026b
commit
86d3e07f6f
16 changed files with 33 additions and 25 deletions
|
@ -49,7 +49,7 @@ export const ItemSectionWithPreviews = (props: {
|
|||
const SectionHeader = styled.h3<{collapsible: boolean}>`
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
|
||||
|
@ -75,7 +75,7 @@ const ItemDesc = styled.div`
|
|||
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-weight: normal;
|
||||
font-size: 15px;
|
||||
line-height: 18px;
|
||||
|
||||
|
@ -85,7 +85,7 @@ const ItemDesc = styled.div`
|
|||
|
||||
& > p {
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
font-weight: normal;
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
/* identical to box height, or 123% */
|
||||
|
|
|
@ -19,9 +19,9 @@ const PlaygroundHeaderVersion = styled.div`
|
|||
background: rgba(34, 103, 99, 0.38);
|
||||
border-radius: 30px;
|
||||
|
||||
font-family: 'Source Code Pro', 'Monaco', monospace;
|
||||
font-family: 'Tonka', 'Monaco', monospace;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-weight: normal;
|
||||
font-size: 13px;
|
||||
line-height: 17px;
|
||||
|
||||
|
@ -41,7 +41,7 @@ const HeaderGroup = styled.div`
|
|||
const HeaderLink = styled.a`
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
|
||||
|
|
|
@ -100,7 +100,7 @@ const NotificationContainer = styled.div`
|
|||
|
||||
const NotificationTitle = styled.div`
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
font-weight: normal;
|
||||
color: #fff;
|
||||
`
|
||||
|
||||
|
@ -127,7 +127,7 @@ const NotificationMessage = styled.div`
|
|||
}
|
||||
|
||||
strong {
|
||||
font-weight: bold;
|
||||
font-weight: normal;
|
||||
color: #d5d5d5;
|
||||
}
|
||||
|
||||
|
@ -159,7 +159,7 @@ const NotificationMessage = styled.div`
|
|||
|
||||
const DismissButton = styled.button`
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-weight: 500;
|
||||
font-weight: normal;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
|
@ -54,7 +54,7 @@ export const TitleBar = styled.div`
|
|||
// background-color: #a5a5a5;
|
||||
border-bottom: 1px dashed #91919177;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
font-weight: normal;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
|
|
@ -55,7 +55,7 @@ const Container = styled.div<{pin: boolean}>`
|
|||
const Title = styled.div`
|
||||
margin: 0 10px;
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
font-weight: normal;
|
||||
font-size: 10px;
|
||||
user-select: none;
|
||||
${pointerEventsAutoInNormalMode};
|
||||
|
|
|
@ -85,7 +85,7 @@ const Head_Label = styled.span`
|
|||
`
|
||||
|
||||
const Head_IconContainer = styled.div`
|
||||
font-weight: 500;
|
||||
font-weight: normal;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
|
@ -23,13 +23,15 @@ const SingleKeyframePropEditorContainer = styled.div`
|
|||
`
|
||||
const SingleKeyframePropLabel = styled.div`
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-weight: normal;
|
||||
font-size: 11px;
|
||||
line-height: 13px;
|
||||
letter-spacing: 0.01em;
|
||||
padding: 6px 6px 6px 0;
|
||||
|
||||
width: 40%;
|
||||
font-family: 'Tonka';
|
||||
font-variation-settings: 'wght' 500;
|
||||
|
||||
color: #606060;
|
||||
|
||||
|
|
|
@ -2,7 +2,7 @@ import type {PropHighlighted} from '@theatre/studio/panels/SequenceEditorPanel/w
|
|||
import {css} from 'styled-components'
|
||||
|
||||
export const propNameTextCSS = css<{isHighlighted?: PropHighlighted}>`
|
||||
font-weight: 300;
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
font-variation-settings: 'wght' 500;
|
||||
color: ${(props) => (props.isHighlighted === 'self' ? '#000000' : '#000000')};
|
||||
|
|
|
@ -42,7 +42,9 @@ const NumberOfConflictsIndicator = styled.div`
|
|||
border-radius: 4px;
|
||||
text-align: center;
|
||||
line-height: 14px;
|
||||
font-weight: 600;
|
||||
font-family: 'Tonka';
|
||||
font-variation-settings: 'wght' 500;
|
||||
font-weight: normal;
|
||||
font-size: 8px;
|
||||
position: relative;
|
||||
left: -6px;
|
||||
|
|
|
@ -34,8 +34,10 @@ const Container = styled.div`
|
|||
const Item = styled.div`
|
||||
position: relative;
|
||||
padding: 0px 12px;
|
||||
font-weight: 400;
|
||||
font-weight: normal;
|
||||
font-size: 11px;
|
||||
font-family: 'Tonka';
|
||||
font-variation-settings: 'wght' 500;
|
||||
height: 32px;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
|
@ -82,7 +84,7 @@ const VersionContainer = styled(Item)`
|
|||
`
|
||||
|
||||
const VersionLabel = styled.div`
|
||||
font-weight: 600;
|
||||
font-weight: normal;
|
||||
`
|
||||
|
||||
const VersionValueRow = styled.div`
|
||||
|
|
|
@ -7,7 +7,7 @@ const DetailPanelButton = styled.button<{disabled?: boolean}>`
|
|||
border: 1px solid #627b7b87;
|
||||
background-color: #4b787d3d;
|
||||
color: #eaeaea;
|
||||
font-weight: 400;
|
||||
font-weight: normal;
|
||||
display: block;
|
||||
appearance: none;
|
||||
flex-grow: 1;
|
||||
|
|
|
@ -5,13 +5,13 @@ import React from 'react'
|
|||
import styled from 'styled-components'
|
||||
import PopoverArrow from './PopoverArrow'
|
||||
|
||||
export const popoverBackgroundColor = transparentize(0.08, `#999999`)
|
||||
export const popoverBackgroundColor = transparentize(0.09, `#b4b4b4`)
|
||||
|
||||
const Container = styled.div`
|
||||
position: absolute;
|
||||
--popover-bg: ${popoverBackgroundColor};
|
||||
--popover-inner-stroke: #505159;
|
||||
--popover-outer-stroke: #111;
|
||||
--popover-inner-stroke: transparent;
|
||||
--popover-outer-stroke: transparent;
|
||||
|
||||
background: var(--popover-bg);
|
||||
|
||||
|
|
|
@ -40,7 +40,7 @@ const Container = styled.div`
|
|||
`
|
||||
|
||||
const Input = styled.input`
|
||||
background: rgba(255, 255, 255, 1);
|
||||
background: rgb(255, 255, 255);
|
||||
border: none;
|
||||
color: rgba(0, 0, 0, 1);
|
||||
padding: 3px 6px 1px 6px;
|
||||
|
|
|
@ -29,8 +29,10 @@ const MenuTitle = styled.div`
|
|||
padding: 4px 10px;
|
||||
border-bottom: 1px solid #6262626d;
|
||||
color: #000000;
|
||||
font-family: 'Tonka';
|
||||
font-variation-settings: 'wght' 500;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
font-weight: normal;
|
||||
`
|
||||
|
||||
type MenuItem = {
|
||||
|
|
|
@ -12,7 +12,7 @@ const ItemContainer = styled.li<{enabled: boolean}>`
|
|||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
font-weight: normal;
|
||||
position: relative;
|
||||
font-family: 'Tonka';
|
||||
font-variation-settings: 'wght' 800;
|
||||
|
|
|
@ -14,7 +14,7 @@ export const Container = styled.button`
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
font-weight: normal;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
outline: none;
|
||||
|
|
Loading…
Reference in a new issue