Big Steam Beta update breaking stuff (and no more custom skins)
Velken opened this issue · 8 comments
Velken commented
So, steam rolled out a new massive update to the client's UI
Well, you can no longer have custom skins (RIP og-steam)
I tried using SFP with the new update, stuff clearly needs some fixing
micenest commented
i think this new beta fully converts the client to a CEF wrapper, mostly killing VGUI entirely. this is in theory really positive in a theming scale, as it will allow further customization using the modern CSS/SCSS logic which is very full and ample.
probably questions of time for people to update their themes to this new layout, i guess!
PhantomGamers commented
I put this in the readme but I'll mention it here as well:
With the beta update, the entire client (main client, library, and friends list) can be skinned through libraryroot.custom.css. So the friends list patching option of SFP no longer functions. This means that the Linux and OSX versions of SFP should now allow for friends skinning though!
In a coming update I will release for SFP I'm going to remove the friends skinning stuff and have all skinning take place in steamui/steam.custom.css
This is subject to change, but it's most likely what I'm going to go with.
jboutin commented
With the beta update, the entire client (main client, library, and friends list) can be skinned through libraryroot.custom.css. So the friends list patching option of SFP no longer functions. This means that the Linux and OSX versions of SFP should now allow for friends skinning though!
In a coming update I will release for SFP I'm going to remove the friends skinning stuff and have all skinning take place in
steamui/steam.custom.cssThis is subject to change, but it's most likely what I'm going to go with.
I know this is probably wayyyyy too early in development, but have you looked at how the new client UI handles layouts? It'd be really awesome if we could also update those, as there's only so much you can change via CSS.
Also, any interest to get a Discord community for this project at all? I think that too could be useful :).
Great job on everything though. Excited to see future updates.
PhantomGamers commented
I know this is probably wayyyyy too early in development, but have you looked at how the new client UI handles layouts? It'd be really awesome if we could also update those, as there's only so much you can change via CSS.
The issue with modifying these files is that Steam hash checks them on start so if they are modified in any way this will trigger a Steam update every time. SFP already has a "resource patcher" functionality in place, which would work alongside the auto scanner, however it is still a really hacky approach that I'm not entirely happy with.
Also, any interest to get a Discord community for this project at all? I think that too could be useful :).
Most discussion on Discord happens on the Unofficial Patch for Metro skin discord here: https://discord.gg/UZvkvkh
I probably should have just had an SFP discord from the beginning but it didn't seem like there was enough of a community to justify it, and now with this approach that Valve is taking there's a possibility that some other tool will supersede SFP altogether.
OldGlory could be neat here as it already has patching for the files used in the Steam beta and also supports javascript fixes. The only benefit SFP has now, whereas it previously also supported patching the friends list (which is now just patched by the same files as the library that OldGlory supports), is that it's cross platform and will work on Linux and OSX. Though OldGlory is based on Python so it would be possible for that to be updated to work cross platform too.
PhantomGamers commented
Gonna keep this open until the changes are merged into stable but figured I would say here too that a prerelease version of SFP is available that supports the Steam beta!
GentlePuppet commented
The normal release version still works with the beta for me.
You can skin the main window with css instead of VGUI now.
Put the CSS changes in the library.custom.css and it'll just work.
I'll share my CSS changes, at the bottom of this, for the main window for others to use to quickly change their own stuff if ya'll want it.
Show CSS
/* Global Text Override*/
* {
font-family: "Tahoma" !important;
font-weight: 100 !important;
border-radius: 0px !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
/* Smaller Context Menus */
.DesktopUI .contextmenu_contextMenuItem_pFo3k {
padding: 4px 6px !important
font-size: 12px !important;
}
/* Main Window Recolor */
:root {
--client-background-purple: #1d1629 !important;
--client-background-purple-deep: #181222 !important;
--client-background-purple-brighter: #40315b !important;
--client-background-purple-darker: #34284a !important;
--client-background-purple-hover: #4c3a6b !important;
--client-background-purple-light: #fff !important;
}
@keyframes serverbrowserdialog_ItemFocusAnim-darkerGrey-nocolor_368ke {
from {
background: var(--client-background-purple-brighter) !important
}
to {
background: var(--client-background-purple-darker) !important
}
}
@keyframes serverbrowserdialog_ItemFocusAnim-darkerGrey_3DmRp {
from {
background: var(--client-background-purple-brighter) !important;
color: var(--client-background-purple-light) !important
}
to {
background: var(--client-background-purple-darker) !important
}
}
@keyframes serverbrowserdialog_ItemFocusAnim-darkGrey_-7Fhc {
from {
background: var(--client-background-purple-hover) !important;
color: var(--client-background-purple-light) !important
}
to {
background: var(--client-background-purple-brighter) !important
}
}
@keyframes serverbrowserdialog_ItemFocusAnim-grey_3exin {
from {
background: var(--client-background-purple-light) !important;
}
to {
background: var(--client-background-purple-hover) !important
}
}
@keyframes serverbrowserdialog_ItemFocusAnimBorder-darkGrey_BgQ7H {
from {
border-color: var(--client-background-purple-hover) !important
}
to {
border-color: var(--client-background-purple-brighter) !important
}
}
@keyframes serverbrowserdialog_ItemFocusAnim-green_Quhs0 {
from {
color: var(--client-background-purple-light) !important
}
to {
}
}
.serverbrowserdialog_ServerBrowserDialog_2rxrV .serverbrowserdialog_DialogBody_2SvsK .serverbrowserdialog_TopControlsCtr_2X_Zp button.serverbrowserdialog_SwitchTabButton_1jEPp.serverbrowserdialog_Selected_L3t04 {
background: var(--client-background-purple-hover) !important
}
.serverbrowserdialog_ServerBrowserDialog_2rxrV .serverbrowserdialog_DialogBody_2SvsK .serverbrowserdialog_ServerTabPane_2YSm1 .serverbrowserdialog_ServerList_2_4_n .serverbrowserdialog_SelectColumnsButton_3mCrT {
background: var(--client-background-purple-brighter) !important
}
.serverbrowserdialog_ServerBrowserDialog_2rxrV .serverbrowserdialog_DialogBody_2SvsK .serverbrowserdialog_ServerTabPane_2YSm1 .serverbrowserdialog_ServerList_2_4_n .serverbrowserdialog_SelectColumnsButton_3mCrT:hover {
background: var(--client-background-purple-hover) !important
}
.serverbrowserdialog_ServerBrowserDialog_2rxrV .serverbrowserdialog_DialogBody_2SvsK .serverbrowserdialog_ServerTabPane_2YSm1 .serverbrowserdialog_ServerList_2_4_n .serverbrowserdialog_ColumnResizer_1XAm7 {
background: var(--client-background-purple-brighter) !important;
border-right: 1px solid var(--client-background-purple-hover) !important
}
.serverbrowserdialog_ServerBrowserDialog_2rxrV .serverbrowserdialog_DialogBody_2SvsK .serverbrowserdialog_ServerTabPane_2YSm1 .serverbrowserdialog_ServerList_2_4_n .serverbrowserdialog_ServerListHeaderCtr_2cIK- {
background: var(--client-background-purple-brighter) !important
}
.serverbrowserdialog_ServerBrowserDialog_2rxrV .serverbrowserdialog_DialogBody_2SvsK .serverbrowserdialog_ServerTabPane_2YSm1 .serverbrowserdialog_ServerList_2_4_n .serverbrowserdialog_ServerRow_c8HfP:hover {
background: var(--client-background-purple) !important
}
.serverbrowserdialog_ServerBrowserDialog_2rxrV .serverbrowserdialog_DialogBody_2SvsK .serverbrowserdialog_ServerTabPane_2YSm1 .serverbrowserdialog_ServerList_2_4_n .serverbrowserdialog_SelectedRow_3vedM {
background: linear-gradient(to right, #1aa0ff53, var(--client-background-purple-darker) !important;)
}
.serverbrowserdialog_ServerBrowserDialog_2rxrV .serverbrowserdialog_DialogBody_2SvsK .serverbrowserdialog_ServerTabPane_2YSm1 .serverbrowserdialog_ServerList_2_4_n .serverbrowserdialog_SelectedRow_3vedM:hover {
background: linear-gradient(to right, #1aa0ff7c, var(--client-background-purple-darker) !important;)
}
.serverbrowserdialog_ServerBrowserDialog_2rxrV .serverbrowserdialog_DialogBody_2SvsK .serverbrowserdialog_ServerTabPane_2YSm1 .serverbrowserdialog_BottomControlsRow_341md .serverbrowserdialog_ToggleShowFilterDetailsButton_30Bn7.serverbrowserdialog_Selected_L3t04 {
background: var(--client-background-purple-hover) !important
}
.gameinfodialog_DialogBody_3wJ6F.DesktopUI .DialogDropDown:hover,.DesktopUI .gameinfodialog_DialogBody_3wJ6F .DialogDropDown:hover {
background: var(--client-background-purple-hover) !important
}
.gameinfodialog_PlayersList_3HOjF {
background-color: var(--client-background-purple-deep) !important
}
.screenshotmanagerdialog_Metadata_3GkZs {
color: var(--client-background-purple-hover) !important
}
.screenshotmanagerdialog_FocusedScreenshots_PKkxu {
background-color: var(--client-background-purple-darker) !important
}
.screenshotmanagerdialog_ScreenshotStack_117dz .screenshotmanagerdialog_Top_lpDWQ,.screenshotmanagerdialog_ScreenshotStack_117dz .screenshotmanagerdialog_Mid_1WP4z,.screenshotmanagerdialog_ScreenshotStack_117dz .screenshotmanagerdialog_Bot_1dzAo {
border: 4px solid var(--client-background-purple-darker) !important;
background: radial-gradient(155.42% 100% at 0% 0%, #D9D9D9 0%, var(--client-background-purple-hover) !important, 100%)
}
.screenshotmanagerdialog_ButtonBox_1FPJY.screenshotmanagerdialog_Secondary_2Wyma {
background-color: var(--client-background-purple-brighter) !important
}
.screenshotmanagerdialog_ButtonBox_1FPJY.screenshotmanagerdialog_Secondary_2Wyma:hover {
background-color: var(--client-background-purple-hover) !important
}
.screenshotmanagerdialog_ButtonBox_1FPJY.screenshotmanagerdialog_Secondary_2Wyma:active {
background-color: var(--client-background-purple-light) !important
}
.screenshotmanagerdialog_ButtonBox_1FPJY.screenshotmanagerdialog_Secondary_2Wyma.screenshotmanagerdialog_Disabled_2DImO {
background-color: var(--client-background-purple-brighter) !important
}
.screenshotmanagerdialog_CaptionField_oQafB {
background-color: var(--client-background-purple-deep) !important
}
.screenshotmanagerdialog_CaptionField_oQafB::placeholder {
color: var(--client-background-purple-hover) !important
}
.screenshotmanagerdialog_ExplainerBox_2lrrN {
background-color: var(--client-background-purple-darker) !important
}
.screenshotmanagerdialog_ComboboxSelectorContextMenu_4BQHp {
background-color: var(--client-background-purple-brighter) !important
}
.screenshotmanagerdialog_ComboboxSelector_1aTMG .screenshotmanagerdialog_Option_1IEWV:hover {
background-color: var(--client-background-purple-hover) !important
}
.screenshotmanagerdialog_CloudStorageImpact_XXxRY {
color: var(--client-background-purple-light) !important
}
.screenshotmanagerdialog_Text_1DrNv.screenshotmanagerdialog_Secondary_2Wyma {
color: var(--client-background-purple-light) !important
}
.screenshotmanagerdialog_ProgressContainer_oNDZM .screenshotmanagerdialog_ProgressTrack_37U0j {
background-color: var(--client-background-purple-brighter) !important
}
.screenshotmanagerdialog_Skeleton_2hywx {
background-color: var(--client-background-purple-brighter) !important
}
.screenshotmanagerdialog_ErrorScreenshot_12iyH {
background-color: var(--client-background-purple-brighter) !important
}
.screenshotmanagerdialog_SectionHeading_2lo2i .screenshotmanagerdialog_Line_2My62 {
background-color: var(--client-background-purple-brighter) !important
}
@keyframes playersdialog_ItemFocusAnim-darkerGrey-nocolor_13n2R {
from {
background: var(--client-background-purple-brighter) !important
}
to {
background: var(--client-background-purple-darker) !important
}
}
@keyframes playersdialog_ItemFocusAnim-darkerGrey_1-eMN {
from {
background: var(--client-background-purple-brighter) !important;
color: var(--client-background-purple-light) !important
}
to {
background: var(--client-background-purple-darker) !important
}
}
@keyframes playersdialog_ItemFocusAnim-darkGrey_3Cqv2 {
from {
background: var(--client-background-purple-hover) !important;
color: var(--client-background-purple-light) !important
}
to {
background: var(--client-background-purple-brighter) !important
}
}
@keyframes playersdialog_ItemFocusAnim-grey_3OGCF {
from {
background: var(--client-background-purple-light) !important;
}
to {
background: var(--client-background-purple-hover) !important
}
}
@keyframes playersdialog_ItemFocusAnimBorder-darkGrey_1W4BD {
from {
border-color: var(--client-background-purple-hover) !important
}
to {
border-color: var(--client-background-purple-brighter) !important
}
}
@keyframes playersdialog_ItemFocusAnim-green_3WEcZ {
from {
color: var(--client-background-purple-light) !important
}
to {
}
}
.playersdialog_PlayersList_1pbQV {
border: 1px solid var(--client-background-purple-deep) !important
}
.playersdialog_PlayersListBody_3kjEL {
background: var(--client-background-purple-darker) !important
}
.playersdialog_PlayersListHeaderCtr_20eva {
background: var(--client-background-purple-brighter) !important
}
.playersdialog_PlayersListHeaderRow_2a6rf .playersdialog_ColumnResizer_3ZJ6g {
background: var(--client-background-purple-brighter) !important;
border-right: 1px solid var(--client-background-purple-hover) !important
}
.menu_MenuPopup_3pofG {
padding: 0px 0px !important;
background: var(--client-background-purple-brighter) !important
}
.menu_MenuItem_2jXHP {
background: var(--client-background-purple) !important
}
.menu_MenuItem_2jXHP.menu_Item_2uiDe:hover {
color: #fff !important
}
.menu_MenuItem_2jXHP.menu_Separator_21GPY {
border-bottom: .2px solid var(--client-background-purple-hover) !important
}
.supernav_SuperNavMenu_7AlhC.supernav_Disabled_2cO0H .supernav_MenuButton_19axK {
color: var(--client-background-purple-brighter) !important
}
.supernav_SuperNavMenu_7AlhC.supernav_MenuPopup_Eq8Px {
background: var(--client-background-purple-brighter) !important
}
.supernav_Arrow_25lBL {
color: var(--client-background-purple-hover) !important
}
.supernav_Arrow_25lBL.supernav_Disabled_2cO0H {
color: var(--client-background-purple-brighter) !important
}
.rootmenu_RootMenuButton_2UyOB {
color: var(--client-background-purple-light) !important;
}
.titlebarcontrols_AnnouncementsButton_5wILZ {
color: var(--client-background-purple-light) !important;
}
.titlebarcontrols_AnnouncementsButton_5wILZ:hover {
background-color: var(--client-background-purple-brighter) !important
}
.titlebarcontrols_NotificationHeader_MCa4R .titlebarcontrols_AllNotificationsButton_1oERP {
background-color: var(--client-background-purple-brighter) !important
}
.titlebarcontrols_NotificationHeader_MCa4R .titlebarcontrols_AllNotificationsButton_1oERP:hover {
background-color: var(--client-background-purple-hover) !important
}
@keyframes titlebarcontrols_wasNewIcon_s3z6D {
0% {
}
100% {
color: var(--client-background-purple-light) !important
}
}
.titlebarcontrols_NotificationsButton_RtSv3.titlebarcontrols_WasNew_9YK5I:not(.titlebarcontrols_Disabled_1QQWj):hover,.titlebarcontrols_NotificationsButton_RtSv3.titlebarcontrols_NoNew_3qhGk:not(.titlebarcontrols_Disabled_1QQWj):hover {
background-color: var(--client-background-purple-brighter) !important
}
.titlebarcontrols_NotificationsButton_RtSv3.titlebarcontrols_WasNew_9YK5I .titlebarcontrols_Icon_34bQc,.titlebarcontrols_NotificationsButton_RtSv3.titlebarcontrols_NoNew_3qhGk .titlebarcontrols_Icon_34bQc {
color: var(--client-background-purple-light) !important
}
.titlebarcontrols_NotificationsButton_RtSv3.titlebarcontrols_Disabled_1QQWj {
color: var(--client-background-purple-light) !important
}
.titlebarcontrols_SoundtrackControls_Utdt7 {
color: var(--client-background-purple-light) !important;
}
.titlebarcontrols_SoundtrackControls_Utdt7:hover {
background-color: var(--client-background-purple-brighter) !important
}
.titlebarcontrols_VRToggle_3lRfT {
color: var(--client-background-purple-hover) !important
}
.titlebarcontrols_VRToggle_3lRfT .titlebarcontrols_Icon_34bQc {
}
.titlebarcontrols_VRToggle_3lRfT:hover {
background: var(--client-background-purple-brighter) !important
}
.titlebarcontrols_GamepadUIToggle_3LKQ3 {
color: var(--client-background-purple-hover) !important
}
.titlebarcontrols_GamepadUIToggle_3LKQ3:hover {
background: var(--client-background-purple-brighter) !important
}
.titlebarcontrols_ParentalToggleButton_13vrq:hover {
background-color: var(--client-background-purple-brighter) !important
}
.titlebarcontrols_ParentalToggleButton_13vrq .titlebarcontrols_Icon_34bQc {
color: var(--client-background-purple-light) !important;
}
.titlebarcontrols_BranchBar_1n8t0 {
}
.titlebarcontrols_NotificationMenuItem_3zfQA:hover {
background: var(--client-background-purple-brighter) !important
}
.updatealert_UpdateDownloadProgress_SmsYs .updatealert_Top_2sjmi .updatealert_Left_2bbtI .updatealert_Percentage_P_5TH {
color: var(--client-background-purple-brighter) !important
}
.updatealert_ProgressContainer_2RAT2 .updatealert_Progress_pLUgQ {
background-color: var(--client-background-purple-brighter) !important
}
.bottombar_BottomBar_3vCzS {
background: radial-gradient(155.42% 100% at 0% 0%, var(--client-background-purple-darker) !important,
0 0%, var(--client-background-purple-deep) !important,
100%);
background: var(--client-background-purple) !important
}
.bottombar_DownloadStatusContent_ip-YZ .bottombar_Status_1sCy- {
color: var(--client-background-purple-light) !important;
}
.bottombar_DownloadStatusContent_ip-YZ .bottombar_Queue_3wJnT {
color: var(--client-background-purple-light) !important;
}
.bottombar_DownloadStatusContent_ip-YZ .bottombar_Icon_1KrJ3 {
color: var(--client-background-purple-hover) !important
}
.bottombar_AddGameButton_2foCk .bottombar_Icon_1KrJ3 {
color: var(--client-background-purple-hover) !important
}
.bottombar_AddGameButton_2foCk .bottombar_Text_3OhUx {
color: var(--client-background-purple-light) !important;
}
.bottombar_FriendsButton_1TdaA .bottombar_Icon_1KrJ3 {
color: var(--client-background-purple-hover) !important
}
.bottombar_FriendsButton_1TdaA .bottombar_Text_3OhUx {
color: var(--client-background-purple-light) !important;
}
.desktopbrowser_BrowserTabs_aqvbk .desktopbrowser_BrowserTab_TSlxC {
background-color: var(--client-background-purple-deep) !important;
border: 2px solid var(--client-background-purple-darker) !important
}
.desktopbrowser_BrowserTabs_aqvbk .desktopbrowser_BrowserTab_TSlxC:hover {
background-color: var(--client-background-purple-darker) !important
}
.desktopbrowser_BrowserTabs_aqvbk .desktopbrowser_BrowserTab_TSlxC.desktopbrowser_Active_1W4bb {
background-color: var(--client-background-purple-brighter) !important;
border: 2px solid var(--client-background-purple-brighter) !important
}
.desktopbrowser_URLBar_26Gmf {
background: var(--client-background-purple-deep) !important
}
.desktopbrowser_URLBar_26Gmf .desktopbrowser_StatusIcon_2UTNf {
color: var(--client-background-purple-hover) !important
}
.desktopbrowser_URLBar_26Gmf .desktopbrowser_NavigationButton_1oXr_:hover {
background: var(--client-background-purple-darker) !important
}
.desktopbrowser_URLBar_26Gmf .desktopbrowser_NavigationButton_1oXr_.desktopbrowser_Disabled_1f6yY {
color: var(--client-background-purple-brighter) !important
}
.desktopbrowser_URLBar_26Gmf .desktopbrowser_URLBarText_1d2NZ:hover {
background: var(--client-background-purple-darker) !important
}
.desktopbrowser_URLBar_26Gmf .desktopbrowser_URLBarText_1d2NZ::after {
background: var(--client-background-purple-darker) !important
}
.desktopbrowser_URLBar_26Gmf .desktopbrowser_URLBarText_1d2NZ .desktopbrowser_URL_1W55u {
color: var(--client-background-purple-hover) !important
}
.desktopbrowser_ManageBookmarksList_2q7nb .desktopbrowser_ManageBookmarkField_3Cdh-.desktopbrowser_IsDragging_181cY {
background-color: var(--client-background-purple-brighter) !important
}
.desktopbrowser_ManageBookmarksList_2q7nb .desktopbrowser_ManageBookmarkField_3Cdh-:hover {
background-color: var(--client-background-purple-darker) !important
}
.steamdesktop_TopBar_3Z7VQ {
background: var(--client-background-purple) !important
}
.steamdesktop_LocalContentContainer_RGNMW .steamdesktop_URLBarReplacement_2Cmrn {
background: var(--client-background-purple) !important
}
.steamdesktop_BrowserWrapper_1bGew .steamdesktop_URLBar_UkR3s {
background: var(--client-background-purple-darker) !important;
background: var(--client-background-purple) !important
}
.steamdesktop_BrowserWrapper_1bGew .steamdesktop_URLBar_UkR3s .steamdesktop_StatusIcon_3izqE {
color: var(--client-background-purple-hover) !important
}
.steamdesktop_BrowserWrapper_1bGew .steamdesktop_URLBar_UkR3s .steamdesktop_ReloadButton_3KaB9:hover {
background: var(--client-background-purple-darker) !important
}
.steamdesktop_BrowserWrapper_1bGew .steamdesktop_URLBar_UkR3s .steamdesktop_URLBarText_2m_or:hover {
background: var(--client-background-purple-darker) !important
}
.steamdesktop_BrowserWrapper_1bGew .steamdesktop_URLBar_UkR3s .steamdesktop_URLBarText_2m_or .steamdesktop_URL_MZPxE {
color: var(--client-background-purple-hover) !important
}
.steamdesktop_InitContainer_2YwTw {
background: var(--client-background-purple-deep) !important
}
Hexality commented
has anyone figured out navigation stuff?
PhantomGamers commented
has anyone figured out navigation stuff?
Oh I just realized I closed this without replying but I would join the discord linked above and ask there as there are quite a few people working on skinning stuff there. I'm not sure what you mean by navigation stuff but I'm sure someone there would be able to help you out.