Meet The Like Bubbles

dabblet.css

/**
 * Meet The Like Bubbles
 */

/* resets */
body { font:300 100%/1.4 helvetica,sans-serif; background:#eee }
a { text-decoration:none; color:#B7DE44 }
textarea, p, button { margin:0; padding:0; font:inherit }

/*disabled*/     .bubble:nth-of-type(2) { top:26px }
/*signed out*/   .bubble:nth-of-type(3) { top:26px; left:273px; }
/*unverified*/   .bubble:nth-of-type(4) { top:26px; left:520px }
/*add*/          .bubble:nth-of-type(5) { top:210px }
/*added*/        .bubble:nth-of-type(6) { top:210px; left:273px }
/*added + share*/.bubble:nth-of-type(7) { top:210px; left:520px }
/*connect*/      .bubble:nth-of-type(8) { top:410px; }
/*connect error*/.bubble:nth-of-type(9) { top:633px; }
/*share*/        .bubble:nth-of-type(10) { top:410px; left:273px }
/*share+added*/  .bubble:nth-of-type(11) { top:410px; left:520px }

/* Bubble CSS */
.bubble { padding:14px; position:absolute; border-radius:9px;
  box-shadow:0 2px 5px 0 rgba(0, 0, 0,.3); font-size:14px; line-height:1 }
  .bubble:after { content:''; height:0; width:0;
    position:absolute; border:15px solid transparent;
    border-bottom-color:#000; bottom:100%; left:50%;
    margin-left:-14px }
.bubble p { margin-bottom:.9em }
.bubble p:last-child { margin:0 }

.bubble.like { background-color:#000; border:1px solid rgba(50,50,50,.4);
	background-color:rgba(0,0,0,.9); font-size:12px; line-height:1.4; color:#fff;
	min-width:160px; max-width:195px }
.bubble.like:after { border-bottom-color:#000; border-bottom-color:rgba(0,0,0,.9); }

.bubble.like span,
.bubble.like label { display:block }
.bubble.like header+* { margin-top:10px; border-top:1px solid #333; padding-top:9px; color:#ddd }


#connect_with_facebook { display:block; width:180px; height:25px; line-height:25px;
  background:#516793; background:linear-gradient(top, #4e6ba5 0%,#516a9b 53%,#435f97 53%,#42557b 100%);
  color:#fff; text-transform:uppercase; font-size:10px; text-align:left; border-radius:2px; color:rgba(255,255,255,.9);
  box-shadow:0 2px 0px 0px #303e59; cursor:pointer; position:relative;
  border:none; }
#connect_with_facebook:before { content:''; float:left; width:24px; height:25px;
  background:url('http://f.cl.ly/items/3k0329172A2F41002H1o/sprite.png') -56px -107px; margin:0 6px }
#connect_with_facebook:active { box-shadow:none; top:1px }

.bubble.like #cancel { display:block; margin-top:15px;
  background:none; border:none; color:#B7DE44; cursor:pointer }

#send_share { width:100%; height:22px; display:block; background:#abd62a;
  background:linear-gradient(#d1f04f 0%,#80b800 100%);
  border:none; border-radius:3px; font-weight:bold;
  text-shadow:0 1px 0px #bddc69; font-size:inherit;
  margin-top:6px }
#send_share:hover { cursor:pointer; background:#b3d940;
  background:linear-gradient(#d4f256 0%,#8bc111 100%) }
#send_share:active { background:#a6ce2f;
  box-shadow:inset 0 0 4px 0 #607d0a }

/* Hidden */
.hidden { display:none }

/* Disabled */
.disabled .when-disabled {  }

/* Signed Out */
.signed-out .when-signed-out { }

/* Unverified */
.unverified .when-unverified {  }

/* Add */
.add .when-add {  }

/* Added */
.added .when-added {  }
.added header.when-added:before,
.shared span.when-shared:before { content:''; width:11px; height:9px;
background:url('http://f.cl.ly/items/1f2v3D2E451r1l1S1C3u/sprite.png') -414px -56px;
display:inline-block; margin-right:2px }

/* Added + Shared */
.shared span.when-shared:before { margin-right:5px }

/* Connect */
.connect .when-connect { }


/* Connect Error */
.connect-error .when-connect-error {  }

/* Share */
.share .when-share {  }
.share textarea.when-share { background:transparent; border:1px solid #333;
  margin-top:3px; width:100%; padding-top:4px; height:20px; color:#fff; resize:none;
  text-indent:4px; transition:height 150ms }
.share textarea.when-share:hover { border-color:#3b3b3b }  
.share textarea.when-share:focus { background:#fff; border:1px solid #868686;
color:#000; outline:none; height:50px }

dabblet.html

<!--Hidden-->
<aside class="bubble like hidden">
  <header></header>
</aside>

<!--Disabled-->
<aside class="bubble like disabled">
  <header class="when-disabled">
   This isn't working right now. Sorry!
  </header>
</aside>

<!--Signed Out-->
<aside class="bubble like signed-out">
  <header>
    <span class="aggregate-adds">456 others added this</span>  
  </header>
  <p class="when-signed-out">
    <a href="#sign-in" data-ga="#like_bubble">Sign in</a>
    or <a href="/user/register" data-ga="#like_bubble">Register</a>
    to add this to your Storyboard.
  </p>
</aside>

<!--Unverified-->
<aside class="bubble like unverified">
  <header class="when-unverified">
    A verified email address is required to add this
    to <a href="/user/storyboard">your Storyboard</a>
  </header>
  <p class="when-unverified">
    If you no longer have the verification email you were
    sent during registration, please <a id=resend_verification_email href=#>click here to resend it</a>.
  </p>
</aside>

<!--Add-->
<aside class="bubble like add">
  <header class="when-add">
    Add to <a href="/user/storyboard">your Storyboard</a>
    <span class="aggregate-adds">456 others added this</span>
  </header>  
  <label class="when-add" for="fb_share">
    <input class="when-add" type=checkbox id="fb_share">
    Also share on Facebook
  </label>
</aside>

<!--Added-->
<aside class="bubble like added">
  <header class="when-added">
    Added to <a href="/user/storyboard">your Storyboard</a>
    <span class="aggregate-adds">You and 456 others added this</span>
  </header>
  <label class="when-added">
    <input class="when-added" type=checkbox id="fb_share">
    Share on Facebook
  </label>
</aside>

<!--Added + Share-->
<aside class="bubble like added share">
  <header class="when-added">
    Added to <a href="/user/storyboard">your Storyboard</a>
    <span class="aggregate-adds">456 others added this</span>
  </header>
  <label class="when-added">
    <input class="when-added" type=checkbox checked=checked id="fb_share">
    Share on Facebook
  </label>
  <textarea class="when-share" type=text placeholder="Write a note (optional)"></textarea>
  <button class="when-added-share" id="send_share">Add to Facebook</button>
</aside>

<!--Connect-->
<aside class="bubble like add connect">
  <header class="when-add">
    Add to <a href="/user/storyboard">your Storyboard</a>
    <span class="aggregate-adds">456 others added this topic</span>
  </header>
  <p class="when-connect">
    We need to connect to your Facebook to do this.
  </p>
  <button class="when-connect" id="connect_with_facebook">Connect with Facebook</button>
  <button class="when-connect" id="cancel">Cancel</button>  
</aside>

<!--Connect Error-->
<aside class="bubble like add connect-error">
  <header class="when-add">
    Add to <a href="/user/storyboard">your Storyboard</a>
    <span class="aggregate-adds">456 others added this</span>
  </header>
  <p class="when-connect-error">
    There was a problem connecting. Try again?
  </p>
  <button class="when-connect-error" id="connect_with_facebook">Connect with Facebook</button>
  <button class="when-connect-error" id="cancel">Cancel</button>
</aside>

<!--Share-->
<aside class="bubble like add share">
  <header class="when-add">
    Add to <a href="/user/storyboard">your Storyboard</a>
    <span class="when-share">Also share on Facebook</span>
  </header>
  <label class="when-add" for="fb_share">
    <input class="when-add" type=checkbox checked=checked id="fb_share">
    Also share on Facebook
  </label>
  <textarea class="when-share" type=text placeholder="Write a note (optional)"></textarea>
</aside>

<!--Added + Shared-->
<aside class="bubble like added shared">
  <header class="when-added">
    Added to <a href="/user/storyboard">your Storyboard</a>
    <span class="aggregate-adds">456 others added this</span>
  </header>
  <span class="when-shared">Shared on Facebook</span>
</aside>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}