retroachievements.org beautyfier by 4aiman

/* ==UserStyle==
@name           retroachievements.org  beautyfier
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Makes RA site beautiful!
@author         4aiman
==/UserStyle== */
@import url("https://fonts.googleapis.com/css2?family=Acme");
@-moz-document domain("retroachievements.org") {
    /* Insert code here... */
    .km4_preview_div_ra {
        border-color: #cccccc;
        border-style: double;
        border-radius: 5pt;
        border-width: 5pt;
        background-color: #222;
    }

    body {
        font-size: 12pt;
        font-family: Acme;
        background: #1a1a1a;
        color: #32bde6;
    }

    #usercompletedgamescomponent tr:nth-child(even),
    .smalltable.xsmall tr:nth-child(even),
    tr:nth-of-type(even),
    .component > div {
        background: #33aa3320!important;
    }

    #menuholder,
    #innermenu,
    #menuholder li,
    .divider {
        font-size: 14pt;
        background: #1a1a1a;
    }


    .date.smalltext {
        white-space: nowrap;
        font-size: 11pt;

        bottom: 0pt;
        left: 62pt;
    }

    .date.smalltext br {
        display: none;
        width: 9px;
        height: 18px;
        content: " ";
    }

    .date.smalltext br:before {
        content: ", ";
    }

    .achievementdata .bb_inline {
        font-size: 14pt;
        margin-top: 5pt;
    }

    .achievementdata {
        vertical-align: middle!important;
        font-size: 12pt;
        line-height: 12pt;
    }

    .progressbar.allusers {
        margin-top: 15pt;
    }

    li div,
    .ui-menu-item {
        background: #1a1a1a!important;
    }

    #ui-active-menuitem {
        background: linear-gradient(0deg, #252424 33%, #5c5c59 66%, #3c3c3b);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent!important;
        font-size: 12pt;
    }

    span {
        background: transparent!important;
    }

    code {
        font-size: 12pt;
        font-family: Acme;
        color: #e579ec;
        background: transparent;
    }

    b {
        background: linear-gradient(0deg, #32bde6 33%, #26cfb0 66%, #32bde6);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .usermotto {
        font-size: 12pt;
        font-family: Acme;
        color: #79b6ec;
        background: transparent;
        border: none;
        padding: 0;
        margin: 0;
    }
    .usermotto:before {
        content: " >> ";
        color: #26cfb0;
    }

    code:before {
        content: "~ "
    }
    code:after {
        content: " ~"
    }

    .friendstab,
    .tabcontentfriendstab {
        border: 2px solid #1a1a1a!important;
    }

    #leftcontainer,
    .login {
        background-color: #2a2a2a!important;
    }

    h1,
    h2,
    h3,
    h5,
    h6 {
        font-weight: bold;
        text-shadow: 1pt 1pt #00000060;
        color: #26cfb0;
    }

    h4,
    .newstitle.shadowoutline {
        font-weight: bold;
        text-shadow: 1pt 1pt #00000060;
        color: #26cfb0;
    }

    p {
        background: transparent!important;
    }

    .mottocontainer {
        font-size: 14pt;
    }

    .userpagegames:before {
        border-top: 10px solid black;
    }

    .userpagegames {
        margin-top: 20pt;
    }

    .userpage.recentlyplayed {
        margin-top: 40pt;
    }

    .progressbar {
        --x: 0%;
        --y: 0%;
        background-color: #533000;
        border-radius: 4pt;
        border: 1px solid #50200080;
        box-shadow: 0 0 3pt gold;
    }

    .completion,
    .completionhardcore {
        border-radius: 4pt;
    }

    .siteawards td {
        padding: 0px;
        background: transparent!important;
    }

    .siteawards,
    .trophycontainer,
    tbody,
    td,
    tr {
        width: auto;
        background: transparent!important;
    }

    #usercompletedgamescomponent {
        scrollbar-width: thin!important;
        scrollbar-color: #333 #111!important;
    }

    
    .badgeimg,
    .badgeimglarge
    {
        --x: 0%;
        --y: 0%;

        margin: -3pt;
        cursor: pointer;
        border-radius: 4pt!important;

        border: 4px solid transparent;
        background: linear-gradient(#000, #000) padding-box, radial-gradient(farthest-corner at var(--x) var(--y), #00c3ff, #003150) border-box!important;
        width: 56px;
        height: 56px;
        scale: 0.8;
        object-fit: scale-down;
    }

    #WzTtDiV {
        border: 4px solid #5c5c59!important;
        border-radius: 4pt!important;
        
    }
    
    #WzTtDiV img {
        --x: 0%;
        --y: 0%;
        border: 4px solid transparent;
        background: linear-gradient(#000, #000) padding-box, radial-gradient(farthest-corner at var(--x) var(--y), #00c3ff, #003150) border-box!important;                
        object-fit: scale-down;
    }
    
    .badgeimglarge[src*="lock"],
    .siteawards {
        --x: 0%;
        --y: 0%;

        margin: -3pt;
        cursor: pointer;
        border-radius: 4pt!important;

        border: 4px solid #5c5c59!important;
        filter: sepia(0.5);
        width: 56px;
        height: 56px;
        scale: 0.8;
        object-fit: scale-down;
    }
    
    .siteawards {
        margin: -5pt!important;
    }


    .bb_inline[onmouseover*="HARDCORE"] img, 
    .goldimage,
    .goldimagebig
     {
        --x: 0%;
        --y: 0%;

        margin: -3pt;
        cursor: pointer;
        border-radius: 4pt!important;

        border: 4px solid transparent!important;
        background: linear-gradient(#000, #000) padding-box, radial-gradient(farthest-corner at var(--x) var(--y), gold, #502000) border-box!important;
        width: 56px;
        height: 56px;
        scale: 0.8;
        object-fit: scale-down;
    }
    
    img[src*="lock"] {
        margin: -4px;
        padding:0;
    }



    .achievemententryicon .badgeimg {
        margin-top: 2pt!important;
    }

    .usersummary {
        color: #32bde6;
    }

    .TrueRatio {
        color: #cf7517;
    }

    a {
        background: linear-gradient(0deg, #cf7517 33%, #f3ff85 66%, #ffbe62);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent!important;
        font-size: 12pt;
    }

    a:hover {
        background: linear-gradient(0deg, #178f89 33%, #e4f1fb 66%, #62cfca)!important;
        -webkit-background-clip: text!important;
        -webkit-text-fill-color: transparent!important;
    }

    li:hover {
        background: linear-gradient(0deg, #178f8930 33%, #e4f1fb30 66%, #62cfca30)!important;
        -webkit-text-fill-color: #888!important;
        /* border-radius: 50px!important; */
    }

    .dropdown-header,
    .dropdown-header:hover {
        background: transparent!important;
        -webkit-text-fill-color: #888!important;
    }


    li,
    li div {
        white-space: nowrap;
    }

    #innermenu > ul > li:hover > div > ul > li > a {
        display: inline-block;
        line-height: 20pt;
        font-size: 12pt;
        width: 100%!important;
    }

    .buttoncollection {
        display: inline-block;
        background: transparent!important;
        line-height: 20pt;
        font-size: 12pt;
        width: 100%!important;
    }
    footer,
    .navpath,
    .login {
        font-size: 12pt!important;
    }

    .feed_comment .smalldate,
    .smalldate {
        font-size: 9.5pt!important;
        white-space: nowrap;
    }


    .feed_comment {
        padding-bottom: 5pt;
        border: 1px red!important;
    }

    #logocontainer img {
        display: none;
    }

    img[alt~="logo"] {
        content: url("https://www.dropbox.com/s/7i04pjr64azi6wp/Cool%20Text%20-%20Retro%20Achievements%20357340706199226.png?dl=1");
        width: 60%;
    }

    .siteawards img {
        --x: 0%;
        --y: 0%;
        margin: 2pt;
        width: 36pt;
        height: 36pt;
        cursor: pointer;
        border-radius: 4pt!important;
        border: 2px solid transparent!important;
        background: radial-gradient(farthest-corner at var(--x) var(--y), #f7e067, #ea5e00) border-box!important;
        box-shadow: 0 0 3pt gold;
    }

    img[src*="UserPic"] {
        --x: 0%;
        --y: 0%;
        margin: 2pt;
        cursor: pointer;
        border: 2px solid #111;
        border-radius: 4pt!important;
        background: linear-gradient(160deg, #0048ff 30%, #52b3f5 50%, #0048ff 70%) border-box!important;
        filter: sepia(50%);
    }
}

.newstext {
    line-height: 12pt;
}
.newstext > a {
    color: yellow!important;
    -webkit-text-fill-color: yellow!important;
}