UI.layout: adjust ui template for css style reference

[rtgiskard]

Add a css sample, which may looks like this:

[rharish101]

Thanks for the PR! I just ran it, and saw that the default look has changed. However, I'd like to keep the older look as the default.

As for the changes you've made to the code for the GUI (the widgets and their settings), I just have one question: are these changes made so that it's easier to theme ReGreet with CSS, or are they specific to this setup? If it's to make the life of those who wish to customize the CSS easier, then I'm up for it. Otherwise, I'd rather keep the previous look, and maybe keep this look as an example for a custom CSS config.

[rtgiskard]

Thanks for the PR! I just ran it, and saw that the default look has changed. However, I'd like to keep the older look as the default.

As for the changes you've made to the code for the GUI (the widgets and their settings), I just have one question: are these changes made so that it's easier to theme ReGreet with CSS, or are they specific to this setup? If it's to make the life of those who wish to customize the CSS easier, then I'm up for it. Otherwise, I'd rather keep the previous look, and maybe keep this look as an example for a custom CSS config.

It's better to leave the sample css as an example only. The changes to the widgets and settings:

1. limit entry label prompt's length: the session label is reused to display PAM prompts which can be long text (for my case, with oath-toolkit for 2fa auth, it's more than 40 chars with respect to the username), which may break the grid layout.
2. add specific css class for easier element selection
3. remove hard coded width/height request in the code so that it can be customized with css
4. replace frame with the simpler box container

I think the ui template changes will make it easier and cleaner to theme it, but it also makes the deault looking odd due to the transparent background and spacing of the basic layout box, so a minimum default css may be required.