summaryrefslogtreecommitdiff
path: root/common/locale/en-US/styling.xml
blob: b19d35f864f80dfcb1a090713ad7a2f7b8d441fc (plain)
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="chrome://dactyl/content/help.xsl"?>

<!DOCTYPE document SYSTEM "chrome://dactyl/content/help.dtd">

<document
    name="styling"
    title="&dactyl.appName; Styling"
    xmlns="&xmlns.dactyl;"
    xmlns:html="&xmlns.html;">

<h1 tag="styling">Styling the GUI and web pages</h1>
<toc start="2"/>

<p>
    &dactyl.appName; allows you to apply custom CSS styling to the web pages
    you view as well as to the browser itself. Although it is possible to
    style any user interface element via the <ex>:style</ex> command, most
    &dactyl.appName; elements can be styled more easily by means of the
    more specialized <ex>:highlight</ex> command.
</p>

<item>
    <tags>E185 :colo :colorscheme</tags>
    <spec>:colo<oa>rscheme</oa> <a>name</a></spec>
    <description>
        <p>
            Load a color scheme. <a>name</a> is found by searching the <o>runtimepath</o> for the
            first file matching <tt>colors/<a>name</a>.&dactyl.fileExt;</tt>.
        </p>

        <p>
            The ColorScheme autocommand is triggered after the color scheme has been
            sourced.
        </p>
    </description>
</item>

<item>
    <tags>:hi :highlight</tags>
    <spec>:hi<oa>ghlight</oa><oa>!</oa> <a>group</a><oa>selector</oa></spec>
    <spec>:hi<oa>ghlight</oa><oa>!</oa> <oa>-append</oa> <a>group</a><oa>selector</oa> <oa>css</oa></spec>
    <description>
        <p>
            Highlight <a>group</a> with <oa>css</oa>. <oa>css</oa> is one or more
            semicolon-separated CSS declarations (E.g. <em>color: blue;
            background-color: red</em>). <oa>selector</oa>, if provided, may
            be any valid CSS selector (such as <em>:hover</em> or
            <em>[href]</em>), and will restrict the highlighting to matching
            elements.
        </p>

        <p>Valid groups include:</p>

        <dl>
            <dt>Bell</dt>              <dd>&dactyl.appName;'s visual bell</dd>
            <dt>Boolean</dt>           <dd>A JavaScript Boolean object</dd>
            <dt>CmdLine</dt>           <dd>The command line</dd>
            <dt>CmdOutput</dt>         <dd>The output of commands executed by <ex>:run</ex></dd>
            <dt>CompDesc</dt>          <dd>The description column of the completion list</dd>
            <dt>CompGroup</dt>         <dd>The top-level container for a group of completion results</dd>
            <dt>CompIcon</dt>          <dd>The favicon of a completion row</dd>
            <dt>CompItem</dt>          <dd>A row of completion list</dd>
            <dt>CompItem[selected]</dt><dd>    A selected row of completion list</dd>
            <dt>CompLess::after</dt>   <dd>The character of indicator shown when completions may be scrolled up</dd>
            <dt>CompLess</dt>          <dd>The indicator shown when completions may be scrolled up</dd>
            <dt>CompMore::after</dt>   <dd>The character of indicator shown when completions may be scrolled down</dd>
            <dt>CompMore</dt>          <dd>The indicator shown when completions may be scrolled down</dd>
            <dt>CompMsg</dt>           <dd>The message which may appear at the top of a group of completion results</dd>
            <dt>CompResult</dt>        <dd>The result column of the completion list</dd>
            <dt>CompTitle</dt>         <dd>Completion row titles</dd>
            <dt>CompTitleSep</dt>      <dd>The element which separates the completion title from its results</dd>
            <dt>Disabled</dt>          <dd>Text indicating disabled status, such as of an extension or style group</dd>
            <dt>Enabled</dt>           <dd>Text indicating enabled status, such as of an extension or style group</dd>
            <dt>ErrorMsg</dt>          <dd>Error messages</dd>
            <dt>Filter</dt>            <dd>The matching text in a completion list</dd>
            <dt>FrameIndicator</dt>    <dd>The indicator shown when a new frame is selected</dd>
            <dt>Function</dt>          <dd>A JavaScript Function object</dd>
            <dt>Hint</dt>              <dd>A hint indicator. See <ex>:help hints</ex></dd>
            <dt>HintActive</dt>        <dd>The hint element of link which will be followed by <k name="Return"/></dd>
            <dt>HintElem</dt>          <dd>The hintable element</dd>
            <dt>HintImage</dt>         <dd>The indicator which floats above hinted images</dd>
            <dt>Indicator</dt>         <dd>The <em>#</em> and  <em>%</em> in the <ex>:buffers</ex> list</dd>
            <dt>InfoMsg</dt>           <dd>Information messages</dd>
            <dt>Key</dt>               <dd>Generally a keyword used in syntax highlighting.</dd>
            <dt>Keyword</dt>           <dd>A bookmark keyword for a URL</dd>
            <dt>LineNr</dt>            <dd>The line number of an error</dd>
            <dt>Message</dt>           <dd>A message as displayed in <ex>:messages</ex></dd>
            <dt>ModeMsg</dt>           <dd>The mode indicator in the command line</dd>
            <dt>MoreMsg</dt>           <dd>The indicator that there is more text to view</dd>
            <dt>NonText</dt>           <dd>The <em>~</em> indicators which mark blank lines in the completion list</dd>
            <dt>Normal</dt>            <dd>Normal text in the command line</dd>
            <dt>Null</dt>              <dd>A JavaScript Null object</dd>
            <dt>Number</dt>            <dd>A JavaScript Number object</dd>
            <dt>Object</dt>            <dd>A JavaScript Object</dd>
            <dt>Preview</dt>           <dd>The completion preview displayed in the &tag.command-line;</dd>
            <dt>Question</dt>          <dd>A prompt for a decision</dd>
            <dt>Search</dt>            <dd>Highlighted search results in a web page</dd>
            <dt>StatusLine</dt>        <dd>The status bar</dd>
            <dt>StatusLineBroken</dt>  <dd>The status bar for a broken web page</dd>
            <dt>StatusLineExtended</dt><dd>    The status bar for a secure web page with an Extended Validation (EV) certificate</dd>
            <dt>StatusLineSecure</dt>  <dd>The status bar for a secure web page</dd>
            <dt>String</dt>            <dd>A JavaScript String object</dd>
            <dt>TabClose</dt>          <dd>The close button of a browser tab</dd>
            <dt>TabIcon</dt>           <dd>The icon of a browser tab</dd>
            <dt>TabIconNumber</dt>     <dd>The number of a browser tab, over its icon</dd>
            <dt>TabNumber</dt>         <dd>The number of a browser tab, next to its icon</dd>
            <dt>TabText</dt>           <dd>The text of a browser tab</dd>
            <dt>Tag</dt>               <dd>A bookmark tag for a URL</dd>
            <dt>Title</dt>             <dd>The title of a listing, including <ex>:pageinfo</ex>, <ex>:jumps</ex></dd>
            <dt>URL</dt>               <dd>A URL</dd>
            <dt>WarningMsg</dt>        <dd>A warning message</dd>
        </dl>

        <p>
            The help system also has a comprehensive set of styling groups
            which are not explained here, but many of which are described
            along with <t>writing-docs</t>.
        </p>

        <p>
            Every invocation completely replaces the styling of any previous
            invocation, unless <em>-append</em> (short option: <em>-a</em>) is
            provided, in which case <a>css</a> is appended to its current
            value. If <a>css</a> is not provided, any styles beginning with
            <a>group</a> are listed.
        </p>
    </description>
</item>

<item>
    <tags>:highlight-clear</tags>
    <spec>:hi<oa>ghlight</oa> clear <oa>group</oa></spec>
    <description>
        <p>
            Reset the highlighting for <oa>group</oa> to its default value. If
            <oa>group</oa> is not given, reset all highlighting groups.
        </p>
    </description>
</item>

<item>
    <tags>:sty :style</tags>
    <spec>:sty<oa>le</oa><oa>!</oa> <oa>-name=<a>name</a></oa> <oa>-append</oa> <a>filter</a> <oa>css</oa></spec>
    <description>
        <p>
            Add CSS styles to the browser or to web pages. <a>filter</a> is a comma-separated
            list of URLs to match. URLs ending with <em>*</em> are matched as prefixes, URLs not
            containing any <em>:</em> or <em>/</em> characters are matched as domains. <oa>css</oa> is a full
            CSS rule set (e.g., <tt>body { color: blue; }</tt>).
        </p>

        <p>The following options are available:</p>
        <dl>
            <dt>-append</dt>
            <dd>If provided along with <em>-name</em>, <oa>css</oa> and
                <a>filter</a> are appended to its current value. (short name: <em>-a</em>)</dd>

            <dt>-agent</dt>
            <dd>If provided, the style is installed as an Agent sheet, which
                applies to contents user interface widgets as well as normal
                elements. (short name <em>-A</em>)</dd>

            <dt>-name=<a>name</a></dt>
            <dd>If provided, any existing style with the same name is overridden, and the style may later be deleted using <a>name</a>.
                (short name <em>-n</em>)</dd>

        </dl>

        <p>If <oa>css</oa> isn't provided, matching styles are listed.</p>
    </description>
</item>

<item>
    <tags>:dels :delstyle</tags>
    <spec>:dels<oa>tyle</oa> <oa>-name=<a>name</a></oa> <oa>-index=<a>index</a></oa> <oa>filter</oa> <oa>css</oa></spec>
    <description>
        <p>
            Delete any matching styles. If <oa>filter</oa> is provided, only
            matching elements of the filter are disabled. For instance, when
            run with a filter <str>mozilla.org</str>, an existing style with a
            filter <str>www.google.com,mozilla.org</str>, will result in a
            style for <str>www.google.com</str>.
        </p>

        <p>The available options are:</p>

        <dl>
            <dt>-name</dt>  <dd>The name provided to <ex>:style</ex> (short option: <em>-n</em>)</dd>
            <dt>-index</dt> <dd>For unnamed styles, the index listed by <ex>:style</ex>
                (short option: <em>-i</em>)</dd>
        </dl>
    </description>
</item>

<item>
    <tags>:styleenable :stylee</tags>
    <tags>:styenable :stye</tags>
    <strut/>
    <spec>:styled<oa>isable</oa> <oa>-name=<a>name</a></oa> <oa>-index=<a>index</a></oa> <oa>filter</oa> <oa>css</oa></spec>
    <description>
        <p>Enable any matching styles. Arguments are the same as for <ex>:delstyle</ex></p>
    </description>
</item>

<item>
    <tags>:styledisable :styled</tags>
    <tags>:stydisable :styd</tags>
    <strut/>
    <spec>:stylee<oa>nable</oa> <oa>-name=<a>name</a></oa> <oa>-index=<a>index</a></oa> <oa>filter</oa> <oa>css</oa></spec>
    <description>
        <p>Disable any matching styles. Arguments are the same as for <ex>:delstyle</ex></p>
    </description>
</item>

<item>
    <tags>:styletoggle :stylet</tags>
    <tags>:stytoggle :styt</tags>
    <strut/>
    <spec>:stylet<oa>oggle</oa> <oa>-name=<a>name</a></oa> <oa>-index=<a>index</a></oa> <oa>filter</oa> <oa>css</oa></spec>
    <description>
        <p>Toggle any matching styles. Arguments are the same as for <ex>:delstyle</ex></p>
    </description>
</item>

</document>

<!-- vim:se sts=4 sw=4 et: -->