Feature User-Defined Stylesheet

[beldur]

Right now Mafia has a stylesheet it uses in the relay browser, it's relay/basics.1.css. If a user overwrites the basics.1.css with their own stylesheet, they can apply their own styles to the relay browser.

I'm requesting that users can designate their own stylesheet stored in the relay folder to use in place of basics.1.css with a preference like customStylesheet. Also maybe placing a file selector (a la the selectors in the Automation section of Mafia preferences) in Look & Feel > Relay Browser.

My intended use case is a stylesheet for a KoL "dark mode", I attached a little example whipped up by replacing basics.1.css.

 

[ckb]

The beauty of css is that is is cascading! No need to replace basics.1.css, we just need to write in an addition (like custom.1.css or something). That way a user can add whatever they want and it will supersede any css in basics.
(FWIW we did this for ChIT long ago so we could allow users to add a custom css without needing to change the default)

 

[MCroft]

so, a per-user property that holds a filename for a CSS file (must be file Extension CSS, must be in relay) and if that property is set, then add a line to include that CSS. With some checks to make sure that it's not a filename that will cause problems and would we check the CSS for css code injection or other concerns?

I mean we're letting them put in scripts; CSS injection seems like too much work, but it's still a thing we should avoid.

 

[beldur]

If CSS injection is a thing Mafia would want to protect against, it might already be worth pursuing. A bad actor could just include a basics.1.css in their github repo and it would overwrite the mafia default when checked out.

 

[ckb]

Would this need to be a per-user property?
If you just add a feature that includes a customMafiaRelay.css, then a user can add whatever they want to that, or not. No property needed, no need for a filename lookup.

 

[Ryo_Sangnoir]

Is there a reason this benefits from being a Mafia feature instead of, say, inviting potential users to install something like Stylus and a custom stylesheet?

If we are making it a Mafia feature, I'd probably rather do something like designating `relay/css` to be a special folder for scripts, and anything inside that folder gets applied to every page. I expect people may want to run multiple stylesheets, and there's no point locking that out of our design.

I don't think CSS injection is a concern, as we already (and will continue to) allow script writers to replace a relay page wholesale, which allows them to do much worse things.

 

[MCroft]

If CSS injection is a thing Mafia would want to protect against, it might already be worth pursuing. A bad actor could just include a basics.1.css in their github repo and it would overwrite the mafia default when checked out.

recent OWASP training at work tells me it is, but I agree with @Ryo_Sangnoir (and myself above) that scripting already allows this.

WSTG - v4.1 | OWASP Foundation

WSTG - v4.1 on the main website for The OWASP Foundation. OWASP is a nonprofit foundation that works to improve the security of software.

owasp.org

 

[infopowerbroker]

I've been thinking about this as well the past few weeks, and how scripts could use dark mode using

@media (prefers-color-scheme: dark) {

but that would likely need a 'base layer' of dark mode available in basic.1.css, (to which scripts could add on to).

I have no idea what the big picture problems would be with implementing this, but it is a "nice to have", if possible.

 

[beldur]

I know this is an old thread but I was just thinking about this again.

If we are making it a Mafia feature, I'd probably rather do something like designating `relay/css` to be a special folder for scripts, and anything inside that folder gets applied to every page. I expect people may want to run multiple stylesheets, and there's no point locking that out of our design.

If this is the approach to go with, and it seems like it's the most sensible approach, how would the files be ordered when mafia applies them to a page? CSS loads sequentially with identical rules being overwritten by the newest occurrence of a rule, so the order of style sheets does matter. If customStyle1.css has a rule for <h1> and loads first then customStyle2.css has another rule for <h1>, customStyle2.css's rule will take effect.

I guess my question is: "What is the best method that mafia could use to order the stylesheets that a user could also manipulate to ensure they're loaded in the desired order?"

 

[MCroft]

I know this is an old thread but I was just thinking about this again.

If this is the approach to go with, and it seems like it's the most sensible approach, how would the files be ordered when mafia applies them to a page? CSS loads sequentially with identical rules being overwritten by the newest occurrence of a rule, so the order of style sheets does matter. If customStyle1.css has a rule for <h1> and loads first then customStyle2.css has another rule for <h1>, customStyle2.css's rule will take effect.

I guess my question is: "What is the best method that mafia could use to order the stylesheets that a user could also manipulate to ensure they're loaded in the desired order?"

Two options of the post-midnight top-of-my-head
1: A pref that includes a loading order.
2: a single set stylesheet and have the user add @import rules in whatever order floats their boat.