diff options
author | Dave Davenport <qball@gmpclient.org> | 2017-01-16 08:41:17 +0100 |
---|---|---|
committer | Dave Davenport <qball@gmpclient.org> | 2017-01-16 08:41:17 +0100 |
commit | 8f1b8b18d84a175f58e24c8d5509e3ad8516aee2 (patch) | |
tree | 4d58ff06e48c2f27281bcade574ff995da82f80e /doc | |
parent | 30f7846e4c106957709cc4039068f1d57f1587d7 (diff) |
Add some examples to the themer.md.
Diffstat (limited to 'doc')
-rw-r--r-- | doc/themer.md | 348 |
1 files changed, 347 insertions, 1 deletions
diff --git a/doc/themer.md b/doc/themer.md index 18eb960b..2c528e0c 100644 --- a/doc/themer.md +++ b/doc/themer.md @@ -19,7 +19,7 @@ Both unix ('\n') and windows ('\r\n') newlines format are supported. But unix is C and C++ file comments are support. * Anything after `// ` and before a newline is considered a comment. -* Everything between `/*` and `*/` are a comment. +* Everything between `/*` and `*/` is a comment. Comments can be nested and inline. @@ -53,6 +53,11 @@ name ; ``` +### File extension + +The prefered file extension for the new theme format is *rasi*. This is an abbriviation for **r**ofi **a**advanced +**s**tyle **i**nformation (Or the nick of the user that helped form the new specification). + ### Basic Structure The file is structured like: @@ -421,3 +426,344 @@ The following properties are currently supports: * cycle: boolean * spacing: distance + +## Examples + +### Arthur + +A simple theme showing basic theming and transparent background: + +```css +* { + foreground: #ffeedd; + background: rgba(0,0,0,0); + dark: #1c1c1c; + // Black + black: #3d352a; + lightblack: #554444; + // + // Red + red: #cd5c5c; + lightred: #cc5533; + // + // Green + green: #86af80; + lightgreen: #88cc22; + // + // Yellow + yellow: #e8ae5b; + lightyellow: #ffa75d; + // + // Blue + blue: #6495ed; + lightblue: #87ceeb; + // + // Magenta + magenta: #deb887; + lightmagenta: #996600; + // + // Cyan + cyan: #b0c4de; + lightcyan: #b0c4de; + // + // White + white: #bbaa99; + lightwhite: #ddccbb; + // + // Bold, Italic, Underline + highlight: bold #ffffff; +} +#window { + location: center; + anchor: north; + y-offset: -5em; +} +#window box { + padding: 10px; + border: 1px; + foreground: @magenta; + background: #cc1c1c1c; +} + +#window mainbox inputbar { + background: @lightblack; + text: @lightgreen; + padding: 4px; +} +#window mainbox inputbar box { + border: 0px 0px 2px 0px; +} +#window mainbox box { + spacing: 0.3em; +} + +#window mainbox listview { + dynamic: false; +} +#window mainbox listview element selected normal { + background: @blue; +} +#window mainbox listview element normal active { + foreground: @lightblue; +} +#window mainbox listview element normal urgent { + foreground: @lightred; +} +#window mainbox listview element alternate normal { +} +#window mainbox listview element alternate active { + foreground: @lightblue; +} +#window mainbox listview element alternate urgent { + foreground: @lightred; +} +#window mainbox listview element selected active { + background: @lightblue; + foreground: @dark; +} +#window mainbox listview element selected urgent { + background: @lightred; + foreground: @dark; +} +#window mainbox listview element normal normal { + +} +``` + +### Sidebar + +The previous theme modified to behave like a sidebar, positioned on the left of the screen. + +```css +* { + foreground: #ffeedd; + background: rgba(0,0,0,0); + dark: #1c1c1c; + // Black + black: #3d352a; + lightblack: #554444; + // + // Red + red: #cd5c5c; + lightred: #cc5533; + // + // Green + green: #86af80; + lightgreen: #88cc22; + // + // Yellow + yellow: #e8ae5b; + lightyellow: #ffa75d; + // + // Blue + blue: #6495ed; + lightblue: #87ceeb; + // + // Magenta + magenta: #deb887; + lightmagenta: #996600; + // + // Cyan + cyan: #b0c4de; + lightcyan: #b0c4de; + // + // White + white: #bbaa99; + lightwhite: #ddccbb; + // + // Bold, Italic, Underline + highlight: bold #ffffff; +} +#window { + width: 30em; + location: west; + anchor: west; +} +#window box { + border: 0px 2px 0px 0px; + foreground: @lightwhite; + background: #ee1c1c1c; +} + +#window mainbox sidebar box { + border: 2px 0px 0px 0px; + background: @lightblack; + padding: 10px; +} +#window mainbox sidebar selected { + foreground: @lightgreen; + text: @lightgreen; +} +#window mainbox inputbar { + background: @lightblack; + text: @lightgreen; + padding: 4px; +} +#window mainbox inputbar box { + border: 0px 0px 2px 0px; +} +#window mainbox box { + spacing: 1em; +} +#window mainbox listview box { + padding: 0em 0.4em 0em 1em; +} +#window mainbox listview { + dynamic: false; + lines: 0; +} +#window mainbox listview element selected normal { + background: @blue; +} +#window mainbox listview element normal active { + foreground: @lightblue; +} +#window mainbox listview element normal urgent { + foreground: @lightred; +} +#window mainbox listview element alternate normal { +} +#window mainbox listview element alternate active { + foreground: @lightblue; +} +#window mainbox listview element alternate urgent { + foreground: @lightred; +} +#window mainbox listview element selected active { + background: @lightblue; + foreground: @dark; +} +#window mainbox listview element selected urgent { + background: @lightred; + foreground: @dark; +} +#window mainbox listview element normal normal { + +} + +``` + +### Paper Float + +A theme that shows a floating inputbar. + +> TODO: cleanup this theme. + +```css + +* { + blue: #0000FF; + white: #FFFFFF; + black: #000000; + grey: #eeeeee; + + spacing: 2; + background: #00000000; + anchor: north; + location: center; +} +#window { + transparency: "screenshot"; + background: #00000000; + border: 0; + padding: 0% 0% 1em 0%; + foreground: #FF444444; + x-offset: 0; + y-offset: -10%; +} +#window.mainbox { + padding: 0px; +} +#window.mainbox.box { + border: 0; + spacing: 1%; +} +#window.mainbox.message.box { + border: 2px; + padding: 1em; + background: @white; + foreground: @back; +} +#window.mainbox.message.normal { + foreground: #FF002B36; + padding: 0; + border: 0; +} +#window.mainbox.listview { + fixed-height: 1; + border: 2px; + padding: 1em; + reverse: false; + + columns: 1; + background: @white; +} +#window.mainbox.listview.element { + border: 0; + padding: 2px; + highlight: bold ; +} +#window.mainbox.listview.element.normal.normal { + foreground: #FF002B36; + background: #00F5F5F5; +} +#window.mainbox.listview.element.normal.urgent { + foreground: #FFD75F00; + background: #FFF5F5F5; +} +#window.mainbox.listview.element.normal.active { + foreground: #FF005F87; + background: #FFF5F5F5; +} +#window.mainbox.listview.element.selected.normal { + foreground: #FFF5F5F5; + background: #FF4271AE; +} +#window.mainbox.listview.element.selected.urgent { + foreground: #FFF5F5F5; + background: #FFD75F00; +} +#window.mainbox.listview.element.selected.active { + foreground: #FFF5F5F5; + background: #FF005F87; +} +#window.mainbox.listview.element.alternate.normal { + foreground: #FF002B36; + background: #FFD0D0D0; +} +#window.mainbox.listview.element.alternate.urgent { + foreground: #FFD75F00; + background: #FFD0D0D0; +} +#window.mainbox.listview.element.alternate.active { + foreground: #FF005F87; + background: #FFD0D0D0; +} +#window.mainbox.listview.scrollbar { + border: 0; + padding: 0; +} +#window.mainbox.inputbar { + spacing: 0; +} +#window.mainbox.inputbar.box { + border: 2px; + padding: 0.5em 1em; + background: @grey; + index: 0; +} +#window.mainbox.inputbar.normal { + foreground: #FF002B36; + background: #00F5F5F5; +} + +#window.mainbox.sidebar.box { + border: 2px; + padding: 0.5em 1em; + background: @grey; + index: 10; +} +#window.mainbox.sidebar.button selected { + text: #FF4271AE; +} +``` |