Steam library custom css

README.md

How to use

Navigate to your steam folder (~/.local/share/Steam on linux), create (if doesn't exist yet) a folder named skins, create a folder in it with any name you want (try not to use spaces). That will be the main folder for your steam skin customizations.

To add the css, create a folder named resource and inside that, create a file named webkit.css with the contents of the below file.

Adding to existing skins

If you have existing skin (I for example like metro. If I share screenshots, that's what the main UI is (this style applies only to library view, not the top bar/tabs)), you can simply add the webkit.css file. In case it already exists, just edit and add the contents after that (in case of metro, the file exists but it's already part of this, so you can just overwrite that).

Changes

The library style is inspired by this behance page. I tried to improve the page to have similar view, although I didn't want to get rid of the search bar and item list on left, so I just restyled that. Overall, these styles are just minor improvements of the library that I liked.

License

Code is licensed under GPLv3. I would prefer if when sharing you linked to this gist, or an archived version of it (like internet archive, so that history isn't lost). If you make an edited version of it, please post a link to your own gist (or similar) in the comments.

TLDR for license: You're free to do anything with it, but when you distribute the code you must make source code available for free (or for nothing more than it costs you to do so. Free on internet, or when via physical media must not be more than the price of that physical media). Because of how skins works, you most likely won't need that as source code is what's used in skins, but if you for example obfuscate or minify the code, you must also make the unobfuscated version available.

webkit.css

::-webkit-scrollbar,
::-webkit-scrollbar-corner {
	width: 16px;
	height: 16px;
	background: #1a1a1a;
}

::-webkit-scrollbar-button:vertical,
::-webkit-scrollbar-track:vertical,
::-webkit-scrollbar-thumb:vertical {
	background-repeat: no-repeat;
	background-position: center;
}

::-webkit-scrollbar-button:horizontal,
::-webkit-scrollbar-track:horizontal,
::-webkit-scrollbar-thumb:horizontal {
	background-repeat: no-repeat;
	background-position: center;
}

::-webkit-scrollbar-thumb {
	background-color: rgba(255,255,255,.05);
}

::-webkit-scrollbar-thumb:hover {
	background-color: rgba(255,255,255,.10);
}

::-webkit-scrollbar-track:vertical, ::-webkit-scrollbar-track:horizontal {
	background-color: #1a1a1a;
}

/*
::-webkit-scrollbar-thumb {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAD9JREFUeNpi/P//PwMhwAQibly/9h8fzUi0SefPnfuPjybepKNHjvxHpQ+j0MSbtGvXzv/I9G44vYN4kwACDAA7RESWY5qxTAAAAABJRU5ErkJggg==);
}
*/

/* Up */
::-webkit-scrollbar-button:vertical:decrement {
	height: 22px;
	background-position: center;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALAgMAAADUwp+1AAAACVBMVEUAAAD///////9zeKVjAAAAA3RSTlMAQIDntwj7AAAAJUlEQVQI12OAgxQGBsaVDAxsbg4MkowTGFKAcAKDBIMDAwtMBQBYIAP5KnftSQAAAABJRU5ErkJggg==);
}

::-webkit-scrollbar-button:vertical:decrement:hover {
	height: 22px;
	background-position: center;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALAgMAAADUwp+1AAAACVBMVEUAAAD///////9zeKVjAAAAA3RSTlMAX7+ciytYAAAAJUlEQVQI12OAgxQGBsaVDAxsbg4MkowTGFKAcAKDBIMDAwtMBQBYIAP5KnftSQAAAABJRU5ErkJggg==);
}

/* Down */
::-webkit-scrollbar-button:vertical:increment {
	height: 22px;
	background-position: center;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALAgMAAADUwp+1AAAACVBMVEUAAAD///////9zeKVjAAAAA3RSTlMAQIDntwj7AAAAJElEQVQI12OAAQcGFoYJDBIMKUAoyTiBgc3NgYFxJVAiBa4EAFbgA/lztmmEAAAAAElFTkSuQmCC);
}

::-webkit-scrollbar-button:vertical:increment:hover {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALAgMAAADUwp+1AAAACVBMVEUAAAD///////9zeKVjAAAAA3RSTlMAX7+ciytYAAAAJElEQVQI12OAAQcGFoYJDBIMKUAoyTiBgc3NgYFxJVAiBa4EAFbgA/lztmmEAAAAAElFTkSuQmCC);
}

/* Left */
::-webkit-scrollbar-button:horizontal:decrement {
	width: 22px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALAgMAAADUwp+1AAAACVBMVEUAAAD///////9zeKVjAAAAA3RSTlMAQIDntwj7AAAAJElEQVQI12NgYHNgYJBkYGBIYWBgnADhcjGAaBAfLA6UBwsAAEcYAz8mgHA8AAAAAElFTkSuQmCC);
}

::-webkit-scrollbar-button:horizontal:decrement:hover {
	width: 22px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALAgMAAADUwp+1AAAACVBMVEUAAAD///////9zeKVjAAAAA3RSTlMAX7+ciytYAAAAJElEQVQI12NgYHNgYJBkYGBIYWBgnADhcjGAaBAfLA6UBwsAAEcYAz8mgHA8AAAAAElFTkSuQmCC);
}

/* Right */
::-webkit-scrollbar-button:horizontal:increment {
	width: 22px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALAgMAAADUwp+1AAAACVBMVEUAAAD///////9zeKVjAAAAA3RSTlMAQIDntwj7AAAAI0lEQVQI12Ngc2BgYJzAwMCQAsSSQAwSYGoA0RB+CkgezAUAUN4Dt/sHRo4AAAAASUVORK5CYII=);
}
	
::-webkit-scrollbar-button:horizontal:increment:hover {
	width: 22px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALAgMAAADUwp+1AAAACVBMVEUAAAD///////9zeKVjAAAAA3RSTlMAX7+ciytYAAAAI0lEQVQI12Ngc2BgYJzAwMCQAsSSQAwSYGoA0RB+CkgezAUAUN4Dt/sHRo4AAAAASUVORK5CYII=);
}

/* Fix Activity Popups width */
.flat_page .modal_frame{
	width: 97% !important;
	left: 0px !important;

	margin: 0px 40px 0px 10px !important;
}
/* Fix Activity Popups not being scrollable */
#modalContentFrameContainer{
	height: 100% !important;
	overflow: scroll !important;
}
/* At least try  RIP iframes*/
#modalContentFrameContainer .modalContent_iFrame{
	height: 900% !important;
}


/* Custom library CSS */
:root {
	--yellow-gradient-right: linear-gradient(to right, #B3FF0A 0%, #699800 100%);
	--blue-gradient-right: linear-gradient(to right, #0FBCFA 0%, #0055FA 100%);
	--steam-blue-gradient-right: linear-gradient(to right, #47bfff 0%, #1a44c2 100%);
}

/* App Portrait hover edits */
.Panel.Focusable > div > .Panel.Focusable:hover, div > .appportrait_LibraryItemBox_WYgDg.appportrait_InRecentGames_biTV-, div > .appportrait_HoversEnabled_54PuC .appportrait_LibraryItemBox_WYgDg:hover:not(.appportrait_Landscape_3VOR2) {
	filter: initial;
	transform: initial;
	box-shadow: 0 4px 13px 0 rgba(63, 63, 63, 0.5);
}
div>.appportrait_LibraryItemBoxShine_MyNb5 {
	background: transparent;
}
/* app portrait rounded corners */
.Panel.Focusable > div > .Panel.Focusable, div > .appportrait_LibraryItemBox_WYgDg {
	border-radius: 7px;
}
/* app portrait download button */
div>.appportrait_LibraryItemBox_WYgDg .appportrait_UninstalledIcon_8YrRm {
	opacity: 0.08;
}
div>.appportrait_HoversEnabled_54PuC .appportrait_LibraryItemBox_WYgDg:hover .appportrait_UninstalledIcon_8YrRm {
	opacity: 0.4;
}
/* app portrait disk size */
div>.appportrait_LibraryItemBox_WYgDg:hover~.appportrait_LibraryItemBoxSubscript_1LJqx {
    transform: translateX(-2.5%) scale(1.05);
}

/* dividers */
div > .libraryhomeshowcases_ShowcaseHeader_23Snl .libraryhomeshowcases_Rule_1PhK8, div > .pageablecontainer_HeaderPageControls_2ce8e .pageablecontainer_Rule_3kmsu {
	background: rgba(0, 173, 255, 0.65);
	box-shadow: 0 0 5px 1px rgba(0, 173, 255, 0.58);
}

/* background */
.libraryhome_LibraryHome_3Sb2o, .LibraryDisplaySizeMedium .libraryhome_UpdatesContainer_17uEB {
    background-color: #17171F;
}

/* What's new posts */
.libraryhomenewupdates_PartnerEventRowCapsule_Container_B-vCd .libraryhomenewupdates_PartnerEventRowCapsule_MainImageContainer_SPz0i, .libraryhomenewupdates_EventSummaryContainer_3Rb_j {
	border-radius: 7px;
}

/* What's new posts hover */
div>.libraryhomenewupdates_PartnerEventRowCapsule_Container_B-vCd.libraryhomenewupdates_HoversEnabled_278jF:hover .libraryhomenewupdates_EventSummaryContainer_3Rb_j {
    background-color: rgba(49, 49, 49, 0.7);
}
div>.libraryhomenewupdates_PartnerEventRowCapsule_Container_B-vCd.libraryhomenewupdates_HoversEnabled_278jF:hover .libraryhomenewupdates_PartnerEventRowCapsule_MainImage_1-W_Z {
    transform: scale(0.98);
    filter: blur(5px) brightness(0.5);
    z-index: 0;
}
/* 'event options', small icon on top right of posts */
div>.libraryhomenewupdates_EventOptions_2-p7s>div {
    background-color: #ffffff00;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAICAYAAAA1BOUGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjFFOUI0REY5NERFMTFFNjk0QTY4RTEzNkRDMTY4Q0IiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NjFFOUI0RTA5NERFMTFFNjk0QTY4RTEzNkRDMTY4Q0IiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MUU5QjRERDk0REUxMUU2OTRBNjhFMTM2REMxNjhDQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2MUU5QjRERTk0REUxMUU2OTRBNjhFMTM2REMxNjhDQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmW8LaMAAABtSURBVHjaYvj///9eIA4CYgYkDOLvBTEMgPgpEKdCJVKhfAOYSmUgvgPEO6A0iM/AxMDAMA2IuYDYCohfQWkusDhQRRgQvwJiG6gpNlB+GMxYFyB+AcRtUBrEZ0B2oTEQX4PSYDFGsAocACDAAKhrkftNoGmaAAAAAElFTkSuQmCC);
	box-shadow: 0 0 transparent;
	transition: background-color .3s, box-shadow .3s;
}
div>.libraryhomenewupdates_EventOptions_2-p7s:hover>div {
    box-shadow: 0 0 3px #000;
}

/* hover popout */
.appportraithover_CapsuleBackgroundContainer_Yts2c, .appportraithover_AppPortraitHover_2sGn0 {
	border-radius: 7px;
}
.appportraithover_AppPortraitHover_2sGn0 {
    background-color: #000000b3;
    backdrop-filter: blur(10px);
}

/* search list, category header */
div>.gamelistsectionheader_Container_2sYIg {
    background: transparent;
    background-color: rgba(0, 173, 255, 0.66);
	border-radius: 7px 7px 0 0;
}
/* collapsed category header */
div>.gamelistsectionheader_SingleLine_1u3dM {
	border-radius: 7px;
}
/* selected category header */
div>.gamelistsectionheader_Container_2sYIg.gamelistsectionheader_Selected_sXMOs {
    background: #00c4ff66;
}
div>.gamelistsectionheader_Container_2sYIg:hover {
    background: #00c4ff7a;
}
/* div>.gamelistsectionheader_Container_2sYIg:not(:first-child) {
	margin-top: 10px;
} */
.ReactVirtualized__Grid__innerScrollContainer > .Panel.Focusable > div:not(.gamelistsectionheader_Container_2sYIg) {
    background-color: #292f3b;
}

/** LIBRARY DETAILS PAGE */


button.DialogButton {
	border-radius: 7px !important;	
}

/* links */
.appdetailssection_AppDetailsSectionContainer_31ptF.appdetailssection_RightColumnSection_3KfxI {
	border-radius: 7px;
}

/* Review banner (pls review) */
.appdetailsspotlight_ReviewContainer_3LE-6 {
	border-radius: 7px;
    background-color: transparent;
    background-image: radial-gradient(100% 80% at 64% 95%, rgba(108, 119, 134, 0.1) 40%, rgba(83, 104, 104, 0.1) 100%);
}
.writereview_RatingContainer_2SAb6 {
	background-color: transparent;
}
button.writereview_ReviewThumbButton_1kCN0 {
    border-radius: 7px;
    background: rgba(103, 193, 245, 0.13);
}

/* install/play button */
div>.appactionbutton_PlayButton_3ydig {
	border-radius: 7px;
}
/* stream button (multiple options) */
div>.appactionbutton_ShowingStreaming_1hhB2 .appactionbutton_PlayButton_3ydig {
	border-radius: 7px 0 0 7px;
}
div>.appactionbutton_StreamingSelector_2q-gZ {
	border-radius: 0 7px 7px 0;
}

/* options and icon on right */
div>.appdetailsplaysection_RightControls_1EAxK {
	justify-content: center;
}
/* quick stats, next to play button */
div>.appdetailsplaysection_GameStat_1kiZK {
    margin: 5px 12.5px 5px 12.5px;
}
div>.appdetailsplaysection_StatusAndStats_1YbtI .appdetailsplaysection_GameStatsSection_1mDAV {
    background-image: radial-gradient(100% 80% at 64% 95%, rgba(108, 119, 134, 0.1) 40%, rgba(83, 104, 104, 0.1) 100%);
    border-radius: 7px;
    justify-content: space-evenly;
    width: 100%;
}

/* links */
a>.appdetailsprimarylinkssection_LinkInner_7k4qm .appdetailsprimarylinkssection_Link_1b6LY {
	border-radius: 7px;
}

/* details (achievements, trading cards), header */
.appdetailssection_Highlight_38t1m {
	border-radius: 7px;
}
/* achievements, bar */
div>.appdetailsachievementssection_AchievementProgressContainer_3ns91 .appdetailsachievementssection_AchievementProgress_3Rm36 {
    background-image: linear-gradient(to right, #47bfff 0%, #1a44c2 300px);
}
/* achievements icons */
div>.appdetailsachievementssection_Icon_zcasg {
	border-radius: 7px;
}
div>.appdetailsachievementssection_AdditionalItem_2aVnD {
	border-radius: 7px;
}

/* activity */
.appactivityday_Event_UVeN0 {
    background: linear-gradient(to right, rgba(46, 50, 58, 0.8) 0%, rgba(36, 40, 47, 0.8) 95%);
    border-radius: 7px;
    padding: 5px;
}
/* changing layout for events a bit */
div>.appactivityday_Event_UVeN0 .appactivityday_EventBody_NEMXh {
	box-shadow: none;
	background: initial;
	margin-left: 0;
}
div>.appactivityday_Event_UVeN0 .appactivityday_EventHeadline_QCKBq {
	padding: 4px;
}
/* rating bar always visible */
div>.comment_thread_RatingBar_1yWgP {
	opacity: 1;
}
/* rating buttons hover */
.comment_thread_RatingBar_1yWgP .comment_thread_LikeButton_161IK.comment_thread_CanClick_3Mds9:hover, .comment_thread_RatingBar_1yWgP .comment_thread_CommentButton_3i62H.comment_thread_CanClick_3Mds9:hover, .comment_thread_RatingBar_1yWgP .comment_thread_Reactions_35yrb.comment_thread_CanClick_3Mds9:hover  {
	border-radius: 7px;
}
/* load more activity button */
div>.appdetailsactivitysection_ActivityFeedContainer_3yTl3 .appdetailsactivitysection_FetchMoreContainer_39Zur {
	border-radius: 7px;
}

/* discounts */
div>.appactivityday_PartnerEvent_1AYE1 {
	box-shadow: none;
}
div>.appactivityday_PartnerEvent_1AYE1 {
	background: transparent;
}
div>.appactivityday_PartnerEventMediumImage_Image_VytJz {
	border-radius: 7px;
}

/* add activity */
div>.posttextentry_PostTextEntry_3x31A .posttextentry_PostTextEntryArea_1JlC2 {
	border-radius: 7px;
}
/* emoji icon */
div>.posttextentry_PostTextEntry_3x31A .posttextentry_Controls_37e7D .posttextentry_EmoticonButton_bACIu {
	border-radius: 7px 0 0 7px;
}
/* post button */
div>.posttextentry_PostTextEntry_3x31A .posttextentry_Controls_37e7D .posttextentry_PostButton_2JSyA {
	border-radius: 0 7px 7px 0;
    margin-left: 4px;
}

/* community content header */
div>.appdetailscommunityfeed_HeaderStyles_2lNdD {
	background: linear-gradient(to bottom, rgba(67, 133, 247, 0.95) 0%, rgba(85, 98, 121, 0) 2px);
}
/* hover info */
div>.tooltip_ToolTipCustom_3XGRk {
	border-radius: 7px;
}

/* DLC images */
.libraryassetimage_PortraitImage_3Ehhd .libraryassetimage_Image_24_Au, .libraryassetimage_LandscapeImage_ZsU8n .libraryassetimage_Image_24_Au {
	border-radius: 7px;
}
div > .appdetailsdlcsection_DLCArt_2bF7X .appdetailsdlcsection_Art_3SQn1 {
    border-radius: 7px;
}
div > .appdetailsdlcsection_DLCArt_2bF7X .appdetailsdlcsection_Gloss_HAvWs {
	border-radius: 7px;
}

/* dlc info pop up */
.appdetailshover_AppDetailsHover_38FqI {
	border-radius: 7px;
}
.appdetailshover_AppDetailsHover_38FqI .appdetailshover_Background_rYBZB {
	border-radius: 7px;
}
.appdetailsdlcsection_Hover_1V52f .appdetailsdlcsection_Purchased_22tlo {
	border-radius: 0 0 7px 7px;
}