Picker
Special patterns and chunks of style for the picker popup window.
Sign In
<div class="tools-page">
<div class="tools-signin-logo">
<img
class="tools-signin-logo"
width="450"
src="https://mltshp-cdn.com/static/images/mltshp-tools-logo.svg"
/>
</div>
<div class="content content-narrow content-sign-in">
<h1>Sign in to save your images to your shake</h1>
<div class="fun-form sign-in-fun-form">
<form>
<div class="field">
<label>Username:</label>
<div class="field-input">
<input
class="input-text"
type="text"
name="name"
value=""
autocorrect="off"
autocapitalize="none"
autocomplete="username"
/>
</div>
</div>
<div class="field">
<label>Password:</label>
<div class="field-input">
<input
class="input-text"
type="password"
name="password"
autocomplete="new-password"
/>
</div>
</div>
<div class="field field-submit">
<input
class="btn btn-primary btn-shadow btn-large"
type="submit"
value="Sign In!"
/>
</div>
</form>
<div class="clear"></div>
</div>
</div>
</div>
Picker
<div class="tools-page">
<div class="header">
<a href="#"
><img
src="https://mltshp-cdn.com/static/images/mltshp-tools-small.svg"
alt="MLTSHP"
/></a>
you are signed in as yourname |
<a href="#">sign out</a>
</div>
<div class="content">
<div class="content-inner">
<div class="picker-content">
<form
class="fun-form fun-form-stacked tools-fun-form"
method="post"
action="/tools/p"
>
<div class="field tools-field-title">
<div class="field-input">
<input
class="input-text"
type="text"
name="title"
autocomplete="off"
value=""
/>
</div>
</div>
<div class="field field-textarea">
<div class="field-input">
<div class="field-input-inner">
<textarea name="description" value="">
source: http://capndesign.com/bstshp/</textarea
>
</div>
</div>
</div>
<div class="field tools-field-title">
<div class="field-input">
<select name="shake_id">
<option value="7537">user shake</option>
<option value="102632">cool shake</option>
<option value="102661">secret shake</option>
<option value="9174">dance party</option>
</select>
</div>
</div>
<div class="field field-submit tools-save-this">
<input
type="image"
src="https://mltshp-cdn.com/static/images/tools-save-this.svg?v=b92202763dde2f5c124685d310df7bb7"
width="171"
height="84"
alt="Save This"
/>
</div>
</form>
</div>
<div class="picker-image">
<img src="https://mltshp.com/r/1JP5T" alt="" />
</div>
</div>
</div>
</div>
Picker Success
<div class="tools-page">
<div class="header">
<a href="#"
><img
src="https://mltshp-cdn.com/static/images/mltshp-tools-small.svg"
alt="MLTSHP"
/></a>
you are signed in as yourname |
<a href="#">sign out</a>
</div>
<div class="content">
<div class="content-inner">
<div class="picker-content">
<h2 class="tools-saved-it">More Enchanted Forest has been saved.</h2>
<form class="fun-form fun-form-stacked fun-form-border">
<div class="field">
<label
>Image URL (<a href="#" target="_blank">Go there now</a>)</label
>
<div class="field-input">
<input
type="text"
class="input-text"
name="bookmarklet"
value="https://mltshp.com/p/1JP5T"
/>
</div>
</div>
<div class="field">
<label>Direct Image URL</label>
<div class="field-input">
<input
type="text"
class="input-text"
name="bookmarklet"
value="https://mltshp.com/r/1JP5T"
/>
</div>
</div>
</form>
</div>
<div class="picker-image">
<img src="https://mltshp.com/r/1JP5T" />
</div>
</div>
</div>
</div>
Picker Error
<div class="tools-page">
<div class="header">
<a href="#"
><img
src="https://mltshp-cdn.com/static/images/mltshp-tools-small.svg"
alt="MLTSHP"
/></a>
you are signed in as yourname |
<a href="#">sign out</a>
</div>
<div class="content">
<div class="content-inner">
<div class="full-width">
<h2 class="error-uh-oh">We had a problem.</h2>
</div>
</div>
</div>
</div>
Picker Email Validation
<div class="tools-page">
<div class="header">
<a href="#"
><img
src="https://mltshp-cdn.com/static/images/mltshp-tools-small.svg"
alt="MLTSHP"
/></a>
you are signed in as yourname |
<a href="#">sign out</a>
</div>
<div class="content">
<div class="content-inner">
<div class="picker-content">
<div class="email-unverified">
<h2>Email Unconfirmed</h2>
<h3>
In order to post, you have to confirm your email address first.
Check your email for the confirmation link. Visit your
<a href="#">account settings</a> if you need it re-sent.
</h3>
</div>
</div>
</div>
</div>
</div>
Picker Upload Limit
<div class="tools-page">
<div class="header">
<a href="#"
><img
src="https://mltshp-cdn.com/static/images/mltshp-tools-small.svg"
alt="MLTSHP"
/></a>
you are signed in as yourname |
<a href="#">sign out</a>
</div>
<div class="content">
<div class="content-inner">
<div class="picker-content">
<div class="over-upload-limit">
<h2>Upload account limit</h2>
<h3>
You’ve reached the limit on the number of megs you can upload in a
month. That limit is 300 megabytes. If you’d like to
<a href="#">become a Double Scoop member</a>! It’s just $2/month.
</h3>
</div>
</div>
</div>
</div>
</div>