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; | justify-content: space-between; | ||||
| padding: 16px; | padding: 0 16px; | ||||
| color: var(--thread-top-bar-color); | color: var(--thread-top-bar-color); | ||||
| border-bottom: 1px solid var(--border); | height: 56px; | ||||
| } | } | ||||
| div.topBarThreadInfo { | div.topBarThreadInfo { | ||||
| height: 24px; | height: 24px; | ||||
| display: flex; | display: flex; | ||||
| align-items: center; | align-items: center; | ||||
| column-gap: 8px; | column-gap: 8px; | ||||
| } | } | ||||
| div.threadColorSquare { | div.threadColorSquare { | ||||
| width: 24px; | width: 24px; | ||||
| height: 24px; | height: 24px; | ||||
| border-radius: 4px; | border-radius: 4px; | ||||
| } | } | ||||
| p.threadTitle { | p.threadTitle { | ||||
| font-size: var(--m-font-16); | font-size: var(--m-font-16); | ||||
| font-weight: var(--bold); | font-weight: var(--bold); | ||||
| } | } | ||||
| div.hide { | |||||
| height: 0px; | |||||
| opacity: 0; | |||||
| transition: height 200ms ease-in-out, opacity 200ms ease-in-out; | |||||
| } | |||||
| div.show { | |||||
| height: 56px; | |||||
| opacity: 1; | |||||
| transition: height 200ms ease-in-out, opacity 200ms ease-in-out; | |||||
| } | |||||