Revolt Rounded Theme

README.md

Revolt Rounded Theme

Custom CSS which adds a rounded chat bar, along with several other improvements.

Since this is just a style sheet instead of a complete theme, you can add it alongside your existing theme.

Installation

Simply add the following to your custom CSS:

@import url("https://cdn.githubraw.com/sussycatgirl/d45b96f7af1632c9268e16bfee0e8fea/raw/7892d51888d3ee341868ddd4b23f040a06be8c5d/rounded.css");

Note that @import statements must always be at the top.

If you did everything correctly, you will now see a "Rounded theme loaded!" hint.

rounded.css

/* Display a hint that the theme is loaded */
[class^="Details-sc-"] [class^="TextAreaAutoSize__Container"]:before {
    content: "Rounded theme loaded!";
    margin-bottom: 12px;
    color: var(--success);
}

/* Chat box */
[class^="MessageBox__Base"] {
    border-radius: 15px;
    width: calc(100% - 8px);
    margin: 0 4px 4px 4px;
    z-index: 101;
}

/* Attachment bar thingy */
[class^="FilePreview__Container"] {
    border-radius: 15px 15px 0 0;
    margin: 0 4px -4px 4px;
    padding-bottom: 0;
    z-index: 100;
}

/* Reply bar */
[class^="ReplyBar__Base"] {
    border-radius: 10px 10px 0 0;
    margin: 0 4px -10px 4px;
    background-color: var(--message-box);
    height: 40px;
}
[class^="FilePreview__Container"] ~ div > [class^="ReplyBar__Base"] {
    border-radius: 0;
}

/* Typing indicator */
[class^="TypingIndicator__Base"] {
    margin: -4px 4px 4px 4px;
}
[class^="TypingIndicator__Base"] > div {
    border-radius: 8px;
}

/* Add a bit of extra space at the bottom for the typing indicator to fit properly */
[class^="MessageArea__Area"] > div:first-child {
    padding-bottom: 32px;
}

/* "Jump to bottom" */
[class^="JumpToBottom__Bar"] {
    margin-bottom: -2px;
}
[class^="JumpToBottom__Bar"] > div {
    border-radius: 10px;
    margin: 4px;
    height: 40px;
    width: calc(100% - 8px);
}
[class^="MessageArea__Area"] ~ [class^="JumpToBottom__Bar"] > div {
    padding-bottom: 14px;
    margin: 4px 4px -12px 4px;
    background-color: var(--message-box);
}
[class^="MessageArea__Area"] ~ [class^="JumpToBottom__Bar"] {
    z-index: 0;
}

/* Remove rounding if specific objects exist */
[class^="FilePreview__Container"] ~ [class^="MessageBox__Base"] {
    border-radius: 0px 0px 15px 15px;
}
[class^="JumpToBottom__Bar"] ~ [class^="FilePreview__Container"] {
    border-radius: 0;
}

/* Animated / rounded server banner */

@keyframes server-banner-slide-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
[class^="ServerHeader__ServerBanner"] {
    border-radius: 0 0 10px 10px !important;
    background-color: var(--secondary-background);
    transition: transform .3s ease;
    animation: server-banner-slide-in .6s;
    padding-bottom: -8px;
}

/* Animate verified checkmarks etc */
@keyframes checkmark-slide-in {
    0% {
        transform: rotate(20deg);
    }
    80% {
        transform: rotate(380deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
[class^="ServerHeader__ServerBanner"] > .container > div:not([class]) {
    animation: checkmark-slide-in 1s;
}

/* Channel list */
[class^="ServerSidebar__ServerList"], [class^="ServerSidebar__ServerBase"] {
    background: var(--secondary-background);
    border-radius: 0 0 15px 15px !important;
}
[class^="SidebarBase"] {
    padding-bottom: 4px !important;
    background-color: var(--primary-background);
}

/* Member list */
[class^="SidebarBase__GenericSidebarBase"] {
    border-radius: 0 0 0 15px !important;
    padding-bottom: 4px !important;
    background-color: var(--secondary-background);
}
[class^="MemberList__ListCategory"] { background: unset; }

/* Fixes the category dropdown thingy color */
[class^="ServerSidebar__ServerList"] [class^="Category-sc-"] {
    color: var(--tertiary-foreground);
}
[class^="ServerListSidebar__ServersBase"] {
    background-color: rgba( var(--background-rgb),max(var(--min-opacity),0.75) );
    height: 100vh;
    border-radius: 0 0 10px 0;
}

/* Fixes the appearance of the thing that shows the currently selected server in the sidebar */
:root {
    --sidebar-active: var(--secondary-background) !important;
}