css changes from asya

This commit is contained in:
asuk 2023-08-05 12:41:34 +02:00
parent c42e940a70
commit 34ea825672
8 changed files with 27 additions and 13 deletions

View file

@ -3,7 +3,8 @@
PREVIOUS_DIR=$(pwd)
DIR=${0:a:h}
SOURCE="$DIR/packages/browser-bundles/dist"
DESTINATION="/Users/asuk/Documents/Variable Font Tool/msdf-theatre/bin/web/node_modules/@theatre/browser-bundles/dist"
DESTINATION="/Users/asuk/Documents/openFrameworks/apps/variableLab/msdf-theatre/bin/web/node_modules/@theatre/browser-bundles/dist"
# DESTINATION="/Users/asuk/Documents/Variable Font Tool/msdf-theatre/bin/web/node_modules/@theatre/browser-bundles/dist"
# DESTINATION="jrkb@nature.fritz.box:/home/jrkb/openFrameworks/apps/celinesTypeGarden/msdf-theatre/bin/web/node_modules/@theatre/browser-bundles/dist"
cd $DIR

View file

@ -58,6 +58,7 @@ export const TitleBar = styled.div`
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
background: #f2f2f2;
`
// the minimum visible width or height when the panel is partially offscreen

View file

@ -33,11 +33,11 @@ const Container = styled.div<{pin: boolean}>`
border-radius: 0px;
color: black;
position: fixed;
right: 10px;
top: 10px;
right: 0px;
top: 0px;
// Temporary, see comment about CSS grid in SingleRowPropEditor.
width: 280px;
height: fit-content;
height: 100vh;
z-index: ${panelZIndexes.propsPanel};
backdrop-filter: blur(2px);
@ -74,6 +74,7 @@ const Header = styled.div`
const Body = styled.div`
${pointerEventsAutoInNormalMode};
max-height: calc(80vh - 100px);
height: inherit;
border-bottom: 1px dashed #91919177;
overflow-y: scroll;
&::-webkit-scrollbar {

View file

@ -42,6 +42,7 @@ const Header = styled.div<{isHighlighted: PropHighlighted}>`
display: grid;
align-items: stretch;
position: relative;
opacity: 0.8;
`
const Padding = styled.div<{isVectorProp: boolean}>`
@ -81,7 +82,7 @@ const CollapseIcon = styled.span<{isCollapsed: boolean; isVector: boolean}>`
display: flex;
align-items: center;
justify-content: center;
display: none;
transition: transform 0.05s ease-out, color 0.1s ease-out;
transform: rotateZ(${(props) => (props.isCollapsed ? 0 : 90)}deg);
color: black;

View file

@ -5,9 +5,10 @@ import {Outline} from '@theatre/studio/uiComponents/icons'
const Container = styled.div`
padding: 16px;
display: flex;
display: none;
flex-direction: column;
gap: 24px;
pointer-events: none;
`
const Message = styled.div`

View file

@ -34,6 +34,10 @@ const DefaultIcon = styled.div`
border-radius: 2px;
transform: rotate(45deg);
background: #a3a3a3;
cursor: pointer;
&:hover {
background: red;
}
`
const FilledIcon = styled.div`
@ -42,6 +46,10 @@ const FilledIcon = styled.div`
border-radius: 2px;
transform: rotate(45deg);
background: #a3a3a3;
cursor: pointer;
&:hover {
background: red;
}
`
const DefaultOrStaticValueIndicator: React.FC<{

View file

@ -14,22 +14,21 @@ const MenuContainer = styled.ul`
position: absolute;
min-width: ${minWidth}px;
z-index: 10000;
background: ${transparentize(0.2, '#9c9c9c')};
background: ${transparentize(0.0, '#d3d3d3')};
backdrop-filter: blur(2px);
color: black;
list-style-type: none;
padding: 2px 0;
overflow: hidden;
margin: 0;
border-radius: 1px;
cursor: default;
${pointerEventsAutoInNormalMode};
border-radius: 0px;
border-radius: 9px;
`
const MenuTitle = styled.div`
padding: 4px 10px;
border-bottom: 1px solid #6262626d;
color: #ffffff;
color: #000000;
font-size: 11px;
font-weight: 500;
`

View file

@ -14,17 +14,19 @@ const ItemContainer = styled.li<{enabled: boolean}>`
font-size: 11px;
font-weight: 400;
position: relative;
font-family: 'Tonka';
text-transform: uppercase;
color: ${(props) => (props.enabled ? 'white' : '#484848')};
cursor: ${(props) => (props.enabled ? 'normal' : 'not-allowed')};
&:after {
position: absolute;
inset: 2px 1px;
inset: 0px 1px;
display: block;
content: ' ';
pointer-events: none;
z-index: -1;
border-radius: 3px;
border-radius: 0px;
}
&:hover:after {