Create a gist now

Instantly share code, notes, and snippets.

Übersicht widget with blur filter
command: "echo blurz"
refreshFrequency: 1000000000
style: """
top: 30%
left: 50%
width: 200px
height: 125px
margin-left: -(@width / 2)
overflow: hidden
.content
border-radius: 2px
background: rgba(#fff, 0.5)
color: #152033
font-size: 40px
line-height: @height
font-family: Ubuntu
text-align: center
bg-blur = 10px
.bg-slice
position: absolute
top: -(bg-blur)
left: -(bg-blur)
width: 100% + 2*bg-blur
height: 100% + 2*bg-blur
-webkit-filter: blur(bg-blur)
"""
render: (output) -> """
<canvas class='bg-slice'></canvas>
<div class='content'>#{output}</div>
"""
afterRender: (domEl) ->
uebersicht.makeBgSlice(el) for el in $(domEl).find '.bg-slice'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment