Flowdock Classic (<May 2017) theme

userstyle.css

/**
 * On 2017-05-30, Flowdock did some UI changes. This is an attempt to ease the pain.
 * Save this file as userstyle.css and put it inside ~/Library/Application Support/Flowdock/, then hit CMD+R to reload Flowdock.
 *
 * https://gist.github.com/jessedobbelaere/95c02699b2e0acd35762d204797b74f9
 * @author Jesse Dobbelaere (@JesseDobbelaere)
 */

 /* Improve the font */
body {
    font-family: -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif;
}

/* Originally icons were more translucent, but they light up when hovering over them */
a.bubble:before {
    opacity: 0.5;
}
.bubble:hover:before,
.bubble:focus:before {
    opacity: 1;
}

/* Add the colored lines back on the left of each messages. Making it more clear which messages belong together. See http://d.pr/i/GfOpo */
.bubble-container .bubble {
    border-left-width: 5px !important;
    border-left-style: solid !important;
}

/* Swap the "reply" icon with a normal "bubble" icon everywhere, like it originally was */
.chat-message.message a.bubble .vector-icon.bubble-icon {
    visibility: hidden !important;
}
.chat-message.message a.bubble:before {
    content: '';
    width: 20px;
    height: 20px;
    display: block;
    position: absolute;
    left: 6px;
    border: 20px solid;
    -webkit-mask: url('https://www.jessedobbelae.re/img/flowdock-icon-reply.svg'); /* Mirror: https://d.pr/f/r1gim5 */
    mask: url('https://www.jessedobbelae.re/img/flowdock-icon-reply.svg');
    -webkit-mask-size: 20px;
    mask-size: 20px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.chat-message.message.thread-starter a.bubble {
    padding: 0 !important;
}
.chat-message.message.thread-starter a.bubble:before {
    -webkit-mask: url('https://www.jessedobbelae.re/img/flowdock-icon-thread-starter.svg'); /* Mirror: http://d.pr/f/yCzolm */
    mask: url('https://www.jessedobbelae.re/img/flowdock-icon-thread-starter.svg');
    -webkit-mask-size: 18px;
    mask-size: 18px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    top: 10px;
}

/* Originally, inside threads there was no icon, HENCE NO CONFUSION ABOUT THREADS */
.thread-comment-message .bubble-container,
.thread-activities .bubble-container {
    opacity: 0;
}

/* When you opened a thread, the messages also shifted to the right because there was a large crossmark on the left */
.thread-comment-message .bubble-container,
.thread-file-message .bubble-container {
    display: none !important;
}
.thread-activities .chat-message.message {
    margin-left: 50px !important;
}
.thread-comment-message .content,
.thread-file-message .content {
    margin: 0 0 0 3rem !important;
}

/* 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;
}

/* Don't make the message inputfield so rounded. Go from 8px to 3px (original). */
.message-form fieldset,
.message-form.focused textarea,
.message-form.focused .left,
.message-form.focused .right {
    border-radius: 3px !important;
    box-shadow: none !important;
}

/* Also change font-size from 14 to 13px inside chat messages + inputfield */
.chat-message,
.chat-message .message-input,
.textarea .expanding-input textarea.message-input {
    font-size: 13px !important;
}

/* In the left navigation panel, flow names were originally not that bold */
.tab-name {
    font-weight: 400;
}