Skip to content

Instantly share code, notes, and snippets.

@eramdam
Created October 2, 2016 17:11
Show Gist options
  • Save eramdam/46d44432f2fe0a5dad5f63876bd8d7ec to your computer and use it in GitHub Desktop.
Save eramdam/46d44432f2fe0a5dad5f63876bd8d7ec to your computer and use it in GitHub Desktop.
command: (callback) => {
const apple = require('./lib/applescript.js');
console.log(apple);
callback(null, 'apple');
},
render: () => `
<div id="player">
<header>
<span class="title"></span>
<span class="meta"></span>
</header>
<img src="http://127.0.0.1:8080/3.png" alt="">
</div>
`,
update: (output, domEl) => {
console.log('update', output);
},
afterRender: (domEl) => {
// console.log(domEl);
},
style: `
pointer-events: all;
* {
font-family: -apple-system;
color: black;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
}
body {
background: white;
position: relative;
width: 1000px;
height: 1000px;
}
#player {
position: absolute;
left: 200px;
top: 50px;
width: 230px;
border-radius: 5px;
font-size: 0;
box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 10px 50px rgba(0,0,0,.7);
}
#player:hover header {
opacity: 1;
}
#player img {
position: relative;
width: 230px;
border-radius: 4px;
z-index: 0;
}
header {
position: absolute;
width: 100%;
height: 48px;
top: 0;
display: block;
/*background: rgba(255, 255, 255, 0.8);*/
/*background-image: linear-gradient(#f2f2f2, #eeeeee);*/
background-image: linear-gradient(hsla(0, 0%, 94%, .78), hsla(0, 0%, 93%, .78));
-webkit-backdrop-filter: blur(20px);
box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 1px rgba(0,0,0,.2);
z-index: 10;
border-radius: 4px 4px 0 0;
display: flex;
flex-direction: column;
text-align: center;
padding: 0 10px;
transition: opacity 300ms ease;
opacity: 0;
}
.title,
.meta {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.title {
font-size: 13px;
color: #1D1D1D;
margin-top: 8px;
}
.meta {
font-size: 11px;
margin-top: 2px;
color: #8C8C8C;
}
.control_button {
position:absolute;
top:80px;
width:40px;
height:40px;
opacity:1;
background-color:black;
border-radius:6px;
border-color:white;
border-width:2px;
border-style:solid;
}
.control_button:hover {
opacity:0.6;
}
.bck_button {
left:40px;
}
.fwd_button {
left:120px;
}
.arrow {
margin-top:7px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
/* needed to make arrow smooth */
-webkit-transform: rotate(0.01deg);
transform: rotate(0.01deg);
}
.left_arrow {
margin-left:9px;
border-right:19px solid white;
}
.right_arrow {
margin-left:12px;
border-left:19px solid white;
}
`
module.exports = 'foo';
.
├── covers
│   ├── 1.png
│   ├── 10.png
│   ├── 11.png
│   ├── 12.png
│   ├── 13.png
│   ├── 14.png
│   ├── 15.png
│   ├── 2.png
│   ├── 3.png
│   ├── 4.png
│   ├── 5.png
│   ├── 6.png
│   ├── 7.png
│   ├── 8.png
│   └── 9.png
├── index.js
├── lib
│   ├── applescript.js
│   └── swinsian.scpt
├── missing.png
└── style.css
2 directories, 20 files
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment