Area 51/GeyserStyleSheet

Geyser.StyleSheet

Allows you to create a managed stylesheet to make it easier to set and change properties. Also allows you to inherit properties from another stylesheet, making it easier to manage multiple styles at once.

Basic Usage

Here's an example to get you started. This creates a basic stylesheet to set the background color black and the foreground/text color to green, then applies it to a Geyser Label.

local stylesheet = Geyser.StyleSheet:new([[
    background-color: black;
    color: green;
]])
local testLabel = Geyser.Label:new({
  name = "testLabel",
  x = 100,
  y = 100,
  height = 100,
  width = 300,
  stylesheet = stylesheet:getCSS(),
})

-- Alternate method of creating a stylesheet using a table of properties
local stylesheet = Geyser.StyleSheet:new({
  ['background-color'] = "black",
  ['color'] = "green",
})

Getting the CSS string

As shown above, you can use getCSS to get the stylesheet as a string.

display(stylesheet:getCSS())
--[[
"background-color: black;\ncolor: green;"
--]]

Including a target

You can include a 'target' for your stylesheet to be applied to, such as QLabel, QPlainTextEdit, etc.

-- QPlainTextEdit is useful for styling command lines in particular, to keep the style from bleeding into any associated miniconsole or userwindow.
local stylesheet = Geyser.StyleSheet:new([[
QPlainTextEdit {
    background-color: black;
    color: green;
}]])

-- or as an optional third argument. Passing nil for the parent explicitly 
local stylesheet = Geyser.StyleSheet:new([[
    background-color: black;
    color: green;
]], nil, "QPlainTextEdit")

-- or using the setTarget function after the fact
local stylesheet = Geyser.StyleSheet:new([[
    background-color: black;
    color: green;
]])
stylesheet:setTarget("QPlainTextEdit")

Changing a property

Assuming you started with the example above, if you wanted to change the background color to purple you would do the following:

stylesheet:set("background-color", "purple")
testLabel:setStyleSheet(stylesheet:getCSS())

Or if you wanted to set the font, you would do:

stylesheet:set("font", [["Ubuntu Mono"]])

Note the way we set the font with the double quotes included in the string, this is because the quotes have to be there in the final stylesheet. You could use single quotes instead of the bracket notation as well:

stylesheet:set("font", '"Ubuntu Mono"')

Getting the value of a property

Again assuming you started with the example code above it's as easy as

stylesheet:get("color") -- will return "green"

Getting a table of properties and their values

display(stylesheet:getStyleTable())
--[[
{
  ["background-color"] = "purple",
  color = "green",
  font = '"Ubuntu Mono"'
}
--]]

Setting the properties via table

stylesheet:setStyleTable({
  ["background-color"] = "purple",
  color = "green",
  font = '"Ubuntu Mono"',
})

Resetting the style with a string

Creating a new Geyser.StyleSheet would break any inheritance for stylesheets which had this one as a parent (see below), so if you wish to reset the style via CSS string you should use :setCSS

stylesheet:setCSS([[
    background-color: black;
    color: green;
    font: "Ubuntu Mono";
]])

Inheriting properties

As with most things Geyser, just pass the parent in when you create the new stylesheet

local childsheet = Geyser.StyleSheet:new("color: blue;", stylesheet)
display(childsheet:getStyleTable())
--[[
{
  ["background-color"] = "purple",
  color = "blue",
  font = '"Ubuntu Mono"'
}
--]]

display(childsheet:get("background-color")
--"purple"

-- show only properties set in this stylesheet, without inheritance
display(childsheet:getStyleTable(false))
--[[
{
  color = "blue"
}
--]]

-- can do the same for the CSS string
display(childsheet:getCSS(false))
--[[
"color: blue;"
--]]