A WIP slack UI theme refresh with a minty-pastel primary color and Material UI generated color palette.
Slack - Pastel Mint Material by lostrhapsody
Details
Authorlostrhapsody
LicenseNo License
Categoryuserstyles, slack, material ui, material, pastel, mint
Created
Updated
Size21 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
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...