mami/src/mami.css/sidebar.css

.sidebar {
    margin: 5px 5px 5px 0;
    flex-shrink: 1;
    flex-grow: 0;
    font-family: Verdana, Tahoma, Geneva, Arial, Helvetica, sans-serif;
    display: inline-flex;
    box-shadow: var(--theme-size-sidebar-box-shadow-x, 0) var(--theme-size-sidebar-box-shadow-y, 0) var(--theme-size-sidebar-box-shadow-blur, 0) var(--theme-size-sidebar-box-shadow-spread, 0) var(--theme-colour-sidebar-box-shadow, #000);
}

@media (max-width:768px) {
    .sidebar {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0
    }
}

.sidebar--closed {
    min-width: 40px
}

.sidebar--closed .sidebar__menus {
    display: none
}

.sidebar__selector {
    order: 1;
    font: 2em/40px "Font Awesome 5 Free";
    font-weight: 900;
    text-align: center;
    display: flex;
    flex-direction: column;
    overflow: auto;
    flex-shrink: 0;
    background: linear-gradient(90deg, var(--theme-colour-sidebar-selector-background-begin, #fff), var(--theme-colour-sidebar-selector-background-end, #000)) var(--theme-colour-sidebar-selector-background-begin, #fff);
}

.sidebar__selector-top {
    flex-grow: 1;
    overflow: hidden;
}

.sidebar__selector-mode {
    height: 40px;
    width: 40px;
    cursor: pointer;
    transition: background .1s, text-shadow .1s;
}

.sidebar__selector-mode:hover {
    background-color: var(--theme-colour-sidebar-selector-background-hover, #bbb);
}

.sidebar__selector-mode:active {
    background-color: var(--theme-colour-sidebar-selector-background-active, #ddd);
}

.sidebar:not(.sidebar--closed) .sidebar__selector-mode--active {
    background-color: var(--theme-colour-sidebar-selector-background-active, #ddd) !important;
}

.sidebar__selector-mode--hidden {
    display: none;
}

.sidebar__selector-mode--attention {
    text-shadow: var(--theme-size-sidebar-selector-attention-shadow-x, 0) var(--theme-size-sidebar-selector-attention-shadow-y, 0) var(--theme-size-sidebar-selector-attention-shadow-blur, 0) var(--theme-colour-sidebar-selector-attention-shadow, #888);
}

.sidebar__selector-mode--users:before {
    content: "\f0c0"
}

.sidebar__selector-mode--channels:before {
    content: "\f292"
}

.sidebar__selector-mode--settings:before {
    content: "\f013"
}

.sidebar__selector-mode--uploads:before {
    content: "\f093"
}

.sidebar__selector-mode--audio:before {
    content: "\f028"
}

.sidebar__selector-mode--audio-off:before {
    content: "\f026"
}

.sidebar__selector-mode--scroll:before {
    content: "\f04e"
}

.sidebar__selector-mode--scroll-off:before {
    content: "\f04c"
}

.sidebar__selector-mode--unembed:before {
    content: "\f127"
}

.sidebar__selector-mode--clear {
    background-image: url('//static.flash.moe/images/bomb.png');
}
/*.sidebar__selector-mode--clear:before {
    content: "\f2ed"
}*/

.sidebar__selector-mode--menu-toggle-opened:before {
    content: "\f152"
}

.sidebar__selector-mode--menu-toggle-closed:before {
    content: "\f191"
}

.sidebar__menus {
    flex-grow: 1;
    flex-shrink: 1;
    overflow: auto;
    width: 220px;
    scrollbar-width: thin;
}

.sidebar__menu {
    display: none;
}

.sidebar__menu--active {
    display: inline;
}

.sidebar__user,
.sidebar__channel {
    display: flex;
    flex-direction: column;
    padding: 1px;
    font-size: 1.2em
}

.sidebar__user-details,
.sidebar__channel-details {
    display: flex;
    align-items: center;
    cursor: pointer;
    height: 30px
}

.sidebar__user-name,
.sidebar__channel-name {
    flex-grow: 1;
    padding: 0 5px;
    min-height: 20px;
}

.sidebar__user-options {
    list-style: none;
    margin: 1px 5px;
    overflow: hidden;
}
.sidebar__user-options-wrapper {
    overflow: hidden;
}

.sidebar__user-options--hidden {
    display: none
}

.sidebar__user-option {
    padding: 2px 5px;
    cursor: pointer;
    display: block;
    text-decoration: none !important;
}

.sidebar__user-avatar {
    background: no-repeat center center / cover #000;
    height: 30px;
    width: 30px;
    border-radius: 5%;
    flex-shrink: 0;
    flex-grow: 0;
    order: 1
}

.user-sidebar-afk {
    border-radius: 50px;
    padding: 2px 6px;
    font-size: .8em;
    background-color: rgba(0, 0, 0, .5);
    float: right;
    line-height: 1.4em;
}