Steampunk

[WolfwithSword]

Preset Collection

Author: WolfwithSword

Requirements:

• OBS Blending Method - Fix transparency is dim or grey #76 (comment)

Previews

[WolfwithSword]

Timer

A lightweight, customizable nixie-tube themed timer.

On pause, it dims each tube, and on lock, tubes will appear cracked and colons swapped for lock icons.

Tubes are mostly transparent with base configuration, so keep this in mind for your overlays.

Each time a tube changes a number, it will do a very minimal flicker (hard to see in recording preview)

Please setup this fix in OBS on your browser source

msedge_pwDuKLzCtc.mp4

Configuration

CSS Variables

• digit-color
• digit-glow-color
• colon-color
• colon-glow-color
• tube-width
• tube-height
• digit-size
• gap-digit
• gap-colon
• gap-tube-group
• alignment
  • left, center, right
• tube-bg
• tube-border
• tube-inner-glow
• tube-inner-glow-strong
• tube-outer-glow
• tube-outer-glow-strong
• tube-wire-light
• tube-wire-dark
• tube-outer-glow-max-size
  • this also adjusts padding to the edges so the glow doesn't get cut off

JS Variables

None

[WolfwithSword]

Points

A lightweight, customizable nixie-tube themed points counter.

On pause, it dims each tube, and on lock, tubes will appear cracked and colons swapped for lock icons.

Tubes are mostly transparent with base configuration, so keep this in mind for your overlays.

Each time a tube changes a number, it will do a very minimal flicker (hard to see in recording preview)

msedge_eetem9Z2rv.mp4

Configuration

CSS Variables

• digit-color
• digit-glow-color
• digit-size
• gap-digit
• tube-width
• tube-height
• tube-bg
• tube-border
• tube-inner-glow
• tube-inner-glow-strong
• tube-outer-glow
• tube-outer-glow-strong
• tube-wire-light
• tube-wire-dark
• alignment
  • left, center, right
• tube-outer-glow-max-size
  • this also adjusts padding to the edges so the glow doesn't get cut off

JS Variables

• useForMoney
  • If true, will use rounded_money sum from subathon in primary currency instead of points

[WolfwithSword]

Multiplier

A small box with two lights, indicating whether the multiplier is enabled for points, time, or both.

A steel plate is featured in the middle which indicated the multiplier amount.

If a duration is set, a gauge bar is shown for how much time is left. If no duration, it stays full.

msedge_ywq2bfDdLT.mp4

Configuration

CSS Variables

• light-color
• backgorund-color
• border-color
• border-thickness
• width
• font-size
• small-font-size
• alignment
  • left, center, right
• font-family
• font-color
• light-size
• gauge-thickness

JS Variables

None

[WolfwithSword]

Event

A card/plate displaying most recent events, and queuing them if multiple such that each displays for a short period of time.

An icon is displayed for each type of event in an embossed look, and a steel plate shows the user who triggered it, with information printed below.

msedge_08d6EF5atx.mp4

Configuration

CSS Variables

• background-color
• border-color
• border-thickness
• font-size
• small-font-size
• font-family
• text-color
• event-width

JS Variables

• applicableEvents
  • EventTypeList - List of Events

[WolfwithSword]

Goals

A configurable number of upcoming goals displayed in a vertical list, with the most recently completed being optionally shown. Their points and text descriptions are shown.

Configuration

CSS Variables

• goal-height
• goal-gap
• alignment
  • left, center, right
• background-color
• border-color
• border-thickness
• font-size
• small-font-size
• font-family
• font-color

JS Variables

• showLastCompleted
  • Whether or not to show the last completed on top, faded
• maxGoalsToShow
  • How many items are shown max, including optional last completed.