Slack-like styles for Flowdock's gross UI

flowdock-style-override.css

/* i really want this to be global */
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v13/IY9HZVvI1cMoAHxvl0w9LVKPGs1ZzpMvnHX-7fPOuAc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v13/22JRxvfANxSmnAhzbFH8PgLUuEpTyoUstqEm5AMlJo4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v13/8qcEw_nrk_5HEcCpYdJu8BTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v13/MDadn8DQ_3oT6kvnUq_2r_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: local('Lato Black'), local('Lato-Black'), url(https://fonts.gstatic.com/s/lato/v13/t85RP2zhSdDjt5PhsT_SnlKPGs1ZzpMvnHX-7fPOuAc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: local('Lato Black'), local('Lato-Black'), url(https://fonts.gstatic.com/s/lato/v13/lEjOv129Q3iN1tuqWOeRBgLUuEpTyoUstqEm5AMlJo4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

body {
    font-family: "Lato";
}

#tab-bar {
    background: #303E4D;
    width: 220px;
}
.tab-list-shadow.bottom {
	background-image: linear-gradient(rgba(23,29,31,0), #27323f);
}
.nav-footer {
    width: 220px;
    background: none;
}
.nav-footer .nav-footer-tooltip {
    background: #27323f;
    width: 220px;
}
.nav-footer .nav-footer-actions {
    border: none;
}
.tab-list-shadow.top {
    display: none !important;
}
.tab {
    font-size: 15px;
    position: relative;
}
.tab-link {
    font-weight: 300;
    color: #b3b9bf !important;
    line-height: 24px;
    max-height: 24px;
	padding: 0 0 0 20px;
    width: 200px;
    border-radius: 0 4px 4px 0;
    text-transform: lowercase;
}
.tab-link:hover {
    color: #8e97a0;
    background: #4A5664;
}
.current .tab-link:hover {
    color: #fff;
}
.current .tab-link,
.current .tab-name {
    color: #fff;
    background: #6698C8;
}
.flow-tab .tab-name::before {
	content: "#";
    color: #6e7884;
	padding-right: 5px;
}
.flow-tab.current .tab-name::before {
    color: #a9c9e8;
}

.private-tab .tab-link {
	padding: 0 0 0 20px;
}

.tab-menu-link {
    margin-top: 3px;
	right: 33px;
	color: #fff !important;
    fill: #fff;
}

.nav-header, .tab-link, .tab-name {
    background: none;
}

.flow-list .org-link {
	padding: 0 0 0 20px;
}

.org-name {
    color: #fff;
}

.tab-avatar {
    display: none !important;
}
.current .tab-avatar {
    background-color: #798BA0 !important;
}
.bubble-container .drag-handle {
    border-left: solid 7px;
    border-color: inherit;
}
.bubble-container .bubble-icon {
    opacity: 0;
}

/** Avatars **/
.user-avatar img,
.thread-avatar,
.user-menu-avatar {
    width: 30px;
    height: 30px;
	border-radius: 2px !important;   
}
.user-avatar::after,
.user-menu-avatar::after {
	border: none !important;
    box-shadow: none;
}

/** Threads **/
.chat-message {
    border: none !important;
}
.chat-message .content {
    line-height: 23px;
    margin-left: 0px !important;
}
.tag.mention {
	background: none !important;
    border: none !important;
    color: #007ab8 !important;
}
.tag.mention:hover {
    text-decoration: underline;
}
.chat-message .msg-body {
    font-size: 15px;
}
.message-author,
.emphasize-me .message-author {
    color: #2C2D30 !important;
    margin-right: 5px;
}
.timestamp-link time {
	position: relative !important;
	visibility: visible !important;
    color: #cccccc;
    font-size: 12px !important;
    font-weight: 300 !important;
	padding-left: 0;
    right: inherit !important;
}
.thread-avatar {
    width: 35px;
    height: 35px;
}
.avatar-container {
    left: 30px !important;
    top: 5px !important;
}

/** Message input **/
.message-form,
#thread .message-form {
    background: #ffffff;
    border-top: none;
    padding: 20px;
}

.message-form fieldset {
	border-radius: 5px !important;
    border: 2px solid #E0E0E0;
}
.message-form.focused textarea {
    box-shadow: none !important;
}
.message-form.focused fieldset .left {
	box-shadow: none !important;
}

.expanding-input textarea,
.expanding-input pre {
    font-size: 15px !important;
    font-family: "Lato";
}

/** Dropdowns **/
.dropdown-actions > li > a:hover {
 	background: #2D9EE0;   
}