Gridfox: Highlight Today in Month View v1.0.0

← Back to Stylus Rules

Highlights the current day in the Gridfox month view calendar with a green border and "Today" label.

What it does

This style rule improves calendar navigation by:

  • Green border: Adding a prominent green border around today's date
  • Today label: Displaying "Today" above the current day's cell

This makes it easy to quickly identify today's date when viewing your Gridfox calendar in month view mode.

Install Style

Style Content

/* ==UserStyle==
@name           Gridfox: Highlight Today in Month View
@namespace      https://www.timhilton.xyz/stylus-rules/
@version        1.0.0
@description    Highlights the current day in the Gridfox month view calendar with a green border and "Today" label
@author         Tim Hilton
@homepageURL    https://www.timhilton.xyz/stylus-rules/gridfox/highlight-today-month-view/
@updateURL      https://www.timhilton.xyz/stylus-rules/gridfox/highlight-today-month-view/latest/highlight-today-month-view.user.css
==/UserStyle==*/

@-moz-document domain("ongridfox.com"), domain("app.gridfox.com") {
:root {
    --border-width: 3px;
}

.month-view .month div.day.selected {
    border: var(--border-width) solid green;
    z-index: 999;
}

/* Adds a "Today" label above the selected day */
.month-view .month div.day.selected::before {
    content: "Today";
    position: absolute;
    bottom: 100%;
    background: green;
    color: white;
    text-align: center;
    padding: 0;
    
    /* Border width on each side of the element */
    left: calc(-1 * var(--border-width));
    width: calc(100% + (2 * var(--border-width)));
}
}