Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#37 2024-11-07 04:45:32

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,187
Website

Re: Preview dialog - Dompurify parsing error with image shortcode

phiw13 wrote #338151:

Oooh… That is great. I’ll try testing today if the old body allows it (asthma is a tough lover).

Maybe I am holding it wrong. Safari 18.1 completely ignores all of the :host(#pane-preview) {} style rules. In preview.css, in my theme stylesheet or with theme Hive. Firefox and Brave do what is expected.

At the moment I have no clue what is going wrong (and there are no errors in the console). It does not help that Safari’s inspector show next to nothing of the rules inside the shadowdom.

PS – The documentation page at MDN (developer.mozilla.org/en-US/docs/Web/CSS/:host_function) works perfectly fine

Last edited by phiw13 (2024-11-07 04:51:59)


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

#38 2024-11-07 08:11:32

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,187
Website

Re: Preview dialog - Dompurify parsing error with image shortcode

phiw13 wrote #338153:

Maybe I am holding it wrong. Safari 18.1 completely ignores all of the :host(#pane-preview) {} style rules. In preview.css, in my theme stylesheet or with theme Hive. Firefox and Brave do what is expected.

progress… I have it working with Safari Technology Preview. There is hope that maybe maybe Safari 18.2 will cary those fixes. Need to check the pre-release release notes.


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

#39 2024-11-07 08:27:36

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,187
Website

Re: Preview dialog - Dompurify parsing error with image shortcode

Meanwhile, here are some preliminary notes for some core custom-properties:

primary & secondary color (--txp-primary-color)
primary & secondary background (--txp-primary-back)
form controls input + select / button
color, background, border (input + button)

borders: light normal dark: --txp-border, --txp-border-light, --txp-border-dark

success / warning / error/ info: --txp-success-text, --txp-success-back, --txp-success-border

eventually: “selected” and “active” background color

--txp-spacing (space between blocks, as margin or padding, gap, -> 1em, use calc() to adjust depending on need, eg @calc(var(—margin) * 0.5)“ for smaller or larger spacing

The idea is to use, for each, the same value as Hive currently uses. Names can be discussed.

jakob wrote #338145:

Philippe is right. […]

Thanks for testing and checking what Hive actually does! Anyway, Hive will need some updating, at least teach it to use core custom-properties (aliasing them as a minimum).


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

#40 2024-11-07 10:13:44

etc
Developer
Registered: 2010-11-11
Posts: 5,186
Website GitHub

Re: Preview dialog - Dompurify parsing error with image shortcode

phiw13 wrote #338155:

progress… I have it working with Safari Technology Preview. There is hope that maybe maybe Safari 18.2 will cary those fixes. Need to check the pre-release release notes.

That might be JS as well, will check. Annoying, anyway.

Meanwhile, here are some preliminary notes for some core custom-properties:

Nice, thanks. But you UX gurus would code it much better and faster than me ;-)

Thanks for testing and checking what Hive actually does! Anyway, Hive will need some updating, at least teach it to use core custom-properties (aliasing them as a minimum).

+1. And it looks rather easy to combine user/system colour preferences.

Offline

#41 2024-11-07 10:17:11

etc
Developer
Registered: 2010-11-11
Posts: 5,186
Website GitHub

Re: Preview dialog - Dompurify parsing error with image shortcode

Pat64 wrote #338152:

I think you could remove the rule width:auto into the preview.css file.

I’d leave the choice of a minimal ruleset with you guys, my css-fu is very outdated.

Offline

#42 2024-11-07 10:45:10

etc
Developer
Registered: 2010-11-11
Posts: 5,186
Website GitHub

Re: Preview dialog - Dompurify parsing error with image shortcode

phiw13 wrote #338153:

Safari 18.1 completely ignores all of the :host(#pane-preview) {} style rules. In preview.css, in my theme stylesheet or with theme Hive. Firefox and Brave do what is expected.

Does some of this work without including in :host(#pane-preview) block? It is not necessary in preview.css, and in external stylesheets it just prevents polluting the light dom, but can be removed too.

Nothing on caniuse.com/ seems to stop Safari 18.1 from working properly, though.

Offline

#43 2024-11-07 11:34:53

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,187
Website

Re: Preview dialog - Dompurify parsing error with image shortcode

etc wrote #338161:

Nice, thanks. But you UX gurus would code it much better and faster than me ;-)

It is intended as note for discussion – e.g. naming, but also things that could be nice to include…

Anyway, I think for 4.9 we can start with a minimal set of building blocks and then improve or broaden the options later on.


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

#44 2024-11-07 12:04:51

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,187
Website

Re: Preview dialog - Dompurify parsing error with image shortcode

etc wrote #338164:

Does some of this work without including in :host(#pane-preview) block? It is not necessary in preview.css, and in external stylesheets it just prevents polluting the light dom, but can be removed too.

Nothing on caniuse.com/ seems to stop Safari 18.1 from working properly, though.

Yes what you select in the :host(#pane-preview) block in preview.css would work (from within preview.css) without the :host() part. Or from the them stylesheet, but then it leaks everywhere With :host() is very nice to be able to style something in the preview dialog only.


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

#45 2024-11-13 01:03:50

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,187
Website

Re: Preview dialog - Dompurify parsing error with image shortcode

Two building blocks for textpattern.css:

  1. I have extracted the whole block of ui-icons out the Hive stylesheet, you can find it here: dev.l-c-n.com/txp-css/txp-ui-icons.css
  2. A set of basic custom properties: colors, background-colors, border-colors, notification colors, which is available here: dev.l-c-n.com/txp-css/txp-css%20custom%20prop.css. Values are those used by theme Hive.

Todo: a basic set for handling form controls: inputs fields, buttons, etc.

Please incorporate in textpattern.css , thank you.

(I will be traveling for a couple days, further will have to wait )


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

#46 2024-11-13 10:54:17

etc
Developer
Registered: 2010-11-11
Posts: 5,186
Website GitHub

Re: Preview dialog - Dompurify parsing error with image shortcode

phiw13 wrote #338204:

I have extracted the whole block of ui-icons out the Hive stylesheet, you can find it here: dev.l-c-n.com/txp-css/txp-ui-icons.css

Oh, that’s great, thank you! We should then remove these rules from all admin themes. I’m not really concerned with themes development, so I’d leave it with Phil. I can submit an issue in the repo.

A set of basic custom properties: colors, background-colors, border-colors, notification colors, which is available here: dev.l-c-n.com/txp-css/txp-css%20custom%20prop.css. Values are those used by theme Hive.

That’s great too, but should be discussed among theme authors before further development. What are the elements that can be styled in textpattern.css and shared by all themes (up to css variables redefinition)?

Have a nice journey!

Offline

#47 Yesterday 06:00:37

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,187
Website

Re: Preview dialog - Dompurify parsing error with image shortcode

I have updated the set of core custom properties to include some basic colouring for form controls.

dev.l-c-n.com/txp-css/txp-css%20custom%20prop.css


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

Board footer

Powered by FluxBB