Anons79 Mini Shell

/*-- 1.4 Right Bar / .right-aside --*/

@import "../variables.less";
@import "../mixins.less";
.right-aside {
    width: @RightAsideWidth;
    .box-shadow(0 0px 5px rgba(000, 000, 000, .1));
    background-color: @RightAsideBgColor;
    position: fixed;
    height: 100%;
    visibility: hidden;
    top: 0px;
    z-index: 1000;
    right: 0px;
    -ms-transform: translate(100%, 0);
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
    //    right: -@RightAsideWidth;
    .animate(all .5s ease-in-out);
    .aside-branding {
        height: @TopBarHeight;
        background-color: @RightAsideBrandingBg;
        .rightbar-action {
            position: absolute;
            right: 12px;
            top: 13px;
            cursor: pointer;
            background-color: rgba(000, 000, 000, .1);
            width: 32px;
            height: 32px;
            .rounded(16px);
            &:hover {
                background-color: rgba(000, 000, 000, .2);
            }
            i {
                display: block;
                text-align: center;
                position: relative;
                font-size: 14px;
                line-height: 31px;
                color: #fff;
            }
        }
    }
}

.right-aside.rightbar-show {
    //    right: 0px;
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    .animate(all .5s ease-in-out);
    visibility: visible;
}

.aside-tab {
    position: relative;
    .nav-tabs {
        border-bottom: 0px;
    }
    height: @TopBarHeight;
    li {
        a {
            height: @TopBarHeight;
            width: @TopBarHeight;
            border: 0px;
            padding: 0px;
            margin-right: 0px;
            line-height: @TopBarHeight;
            text-align: center;
            font-size: 20px;
            color: @RightAsideTabLinkColor;
            .rounded(0px);
            .transition(.1s, ease-out);
            &:focus, &:hover {
                border: 0px;
                .rounded(0px);
                background-color: transparent;
                color: @RightAsideTabLinkHoverColor;
                cursor: pointer;
                .transition(.1s, ease-out);
            }
        }
    }
    li.active {
        a {
            border: 0px;
            .rounded(0px);
            background-color: @RightAsideTabBg;
            &:focus, &:hover {
                .transition(.1s, ease-out);
                cursor: pointer;
                border: 0px;
                .rounded(0px);
                background-color: @RightAsideTabBg;
                color: @ThemeColor;
            }
        }
    }
}

.chat-list {
    margin: 0px 0px 20px 0px;
    padding: 0px;
    list-style: none;
    li {
        display: table;
        position: relative;
        width: 100%;
        padding: 20px 20px;
        border-bottom: @WidgetBorder 1px solid;
        background-color: #f9f9f9;
        .transition(.1s, ease-out);
        a {
            display: block;
            width: 100%;
            position: relative;
            & > span {
                display: table-cell;
                vertical-align: middle;
            }
            color: @AltTextColor;
            &:hover,
            &:focus {
                text-decoration: none;
                color: @ThemeColor;
            }
        }
        .chat-avatar {
            position: relative;
            width: 40px;
            height: 40px;
            img {
                width: 100%;
                .rounded(100%);
            }
        }
        .chat-u-info {
            padding-left: 12px;
            font-size: 12px;
            font-weight: 500;
            cite {
                display: block;
                font-weight: 400;
                font-size: 12px;
                font-style: normal;
                color: @SecondaryTextColor;
            }
        }
        .chat-u-status {
            position: absolute;
            top: 32%;
            right: 20px;
            color: #ccc;
            i {
                text-shadow: 0 0 3px #fff;
                font-size: 8px;
                color: #ddd;
            }
        }
        &:hover {
            background-color: #fff;
            .transition(.1s, ease-out);
        }
    }
    li.chat-u-online {
        i {
            color: @LightGreen;
        }
    }
}

.aside-tab-wigets h3 {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 12px;
    padding-left: 20px;
    padding-right: 20px;
    border-bottom: @WidgetBorder 1px solid;
    letter-spacing: .1em;
    color: @SecondaryTextColor;
    .online-counter {
        font-size: 11px;
        text-transform: none;
        letter-spacing: normal;
        color: @LightGreen;
    }
}

.conv-container {
    .transform(translateX(@RightAsideWidth));
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    -ms-transform: -ms-transform 0.3s;
    -o-transform: -o-transform 0.3s;
    transition: transform 0.3s;
    //    display: none;
    width: @RightAsideWidth;
    height: 100%;
    position: fixed;
    visibility: hidden;
    top: 0px;
    z-index: 2000;
    background-color: #fff;
    .conv-u-info {
        width: @RightAsideWidth;
        height: @TopBarHeight;
        background-color: #eee;
        ul {
            display: table;
            list-style: none;
            margin: 0px;
            padding: 3px 6px;
            position: relative;
            width: 100%;
            & > li {
                display: table-cell;
                vertical-align: middle;
                padding: 6px;
            }
            .chat-avatar {
                width: 48px;
                height: 48px;
                img {
                    width: 100%;
                    .rounded(100%);
                }
            }
            .chat-u-info {
                font-size: 12px;
                span {
                    display: block;
                    color: @SecondaryTextColor;
                    font-size: 11px;
                }
            }
            .chat-u-call {
                display: inline-block;
                background-color: #fff;
                width: 32px !important;
                height: 32px !important;
                border: #ddd 1px solid;
                line-height: 32px;
                text-align: center;
                .rounded(32px);
                cursor: pointer;
                .transition(.1s, ease-out);
                &:hover {
                    border: @ThemeColor 1px solid;
                    background-color: @ThemeColor;
                    color: #fff;
                    .transition(.1s, ease-out);
                }
            }
            .chat-close {
                display: inline-block;
                background-color: #fff;
                width: 32px !important;
                height: 32px !important;
                border: #ddd 1px solid;
                line-height: 32px;
                text-align: center;
                .rounded(32px);
                cursor: pointer;
                position: absolute;
                right: 12px;
                top: 12px;
                .transition(.1s, ease-out);
                i {
                    font-size: 18px;
                    position: relative;
                    left: 1px;
                }
                &:hover {
                    border: @ThemeColor 1px solid;
                    background-color: @ThemeColor;
                    color: #fff;
                    .transition(.1s, ease-out);
                }
            }
        }
    }
}

.conv-container.show-conv {
    .transform(translateX(0));
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    -ms-transform: -ms-transform 0.3s;
    -o-transform: -o-transform 0.3s;
    transition: transform 0.3s;
    visibility: visible;
}

.chat-search-form {
    padding: 20px;
    .chat-u-search {
        .box-shadow(none);
        .rounded(0px);
        &:focus {
            .box-shadow(none);
            border: @ThemeColor 1px solid;
        }
    }
}

.chat-user-list {
    overflow-y: auto;
}

.converstaion-list {
    overflow-y: auto;
    padding-bottom: 20px;
    .conversation-back {
        padding: 15px 15px 0px 15px;
        display: table;
        & > div {
            display: table-cell;
            vertical-align: middle;
        }
        .conv-thumb {
            width: 48px;
            height: 48px;
            padding-right: 10px;
            img {
                width: 100%;
                .rounded(100%);
            }
        }
        .conv-text {
            padding: 10px;
            font-size: 13px;
            border: @WidgetBorder 1px solid;
            background-color: #f5f5f5;
            .rounded(4px);
            position: relative;
            &:after, &:before {
                right: 100%;
                top: 50%;
                border: solid transparent;
                content: " ";
                height: 0;
                width: 0;
                position: absolute;
                pointer-events: none;
            }
            &:after {
                border-color: rgba(245, 245, 245, 0);
                border-right-color: #f5f5f5;
                border-width: 7px;
                margin-top: -7px;
            }
            &:before {
                border-color: rgba(194, 225, 245, 0);
                border-right-color: @WidgetBorder;
                border-width: 8px;
                margin-top: -8px;
            }
        }
    }
    .conversation-front {
        padding: 15px 15px 0px 15px;
        display: table;
        & > div {
            display: table-cell;
            vertical-align: middle;
        }
        .conv-text {
            border: #b2ebf2 1px solid;
            padding: 10px;
            background-color: #e0f7fa;
            font-size: 13px;
            .rounded(4px);
            position: relative;
            color: #0097a7;
            &:after, &:before {
                left: 100%;
                top: 50%;
                border: solid transparent;
                content: " ";
                height: 0;
                width: 0;
                position: absolute;
                pointer-events: none;
            }
            &:after {
                border-color: rgba(245, 245, 245, 0);
                border-left-color: #e0f7fa;
                border-width: 7px;
                margin-top: -7px;
            }
            &:before {
                border-color: rgba(194, 225, 245, 0);
                border-left-color: #b2ebf2;
                border-width: 8px;
                margin-top: -8px;
            }
        }
    }
}

.chat-input-form {
    padding: 20px;
    border-top: @WidgetBorder 1px solid;
    .chat-input {
        resize: none;
        .rounded(0px);
        padding: 6px;
        height: 34px;
        &:focus {
            border: @ThemeColor 1px solid;
            .box-shadow(none);
        }
    }
}

.server-stats-content {
    overflow-y: auto;
    .progress-wrap {
        padding: 0px 20px 20px 20px;
    }
    h3 {
        padding-top: 20px;
        margin-bottom: 20px;
    }
    .progress {
        margin-bottom: 0px;
    }
}

.aside-notifications-wrap {
    overflow-y: auto;
    .message-wrap {
        & > ul {
            list-style: none;
            padding: 0px;
            & > li {
                & > a {
                    font-size: 12px;
                    color: #444444;
                    text-decoration: none;
                    padding: 8px;
                    &:hover {
                        text-decoration: none;
                        color: #2980b9;
                    }
                }
                border-bottom: #eee 1px solid;
                background: #f9f9f9;
                &:hover,
                &:active,
                &:focus {
                    background: #fff;
                    text-decoration: none;
                }
            }
        }
    }
    .notification-wrap {
        & > ul {
            list-style: none;
            padding: 0px;
            & > li {
                & > a {
                    display: table;
                    padding: 8px;
                    font-size: 12px;
                    color: #444444;
                    background: #f9f9f9;
                    text-decoration: none;
                    border-bottom: #eee 1px solid;
                    & > span {
                        display: table-cell;
                        vertical-align: middle;
                    }
                    &:hover {
                        background: #fff;
                    }
                }
            }
        }
    }
    h4 {
        font-size: 14px;
        font-weight: 500;
        padding: 15px;
        margin: 0px;
        border-bottom: #eee 1px solid;
    }
}

.aside-notifications {
    position: relative;
    .alert-bubble {
        background-color: @AlertBubbleColor;
        display: inline-block;
        color: #fff;
        line-height: normal;
        font-size: 12px;
        position: absolute;
        padding: 4px 5px;
        right: 6px;
        top: 6px;
        font-weight: 500;
        .rounded(3px);
    }
}

.uasge-wrap {
    ul {
        width: 100%;
        list-style: none;
        display: table;
        padding: 0px 20px 20px 20px;
        margin: 0px;
        li {
            display: table-cell;
            vertical-align: middle;
        }
        .usage-chart {
            padding-left: 5px;
            text-align: right;
            .percent {
                font-size: 11px;
                font-weight: 500;
            }
        }
    }
    h4 {
        font-size: 14px;
        font-weight: 400;
        margin-bottom: 4px;
        display: inline-block;
        margin-top: 0px;
        text-transform: uppercase;
        letter-spacing: .05em;
    }
    .uasge-intro {
        display: block;
        color: @SecondaryTextColor;
        font-size: 12px;
    }
}

.r-mask {
    width: 100%;
    height: 100%;
    display: block;
    position: fixed;
    left: 0px;
    top: 0px;
    background-color: rgba(000, 000, 000, .2);
    z-index: 5900;
}