WiderDiscord by davdi1337

/* ==UserStyle==
@name           WiderDiscord
@namespace      https://github.com/davdi1337/widediscord
@version        1.0.3
@description    Makes discord wider with animated left & right side
@author         davdi1337
@var select animtime "Animation time" {
    "off": "0s",
    "default": "0.8s",
    "0.5sec": "0.5s",
    "1sec": "1s",
    "1.5sec": "1.5s"
}
==/UserStyle== */
@-moz-document domain("discord.com") {
    .sidebar-2K8pFh,
    .containerDefault-1ZnADq {
        width: 50px;
        transition: all var(--animtime);
    }
    .sidebar-2K8pFh:hover,
    .containerDefault-1ZnADq,
    .sidebar-2K8pFh:hover .mainContent-2gfK59 {
        opacity: 1;
        width: 240px;
    }
    .sidebar-2K8pFh .mainContent-2gfK59 {
        width: 0px;
        opacity: 0;
        transition: all var(--animtime);
    }
    .sidebar-2K8pFh:hover .actions-aUdUfC {
        opacity: 1;
        transition: opacity var(--animtime);
    }
    .sidebar-2K8pFh .actions-aUdUfC {
        opacity: 0;
        transition: opacity var(--animtime);
    }
    .sidebar-2K8pFh .bannerImage-3KhIJ6 {
        opacity: 1;
        filter: blur(2px);
        width: 50px;
        transition: filter var(--animtime), width var(--animtime);
    }
    .sidebar-2K8pFh:hover .bannerImage-3KhIJ6 {
        filter: blur(0px);
        width: 240px;
        opacity: 1;
    }
    .sidebar-2K8pFh .privateChannels-1nO12o {
        margin-left: -8px;
    }
    .sidebar-2K8pFh .privateChannels-1nO12o .headerText-2F0828 {
        opacity: 0;
        transition: opacity var(--animtime);
    }
    .sidebar-2K8pFh .selected-aXhQR6.container-2Pjhx- {
        margin-left: 15px;
    }
    .sidebar-2K8pFh .selected-aXhQR6.container-2Pjhx- svg {
        margin-left: -14px;
    }
    .sidebar-2K8pFh:hover .privateChannels-1nO12o .headerText-2F0828 {
        opacity: 1;
    }
    .sidebar-2K8pFh .searchBar-6Kv8R2 .searchBarComponent-32dTOx {
        margin-left: 8px;
        text-align: center;
    }
    .sidebar-2K8pFh .discoverHeader-1TWTqG {
        opacity: 0;
        transition: opacity var(--animtime);
    }
    .sidebar-2K8pFh:hover .discoverHeader-1TWTqG {
        opacity: 1;
    }
    .sidebar-2K8pFh .categoryItem-3zFJns svg {
        margin-left: -10px;
    }
    .sidebar-2K8pFh .categoryItem-3zFJns.selectedCategoryItem-3X8ujp .itemInner-3gVXMG {
        margin-left: -5px;
    }
    .sidebar-2K8pFh .categoryItem-3zFJns.selectedCategoryItem-3X8ujp .itemInner-3gVXMG svg {
        margin-right: 0px;
    }
    .sidebar-2K8pFh .selected-aXhQR6 .layout-2DM8Md svg {
        left: 7px;
    }
    .hiddenMembers-2dcs_q {
        width: 0px;
        left: 60px;
        min-width: 0px;
        margin-left: 60px;
        transition: all var(--animtime);
    }
    .hiddenMembers-2dcs_q:hover {
        width: 240px;
        left: 0;
        margin-left: 0;
        min-width: 240px;
    }
    .hiddenMembers-2dcs_q:hover .membersGroup-v9BXpm span {
        opacity: 1;
        background-color: transparent;
    }
    .hiddenMembers-2dcs_q .membersGroup-v9BXpm span {
        opacity: 1;
        background-color: var(--channels-default);
        border-radius: 15px;
        transition: opacity var(--animtime), background-color var(--animtime);
    }
    .form-2fGMdU {
        width: auto;
    }
    .scroller-2LSbBU {
        width: auto;
    }
    .sidebar-2K8pFh .height12-2Ltw-k {
        opacity: 0;
        transition: opacity var(--animtime);
    }
    .sidebar-2K8pFh:hover .height12-2Ltw-k {
        opacity: 1;
        transition: opacity var(--animtime);
    }
    /* SETTINGS WIDTH */
    .contentColumn-2hrIYH {
        max-width: 1700px!important;
    }
    .contentColumnDefault-1VQkGM {
        padding: 60px 20px 180px!important;
    }
    .contentRegion-3nDuYy {
        flex: 1 1 1900px;
    }
    .canceled-nz3kfr.banner-3Kac2g,
    .hero-EvfTTA,
    .sidebarScrollable-1qPI87 + .content-1rPSz4,
    .customScroller-26gWhv > div,
    .customColumn-Rb6toI {
        max-width: 1700px!important;
    }
    .notificationSettings-1NQKPR {
        max-width: 1000px;
        margin: auto;
    }
    .sidebar-2K8pFh .children-3rEycc {
        opacity: 0;
        transition: opacity var(--animtime);
    }
    .sidebar-2K8pFh:hover .children-3rEycc {
        opacity: 1;
    }
    .sidebar-2K8pFh .mention-1f5kbO {
        color: transparent;
        transition: color var(--animtime);
    }
    .sidebar-2K8pFh:hover .mention-1f5kbO {
        color: #fff;
        transition: color var(--animtime);
        transition-delay: 0.3s;
    }
    .nowPlayingColumn-2sl4cE {
        margin-right: -22%;
        z-index: 2;
        transition: var(--animtime);
    }
    .nowPlayingColumn-2sl4cE:hover {
        margin-right: 0;
    }
    .peopleColumn-29fq28:after {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='36px' viewBox='0 0 24 24' width='36px' fill='%238e9297'%3E%3Cpath d='M24 0v24H0V0h24z' fill='none' opacity='.87'/%3E%3Cpath d='M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6 1.41-1.41zM6 6h2v12H6V6z'/%3E%3C/svg%3E");
        position: fixed;
        left: 96%;
        z-index: 1;
    }
}