CSS3 Prefix via JS

This commit is contained in:
Ruud
2012-02-11 03:34:29 +01:00
parent 25c395465a
commit fd485a702e
9 changed files with 7 additions and 114 deletions
@@ -10,10 +10,7 @@
.movies .movie {
position: relative;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
margin: 10px 0;
overflow: hidden;
@@ -39,10 +36,7 @@
line-height: 0;
overflow: hidden;
height: 180px;
border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px 0 0 4px;
}
.movies .poster img, .options .poster img {
@@ -172,7 +166,6 @@
min-height: 24px;
white-space: nowrap;
text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
text-align: center;
vertical-align: top;
border-left: 1px solid rgba(255, 255, 255, 0.1);
@@ -229,14 +222,7 @@
padding: 0 0 1px;
margin: 0;
float: left;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.movies .alph_nav li {
@@ -39,8 +39,6 @@
-moz-border-radius: 3px;
box-shadow: 0 0 50px rgba(0,0,0,0.55);
-moz-box-shadow: 0 0 50px rgba(0,0,0,0.55);
-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.55);
}
.search_form .spinner {
background: rgba(0,0,0,0.8) url('../images/spinner.gif') no-repeat center 70px;
@@ -73,11 +71,7 @@
border: 1px solid transparent;
border-width: 1px 0;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
box-shadow: inset 0 1px 8px rgba(0,0,0,0.25);
-moz-box-shadow: inset 0 1px 8px rgba(0,0,0,0.25);
-webkit-box-shadow: inset 0 1px 8px rgba(0,0,0,0.25);
}
.movie_result .options > div {
@@ -139,11 +133,7 @@
vertical-align: top;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: 0 0 3px rgba(0,0,0,0.35);
-moz-box-shadow: 0 0 3px rgba(0,0,0,0.35);
-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.35);
}
.movie_result .info {
@@ -24,10 +24,7 @@
width: 100%;
left: 0;
z-index: 2;
box-shadow: 0 0 50px rgba(0,0,0,0.55);
-moz-box-shadow: 0 0 50px rgba(0,0,0,0.55);
-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.55);
}
.page.wizard .tab_wrapper .tabs {
@@ -19,7 +19,7 @@ Block.Navigation = new Class({
}
})
)
new ScrollSpy({
min: 400,
onLeave: function(){
@@ -29,7 +29,7 @@ Block.Navigation = new Class({
self.backtotop.fade('in')
}
})
},
addTab: function(tab){
@@ -0,0 +1,2 @@
// StyleFix 1.0.1 & PrefixFree 1.0.4 / by Lea Verou / MIT license
(function(){function b(a,b){return[].slice.call((b||document).querySelectorAll(a))}if(!window.addEventListener)return;var a=window.StyleFix={link:function(b){try{if(b.rel!=="stylesheet"||!b.sheet.cssRules||b.hasAttribute("data-noprefix"))return}catch(c){return}var d=b.href||b.getAttribute("data-href"),e=d.replace(/[^\/]+$/,""),f=b.parentNode,g=new XMLHttpRequest;g.open("GET",d),g.onreadystatechange=function(){if(g.readyState===4){var c=g.responseText;if(c&&b.parentNode){c=a.fix(c,!0,b),e&&(c=c.replace(/url\((?:'|")?(.+?)(?:'|")?\)/gi,function(a,b){return/^([a-z]{3,10}:|\/|#)/i.test(b)?a:'url("'+e+b+'")'}),c=c.replace(RegExp("\\b(behavior:\\s*?url\\('?\"?)"+e,"gi"),"$1"));var d=document.createElement("style");d.textContent=c,d.media=b.media,d.disabled=b.disabled,d.setAttribute("data-href",b.getAttribute("href")),f.insertBefore(d,b),f.removeChild(b)}}},g.send(null),b.setAttribute("data-inprogress","")},styleElement:function(b){var c=b.disabled;b.textContent=a.fix(b.textContent,!0,b),b.disabled=c},styleAttribute:function(b){var c=b.getAttribute("style");c=a.fix(c,!1,b),b.setAttribute("style",c)},process:function(){b('link[rel="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link),b("style").forEach(StyleFix.styleElement),b("[style]").forEach(StyleFix.styleAttribute)},register:function(b,c){(a.fixers=a.fixers||[]).splice(c===undefined?a.fixers.length:c,0,b)},fix:function(b,c){for(var d=0;d<a.fixers.length;d++)b=a.fixers[d](b,c)||b;return b},camelCase:function(a){return a.replace(/-([a-z])/g,function(a,b){return b.toUpperCase()}).replace("-","")},deCamelCase:function(a){return a.replace(/[A-Z]/g,function(a){return"-"+a.toLowerCase()})}};(function(){setTimeout(function(){b('link[rel="stylesheet"]').forEach(StyleFix.link)},10),document.addEventListener("DOMContentLoaded",StyleFix.process,!1)})()})(),function(a,b){if(!window.StyleFix||!window.getComputedStyle)return;var c=window.PrefixFree={prefixCSS:function(a,b){function e(b,d,e,f){b=c[b];if(b.length){var g=RegExp(d+"("+b.join("|")+")"+e,"gi");a=a.replace(g,f)}}var d=c.prefix;e("functions","(\\s|:|,)","\\s*\\(","$1"+d+"$2("),e("keywords","(\\s|:)","(\\s|;|\\}|$)","$1"+d+"$2$3"),e("properties","(^|\\{|\\s|;)","\\s*:","$1"+d+"$2:");if(c.properties.length){var f=RegExp("\\b("+c.properties.join("|")+")(?!:)","gi");e("valueProperties","\\b",":(.+?);",function(a){return a.replace(f,d+"$1")})}return b&&(e("selectors","","\\b",c.prefixSelector),e("atrules","@","\\b","@"+d+"$1")),a=a.replace(RegExp("-"+d,"g"),"-"),a},prefixSelector:function(a){return a.replace(/^:{1,2}/,function(a){return a+c.prefix})},prefixProperty:function(a,b){var d=c.prefix+a;return b?StyleFix.camelCase(d):d}};(function(){var a={},b=[],d={},e=getComputedStyle(document.documentElement,null),f=document.createElement("div").style,g=function(c){if(c.charAt(0)==="-"){b.push(c);var d=c.split("-"),e=d[1];a[e]=++a[e]||1;while(d.length>3){d.pop();var f=d.join("-");h(f)&&b.indexOf(f)===-1&&b.push(f)}}},h=function(a){return StyleFix.camelCase(a)in f};if(e.length>0)for(var i=0;i<e.length;i++)g(e[i]);else for(var j in e)g(StyleFix.deCamelCase(j));var k={uses:0};for(var l in a){var m=a[l];k.uses<m&&(k={prefix:l,uses:m})}c.prefix="-"+k.prefix+"-",c.Prefix=StyleFix.camelCase(c.prefix),c.properties=[];for(var i=0;i<b.length;i++){var j=b[i];if(j.indexOf(c.prefix)===0){var n=j.slice(c.prefix.length);h(n)||c.properties.push(n)}}c.Prefix=="Ms"&&!("transform"in f)&&!("MsTransform"in f)&&"msTransform"in f&&c.properties.push("transform","transform-origin"),c.properties.sort()})(),function(){function e(a,b){return d[b]="",d[b]=a,!!d[b]}var a={"linear-gradient":{property:"backgroundImage",params:"red, teal"},calc:{property:"width",params:"1px + 5%"},element:{property:"backgroundImage",params:"#foo"}};a["repeating-linear-gradient"]=a["repeating-radial-gradient"]=a["radial-gradient"]=a["linear-gradient"];var b={initial:"color","zoom-in":"cursor","zoom-out":"cursor",box:"display",flexbox:"display","inline-flexbox":"display"};c.functions=[],c.keywords=[];var d=document.createElement("div").style;for(var f in a){var g=a[f],h=g.property,i=f+"("+g.params+")";!e(i,h)&&e(c.prefix+i,h)&&c.functions.push(f)}for(var j in b){var h=b[j];!e(j,h)&&e(c.prefix+j,h)&&c.keywords.push(j)}}(),function(){function f(a){return e.textContent=a+"{}",!!e.sheet.cssRules.length}var b={":read-only":null,":read-write":null,":any-link":null,"::selection":null},d={keyframes:"name",viewport:null,document:'regexp(".")'};c.selectors=[],c.atrules=[];var e=a.appendChild(document.createElement("style"));for(var g in b){var h=g+(b[g]?"("+b[g]+")":"");!f(h)&&f(c.prefixSelector(h))&&c.selectors.push(g)}for(var i in d){var h=i+" "+(d[i]||"");!f("@"+h)&&f("@"+c.prefix+h)&&c.atrules.push(i)}a.removeChild(e)}(),c.valueProperties=["transition","transition-property"],a.className+=" "+c.prefix,StyleFix.register(c.prefixCSS)}(document.documentElement);
+2 -53
View File
@@ -2,6 +2,7 @@
http://localhost:5000/static/style/main.css
http://192.168.1.20:5000/static/style/main.css
http://127.0.0.1:5000/static/style/main.css
http://127.0.0.1:5000/v2/_api_/static/style/main.css
*/
html {
@@ -28,9 +29,6 @@ body {
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}
@@ -102,9 +100,7 @@ a:hover { color: #f3f3f3; }
right: 0;
padding: 10px 10px 10px 40px;
background: #f7f7f7 url('../images/toTop.gif') no-repeat 10px center;
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
border-radius: 5px 0 0 0;
}
form {
@@ -124,14 +120,7 @@ body > .spinner, .mask{
text-decoration: none;
font-weight: bold;
line-height: 1;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
@@ -162,9 +151,6 @@ body > .spinner, .mask{
background: #4e5969;
padding:10px;
height: 60px;
box-shadow: 0 0 30px rgba(0,0,0,0.1);
-moz-box-shadow: 0 0 30px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 0 30px rgba(0,0,0,0.1);
position: fixed;
width: 99%;
z-index: 2;
@@ -236,10 +222,7 @@ body > .spinner, .mask{
margin: -10px 0 0 -40px;
background: #4e5969;
padding: 5px 0;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
color: rgba(255,255,255,.4);
text-shadow: none;
font-weight: normal;
@@ -253,14 +236,8 @@ body > .spinner, .mask{
padding: 15px 0 20px;
background: #ff6134;
font-size: 26px;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
box-shadow: 0 2px 1px rgba(0,0,0, 0.3);
-moz-box-shadow: 0 2px 1px rgba(0,0,0, 0.3);
-webkit-box-shadow: 0 2px 1px rgba(0,0,0, 0.3);
}
.header .message a {
@@ -293,14 +270,9 @@ body > .spinner, .mask{
.select .selection {
display: inline-block;
padding: 0 30px 0 20px;
border-radius:30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
box-shadow: 0 1px 1px rgba(0,0,0,0.35), inset 0 1px 0px rgba(255,255,255,0.20);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.35), inset 0 1px 0px rgba(255,255,255,0.20);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.35), inset 0 1px 0px rgba(255,255,255,0.20);
background: url('../images/checks.png') no-repeat 94% -53px, -webkit-gradient(
linear,
@@ -322,8 +294,6 @@ body > .spinner, .mask{
border-right: 1px solid rgba(0,0,0,0.2);
box-shadow: 1px 0 0 rgba(255,255,255,0.15);
-moz-box-shadow: 1px 0 0 rgba(255,255,255,0.15);
-webkit-box-shadow: 1px 0 0 rgba(255,255,255,0.15);
}
.select .menu {
@@ -338,12 +308,7 @@ body > .spinner, .mask{
position: absolute;
margin: 25px 0 0 0;
box-shadow: 0 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.4);
border-radius:3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
z-index: 3;
}
.select.active .list {
@@ -371,20 +336,14 @@ body > .spinner, .mask{
color: #fff;
border: 0;
border-radius:3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #282d34;
box-shadow: inset 0 1px 8px rgba(0,0,0,0.25), 0 1px 0px rgba(255,255,255,0.25);
-moz-box-shadow: inset 0 1px 8px rgba(0,0,0,0.25), 0 1px 0px rgba(255,255,255,0.25);
-webkit-box-shadow: inset 0 1px 8px rgba(0,0,0,0.25), 0 1px 0px rgba(255,255,255,0.25);
}
.inlay.light {
background: #47515f;
outline: none;
box-shadow: inset 0 1px 8px rgba(0,0,0,0.05), 0 1px 0px rgba(255,255,255,0.15);
-moz-box-shadow: inset 0 1px 8px rgba(0,0,0,0.05), 0 1px 0px rgba(255,255,255,0.15);
-webkit-box-shadow: inset 0 1px 8px rgba(0,0,0,0.05), 0 1px 0px rgba(255,255,255,0.15);
}
.inlay:focus {
@@ -394,12 +353,8 @@ body > .spinner, .mask{
.onlay, .inlay .selected, .inlay > li:hover, .inlay > li.active {
border-radius:3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 1px solid #252930;
box-shadow: inset 0 1px 0px rgba(255,255,255,0.20), 0 0 3px rgba(0,0,0, 0.2);
-moz-box-shadow: inset 0 1px 0px rgba(255,255,255,0.20), 0 0 3px rgba(0,0,0, 0.2);
-webkit-box-shadow: inset 0 1px 0px rgba(255,255,255,0.20), 0 0 3px rgba(0,0,0, 0.2);
background-image: -webkit-gradient(
linear,
left bottom,
@@ -423,14 +378,8 @@ body > .spinner, .mask{
z-index:101;
text-align: center;
background: #5c697b;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
box-shadow: 0 0 50px rgba(0,0,0,0.55);
-moz-box-shadow: 0 0 50px rgba(0,0,0,0.55);
-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.55);
}
.question h3 {
@@ -73,10 +73,7 @@
padding: 0 9px 10px 30px;
margin: 0;
border-bottom: 1px solid #333;
box-shadow: 0 1px 0px rgba(255,255,255, 0.15);
-moz-box-shadow: 0 1px 0px rgba(255,255,255, 0.15);
-webkit-box-shadow: 0 1px 0px rgba(255,255,255, 0.15);
}
.page fieldset h2 .hint {
font-size: 12px;
@@ -159,10 +156,7 @@
padding: 5px 3px;
margin: 0;
width: 30%;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
.page .input.xsmall { width: 5% }
.page .input.small { width: 10% }
@@ -209,11 +203,7 @@
margin: 28px 0 20px -4px;
background: #5c697b;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
box-shadow: 0 0 50px rgba(0,0,0,0.55);
-moz-box-shadow: 0 0 50px rgba(0,0,0,0.55);
-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.55);
}
.page .directory_list .pointer {
@@ -323,8 +313,6 @@
.page .tag_input .selection {
border-radius: 0 10px 10px 0;
-moz-border-radius: 0 10px 10px 0;
-webkit-border-radius: 0 10px 10px 0;
height: 26px;
}
@@ -337,8 +325,6 @@
line-height: 20px;
padding: 3px 0;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
cursor: text;
width: 31%;
margin: 0 !important;
@@ -346,8 +332,6 @@
.page .tag_input:hover > ul {
width: 50%;
border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
}
.page .tag_input:hover .formHint { display: none; }
@@ -368,8 +352,6 @@
cursor: grab;
padding: 0;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
.page .tag_input > ul:hover > li.choice {
background: url('../images/checks.png') no-repeat 94% -53px, -webkit-gradient(
@@ -431,8 +413,6 @@
position: absolute;
margin: -9px 0 0 -16px;
border-radius: 30px 30px 0 0;
-webkit-border-radius: 30px 30px 0 0;
-moz-border-radius: 30px 30px 0 0;
cursor: pointer;
background: url('../../images/icon.delete.png') no-repeat center 2px, -webkit-gradient(
linear,
@@ -527,8 +507,6 @@
margin: 20px 0 0;
border-left: 1px solid #333;
box-shadow: -1px 0 0 rgba(255,255,255, 0.15);
-moz-box-shadow: -1px 0 0 rgba(255,255,255, 0.15);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255, 0.15);
}
.page .tab_about .donate form {
padding: 10px 0 0;
@@ -41,21 +41,11 @@
.uniForm .buttonHolder{ background: #efefef; text-align: right; margin: 1.5em 0 0 0; padding: 1.5em;
/* CSS3 */
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-khtml-border-radius: 4px;
}
.uniForm .buttonHolder .primaryAction{ padding: 10px 22px; line-height: 1; background: #254a86; border: 1px solid #163362; font-size: 12px; font-weight: bold; color: #fff;
/* CSS3 */
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-khtml-border-radius: 4px;
box-shadow: 1px 1px 0 #fff;
-webkit-box-shadow: 1px 1px 0 #fff;
-moz-box-shadow: 1px 1px 0 #fff;
text-shadow: -1px -1px 0 rgba(0,0,0,.25);
}
.uniForm .buttonHolder .primaryAction:active{ position: relative; top: 1px; }
+1
View File
@@ -10,6 +10,7 @@
<script type="text/javascript" src="{{ url_for('web.static', filename='scripts/library/mootools.js') }}"></script>
<script type="text/javascript" src="{{ url_for('web.static', filename='scripts/library/mootools_more.js') }}"></script>
<script type="text/javascript" src="{{ url_for('web.static', filename='scripts/library/prefix_free.js') }}"></script>
<script type="text/javascript" src="{{ url_for('web.static', filename='scripts/library/templated.js') }}"></script>
<script type="text/javascript" src="{{ url_for('web.static', filename='scripts/library/uniform.js') }}"></script>