Ü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