Bits Prototype

HTML

              
                <div class="app-main">
		<!-- Left column -->
  <div id="left_col" class="column fixed open">
    <div id="large_nav" class="column">
      <div class="content">
        <div class="top">
          <div id="logo">
            <svg class="svg-logo_twitch" height="32px" version="1.1" viewBox="0 0 94 32" width="94px" 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>
          <form action="" id="sidebar_search">
            <input type="text" id="sidebar_query" class="search_input">
          </form>
        </div>
        <div class="bottom"></div>
      </div>
    </div>
  </div>
	
  <!-- Main column -->
  <div id="main_col" class="column scroll">
    <div id="channel">
    <div class="player-column host-frame js-host-frame  ">
      <div class="editable" id="broadcast-meta">
        <a class="profile-link" href="">
          <div class="profile-photo">
            <div class="goto">Go to Profile</div>
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-140/profile.jpeg" alt="lirik">
          </div>
        </a>
        <div class="info">
          <div class="title">
            <span class="over">The Usual - @DatGuyLirik</span>
            <span class="real">The Usual - @DatGuyLirik</span>
          </div>
          
          <div class="channel">
            <a class="channel-name"href="">
              LIRIK
            </a>
            <span class="playing js-playing">
              playing
            </span>
            <a href="">
              DayZ
            </a>
            on
            <a href="">
              The Hammer Squad
            </a>
            
          </div>
        </div>
      </div>
      <div id="player" class="dynamic-player js-player">
        
        <div class="ember-view full" style="height: 100%;">
					<div id="video">
					</div>
				</div>
      </div>
      
      <div class="stats-and-actions clearfix">
        <div class="channel-actions">
            <div id="ember843" class="ember-view ember-follow follow-button is-initialized is-following">
							<a>
								<svg class="svg-heart" height="16px" version="1.1" viewbox="0 0 16 16" width="16px" x="0px" y="0px">
  <path clip-rule="evenodd" d="M8,14L1,7V4l2-2h3l2,2l2-2h3l2,2v3L8,14z" fill-rule="evenodd"></path>
</svg>
								<svg class="svg-unheart" height="16px" version="1.1" viewbox="0 0 16 16" width="16px" x="0px" y="0px">
									<path clip-rule="evenodd" d="M1,9V7h14v2H1z M1,4l2-2h3l2,2l2-2h3l2,2v2H1V4z M8,14l-4.667-4h9.333L8,14z" fill-rule="evenodd">
									</path>
								</svg>
							</a>
					</div>
					<div id="ember856" class="ember-view notification-controls v2" style="">
							<a class="toggle-notification-menu js-toggle-notification-menu" href="#"></a>
					</div>

            <a class="action button primary subscribe-button" id="subscribe_action">
							<span class="subscribe-text">
								Subscribe
							</span>
							<span class="subscribe-price">
								$4.99
							</span>
						</a>

          <span id="ember760" class="ember-view"><div class="popup" style="display: none; position: absolute; top: -287px; left: 177.625px;">
</div>
<span id="ember882" class="ember-view button drop action">Share
</span>
</span>
              <span id="ember1110" class="ember-view button action"><span>Bookmark</span>
</span>
          <div class="theatre-button action">
            <a class="button glyph-only no-padding" data-ember-action="761" original-title="Theater Mode">
              <svg class="svg-theatre" height="16px" version="1.1" viewbox="0 0 16 16" width="16px" x="0px" y="0px">
  <path clip-rule="evenodd" d="M1,13h9V3H1V13z M11,3v10h4V3H11z" fill-rule="evenodd"></path>
</svg>

            </a>
          </div>
          <span id="ember925" class="ember-view"><a class="js-options button glyph-only drop action">
  <svg class="svg-gear" height="16px" version="1.1" viewbox="0 0 16 16" width="16px" x="0px" y="0px">
  <path clip-rule="evenodd" d="M15,7v2h-2.115c-0.125,0.615-0.354,1.215-0.713,1.758l1.484,1.484l-1.414,1.414l-1.484-1.484C10.215,12.531,9.615,12.76,9,12.885V15H7v-2.12c-0.614-0.126-1.21-0.356-1.751-0.714l-1.491,1.49l-1.414-1.414l1.491-1.49C3.477,10.211,3.247,9.613,3.12,9H1V7h2.116C3.24,6.384,3.469,5.785,3.829,5.242L2.343,3.757l1.414-1.414l1.485,1.485C5.785,3.469,6.384,3.24,7,3.115V1h2v2.12c0.613,0.126,1.211,0.356,1.752,0.714l1.49-1.491l1.414,1.414l-1.49,1.492C12.523,5.79,12.754,6.387,12.88,7H15z M8,6C6.896,6,6,6.896,6,8s0.896,2,2,2s2-0.896,2-2S9.104,6,8,6z" fill-rule="evenodd"></path>
</svg>

</a>
</span>
        </div>
        <div class="channel-stats">
          <span id="ember1100" class="ember-view live-count stat" original-title="Watching Now"><svg class="svg-glyph_live" height="16px" version="1.1" viewbox="0 0 16 16" width="16px" x="0px" y="0px">
  <path clip-rule="evenodd" d="M11,14H5H2v-1l3-3h2L5,8V2h6v6l-2,2h2l3,3v1H11z" fill-rule="evenodd"></path>
</svg>

          28,415
</span>
          <span id="ember770" class="ember-view stat" original-title="Total Views"><svg class="svg-glyph_views" height="16px" version="1.1" viewbox="0 0 16 16" width="16px" x="0px" y="0px">
  <path clip-rule="evenodd" d="M11,13H5L1,9V8V7l4-4h6l4,4v1v1L11,13z M8,5C6.344,5,5,6.343,5,8c0,1.656,1.344,3,3,3c1.657,0,3-1.344,3-3C11,6.343,9.657,5,8,5z M8,9C7.447,9,7,8.552,7,8s0.447-1,1-1s1,0.448,1,1S8.553,9,8,9z" fill-rule="evenodd"></path>
</svg>

          87,920,050
</span>
          <span id="ember771" class="ember-view stat" original-title="Followers"><svg class="svg-glyph_followers" height="16px" version="1.1" viewbox="0 0 16 16" width="16px" x="0px" y="0px">
  <path clip-rule="evenodd" d="M8,13.5L1.5,7V4l2-2h3L8,3.5L9.5,2h3l2,2v3L8,13.5z" fill-rule="evenodd"></path>
</svg>

          976,562
</span>
        </div>
      </div>
      
    </div>
  </div>
  </div>
	
	<div id="right_col" class="open column fixed">
    <div class="chat-container float-right">
      <div class="chat-header">
				<a class="button glyph-only left">
					<svg class="svg-roomlist" height="16px" version="1.1" viewBox="0 0 16 16" width="16px" x="0px" y="0px">
						<path clip-rule="evenodd" d="M1,13v-2h14v2H1z M1,5h13v2H1V5z M1,2h10v2H1V2z M12,10H1V8h11V10z" fill-rule="evenodd"></path>
					</svg>
				</a>
				<p class="room-title">avalonstar</p>
				<a class="button glyph-only right">
						<svg class="svg-gear" height="16px" version="1.1" viewBox="0 0 16 16" width="16px" x="0px" y="0px">
			<path clip-rule="evenodd" d="M15,7v2h-2.115c-0.125,0.615-0.354,1.215-0.713,1.758l1.484,1.484l-1.414,1.414l-1.484-1.484C10.215,12.531,9.615,12.76,9,12.885V15H7v-2.12c-0.614-0.126-1.21-0.356-1.751-0.714l-1.491,1.49l-1.414-1.414l1.491-1.49C3.477,10.211,3.247,9.613,3.12,9H1V7h2.116C3.24,6.384,3.469,5.785,3.829,5.242L2.343,3.757l1.414-1.414l1.485,1.485C5.785,3.469,6.384,3.24,7,3.115V1h2v2.12c0.613,0.126,1.211,0.356,1.752,0.714l1.49-1.491l1.414,1.414l-1.49,1.492C12.523,5.79,12.754,6.387,12.88,7H15z M8,6C6.896,6,6,6.896,6,8s0.896,2,2,2s2-0.896,2-2S9.104,6,8,6z" fill-rule="evenodd"></path>
		</svg>
					</a>
				<a class="button glyph-only right">
						<svg class="svg-viewerlist" height="16px" version="1.1" viewBox="0 0 16 16" width="16px" x="0px" y="0px">
							<path clip-rule="evenodd" d="M6,12.999v-2h8v2H6z M6,6.999h8v2H6V6.999z M6,2.999h8v2H6V2.999z M2,10.999h2v2H2V10.999z M2,6.999h2v2H2V6.999z M2,2.999h2v2H2V2.999z" fill-rule="evenodd"></path>
						</svg>
					</a>
			</div>
      <div class="chat-room">
				<div class="scroll chat-messages hideTimestamps hideModIcons">
					<ul class="chat-lines">
						<!-- message template :: ADMIN -->
						<li class="message-line chat-line admin">
							<div class="indicator"></div>
							<span class="timestamp float-left">2:32</span>
							<span class="mod-icons float-left">
								<a class="mod-icon float-left tooltip ban" title="Ban User" href="#">Ban</a>
								<a class="mod-icon float-left tooltip timeout" title="Timeout User" href="#">Timeout</a>
							</span>
							<span class="badges float-left">
							</span>
							<span class="from" style="color:#0000FF">Jtv</span>
							<span class="colon">:</span>
							<span class="message" style="undefined">Welcome to the chat room!
							</span>
						</li>
						<!-- message template :: USER -->
						<li id="ember2673" class="ember-view message-line chat-line">
							<div class="indicator"></div>
							<span class="timestamp float-left">3:16</span> 
							<span class="mod-icons float-left">
								<a class="mod-icon float-left tooltip ban" title="Ban User" href="#">Ban</a>
								<a class="mod-icon float-left tooltip timeout" title="Timeout User" href="#">Timeout</a>
							</span> 
							<span class="badges float-left">
								<div class="badge float-left tooltip turbo" title="Turbo"></div>
							</span>
							<span class="from" style="color:#8A2BE2">OMGElsie</span>
							<span class="colon">:</span> 
							<span class="message" style="undefined">
								<img class="emoticon tooltip" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/244634/Kappa.png" alt="Kappa" original-title="Kappa"> 
							</span>
						</li>
					</ul>
				</div>
				<!--CONFIRMATION -->
				<div id="bits-confirm-container">
					<div id="bits-confirm-close">
					</div>
					<div id="confirmed">
						Your purchase was successful!<br />
						<br />
						"Thank you so much for your support! It means a lot to me."
					</div>
				</div>
			</div>
			<div class="chat-interface">
		</div>
      <div class="chat-interface">
        <div class="textarea-contain">
					
					<div id="emoticon-selector-contain" class="not-subscribed anchor-bottom">
						<div class="emote-bits-section">
							<div class="emote-selector-subheader">
								Give Bits
							</div>
							<div class="emote-bits">
								<div class="emote-bits-image">
									<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-140/inline-bit.png" />
								</div>
								<div class="emote-bits-text">
									1000 Bits
								</div>
								<div class="emote-bits-button" id="addbits">
									<a class="button secondary">
										Add Bits
									</a>
								</div>
							</div>
						</div>
  					<div class="emotes channel-emotes ">
		<div class="emote-selector-subheader">
			Emoticons
		</div>
    <div class="emoticon-grid">
        <span data-ember-action="1395" class="emoticon locked tooltip" style="background-image: url('http://static-cdn.jtvnw.net/emoticons/v1/62332/1.0')" original-title="avalonEYES"></span>
        <span data-ember-action="1396" class="emoticon locked tooltip" title="avalonFOCUS" style="background-image: url(&quot;http://static-cdn.jtvnw.net/emoticons/v1/62330/1.0&quot;)"></span>
        <span data-ember-action="1397" class="emoticon locked tooltip" title="avalonAWK" style="background-image: url(&quot;http://static-cdn.jtvnw.net/emoticons/v1/62329/1.0&quot;)"></span>
        <span data-ember-action="1398" class="emoticon locked tooltip" title="avalonHAI" style="background-image: url(&quot;http://static-cdn.jtvnw.net/emoticons/v1/62328/1.0&quot;)"></span>
        <span data-ember-action="1399" class="emoticon locked tooltip" title="avalonSTAR" style="background-image: url(&quot;http://static-cdn.jtvnw.net/emoticons/v1/62327/1.0&quot;)"></span>
        <span data-ember-action="1400" class="emoticon locked tooltip" title="avalonRAGE" style="background-image: url(&quot;http://static-cdn.jtvnw.net/emoticons/v1/59880/1.0&quot;)"></span>
        <span data-ember-action="1401" class="emoticon locked tooltip" title="avalonCRY" style="background-image: url(&quot;http://static-cdn.jtvnw.net/emoticons/v1/59875/1.0&quot;)"></span>
        <span data-ember-action="1402" class="emoticon locked tooltip" style="background-image: url(&quot;http://static-cdn.jtvnw.net/emoticons/v1/55352/1.0&quot;)" original-title="avalonBAN"></span>
        <span data-ember-action="1403" class="emoticon locked tooltip" style="background-image: url(&quot;http://static-cdn.jtvnw.net/emoticons/v1/55275/1.0&quot;)" original-title="avalonLEWD"></span>
        <span data-ember-action="1404" class="emoticon locked tooltip" title="avalonWOAH" style="background-image: url(&quot;http://static-cdn.jtvnw.net/emoticons/v1/55268/1.0&quot;)"></span>
        <span data-ember-action="1405" class="emoticon locked tooltip" title="avalonKAWAII" style="background-image: url(&quot;http://static-cdn.jtvnw.net/emoticons/v1/55270/1.0&quot;)"></span>
        <span data-ember-action="1406" class="emoticon locked tooltip" title="avalonSLEEP" style="background-image: url(&quot;http://static-cdn.jtvnw.net/emoticons/v1/55266/1.0&quot;)"></span>
        <span data-ember-action="1407" class="emoticon locked tooltip" title="avalonPOWER" style="background-image: url(&quot;http://static-cdn.jtvnw.net/emoticons/v1/55265/1.0&quot;)"></span>
        <span data-ember-action="1408" class="emoticon locked tooltip" title="avalonLOVE" style="background-image: url(&quot;http://static-cdn.jtvnw.net/emoticons/v1/48133/1.0&quot;)"></span>
        <span data-ember-action="1409" class="emoticon locked tooltip" title="avalonHUG" style="background-image: url(&quot;http://static-cdn.jtvnw.net/emoticons/v1/41912/1.0&quot;)"></span>
        <span data-ember-action="1410" class="emoticon locked tooltip" title="avalonDESK" style="background-image: url(&quot;http://static-cdn.jtvnw.net/emoticons/v1/38362/1.0&quot;)"></span>
    </div>
      <div class="subscribe-message">
        <div id="non-subscriber-message">
          <span class="unlock-text">Subscribe to unlock Emoticons</span>
          <a class="action subscribe-button button primary" href="https://www.twitch.tv/products/avalonstar">
            <span class="subscribe-text">Subscribe</span>
            <span class="subscribe-price">$4.99</span>
          </a>
        </div>
    </div>
  <div class="emotes all-emotes hidden">
    
  </div>
  <div class="tabs ">
    <span data-ember-action="1393" class="tab channel active ">Channel</span>
    <span data-ember-action="1394" class="tab all  ">All</span>
  </div>
</div>
					</div>
					
					<div class="whatisthis anchor-bottom">
						<div class="text">
							<p>You have 1,000 Bits to spend!</p>
						</div>
					</div>
					
          <div id="chat-input-container">
						<div contentEditable="true" placeholder="Send a message" id="chat-message"></div>
						
						<a class="emoticon-selector-toggle">
						<svg class="svg-emoticons" height="18px" version="1.1" viewBox="0 0 18 18" width="18px" x="0px" y="0px">
			<path clip-rule="evenodd" d="M9,18c-4.971,0-9-4.029-9-9s4.029-9,9-9s9,4.029,9,9S13.971,18,9,18z M14,4.111V4h-0.111C12.627,2.766,10.904,2,9,2C7.095,2,5.373,2.766,4.111,4H4v0.111C2.766,5.373,2,7.096,2,9s0.766,3.627,2,4.889V14l0.05-0.051C5.317,15.217,7.067,16,9,16c1.934,0,3.684-0.783,4.949-2.051L14,14v-0.111c1.234-1.262,2-2.984,2-4.889S15.234,5.373,14,4.111zM11,6h2v4h-2V6z M12.535,12.535C11.631,13.44,10.381,14,9,14s-2.631-0.56-3.536-1.465l0.707-0.707C6.896,12.553,7.896,13,9,13s2.104-0.447,2.828-1.172L12.535,12.535z M5,6h2v4H5V6z" fill-rule="evenodd"></path>
		</svg>
					</a>
						<button class="button primary send-chat-button" id="send-message">Chat</button>
					</div>
      </div>
    </div>
</div>
	
</div>

CSS

              
                .anchor-bottom
	bottom: auto

.button.secondary
	border: 1px solid #6441a5
	padding: 0 10px
	font-size: 12px

.clearfix
	clear: both

.clearfix:after
	visibility: hidden
	display: block
	font-size: 0
	clear: both
	height: 0

[contenteditable="true"]
	border: 1px solid rgba(0, 0, 0, 0.25)
[contenteditable="true"]:active,
[contenteditable="true"]:focus
	outline: 0
	box-shadow: 0 0 3px 1px rgba(185,155,235,0.75)
	border: 1px solid rgba(100,65,165,0.75)

textarea
	line-height: 28px
	font: inherit
	letter-spacing: inherit
	color: #666
	vertical-align: top
	border: 1px solid rgba(0, 0, 0, 0.25)
	background-clip: padding-box
	background: #fff
	padding: 7px

	&:focus
		outline: 0
		box-shadow: 0 0 3px 1px rgba(185,155,235,0.75)
		border: 1px solid rgba(100,65,165,0.75)

.button
	position: absolute
	display: inline-block
	position: relative
	cursor: pointer
	line-height: 30px
	height: 30px
	font-size: 14px
	font-family: inherit
	padding: 0
	color: #6441a5
	border: 0
	background: none

	&.primary
		background: #6441a5
		color: #fff
		padding: 0 10px
		font-size: 12px

	&.left
		left: 20px
	
	&.glyph-only
		padding: 0 10px
	
	svg
		path
			fill: #6441a5

.chat-container
	position: absolute
	top: 0
	bottom: 0
	right: 0
	width: 340px
	background-color: #f2f2f2

.chat-header
	height: 30px
	padding: 10px 0
	line-height: 30px
	text-align: center
	font-size: 14px
	width: 100%
	box-shadow: inset 0 -1px 0 0 #dedede

	.button
		position: absolute
		top: 10px
		
		&.left
			left: 20px
			padding-left: 0
	
		&.right
			right: 20px
			padding-right: 0

	.svg-roomlist
		width: 16px
		height: 16px
		margin-top: 7px
		margin-bottom: 7px
		float: left

.chat-room
	top: 50px
	left: 0
	right: 0
	bottom: 0
	position: absolute
	display: block
	background-clip: content-box

.chat-interface
	color: #8c8c8c
	border-color: #3b3b3b
	height: 111px
	bottom: 0
	width: 100%
	position: absolute
	padding: 0 20px 20px
	box-sizing: border-box
	
.textarea-contain
	width: 100%
	height: 110px
	margin-bottom: 10px
	position: relative

	textarea
		width: 300px
		height: 50px
		padding-right: 25px
		margin: 0
		resize: none
		box-sizing: border-box

.emoticon-selector-toggle
	display: block
	width: 18px
	height: 18px
	top: 5px
	right: 5px
	position: absolute
	cursor: pointer

	svg path
		fill: rgba(0,0,0,0.2)

		&:hover
			svg path
				fill: rgba(0,0,0,0.5)

.chat-buttons-container
	width: 100%
	display: block

	.glyph-only
		min-width: 14px
		&:first-child
			padding-left: 0

.bits-widget
	width: 60px
	height: 20px
	z-index: 999
	display: inline-table
	margin-top: -3px

.bits-widget-image
	display: table-cell
	position: relative
	top: -3px

	
#bits-bounding-box
	display: table-cell
	width: 40px
	padding: 4px
	margin-left: 4px
	border: 1px dashed rgba(#6441a5, 0.5)
	font-size: 12px
	font-weight: bold
	color: #6441a5

	&:focus
		outline: none
		border: 1px dashed rgba(#6441a5, 0.5)
		

.bits-item
	pointer-events: none
	display: inline-table
	background-color: #6441a5
	font-weight: bold
	color: white
	padding: 3px 5px
	margin-top: -3px
	margin-left: 5px

.bits-item-image
	display: table-cell

.bits-item-text
	display: table-cell
	padding-left: 7px
	position: relative
	top: 1px

#video
	width: 100%
	height: 500px

.whatisthis
	padding: 15px
	width: 270px
	margin-left: -150px
	display: none
	
	.sub-text
		font-size: 11px
	.text p
		margin-bottom: 0px
		font-weight: bold
.chat-header
	height: 30px
	padding: 10px 0
	line-height: 30px
	text-align: center
	font-size: 14px
	width: 100%
	box-shadow: inset 0 -1px 0 0 #dedede

	.button
		position: absolute
		top: 10px
		
		&.left
			left: 20px
			padding-left: 0
	
		&.right
			right: 20px
			padding-right: 0
	
	.svg-roomlist
		width: 16px
		height: 16px
		margin-top: 7px
		margin-bottom: 7px
		float: left

	.svg-gear, .svg-viewerlist
		width: 16px
		height: 16px
		margin-top: 7px
		margin-bottom: 7px
		float: right
	
	.svg-gear
		margin-right: 28px
#right_col
	overflow: hidden
.chat-room
	top: 50px
	left: 0
	right: 0
	bottom: 0
	position: absolute
	display: block
	background-clip: content-box

.chat-messages
	position: absolute
	width: auto
	height: auto
	top: 0px
	bottom: 111px
	left: 0
	right: 0
	overflow: hidden

	&.hideTimestamps
		.timestamp
			display: none

	&.hideModIcons
		.mod-icons
			display: none

	.chat-lines
		padding: 10px 0
		list-style-type: none

	.chat-line
		line-height: 20px
		padding: 4px 20px
		word-wrap: break-word
		list-style-position: unset
	
		.emoticon
			background-position: center center
			background-repeat: no-repeat
			display: inline-block
			vertical-align: middle
			margin: -5px 0
	
		&.admin
			padding: 10px 20px

		&.admin, &.notification
			.timestamp, .mod-icons, .from, .colon
				display: none
			.message
				color: #666
		.from, .to
			font-weight: bold
	
			&:hover
				cursor: pointer
				text-decoration: underline
.badges
	@extend .clearfix
	float: left

	.badge
		height: 18px
		min-width: 18px
		display: inline-block
		vertical-align: middle
		float: left
		margin: 1px 3px 1px 0

		&.broadcaster
			background: #e71818 url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/244634/badge_broadcaster.svg')
			background-size: 100%

		&.turbo
			cursor: pointer
			background: #6441a5 url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/244634/badge_turbo.svg')
			background-size: 100%

		&.staff
			background: #200f33 url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/244634/badge_broadcaster.svg')
			background-size: 100%
	
.chat-interface
	color: #8c8c8c
	border-color: #3b3b3b
	bottom: 0
	width: 100%
	position: absolute
	padding: 0 20px
	box-sizing: border-box

.emoticon-selector-toggle
	display: block
	width: 18px
	height: 18px
	position: absolute
	top: 0px
	right: -196px
	cursor: pointer

	svg path
		fill: rgba(0,0,0,0.2)

		&:hover
			svg path
				fill: rgba(0,0,0,0.5)
		
.textarea-contain
	width: 100%

	textarea
		width: 300px
		height: 40px
		margin: 0
		resize: none
		box-sizing: border-box
		padding-top: 10px
		position: absolute
		bottom: 0px
	
	#chat-message
		padding-right: 80px
		padding-left: 5px
		background-color: white
		width: 300px
		height: 40px
		margin: 0
		resize: none
		box-sizing: border-box
		padding-top: 10px
		position: absolute
		bottom: 0px
	
	#chat-commands
		position: absolute
		bottom: 50px
	
	.send-chat-button
		display: block
		bottom: 5px
		right: -250px
	
	#chat-input-container
		display: block
		position: absolute
		bottom: 15px
		opacity: 1
	
	#emoticon-selector-contain
		width: 300px
		background-color: white
		border: 1px solid rgba(0,0,0,0.25)
		position: relative
		top: -300px
		display:  none
	
		.emote-selector-subheader
			width: 280px
			height: 20px
			padding: 5px 10px
			background-color: rgba(0,0,0,0.1)
	
		.tabs
			width: 100%
			white-space: nowrap
			border-top: 1px solid rgba(0,0,0,0.2)
			color: #6441a5
			height: 30px
	
			.tab
				display: inline-block
				position: relative
				border-top: 1px solid transparent
				top: -1px
				line-height: 30px
				text-align: center
				cursor: pointer
				padding: 0 10px
		
				&.active
					border-top: 1px solid #19191f
					color: #19191f
	
		.subscribe-message 
			font-size: 12px
			border-top: 1px solid #dedede
			text-align: center
			padding: 10px 0
			margin: 0 20px
	
		.emote-bits
			display: table
			padding: 10px
	
			.emote-bits-image
				display: table-cell
				width: 30px
		
			.emote-bits-text
				display: table-cell
				width: 180px
		
			.emote-bits-button
				display: table-cell
				
	
		.emoticon-grid
			text-align: center
			padding: 10px 0
	
		.emoticon
			padding: 5px
			min-width: 28px
			height: 28px
			margin: 0
	
			&.locked:before
				content: ""
				padding: 14px
				background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-140/emoticon_lock.png") no-repeat right 28px
	
#bits-confirm-container
	display: hidden
	position: absolute
	width: 340px
	padding: 0 0 0 20px
	height: 90px
	top: 0
	left: 0
	opacity: 0
	background-color: #3b2064
	color: white

	#bits-confirm-close
		position: absolute
		top: 0
		left: 325px
		width: 14px
		height: 15px
		background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-140/sticky-close.png') no-repeat
		background-size: cover
		cursor: pointer
	
	#confirmed
		width: 280px
		text-align: left
		position: absolute
		top: 15px
		font-size: 12px

JS

              
                var bitsInventory = $(".bits-item-text").html();

var currentMessage;
var bitsWidget = '<div class="bits-widget"><div class="bits-widget-image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-140/inline-bit.png"></div><input id="bits-bounding-box"></div>';

$("#bits-confirm-container").hide();

//GIVE BITS
var isBitsActive = false;
var numBits;

//CLOSE TOOLTIP
$('.whatisthis').click(function () {
	$('.whatisthis').hide();
	$('#chat-message').html('');
});

//SEND CHAT MESSAGE
$("#chat-message").keyup(function(){
	if (currentMessage.indexOf('giveBits') !== -1 && !isBitsActive){

		isBitsActive = true;
		$(".whatisthis").show();
		currentMessage = currentMessage.replace('giveBits', '');
		$("#chat-message").html(currentMessage + bitsWidget);
		$("#bits-bounding-box").focus();
	}
});

$("#chat-message").keypress(function(event) {
	
	currentMessage = $("#chat-message").html();
  var code = (event.keyCode ? event.keyCode : event.which);

	$("#bits-bounding-box").keyup(function() {

			numBits = $("#bits-bounding-box").val();

			//enter or space
			if (code === 32 || code === 13) {
				currentMessage = currentMessage.replace('<div class="bits-widget"><div class="bits-widget-image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-140/inline-bit.png"></div><input id="bits-bounding-box"></div>', '')
				$("#chat-message").html(currentMessage + '<div class="bits-item"><div class="bits-item-image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-140/inline-bit.png"></div><div class="bits-item-text">' + numBits + '</div></div>' + ' ');
				isBitsActive = false;
				$("#chat-message").focus();
				$(".whatisthis").hide();
				event.preventDefault();
			}
	});
	
	//Enter to send message to chat
	if (code === 13 && isBitsActive == false) {
		
		$(".chat-lines").append('<li class="ember-view message-line chat-line"><div class="indicator"></div><span class="timestamp float-left">3:16</span><span class="mod-icons float-left"><a class="mod-icon float-left tooltip ban" title="Ban User" href="#">Ban</a><a class="mod-icon float-left tooltip timeout" title="Timeout User" href="#">Timeout</a></span><span class="badges float-left"><div class="badge float-left tooltip turbo" title="Turbo"></div></span><span class="from" style="color:#8A2BE2">OMGElsie</span><span class="colon">:</span><span class="message" style="undefined"> ' + currentMessage + '</span></li>');
		$("#chat-message").html('');
		$("#chat-message").focus();
		event.preventDefault();
	}
});

///
/// EMOTE TOOLTIP
///

$(".emoticon-selector-toggle, #addbits").click(function(){
	$("#emoticon-selector-contain").toggle();
});

$("#addbits").click(function(){
	currentMessage = $("#chat-message").html();
	
	if (!isBitsActive){
		isBitsActive = true;
			$(".whatisthis").show();
			currentMessage = currentMessage.replace('giveBits', '');
			$("#chat-message").html(currentMessage + bitsWidget);
			$("#bits-bounding-box").focus();
	}
});

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Save Automatically?

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions