Simple-1

[WolfwithSword]

Preset Collection

Author: WolfwithSword

Requirements:

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

Previews

[WolfwithSword]

Timer

Displays hours, minutes, seconds. Hiding hours if <1h remains. Top-down animation on number change.

When time multiplier is active, it will popup in a circle on the right with the value.

When locked, a lock icon will appear in the top left. When paused, the numbers will fade/dim.

msedge_QLaQve5Vr7.mp4

Configuration

CSS Variables

• hours-color
• minutes-color
• seconds-color
• border-color
• inner-border-color
• main-background-color
• colon-color
• font
• glow-color
• font-size
• lock-color
• multiplier-text-color

[WolfwithSword]

Event

Displays the most recent event. If multiple are queued, will display each for a short period of time before swapping to the next.

The primary text will be the name of the user who triggered the event, followed by underneath the value, amount, and/or type of event.

On the right, will be an icon indicating the type of event it was.

On initial load, it will say "Welcome!" with a heart.

msedge_JWdB0KS0qh.mp4

Testing via the UI will always display the user as SYSTEM

Configuration

CSS Variables

• border-color
• inner-border-color
• main-background-color
• font
• event-width
• text-color
• event-glow
• glow-color

JS Variables

• applicableEvents
  • EventTypeList - List of Events

[WolfwithSword]

Progress

A progress bar that shows the current points value, and the max value of the goals. Additionally on the bar, it shows markers for each upcoming goal in relation to the bar. Once it's filled up, it only shows the full bar and the points value.

When the multiplier is active for points, it will show in the bottom right corner in a circle.

msedge_xtifZjjNMR.mp4

Configuration

CSS Variables

• gradient-start
• takes a color for the bar
• gradient-end
• takes a color for the end of the bar
• text-color
• font
• main-background-color
• multiplier-text-color
• border-color
• inner-border-color

JS Variables

• pulseOnFull
  • Whether or not to pulse the progress bar with an animation when points are full
• showMarkers
  • Show markers for upcoming goals on the progress bar
• useForMoney
  • If true, will use rounded_money sum from subathon in primary currency instead of points for current value. Will not show multiplier if for money is true.

[WolfwithSword]

Goals

A configurable list of upcoming goals, showing their text description and their points value.

Optionally, it can show the last completed goal on top.

Configuration

CSS Variables

• border-color
• inner-border-color
• main-background-color
• goal-text-color
• goal-height
• goal-gap
• visible-items
• Number of goals to show

JS Variables

• showLastCompleted
  • Whether or not to show the last completed on top, faded