<commit_before>.subject-viewer
  min-width: 0
  max-width: 100%

  .default-root-style
    display: block

  .subject-frame-pips
    .subject-frame-pip
      display: inline-block
      overflow: hidden
      position: relative
      vertical-align: middle

      input[type=radio]
        position: absolute
        opacity: 0.01
        left: -100px

      &.active
        font-weight: 700

  video
    background-color: black
    width: 100%

    &::-internal-media-controls-download-button
      display: none

    &::-webkit-media-controls-enclosure
      overflow: hidden

    &::-webkit-media-controls-panel
      width: calc(100% + 30px); /* Adjust as needed */

  .subject-video-controls
    display: inline-block
    position: absolute
    bottom: -1.4em
    left: 0
    width: 30vw

  .video-scrubber
    width: 80%

  .video-speed
    white-space: nowrap
    display: inline-block
    padding: .3em 0
    line-height: .8
    vertical-align: middle

    label
      overflow: hidden
      padding: 0 .3em

      input[type=radio]
        position: absolute
        left: -50px
        height: 0
        width: 0

        &:checked + span
          color: MAIN_HIGHLIGHT

  .subject-container
    > *
      max-width: 100%

    .frame-annotator
      flex: 9

    .text-viewer
      background-color: #404040
      color: white
      width: 96%
      padding: 2%
      white-space: pre-wrap

    image.pan-active
      cursor: all-scroll
    .pan-zoom-controls
      text-align: center
      background: grey;
      border-radius: .1em;
      .draw-pan-toggle
        background-color: #F9F9F9
        border: solid 1px #989898
        border-radius: .2em
        div
          border-radius: .1em
          transition: background-color .5s
          &.active
            background-color: #43BBFD
            color: black
            border: none
        button
          background-color: transparent
          border:none

      button
        background-color: #f9f9f9
        border: solid 1px #989898
        -webkit-border-radius: 0.2em
        border-radius: 0.2em
        &.disabled
          background-color: #bbc0c0
          color: #575959

  &.subject-viewer--invert
    // Talk
    .subject-container
      .subject-image-frame:only-child
        img
          filter: invert(100%)
      .subject-video-frame:only-child
        video
          filter: invert(100%)

  // Multi-image layouts
  &:not(.subject-viewer--flipbook)
    .subject-container
      align-items: center
      justify-content: space-between
    &.subject-viewer--layout-grid2
      .subject-container > *
        width: 49%
    &.subject-viewer--layout-grid3
      .subject-container > *
        width: 33%

.subject
  .subject-tools
    button:not(:last-child)
      margin-right: 0.5em

.progress-marker
  background: transparent
  pointer-events none
  position: absolute
  left: 0
  top: 0
  width: 100%
  max-height: 100%

  image
    opacity: .2

.audio-player-component
  width: 100%

  audio
    width: 100%

.subject-canvas-frame
  canvas
    display: block
  .canvas-renderer-message<commit_msg>Add audio player min-width (#5361)<commit_after>.subject-viewer
  min-width: 0
  max-width: 100%

  .default-root-style
    display: block

  .subject-frame-pips
    .subject-frame-pip
      display: inline-block
      overflow: hidden
      position: relative
      vertical-align: middle

      input[type=radio]
        position: absolute
        opacity: 0.01
        left: -100px

      &.active
        font-weight: 700

  video
    background-color: black
    width: 100%

    &::-internal-media-controls-download-button
      display: none

    &::-webkit-media-controls-enclosure
      overflow: hidden

    &::-webkit-media-controls-panel
      width: calc(100% + 30px); /* Adjust as needed */

  .subject-video-controls
    display: inline-block
    position: absolute
    bottom: -1.4em
    left: 0
    width: 30vw

  .video-scrubber
    width: 80%

  .video-speed
    white-space: nowrap
    display: inline-block
    padding: .3em 0
    line-height: .8
    vertical-align: middle

    label
      overflow: hidden
      padding: 0 .3em

      input[type=radio]
        position: absolute
        left: -50px
        height: 0
        width: 0

        &:checked + span
          color: MAIN_HIGHLIGHT

  .subject-container
    > *
      max-width: 100%

    .frame-annotator
      flex: 9

    .text-viewer
      background-color: #404040
      color: white
      width: 96%
      padding: 2%
      white-space: pre-wrap

    image.pan-active
      cursor: all-scroll
    .pan-zoom-controls
      text-align: center
      background: grey;
      border-radius: .1em;
      .draw-pan-toggle
        background-color: #F9F9F9
        border: solid 1px #989898
        border-radius: .2em
        div
          border-radius: .1em
          transition: background-color .5s
          &.active
            background-color: #43BBFD
            color: black
            border: none
        button
          background-color: transparent
          border:none

      button
        background-color: #f9f9f9
        border: solid 1px #989898
        -webkit-border-radius: 0.2em
        border-radius: 0.2em
        &.disabled
          background-color: #bbc0c0
          color: #575959

  &.subject-viewer--invert
    // Talk
    .subject-container
      .subject-image-frame:only-child
        img
          filter: invert(100%)
      .subject-video-frame:only-child
        video
          filter: invert(100%)

  // Multi-image layouts
  &:not(.subject-viewer--flipbook)
    .subject-container
      align-items: center
      justify-content: space-between
    &.subject-viewer--layout-grid2
      .subject-container > *
        width: 49%
    &.subject-viewer--layout-grid3
      .subject-container > *
        width: 33%

.subject
  .subject-tools
    button:not(:last-child)
      margin-right: 0.5em

.progress-marker
  background: transparent
  pointer-events none
  position: absolute
  left: 0
  top: 0
  width: 100%
  max-height: 100%

  image
    opacity: .2

.audio-player-component
  width: 100%
  min-width: 300px

  audio
    width: 100%

.subject-canvas-frame
  canvas
    display: block
  .canvas-renderer-message
{'fraction_non_alphanumeric': 0.10089686098654709, 'fraction_numerical': 0.038597053171044206, 'mean_word_length': 1.8017048003589053, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4084569', 'n_tokens_mistral': 2154, 'n_tokens_neox': 1928, 'n_words': 447}