Azure DevOps: Highlight PR Comment State v1.0.0

← Back to Stylus Rules

Colour-codes PR comment states (Active, Pending, Resolved) in Azure DevOps with distinctive colours for quick status identification.

What it does

This style rule improves PR comment visibility by colour-coding comments based on status:

  • Active comments: Red background and border
  • Pending comments: Blue background and border
  • Resolved comments: Green background and border
  • Dropdown menu: Matching colours in the state selection dropdown

This makes it easy to quickly scan comment threads and identify which ones still need attention versus which are resolved.

Install Style

Style Content

/* ==UserStyle==
@name           Azure DevOps: Highlight PR Comment State
@namespace      https://www.timhilton.xyz/stylus-rules/
@version        1.0.0
@description    Color-codes PR comment states (Active, Pending, Resolved) in Azure DevOps with distinctive colors for quick status identification
@author         Tim Hilton
@homepageURL    https://www.timhilton.xyz/stylus-rules/azure-devops/highlight-pr-comment-state/
@updateURL      https://www.timhilton.xyz/stylus-rules/azure-devops/highlight-pr-comment-state/latest/highlight-pr-comment-state.user.css
==/UserStyle==*/

@-moz-document regexp("https://dev.azure.com/.*/pullrequest/.*") {
:root {
    --resolved: limegreen;
    --active: indianred;
    --pending: steelblue;
}

button[aria-label="State button Resolved mode"] {
    border: 2px solid green !important;
    background-color: var(--resolved) !important;
}

button[aria-label="State button Active mode"] {
    border: 2px solid red !important;
    background-color: var(--active) !important;
}

button[aria-label="State button Pending mode"] {
    border: 2px solid dodgerblue !important;
    background-color: var(--pending) !important;
}

table[aria-label^="State button"] tr[aria-posinset="1"]/* Active */
{
    background-color: var(--active);
}

table[aria-label^="State button"] tr[aria-posinset="2"]/* Pending */
{
    background-color: var(--pending);
}

table[aria-label^="State button"] tr[aria-posinset="3"]/* Resolved */
{
    background-color: var(--resolved);
}
}