MPPC | Firefox's style by firefox

/* ==UserStyle==
@name           MPPC | Firefox's style
@namespace      github.com/openstyles/stylus
@version        1.0.1
@description    Style made by Firefox.
@author         Firefox 🔥🦊
==/UserStyle== */

@-moz-document domain("mppclone.com") {
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-weight: 500;
    }
    
    button, input[type="file"], input[type="color"], input[type="button"] {
        color: white;
        background: linear-gradient(#555, #444);
        border: 1px solid #777;
        border-radius: 3px;
        box-shadow: 1px 1px 5px #222222CC;
    }
    
    input[type="color"] {
        border: 0px;
    }
    
    .notification .pack {
        background: linear-gradient(#555, #444);
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-weight: 500;
    }
    
    .notification .pack:hover {
        font-weight: 500;
        background: linear-gradient(#777, #666);
    }
    
    .notification .pack.enabled {
        background: linear-gradient(#558055, #326032);
    }
    
    .notification .pack.enabled:hover {
        font-weight: 1000;
    }
    
    .notification .pack.enabled::after {
        font-weight: 500;
    }
    
    .ugly-button, .top-button {
        background: linear-gradient(#555, #333);
        border: 1px solid #777;
        border-radius: 3px;
    }
    
    .ugly-button:hover, .top-button:hover {
        background: linear-gradient(#777, #555);
    }
    
    .dialog {
        background: linear-gradient(#555, #444);
    }
    
    #chat.chatting {
        background: linear-gradient(180deg, #55555580, #333333FF);
        border-radius: 5px;
        box-shadow: 0px 0px 0px #888;
    }
    
    #chat input {
        background: linear-gradient(#55555580, #33333380);
        border-color: #80808000;
        font-weight: 100;
    }
    
    #chat input:focus {
        background: linear-gradient(#77777780, #55555580);
        border-color: #80808000;
        box-shadow: 0px 1px 3px #000000FF;
    }
    
    .timestamp, .id {
        color: #CCC;
        font-weight: 100;
    }
    
    .message, .name {
        font-weight: 400;
    }
    
    #room, .more {
        border-radius: 10px;
        border-width: 2px;
        border-color: #555;
        background: linear-gradient(#555, #333);
    }
    
    #room .more {
        border-radius: 10px;
        border-width: 2px;
        border-color: #555;
    }
    
    #room, #room .info, #room .more, #room .expand, #room .new {
        cursor: default;
    }
    
    #room .more .info {
        background: linear-gradient(#555, #444);
    }
    
    #room .more .info:hover {
        background: linear-gradient(#777, #555);
    }
    
    #room .more .new {
        background: linear-gradient(#558055, #326032);
    }
    
    #room .more .new:hover {
        background: linear-gradient(#77AA77, #528052);
    }
    
    #room .more .info.lobby {
        background: linear-gradient(#808040, #606020);
        color: #FFF;
    }
    
    #room .info.lobby > .info {
        background: linear-gradient(#808040, #606020);
        color: #FFF;
    }
    
    #room .more .info.lobby:hover {
        background: linear-gradient(#AAAA60, #808040);
    }
    
    #room div.more::-webkit-scrollbar {
        border-radius: 10px;
    }
    
    #room div.more::-webkit-scrollbar-track {
        border-radius: 10px;
    }
    
    #room div.more::-webkit-scrollbar-thumb {
        border-radius: 10px;
    }
    
    #status {
        font-weight: 100;
    }
    
    #room .expand {
        border-bottom-right-radius: 10px;
        border-top-right-radius: 10px;
        background: #777 no-repeat center 0;
    }
    
    #room .expand:before {
        content: "▲";
        font-size: 15px;
        margin-left: 5px;
    }
    
    .notification.classic .notification-body {
        background: linear-gradient(#555, #444);
    }
    
    #names {
        z-index: 401;
    }
    
    #names .name, .cursor .name {
        background: linear-gradient(#00000000, #00000040);
    }
    
    .nametag {
        font-weight: 500;
    }
    
    .client-settings-button, #client-settings-ok-btn {
        background: linear-gradient(#555, #444);
        border: 1px solid #777;
        border-radius: 3px;
        box-shadow: 1px 1px 5px #222222CC;
    }
    
    .client-settings-tablink:hover, #client-settings-ok-btn:hover {
        background: linear-gradient(#777, #666);
    }
    
    .client-settings-tablink.active {
        background: linear-gradient(#666, #555);
    }
    
    #modal .bg {
        background: linear-gradient(#AAAAAAFF, #AAAAAA80);
    }
    
    .notification .x {
        text-shadow: 1px 1px 5px #222222CC;
    }
    
    input[type="range"]::-webkit-slider-thumb {
        background-image: -webkit-gradient( linear,left top,right top,color-stop( 0,hsl(0,0%,35%) ),color-stop( .16,hsl(0,0%,45%) ),color-stop( .18,hsl(0,0%,40%) ),color-stop( .2,hsl(0,0%,60%) ),color-stop( .8,hsl(0,0%,60%) ),color-stop( .82,hsl(0,0%,40%) ),color-stop( .84,hsl(0,0%,45%) ),color-stop( 1,hsl(0,0%,35%) ) );
        -webkit-box-shadow: inset hsla(0,0%,100%,.15) 0 1px 0,#4b4b4b 0 2px 0,#464646 0 4px 0,#414141 0 6px 0,rgba(0,0,0,.5) 0 8px 5px;
    }
    
    input, select {
        outline: none;
    }
    
    input[type="text"] {
        background: linear-gradient(#FFFFFFFF, #DDDDDDFF);
    }
    
    select {
        background: linear-gradient(#FFFFFFFF, #EEEEEEFF);
        border-radius: 4px;
    }
    
    .dialog .submit {
        background: linear-gradient(#60CC60, #30AA30);
        color: white;
        transition: all .25s;
        -webkit-transition: all .25s;
        -moz-transition: all .25s;
        -o-transition: all .25s
    }
    
    .dialog .submit:hover {
        background: linear-gradient(#80EE80, #50CC50);
        transition: all .25s;
        -webkit-transition: all .25s;
        -moz-transition: all .25s;
        -o-transition: all .25s
    }
    
    .participant-menu .info {
        background: linear-gradient(#00000050, #00000000);
    }
    
    .participant-menu .menu-item {
        background: linear-gradient(#00000000, #00000040);
        border-top: 0px;
    }
    
    .participant-menu .menu-item:hover {
        background: linear-gradient(#00000010, #00000050);
    }

    .participant-menu .menu-item.clicked {
        background: linear-gradient(#00000020, #00000060);
    }
    
    .cursor {
        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAeCAYAAADHJYVoAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAAGISURBVEhL7ZW9agJBFIVPQkT2AVZjobAvkdo2TdKLVWzsrKxsLbfYUlCsfIFUaa19AEU7u7RiIfhH9txcZSKzq7smRUI+uNydneE7w7Ds4Ndyox3lcvk+bA+fI2E0HA7f9TkVt9oJxa9GPWpgakz5Kf2wrgqIk5OrAqzyfp/OI6kDrPL9fo9Op6MjIVVA5LG4rosgCHQkJA6wyjebDTKZDPL5PHzf17dCogCrfLvdYrfbIZvNIpfLod1u64xwcYBVvl6vRc4QBhQKBbRaLZ0VLgqwyik2iwHFYhHNZlNXCGcDIo/lcDTmETGg0WjoKiE2IPbMT8txHJRKJdTrdV0pRAZY5fxaKLOFMMDzPNRqNV0tWANi5azFYoHxeIzJZCKdNZ/PZV2lUpGuMMD8q+JO+xco5a6XyyVmsxm63a7OJCNy59zxdDpNLSZW+Wq1EnGv19M3wktYz2dqFNYR8yZ6ChsvCVSrVQwGAz4eoPgt6c1k3fl3iIlVbpBaTOLkV4nJj97+//wpgA+P796RpeWTzAAAAABJRU5ErkJggg==');
    }

    ::-webkit-scrollbar {
      width: 8px;
    }

    ::-webkit-scrollbar-track {
      background: linear-gradient(#555, #333);
      border-radius: 5px;
    }

    ::-webkit-scrollbar-thumb {
      background: linear-gradient(#777, #666);
      border-radius: 5px;
    }
}