Allow the user to configure the style directly via CSS

[ad1217]

Instead of trying to expose all the style options through a GUI, just add a text editor and let the user figure it out themselves. This also has the side effect of allowing for sane defaults and following GTK themes. This also fixes #29, #31, and possibly #43.

I've set the default CSS to be a minimal example vaguely similar to the previous defaults, and providing examples of all the classes I added (screenshots are taken with the panel's background color set to black, and my theme's default text color):

.workspace { }
.workspace.visible { }
.workspace.focused { font-weight: bold; }
.workspace.urgent { color: red; }
.binding-mode { }

Here's an example of styling it to look like the defaults for i3bar:

.workspace, .binding-mode {
    border: 1px solid;
    font: DejaVu Sans Mono;
    margin-bottom: 1px;
}

.workspace label, .binding-mode label {
    padding: 2px;
}

/* inactive defaults */
.workspace {
    border-color: #333333;
    background-color: #222222;
    color: #888888;
}

/* equivalent to "active_workspace" in i3bar */
.workspace.visible {
    border-color: #333333;
    background-color: #5f676a;
    color: #ffffff;
}

.workspace.focused {
    border-color: #4c7899;
    background-color: #285577;
    color: #ffffff;
}

.workspace.urgent {
    border-color: #2f343a;
    background-color: #900000;
    color: #ffffff;
}

.binding-mode {
    border-color: #2f343a;
    background-color: #900000;
    color: #ffffff;
}

[denesb]

@ad1217 thanks, this looks awesome. My only worry is that this will create a high barrier of entry for changing the looks of the plugin. While advanced users will welcome this, less CSS savvy users might be frustrated at the amount of googling needed to change the colour of a button.
Would it be possible to also keep the old simple options and have an advanced section where you can create your own CSS? Can you even mix the two?

[ad1217]

I've implemented a selector, so you can choose between color picker buttons or raw CSS. Currently exclusive (only one is applied at a time), as having both apply seemed like it would be confusing.