diff --git a/NightShades.widget/index.coffee b/NightShades.widget/index.coffee
index 518c7c2..a83424d 100644
--- a/NightShades.widget/index.coffee
+++ b/NightShades.widget/index.coffee
@@ -1,6 +1,7 @@
# For use with Übersicht ==> http://tracesof.net/uebersicht/
# Coded by Porco-Rosso ==> https://github.com/Porco-Rosso
# from Stereostance.com
+# v1.1.0
# GNU GPL V2
command: ""
@@ -8,19 +9,24 @@ command: ""
refreshFrequency: 300000000
render: (output) -> """
+
-
+
+
+
+
-
- .3 |
- .5 |
- .8 |
-
-
-
-
-
+
+ .3 |
+ .5 |
+ .8 |
+
+
+
◍
+
+
+
"""
style: """
@@ -38,13 +44,24 @@ style: """
top: 0px
left: 0px
z-index: -100
-
+ overflow:hidden
+
+ .blur-layer
+ width: 10000px
+ height: 10000px
+ position: absolute
+ overflow: hidden
+ top: 0px
+ left: 0px
+ z-index: -101
+ -webkit-backdrop-filter: blur(0px)
+
.container
position: absolute
top: 0px
left: 08px
width: 200px
-
+
.table
position: relative
font-size: 12px
@@ -52,23 +69,25 @@ style: """
color: rgba(#FFF, 0.3)
border:1px solid rgba(#FFF, 0.3)
border-radius: 2px
-
+
.level.selected
color: rgba(#000, 0.5)
background: rgba(#FFF, 0.3)
-
+
.shades-icon
height: 10px
-webkit-filter: drop-shadow(0px 0px 2px rgba(#FFF, 0.5))
-
-
+
+ span.bluricon
+ font-size: 20px
+ position: absolute
+ margin-left: 3px
+ margin-bottom: 5px
+ margin-top: -1px
"""
update: (output, domEl) ->
-# $('.shade').css({
-# width: $('.content').width(),
-# height: $('.content').height()
-# });
+# Add/remove Shade
$(domEl).find('.shades-icon').click ->
if $('.shade').hasClass( "transparent" )
opacity = $(".table").find('.level.selected').html();
@@ -88,12 +107,28 @@ update: (output, domEl) ->
$('.shades-icon').css({'-webkit-filter': 'drop-shadow(0px 0px 0px rgba(#FFF, 0.0))'})
$('.shade').addClass( "transparent" )
console.log("shades off")
-
+
+# Change level of shade
$(domEl).find('.level').click ->
$('.level.selected').removeClass('selected')
$(this).addClass('selected')
opacity = $(".table").find('.level.selected').html();
$('.shade').css({'opacity': opacity})
-
+
+# Add/remove Blur
+ $(domEl).find('.bluricon').click ->
+ if $('.blur-layer').hasClass( "blurred" )
+ $('.blur-layer').css({'-webkit-backdrop-filter': 'blur(0px)'})
+ $('.bluricon').html("◍")
+ $('.bluricon').css({'margin-top': '-1px'})
+ $('.blur-layer').removeClass( "blurred" )
+ console.log("unblurred")
+
+ else
+ $('.blur-layer').css({'-webkit-backdrop-filter': 'blur(10px)'})
+ $('.bluricon').html("●")
+ $('.bluricon').css({'margin-top': '0px'})
+ $('.blur-layer').addClass( "blurred" )
+ console.log("blurred")
+
return
-
diff --git a/README.md b/README.md
index 88a766c..1be1e27 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,12 @@
# U-bersicht-Nightshades
This widget alows to quickly apply a dark overlay or 'Shades' to the wallpaper. With a cmd+click on the shades icon you can turn the $wag on and off, and adjust the level as needed. Warning does not block UV rays.
-
For use with Übersicht ==> http://tracesof.net/uebersicht/
![Demo Screenshot](http://i.imgur.com/oDwVZC5.png)
+
+----
+Version 1.1.0 - *Now with blur toggle!*
+
+![Updated Demo](https://cloud.githubusercontent.com/assets/7024527/21076005/e7b67ff6-bf20-11e6-983c-868bc2c5b0c4.png)