Custom CSS app details setting on 2.3.1 not working about flame HOT 8 CLOSED

Hey, I would recommend not relying on the auto generated names, but rather use some CSS maneuvering to base your selector on something that is unlikely to change. Consider this:

a[href="/applications"] + div a span {
	display: none !important;
}

It selects the spans you want to avoid based on the link to applications (selecting the next sibling after the link and then selecting its children). The layout of the site is less likely to change between versions, while the class names seem to change every version.

from flame.

Same here, I used to have

.AppCard_AppCardDetails__tbAhY span {
  font-size: 0px !important;
}

To hide the URLs below the Apps.

Edit: Solved.

It's new

.AppCard_AppCardDetails__HgNoY span {
  font-size: 0px !important;
}

from flame.

This is a poor implementation. If the Custom CSS option is provided, the class names should NOT be auto-generated. I just spent an hour updating all the class names in my custom css and now I'm looking for alternatives, as this will happen with every release, and it's a waste of my time.

I agree, I think a simple class class name for every major element should solve this. I've opened an issue for this in #435.

from flame.

True, but at least This should save manual changes between versions until its no longer an issue

Yeah, its a horrendous mess compared to the old version I used but as @tborychowski said, I dont have time to change it every update so this will do me for now! Looks like an issue for this has been opened too so hopefully gets on the roadmap

from flame.

This is a poor implementation.
If the Custom CSS option is provided, the class names should NOT be auto-generated.
I just spent an hour updating all the class names in my custom css and now I'm looking for alternatives, as this will happen with every release, and it's a waste of my time.

from flame.

Hi All, thanks for your input - with this advice and some back and forth with every favourite devs AI advisor, Ive managed to find a working CSS fix that should remain generic in all releases and not be affected by the auto generated class name. I'm by no means at all a CSS guy, apart from this I never use it, but this is what I managed to end up with

/* For links with href="/applications" */
a[href="/applications"] {
height: 50%;
padding: 5px !important;
margin-bottom: 0 !important;
border-radius: 0.5rem !important;
}

/* For spans inside divs next to links with href="/applications" */
a[href="/applications"] + div a span {
display: none !important;
}

/* For links with href="/settings" */
a[href="/settings"] {
border-radius: 0.5rem !important;
background-color: #DFD9D6 !important;
}

/* For all elements with class name starting with "AppCard_AppCard__" /
[class^="AppCard_AppCard__"] {
/ Your custom styles for all app cards /
height: 50px; / You can adjust the height as needed /
/ Add any other styles you want to apply to all app cards */
}

/* For elements with class starting with "AppCard_AppCard__" on hover */
[class^="AppCard_AppCard__"]:hover {
background-color: rgba(0, 0, 0, 0.3) !important;
}

/* For elements with class starting with "AppCard_AppCard__" on hover, with backdrop-filter support */
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
[class^="AppCard_AppCard__"]:hover {
backdrop-filter: blur(15px);
background-color: rgba(0, 0, 0, 0.3) !important;
}

From my testing, this seems to apply to the relevant app card sections regardless of the auto generated class name - of course this list isn't exhaustive, its just linked to the sections in my CSS I had changed that didn't work following the update. Open to any and all ideas of a better implementation but for the meantime this seems to work.

New to GitHub issues... should I close this off?

from flame.

Haha, I know I can hack something like that, but it's a DIY solution to a problem that should not exist 😉
And it’s a bit messy.
Anyway, thanks for your input.

from flame.

Duplicate of #435 so closing this

from flame.