436 lines
31 KiB
HTML
436 lines
31 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
||
<html>
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
<title>Using the CSS file format: GTK+ 3 Reference Manual</title>
|
||
<meta name="generator" content="DocBook XSL Stylesheets Vsnapshot">
|
||
<link rel="home" href="index.html" title="GTK+ 3 Reference Manual">
|
||
<link rel="up" href="gtk-migrating-GtkStyleContext.html" title="Theming changes">
|
||
<link rel="prev" href="gtk-migrating-GtkStyleContext-parser-extensions.html" title="Extending the CSS parser">
|
||
<link rel="next" href="gtk-migrating-GtkStyleContext-checklist.html" title="A checklist for widgets">
|
||
<meta name="generator" content="GTK-Doc V1.29 (XML mode)">
|
||
<link rel="stylesheet" href="style.css" type="text/css">
|
||
</head>
|
||
<body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF">
|
||
<table class="navigation" id="top" width="100%" summary="Navigation header" cellpadding="2" cellspacing="5"><tr valign="middle">
|
||
<td width="100%" align="left" class="shortcuts"></td>
|
||
<td><a accesskey="h" href="index.html"><img src="home.png" width="16" height="16" border="0" alt="Home"></a></td>
|
||
<td><a accesskey="u" href="gtk-migrating-GtkStyleContext.html"><img src="up.png" width="16" height="16" border="0" alt="Up"></a></td>
|
||
<td><a accesskey="p" href="gtk-migrating-GtkStyleContext-parser-extensions.html"><img src="left.png" width="16" height="16" border="0" alt="Prev"></a></td>
|
||
<td><a accesskey="n" href="gtk-migrating-GtkStyleContext-checklist.html"><img src="right.png" width="16" height="16" border="0" alt="Next"></a></td>
|
||
</tr></table>
|
||
<div class="section">
|
||
<div class="titlepage"><div><div><h2 class="title" style="clear: both">
|
||
<a name="gtk-migrating-GtkStyleContext-css"></a>Using the CSS file format</h2></div></div></div>
|
||
<p>
|
||
The syntax of RC and CSS files formats is obviously different.
|
||
The CSS-like syntax will hopefully be much more familiar to many
|
||
people, lowering the barrier for custom theming.
|
||
</p>
|
||
<p>
|
||
Instead of going through the syntax differences one-by-one, we
|
||
will present a more or less comprehensive example and discuss
|
||
how it can be translated into CSS:
|
||
</p>
|
||
<div class="example">
|
||
<a name="id-1.6.4.6.4"></a><p class="title"><b>Example 44. Sample RC code</b></p>
|
||
<div class="example-contents">
|
||
<table class="listing_frame" border="0" cellpadding="0" cellspacing="0">
|
||
<tbody>
|
||
<tr>
|
||
<td class="listing_lines" align="right"><pre>1
|
||
2
|
||
3
|
||
4
|
||
5
|
||
6
|
||
7
|
||
8
|
||
9
|
||
10
|
||
11
|
||
12
|
||
13
|
||
14
|
||
15
|
||
16
|
||
17
|
||
18
|
||
19
|
||
20
|
||
21
|
||
22
|
||
23
|
||
24
|
||
25
|
||
26
|
||
27
|
||
28
|
||
29
|
||
30
|
||
31
|
||
32
|
||
33
|
||
34
|
||
35
|
||
36
|
||
37
|
||
38
|
||
39
|
||
40
|
||
41
|
||
42
|
||
43
|
||
44
|
||
45
|
||
46
|
||
47
|
||
48
|
||
49
|
||
50
|
||
51
|
||
52
|
||
53
|
||
54
|
||
55
|
||
56
|
||
57
|
||
58
|
||
59
|
||
60
|
||
61
|
||
62
|
||
63
|
||
64
|
||
65
|
||
66
|
||
67
|
||
68
|
||
69
|
||
70
|
||
71
|
||
72
|
||
73
|
||
74
|
||
75
|
||
76</pre></td>
|
||
<td class="listing_code"><pre class="programlisting"><span class="normal">style </span><span class="string">"default"</span><span class="normal"> </span><span class="cbracket">{</span>
|
||
<span class="normal"> xthickness </span><span class="symbol">=</span><span class="normal"> </span><span class="number">1</span>
|
||
<span class="normal"> ythickness </span><span class="symbol">=</span><span class="normal"> </span><span class="number">1</span>
|
||
|
||
<span class="normal"> <a href="GtkButton.html#GtkButton-struct">GtkButton</a></span><span class="symbol">::</span><span class="normal">child</span><span class="symbol">-</span><span class="normal">displacement</span><span class="symbol">-</span><span class="normal">x </span><span class="symbol">=</span><span class="normal"> </span><span class="number">1</span>
|
||
<span class="normal"> <a href="GtkButton.html#GtkButton-struct">GtkButton</a></span><span class="symbol">::</span><span class="normal">child</span><span class="symbol">-</span><span class="normal">displacement</span><span class="symbol">-</span><span class="normal">y </span><span class="symbol">=</span><span class="normal"> </span><span class="number">1</span>
|
||
<span class="normal"> <a href="GtkCheckButton.html#GtkCheckButton-struct">GtkCheckButton</a></span><span class="symbol">::</span><span class="normal">indicator</span><span class="symbol">-</span><span class="normal">size </span><span class="symbol">=</span><span class="normal"> </span><span class="number">14</span>
|
||
|
||
<span class="normal"> bg</span><span class="symbol">[</span><span class="normal">NORMAL</span><span class="symbol">]</span><span class="normal"> </span><span class="symbol">=</span><span class="normal"> @bg_color</span>
|
||
<span class="normal"> bg</span><span class="symbol">[</span><span class="normal">PRELIGHT</span><span class="symbol">]</span><span class="normal"> </span><span class="symbol">=</span><span class="normal"> </span><span class="function">shade</span><span class="normal"> </span><span class="symbol">(</span><span class="number">1.02</span><span class="symbol">,</span><span class="normal"> @bg_color</span><span class="symbol">)</span>
|
||
<span class="normal"> bg</span><span class="symbol">[</span><span class="normal">SELECTED</span><span class="symbol">]</span><span class="normal"> </span><span class="symbol">=</span><span class="normal"> @selected_bg_color</span>
|
||
<span class="normal"> bg</span><span class="symbol">[</span><span class="normal">INSENSITIVE</span><span class="symbol">]</span><span class="normal"> </span><span class="symbol">=</span><span class="normal"> @bg_color</span>
|
||
<span class="normal"> bg</span><span class="symbol">[</span><span class="normal">ACTIVE</span><span class="symbol">]</span><span class="normal"> </span><span class="symbol">=</span><span class="normal"> </span><span class="function">shade</span><span class="normal"> </span><span class="symbol">(</span><span class="number">0.9</span><span class="symbol">,</span><span class="normal"> @bg_color</span><span class="symbol">)</span>
|
||
|
||
<span class="normal"> fg</span><span class="symbol">[</span><span class="normal">NORMAL</span><span class="symbol">]</span><span class="normal"> </span><span class="symbol">=</span><span class="normal"> @fg_color</span>
|
||
<span class="normal"> fg</span><span class="symbol">[</span><span class="normal">PRELIGHT</span><span class="symbol">]</span><span class="normal"> </span><span class="symbol">=</span><span class="normal"> @fg_color</span>
|
||
<span class="normal"> fg</span><span class="symbol">[</span><span class="normal">SELECTED</span><span class="symbol">]</span><span class="normal"> </span><span class="symbol">=</span><span class="normal"> @selected_fg_color</span>
|
||
<span class="normal"> fg</span><span class="symbol">[</span><span class="normal">INSENSITIVE</span><span class="symbol">]</span><span class="normal"> </span><span class="symbol">=</span><span class="normal"> </span><span class="function">darker</span><span class="normal"> </span><span class="symbol">(</span><span class="normal">@bg_color</span><span class="symbol">)</span>
|
||
<span class="normal"> fg</span><span class="symbol">[</span><span class="normal">ACTIVE</span><span class="symbol">]</span><span class="normal"> </span><span class="symbol">=</span><span class="normal"> @fg_color</span>
|
||
|
||
<span class="normal"> text</span><span class="symbol">[</span><span class="normal">NORMAL</span><span class="symbol">]</span><span class="normal"> </span><span class="symbol">=</span><span class="normal"> @text_color</span>
|
||
<span class="normal"> text</span><span class="symbol">[</span><span class="normal">PRELIGHT</span><span class="symbol">]</span><span class="normal"> </span><span class="symbol">=</span><span class="normal"> @text_color</span>
|
||
<span class="normal"> text</span><span class="symbol">[</span><span class="normal">SELECTED</span><span class="symbol">]</span><span class="normal"> </span><span class="symbol">=</span><span class="normal"> @selected_fg_color</span>
|
||
<span class="normal"> text</span><span class="symbol">[</span><span class="normal">INSENSITIVE</span><span class="symbol">]</span><span class="normal"> </span><span class="symbol">=</span><span class="normal"> </span><span class="function">darker</span><span class="normal"> </span><span class="symbol">(</span><span class="normal">@bg_color</span><span class="symbol">)</span>
|
||
<span class="normal"> text</span><span class="symbol">[</span><span class="normal">ACTIVE</span><span class="symbol">]</span><span class="normal"> </span><span class="symbol">=</span><span class="normal"> @selected_fg_color</span>
|
||
|
||
<span class="normal"> base</span><span class="symbol">[</span><span class="normal">NORMAL</span><span class="symbol">]</span><span class="normal"> </span><span class="symbol">=</span><span class="normal"> @base_color</span>
|
||
<span class="normal"> base</span><span class="symbol">[</span><span class="normal">PRELIGHT</span><span class="symbol">]</span><span class="normal"> </span><span class="symbol">=</span><span class="normal"> </span><span class="function">shade</span><span class="normal"> </span><span class="symbol">(</span><span class="number">0.95</span><span class="symbol">,</span><span class="normal"> @bg_color</span><span class="symbol">)</span>
|
||
<span class="normal"> base</span><span class="symbol">[</span><span class="normal">SELECTED</span><span class="symbol">]</span><span class="normal"> </span><span class="symbol">=</span><span class="normal"> @selected_bg_color</span>
|
||
<span class="normal"> base</span><span class="symbol">[</span><span class="normal">INSENSITIVE</span><span class="symbol">]</span><span class="normal"> </span><span class="symbol">=</span><span class="normal"> @bg_color</span>
|
||
<span class="normal"> base</span><span class="symbol">[</span><span class="normal">ACTIVE</span><span class="symbol">]</span><span class="normal"> </span><span class="symbol">=</span><span class="normal"> </span><span class="function">shade</span><span class="normal"> </span><span class="symbol">(</span><span class="number">0.9</span><span class="symbol">,</span><span class="normal"> @selected_bg_color</span><span class="symbol">)</span>
|
||
|
||
<span class="normal"> engine </span><span class="string">"clearlooks"</span><span class="normal"> </span><span class="cbracket">{</span>
|
||
<span class="normal"> colorize_scrollbar </span><span class="symbol">=</span><span class="normal"> TRUE</span>
|
||
<span class="normal"> style </span><span class="symbol">=</span><span class="normal"> CLASSIC</span>
|
||
<span class="normal"> </span><span class="cbracket">}</span>
|
||
<span class="cbracket">}</span>
|
||
|
||
<span class="normal">style </span><span class="string">"tooltips"</span><span class="normal"> </span><span class="cbracket">{</span>
|
||
<span class="normal"> xthickness </span><span class="symbol">=</span><span class="normal"> </span><span class="number">4</span>
|
||
<span class="normal"> ythickness </span><span class="symbol">=</span><span class="normal"> </span><span class="number">4</span>
|
||
|
||
<span class="normal"> bg</span><span class="symbol">[</span><span class="normal">NORMAL</span><span class="symbol">]</span><span class="normal"> </span><span class="symbol">=</span><span class="normal"> @tooltip_bg_color</span>
|
||
<span class="normal"> fg</span><span class="symbol">[</span><span class="normal">NORMAL</span><span class="symbol">]</span><span class="normal"> </span><span class="symbol">=</span><span class="normal"> @tooltip_fg_color</span>
|
||
<span class="cbracket">}</span>
|
||
|
||
<span class="normal">style </span><span class="string">"button"</span><span class="normal"> </span><span class="cbracket">{</span>
|
||
<span class="normal"> xthickness </span><span class="symbol">=</span><span class="normal"> </span><span class="number">3</span>
|
||
<span class="normal"> ythickness </span><span class="symbol">=</span><span class="normal"> </span><span class="number">3</span>
|
||
|
||
<span class="normal"> bg</span><span class="symbol">[</span><span class="normal">NORMAL</span><span class="symbol">]</span><span class="normal"> </span><span class="symbol">=</span><span class="normal"> </span><span class="function">shade</span><span class="normal"> </span><span class="symbol">(</span><span class="number">1.04</span><span class="symbol">,</span><span class="normal"> @bg_color</span><span class="symbol">)</span>
|
||
<span class="normal"> bg</span><span class="symbol">[</span><span class="normal">PRELIGHT</span><span class="symbol">]</span><span class="normal"> </span><span class="symbol">=</span><span class="normal"> </span><span class="function">shade</span><span class="normal"> </span><span class="symbol">(</span><span class="number">1.06</span><span class="symbol">,</span><span class="normal"> @bg_color</span><span class="symbol">)</span>
|
||
<span class="normal"> bg</span><span class="symbol">[</span><span class="normal">ACTIVE</span><span class="symbol">]</span><span class="normal"> </span><span class="symbol">=</span><span class="normal"> </span><span class="function">shade</span><span class="normal"> </span><span class="symbol">(</span><span class="number">0.85</span><span class="symbol">,</span><span class="normal"> @bg_color</span><span class="symbol">)</span>
|
||
<span class="cbracket">}</span>
|
||
|
||
<span class="normal">style </span><span class="string">"entry"</span><span class="normal"> </span><span class="cbracket">{</span>
|
||
<span class="normal"> xthickness </span><span class="symbol">=</span><span class="normal"> </span><span class="number">3</span>
|
||
<span class="normal"> ythickness </span><span class="symbol">=</span><span class="normal"> </span><span class="number">3</span>
|
||
|
||
<span class="normal"> bg</span><span class="symbol">[</span><span class="normal">SELECTED</span><span class="symbol">]</span><span class="normal"> </span><span class="symbol">=</span><span class="normal"> </span><span class="function">mix</span><span class="normal"> </span><span class="symbol">(</span><span class="number">0.4</span><span class="symbol">,</span><span class="normal"> @selected_bg_color</span><span class="symbol">,</span><span class="normal"> @base_color</span><span class="symbol">)</span>
|
||
<span class="normal"> fg</span><span class="symbol">[</span><span class="normal">SELECTED</span><span class="symbol">]</span><span class="normal"> </span><span class="symbol">=</span><span class="normal"> @text_color</span>
|
||
|
||
<span class="normal"> engine </span><span class="string">"clearlooks"</span><span class="normal"> </span><span class="cbracket">{</span>
|
||
<span class="normal"> focus_color </span><span class="symbol">=</span><span class="normal"> </span><span class="function">shade</span><span class="normal"> </span><span class="symbol">(</span><span class="number">0.65</span><span class="symbol">,</span><span class="normal"> @selected_bg_color</span><span class="symbol">)</span>
|
||
<span class="normal"> </span><span class="cbracket">}</span>
|
||
<span class="cbracket">}</span>
|
||
|
||
<span class="normal">style </span><span class="string">"other"</span><span class="normal"> </span><span class="cbracket">{</span>
|
||
<span class="normal"> bg</span><span class="symbol">[</span><span class="normal">NORMAL</span><span class="symbol">]</span><span class="normal"> </span><span class="symbol">=</span><span class="normal"> #fff</span><span class="symbol">;</span>
|
||
<span class="cbracket">}</span>
|
||
|
||
<span class="normal">class </span><span class="string">"GtkWidget"</span><span class="normal"> style </span><span class="string">"default"</span>
|
||
<span class="normal">class </span><span class="string">"GtkEntry"</span><span class="normal"> style </span><span class="string">"entry"</span>
|
||
<span class="normal">widget_class </span><span class="string">"*<GtkButton>"</span><span class="normal"> style </span><span class="string">"button"</span>
|
||
<span class="normal">widget </span><span class="string">"gtk-tooltip*"</span><span class="normal"> style </span><span class="string">"tooltips"</span>
|
||
<span class="normal">widget_class </span><span class="string">"window-name.*.GtkButton"</span><span class="normal"> style </span><span class="string">"other"</span></pre></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
</div>
|
||
<br class="example-break"><p>
|
||
would roughly translate to this CSS:
|
||
</p>
|
||
<div class="example">
|
||
<a name="id-1.6.4.6.6"></a><p class="title"><b>Example 45. CSS translation</b></p>
|
||
<div class="example-contents">
|
||
<table class="listing_frame" border="0" cellpadding="0" cellspacing="0">
|
||
<tbody>
|
||
<tr>
|
||
<td class="listing_lines" align="right"><pre>1
|
||
2
|
||
3
|
||
4
|
||
5
|
||
6
|
||
7
|
||
8
|
||
9
|
||
10
|
||
11
|
||
12
|
||
13
|
||
14
|
||
15
|
||
16
|
||
17
|
||
18
|
||
19
|
||
20
|
||
21
|
||
22
|
||
23
|
||
24
|
||
25
|
||
26
|
||
27
|
||
28
|
||
29
|
||
30
|
||
31
|
||
32
|
||
33
|
||
34
|
||
35
|
||
36
|
||
37
|
||
38
|
||
39
|
||
40
|
||
41
|
||
42
|
||
43
|
||
44
|
||
45
|
||
46
|
||
47
|
||
48
|
||
49
|
||
50
|
||
51
|
||
52
|
||
53
|
||
54
|
||
55
|
||
56
|
||
57
|
||
58
|
||
59
|
||
60
|
||
61
|
||
62
|
||
63
|
||
64
|
||
65
|
||
66
|
||
67
|
||
68</pre></td>
|
||
<td class="listing_code"><pre class="programlisting"><span class="symbol">*</span><span class="normal"> </span><span class="cbracket">{</span>
|
||
<span class="normal"> padding</span><span class="symbol">:</span><span class="normal"> </span><span class="number">1</span><span class="symbol">;</span>
|
||
<span class="normal"> </span><span class="symbol">-</span><span class="normal"><a href="GtkButton.html#GtkButton-struct">GtkButton</a></span><span class="symbol">-</span><span class="normal">child</span><span class="symbol">-</span><span class="normal">displacement</span><span class="symbol">-</span><span class="normal">x</span><span class="symbol">:</span><span class="normal"> </span><span class="number">1</span><span class="symbol">;</span>
|
||
<span class="normal"> </span><span class="symbol">-</span><span class="normal"><a href="GtkButton.html#GtkButton-struct">GtkButton</a></span><span class="symbol">-</span><span class="normal">child</span><span class="symbol">-</span><span class="normal">displacement</span><span class="symbol">-</span><span class="normal">y</span><span class="symbol">:</span><span class="normal"> </span><span class="number">1</span><span class="symbol">;</span>
|
||
<span class="normal"> </span><span class="symbol">-</span><span class="normal"><a href="GtkCheckButton.html#GtkCheckButton-struct">GtkCheckButton</a></span><span class="symbol">-</span><span class="normal">indicator</span><span class="symbol">-</span><span class="normal">size</span><span class="symbol">:</span><span class="normal"> </span><span class="number">14</span><span class="symbol">;</span>
|
||
|
||
<span class="normal"> background</span><span class="symbol">-</span><span class="normal">color</span><span class="symbol">:</span><span class="normal"> @bg_color</span><span class="symbol">;</span>
|
||
<span class="normal"> color</span><span class="symbol">:</span><span class="normal"> @fg_color</span><span class="symbol">;</span>
|
||
|
||
<span class="normal"> </span><span class="symbol">-</span><span class="normal">Clearlooks</span><span class="symbol">-</span><span class="normal">colorize</span><span class="symbol">-</span><span class="normal">scrollbar</span><span class="symbol">:</span><span class="normal"> true</span><span class="symbol">;</span>
|
||
<span class="normal"> </span><span class="symbol">-</span><span class="normal">Clearlooks</span><span class="symbol">-</span><span class="normal">style</span><span class="symbol">:</span><span class="normal"> classic</span><span class="symbol">;</span>
|
||
<span class="cbracket">}</span>
|
||
|
||
<span class="symbol">*:</span><span class="normal">hover </span><span class="cbracket">{</span>
|
||
<span class="normal"> background</span><span class="symbol">-</span><span class="normal">color</span><span class="symbol">:</span><span class="normal"> </span><span class="function">shade</span><span class="normal"> </span><span class="symbol">(</span><span class="normal">@bg_color</span><span class="symbol">,</span><span class="normal"> </span><span class="number">1.02</span><span class="symbol">);</span>
|
||
<span class="cbracket">}</span>
|
||
|
||
<span class="symbol">*:</span><span class="normal">selected </span><span class="cbracket">{</span>
|
||
<span class="normal"> background</span><span class="symbol">-</span><span class="normal">color</span><span class="symbol">:</span><span class="normal"> @selected_bg_color</span><span class="symbol">;</span>
|
||
<span class="normal"> color</span><span class="symbol">:</span><span class="normal"> @selected_fg_color</span><span class="symbol">;</span>
|
||
<span class="cbracket">}</span>
|
||
|
||
<span class="symbol">*:</span><span class="normal">insensitive </span><span class="cbracket">{</span>
|
||
<span class="normal"> color</span><span class="symbol">:</span><span class="normal"> </span><span class="function">shade</span><span class="normal"> </span><span class="symbol">(</span><span class="normal">@bg_color</span><span class="symbol">,</span><span class="normal"> </span><span class="number">0.7</span><span class="symbol">);</span>
|
||
<span class="cbracket">}</span>
|
||
|
||
<span class="symbol">*:</span><span class="normal">active </span><span class="cbracket">{</span>
|
||
<span class="normal"> background</span><span class="symbol">-</span><span class="normal">color</span><span class="symbol">:</span><span class="normal"> </span><span class="function">shade</span><span class="normal"> </span><span class="symbol">(</span><span class="normal">@bg_color</span><span class="symbol">,</span><span class="normal"> </span><span class="number">0.9</span><span class="symbol">);</span>
|
||
<span class="cbracket">}</span>
|
||
|
||
<span class="symbol">.</span><span class="normal">tooltip </span><span class="cbracket">{</span>
|
||
<span class="normal"> padding</span><span class="symbol">:</span><span class="normal"> </span><span class="number">4</span><span class="symbol">;</span>
|
||
|
||
<span class="normal"> background</span><span class="symbol">-</span><span class="normal">color</span><span class="symbol">:</span><span class="normal"> @tooltip_bg_color</span><span class="symbol">;</span>
|
||
<span class="normal"> color</span><span class="symbol">:</span><span class="normal"> @tooltip_fg_color</span><span class="symbol">;</span>
|
||
<span class="cbracket">}</span>
|
||
|
||
<span class="symbol">.</span><span class="normal">button </span><span class="cbracket">{</span>
|
||
<span class="normal"> padding</span><span class="symbol">:</span><span class="normal"> </span><span class="number">3</span><span class="symbol">;</span>
|
||
<span class="normal"> background</span><span class="symbol">-</span><span class="normal">color</span><span class="symbol">:</span><span class="normal"> </span><span class="function">shade</span><span class="normal"> </span><span class="symbol">(</span><span class="normal">@bg_color</span><span class="symbol">,</span><span class="normal"> </span><span class="number">1.04</span><span class="symbol">);</span>
|
||
<span class="cbracket">}</span>
|
||
|
||
<span class="symbol">.</span><span class="normal">button</span><span class="symbol">:</span><span class="normal">hover </span><span class="cbracket">{</span>
|
||
<span class="normal"> background</span><span class="symbol">-</span><span class="normal">color</span><span class="symbol">:</span><span class="normal"> </span><span class="function">shade</span><span class="normal"> </span><span class="symbol">(</span><span class="normal">@bg_color</span><span class="symbol">,</span><span class="normal"> </span><span class="number">1.06</span><span class="symbol">);</span>
|
||
<span class="cbracket">}</span>
|
||
|
||
<span class="symbol">.</span><span class="normal">button</span><span class="symbol">:</span><span class="normal">active </span><span class="cbracket">{</span>
|
||
<span class="normal"> background</span><span class="symbol">-</span><span class="normal">color</span><span class="symbol">:</span><span class="normal"> </span><span class="function">shade</span><span class="normal"> </span><span class="symbol">(</span><span class="normal">@bg_color</span><span class="symbol">,</span><span class="normal"> </span><span class="number">0.85</span><span class="symbol">);</span>
|
||
<span class="cbracket">}</span>
|
||
|
||
<span class="symbol">.</span><span class="normal">entry </span><span class="cbracket">{</span>
|
||
<span class="normal"> padding</span><span class="symbol">:</span><span class="normal"> </span><span class="number">3</span><span class="symbol">;</span>
|
||
|
||
<span class="normal"> background</span><span class="symbol">-</span><span class="normal">color</span><span class="symbol">:</span><span class="normal"> @base_color</span><span class="symbol">;</span>
|
||
<span class="normal"> color</span><span class="symbol">:</span><span class="normal"> @text_color</span><span class="symbol">;</span>
|
||
<span class="cbracket">}</span>
|
||
|
||
<span class="symbol">.</span><span class="normal">entry</span><span class="symbol">:</span><span class="normal">selected </span><span class="cbracket">{</span>
|
||
<span class="normal"> background</span><span class="symbol">-</span><span class="normal">color</span><span class="symbol">:</span><span class="normal"> </span><span class="function">mix</span><span class="normal"> </span><span class="symbol">(</span><span class="normal">@selected_bg_color</span><span class="symbol">,</span><span class="normal"> @base_color</span><span class="symbol">,</span><span class="normal"> </span><span class="number">0.4</span><span class="symbol">);</span>
|
||
<span class="normal"> </span><span class="symbol">-</span><span class="normal">Clearlooks</span><span class="symbol">-</span><span class="normal">focus</span><span class="symbol">-</span><span class="normal">color</span><span class="symbol">:</span><span class="normal"> </span><span class="function">shade</span><span class="normal"> </span><span class="symbol">(</span><span class="number">0.65</span><span class="symbol">,</span><span class="normal"> @selected_bg_color</span><span class="symbol">)</span>
|
||
<span class="cbracket">}</span>
|
||
|
||
<span class="comment">/* The latter selector is an specification of the first,</span>
|
||
<span class="comment"> since any widget may use the same classes or names */</span>
|
||
<span class="preproc">#window</span><span class="symbol">-</span><span class="normal">name </span><span class="symbol">.</span><span class="normal">button</span><span class="symbol">,</span>
|
||
<span class="normal">GtkWindow#window</span><span class="symbol">-</span><span class="usertype">name</span><span class="normal"> <a href="GtkButton.html#GtkButton-struct">GtkButton</a></span><span class="symbol">.</span><span class="normal">button </span><span class="cbracket">{</span>
|
||
<span class="normal"> background</span><span class="symbol">-</span><span class="normal">color</span><span class="symbol">:</span><span class="normal"> #fff</span><span class="symbol">;</span>
|
||
<span class="cbracket">}</span></pre></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
</div>
|
||
<br class="example-break"><p>
|
||
One notable difference is the reduction from fg/bg/text/base colors
|
||
to only foreground/background, in exchange the widget is able to render
|
||
its various elements with different CSS classes, which can be themed
|
||
independently.
|
||
</p>
|
||
<p>
|
||
In the same vein, the light, dark and mid color variants that
|
||
were available in GtkStyle should be replaced by a combination of
|
||
symbolic colors and custom CSS, where necessary. text_aa should
|
||
really not be used anywhere, anyway, and the white and black colors
|
||
that were available in GtkStyle can just be replaced by literal
|
||
GdkRGBA structs.
|
||
</p>
|
||
<p>
|
||
Access to colors has also changed a bit. With <a class="link" href="GtkStyle.html" title="GtkStyle"><span class="type">GtkStyle</span></a>, the common
|
||
way to access colors is:
|
||
</p>
|
||
<div class="informalexample">
|
||
<table class="listing_frame" border="0" cellpadding="0" cellspacing="0">
|
||
<tbody>
|
||
<tr>
|
||
<td class="listing_lines" align="right"><pre>1
|
||
2
|
||
3
|
||
4
|
||
5</pre></td>
|
||
<td class="listing_code"><pre class="programlisting"><span class="usertype">GdkColor</span><span class="normal"> </span><span class="symbol">*</span><span class="normal">color1</span><span class="symbol">;</span>
|
||
<span class="usertype">GdkColor</span><span class="normal"> color2</span><span class="symbol">;</span>
|
||
|
||
<span class="normal">color1 </span><span class="symbol">=</span><span class="normal"> </span><span class="symbol">&</span><span class="normal">style</span><span class="symbol">-></span><span class="normal">bg</span><span class="symbol">[</span><span class="normal"><a href="GtkWidget.html#GTK-STATE-PRELIGHT:CAPS">GTK_STATE_PRELIGHT</a></span><span class="symbol">];</span>
|
||
<span class="function"><a href="GtkStyle.html#gtk-style-lookup-color">gtk_style_lookup_color</a></span><span class="normal"> </span><span class="symbol">(</span><span class="normal">style</span><span class="symbol">,</span><span class="normal"> </span><span class="string">"focus_color"</span><span class="symbol">,</span><span class="normal"> </span><span class="symbol">&</span><span class="normal">color2</span><span class="symbol">);</span></pre></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<p>
|
||
With <a class="link" href="GtkStyleContext.html" title="GtkStyleContext"><span class="type">GtkStyleContext</span></a>, you generally use <span class="type">GdkRGBA</span> instead of <span class="type">GdkColor</span>
|
||
and the code looks like this:
|
||
</p>
|
||
<div class="informalexample">
|
||
<table class="listing_frame" border="0" cellpadding="0" cellspacing="0">
|
||
<tbody>
|
||
<tr>
|
||
<td class="listing_lines" align="right"><pre>1
|
||
2
|
||
3
|
||
4
|
||
5
|
||
6
|
||
7
|
||
8
|
||
9
|
||
10
|
||
11</pre></td>
|
||
<td class="listing_code"><pre class="programlisting"><span class="usertype">GdkRGBA</span><span class="normal"> </span><span class="symbol">*</span><span class="normal">color1</span><span class="symbol">;</span>
|
||
<span class="usertype">GdkRGBA</span><span class="normal"> color2</span><span class="symbol">;</span>
|
||
|
||
<span class="function"><a href="GtkStyleContext.html#gtk-style-context-get">gtk_style_context_get</a></span><span class="normal"> </span><span class="symbol">(</span><span class="normal">context</span><span class="symbol">,</span><span class="normal"> <a href="gtk3-Standard-Enumerations.html#GTK-STATE-FLAG-PRELIGHT:CAPS">GTK_STATE_FLAG_PRELIGHT</a></span><span class="symbol">,</span>
|
||
<span class="normal"> </span><span class="string">"background-color"</span><span class="symbol">,</span><span class="normal"> </span><span class="symbol">&</span><span class="normal">color1</span><span class="symbol">,</span>
|
||
<span class="normal"> NULL</span><span class="symbol">);</span>
|
||
<span class="function"><a href="GtkStyleContext.html#gtk-style-context-lookup-color">gtk_style_context_lookup_color</a></span><span class="normal"> </span><span class="symbol">(</span><span class="normal">context</span><span class="symbol">,</span><span class="normal"> </span><span class="string">"focus_color"</span><span class="symbol">,</span><span class="normal"> </span><span class="symbol">&</span><span class="normal">color2</span><span class="symbol">);</span>
|
||
|
||
<span class="symbol">...</span>
|
||
|
||
<span class="function">gdk_rgba_free</span><span class="normal"> </span><span class="symbol">(</span><span class="normal">color1</span><span class="symbol">);</span></pre></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<p>
|
||
Note that the memory handling here is different: <a class="link" href="GtkStyleContext.html#gtk-style-context-get" title="gtk_style_context_get ()"><code class="function">gtk_style_context_get()</code></a>
|
||
expects the address of a GdkRGBA* and returns a newly allocated struct,
|
||
<a class="link" href="GtkStyleContext.html#gtk-style-context-lookup-color" title="gtk_style_context_lookup_color ()"><code class="function">gtk_style_context_lookup_color()</code></a> expects the address of an existing
|
||
struct, and fills it.
|
||
</p>
|
||
<p>
|
||
It is worth mentioning that the new file format does not support
|
||
stock icon mappings as the RC format did.
|
||
</p>
|
||
</div>
|
||
<div class="footer">
|
||
<hr>Generated by GTK-Doc V1.29</div>
|
||
</body>
|
||
</html> |