Slack'ish style for Flowdock

userstyle.css

/* sidebar */
.nav-header {
    border: none !important;
}

.fa-caret-down {
    font-size: .6rem !important;
    line-height: 2.5 !important;
}

.fa-caret-down:before {
    content: '\f078' !important;
}

.fa-bell:before {
    content: '\f0a2' !important;
}

.notification-badge {
    background: #EB4D5C !important;
}

#tab-bar {
    background: #4D394B !important;
    width: 16.8rem !important;
}

.tab-list-shadow {
    display: none !important;
}

.privates-list .org-link {
    margin: 1.096rem 0 0 0 !important;
}

.org-link .external-link {
    background-color: transparent !important;
}

.privates-list .org-name {
    visibility: hidden;
}

.privates-list .org-name:before {
    visibility: visible;
    content: "direct messages";
    text-transform: uppercase;
    color: #AB9BA9 !important;
}

.flow-list .org-name {
    color: #fff !important;
    text-transform: lowercase !important;
    font-size: 1.3rem !important;
    font-weight: bold !important;
}

.tab .activity-indicator-mentions {
    background-color: #EB4D5C !important;
}

.flow-tab .activity-indicator-chat {
    display: none !important;
}

.tab-name {
    background-color: transparent !important;
    font-size: 1rem;
    margin-left: 13px;
    text-transform: lowercase;
}

.private-tab .tab-name {
    margin-left: 16px;
}

.tab-avatar-container:before {
    content: '#';
    position: absolute;
}

.tab-avatar {
    display: none !important;
}

.tab-link {
    color: #AB9BA9 !important;
    padding: 0.2rem 0 0.2rem 1.5rem !important;
    font-size: 1.2rem;
    margin-right: 15px !important;
}

.has-activity .tab-link {
    color: #fff !important;
    font-weight: bold;
}

.tab-menu-link {
    margin-top: 2px !important;
}

.tab-menu-link .icon-container {
    width: 15px !important;
}

.current .tab-link {
    background: #4C9689 !important;
    color: #fff !important;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.private-tab .rounded-avatar:before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: absolute;
    border: 1px solid #AB9BA9;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
}

.private-tab.online .rounded-avatar:before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    border: none;
    left: 20px;
    background-color: #4C9689;
}

.private-tab.online.current.online .rounded-avatar:before {
    background-color: white;
}

.nav-footer {
    background: #3E313C !important;
    width: 16.8rem !important;
}

.nav-footer-actions {
    border: none !important;
}

/* fix wonky thread arrows */
.bubble {
    width: 35px;
}

.thread-comment-message .bubble-container,
.thread-activities .bubble-container {
    opacity: 0;
}

.bubble-container .bubble {
    border-left-width: 5px !important;
    border-left-style: solid !important;
}

.bubble-icon {
    display: none !important;
}

.bubble:before {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    content: '\276F';
}

.thread-starter .bubble::before {
    content: '\007E';
    font-size: 18px;
    font-weight: 600;
}

/* fix ugly shadow in input */
.message-form.focused textarea,
.message-form.focused .left {
    box-shadow: none !important;
}

/* fix icon in input */
.thread-indicator {
    padding: 0.731rem 0.5rem 0.731rem 0.731rem !important;
}

.thread-indicator .icon-container {
    display: none !important;
}

.thread-indicator::before {
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    content: '\276F';
}

/* Inside a thread, the bgcolor is gray. Make it white again like the original Flowdock */
.thread-activities,
.thread-activities .message,
.chat-message.message {
    background-color: #fff !important;
    border-color: #e4e4e4 !important;
    border-top-width: 1px !important;
}

/* fix edit message style */
.thread-comment .expanding-input {
    border: 1px solid #e4e4e4 !important;
}

/* cleaner flow UI */
.avatar-list-item,
.user-add-item {
    display: none !important;
}