Experiments with RetroAchievemnts site looks
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
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;
}