css changes from asya
This commit is contained in:
parent
c42e940a70
commit
34ea825672
8 changed files with 27 additions and 13 deletions
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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`
|
||||
|
|
|
@ -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<{
|
||||
|
|
|
@ -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;
|
||||
`
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in a new issue