Created
November 5, 2015 09:18
-
-
Save lichenbuliren/23eb767bf399ae3fb1ec to your computer and use it in GitHub Desktop.
Cover Flow
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="pure-g cover" id="content"> | |
<div id="0">0</div> | |
<div id="1">1</div> | |
<div id="2">2</div> | |
<div id="3">3</div> | |
<div id="4">4</div> | |
<div id="5">5</div> | |
<div id="6">6</div> | |
<div id="7">7</div> | |
<div id="8">8</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
window.onload = function () { | |
'use strict'; | |
var count, images, dim, offset, center, angle, dist, shift, | |
pressed, reference, amplitude, target, velocity, timeConstant, | |
xform, frame, timestamp, ticker; | |
function initialize() { | |
pressed = false; | |
timeConstant = 250; // ms | |
dim = 200; | |
offset = target = 0; | |
angle = -60; | |
dist = -150; | |
shift = 10; | |
count = 9; | |
images = []; | |
while (images.length < count) { | |
images.push(document.getElementById(images.length)); | |
} | |
} | |
function setupEvents() { | |
var view = document.getElementById('content'); | |
if (typeof window.ontouchstart !== 'undefined') { | |
view.addEventListener('touchstart', tap); | |
view.addEventListener('touchmove', drag); | |
view.addEventListener('touchend', release); | |
} | |
view.addEventListener('mousedown', tap); | |
view.addEventListener('mousemove', drag); | |
view.addEventListener('mouseup', release); | |
document.addEventListener('keydown', handleKey); | |
} | |
function xpos(e) { | |
// touch event | |
if (e.targetTouches && (e.targetTouches.length >= 1)) { | |
return e.targetTouches[0].clientX; | |
} | |
// mouse event | |
return e.clientX; | |
} | |
function wrap(x) { | |
return (x >= count) ? (x % count) : (x < 0) ? wrap(count + (x % count)) : x; | |
} | |
function scroll(x) { | |
var i, half, delta, dir, tween, el, alignment; | |
offset = (typeof x === 'number') ? x : offset; | |
center = Math.floor((offset + dim / 2) / dim); | |
delta = offset - center * dim; | |
dir = (delta < 0) ? 1 : -1; | |
tween = -dir * delta * 2 / dim; | |
alignment = 'translateX(' + (innerWidth - dim) / 2 + 'px) '; | |
alignment += 'translateY(' + (innerHeight - dim) / 2 + 'px)'; | |
// center | |
el = images[wrap(center)]; | |
el.style[xform] = alignment + | |
' translateX(' + (-delta / 2) + 'px)' + | |
' translateX(' + (dir * shift * tween) + 'px)' + | |
' translateZ(' + (dist * tween) + 'px)' + | |
' rotateY(' + (dir * angle * tween) + 'deg)'; | |
el.style.zIndex = 0; | |
el.style.opacity = 1; | |
half = count >> 1; | |
for (i = 1; i <= half; ++i) { | |
// right side | |
el = images[wrap(center + i)]; | |
el.style[xform] = alignment + | |
' translateX(' + (shift + (dim * i - delta) / 2) + 'px)' + | |
' translateZ(' + dist + 'px)' + | |
' rotateY(' + angle + 'deg)'; | |
el.style.zIndex = -i; | |
el.style.opacity = (i === half && delta < 0) ? 1 - tween : 1; | |
// left side | |
el = images[wrap(center - i)]; | |
el.style[xform] = alignment + | |
' translateX(' + (-shift + (-dim * i - delta) / 2) + 'px)' + | |
' translateZ(' + dist + 'px)' + | |
' rotateY(' + -angle + 'deg)'; | |
el.style.zIndex = -i; | |
el.style.opacity = (i === half && delta > 0) ? 1 - tween : 1; | |
} | |
// center | |
el = images[wrap(center)]; | |
el.style[xform] = alignment + | |
' translateX(' + (-delta / 2) + 'px)' + | |
' translateX(' + (dir * shift * tween) + 'px)' + | |
' translateZ(' + (dist * tween) + 'px)' + | |
' rotateY(' + (dir * angle * tween) + 'deg)'; | |
el.style.zIndex = 0; | |
el.style.opacity = 1; | |
} | |
function track() { | |
var now, elapsed, delta, v; | |
now = Date.now(); | |
elapsed = now - timestamp; | |
timestamp = now; | |
delta = offset - frame; | |
frame = offset; | |
v = 1000 * delta / (1 + elapsed); | |
velocity = 0.8 * v + 0.2 * velocity; | |
} | |
function autoScroll() { | |
var elapsed, delta; | |
if (amplitude) { | |
elapsed = Date.now() - timestamp; | |
delta = amplitude * Math.exp(-elapsed / timeConstant); | |
if (delta > 4 || delta < -4) { | |
scroll(target - delta); | |
requestAnimationFrame(autoScroll); | |
} else { | |
scroll(target); | |
} | |
} | |
} | |
function tap(e) { | |
pressed = true; | |
reference = xpos(e); | |
velocity = amplitude = 0; | |
frame = offset; | |
timestamp = Date.now(); | |
clearInterval(ticker); | |
ticker = setInterval(track, 100); | |
e.preventDefault(); | |
e.stopPropagation(); | |
return false; | |
} | |
function drag(e) { | |
var x, delta; | |
if (pressed) { | |
x = xpos(e); | |
delta = reference - x; | |
if (delta > 2 || delta < -2) { | |
reference = x; | |
scroll(offset + delta); | |
} | |
} | |
e.preventDefault(); | |
e.stopPropagation(); | |
return false; | |
} | |
function release(e) { | |
pressed = false; | |
clearInterval(ticker); | |
target = offset; | |
if (velocity > 10 || velocity < -10) { | |
amplitude = 0.9 * velocity; | |
target = offset + amplitude; | |
} | |
target = Math.round(target / dim) * dim; | |
amplitude = target - offset; | |
timestamp = Date.now(); | |
requestAnimationFrame(autoScroll); | |
e.preventDefault(); | |
e.stopPropagation(); | |
return false; | |
} | |
function handleKey(e) { | |
if (!pressed && (target === offset)) { | |
// Space or PageDown or RightArrow or DownArrow | |
if ([32, 34, 39, 40].indexOf(e.which) >= 0) { | |
target = offset + dim; | |
} | |
// PageUp or LeftArrow or UpArrow | |
if ([33, 37, 38].indexOf(e.which) >= 0) { | |
target = offset - dim; | |
} | |
if (offset !== target) { | |
amplitude = target - offset; | |
timestamp = Date.now(); | |
requestAnimationFrame(autoScroll); | |
return true; | |
} | |
} | |
} | |
xform = 'transform'; | |
['webkit', 'Moz', 'O', 'ms'].every(function (prefix) { | |
var e = prefix + 'Transform'; | |
if (typeof document.body.style[e] !== 'undefined') { | |
xform = e; | |
return false; | |
} | |
return true; | |
}); | |
window.onresize = scroll; | |
initialize(); | |
setupEvents(); | |
scroll(offset); | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*! | |
Pure v0.2.1 | |
Copyright 2013 Yahoo! Inc. All rights reserved. | |
Licensed under the BSD License. | |
https://github.com/yui/pure/blob/master/LICENSE.md | |
*/ | |
/*! | |
normalize.css v1.1.2 | MIT License | git.io/normalize | |
Copyright (c) Nicolas Gallagher and Jonathan Neal | |
*/ | |
/*! normalize.css v1.1.2 | MIT License | git.io/normalize */ | |
article, | |
aside, | |
details, | |
figcaption, | |
figure, | |
footer, | |
header, | |
hgroup, | |
main, | |
nav, | |
section, | |
summary { | |
display: block | |
} | |
audio, | |
canvas, | |
video { | |
display: inline-block; | |
*display: inline; | |
*zoom: 1 | |
} | |
audio:not([controls]) { | |
display: none; | |
height: 0 | |
} | |
[hidden] { | |
display: none | |
} | |
html { | |
font-size: 100%; | |
-ms-text-size-adjust: 100%; | |
-webkit-text-size-adjust: 100% | |
} | |
html, | |
button, | |
input, | |
select, | |
textarea { | |
font-family: sans-serif | |
} | |
body { | |
margin: 0 | |
} | |
a:focus { | |
outline: thin dotted | |
} | |
a:active, | |
a:hover { | |
outline: 0 | |
} | |
h1 { | |
font-size: 2em; | |
margin: .67em 0 | |
} | |
h2 { | |
font-size: 1.5em; | |
margin: .83em 0 | |
} | |
h3 { | |
font-size: 1.17em; | |
margin: 1em 0 | |
} | |
h4 { | |
font-size: 1em; | |
margin: 1.33em 0 | |
} | |
h5 { | |
font-size: .83em; | |
margin: 1.67em 0 | |
} | |
h6 { | |
font-size: .67em; | |
margin: 2.33em 0 | |
} | |
abbr[title] { | |
border-bottom: 1px dotted | |
} | |
b, | |
strong { | |
font-weight: 700 | |
} | |
blockquote { | |
margin: 1em 40px | |
} | |
dfn { | |
font-style: italic | |
} | |
hr { | |
-moz-box-sizing: content-box; | |
box-sizing: content-box; | |
height: 0 | |
} | |
mark { | |
background: #ff0; | |
color: #000 | |
} | |
p, | |
pre { | |
margin: 1em 0 | |
} | |
code, | |
kbd, | |
pre, | |
samp { | |
font-family: monospace, serif; | |
_font-family: 'courier new', monospace; | |
font-size: 1em | |
} | |
pre { | |
white-space: pre; | |
white-space: pre-wrap; | |
word-wrap: break-word | |
} | |
q { | |
quotes: none | |
} | |
q:before, | |
q:after { | |
content: ''; | |
content: none | |
} | |
small { | |
font-size: 80% | |
} | |
sub, | |
sup { | |
font-size: 75%; | |
line-height: 0; | |
position: relative; | |
vertical-align: baseline | |
} | |
sup { | |
top: -.5em | |
} | |
sub { | |
bottom: -.25em | |
} | |
dl, | |
menu, | |
ol, | |
ul { | |
margin: 1em 0 | |
} | |
dd { | |
margin: 0 0 0 40px | |
} | |
menu, | |
ol, | |
ul { | |
padding: 0 0 0 40px | |
} | |
nav ul, | |
nav ol { | |
list-style: none; | |
list-style-image: none | |
} | |
img { | |
border: 0; | |
-ms-interpolation-mode: bicubic | |
} | |
svg:not(:root) { | |
overflow: hidden | |
} | |
figure { | |
margin: 0 | |
} | |
form { | |
margin: 0 | |
} | |
fieldset { | |
border: 1px solid silver; | |
margin: 0 2px; | |
padding: .35em .625em .75em | |
} | |
legend { | |
border: 0; | |
padding: 0; | |
white-space: normal; | |
*margin-left: -7px | |
} | |
button, | |
input, | |
select, | |
textarea { | |
font-size: 100%; | |
margin: 0; | |
vertical-align: baseline; | |
*vertical-align: middle | |
} | |
button, | |
input { | |
line-height: normal | |
} | |
button, | |
select { | |
text-transform: none | |
} | |
button, | |
html input[type=button], | |
input[type=reset], | |
input[type=submit] { | |
-webkit-appearance: button; | |
cursor: pointer; | |
*overflow: visible | |
} | |
button[disabled], | |
html input[disabled] { | |
cursor: default | |
} | |
input[type=checkbox], | |
input[type=radio] { | |
box-sizing: border-box; | |
padding: 0; | |
*height: 13px; | |
*width: 13px | |
} | |
input[type=search] { | |
-webkit-appearance: textfield; | |
-moz-box-sizing: content-box; | |
-webkit-box-sizing: content-box; | |
box-sizing: content-box | |
} | |
input[type=search]::-webkit-search-cancel-button, | |
input[type=search]::-webkit-search-decoration { | |
-webkit-appearance: none | |
} | |
button::-moz-focus-inner, | |
input::-moz-focus-inner { | |
border: 0; | |
padding: 0 | |
} | |
textarea { | |
overflow: auto; | |
vertical-align: top | |
} | |
table { | |
border-collapse: collapse; | |
border-spacing: 0 | |
} | |
.pure-button { | |
display: inline-block; | |
*display: inline; | |
zoom: 1; | |
line-height: normal; | |
white-space: nowrap; | |
vertical-align: baseline; | |
text-align: center; | |
cursor: pointer; | |
-webkit-user-drag: none; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none | |
} | |
.pure-button::-moz-focus-inner { | |
padding: 0; | |
border: 0 | |
} | |
.pure-button { | |
font-size: 100%; | |
*font-size: 90%; | |
*overflow: visible; | |
padding: .5em 1.5em; | |
color: #444; | |
color: rgba(0, 0, 0, .8); | |
*color: #444; | |
border: 1px solid #999; | |
border: 0 rgba(0, 0, 0, 0); | |
background-color: #E6E6E6; | |
text-decoration: none; | |
border-radius: 2px; | |
-webkit-font-smoothing: antialiased; | |
-webkit-transition: .1s linear -webkit-box-shadow; | |
-moz-transition: .1s linear -moz-box-shadow; | |
-ms-transition: .1s linear box-shadow; | |
-o-transition: .1s linear box-shadow; | |
transition: .1s linear box-shadow | |
} | |
.pure-button-hover, | |
.pure-button:hover, | |
.pure-button:focus { | |
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000', GradientType=0); | |
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0, 0, 0, .05)), to(rgba(0, 0, 0, .1))); | |
background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .1)); | |
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .05) 0, rgba(0, 0, 0, .1)); | |
background-image: -ms-linear-gradient(transparent, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .1)); | |
background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .1)); | |
background-image: linear-gradient(transparent, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .1)) | |
} | |
.pure-button:focus { | |
outline: 0 | |
} | |
.pure-button-active, | |
.pure-button:active { | |
box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) inset, 0 0 6px rgba(0, 0, 0, .2) inset | |
} | |
.pure-button[disabled], | |
.pure-button-disabled, | |
.pure-button-disabled:hover, | |
.pure-button-disabled:focus, | |
.pure-button-disabled:active { | |
border: 0; | |
background-image: none; | |
filter: progid: DXImageTransform.Microsoft.gradient(enabled=false); | |
filter: alpha(opacity=40); | |
-khtml-opacity: .4; | |
-moz-opacity: .4; | |
opacity: .4; | |
cursor: not-allowed; | |
box-shadow: none | |
} | |
.pure-button-hidden { | |
display: none | |
} | |
.pure-button::-moz-focus-inner { | |
padding: 0; | |
border: 0 | |
} | |
.pure-button-primary, | |
.pure-button-selected, | |
a.pure-button-primary, | |
a.pure-button-selected { | |
background-color: #0078e7; | |
color: #fff | |
} | |
.pure-form { | |
margin: 0 | |
} | |
.pure-form fieldset { | |
border: 1px solid silver; | |
margin: 0 2px; | |
padding: .35em .625em .75em | |
} | |
.pure-form legend { | |
border: 0; | |
padding: 0; | |
white-space: normal; | |
*margin-left: -7px | |
} | |
.pure-form button, | |
.pure-form input, | |
.pure-form select, | |
.pure-form textarea { | |
font-size: 100%; | |
margin: 0; | |
vertical-align: baseline; | |
*vertical-align: middle | |
} | |
.pure-form button, | |
.pure-form input { | |
line-height: normal | |
} | |
.pure-form button, | |
.pure-form input[type=button], | |
.pure-form input[type=reset], | |
.pure-form input[type=submit] { | |
-webkit-appearance: button; | |
cursor: pointer; | |
*overflow: visible | |
} | |
.pure-form button[disabled], | |
.pure-form input[disabled] { | |
cursor: default | |
} | |
.pure-form input[type=checkbox], | |
.pure-form input[type=radio] { | |
box-sizing: border-box; | |
padding: 0; | |
*height: 13px; | |
*width: 13px | |
} | |
.pure-form input[type=search] { | |
-webkit-appearance: textfield; | |
-moz-box-sizing: content-box; | |
-webkit-box-sizing: content-box; | |
box-sizing: content-box | |
} | |
.pure-form input[type=search]::-webkit-search-cancel-button, | |
.pure-form input[type=search]::-webkit-search-decoration { | |
-webkit-appearance: none | |
} | |
.pure-form button::-moz-focus-inner, | |
.pure-form input::-moz-focus-inner { | |
border: 0; | |
padding: 0 | |
} | |
.pure-form textarea { | |
overflow: auto; | |
vertical-align: top | |
} | |
.pure-form input[type=text], | |
.pure-form input[type=password], | |
.pure-form input[type=email], | |
.pure-form input[type=url], | |
.pure-form input[type=date], | |
.pure-form input[type=month], | |
.pure-form input[type=time], | |
.pure-form input[type=datetime], | |
.pure-form input[type=datetime-local], | |
.pure-form input[type=week], | |
.pure-form input[type=number], | |
.pure-form input[type=search], | |
.pure-form input[type=tel], | |
.pure-form input[type=color], | |
.pure-form select, | |
.pure-form textarea { | |
padding: .5em .6em; | |
display: inline-block; | |
border: 1px solid #ccc; | |
font-size: .8em; | |
box-shadow: inset 0 1px 3px #ddd; | |
border-radius: 4px; | |
-webkit-transition: .3s linear border; | |
-moz-transition: .3s linear border; | |
-ms-transition: .3s linear border; | |
-o-transition: .3s linear border; | |
transition: .3s linear border; | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
-webkit-font-smoothing: antialiased | |
} | |
.pure-form input[type=text]:focus, | |
.pure-form input[type=password]:focus, | |
.pure-form input[type=email]:focus, | |
.pure-form input[type=url]:focus, | |
.pure-form input[type=date]:focus, | |
.pure-form input[type=month]:focus, | |
.pure-form input[type=time]:focus, | |
.pure-form input[type=datetime]:focus, | |
.pure-form input[type=datetime-local]:focus, | |
.pure-form input[type=week]:focus, | |
.pure-form input[type=number]:focus, | |
.pure-form input[type=search]:focus, | |
.pure-form input[type=tel]:focus, | |
.pure-form input[type=color]:focus, | |
.pure-form select:focus, | |
.pure-form textarea:focus { | |
outline: 0; | |
outline: thin dotted \9; | |
border-color: #129FEA | |
} | |
.pure-form input[type=file]:focus, | |
.pure-form input[type=radio]:focus, | |
.pure-form input[type=checkbox]:focus { | |
outline: thin dotted #333; | |
outline: 1px auto #129FEA | |
} | |
.pure-form .pure-checkbox, | |
.pure-form .pure-radio { | |
margin: .5em 0; | |
display: block | |
} | |
.pure-form input[type=text][disabled], | |
.pure-form input[type=password][disabled], | |
.pure-form input[type=email][disabled], | |
.pure-form input[type=url][disabled], | |
.pure-form input[type=date][disabled], | |
.pure-form input[type=month][disabled], | |
.pure-form input[type=time][disabled], | |
.pure-form input[type=datetime][disabled], | |
.pure-form input[type=datetime-local][disabled], | |
.pure-form input[type=week][disabled], | |
.pure-form input[type=number][disabled], | |
.pure-form input[type=search][disabled], | |
.pure-form input[type=tel][disabled], | |
.pure-form input[type=color][disabled], | |
.pure-form select[disabled], | |
.pure-form textarea[disabled] { | |
cursor: not-allowed; | |
background-color: #eaeded; | |
color: #cad2d3 | |
} | |
.pure-form input[readonly], | |
.pure-form select[readonly], | |
.pure-form textarea[readonly], | |
.pure-form input[readonly]:focus, | |
.pure-form select[readonly]:focus, | |
.pure-form textarea[readonly]:focus { | |
background: #eee; | |
color: #777; | |
border-color: #ccc | |
} | |
.pure-form input:focus:invalid, | |
.pure-form textarea:focus:invalid, | |
.pure-form select:focus:invalid { | |
color: #b94a48; | |
border: 1px solid #ee5f5b | |
} | |
.pure-form input:focus:invalid:focus, | |
.pure-form textarea:focus:invalid:focus, | |
.pure-form select:focus:invalid:focus { | |
border-color: #e9322d | |
} | |
.pure-form input[type=file]:focus:invalid:focus, | |
.pure-form input[type=radio]:focus:invalid:focus, | |
.pure-form input[type=checkbox]:focus:invalid:focus { | |
outline-color: #e9322d | |
} | |
.pure-form select { | |
border: 1px solid #ccc; | |
background-color: #fff | |
} | |
.pure-form select[multiple] { | |
height: auto | |
} | |
.pure-form label { | |
margin: .5em 0 .2em; | |
font-size: 90% | |
} | |
.pure-form fieldset { | |
margin: 0; | |
padding: .35em 0 .75em; | |
border: 0 | |
} | |
.pure-form legend { | |
display: block; | |
width: 100%; | |
padding: .3em 0; | |
margin-bottom: .3em; | |
font-size: 125%; | |
color: #333; | |
border-bottom: 1px solid #e5e5e5 | |
} | |
.pure-form-stacked input[type=text], | |
.pure-form-stacked input[type=password], | |
.pure-form-stacked input[type=email], | |
.pure-form-stacked input[type=url], | |
.pure-form-stacked input[type=date], | |
.pure-form-stacked input[type=month], | |
.pure-form-stacked input[type=time], | |
.pure-form-stacked input[type=datetime], | |
.pure-form-stacked input[type=datetime-local], | |
.pure-form-stacked input[type=week], | |
.pure-form-stacked input[type=number], | |
.pure-form-stacked input[type=search], | |
.pure-form-stacked input[type=tel], | |
.pure-form-stacked input[type=color], | |
.pure-form-stacked select, | |
.pure-form-stacked label, | |
.pure-form-stacked textarea { | |
display: block; | |
margin: .25em 0 | |
} | |
.pure-form-aligned input, | |
.pure-form-aligned textarea, | |
.pure-form-aligned select, | |
.pure-form-aligned .pure-help-inline, | |
.pure-form-message-inline { | |
display: inline-block; | |
*display: inline; | |
*zoom: 1; | |
vertical-align: middle | |
} | |
.pure-form-aligned .pure-control-group { | |
margin-bottom: .5em | |
} | |
.pure-form-aligned .pure-control-group label { | |
text-align: right; | |
display: inline-block; | |
vertical-align: middle; | |
width: 10em; | |
margin: 0 1em 0 0 | |
} | |
.pure-form-aligned .pure-controls { | |
margin: 1.5em 0 0 10em | |
} | |
.pure-form input.pure-input-rounded, | |
.pure-form .pure-input-rounded { | |
border-radius: 2em; | |
padding: .5em 1em | |
} | |
.pure-form .pure-group fieldset { | |
margin-bottom: 10px | |
} | |
.pure-form .pure-group input { | |
display: block; | |
padding: 10px; | |
margin: 0; | |
border-radius: 0; | |
position: relative; | |
top: -1px | |
} | |
.pure-form .pure-group input:focus { | |
z-index: 2 | |
} | |
.pure-form .pure-group input:first-child { | |
top: 1px; | |
border-radius: 4px 4px 0 0 | |
} | |
.pure-form .pure-group input:last-child { | |
top: -2px; | |
border-radius: 0 0 4px 4px | |
} | |
.pure-form .pure-group button { | |
margin: .35em 0 | |
} | |
.pure-form .pure-input-1 { | |
width: 100% | |
} | |
.pure-form .pure-input-2-3 { | |
width: 66% | |
} | |
.pure-form .pure-input-1-2 { | |
width: 50% | |
} | |
.pure-form .pure-input-1-3 { | |
width: 33% | |
} | |
.pure-form .pure-input-1-4 { | |
width: 25% | |
} | |
.pure-form .pure-help-inline, | |
.pure-form-message-inline { | |
display: inline-block; | |
padding-left: .3em; | |
color: #666; | |
vertical-align: middle; | |
font-size: 90% | |
} | |
.pure-form-message { | |
display: block; | |
color: #666; | |
font-size: 90% | |
} | |
.pure-g { | |
letter-spacing: -.31em; | |
*letter-spacing: normal; | |
*word-spacing: -.43em; | |
text-rendering: optimizespeed | |
} | |
.opera-only:-o-prefocus, | |
.pure-g { | |
word-spacing: -.43em | |
} | |
.pure-u { | |
display: inline-block; | |
*display: inline; | |
zoom: 1; | |
letter-spacing: normal; | |
word-spacing: normal; | |
vertical-align: top; | |
text-rendering: auto | |
} | |
.pure-u-1, | |
.pure-u-1-2, | |
.pure-u-1-3, | |
.pure-u-2-3, | |
.pure-u-1-4, | |
.pure-u-3-4, | |
.pure-u-1-5, | |
.pure-u-2-5, | |
.pure-u-3-5, | |
.pure-u-4-5, | |
.pure-u-1-6, | |
.pure-u-5-6, | |
.pure-u-1-8, | |
.pure-u-3-8, | |
.pure-u-5-8, | |
.pure-u-7-8, | |
.pure-u-1-12, | |
.pure-u-5-12, | |
.pure-u-7-12, | |
.pure-u-11-12, | |
.pure-u-1-24, | |
.pure-u-5-24, | |
.pure-u-7-24, | |
.pure-u-11-24, | |
.pure-u-13-24, | |
.pure-u-17-24, | |
.pure-u-19-24, | |
.pure-u-23-24 { | |
display: inline-block; | |
*display: inline; | |
zoom: 1; | |
letter-spacing: normal; | |
word-spacing: normal; | |
vertical-align: top; | |
text-rendering: auto | |
} | |
.pure-u-1 { | |
width: 100% | |
} | |
.pure-u-1-2 { | |
width: 50% | |
} | |
.pure-u-1-3 { | |
width: 33.33333% | |
} | |
.pure-u-2-3 { | |
width: 66.66666% | |
} | |
.pure-u-1-4 { | |
width: 25% | |
} | |
.pure-u-3-4 { | |
width: 75% | |
} | |
.pure-u-1-5 { | |
width: 20% | |
} | |
.pure-u-2-5 { | |
width: 40% | |
} | |
.pure-u-3-5 { | |
width: 60% | |
} | |
.pure-u-4-5 { | |
width: 80% | |
} | |
.pure-u-1-6 { | |
width: 16.666% | |
} | |
.pure-u-5-6 { | |
width: 83.33% | |
} | |
.pure-u-1-8 { | |
width: 12.5% | |
} | |
.pure-u-3-8 { | |
width: 37.5% | |
} | |
.pure-u-5-8 { | |
width: 62.5% | |
} | |
.pure-u-7-8 { | |
width: 87.5% | |
} | |
.pure-u-1-12 { | |
width: 8.3333% | |
} | |
.pure-u-5-12 { | |
width: 41.6666% | |
} | |
.pure-u-7-12 { | |
width: 58.3333% | |
} | |
.pure-u-11-12 { | |
width: 91.6666% | |
} | |
.pure-u-1-24 { | |
width: 4.1666% | |
} | |
.pure-u-5-24 { | |
width: 20.8333% | |
} | |
.pure-u-7-24 { | |
width: 29.1666% | |
} | |
.pure-u-11-24 { | |
width: 45.8333% | |
} | |
.pure-u-13-24 { | |
width: 54.1666% | |
} | |
.pure-u-17-24 { | |
width: 70.8333% | |
} | |
.pure-u-19-24 { | |
width: 79.1666% | |
} | |
.pure-u-23-24 { | |
width: 95.8333% | |
} | |
.pure-menu ul { | |
position: absolute; | |
visibility: hidden | |
} | |
.pure-menu.pure-menu-open { | |
visibility: visible; | |
z-index: 2; | |
width: 100% | |
} | |
.pure-menu ul { | |
left: -10000px; | |
list-style: none; | |
margin: 0; | |
padding: 0; | |
top: -10000px; | |
z-index: 1 | |
} | |
.pure-menu>ul { | |
position: relative | |
} | |
.pure-menu-open>ul { | |
left: 0; | |
top: 0; | |
visibility: visible | |
} | |
.pure-menu-open>ul:focus { | |
outline: 0 | |
} | |
.pure-menu li { | |
position: relative | |
} | |
.pure-menu a, | |
.pure-menu .pure-menu-heading { | |
display: block; | |
color: inherit; | |
line-height: 1.5em; | |
padding: 5px 20px; | |
text-decoration: none; | |
white-space: nowrap | |
} | |
.pure-menu.pure-menu-horizontal>.pure-menu-heading { | |
display: inline-block; | |
*display: inline; | |
zoom: 1; | |
margin: 0; | |
vertical-align: middle | |
} | |
.pure-menu.pure-menu-horizontal>ul { | |
display: inline-block; | |
*display: inline; | |
zoom: 1; | |
vertical-align: middle; | |
height: 2.4em | |
} | |
.pure-menu li a { | |
padding: 5px 20px | |
} | |
.pure-menu-can-have-children>.pure-menu-label:after { | |
content: '\25B8'; | |
float: right; | |
font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'DejaVu Sans', sans-serif; | |
margin-right: -20px; | |
margin-top: -1px | |
} | |
.pure-menu-can-have-children>.pure-menu-label { | |
padding-right: 30px | |
} | |
.pure-menu-separator { | |
background-color: #dfdfdf; | |
display: block; | |
height: 1px; | |
font-size: 0; | |
margin: 7px 2px; | |
overflow: hidden | |
} | |
.pure-menu-hidden { | |
display: none | |
} | |
.pure-menu-fixed { | |
position: fixed; | |
top: 0; | |
left: 0; | |
width: 100% | |
} | |
.pure-menu-horizontal li { | |
display: inline-block; | |
*display: inline; | |
zoom: 1; | |
vertical-align: middle | |
} | |
.pure-menu-horizontal li li { | |
display: block | |
} | |
.pure-menu-horizontal>.pure-menu-children>.pure-menu-can-have-children>.pure-menu-label:after { | |
content: "\25BE" | |
} | |
.pure-menu-horizontal>.pure-menu-children>.pure-menu-can-have-children>.pure-menu-label { | |
padding-right: 30px | |
} | |
.pure-menu-horizontal li.pure-menu-separator { | |
height: 50%; | |
width: 1px; | |
margin: 0 7px | |
} | |
.pure-menu-horizontal li li.pure-menu-separator { | |
height: 1px; | |
width: auto; | |
margin: 7px 2px | |
} | |
.pure-menu.pure-menu-open, | |
.pure-menu.pure-menu-horizontal li .pure-menu-children { | |
background: #fff; | |
border: 1px solid #b7b7b7 | |
} | |
.pure-menu.pure-menu-horizontal, | |
.pure-menu.pure-menu-horizontal .pure-menu-heading { | |
border: 0 | |
} | |
.pure-menu a { | |
border: 1px solid transparent; | |
border-left: 0; | |
border-right: 0 | |
} | |
.pure-menu a, | |
.pure-menu .pure-menu-can-have-children>li:after { | |
color: #777 | |
} | |
.pure-menu .pure-menu-can-have-children>li:hover:after { | |
color: #fff | |
} | |
.pure-menu .pure-menu-open { | |
background: #dedede | |
} | |
.pure-menu li a:hover, | |
.pure-menu li a:focus { | |
background: #eee | |
} | |
.pure-menu li.pure-menu-disabled a:hover, | |
.pure-menu li.pure-menu-disabled a:focus { | |
background: #fff; | |
color: #bfbfbf | |
} | |
.pure-menu .pure-menu-disabled>a { | |
background-image: none; | |
border-color: transparent; | |
cursor: default | |
} | |
.pure-menu .pure-menu-disabled>a, | |
.pure-menu .pure-menu-can-have-children.pure-menu-disabled>a:after { | |
color: #bfbfbf | |
} | |
.pure-menu .pure-menu-heading { | |
color: #565d64; | |
text-transform: uppercase; | |
font-size: 90%; | |
margin-top: .5em; | |
border-bottom-width: 1px; | |
border-bottom-style: solid; | |
border-bottom-color: #dfdfdf | |
} | |
.pure-menu .pure-menu-selected a { | |
color: #000 | |
} | |
.pure-menu.pure-menu-open.pure-menu-fixed { | |
border: 0; | |
border-bottom: 1px solid #b7b7b7 | |
} | |
.pure-paginator { | |
letter-spacing: -.31em; | |
*letter-spacing: normal; | |
*word-spacing: -.43em; | |
text-rendering: optimizespeed; | |
list-style: none; | |
margin: 0; | |
padding: 0 | |
} | |
.opera-only:-o-prefocus, | |
.pure-paginator { | |
word-spacing: -.43em | |
} | |
.pure-paginator li { | |
display: inline-block; | |
*display: inline; | |
zoom: 1; | |
letter-spacing: normal; | |
word-spacing: normal; | |
vertical-align: top; | |
text-rendering: auto | |
} | |
.pure-paginator .pure-button { | |
border-radius: 0; | |
padding: .8em 1.4em; | |
vertical-align: top; | |
height: 1.1em | |
} | |
.pure-paginator .pure-button:focus, | |
.pure-paginator .pure-button:active { | |
outline-style: none | |
} | |
.pure-paginator .prev, | |
.pure-paginator .next { | |
color: #C0C1C3; | |
text-shadow: 0 -1px 0 rgba(0, 0, 0, .45) | |
} | |
.pure-paginator .prev { | |
border-radius: 2px 0 0 2px | |
} | |
.pure-paginator .next { | |
border-radius: 0 2px 2px 0 | |
} | |
.pure-table { | |
border-collapse: collapse; | |
border-spacing: 0; | |
empty-cells: show; | |
border: 1px solid #cbcbcb | |
} | |
.pure-table caption { | |
color: #000; | |
font: italic 85%/1 arial, sans-serif; | |
padding: 1em 0; | |
text-align: center | |
} | |
.pure-table td, | |
.pure-table th { | |
border-left: 1px solid #cbcbcb; | |
border-width: 0 0 0 1px; | |
font-size: inherit; | |
margin: 0; | |
overflow: visible; | |
padding: 6px 12px | |
} | |
.pure-table td:first-child, | |
.pure-table th:first-child { | |
border-left-width: 0 | |
} | |
.pure-table thead { | |
background: #e0e0e0; | |
color: #000; | |
text-align: left; | |
vertical-align: bottom | |
} | |
.pure-table td { | |
background-color: transparent | |
} | |
.pure-table-odd td { | |
background-color: #f2f2f2 | |
} | |
.pure-table-striped tr:nth-child(2n-1) td { | |
background-color: #f2f2f2 | |
} | |
.pure-table-bordered td { | |
border-bottom: 1px solid #cbcbcb | |
} | |
.pure-table-bordered tbody>tr:last-child td, | |
.pure-table-horizontal tbody>tr:last-child td { | |
border-bottom-width: 0 | |
} | |
.pure-table-horizontal td, | |
.pure-table-horizontal th { | |
border-width: 0 0 1px; | |
border-bottom: 1px solid #cbcbcb | |
} | |
.pure-table-horizontal tbody>tr:last-child td { | |
border-bottom-width: 0 | |
} | |
aside { | |
background: #1f8dd6; | |
padding: 0.6em 1em; | |
color: #fff; | |
} | |
#content { | |
overflow: hidden; | |
width: 100%; | |
height: 100%; | |
position: absolute; | |
top: 0px; | |
left: 0px; | |
} | |
#view table { | |
display: table; | |
} | |
#view p { | |
margin-left: 1em; | |
margin-right: 1em; | |
} | |
#view table td { | |
line-height: 200%; | |
padding-left: 2em; | |
} | |
.large-text { | |
font-size: 120%; | |
} | |
div#indicator { | |
position: absolute; | |
z-index: 99; | |
top: 0px; | |
left: 3px; | |
width: 4px; | |
height: 20px; | |
background-color: #888; | |
border: none; | |
margin: 5px 0 5px 0; | |
} | |
div#overlay { | |
position: absolute; | |
z-index: 99; | |
top: 100px; | |
left: 0px; | |
background-color: rgba(128, 128, 128, 0.2); | |
-webkit-user-select: none; | |
-khtml-user-select: none; | |
-moz-user-select: moz-none; | |
-ms-user-select: none; | |
user-select: none; | |
} | |
div#overlay table { | |
display: table; | |
} | |
div#overlay table tr { | |
border: 1px solid #888; | |
line-height: 200%; | |
text-align: right; | |
color: #333; | |
} | |
tr:nth-child(2n-1).blue td, | |
tr.blue td { | |
background: #1f8dd6; | |
color: #fff; | |
} | |
img.leftcard { | |
position: absolute; | |
top: 0; | |
left: 0; | |
z-index: 2; | |
} | |
img.centercard { | |
position: absolute; | |
top: 0; | |
left: 0; | |
z-index: 1; | |
} | |
img.rightcard { | |
position: absolute; | |
top: 0; | |
left: 0; | |
z-index: 2; | |
} | |
div#stash { | |
visibility: hidden; | |
} | |
div.cover { | |
perspective: 500px; | |
-webkit-perspective: 500px; | |
transform-style: preserve-3d; | |
-webkit-transform-style: preserve-3d; | |
} | |
div.cover div { | |
width: 200px; | |
height:300px; | |
position: absolute; | |
background-color:#eef; | |
top: 0; | |
left: 0; | |
opacity: 0; | |
border: none; | |
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent), to(rgba(255, 255, 255, 0.4))); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment