YAML CSS Examples

This is the default styles provided by BUI

# *
SharedProperties:
  BackgroundColor: "0xFF0000" # Default background color for shared properties

Textures:
  - id: .$BUI.DEFAULT.SLIDER.BGI
    path: /assets/guilib/textures/gui/themes/default/ScrollBar.png
    mode: STRETCH
    height: 16
    width: 16

  - id: .$BUI.DEFAULT.SLOT.BGI
    path: /assets/guilib/textures/gui/themes/default/Slot.png
    mode: STRETCH
    height: 18
    width: 18

  - id: .$BUI.DEFAULT.PANEL.BGI
    path: /assets/guilib/textures/gui/themes/default/nine_slice/ns_panel.png
    mode: NINE_SLICE
    height: 64
    width: 64
    border:
      top: 6
      bottom: 6
      left: 6
      right: 6


    # BUTTON
  - id: .$BUI.DEFAULT.BUTTON.PRESSED.BGI
    path: /assets/guilib/textures/gui/themes/default/nine_slice/pressed_ns_button.png
    mode: NINE_SLICE
    height: 20
    width: 200
    border:
      top: 2
      left: 2
      right: 2
      bottom: 3

  - id: .$BUI.DEFAULT.BUTTON.HOVER.BGI
    path: /assets/guilib/textures/gui/themes/default/nine_slice/hover_ns_button.png
    mode: NINE_SLICE
    height: 20
    width: 200
    border:
      top: 2
      left: 2
      right: 2
      bottom: 3

  - id: .$BUI.DEFAULT.BUTTON.DEFAULT.BGI
    path: /assets/guilib/textures/gui/themes/default/nine_slice/ns_button.png
    mode: NINE_SLICE
    height: 20
    width: 200
    border:
      top: 2
      left: 2
      right: 2
      bottom: 3

  - id: .$BUI.DEFAULT.BAR.INCOMPLETE.BGI
    path: /assets/guilib/textures/gui/themes/default/incompleteBar.png
    mode: STRETCH
    height: 5
    width: 47

  - id: .$BUI.DEFAULT.BAR.COMPLETE.BGI
    path: /assets/guilib/textures/gui/themes/default/completeBar.png
    mode: STRETCH
    height: 5
    width: 47


# Selectors
Select:
  - at: body
    childrenPlacement: CHILD_DECIDE
    width: 100%
    height: 100%
    backgroundColor: "0x000000"

  - at: label
    textColor: "0x000000"
    lineHeight: 12px

  - at: slider
    backgroundImage: .$BUI.DEFAULT.SLIDER.BGI
    width: 3px
    height: 3px
    scrollBarLength: 6
    direction: vertically

  - at: slot
    backgroundImage: .$BUI.DEFAULT.SLOT.BGI
    width: 20px
    height: 20px

  - at: draggableelement
    backgroundColor: "0xFFFFFF"
    width: 30px
    height: 30px

  - at: progressbar
    backgroundImage: .$BUI.DEFAULT.BAR.INCOMPLETE.BGI
    progressBarFullBackground: .$BUI.DEFAULT.BAR.COMPLETE.BGI
    progressBarSmoothingFactor: 0.1
    width: 47px
    height: 5px

  - at: button
    width: 64px
    height: 32px
    backgroundImage: .$BUI.DEFAULT.BUTTON.DEFAULT.BGI
    backgroundImageHover: .$BUI.DEFAULT.BUTTON.HOVER.BGI
    backgroundImagePressed: .$BUI.DEFAULT.BUTTON.PRESSED.BGI

  - at: scrollablelayout
    width: 100%
    height: 100%
    thumbWidth: 10px
    scrollBarSize: 10px
    scrollBarVisible: true
    scrollBarColor: "0x342B27"
    scrollBarThumbColor: "0x4D392F"
    overflow: hide
    layoutSpacing: 2px
    layoutCenterItems: false
    border: 1px 0x000000