New upstream version 3.23.2
This commit is contained in:
Andrea Azzarone
@ -3,12 +3,12 @@
|
||||
<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 V1.79.1">
|
||||
<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.27 (XML mode)">
|
||||
<meta name="generator" content="GTK-Doc V1.28 (XML mode)">
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
</head>
|
||||
<body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF">
|
||||
@ -34,160 +34,318 @@
|
||||
</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"><pre class="programlisting">
|
||||
style "default" {
|
||||
xthickness = 1
|
||||
ythickness = 1
|
||||
<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>
|
||||
|
||||
GtkButton::child-displacement-x = 1
|
||||
GtkButton::child-displacement-y = 1
|
||||
GtkCheckButton::indicator-size = 14
|
||||
<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>
|
||||
|
||||
bg[NORMAL] = @bg_color
|
||||
bg[PRELIGHT] = shade (1.02, @bg_color)
|
||||
bg[SELECTED] = @selected_bg_color
|
||||
bg[INSENSITIVE] = @bg_color
|
||||
bg[ACTIVE] = shade (0.9, @bg_color)
|
||||
<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>
|
||||
|
||||
fg[NORMAL] = @fg_color
|
||||
fg[PRELIGHT] = @fg_color
|
||||
fg[SELECTED] = @selected_fg_color
|
||||
fg[INSENSITIVE] = darker (@bg_color)
|
||||
fg[ACTIVE] = @fg_color
|
||||
<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>
|
||||
|
||||
text[NORMAL] = @text_color
|
||||
text[PRELIGHT] = @text_color
|
||||
text[SELECTED] = @selected_fg_color
|
||||
text[INSENSITIVE] = darker (@bg_color)
|
||||
text[ACTIVE] = @selected_fg_color
|
||||
<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>
|
||||
|
||||
base[NORMAL] = @base_color
|
||||
base[PRELIGHT] = shade (0.95, @bg_color)
|
||||
base[SELECTED] = @selected_bg_color
|
||||
base[INSENSITIVE] = @bg_color
|
||||
base[ACTIVE] = shade (0.9, @selected_bg_color)
|
||||
<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>
|
||||
|
||||
engine "clearlooks" {
|
||||
colorize_scrollbar = TRUE
|
||||
style = CLASSIC
|
||||
}
|
||||
}
|
||||
<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>
|
||||
|
||||
style "tooltips" {
|
||||
xthickness = 4
|
||||
ythickness = 4
|
||||
<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>
|
||||
|
||||
bg[NORMAL] = @tooltip_bg_color
|
||||
fg[NORMAL] = @tooltip_fg_color
|
||||
}
|
||||
<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>
|
||||
|
||||
style "button" {
|
||||
xthickness = 3
|
||||
ythickness = 3
|
||||
<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>
|
||||
|
||||
bg[NORMAL] = shade (1.04, @bg_color)
|
||||
bg[PRELIGHT] = shade (1.06, @bg_color)
|
||||
bg[ACTIVE] = shade (0.85, @bg_color)
|
||||
}
|
||||
<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>
|
||||
|
||||
style "entry" {
|
||||
xthickness = 3
|
||||
ythickness = 3
|
||||
<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>
|
||||
|
||||
bg[SELECTED] = mix (0.4, @selected_bg_color, @base_color)
|
||||
fg[SELECTED] = @text_color
|
||||
<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>
|
||||
|
||||
engine "clearlooks" {
|
||||
focus_color = shade (0.65, @selected_bg_color)
|
||||
}
|
||||
}
|
||||
<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>
|
||||
|
||||
style "other" {
|
||||
bg[NORMAL] = #fff;
|
||||
}
|
||||
<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>
|
||||
|
||||
class "GtkWidget" style "default"
|
||||
class "GtkEntry" style "entry"
|
||||
widget_class "*<GtkButton>" style "button"
|
||||
widget "gtk-tooltip*" style "tooltips"
|
||||
widget_class "window-name.*.GtkButton" style "other"
|
||||
</pre></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"><pre class="programlisting">
|
||||
* {
|
||||
padding: 1;
|
||||
-GtkButton-child-displacement-x: 1;
|
||||
-GtkButton-child-displacement-y: 1;
|
||||
-GtkCheckButton-indicator-size: 14;
|
||||
<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>
|
||||
|
||||
background-color: @bg_color;
|
||||
color: @fg_color;
|
||||
<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>
|
||||
|
||||
-Clearlooks-colorize-scrollbar: true;
|
||||
-Clearlooks-style: classic;
|
||||
}
|
||||
<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>
|
||||
|
||||
*:hover {
|
||||
background-color: shade (@bg_color, 1.02);
|
||||
}
|
||||
<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>
|
||||
|
||||
*:selected {
|
||||
background-color: @selected_bg_color;
|
||||
color: @selected_fg_color;
|
||||
}
|
||||
<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>
|
||||
|
||||
*:insensitive {
|
||||
color: shade (@bg_color, 0.7);
|
||||
}
|
||||
<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>
|
||||
|
||||
*:active {
|
||||
background-color: shade (@bg_color, 0.9);
|
||||
}
|
||||
<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>
|
||||
|
||||
.tooltip {
|
||||
padding: 4;
|
||||
<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>
|
||||
|
||||
background-color: @tooltip_bg_color;
|
||||
color: @tooltip_fg_color;
|
||||
}
|
||||
<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>
|
||||
|
||||
.button {
|
||||
padding: 3;
|
||||
background-color: shade (@bg_color, 1.04);
|
||||
}
|
||||
<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>
|
||||
|
||||
.button:hover {
|
||||
background-color: shade (@bg_color, 1.06);
|
||||
}
|
||||
<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>
|
||||
|
||||
.button:active {
|
||||
background-color: shade (@bg_color, 0.85);
|
||||
}
|
||||
<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>
|
||||
|
||||
.entry {
|
||||
padding: 3;
|
||||
<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>
|
||||
|
||||
background-color: @base_color;
|
||||
color: @text_color;
|
||||
}
|
||||
<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>
|
||||
|
||||
.entry:selected {
|
||||
background-color: mix (@selected_bg_color, @base_color, 0.4);
|
||||
-Clearlooks-focus-color: shade (0.65, @selected_bg_color)
|
||||
}
|
||||
<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>
|
||||
|
||||
/* The latter selector is an specification of the first,
|
||||
since any widget may use the same classes or names */
|
||||
#window-name .button,
|
||||
GtkWindow#window-name GtkButton.button {
|
||||
background-color: #fff;
|
||||
}
|
||||
</pre></div>
|
||||
</div>
|
||||
<br class="example-break"><p>
|
||||
One notable difference is the reduction from fg/bg/text/base colors
|
||||
@ -207,30 +365,60 @@
|
||||
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"><pre class="programlisting">
|
||||
GdkColor *color1;
|
||||
GdkColor color2;
|
||||
<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>
|
||||
|
||||
color1 = &style->bg[GTK_STATE_PRELIGHT];
|
||||
gtk_style_lookup_color (style, "focus_color", &color2);
|
||||
</pre></div>
|
||||
<p>
|
||||
With <a class="link" href="GtkStyleContext.html" title="GtkStyleContext"><span class="type">GtkStyleContext</span></a>, you generally use <a href="../html/gdk3-RGBA-Colors.html#GdkRGBA"><span class="type">GdkRGBA</span></a> instead of <a href="../html/gdk3-Colors.html#GdkColor"><span class="type">GdkColor</span></a>
|
||||
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"><pre class="programlisting">
|
||||
GdkRGBA *color1;
|
||||
GdkRGBA color2;
|
||||
<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>
|
||||
|
||||
gtk_style_context_get (context, GTK_STATE_FLAG_PRELIGHT,
|
||||
"background-color", &color1,
|
||||
NULL);
|
||||
gtk_style_context_lookup_color (context, "focus_color", &color2);
|
||||
<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>
|
||||
|
||||
gdk_rgba_free (color1);
|
||||
</pre></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,
|
||||
@ -243,6 +431,6 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<hr>Generated by GTK-Doc V1.27</div>
|
||||
<hr>Generated by GTK-Doc V1.28</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user