deKorator Theming
=================

 ┌─────┬───────────────────────┬─────┐
 │  1  │           2           │  3  │
 ├──┬──┴┬───┬─────────────┬───┬┴──┬──┤
 │ 4│ 5 │ 6 │      7      │ 8 │ 9 │10│
 ├──┼───┴───┴─────────────┴───┴───┼──┤
 │11│                             │14│
 ├──┤                             ├──┤
 │  │                             │  │
 │12│        Window Content       │15│
 │  │                             │  │
 ├──┤                             ├──┤
 │13│                             │16│
 ├──┴──┬───────────────────────┬──┴──┤
 │  17 │           18          │  19 │
 └─────┴───────────────────────┴─────┘


Border Parts
============

 1: topLeftFrameBg            - Top border, left corner / resize handle
 2: topMidFrameBg             - Top border, middle part (tiled to fill)
 3: topRightFrameBg           - Top border, right corner / resize handle

 4: leftUpperCornerFrameBg    - Left upper corner / resize handle
 5: buttonsLeftBg             - Titlebar part, behind left-side buttons
 6: titleLeftBg               - Titlebar part, separating buttons from middle
 7: titleMidBg                - Titlebar, middle part (tiled to fill)
 8: titleBarRightBg           - Titlebar part, separating buttons from middle
 9: buttonsRightBg            - Titlebar part, behind right-side buttons
10: rightUpperCornerFrameBg   - Right upper corner / resize handle

11: leftUpperFrameBg          - Left border, upper part
12: leftMidFrameBg            - Left border, middle part (tiled to fill)
13: leftLowerCornerFrameBg    - Left border, lower corner / resize handle

14: rightUpperFrameBg         - Right border, upper part
15: rightMidFrameBg           - Right border, middle part (tiled to fill)
16: rightLowerCornerFrameBg   - Right border, lower corner / resize handle

17: bottomLeftFrameBg         - Bottom border, left corner / resize handle
18: bottomMidFrameBg          - Bottom border, middle part (tiled to fill)
19: bottomRightFrameBg        - Bottom border, right corner / resize handle

Optional (shaded windows):
17: bottomShadedLeftFrameBg   - Bottom border, left corner / resize handle
18: bottomShadedMidFrameBg    - Bottom border, middle part (tiled to fill)
19: bottomShadedRightFrameBg  - Bottom border, right corner / resize handle


Element Names
-------------

- All border parts are expected in the `/deco` subfolder.
- Image names can be found in the list above, or the listing below.


Inactive Window Frames
----------------------

- Filenames of all border images end with `Bg`.
- If additional files ending in `InactiveBg` are found:
  - They are used for inactive windows.
  - Fully optional and looked up in a granular fashion
  - Only providing inactive images for selective parts of the frame, or none at all is valid.


Window Frame Structure
----------------------

deKorator frames are composed of:

- Frame parts of top, left, right and bottom borders
- Titlebar parts


Border Parts Details
--------------------

Horizontal
~~~~~~~~~~

 ┌──────────────────┬───────────────────────────────┬───────────────────┐
 │ topLeft          │             topMid            │          topRight │
 └──────────────────┴───────────────────────────────┴───────────────────┘ 
 ┌──────────────────┬───────────────────────────────┬───────────────────┐
 │ bottomLeft       │            bottomMid          │       bottomRight │
 └──────────────────┴───────────────────────────────┴───────────────────┘ 
 ┌──────────────────┬───────────────────────────────┬───────────────────┐
 │ bottomShadedLeft │        bottomShadedMid        │ bottomShadedRight │
 └──────────────────┴───────────────────────────────┴───────────────────┘

Notes:
- Top/bottom borders are at the respective window edges.
- *Left and *Right parts form corners, allow diagonal resizing.
- *Mid parts are tiled to fill the remaining width, for vertical resizing.
- Optional: Top border can be omitted.
  - In this case, the theme uses:
    - Top 5 pixels of titlebar for resizing.
    - Bottom border width for diagonal resizing.
- Optional: BottomShaded border (for shaded windows).
  - Is only shown when drawing borders on shaded windows is enabled in settings.
  - If not found, normal bottom border is used.


Vertical
~~~~~~~~

 ┌──────┐ ┌──────┐
 │ left-│ │right-│
 │Upper-│ │Upper-│
 │Corner│ │Corner│
 ├──────┤ ├──────┤
 │ left-│ │right-│
 │ Upper│ │ Upper│
 ├──────┤ ├──────┤
 │      │ │      │
 │ left-│ │right-│
 │  Mid │ │  Mid │
 │      │ │      │
 ├──────┤ ├──────┤
 │left- │ │right-│
 │Lower-│ │Lower-│
 │Corner│ │Corner│
 └──────┘ └──────┘

Notes:
- Side borders are stacked vertically between titlebar and bottom border.
- [left|light]Upper parts are just below the titlebar.
- [left|light]Mid parts are tiled to fill remaining space.
- [left|light]LowerCorner parts form bottom corners.


Titlebar
~~~~~~~~

 ┌───────────────┬───────────┬────────────┬─────────────┬─────────────┬────────────┬────────────────┐
 │leftUpperCorner│buttonsLeft│titleBarLeft│ titleBarMid │titleBarRight│buttonsRight│rightUpperCorner│
 └───────────────┴───────────┴────────────┴─────────────┴─────────────┴────────────┴────────────────┘

Notes:
- Titlebar is a strip of seven elements.
- [left|light]UpperCorner parts:
  - Form sides of the titlebar.
  - Side parts top corners, allow diagonal resizing.
- buttons[left|light] parts:
  - Tile behind titlebar buttons (if present).
- titleBarMid:
  - Tiled to fill the titlebar center.
  - titleBar[left|light] at the left and right.


Masks
~~~~~

 ┌──────────────────────────────┬─────────────────────────┬───────────────────────────────┐
 │ topLeftCornerBitmap          │      topMidBitMap       │          topRightCornerBitmap │
 └──────────────────────────────┴─────────────────────────┴───────────────────────────────┘
 ┌──────────────────────────────┬─────────────────────────┬───────────────────────────────┐
 │ buttomLeftCornerBitmap       │     buttomMidBitmap     │       buttomRightCornerBitmap │
 └──────────────────────────────┴─────────────────────────┴───────────────────────────────┘ 
 ┌──────────────────────────────┬─────────────────────────┬───────────────────────────────┐
 │ buttomLeftShadedCornerBitmap │ buttomShadedMidBitmap   │ buttomShadedRightCornerBitmap │
 └──────────────────────────────┴─────────────────────────┴───────────────────────────────┘ 

Notes:
- Masks are optional images in black and white, used to determine transparent parts of the frame, if enabled in settings.
  - Black pixels are transparent parts of the frame.



Buttons
=======

Functions:
----------

- buttonAbove:          Enable "Keep on top"
- buttonAboveDown:      Disable "Keep on top"
- buttonBelow:          Enable "Keep below"
- buttonBelowDown:      Disable "Keep below"
- buttonClose:          Close window
- buttonHelp:           Open help (if available)
- buttonMax:            Maximize window
- buttonMenu:           Show window menu (or icon if menu disabled)
- buttonMin:            Iconify window
- buttonRestore:        Unmaximize window
- buttonShade:          Shade (roll into titlebar)
- buttonShadeDown:      Unshade (roll out of titlebar)
- buttonSticky:         Show on all virtual desktops
- buttonStickyDown:     Disable "Show on all desktops"


Image files:
------------

Normal buttons:
  /buttons/normal/[buttonName].png

Hover (mouse over):
  /buttons/hover/[buttonName]Hover.png

Pressed:
  /buttons/press/[buttonName]Press.png

Please note the addition of 'Hover' and 'Press' on the respective buttons, as well as the different paths.

Optional Inactive Images:
- If additional files ending in "Inactive" are found, e.g., `buttonClosePressInactive.png`:
  - The inactive images are looked up per button image, allowing fine grained control.
  - If no inactive part is found, the same image is used on inactive and acrtive window borders.


Theme directory:
----------------

The theme needs to be in a directory called "<name>-theme", wheras <name> can not contain whitespaces, i.e. "default-theme", "templaTor-theme".

Listing of all files, including optional parts:

<name>-theme
├── buttons
│   ├── hover
│   │   ├── buttonAboveDownHoverInactive.png
│   │   ├── buttonAboveDownHover.png
│   │   ├── buttonAboveHoverInactive.png
│   │   ├── buttonAboveHover.png
│   │   ├── buttonBelowDownHoverInactive.png
│   │   ├── buttonBelowDownHover.png
│   │   ├── buttonBelowHoverInactive.png
│   │   ├── buttonBelowHover.png
│   │   ├── buttonCloseHoverInactive.png
│   │   ├── buttonCloseHover.png
│   │   ├── buttonHelpHoverInactive.png
│   │   ├── buttonHelpHover.png
│   │   ├── buttonMaxHoverInactive.png
│   │   ├── buttonMaxHover.png
│   │   ├── buttonMenuHoverInactive.png
│   │   ├── buttonMenuHover.png
│   │   ├── buttonMinHoverInactive.png
│   │   ├── buttonMinHover.png
│   │   ├── buttonRestoreHoverInactive.png
│   │   ├── buttonRestoreHover.png
│   │   ├── buttonShadeDownHoverInactive.png
│   │   ├── buttonShadeDownHover.png
│   │   ├── buttonShadeHoverInactive.png
│   │   ├── buttonShadeHover.png
│   │   ├── buttonStickyDownHoverInactive.png
│   │   ├── buttonStickyDownHover.png
│   │   ├── buttonStickyHoverInactive.png
│   │   └── buttonStickyHover.png
│   ├── normal
│   │   ├── buttonAboveDownInactive.png
│   │   ├── buttonAboveDown.png
│   │   ├── buttonAboveInactive.png
│   │   ├── buttonAbove.png
│   │   ├── buttonBelowDownInactive.png
│   │   ├── buttonBelowDown.png
│   │   ├── buttonBelowInactive.png
│   │   ├── buttonBelow.png
│   │   ├── buttonCloseInactive.png
│   │   ├── buttonClose.png
│   │   ├── buttonHelpInactive.png
│   │   ├── buttonHelp.png
│   │   ├── buttonMaxInactive.png
│   │   ├── buttonMax.png
│   │   ├── buttonMenuInactive.png
│   │   ├── buttonMenu.png
│   │   ├── buttonMinInactive.png
│   │   ├── buttonMin.png
│   │   ├── buttonRestoreInactive.png
│   │   ├── buttonRestore.png
│   │   ├── buttonShadeDownInactive.png
│   │   ├── buttonShadeDown.png
│   │   ├── buttonShadeInactive.png
│   │   ├── buttonShade.png
│   │   ├── buttonStickyDownInactive.png
│   │   ├── buttonStickyDown.png
│   │   ├── buttonStickyInactive.png
│   │   └── buttonSticky.png
│   └── press
│       ├── buttonAboveDownPressInactive.png
│       ├── buttonAboveDownPress.png
│       ├── buttonAbovePressInactive.png
│       ├── buttonAbovePress.png
│       ├── buttonBelowDownPressInactive.png
│       ├── buttonBelowDownPress.png
│       ├── buttonBelowPressInactive.png
│       ├── buttonBelowPress.png
│       ├── buttonClosePressInactive.png
│       ├── buttonClosePress.png
│       ├── buttonHelpPressInactive.png
│       ├── buttonHelpPress.png
│       ├── buttonMaxPressInactive.png
│       ├── buttonMaxPress.png
│       ├── buttonMenuPressInactive.png
│       ├── buttonMenuPress.png
│       ├── buttonMinPressInactive.png
│       ├── buttonMinPress.png
│       ├── buttonRestorePressInactive.png
│       ├── buttonRestorePress.png
│       ├── buttonShadeDownPressInactive.png
│       ├── buttonShadeDownPress.png
│       ├── buttonShadePressInactive.png
│       ├── buttonShadePress.png
│       ├── buttonStickyDownPressInactive.png
│       ├── buttonStickyDownPress.png
│       ├── buttonStickyPressInactive.png
│       └── buttonStickyPress.png
├── deco
│   ├── bottomLeftFrameBg.png
│   ├── bottomLeftFrameInactiveBg.png
│   ├── bottomMidFrameBg.png
│   ├── bottomMidFrameInactiveBg.png
│   ├── bottomRightFrameBg.png
│   ├── bottomRightFrameInactiveBg.png
│   ├── bottomShadedLeftFrameBg.png
│   ├── bottomShadedLeftFrameInactiveBg.png
│   ├── bottomShadedMidFrameBg.png
│   ├── bottomShadedMidFrameInactiveBg.png
│   ├── bottomShadedRightFrameBg.png
│   ├── bottomShadedRightFrameInactiveBg.png
│   ├── buttonsLeftBg.png
│   ├── buttonsLeftInactiveBg.png
│   ├── buttonsRightBg.png
│   ├── buttonsRightInactiveBg.png
│   ├── leftLowerCornerFrameBg.png
│   ├── leftLowerCornerFrameInactiveBg.png
│   ├── leftMidFrameBg.png
│   ├── leftMidFrameInactiveBg.png
│   ├── leftUpperCornerFrameBg.png
│   ├── leftUpperCornerFrameInactiveBg.png
│   ├── leftUpperFrameBg.png
│   ├── leftUpperFrameInactiveBg.png
│   ├── rightLowerCornerFrameBg.png
│   ├── rightLowerCornerFrameInactiveBg.png
│   ├── rightMidFrameBg.png
│   ├── rightMidFrameInactiveBg.png
│   ├── rightUpperCornerFrameBg.png
│   ├── rightUpperCornerFrameInactiveBg.png
│   ├── rightUpperFrameBg.png
│   ├── rightUpperFrameInactiveBg.png
│   ├── titleLeftBg.png
│   ├── titleLeftInactiveBg.png
│   ├── titleMidBg.png
│   ├── titleMidInactiveBg.png
│   ├── titleRightBg.png
│   ├── titleRightInactiveBg.png
│   ├── topLeftFrameBg.png
│   ├── topLeftFrameInactiveBg.png
│   ├── topMidFrameBg.png
│   ├── topMidFrameInactiveBg.png
│   ├── topRightFrameBg.png
│   └── topRightFrameInactiveBg.png
└── masks
    ├── buttomLeftCornerBitmap.png
    ├── buttomMidBitmap.png
    ├── buttomRightCornerBitmap.png
    ├── buttomShadedLeftCornerBitmap.png
    ├── buttomShadedMidBitmap.png
    ├── buttomShadedRightCornerBitmap.png
    ├── topLeftCornerBitmap.png
    ├── topMidBitMap.png
    └── topRightCornerBitmap.png
