mirror of https://github.com/davatorium/rofi.git
Remove old theme documentation. rofi-themes(5) manpage is now leading.
This commit is contained in:
Dave Davenport
parent
3e060fa549
commit
9f831b9369
|
|
@ -1,17 +0,0 @@
|
|||
# Convert old themes to the new format
|
||||
|
||||
**Rofi** 1.4 can still read in and convert the old theme format. To read the old format, convert it, and dump it into a
|
||||
new file run:
|
||||
|
||||
```bash
|
||||
rofi -config {old theme} -dump-theme > new_theme.rasi
|
||||
```
|
||||
|
||||
This gives a very basic theme, with the colors from the old theme.
|
||||
You can preview the theme using:
|
||||
|
||||
```bash
|
||||
rofi -theme new_theme.rasi -show run
|
||||
```
|
||||
|
||||
> Note: support for named colors has been dropped.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 805 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 626 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 663 KiB |
|
|
@ -1,7 +0,0 @@
|
|||
# Rofi Advanced Style Information
|
||||
|
||||
**rasi** is **rofi**'s new theme format (theme format version 3).
|
||||
|
||||
* [Specification](specification.md)
|
||||
* [Tutorial](tutorial.md)
|
||||
* [Covert old themes](convert.md)
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 77 KiB |
|
|
@ -1,855 +0,0 @@
|
|||
# Theme format 3.0
|
||||
|
||||
The way rofi handled widgets has changed in the last few releases. Widgets are now
|
||||
put into containers, allowing themes to be much more flexible than before.
|
||||
To expose these new theming abilities a new theming format has been created, replacing the old one.
|
||||
It is loosely based on [css](https://en.wikipedia.org/wiki/Cascading_Style_Sheets), a format
|
||||
widely known, which allows e.g. web developers to create their own rofi themes without learning
|
||||
a new markup.
|
||||
|
||||
This file is split up into 3 sections:
|
||||
|
||||
1. Specification of the file format
|
||||
2. List of possible options
|
||||
3. Examples
|
||||
|
||||
## File Format Specification
|
||||
|
||||
### Encoding
|
||||
|
||||
The encoding of the file is utf-8. Both unix (`\n`) and windows (`\r\n`)
|
||||
newlines format are supported. But unix is preferred.
|
||||
|
||||
### Comments
|
||||
|
||||
C and C++ file comments are support.
|
||||
|
||||
* Anything after `// ` and before a newline is considered a comment.
|
||||
* Everything between `/*` and `*/` is a comment.
|
||||
|
||||
Comments can be nested and the C comments can be inline.
|
||||
|
||||
The following is valid:
|
||||
```css
|
||||
// Magic comment.
|
||||
property: /* comment */ value;
|
||||
```
|
||||
|
||||
However this is not:
|
||||
```css
|
||||
prop/*comment*/erty: value;
|
||||
```
|
||||
|
||||
### White space
|
||||
|
||||
White space and newlines, like comments, are ignored by the parser.
|
||||
|
||||
This:
|
||||
|
||||
```css
|
||||
property: name;
|
||||
```
|
||||
|
||||
Is identical to:
|
||||
|
||||
```css
|
||||
property :
|
||||
name
|
||||
|
||||
;
|
||||
```
|
||||
|
||||
### File extension
|
||||
|
||||
The preferred file extension for the new theme format is **rasi**. This is an
|
||||
abbreviation for **r**ofi **a**dvanced **s**tyle **i**nformation.
|
||||
|
||||
### Basic Structure
|
||||
|
||||
Each element has a section with defined properties. Properties can be inherited
|
||||
to sub-sections. Global properties can be defined in section `* { }`.
|
||||
Sub-section names begin with a hash symbol `#`.
|
||||
|
||||
It is advised to define the *global properties section* on top of the file to
|
||||
make inheritance of properties clearer.
|
||||
|
||||
```
|
||||
/* Global properties section */
|
||||
* {
|
||||
// list of properties
|
||||
}
|
||||
|
||||
/* Element theme section. */
|
||||
#{element path} {
|
||||
// list of properties
|
||||
}
|
||||
#{elements... } {
|
||||
// list of properties
|
||||
}
|
||||
```
|
||||
|
||||
#### Global properties section
|
||||
|
||||
A theme can have one or more global properties sections (If there is more than one
|
||||
they will be merged)
|
||||
|
||||
The global properties section denotes the defaults for each element.
|
||||
Each property of this section can be referenced with `@{identifier}`
|
||||
(See Properties section)
|
||||
|
||||
#### Element theme section
|
||||
|
||||
A theme can have multiple element theme sections.
|
||||
|
||||
The element path can consist of multiple names separated by whitespace or dots.
|
||||
Each element may contain any number of letters, numbers and '-'.
|
||||
The first element should always start with a `#`.
|
||||
|
||||
This is a valid element name:
|
||||
|
||||
```css
|
||||
#window mainbox listview element normal.normal {
|
||||
}
|
||||
```
|
||||
|
||||
And is identical to:
|
||||
|
||||
```css
|
||||
#window.mainbox.listview.element normal.normal {
|
||||
}
|
||||
```
|
||||
|
||||
Each section inherits the properties of its parents. Inherited properties
|
||||
can be overridden by defining them again in the section itself.
|
||||
So `#window mainbox` will contain all properties of `#window` and `#window
|
||||
mainbox`.
|
||||
|
||||
In the following example:
|
||||
|
||||
```css
|
||||
#window {
|
||||
a: 1;
|
||||
b: 2;
|
||||
}
|
||||
#window mainbox {
|
||||
b: 4;
|
||||
c: 8;
|
||||
}
|
||||
```
|
||||
|
||||
The element `#window mainbox` will have the following set of properties:
|
||||
|
||||
```css
|
||||
a: 1;
|
||||
b: 4;
|
||||
c: 8;
|
||||
```
|
||||
|
||||
If multiple sections are defined with the same name, they are merged by the
|
||||
parser. If multiple properties with the same name are defined in one section,
|
||||
the last encountered property is used.
|
||||
|
||||
#### Properties
|
||||
|
||||
The properties in a section consist of:
|
||||
|
||||
```css
|
||||
{identifier}: {value};
|
||||
```
|
||||
|
||||
Both fields are manditory for a property.
|
||||
|
||||
The `identifier` names the specified property. Identifiers can consist of any
|
||||
combination of numbers, letters and '-'. It must not contain any whitespace.
|
||||
The structure of the `value` defines the type of the property.
|
||||
|
||||
The current theme format support different type:
|
||||
|
||||
* a string.
|
||||
* an integer number.
|
||||
* a fractional number.
|
||||
* a boolean value.
|
||||
* a color.
|
||||
* text style.
|
||||
* *line style*.
|
||||
* a distance.
|
||||
* a padding.
|
||||
* a border.
|
||||
* a position.
|
||||
* a reference.
|
||||
|
||||
Some of these types are a combination of other types.
|
||||
|
||||
##### String
|
||||
|
||||
* Format: `"[:print:]+"`
|
||||
|
||||
A string is always surrounded by quotes ('"'), between the quotes it can have any printable character.
|
||||
|
||||
For example:
|
||||
|
||||
```css
|
||||
font: "Awasome 12";
|
||||
```
|
||||
|
||||
###### Integer
|
||||
|
||||
* Format: `[-+]?[:digit:]+`
|
||||
|
||||
An integer may contain any number.
|
||||
|
||||
For examples:
|
||||
|
||||
```css
|
||||
lines: 12;
|
||||
```
|
||||
|
||||
##### Real
|
||||
|
||||
* Format: `[-+]?[:digit:]+(\.[:digit:]+)?`
|
||||
|
||||
A real is an integer with an optional fraction.
|
||||
|
||||
For example:
|
||||
|
||||
```css
|
||||
real: 3.4;
|
||||
```
|
||||
|
||||
The following is not valid: `.3`, `3.` or scientific notation: `3.4e-3`.
|
||||
|
||||
##### Boolean
|
||||
|
||||
* Format: `(true|false)`
|
||||
|
||||
Boolean value is either `true` or `false`. This is case-sensitive.
|
||||
|
||||
|
||||
For example:
|
||||
|
||||
```css
|
||||
dynamic: false;
|
||||
```
|
||||
|
||||
##### Color
|
||||
|
||||
* Format: `#{HEX}{6}`
|
||||
* Format: `#{HEX}{8}`
|
||||
* Format: `rgb({INTEGER},{INTEGER},{INTEGER})`
|
||||
* Format: `rgba({INTEGER},{INTEGER},{INTEGER}, {REAL})`
|
||||
|
||||
Where '{HEX}' is a hexidecimal number ('0-9a-f'). The '{INTEGER}' value can be between 0 and 255, the '{Real}' value
|
||||
between 0.0 and 1.0.
|
||||
|
||||
The first formats specify the color as RRGGBB (R = red, G = green, B = Blue), the second adds an alpha (A) channel:
|
||||
AARRGGBB.
|
||||
|
||||
For example:
|
||||
|
||||
```css
|
||||
background: #FF0000;
|
||||
foreground: rgba(0,0,1, 0.5);
|
||||
```
|
||||
|
||||
##### Text style
|
||||
|
||||
* Format: `(bold|italic|underline|none)`
|
||||
|
||||
Text style indicates how the text should be displayed. None indicates no style
|
||||
should be applied.
|
||||
|
||||
##### Line style
|
||||
|
||||
* Format: `(dash|solid)`
|
||||
|
||||
Indicates how a line should be drawn.
|
||||
It currently supports:
|
||||
* `dash`: A dashed line. Where the gap is the same width as the dash.
|
||||
* `solid`: A solid line.
|
||||
|
||||
##### Distance
|
||||
|
||||
* Format: `{Integer}px`
|
||||
* Format: `{Real}em`
|
||||
* Format: `{Real}%`
|
||||
|
||||
A distance can be specified in 3 different units:
|
||||
* `px`: Screen pixels.
|
||||
* `em`: Relative to text width.
|
||||
* `%`: Percentage of the **monitor** size.
|
||||
Distances used in the horizontal direction use the monitor width. Distances in
|
||||
the vertical direction use the monitor height.
|
||||
For example:
|
||||
```css
|
||||
padding: 10%;
|
||||
```
|
||||
On a full-hd (1920x1080) monitor defines a padding of 192 pixels on the left
|
||||
and right side and 108 pixels on the top and bottom.
|
||||
|
||||
##### Padding
|
||||
|
||||
* Format: `{Integer}`
|
||||
* Format: `{Distance}`
|
||||
* Format: `{Distance} {Distance}`
|
||||
* Format: `{Distance} {Distance} {Distance}`
|
||||
* Format: `{Distance} {Distance} {Distance} {Distance}`
|
||||
|
||||
If no unit is set, pixels are used.
|
||||
|
||||
The different number of fields in the formats are parsed like:
|
||||
* 1 field: `all`
|
||||
* 2 fields: `top&bottom` `left&right`
|
||||
* 3 fields: `top`, `left&right`, `bottom`
|
||||
* 4 fields: `top`, `right`, `bottom`, `left`
|
||||
|
||||
|
||||
###### Border
|
||||
|
||||
* Format: `{Integer}`
|
||||
* Format: `{Distance}`
|
||||
* Format: `{Distance} {Distance}`
|
||||
* Format: `{Distance} {Distance} {Distance}`
|
||||
* Format: `{Distance} {Distance} {Distance} {Distance}`
|
||||
* Format: `{Distance} {Line style}`
|
||||
* Format: `{Distance} {Line style} {Distance} {Line style}`
|
||||
* Format: `{Distance} {Line style} {Distance} {Line style} {Distance} {Line style}`
|
||||
* Format: `{Distance} {Line style} {Distance} {Line style} {Distance} {Line style} {Distance} {Line style}`
|
||||
|
||||
Border are identical to padding, except that each distance field has a line
|
||||
style property.
|
||||
|
||||
###### Position
|
||||
|
||||
* Format: `(center|east|north|west|northeast|northweast|south|southwest|southeast)`
|
||||
|
||||
###### Reference
|
||||
|
||||
* Format: `@{PROPERTY NAME}`
|
||||
|
||||
A reference can point to another reference. Currently the maximum number of redirects is 20.
|
||||
A property always refers to another property. It cannot be used for a subpart of the property.
|
||||
e.g. this is not valid:
|
||||
|
||||
```css
|
||||
highlight: bold @pink;
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Elements Paths
|
||||
|
||||
Element paths exists of two parts, the first part refers to the actual widget by name.
|
||||
Some widgets have an extra state.
|
||||
|
||||
For example:
|
||||
|
||||
```css
|
||||
#window mainbox listview element .selected {
|
||||
}
|
||||
```
|
||||
|
||||
Here `#window mainbox listview element` is the name of the widget, `selected` is the state of the widget.
|
||||
|
||||
The difference between dots and spaces is purely cosmetic. These are all the same:
|
||||
```css
|
||||
#window mainbox listview element .selected {
|
||||
}
|
||||
#window.mainbox.listview.element.selected {
|
||||
}
|
||||
#window mainbox listview element selected {
|
||||
}
|
||||
```
|
||||
|
||||
### Name
|
||||
|
||||
The current widgets exist in **rofi**:
|
||||
|
||||
* `#window`
|
||||
* `#window.box`: The container holding the window.
|
||||
* `#window.overlay`: The overlay widget.
|
||||
* `#window.mainbox`
|
||||
* `#window.mainbox.box`: The main vertical @box
|
||||
* `#window.mainbox.inputbar`
|
||||
* `#window.mainbox.inputbar.box`: The horizontal @box packing the widgets.
|
||||
* `#window.mainbox.inputbar.case-indicator`: The case/sort indicator @textbox
|
||||
* `#window.mainbox.inputbar.prompt`: The prompt @textbox
|
||||
* `#window.mainbox.inputbar.entry`: The main entry @textbox
|
||||
* `#window.mainbox.listview`
|
||||
* `#window.mainbox.listview.box`: The listview container.
|
||||
* `#window.mainbox.listview.scrollbar`: The listview scrollbar
|
||||
* `#window.mainbox.listview.element`: The entries in the listview
|
||||
* `#window.mainbox.sidebar`
|
||||
* `#window.mainbox.sidebar.box`: The main horizontal @box packing the buttons.
|
||||
* `#window.mainbox.sidebar.button`: The buttons @textbox for each mode.
|
||||
* `#window.mainbox.message`
|
||||
* `#window.mainbox.message.textbox`: The message textbox.
|
||||
* `#window.mainbox.message.box`: The box containing the message.
|
||||
|
||||
Or in a graphical depiction:
|
||||
|
||||
|
||||
|
||||
### State
|
||||
|
||||
State: State of widget
|
||||
|
||||
Optional flag(s) indicating state.
|
||||
|
||||
These are appended after the name or class of the widget.
|
||||
|
||||
`#window.mainbox.sidebar.button selected.normal { }`
|
||||
|
||||
`#window.mainbox.listview.element selected.urgent { }`
|
||||
|
||||
Currently only the entrybox and scrollbar have states:
|
||||
|
||||
`{visible modifier}.{state}`
|
||||
|
||||
Where `visible modifier` can be:
|
||||
* normal: No modification.
|
||||
* selected: The entry is selected/highlighted by user.
|
||||
* alternate: The entry is at an alternating row. (uneven row)
|
||||
|
||||
Where `state` is:
|
||||
* normal: No modification.
|
||||
* urgent: This entry is marked urgent.
|
||||
* active: This entry is marked active.
|
||||
|
||||
These can be mixed.
|
||||
|
||||
Example:
|
||||
```
|
||||
#name.to.textbox selected.active {
|
||||
background: #003642;
|
||||
foreground: #008ed4;
|
||||
}
|
||||
```
|
||||
|
||||
Sets all selected textboxes marked active to the given foreground and background color.
|
||||
|
||||
The scrollbar uses the `handle` state when drawing the small scrollbar handle.
|
||||
This allows the colors used for drawing the handle to be set independently.
|
||||
|
||||
|
||||
### Supported properties
|
||||
|
||||
The following properties are currently supports:
|
||||
|
||||
* all widgets:
|
||||
* padding: padding
|
||||
Padding on the inside of the widget.
|
||||
* margin: padding
|
||||
Margin on the outside of the widget.
|
||||
* border: border
|
||||
Border around the widget (between padding and margin)/
|
||||
* border-radius: padding
|
||||
Sets a radius on the corners of the borders.
|
||||
* background: color
|
||||
Background color.
|
||||
* foreground: color
|
||||
Foreground color.
|
||||
* index: integer (This one does not inherits it value from the parent widget)
|
||||
|
||||
* window:
|
||||
* font: string
|
||||
* transparency: string
|
||||
- real
|
||||
- background
|
||||
- screenshot
|
||||
- Path to png file
|
||||
* position: position
|
||||
The place of the anchor on the monitor.
|
||||
* anchor: anchor
|
||||
The anchor position on the window.
|
||||
* fullscreen: boolean
|
||||
Window is fullscreen.
|
||||
* width: distance
|
||||
The width of the window.
|
||||
* x-offset: distance
|
||||
* y-offset: distance
|
||||
The offset of the window to the anchor point.
|
||||
Allowing you to push the window left/right/up/down.
|
||||
|
||||
|
||||
* scrollbar
|
||||
* foreground: color
|
||||
* handle-width: distance
|
||||
* handle-color: color
|
||||
* foreground: color
|
||||
|
||||
* box
|
||||
* spacing: distance
|
||||
Distance between the packed elements.
|
||||
|
||||
* textbox:
|
||||
* background: color
|
||||
* foreground: color
|
||||
* text: The text color to use (falls back to foreground if not set)
|
||||
* highlight: highlight {color}
|
||||
Color is optional, multiple highlight styles can be added like: bold underlinei italic #000000;
|
||||
|
||||
* listview:
|
||||
* columns: integer
|
||||
Number of columns to show (atleast 1).
|
||||
* fixed-height: boolean
|
||||
Always show `lines` rows, even if less elements are available.
|
||||
* dynamic: boolean
|
||||
If the size should changed when filtering the list, or if it should keep the original height.
|
||||
* scrollbar: boolean
|
||||
If the scrollbar should be enabled/disabled.
|
||||
* scrollbar-width: distance
|
||||
Width of the scrollbar
|
||||
* cycle: boolean
|
||||
When navigating it should wrap around.
|
||||
* spacing: distance
|
||||
Spacing between the elements (both vertical and horizontal)
|
||||
* lines: integer
|
||||
Number of rows to show in the list view.
|
||||
|
||||
|
||||
## 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: 9;
|
||||
}
|
||||
#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;
|
||||
}
|
||||
```
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
|
|
@ -1,542 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="210mm"
|
||||
height="297mm"
|
||||
viewBox="0 0 744.09448819 1052.3622047"
|
||||
id="svg2"
|
||||
version="1.1"
|
||||
inkscape:version="0.91 r13725"
|
||||
sodipodi:docname="structure.svg">
|
||||
<defs
|
||||
id="defs4" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="2.6218227"
|
||||
inkscape:cx="328.70746"
|
||||
inkscape:cy="811.46785"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="true"
|
||||
inkscape:window-width="2126"
|
||||
inkscape:window-height="1367"
|
||||
inkscape:window-x="15"
|
||||
inkscape:window-y="56"
|
||||
inkscape:window-maximized="0">
|
||||
<inkscape:grid
|
||||
type="xygrid"
|
||||
id="grid4136" />
|
||||
</sodipodi:namedview>
|
||||
<metadata
|
||||
id="metadata7">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<rect
|
||||
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
id="rect4138"
|
||||
width="460.62991"
|
||||
height="389.76379"
|
||||
x="35.433071"
|
||||
y="60.236221" />
|
||||
<rect
|
||||
style="fill:none;fill-opacity:1;stroke:#009500;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
id="rect4173"
|
||||
width="425.19684"
|
||||
height="53.149605"
|
||||
x="53.149605"
|
||||
y="77.952759" />
|
||||
<rect
|
||||
style="fill:none;fill-opacity:1;stroke:#950006;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
id="rect4173-3"
|
||||
width="426.23825"
|
||||
height="53.072773"
|
||||
x="52.108196"
|
||||
y="379.21069" />
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#0000c2;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
x="143.5146"
|
||||
y="416.61566"
|
||||
id="text4258-9"
|
||||
sodipodi:linespacing="125%"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan4260-3"
|
||||
x="143.5146"
|
||||
y="416.61566"
|
||||
style="font-size:15px;fill:#0000c2;fill-opacity:1">button</tspan></text>
|
||||
<rect
|
||||
style="fill:none;fill-opacity:1;stroke:#ff8500;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
id="rect4352"
|
||||
width="425.19684"
|
||||
height="141.73228"
|
||||
x="53.149605"
|
||||
y="219.68504"
|
||||
ry="0" />
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
x="22.945978"
|
||||
y="55.447983"
|
||||
id="text4443"
|
||||
sodipodi:linespacing="125%"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan4445"
|
||||
x="22.945978"
|
||||
y="55.447983"
|
||||
style="font-size:12.5px">#window</tspan></text>
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
x="41.054344"
|
||||
y="73.785233"
|
||||
id="text4443-9"
|
||||
sodipodi:linespacing="125%"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan4445-2"
|
||||
x="41.054344"
|
||||
y="73.785233"
|
||||
style="font-size:12.5px">#window mainbox</tspan></text>
|
||||
<g
|
||||
id="g4725"
|
||||
transform="translate(165.12668,-2.2849693)">
|
||||
<text
|
||||
sodipodi:linespacing="125%"
|
||||
id="text4443-9-9-1-4-3"
|
||||
y="13.202698"
|
||||
x="141.91444"
|
||||
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-size:12.5px"
|
||||
y="13.202698"
|
||||
x="141.91444"
|
||||
id="tspan4445-2-7-2-7-6"
|
||||
sodipodi:role="line">+</tspan></text>
|
||||
<text
|
||||
sodipodi:linespacing="125%"
|
||||
id="text4443-9-9-1-4-1"
|
||||
y="12.732727"
|
||||
x="156.55943"
|
||||
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-size:12.5px"
|
||||
y="12.732727"
|
||||
x="156.55943"
|
||||
id="tspan4445-2-7-2-7-06"
|
||||
sodipodi:role="line">Expand</tspan></text>
|
||||
</g>
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
x="326.40759"
|
||||
y="119.25806"
|
||||
id="text4443-9-9-1-4-3-3"
|
||||
sodipodi:linespacing="125%"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan4445-2-7-2-7-6-2"
|
||||
x="326.40759"
|
||||
y="119.25806"
|
||||
style="font-size:12.5px">+</tspan></text>
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
x="453.20245"
|
||||
y="232.17642"
|
||||
id="text4443-9-9-1-4-3-3-0"
|
||||
sodipodi:linespacing="125%"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan4445-2-7-2-7-6-2-6"
|
||||
x="453.20245"
|
||||
y="232.17642"
|
||||
style="font-size:12.5px">+</tspan></text>
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
x="60.590561"
|
||||
y="231.79265"
|
||||
id="text4443-9-9-1-4"
|
||||
sodipodi:linespacing="125%"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan4445-2-7-2-7"
|
||||
x="60.590561"
|
||||
y="231.79265"
|
||||
style="font-size:12.5px">#window mainbox listview</tspan></text>
|
||||
<rect
|
||||
style="fill:none;fill-opacity:1;stroke:#fabd00;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
id="rect4211"
|
||||
width="496.06299"
|
||||
height="424.91339"
|
||||
x="17.716536"
|
||||
y="42.80315" />
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
x="60.544346"
|
||||
y="91.87899"
|
||||
id="text4443-9-6"
|
||||
sodipodi:linespacing="125%"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan4445-2-75"
|
||||
x="60.544346"
|
||||
y="91.87899"
|
||||
style="font-size:12.5px">#window mainbox inputbar</tspan></text>
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
x="59.806118"
|
||||
y="391.94498"
|
||||
id="text4443-9-9-1-4-56"
|
||||
sodipodi:linespacing="125%"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan4445-2-7-2-7-2"
|
||||
x="59.806118"
|
||||
y="391.94498"
|
||||
style="font-size:12.5px">#window mainbox sidebar</tspan></text>
|
||||
<g
|
||||
id="g4383"
|
||||
transform="translate(9.9192876,-6.5095325)">
|
||||
<text
|
||||
sodipodi:linespacing="125%"
|
||||
id="text4258"
|
||||
y="120.80842"
|
||||
x="69.25045"
|
||||
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#0000c2;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-size:15px;fill:#0000c2;fill-opacity:1"
|
||||
y="120.80842"
|
||||
x="69.25045"
|
||||
id="tspan4260"
|
||||
sodipodi:role="line">prompt</tspan></text>
|
||||
<rect
|
||||
y="103.08986"
|
||||
x="61.681175"
|
||||
height="28.025009"
|
||||
width="74.836868"
|
||||
id="rect4300"
|
||||
style="fill:none;fill-opacity:1;stroke:#950006;stroke-width:1.97499132;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
|
||||
</g>
|
||||
<g
|
||||
id="g4388"
|
||||
transform="translate(12.39911,-6.5095325)">
|
||||
<text
|
||||
sodipodi:linespacing="125%"
|
||||
id="text4258-1"
|
||||
y="120.51236"
|
||||
x="217.36252"
|
||||
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#0000c2;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-size:15px;fill:#0000c2;fill-opacity:1"
|
||||
y="120.51236"
|
||||
x="217.36252"
|
||||
id="tspan4260-2"
|
||||
sodipodi:role="line">entry</tspan></text>
|
||||
<rect
|
||||
y="103.09647"
|
||||
x="134.63979"
|
||||
height="28.011784"
|
||||
width="205.52357"
|
||||
id="rect4300-9"
|
||||
style="fill:none;fill-opacity:1;stroke:#950006;stroke-width:1.98821568;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
|
||||
</g>
|
||||
<g
|
||||
id="g4393"
|
||||
transform="translate(9.9192876,-6.5095325)">
|
||||
<text
|
||||
sodipodi:linespacing="125%"
|
||||
id="text4258-1-7"
|
||||
y="122.6944"
|
||||
x="345.44586"
|
||||
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#0000c2;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-size:15px;fill:#0000c2;fill-opacity:1"
|
||||
y="122.6944"
|
||||
x="345.44586"
|
||||
id="tspan4260-2-0"
|
||||
sodipodi:role="line">case-indicator</tspan></text>
|
||||
<rect
|
||||
y="103.0965"
|
||||
x="342.15161"
|
||||
height="28.01174"
|
||||
width="113.39758"
|
||||
id="rect4300-1"
|
||||
style="fill:none;fill-opacity:1;stroke:#950006;stroke-width:1.98826003;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
|
||||
</g>
|
||||
<rect
|
||||
style="fill:none;fill-opacity:1;stroke:#009500;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
id="rect4173-2"
|
||||
width="194.88188"
|
||||
height="28.346447"
|
||||
x="70.866142"
|
||||
y="396.8504" />
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#0000c2;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
x="338.39648"
|
||||
y="416.61566"
|
||||
id="text4258-9-7"
|
||||
sodipodi:linespacing="125%"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan4260-3-0"
|
||||
x="338.39648"
|
||||
y="416.61566"
|
||||
style="font-size:15px;fill:#0000c2;fill-opacity:1">button</tspan></text>
|
||||
<rect
|
||||
style="fill:none;fill-opacity:1;stroke:#009500;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
id="rect4173-2-9"
|
||||
width="194.88191"
|
||||
height="28.346447"
|
||||
x="265.74802"
|
||||
y="396.8504" />
|
||||
<g
|
||||
id="g4408"
|
||||
transform="translate(6.5112369,-10.679593)">
|
||||
<text
|
||||
sodipodi:linespacing="125%"
|
||||
id="text4258-1-6"
|
||||
y="266.72287"
|
||||
x="101.68279"
|
||||
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#0000c2;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-size:15px;fill:#0000c2;fill-opacity:1"
|
||||
y="266.72287"
|
||||
x="101.68279"
|
||||
id="tspan4260-2-1"
|
||||
sodipodi:role="line">Element</tspan></text>
|
||||
<rect
|
||||
y="248.08116"
|
||||
x="64.000687"
|
||||
height="28.346462"
|
||||
width="141.73228"
|
||||
id="rect4368"
|
||||
style="fill:none;fill-opacity:1;stroke:#ffc602;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
|
||||
</g>
|
||||
<g
|
||||
id="g4505">
|
||||
<rect
|
||||
y="237.40157"
|
||||
x="425.19687"
|
||||
height="99.212601"
|
||||
width="28.346449"
|
||||
id="rect4354"
|
||||
style="fill:none;fill-opacity:1;stroke:#cb71ff;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
|
||||
<text
|
||||
transform="matrix(0,-1,1,0,0,0)"
|
||||
sodipodi:linespacing="125%"
|
||||
id="text4258-1-6-3"
|
||||
y="444.96213"
|
||||
x="-320.51251"
|
||||
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#0000c2;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-size:15px;fill:#0000c2;fill-opacity:1"
|
||||
y="444.96213"
|
||||
x="-320.51251"
|
||||
id="tspan4260-2-1-6"
|
||||
sodipodi:role="line">Scrollbar</tspan></text>
|
||||
</g>
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
x="439.00262"
|
||||
y="412.55084"
|
||||
id="text4443-9-9-1-4-3-3-0-3"
|
||||
sodipodi:linespacing="125%"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan4445-2-7-2-7-6-2-6-6"
|
||||
x="439.00262"
|
||||
y="412.55084"
|
||||
style="font-size:12.5px">+</tspan></text>
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
x="241.00262"
|
||||
y="414.09415"
|
||||
id="text4443-9-9-1-4-3-3-0-3-7"
|
||||
sodipodi:linespacing="125%"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan4445-2-7-2-7-6-2-6-6-5"
|
||||
x="241.00262"
|
||||
y="414.09415"
|
||||
style="font-size:12.5px">+</tspan></text>
|
||||
<rect
|
||||
style="fill:none;fill-opacity:1;stroke:#009500;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
id="rect4173-35"
|
||||
width="425.19684"
|
||||
height="53.149609"
|
||||
x="53.149605"
|
||||
y="148.81889" />
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
x="60.171993"
|
||||
y="162.72299"
|
||||
id="text4443-9-6-6"
|
||||
sodipodi:linespacing="125%"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan4445-2-75-2"
|
||||
x="60.171993"
|
||||
y="162.72299"
|
||||
style="font-size:12.5px">#window mainbox message</tspan></text>
|
||||
<g
|
||||
id="g4403"
|
||||
transform="translate(16.738798,-8.6793767)">
|
||||
<text
|
||||
sodipodi:linespacing="125%"
|
||||
id="text4258-1-9"
|
||||
y="194.98009"
|
||||
x="220.6938"
|
||||
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#0000c2;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-size:15px;fill:#0000c2;fill-opacity:1"
|
||||
y="194.98009"
|
||||
x="220.6938"
|
||||
id="tspan4260-2-12"
|
||||
sodipodi:role="line">textbox</tspan></text>
|
||||
<rect
|
||||
y="175.21481"
|
||||
x="54.127342"
|
||||
height="28.346453"
|
||||
width="389.76379"
|
||||
id="rect4300-9-7"
|
||||
style="fill:none;fill-opacity:1;stroke:#950006;stroke-width:1.98821568;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
|
||||
</g>
|
||||
<g
|
||||
id="g4408-3"
|
||||
transform="translate(6.5112369,24.471404)">
|
||||
<text
|
||||
sodipodi:linespacing="125%"
|
||||
id="text4258-1-6-6"
|
||||
y="266.72287"
|
||||
x="101.68279"
|
||||
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#0000c2;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-size:15px;fill:#0000c2;fill-opacity:1"
|
||||
y="266.72287"
|
||||
x="101.68279"
|
||||
id="tspan4260-2-1-0"
|
||||
sodipodi:role="line">Element</tspan></text>
|
||||
<rect
|
||||
y="248.08116"
|
||||
x="64.000687"
|
||||
height="28.346462"
|
||||
width="141.73228"
|
||||
id="rect4368-6"
|
||||
style="fill:none;fill-opacity:1;stroke:#ffc602;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
|
||||
</g>
|
||||
<g
|
||||
id="g4408-2"
|
||||
transform="translate(6.5112369,60.457378)">
|
||||
<text
|
||||
sodipodi:linespacing="125%"
|
||||
id="text4258-1-6-61"
|
||||
y="266.72287"
|
||||
x="101.68279"
|
||||
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#0000c2;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-size:15px;fill:#0000c2;fill-opacity:1"
|
||||
y="266.72287"
|
||||
x="101.68279"
|
||||
id="tspan4260-2-1-8"
|
||||
sodipodi:role="line">Element</tspan></text>
|
||||
<rect
|
||||
y="248.08116"
|
||||
x="64.000687"
|
||||
height="28.346462"
|
||||
width="141.73228"
|
||||
id="rect4368-7"
|
||||
style="fill:none;fill-opacity:1;stroke:#ffc602;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
|
||||
</g>
|
||||
<g
|
||||
id="g4408-9"
|
||||
transform="translate(183.85932,-10.988865)">
|
||||
<text
|
||||
sodipodi:linespacing="125%"
|
||||
id="text4258-1-6-2"
|
||||
y="266.72287"
|
||||
x="101.68279"
|
||||
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#0000c2;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-size:15px;fill:#0000c2;fill-opacity:1"
|
||||
y="266.72287"
|
||||
x="101.68279"
|
||||
id="tspan4260-2-1-02"
|
||||
sodipodi:role="line">Element</tspan></text>
|
||||
<rect
|
||||
y="248.08116"
|
||||
x="64.000687"
|
||||
height="28.346462"
|
||||
width="141.73228"
|
||||
id="rect4368-3"
|
||||
style="fill:none;fill-opacity:1;stroke:#ffc602;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
|
||||
</g>
|
||||
<g
|
||||
id="g4408-3-7"
|
||||
transform="translate(183.85932,24.162135)">
|
||||
<text
|
||||
sodipodi:linespacing="125%"
|
||||
id="text4258-1-6-6-5"
|
||||
y="266.72287"
|
||||
x="101.68279"
|
||||
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#0000c2;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-size:15px;fill:#0000c2;fill-opacity:1"
|
||||
y="266.72287"
|
||||
x="101.68279"
|
||||
id="tspan4260-2-1-0-9"
|
||||
sodipodi:role="line">Element</tspan></text>
|
||||
<rect
|
||||
y="248.08116"
|
||||
x="64.000687"
|
||||
height="28.346462"
|
||||
width="141.73228"
|
||||
id="rect4368-6-2"
|
||||
style="fill:none;fill-opacity:1;stroke:#ffc602;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
|
||||
</g>
|
||||
<g
|
||||
id="g4408-2-2"
|
||||
transform="translate(183.85932,60.148105)">
|
||||
<text
|
||||
sodipodi:linespacing="125%"
|
||||
id="text4258-1-6-61-8"
|
||||
y="266.72287"
|
||||
x="101.68279"
|
||||
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#0000c2;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-size:15px;fill:#0000c2;fill-opacity:1"
|
||||
y="266.72287"
|
||||
x="101.68279"
|
||||
id="tspan4260-2-1-8-9"
|
||||
sodipodi:role="line">Element</tspan></text>
|
||||
<rect
|
||||
y="248.08116"
|
||||
x="64.000687"
|
||||
height="28.346462"
|
||||
width="141.73228"
|
||||
id="rect4368-7-7"
|
||||
style="fill:none;fill-opacity:1;stroke:#ffc602;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 23 KiB |
|
|
@ -1,370 +0,0 @@
|
|||
# Tutorial on how to write a theme 3.0
|
||||
|
||||
I started this theme by picking a color scheme I wanted to use, i want for `Arthur`.
|
||||
We first create an empty theme file: **arthur.rasi**
|
||||
|
||||
```
|
||||
* {
|
||||
|
||||
}
|
||||
```
|
||||
We can preview this with `rofi -theme arthur.rasi -show run`. At this stage we see a black and white window.
|
||||
|
||||
|
||||
|
||||
Lets add the different colors to the global properties:
|
||||
|
||||
```
|
||||
/**
|
||||
* Arthur color scheme
|
||||
*/
|
||||
* {
|
||||
// Foreground
|
||||
foreground: #ddeedd;
|
||||
background: #1c1c1c;
|
||||
// Black
|
||||
black: #3d352a;
|
||||
lightblack: #554444;
|
||||
//
|
||||
// Red
|
||||
red: #cd5c5c;
|
||||
lightred: #cc5533;
|
||||
//
|
||||
// Green
|
||||
green: #86af80;
|
||||
lightgreen: #88aa22;
|
||||
//
|
||||
// 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;
|
||||
//
|
||||
// Highlights
|
||||
highlight: bold #ffffff;
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
As shown in this example, both C and C++ style comments are allows.
|
||||
We set the default foreground and background color, and add some aliases for other colors we can use.
|
||||
|
||||
|
||||
|
||||
|
||||
As you can seen in the screenshot each widget takes the global background and foreground color.
|
||||
|
||||
We can now start adding sections to customize the layout and looks. Lets first start by placing rofi in the middle of
|
||||
the screen.
|
||||
```
|
||||
#window {
|
||||
location: center;
|
||||
anchor: north;
|
||||
}
|
||||
```
|
||||
The `location` property determines the position on the monitor, the `anchor` property sets the point on the rofi window
|
||||
that stays fixed at the monitor position.
|
||||
In this case the top (north) of the rofi window is at the center of the monitor.
|
||||
|
||||
We want to give the window, and each child, a padding of 10 pixels and a 1 pixel border.
|
||||
|
||||
```
|
||||
#window {
|
||||
location: center;
|
||||
anchor: north;
|
||||
padding: 10px;
|
||||
border: 1px;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
This clearly shows how inheritance works, each child widget inherits the properties of its parents.
|
||||
So if we want to only set padding and border on the window, we need to specify the window box:
|
||||
|
||||
```
|
||||
#window {
|
||||
location: center;
|
||||
anchor: north;
|
||||
}
|
||||
#window box {
|
||||
padding: 10px;
|
||||
border: 1px;
|
||||
foreground: @magenta;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
This example also shows how you can override the foreground color and refer to the global property `magenta`.
|
||||
|
||||
Now that we have this, lets extend the example a little:
|
||||
|
||||
```
|
||||
/**
|
||||
* Arthur color scheme
|
||||
*/
|
||||
* {
|
||||
foreground: #ddeedd;
|
||||
background: #1c1c1c;
|
||||
// Black
|
||||
black: #3d352a;
|
||||
lightblack: #554444;
|
||||
//
|
||||
// Red
|
||||
red: #cd5c5c;
|
||||
lightred: #cc5533;
|
||||
//
|
||||
// Green
|
||||
green: #86af80;
|
||||
lightgreen: #88aa22;
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
#window box {
|
||||
padding: 10px;
|
||||
border: 1px;
|
||||
foreground: @magenta;
|
||||
}
|
||||
|
||||
|
||||
#window mainbox inputbar {
|
||||
background: @lightblack;
|
||||
text: @lightgreen;
|
||||
padding: 4px;
|
||||
}
|
||||
#window mainbox inputbar box {
|
||||
border: 0px 0px 2px 0px;
|
||||
}
|
||||
#window mainbox box {
|
||||
spacing: 0.3em;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
In this example we see a few new things.
|
||||
|
||||
* We here specify spacing (space between the child widgets) in **em** (font
|
||||
width).
|
||||
* We specify border width for each side separately.
|
||||
* We make the input text color green.
|
||||
|
||||
|
||||
The current theme does not show what row is selected, so lets make those different background color.
|
||||
For this we add:
|
||||
|
||||
```
|
||||
#window mainbox listview element selected {
|
||||
background: @blue;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
This already gives us a usable theme.
|
||||
Lets extend it, so urgent and active rows are visible:
|
||||
|
||||
```
|
||||
#window mainbox listview element normal active {
|
||||
foreground: @lightblue;
|
||||
}
|
||||
#window mainbox listview element normal urgent {
|
||||
foreground: @lightred;
|
||||
}
|
||||
#window mainbox listview element alternate active {
|
||||
foreground: @lightblue;
|
||||
}
|
||||
#window mainbox listview element alternate urgent {
|
||||
foreground: @lightred;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
So why does this require so many options (and we are not there yet)?
|
||||
|
||||
We see two times 3 properties now:
|
||||
|
||||
The first is the type of the row:
|
||||
|
||||
* normal:
|
||||
* alternate: (all uneven rows)
|
||||
* selected:
|
||||
|
||||
Then each of these can be in three states:
|
||||
|
||||
* normal
|
||||
* urgent
|
||||
* active
|
||||
|
||||
Idealy a full theme sets all of these options.
|
||||
|
||||
```
|
||||
* {
|
||||
foreground: #ddeedd;
|
||||
background: #1c1c1c;
|
||||
// Black
|
||||
black: #3d352a;
|
||||
lightblack: #554444;
|
||||
//
|
||||
// Red
|
||||
red: #cd5c5c;
|
||||
lightred: #cc5533;
|
||||
//
|
||||
// Green
|
||||
green: #86af80;
|
||||
lightgreen: #88aa22;
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
#window box {
|
||||
padding: 10px;
|
||||
border: 1px;
|
||||
foreground: @magenta;
|
||||
}
|
||||
|
||||
|
||||
#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 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: @background;
|
||||
}
|
||||
#window mainbox listview element selected urgent {
|
||||
background: @lightred;
|
||||
foreground: @background;
|
||||
}
|
||||
#window mainbox listview element normal normal {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
Note here, empty sections, because we want them to inherit from their parents, can be left out.
|
||||
|
||||
This is a first quick tutorial into writing a theme.
|
||||
There are a lot more options that can be tweaked.
|
||||
For this see the full *TODO* theme specification.
|
||||
|
||||
|
||||
## Advanced
|
||||
|
||||
To make the theme transparent, more care had to be taken. Because every widget renders over the underlying widget (with
|
||||
it transparency value). You cannot just set one background color as main property.
|
||||
This would result in:
|
||||
|
||||
|
||||
|
||||
There is an easy way to fix this. Set the default background to be fully transparent:
|
||||
|
||||
```css
|
||||
* {
|
||||
background: rgba(0,0,0,0);
|
||||
}
|
||||
```
|
||||
|
||||
Now every widget without an explicit background, is going to be transparent.
|
||||
We can then set the background of the window to the desired transparent color:
|
||||
|
||||
```css
|
||||
#window box {
|
||||
background: #881c1c1c;
|
||||
}
|
||||
```
|
||||
|
||||
This looks a lot nicer:
|
||||
|
||||
|
||||
|
||||
Now by updating the remaining backgrounds you can tweak the theme to have a nice overall look.
|
||||
Loading…
Reference in New Issue