-
Notifications
You must be signed in to change notification settings - Fork 0
/
bookmarklet.css
29 lines (26 loc) · 5.16 KB
/
bookmarklet.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#pinboard-overlay { /* HTML5 display-role reset for older browsers */ }
#pinboard-overlay * { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#pinboard-overlay article, #pinboard-overlay aside, #pinboard-overlay details, #pinboard-overlay summary, #pinboard-overlay figcaption, #pinboard-overlay figure, #pinboard-overlay footer, #pinboard-overlay header, #pinboard-overlay hgroup, #pinboard-overlay menu, #pinboard-overlay nav, #pinboard-overlay section { display: block; font-size: 100%; }
#pinboard-overlay body { line-height: 1; }
#pinboard-overlay ol, #pinboard-overlay ul { list-style: none; }
#pinboard-overlay blockquote, #pinboard-overlay q { quotes: none; }
#pinboard-overlay blockquote:before, #pinboard-overlay blockquote:after, #pinboard-overlay q:before, #pinboard-overlay q:after { content: ''; content: none; }
#pinboard-overlay table { border-collapse: collapse; border-spacing: 0; }
#pinboard-overlay { position: absolute; position: fixed; top: -100%; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); opacity: 0; -webkit-transition: top 325ms ease-out; -webkit-transition-delay: 0; -moz-transition: top 325ms ease-out 0; -o-transition: top 325ms ease-out 0; transition: top 325ms ease-out 0; z-index: 999999 !important; }
#pinboard-overlay.on { opacity: 1; top: 0%; }
#pinboard-overlay.on input[type="submit"], #pinboard-overlay.on #pinboard-close { opacity: 1; right: 0%; }
#pinboard-overlay.on form { opacity: 1; }
#pinboard-overlay.off { opacity: 0; top: 0%; -webkit-transition: opacity 325ms ease-out; -webkit-transition-delay: 0; -moz-transition: opacity 325ms ease-out 0; -o-transition: opacity 325ms ease-out 0; transition: opacity 325ms ease-out 0; }
#pinboard-overlay form { font-size: 1em; width: 100%; height: 100%; margin: 0px; padding: 1em 4.0em 0 1em; opacity: 0; position: absolute; top: 0px; left: 0px; z-index: 1; overflow: auto; border-radius: 5px; background: rgba(157, 163, 149, 0.5); -webkit-transition: opacity 325ms ease-out; -webkit-transition-delay: 325ms; -moz-transition: opacity 325ms ease-out 325ms; -o-transition: opacity 325ms ease-out 325ms; transition: opacity 325ms ease-out 325ms; }
#pinboard-overlay form input[type="submit"], #pinboard-overlay form #pinboard-close { text-align: center; position: absolute; right: -40%; opacity: 0; border-radius: .1em; z-index: 2; cursor: pointer; text-transform: uppercase; color: #fff; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4); -webkit-transition: right 325ms ease-out; -webkit-transition-delay: 325ms; -moz-transition: right 325ms ease-out 325ms; -o-transition: right 325ms ease-out 325ms; transition: right 325ms ease-out 325ms; -webkit-box-shadow: 0px 0px 4px black inset, 0px -2px 0px 1px rgba(255, 255, 255, 0.5) inset, 0px 1px 4px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 4px black inset, 0px -2px 0px 1px rgba(255, 255, 255, 0.5) inset, 0px 1px 4px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 4px black inset, 0px -2px 0px 1px rgba(255, 255, 255, 0.5) inset, 0px 1px 4px 0px rgba(0, 0, 0, 0.5); -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
#pinboard-overlay form input[type="submit"]:hover, #pinboard-overlay form input[type="submit"]:active, #pinboard-overlay form #pinboard-close:hover, #pinboard-overlay form #pinboard-close:active { -webkit-transition: all 150ms ease-out; -webkit-transition-delay: 0; -moz-transition: all 150ms ease-out 0; -o-transition: all 150ms ease-out 0; transition: all 150ms ease-out 0; background: black; }
#pinboard-overlay form #pinboard-close { background: rgba(255, 0, 0, 0.5); font-size: 1.5em; line-height: 1.5em; padding: .5em .5em .6em .5em; margin: 0 .5em; }
#pinboard-overlay form ul { width: 100%; }
#pinboard-overlay form li:last-child { padding-bottom: 0px; }
#pinboard-overlay form li { display: block; text-align: center; padding-bottom: 10px; margin: auto; }
#pinboard-overlay form label { display: none; }
#pinboard-overlay form textarea, #pinboard-overlay form input[type="text"], #pinboard-overlay form input[type="submit"] { -webkit-appearance: none; -webkit-border-radius: 0px; width: 100%; margin: auto; display: block; border-radius: .1em; font-size: 1em; padding: .8em .5em; font-weight: normal; letter-spacing: 1px; box-shadow: 0px 1px 2px -1px white, 0px 0px 3px 0px rgba(0, 0, 0, 0.6) inset; border: 1px solid rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.3); text-shadow: 0px 2px 2px black; }
#pinboard-overlay form textarea:focus, #pinboard-overlay form input[type="text"]:focus, #pinboard-overlay form input[type="submit"]:focus { outline: none; }
#pinboard-overlay form input[type="submit"] { content: "✓"; background: rgba(0, 128, 0, 0.5); position: absolute; top: 2.5em; font-size: 2em; width: auto; margin: .4em; overflow: hidden; width: 1.2em; height: 2.5em; padding: 0; padding-left: .1em; }
html, body { width: 100% !important; height: 100% !important; overflow: hidden !important; }
.hidden { display:none !important; opacity:0; visibility:0;}