Make Appchan filters work in webkit.

Gruntfile.coffee

@@ -162,6 +162,10 @@ module.exports = (grunt) ->
       'box-sizing'
     else
       '-moz-box-sizing'
+    pkg.filter = if type is 'crx'
+      '-webkit-filter'
+    else
+      'filter'
     grunt.log.ok 'pkg.type = %s', type
 
   grunt.registerTask 'build', [

LICENSE

@@ -1,5 +1,5 @@
 /*
-* appchan x - Version 2.0.6 - 2013-05-31
+* appchan x - Version 2.0.6 - 2013-06-01
 *
 * Licensed under the MIT license.
 * https://github.com/zixaphir/appchan-x/blob/master/LICENSE

src/General/css/mascot.css

@@ -16,6 +16,7 @@
 .sidebar-location-right.sidebar-large.mascot-location-sidebar #mascot img,
 .sidebar-location-left.sidebar-large #mascot img {
   right: #{if mascot.center then 25 else 0}px;
+  left: auto;
 }
 .sidebar-location-left.mascot-location-sidebar #mascot img,
 .sidebar-location-right #mascot img {
@@ -26,6 +27,7 @@
 .sidebar-location-left.sidebar-large.mascot-location-sidebar #mascot img,
 .sidebar-location-right.sidebar-large #mascot img {
   left: #{if mascot.center then 25 else 0}px;
+  right: auto;
 }
 #mascot img {
   position: fixed;
@@ -104,5 +106,5 @@
   top: 17px;
 }
 .grayscale-mascots #mascot img {
-  filter: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filters"><feColorMatrix id="color" type="saturate" values="0" /></filter></svg>#filters');
+  <%= filter %>: url('#grayscale');
 }

src/General/css/theme.css

@@ -56,7 +56,7 @@ html {
   border-style: solid;
 }
 .captcha-img img {
-  #{Style.filter theme["Text"], theme["Input Background"]}
+  <%= filter %>: url("#captcha-filter");
 }
 #boardTitle {
   text-shadow:
@@ -388,13 +388,7 @@ a .name {
 .icons-oneechan #fappeTyme {
   background-image: url("data:image/png;base64,#{Icons['oneechan']}");
 #{unless Style.lightTheme then "
-filter: url(\"
+<%= filter %>: url(\"#icons-filter\");" else ""}
-data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='filters' color-interpolation-filters='sRGB'><feColorMatrix values='
--1 0 0 0 1
- 0 -1 0 0 1
- 0 0 -1 0 1
- 0 0 0 1 0' /></filter></svg>#filters
-\");" else ""}
 }
 .alternate-post-colors .replyContainer:not(.hidden):nth-of-type(2n+1) .post {
   background-image: <%= agent %>linear-gradient(#{if Style.lightTheme then "rgba(0,0,0,0.05), rgba(0,0,0,0.05)" else "rgba(255,255,255,0.02), rgba(255,255,255,0.02)"});

src/Theming/Style.coffee

@@ -17,6 +17,8 @@ Style =
     $.addClass doc, 'appchan-x'
     $.addClass doc, g.VIEW
     
+    $.add d.body, Style.svg
+    
     for title, cat of Config.style
       for name, setting of cat
         if setting[2]
@@ -71,6 +73,7 @@ Style =
 
   setup: ->
     theme = Themes[Conf['theme']] or Themes['Yotsuba B']
+    Style.svg = $.el 'div'
     $.extend Style,
       layoutCSS:    $.addStyle Style.layout,       'layout'
       themeCSS:     $.addStyle Style.theme(theme), 'theme'
@@ -116,7 +119,6 @@ Style =
     delete Style.cleanup
 
   addStyle: (theme) ->
-    _conf = Conf
     unless theme
       theme = Themes[_conf['theme']] or Themes['Yotsuba B']
 
@@ -139,15 +141,12 @@ Style =
 
   filter: (text, background) ->
 
-    matrix = (fg, bg) -> "
+    matrix = (fg, bg) -> "#{bg.r} #{-fg.r} 0 0 #{fg.r} #{bg.g} #{-fg.g} 0 0 #{fg.g} #{bg.b} #{-fg.b} 0 0 #{fg.b}"
- #{bg.r} #{-fg.r} 0 0 #{fg.r}
- #{bg.g} #{-fg.g} 0 0 #{fg.g}
- #{bg.b} #{-fg.b} 0 0 #{fg.b}
-"
 
     fgHex = Style.colorToHex(text)
     bgHex = Style.colorToHex(background)
-    string = matrix {
+    
+    matrix {
       r: parseInt(fgHex.substr(0, 2), 16) / 255
       g: parseInt(fgHex.substr(2, 2), 16) / 255
       b: parseInt(fgHex.substr(4, 2), 16) / 255
@@ -157,12 +156,10 @@ Style =
       b: parseInt(bgHex.substr(4, 2), 16) / 255
     }
 
-    return """filter: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='filters' color-interpolation-filters='sRGB'><feColorMatrix values='#{string} 0 0 0 1 0' /></filter></svg>#filters");"""
-
   layout: """<%= grunt.file.read('src/General/css/layout.css') %>"""
   
   dynamic: ->
-    _conf   = Conf
+    _conf = Conf
 
     sidebarLocation = if _conf["Sidebar Location"] is "left"
       ["left",  "right"]
@@ -185,6 +182,12 @@ Style =
 
     Style.lightTheme = bgColor.isLight()
 
+    Style.svg.innerHTML = """
+<svg xmlns='http://www.w3.org/2000/svg' height=0><filter id='captcha-filter' color-interpolation-filters='sRGB'><feColorMatrix values='#{Style.filter theme["Text"], theme["Input Background"]} 0 0 0 1 0' /></filter></svg>
+<svg xmlns='http://www.w3.org/2000/svg' height=0><filter id="grayscale"><feColorMatrix id="color" type="saturate" values="0" /></filter></svg>
+<svg xmlns='http://www.w3.org/2000/svg' height=0><filter id="icons-filter" color-interpolation-filters='sRGB'><feColorMatrix values='-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0' /></filter></svg>
+    """
+
     """<%= grunt.file.read('src/General/css/theme.css') %>""" + <%= grunt.file.read('src/General/css/themeoptions.css') %>
 
   iconPositions: ->