Twaadd Window

The basic layout for Twaadd

by AaronLayton

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<div class="twaadd-window position-top-right">
    <h1 class="twaadd-header text-center">Twaadd</h1>
    
    <div id="twaaddIntro" class="twaadd-step">
        <p class="text-center">Welcome to TwitterAutoAdd.</p>
        <h2 class="twaadd-header">Select profile or import</h2>
        <div class="row-fluid" style="margin-bottom:25px;">
            <div class="span6">
                <button class="btn primary-btn btn-block">Select Profile</button>
            </div>
            <div class="span6">
                <button class="btn primary-btn btn-block">Import</button>
            </div>
        </div>
        <h3 class="twaadd-header">Disclaimer</h3>
        <div class="twaadd-disclaimer">While scripts that automatically follow people on Twitter are technically against their <a href="https://twitter.com/tos" target="_blank">TOS</a> this one is not meant for mass consumption and doesn't mess with anything Twitter provides. It is just a front-end engineer tinkering with public information and the browser to make his life easier.<br/><span style="color:#000">Use at your own risk!</span></div>
    </div>
    
    <div id="twaaddSelectProfile" class="twaadd-step">
        <p class="text-center position-relative"><span class="btn btn-mini btn-back">&lt;</span>Welcome to TwitterAutoAdd.</p>
        <h2 class="twaadd-header">Select profile</h2>
        <p>Select your profile from the list below or press the <code>New profile</code> button</p>
        
        <ul class="twaadd-profiles unstyled">
            <li class="twaadd-profiles__profile">AaronLayton <span class="btn btn-mini btn-danger twaadd-profiles__remove pull-right">x</span></li>
            <li class="twaadd-profiles__profile">AndrewBeniston <span class="btn btn-mini btn-danger twaadd-profiles__remove pull-right">x</span></li>
            <li class="twaadd-profiles__profile">RemarkableNet <span...

CSS

body {
    background:#999;
}
.text-uppercase{
    text-transform:uppercase
}
.position-top-right {
    top: 56px;
    right: 10px;
}
.twaadd-step {
    border:1px solid #aaa;
    margin-top:20px;
}
.twaadd-step:first-child {
    margin-top:0;
}
.twaadd-window {
    background:#fff;
    border-radius:5px;
    box-shadow: 0 0 8px rgba(0,0,0,0.1);
    box-sizing:border-box;
    color: #6f6f6f;
    font-family:'Segoe UI', Tahoma, sans-serif;
    font-size: 12px;
    padding:20px;
    position:absolute;
    width:290px;
}

.twaadd-header {
    color:#000;
    font-weight:normal;
    line-height:inherit;
    margin:0 0 10px;
}
h1.twaadd-header {
    font-size:24px;
}
h2.twaadd-header {
    font-size:18px;
    margin-top:10px;
}
h3.twaadd-header {
    font-size:16px;
    margin-top:10px;
}
h4.twaadd-header {
    color:#666;
    font-size:10px;
    margin:0;
}
.position-relative {
    position:relative;
}
.btn-back {
    margin-top:-2px;
    position:absolute;
    left:0;
}
.twaadd-disclaimer {
    background:#e8e8e8;
    border-radius:5px;
    font-size:10px;
    line-height:inherit;
    padding:10px;
}
.twaadd-profiles {
    margin:15px 0;
    max-height:494px;
    overflow-y:auto;
}
.twaadd-profiles__profile {
    border-top:1px solid #eee;
    line-height:22px;
    padding:5px 5px;
}
.twaadd-profiles__profile:first-child {
    border-top:none;
}
.twaadd-profiles__profile:hover {
    background:#f5f5f5;
    cursor:pointer;
    color:#000;
}
.twaadd-profiles__profile-image {
    margin-right:6px;
    margin-top:1px;
    vertical-align:top;
    width:20px;
}
.twaadd__profile-name {
    margin: 10px 0 20px 0 !important
}
.twaadd__profile-data {
    margin: 20px 0;
}
.twaadd__stat {
    color:#00B7EA;
    font-size:20px;
}

/* CSS for tagedit */
/**
 * Styles of the tagedit inputsforms
 */
.tagedit-list {margin: 0; padding: 5px 5px 0 5px; border: 1px solid #c6c6c6; overflow: auto; font-size: 11px; min-height: 25px; }
.tagedit-list li.tagedit-listelement {list-style-type:...