⚝
One Hat Cyber Team
⚝
Your IP:
216.73.216.10
Server IP:
157.245.101.34
Server:
Linux skvinfotech-website 5.4.0-131-generic #147-Ubuntu SMP Fri Oct 14 17:07:22 UTC 2022 x86_64
Server Software:
Apache/2.4.41 (Ubuntu)
PHP Version:
7.4.33
Buat File
|
Buat Folder
Eksekusi
Dir :
~
/
proc
/
self
/
root
/
usr
/
share
/
doc
/
libgtk-3-doc
/
gtk3
/
View File Name :
gtk-migrating-GtkStyleContext-css.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 V1.79.1"> <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.32 (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="n">style</span> <span class="s">"default"</span> <span class="p">{</span> <span class="n">xthickness</span> <span class="o">=</span> <span class="mi">1</span> <span class="n">ythickness</span> <span class="o">=</span> <span class="mi">1</span> <span class="n">GtkButton</span><span class="o">::</span><span class="n">child</span><span class="o">-</span><span class="n">displacement</span><span class="o">-</span><span class="n">x</span> <span class="o">=</span> <span class="mi">1</span> <span class="n">GtkButton</span><span class="o">::</span><span class="n">child</span><span class="o">-</span><span class="n">displacement</span><span class="o">-</span><span class="n">y</span> <span class="o">=</span> <span class="mi">1</span> <span class="n">GtkCheckButton</span><span class="o">::</span><span class="n">indicator</span><span class="o">-</span><span class="n">size</span> <span class="o">=</span> <span class="mi">14</span> <span class="n">bg</span><span class="p">[</span><span class="n">NORMAL</span><span class="p">]</span> <span class="o">=</span> <span class="err">@</span><span class="n">bg_color</span> <span class="n">bg</span><span class="p">[</span><span class="n">PRELIGHT</span><span class="p">]</span> <span class="o">=</span> <span class="n">shade</span> <span class="p">(</span><span class="mf">1.02</span><span class="p">,</span> <span class="err">@</span><span class="n">bg_color</span><span class="p">)</span> <span class="n">bg</span><span class="p">[</span><span class="n">SELECTED</span><span class="p">]</span> <span class="o">=</span> <span class="err">@</span><span class="n">selected_bg_color</span> <span class="n">bg</span><span class="p">[</span><span class="n">INSENSITIVE</span><span class="p">]</span> <span class="o">=</span> <span class="err">@</span><span class="n">bg_color</span> <span class="n">bg</span><span class="p">[</span><span class="n">ACTIVE</span><span class="p">]</span> <span class="o">=</span> <span class="n">shade</span> <span class="p">(</span><span class="mf">0.9</span><span class="p">,</span> <span class="err">@</span><span class="n">bg_color</span><span class="p">)</span> <span class="n">fg</span><span class="p">[</span><span class="n">NORMAL</span><span class="p">]</span> <span class="o">=</span> <span class="err">@</span><span class="n">fg_color</span> <span class="n">fg</span><span class="p">[</span><span class="n">PRELIGHT</span><span class="p">]</span> <span class="o">=</span> <span class="err">@</span><span class="n">fg_color</span> <span class="n">fg</span><span class="p">[</span><span class="n">SELECTED</span><span class="p">]</span> <span class="o">=</span> <span class="err">@</span><span class="n">selected_fg_color</span> <span class="n">fg</span><span class="p">[</span><span class="n">INSENSITIVE</span><span class="p">]</span> <span class="o">=</span> <span class="n">darker</span> <span class="p">(</span><span class="err">@</span><span class="n">bg_color</span><span class="p">)</span> <span class="n">fg</span><span class="p">[</span><span class="n">ACTIVE</span><span class="p">]</span> <span class="o">=</span> <span class="err">@</span><span class="n">fg_color</span> <span class="n">text</span><span class="p">[</span><span class="n">NORMAL</span><span class="p">]</span> <span class="o">=</span> <span class="err">@</span><span class="n">text_color</span> <span class="n">text</span><span class="p">[</span><span class="n">PRELIGHT</span><span class="p">]</span> <span class="o">=</span> <span class="err">@</span><span class="n">text_color</span> <span class="n">text</span><span class="p">[</span><span class="n">SELECTED</span><span class="p">]</span> <span class="o">=</span> <span class="err">@</span><span class="n">selected_fg_color</span> <span class="n">text</span><span class="p">[</span><span class="n">INSENSITIVE</span><span class="p">]</span> <span class="o">=</span> <span class="n">darker</span> <span class="p">(</span><span class="err">@</span><span class="n">bg_color</span><span class="p">)</span> <span class="n">text</span><span class="p">[</span><span class="n">ACTIVE</span><span class="p">]</span> <span class="o">=</span> <span class="err">@</span><span class="n">selected_fg_color</span> <span class="n">base</span><span class="p">[</span><span class="n">NORMAL</span><span class="p">]</span> <span class="o">=</span> <span class="err">@</span><span class="n">base_color</span> <span class="n">base</span><span class="p">[</span><span class="n">PRELIGHT</span><span class="p">]</span> <span class="o">=</span> <span class="n">shade</span> <span class="p">(</span><span class="mf">0.95</span><span class="p">,</span> <span class="err">@</span><span class="n">bg_color</span><span class="p">)</span> <span class="n">base</span><span class="p">[</span><span class="n">SELECTED</span><span class="p">]</span> <span class="o">=</span> <span class="err">@</span><span class="n">selected_bg_color</span> <span class="n">base</span><span class="p">[</span><span class="n">INSENSITIVE</span><span class="p">]</span> <span class="o">=</span> <span class="err">@</span><span class="n">bg_color</span> <span class="n">base</span><span class="p">[</span><span class="n">ACTIVE</span><span class="p">]</span> <span class="o">=</span> <span class="n">shade</span> <span class="p">(</span><span class="mf">0.9</span><span class="p">,</span> <span class="err">@</span><span class="n">selected_bg_color</span><span class="p">)</span> <span class="n">engine</span> <span class="s">"clearlooks"</span> <span class="p">{</span> <span class="n">colorize_scrollbar</span> <span class="o">=</span> <span class="n">TRUE</span> <span class="n">style</span> <span class="o">=</span> <span class="n">CLASSIC</span> <span class="p">}</span> <span class="p">}</span> <span class="n">style</span> <span class="s">"tooltips"</span> <span class="p">{</span> <span class="n">xthickness</span> <span class="o">=</span> <span class="mi">4</span> <span class="n">ythickness</span> <span class="o">=</span> <span class="mi">4</span> <span class="n">bg</span><span class="p">[</span><span class="n">NORMAL</span><span class="p">]</span> <span class="o">=</span> <span class="err">@</span><span class="n">tooltip_bg_color</span> <span class="n">fg</span><span class="p">[</span><span class="n">NORMAL</span><span class="p">]</span> <span class="o">=</span> <span class="err">@</span><span class="n">tooltip_fg_color</span> <span class="p">}</span> <span class="n">style</span> <span class="s">"button"</span> <span class="p">{</span> <span class="n">xthickness</span> <span class="o">=</span> <span class="mi">3</span> <span class="n">ythickness</span> <span class="o">=</span> <span class="mi">3</span> <span class="n">bg</span><span class="p">[</span><span class="n">NORMAL</span><span class="p">]</span> <span class="o">=</span> <span class="n">shade</span> <span class="p">(</span><span class="mf">1.04</span><span class="p">,</span> <span class="err">@</span><span class="n">bg_color</span><span class="p">)</span> <span class="n">bg</span><span class="p">[</span><span class="n">PRELIGHT</span><span class="p">]</span> <span class="o">=</span> <span class="n">shade</span> <span class="p">(</span><span class="mf">1.06</span><span class="p">,</span> <span class="err">@</span><span class="n">bg_color</span><span class="p">)</span> <span class="n">bg</span><span class="p">[</span><span class="n">ACTIVE</span><span class="p">]</span> <span class="o">=</span> <span class="n">shade</span> <span class="p">(</span><span class="mf">0.85</span><span class="p">,</span> <span class="err">@</span><span class="n">bg_color</span><span class="p">)</span> <span class="p">}</span> <span class="n">style</span> <span class="s">"entry"</span> <span class="p">{</span> <span class="n">xthickness</span> <span class="o">=</span> <span class="mi">3</span> <span class="n">ythickness</span> <span class="o">=</span> <span class="mi">3</span> <span class="n">bg</span><span class="p">[</span><span class="n">SELECTED</span><span class="p">]</span> <span class="o">=</span> <span class="n">mix</span> <span class="p">(</span><span class="mf">0.4</span><span class="p">,</span> <span class="err">@</span><span class="n">selected_bg_color</span><span class="p">,</span> <span class="err">@</span><span class="n">base_color</span><span class="p">)</span> <span class="n">fg</span><span class="p">[</span><span class="n">SELECTED</span><span class="p">]</span> <span class="o">=</span> <span class="err">@</span><span class="n">text_color</span> <span class="n">engine</span> <span class="s">"clearlooks"</span> <span class="p">{</span> <span class="n">focus_color</span> <span class="o">=</span> <span class="n">shade</span> <span class="p">(</span><span class="mf">0.65</span><span class="p">,</span> <span class="err">@</span><span class="n">selected_bg_color</span><span class="p">)</span> <span class="p">}</span> <span class="p">}</span> <span class="n">style</span> <span class="s">"other"</span> <span class="p">{</span> <span class="n">bg</span><span class="p">[</span><span class="n">NORMAL</span><span class="p">]</span> <span class="o">=</span> <span class="err">#</span><span class="n">fff</span><span class="p">;</span> <span class="p">}</span> <span class="n">class</span> <span class="s">"GtkWidget"</span> <span class="n">style</span> <span class="s">"default"</span> <span class="n">class</span> <span class="s">"GtkEntry"</span> <span class="n">style</span> <span class="s">"entry"</span> <span class="n">widget_class</span> <span class="s">"*<GtkButton>"</span> <span class="n">style</span> <span class="s">"button"</span> <span class="n">widget</span> <span class="s">"gtk-tooltip*"</span> <span class="n">style</span> <span class="s">"tooltips"</span> <span class="n">widget_class</span> <span class="s">"window-name.*.GtkButton"</span> <span class="n">style</span> <span class="s">"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="o">*</span> <span class="p">{</span> <span class="nl">padding</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span> <span class="o">-</span><span class="n">GtkButton</span><span class="o">-</span><span class="n">child</span><span class="o">-</span><span class="n">displacement</span><span class="o">-</span><span class="nl">x</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span> <span class="o">-</span><span class="n">GtkButton</span><span class="o">-</span><span class="n">child</span><span class="o">-</span><span class="n">displacement</span><span class="o">-</span><span class="nl">y</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span> <span class="o">-</span><span class="n">GtkCheckButton</span><span class="o">-</span><span class="n">indicator</span><span class="o">-</span><span class="nl">size</span><span class="p">:</span> <span class="mi">14</span><span class="p">;</span> <span class="n">background</span><span class="o">-</span><span class="nl">color</span><span class="p">:</span> <span class="err">@</span><span class="n">bg_color</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="err">@</span><span class="n">fg_color</span><span class="p">;</span> <span class="o">-</span><span class="n">Clearlooks</span><span class="o">-</span><span class="n">colorize</span><span class="o">-</span><span class="nl">scrollbar</span><span class="p">:</span> <span class="nb">true</span><span class="p">;</span> <span class="o">-</span><span class="n">Clearlooks</span><span class="o">-</span><span class="nl">style</span><span class="p">:</span> <span class="n">classic</span><span class="p">;</span> <span class="p">}</span> <span class="o">*:</span><span class="n">hover</span> <span class="p">{</span> <span class="n">background</span><span class="o">-</span><span class="nl">color</span><span class="p">:</span> <span class="n">shade</span> <span class="p">(</span><span class="err">@</span><span class="n">bg_color</span><span class="p">,</span> <span class="mf">1.02</span><span class="p">);</span> <span class="p">}</span> <span class="o">*:</span><span class="n">selected</span> <span class="p">{</span> <span class="n">background</span><span class="o">-</span><span class="nl">color</span><span class="p">:</span> <span class="err">@</span><span class="n">selected_bg_color</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="err">@</span><span class="n">selected_fg_color</span><span class="p">;</span> <span class="p">}</span> <span class="o">*:</span><span class="n">insensitive</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="n">shade</span> <span class="p">(</span><span class="err">@</span><span class="n">bg_color</span><span class="p">,</span> <span class="mf">0.7</span><span class="p">);</span> <span class="p">}</span> <span class="o">*:</span><span class="n">active</span> <span class="p">{</span> <span class="n">background</span><span class="o">-</span><span class="nl">color</span><span class="p">:</span> <span class="n">shade</span> <span class="p">(</span><span class="err">@</span><span class="n">bg_color</span><span class="p">,</span> <span class="mf">0.9</span><span class="p">);</span> <span class="p">}</span> <span class="p">.</span><span class="n">tooltip</span> <span class="p">{</span> <span class="nl">padding</span><span class="p">:</span> <span class="mi">4</span><span class="p">;</span> <span class="n">background</span><span class="o">-</span><span class="nl">color</span><span class="p">:</span> <span class="err">@</span><span class="n">tooltip_bg_color</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="err">@</span><span class="n">tooltip_fg_color</span><span class="p">;</span> <span class="p">}</span> <span class="p">.</span><span class="n">button</span> <span class="p">{</span> <span class="nl">padding</span><span class="p">:</span> <span class="mi">3</span><span class="p">;</span> <span class="n">background</span><span class="o">-</span><span class="nl">color</span><span class="p">:</span> <span class="n">shade</span> <span class="p">(</span><span class="err">@</span><span class="n">bg_color</span><span class="p">,</span> <span class="mf">1.04</span><span class="p">);</span> <span class="p">}</span> <span class="p">.</span><span class="nl">button</span><span class="p">:</span><span class="n">hover</span> <span class="p">{</span> <span class="n">background</span><span class="o">-</span><span class="nl">color</span><span class="p">:</span> <span class="n">shade</span> <span class="p">(</span><span class="err">@</span><span class="n">bg_color</span><span class="p">,</span> <span class="mf">1.06</span><span class="p">);</span> <span class="p">}</span> <span class="p">.</span><span class="nl">button</span><span class="p">:</span><span class="n">active</span> <span class="p">{</span> <span class="n">background</span><span class="o">-</span><span class="nl">color</span><span class="p">:</span> <span class="n">shade</span> <span class="p">(</span><span class="err">@</span><span class="n">bg_color</span><span class="p">,</span> <span class="mf">0.85</span><span class="p">);</span> <span class="p">}</span> <span class="p">.</span><span class="n">entry</span> <span class="p">{</span> <span class="nl">padding</span><span class="p">:</span> <span class="mi">3</span><span class="p">;</span> <span class="n">background</span><span class="o">-</span><span class="nl">color</span><span class="p">:</span> <span class="err">@</span><span class="n">base_color</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="err">@</span><span class="n">text_color</span><span class="p">;</span> <span class="p">}</span> <span class="p">.</span><span class="nl">entry</span><span class="p">:</span><span class="n">selected</span> <span class="p">{</span> <span class="n">background</span><span class="o">-</span><span class="nl">color</span><span class="p">:</span> <span class="n">mix</span> <span class="p">(</span><span class="err">@</span><span class="n">selected_bg_color</span><span class="p">,</span> <span class="err">@</span><span class="n">base_color</span><span class="p">,</span> <span class="mf">0.4</span><span class="p">);</span> <span class="o">-</span><span class="n">Clearlooks</span><span class="o">-</span><span class="n">focus</span><span class="o">-</span><span class="nl">color</span><span class="p">:</span> <span class="n">shade</span> <span class="p">(</span><span class="mf">0.65</span><span class="p">,</span> <span class="err">@</span><span class="n">selected_bg_color</span><span class="p">)</span> <span class="p">}</span> <span class="cm">/* The latter selector is an specification of the first,</span> <span class="cm"> since any widget may use the same classes or names */</span> <span class="cp">#window-name .button,</span> <span class="n">GtkWindow</span><span class="err">#</span><span class="n">window</span><span class="o">-</span><span class="n">name</span> <span class="n">GtkButton</span><span class="p">.</span><span class="n">button</span> <span class="p">{</span> <span class="n">background</span><span class="o">-</span><span class="nl">color</span><span class="p">:</span> <span class="err">#</span><span class="n">fff</span><span class="p">;</span> <span class="p">}</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="n">GdkColor</span> <span class="o">*</span><span class="n">color1</span><span class="p">;</span> <span class="n">GdkColor</span> <span class="n">color2</span><span class="p">;</span> <span class="n">color1</span> <span class="o">=</span> <span class="o">&</span><span class="n">style</span><span class="o">-></span><span class="n">bg</span><span class="p">[</span><span class="n">GTK_STATE_PRELIGHT</span><span class="p">];</span> <span class="n">gtk_style_lookup_color</span> <span class="p">(</span><span class="n">style</span><span class="p">,</span> <span class="s">"focus_color"</span><span class="p">,</span> <span class="o">&</span><span class="n">color2</span><span class="p">);</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 <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> 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="n">GdkRGBA</span> <span class="o">*</span><span class="n">color1</span><span class="p">;</span> <span class="n">GdkRGBA</span> <span class="n">color2</span><span class="p">;</span> <span class="n">gtk_style_context_get</span> <span class="p">(</span><span class="n">context</span><span class="p">,</span> <span class="n">GTK_STATE_FLAG_PRELIGHT</span><span class="p">,</span> <span class="s">"background-color"</span><span class="p">,</span> <span class="o">&</span><span class="n">color1</span><span class="p">,</span> <span class="nb">NULL</span><span class="p">);</span> <span class="n">gtk_style_context_lookup_color</span> <span class="p">(</span><span class="n">context</span><span class="p">,</span> <span class="s">"focus_color"</span><span class="p">,</span> <span class="o">&</span><span class="n">color2</span><span class="p">);</span> <span class="p">...</span> <span class="n">gdk_rgba_free</span> <span class="p">(</span><span class="n">color1</span><span class="p">);</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.32</div> </body> </html>