stylesheet: finish definition of a base style
- text entry colours - hover / mouse over - disabled entries - ensure consistent menu styling
This commit is contained in:
parent
5fdee24bf5
commit
5b6ebeaa5f
2 changed files with 99 additions and 31 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in a new issue