Changeset View
Changeset View
Standalone View
Standalone View
web/sidebar/community-picker.css
.container { | .container { | ||||
display: flex; | display: flex; | ||||
flex-direction: column; | flex-direction: column; | ||||
background: var(--community-bg); | background: var(--community-bg); | ||||
padding: 24px 0 32px 0; | |||||
border-right: 1px solid var(--border-color); | border-right: 1px solid var(--border-color); | ||||
flex-grow: 1; | flex-grow: 1; | ||||
overflow: auto; | overflow: auto; | ||||
width: 400px; | |||||
} | } | ||||
.spacer { | .spacer { | ||||
flex-grow: 1; | flex-grow: 1; | ||||
} | } | ||||
.activeContainer { | .header { | ||||
border-bottom: 1px solid var(--community-drawer-lines); | |||||
padding: 10px 0 10px 0; | |||||
align-items: center; | |||||
display: flex; | display: flex; | ||||
width: 100%; | margin-right: 16px; | ||||
box-sizing: border-box; | } | ||||
border-left: 8px solid var(--community-settings-selected); | |||||
border-right: 8px solid transparent; | .footer { | ||||
padding-left: 12px; | border-top: 1px solid var(--community-drawer-lines); | ||||
height: 40px; | padding: 12px 0 12px 0; | ||||
align-items: center; | align-items: center; | ||||
display: flex; | |||||
margin-right: 16px; | |||||
} | } | ||||
.inactiveContainer { | .sideLine { | ||||
width: 3px; | |||||
height: 24px; | |||||
border-radius: 0 4px 4px 0; | |||||
margin-right: 14px; | |||||
} | |||||
.sideLineActive { | |||||
background-color: var(--community-settings-selected); | |||||
} | |||||
.itemContainer { | |||||
display: flex; | display: flex; | ||||
padding-left: 20px; | |||||
height: 40px; | height: 40px; | ||||
align-items: center; | align-items: center; | ||||
width: 100%; | |||||
} | } | ||||
.inactiveContainer svg, | .itemContainer svg { | ||||
.activeContainer svg { | |||||
color: var(--fg); | color: var(--fg); | ||||
padding: 0; | padding: 0; | ||||
} | } | ||||
.settingsIcon { | .settingsIcon { | ||||
display: flex; | display: flex; | ||||
align-items: center; | align-items: center; | ||||
justify-content: center; | justify-content: center; | ||||
background: var(--settings-btn-bg); | background: var(--settings-btn-bg); | ||||
width: 30px; | width: 30px; | ||||
height: 30px; | height: 30px; | ||||
border-radius: 50%; | border-radius: 50%; | ||||
} | } | ||||
.drawerWrapper { | .drawerWrapper { | ||||
align-self: flex-start; | |||||
width: 100%; | width: 100%; | ||||
overflow: auto; | |||||
} | } | ||||
.inboxButtonTitle { | .buttonTitle { | ||||
font-weight: 500; | font-weight: 500; | ||||
font-size: var(--l-font-18); | font-size: var(--s-font-14); | ||||
line-height: 22px; | line-height: 22px; | ||||
padding-left: 12px; | padding-left: 12px; | ||||
color: var(--fg); | color: var(--fg); | ||||
} | } |