<commit_before>.device-management.view
  display: block
  position: relative

  .stream-addition
    +clearfix
    margin: 10px 0 0 0

  .stream-addition .uploader
    @extend %file-button
    display: inline-block
    float: right
    padding: 1px
    margin-left: 10px
    margin-top: 0.2em

  .stream-addition .uploader .button
    @extend %small-button
    border-radius: 3px
    display: block

  .stream-addition .stream-track-search
    height: auto
    overflow: hidden
    padding: 1px 0

  > .inner
    +outer-wrapper
    +clearfix
    padding-top: 10px

  .device-info
    +span-columns(4)
    margin-bottom: 20px

    +media(max-width 800px)
      +span-columns(12)
      margin: 0

    .info-inner
      @extend %bordered-container

    .easy-input input
      background: darken(white, 2)
      margin: 1px 0

      &:hover
        background: white

  .where-the-magic-happens
    +span-columns(8)

    +media(max-width 800px)
      +span-columns(12)
      margin: 0
      padding: 0 10px 10px

  .where-the-magic-happens .not-connected
    @extend %bordered-container

  .where-the-magic-happens .not-connected h1
    display: block
    color: darken(white, 30)
    font-size: 1em
    line-height: 1.8em

  .where-the-magic-happens .stream-info,
  .where-the-magic-happens .device-controls
    @extend %bordered-container
    position: relative

    .label
      line-height: 1.2em
      font-size: 0.8em
      margin-bottom: 10px

    .label p
      color: darken(white, 50)

    .label p em
      color: darken(white, 80)

  .where-the-magic-happens .device-controls
    margin-bottom: 10px

  .where-the-magic-happens .stream-list
    @extend %alternating-list

  .where-the-magic-happens .stream-list .list-item
    line-height: 1.8em

  .where-the-magic-happens .device-controls
    +media(max-width 800px)
      margin: 10px 0
      padding: 10px 0
      background: white
      text-align: center
      position: relative

      .controls.button-group
        display: block
        float: none
        clear: both
        margin: 0 0.5em 20px
        text-align: center

      .controls.button-group a.control
        float: none
        padding: 0.5em
        position: relative
        display: inline-block
        width: 50%

        i.ionicon
          position: relative
          display: block
          width: 2em
          height: 2em

        i.ionicon:after
          display: block
          font-size: 1.5em
          line-height: 1.5em

      .stream-name
        position: relative
        text-align: left
        float: left
        width: 50%
        padding: 0
        margin: 0
        text-align: center

      .stream-name:after
        +linear-gradient(45deg, white 0, white 3px, darken(white, 30) 3px, darken(white, 30) 4px, white 5px)
        position: absolute
        background-size: 4px 4px 
        background-repeat: repeat-y
        right: -2px
        top: 0
        content: ''
        display: block
        height: 100%
        width: 4px

      .stream-name .blurb
        display: inline-block
        border: none
        padding: 0

      .currently-playing
        display: block
        float: left
        width: 50%

      .currently-playing .blurb
        border: none
        position: relative
        padding: 0

      .stream-name .blurb p,
      .stream-name .blurb a,
      .currently-playing p,
      .currently-playing a<commit_msg>[LFTUI-92] making striped line in device controls extend entire height<commit_after>.device-management.view
  display: block
  position: relative

  .stream-addition
    +clearfix
    margin: 10px 0 0 0

  .stream-addition .uploader
    @extend %file-button
    display: inline-block
    float: right
    padding: 1px
    margin-left: 10px
    margin-top: 0.2em

  .stream-addition .uploader .button
    @extend %small-button
    border-radius: 3px
    display: block

  .stream-addition .stream-track-search
    height: auto
    overflow: hidden
    padding: 1px 0

  > .inner
    +outer-wrapper
    +clearfix
    padding-top: 10px

  .device-info
    +span-columns(4)
    margin-bottom: 20px

    +media(max-width 800px)
      +span-columns(12)
      margin: 0

    .info-inner
      @extend %bordered-container

    .easy-input input
      background: darken(white, 2)
      margin: 1px 0

      &:hover
        background: white

  .where-the-magic-happens
    +span-columns(8)

    +media(max-width 800px)
      +span-columns(12)
      margin: 0
      padding: 0 10px 10px

  .where-the-magic-happens .not-connected
    @extend %bordered-container

  .where-the-magic-happens .not-connected h1
    display: block
    color: darken(white, 30)
    font-size: 1em
    line-height: 1.8em

  .where-the-magic-happens .stream-info,
  .where-the-magic-happens .device-controls
    @extend %bordered-container
    position: relative

    .label
      line-height: 1.2em
      font-size: 0.8em
      margin-bottom: 10px

    .label p
      color: darken(white, 50)

    .label p em
      color: darken(white, 80)

  .where-the-magic-happens .device-controls
    margin-bottom: 10px

  .where-the-magic-happens .stream-list
    @extend %alternating-list

  .where-the-magic-happens .stream-list .list-item
    line-height: 1.8em

  .where-the-magic-happens .device-controls
    +media(max-width 800px)
      margin: 10px 0
      padding: 10px 0
      background: white
      text-align: center
      position: relative
      overflow: hidden

      &:after
        +linear-gradient(45deg, white 0, white 3px, darken(white, 30) 3px, darken(white, 30) 4px, white 5px)
        position: absolute
        background-size: 4px 4px 
        background-repeat: repeat-y
        right: 50%
        top: 2em
        content: ''
        display: block
        height: 100%
        width: 4px
        z-index: 2

      .controls.button-group
        display: block
        float: none
        clear: both
        margin: 0 0.5em 20px
        text-align: center
        z-index: 3
        position: relative

      .controls.button-group a.control
        float: none
        padding: 0.5em
        position: relative
        display: inline-block
        width: 50%

        i.ionicon
          position: relative
          display: block
          width: 2em
          height: 2em

        i.ionicon:after
          display: block
          font-size: 1.5em
          line-height: 1.5em

      .stream-name
        position: relative
        text-align: left
        float: left
        width: 50%
        padding: 0
        margin: 0
        text-align: center

      .stream-name .blurb
        display: inline-block
        border: none
        padding: 0

      .currently-playing
        display: block
        float: left
        width: 50%

      .currently-playing .blurb
        border: none
        position: relative
        padding: 0

      .stream-name .blurb p,
      .stream-name .blurb a,
      .currently-playing p,
      .currently-playing a
{'fraction_non_alphanumeric': 0.09345794392523364, 'fraction_numerical': 0.03235082674335011, 'mean_word_length': 1.8003220611916264, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, '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': '7044227', 'n_tokens_mistral': 2475, 'n_tokens_neox': 2150, 'n_words': 566}