Revolt Tweaks

This is a repo containing useful tweaks for revolt.chat.

To apply them, paste them in Settings -> Appearance -> Custom CSS.

Wider scrollbar (Firefox)

/* -- Wider scrollbar (Firefox) -- */
* {
   scrollbar-width: initial;
}

Wider scrollbar (Desktop/Chrome/Edge/etc)

/* -- Wider scrollbar (Desktop/Chrome/Edge/etc) -- */
*::-webkit-scrollbar {
  width: 15px;
}

*::-webkit-scrollbar-track {
  background: var(--primary-background); /* color of the tracking area */
}

*::-webkit-scrollbar-thumb {
  background-color: var(--accent); /* color of the scroll thumb */
  border-radius: 20px; /* roundness of the scroll thumb */
}

Hide homescreen actions

/* -- Hide homescreen actions -- */
[class^="_home_"] [class^="_homeScreen_"] [class^="_actions_"] {
  display: none;
}

Remove modal animations

/* -- Remove modal animations -- */
[class^="Container-sc-"], [class^="Base-sc-"], [class^="_settings_"] {
	animation: none !important;
	transition: none !important;
}

Square user avatars

/* -- Square user avatars -- */
/* !! :root should be moved at the top of the theme !! */
:root {
	--border-radius-user-icon: 3px;
}
[class^="TypingIndicator__Base-sc-"] > div > [class^="avatars"] > img {
	border-radius: 3px;
}
[data-item-index="0"] [class^="ItemContainer-sc-176t3v5-0"] foreignObject :is(div, img) {
	border-radius: 3px !important;
}

Square server icons (and more)

/* -- Square server icons (and more) -- */
[class^="Image-sc-"],
[class^="IconBase__ImageIconBase-sc-"] {
	border-radius: 3px;
}

Wide emoji

Credit: amycatgirl

/* -- Wide emoji -- */
.emoji {
  width: unset !important;
  max-width: 100%;
}

Rounded message highlight

/* -- Rounded message highlight -- */
[class^="MessageBase"] {
  border-radius: 8px;
  margin-left: .3rem;
  margin-right: .3rem;
}

Blurred server sidebar

/* -- Blurred server sidebar -- */
[class^="SidebarBase-sc-"] > [class^="Base-sc-"] {
	filter: blur(7px);
	transition: 1s cubic-bezier(0.33, 1, 0.68, 1);
}

[class^="SidebarBase-sc-"] > [class^="Base-sc-"]:hover {
	filter: blur(0px);
	transition: 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}

Alternative active server indicator

Note

Incompatible with Square server icons

/* -- Alternative active server indicator -- */
[class^="SwooshWrapper-sc-"] > svg > path:not(:first-child), 
[class^="SwooshWrapper-sc-"] > svg > rect {
    display: none;
}

[class^="SwooshWrapper-sc-"] > svg > path:first-child {
	fill: var(--accent);
	/* Fix uneven bubble around the server icon */
	transform: translateX(.8px) scale(.9);
	transform-origin: center;
}

Consistent server header side

/* -- Consistent server header side -- */
[class^="ServerHeader__ServerBanner-sc-"] {
	height: 48px;
}

Auto-hiding channels list

Automatically hides the channels sidebar until hovered over.

/* -- Auto-hiding channels list -- */
[class^="ServerSidebar__ServerBase-sc-"]:hover {
	width: 232px;
	transition: 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}

[class^="ServerSidebar__ServerBase"] {
	width: 50px;
	transition: 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

Auto-hiding members list

Automatically hides the members sidebar until hovered over.

/* -- Auto-hiding members list -- */
[class^="SidebarBase-sc-"]:nth-child(2):hover {
	width: 232px;
	transition: 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}

[class^="SidebarBase-sc-"]:nth-child(2) {
	width: 54px;
	transition: 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

Hide channel icons

/* -- Hide channel icons -- */
div[class^="_item_"] > div[class^="_avatar_"] {
	display: none;
}

Discord style messagebar

/* -- Discord style messagebar -- */
[class^="MessageBox__Base-sc-"] {
	margin: 0 1rem 1.4rem 1rem;
	border-radius: 11px;
}
[class^="FilePreview__Container-sc-"],
[class^="TypingIndicator__Base-sc-"], 
[class^="AutoComplete__Base-sc-"], 
[class^="JumpToBottom__Bar-sc-"] {
margin: 0 1rem;
	border-radius: 11px;
}

[class^="AutoComplete__Base-sc-"] > div{
	border-radius: 11px;
}

Message bubbles

Displays messages in a bubble.

/* -- Message bubbles -- */
[class^="MessageBase__MessageContent-sc-"] {
	background-color: var(--tertiary-background);
	border-radius: 18px;
	padding: 10px 13px 10px 13px;
	flex-grow: 0;
}

Hide blocked messages

/* -- Hide blocked messages -- */
[class^="MessageRenderer__BlockedMessage-sc-"] {
	display: none;
}

Permanent spoiler

Hide all images and videos by displaying a css spoiler. Hover over it to see it. On mobile, long press to preview the image, press to view it.

Note

If you start a video and then stop hovering, the spoiler is going to show regardless and the video keeps playing.

/* -- Permanent spoiler -- */
[class^="Grid-sc-"] {
	position: relative !important;
}

[class^="Grid-sc-"]::before {
	content: "Hidden";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--secondary-background);
  font-size: larger;
  transition: .1s;
}

[class^="Grid-sc-"]:hover::before {
  opacity: 0;
  pointer-events: none;
}

Permanent spoiler (Blur)

This is applied only on images.

/* -- Permanent spoiler (Blur) -- */
[class^="Grid-sc-"] > img[class^="_image_"] {
  filter: blur(40px);
  transition: .2s;
}

[class^="Grid-sc-"] > img[class^="_image_"]:hover {
  filter: blur(0px);
}

Alternative user popup (Flawed)

Note: This effects every popup, including images, warnings, errors, etc.

/* -- Alternative user popup (Flawed) -- */
[class^="Base-sc-1d"] {
	background: rgba(0, 0, 0, 0.4);
}
    
[class^="Container-sc-1d"] {
	position: fixed;
	bottom: -1.5rem;
}

Use foreground colour on server unread indicator

a[href^="/server/"] svg > circle {
	fill: var(--foreground) !important;
}

No emote gaps

.emoji {
    vertical-align: -0.3em;
    object-fit: fill;
    margin: 0px;
}

License