search

erkyrath / lectrote

The IF interpreter in an Electron shell
Other
248 stars 28 forks source link

Use CSS variables to have better ZVM styles #87

Closed curiousdannii closed 7 years ago

curiousdannii commented 7 years ago

Hi Zarf, I've gone through the stylesheet and extracted a lot of theme variables, which I've put in play.css. This reduces the complexity quite a bit and would make it even easier to add more themes if you ever wanted to (or for users to.) More properties could be extracted into variables, but I limited it for now to those which were necessary for ZVM.

The ZVM styles are now looking a lot nicer IMO. Quote boxes and menus are now shown against the standard background. One difference is that the extra padding around the upper window won't show the upper window background colour, but that's a small price to pay.

I also got the line height working for reverse in the lower window, through some somewhat nasty CSS. For the moment I went back to just swapping the colours, but it would be very easy to add an extra couple of variables so that it can be muted.

The way I fixed the line height means empty lines don't have the full height. Can you wrap the blank line &nbsp;'s in a <span>? Or if it could just be left as it is, I doubt anyone will notice the missing 3 pixels.

Lastly I included the ZVM fixes I made earlier today.

erkyrath commented 7 years ago

I'm afraid I don't want to get into CSS variables at this time. They're still marked "experimental", and while they are supported in Electron/Chrome, it would be a big change to el-glkote.css that I couldn't backport to glkote.css. At least not yet.

Can you wrap the blank line &nbsp;'s in a <span>?

Yeah. I've done this. (In buffer windows.)

erkyrath commented 7 years ago

(Blank lines containing only &nbsp; are not likely to happen in grid windows, because of the way the interpreters work. But they are a possible outcome. I'm not wrapping them because if the line height is wrong in a grid window, we have a more serious problem.)

curiousdannii commented 7 years ago

What if play.css defined the variables but they weren't used by el-glkote.css, only zvm.css? I've updated the pull request to leave el-glkote.css untouched. I'd really like the improved styles I was able to do through this zvm.css. If you don't want even play.css to be altered then I'll move the variable definitions to zvm.css.

I also updated this to include ZVM v1.1.1.

Do you want me to make the main window reverse styles more muted again?

erkyrath commented 7 years ago

I've merged in just the fixes for line height so far.

When you say "improved styles", are you talking about the use of variables or the color changes? These are independent questions.

curiousdannii commented 7 years ago

The background colour changes. The CSS variables weren't essential for any of the changes, they just reduced a lot of duplicate code.

I've just been thinking, and it would be possible to restore some of the padding on the upper window (or rather to transfer the padding to the inner elements.) Adding the padding on the sides is easy enough through CSS. The top and bottom padding could be added to the normal 1 line case through a :only-child selector, but I don't think there's a pure CSS way of adding the correctly coloured padding to these more tricky examples.

Is there any kind of hook in GlkOte for when it's generating the HTML? Or after it has updated a grid window? Or even just at the end of a whole update? If so I could add some extra classes for inter-line padding.

Note that quote boxes are being hit especially hard by https://github.com/erkyrath/glkote/issues/22 - in the second last image two lines are completely hidden.

Current styles for Adventure

Updated styles for Adventure

Current styles for Zork: A Troll's-Eye View

Updated styles for Zork: A Troll's-Eye View

erkyrath commented 7 years ago

I appreciate all the work, but I don't think this is the right course. The current model has uniform behavior in the common status bar -- I mean uniform between Z-code and Glulx, including padding. Your model lacks that, but has cleaner display of quote boxes and menus. This is a choice people can reasonably disagree about, but I lean towards the current model.

curiousdannii commented 7 years ago

No other interpreter that I'm aware of shows the upper window the way Quixe/Lectrote does. Honestly I think it's pretty ugly. I'd prefer to go back to the solid background rather than having the two tone one. But it's your choice.

Consistency is important, so I'll keep working until I can get something you're happy with, and hopefully something that could be used for Glulx too (though that could be difficult without stylehints being implemented). :)