Gridfox: Highlight Today in Month View latest version (currently v1.0.0)

← Back to Stylus Rules

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)));
}
}