CSS Classes order

[scag1io]

When using hosted service on cusdis.com, there are Svelte-xxx CSS classes which did not exist with Vercel deployment. Since, if there are multiple CSS classes, the last one wins, it would be nice to:

• avoid Svelte-xxx classes or
• use them in first position, so it is possible to customize classes (e.g. "submit-btn") in a separate CSS file.

[djyde]

Hi.

svelte-xxx class name is generated by Svelte compiler. I also set emitCss: false, so no css file would be emitted. The style is appended to head in runtime.

Did you have problem in the style of the widget?

[scag1io]

Yes, I created custom classes (e.g. "submit-btn"), but they are overwritten by the style-xxx. This is the Inspect of the button.

[egoist]

since the class names are already prefixed with cusdis-, I think it's fine to stop using svelte's scoped css, so that the css can be overridden without using !important

[scag1io]

As workaround, all the classes can be included in the #cusdis_thread id, so they will have priority on the svelte-xxx. Example:

#cusdis_thread {
  .cusdis-footer {
    ...
    }
}

Currently it works fine for me, there are issues with the pagination button but someone is working on it :)

[djyde]

As workaround, all the classes can be included in the #cusdis_thread id, so they will have priority on the svelte-xxx. Example:

#cusdis_thread {
  .cusdis-footer {
    ...
    }
}

Currently it works fine for me, there are issues with the pagination button but someone is working on it :)

I just updated the widget, check it out.

[scag1io]

I just updated the widget, check it out.

Uhm, I get the same issue: the svelte-xxx ovveride the cusdis- classes. I think that's because they are specified in last position.

By the way, if I include them in the #cusdis_thread id, the custom classes in the CSS are correctly visible even if the order is the same:

[djyde]

yea i mean the pagination button

scag1io @.***>於 2021年4月26日 週一，下午6:42寫道：

I just updated the widget, check it out.

Uhm, I get the same issue: the svelte-xxx ovveride the cusdis- classes. I think that's because they are specified in last position https://stackoverflow.com/questions/7637482/how-do-browsers-resolve-conflicting-classes . [image: Screenshot 2021-04-26 at 12 29 58] https://user-images.githubusercontent.com/76182936/116070062-6da38f80-a68c-11eb-96b7-451ae1d25638.png

By the way, if I include in the #cusdis_thread id, the custom classes in the CSS are correctly visible even if the order is the same: [image: Screenshot 2021-04-26 at 12 40 28] https://user-images.githubusercontent.com/76182936/116070287-b78c7580-a68c-11eb-9bf8-91ba9663417b.png

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/djyde/cusdis/issues/52#issuecomment-826727486, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAG7HGI2MWDRJ7OADM4UZG3TKU7RTANCNFSM43RDUQDQ .

[scag1io]

yea i mean the pagination button

That's fine, but it appears also if there is only one comment. I personally would make it visible only if there is a second page. Also, strange bug: I added 10-12 comments and a MOD reply automatically got deleted. But this is another issue.

[candideu]

As workaround, all the classes can be included in the #cusdis_thread id, so they will have priority on the svelte-xxx. Example:

#cusdis_thread {
  .cusdis-footer {
    ...
    }
}

Currently it works fine for me, there are issues with the pagination button but someone is working on it :)

Unfortunately, this workaround isn't working for me in the hosted version. I've tried, for example:

#cusdis_thread .border-gray-200 {
  border: 2px solid rgba(35, 35, 36, .78) !important;
  background-color: #CBAB6C !important;
}

But this doesn't work to override the existing style, which doesn't mesh well with my site's existing aesthetic.

[scag1io]

Unfortunately, this workaround isn't working for me in the hosted version.

You are right, with the hosted version it doesn't work. I am using an older version of Cusdis on Vercel.