Clubtone Gray by frozencoast

/* ==UserStyle==
@name           Clubtone Gray
@namespace      USO Archive
@author         Dirtydream
@description    `Gray Theme for clubtone.net (clubtone.do.am) music portal v0.18`
@version        20210822.10.31
@license        CC0-1.0
@preprocessor   uso
==/UserStyle== */
@-moz-document domain("clubtone.net"),
    url-prefix("http://clubtone.do.am") {

    @font-face {
        font-family: 'FontAwesome';
        src: url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0');
        src: url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
        font-weight: normal;
        font-style: normal
    }

    /* common style */
    html {
        min-height: 100%;
    }

    body {
        background: radial-gradient(#f5f5f5, #c3c5ca);
    }

    a {
        text-decoration: none;
        color: #1d72bd;
    }

    a:hover {
        text-decoration: none;
        color: #28384a;
    }

    h1 {
        margin-bottom: 20px;
    }


    /* layout */
    div.page {
        padding-top: 45px;
        min-height: 500px;
    }

    div.content {
        border-radius: 0;
        border-top: 1px solid #fff;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
        display: flex;
    }

    div#lastnews > h3:first-child {
        min-height: 20px;
        margin-bottom: 20px;
    }

    div#lastnews > div.selector {
        text-align: center;
    }

    div#top-link {
        cursor: pointer;
        display: none;
        position: fixed;
        left: 0;
        bottom: 0;
        padding: 0 0 15px 5px;
        z-index: 10000;
    }

    div#top-link a {
        width: 100px;
        background: rgba(0, 0, 0, 0);
        color: rgba(0, 0, 0, 0);
    }

    div#top-link a:before {
        position: absolute;
        bottom: 10%;
        right: 50%;
        margin-right: -30px;
        display: block;
        border-bottom: 30px solid #7a7b82;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        content: '';
    }

    div#top-link a:after {
        position: absolute;
        bottom: 10%;
        right: 50%;
        margin-right: -30px;
        margin-bottom: -25px;
        display: block;
        color: #7a7b82;
        content: 'Назад';
        width: 60px;
        text-align: center;
        font-size: 13px;
    }

    div#top-link:hover {
        background: #354b5d33;
    }

    div#com-sort {
        margin-left: 660px;
    }
    /* top menu */
    div#menu {
        border-radius: 0;
        border: none;
        background: linear-gradient(to top, #83868c, #8c9098);
        border-bottom: 1px solid #666;
        position: fixed;
        top: 0;
        left: 50%;
        margin-left: -670px;
        width: 1340px;
        z-index: 100;
    }

    div#menu > ul.nav > li {
        background-image: none;
    }

    div#menu > ul.nav a:link,
    div#menu > ul.nav a:visited {
        color: #fff;
        font-weight: 300;
    }

    div#menu a#home {
        background: none;
    }

    div#menu li ul {
        width: 216px;
        position: absolute;
        z-index: -1 !important;
        background: linear-gradient(to top, #515358 96%, #3e3e40 100%);
        top: -500px;
        opacity: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    #menu li:hover ul {
        top: 44px;
        opacity: 1;
        transition: none;
    }

    div#menu ul {
        transition: top .2s ease-out 0.2s, opacity .2s ease-out 0.2s;
    }

    div#menu li div#menu ul li,
    div#menu ul li a {
        transition: none;
    }

    div#menu li ul li:last-child:hover {
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }
    /* hide banners */
    div#menu + div#info,
    div#cycler,
    div.advert,
    div[id^=advert],
    div#need_enable_adblock {
        display: none !important;
    }
    /* top 10 */
    #top10t span.this,
    #top10t span:hover {
        background: #737a80;
        color: #fff;
    }

    #top10 ol li {
        position: relative;
        display: list-item;
        font: normal 9pt/13pt Arial, sans-serif;
        height: 27pt;
        overflow: hidden;
        border-bottom: 1px dashed #dedede;
        vertical-align: middle;
        padding: 2px 0 0 45px;
        color: #57a1c7;
    }

    #top10 ol:hover li:before {
        background: #737a80;
        transition: none;
    }

    #top10 ol li:hover {
        background: #dedede;
        color: #202020;
        transition: none;
        border-radius: 0;
        position: relative
    }

    #top10 ol li:hover:before {
        background: #fff;
        color: #737a80;
        transition: none;
    }

    #top10 ol li:before {
        font: normal 13pt/13pt 'Cuprum', Arial, sans-serif;
        position: absolute;
        left: 5px;
        background: #737a80;
        font-weight: 900;
        border-radius: 1px;
        text-align: center;
        width: 28px;
        height: 22px;
        top: 4px;
        padding: 6px 0 0 0;
        color: #fff;
    }
    /* music list */
    ul.mlist li {
        padding-bottom: 2px;
    }
    /* music page */
    h3 + div#wrap input#search[type="text"],
    h3 + div#wrap input#search_submit[type="submit"] {
        top: -10px;
    }

    h1 + div#wrap input#search[type="text"],
    h1 + div#wrap input#search_submit[type="submit"] {
        top: -20px;
    }

    div#forbidden {
        background: #737a80;
    }

    a.catSortLink {
        font-size: 12px;
        padding: 5px 10px;
    }

    div#conter > div,
    div#allEntries > div {
        height: auto
    }

    div#conter > div li,
    div#allEntries > div li {
        height: auto;
        border: none;
    }

    div#conter > div > li > div,
    div#allEntries > div > li > div {
        margin: 0 50px 0 110px;
        min-height: 45px;
    }

    li.pplay {
        background: linear-gradient(to top, #dedede, #ffffff);
        color: #444;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        position: relative !important;
        padding: 10px 10px 10px 48px !important;
        margin: 0 0 0 -48px !important;
        box-shadow: 5px 5px 20px #00000066;
        border-bottom: 1px solid #b7b7b7 !important;
        width: calc(100%+48px);
    }

    li.pplay:before {
        display: block;
        content: '';
        width: 0;
        height: 0;
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-right: 20px solid #888;
        position: absolute;
        bottom: -20px;
        left: 0px;
        z-index: -1;
    }

    li.pplay .tn a {
        color: #444 !important;
    }

    .playlist .pt-link {
        top: 50%;
        width: 50px;
        height: 50px;
        text-indent: -9999px;
        position: absolute;
        margin-left: 0px;
        margin-top: -25px;
        background-size: 100px;
        background-position: 0 -6px;
        opacity: .2;
        transition: opacity 100ms ease-out;
    }

    .pt-link.zi {
        display: inline-block;
        text-indent: 0px;
        position: relative;
        width: auto;
        height: auto;
        margin-left: 0;
    }

    .pt-link.pt-playing {
        background-position: -50px -6px;
    }

    div#conter span.tc img,
    div#allEntries span.tc img {
        width: 50px;
        height: 50px;
    }

    div#conter div.tn,
    div#allEntries div.tn {
        font-size: 18px;
        margin: 0;
        float: none;
        white-space: nowrap;
    }

    div#conter > div > li > div.tn,
    div#allEntries > div > li > div.tn {
        font-size: 18px;
        margin: 0 0 0 60px;
        float: none;
        white-space: nowrap;
        min-height: 35px;
    }

    div#conter div.rd,
    div#allEntries div.rd {
        float: left;
        margin: 0;
    }

    div#conter span.tc,
    div#allEntries span.tc {
        margin: 0;
    }

    div#conter > div > li:after,
    div#allEntries > div > li:after {
        content: 'i';
        font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace;
        display: block;
        font-size: 18px;
        height: 24px;
        width: 24px;
        color: #fff;
        background: #444;
        border-radius: 50%;
        line-height: 24px;
        text-align: center;
        font-weight: bold;
        position: absolute;
        right: 20px;
        top: 50%;
        margin-top: -12px;
        pointer-events: none;
        z-index: 13;
    }


    div#conter > div > li > span.tc,
    div#allEntries > div > li > span.tc {
        top: 8px;
        left: 50px;
    }

    div#conter > div > li.pplay > span.tc,
    div#allEntries > div > li.pplay > span.tc {
        left: 98px;
    }

    div#conter span.tc img,
    div#allEntries span.tc img {
        width: 50px;
        height: 50px;
    }

    div#conter div.ts,
    div#allEntries div.ts {
        float: left;
        font-weight: 400;
        color: #b3551c;
        margin-le...