[ANN] PlutoStyles.jl: override styles of Pluto notebooks

aplavin · July 8, 2021, 3:03pm

Alexander Plavin / PlutoStyles.jl · GitLab - a small package adding the ability to override CSS styles of Pluto.jl notebooks. Or any other static Pluto asset, really.

As you may be aware of, Pluto.jl doesn’t support themes (yet?). I’ve been using in-browser user CSS to modify certain aspects of Pluto styling for a long time. However, it becomes less convenient and practical when switching between multiple computers, and user CSS are not even supported in some mobile browsers. This package allows overriding Pluto styles on the server side, independent of the browser.

I don’t intend to register PlutoStyles.jl in General, so feel free to add it by URL.
Default styles that fit my taste are provided, most notably (i) occupy full window width, and (ii) allow large image sizes in collections. Arbitrary custom overrides are possible, see README at

Mason · July 8, 2021, 5:29pm

Nice! Do you have any examples you can show us?

aplavin · July 10, 2021, 9:14am

Originally, I thought of the intended PlutoStyles audience as those who already know what CSS changes they want, and just need a convenient way to apply these modifications. Then the explanations given in README should be enough.

Maybe there are other potential users indeed, who have preferences similar to mine, and would like to use PlutoStyles defaults. In this case, see some comparison screenshots below!

Pluto original:

With PlutoStyles defaults:

aplavin · July 10, 2021, 10:05am

Another piece of CSS is applied to the index Pluto page. It shows full paths for notebooks, and colors notebooks in the default /pluto_notebooks/ directory:

I wanted to get rid of the underlining of the full path, but text-decoration: none doesn’t seem to work here for some reason.

StatisticalMouse · July 12, 2021, 8:27am

How can I use it with the built-in package manager? I didn’t see instructions on how to add a package using a repo path here: 🎁 Package management · fonsp/Pluto.jl Wiki · GitHub

lungben · July 12, 2021, 9:50am

The built-in Pkg manager requires that the package is registered in a Registry.
This needs not to be the official General registry, a private Registry also works if you add it to Julia before starting Pluto (see 🎁 Package management · fonsp/Pluto.jl Wiki · GitHub).

aplavin · July 12, 2021, 10:53am

I assume you are talking about Pluto built-in package manager? Because Julia built-in Pkg installs it just fine with ]add <url>.

PlutoStyles is not to be imported within notebooks! And shouldn’t be installed via Pluto.
This is the whole point: notebooks stay unmodified and without extra dependencies.
Just follow README: install PlutoStyles, and do

julia> using PlutoStyles
julia> Pluto.run()

instead of

julia> import Pluto
julia> Pluto.run()

to start the notebook server.

StatisticalMouse · July 12, 2021, 11:26pm

Ah… Your readme was not powerful enough to deflect my incorrect assumptions to the correct path.

StatisticalMouse · July 16, 2021, 8:46am

A big reason I made the mistake is that I usually start Pluto with this alias, so the phase where the change should be done is usually hidden.

alias pluto='julia --project=@. -e "using Pluto
if length(ARGS) > 0
    notebook = ARGS[1]
    Pluto.run(notebook=joinpath(pwd(), notebook))
else
    Pluto.run()
end"'

I created a version of this that works with PlutoStyles.

alias plutostyles='julia --project=@. -e "using PlutoStyles
if length(ARGS) > 0
    notebook = ARGS[1]
    Pluto.run(notebook=joinpath(pwd(), notebook))
else
    Pluto.run()
end"'

With the Pluto’s built-in package manager, the --project=@. is probably no longer needed.

StatisticalMouse · July 16, 2021, 9:41am

I like the wideness of PlutoStyles. No longer does so much of the space get wasted. It’s maybe a bit too wide as some of Pluto’s elements get underneath the scroll bar on a mac, sometimes.
Screenshot 2021-07-16 at 12.36.50

IMHO, the three buttons that open from ‘…’ would be better inside the box, in place of the ‘…’.
This would save one mouse click, and would also solve this problem.

aplavin · July 16, 2021, 10:05am

Nice idea for this CLI wrapper! Going to borrow it (:
I typically use Pluto in two different ways: a permanently-running instance on a remote server, and also start a local instance from time to time. Your wrapper conveniently covers both cases.

aplavin · July 16, 2021, 10:07am

Yes, the popup menu is indeed beyond the screen edge on all systems. I tried to make it popup to the left of the “…” button, but didn’t succeed in it - maybe someone with a better CSS knowledge helps. Or it gets changed in Pluto itself as you say…

That’s the first and most important modification I made! See Occupy full window width · Issue #400 · fonsp/Pluto.jl · GitHub.

disberd · July 16, 2021, 11:07am

You can use the same CSS that is being used in Pluto if the screen width is too small, which you can find here:

github.com

fonsp/Pluto.jl/blob/28e452bc0582bb53c25768e02169a65ffa436e99/frontend/editor.css#L1339-L1346


      
          @media screen and (max-width: 920px) {
              pluto-input > button.delete_cell  {
                  z-index: 31;
              }
              pluto-input > button.delete_cell ul.input_context_menu {
                  left: calc(100% - var(--width) - 36px);
              }
          }

Here is that in action in a pluto notebook where I put the CSS from PlutoStyles in the first cell and the snippet from editor.css (without @media as you want it active all the time) in the second cell

aplavin · July 16, 2021, 1:43pm

Thanks!
Do you also happen to know how to fix this?

Playing with z-index didn’t help, those run buttons still appear in front of the popup.

disberd · July 16, 2021, 2:22pm

That is weird…
I tried adding the same snippet with the z-index as in the editor.css and I get the z-index stacking correctly:

Does it still keep being like that if you put the same css I had in the cell and maybe refresh the browser page?

aplavin · July 16, 2021, 2:33pm

Interesting, you don’t seem to have these cell footers at all for inactive cells! I see them all the time, in plain vanilla Pluto, on all browsers and devices.

disberd · July 16, 2021, 2:48pm

That is weird, looking at the editor.css it should only appear if your cell has non-saved code or if your mouse is focussing the cell

lungben · July 16, 2021, 7:11pm

Cell deactivation does not remove footers (or cell timings in them), at least not in default Pluto.

disberd · July 17, 2021, 6:31am

I think @aplavin meant unfocused or something along that line with “inactive”.

Are you instead referring to the disable feature you did introduce recently?

If you look at the latest screenshot from him none of the cells seem disabled but is abyway strange that all cella show the footer even if they are not focused or containing unsaved code

aplavin · July 17, 2021, 6:34am

Looks like I played with z-index wrong on my first try (: Now it works!
A new PlutoStyles version is available, with the popup menu to the left.

As for cell timings, I actually like that they are always visible. But tried digging in with the browser devtools to understand why anyway. These style lines are shown as active for me:
https://github.com/fonsp/Pluto.jl/blob/28e452bc0582bb53c25768e02169a65ffa436e99/frontend/editor.css#L1286-L1287
My guess is the any-pointer: coarse condition at
https://github.com/fonsp/Pluto.jl/blob/28e452bc0582bb53c25768e02169a65ffa436e99/frontend/editor.css#L1263-L1263
is satisfied because all my devices (laptop and tablet) have a touchscreen.