Changeset View
Changeset View
Standalone View
Standalone View
web/navigation-panels/topbar.css
| .container { | .container { | ||||
| border-bottom: 1px solid var(--border); | border-bottom: 1px solid var(--border); | ||||
| height: 60px; | |||||
| display: flex; | display: flex; | ||||
| flex-direction: row; | flex-direction: row; | ||||
| align-items: center; | align-items: center; | ||||
| } | } | ||||
| .navigationPanelContainer { | .navigationPanelContainer { | ||||
| flex-direction: row; | flex-direction: row; | ||||
| display: flex; | display: flex; | ||||
| height: 60px; | height: 56px; | ||||
| } | } | ||||
| .plusButton { | .plusButton { | ||||
| margin: 12px; | margin: 12px; | ||||
| display: flex; | display: flex; | ||||
| cursor: pointer; | cursor: pointer; | ||||
| color: var(--topbar-button-fg); | color: var(--topbar-button-fg); | ||||
| align-items: center; | align-items: center; | ||||
| Show All 20 Lines | .navigationPanelTab svg { | ||||
| stroke: var(--color-disabled); | stroke: var(--color-disabled); | ||||
| fill: var(--color-disabled); | fill: var(--color-disabled); | ||||
| } | } | ||||
| .navigationPanelTab p { | .navigationPanelTab p { | ||||
| color: var(--color-disabled); | color: var(--color-disabled); | ||||
| margin-right: 8px; | margin-right: 8px; | ||||
| margin-left: 8px; | margin-left: 8px; | ||||
| font-size: var(--s-font-14); | |||||
| font-weight: var(--semi-bold); | |||||
| } | } | ||||
| .navigationPanelTab:hover p, | .navigationPanelTab:hover p, | ||||
| .navigationPanelTab:hover svg, | .navigationPanelTab:hover svg, | ||||
| div.current_tab p, | div.current_tab p, | ||||
| div.current_tab svg { | div.current_tab svg { | ||||
| color: var(--fg); | color: var(--fg); | ||||
| stroke: var(--fg); | stroke: var(--fg); | ||||
| fill: var(--fg); | fill: var(--fg); | ||||
| } | } | ||||
| div.current_tab { | div.current_tab { | ||||
| border-bottom: 2px solid var(--tabs-header-active-border); | border-bottom: 2px solid var(--tabs-header-active-border); | ||||
| height: 58px; | box-sizing: border-box; | ||||
| } | } | ||||
| .chatIconWrapper { | .chatIconWrapper { | ||||
| position: relative; | position: relative; | ||||
| } | } | ||||
| span.chatBadge { | span.chatBadge { | ||||
| position: absolute; | position: absolute; | ||||
| top: -4px; | top: -4px; | ||||
| left: 13px; | left: 13px; | ||||
| box-sizing: border-box; | box-sizing: border-box; | ||||
| display: flex; | display: flex; | ||||
| align-items: center; | align-items: center; | ||||
| justify-content: center; | justify-content: center; | ||||
| width: 16px; | width: 14px; | ||||
| height: 16px; | height: 14px; | ||||
| color: var(--fg); | color: var(--fg); | ||||
| background: var(--unread-bg); | background: var(--unread-bg); | ||||
| border-radius: 13px; | border-radius: 13px; | ||||
| font-size: 8px; | font-size: 8px; | ||||
| line-height: 1.25; | line-height: 1.25; | ||||
| } | } | ||||
| .tabs { | .tabs { | ||||
| display: flex; | display: flex; | ||||
| overflow: auto; | overflow: auto; | ||||
| max-width: calc(100% - 56px); | max-width: calc(100% - 56px); | ||||
| } | } | ||||