Custom css not working anymore #283

Chrispycode · 2024-11-10T10:58:56Z

I tried v3.0 and now my custom css won't work anymore , I tried uninstalling and reinstalling but it does not work anymore.

I used this command

./install.py -e windowcontrols/left --custom-css

And that's my custom css

:root {
	/* The main accent color and the matching text value */
	--adw-accent-bg-rgb: 0, 0, 0;
	--adw-accent-fg-rgb: 255, 255, 255;
	--adw-accent-rgb: 150, 0, 0;

	/* destructive-action buttons */
	--adw-destructive-bg-rgb: 0, 0, 0;
	--adw-destructive-fg-rgb: 255, 255, 255;
	--adw-destructive-rgb: 255, 123, 99;

	/* Levelbars, entries, labels and infobars. These don't need text colors */
	--adw-success-bg-rgb: 38, 162, 105;
	--adw-success-fg-rgb: 255, 255, 255;
	--adw-success-rgb: 143, 240, 164;

	--adw-warning-bg-rgb: 205, 147, 9;
	--adw-warning-fg-rgb: 0, 0, 0;
	--adw-warning-fg-a: 0.8;
	--adw-warning-rgb: 248, 228, 92;

	--adw-error-bg-rgb: 0, 0, 0;
	--adw-error-fg-rgb: 255, 255, 255;
	--adw-error-rgb: 255, 123, 99;

	/* Window */
	--adw-window-bg-rgb: 0, 0, 0;
	--adw-window-fg-rgb: 255, 255, 255;

	/* Views - e.g. text view or tree view */
	--adw-view-bg-rgb: 0, 0, 0;
	--adw-view-fg-rgb: 255, 255, 255;

	/* Header bar, search bar, tab bar */
	--adw-headerbar-bg-rgb: 0, 0, 0;
	--adw-headerbar-fg-rgb: 255, 255, 255;
	--adw-headerbar-border-rgb: 255, 255, 255;
	--adw-headerbar-backdrop-rgb: var(--adw-window-bg-rgb);
	--adw-headerbar-shade-rgb: 0, 0, 0;
	--adw-headerbar-shade-a: 0.36;
	--adw-headerbar-darker-shade-rgb: 0, 0, 0;
	--adw-headerbar-darker-shade-a: 0.9;

	/* Split pane views */
	--adw-sidebar-bg-rgb: 0, 0, 0;
	--adw-sidebar-fg-rgb: 255, 255, 255;
	--adw-sidebar-backdrop-rgb: 42, 42, 42;
	--adw-sidebar-shade-rgb: 0, 0, 0;
	--adw-sidebar-shade-a: 0.36;

	--adw-secondary-sidebar-bg-rgb: 0, 0, 0;
	--adw-secondary-sidebar-fg-rgb: 255, 255, 255;
	--adw-secondary-sidebar-backdrop-rgb: 39, 39, 39;
	--adw-secondary-sidebar-shade-rgb: 0, 0, 0;
	--adw-secondary-sidebar-shade-a: 0.36;

	/* Cards, boxed lists */
	--adw-card-bg-rgb: 255, 255, 255;
	--adw-card-bg-a: 0.08;
	--adw-card-fg-rgb: 255, 255, 255;
	--adw-card-shade-rgb: 0, 0, 0;
	--adw-card-shade-a: 0.36;

	/* Dialogs */
	--adw-dialog-bg-rgb: 0, 0, 0;
	--adw-dialog-fg-rgb: 255, 255, 255;

	/* Popovers */
	--adw-popover-bg-rgb: 0, 0, 0;
	--adw-popover-fg-rgb: 255, 255, 255;
	--adw-popover-shade-rgb: 0, 0, 0;
	--adw-popover-shade-a: 0.36;

	/* Thumbnails */
	--adw-thumbnail-bg-rgb: 0, 0, 0;
	--adw-thumbnail-fg-rgb: 255, 255, 255;

	/* Miscellaneous */
	--adw-shade-rgb: 0, 0, 0;
	--adw-shade-a: 0.36;
}

tkashkin · 2024-11-10T11:08:27Z

Window controls extras are now gone, use --windowcontrols-layout close: if you only want close button at the left side, or don't use the option at all and installer should read button layout from your system settings.

As for custom css:

Any errors in the installer output?
Did it copy your custom.css to ~/.steam/steam/steamui/adwaita/custom/custom.css correctly?
What's in ~/.steam/steam/steamui/libraryroot.custom.css?

Chrispycode · 2024-11-10T11:30:24Z

Hi thanks for the fast reply, everything looks alright I think but the custom.css wont' work.

$ ./install.py --custom-css
→ Creating stage directory /tmp/tmpxrirw0kp/adwaita
→ Applying window controls theme adwaita...
→ Applying window controls layout close:appmenu...
→ Applying custom css...
→ Patching Steam Client Library Files...
✦ Directory /home/chrispycode/.var/app/com.valvesoftware.Steam/.steam/steam does not exist
✓ Done!

$ cat .steam/steam/steamui/adwaita/custom/custom.css
/* ------------------ */
/* --- Custom CSS --- */
/* ------------------ */

:root {
        /* The main accent color and the matching text value */
        --adw-accent-bg-rgb: 0, 0, 0;
        --adw-accent-fg-rgb: 255, 255, 255;
        --adw-accent-rgb: 150, 0, 0;

        /* destructive-action buttons */
        --adw-destructive-bg-rgb: 0, 0, 0;
        --adw-destructive-fg-rgb: 255, 255, 255;
        --adw-destructive-rgb: 255, 123, 99;

        /* Levelbars, entries, labels and infobars. These don't need text colors */
        --adw-success-bg-rgb: 38, 162, 105;
        --adw-success-fg-rgb: 255, 255, 255;
        --adw-success-rgb: 143, 240, 164;

        --adw-warning-bg-rgb: 205, 147, 9;
        --adw-warning-fg-rgb: 0, 0, 0;
        --adw-warning-fg-a: 0.8;
        --adw-warning-rgb: 248, 228, 92;

        --adw-error-bg-rgb: 0, 0, 0;
        --adw-error-fg-rgb: 255, 255, 255;
        --adw-error-rgb: 255, 123, 99;

        /* Window */
        --adw-window-bg-rgb: 0, 0, 0;
        --adw-window-fg-rgb: 255, 255, 255;

        /* Views - e.g. text view or tree view */
        --adw-view-bg-rgb: 0, 0, 0;
        --adw-view-fg-rgb: 255, 255, 255;

        /* Header bar, search bar, tab bar */
        --adw-headerbar-bg-rgb: 0, 0, 0;
        --adw-headerbar-fg-rgb: 255, 255, 255;
        --adw-headerbar-border-rgb: 255, 255, 255;
        --adw-headerbar-backdrop-rgb: var(--adw-window-bg-rgb);
        --adw-headerbar-shade-rgb: 0, 0, 0;
        --adw-headerbar-shade-a: 0.36;
        --adw-headerbar-darker-shade-rgb: 0, 0, 0;
        --adw-headerbar-darker-shade-a: 0.9;

        /* Split pane views */
        --adw-sidebar-bg-rgb: 0, 0, 0;
        --adw-sidebar-fg-rgb: 255, 255, 255;
        --adw-sidebar-backdrop-rgb: 42, 42, 42;
        --adw-sidebar-shade-rgb: 0, 0, 0;
        --adw-sidebar-shade-a: 0.36;

        --adw-secondary-sidebar-bg-rgb: 0, 0, 0;
        --adw-secondary-sidebar-fg-rgb: 255, 255, 255;
        --adw-secondary-sidebar-backdrop-rgb: 39, 39, 39;
        --adw-secondary-sidebar-shade-rgb: 0, 0, 0;
        --adw-secondary-sidebar-shade-a: 0.36;

        /* Cards, boxed lists */
        --adw-card-bg-rgb: 255, 255, 255;
        --adw-card-bg-a: 0.08;
        --adw-card-fg-rgb: 255, 255, 255;
        --adw-card-shade-rgb: 0, 0, 0;
        --adw-card-shade-a: 0.36;

        /* Dialogs */
        --adw-dialog-bg-rgb: 0, 0, 0;
        --adw-dialog-fg-rgb: 255, 255, 255;

        /* Popovers */
        --adw-popover-bg-rgb: 0, 0, 0;
        --adw-popover-fg-rgb: 255, 255, 255;
        --adw-popover-shade-rgb: 0, 0, 0;
        --adw-popover-shade-a: 0.36;

        /* Thumbnails */
        --adw-thumbnail-bg-rgb: 0, 0, 0;
        --adw-thumbnail-fg-rgb: 255, 255, 255;

        /* Miscellaneous */
        --adw-shade-rgb: 0, 0, 0;
        --adw-shade-a: 0.36;
}

$ cat .steam/steam/steamui/libraryroot.custom.css
/* Main Files */
@import url("https://steamloopback.host/adwaita/css/_root/colors.css");
@import url("https://steamloopback.host/adwaita/css/_root/icons.css");
@import url("https://steamloopback.host/adwaita/css/_root/localization.css");
@import url("https://steamloopback.host/adwaita/css/_root/opacity.css");
@import url("https://steamloopback.host/adwaita/css/_root/text.css");
@import url("https://steamloopback.host/adwaita/css/_root/variables.css");
@import url("https://steamloopback.host/adwaita/css/widgets/avatars.css");
@import url("https://steamloopback.host/adwaita/css/widgets/buttons.css");
@import url("https://steamloopback.host/adwaita/css/widgets/cards.css");
@import url("https://steamloopback.host/adwaita/css/widgets/checkboxes.css");
@import url("https://steamloopback.host/adwaita/css/widgets/dialogs.css");
@import url("https://steamloopback.host/adwaita/css/widgets/entries.css");
@import url("https://steamloopback.host/adwaita/css/widgets/lists.css");
@import url("https://steamloopback.host/adwaita/css/widgets/popups.css");
@import url("https://steamloopback.host/adwaita/css/widgets/scrollbars.css");
@import url("https://steamloopback.host/adwaita/css/widgets/windowcontrols.css");
@import url("https://steamloopback.host/adwaita/css/main/headerbar/buttons.css");
@import url("https://steamloopback.host/adwaita/css/main/headerbar/headerbar.css");
@import url("https://steamloopback.host/adwaita/css/main/headerbar/menu.css");
@import url("https://steamloopback.host/adwaita/css/main/headerbar/navigation.css");
@import url("https://steamloopback.host/adwaita/css/main/library/details/header.css");
@import url("https://steamloopback.host/adwaita/css/main/library/details/activity.css");
@import url("https://steamloopback.host/adwaita/css/main/library/details/details.css");
@import url("https://steamloopback.host/adwaita/css/main/library/details/event-dialog.css");
@import url("https://steamloopback.host/adwaita/css/main/library/home/game-card.css");
@import url("https://steamloopback.host/adwaita/css/main/library/home/home.css");
@import url("https://steamloopback.host/adwaita/css/main/library/home/news.css");
@import url("https://steamloopback.host/adwaita/css/main/library/sidebar/gamelist.css");
@import url("https://steamloopback.host/adwaita/css/main/library/sidebar/sidebar.css");
@import url("https://steamloopback.host/adwaita/css/main/library/collections/collections.css");
@import url("https://steamloopback.host/adwaita/css/main/library/downloads/downloads.css");
@import url("https://steamloopback.host/adwaita/css/main/library/library.css");
@import url("https://steamloopback.host/adwaita/css/chat/chat.css");
@import url("https://steamloopback.host/adwaita/css/chat/sidebar.css");
@import url("https://steamloopback.host/adwaita/css/chat/messages.css");
@import url("https://steamloopback.host/adwaita/css/dialogs/pagedsettings/dialog.css");
@import url("https://steamloopback.host/adwaita/css/dialogs/pagedsettings/rows.css");
@import url("https://steamloopback.host/adwaita/css/dialogs/login.css");
@import url("https://steamloopback.host/adwaita/css/dialogs/settings.css");
@import url("https://steamloopback.host/adwaita/css/dialogs/appproperties.css");

/* Window controls theme */
@import url("https://steamloopback.host/adwaita/windowcontrols/adwaita.css");

/* Window controls layout - close:appmenu */
:root
{
        --adw-windowcontrols-left-has-buttons: 1;
        --adw-windowcontrols-left-buttons: 1;
        --adw-windowcontrols-right-has-buttons: 0;
        --adw-windowcontrols-right-buttons: 0;
        --adw-windowcontrols-close-margin-left: calc(1 * (var(--adw-windowcontrols-buttons-margin-outer) + var(--adw-windowcontrols-button-width) + var(--adw-windowcontrols-buttons-margin-inner)));
        --adw-windowcontrols-close-margin-right: calc(0 * (var(--adw-windowcontrols-buttons-margin-outer) + var(--adw-windowcontrols-button-width) + var(--adw-windowcontrols-buttons-margin-inner)));
}

body.DesktopUI,
html.client_chat_frame
{
        .title-bar-actions .title-area-icon
        {
                visibility: hidden !important;

                &.closeButton
                {
                        visibility: visible !important;
                        left: calc(var(--adw-windowcontrols-buttons-margin-outer) + 0 * var(--adw-windowcontrols-button-width) + 0 * var(--adw-windowcontrols-button-gap)) !important;

                        html.client_chat_frame div.chat_main.singlewindow:not(:has(div.friendsListContainer.collapsed)) div.multiChatDialog &
                        {
                                visibility: hidden !important;
                        }
                }

        }
}
/* Custom CSS */
@import url("https://steamloopback.host/adwaita/custom/custom.css");

When I put my css in a new theme it works

tkashkin · 2024-11-10T11:45:36Z

Right, I forgot CSS imports must be defined before other styles.

tkashkin closed this as completed in dbf0160 Nov 10, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Custom css not working anymore #283

Custom css not working anymore #283

Chrispycode commented Nov 10, 2024

tkashkin commented Nov 10, 2024

Chrispycode commented Nov 10, 2024

tkashkin commented Nov 10, 2024

Custom css not working anymore #283

Custom css not working anymore #283

Comments

Chrispycode commented Nov 10, 2024

tkashkin commented Nov 10, 2024

Chrispycode commented Nov 10, 2024

tkashkin commented Nov 10, 2024