TFS+ by awood1

/* ==UserStyle==
@name         TFS+
@version      20220928.20.31
@namespace    userstyles.world/user/awood1
@description  Adds style enhancements to on-prem Microsoft TFS web app (Azure DevOps).
@author       awood1
@license      No License
==/UserStyle== */

@-moz-document regexp("https://tfs\\..*\\.com/.*") {
/********************************************************/
/* Scope: GLOBAL */
/********************************************************/

/* Decrease the width of the giant left sidebar without fully collapsing it */
.region-navigation.expanded {
    width: 130px;
}


}

@-moz-document regexp("https://tfs\\.prd\\..*\\.com.*/backlog/.*") {
/********************************************************/
/* Scope: WORK ITEM BACKLOG LISTS  */
/********************************************************/

/********************************************************/
/* Extra emphasis on list items */
/********************************************************/

/* Emphasis on selected row */
.grid-row.grid-row-selected {
    border-width: 1px !important; 
    border-style: solid !important;
    border-color: gray !important;
}

/* Emphasis on hovered row */
.grid-row-hover {
    background-color: #b6ff6e !important;
} 

/* Add border to top level items for better group visualization when expanding children */
div[aria-level="1"] {
    border-top: 1px solid #CCC !important;
}


/********************************************************/
/* Change row background based on State */
/********************************************************/
/* Approach: add pseudo element to the circle state indicator and expand it to the entire row */

/* Allow the pseudo element to expand outside its cell */
.grid-cell:nth-child(n+5) { 
    position: unset;
}

/* Set up the pseudo element for all States */
.grid-row:not(.aw-highlighting) .workitem-state-circle:after, .workitem-state-circle:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 10000px;
    opacity: 0.14;
    top: 0;
    left: 0px;
    pointer-events: none;
}

/* Change the color based on the State */
.workitem-state-circle[style*="background-color: rgb(0, 122, 204)"]:after { background-color: rgb(0, 122, 204); } /* Active */

.workitem-state-circle[style*="background-color: rgb(255, 157, 0)"]:after { background-color: rgb(255, 157, 0); } /* Resolved */

.workitem-state-circle[style*="background-color: rgb(51, 153, 51)"]:after { background-color: rgb(51, 153, 51); opacity: 0.05 } /* Closed */

.workitem-state-circle[style*="background-color: rgb(178, 178, 178)"]:after { background-color: rgb(178, 178, 178); opacity: 0; /* (nothing) */ } /* New */

/* Add an additional pseudo to "dim" the Closed items unless hovering over them */
.grid-row:not(.grid-row-hover) .workitem-state-circle[style*="background-color: rgb(51, 153, 51)"]:before {
    background-color: white;
    opacity: 0.5;
    z-index: 1;
}

.vss-PivotBarItem {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

}