Last active
February 17, 2023 14:13
-
-
Save BoQsc/e2cc8c4654531ffadb4db8c704d9d244 to your computer and use it in GitHub Desktop.
revolt_discord-theme-fixes https://github.com/revoltchat/themes/blob/master/data/discord-colors/Custom.css
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| --sidebar-active: #2f3136 | |
| } | |
| a, a:hover { | |
| color: #13abe8 | |
| } | |
| /* Apply margin to server scroller */ | |
| [class*="SidebarBase"]:first-child > [class^="Base-sc"] { | |
| margin: 10px; | |
| } | |
| [class*="SidebarBase"] > [class^="Base-sc"] > [data-test-id*="virtuoso-scroller"] { | |
| width: 70px; | |
| } | |
| [class^="SwooshWrapper"]{ | |
| top: -60px; | |
| left: -1px; | |
| } | |
| [class^="SwooshWrapper"] > svg { | |
| width: 60px; | |
| height: 163px; | |
| } | |
| [class*="MessageBox__Base"]{ | |
| margin-left: 20px; | |
| margin-right: 20px; | |
| margin-bottom: 26px; | |
| border-radius: 10px; | |
| } | |
| /* Padding at the end of the chat. */ | |
| [class*="MessageArea__Area"] > div { | |
| padding-bottom: 0px; | |
| } | |
| [class*="RevoltApp__Routes"] > [class*="Header"] { | |
| background: #36393f; | |
| box-shadow: 1px 1px 1px #27292e; | |
| border-bottom: solid #363636 1px; | |
| /*box-shadow: 1px 1px 1px #24262a; | |
| border-bottom: solid #24262a 1px;*/ | |
| } | |
| .csvICB { | |
| width: 90px; | |
| } | |
| [class*="MessageBase__MessageInfo"] > [class*="avatar"] { | |
| height: 44px !important; | |
| width: 44px; | |
| } | |
| [class*="MessageArea__Area"] { | |
| --scrollbar-track: #2e3338; | |
| --scrollbar-thickness: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| display: inline-block; | |
| background: #202225; | |
| border-radius: 15px; | |
| background-clip: border-box !important; | |
| height: 5px !important; | |
| background-size: 5px 5px !important; | |
| background-repeat: no-repeat; | |
| max-height: 5px !important; | |
| } | |
| ::-webkit-scrollbar-track { | |
| border-radius: 30px; | |
| } | |
| /* No effect, can be removed */ | |
| ::-webkit-scrollbar-track-piece { | |
| border-radius: 30px !important; | |
| } | |
| /* | |
| [class*="MessageBase-sc"]:has([class*="edited"]) { | |
| margin-left: 90px; | |
| } | |
| [class*="MessageBase-sc"]:has([class*="edited"]) > div:nth-child(1) { | |
| order: 2; | |
| } | |
| [class*="MessageBase-sc"]:has([class*="edited"]) > div:nth-child(1).csvICB { | |
| width: 50px; | |
| } | |
| [class*="MessageBase-sc"]:has([class*="edited"]) > div:nth-child(2) { | |
| order: 1; | |
| flex-grow: unset; | |
| } | |
| [class*="MessageBase-sc"]:has([class*="edited"]) > div:nth-child(2) > div:nth-child(2){ | |
| position: sticky; | |
| top: -38px; | |
| } | |
| */ | |
| :root { | |
| --foreground: #d3d3d3; | |
| } | |
| /* | |
| ._item_1avxi_1[data-alert=true], ._item_1avxi_1[data-active=true], ._item_1avxi_1:hover { | |
| color: #ffffff; | |
| } | |
| ._item_1avxi_1:hover { | |
| color: auto !important; | |
| } | |
| */ | |
| ._item_1avxi_1[data-alert=true] { | |
| color: #ffffff !important; | |
| } | |
| ._item_1avxi_1[data-active=true] { | |
| color: #ffffff !important; | |
| } | |
| :root { | |
| --hover: #3c3f45; | |
| } | |
| @media (hover: hover) { | |
| [class*="ServerSidebar__ServerList"]:not(:hover){ | |
| overflow: hidden; | |
| } | |
| [data-test-id*="virtuoso-scroller"]:not(:hover){ | |
| overflow-y: hidden !important; | |
| overflow: hidden; | |
| } | |
| } | |
| [class*="FilePreview__Container"]{ | |
| margin: 10px; | |
| } | |
| [class*="MessageBox__Blocked"]{ | |
| margin-left: 20px; | |
| } | |
| [class*="MessageBox__Action"]{ | |
| margin-right: 10px; | |
| } | |
| /* Message box incomplete | |
| [class*="MessageBox__Base"]{ | |
| position: sticky; | |
| bottom: 41px; | |
| width: -webkit-fill-available; | |
| z-index: 0; | |
| margin-bottom: 0px; | |
| } | |
| [class*="MessageBox__FloatingLayer "]{ | |
| z-index: 1 | |
| } | |
| [class*="MessageBox__FloatingLayer"] > [class*="Column-sc"] { | |
| margin-bottom: 40px; | |
| } | |
| [class*="MessageArea__Area"] > div { | |
| margin-bottom: 30px; | |
| } | |
| [class*="ReplyBar__Base"]{ | |
| position:relative; | |
| top: -40px; | |
| margin-bottom: 0px; | |
| margin-right: 20px; | |
| margin-left: 20px; | |
| } | |
| } | |
| */ | |
| /* | |
| [class*="MessageBox__Base"] { | |
| margin-top: -80px; | |
| } | |
| */ | |
| [class*="MessageArea__Area"] > div > [class*="Base-sc"]:has(> time) { | |
| border-top: solid 1px #42464d; | |
| justify-content: center; | |
| } | |
| [class*="MessageArea__Area"] > div > [class*="Base-sc"]:has(> time) > time { | |
| color: #b9bbbe; | |
| } | |
| [class*="MessageBase"]:hover { | |
| background: #32353b; | |
| } | |
| [class*="ServerSidebar__ServerBase"]{ | |
| margin: 0 !important; | |
| } | |
| blockquote { | |
| background: none !important; | |
| border-radius: 2px !important; | |
| border-inline-start-color: #4f545c !important; | |
| } | |
| @media (hover:none), (pointer:coarse){ | |
| .csvICB { | |
| width: 60px; | |
| margin-right: 5px; | |
| } | |
| [class*="MessageBox__Action"]{ | |
| margin-right: 0px; | |
| } | |
| textarea[class*="TextArea"]{ | |
| width: 115%; | |
| } | |
| /* New observation, above and this can be deleted probably */ | |
| textarea[class*="TextArea"]{ | |
| width: 100%; | |
| } | |
| } | |
| /* | |
| [class^="MessageArea"]::after { | |
| content: "Activate Revolt"; | |
| position: sticky; | |
| opacity: 50%; | |
| float: right; | |
| right: 10px; | |
| bottom: 10px; | |
| } | |
| */ | |
| /* Resolves flex item background, hides | |
| [class*="MessageArea__Area"] { | |
| margin-bottom: -60px; | |
| } | |
| [class*="MessageArea__Area"] > div { | |
| padding-bottom: 50px; | |
| */ | |
| /* Tweaked previous thing */ | |
| [class*="MessageArea__Area"] { | |
| margin-bottom: -40px; | |
| } | |
| [class*="MessageArea__Area"] > div { | |
| padding-bottom: 60px; | |
| } | |
| @media (hover:none), (pointer:coarse){ | |
| [class*="MessageBox__FloatingLayer"] > [class*="Column-sc"]{ | |
| /* | |
| bottom: -66px; | |
| z-index: 0; | |
| */ | |
| /* | |
| height: 337px; | |
| */ | |
| } | |
| } | |
| /*[class*="InputBox"] */ | |
| /* | |
| [class*="MessageBox__Base"] { | |
| position: absolute; | |
| bottom: 0; | |
| } | |
| */ | |
| /* Messages scrollbar overflow fix */ | |
| ::-webkit-scrollbar-track{ | |
| margin-bottom: 65px; | |
| /* weird trick | |
| border: 4px solid transparent; | |
| background-clip: padding-box; | |
| border-radius: 8px; | |
| */ | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| min-height: 0px !important; | |
| } | |
| /* More Experiment with thumb | |
| ::-webkit-scrollbar-thumb { | |
| outline: solid 3px orange; | |
| outline-offset: -21px; | |
| } | |
| */ | |
| /* make messages container so small it starts to load older messages | |
| [class*="MessageArea__Area"] > div:first-child{ | |
| height: 10px; | |
| } | |
| */ | |
| a, a:link, a:visited, a:hover { | |
| color: #15afe3;; | |
| } | |
| /* Background around username | |
| [class*="UserShort__Name"]{ | |
| --username-color: currentColor; | |
| } | |
| [class*="UserShort__Name"]{ | |
| background: var(--username-color); | |
| } | |
| */ | |
| @media (hover:none) and (pointer:coarse) and (max-width: 347px) { | |
| [class*="UserShort__Name"] { | |
| color-scheme: only light; | |
| } | |
| } | |
| :root { | |
| color-scheme: light; | |
| } | |
| /* Works, but not what's needed | |
| @media (prefers-color-scheme: dark) { | |
| [class*="UserShort__Name"]{ | |
| background: blue; | |
| } | |
| } | |
| */ | |
| [class^="SidebarBase"] [class^="ParentBase-sc"] { | |
| height: 48px; | |
| width: 48px; | |
| } | |
| [class^="SwooshWrapper"]{ | |
| top: -58px; | |
| left: -6px; | |
| } | |
| [class^="SwooshWrapper"] > svg { | |
| width: 66px; | |
| height: 163px; | |
| } | |
| [class^="MessageBase__MessageInfo"]{ | |
| max-height: 38px; | |
| } | |
| [class^="MessageBase-sc"]{ | |
| padding: 0.225rem; | |
| } | |
| [class^="MessageBase__MessageContent-sc"] > [class^="detail"] { | |
| margin-bottom: 5px; | |
| } | |
| @media (hover:none), (pointer:coarse){ | |
| [class^="MessageArea__Area-sc"]::-webkit-scrollbar { | |
| width: 0px; | |
| } | |
| } | |
| [class^="Search__SearchBase-sc"] > input[class^="InputBox-sc"]{ | |
| background: #24262a ; | |
| } | |
| /* Delay show messages on server tab load | |
| @keyframes delayedShow { | |
| to { | |
| visibility: visible; | |
| } | |
| } | |
| [class^="MessageArea__Area-sc"] > div > div { | |
| visibility: hidden; | |
| animation: 0s linear 1s forwards delayedShow ; | |
| } | |
| */ | |
| @media (pointer: coarse){ | |
| [class^="ServerSidebar__ServerList-sc"] [class^="_item"]{ | |
| height: 46px; | |
| } | |
| } | |
| @media (pointer: coarse){ | |
| [class^="MessageEditor__EditorBase-sc"]{ | |
| position: relative; | |
| left: -6%; | |
| } | |
| } | |
| @media (pointer: coarse){ | |
| [class^="MessageBox__FloatingLayer-sc"] > [class^="Column-sc"] { | |
| z-index: 6; | |
| } | |
| [class^="Header-sc"]{ | |
| z-index: 1; | |
| } | |
| } | |
| [class^="MessageBox__FileAction-sc"] > [class^="IconButton-sc"] { | |
| width: 56px; | |
| justify-content: flex-end; | |
| padding-right: 10px; | |
| } | |
| [class^="MessageBox__FileAction-sc"] { | |
| padding-left: 4px; | |
| } | |
| [class^="Channel__ChannelMain-sc"] [class^="SidebarBase"] { | |
| margin-left: 5px; | |
| } | |
| /* Mobile phone, not crucial | |
| [class^="ServerSidebar__ServerBase-sc"]{ | |
| flex-shrink: unset; | |
| } | |
| */ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [class*="SidebarBase"] [class*="Base"] [class*="list"] div { | |
| display: flex !important; | |
| flex-direction: column-reverse; | |
| } | |
| [class*="SidebarBase"] > [class*="Base-sc"] { | |
| margin: 10px; | |
| } | |
| [class*="SidebarBase"] [class*="Base"] [class*="list"] div { | |
| display: flex !important; | |
| } | |
| [src*="avatars"]{ | |
| } | |
| #app > div > div > div.SidebarBase-sc-1dma6vq-0.jyizw > div.Base-sc-yb16g4-0.iDeTmr > div.list > div > div > div:nth-child(2) > div > div:nth-child(2) > span > a > svg > circle { | |
| cx: 0; | |
| cy: 15; | |
| r: 4; | |
| } | |
| /* The Swoosh wrapper: SwooshWrapper-sc-176t3v5-1 dDUwGF*/ | |
| #app > div > div > div.SidebarBase-sc-1dma6vq-0.jyizw > div.Base-sc-yb16g4-0.iDeTmr > div.list > div > div > div:nth-child(2) > div > div:nth-child(1) > div | |
| [class*="MessageBox__Base"]{ | |
| margin: 20px; | |
| } | |
| [class*="MessageArea__Area"] > div { | |
| padding-bottom: 0px; | |
| } | |
| /* Current fixes */ | |
| :root { | |
| --sidebar-active: #2f3136 | |
| } | |
| a, a:hover { | |
| color: #13abe8 | |
| } | |
| [class*="SidebarBase"] > [class*="Base-sc"] { | |
| margin: 10px; | |
| } | |
| [class*="MessageBox__Base"]{ | |
| margin-left: 20px; | |
| margin-right: 20px; | |
| margin-bottom: 26px; | |
| border-radius: 10px; | |
| } | |
| [class*="MessageArea__Area"] > div { | |
| /*padding-bottom: 0px;*/ | |
| } | |
| [class*="RevoltApp__Routes"] > [class*="Header"] { | |
| background: #36393f; | |
| box-shadow: 1px 1px 1px #27292e; | |
| border-bottom: solid #363636 1px; | |
| /*box-shadow: 1px 1px 1px #24262a; | |
| border-bottom: solid #24262a 1px;*/ | |
| } | |
| .csvICB { | |
| width: 90px; | |
| } | |
| [class*="MessageBase__MessageInfo"] > [class*="avatar"] { | |
| height: 44px !important; | |
| width: 44px; | |
| } | |
| [class*="MessageBase__MessageInfo"]:has([class*="edited"]) | |
| [class*="MessageBase-sc"]:has([class*="edited"]) > div | |
| [class*="MessageBase-sc"]:has([class*="edited"]) { | |
| margin-left: 90px; | |
| } | |
| [class*="MessageBase-sc"]:has([class*="edited"]) > div:nth-child(1) { | |
| order: 2; | |
| } | |
| [class*="MessageBase-sc"]:has([class*="edited"]) > div:nth-child(2) { | |
| order: 1; | |
| flex-grow: unset; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| --sidebar-active: #2f3136; | |
| } | |
| a, | |
| a:hover { | |
| color: #13abe8; | |
| } | |
| /* Apply margin to server scroller */ | |
| [class*="SidebarBase"]:first-child > [class^="Base-sc"] { | |
| margin: 10px; | |
| } | |
| [class*="SidebarBase"] | |
| > [class^="Base-sc"] | |
| > [data-test-id*="virtuoso-scroller"] { | |
| width: 70px; | |
| } | |
| [class*="MessageBox__Base"] { | |
| margin-left: 20px; | |
| margin-right: 20px; | |
| margin-bottom: 26px; | |
| border-radius: 10px; | |
| box-shadow: -20px 25px 9px 6px #36393f, 20px 25px 6px 6px #36393f; | |
| } | |
| /* Padding at the end of the chat. */ | |
| [class*="MessageArea__Area"] > div { | |
| padding-bottom: 0px; | |
| } | |
| [class*="RevoltApp__Routes"] > [class*="Header"] { | |
| background: #36393f; | |
| box-shadow: 1px 1px 1px #27292e; | |
| border-bottom: solid #363636 1px; | |
| } | |
| [class^="MessageBase__MessageInfo"].csvICB { | |
| width: 90px; | |
| } | |
| [class*="MessageBase__MessageInfo"] > [class*="avatar"] { | |
| height: 44px !important; | |
| width: 44px; | |
| } | |
| [class*="MessageArea__Area"] { | |
| --scrollbar-track: #2e3338; | |
| --scrollbar-thickness: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| display: inline-block; | |
| background: #202225; | |
| border-radius: 15px; | |
| background-clip: border-box !important; | |
| height: 5px !important; | |
| background-size: 5px 5px !important; | |
| background-repeat: no-repeat; | |
| max-height: 5px !important; | |
| } | |
| ::-webkit-scrollbar-track { | |
| border-radius: 30px; | |
| } | |
| :root { | |
| --foreground: #d3d3d3; | |
| } | |
| ._item_1avxi_1[data-alert="true"] { | |
| color: #ffffff !important; | |
| } | |
| ._item_1avxi_1[data-active="true"] { | |
| color: #ffffff !important; | |
| } | |
| :root { | |
| --hover: #3c3f45; | |
| } | |
| @media (hover: hover) { | |
| [class*="ServerSidebar__ServerList"]:not(:hover) { | |
| overflow: hidden; | |
| } | |
| [data-test-id*="virtuoso-scroller"]:not(:hover) { | |
| overflow-y: hidden !important; | |
| overflow: hidden; | |
| } | |
| } | |
| [class*="FilePreview__Container"] { | |
| margin: 10px; | |
| } | |
| [class*="MessageBox__Blocked"] { | |
| margin-left: 20px; | |
| } | |
| [class*="MessageBox__Action"] { | |
| margin-right: 10px; | |
| } | |
| [class*="MessageArea__Area"] > div > [class*="Base-sc"]:has(> time) { | |
| border-top: solid 1px #42464d; | |
| justify-content: center; | |
| } | |
| [class*="MessageArea__Area"] > div > [class*="Base-sc"]:has(> time) > time { | |
| color: #b9bbbe; | |
| } | |
| [class*="MessageBase"]:hover { | |
| background: #32353b; | |
| } | |
| [class*="ServerSidebar__ServerBase"] { | |
| margin: 0 !important; | |
| } | |
| blockquote { | |
| background: none !important; | |
| border-radius: 2px !important; | |
| border-inline-start-color: #4f545c !important; | |
| } | |
| @media (hover: none), (pointer: coarse) { | |
| [class^="MessageBase__MessageInfo"].csvICB { | |
| width: 60px; | |
| margin-right: 5px; | |
| } | |
| [class*="MessageBox__Action"] { | |
| margin-right: 0px; | |
| } | |
| textarea[class*="TextArea"] { | |
| width: 115%; | |
| } | |
| /* New observation, above and this can be deleted probably */ | |
| textarea[class*="TextArea"] { | |
| width: 100%; | |
| } | |
| } | |
| [class*="MessageArea__Area"] { | |
| margin-bottom: -40px; | |
| } | |
| [class*="MessageArea__Area"] > div { | |
| padding-bottom: 60px; | |
| } | |
| /* Messages scrollbar overflow fix */ | |
| ::-webkit-scrollbar-track { | |
| margin-bottom: 65px; | |
| margin-top: 53px; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| min-height: 0px !important; | |
| } | |
| a, | |
| a:link, | |
| a:visited, | |
| a:hover { | |
| color: #15afe3; | |
| } | |
| [class^="SidebarBase"] [class^="ParentBase-sc"] { | |
| height: 48px; | |
| width: 48px; | |
| } | |
| [class^="SwooshWrapper"] { | |
| top: -58px; | |
| left: -6px; | |
| } | |
| [class^="SwooshWrapper"] > svg { | |
| width: 66px; | |
| height: 163px; | |
| } | |
| [class^="MessageBase__MessageInfo"] { | |
| max-height: 38px; | |
| } | |
| [class^="MessageBase-sc"] { | |
| padding: 0.225rem; | |
| } | |
| [class^="MessageBase__MessageContent-sc"] > [class^="detail"] { | |
| margin-bottom: 5px; | |
| } | |
| @media (hover: none), (pointer: coarse) { | |
| [class^="MessageArea__Area-sc"]::-webkit-scrollbar { | |
| width: 0px; | |
| } | |
| } | |
| [class^="Search__SearchBase-sc"] > input[class^="InputBox-sc"] { | |
| background: #24262a; | |
| } | |
| @media (pointer: coarse) { | |
| [class^="ServerSidebar__ServerList-sc"] [class^="_item"] { | |
| height: 46px; | |
| } | |
| } | |
| @media (pointer: coarse) { | |
| [class^="MessageEditor__EditorBase-sc"] { | |
| position: relative; | |
| left: -6%; | |
| } | |
| } | |
| @media (pointer: coarse) { | |
| [class^="MessageBox__FloatingLayer-sc"] > [class^="Column-sc"] { | |
| z-index: 6; | |
| } | |
| [class^="Header-sc"] { | |
| z-index: 1; | |
| } | |
| } | |
| [class^="MessageBox__FileAction-sc"] > [class^="IconButton-sc"] { | |
| width: 56px; | |
| justify-content: flex-end; | |
| padding-right: 10px; | |
| } | |
| [class^="MessageBox__FileAction-sc"] { | |
| padding-left: 4px; | |
| } | |
| /* Make scrollbar alike Discord for Desktop*/ | |
| @media (pointer: fine) { | |
| [class^="Channel__ChannelContent-sc"]{ | |
| margin-right: 5px; | |
| } | |
| [class^="MessageArea__Area-sc"]{ | |
| padding-right: 4px; | |
| } | |
| } | |
| [class^="MessageBase__MessageContent"] > [class^="_embed"] { | |
| margin: 0.3em 0; | |
| } | |
| /* Disable highlights on hover of server channels */ | |
| [class^="ServerSidebar__ServerList-sc"] [class^="_item_"]:hover{ | |
| color: var(--tertiary-foreground); | |
| } | |
Author
BoQsc
commented
Nov 23, 2022
Latest rewrite
:root {
--sidebar-active: #2f3136
}
a, a:hover {
color: #13abe8
}
/* Margin to serverlist scroller */
[class^="SidebarBase"] [class^="Base-sc"]:has([data-virtuoso-scroller]) {
margin: 10px;
}
/* _____Active server wrapper_____ */
[class*="SidebarBase"] [class^="Base-sc"] [class^="SwooshWrapper"]{
top: -60px;
left: -1px;
}
[class*="SidebarBase"] [class^="Base-sc"] [class^="SwooshWrapper"] > svg {
width: 60px;
height: 163px;
}
[class*="SidebarBase"] > [class^="Base-sc"] > [data-virtuoso-scroller] {
width: 70px;
}
/* _____Message box_____ */
[class*="MessageBox__Base"]{
margin-left: 20px;
margin-right: 20px;
margin-bottom: 26px;
border-radius: 10px;
}
/* Padding at the end of the chat. */
[class*="MessageArea__Area"] > div {
padding-bottom: 0px;
}
:root {
--sidebar-active: #2f3136
}
a, a:hover {
color: #13abe8
}
/* Margin to serverlist scroller */
[class^="SidebarBase"] [class^="Base-sc"]:has([data-virtuoso-scroller]) {
margin: 10px;
}
/* _____Active server wrapper_____ */
[class*="SidebarBase"] [class^="Base-sc"] [class^="SwooshWrapper"]{
top: -60px;
left: -1px;
}
[class*="SidebarBase"] [class^="Base-sc"] [class^="SwooshWrapper"] > svg {
width: 60px;
height: 163px;
}
[class*="SidebarBase"] > [class^="Base-sc"] > [data-virtuoso-scroller] {
width: 70px;
}
/* _____Message box_____ */
[class*="MessageBox__Base"]{
margin-left: 20px;
margin-right: 20px;
margin-bottom: 26px;
border-radius: 10px;
}
/* Padding at the end of the chat. */
[class*="MessageArea__Area"] > div {
padding-bottom: 0px;
}
/* Add Solid color to main chat Header*/
[class*="RevoltApp__Routes"] > [class*="Header"] {
background: #36393f;
box-shadow: 1px 1px 1px #27292e;
border-bottom: solid #363636 1px;
/*box-shadow: 1px 1px 1px #24262a;
border-bottom: solid #24262a 1px;*/
}
:root {
--sidebar-active: #2f3136
}
a, a:hover {
color: #13abe8
}
/* Margin to serverlist scroller */
[class^="SidebarBase"] [class^="Base-sc"]:has([data-virtuoso-scroller]) {
margin: 10px;
}
/* _____Active server wrapper_____ */
[class*="SidebarBase"] [class^="Base-sc"] [class^="SwooshWrapper"]{
top: -60px;
left: -1px;
}
[class*="SidebarBase"] [class^="Base-sc"] [class^="SwooshWrapper"] > svg {
width: 60px;
height: 163px;
}
[class*="SidebarBase"] > [class^="Base-sc"] > [data-virtuoso-scroller] {
width: 70px;
}
/* _____Message input box_____ */
[class*="MessageBox__Base"]{
margin-left: 20px;
margin-right: 20px;
margin-bottom: 26px;
border-radius: 10px;
}
/* Padding at the end of the chat. */
[class*="MessageArea__Area"] > div {
padding-bottom: 0px;
}
/* _____Solid color to the Main Chat Header_____ */
[class*="RevoltApp__Routes"] > [class*="Header"] {
background: #36393f;
box-shadow: 1px 1px 1px #27292e;
border-bottom: solid #363636 1px;
/*box-shadow: 1px 1px 1px #24262a;
border-bottom: solid #24262a 1px;*/
}
/* _____Padding to the avatar in the chat_____ */
.csvICB {
width: 90px;
}
/* _____Bigger avatar in the chat_____ */
[class*="MessageBase__MessageInfo"] > [class*="avatar"] {
height: 44px !important;
width: 44px;
}
/* _____Thicker chat scrollbar_____ */
[class*="MessageArea__Area"] {
--scrollbar-track: #2e3338;
--scrollbar-thickness: 10px;
}
/* _____chat scrollbar round borders_____ */
::-webkit-scrollbar-thumb {
display: inline-block;
background: #202225;
border-radius: 15px;
background-clip: border-box !important;
height: 5px !important;
background-size: 5px 5px !important;
background-repeat: no-repeat;
max-height: 5px !important;
}
/* _____Useless Tweak_____ */
::-webkit-scrollbar-track {
border-radius: 30px;
}
/* No effect, can be removed */
::-webkit-scrollbar-track-piece {
border-radius: 30px !important;
}
/* _____Dimmer text in the chat and channel list_____ */
/* Change original theme color */
:root {
--foreground: #d3d3d3;
}
/* channel list: highlight and hover colors */
._item_1avxi_1[data-alert=true] {
color: #ffffff !important;
}
._item_1avxi_1[data-active=true] {
color: #ffffff !important;
}
/* Change original hover theme color */
:root {
--hover: #3c3f45;
}
/* ____Hide scrollbar on hover for desktop____*/
@media (hover: hover) {
[class*="ServerSidebar__ServerList"]:not(:hover){
overflow: hidden;
}
[data-test-id*="virtuoso-scroller"]:not(:hover){
overflow-y: hidden !important;
overflow: hidden;
}
}
/* Attachmen Upload listing margin fix */
[class*="FilePreview__Container"]{
margin: 10px;
}
[class*="MessageBox__Blocked"]{
margin-left: 20px;
}
[class*="MessageBox__Action"]{
margin-right: 10px;
}
/* Center the date separator in the chat */
[class*="MessageArea__Area"] > div > [class*="Base-sc"]:has(> time) {
border-top: solid 1px #42464d;
justify-content: center;
}
[class*="MessageArea__Area"] > div > [class*="Base-sc"]:has(> time) > time {
color: #b9bbbe;
}
/* Dimmer the hover color in the chat over the whole message */
[class*="MessageBase"]:hover {
background: #32353b;
}
/* Might be useless change */
[class*="ServerSidebar__ServerBase"]{
margin: 0 !important;
}
/* Tweak citation/quoting in the chat */
blockquote {
background: none !important;
border-radius: 2px !important;
border-inline-start-color: #4f545c !important;
}
:root {
--sidebar-active: #2f3136
}
a, a:hover {
color: #13abe8
}
/* Margin to serverlist scroller */
[class^="SidebarBase"] [class^="Base-sc"]:has([data-virtuoso-scroller]) {
margin: 10px;
}
/* _____Active server wrapper_____ */
[class*="SidebarBase"] [class^="Base-sc"] [class^="SwooshWrapper"]{
top: -60px;
left: -1px;
}
[class*="SidebarBase"] [class^="Base-sc"] [class^="SwooshWrapper"] > svg {
width: 60px;
height: 163px;
}
[class*="SidebarBase"] > [class^="Base-sc"] > [data-virtuoso-scroller] {
width: 70px;
}
/* _____Message box_____ */
[class*="MessageBox__Base"]{
margin-left: 20px;
margin-right: 20px;
margin-bottom: 26px;
border-radius: 10px;
}
/* Padding at the end of the chat. */
[class*="MessageArea__Area"] > div {
padding-bottom: 0px;
}
:root {
--sidebar-active: #2f3136
}
a, a:hover {
color: #13abe8
}
/* Margin to serverlist scroller */
[class^="SidebarBase"] [class^="Base-sc"]:has([data-virtuoso-scroller]) {
margin: 10px;
}
/* _____Active server wrapper_____ */
[class*="SidebarBase"] [class^="Base-sc"] [class^="SwooshWrapper"]{
top: -60px;
left: -1px;
}
[class*="SidebarBase"] [class^="Base-sc"] [class^="SwooshWrapper"] > svg {
width: 60px;
height: 163px;
}
[class*="SidebarBase"] > [class^="Base-sc"] > [data-virtuoso-scroller] {
width: 70px;
}
/* _____Message box_____ */
[class*="MessageBox__Base"]{
margin-left: 20px;
margin-right: 20px;
margin-bottom: 26px;
border-radius: 10px;
}
/* Padding at the end of the chat. */
[class*="MessageArea__Area"] > div {
padding-bottom: 0px;
}
/* Add Solid color to main chat Header*/
[class*="RevoltApp__Routes"] > [class*="Header"] {
background: #36393f;
box-shadow: 1px 1px 1px #27292e;
border-bottom: solid #363636 1px;
/*box-shadow: 1px 1px 1px #24262a;
border-bottom: solid #24262a 1px;*/
}
:root {
--sidebar-active: #2f3136
}
a, a:hover {
color: #13abe8
}
/* Margin to serverlist scroller */
[class^="SidebarBase"] [class^="Base-sc"]:has([data-virtuoso-scroller]) {
margin: 10px;
}
/* _____Active server wrapper_____ */
[class*="SidebarBase"] [class^="Base-sc"] [class^="SwooshWrapper"]{
top: -60px;
left: -1px;
}
[class*="SidebarBase"] [class^="Base-sc"] [class^="SwooshWrapper"] > svg {
width: 60px;
height: 163px;
}
[class*="SidebarBase"] > [class^="Base-sc"] > [data-virtuoso-scroller] {
width: 70px;
}
/* _____Message input box_____ */
[class*="MessageBox__Base"]{
margin-left: 20px;
margin-right: 20px;
margin-bottom: 26px;
border-radius: 10px;
}
/* Padding at the end of the chat. */
[class*="MessageArea__Area"] > div {
padding-bottom: 0px;
}
/* _____Solid color to the Main Chat Header_____ */
[class*="RevoltApp__Routes"] > [class*="Header"] {
background: #36393f;
box-shadow: 1px 1px 1px #27292e;
border-bottom: solid #363636 1px;
/*box-shadow: 1px 1px 1px #24262a;
border-bottom: solid #24262a 1px;*/
}
/* _____Padding to the avatar in the chat_____ */
.csvICB {
width: 90px;
}
/* _____Bigger avatar in the chat_____ */
[class*="MessageBase__MessageInfo"] > [class*="avatar"] {
height: 44px !important;
width: 44px;
}
/* _____Thicker chat scrollbar_____ */
[class*="MessageArea__Area"] {
--scrollbar-track: #2e3338;
--scrollbar-thickness: 10px;
}
/* _____chat scrollbar round borders_____ */
::-webkit-scrollbar-thumb {
display: inline-block;
background: #202225;
border-radius: 15px;
background-clip: border-box !important;
height: 5px !important;
background-size: 5px 5px !important;
background-repeat: no-repeat;
max-height: 5px !important;
}
/* _____Useless Tweak_____ */
::-webkit-scrollbar-track {
border-radius: 30px;
}
/* No effect, can be removed */
::-webkit-scrollbar-track-piece {
border-radius: 30px !important;
}
/* _____Dimmer text in the chat and channel list_____ */
/* Change original theme color */
:root {
--foreground: #d3d3d3;
}
/* channel list: highlight and hover colors */
._item_1avxi_1[data-alert=true] {
color: #ffffff !important;
}
._item_1avxi_1[data-active=true] {
color: #ffffff !important;
}
/* Change original hover theme color */
:root {
--hover: #3c3f45;
}
/* ____Hide scrollbar on hover for desktop____*/
@media (hover: hover) {
[class*="ServerSidebar__ServerList"]:not(:hover){
overflow: hidden;
}
[data-test-id*="virtuoso-scroller"]:not(:hover){
overflow-y: hidden !important;
overflow: hidden;
}
}
/* Attachmen Upload listing margin fix */
[class*="FilePreview__Container"]{
margin: 10px;
}
[class*="MessageBox__Blocked"]{
margin-left: 20px;
}
[class*="MessageBox__Action"]{
margin-right: 10px;
}
/* Center the date separator in the chat */
[class*="MessageArea__Area"] > div > [class*="Base-sc"]:has(> time) {
border-top: solid 1px #42464d;
justify-content: center;
}
[class*="MessageArea__Area"] > div > [class*="Base-sc"]:has(> time) > time {
color: #b9bbbe;
}
/* Dimmer the hover color in the chat over the whole message */
[class*="MessageBase"]:hover {
background: #32353b;
}
/* Might be useless change */
[class*="ServerSidebar__ServerBase"]{
margin: 0 !important;
}
/* Tweak citation/quoting in the chat */
blockquote {
background: none !important;
border-radius: 2px !important;
border-inline-start-color: #4f545c !important;
}
/* Mobile Phone Tweak */
/* Make smaller margins between avatars in the chat */
@media (hover:none), (pointer:coarse){
.csvICB {
width: 60px;
margin-right: 5px;
}
[class*="MessageBox__Action"]{
margin-right: 0px;
}
textarea[class*="TextArea"]{
width: 115%;
}
/* New observation, above and this can be deleted probably */
textarea[class*="TextArea"]{
width: 100%;
}
}
/* Position chat input */
[class*="MessageArea__Area"] {
margin-bottom: -40px;
}
[class*="MessageArea__Area"] > div {
padding-bottom: 60px;
}
/* Messages scrollbar overflow fix */
::-webkit-scrollbar-track{
margin-bottom: 65px;
}
/* Restore Scrollbar Thumb */
::-webkit-scrollbar-thumb {
min-height: 0px !important;
}
/* Change color of links in the whole Revolt */
a, a:link, a:visited, a:hover {
color: #15afe3;;
}
/* Sidebar changes */
[class^="SidebarBase"] [class^="ParentBase-sc"] {
height: 48px;
width: 48px;
}
[class^="SwooshWrapper"]{
top: -58px;
left: -6px;
}
[class^="SwooshWrapper"] > svg {
width: 66px;
height: 163px;
}
/* Modify chat and adjust for emojis in the chat */
[class^="MessageBase__MessageInfo"]{
max-height: 38px;
}
[class^="MessageBase-sc"]{
padding: 0.225rem;
}
[class^="MessageBase__MessageContent-sc"] > [class^="detail"] {
margin-bottom: 5px;
}
/* Scrollbar removal for Mobile */
@media (hover:none), (pointer:coarse){
[class^="MessageArea__Area-sc"]::-webkit-scrollbar {
width: 0px;
}
}
/* Change color of messages search bar */
[class^="Search__SearchBase-sc"] > input[class^="InputBox-sc"]{
background: #24262a ;
}
/* The rest of fixes*/
@media (pointer: coarse){
[class^="ServerSidebar__ServerList-sc"] [class^="_item"]{
height: 46px;
}
}
@media (pointer: coarse){
[class^="MessageEditor__EditorBase-sc"]{
position: relative;
left: -6%;
}
}
@media (pointer: coarse){
[class^="MessageBox__FloatingLayer-sc"] > [class^="Column-sc"] {
z-index: 6;
}
[class^="Header-sc"]{
z-index: 1;
}
}
[class^="MessageBox__FileAction-sc"] > [class^="IconButton-sc"] {
width: 56px;
justify-content: flex-end;
padding-right: 10px;
}
[class^="MessageBox__FileAction-sc"] {
padding-left: 4px;
}
[class^="Channel__ChannelMain-sc"] [class^="SidebarBase"] {
margin-left: 5px;
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment