BTR.theme.css

/**
 * @name BTRTheme
 * @author TBNRDev
 * @version 1.0.0-Official-Release
 * @description Theme to make Discord better and clean. - Update 1.0.0: GitHub Download Link
 * @source https://github.com/TBNRDev/BTRTheme
 **/
 @import url(https://maendisease.github.io/BetterDiscordStuff/css/ChatBubbles.css);

:root {

    --chat-bubble: 1;

    --chat-bubble-background-color: var(--background-secondary);
    --chat-bubble-border-color: var(--background-secondary-alt);
    --chat-bubble-code-background-color: var(--background-secondary-alt);

    --chat-bubble-max-width: 90%;
    --chat-bubble-border-radius: 8px;

    --chat-bubble-box-shadow-h-offset: 0;
    --chat-bubble-box-shadow-v-offset: 4px;
    --chat-bubble-box-shadow-blur: 4px;
    
    --chat-bubble-box-shadow-color-h: 0;
    --chat-bubble-box-shadow-color-s: 0%;
    --chat-bubble-box-shadow-color-l: 0%;
    --chat-bubble-box-shadow-color-a: 0.16;

    
}
.role-2TIOKu {
    transform: translate(0);
    overflow: hidden;
    border: 0;

    --transparency: .4;
    border-radius: 5px;
}
.role-2TIOKu .roleRemoveIcon-387wKV {
    margin: 0;
    left: unset;
    transform: translate(50%,-50%);
}
.role-2TIOKu .roleRemoveButton-17oXnT {
    position: static;
}
.role-2TIOKu .roleCircle-3K9O3d:after {
    content: '';
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    position: absolute;
    background: inherit;
    opacity: var(--transparency);
}

@import url(https://maendisease.github.io/BetterDiscordStuff/css/SettingsSidebar.css);

.panels-3wFtMD {
  margin-right: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
  border: 1px solid var(--background-secondary);
  border-radius: 20px;
  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.45);
}

.modeMuted-2T4MDZ .icon-2W8DHg path{ display: none; }
.modeMuted-2T4MDZ .iconContainer-21RCa3{ position: relative; }
.modeMuted-2T4MDZ .iconContainer-21RCa3:before{
    content: '🔇';
    position: absolute;
    font-size: 20px; 
}
.markup-eYLPri blockquote, .markup-eYLPri pre > code{
max-height:150px; /*Change this to your height preference.*/
overflow-x: hidden;
overflow-y:scroll;
}
.markup-eYLPri blockquote::-webkit-scrollbar, .markup-eYLPri pre > code::-webkit-scrollbar {
width: 15px;
height: 15px;
}
.markup-eYLPri blockquote::-webkit-scrollbar-track , .markup-eYLPri pre > code::-webkit-scrollbar-track {
border-radius: 10px;
background-color: rgba(255 255 255 / 8%);/*Change this to your color choice or just remove it entirely.*/
}
.markup-eYLPri blockquote::-webkit-scrollbar-thumb, .markup-eYLPri pre > code::-webkit-scrollbar-thumb {
background-color: rgb(13 81 239 / 70%); /*Change this to your color choice or just remove it entirely.*/
border-radius: 10px;
}
.markup-eYLPri blockquote, .markup-eYLPri pre > code {
max-width: 629px;
}

@import url(https://saltssaumure.github.io/misc-discord-themes/snippets/LightDarkModeIndicator.css);

/* Spotify Covers Go Wheeeee */
/* profile */
.assetsLargeImageSpotify-17ME3M {
  animation: spin 3s linear infinite;
  border-radius: 50%
}
/* the animation  */
@keyframes spin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
/* Discord Links */
@import url("https://thecommieaxolotl.github.io/BetterDiscord-Stuff/Imports/DiscordLinks.css");

/* Resizable DM Channel Popup */
@import url(https://maendisease.github.io/BetterDiscordStuff/css/ChannelDms.css);

/* Rounded Context Menu */
.menu-1QACrS, .colorDefault-CDqZdO { 
    border-radius: 15px; 
}

/* Emoji Auto-Fill Animation */
.base-2v-uc0 {
    transition: all 0.5s;
}
.base-2v-uc0:hover {
    transition: all 0s;
    transform: scale(1.02);
}

/* Better Jump To Present Button */
[class*="jumpToPresentBar"] {
    display: contents;
}
[class*="jumpToPresentBar"] > button:first-child {
    display: none;
}
[class*="jumpToPresentBar"] > button:last-child {
    position: absolute;
    z-index: 1;
    bottom: 24px;
    right: 22px;
    padding: 8px !important;
    height: auto;
    background-color: #5865F2;
    box-shadow: var(--elevation-high);
    border-radius: 100px;
    display: flex;
    font-size: 0px;
    color: transparent;
    transition: font-size .2s .1s, color .2s, padding .4s .1s;
}
[class*="jumpToPresentBar"] > button svg {
    order: -1;
    margin: 0px;
    height: 24px;
    width: 24px;
    top: auto;
    margin-right: 0px;
    margin-left: 0px;
    color: #FFFFFF;
    transition: margin .6s;
}
[class*="jumpToPresentBar"]:hover > button {
    padding: 8px 18px !important;
    font-size: 14px;
    color: #FFFFFF;
    transition: font-size .2s, color .2s .1s, padding .4s;
}
[class*="jumpToPresentBar"]:hover > button svg {
    margin-right: 2px;
    margin-left: -6px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    20% {
        transform: rotate(-20deg);
    }
    70% {
        transform: rotate(380deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.pill-L_aLMQ.bd-selected + .listItemWrapper-3d87LP .homeIcon-r0w4ny {
    animation: spin 0.8s ease;
}

/*category containers*/
.containerDefault-3TQ5YN {
  margin-top: .2em;
  margin-bottom: .2em;
  padding: 0px !important;
  height: 1.4em !important;
  border: 1px solid RGBA(0, 0, 0, 0.5);
  border-radius: 5px;
  background-color: RGBA(0, 0, 0, 0.4);
}
/*channel containers*/
.content-1gYQeQ {
  background-color: RGBA(0, 0, 0, 0.1);
  border: 2px solid var(--background-tertiary);
  padding: 0px;
}
.iconItem-1EjiK0 {
  margin-left: 3px !important;
  padding: 0px 6px !important;
}
.mainContent-20q_Hp{
  padding: 0px 2px !important;
}

@import url('https://lolpowerluke.github.io/smallDMchannelList/smallDMchannelList.css');
@import url(https://maendisease.github.io/BetterDiscordStuff/css/bettterInvites.css);
.bd-toast {
    background-color: var(--background-tertiary) !important;
    border-radius: 32px;
    margin-bottom: 12px;
    line-height: 24px;
    padding: 16px !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 16px !important;
    font-weight: normal !important;
}

.bd-toast.toast-success.icon {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjEuMjg0ODUgMy40NjkyNCAyMS44MzYzNTAwMDAwMDAwMDMgMTcuNjUyMTYwMDAwMDAwMDAyIj4KICA8cGF0aCBkPSJNOS4wMDA0MyAxNC4wNDkyTDE5LjU5MDQgMy40NjkyNEwyMy4xMjEyIDcuMDAwMDZMOC45OTk5MyAyMS4xMjE0TDEuMjg0ODUgMTMuNDA2M0w0LjgzMzY3IDkuODgyNDhMOS4wMDA0MyAxNC4wNDkyWiIgZmlsbD0iIzNCQTU1QyIvPgo8L3N2Zz4=") !important;
}

.bd-toast.icon {
    padding-left: 30px !important;
}

.bd-toast.toast-danger.icon,
.bd-toast.toast-error.icon {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjcgMTAgNiA2Ij4KICA8cGF0aCBkPSJNIDEyIDEwIEwgMTMgMTEgTCAxMSAxMyBMIDEzIDE1IEwgMTIgMTYgTCAxMCAxNCBMIDggMTYgTCA3IDE1IEwgOSAxMyBMIDcgMTEgTCA4IDEwIEwgMTAgMTIgWiIgZmlsbD0iI2YwNDc0NyIvPgo8L3N2Zz4=") !important;
    padding-left: 35px !important;
}

/* Unclamp the About Me section, so it's not limited to just 6 lines. (normally it cuts off at 6 and adds a ...) */
.lineClamp2Plus-2RYGV2{
    -webkit-line-clamp: 190; /*Maximum amount of characters as new lines, unset just breaks links*/
    max-height:112px;
    overflow-x: hidden;
    overflow-y:auto;
}
.lineClamp2Plus-2RYGV2::-webkit-scrollbar {
  width: 15px;
  height: 15px;
}
.lineClamp2Plus-2RYGV2::-webkit-scrollbar-track {
  border-radius: 10px; /*How round you want the scrollbar to be. 0 is square, 10px is round.*/
  background-color: rgb(255 255 255 / 10%); /*Edit this to what color you want the track to be.*/
}
.lineClamp2Plus-2RYGV2::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, #00aeff, #a68eff); /* Edit this to whatever color/colors you'd like*/
  border-radius: 10px; /*How round you want the scrollbar thumb to be. 0 is square, 10px is round.*/
}
.cozy-3raOZG .headerText-3Uvj1Y > .username-1A8OIy::before {
  content: ''; 
  width: calc(100% + 7px); 
  height: 100%;
  border-radius: 5px;
  background-color: currentColor; 
  opacity: 0.3; 
  position: absolute; 
  top: 0; 
  z-index: -1;
  /* repairs left shift*/
  left: -3px;
}
.cozy-3raOZG .headerText-3Uvj1Y > .username-1A8OIy::after {
  content: ":";
}
/* repairs left shift */
.cozy-3raOZG .headerText-3Uvj1Y > .username-1A8OIy {
  margin-left: 3px;
}
#status-picker .scrollerBase-289Jih {
  display: grid;
}

#status-picker-custom-status,
#status-picker div[role=group] {
  grid-column: 1/5;
}

#status-picker .item-1tOPte:not(#status-picker-custom-status, #status-picker-switch-account) .status-1fhblQ {display: none;}
#status-picker .description-2L932D {display: none;}
#status-picker .separator-2I32lJ {display: none;}

#status-picker .status-1fhblQ {
  margin-left: 8px;
}

#status-picker .customEmojiPlaceholder-37iZ_j,
#status-picker .switchAccountsIcon-355frb {
  margin-left: 1px;
}

#status-picker .mask-1qbNWk {
  height: 78%; 
  width: 78%;
  margin-left: 3px;
}

#status-picker-online,
#status-picker-idle,
#status-picker-dnd {
  margin-right: 20px;
}

#status-picker-online .statusItem-33LqPf,
#status-picker-idle .statusItem-33LqPf,
#status-picker-dnd .statusItem-33LqPf,
#status-picker-invisible .statusItem-33LqPf {
  padding: 8px 8px;
}

#status-picker-custom-status .statusItem-33LqPf {
  padding: 6px 8px;
}

#status-picker .customEmojiPlaceholder-37iZ_j {
  background-image: none;
  background-color: var(--interactive-normal);
  mask: var(--icon) center/contain no-repeat;
  -webkit-mask: var(--icon) center/contain no-repeat;
  width: 22px;
  height: 22px;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' enable-background='new 0 0 24 24' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Crect fill='none' height='24' width='24'/%3E%3Cpath d='M11.99,2C6.47,2,2,6.48,2,12s4.47,10,9.99,10C17.52,22,22,17.52,22,12S17.52,2,11.99,2z M8.5,8C9.33,8,10,8.67,10,9.5 S9.33,11,8.5,11S7,10.33,7,9.5S7.67,8,8.5,8z M16.75,14.75C15.8,16.39,14.03,17.5,12,17.5s-3.8-1.11-4.75-2.75 C7.06,14.42,7.31,14,7.69,14h8.62C16.7,14,16.94,14.42,16.75,14.75z M15.5,11c-0.83,0-1.5-0.67-1.5-1.5S14.67,8,15.5,8 S17,8.67,17,9.5S16.33,11,15.5,11z'/%3E%3C/svg%3E");
}

#status-picker .colorDefault-2K3EoJ.focused-3afm-j .customEmojiPlaceholder-37iZ_j {
  background: var(--interactive-active);
}

#status-picker .switchAccountsIcon-355frb {
  background-image: none;
  background-color: var(--interactive-normal);
  mask: var(--icon) center/contain no-repeat;
  -webkit-mask: var(--icon) center/contain no-repeat;
  width: 22px;
  height: 22px;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' enable-background='new 0 0 24 24' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cg%3E%3Crect fill='none' height='24' width='24'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M17,20H4V7c0-0.55-0.45-1-1-1S2,6.45,2,7v13c0,1.1,0.9,2,2,2h13c0.55,0,1-0.45,1-1S17.55,20,17,20z M20,2H8 C6.9,2,6,2.9,6,4v12c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V4C22,2.9,21.1,2,20,2z M14,5c1.66,0,3,1.34,3,3c0,1.66-1.34,3-3,3 s-3-1.34-3-3C11,6.34,12.34,5,14,5z M7.76,16c1.47-1.83,3.71-3,6.24-3s4.77,1.17,6.24,3H7.76z'/%3E%3C/g%3E%3C/svg%3E");
}

#status-picker .colorDefault-2K3EoJ.focused-3afm-j .switchAccountsIcon-355frb {
  background: var(--interactive-active);
}

#status-picker-custom-status,
#status-picker-switch-account,
#status-picker-switch-account--manage-accounts {
  margin-top: 12px !important;
}

#status-picker-custom-status::after {
  content: "";
  background: var(--background-modifier-accent);
  position: absolute;
  top: -6px;
  left: 2px;
  width: 98%;
  height: 1px;
}

#status-picker-switch-account::after {
  content: "";
  background: var(--background-modifier-accent);
  position: absolute;
  top: -6px;
  left: 2px;
  width: 98%;
  height: 1px;
}

#status-picker-switch-account--manage-accounts::after {
  content: "";
  background: var(--background-modifier-accent);
  position: absolute;
  top: -7px;
  left: 2px;
  width: 98%;
  height: 1px;
}

#status-picker-dnd::after,
#status-picker-idle::after,
#status-picker-online::after {
  content: "";
  background: var(--background-modifier-accent);
  position: absolute;
  top: 6px;
  left: 50px;
  width: 1px;
  height: 24px;
}


@import url("https://discordstyles.github.io/RadialStatus/dist/RadialStatus.css");