Twitch.TV Vertical Theatre Mode by japanyoshi

/* ==UserStyle==
@name           Vertical Theatre Mode
@namespace      twitch.tv
@version        1.0.0
@description    Makes Theatre Mode split the screen vertically between the feed and the chat. Useful for multitasking.
@author         Haley Walker
==/UserStyle== */

@-moz-document domain("twitch.tv") {
  @media (max-aspect-ratio: 9/8) {
    .persistent-player--theatre {
      width: 100vw!important;
      height: 56.25vw!important;
    }

    .right-column--theatre {
      top: auto!important;
      bottom: 0;
      width: 100%!important;
      height: calc(100vh - 56.25vw)!important;
      background: magenta;
    }

    .right-column--theatre .channel-root__right-column {
      width: 100%;
    }

    .channel-leaderboard {
      display: none;
    }

    .chat-input {
      min-height: 5rem;
    }

    .chat-input > div:not([class]) {
      height: 5rem;
    }

    .chat-input__textarea {
      margin-left: 8rem;
      margin-right: 10rem;
    }

    .chat-input__badge-carousel {
      margin-left: 8rem;
    }

    .chat-input__input-icons {
      margin-right: 10rem;
    }

    .chat-input__buttons-container {
      margin-top: -4rem!important;
    }
  }
}