CodePen Embed - Twitch Redesign Mockup

<div class="app-container chat">
  <div class="sidebar-wrapper">
    <div class="sidebar">
      <div class="sidebar-content">
        <div class="sidebar-header">
          <div class="twitch-logo" onClick="toggleSidebar()">
            <svg class="tw-svg__asset tw-svg__asset--logotwitch tw-svg__asset--inherit" width="94px" height="32px" version="1.1" viewBox="0 0 94 32" x="0px" y="0px"><path clip-rule="evenodd" d="M88,5h-6V0h-9l-6,5h-5.5L59,7.5V5h-5V0H36v5H16l-5-5H0v22l5,5.25L14,32h6v-1.5l3,1.5h12l2-3l1,3h7v-3l3,3h8l0.5-3l2.5,3h10l3-3v3h4l3-3v3h7l7-6V10L88,5z M13,13H8v6h5v6H6l-4-4V2h6v5h5V13z M36,21.5L32.5,25H15V7h6v12h2V7h6v12h2V7h5V21.5z M44,25h-6V7h6V25z M44,5h-6V2h6V5z M57,13h-5v6h5v6h-7l-4-4V2h6v5h5V13z M72,13h-7v6h7v6h-9l-4-4V11l4-4h9V13z M91,25h-6V13h-5v12h-6V2h6v5h7l4,4V25z" fill-rule="evenodd"></path></svg>
          </div>
          <div class="search-bar">
            <input type="text" placeholder="Search to Add Friends" />
            <i class="material-icons">search</i>
          </div>
        </div>
        <div class="sidebar-group">
          <div class="sidebar-group-header">
            <div>Followed Channels</div>
            <a class="view-all">View All</a>
          </div>
          <a class="channel-link">
            <div class="channel-image">
              <img src="https://static-cdn.jtvnw.net/jtv_user_pictures/10114ec7-b5f3-4804-b23f-8a5136462697-profile_image-70x70.png" />
            </div>
            <div class="channel-info">
              <div class="channel-name">wonpec</div>
              <div class="channel-status">
                <div>Crusader Kings II</div>
                <div>107 watching</div>
              </div>
            </div>
          </a>
          <a class="channel-link">
            <div class="channel-image">
              <img src="https://static-cdn.jtvnw.net/jtv_user_pictures/32a302ff-0f2f-4de3-8a82-72a1160b843e-profile_image-70x70.png" />
            </div>
            <div class="channel-info">
              <div class="channel-name">StoneZoneGaming</div>
              <div class="channel-status">
                <div>Skyrim</div>
                <div>121 watching</div>
              </div>
            </div>
          </a>
          <a class="channel-link offline">
            <div class="channel-image">
              <img src="https://static-cdn.jtvnw.net/jtv_user_pictures/2aef719f-5492-4ff0-923b-0845d9e8658f-profile_image-70x70.png" />
            </div>
            <div class="channel-info">
              <div class="channel-name">FrivviFox</div>
              <div class="channel-status">Offline</div>
            </div>
          </a>
          <a class="channel-link offline">
            <div class="channel-image">
              <img src="https://static-cdn.jtvnw.net/jtv_user_pictures/atimidmouse-profile_image-4cfb21ad6a15feef-70x70.png" />
            </div>
            <div class="channel-info">
              <div class="channel-name">atimidmouse</div>
              <div class="channel-status">Offline</div>
            </div>
          </a>
          <a class="channel-link offline">
            <div class="channel-image">
              <img src="https://static-cdn.jtvnw.net/jtv_user_pictures/nakeyjakeystreamerboy-profile_image-1faef87e3f1a5912-70x70.jpeg" />
            </div>
            <div class="channel-info">
              <div class="channel-name">NakeyJakeyStreamerBoy</div>
              <div class="channel-status">Offline</div>
            </div>
          </a>
          <a class="channel-link offline">
            <div class="channel-image">
              <img src="https://static-cdn.jtvnw.net/jtv_user_pictures/11fc4351ff82c494-profile_image-70x70.jpeg" />
            </div>
            <div class="channel-info">
              <div class="channel-name">andersonjph</div>
              <div class="channel-status">Offline</div>
            </div>
          </a>
        </div>
        <div class="sidebar-group">
          <div class="sidebar-group-header">
            <div>Friends</div>
          </div>
          <a class="channel-link">
            <div class="channel-image">
              <img src="https://static-cdn.jtvnw.net/jtv_user_pictures/10114ec7-b5f3-4804-b23f-8a5136462697-profile_image-70x70.png" />
            </div>
            <div class="channel-info">
              <div class="channel-name">wonpec</div>
              <div class="channel-status">
                <div>Crusader Kings II</div>
                <div>107 watching</div>
              </div>
            </div>
          </a>
          <a class="channel-link offline">
            <div class="channel-image">
              <img src="https://static-cdn.jtvnw.net/jtv_user_pictures/atimidmouse-profile_image-4cfb21ad6a15feef-70x70.png" />
            </div>
            <div class="channel-info">
              <div class="channel-name">atimidmouse</div>
              <div class="channel-status">Offline</div>
            </div>
          </a>
        </div>
        <div class="sidebar-group">
          <div class="sidebar-group-header">
            <div>Recommended</div>
            <a class="view-all">View More</a>
          </div>
          <a class="channel-link">
            <div class="channel-image">
              <img src="https://static-cdn.jtvnw.net/jtv_user_pictures/dizzykitten-profile_image-ca899752a83f72a6-70x70.png" />
            </div>
            <div class="channel-info">
              <div class="channel-name">DizzyKitten</div>
              <div class="channel-status">
                <div>Playerunknown's Battlegrounds</div>
                <div>1.2k watching</div>
              </div>
            </div>
          </a>
          <a class="channel-link">
            <div class="channel-image">
              <img src="https://static-cdn.jtvnw.net/jtv_user_pictures/09dd7229-c19d-40e4-936d-a610dc97734e-profile_image-70x70.jpg" />
            </div>
            <div class="channel-info">
              <div class="channel-name">amouranth</div>
              <div class="channel-status">
                <div>IRL</div>
                <div>101 watching</div>
              </div>
            </div>
          </a>
          <a class="channel-link">
            <div class="channel-image">
              <img src="https://static-cdn.jtvnw.net/jtv_user_pictures/lethalfrag-profile_image-050adf252718823b-70x70.png" />
            </div>
            <div class="channel-info">
              <div class="channel-name">LethalFrag</div>
              <div class="channel-status">
                <div>Spelunky</div>
                <div>10k watching</div>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
    <div class="page-overlay" onClick="toggleSidebar()"></div>
  </div>

  <div class="main-content">
    <div class="header">

      <div class="logo-wrapper">
        <i class="material-icons sidebar-toggle" onClick="toggleSidebar()" data-tooltip="Menu" data-tooltip-pos="right">sort</i>
        <div class="twitch-logo">
          <svg class="tw-svg__asset tw-svg__asset--logotwitch tw-svg__asset--inherit" width="94px" height="32px" version="1.1" viewBox="0 0 94 32" x="0px" y="0px"><path clip-rule="evenodd" d="M88,5h-6V0h-9l-6,5h-5.5L59,7.5V5h-5V0H36v5H16l-5-5H0v22l5,5.25L14,32h6v-1.5l3,1.5h12l2-3l1,3h7v-3l3,3h8l0.5-3l2.5,3h10l3-3v3h4l3-3v3h7l7-6V10L88,5z M13,13H8v6h5v6H6l-4-4V2h6v5h5V13z M36,21.5L32.5,25H15V7h6v12h2V7h6v12h2V7h5V21.5z M44,25h-6V7h6V25z M44,5h-6V2h6V5z M57,13h-5v6h5v6h-7l-4-4V2h6v5h5V13z M72,13h-7v6h7v6h-9l-4-4V11l4-4h9V13z M91,25h-6V13h-5v12h-6V2h6v5h7l4,4V25z" fill-rule="evenodd"></path></svg>
        </div>
        <div class="desktop-search search-bar">
          <input type="text" placeholder="Search" />
          <i class="material-icons">search</i>
        </div>
      </div>

      <div class="nav">
        <div class="dropdown">
          <i class="material-icons dropdown-toggle" data-tooltip="More" data-tooltip-pos="left">more_horiz</i>
          <div class="dropdown-content">
            <a class="dropdown-link">About</a>
            <a class="dropdown-link">Advertisers</a>
            <a class="dropdown-link">Blog</a>
            <a class="dropdown-link">Browse</a>
            <a class="dropdown-link">Community Guidelines</a>
            <a class="dropdown-link">Cookie Policy</a>
            <a class="dropdown-link">Creative</a>
            <a class="dropdown-link">Developers</a>
            <a class="dropdown-link">Following</a>
            <a class="dropdown-link">Get Desktop</a>
            <a class="dropdown-link">Help</a>
            <a class="dropdown-link">Jobs</a>
            <a class="dropdown-link">Language</a>
            <a class="dropdown-link">Music</a>
            <a class="dropdown-link">Store</a>
            <a class="dropdown-link">Partners</a>
            <a class="dropdown-link">Press</a>
            <a class="dropdown-link">Security</a>
            <a class="dropdown-link">Terms</a>
            <a class="dropdown-link">Try Prime</a>
          </div>
        </div>
        <div class="mobile-search dropdown">
          <i class="material-icons dropdown-toggle" data-tooltip="Search" data-tooltip-pos="left">search</i>
          <div class="dropdown-content">
            <div class="search-bar">
              <input type="text" placeholder="Search" />
              <i class="material-icons">search</i>
            </div>
          </div>
        </div>
        <div class="dropdown">
          <i class="material-icons dropdown-toggle" data-tooltip="Notifications" data-tooltip-pos="left">notifications</i>
          <div class="dropdown-content">
            <div class="dropdown-header">
              <h4>No new notifications</h4>
            </div>
          </div>
        </div>

        <div class="profile-image-wrapper dropdown">
          <div class="profile-image dropdown-toggle">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/312465/profile/profile-80.jpg?1513191507" />
          </div>
          <div class="dropdown-content">
            <div class="dropdown-header">
              <div class="username">cole_waldrip</div>
              <a class="logout">Logout</a>
            </div>
            <div class="dropdown-group">
              <a class="dropdown-link active">
                <i class="material-icons">check_box</i>
                <span>Share My Activity</span>
              </a>
              <a class="dropdown-link" onClick="toggleDarkMode()">
                <i class="material-icons" id="darkMode">check_box_outline_blank</i>
                <span>Dark Mode</span>
              </a>
            </div>
            <div class="dropdown-group">
              <a class="dropdown-link">
                <i class="material-icons">account_box</i>
                <span>Channel</span>
              </a>
              <a class="dropdown-link">
                <i class="material-icons">dashboard</i>
                <span>Dashboard</span>
              </a>
              <a class="dropdown-link">
                <i class="material-icons">movie</i>
                <span>Video Producer</span>
              </a>
              <a class="dropdown-link">
                <i class="material-icons">settings</i>
                <span>Settings</span>
              </a>
            </div>
            <div class="dropdown-group">
              <a class="dropdown-link">
                <i class="material-icons">people</i>
                <span>Friends</span>
              </a>
              <a class="dropdown-link">
                <i class="material-icons">email</i>
                <span>Messages</span>
              </a>
              <a class="dropdown-link">
                <i class="material-icons">credit_card</i>
                <span>Subscriptions</span>
              </a>
              <a class="dropdown-link">
                <i class="material-icons">local_mall</i>
                <span>Inventory</span>
              </a>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div class="page-content">
      <div class="channel-header">
        <div class="channel-nav">
          <a class="active">
            <img class="channel-image" src="https://static-cdn.jtvnw.net/jtv_user_pictures/10114ec7-b5f3-4804-b23f-8a5136462697-profile_image-70x70.png" />
            <span>wonpec</span>
          </a>
          <a>
            <strong>20</strong>
            <span>Videos</span>
          </a>
          <a>
            <strong>7</strong>
            <span>Clips</span>
          </a>
          <a>
            <strong>1</strong>
            <span>Collection</span>
          </a>
          <a>
            <strong>0</strong>
            <span>Events</span>
          </a>
          <a>
            <strong>69</strong>
            <span>Followers</span>
          </a>
          <a>
            <strong>10</strong>
            <span>Following</span>
          </a>
        </div>
        <div class="channel-header-fixed-buttons">
          <button class="btn">
            <i class="material-icons">favorite</i>
            <span>Follow</span>
          </button>
          <button class="btn">
            <i class="material-icons">credit_card</i>
            <span>Subscribe</span>
          </button>
          <button class="btn">
            <i class="material-icons">stars</i>
            <span>Get Bits</span>
          </button>
          <div class="icon-button" data-tooltip="More" data-tooltip-pos="left">
            <i class="material-icons">more_horiz</i>
          </div>
          <div class="chat-button" onClick="toggleChat()" data-tooltip="Toggle Chat" data-tooltip-pos="left">
            <i class="material-icons">chat</i>
          </div>
        </div>
      </div>
      <div class="stream-container">
        <div class="video-wrapper">
          <iframe src="https://player.twitch.tv/?video=v228563919" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620"></iframe>
        </div>
        
        <div class="video-info">
          
          <div class="video-summary">
            <img src="https://static-cdn.jtvnw.net/ttv-boxart/Crusader%20Kings%20II-138x190.jpg" />
            <div class="video-text">
              <div class="video-title">CK2 Ironman Runs</div>
              <div class="video-category">
                <i class="material-icons">gamepad</i>
                <a>Crusader Kings II</a>
              </div>
            </div>
          </div>
          
          <div class="video-stats">
            <div class="icon-button red" data-tooltip="Watching Now" data-tooltip-pos="down-left">
              <i class="material-icons">people</i>
              <span>107</span>
            </div>
            <div class="icon-button" data-tooltip="Total Views" data-tooltip-pos="down-left">
              <i class="material-icons">visibility</i>
              <span>2,606</span>
            </div>
            <div class="icon-button">
              <i class="material-icons">share</i>
              <span>Share</span>
            </div>
            <div class="icon-button dropdown-toggle">
              <i class="material-icons">more_horiz</i>
              <span>More</span>
            </div>
          </div>
          
        </div>
        
      </div>
      <div class="channel-body">
        <p><em>It's empty in here</em></p>
      </div>
    </div>
    <div class="chat-page-overlay" onClick="toggleChat()"></div>
    <div class="chat-window">
      <div class="close-chat" onClick="toggleChat()" data-tooltip="Close Chat" data-tooltip-pos="right">
        <i class="material-icons">close</i>
      </div>
      <div class="chat-feed">
        <p><span class="name">rAstley69</span>We're no strangers to love</p>
        <p><span class="name">rAstley69</span>You know the rules and so do I</p>
        <p><span class="name">rAstley69</span>A full commitment's what I'm thinking of</p>
        <p><span class="name">rAstley69</span>You wouldn't get this from any other guy</p>
        <p><span class="name">rAstley69</span>I just wanna tell you how I'm feeling</p>
        <p><span class="name">rAstley69</span>Gotta make you understand</p>
        <p><span class="name">rAstley69</span>Never gonna give you up</p>
        <p><span class="name">rAstley69</span>Never gonna let you down</p>
        <p><span class="name">rAstley69</span>Never gonna run around and desert you</p>
        <p><span class="name">rAstley69</span>Never gonna make you cry</p>
        <p><span class="name">rAstley69</span>Never gonna say goodbye</p>
        <p><span class="name">rAstley69</span>Never gonna tell a lie and hurt you</p>
        <p><span class="name">rAstley69</span>We've known each other for so long</p>
        <p><span class="name">rAstley69</span>Your heart's been aching but you're too shy to say it</p>
        <p><span class="name">rAstley69</span>Inside we both know what's been going on</p>
        <p><span class="name">rAstley69</span>We know the game and we're gonna play it</p>
        <p><span class="name">rAstley69</span>And if you ask me how I'm feeling</p>
        <p><span class="name">rAstley69</span>Don't tell me you're too blind to see</p>
        <p><span class="name">rAstley69</span>Never gonna give you up</p>
        <p><span class="name">rAstley69</span>Never gonna let you down</p>
        <p><span class="name">rAstley69</span>Never gonna run around and desert you</p>
        <p><span class="name">rAstley69</span>Never gonna make you cry</p>
        <p><span class="name">rAstley69</span>Never gonna say goodbye</p>
        <p><span class="name">rAstley69</span>Never gonna tell a lie and hurt you</p>
        <p><span class="name">rAstley69</span>Never gonna give you up</p>
        <p><span class="name">rAstley69</span>Never gonna let you down</p>
        <p><span class="name">rAstley69</span>Never gonna run around and desert you</p>
        <p><span class="name">rAstley69</span>Never gonna make you cry</p>
        <p><span class="name">rAstley69</span>Never gonna say goodbye</p>
        <p><span class="name">rAstley69</span>Never gonna tell a lie and hurt you</p>
        <p><span class="name">rAstley69</span>Never gonna give, never gonna give</p>
        <p><span class="name">rAstley69</span>(Give you up)</p>
        <p><span class="name">rAstley69</span>(Ooh) Never gonna give, never gonna give</p>
        <p><span class="name">rAstley69</span>(Give you up)</p>
        <p><span class="name">rAstley69</span>We've known each other for so long</p>
        <p><span class="name">rAstley69</span>Your heart's been aching but you're too shy to say it</p>
        <p><span class="name">rAstley69</span>Inside we both know what's been going on</p>
        <p><span class="name">rAstley69</span>We know the game and we're gonna play it</p>
        <p><span class="name">rAstley69</span>I just wanna tell you how I'm feeling</p>
        <p><span class="name">rAstley69</span>Gotta make you understand</p>
        <p><span class="name">rAstley69</span>Never gonna give you up</p>
        <p><span class="name">rAstley69</span>Never gonna let you down</p>
        <p><span class="name">rAstley69</span>Never gonna run around and desert you</p>
        <p><span class="name">rAstley69</span>Never gonna make you cry</p>
        <p><span class="name">rAstley69</span>Never gonna say goodbye</p>
        <p><span class="name">rAstley69</span>Never gonna tell a lie and hurt you</p>
        <p><span class="name">rAstley69</span>Never gonna give you up</p>
        <p><span class="name">rAstley69</span>Never gonna let you down</p>
        <p><span class="name">rAstley69</span>Never gonna run around and desert you</p>
        <p><span class="name">rAstley69</span>Never gonna make you cry</p>
        <p><span class="name">rAstley69</span>Never gonna say goodbye</p>
        <p><span class="name">rAstley69</span>Never gonna tell a lie and hurt you</p>
        <p><span class="name">rAstley69</span>Never gonna give you up</p>
        <p><span class="name">rAstley69</span>Never gonna let you down</p>
        <p><span class="name">rAstley69</span>Never gonna run around and desert you</p>
        <p><span class="name">rAstley69</span>Never gonna make you cry</p>
      </div>

      <div class="chat-footer">
        <div class="chat-message-wrapper">
          <textarea placeholder="Send a message:"></textarea>
          <div class="chat-message-icons">
            <div class="icon-button" data-tooltip="Cheer" data-tooltip-pos="up-right">
              <i class="material-icons">stars</i>
            </div>
            <div class="icon-button" data-tooltip="Emote" data-tooltip-pos="up-right">
              <i class="material-icons">face</i>
            </div>
          </div>
        </div>
        <div class="button-wrapper">
          <div>
            <i class="material-icons" data-tooltip="Chat Settings" data-tooltip-pos="up-left">settings</i>
            <i class="material-icons" data-tooltip="Viewer List" data-tooltip-pos="up-left">list</i>
          </div>
          <button>Send Message</button>
        </div>
      </div>
    </div>
  </div>
</div>

@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i");
@import url('https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900');

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --theme-color: white;

  --primary-color: #6441a4;
  --primary-color-darker: #3e1b7e;
  --primary-color-brighter: #a481e4;
  --primary-color-low-opacity: #6441a466;

  --compliment-color: #eceff1;
  --compliment-color-darker: #d3d6d8;
  --compliment-color-brighter: #f9fcfe;

  --accent-color: #17141f;
  --accent-color-darker: #0a0712;
  --accent-color-brighter: #3d3a45;
}

$font-family: 'Work Sans', sans-serif;

::-moz-selection { background: var(--primary-color-low-opacity); }
::selection { background: var(--primary-color-low-opacity); }

body {
  &::-webkit-scrollbar {
    display: none;
  }
}

button {
  font-family: $font-family;
}

.header {
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  height: 60px;
  display: flex;
  line-height: 1;
  padding: 0 15px;
  position: fixed;
  align-items: center;
  background-color: var(--theme-color);
  justify-content: space-between;
  border-bottom: solid 1px rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease-in;

  @media (max-width: 600px) {
    .desktop-search {
      display: none;
    }

    .mobile-search {
      display: flex;

      .dropdown-content {
        width: 100vw;
        left: 0;
        right: 0;
        top: 50px;
        position: fixed;
        z-index: 1;

        input {
          border: none;
        }
      }
    }
  }

  @media (min-width: 601px) {
    .desktop-search {
      display: flex;
    }

    .mobile-search {
      display: none;
    }
  }

  .logo-wrapper {
    flex: 1;
    display: flex;
    align-items: center;

    .sidebar-toggle {
      padding: 5px;
      margin-left: -5px;
      margin-right: 10px;
      color: var(--accent-color);
      border: solid 1px transparent;
      transition: all 0.2s ease-in;

      &:hover {
        cursor: pointer;
        border-color: var(--primary-color-brighter);
        box-shadow: 0 0 6px 0 var(--primary-color-brighter);
      }
    }

    .search-bar {
      max-width: 500px;
      margin-left: 15px;
      margin-right: 10px;
    }
  }

  .profile-image {
    width: 36px;
    height: 36px;
    line-height: 0;
    border: solid 1px var(--compliment-color);
    transition: all 0.2s ease-in;

    img {
      width: 100%;
      height: 100%;
    }

    &:hover {
      cursor: pointer;
      border-color: var(--primary-color-brighter);
      box-shadow: 0 0 6px 0 var(--primary-color-brighter);
    }
  }

  .username {
    font-size: 16px;
    margin-bottom: 8px;
  }

  .logout {
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--primary-color);
    transition: all 0.2s ease-in;

    &:hover {
      cursor: pointer;
      color: var(--primary-color-brighter);
    }
  }
}

.search-bar {
  width: 100%;
  height: 36px;
  display: flex;
  position: relative;
  align-items: center;

  i {
    top: 50%;
    left: 6px;
    opacity: 0.3;
    position: absolute;
    pointer-events: none;
    color: var(--accent-color);
    transform: translateY(-50%);
    transition: all 0.2s ease-in;
  }

  input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    color: inherit;
    font-weight: 100;
    padding-left: 36px;
    font-family: inherit;
    color: var(--accent-color);
    border: solid 1px transparent;
    background-color: var(--compliment-color);
    transition: all 0.2s ease-in;

    &::-webkit-input-placeholder {
      opacity: 0.3;
      font-weight: 100;
      color: var(--accent-color);
      transition: color 0.2s ease-in;
    } /* Chrome/Opera/Safari */
    &::-moz-placeholder {
      opacity: 0.3;
      font-weight: 100;
      color: var(--accent-color);
      transition: color 0.2s ease-in;
    } /* Firefox 19+ */
    &:-ms-input-placeholder {
      opacity: 0.3;
      font-weight: 100;
      color: var(--accent-color);
      transition: color 0.2s ease-in;
    } /* IE 10+ */
    &:-moz-placeholder {
      opacity: 0.3;
      font-weight: 100;
      color: var(--accent-color);
      transition: color 0.2s ease-in;
    } /* Firefox 18- */

    &:focus {
      color: var(--accent-color);
      border-color: var(--primary-color-brighter);
      box-shadow: 0 0 6px 0 var(--primary-color-brighter);
      background-color: var(--theme-color);

      + i {
        opacity: 1;
        color: var(--primary-color-brighter);
        transform: translateY(-50%) rotate(90deg);
      }
    }
  }
}

.sidebar-wrapper {
  .sidebar {
    top: 0;
    bottom: 0;
    z-index: 99;
    left: -310px;
    width: 100%;
    height: 100%;
    position: fixed;
    max-width: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    color: var(--accent-color);
    background-color: var(--theme-color);
    transition: all 0.2s ease-in, box-shadow 0.4s ease-in-out;

    &::-webkit-scrollbar {
      display: none;
    }

    .sidebar-header {
      display: flex;
      padding: 15px;
      align-items: center;
      flex-direction: column;
      justify-content: center;

      .search-bar {
        margin-top: 15px;
      }
    }

    .sidebar-group {
      padding: 0 10px;
      margin-bottom: 15px;
    }

    .sidebar-group-header {
      width: 100%;
      display: flex;
      font-size: 12px;
      margin-top: 15px;
      position: relative;
      letter-spacing: 1px;
      margin-bottom: 5px;
      padding: 0 5px 5px 5px;
      text-transform: uppercase;
      justify-content: space-between;

      div {
        opacity: 0.3;
      }

      .view-all {
        font-size: 10px;
        text-transform: uppercase;
        color: var(--primary-color);
        transition: all 0.2s ease-in;

        &:hover {
          cursor: pointer;
          color: var(--primary-color-brighter);
        }
      }

      &:after {
        content: "";
        display: block;
        height: 1px;
        width: 80px;
        position: absolute;
        bottom: 0;
        left: 5px;
        opacity: 0.2;
        background-color: var(--accent-color);
      }
    }

    .channel-link {
      width: 100%;
      padding: 5px;
      display: flex;
      align-items: center;
      transition: all 0.2s ease-in;

      .channel-image {
        width: 40px;
        height: 40px;
        align-self: center;
        margin-right: 10px;
        background-color: var(--theme-color);
        border: solid 1px transparent;
        transition: all 0.2s ease-in;

        img {
          width: 100%;
          height: 100%;
          display: block;
          transition: all 0.2s ease-in;
        }
      }

      .channel-info {
        flex: 1;
        color: var(--primary-color);
        transition: all 0.2s ease-in;

        .channel-status {
          display: flex;
          font-size: 10px;
          overflow: hidden;
          white-space: nowrap;
          align-items: center;
          text-transform: uppercase;
          justify-content: space-between;

          div:first-of-type {
            max-width: 100px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }

      &:hover {
        cursor: pointer;
        background-color: var(--compliment-color);

        .channel-image {
          border-color: var(--primary-color-brighter);
          box-shadow: 0 0 6px 0 var(--primary-color-brighter);
        }
      }

      &.offline {
        .channel-image {
          img {
            filter: grayscale(100%);
          }
        }

        .channel-info {
          opacity: 0.3;
          color: var(--accent-color);
        }
      }
    }
  }

  .page-overlay {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    z-index: 50;
    position: fixed;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.7);
    transition: all 0.2s ease-in;

    &:hover {
      cursor: pointer;
    }
  }

  &.open {
    .sidebar {
      transform: translateX(310px);
      box-shadow: 5px 0 20px -10px var(--primary-color-brighter);
    }

    .page-overlay {
      opacity: 1;
      pointer-events: auto;
    }
  }
}

.twitch-logo {
  path {
    fill: var(--primary-color);
    transition: fill 0.2s ease-in;
  }

  &:hover {
    cursor: pointer;

    path {
      fill: var(--primary-color-brighter);
    }
  }
}

.chat-window {
  top: 60px;
  right: -360px;
  bottom: 0;
  width: 100%;
  z-index: 2;
  position: fixed;
  max-width: 350px;
  overflow: hidden;
  border-left: solid 1px rgba(255, 255, 255, 0.1);
  background-color: var(--theme-color);
  transition: all 0.2s ease-in;

  @media (min-width: 1601px) {
    right: -610px;
    max-width: 600px;
  }

  @media (max-width: 600px) {
    transform: translateX(360px);
  }

  .close-chat {
    top: 5px;
    left: 5px;
    z-index: 2;
    width: 36px;
    height: 36px;
    opacity: 0.5;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
    border: solid 1px transparent;
    transition: all 0.2s ease-in;

    &:hover {
      opacity: 1;
      cursor: pointer;
      background-color: var(--theme-color);
      border-color: var(--primary-color-brighter);
      box-shadow: 0 0 6px 0 var(--primary-color-brighter);
    }

    @media (min-width: 601px) {
      display: none;
    }
  }

  .chat-feed {
    padding: 15px;
    color: var(--accent-color);
    height: calc(100% - 140px);
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    background-color: var(--theme-color);
    transition: all 0.2s ease-in;

    &::-webkit-scrollbar {
      display: none;
    }

    @media (max-width: 600px) {
      padding-top: 41px;
    }

    p {
      font-size: 12px;

      .name {
        font-weight: 600;
        margin-right: 5px;
        color: var(--primary-color);
        transition: all 0.2s ease-in;

        &:hover {
          cursor: pointer;
          color: var(--primary-color-brighter);
        }
      }

      &:not(:last-of-type) {
        margin-bottom: 15px;
      }
    }
  }

  .chat-footer {
    z-index: 1;
    padding: 15px;
    position: relative;
    border-top: solid 1px rgba(255, 255, 255, 0.1);

    .chat-message-wrapper {
      position: relative;

      textarea {
        width: 100%;
        height: 60px;
        resize: none;
        border: none;
        outline: none;
        font-size: 12px;
        margin-bottom: 5px;
        color: var(--accent-color);
        padding: 10px 70px 10px 10px;
        border: solid 1px transparent;
        background-color: var(--compliment-color);
        transition: all 0.2s ease-in;

        &::-webkit-input-placeholder {
          opacity: 0.3;
          font-weight: 100;
          color: var(--accent-color);
          transition: color 0.2s ease-in;
        } /* Chrome/Opera/Safari */
        &::-moz-placeholder {
          opacity: 0.3;
          font-weight: 100;
          color: var(--accent-color);
          transition: color 0.2s ease-in;
        } /* Firefox 19+ */
        &:-ms-input-placeholder {
          opacity: 0.3;
          font-weight: 100;
          color: var(--accent-color);
          transition: color 0.2s ease-in;
        } /* IE 10+ */
        &:-moz-placeholder {
          opacity: 0.3;
          font-weight: 100;
          color: var(--accent-color);
          transition: color 0.2s ease-in;
        } /* Firefox 18- */

        &:focus {
          color: var(--accent-color);
          border-color: var(--primary-color-brighter);
          box-shadow: 0 0 6px 0 var(--primary-color-brighter);
          background-color: var(--theme-color);
        }
      }

      .chat-message-icons {
        top: 0;
        right: 0;
        display: flex;
        position: absolute;
        align-items: center;

        .icon-button {
          opacity: 0.5;

          &:hover {
            opacity: 1;
          }
        }
      }
    }

    .button-wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;

      > div {
        display: flex;
        align-items: center;
        justify-content: space-between;

        i {
          padding: 5px;
          color: var(--accent-color);
          border: solid 1px transparent;
          transition: all 0.2s ease-in;

          &:last-of-type {
            margin-right: 10px;
          }

          &:hover {
            cursor: pointer;
            border-color: var(--primary-color-brighter);
            box-shadow: 0 0 6px 0 var(--primary-color-brighter);
          }
        }
      }

      button {
        width: 100%;
        height: 40px;
        color: white;
        border: none;
        outline: none;
        font-size: 12px;
        letter-spacing: 1px;
        text-transform: uppercase;
        border: solid 1px transparent;
        background-color: var(--primary-color);
        transition: all 0.2s ease-in;

        &:hover {
          cursor: pointer;
          color: var(--primary-color-brighter);
          background-color: var(--theme-color);
          border-color: var(--primary-color-brighter);
          box-shadow: 0 0 6px 0 var(--primary-color-brighter);
        }
      }
    }
  }
}

.page-content {
  z-index: 1;
  width: 100%;
  max-width: 100%;
  position: relative;
  padding: 135px 15px 15px 15px;
  transition: all 0.2s ease-in;

  .channel-header {
    top: 60px;
    left: 0;
    right: 0;
    width: 100%;
    height: 60px;
    display: flex;
    flex-shrink: 0;
    overflow: hidden;
    position: absolute;
    align-items: center;
    color: var(--accent-color);
    justify-content: space-between;
    background-color: var(--theme-color);
    transition: all 0.2s ease-in;

    .channel-nav {
      height: 100%;
      display: flex;
      overflow-x: auto;
      overflow-y: hidden;
      padding-left: 15px;
      align-items: center;
      max-width: calc(100% - 97px);

      &::-webkit-scrollbar {
        display: none;
      }

      @media (min-width: 993px) {
        max-width: calc(100% - 335px);
      }

      a {
        opacity: 0.5;
        height: 100%;
        display: flex;
        padding: 0 10px;
        font-size: 12px;
        align-items: center;
        letter-spacing: 1px;
        text-transform: uppercase;
        background-color: transparent;
        border-top: solid 3px transparent;
        border-bottom: solid 3px transparent;
        transition: border-bottom-color 0.2s ease-in, opacity 0.2s ease-in;

        strong {
          margin-right: 5px;
        }

        .channel-image {
          width: 40px;
          height: 40px;
          margin-right: 10px;

          + span {
            font-size: 14px;
            letter-spacing: 0;
            text-transform: none;
          }
        }

        &:not(.active):hover {
          opacity: 1;
          cursor: pointer;
          border-bottom-color: var(--compliment-color);
        }

        &.active {
          opacity: 1;
          border-bottom-color: var(--primary-color);
        }
      }
    }

    .channel-header-fixed-buttons {
      height: 100%;
      display: flex;
      align-items: center;
      padding: 0 15px 0 10px;
      border-left: solid 1px rgba(255, 255, 255, 0.1);

      .btn {
        display: none;
        margin-right: 5px;

        @media (min-width: 993px) {
          display: flex;
        }
      }

      .icon-button {
        @media (min-width: 993px) {
          display: none;
        }
      }

      .chat-button {
        width: 36px;
        height: 36px;
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border: solid 1px transparent;
        transition: border-color 0.2s ease-in, box-shadow 0.2s ease-in;

        &:hover {
          cursor: pointer;
          border-color: var(--primary-color-brighter);
          box-shadow: 0 0 6px 0 var(--primary-color-brighter);
        }
      }
    }
  }

  .channel-body {
    padding: 0 15px;
    margin-top: 15px;
    text-align: center;
    color: var(--accent-color);
    transition: color 0.2s ease-in;
  }
}

.stream-container {
  background-color: var(--theme-color);
  border: solid 1px rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease-in;

  .video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;

    iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }

  .video-info {
    padding: 10px;
    line-height: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    @media (min-width: 601px) {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }

    img {
      height: 60px;
      margin-right: 10px;
      border: solid 1px var(--compliment-color);
      transition: all 0.2s ease-in;

      &:hover {
        cursor: pointer;
        border-color: var(--primary-color-brighter);
        box-shadow: 0 0 6px 0 var(--primary-color-brighter);
      }
    }

    .video-text {
      line-height: 1.5;
      color: var(--accent-color);
      transition: color 0.2s ease-in;
    }

    .video-summary {
      flex: 1;
      width: 100%;
      display: flex;
      align-items: center;

      .video-title {
        font-size: 16px;
      }

      .video-category {
        display: flex;
        line-height: 1.1;
        align-items: center;

        i {
          opacity: 0.5;
          font-size: 18px;
          margin-right: 5px;
        }

        a {
          color: var(--primary-color);
          transition: color 0.2s ease-in;

          &:hover {
            cursor: pointer;
            color: var(--primary-color-brighter);
          }
        }
      }
    }

    .video-stats {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 5px;

      @media (min-width: 601px) {
        margin-top: 0;
      }
    }
  }
}

.dropdown {
  position: relative;

  .dropdown-content {
    opacity: 0;
    font-size: 12px;
    pointer-events: none;
    position: absolute;
    top: calc(100% - 10px);
    right: 0;
    min-width: 200px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 80vh;
    color: var(--accent-color);
    background-color: var(--theme-color);
    border: solid 1px var(--primary-color-brighter);
    box-shadow: 0 0 6px 0 var(--primary-color-brighter);
    transition: all 0.2s ease-in;

    .dropdown-header {
      padding: 15px;
    }

    .dropdown-toggle {
      transition: all 0.2s ease-in;
    }

    .dropdown-group {
      border-top: solid 1px var(--compliment-color);
      transition: all 0.2s ease-in;
    }

    .dropdown-link {
      display: flex;
      text-align: right;
      padding: 10px 15px;
      align-items: center;
      transition: all 0.2s ease-in;

      i {
        margin-right: 15px;
        font-size: 18px;
        transition: all 0.2s ease-in;
      }

      span {
        transition: all 0.2s ease-in;
      }

      &:hover {
        cursor: pointer;
        background-color: var(--compliment-color);

        span {
          color: var(--primary-color);
        }
      }

      &.active {
        i {
          color: var(--primary-color);
        }
      }
    }
  }

  &.open {
    .dropdown-toggle {
      border: solid 1px var(--primary-color-brighter);
      box-shadow: 0 0 6px 0 var(--primary-color-brighter);
    }

    .dropdown-content {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(10px);
    }
  }
}

.nav {
  display: flex;
  align-items: center;

  .profile-image-wrapper {
    margin-left: 10px;
  }

  i.dropdown-toggle {
    padding: 5px;
    color: var(--accent-color);
    border: solid 1px transparent;
    transition: all 0.2s ease-in;

    &:hover {
      cursor: pointer;
      border-color: var(--primary-color-brighter);
      box-shadow: 0 0 6px 0 var(--primary-color-brighter);
    }
  }
}

.chat-page-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.7);
  transition: all 0.2s ease-in;
}

.app-container {
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  font-family: $font-family;
  background-color: var(--compliment-color);
  transition: all 0.2s ease-in;

  &.dark {
    --theme-color: black;

    --compliment-color: #17141f;
    --compliment-color-darker: #0a0712;
    --compliment-color-brighter: #3d3a45;

    --accent-color: #eceff1;
    --accent-color-darker: #d3d6d8;
    --accent-color-brighter: #f9fcfe;
  }

  &.chat {
    .chat-window {
      @media (min-width: 601px) {
        transform: translateX(-360px);
      }

      @media (min-width: 1601px) {
        transform: translateX(-610px);
      }
    }

    .page-content {
      @media (min-width: 601px) {
        max-width: calc(100% - 350px);
      }

      @media (min-width: 1601px) {
        max-width: calc(100% - 600px);
      }
    }
  }

  &:not(.chat) {
    @media (max-width: 600px) {
      .chat-window {
        transform: translateX(-360px);
      }

      .chat-page-overlay {
        opacity: 1;
        pointer-events: auto;

        &:hover {
          cursor: pointer;
        }
      }
    }
  }
}

.icon-button {
  width: auto;
  height: 36px;
  display: flex;
  padding: 0 5px;
  align-items: center;
  justify-content: center;
  color: var(--accent-color);
  border: solid 1px transparent;
  transition: all 0.2s ease-in;

  span {
    margin-left: 5px;
  }

  &:hover {
    cursor: pointer;
    background-color: var(--theme-color);
    border-color: var(--primary-color-brighter);
    box-shadow: 0 0 6px 0 var(--primary-color-brighter);
  }
}

.btn {
  width: auto;
  height: 36px;
  color: white;
  display: flex;
  outline: none;
  padding: 0 10px;
  line-height: 1.5;
  align-items: center;
  justify-content: center;
  border: solid 1px transparent;
  background-color: var(--primary-color);
  transition: all 0.2s ease-in;

  i {
    font-size: 16px;
  }

  span {
    font-size: 12px;
    margin-left: 5px;
    white-space: nowrap;
  }

  &:hover {
    cursor: pointer;
    color: var(--primary-color-brighter);
    background-color: var(--theme-color);
    border-color: var(--primary-color-brighter);
    box-shadow: 0 0 6px 0 var(--primary-color-brighter);
  }
}

.red {
  color: red;
}

[data-tooltip] {
  position: relative;
  cursor: pointer;

  &:after {
    opacity: 0;
    z-index: 10;
    line-height: 1.5;
    padding: 5px 10px;
    position: absolute;
    white-space: nowrap;
    pointer-events: none;
    color: var(--theme-color);
    font-size: 12px !important;
    content: attr(data-tooltip);
    text-shadow: none !important;
    -webkit-font-smoothing: auto;
    font-style: normal !important;
    font-weight: normal !important;
    background: var(--accent-color);
    font-family: $font-family;

    transition: all 0.2s ease-in;
  }

  &:not([data-tooltip-disabled="true"]):not(.tooltip-disabled) {
    &:hover {
      &:after {
        opacity: 1;
        transition-delay: 0.5s;
      }
    }
  }

  &[data-tooltip-pos="up"] {
    &:after {
      left: 50%;
      bottom: 100%;
      margin-bottom: 10px;

      transform: translate(-50%, 10px);
      transform-origin: top;
    }

    &:hover,
    &[data-tooltip-visible] {
      &:after {
        transform: translate(-50%, 0);
      }
    }
  }

  &[data-tooltip-pos="up-left"] {
    &:after {
      left: 0;
      bottom: 100%;
      margin-bottom: 10px;

      transform: translate(0, 10px);
      transform-origin: top;
    }

    &:hover,
    &[data-tooltip-visible] {
      &:after {
        transform: translate(0, 0);
      }
    }
  }

  &[data-tooltip-pos="up-right"] {
    &:after {
      right: 0;
      bottom: 100%;
      margin-bottom: 10px;

      transform: translate(0, 10px);
      transform-origin: top;
    }

    &:hover,
    &[data-tooltip-visible] {
      &:after {
        transform: translate(0, 0);
      }
    }
  }

  &[data-tooltip-pos="down"] {
    &:after {
      left: 50%;
      top: 100%;
      margin-top: 10px;

      transform: translate(-50%, -10px);
    }

    &:hover,
    &[data-tooltip-visible] {
      &:after {
        transform: translate(-50%, 0);
      }
    }
  }

  &[data-tooltip-pos="down-left"] {
    &:after {
      left: 0;
      top: 100%;
      margin-top: 10px;

      transform: translate(0, -10px);
    }

    &:hover,
    &[data-tooltip-visible] {
      &:after {
        transform: translate(0, 0);
      }
    }
  }

  &[data-tooltip-pos="down-right"] {
    &:after {
      right: 0;
      top: 100%;
      margin-top: 10px;

      transform: translate(0, -10px);
    }

    &:hover,
    &[data-tooltip-visible] {
      &:after {
        transform: translate(0, 0);
      }
    }
  }

  &[data-tooltip-pos="left"] {
    &:after {
      top: 50%;
      right: 100%;
      margin-right: 10px;

      transform: translate(10px, -50%);
    }

    &:hover,
    &[data-tooltip-visible] {
      &:after {
        transform: translate(0, -50%);
      }
    }
  }

  &[data-tooltip-pos="right"] {
    &:after {
      top: 50%;
      left: 100%;
      margin-left: 10px;

      transform: translate(-10px, -50%);
    }

    &:hover,
    &[data-tooltip-visible] {
      &:after {
        transform: translate(0, -50%);
      }
    }
  }

  &[data-tooltip-length="small"] {
    &:after {
      width: 80px;
      white-space: normal;
    }
  }

  &[data-tooltip-length="medium"] {
    &:after {
      width: 150px;
      white-space: normal;
    }
  }

  &[data-tooltip-length="large"] {
    &:after {
      width: 260px;
      white-space: normal;
    }
  }

  &[data-tooltip-length="xlarge"] {
    &:after {
      width: 380px;
      white-space: normal;

      @media screen and (max-width: 768px) {
        width: 90vw;
        white-space: normal;
      }
    }
  }

  &[data-tooltip-length="fit"] {
    &:after {
      width: 100%;
      white-space: normal;
    }
  }

  &[data-tooltip-break] {
    &:after {
      white-space: pre;
    }
  }

  &[data-tooltip-alignment="left"] {
    &:after {
      text-align: left;
    }
  }

  &[data-tooltip-alignment="right"] {
    &:after {
      text-align: right;
    }
  }

  &[data-tooltip-alignment="center"] {
    &:after {
      text-align: center;
    }
  }
}

View Compiled

function toggleSidebar() {
  $(".sidebar-wrapper").toggleClass("open");
}

function toggleDarkMode() {
  $(".app-container").toggleClass("dark");

  if ($(".app-container").hasClass("dark")) {
    $("#darkMode").html("check_box");
    $("#darkMode")
      .parent()
      .addClass("active");
  } else {
    $("#darkMode").html("check_box_outline_blank");
    $("#darkMode")
      .parent()
      .removeClass("active");
  }
}

function toggleChat() {
  $(".app-container").toggleClass("chat");
}

$(".dropdown-toggle").on("click", function(e) {
  $parent = $(this).parent();

  var remove = false;
  if ($parent.hasClass("open")) {
    remove = true;
  }

  setTimeout(function() {
    if (remove) {
      $parent.removeClass("open");
    } else {
      $parent.addClass("open");
    }
  }, 0);
});

$(window).on("click", function() {
  $(".dropdown").removeClass("open");
});

$(".mobile-search .dropdown-toggle").on("click", function(e) {
  $(".mobile-search input").focus();
});

$(".mobile-search input").on("click", function(e) {
  e.stopPropagation();
});

View Compiled

This Pen is owned by Cole Waldrip on CodePen.

See more by @colewaldrip on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External CSS

External JavaScript