Skip to content

Slack Outfit by andyfitz

Screenshot of Slack Outfit

Details

Authorandyfitz

LicenseCC-BY-SA

Categoryslack

Created

Updated

Size5.8 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

A half-baked dark theme for the Slack web client that uses the outfit font and makes typography generally more enjoyable.

Notes

Userstyle doesn't have notes.

Source code

@import url("https://outfitio.github.io/Outfit-Fonts/outfit-fonts.css");


.c-menu_item__button,
.c-menu_item__button:link,
.c-menu_item__button:visited,
.ql-editor,
[lang] body {
  font-family: outfit !important
}

.p-rich_text_block {
  font-weight: 300;
}
.c-timestamp,
.c-message__sender_link {
  font-weight: 600;
}


.p-channel_sidebar__channel_icon_suffix,
.c-timestamp__label {
  opacity: .5;
  font-weight: 200
}



.p-view_header__big_button--page .p-ia__view_header__title,
.p-ia__sidebar_header__mode__name,
.p-ia__sidebar_header__team_name_text,
.p-view_header__title {
  font-weight: 600
}

.p-ia__sidebar_header__mode__name,
.p-ia__sidebar_header__team_name_text {
  text-transform: lowercase
}

.p-workspace__sidebar:after {
  opacity: 0
}

.p-huddle_sidebar_footer__controls,
.p-huddle_sidebar_footer__join_active_container,
.p-huddle_sidebar_footer__join_non_active_container,
.p-ia__sidebar_header--top-nav .p-ia__sidebar_header__button,
.p-ia__sidebar_header--top-nav .p-ia__sidebar_header__mode {
  border-color: transparent
}
.p-channel_sidebar--iap1 .p-channel_sidebar__channel_icon_prefix,
.p-channel_sidebar--iap1 .p-channel_sidebar__link::before,
.p-channel_sidebar--iap1 .p-channel_sidebar__link__icon,
.p-channel_sidebar--iap1 .p-channel_sidebar__section_heading_expand,
.p-drag_layer .p-channel_sidebar__channel_icon_prefix,
.p-drag_layer .p-channel_sidebar__link::before,
.p-drag_layer .p-channel_sidebar__link__icon,
.p-drag_layer .p-channel_sidebar__section_heading_expand {
  opacity: .3
}
 

.p-threads_view__footer,
.p-threads_view_load_newer_message,
.p-threads_view_load_older_message,
.p-threads_view_reply,
.p-threads_view_root,
.c-wysiwyg_container {
  border-style: none
}

.sk-client-theme--dark {
  --sk_primary_foreground: 209, 210, 211;
  --sk_primary_background: 16, 24, 32;
  --sk_inverted_foreground: 26, 29, 33;
  --sk_inverted_background: 209, 210, 211;
  --sk_foreground_max: 232, 232, 232;
  --sk_foreground_high: 232, 232, 232;
  --sk_foreground_mid: 232, 232, 232;
  --sk_foreground_low: 232, 232, 232;
  --sk_foreground_soft: 232, 232, 232;
  --sk_foreground_min: 232, 232, 232;
  --sk_foreground_max_solid: 171, 171, 173;
  --sk_foreground_high_solid: 129, 131, 133;
  --sk_foreground_mid_solid: 81, 84, 87;
  --sk_foreground_low_solid: 53, 55, 59;
  --sk_foreground_soft_solid: 36, 39, 42;
  --sk_foreground_min_solid: 34, 37, 47;
  --sk_highlight: 29, 155, 209;
  --sk_highlight_hover: 5, 79, 128;


  color-scheme: dark;
}


.c-message_kit__background--hovered {
  background-color: rgb(22, 32, 43)
}



.p-top_nav {
  background-color: transparent
}

.p-top_nav__search,
.p-top_nav__search:hover {
  box-shadow: none;
  border-radius: 2em;
  text-indent: .5em
}


.c-menu,
.p-client_desktop--ia-top-nav .c-message_list__day_divider__label__pill {
  box-shadow: 0 .3em 2em rgba(0, 0, 0, .6) !important;
  font-weight: 400;
}



.p-client_desktop--ia-top-nav .c-message_list__day_divider__label__pill {
  color: #567;
}

::selection {
  color: white;
  background: #a32 !important;
}
.p-bookmarks_bar--with-hide-on-scroll,
.p-workspace__primary_view_body,
.p-view_header {
  box-shadow: none !important
}
.c-message_list__day_divider__line {
  border: none
}



.p-recent_page__divider {
  background-color: transparent;
}

[role="document"],
.p-activity_page__item,
.p-top_nav,
img:before,
img:after,
img {
  border: none !important;
  content: "";
  appearance: none;
  box-shadow: none !important;
}


img {
  overflow: hidden;
}

img[alt] {
  margin-left: -1px;
  text-indent: 10em;
}

.p-message_pane__foreword__avatars img {
  transform: none !important;
  mix-blend-mode: luminosity
}

.p-composer__separator,
.c-wysiwyg_container--composer_ia .c-wysiwyg_container__formatting .c-icon_button {
  opacity: 0;
}

.p-message_pane__foreword * {
  color: #567
}
.p-message_pane__foreword,


.c-message_attachment__main_content {
  font-size: .7em;
  font-weight: 200;
}


.c-message_attachment__text {
  font-weight: 200;
  color: #678
}


.p-view_header__truncated_text {
  font-weight: 500;
  font-size: 2em;
}

.p-view_header__avatar {
  margin-right: 2em;
}
.p-view_header__avatar img {
 
  z-index: 9;
}

.p-view_header__avatar i {
  transform: translate(1.5em, 1em)
}

.p-resizer:after{background-color: rgba(60,80,110,0.5) }


.p-channel_sidebar__static_list__item{ position:relative !important; top: auto !important; min-height: 3em !important;}


.p-channel_sidebar__link, .p-channel_sidebar__link--page, 
.p-channel_sidebar__link--page_pdms, 


.p-channel_sidebar__static_list__item, .p-channel_sidebar__static_list__item--contain, .c-virtual_list__item,
.p-channel_sidebar__channel{min-height: 3em !important}


.p-channel_sidebar__user_avatar,
.c-avatar,
.c-base_icon__width_only_container,
.c-base_icon, .c-base_icon--image{ width: 3em !important; height:3em !important; border-radius: 50%;  background-color:transparent!important; border:none; box-shadow: none; overflow:visible !important}

.p-avatar_stack--details{box-shadow:none}

.c-message__reply_bar .c-base_icon,
.c-message_kit__thread_replies .c-avatar{width:2em !important; height:2em !important}

.p-channel_sidebar__presence_icon.p-channel_sidebar__presence_icon--on-avatar{lefT:-.75em !important; top:-.25em !important}


.p-channel_sidebar__user_avatar_presence_bg{display:none !important}

.p-threads_view_header--first{font-size:2em}






.p-channel_sidebar__channel:hover *{opacity:1; color:white !important}


.c-presence, .c-presence--active, .c-icon--presence-online{top:-.25em ; left:-.25em}

Reviews

No reviews yet.