Stylus style to show tree view calling out still-open bugs and overall make things look better

stylus-bugzilla-trees-in-red-and-black

@-moz-document domain("bugzilla.mozilla.org") {
/* undo dark theme auto-application */
@media screen and (prefers-color-scheme: dark) {
    :root {
        /** Accent Colors */
        --accent-color-red-1: 220, 40, 30 !important;
        --accent-color-red-2: 194, 35, 27 !important;
        --accent-color-green-1: 40, 120, 40 !important;
        --accent-color-blue-1: 0, 108, 191 !important;
        --accent-color-blue-2: 0, 94, 166 !important;
        --accent-color-blue-3: 0, 122, 204 !important; /* B 80% */
        --accent-color-blue-4: 0, 107, 179 !important; /* B 70% */
        --accent-color-blue-5: 0, 92, 153 !important; /* B 60% */
        --accent-color-yellow-1: 210, 210, 60 !important;
        --accent-color-lightyellow-1: 250, 250, 190 !important;
        --accent-color-pink-1: 250, 195, 195 !important;
        --accent-color-lightgreen-1: 195, 250, 195 !important;
        --accent-color-wine-1: 217, 207, 238 !important;
        --accent-color-purple-1: 146, 72, 200 !important;

        /** App */
        --application-foreground-color: rgb(40, 41, 42) !important;
        --application-background-color: rgb(235, 236, 237) !important;
        --application-header-foreground-color: rgb(200, 201, 202) !important;
        --application-header-foreground-hover-color: rgb(240, 241, 242) !important;
        --application-header-background-color: rgb(50, 51, 52) !important;
        --secondary-application-header-foreground-color: rgb(240, 241, 242) !important;
        --secondary-application-header-background-color: rgb(70, 71, 72) !important;


        /** Region */
        --primary-region-border-color: rgb(210, 211, 212) !important;
        --primary-region-box-shadow: 0 1px 4px rgba(40, 41, 42, .2) !important;
        --primary-region-background-color: rgb(250, 251, 252) !important;
        --primary-region-header-background-color: rgb(240, 241, 242) !important;
        --secondary-region-border-color: rgb(220, 221, 222) !important;
        --secondary-region-background-color: var(--primary-region-header-background-color) !important;
        --overlay-background-color: rgba(40, 41, 42, .7) !important;

        /** Label */
        --primary-label-color: var(--application-foreground-color) !important;
        --secondary-label-color: rgb(80, 81, 82) !important;
        --tertiary-label-color: rgb(120, 121, 122) !important;
        --inverted-label-color: rgb(240, 241, 242) !important;
        --required-label-color: rgb(var(--accent-color-red-2)) !important;

        /** Text */
        --primary-text-color: var(--application-foreground-color) !important;
        --primary-text-background-color: var(--primary-region-background-color) !important;
        --secondary-text-color: rgb(100, 101, 102) !important;
        --secondary-text-border-color: rgb(220, 221, 222) !important;
        --placeholder-text-color: var(--secondary-text-color) !important;
        --secondary-text-background-color: var(--primary-region-header-background-color) !important;
        --selected-text-background-color: rgba(var(--accent-color-blue-1), .3) !important;
        --link-text-color: rgb(var(--accent-color-blue-1)) !important;
        --hovered-link-text-color: rgb(var(--accent-color-blue-2)) !important;
        --visited-link-text-color: rgb(var(--accent-color-purple-1)) !important;
        --text-shadow-light: 0 0 4px rgb(40, 41, 42) !important;

        /** Control */
        --control-foreground-color: var(--primary-label-color) !important;
        --control-background-color: rgb(255, 255, 255) !important;
        --control-accent-color: rgb(var(--accent-color-blue-1)) !important;
        --control-border-color: rgb(200, 201, 202) !important;
        --secondary-control-border-color: var(--secondary-region-border-color) !important;
        --focused-control-border-color: rgb(var(--accent-color-blue-1)) !important;
        --checked-control-background-color: var(--focused-control-border-color) !important;
        --selected-control-foreground-color: var(--application-foreground-color) !important;
        --selected-control-background-color: rgb(230, 231, 232) !important;
        --invalid-control-border-color: rgb(var(--accent-color-red-1)) !important;
        --disabled-control-foreground-color: rgb(160, 161, 162) !important;
        --scrollbar-color: rgb(190, 191, 192) var(--application-background-color) !important;

        /** Button */
        --primary-button-foreground-color: rgb(255, 255, 255) !important;
        --primary-button-background-color: rgb(var(--accent-color-blue-3)) !important;
        --primary-button-border-color: var(--primary-button-background-color) !important;
        --hovered-primary-button-foreground-color: var(--primary-button-foreground-color) !important;
        --hovered-primary-button-background-color: rgb(var(--accent-color-blue-4)) !important;
        --hovered-primary-button-border-color: var(--hovered-primary-button-background-color) !important;
        --pressed-primary-button-foreground-color: var(--primary-button-foreground-color) !important;
        --pressed-primary-button-background-color: rgb(var(--accent-color-blue-5)) !important;
        --pressed-primary-button-border-color: var(--pressed-primary-button-background-color) !important;
        --secondary-button-foreground-color: var(--primary-label-color) !important;
        --secondary-button-background-color: rgb(230, 231, 232) !important;
        --secondary-button-border-color: rgb(210, 211, 212) !important;
        --hovered-secondary-button-foreground-color: var(--secondary-button-foreground-color) !important;
        --hovered-secondary-button-background-color: rgb(220, 221, 222) !important;
        --hovered-secondary-button-border-color: var(--secondary-button-border-color) !important;
        --pressed-secondary-button-foreground-color: var(--secondary-button-foreground-color) !important;
        --pressed-secondary-button-background-color: rgb(200, 201, 202) !important;
        --pressed-secondary-button-border-color: var(--secondary-button-border-color) !important;
        --danger-button-foreground-color: var(--primary-button-foreground-color) !important;
        --danger-button-background-color: rgb(var(--accent-color-red-1)) !important;
        --danger-button-border-color: rgb(var(--accent-color-red-1)) !important;
        --selected-button-foreground-color: var(--primary-button-foreground-color) !important;
        --selected-button-background-color: rgb(100, 101, 102) !important;
        --disabled-button-foreground-color: var(--disabled-control-foreground-color) !important;
        --disabled-button-background-color: var(--secondary-button-background-color) !important;

        /** Menu */
        --menu-border-color: var(--secondary-button-border-color) !important;
        --menu-foreground-color: var(--primary-label-color) !important;
        --menu-background-color: var(--primary-region-background-color) !important;
        --menu-box-shadow: 0 1px 12px rgba(40, 41, 42, .2) !important;
        --hovered-menuitem-background-color: var(--selected-control-background-color) !important;

        /** Grid */
        --grid-background-color: var(--primary-region-background-color) !important;
        --grid-border-color: var(--control-border-color) !important;
        --grid-header-background-color: rgb(230, 231, 232) !important;
        --grid-subheader-background-color: rgb(210, 211, 212) !important;
    }

    input[type="checkbox"]:checked {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="rgb(255, 255, 255)" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>') !important;
    }
    
    input[type="checkbox"]:indeterminate {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="rgb(255, 255, 255)" d="M19 13H5v-2h14v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') !important;
    }
    
    select:not([multiple]):not([size]) {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="rgb(160, 161, 162)" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/><path fill="none" d="M0 0h24v24H0V0z"/></svg>') !important;
    }   
}
}

@-moz-document domain("bugzilla.mozilla.org") {
[role="tree"] li a {
    color: #b00;
}
/*
.tree .summ a,
.tree .summ_deep a {
    color: #b00;
}
*/
/*
.tree .summ .bz_closed a,
.tree .summ .bz_CLOSED td a,
*/
[role="tree"] li a.bz_obsolete, 
[role="tree"] li a.bz_inactive, 
[role="tree"] li a.bz_closed {
    color: #000;
}

/* and in non-tree view */
/*
#field-value-dependson a:not(.bz_closed),
#field-value-blocked a:not(.bz_closed) {
    color: #b00;
}
*/
}

@-moz-document regexp("https://(bugzilla\\.mozilla\\.org|bug[0-9]+\\.bmoattachments\\.org)/.*") {
/* font */
body,
button,
td,
th,
input,
select,
option,
optgroup,
textarea,
.text_input,
.comment-text,
#comment {
    font-family: Helvetica, Arial, "Helvetica Neue", "Open Sans", "Fira Sans", sans-serif;
}

/* color */
body {
    background-color: #c8c8c8;
    background-image: none;
}



/* action buttons */
#mode-container {
    padding-right: 3px;
    padding-top: 4px;
}
#mode-container .button-row {
    margin-top: 10px;
}
button {
    font-size: 12px;
}

/*
button
input[type="submit"],
*/
input[type="button"],
#commit,
#commit_top,
#header .btn,
#header input[type="submit"] {
    background-color: #00539f;
    background-image: -moz-linear-gradient(#0095dd, #00539f);
    background-image: -webkit-linear-gradient(#0095dd, #00539f);
    background-image: linear-gradient(#0095dd, #00539f);
}
main button.minor {
    border: 1px solid #b5b5b5;
}

#comment-tabs li {
    border: 1px solid #b5b5b5;
}
#comment {
    border: 1px solid #b5b5b5;
}

/* links */
a:visited {
    color: #0b0080;
}
/*
a,
#header a,
#header a:visited,
#footer a,
#footer a:visited {
    color: #00539f;
}
a:hover,
#header a:hover,
#footer a:hover {
    color: #0095dd;
}
*/

/* header */
#field-value-short_desc {
    padding-right: 10px;
}
#field-status_summary {
    width: 98%;
}
/* REMOVE ME

#title {
    padding-top: .5%;
}
#header {
    border-top: 2px solid #c8c8c8;
    border-bottom: 1px solid #aaa;
    margin-bottom: 10px;
    padding-bottom: 3px;
    width: 100%;
}
#header .links {
    margin-left: -.2%;
}
#header form {
    margin-right: .2%;
}
#header-nav .label {
    margin-top: 2px;
}
*/

/* footer */
/* REMOVE ME
#links-saved {
    padding: 1% 0 0 0;
    line-height: 150%;
}
#footer ul {
    padding-bottom: 5px;
}
*/

/* body */
/* REMOVE ME
#message {
	margin-top: 10px;
    margin-bottom: 14px;
}
*/
#top-actions {
    margin: 8px 0 18px 0;
}
.bz_buglist {
    padding-top: 5px;
    padding-bottom: 6px;
}
.bz_result_count {
    display: block;
    padding-left: 4px;
}
.bz_private {
    padding: 4px 0;
    margin-bottom: 10px;
}

/* modules/fields */
/* REMOVE ME
.module-content {
    padding: 2px 5px 6px 5px;
}
*/
.module .field .name {
    vertical-align: middle;
}

#field-bug_flags .name,
#module-firefox-tracking-flags .name {
    vertical-align: top;
}

/* specific background treatment: bz_group_, then mozilla-employee-confidential, or core-security (so far) */
/*
body[class*="bz_group_"] {
    border-left: solid red 6px;
}
body[class*="bz_group_"] #wrapper {
	margin-left: -6px;
}
*/
/*
bz_group_client-services-security
bz_group_firefox-core-security
bz_group_dom-core-security
bz_group_core-security-release
*/

body[class*="-security"] {
    background-color: #ffe0b0;
}

body[class*="bz_group_mozilla-employee-confidential"] {
    background-color: #d9cfee;
}

/* misc */
#badge {
    padding: 2px 5px;
}
.new-changes-separator {
    border-top-color: rgb(39, 122, 193);
    border-top-width: 18px;
}
.new-changes-separator span {
    border: none;
    border-radius: 0;
    color: rgb(39, 122, 193);
    right: 50%;
    top: -17px;
}

/* SHOULD BE DEFAULT */
#field-cf_fx_iteration {
    display: initial !important;
}

select:not([multiple]):not([size]) {
    padding-top: 1px !important;
    padding-bottom: 0px !important;
}

/* controls */
input[type="date"], 
input[type="email"], 
input[type="number"], 
input[type="password"], 
input[type="text"], 
input[type="url"], 
input:not([type]), 
textarea {
    padding-bottom: 1px;
    padding-left: 3px;
    padding-top: 2px;
}

.buttons.toggle[role="radiogroup"] label {
    padding-left: 6px;
}

.module .field.contains-buttons {
    margin: 6px 0 6px 4px;
}

#field-status-edit .name {
    position: relative;
    top: 3px;
    vertical-align: top;
}
#field-status-edit #duplicate-actions {
    position: relative;
    top: -4px;
}
}