Changeset View
Changeset View
Standalone View
Standalone View
web/navigation-panels/nav-state-info-bar.css
div.topBarContainer { | div.topBarContainer { | ||||
display: flex; | display: flex; | ||||
background-color: var(--bg); | background-color: var(--bg); | ||||
align-items: center; | align-items: center; | ||||
justify-content: space-between; | |||||
padding: 0 16px; | |||||
color: var(--thread-top-bar-color); | color: var(--thread-top-bar-color); | ||||
height: 56px; | height: 56px; | ||||
} | overflow: hidden; | ||||
div.topBarThreadInfo { | |||||
height: 24px; | |||||
display: flex; | |||||
align-items: center; | |||||
column-gap: 8px; | |||||
} | } | ||||
div.threadColorSquare { | div.threadColorSquare { | ||||
width: 24px; | width: 24px; | ||||
height: 24px; | height: 24px; | ||||
border-radius: 4px; | border-radius: 4px; | ||||
} | flex: 0 0 auto; | ||||
margin: 0 12px 0 16px; | |||||
p.threadTitle { | |||||
font-size: var(--m-font-16); | |||||
font-weight: var(--bold); | |||||
} | } | ||||
div.hide { | div.hide { | ||||
height: 0px; | height: 0px; | ||||
opacity: 0; | opacity: 0; | ||||
transition: height 200ms ease-in-out, opacity 200ms ease-in-out; | transition: height 200ms ease-in-out, opacity 200ms ease-in-out; | ||||
} | } | ||||
div.show { | div.show { | ||||
height: 56px; | height: 56px; | ||||
opacity: 1; | opacity: 1; | ||||
transition: height 200ms ease-in-out, opacity 200ms ease-in-out; | transition: height 200ms ease-in-out, opacity 200ms ease-in-out; | ||||
} | } |