Zendesk: Toggl Button Highlighter v1.0.0

← Back to Stylus Rules

Adds visual indicators to the Toggl button in Zendesk - green border when timer is active, red border when inactive.

What it does

This style rule highlights the Toggl button in Zendesk by adding clear visual indicators:

  • Green glowing border when the timer is active (running)
  • Red glowing border when the timer is inactive (stopped)

This makes it easy to see at a glance whether you have a timer running without having to look closely at the button.

Install Style

Style Content

/* ==UserStyle==
@name           Zendesk: Toggl Button Highlighter
@namespace      https://www.timhilton.xyz/stylus-rules/
@version        1.0.0
@description    Adds visual indicators to the Toggl button in Zendesk - green border when timer is active, red border when inactive
@author         Tim Hilton
@homepageURL    https://www.timhilton.xyz/stylus-rules/zendesk/toggl-button-highlighter/
@updateURL      https://www.timhilton.xyz/stylus-rules/zendesk/toggl-button-highlighter/latest/toggl-button-highlighter.user.css
==/UserStyle==*/

@-moz-document regexp("https?://.*\\.zendesk\\.com/.*") {
/* Toggl Button Highlighter for Zendesk */

/* Active state - green indicator */
/* The fill color #D164C5 (purple/magenta) indicates an active/running timer in Toggl */
.toggl-button button:has(path.background-circle[fill="#D164C5"]) {
    position: relative;
    padding: 4px;
    border: 3px solid #00ff00;  /* Bright green border for active state */
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.6);
}

/* Inactive state - red indicator */
/* The fill color #8E6F9B (muted purple) indicates an inactive/stopped timer in Toggl */
.toggl-button button:has(path.background-circle[fill="#8E6F9B"]) {
    position: relative;
    padding: 4px;
    border: 3px solid #ff0000;  /* Bright red border for inactive state */
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.4);
}
}