Steam UI CSS Tweaks v0.5

/* New versions at https://github.com/Jonius7/SteamUI-OldGlory */

List of Steam UI CSS Tweaks v0.5

Each piece of CSS contains the modified lines, and may contain other lines also not modified.
Keep all other lines in the CSS file that are not in these tweaks unless otherwise stated.

== Changelog ==
v0.5 Added in new tweaks to Apppages, padding and headers
v0.4 initial version


/* Games dropdown width increased */
.gamelistdropdown_DropDown_EDl_m {
    width:195px !important;
}


/* Search bar padding especially bottom, reduced */
.gamelistsearchbar_Container_20QAC {
  width: 100%;
  display: flex;
  flex-grow: 0;
  user-select: none;
  color: white;
  font-size: 12px;
  outline: none;
  position: relative;
  padding: 3px;
  padding-top: 0px; }

/* fix search bar sometimes flexing down a few pixels */
.gamelistsearchbar_Container_20QAC .gamelistsearchbar_SearchInput_12vo5 {
      height: 11.5px;}

/* Your Collections header and side padding */
.allcollections_ScrollContainer_u1xD3 {
  padding: 10px;
}

/* App Page main header - down to 70% the height */
.sharedappdetailsheader_TopCapsule_NZMJ6{
  width:60%;
  height:14.4vw!important;
  z-index:-1000;
  background-color:#141414;
  background-size:cover;
  overflow hidden;
  user-select:none;}
  .sharedappdetailsheader_TopCapsule_NZMJ6.sharedappdetailsheader_NoArt_1amMH{
    height: 24vw;}

/* App Page main header - moving the image so it is anchored from the top */
.sharedappdetailsheader_ImgSrc_HNbe3 {
  width: calc(204% + 128px);
  height: 190%;
}

  /*Remove Appdetail margins */
  .appdetailssection_AppDetailsSection_2r4TK {
  font-family: "Motiva Sans", Arial, Helvetica, Sans-serif;
  box-sizing: border-box;
  color: white;
  margin-bottom: 6px; }

.appdetailssection_AppDetailsSectionContainer_31ptF {
  box-sizing: border-box;
  margin: 8px;

    button.DialogButton.appdetailsbutton_AppDetailsButton_3Cdin.appdetailsbutton_BottomRight_3nJyY {
    text-align: right;
    margin-top: -4px;
    padding: 2px 8px; }

.appdetailsfriendssection_Subsection_39bm0 {
  display: flex;
  flex-direction: column;
  margin-bottom: 6px;
}

/* increase text opacity of Last Played, Play Time */
.appdetailsplaysection_PlayBarLabel_34lrt {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}

  .appdetailsplaysection_Playtime_1aKeg .appdetailsplaysection_PlaytimeIcon_1GZdo svg polyline, .appdetailsplaysection_Playtime_1aKeg .appdetailsplaysection_PlaytimeIcon_1GZdo svg path {
    stroke: rgba(255, 255, 255, 0.5); }
  .appdetailsplaysection_Playtime_1aKeg .appdetailsplaysection_PlaytimeIcon_1GZdo svg circle {
    stroke: rgba(255, 255, 255, 0.5);
    fill: rgba(255, 255, 255, 0.5);
    stroke-width: 12px; }

.appdetailsplaysection_PlayBarDetailLabel_2TYVG,
.appdetailsplaysection_LastPlayed_3pS8k .appdetailsplaysection_LastPlayedInfo_1nfJN {
  color: rgba(255, 255, 255, 0.5); }

.appactivityday_AppActivityDay_S2Fu9 {
  margin-bottom: 0px;
}

.appactivityday_Event_UVeN0 {
  position: relative;
  font-size: 13px;
  /* gap between each event */
  margin-top: 0px; }

.appactivityday_ActivityAchievementUnlocked_yJLy7 {
  padding: 6px;
  display: flex;
  display: grid;
  flex-direction: row;
  flex-wrap: wrap;
  grid-template-columns: repeat(auto-fill, [col-start] minmax(140px, 48%) [col-end]) !important;
  gap: 8px 8px; }

.appactivityday_PartnerEventLargeImage_Title_3fsjz {
  font-size: 16px;
  font-weight: 300;
  color: #ccc; }

.appactivityday_PartnerEventMediumImage_Contents_2gv3E {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  padding: 10px; }

.appactivityday_PartnerEventMediumImage_Title_1gljE {
  font-size: 16px;
  font-weight: 300;
  color: #ccc; }

.appdetailsachievementssection_Featured_1j_gj .appdetailsachievementssection_TextSection_1s_9c .appdetailsachievementssection_Name_39Y01 {
      font-size: 12px;}
    .appdetailsachievementssection_Featured_1j_gj .appdetailsachievementssection_TextSection_1s_9c .appdetailsachievementssection_Desc_2gLHb {

      font-size: 11px;}

.appdetailscommunityfeed_CommunityContentContainer_A6G1l {
  font-size: 16px;
  flex-direction:column;
  color: #616970;
  display:flex;
  /*margin-left: -163%;*/
}

 .appdetailsactivitysection_ActivityFeedContainer_3yTl3 {
  color: white;
  margin-bottom: 22px;
  width: 100%;
  float: left;  }

  .appdetailsdlcsection_DLCSection_2ycfN .appdetailsdlcsection_DLC_15tTA {
    display: grid;
    grid-template-columns: repeat(3, minmax(32.3%, max-content));
  }

.appdetailsdlcsection_StoreHover_M1EYV {
  box-shadow: 0 10px 32px 0px #000000ab;
}

/* Tweak nav bar to be bigger and more opaque*/
.appdetailsprimarylinkssection_LinksSection_3-V8v .appdetailsprimarylinkssection_Links_DgVQa {
    height: 35px !important;
}

  .appdetailsprimarylinkssection_LinksSection_3-V8v .appdetailsprimarylinkssection_LinksSectionBody_25f0f {
    padding: 0px 10px 3px 10px !important;

.appdetailsprimarylinkssection_LinkInner_7k4qm {
  position: absolute;
  padding: 4px 20px 4px 0px !important; }

  .appdetailsprimarylinkssection_LinkInner_7k4qm .appdetailsprimarylinkssection_Text_2sNDj {
    align-self: center;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    white-space: nowrap;
    font-size:15px;}

.boxcarousel_BoxCarousel_3fiHs {
  height: 192.5px !important;
  position: relative; }

  .appdetailsoverview_Container_27RcN .appdetailsoverview_ColumnContainer_OhSdL {
    box-sizing: border-box;
    width: 100%;
    padding: 8px;

    .appdetailsoverview_Container_27RcN .appdetailsoverview_Spotlights_11kuV.appdetailsoverview_SpotlightLeftColumn_3wbnd {
      /* the width below is to replicate the column layout already built with floats, that needs to remain as community content
            floats around the right column to eventually cover the entire page.
            - The right column is 33% width with 42px of left margin
            - The 10px of left padding is to align the left of child elements with left column contents
            */
      display: inline-block;
      width: calc( 63.7% - 42px);
    }

  .appdetailsoverview_Container_27RcN .appdetailsoverview_LeftColumn_1sZgB {
    width: 38%;
    box-sizing: border-box;
    flex: none;
    flex-direction:column;
    display:flex;
    float: right;}

  .appdetailsoverview_Container_27RcN .appdetailsoverview_RightColumn_2aor4 {
    width: 61%;
    margin-left: 2px;
    flex: none;
    display: flex;
    flex-direction: column;
    float:left;
     }
/* New sections */
    div.appdetailsoverview_LeftColumn_1sZgB:nth-child(2) {
        display:flex;
        width:5%;
    }

    #root > div > div.library_MainPanel_3BFcm.MediumRightPanel > div.library_AppDetailsTransitionGroup_2Dd4T > div > div.smartscrollcontainer_Container_3VQUe.appdetails_Container_2iE-7 > div.smartscrollcontainer_Body_3lDcz.appdetails_ScrollContainer_2l416.appdetails_Glassy_3Fmxx > div > div.appdetailsoverview_Container_27RcN.appdetailsoverview_Glassy_2OOzY > div.appdetailsoverview_ColumnContainer_OhSdL > div.appdetailsoverview_LeftColumn_1sZgB > div:nth-child(1) {
        width:100%;
        display:flex;
    }
/* end new sections */

/* added a darker gradient to the top of the apppage below the Game Image */
.appdetailsoverview_Glassy_2OOzY .appdetailsoverview_Backdrop_1Qa-A {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  background: linear-gradient(0deg, rgba(40,41,49,0) 0%, rgba(51,51,51,0.2) 35%, rgba(51,51,51,0.5) 100%); }

  .appportrait_HoversEnabled_54PuC .appportrait_LibraryItemBox_WYgDg:hover .appportrait_UninstalledIcon_8YrRm {
    opacity: .9;


/* Gamelist entry - font size */
.gamelistentry_Container_2-O4Z {
  font-size: 16px;
}
  .gamelistentry_Container_2-O4Z.gamelistentry_HoverOverlay_3cMVy {
    height:100%;
  }

/* Gamelist entry - icon size */
.gamelistentry_Container_2-O4Z .gamelistentry_GameIcon_ga1hy {
    height: 22px;
    width: 22px;
}

/* Fix hover text to the bottom. I unfortunately couldn't keep it dynamic without affecting ALL other hover overlays across the client */
.gamelistentry_FriendStatusHover_2iiN7 {
  background-color: #464141;
  padding: 4px;
  box-shadow: 0 0 12px black;
  position:fixed;
  bottom: 2% !important;
  height:28px;
  }

/* remove border */
.gamelistsectionheader_Container_2sYIg {
  box-sizing: border-box;
  color: #707379;
  border: 0px solid rgba(0, 0, 0, 0);
}

.gamelistsectionheader_SectionHeaderContent_3cV3O {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-width: 0;
  margin-top: 3px;
  padding: 0px 9px 5px 9px;
}



/* category name - font size and height*/
.gamelistsectionheader_SectionName_2mZ8L {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  height: 15px;
}


/* category count - font size and height*/
.gamelistsectionheader_SectionCount_29ute {
  font-size: 13px;

}

/* Make game list height constant so search bar doesn't "flex" down */
.gamelist_Container_1ijTa {
  height:90.3%;
}

/*start new CSS sections */
/* Zoom out both the gamelist container and the hover text for long game names */
.gamelist_Container_1ijTa, .gamelistentry_Container_2-O4Z.gamelistentry_HoverOverlay_3cMVy {
  zoom:75%;
  position:relative;
}
/* Fix hover text to the bottom. I unfortunately couldn't keep it dynamic without affecting ALL other hover overlays across the client */
.gamelistentry_Container_2-O4Z.gamelistentry_HoverOverlay_3cMVy {
    position:fixed;
    bottom: 0% !important;
    height:24px;
}
/*end new CSS sections */

/* Make nosearchresults height constant so search bar doesn't "flex" down */
.gamelist_NoSearchResultsContainer_1fbRp {
  display: flex;
  flex-direction: column;
  margin: 2px;
  font-size: 13px;
  flex: 1;
  height:89.8%;
  text-align: center; }

/*Gamelist dropdown and buttons width reduced to 50%, align with home bar*/
.gamelistdropdown_Bar_1ZS_x{
  width:50%;
  flex:1 1 auto;
  box-sizing: border-box;
  padding:4px 3px 0px;
  outline:none;
  display:flex;
  height:36px;
  min-width:0;
  position:relative;}

/* remove height: 100% */
.gamelistbar_Container_3x1Hk {
  background-image:linear-gradient(to bottom, #2d333c 0%, #24282f 20%);
  flex:1;
  display:flex;
  min-width:0;
  flex-direction:row;
  flex-wrap:wrap;
  user-select:none;
  outline:none;}

/*Home bar width reduced to 20%, align with Gamelist dropdown and buttons*/
.gamelistbar_GameListHomeAndSearch_2TKEa {
  padding: 4px 3px 0px 6px;
  box-shadow: 0 0 0px rgba(0, 0, 0, 0.8);
  position: relative;
  display: flex;
  height: 36px;
  flex:1 1 auto;
  width:20%;}

  .LibraryDisplaySizeSmall .libraryhome_UpdatesContainer_17uEB {
    height: 270px; }

.libraryhomeshowcases_ShowcaseOuter_2tC_c {
    height:0;
}