From 5b6ebeaa5f26f605e14d7ff722b743e2d9a8d65b Mon Sep 17 00:00:00 2001 From: Ichthyostega Date: Thu, 9 Oct 2014 03:44:02 +0200 Subject: [PATCH] stylesheet: finish definition of a base style - text entry colours - hover / mouse over - disabled entries - ensure consistent menu styling --- doc/technical/gui/guiTheme.txt | 36 +++++++------ src/gui/gtk-lumiera.css | 94 ++++++++++++++++++++++++++++------ 2 files changed, 99 insertions(+), 31 deletions(-) diff --git a/doc/technical/gui/guiTheme.txt b/doc/technical/gui/guiTheme.txt index 98aef7216..8a0c2cab5 100644 --- a/doc/technical/gui/guiTheme.txt +++ b/doc/technical/gui/guiTheme.txt @@ -35,12 +35,20 @@ Recommended reading http://orford.org/gtk/[look here] -learning how to style -~~~~~~~~~~~~~~~~~~~~~ +difficulties when learning how to style +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Unfortunately, documentation about creating GTK-3 themes is still fragmentary. Most people seem to learn by studying existing themes. To make matters worse, CSS allows to address every widget under various contextual -constraints -- and people tend to approach such possibilities with a case-by-case attitude, instead of a -systematic approach, and this leads to incredible large and redundant stylesheets. +constraints -- and people tend to approach such abundant possibilities with a case-by-case attitude, instead +of a systematic approach, and this leads to incredible large and redundant stylesheets. + +Often we'll also face the perils of over-constrained settings. More so, since every system contains several +style sheets, and settings from those are combined (``cascaded''). When things are specified multiple times +redundantly at different levels, we can never be sure as to _which_ change actually caused a visible effect. +A good recommendation is really to ``probe'' settings by changing them temporarily to a really obvious value +(e.g. `background-color: red`). It is just too easy to learn wrong techniques based on false conclusions. + + binary themes ~~~~~~~~~~~~~ @@ -48,7 +56,8 @@ GTK-3 supports binary theme bundles, which combine CSS style sheets and accompan into a single archive file. See http://wibblystuff.blogspot.de/2012/06/building-binary-for-gtk3-theme.html[this blog entry] for a tutorial. But when it comes to investigating an existing theme, we need a way to 'extract' the original sources from such a distribution bundle. This can be achieved with the help of the `gresource` command. The following bash -srcipt by mailto:peter@thecodergeek.com[Peter Gordon] (License:Public Domain) simplifies this process, allowing +srcipt footnote:[published by mailto:peter@thecodergeek.com[Peter Gordon] to the Public Domain +http://projects.thecodergeek.com/scripts/gresource-extract[at his blog] in 2012] simplifies this process, allowing to extract all resource files in a given GResource file, with the given base URL. For example, if a GResource file contained the resource with the URL `/org/foo/bar/baz.txt`, and the base URL defined as `"/org/foo/"`, then the resource named `/org/foo/bar/baz.txt` in that file would be extracted and written to `bar/baz.txt` in the current directory. @@ -60,20 +69,15 @@ named `/org/foo/bar/baz.txt` in that file would be extracted and written to `bar # The GResource file name GR_FILE="gtk.gresource" -# The base folder of the extracted resources +# base URL of the extracted resources GR_BASEDIR="/org/gnome/" -## Check for required utilities... -for REQUIRED_PROG in gresource -do - which ${REQUIRED_PROG} &>/dev/null - if [ $? -ne 0 ]; then - echo "Unable to find required program '${REQUIRED_PROG}' in PATH." - exit 1 - fi -done - +which gresource &>/dev/null +if [ $? -ne 0 ]; then + echo "Unable to find gresource program in PATH." + exit 1 +fi for RSRC in $(gresource list $GR_FILE) do diff --git a/src/gui/gtk-lumiera.css b/src/gui/gtk-lumiera.css index 9b81118c2..5bea43616 100644 --- a/src/gui/gtk-lumiera.css +++ b/src/gui/gtk-lumiera.css @@ -19,7 +19,19 @@ @define-color bg_color rgb(35%, 35%, 40%); @define-color fg_color rgb(80%, 80%, 80%); -@define-color field_color #1a1e20; + +@define-color hover_bg_color #565690; + +@define-color field_color #1a1e20; +@define-color hover_field_color #2B2B27; + +@define-color selected_fg_color #05182F; +@define-color selected_bg_color #F0E592; + +@define-color disabled_fg_color shade(@fg_color, .6); +@define-color disabled_bg_color #4C5159; + +@define-color menue_button_color shade(@bg_color, .85); * { @@ -33,15 +45,67 @@ } GtkWindow { - color: @fg_color; + color: @fg_color; background-color: @bg_color; } + .default:HOVER, + .button:HOVER { + background-color: @hover_bg_color; +} + + .default:ACTIVE, + .button:ACTIVE { + color: shade(@fg_color, 1.2); + background-color: @hover_bg_color; + border-color: shade(@bg_color, 1.5); + border-style: solid; + border-width: 1px; +} + .entry, .view { /* any active or text input area */ background-color: @field_color; } + .entry:HOVER, + .view:HOVER { + background-color: @hover_field_color; +} + + .entry:SELECTED { + color: @selected_fg_color; + background-color: @selected_bg_color; +} + + *:INSENSITIVE, + .buttonINSENSITIVE, + .entry:INSENSITIVE { + color: @disabled_fg_color; + background-color: @disabled_bg_color; +} + + + .menubar { + background-image: -gtk-gradient(linear, left top, left bottom, + from(shade(@bg_color, 1.2)), + to(@menue_button_color)); +} + + .menuitem * { + /* can't style the background directly, thus use a contextual selector */ + color: @fg_color; + background-color: @menue_button_color; +} + + .menuitem:HOVER { + background-color: @hover_bg_color; +} + + .menuitem:INSENSITIVE * { + color: @disabled_fg_color; + background-color: @disabled_bg_color; +} /* style "medium_text" @@ -72,28 +136,28 @@ style "default_base" = "medium_text" GtkTreeView::odd-row-color = { 0, 0, 0 } fg[NORMAL] = { 0.80, 0.80, 0.80 } ✔ ported - fg[ACTIVE] = { 0.80, 0.80, 0.80 } - fg[PRELIGHT] = { 1.0, 1.0, 1.0 } + fg[ACTIVE] = { 0.80, 0.80, 0.80 } ✗ changed + fg[PRELIGHT] = { 1.0, 1.0, 1.0 } ✔ fg[INSENSITIVE] = { 0.80, 0.80, 0.80 } fg[SELECTED] = { 0.80, 0.80, 0.80 } bg[NORMAL] = { 0.35, 0.35, 0.40 } ✔ - bg[ACTIVE] = { 0.35, 0.35, 0.40 } - bg[PRELIGHT] = "#565690" - bg[INSENSITIVE] = { 0.10, 0.10, 0.10 } - bg[SELECTED] = { 0.40, 0.40, 0.45 } + bg[ACTIVE] = { 0.35, 0.35, 0.40 } ✗ changed + bg[PRELIGHT] = "#565690" ✔ + bg[INSENSITIVE] = { 0.10, 0.10, 0.10 } ✔ + bg[SELECTED] = { 0.40, 0.40, 0.45 } ↻ ✗ text[NORMAL] = { 0.80, 0.80, 0.80 } ↻ - text[ACTIVE] = { 0.80, 0.80, 0.80 } - text[PRELIGHT] = { 0.80, 0.80, 0.80 } - text[INSENSITIVE] = { 0.80, 0.80, 0.80} - text[SELECTED] = { 1.0, 1.0, 1.0 } + text[ACTIVE] = { 0.80, 0.80, 0.80 } ↻ + text[PRELIGHT] = { 0.80, 0.80, 0.80 } ↻ + text[INSENSITIVE] = { 0.80, 0.80, 0.80} ↻ + text[SELECTED] = { 1.0, 1.0, 1.0 } ✗ changed base[ACTIVE] = "#272a2f" base[NORMAL] = "#1a1e20" ✔ - base[PRELIGHT] = { 0.20, 0.20, 0.20 } - base[INSENSITIVE] = "#4c5159" - base[SELECTED] = { 0.25, 0.25, 0.25 } + base[PRELIGHT] = { 0.20, 0.20, 0.20 } ↻ + base[INSENSITIVE] = "#4c5159" ✗ + base[SELECTED] = { 0.25, 0.25, 0.25 } ✗ changed engine "clearlooks" {