Groupme but its tweetdeck by rlego

/* ==UserStyle==
@name           Groupme but it kinda looks like tweetdeck
@namespace      you
@version        1.0.0
@description    only for lightmode
@author         rlego
==/UserStyle== */

@-moz-document domain("web.groupme.com") {
    body {
        font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu,
        Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji,
        Segoe UI Symbol, Arial, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro,
        メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic;
        font-size: 13px;
        font-weight: 400;
        line-height: normal;
    }
    /*main*/
    #app {
        background:#cbcbcb;
    }
    
    
    
    
    /*nav*/
    .pillar {
        background:#1c2938;
        border:0;   
    }
    .pillar .tab {
        color:#aab8c2
    }
    .pillar .tab.logo svg path {
        fill:#1da1f2;
    }
    .pillar .tab .selected, .pillar .tab .selected {
        display:inline;
    }
    .pillar .tab:hover .selected, .pillar .tab:focus .selected, .pillar .tab.active .selected {
        color:#fff
    }
    .pillar .tab .unselected, .pillar .tab .unselected {
        display:none
    }
    .pillar .tab.active {
        background:none;
        box-shadow:none;
    }
    
    
    
    
    
    /*headers*/
    #chats .chat-header, #tray .list-search {
        border-bottom:1px solid #e1e8ed;
        color:#38444d;
        background:#eee;
        border-radius:0;
        box-shadow:none;
        max-height:50px;
        padding:0
    }
    #tray .tray-header {
        color:#38444d;
        background:#eee;
        border-radius:0;
        box-shadow:none;
        margin-top:0;
    }
    #tray .tray-header .list-title, #chats .chat-header .menu-toggle .chat-name-container .title-wrap .chat-name {
        margin:0;
        padding:0;
        font-size:16px;
        font-weight:700;
        line-height:3.6em;
        color:#38444d;
        letter-spacing:0;
        font-family:arial;
        margin-left:16px;
        max-height:50px;
    }
    #chats .chat-header .menu-toggle .chat-name-container {
        display:flex;
        flex-direction:row;
        align-items:center;
    }
    #chats .chat-header .menu-toggle .chat-name-container .title-wrap .chat-name {
        margin:0;
        line-height:3.2em
    }
    #chats .chat-header .menu-toggle .chat-name-container .title-wrap {
        margin:0;
        display:inline;
        
    }
    #chats .chat-header .menu-toggle .chat-name-container .title-wrap .toggle-arrow {
        display:none
    }
    #chats .chat-header .menu-toggle .chat-name-container .main-chat-name {
        display:inline;
        font-size:13px;
        line-height:3.6em;
        color:#8899a6;
        font-family:arial;
        margin-left:5px;
        max-height:45px;
        margin-top:3px;
    }
    #chats .chat-header .menu-toggle .avatar-wrap {
        float:left;
        margin-top:8px;
        margin-right:5px
    }
    #chats .chat-header .menu-toggle {
        position:static
    }
    #chats .chat-header .menu-toggle .chat-name-container .main-chat-name.show-campus .campus {
        display:none;
    }
    #tray .tray-header .actions {
        margin-top:6px;
    }
    #tray .tray-header .actions .frameless, #chats .chat-header .chat-actions .chat-action {
        border-radius:0;
        background:none;
        color:#1da1f2;
    }
    #tray .tray-header .actions .frameless svg {
        height:28px;
        width:28px;
    }
    #chats .chat-header .menu-toggle .chat-name-container {
        max-width:100%;

    }
    #chats .chat-header .chat-actions {
        top:1px;
    }
    /*bodies*/
    
    
    /**chat list*/
    #tray .tray-list {
        background:#fff;
    }
    .app-sidebar.open #tray {
        padding-left:6px
    }
    #chats .chat {
        margin:0 0 0 6px
    }
    .list-item[data-v-4a6912cc] {
        padding:0;
        border-bottom: 1px solid #e1e8ed;
        border-radius:0;
    }
    .list-item.active a[data-v-4a6912cc] {
        box-shadow:inset 4px 0 0 #5a98c0;
        border-radius:0;
    }
    
    /**chats*/
    #chats .chat-content {
        top:50px
    }
    .chat-messages .message .message-header .avatar {
        width:56px
    }
    .chat-messages .message .message-body {
        padding-left:56px
    }
    .chat-messages .message .message-body .content {
        margin-right:56px
    }
    img[data-v-b48aaa7a] {
        border-radius:5px;
    }
    .reaction button.response-btn[data-v-ea27d330] {
        border-radius:3px;
    }
    .message-actions .row[data-v-2ff4f420], .message-actions .dropdown .dropdown-menu {
        background-color: #fff;
        color: #38444d;
        font-weight: 400;
        font-size: 12px;
        line-height: 18px;
        box-shadow: 0 1px 4px rgba(20, 23, 26, 0.35);
        border-radius:6px;
    }
    .message-actions .dropdown .dropdown-menu {
        padding:9px 0;
        border:0;
    }
    .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus {
        background: #1da1f2;
        color: #fff;
    }
    /*footer*/
    .message-composer {
        color:#38444d;
        background:#e1e8ed;
        border-radius:0;
        border:0;
    }
    input, #tray .list-search input {
        display: inline-block;
        font-size: 13px;
        line-height: 18px;
        background: #fff;
        border: 1px solid #e1e8ed;
        border-radius: 4px;
        height: 28px;
        padding: 4px 8px;
        color: inherit;
        width:calc(100% - 16px);
        margin:4px 8px
    }
    .message-composer .composer-layout .composer-wrapper .emoji-wysiwyg-editor {
        font-size: 13px;
        line-height: 18px;
        background: #fff;
        border: 1px solid #e1e8ed;
        border-radius: 4px;
        box-shadow: inset 0 1px 1px rgba(20, 23, 26, 0.5);
        transition: height 0.3s ease-in-out;
        padding: 6px 8px;
        min-height:26px
    }
    .message-composer .composer-layout .composer-wrapper .emoji-wysiwyg-editor:empty:before {
        content:none
    }
    .message-composer .composer-layout .composer-wrapper .emoji-wysiwyg-editor:focus, input:focus, #tray .list-search input:focus {
        border-color: rgba(29, 161, 242, 0.8);
        box-shadow: inset 0 1px 3px rgba(20, 23, 26, 0.1), 0 0 8px rgba(29, 161, 242, 0.6);
        outline:none;
    }
    .message-composer .composer-layout .controls {
        top:-3px
    }
    .message-composer .composer-layout .plus-extender {
        color:#1da1f2
    }
    
    
    /*scrol*/
    ::-webkit-scrollbar-thumb {
        background: #e1e8ed;
        border-radius: 5px;
    }
    ::-webkit-scrollbar-track {
        background:#f5f8fa
    }
    .scroll-styled-h::-webkit-scrollbar-track, .scroll-styled-v::-webkit-scrollbar-track {
        border-left: 1px solid #e1e8ed;
    }.scroll-styled-v::-webkit-scrollbar {
        width: 10px;
    }
    ::-webkit-scrollbar {
        width: 10px;
    }
    .scroll-styled-v::-webkit-scrollbar-thumb {
        min-height: 50px;
    }
    .scroll-styled-h::-webkit-scrollbar-thumb, .scroll-styled-v::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background-color: #e1e8ed;
    }
    
    ::selection {
        background: #e1e8ed;
        color: #14171a;
        text-shadow: none;
    }
}