CircleCi Dark Dashboard Reborn by enyman

/* ==UserStyle==
@name           CircleCi Dark Dashboard
@namespace      github.com/aalvarado
@version        1.1.0
@description    Dark CircleCi Dashboard style
@license        BSD
@author         @aalvarado
@var color pipelines-bg "Pipelines Background Color" #222
@var color default-fg "Default Foreground Color" #fff
@var color default-bg "Default Background Color" #222
@var color default-bg-hover "Default Background Hover Color" #333
@var color default-link "Default link Color" #afa
@var color default-hl "Default Highlight Color" white
@var color cards-bg "Cards Bg" #333
@var color cards-fg "Cards Fg" #ccc
@var color input-bg "Input background color" #333
@var color input-bg-hover "Input background color hover" #666
@var color input-fg "Input background color" #ccc
@var color header-bg "Header background color" blueviolet
@var color fail-fg "Fail Foreground color" red
==/UserStyle== */

@-moz-document url-prefix("https://app.circleci.com/pipelines/") {  
    /* general */
    
    button,
    [role='button'],
    input, ul,
    [data-testid="side-panel-position"] div {
        background-color: var(--input-bg) !important;
        color: var(--default-fg) !important;
    }
    
    
    
    [data-testid="side-panel-position"] > div:first-child > div:first-child > div:nth-child(2) > div:first-child {
        background-color: white !important;
    }
    
    button:hover {
        background-color: var(--input-bg-hover) !important;
    }
    
      
    svg path{
        color: var(--default-hl) !important;
        fill: var(--default-hl);
    }
    
    
    button[class][aria-label*='Picker'] + div,
    button[class][aria-label*='Picker'] + div > div:first-child{
        background-color: var(--input-bg) !important;
        color: var(--default-fg) !important;
    }
    
    button[class][aria-label*='Picker'] + div:hover,
    button[class][aria-label*='Picker'] + div > div:first-child:hover,
    button[class][aria-label*='Picker'] + div a:hover{
        background-color: var(--input-bg-hover) !important;
    }

    /* Pipelines main only has main element */
    main div header  {
       background-color: var(--default-bg) !important;
       color: var(--default-fg);
    }
    
     .subheading h5 {
        color: var(--default-fg);
    }
    
    main > div > header span  {
       color: var(--default-fg);
    }
    
    main div header li a,
    main > div:first-child li a,
    main > div:first-child li span {       
        color: var(--default-fg) !important;
    }
    
    main > div:last-child > div:first-child div {
        color: var(--default-fg) !important;
    }
    
    main > div:first-child > div,
    [data-cy="workflow-graph"]{
       background-color: var(--pipelines-bg) !important;
        padding: 20px;
        margin: 20px;
        
    }

    main > div:first-child > div > div:nth-child(2) p {
        color: var(--default-fg) !important
    }

    main > div:first-child > div > div:not(:first-child):not(:nth-child(2)) {
        background-color: var(--cards-bg) !important;
    }
    
    main > div:first-child > div:nth-child(2) > div:nth-child(2) {
        background-color: var(--header-bg );
    }
    
    main > div:first-child > div > div:not(:first-child):not(:nth-child(2)) > div:nth-child(9) > div p:hover {
        background-color: var(--header-bg );
    }
    
    main > div > div:nth-child(2) > div > div:nth-child(7) > div > div:nth-child(4) > div:nth-child(2) > div > div  a {
         background-color: var(--default-bg );
    }
    
    main > div:nth-child(2) > div:not(:first-child):not(:nth-child(2)) > div p {
        color: var(--default-fg);
    }
    
    main > div > header > div:nth-child(2) > div:nth-child(2) > a:nth-child(4) {
        background-color: var(--input-bg) !important;
    }
    
    main > div:first-child > div > div:not(:first-child):not(:nth-child(2)) div span,
    main > div:first-child > div > div:not(:first-child):not(:nth-child(2)) div span div,
    main > div:first-child > div > div:not(:first-child):not(:nth-child(2)) div h5,
    main > div:first-child > div > div:not(:first-child):not(:nth-child(2)) div > div div{
        color: var(--default-fg);
    }
    
    main > div:first-child > div > div:not(:first-child):not(:nth-child(2)) > div:nth-child(9) {
        background-color: var(--default-bg);
        padding: 1em;
         
    }
    
    main > div > div:nth-child(2) > div > div:nth-child(9) > div > ul > li > p > div > div > h4 {
        color: var(--fail-fg);
    }
    
    main > div:first-child > div > div:not(:first-child):not(:nth-child(2)) > div:nth-child(9) > div > ul > div:first-child{
        background-color: var(--default-bg);
    }
    
    main > div:first-child > div > div:not(:first-child):not(:nth-child(2)) > div:nth-child(9) > div > ul > div:first-child:hover div {
        background-color: transparent;
    }
    
    main > div:first-child > div > div:not(:first-child):not(:nth-child(2)) > div:nth-child(9) > div > ul > div:first-child:hover {
        background-color: var(--default-bg-hover);
    }
    
    main > div:first-child > div > div:not(:first-child):not(:nth-child(2)) a,
    [data-testid="side-panel-position"] a
    {
        color: var(--default-link);
    }
    
    main > div:first-child > div > div:not(:first-child):not(:nth-child(2)) a span{
        color: var(--default-hl);
    }
    
    /* next app */
    
    #__next{
        background-color: var(--default-bg) !important;
        color: var(--default-fg);
    }
    
    
    #__next > div > div:last-child > div:first-child > div:first-child ol li,
    #__next > div > div:last-child > div:first-child > div:first-child ol li div,
    #__next > div > div:last-child > div:first-child > div:first-child ol li span,
    #__next > div > div:last-child > div:first-child > div:first-child ol li a{
        color: var(--default-fg);
    }
    
    #__next > div > div:last-child > div:first-child > div:last-child div {
       background-color: var(--default-bg);
       color: var(--default-fg);
    }
    
    #__next > div > main > div:last-child > div:last-child {
        margin: 0;
        background-color: var(--pipelines-bg) 
    }
    
    
    #__next > div > main > div:last-child > div:first-child > div{
       background-color: var(--default-bg);
       color: var(--default-fg);
    }
    
    /* Jobs */
    main > div:last-child > div > div > div p,
    main > div:last-child > div > div > div h4 {
        color: var(--default-hl);
    }
    
    header > div:last-child > div > button > div,
    header > div:last-child > div > button > div > div {
        background-color: transparent !important;
    }
    
    main > div:last-child > div:last-child > div > p {
        color: var(--default-fg);
    }
    main > div:last-child > div:last-child > div:last-child > div > button > div,
    main > div:last-child > div:last-child > div:last-child > div > button > div > div,
    main > div:last-child > div:last-child > div:last-child > div > button > div:last-child > a > div {
        background-color: transparent !important;
    }
    main > div:last-child > div:last-child > div:last-child > div > button > div:last-child > a > div:hover {
        background-color: var(--header-bg) !important;
    }
    
    main > div:last-child > div:last-child > div:first-child > div:first-child > div > ol > li > button div {
        background-color: transparent !important;
    }
    
    main > div:last-child > div:last-child > div:first-child > div:first-child > div > ol > li:first-child > button > div span {
        background-color: rgb(9, 128, 0) !important;
    }
    
    main > div:last-child > div:last-child > div:first-child > div:first-child > div > ol > li:last-child > button > div span {
        background-color: rgb(160, 4, 4) !important;
    }
    
    /*Workflows*/
    #__next > div:last-child > div:last-child > div:last-child > div:last-child > div:first-child > div:first-child > ol > li:last-child > div > span,
    #__next > div:last-child > div:last-child > div:last-child > div:last-child > div:first-child > div:last-child > div > div p,
    #__next > div:last-child > div:last-child > div:last-child > div:last-child > div:first-child > div:last-child > div > div h4{
        color: var(--default-fg);
    }
    
    #__next > div > div > div > div:last-child > div:last-child > div > a > div > div:first-child > p{
        color: var(--default-fg);
    }
}