Read title. While not seen on the demo image, it also hides video previews. Could be nice for photosensitivity and/or AuDHD.
/* ==UserStyle==
@name Slack: distractionless, compacter than compact
@description Read title. While not seen on the demo image, it also hides video previews. Could be nice for photosensitivity and/or AuDHD.
@version 20260501.22.30
@namespace diaphragmwp
@license WTFPL-2.0
==/UserStyle== */
@-moz-document domain("app.slack.com") {
/* compact mode only, "gray" or one of the colorblind themes + dark mode recommended
!!! PLEASE read the big multiline comment somewhere in the middle of this */
/* ---subjective rules start--- */
* {
border-radius: 0 !important;
}
.c-timestamp__label::before {
content: "<" /*IRC my beloved*/
}
.c-timestamp__label::after {
content: ">"
}
/* --- subjective rules end --- */
/* !!! uncomment bfore demo (or for dyslexia)
.p-ia4_sidebar_header__title::after {content: "^not endorsing or endorsed by"; color:#f00; font-size: 16px;}
.p-file_image_thumbnail__wrapper {line-height: 1.9em;}
* {font-family: "OpenDyslexicAlt Nerd Font"}
/**/
/* How nice of a multi quintillion dollar company to not obfuscate class names... */
.p-channel_sidebar__channel, .p-channel_sidebar__link, .p-channel_sidebar__section_heading, .banner__kYRUH { /*<--- never fucking mind, here's one obfuscation... that's some foreshadowing*/
gap: unset;
padding: 0;
padding-left: 0 !important;
}
.c-avatar, .p-r_member_profile__avatar_content, .c-reaction > .c-emoji, .c-message_actions__emoji_button > .c-emoji, .c-message_actions__button > img, .c-reaction__count, .c-reaction__tip--emoji_wrapper, .c-emoji__emoji-tooltip, .p-channel_sidebar__user_avatar, .p-peek_trigger:has(.p-account_switcher), .c-message_attachment__row:has(.c-message_attachment__media), .c-message_attachment__author_icon, #emptyStarredSectionBanner > div, .p-notification_bar--double_decker, .p-emoji_picker__emoji_deluxe_label, .p-emoji_picker_skintone__toggle_btn_label, .c-menu_item__icon, .p-block_kit_modal__title_icon, .heroBannerRight__ON0nY, .p-browse_page_member_card_entity__avatar, #social-proof, .p-message_pane__foreword__buttons > button > img, div:has(> div[data-qa="open-desktop-app-wrapper"]), div:has(> div[data-qa="open-mobile-app-wrapper"]), div:has(> div[data-qa="open-mobile-app-wrapper"]) + .c-menu_separator__li, .p-huddle_peer_tile__video_or_avatar_container, .p-help_home_featured, .p-help_recommended {
display: none;/*hall of shame: all colory distractions + some duplicate elements (especially the label that tells you how premium emojis are, but only when your perms to add more were revoked yet again)*/
}
.p-tab_rail__tab_menu > .p-autoclog__hook > button > span {
padding-top: 0px;
}
.c-icon--headphones {
width: 8px !important;/*this *specific* icon, the "Huddles" one on the sidebar, is a single :before character for some reason and has a width of 16px normally which makes it out of line of everything; 1ex also fits but not on all fonts*/
}
#emptyStarredSectionBanner::before { /*extremely specific unnecessary padding that I alr put display=none on*/
content: "..."
}
#emptyStarredSectionBanner {
height: unset !important; /* because of course it's hardcoded everywhere... actually, never fucking mind because positions are hardcoded as well as per usual*/
contain: unset;
}
.p-emoji_picker__list {
width: 100%;
}
.p-emoji_picker__heading:has(span) {
background-color: #0009; /*just nicer overall, we can afford the .03 piceseconds of frametime spent on alpha blending, cmon, also the whole thing is too wide for some reason but looks like a little hanging sign when combined with the margin delete and padding delete*/
color: #ddd;
margin-right: 0 !important; /*keep left margin intentionally, see above*/
}
.p-channel_sidebar__custom_status {
margin-left: 1ex !important;
}
.c-reaction::after, .c-message_actions__emoji_button::after {
content: attr(aria-label); /*too verbose, I know*/
}
.c-message_actions__emoji_button::after {
font-size: 12px;
}
.c-emoji--inline {
display: inline;
}
.c-emoji--inline > img {
position: unset;
}
.p-message_pane__top_banners {
opacity: .5;
}
.p-file_image_thumbnail__wrapper::before {
content: "Click to view: ";
}
.p-file_image_thumbnail__wrapper::after {
content: attr(href); /*No, I cannot make this display alt text. Not that anyone adds alt text.*/
}
.p-file_image_thumbnail__wrapper > div {
display: none;
}
.p-file_image_thumbnail__wrapper {
cursor: pointer;
display: unset !important;
}
.c-aspect_box__outer {
display: table-row;
}
.c-aspect_box__inner {
padding-top: 16px !important; /*huh?????? (this can overflow and idk why but can't be bothered at this point)*/
}
.c-files_container > div:not(.c-message_kit__file) {
width: 100% !important;
}
.c-file_gallery {
display: table;
max-width: unset; /*NO*/
margin-bottom: 16px; /*the ONE time something needs more margin, default 8px clips into some forms of next messages with Click to view hack*/
}
.p-message_gallery_image_file {
height: unset !important;
width: unset !important; /* Stop it. Get some help */
margin-bottom: 1em;
}
.c-file_gallery__wide > .p-message_gallery_image_file:last-child {
margin-bottom: 0; /*kinda dag my own hole there*/
}
.c-file_gallery__single_image > div > div > div > div > a {
white-space: pre; /*"fix" earlier overflow*/
}
.c-message_kit__attachments, .c-message_attachment {
max-width: unset; /*NO. they hate screen space so much that they set it twice just to be sure*/
}
.p-video_message_file__poster__aspect {
background-color: #000; /*if I remove this entirely for space, the view will jump whenever the video starts/stops... actually it does regardless if it's loading roflmao*/
}
.p-video_message_file__poster {
background-image: unset !important;
background-color: #000;
}
.p-video_message_file__poster::before {
color: #ddd;
content: "Video...";
text-align: center;
position: absolute;
z-index: 69;
}
.c-file_gallery > div > div > a {
border: none;
outline: solid 1px;
}
.c-message_kit__gutter {
padding: 8px 0 !important; /* default is 8px 20px for some fucking reason */
}
.p-message_pane_message__compact_timestamp {
width: unset; /*this is NOT the thing to set for this*/
padding-left: 1ex; /*this *is*; if you like padding so much may as well use it for actual padding?????*/
position: relative;
top: -9px;
}
.p-message_pane_input, .p-view_header, .p-emoji_picker__list, .p-emoji_picker__input_container, .p-emoji_picker__group_tabs, .p-emoji_picker__group_tab, .p-emoji_picker__row, .p-emoji_picker__heading, .p-ia4_sidebar_header, .c-message_kit__indent, .c-button-unstyled, .c-base_entity, .c-base_list_entity, .c-menu_item__header, .c-message__reply_bar, .p-threads_flexpane__separator, .c-menu__items, .c-sk-modal_title_bar, .c-sk-modal_content_section, .c-sk-modal_footer, .c-select_button, .c-label__text, .c-sk-modal_content__inner, .c-button--outline, .p-message_pane__search_tip_banner, .p-huddle_sidebar_link_peer_count_badge, .heroBannerLeft__LQcAv, .heroBannerFocusWrapper__wUSat, .channel_tab_bar__HY3uU, .toolbarMainBar__Svv7I, .stickerEmoji__wgV9S { /*<-- I LOVE OBFUSCATION YEAHHHHHHHHHHHH*/
padding: 0 !important;/*can't do anything with .c-message_list__day_divider, hardcoded coordinates again yayyyy*/
}
.p-threads_flexpane__separator, .p-message_pane__foreword__description, .p-message_pane__foreword__title, .p-message_pane__foreword__buttons {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.p-message_pane__foreword__buttons > button, .channel_tab_label__animated_avatar__Cw0gg, .c-file_entity__icon {
min-width: unset !important;
width: unset !important;
}
.c-message_kit__gutter__right {
padding-bottom: 4px; /*allow outline*/
padding-top: 0px;
}
.p-threads_footer__input_container, .p-message_pane__foreword__buttons > button > div {
margin: 0;
}
.p-message_pane__foreword {
margin-top: 8px;/*default 88, actually still more than strictily needed*/
margin-left: 8px;/*default 20*/
margin-right: 0;/*right to left users will hate me*/
margin-bottom: 0;
}
.c-message_kit__indent {
max-width: calc(100% - 10px); /*clashing with the panel border a bit otherwise*/
}
.c-message_actions__container, .c-message__reply_bar {
z-index: 8;
}
.p-view_header {
padding-right: 0 !important;
}
.c-sk-modal_footer, .c-sk-modal_title_bar, .c-sk-modal_header, .p-view_header, .c-banner, .c-banner__text, .c-banner > .c-icon_button, .toolbarMainBar__Svv7I {
height: unset;
min-height: unset;
}
.c-sk-modal__close_button {
top: 0;
right: 0;
}
.c-tabs__tab_content > div > .p-peek_trigger > div, .c-tabs__tab_content > div > div {
padding-top: 0;
}
.c-icon_button {
width: 24px; /*default 32px*/
}
.c-emoji:has(img[alt=":headphones:"])::before {
content: "🎧" /*the emoji for "in call" status*/
}
.c-button-unstyled:has(img[alt="raised_hand"]) {/*call bar*/
width: unset !important;
}
.c-button-unstyled:has(img[alt="raised_hand"])::before {
content: "Raise hand" !important; /*important because stock :hover*/
position: unset !important; /*also against stock :hover*/
white-space: pre;
}
.c-button-unstyled > img[alt="raised_hand"] {
display: none;
}
.c-emoji > img[alt=":headphones:"] {
display: none;
}
.c-banner, .c-banner__text, .c-banner > .c-icon_button, .toolbarMainBar__Svv7I {
margin: 0 !important;
}
.bottomBarRightControls__ynS0D > button {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.p-huddle_channel_header_button__slider_container > clipPath#sliderClip {
display: none; /*SVG rounding*/
}
.p-ia__main_menu__custom_status_icon {
bottom: 0px; /*magically moves emoji alt text up out of the field but not the hover pencil icon somehow*/
left: 0px;
}
.p-huddle_sidebar_link_peer_count_badge {
min-width: unset;
}
.margin_left_25:has(svg) {
margin-left: unset; /*nuh uh (conversation day jump menu, maybe some other right-hand icon)*/
}
.stickerEmoji__wgV9S {
margin-left: 14px; /*min before flex layout bs fucks everything up in the huddle stickers menu, can't be bothered to turn into a table*/
}
.c-message_list__day_divider__label__pill {
background-color: #0005; /*same reasoning as emoji picker heading*/
color: #ddd;
}
.c-menu:has(.c-menu__items_scroller) {
outline: 1px solid !important;
}
/*
The rest of the rules are rules that ONLY go with the uBlock/AdGuard/whatever filters:
app.slack.com##img:not(.p-image_viewer__image):remove-attr("src")
app.slack.com##img:not(.p-image_viewer__image):remove-attr("srcset")
it isn't blocked at a network level because the extensions also remove image alt text for that, which is what one wants for ads (duh) BUT NOT THIS.
(this also means that images may or may not pop in and out of exitence briefly and download themselves regardless)
optional network ones without known without breakage:
||slack-edge.com/E*-U*
||slack-edge.com/T*-U*
||slack-edge.com/production-standard-emoji-assets/*
||emoji.slack-edge.com*
(also wastes CPU a little bit through JS, but React is a CPU waster anyway)
*/
@keyframes timer {
0% { opacity: 0; }
99% { opacity: 0; }
100% { opacity: 1; }
}
.p-view_header__text::after {
content: "!!!!!!!!!!!! READ THEME PAGE/CODE";/*did you?*/
color: #f00;
opacity: 0;
--WRONG: none;
animation: var(--WRONG);
border-image-source: url(https://blob.gifcities.org/gifcities/2PV25BYMKJUPVENGJLRHKFYKM73KOTHJ.gif);
border-image-outset: 2px;
border-image-repeat: stretch;
border-image-width: 2px;
border-image-slice: 1;
}
body:has(img[src*="slack-edge.com"]), body:has(img[srcset*="slack-edge.com"]) .p-view_header__text::after {
--WRONG: timer 2s forwards, ep1k-border 1s infinite linear !important;
}
img { /*alt text*/
width: unset !important;
height: unset !important;
overflow-y: scroll;
overflow-wrap: anywhere;
object-fit: unset;
display: unset;
text-shadow: none;
line-height: unset;
font-weight: unset;
white-space: pre-line;
}
.c-custom_status__emoji_in_member_profile {
right: 0px;
display: inline-block;
position: absolute;
width: unset;
margin: 0;
margin-left: 0 !important;
}
.p-huddles_suggestion_tile__content, .p-huddles_suggestion_tile__primary {
display: block !important;
position: relative;
}
.p-huddles_suggestion_tile__content > div {
width: 100%;
display: block !important;
}
.c-message_attachment__image::before {
content: "Click to view: ";
}
.c-message_attachment__image {
display: inline;
background-image: revert !important;
}
.c-emoji {
white-space: pre;
}
.p-emoji_picker {
width: 100% !important; /*doubles popup width without the next rule somehow, but only on enterprise plan because of fucking course*/
overflow: hidden;
}
div[role="presentation"]:has(.p-emoji_picker) {
width: 640px; /*guesstimate usable size*/
max-width: 100%; /* THIS is what that exists for: for shit to not overflow!*/
}
.c-tabs__tab > span {
margin-left: 0;
margin-right: 0;
display: inline-block;
}
.p-emoji_picker__list > div, .p-emoji_picker__list_scroller {
width: 100% !important;
}
.p-emoji_picker__list_item {
width: 100%;
z-index: 1;
position: relative;
}
.p-emoji_picker__row > .p-emoji_picker__list_item, .c-emoji > img, .c-message_actions__emoji_button {
outline: solid 1px;
font-size: 14px;
}
.p-emoji_picker__handy_rxns_list {
width: 50%;
}
.p-emoji_picker__preview {
width: 50%;
height: 64px;
position: absolute;
bottom: 0;
}
.p-emoji_picker__preview_text {
width: 100%;
overflow-wrap: anywhere;
white-space: normal;
}
.p-emoji_picker__preview_img, .p-emoji_picker__preview_aliases {/*I know this removes alias information, but one may safely round the percentage of times this just shows the name to 100%*/
display: none;
}
.p-emoji_picker_skintone {/*has an img (with empty ::before that isn't even allowed on images because of course) that alt text reads ":hand::skin_tone_xyz:", but also the text label "Skin Tone" on all plans except Enterprise for some reason, was easiest for me to remove the label for all plans and keep the alt*/
right: unset;
bottom: 64px;
background-color: #0008;/*first made against reacting (not message toolbar) on enterprise but not for the 3 other scenarios, position ends up being above emotes but surprisingly aligned, making it look intentional here*/
color: #ddd;
}
.p-emoji_picker_skintone__radio_buttons {
display: unset;
}
.p-emoji_picker_skintone__radiogroup_label::after {
content: " (bigger = darker)";
}
.p-emoji_picker__row {
padding-left: 1px !important; /*outline cuts off on the left but not on the right somehow otherwise*/
}
div > .micIcon__XE9Cj::before {
content: "🗣️"/*no images, remember?*/
}
.p-channel_tab_unread_badge {/*clips into emoji text*/
background-color: #0000;
}
}