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; | ||||
align-items: center; | |||||
width: 84px; | |||||
background: var(--community-bg); | background: var(--community-bg); | ||||
padding: 24px 0 32px 0; | 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; | |||||
width: 400px; | |||||
} | } | ||||
.spacer { | .spacer { | ||||
flex-grow: 1; | flex-grow: 1; | ||||
} | } | ||||
.container button { | |||||
color: var(--fg); | |||||
} | |||||
.container svg { | |||||
color: var(--fg); | |||||
padding: 0; | |||||
} | |||||
.activeContainer { | .activeContainer { | ||||
display: flex; | display: flex; | ||||
justify-content: center; | |||||
width: 100%; | width: 100%; | ||||
box-sizing: border-box; | box-sizing: border-box; | ||||
border-left: 8px solid var(--community-settings-selected); | border-left: 8px solid var(--community-settings-selected); | ||||
border-right: 8px solid transparent; | border-right: 8px solid transparent; | ||||
padding-left: 12px; | |||||
height: 40px; | |||||
align-items: center; | |||||
} | |||||
.inactiveContainer { | |||||
display: flex; | |||||
padding-left: 20px; | |||||
height: 40px; | |||||
align-items: center; | |||||
} | |||||
.inactiveContainer svg, | |||||
.activeContainer svg { | |||||
color: var(--fg); | |||||
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 { | |||||
align-self: flex-start; | |||||
width: 100%; | |||||
} |