Flowdock Classic (<May 2017) theme

userstyle.css

/**
 * On 2017-05-30, Flowdock did some UI changes. This is an attempt to ease the pain.
 * For the desktop app: Save this file as userstyle.css and put it inside ~/Library/Application Support/Flowdock/, then hit CMD+R to reload Flowdock.
 * For flowdock.com: Install the stylebot extension and copy this CSS into the config for flowdock.com.
 *
 * Forked from:
 * 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.7;
}

/* 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 ;
    border-left-style: solid ;
    opacity: 0.7
;
}

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

.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: 16px;
    mask-size: 16px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.chat-message.message.thread-starter a.bubble {
    padding: 0 ;
}

.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: 14px;
    mask-size: 14px;
    -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 ;
}

.thread-activities .chat-message.message {
    margin-left: 50px ;
}

.thread-comment-message .content, .thread-file-message .content {
    margin: 0 0 0 3rem ;
}

/* 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 ;
    border-color: #e4e4e4 ;
    border-top-width: 1px ;
}

/* 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 ;
    box-shadow: none ;
}

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

/* In the left navigation panel, flow names were originally not that bold */

.tab-name {
    font-weight: 400;
}

/* put author names back on the left */
.compact #chat li[class*=message] .message-author {
    float: left;
}

.compact #chat li[class*=message] .content {
    margin-left: 7em;
}

/* hide avatars in main flow  */
.compact #chat li[class*=message] .avatar-container {
    display: none;
}

.flow-tab .tab-avatar {
    filter: saturate(80%) ;
    border-radius: 2px ;
}

.notification-container {
    border-radius: 2px ;
}

/* saturate icons for all thread messages on hover*/
.bubble, .bubble:before {
    transition: opacity 0.2s ease-in-out;
}

.comment-group-hover .bubble-container .bubble, .comment-group-hover .bubble-container .bubble:before {
    opacity: 1 ;
}

/* make thread close button span full height */
.thread-close-button {
    bottom: 0;
    height: auto;
}