☰

Greasy Fork is available in English.

GitHub Red Issues

Turns the issue color of closed issues from purple back to red - back reddish color icon for closed github issues.

  1. /* ==UserStyle==
  2. @name           GitHub Red Issues
  3. @namespace      github.com/openstyles/stylus
  4. @version        10.0.1
  5. @description    Turns the issue color of closed issues from purple back to red - back reddish color icon for closed github issues.
  6. @author         Katsute
  7.  
  8. // @collaborator   kidonng
  9. // @contributor    krystian3w
  10. // @contributor    iam-py-test
  11. // @alterantive    obfuscatedgenerated
  12. // @compatible   firefox Firefox 121+
  13. // @compatible   chrome Chrome 105+
  14. // @compatible   edge Edge 105+
  15. // @compatible   opera Opera 91+
  16. // @compatible   safari Safari 15.4+
  17. @license CC BY-NC-SA 4.0 https://creativecommons.org/licenses/by-nc-sa/4.0/
  18. ==/UserStyle== */
  19. @-moz-document domain("github.com"), domain("github-com.translate.goog"), regexp("^https?:\\/\\/translated\\.turbopages\\.org\\/proxy_u\\/.*/https\\/github\\.com\\/.*"), regexp("^https:\\/\\/web\\.archive\\.org\\/web\\/[0-9]+\\/https?\\:\\/\\/github.com\\/.*"), regexp("^https:\\/\\/archive\\.[\\w]{2,10}\\/[0-9.-]+\\\\/https?\\:\\/\\/github.com\\/.*") {
  20. /* powered on https://raw.githubusercontent.com/Katsute/GitHub-Red-Issues/main/src/style.css */
  21. /* Copyright (C) 2025 Katsute <https://github.com/Katsute> */
  22.  
  23. :root {
  24.     --rissue-issue-closed    : var(--bgColor-closed-emphasis, #da3633);
  25.     --rissue-issue-closed-fg : var(--fgColor-closed, #f85149);
  26.     --rissue-issue-closed-bg : var(--bgColor-closed-muted, #f8514926);
  27. }
  28.  
  29. :not(
  30.     react-app[app-name="repo-deployments"] div,
  31.     react-app[app-name="blackbird-search"] li,
  32.     button[data-testid="mark-as-action-menu-button"] *,
  33.     ul[data-testid="mark-as-action-menu-list"] *
  34. ) > :not(
  35.     span.State--merged,
  36.     span[class^="StateLabel__StateLabelBase"],
  37.     projects-v2 span[class^="StateLabel__StateLabelBase"],
  38.     .TimelineItem-Badge,
  39.     .TimelineItem-badge,
  40.     div:is([class^="prc-Timeline-TimelineBadge-"],[class*=" prc-Timeline-TimelineBadge-"]),
  41.     a[href*="/discussions"],
  42.     .hx_anim-fade-out,
  43.     a[href$="state=closed"] > span,
  44.     h2:has(> a[href$="/deployments"]) + ul > li,
  45.     button[data-testid="checks-status-badge-icon"]
  46. ) > :is(
  47.     /* issue icon */
  48.     svg.octicon-issue-closed,
  49.     /* project icon */
  50.     svg:has(path[d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"] + path[d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"]),
  51.     /* search issue icon */
  52.     svg:has(path[d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm1.5 0a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm10.28-1.72-4.5 4.5a.75.75 0 0 1-1.06 0l-2-2a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018l1.47 1.47 3.97-3.97a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"]),
  53.     /* discussion icon */
  54.     svg.octicon-discussion-closed
  55. ):not(.color-fg-muted){
  56.     color: var(--rissue-issue-closed-fg) !important;
  57. }
  58.  
  59. /* closed projects */
  60. projects-v2 div:has(> span ~ h1) span[data-variant="done"] {
  61.     border-color: var(--rissue-issue-closed) !important;
  62.     background-color: var(--rissue-issue-closed-fg) !important;
  63. }
  64.  
  65. svg:has(path[d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"]) path{
  66.     fill: unset !important;
  67. }
  68.  
  69. /* milestone check */
  70. a[href*="/milestone/"] svg:has(path[d="M10.0206 11.1074C9.68518 11.3949 9.18014 11.3561 8.8926 11.0206L5.8926 7.52061C5.62055 7.20322 5.63873 6.72989 5.93432 6.4343L7.43432 4.9343C7.74674 4.62188 8.25327 4.62188 8.56569 4.9343C8.87811 5.24672 8.87811 5.75325 8.56569 6.06567L7.58953 7.04182L10.1074 9.97935C10.3949 10.3148 10.3561 10.8198 10.0206 11.1074Z"]) path{
  71.     fill: var(--rissue-issue-closed) !important;
  72. }
  73.  
  74. a[href*="/milestone/"] svg:has(path[d="M10.0206 11.1074C9.68518 11.3949 9.18014 11.3561 8.8926 11.0206L5.8926 7.52061C5.62055 7.20322 5.63873 6.72989 5.93432 6.4343L7.43432 4.9343C7.74674 4.62188 8.25327 4.62188 8.56569 4.9343C8.87811 5.24672 8.87811 5.75325 8.56569 6.06567L7.58953 7.04182L10.1074 9.97935C10.3949 10.3148 10.3561 10.8198 10.0206 11.1074Z"]) circle[stroke-linecap="round"]{
  75.     stroke: var(--rissue-issue-closed) !important;
  76. }
  77.  
  78. :is(
  79.     span.State--merged, /* issue badge (legacy) */
  80.     .TimelineItem-badge, /* timeline icon (legacy) */
  81. ):has(svg.octicon-issue-closed, svg.octicon-discussion-closed),
  82. :is(
  83.     span[class^="StateLabel__StateLabelBase"], /* new issue badge & projects v2 */
  84. ):has(path[d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"] + path[d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"]),
  85. /* timeline icon (legacy) */
  86. .TimelineItem-Badge:has(path[d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm1.5 0a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm10.28-1.72-4.5 4.5a.75.75 0 0 1-1.06 0l-2-2a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018l1.47 1.47 3.97-3.97a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"]),
  87. /* timeline icon */
  88. div:is([class^="prc-Timeline-TimelineBadge-"],[class*=" prc-Timeline-TimelineBadge-"]):has(path[d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm1.5 0a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm10.28-1.72-4.5 4.5a.75.75 0 0 1-1.06 0l-2-2a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018l1.47 1.47 3.97-3.97a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"]){
  89.     border-color: var(--rissue-issue-closed) !important;
  90.     box-shadow: var(--boxShadow-thin, inset 0 0 0 max(1px, 0.0625rem)) var(--rissue-issue-closed) !important;
  91.     background-color: var(--rissue-issue-closed) !important;
  92. }
  93.  
  94. /* sub issue circle */
  95. svg[class^="ProgressCircle-module__completedIcon"] > circle{
  96.     stroke: var(--rissue-issue-closed) !important;
  97. }
  98.  
  99. /* progress circle */
  100. :is(
  101.     #issue-viewer-side-panel,
  102.     react-app[app-name="issues-react"]
  103. ) :is(
  104.     circle[class^="ProgressCircle-module__circleProgressShade"],
  105.     circle[class^="ProgressCircle-module__circleProgress"]
  106. ),
  107. projects-v2 svg[data-target="tracked-issues-progress.progress"] circle[stroke-dashoffset]{
  108.     stroke: var(--rissue-issue-closed) !important;
  109. }
  110.  
  111. /* progress check */
  112. :is(
  113.     projects-v2,
  114.     #issue-viewer-side-panel,
  115.     react-app[app-name="issues-react"]
  116. ) :is(
  117.     svg[class^="ProgressCircle-module__completedIcon"]
  118. ) > path{
  119.     fill: var(--rissue-issue-closed) !important;
  120. }
  121. /* powered on https://raw.githubusercontent.com/Katsute/GitHub-Red-Issues/main/src/style.css */
  122. /* Copyright (C) 2025 Katsute <https://github.com/Katsute> */
  123. }