<commit_before>@import 'typography';

.timeseries-graph {
  
  max-width: 954px;
  max-height: 400px;

  .inner {
    top: 20px;
    bottom: 45px;
    left: 55px;
    right: 40px;
  }

  .labels {

    line {
      fill: none;
      stroke: #444;
      stroke-width: 1px;
      vector-effect: non-scaling-stroke;

      &.crisp {
        shape-rendering: crispEdges;
      }
    }
    
    .square0 { fill: $data-colour-1; }
    .square1 { fill: $data-colour-2; }
    .square2 { fill: $data-colour-3; }
    .square3 { fill: $data-colour-4; }
    .square4 { fill: $data-colour-5; }
    .square5 { fill: $data-colour-6; }
    
    .selected {
      text {
        font-weight: bold;
      }
      
      line {
        stroke-width: 2px;
      }

      rect {
        stroke-width:2px;
        
        &.square0 { stroke: darken($data-colour-1, 10%); }
        &.square1 { stroke: darken($data-colour-2, 10%); }
        &.square2 { stroke: darken($data-colour-3, 10%); }
        &.square3 { stroke: darken($data-colour-4, 10%); }
        &.square4 { stroke: darken($data-colour-5, 10%); }
        &.square5 { stroke: darken($data-colour-6, 10%); }
      }
    }
  }

  .label-link {
    position: absolute;
    z-index:100;
    cursor:pointer;
  }

  .x-axis line {
    fill: none;
    stroke: #444;
    stroke-width: 1px;
    shape-rendering: crispEdges;
  }
}

#applications-by-licence .inner,
#applications-by-authority .inner,
#application-method-over-time .inner {
  right: 200px
}

#application-method-over-time {
  .selected {
    &.stack0 { fill: mix($data-colour-1, $white, 40%); }
    &.stack1 { fill: mix($data-colour-2, $white, 40%); }
  }
}

@media (max-width: 780px) {
  #applications-by-licence,
  #applications-by-authority {
    .x-axis .tick:nth-child(even) text {
      display:none;
    }
  }
}

@media (max-width: 640px) {
  
  .timeseries-graph {

    .inner {
      top: 20px;
      bottom: 40px;
      left: 40px;
      right: 25px;
    }

    .x-axis .tick:nth-child(even) text {

      display:none;
    }
  }
}


@media (max-width: 440px) {
  
  #applications-by-licence,
  #applications-by-authority {
    text {
      font-size:9px;
      font-size:0.9rem;
    }
    .inner {
      left: 30px;
      bottom: 30px;
      right: 30%;
    }
  }
}

@media (max-width: 320px) {
  
  .timeseries-graph {
    text {
      font-size:9px;
      font-size:0.9rem;
    }
    .inner {
      bottom: 30px;
    }
  }
}
<commit_msg>Remove background when focused on an SVG link<commit_after>@import 'typography';

.timeseries-graph {
  
  max-width: 954px;
  max-height: 400px;

  .inner {
    top: 20px;
    bottom: 45px;
    left: 55px;
    right: 40px;
  }

  .labels {

    line {
      fill: none;
      stroke: #444;
      stroke-width: 1px;
      vector-effect: non-scaling-stroke;

      &.crisp {
        shape-rendering: crispEdges;
      }
    }
    
    .square0 { fill: $data-colour-1; }
    .square1 { fill: $data-colour-2; }
    .square2 { fill: $data-colour-3; }
    .square3 { fill: $data-colour-4; }
    .square4 { fill: $data-colour-5; }
    .square5 { fill: $data-colour-6; }
    
    .selected {
      text {
        font-weight: bold;
      }
      
      line {
        stroke-width: 2px;
      }

      rect {
        stroke-width:2px;
        
        &.square0 { stroke: darken($data-colour-1, 10%); }
        &.square1 { stroke: darken($data-colour-2, 10%); }
        &.square2 { stroke: darken($data-colour-3, 10%); }
        &.square3 { stroke: darken($data-colour-4, 10%); }
        &.square4 { stroke: darken($data-colour-5, 10%); }
        &.square5 { stroke: darken($data-colour-6, 10%); }
      }
    }
  }

  .label-link {
    position: absolute;
    z-index:100;
    cursor:pointer;
    &:focus {
      background-color: transparent;
    }
  }

  .x-axis line {
    fill: none;
    stroke: #444;
    stroke-width: 1px;
    shape-rendering: crispEdges;
  }
}

#applications-by-licence .inner,
#applications-by-authority .inner,
#application-method-over-time .inner {
  right: 200px
}

#application-method-over-time {
  .selected {
    &.stack0 { fill: mix($data-colour-1, $white, 40%); }
    &.stack1 { fill: mix($data-colour-2, $white, 40%); }
  }
}

@media (max-width: 780px) {
  #applications-by-licence,
  #applications-by-authority {
    .x-axis .tick:nth-child(even) text {
      display:none;
    }
  }
}

@media (max-width: 640px) {
  
  .timeseries-graph {

    .inner {
      top: 20px;
      bottom: 40px;
      left: 40px;
      right: 25px;
    }

    .x-axis .tick:nth-child(even) text {

      display:none;
    }
  }
}


@media (max-width: 440px) {
  
  #applications-by-licence,
  #applications-by-authority {
    text {
      font-size:9px;
      font-size:0.9rem;
    }
    .inner {
      left: 30px;
      bottom: 30px;
      right: 30%;
    }
  }
}

@media (max-width: 320px) {
  
  .timeseries-graph {
    text {
      font-size:9px;
      font-size:0.9rem;
    }
    .inner {
      bottom: 30px;
    }
  }
}

{'fraction_non_alphanumeric': 0.1620807391042378, 'fraction_numerical': 0.04338220526210082, 'mean_word_length': 1.8819444444444444, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1449734', 'n_tokens_mistral': 2132, 'n_tokens_neox': 1923, 'n_words': 342}