Slack - Pastel Mint Material by lostrhapsody

Details

Authorlostrhapsody
LicenseNo License
Categoryuserstyles, slack, material ui, material, pastel, mint
Created1 year, 9 months ago
Updated1 year, 9 months ago
Size21 kB
Statistics

Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description

A WIP slack UI theme refresh with a minty-pastel primary color and Material UI generated color palette.
Notes

Nothing yet.
Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name           7/29/2022, 1:18:09 PM
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
==/UserStyle== */

@-moz-document domain("app.slack.com") {
   
   :root {
   --p-channel_sidebar__column-bg: #cce8e3;
   --p-channel_sidebar__computed-text-color: #4a6360;
   --p-channel_sidebar__muted-text-color: #4a6360;
   --p-channel_sidebar__navigation-bar-color: #006a63;
   --p-channel_sidebar__navigation-bar-color--hover: #cee5ff;
   --p-channel_sidebar__navigation-bar-color--active: #cee5ff;
   --p-channel_sidebar__focus-outline-box-shadow: 0 0 0 1px #006a63, 0 0 0 5px #47617a;
   --p-channel_sidebar__top-nav-text: #ffffff;
   --p-channel_sidebar__top-nav-bg: #006a63;
   --p-channel_sidebar__top-nav-text--opacity-20: rgba(0,0,0,0.2);
   --p-channel_sidebar__top-nav-text--opacity-23: rgba(0,0,0,0.23);
   --p-channel_sidebar__theme-text: #383F45;
   --p-channel_sidebar__theme-text--opacity-11: rgba(0,0,0,0.11);
   --p-channel_sidebar__theme-text--opacity-20: rgba(0,0,0,0.2);
   --p-channel_sidebar__theme-text--opacity-89: rgba(0,0,0,0.89);
   --p-channel_sidebar__active-badge-text-color: #FFFFFF;
   --p-channel_sidebar__active-badge-bg: #cee5ff;
   --p-channel_sidebar__badge-color: #cee5ff;
   --p-channel_sidebar__badge-text-color: #FFFFFF;
   --p-channel_sidebar__unreads-banner-color: #F8F8FA;
   --p-channel_sidebar__unreads-banner-bg: #47617a;
   --p-channel_sidebar__mentions-banner-color: #FFFFFF;
   --p-channel_sidebar__mentions-banner-bg: #cee5ff;      
   }
   
   background {
      color:#fafdfb;
   }
   
   .p-message_pane_input {
      background-color: #fafdfb;
   }
   
   .c-wysiwyg_container__formatting {
      background-color: #006a63;
      color: #ffffff
   }
   
   .p-top_nav {
      background-color: #006a63;
   }
   
   .p-composer__button--sticky.c-icon_button {
      color: #ffffff
   }
   
   .p-huddle_sidebar_footer__join_non_active_container {
      background-color: #006a63;
      color: #ffffff;
   }
   
   .p-channel_sidebar--iap1 .p-channel_sidebar__section_heading {
      background-color:#cce8e3;
   }
   
   .p-huddle_antenna_icon__outer_wave, .p-huddle_antenna_icon__inner_wave--text_color_opacity_50, .p-huddle_antenna_icon__antenna--text_color_opacity_50 {
      fill: #ffffff;
   }
   
   .p-huddle_antenna_icon__outer_wave:hover, .p-huddle_sidebar_footer--join_non_active:hover .phuggle_antenna_icon__inner_wave, .p-huddle_antenna_icon__antenna--text_color_opacity_50:hover {
      fill: #cfe5ff;
   }      
   
   .p-channel_sidebar--iap1:hover.p-channel_sidebar__section_heading:hover, .p-channel_sidebar__channel:hover, .p-channel_sidebar__link--add-more-items:hover, .p-channel_sidebar__link--all-threads:hover, .p-channel_sidebar__link--page_pdms:hover, .p-channel_sidebar__link--page_pactivity:hover ,.p-channel_sidebar__link--page_psaved:hover, .p-channel_sidebar__link--page_pslack-connect:hover, .p-ia__sidebar_header--top-nav:not(.p-ai__sidebar_header--creator-setup):hover, .p-channel_sidebar__link--page_pdrafts:hover {
      background-color:#cee5ff;
   }
   
   .c-message_kit__gutter {
      background-color:#fafdfb;   
   }
   
   .c-message_kit__gutter:hover {
      background-color:#dae5e2
   }
   
   
   
.headline1, .display-small {
  font-family: var(--md-sys-typescale-headline1-font);
  font-weight: var(--md-sys-typescale-headline1-weight);
  font-size: var(--md-sys-typescale-headline1-size);
  line-height: var(--md-sys-typescale-headline1-line-height);
  letter-spacing: var(--md-sys-typescale-headline1-tracking);
}
.display3, .display-medium {
  font-family: var(--md-sys-typescale-display3-font);
  font-weight: var(--md-sys-typescale-display3-weight);
  font-size: var(--md-sys-typescale-display3-size);
  line-height: var(--md-sys-typescale-display3-line-height);
  letter-spacing: var(--md-sys-typescale-display3-tracking);
}
.display2, .display-large {
  font-family: var(--md-sys-typescale-display2-font);
  font-weight: var(--md-sys-typescale-display2-weight);
  font-size: var(--md-sys-typescale-display2-size);
  line-height: var(--md-sys-typescale-display2-line-height);
  letter-spacing: var(--md-sys-typescale-display2-tracking);
}
.headline4, .headline-small {
  font-family: var(--md-sys-typescale-headline4-font);
  font-weight: var(--md-sys-typescale-headline4-weight);
  font-size: var(--md-sys-typescale-headline4-size);
  line-height: var(--md-sys-typescale-headline4-line-height);
  letter-spacing: var(--md-sys-typescale-headline4-tracking);
}
.headline3, .headline-medium {
  font-family: var(--md-sys-typescale-headline3-font);
  font-weight: var(--md-sys-typescale-headline3-weight);
  font-size: var(--md-sys-typescale-headline3-size);
  line-height: var(--md-sys-typescale-headline3-line-height);
  letter-spacing: var(--md-sys-typescale-headline3-tracking);
}
.headline2, .headline-large {
  font-family: var(--md-sys-typescale-headline2-font);
  font-weight: var(--md-sys-typescale-headline2-weight);
  font-size: var(--md-sys-typescale-headline2-size);
  line-height: var(--md-sys-typescale-headline2-line-height);
  letter-spacing: var(--md-sys-typescale-headline2-tracking);
}
.overline, .label-medium {
  font-family: var(--md-sys-typescale-overline-font);
  font-weight: var(--md-sys-typescale-overline-weight);
  font-size: var(--md-sys-typescale-overline-size);
  line-height: var(--md-sys-typescale-overline-line-height);
  letter-spacing: var(--md-sys-typescale-overline-tracking);
}
.button, .label-large {
  font-family: var(--md-sys-typescale-button-font);
  font-weight: var(--md-sys-typescale-button-weight);
  font-size: var(--md-sys-typescale-button-size);
  line-height: var(--md-sys-typescale-button-line-height);
  letter-spacing: var(--md-sys-typescale-button-tracking);
}
.subhead2, .title-small {
  font-family: var(--md-sys-typescale-subhead2-font);
  font-weight: var(--md-sys-typescale-subhead2-weight);
  font-size: var(--md-sys-typescale-subhead2-size);
  line-height: var(--md-sys-typescale-subhead2-line-height);
  letter-spacing: var(--md-sys-typescale-subhead2-tracking);
}
.subhead1, .title-medium {
  font-family: var(--md-sys-typescale-subhead1-font);
  font-weight: var(--md-sys-typescale-subhead1-weight);
  font-size: var(--md-sys-typescale-subhead1-size);
  line-height: var(--md-sys-typescale-subhead1-line-height);
  letter-spacing: var(--md-sys-typescale-subhead1-tracking);
}
.headline5, .title-large {
  font-family: var(--md-sys-typescale-headline5-font);
  font-weight: var(--md-sys-typescale-headline5-weight);
  font-size: var(--md-sys-typescale-headline5-size);
  line-height: var(--md-sys-typescale-headline5-line-height);
  letter-spacing: var(--md-sys-typescale-headline5-tracking);
}
.caption, .body-small {
  font-family: var(--md-sys-typescale-caption-font);
  font-weight: var(--md-sys-typescale-caption-weight);
  font-size: var(--md-sys-typescale-caption-size);
  line-height: var(--md-sys-typescale-caption-line-height);
  letter-spacing: var(--md-sys-typescale-caption-tracking);
}
.body2, .body-medium {
  font-family: var(--md-sys-typescale-body2-font);
  font-weight: var(--md-sys-typescale-body2-weight);
  font-size: var(--md-sys-typescale-body2-size);
  line-height: var(--md-sys-typescale-body2-line-height);
  letter-spacing: var(--md-sys-typescale-body2-tracking);
}
.body1, .body-large {
  font-family: var(--md-sys-typescale-body1-font);
  font-weight: var(--md-sys-typescale-body1-weight);
  font-size: var(--md-sys-typescale-body1-size);
  line-height: var(--md-sys-typescale-body1-line-height);
  letter-spacing: var(--md-sys-typescale-body1-tracking);
}

.material-theme {
	--md-sys-typescale-headline1-font: Roboto;
  	--md-sys-typescale-headline1-weight: Regular;
  	--md-sys-typescale-headline1-size: 36px;
  	--md-sys-typescale-headline1-line-height: 44px;
  	--md-sys-typescale-headline1-tracking: 0px;
	--md-sys-typescale-display3-font: Roboto;
  	--md-sys-typescale-display3-weight: Regular;
  	--md-sys-typescale-display3-size: 45px;
  	--md-sys-typescale-display3-line-height: 52px;
  	--md-sys-typescale-display3-tracking: 0px;
	--md-sys-typescale-display2-font: Roboto;
  	--md-sys-typescale-display2-weight: Regular;
  	--md-sys-typescale-display2-size: 57px;
  	--md-sys-typescale-display2-line-height: 64px;
  	--md-sys-typescale-display2-tracking: -0.25px;
	--md-sys-typescale-headline4-font: Roboto;
  	--md-sys-typescale-headline4-weight: Regular;
  	--md-sys-typescale-headline4-size: 24px;
  	--md-sys-typescale-headline4-line-height: 32px;
  	--md-sys-typescale-headline4-tracking: 0px;
	--md-sys-typescale-headline3-font: Roboto;
  	--md-sys-typescale-headline3-weight: Regular;
  	--md-sys-typescale-headline3-size: 28px;
  	--md-sys-typescale-headline3-line-height: 36px;
  	--md-sys-typescale-headline3-tracking: 0px;
	--md-sys-typescale-headline2-font: Roboto;
  	--md-sys-typescale-headline2-weight: Regular;
  	--md-sys-typescale-headline2-size: 32px;
  	--md-sys-typescale-headline2-line-height: 40px;
  	--md-sys-typescale-headline2-tracking: 0px;
	--md-sys-typescale-overline-font: Roboto;
  	--md-sys-typescale-overline-weight: Medium;
  	--md-sys-typescale-overline-size: 12px;
  	--md-sys-typescale-overline-line-height: 16px;
  	--md-sys-typescale-overline-tracking: 0.5px;
	--md-sys-typescale-button-font: Roboto;
  	--md-sys-typescale-button-weight: Medium;
  	--md-sys-typescale-button-size: 14px;
  	--md-sys-typescale-button-line-height: 20px;
  	--md-sys-typescale-button-tracking: 0.10000000149011612px;
	--md-sys-typescale-subhead2-font: Roboto;
  	--md-sys-typescale-subhead2-weight: Medium;
  	--md-sys-typescale-subhead2-size: 14px;
  	--md-sys-typescale-subhead2-line-height: 20px;
  	--md-sys-typescale-subhead2-tracking: 0.10000000149011...
Reviews

No reviews yet.