ty-slack-theme.css

/*
For the Slack Mac app, add this to Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js
document.addEventListener('DOMContentLoaded', function() {
	const cssURI = 'https://gist.githubusercontent.com/thienanle/c3322e9fbfff40e6c15e2c80beeb885b/raw/ty-slack-theme.css';
	$.get(cssURI).then(function(css) {
	  $('<style />').text(css).appendTo('body');
	});
});
*/

html {
    --neutralL1: #F9FBFC;
	--neutralL2: #F4F7F9;
	--neutralL3: #EBF0F4;
	--neutralL4: #E0E8EE;
	--neutralL5: #D6E0E8;
	--neutralL6: #C9D6E0;
	--charcoalBase: #2F313A;
	--charcoalW10: #43454D;
	--charcoalW50: #97989C;
	--charcoalW80: #D5D5D7;
	--charcoalW90: #EAEAEB;
    
    --radius: 4px;
    --speed: 0.2s;
    
    --green: #40C9A2;
}

body {
    font-family: Roboto !important;
    -webkit-font-smoothing: antialiased;
}
body.is-electron .channel_header {
	padding-top: 16px;
}

/* right sidebar --------------------------------------------- */
.p-channel_sidebar__static_list {
    font-size: 0.9em;
}
#team_menu .notifications_menu_btn {
    opacity: 0.2;
}

/* ----------------------------------------------------------- */

#client-ui.flex_pane_showing #col_flex {
	/* right sidebar width limit */
    flex-basis: 350px;
}

.search_form {
    border-radius: 20px;
    border-color: var(--charcoalW80);
}
.search_form:hover {
    border-color: var(--charcoalW50);
}

.day_container .day_divider .day_divider_label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--charcoalW50);
    font-weight: 500;
    top: -5px;
}

/* main message input, right sidebar message input -------------------- */
#msg_form {
    margin: 0 24px;
}

ts-thread .inline_message_input_container .ql-container {
    border-radius: 0 0 var(--radius) var(--radius);
}

#msg_form .emo_menu,
#msg_form .msg_mentions_button,
#reply_container .emo_menu {
	color: var(--charcoalW80);
}

/* messages ------------------------------------------------- */



.c-message__content_header {
    margin-bottom: 4px !important;
}


.light_theme #convo_container ts-message .message_content {
    margin-left: 10px;
}
#convo_scroller { padding-left: 6px; padding-right: 4px; }
.light_theme ts-message .message_content {
    margin-left: 76px;
}
.message_icon {
    margin-top: 8px !important;
}
.message_content_header {
    margin-bottom: 4px;
}
ts-message .message_content .message_sender {
    font-weight: 500 !important;
}
.member_image {
    border-radius: 50%;
}
ts-message .message_current_status {
    display: none !important;
}
ts-message:hover:not(.standalone):not(.multi_delete_mode):not(.highlight):not(.new_reply) {
    background: none;
}
ts-message .timestamp,
ts-message .star {
    transition: opacity var(--speed);
}
ts-message .action_hover_container {
    border-radius: var(--radius);
    clip: auto;
    opacity: 0;
    transition: all var(--speed);
    transform: translateX(4px);
}
ts-message:hover .action_hover_container {
    transform: none;
    opacity: 1;
}
ts-message .reply_bar:hover {
    border: 1px solid transparent;
    border-radius: var(--radius);
    background-color: var(--neutralL2);
}
ts-message .view_conv_hover {
    display: none;
}
ts-message .reply_bar:hover .last_reply_at {
    opacity: 1;
}
.c-message_actions__container {
    border-radius: var(--radius);
    top: 4px;
}

/* right sidebar condense items */
.p-channel_sidebar__static_list > div {
    margin-bottom: -2px;
    font-size: 95%;
}
.p-channel_sidebar__channel, .p-channel_sidebar__link {
    height: 24px;
    line-height: 24px;
}
.p-channel_sidebar__close {
    top: 2px;
}

/* spacing between messages ------------------------------ */
.c-message {
    margin-top: 20px;
    padding: 8px 0;
}
.c-message--adjacent {
    margin-top: 0;
    padding-top: 4px;
}
.c-message--last {
    margin-bottom: 36px;
}
.message.first.message_container_item { /* right sidebar messages */
    margin-top: 12px;
}
.thread_body_container .message.first {
    margin: 0;
}
.day_container .day_msgs {
    padding-top: 8px;
}

/* right sidebar input ------------------------------ */
#reply_container .member_image {
    visibility: hidden;
}
.light_theme #reply_container .inline_message_input_container,
.light_theme #reply_container .reply_container_info {
    margin-left: 0;
}
/* right sidebar input options below */
#reply_container .reply_container_info .reply_broadcast_buttons_container {
    opacity: 0;
    pointer-events: none;
    margin-top: -8px;
    transition: all var(--speed);
}
#reply_container.has_focus .reply_container_info .reply_broadcast_buttons_container {
    opacity: 1;
    margin-top: -4px;
}



/* new messages divider */
.c-message_list__unread_divider {
    margin-top: 40px;
    margin-bottom: 12px;
    text-align: center;
}
.c-message_list__unread_divider__separator {
    border-color: var(--green);
}
.c-message_list__unread_divider__label {
    top: -9px;
    padding: 4px 8px;
    margin: 0;
    font-size: 10px;
    text-transform: uppercase;
    position: relative;
    right: auto;
    box-shadow: none;
    color: var(--green);
}
.c-message_list__unread_divider {
    margin-top: 24px;
}

/* top header bar ------------------------------------------------------------ */
#channel_name_container {
    transform: translateY(8px);
    transition: transform var(--speed);
}
#channel_header_info {
    transition: opacity var(--speed);
	opacity: 0;
}
.channel_title:hover #channel_name_container {
    transform: translateY(0);
}
.channel_title:hover #channel_header_info {
    opacity: 1;
}
.channel_header ts-icon,
.channel_header #search_container ts-icon {
    opacity: 0.5;
    transition: opacity var(--speed);
}
.channel_header:hover ts-icon,
.channel_header:hover #search_container ts-icon {
    opacity: 1;
}


/* SCROLLBARS */
.c-scrollbar__bar {
    transition: opacity var(--speed);
}
#msgs_scroller_div {
    /* https://stackoverflow.com/a/38748186/4066098 */
    background-color: transparent;
    -webkit-background-clip: text;
    transition: background-color var(--speed);
}
#msgs_scroller_div:hover {
    background-color: var(--charcoalW80);
}
#msgs_scroller_div::-webkit-scrollbar-track {
    background: none !important;
}
#msgs_scroller_div:hover::-webkit-scrollbar-track {
    background: var(--neutralL1) !important;
}
#msgs_scroller_div::-webkit-scrollbar-thumb {
    background: none !important;
}
#msgs_scroller_div:hover::-webkit-scrollbar-thumb {
    background: inherit !important;
}

/* thread item under message hover state */
.c-message__reply_bar--focus .c-message__reply_bar_view_thread, .c-message__reply_bar:hover .c-message__reply_bar_view_thread {
    opacity: 0;
}
.c-message__reply_bar--focus .c-message__reply_bar_last_reply, .c-message__reply_bar:hover .c-message__reply_bar_last_reply {
    opacity: 1;
}
.c-message__reply_bar--focus, .c-message__reply_bar:hover {
    background-color: #f9f9f9;
    text-decoration: underline;
    border-color: transparent;
}


/* day divider */
.c-message_list__day_divider {
    padding: 28px 0 8px;
}





/* ============================================================================================== */
/* MESSAGES */
/* ============================================================================================== */
/* round avatar */
.c-avatar__image {
	border-radius: 50%;
    overflow: hidden;
}
.c-message__body,
.c-message_kit__text {
    line-height: 24px !important;
}
.c-message--light .c-message__content {
    margin-left: 80px;
}
.c-message__sender {
    font-weight: 400;
    font-size: 16px;
}
.c-timestamp {
    float: right;
}
.c-timestamp__label {
    color: var(--charcoalW50);
}

/* ============================================================================================== */
/* LEFT SIDEBAR */
/* ============================================================================================== */

.p-channel_sidebar__channel--selected {
    background-color: rgba(255,255,255,0.2);
}
.p-channel_sidebar__close_container:hover {
    background: none;
}
.p-channel_sidebar__section_heading_label {
	text-transform: uppercase;
    opacity: 0.5;
    font-size: 12px;
}
/* left sidebar: hide icons */
.p-channel_sidebar__close_container .c-icon,
.p-channel_sidebar__channel:before {
    display: none;
}



/* ============================================================================================== */
/* RIGHT SIDEBAR */
/* ============================================================================================== */
.p-threads_flexpane {
    
}


/* ============================================================================================== */
/* THREADS */
/* ============================================================================================== */

.p-threads_view_root {
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}
.p-threads_view__footer {
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}



/* ============================================================================================== */
/* MESSAGE TEXT INPUT */
/* ============================================================================================== */

#msg_input,
.p-threads_footer__input--legacy .p-message_input_field {
    border: 1px solid var(--charcoalW80);
    border-radius: var(--radius);
    transition: all var(--speed);
}

#msg_input.focus,
.p-threads_footer__input--legacy .p-message_input_field.focus {
    border-color: var(--charcoalW50);
}

#primary_file_button,
.p-threads_footer__input--legacy .p-message_input_file_button {
    background: transparent;
}

#primary_file_button {
    border: none;
    width: 40px;
}

.p-threads_footer__input--legacy .p-message_input_file_button,
.p-threads_footer__input--legacy .p-message_input_file_button:hover,
.p-threads_footer__input .p-message_input_field.focus~.p-message_input_file_button:not(:hover) {
    border-color: transparent;
}

/* message text input (main): icon */
#primary_file_button .ts_icon {
    top: 0;
}



/* ============================================================================================== */
/* REACTIONS */
/* ============================================================================================== */
.c-message_kit__reaction_bar .c-reaction {
    border-radius: var(--radius);
}


/* ============================================================================================== */
/* DAY DIVIDERS */
/* ============================================================================================== */
.c-message_list__day_divider__label__pill {
	color: var(--charcoalW50);
    font-size: 80%;
    text-transform: uppercase;
}

/* ============================================================================================== */
/* SCROLLBARS */
/* ============================================================================================== */
/* make all scrollbars thinner */
.flex_content_scroller::-webkit-scrollbar,
#app_space_scroller_div::-webkit-scrollbar,
#archive_msgs_scroller_div::-webkit-scrollbar,
#msgs_scroller_div::-webkit-scrollbar,
.c-scrollbar__track {
    width: 4px !important;
}