Skip to content

retroachievements.org beautyfier by 4aiman

Details

Author4aiman

LicenseNo License

Categoryretroachievements.org

Created

Updated

Size8.6 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Experiments with RetroAchievemnts site looks

Notes

Userstyle doesn't have notes.

Source code

/* ==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;
}

Reviews

No reviews yet.