oci/zeronet
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

rev330, Early worker exit on file download bugfix, Reload only on py file changes, Modify wrapper render to allow content edit for plugins, File send action without sending header, Rename Sidebar to Fixbutton (it will be separate plugin), Fixbutton font and layout fix on OSX/Safari, Notifications fix on OSX/Safari

Browse source
This commit is contained in:
HelloZeroNet 2015-07-31 23:34:53 +02:00
parent d331eea384
commit cd04abe521
12 changed files with 164 additions and 134 deletions

8
plugins/disabled-UiPassword/login.html
View file

@ -9,7 +9,7 @@ body {
background-color: #323C4D; font-family: "Segoe UI", Helvetica, Arial; font-weight: lighter; background-color: #323C4D; font-family: "Segoe UI", Helvetica, Arial; font-weight: lighter;
font-size: 22px; color: #333; letter-spacing: 1px; color: white; overflow: hidden; font-size: 22px; color: #333; letter-spacing: 1px; color: white; overflow: hidden;
} }
.login { left: 50%; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%); width: 100%; max-width: 370px; text-align: center; } .login { left: 50%; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); width: 100%; max-width: 370px; text-align: center; }
*:focus { outline: 0; } *:focus { outline: 0; }
input[type=text], input[type=password] { input[type=text], input[type=password] {
@ -66,7 +66,7 @@ label { vertical-align: -1px; color: #9EA5B3; transition: all 0.3s; }
<input type="password" name="password" placeholder="Password" required/> <input type="password" name="password" placeholder="Password" required/>
<input type="checkbox" name="keep" id="keep"><label for="keep">Keep me logged in</label> <input type="checkbox" name="keep" id="keep"><label for="keep">Keep me logged in</label>
<div style="clear: both"></div> <div style="clear: both"></div>
<a href="Login" class="button" onclick="return submit()" id="login_button"><span>Log In</span></a> <a href="#" class="button" onclick="return submit()" id="login_button"><span>Log In</span></a>
<input type="submit" id="login_form_submit"/> <input type="submit" id="login_form_submit"/>
</form> </form>
</div> </div>
@ -86,10 +86,10 @@ function submit() {
if (form.checkValidity()) { if (form.checkValidity()) {
document.getElementById("login_button").className = "button login-anim" document.getElementById("login_button").className = "button login-anim"
setTimeout(function () { setTimeout(function () {
document.getElementById("login_form_submit").click() form.submit()
}, 1000) }, 1000)
} else { } else {
document.getElementById("login_form_submit").click() form.submit()
} }
return false return false
} }

2
src/Config.py
View file

@ -8,7 +8,7 @@ class Config(object):
def __init__(self, argv): def __init__(self, argv):
self.version = "0.3.1" self.version = "0.3.1"
self.rev = 324 self.rev = 330
self.argv = argv self.argv = argv
self.action = None self.action = None
self.createParser() self.createParser()

6
src/Debug/DebugReloader.py
View file

@ -37,7 +37,11 @@ class DebugReloader:
print "File system watcher failed: %s (on linux pyinotify not gevent compatible yet :( )" % err print "File system watcher failed: %s (on linux pyinotify not gevent compatible yet :( )" % err
def changed(self, evt): def changed(self, evt):
if not evt.path or "%s/" % config.data_dir in evt.path or evt.path.endswith("pyc") or time.time() - self.last_chaged < 1: if (
not evt.path or "%s/" % config.data_dir in evt.path or
not evt.path.endswith("py") or
time.time() - self.last_chaged < 1
):
return False # Ignore *.pyc changes and no reload within 1 sec return False # Ignore *.pyc changes and no reload within 1 sec
time.sleep(0.1) # Wait for lock release time.sleep(0.1) # Wait for lock release
self.callback() self.callback()

14
src/Ui/UiRequest.py
View file

@ -189,15 +189,16 @@ class UiRequest(object):
if not site: if not site:
return False return False
return self.renderWrapper(site, path, inner_path, title, extra_headers)
self.sendHeader(extra_headers=extra_headers[:])
return iter([self.renderWrapper(site, path, inner_path, title, extra_headers)])
# Dont know why wrapping with iter necessary, but without it around 100x slower
else: # Bad url else: # Bad url
return False return False
def renderWrapper(self, site, path, inner_path, title, extra_headers): def renderWrapper(self, site, path, inner_path, title, extra_headers):
self.sendHeader(extra_headers=extra_headers[:])
file_inner_path = inner_path file_inner_path = inner_path
if not file_inner_path: if not file_inner_path:
file_inner_path = "index.html" # If inner path defaults to index.html file_inner_path = "index.html" # If inner path defaults to index.html
@ -236,7 +237,7 @@ class UiRequest(object):
if content.get("viewport"): if content.get("viewport"):
meta_tags += '<meta name="viewport" id="viewport" content="%s">' % cgi.escape(content["viewport"], True) meta_tags += '<meta name="viewport" id="viewport" content="%s">' % cgi.escape(content["viewport"], True)
yield self.render( return self.render(
"src/Ui/template/wrapper.html", "src/Ui/template/wrapper.html",
server_url=server_url, server_url=server_url,
inner_path=inner_path, inner_path=inner_path,
@ -326,14 +327,15 @@ class UiRequest(object):
return self.error400() return self.error400()
# Stream a file to client # Stream a file to client
def actionFile(self, file_path, block_size=64 * 1024): def actionFile(self, file_path, block_size=64 * 1024, send_header=True):
if os.path.isfile(file_path): if os.path.isfile(file_path):
# Try to figure out content type by extension # Try to figure out content type by extension
content_type = self.getContentType(file_path) content_type = self.getContentType(file_path)
# TODO: Dont allow external access: extra_headers= # TODO: Dont allow external access: extra_headers=
# [("Content-Security-Policy", "default-src 'unsafe-inline' data: http://localhost:43110 ws://localhost:43110")] # [("Content-Security-Policy", "default-src 'unsafe-inline' data: http://localhost:43110 ws://localhost:43110")]
self.sendHeader(content_type=content_type) if send_header:
self.sendHeader(content_type=content_type)
if self.env["REQUEST_METHOD"] != "OPTIONS": if self.env["REQUEST_METHOD"] != "OPTIONS":
file = open(file_path, "rb") file = open(file_path, "rb")
while 1: while 1:

27
src/Ui/media/Sidebar.coffee → src/Ui/media/Fixbutton.coffee
View file

@ -1,33 +1,32 @@
class Sidebar class Fixbutton
constructor: -> constructor: ->
@initFixbutton() @dragging = false
$(".fixbutton-bg").on "mouseover", =>
$(".fixbutton-bg").stop().animate({"scale": 0.7}, 800, "easeOutElastic")
initFixbutton: ->
$(".fixbutton-bg").on "mouseover", ->
$(@).stop().animate({"scale": 0.7}, 800, "easeOutElastic")
$(".fixbutton-burger").stop().animate({"opacity": 1.5, "left": 0}, 800, "easeOutElastic") $(".fixbutton-burger").stop().animate({"opacity": 1.5, "left": 0}, 800, "easeOutElastic")
$(".fixbutton-text").stop().animate({"opacity": 0, "left": 20}, 300, "easeOutCubic") $(".fixbutton-text").stop().animate({"opacity": 0, "left": 20}, 300, "easeOutCubic")
$(".fixbutton-bg").on "mouseout", -> $(".fixbutton-bg").on "mouseout", =>
$(@).stop().animate({"scale": 0.6}, 300, "easeOutCubic") if $(".fixbutton").hasClass("dragging")
return true
$(".fixbutton-bg").stop().animate({"scale": 0.6}, 300, "easeOutCubic")
$(".fixbutton-burger").stop().animate({"opacity": 0, "left": -20}, 300, "easeOutCubic") $(".fixbutton-burger").stop().animate({"opacity": 0, "left": -20}, 300, "easeOutCubic")
$(".fixbutton-text").stop().animate({"opacity": 1, "left": 0}, 300, "easeOutBack") $(".fixbutton-text").stop().animate({"opacity": 1, "left": 0}, 300, "easeOutBack")
###$(".fixbutton-bg").on "click", -> ###$(".fixbutton-bg").on "click", ->
return false return false
### ###
$(".fixbutton-bg").on "mousedown", -> $(".fixbutton-bg").on "mousedown", =>
# $(".fixbutton-burger").stop().animate({"scale": 0.7, "left": 0}, 300, "easeOutCubic") # $(".fixbutton-burger").stop().animate({"scale": 0.7, "left": 0}, 300, "easeOutCubic")
#$("#inner-iframe").toggleClass("back") #$("#inner-iframe").toggleClass("back")
#$(".wrapper-iframe").stop().animate({"scale": 0.9}, 600, "easeOutCubic") #$(".wrapper-iframe").stop().animate({"scale": 0.9}, 600, "easeOutCubic")
#$("body").addClass("back") #$("body").addClass("back")
$(".fixbutton-bg").on "mouseup", -> $(".fixbutton-bg").on "mouseup", =>
# $(".fixbutton-burger").stop().animate({"scale": 1, "left": 0}, 600, "easeOutElastic") # $(".fixbutton-burger").stop().animate({"scale": 1, "left": 0}, 600, "easeOutElastic")
window.Sidebar = Sidebar
window.Fixbutton = Fixbutton

16
src/Ui/media/Wrapper.coffee
View file

@ -4,7 +4,7 @@ class Wrapper
@loading = new Loading() @loading = new Loading()
@notifications = new Notifications($(".notifications")) @notifications = new Notifications($(".notifications"))
@sidebar = new Sidebar() @fixbutton = new Fixbutton()
window.addEventListener("message", @onMessageInner, false) window.addEventListener("message", @onMessageInner, false)
@inner = document.getElementById("inner-iframe").contentWindow @inner = document.getElementById("inner-iframe").contentWindow
@ -146,10 +146,10 @@ class Wrapper
message.params = @toHtmlSafe(message.params) # Escape html message.params = @toHtmlSafe(message.params) # Escape html
if message.params[1] then type = message.params[1] else type = "text" if message.params[1] then type = message.params[1] else type = "text"
caption = "OK" caption = "OK"
@displayPrompt message.params[0], type, caption, (res) => @displayPrompt message.params[0], type, caption, (res) =>
@sendInner {"cmd": "response", "to": message.id, "result": res} # Response to confirm @sendInner {"cmd": "response", "to": message.id, "result": res} # Response to confirm
actionSetViewport: (message) -> actionSetViewport: (message) ->
@ -171,7 +171,7 @@ class Wrapper
actionGetLocalStorage: (message) -> actionGetLocalStorage: (message) ->
$.when(@event_site_info).done => $.when(@event_site_info).done =>
data = localStorage.getItem "site.#{@site_info.address}" data = localStorage.getItem "site.#{@site_info.address}"
if data then data = JSON.parse(data) if data then data = JSON.parse(data)
@sendInner {"cmd": "response", "to": message.id, "result": data} @sendInner {"cmd": "response", "to": message.id, "result": data}
@ -197,7 +197,7 @@ class Wrapper
if not @site_info then @reloadSiteInfo() if not @site_info then @reloadSiteInfo()
), 2000 ), 2000
if @ws_error if @ws_error
@notifications.add("connection", "done", "Connection with <b>UiServer Websocket</b> recovered.", 6000) @notifications.add("connection", "done", "Connection with <b>UiServer Websocket</b> recovered.", 6000)
@ws_error = null @ws_error = null
@ -236,7 +236,7 @@ class Wrapper
params = {"file_status": window.file_inner_path} # Query the current required file status params = {"file_status": window.file_inner_path} # Query the current required file status
else else
params = {} params = {}
@ws.cmd "siteInfo", params, (site_info) => @ws.cmd "siteInfo", params, (site_info) =>
@address = site_info.address @address = site_info.address
@setSiteInfo site_info @setSiteInfo site_info
@ -272,7 +272,7 @@ class Wrapper
if not $(".loadingscreen").length # Loading screen already removed (loaded +2sec) if not $(".loadingscreen").length # Loading screen already removed (loaded +2sec)
@notifications.add("modified", "info", "New version of this page has just released.<br>Reload to see the modified content.") @notifications.add("modified", "info", "New version of this page has just released.<br>Reload to see the modified content.")
# File failed downloading # File failed downloading
else if site_info.event[0] == "file_failed" else if site_info.event[0] == "file_failed"
@site_error = site_info.event[1] @site_error = site_info.event[1]
if site_info.settings.size > site_info.size_limit*1024*1024 # Site size too large and not displaying it yet if site_info.settings.size > site_info.size_limit*1024*1024 # Site size too large and not displaying it yet
@loading.showTooLarge(site_info) @loading.showTooLarge(site_info)
@ -280,7 +280,7 @@ class Wrapper
else else
@loading.printLine("#{site_info.event[1]} download failed", "error") @loading.printLine("#{site_info.event[1]} download failed", "error")
# New peers found # New peers found
else if site_info.event[0] == "peers_added" else if site_info.event[0] == "peers_added"
@loading.printLine("Peers found: #{site_info.peers}") @loading.printLine("Peers found: #{site_info.peers}")
if @loading.screen_visible and not @site_info # First site info display current peers if @loading.screen_visible and not @site_info # First site info display current peers

32
src/Ui/media/Wrapper.css
View file

@ -4,7 +4,7 @@ a { color: black }
.template { display: none !important } .template { display: none !important }
#inner-iframe { width: 100%; height: 100%; position: absolute; border: 0px; transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.8s ease-in-out } #inner-iframe { width: 100%; height: 100%; position: absolute; border: 0px } /*; transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.8s ease-in-out*/
#inner-iframe.back { transform: scale(0.95) translate(-300px, 0px); opacity: 0.4 } #inner-iframe.back { transform: scale(0.95) translate(-300px, 0px); opacity: 0.4 }
.button { padding: 5px 10px; margin-left: 10px; background-color: #FFF85F; border-bottom: 2px solid #CDBD1E; border-radius: 2px; text-decoration: none; transition: all 0.5s; } .button { padding: 5px 10px; margin-left: 10px; background-color: #FFF85F; border-bottom: 2px solid #CDBD1E; border-radius: 2px; text-decoration: none; transition: all 0.5s; }
@ -17,16 +17,16 @@ a { color: black }
/* Fixbutton */ /* Fixbutton */
.fixbutton { .fixbutton {
position: absolute; right: 35px; top: 15px; width: 40px; z-index: 999; position: absolute; right: 35px; top: 15px; width: 40px; z-index: 999;
text-align: center; color: white; font-family: Consolas; font-size: 25px; line-height: 40px; text-align: center; color: white; font-family: Consolas, Menlo, monospace; font-size: 25px;
} }
.fixbutton-bg { .fixbutton-bg {
border-radius: 80px; background-color: rgba(180, 180, 180, 0.5); cursor: pointer; border-radius: 80px; background-color: rgba(180, 180, 180, 0.5); cursor: pointer;
display: block; width: 80px; height: 80px; transition: background-color 0.2s, box-shadow 0.5s; transform: scale(0.6); margin-left: -20px; margin-top: -20px; /* 2x size to prevent blur on anim */ display: block; width: 80px; height: 80px; transition: background-color 0.2s, box-shadow 0.5s; transform: scale(0.6); margin-left: -20px; margin-top: -20px; /* 2x size to prevent blur on anim */
/*box-shadow: inset 105px 260px 0px -200px rgba(0,0,0,0.1);*/ /* box-shadow: inset -75px 183px 0px -200px rgba(0,0,0,0.1); */ /*box-shadow: inset 105px 260px 0px -200px rgba(0,0,0,0.1);*/ /* box-shadow: inset -75px 183px 0px -200px rgba(0,0,0,0.1); */
} }
.fixbutton-text { pointer-events: none; position: absolute; z-index: 999; width: 40px; backface-visibility: hidden; perspective: 1000px } .fixbutton-text { pointer-events: none; position: absolute; z-index: 999; width: 40px; backface-visibility: hidden; perspective: 1000px; line-height: 0px; padding-top: 20px }
.fixbutton-burger { pointer-events: none; position: absolute; z-index: 999; width: 40px; opacity: 0; left: -20px; font-size: 48px; line-height: 32px } .fixbutton-burger { pointer-events: none; position: absolute; z-index: 999; width: 40px; opacity: 0; left: -20px; font-size: 48px; line-height: 32px }
.fixbutton-bg:hover { background-color: #AF3BFF } .fixbutton-bg:hover { background-color: #AF3BFF }
.fixbutton-bg:active { background-color: #9E2FEA; top: 1px; transition: none } .fixbutton-bg:active { background-color: #9E2FEA; top: 1px; transition: none }
@ -35,16 +35,16 @@ a { color: black }
/* Notification */ /* Notification */
.notifications { position: absolute; top: 0px; right: 80px; display: inline-block; z-index: 999; white-space: nowrap } .notifications { position: absolute; top: 0px; right: 80px; display: inline-block; z-index: 999; white-space: nowrap }
.notification { .notification {
position: relative; float: right; clear: both; margin: 10px; box-sizing: border-box; overflow: hidden; backface-visibility: hidden; perspective: 1000px; padding-bottom: 5px; position: relative; float: right; clear: both; margin: 10px; box-sizing: border-box; overflow: hidden; backface-visibility: hidden; perspective: 1000px; padding-bottom: 5px;
color: #4F4F4F; font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; /*border: 1px solid rgba(210, 206, 205, 0.2)*/ color: #4F4F4F; font-family: 'Lucida Grande', 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; /*border: 1px solid rgba(210, 206, 205, 0.2)*/
} }
.notification-icon { .notification-icon {
display: block; width: 50px; height: 50px; position: absolute; float: left; z-index: 1; display: block; width: 50px; height: 50px; position: absolute; float: left; z-index: 1;
text-align: center; background-color: #e74c3c; line-height: 45px; vertical-align: bottom; font-size: 40px; color: white; text-align: center; background-color: #e74c3c; line-height: 45px; vertical-align: bottom; font-size: 40px; color: white;
} }
.notification .body { .notification .body {
max-width: 420px; padding-left: 14px; padding-right: 60px; height: 40px; vertical-align: middle; display: table; max-width: 560px; padding-left: 14px; padding-right: 60px; height: 40px; vertical-align: middle; display: table;
background-color: white; left: 50px; top: 0px; position: relative; padding-top: 5px; padding-bottom: 5px; background-color: white; left: 50px; top: 0px; position: relative; padding-top: 5px; padding-bottom: 5px;
} }
.notification.long .body { padding-top: 10px; padding-bottom: 10px } .notification.long .body { padding-top: 10px; padding-bottom: 10px }
@ -60,7 +60,7 @@ a { color: black }
/* Notification select */ /* Notification select */
.notification .select { .notification .select {
display: block; padding: 10px; margin-right: -32px; text-decoration: none; border-left: 3px solid #EEE; display: block; padding: 10px; margin-right: -32px; text-decoration: none; border-left: 3px solid #EEE;
margin-top: 1px; transition: all 0.3s; color: #666 margin-top: 1px; transition: all 0.3s; color: #666
} }
.notification .select:hover, .notification .select.active { background-color: #007AFF; border-left: 3px solid #5D68FF; color: white; transition: none } .notification .select:hover, .notification .select.active { background-color: #007AFF; border-left: 3px solid #5D68FF; color: white; transition: none }
@ -90,9 +90,9 @@ a { color: black }
/* Console */ /* Console */
.console { line-height: 24px; font-family: monospace; font-size: 14px; color: #ADADAD; text-transform: uppercase; opacity: 0; transform: translateY(-20px); } .console { line-height: 24px; font-family: monospace; font-size: 14px; color: #ADADAD; text-transform: uppercase; opacity: 0; transform: translateY(-20px); }
.console-line:last-child { color: #6C6767 } .console-line:last-child { color: #6C6767 }
.console .cursor { .console .cursor {
background-color: #999; color: #999; animation: pulse 1.5s infinite ease-in-out; margin-right: -9px; background-color: #999; color: #999; animation: pulse 1.5s infinite ease-in-out; margin-right: -9px;
display: inline-block; width: 9px; height: 19px; vertical-align: -4px; display: inline-block; width: 9px; height: 19px; vertical-align: -4px;
} }
.console .console-error { color: #e74c3c; font-weight: bold; animation: pulse 2s infinite linear } .console .console-error { color: #e74c3c; font-weight: bold; animation: pulse 2s infinite linear }
.console .console-warning { color: #8e44ad; } .console .console-warning { color: #8e44ad; }
@ -120,14 +120,14 @@ a { color: black }
.progressbar { background: #26C281; position: fixed; z-index: 100; top: 0; left: 0; width: 0%; height: 2px; transition: width 0.5s, opacity 1s; display: none } .progressbar { background: #26C281; position: fixed; z-index: 100; top: 0; left: 0; width: 0%; height: 2px; transition: width 0.5s, opacity 1s; display: none }
.progressbar .peg { .progressbar .peg {
display: block; position: absolute; right: 0px; width: 100px; height: 100%; display: block; position: absolute; right: 0px; width: 100px; height: 100%;
box-shadow: 0 0 10px #AF3BFF, 0 0 5px #29d; opacity: 1.0; transform: rotate(3deg) translate(0px, -4px); box-shadow: 0 0 10px #AF3BFF, 0 0 5px #29d; opacity: 1.0; transform: rotate(3deg) translate(0px, -4px);
} }
/* Icons */ /* Icons */
.icon-profile { font-size: 6px; top: 0em; border-radius: 0.7em 0.7em 0 0; background: #FFFFFF; width: 1.5em; height: 0.7em; position: relative; display: inline-block; margin-right: 4px } .icon-profile { font-size: 6px; top: 0em; border-radius: 0.7em 0.7em 0 0; background: #FFFFFF; width: 1.5em; height: 0.7em; position: relative; display: inline-block; margin-right: 4px }
.icon-profile::before { position: absolute; content: ""; top: -1em; left: 0.38em; width: 0.8em; height: 0.85em; border-radius: 50%; background: #FFFFFF } .icon-profile::before { position: absolute; content: ""; top: -1em; left: 0.38em; width: 0.8em; height: 0.85em; border-radius: 50%; background: #FFFFFF }
/* Animations */ /* Animations */

32
src/Ui/media/all.css
View file

@ -9,7 +9,7 @@ a { color: black }
.template { display: none !important } .template { display: none !important }
#inner-iframe { width: 100%; height: 100%; position: absolute; border: 0px; -webkit-transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.8s ease-in-out ; -moz-transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.8s ease-in-out ; -o-transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.8s ease-in-out ; -ms-transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.8s ease-in-out ; transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.8s ease-in-out } #inner-iframe { width: 100%; height: 100%; position: absolute; border: 0px } /*; transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.8s ease-in-out*/
#inner-iframe.back { -webkit-transform: scale(0.95) translate(-300px, 0px); -moz-transform: scale(0.95) translate(-300px, 0px); -o-transform: scale(0.95) translate(-300px, 0px); -ms-transform: scale(0.95) translate(-300px, 0px); transform: scale(0.95) translate(-300px, 0px) ; opacity: 0.4 } #inner-iframe.back { -webkit-transform: scale(0.95) translate(-300px, 0px); -moz-transform: scale(0.95) translate(-300px, 0px); -o-transform: scale(0.95) translate(-300px, 0px); -ms-transform: scale(0.95) translate(-300px, 0px); transform: scale(0.95) translate(-300px, 0px) ; opacity: 0.4 }
.button { padding: 5px 10px; margin-left: 10px; background-color: #FFF85F; border-bottom: 2px solid #CDBD1E; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; border-radius: 2px ; text-decoration: none; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s ; } .button { padding: 5px 10px; margin-left: 10px; background-color: #FFF85F; border-bottom: 2px solid #CDBD1E; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; border-radius: 2px ; text-decoration: none; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s ; }
@ -22,16 +22,16 @@ a { color: black }
/* Fixbutton */ /* Fixbutton */
.fixbutton { .fixbutton {
position: absolute; right: 35px; top: 15px; width: 40px; z-index: 999; position: absolute; right: 35px; top: 15px; width: 40px; z-index: 999;
text-align: center; color: white; font-family: Consolas; font-size: 25px; line-height: 40px; text-align: center; color: white; font-family: Consolas, Menlo, monospace; font-size: 25px;
} }
.fixbutton-bg { .fixbutton-bg {
-webkit-border-radius: 80px; -moz-border-radius: 80px; -o-border-radius: 80px; -ms-border-radius: 80px; border-radius: 80px ; background-color: rgba(180, 180, 180, 0.5); cursor: pointer; -webkit-border-radius: 80px; -moz-border-radius: 80px; -o-border-radius: 80px; -ms-border-radius: 80px; border-radius: 80px ; background-color: rgba(180, 180, 180, 0.5); cursor: pointer;
display: block; width: 80px; height: 80px; -webkit-transition: background-color 0.2s, box-shadow 0.5s; -moz-transition: background-color 0.2s, box-shadow 0.5s; -o-transition: background-color 0.2s, box-shadow 0.5s; -ms-transition: background-color 0.2s, box-shadow 0.5s; transition: background-color 0.2s, box-shadow 0.5s ; -webkit-transform: scale(0.6); -moz-transform: scale(0.6); -o-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6) ; margin-left: -20px; margin-top: -20px; /* 2x size to prevent blur on anim */ display: block; width: 80px; height: 80px; -webkit-transition: background-color 0.2s, box-shadow 0.5s; -moz-transition: background-color 0.2s, box-shadow 0.5s; -o-transition: background-color 0.2s, box-shadow 0.5s; -ms-transition: background-color 0.2s, box-shadow 0.5s; transition: background-color 0.2s, box-shadow 0.5s ; -webkit-transform: scale(0.6); -moz-transform: scale(0.6); -o-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6) ; margin-left: -20px; margin-top: -20px; /* 2x size to prevent blur on anim */
/*box-shadow: inset 105px 260px 0px -200px rgba(0,0,0,0.1);*/ /* -webkit-box-shadow: inset -75px 183px 0px -200px rgba(0,0,0,0.1); -moz-box-shadow: inset -75px 183px 0px -200px rgba(0,0,0,0.1); -o-box-shadow: inset -75px 183px 0px -200px rgba(0,0,0,0.1); -ms-box-shadow: inset -75px 183px 0px -200px rgba(0,0,0,0.1); box-shadow: inset -75px 183px 0px -200px rgba(0,0,0,0.1) ; */ /*box-shadow: inset 105px 260px 0px -200px rgba(0,0,0,0.1);*/ /* -webkit-box-shadow: inset -75px 183px 0px -200px rgba(0,0,0,0.1); -moz-box-shadow: inset -75px 183px 0px -200px rgba(0,0,0,0.1); -o-box-shadow: inset -75px 183px 0px -200px rgba(0,0,0,0.1); -ms-box-shadow: inset -75px 183px 0px -200px rgba(0,0,0,0.1); box-shadow: inset -75px 183px 0px -200px rgba(0,0,0,0.1) ; */
} }
.fixbutton-text { pointer-events: none; position: absolute; z-index: 999; width: 40px; backface-visibility: hidden; -webkit-perspective: 1000px ; -moz-perspective: 1000px ; -o-perspective: 1000px ; -ms-perspective: 1000px ; perspective: 1000px } .fixbutton-text { pointer-events: none; position: absolute; z-index: 999; width: 40px; backface-visibility: hidden; -webkit-perspective: 1000px; -moz-perspective: 1000px; -o-perspective: 1000px; -ms-perspective: 1000px; perspective: 1000px ; line-height: 0px; padding-top: 20px }
.fixbutton-burger { pointer-events: none; position: absolute; z-index: 999; width: 40px; opacity: 0; left: -20px; font-size: 48px; line-height: 32px } .fixbutton-burger { pointer-events: none; position: absolute; z-index: 999; width: 40px; opacity: 0; left: -20px; font-size: 48px; line-height: 32px }
.fixbutton-bg:hover { background-color: #AF3BFF } .fixbutton-bg:hover { background-color: #AF3BFF }
.fixbutton-bg:active { background-color: #9E2FEA; top: 1px; -webkit-transition: none ; -moz-transition: none ; -o-transition: none ; -ms-transition: none ; transition: none } .fixbutton-bg:active { background-color: #9E2FEA; top: 1px; -webkit-transition: none ; -moz-transition: none ; -o-transition: none ; -ms-transition: none ; transition: none }
@ -40,16 +40,16 @@ a { color: black }
/* Notification */ /* Notification */
.notifications { position: absolute; top: 0px; right: 80px; display: inline-block; z-index: 999; white-space: nowrap } .notifications { position: absolute; top: 0px; right: 80px; display: inline-block; z-index: 999; white-space: nowrap }
.notification { .notification {
position: relative; float: right; clear: both; margin: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box ; overflow: hidden; backface-visibility: hidden; -webkit-perspective: 1000px; -moz-perspective: 1000px; -o-perspective: 1000px; -ms-perspective: 1000px; perspective: 1000px ; padding-bottom: 5px; position: relative; float: right; clear: both; margin: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box ; overflow: hidden; backface-visibility: hidden; -webkit-perspective: 1000px; -moz-perspective: 1000px; -o-perspective: 1000px; -ms-perspective: 1000px; perspective: 1000px ; padding-bottom: 5px;
color: #4F4F4F; font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; /*border: 1px solid rgba(210, 206, 205, 0.2)*/ color: #4F4F4F; font-family: 'Lucida Grande', 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; /*border: 1px solid rgba(210, 206, 205, 0.2)*/
} }
.notification-icon { .notification-icon {
display: block; width: 50px; height: 50px; position: absolute; float: left; z-index: 1; display: block; width: 50px; height: 50px; position: absolute; float: left; z-index: 1;
text-align: center; background-color: #e74c3c; line-height: 45px; vertical-align: bottom; font-size: 40px; color: white; text-align: center; background-color: #e74c3c; line-height: 45px; vertical-align: bottom; font-size: 40px; color: white;
} }
.notification .body { .notification .body {
max-width: 420px; padding-left: 14px; padding-right: 60px; height: 40px; vertical-align: middle; display: table; max-width: 560px; padding-left: 14px; padding-right: 60px; height: 40px; vertical-align: middle; display: table;
background-color: white; left: 50px; top: 0px; position: relative; padding-top: 5px; padding-bottom: 5px; background-color: white; left: 50px; top: 0px; position: relative; padding-top: 5px; padding-bottom: 5px;
} }
.notification.long .body { padding-top: 10px; padding-bottom: 10px } .notification.long .body { padding-top: 10px; padding-bottom: 10px }
@ -65,7 +65,7 @@ a { color: black }
/* Notification select */ /* Notification select */
.notification .select { .notification .select {
display: block; padding: 10px; margin-right: -32px; text-decoration: none; border-left: 3px solid #EEE; display: block; padding: 10px; margin-right: -32px; text-decoration: none; border-left: 3px solid #EEE;
margin-top: 1px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s ; color: #666 margin-top: 1px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s ; color: #666
} }
.notification .select:hover, .notification .select.active { background-color: #007AFF; border-left: 3px solid #5D68FF; color: white; -webkit-transition: none ; -moz-transition: none ; -o-transition: none ; -ms-transition: none ; transition: none } .notification .select:hover, .notification .select.active { background-color: #007AFF; border-left: 3px solid #5D68FF; color: white; -webkit-transition: none ; -moz-transition: none ; -o-transition: none ; -ms-transition: none ; transition: none }
@ -95,9 +95,9 @@ a { color: black }
/* Console */ /* Console */
.console { line-height: 24px; font-family: monospace; font-size: 14px; color: #ADADAD; text-transform: uppercase; opacity: 0; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -o-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px) ; } .console { line-height: 24px; font-family: monospace; font-size: 14px; color: #ADADAD; text-transform: uppercase; opacity: 0; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -o-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px) ; }
.console-line:last-child { color: #6C6767 } .console-line:last-child { color: #6C6767 }
.console .cursor { .console .cursor {
background-color: #999; color: #999; -webkit-animation: pulse 1.5s infinite ease-in-out; -moz-animation: pulse 1.5s infinite ease-in-out; -o-animation: pulse 1.5s infinite ease-in-out; -ms-animation: pulse 1.5s infinite ease-in-out; animation: pulse 1.5s infinite ease-in-out ; margin-right: -9px; background-color: #999; color: #999; -webkit-animation: pulse 1.5s infinite ease-in-out; -moz-animation: pulse 1.5s infinite ease-in-out; -o-animation: pulse 1.5s infinite ease-in-out; -ms-animation: pulse 1.5s infinite ease-in-out; animation: pulse 1.5s infinite ease-in-out ; margin-right: -9px;
display: inline-block; width: 9px; height: 19px; vertical-align: -4px; display: inline-block; width: 9px; height: 19px; vertical-align: -4px;
} }
.console .console-error { color: #e74c3c; font-weight: bold; -webkit-animation: pulse 2s infinite linear ; -moz-animation: pulse 2s infinite linear ; -o-animation: pulse 2s infinite linear ; -ms-animation: pulse 2s infinite linear ; animation: pulse 2s infinite linear } .console .console-error { color: #e74c3c; font-weight: bold; -webkit-animation: pulse 2s infinite linear ; -moz-animation: pulse 2s infinite linear ; -o-animation: pulse 2s infinite linear ; -ms-animation: pulse 2s infinite linear ; animation: pulse 2s infinite linear }
.console .console-warning { color: #8e44ad; } .console .console-warning { color: #8e44ad; }
@ -125,14 +125,14 @@ a { color: black }
.progressbar { background: #26C281; position: fixed; z-index: 100; top: 0; left: 0; width: 0%; height: 2px; -webkit-transition: width 0.5s, opacity 1s; -moz-transition: width 0.5s, opacity 1s; -o-transition: width 0.5s, opacity 1s; -ms-transition: width 0.5s, opacity 1s; transition: width 0.5s, opacity 1s ; display: none } .progressbar { background: #26C281; position: fixed; z-index: 100; top: 0; left: 0; width: 0%; height: 2px; -webkit-transition: width 0.5s, opacity 1s; -moz-transition: width 0.5s, opacity 1s; -o-transition: width 0.5s, opacity 1s; -ms-transition: width 0.5s, opacity 1s; transition: width 0.5s, opacity 1s ; display: none }
.progressbar .peg { .progressbar .peg {
display: block; position: absolute; right: 0px; width: 100px; height: 100%; display: block; position: absolute; right: 0px; width: 100px; height: 100%;
-webkit-box-shadow: 0 0 10px #AF3BFF, 0 0 5px #29d; -moz-box-shadow: 0 0 10px #AF3BFF, 0 0 5px #29d; -o-box-shadow: 0 0 10px #AF3BFF, 0 0 5px #29d; -ms-box-shadow: 0 0 10px #AF3BFF, 0 0 5px #29d; box-shadow: 0 0 10px #AF3BFF, 0 0 5px #29d ; opacity: 1.0; -webkit-transform: rotate(3deg) translate(0px, -4px); -moz-transform: rotate(3deg) translate(0px, -4px); -o-transform: rotate(3deg) translate(0px, -4px); -ms-transform: rotate(3deg) translate(0px, -4px); transform: rotate(3deg) translate(0px, -4px) ; -webkit-box-shadow: 0 0 10px #AF3BFF, 0 0 5px #29d; -moz-box-shadow: 0 0 10px #AF3BFF, 0 0 5px #29d; -o-box-shadow: 0 0 10px #AF3BFF, 0 0 5px #29d; -ms-box-shadow: 0 0 10px #AF3BFF, 0 0 5px #29d; box-shadow: 0 0 10px #AF3BFF, 0 0 5px #29d ; opacity: 1.0; -webkit-transform: rotate(3deg) translate(0px, -4px); -moz-transform: rotate(3deg) translate(0px, -4px); -o-transform: rotate(3deg) translate(0px, -4px); -ms-transform: rotate(3deg) translate(0px, -4px); transform: rotate(3deg) translate(0px, -4px) ;
} }
/* Icons */ /* Icons */
.icon-profile { font-size: 6px; top: 0em; -webkit-border-radius: 0.7em 0.7em 0 0; -moz-border-radius: 0.7em 0.7em 0 0; -o-border-radius: 0.7em 0.7em 0 0; -ms-border-radius: 0.7em 0.7em 0 0; border-radius: 0.7em 0.7em 0 0 ; background: #FFFFFF; width: 1.5em; height: 0.7em; position: relative; display: inline-block; margin-right: 4px } .icon-profile { font-size: 6px; top: 0em; -webkit-border-radius: 0.7em 0.7em 0 0; -moz-border-radius: 0.7em 0.7em 0 0; -o-border-radius: 0.7em 0.7em 0 0; -ms-border-radius: 0.7em 0.7em 0 0; border-radius: 0.7em 0.7em 0 0 ; background: #FFFFFF; width: 1.5em; height: 0.7em; position: relative; display: inline-block; margin-right: 4px }
.icon-profile::before { position: absolute; content: ""; top: -1em; left: 0.38em; width: 0.8em; height: 0.85em; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50% ; background: #FFFFFF } .icon-profile::before { position: absolute; content: ""; top: -1em; left: 0.38em; width: 0.8em; height: 0.85em; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50% ; background: #FFFFFF }
/* Animations */ /* Animations */

138
src/Ui/media/all.js
View file

@ -154,7 +154,7 @@
jQuery.cssHooks['scale'] = { jQuery.cssHooks['scale'] = {
get: function(elem, computed, extra) { get: function(elem, computed, extra) {
var match = window.getComputedStyle(elem).transform.match("[0-9\.]+") var match = window.getComputedStyle(elem)[transform_property].match("[0-9\.]+")
if (match) { if (match) {
var scale = parseFloat(match[0]) var scale = parseFloat(match[0])
return scale return scale
@ -164,14 +164,14 @@ jQuery.cssHooks['scale'] = {
}, },
set: function(elem, val) { set: function(elem, val) {
//var transforms = $(elem).css("transform").match(/[0-9\.]+/g) //var transforms = $(elem).css("transform").match(/[0-9\.]+/g)
var transforms = window.getComputedStyle(elem).transform.match(/[0-9\.]+/g) var transforms = window.getComputedStyle(elem)[transform_property].match(/[0-9\.]+/g)
if (transforms) { if (transforms) {
transforms[0] = val transforms[0] = val
transforms[3] = val transforms[3] = val
//$(elem).css("transform", 'matrix('+transforms.join(", ")+")") //$(elem).css("transform", 'matrix('+transforms.join(", ")+")")
elem.style.transform = 'matrix('+transforms.join(", ")+')' elem.style[transform_property] = 'matrix('+transforms.join(", ")+')'
} else { } else {
elem.style.transform = "scale("+val+")" elem.style[transform_property] = "scale("+val+")"
} }
} }
} }
@ -181,6 +181,14 @@ jQuery.fx.step.scale = function(fx) {
}; };
if (window.getComputedStyle(document.body).transform) {
transform_property = "transform"
} else {
transform_property = "webkitTransform"
}
/* ---- src/Ui/media/lib/jquery.csslater.coffee ---- */ /* ---- src/Ui/media/lib/jquery.csslater.coffee ---- */
@ -458,6 +466,69 @@ jQuery.extend( jQuery.easing,
*/ */
/* ---- src/Ui/media/Fixbutton.coffee ---- */
(function() {
var Fixbutton;
Fixbutton = (function() {
function Fixbutton() {
this.dragging = false;
$(".fixbutton-bg").on("mouseover", (function(_this) {
return function() {
$(".fixbutton-bg").stop().animate({
"scale": 0.7
}, 800, "easeOutElastic");
$(".fixbutton-burger").stop().animate({
"opacity": 1.5,
"left": 0
}, 800, "easeOutElastic");
return $(".fixbutton-text").stop().animate({
"opacity": 0,
"left": 20
}, 300, "easeOutCubic");
};
})(this));
$(".fixbutton-bg").on("mouseout", (function(_this) {
return function() {
if ($(".fixbutton").hasClass("dragging")) {
return true;
}
$(".fixbutton-bg").stop().animate({
"scale": 0.6
}, 300, "easeOutCubic");
$(".fixbutton-burger").stop().animate({
"opacity": 0,
"left": -20
}, 300, "easeOutCubic");
return $(".fixbutton-text").stop().animate({
"opacity": 1,
"left": 0
}, 300, "easeOutBack");
};
})(this));
/*$(".fixbutton-bg").on "click", ->
return false
*/
$(".fixbutton-bg").on("mousedown", (function(_this) {
return function() {};
})(this));
$(".fixbutton-bg").on("mouseup", (function(_this) {
return function() {};
})(this));
}
return Fixbutton;
})();
window.Fixbutton = Fixbutton;
}).call(this);
/* ---- src/Ui/media/Loading.coffee ---- */ /* ---- src/Ui/media/Loading.coffee ---- */
@ -681,61 +752,6 @@ jQuery.extend( jQuery.easing,
}).call(this); }).call(this);
/* ---- src/Ui/media/Sidebar.coffee ---- */
(function() {
var Sidebar;
Sidebar = (function() {
function Sidebar() {
this.initFixbutton();
}
Sidebar.prototype.initFixbutton = function() {
$(".fixbutton-bg").on("mouseover", function() {
$(this).stop().animate({
"scale": 0.7
}, 800, "easeOutElastic");
$(".fixbutton-burger").stop().animate({
"opacity": 1.5,
"left": 0
}, 800, "easeOutElastic");
return $(".fixbutton-text").stop().animate({
"opacity": 0,
"left": 20
}, 300, "easeOutCubic");
});
$(".fixbutton-bg").on("mouseout", function() {
$(this).stop().animate({
"scale": 0.6
}, 300, "easeOutCubic");
$(".fixbutton-burger").stop().animate({
"opacity": 0,
"left": -20
}, 300, "easeOutCubic");
return $(".fixbutton-text").stop().animate({
"opacity": 1,
"left": 0
}, 300, "easeOutBack");
});
/*$(".fixbutton-bg").on "click", ->
return false
*/
$(".fixbutton-bg").on("mousedown", function() {});
return $(".fixbutton-bg").on("mouseup", function() {});
};
return Sidebar;
})();
window.Sidebar = Sidebar;
}).call(this);
/* ---- src/Ui/media/Wrapper.coffee ---- */ /* ---- src/Ui/media/Wrapper.coffee ---- */
@ -756,7 +772,7 @@ jQuery.extend( jQuery.easing,
this.log("Created!"); this.log("Created!");
this.loading = new Loading(); this.loading = new Loading();
this.notifications = new Notifications($(".notifications")); this.notifications = new Notifications($(".notifications"));
this.sidebar = new Sidebar(); this.fixbutton = new Fixbutton();
window.addEventListener("message", this.onMessageInner, false); window.addEventListener("message", this.onMessageInner, false);
this.inner = document.getElementById("inner-iframe").contentWindow; this.inner = document.getElementById("inner-iframe").contentWindow;
this.ws = new ZeroWebsocket(ws_url); this.ws = new ZeroWebsocket(ws_url);
@ -1218,4 +1234,4 @@ jQuery.extend( jQuery.easing,
window.wrapper = new Wrapper(ws_url); window.wrapper = new Wrapper(ws_url);
}).call(this); }).call(this);

17
src/Ui/media/lib/jquery.cssanim.js
View file

@ -1,6 +1,6 @@
jQuery.cssHooks['scale'] = { jQuery.cssHooks['scale'] = {
get: function(elem, computed, extra) { get: function(elem, computed, extra) {
var match = window.getComputedStyle(elem).transform.match("[0-9\.]+") var match = window.getComputedStyle(elem)[transform_property].match("[0-9\.]+")
if (match) { if (match) {
var scale = parseFloat(match[0]) var scale = parseFloat(match[0])
return scale return scale
@ -10,18 +10,25 @@ jQuery.cssHooks['scale'] = {
}, },
set: function(elem, val) { set: function(elem, val) {
//var transforms = $(elem).css("transform").match(/[0-9\.]+/g) //var transforms = $(elem).css("transform").match(/[0-9\.]+/g)
var transforms = window.getComputedStyle(elem).transform.match(/[0-9\.]+/g) var transforms = window.getComputedStyle(elem)[transform_property].match(/[0-9\.]+/g)
if (transforms) { if (transforms) {
transforms[0] = val transforms[0] = val
transforms[3] = val transforms[3] = val
//$(elem).css("transform", 'matrix('+transforms.join(", ")+")") //$(elem).css("transform", 'matrix('+transforms.join(", ")+")")
elem.style.transform = 'matrix('+transforms.join(", ")+')' elem.style[transform_property] = 'matrix('+transforms.join(", ")+')'
} else { } else {
elem.style.transform = "scale("+val+")" elem.style[transform_property] = "scale("+val+")"
} }
} }
} }
jQuery.fx.step.scale = function(fx) { jQuery.fx.step.scale = function(fx) {
jQuery.cssHooks['scale'].set(fx.elem, fx.now) jQuery.cssHooks['scale'].set(fx.elem, fx.now)
}; };
if (window.getComputedStyle(document.body).transform) {
transform_property = "transform"
} else {
transform_property = "webkitTransform"
}

4
src/Worker/Worker.py
View file

@ -47,9 +47,11 @@ class Worker(object):
except Exception, err: except Exception, err:
self.manager.log.debug("%s: getFile error: %s" % (self.key, err)) self.manager.log.debug("%s: getFile error: %s" % (self.key, err))
buff = None buff = None
if self.running is False or task["done"] is True: # Worker no longer needed or got killed if self.running is False: # Worker no longer needed or got killed
self.manager.log.debug("%s: No longer needed, returning: %s" % (self.key, task["inner_path"])) self.manager.log.debug("%s: No longer needed, returning: %s" % (self.key, task["inner_path"]))
break break
if task["done"] is True: # Task done, try to find new one
continue
if buff: # Download ok if buff: # Download ok
correct = site.content_manager.verifyFile(task["inner_path"], buff) correct = site.content_manager.verifyFile(task["inner_path"], buff)
else: # Download error else: # Download error

2
src/lib/cssvendor/cssvendor.py
View file

@ -7,7 +7,7 @@ def prefix(content):
content, flags=re.DOTALL content, flags=re.DOTALL
) )
content = re.sub( content = re.sub(
'([^-\*])(border-radius|box-shadow|transition|animation|box-sizing|' + '([^-\*])(border-radius|box-shadow|appearance|transition|animation|box-sizing|' +
'transform|filter|perspective|animation-[a-z-]+): (.*?)([;}])', 'transform|filter|perspective|animation-[a-z-]+): (.*?)([;}])',
'\\1-webkit-\\2: \\3; -moz-\\2: \\3; -o-\\2: \\3; -ms-\\2: \\3; \\2: \\3 \\4', content '\\1-webkit-\\2: \\3; -moz-\\2: \\3; -o-\\2: \\3; -ms-\\2: \\3; \\2: \\3 \\4', content
) )