CSS snippet to increase font size when Fullscreen mode plugin is activated

[VanderG]

What I’m trying to do

I’m attempting to create a CSS snippet that will increase font size when the Fullscreen mode plugin is activated. It should also restore the default font size when leaving the fullscreen/focus mode (by hitting escape). So far, no luck. Help is appreciated.

[holroy]

It seems like that plugin adds a fullscreen class to the body when it’s active, so maybe something like the following will do the trick:

body.fullscreen {
  font-size: 130%;
}

You might need to add some extra selectors to change the specificity of the rule, but maybe this is enough to get you going.

I’ve not tested this, but if you use Developer Tools, you should be able too see where it picks the font-size from, and change accordingly. (That is, if you’re somewhat familiar with CSS)

[VanderG]

Thanks — but I can’t get it to work. Tried the Developer tools, too.

[holroy]

OK, so I tried the following and it seems to work in my simple tests:

body.is-fullscreen
{
  --font-text-size: 35px !important; /* */
  /* --font-adaptive-normal: 40px !important; /* */
}

I tried to calculate it to be a slightly larger font, but I got better result when setting it to some specific value. So play around with the numbers until you get something you like.

Both of the above works in my case, with the Minimal theme, and the default theme. And they switch back to my default font size when going out of the fullscreen modus.

(Sorry for asking, but you do know how to copy this into a CSS snippet and enabling it, right? )

[VanderG]

Thanks again! I replaced the css code in snippet.css with your code, switched it on in the Appearance settings, and… all text became HUGE (in all the different open panes). I guess this is because is-fullscreen is triggered by the application itself being fullscreen, while ‘fullscreen’ in the context of the plugin means ‘only the active pane is visible’.

[holroy]

HeHe… My test window was not in full screen mode, it was just an ordinary window. I originally tried with just body.fullscreen which according to the source code should be good enough, but I couldn’t see that change in the DOM when enabling its fullscreen mode.

The question then becomes, what does that plugin actually do to the DOM elements when it changes into fullscreen mode, and how can we use that in the CSS?! Sadly, I don’t know the answer just now, and need to investigate. If someone else knows the answer, please feel free to chip in.

[VanderG]

Perhaps we should ask the plugin author? Hey there, @Razum, care to comment?

[VanderG]

I’ve since switched from the Fullscreen mode plugin to the Pane Relief plugin, but with that, too, I could use some help.