Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lo2dev/revolt-tweaks
Useful tweaks for Revolt Chat
https://github.com/lo2dev/revolt-tweaks
css revolt snippets theme
Last synced: about 2 months ago
JSON representation
Useful tweaks for Revolt Chat
- Host: GitHub
- URL: https://github.com/lo2dev/revolt-tweaks
- Owner: lo2dev
- License: cc0-1.0
- Archived: true
- Created: 2023-05-19T19:24:10.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-01T19:16:32.000Z (8 months ago)
- Last Synced: 2024-08-28T18:14:07.683Z (4 months ago)
- Topics: css, revolt, snippets, theme
- Homepage: https://app.revolt.chat
- Size: 74.2 KB
- Stars: 9
- Watchers: 1
- Forks: 5
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-revolt - revolt-tweaks - Useful snippets that can be used alongside themes. (🎨 Themes / Cobol)
README
# 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)
```css
/* -- Wider scrollbar (Firefox) -- */
* {
scrollbar-width: initial;
}
```
## Wider scrollbar (Desktop/Chrome/Edge/etc)
```css
/* -- 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
```css
/* -- Hide homescreen actions -- */
[class^="_home_"] [class^="_homeScreen_"] [class^="_actions_"] {
display: none;
}
```
## Remove modal animations
```css
/* -- Remove modal animations -- */
[class^="Container-sc-"], [class^="Base-sc-"], [class^="_settings_"] {
animation: none !important;
transition: none !important;
}
```
## Square user avatars
```css
/* -- 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)
```css
/* -- Square server icons (and more) -- */
[class^="Image-sc-"],
[class^="IconBase__ImageIconBase-sc-"] {
border-radius: 3px;
}
```
## Wide emoji
**Credit:** amycatgirl
```css
/* -- Wide emoji -- */
.emoji {
width: unset !important;
max-width: 100%;
}
```
## Rounded message highlight
```css
/* -- Rounded message highlight -- */
[class^="MessageBase"] {
border-radius: 8px;
margin-left: .3rem;
margin-right: .3rem;
}
```
## Blurred server sidebar
```css
/* -- 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
```css
/* -- 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
```css
/* -- Consistent server header side -- */
[class^="ServerHeader__ServerBanner-sc-"] {
height: 48px;
}
```
## Auto-hiding channels list
Automatically hides the channels sidebar until hovered over.
```css
/* -- 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.
```css
/* -- 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
```css
/* -- Hide channel icons -- */
div[class^="_item_"] > div[class^="_avatar_"] {
display: none;
}
```
## Discord style messagebar
```css
/* -- 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.
```css
/* -- 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
```css
/* -- 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.
```css
/* -- 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.
```css
/* -- 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.
```css
/* -- 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
```css
a[href^="/server/"] svg > circle {
fill: var(--foreground) !important;
}
```
## No emote gaps
```css
.emoji {
vertical-align: -0.3em;
object-fit: fill;
margin: 0px;
}
```
# License
[](https://creativecommons.org/publicdomain/zero/1.0/)