mirror of
https://github.com/gryf/pentadactyl-pm.git
synced 2025-12-28 13:22:25 +01:00
244 lines
12 KiB
XML
244 lines
12 KiB
XML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<?xml-stylesheet type="text/xsl" href="dactyl://content/help.xsl"?>
|
|
|
|
<!DOCTYPE document SYSTEM "dactyl://content/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> <oa>-link=<a>group</a>,…</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>
|
|
If <em>-link</em> (short name <em>-l</em>) is supplied, the value of
|
|
each of the listed groups is prepended to the style of this group.
|
|
</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>Find</dt> <dd>Text find highlighting. Only background and foreground colors apply.</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="CR"/></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>StatusLine</dt> <dd>The status bar</dd>
|
|
<dt>StatusLineNormal</dt> <dd>The status bar for an ordinary web page</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 name <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>-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 <t>site-filters</t> for which the style will
|
|
apply. Regular expression filters may not be used and the <tt>!</tt>
|
|
character may not be used to invert the sense of the match.
|
|
<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>-group=<a>group</a></dt>
|
|
<dd>The <t>group</t> to which to add this style. Please note that
|
|
this grouping is for semantic and cleanup purposes only. No
|
|
additional site filtering is applied.</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>
|
|
<strut/>
|
|
<spec>:dels<oa>tyle</oa><oa>!</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. With <oa>!</oa>, delete all styles.
|
|
If <oa>filter</oa> is provided, only matching elements of the
|
|
filter are disabled. For instance, when run with a filter
|
|
<str delim="">mozilla.org</str>, an existing style with a filter
|
|
<str delim="">www.google.com,mozilla.org</str>, will result in a style for
|
|
<str delim="">www.google.com</str>.
|
|
</p>
|
|
|
|
<p>The available options are:</p>
|
|
|
|
<dl>
|
|
<dt>-name</dt> <dd>The name provided to <ex>:style</ex> (short name <em>-n</em>)</dd>
|
|
<dt>-index</dt> <dd>For unnamed styles, the index listed by <ex>:style</ex>
|
|
(short name <em>-i</em>)</dd>
|
|
</dl>
|
|
</description>
|
|
</item>
|
|
|
|
<item>
|
|
<tags>:styleenable :stylee</tags>
|
|
<tags>:styenable :stye</tags>
|
|
<strut/>
|
|
<spec>:styled<oa>isable</oa><oa>!</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. With <oa>!</oa>, enable all 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>!</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. With <oa>!</oa>, disable all 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>!</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. With <oa>!</oa>, toggle all styles. Arguments are the same as for <ex>:delstyle</ex></p>
|
|
</description>
|
|
</item>
|
|
|
|
</document>
|
|
|
|
<!-- vim:se sts=4 sw=4 et: -->
|