efront 4.0.53 → 4.0.55

package/coms/basic/#loader.js

@@ -609,6 +609,7 @@ var init = function (url, then, prebuilds) {
         if (error) return crack(error);
 
         var module = loadedModules[key];
+        if (!module) return;
         var args = module.args || [];
 
         if (!args || !args.length) {

package/coms/basic/Table.js

@@ -75,7 +75,7 @@ class Table extends Array {
             if (isEmpty(name) || !isString(name)) continue;
             if (name === searchtext) this.hasFullmatch = true;
             var [p, m] = mark.power(name, searchtext);
-            power += p;
+            if (p > power) power = p;
             if (p >= searchtext.length) this.coverCount++;
             if (!isEmpty(f.key)) o[f.key] = m;
             else o.name = m, o.toString = returnName, o.valueOf = returnName;

package/coms/basic/parseCSV.js

@@ -0,0 +1,54 @@
+function readCSV(data) {
+    var reg = /""?|,|\r\n|\r|\n|\u2028|\u2029/g;
+    var str = [];
+    var instr = false;
+    var lastIndex = 0;
+    var row = [];
+    var table = [];
+    while (true) {
+        var m = reg.exec(data);
+        if (!m) break;
+        var s = data.slice(lastIndex, m.index);
+        lastIndex = reg.lastIndex;
+        if (s) str.push(s);
+        switch (m[0]) {
+            case `""`:
+                str.push('"');
+                break;
+            case `"`:
+                instr = !instr;
+                break;
+            case `,`:
+                if (instr) {
+                    str.push(',');
+                }
+                else {
+                    row.push(str.join(''));
+                    str = [];
+                }
+                break;
+            case "\r\n":
+            case "\r":
+            case "\n":
+            case "\u2028":
+            case "\u2029":
+                if (instr) {
+                    str.push("\r\n");
+                }
+                else {
+                    row.push(str.join(""));
+                    table.push(row);
+                    row = [];
+                    str = [];
+                }
+                break;
+        }
+    }
+    if (str.length || row.length) row.push(str.join(''));
+    if (row.length) table.push(row);
+    row = [];
+    str = [];
+    var fields = table.shift();
+    if (fields) fields = fields.map((a, i) => { return { name: a, key: i } })
+    return Table.from(fields, table);
+}

package/coms/basic_/exec_.js

@@ -11,7 +11,7 @@ var exec_ = function (args, ok, oh, int) {
             fina();
         }
         else if (catches.length) {
-            catch_ = catches.pop();
+            catch_ = catches[catches.length - 1];
             [index, p, throwed] = catch_;
             index += p & 0xffff;
             if (p >>> 16) {
@@ -19,6 +19,7 @@ var exec_ = function (args, ok, oh, int) {
             }
             else {
                 e = err;
+                catches.pop();
                 fina();
             }
         }
@@ -52,10 +53,10 @@ var exec_ = function (args, ok, oh, int) {
             }
             if (finished) return ok(r);
         }
-        catch_ = null;
         while (index < args_length) {
             try {
                 var a = args[index].call(t, p) || [1, 0];
+                catch_ = null;
                 p = a[0];
                 i = a[1];
             } catch (e) {

package/coms/compile/Program.js

@@ -657,10 +657,13 @@ class Program {
             if (a instanceof Array) {
                 a.forEach(a => {
                     quote_map[a] = q;
-                    tokens[a.charAt(0)] = true;
+                    if (a.length === 1) tokens[a] = true;
                 });
             }
-            else quote_map[a] = q, tokens[a.charAt(0)] = true;
+            else {
+                quote_map[a] = q
+                if (a.length === 1) tokens[a] = true;
+            }
             var r = q.slice(q[2] ? 2 : 3).concat(q[1]).map(q => {
                 if (q instanceof Array) {
                     q = q[q.length - 2];
@@ -688,11 +691,11 @@ class Program {
             var [a, b] = s;
             scope_entry[a] = b;
             scope_leave[b] = a;
-            tokens[a] = true;
-            tokens[b] = true;
+            if (a.length === 1) tokens[a] = true;
+            if (b.length === 1) tokens[b] = true;
         });
         this.stamps.forEach(s => {
-            tokens[s] = true;
+            if (s.length === 1) tokens[s] = true;
         });
         var scopes = this.scopes.map(a => a.join("")).join("");
         scopes = this.compile(scopes);

package/coms/compile/autoenum.js

@@ -1,4 +1,4 @@
-var { skipAssignment, snapSentenceHead, snapExpressFoot, EXPRESS, SCOPED, QUOTED, VALUE, STRAP, STAMP, number_reg, createString } = require("./common");
+var { skipAssignment, snapSentenceHead, snapExpressFoot, EXPRESS, SPACE, SCOPED, QUOTED, VALUE, STRAP, STAMP, number_reg, createString } = require("./common");
 var strings = require("../basic/strings");
 
 var createRefId = function (o) {
@@ -206,6 +206,7 @@ function enumref(scoped) {
                         continue;
                     }
                     if (!eq) break;
+                    if (o.short) continue;
                     o.type = eq.type;
                     o.isdigit = true;
                     o.text = eq.text;

package/coms/compile/autoenum_test.js

@@ -26,4 +26,5 @@ t("for(;a=1;){ console.log(a)} console.log(a)", "for (; a = 1;) { console.log(1)
 t("for(;;a=1){ console.log(a)} console.log(a)", "for (;; a = 1) { console.log(a) } console.log(a)");
 t("for(var a = 1;;){ console.log(a)} console.log(a)", "for (var a = 1;;) { console.log(1) } console.log(1)");
 t("for(let a = 1;;){ console.log(a)} console.log(a)", "for (let a = 1;;) { console.log(a) } console.log(a)");
+t("var a=-1; console.log(-a)", "var a = -1; console.log(- -1)");
 // t(fs.readFileSync(path.join(__dirname,"../zimoli/spacechar_test.js")).toString())

package/coms/compile/common.js

@@ -1107,7 +1107,8 @@ var createString = function (parsed) {
                     else if (o.prev && o.type === STAMP && !/^([,;])$/.test(o.text)) {
                         if (result[result.length - 1] === " " || (lasttype === PROPERTY || !o.isExpress && o.prev && o.prev.type !== LABEL) && o.text === ':') { }
                         else if (lasttype === STAMP) {
-                            result.push(" ");
+                            var prev = o.prev;
+                            if (!prev.unary || /[\+\-]$/.test(prev.text) && prev.text === o.text) result.push(" ");
                         }
                         else if (/^(\+\+|\-\-)$/.test(o.prev.text) && o.prev.prev) {
                             var prev_prev = o.prev.prev;
@@ -1116,6 +1117,7 @@ var createString = function (parsed) {
                                 || prev_prev.type & (EXPRESS | VALUE)
                             ) result.push(";");
                         }
+
                         else if (o.text === '*') {
                             if (keepspace && lasttype !== SPACE && (lasttype !== STRAP || o.prev && o.prev.text !== 'function')) result.push(" ");
                         }
@@ -1127,6 +1129,9 @@ var createString = function (parsed) {
                         if (/^0[0-7]+$/.test(o.text)) {
                             o.text = '0o' + o.text.slice(1);
                         }
+                        if (+o.text < 0 && /\-$/.test(result[result.length - 1])) {
+                            result.push(" ");
+                        }
                     }
                     result.push(o.text);
                 }

package/coms/compile/richcss.js

@@ -5,6 +5,8 @@ class Richcss extends Program {
     quotes = this.quotes.slice(0, 2);
     scopes = [["{", "}"]]
 }
+var presets = /^@(media|keyframes|layer|import|namespace|page|property|suppports|font-face|document|counter-style|charset|color-profile|container|font-feature-values|font-palette-values)(\s|\(|$)/i;
+
 Richcss.prototype.setType = function (o) {
     var p = o.prev;
     if (o.type !== SCOPED) {
@@ -34,10 +36,39 @@ Richcss.prototype.setType = function (o) {
         }
     }
     if (!q.entry && o.type !== SCOPED) {
+        var p = q.last;
+        if (p && p.type === STAMP && p.text === ':') {
+            if (p.keep) return;
+        }
+        else if (o.type === STAMP && o.text === ':') {
+            if (p.type & (EXPRESS | PROPERTY)) {
+                o.keep = true;
+                return;
+            }
+        }
         if (o.type !== STAMP || o.text !== ";") return false;
     }
 };
+
 Richcss.prototype.createScoped = function (code) {
+    var setVarsUsed = function (s) {
+        var vars = null, used = null;
+        for (var cx = s.length - 1; cx >= 0; cx--) {
+            var { p: k, v } = s[cx];
+            if (/^\-\-|^@[^\{]/.test(k) && !("used" in v) && v.length) {
+                if (!vars) vars = {};
+                vars[k] = v.join(" ");
+                s.splice(cx, 1);
+            }
+            else {
+                if (!used) used = [];
+                used.push({ p: k, v });
+            }
+        }
+        if (used) used.reverse();
+        s.used = used;
+        s.vars = vars;
+    };
     var run = function (o) {
         var props = [];
         var values = null;
@@ -65,29 +96,20 @@ Richcss.prototype.createScoped = function (code) {
                     break;
                 case SCOPED:
                     var s = run(o.first);
-                    var vars = null, used = null;
-                    for (var { p: k, v } of s) {
-                        if (/^\-\-/.test(k)) {
-                            if (!vars) vars = {};
-                            vars[k] = v.join(" ");
-                        }
-                        else {
-                            if (!used) used = [];
-                            used.push({ p: k, v });
-                        }
-                    }
-                    values.used = used;
-                    values.vars = vars;
+                    values.used = s.used;
+                    values.vars = s.vars;
 
             }
             o = o.next;
         }
+        setVarsUsed(props);
         return props;
     };
     return run(code.first);
 };
 Richcss.prototype.createString = createString;
 var getFromScopeList = function (name, varsList, value) {
+    name = name.replace(/^@\{\s*(\S*)\s*\}$/g, '@$1');
     for (var cx = varsList.length - 1; cx >= 0; cx--) {
         var o = varsList[cx];
         if (name in o) return o[name];
@@ -96,6 +118,7 @@ var getFromScopeList = function (name, varsList, value) {
 }
 var fixBase = function (b, a) {
     return a.split(/,\s*/).map(a => {
+        if (presets.test(a)) a = `@{${a}}`;
         var replaced = false;
         return b.split(/\s*,\s*/).map(b => {
             var a1 = a.replace(/(:scope|&)/g, function (match) {
@@ -113,10 +136,11 @@ var fixBase = function (b, a) {
     }).join(",");
 }
 function evalscoped(scoped, scopeNames, base = '') {
-    var root = scoped[":root"], scope = scoped[":scope"];
-    var vars = Object.create(null);
+    var root = scoped[":root"], scope = scoped[":scope"], and = scoped["&"];
+    var vars = extend(Object.create(null), scoped.vars);
     if (root) root.forEach(r => extend(vars, r.vars));
     if (scope) scope.forEach(s => extend(vars, s.vars));
+    if (and) and.forEach(s => extend(vars, s.vars));
     scopeNames.forEach(s => {
         var ss = scoped[s];
         if (ss) ss.forEach(s => {
@@ -129,7 +153,7 @@ function evalscoped(scoped, scopeNames, base = '') {
         var queue = [];
         for (var k in vars) {
             var v = vars[k];
-            while (/^\-\-/.test(v)) {
+            while (/^\-\-|^@[^\{]/.test(v)) {
                 if (queue.indexOf(v) >= 0) throw `变量环形引用，无法初始化：${queue}`;
                 queue.push(v);
                 v = getFromScopeList(v, vlist);
@@ -138,6 +162,7 @@ function evalscoped(scoped, scopeNames, base = '') {
         }
     };
     initvars(vars);
+
     var eval2 = function (props) {
         var rest = [];
         var result = [];
@@ -154,7 +179,7 @@ function evalscoped(scoped, scopeNames, base = '') {
             return res;
         };
         var calcvars = function (v) {
-            return v.replace(/(^|\s|[\]\)\(\[\-\+\*\/])(?:var\s*\(([\s\S]*?)\)|(--[^\s]+))/g, function (m, q, a, b) {
+            return v.replace(/(^|\s|[\]\)\(\[\-\+\*\/])(?:var\s*\(([\s\S]*?)\)|(--\S+|@[^\s\{\(\:\+\*\/]+|@\{[^\}@]*\}))/g, function (m, q, a, b) {
                 return q + getFromScopeList(b || a.trim(), vlist, m.slice(q.length));
             });
         };
@@ -162,18 +187,23 @@ function evalscoped(scoped, scopeNames, base = '') {
             if (p.used) {
                 var match = /^(@[^\s,]+)\s*\(\s*(@[^\s,]+\s*(?:,\s*@[^\s,]+\s*)*)?\)/.exec(k);
                 if (!match) continue;
+                if (presets.test(match[1])) continue;
                 p.base = base;
                 var [, name, args] = match;
-                args = args.split(",").map(a => a.trim());
-                p.args = args;
+                args = args.split(",").map(a => a.trim().split(':'));
+                p.argDefaults = args.map(a => a[1]);
+                args = p.args = args.map(a => a[0]);
                 p.reg = new RegExp(args.join("|"), 'g');
                 if (!methods[name]) methods[name] = [];
                 methods[name].push(function () {
                     var body = evalthis(this);
                     var valueMap = {};
-                    this.args.forEach((a, i) => {
-                        valueMap[a] = arguments[i];
-                    })
+                    var argDefaults = p.argDefaults;
+                    this.args.forEach((k, i) => {
+                        var a = arguments[i];
+                        if (a === undefined || a === null) a = argDefaults[i];
+                        valueMap[k] = a;
+                    });
                     var replace = text => text.replace(this.reg, function (name) {
                         if (name in valueMap) return valueMap[name];
                         return name;
@@ -188,9 +218,10 @@ function evalscoped(scoped, scopeNames, base = '') {
         }
         for (var { p: k, v: p } of props) {
             if (p.isMethod) continue;
+            k = calcvars(k);
             if (p.used) {
                 if (base && !p.rooted) p.base = fixBase(base, k);
-                else p.base = k;
+                else p.base = presets.test(k) ? `@{${k}}` : k;
                 var value = evalthis(p);
                 if (value.rest.length) rest = rest.concat(value.rest);
                 if (value.length) rest.push([p.base, '{', value.join(""), "}"]);
@@ -199,9 +230,9 @@ function evalscoped(scoped, scopeNames, base = '') {
                 result.push(k, ":", calcvars(p.join(" ")), ';');
             }
             else {
-                k = calcvars(k);
                 var match = /^(@\S+)\s*\(([\s\S]*)\)$/.exec(k);
                 if (!match) continue;
+                if (presets.test(match[1])) continue;
                 var [, name, params] = match;
                 params = params.split(",").map(a => a.trim());
                 var method = getFromScopeList(name, mlist);
@@ -223,12 +254,13 @@ function evalscoped(scoped, scopeNames, base = '') {
 var rcss = null;
 function richcss(text, scopeName, compress) {
     if (!rcss) rcss = new Richcss;
+    rcss.debug = true;
     var code = scanner2(text, rcss);
     var scopeNames = [];
     if (scopeName) code.forEach(c => {
         if (c.type === PROPERTY) {
             var replaced = false;
-            c.text = c.text.replace(/\:(scope|root)/g, function () {
+            c.text = c.text.replace(/\:(scope|root)|&/g, function () {
                 replaced = true;
                 return scopeName;
             });
@@ -239,5 +271,36 @@ function richcss(text, scopeName, compress) {
     })
     var { scoped } = code;
     var result = evalscoped(scoped, scopeNames, scopeName);
-    return result.rest.map(a => a.join("")).concat(result).join(compress ? "" : "\r\n");
+    return result.rest.map(a => a.join("")).concat(result).map(a => {
+        var ats = [];
+        a = a.replace(/@\{(@[^\}]*)\}\s*/g, function (_, q) {
+            ats.push(q);
+            return ''
+        })
+            .replace(/((?:[\+\-]+\s*)?(?:\d+(?:\.\d*)?|\.\d+))\s*(px|%|pt|cm|mm|r?em)?\s*([\/\*\+\-])\s*((?:[\+\-]+\s*)?(?:\d+(?:\.\d*)?|\.\d+))(px|%|pt|cm|mm|r?em)?/ig, function (_, d1, p1 = '', c, d2, p2 = '') {
+                d1 = eval(d1);
+                d2 = eval(d2);
+                if (!p2) {
+                    if (c === '*') {
+                        return d1 * d2 + p1;
+                    }
+                    if (c === '/') {
+                        return d1 / d2 + p1;
+                    }
+                }
+                else if (p1 === p2) {
+                    if (c === "+") {
+                        return (+d1 + +d2) + p1;
+                    }
+                    if (c === '-') {
+                        return (d1 - d2) + p1;
+                    }
+                }
+                return _;
+            })
+        while (ats.length) {
+            a = ats.pop() + `{${a}}`;
+        }
+        return a;
+    }).join(compress ? "" : "\r\n");
 }

package/coms/compile/richcss_test.js

@@ -1,6 +1,8 @@
 var test = function (data, expect) {
     assert(richcss(data), expect);
 };
+test(`&{--a:1}a{opacity:--a}`, `a{opacity:1;}`);
+test(`:root{--a:1}a{opacity:--a}`, `a{opacity:1;}`);
 test(`:scope{--a:1}a{opacity:--a}`, `a{opacity:1;}`);
 test(`:scope{--b:--a;--a:1;}a{opacity:--b}`, `a{opacity:1;}`);
 test(`@a(@p,@b){@p{opacity:@b}}@a(a,1);`, `a{opacity:1;}`);
@@ -12,4 +14,14 @@ test(`a{ &b{a:1}}`,`ab{a:1;}`);
 test(`a{ &.b{a:1}}`,`a.b{a:1;}`);
 test(`a{ &[b]{a:1}}`,`a[b]{a:1;}`);
 test(`a{ &[b]:nth-child(1){a:1}}`,`a[b]:nth-child(1){a:1;}`);
-test(`a,b{c{a:1}}`,`a c,b c{a:1;}`);
+test(`a,b{c{a:1}}`,`a c,b c{a:1;}`);
+test(`@media(){div{a:1}}`,`@media(){div{a:1;}}`);
+test(`@keyframes a{%1{a:1}}`,`@keyframes a{%1{a:1;}}`);
+test(`@media screen and (max-width:200px){@keyframes a{%1{a:1}}}`,`@media screen and (max-width:200px){@keyframes a{%1{a:1;}}}`);
+test(`@a:1`, ``);
+test(`@a:1;a{a:@a}`, `a{a:1;}`);
+test(`@a:1;a{@{a}:@a}`, `a{1:1;}`);
+test(`@a:1;a{@a:2;@{a}:@a}`, `a{2:2;}`);
+test(`@a:1;@a{@a:2;@{a}:@a}`, `1{2:2;}`);
+test(`@b(@a:1){@a{a:b}}@b(2)`, `2{a:b;}`);
+test(`@a:1; a{a:@a/2}`, `a{a:0.5;}`);

package/coms/compile/scanner2_test.js

@@ -121,6 +121,10 @@ function testQuote() {
     var m = scanner(`(sizeof(("table")) / sizeof(("table")[0]))`);
     console.log(m.toString());
 }
+function testMinus() {
+    var m = scanner(`a- - -!!!b`);
+    console.log(m.toString());
+}
 Program.debug = true;
 // testSpeed();
 // testVariables();
@@ -136,6 +140,7 @@ Program.debug = true;
 // testArrow();
 // testUnicode();
 // testComment();
-testQuote();
+// testQuote();
+testMinus();
 // var typescript = require("../typescript/index");
 // typescript.transpile(data.toString(), { noEmitHelpers: true });

package/coms/docs/codetext.xht

@@ -148,7 +148,7 @@
                     o.text = keys.map(k => /^\</.test(k) || !k ? k : `<express>${k}</express>`).join(".");
                     break;
                 case STRAP:
-                    if (/^(if|else|switch|case|do|while|for|break|continue|default|import|from|as|export|try|catch|finally|await|yield|return)$/.test(text))
+                    if (/^(if|else|switch|case|do|while|for|break|continue|default|import|from|as|export|try|catch|finally|throw|await|yield|return)$/.test(text))
                         o.text = `<flow>${o.text}</flow>`;
                     else o.text = `<strap>${o.text}</strap>`;
                     break;

package/coms/docs/markdown.js

@@ -20,24 +20,28 @@ var h = function (text) {
 var p = function (text) {
     if (text.length) return new Element("p", text);
 };
+var p2 = function (text) {
+    if (text.length) return new Element('div', text);
+}
 var li = function (c) {
     var li = new Element(li, c.replace(/^\*\s+|^[\d]+\.\s+/, ''));
     return li;
 }
 var list_elem = null, list_tag;
-var list = function (tag, text, li = 'li') {
+var list = function (tag, text, indent, li = 'li') {
     if (!list_elem || list_tag !== tag || list_elem !== content[content.length - 1]) {
         list_elem = new Element(tag);
+        list_elem.indent = indent;
         list_tag = tag;
         content.push(list_elem);
     }
     list_elem.appendChild(new Element(li, text.replace(/^\*\s+|^\d+\.\s+/, '')));
 };
-var ul = function (content) {
-    return list('ul', content);
+var ul = function (content, indent) {
+    return list('ul', content, indent);
 };
-var ol = function (content) {
-    return list('ol', content);
+var ol = function (content, indent) {
+    return list('ol', content, indent);
 };
 var tr = function (line) {
     if (/^[\|\-\s]+$/.test(line)) {
@@ -64,22 +68,31 @@ var tr = function (line) {
         return;
     }
     line = line.replace(/^\||\|$/g, '').split("|").map(t => `<td>${t}</td>`).join('');
-    return list('table', line, 'tr');
+    return list('table', line, NaN, 'tr');
 }
 function richtext(line) {
-    line = line.trim();
+    var tagIndent = /^\s+/.exec(line);
+    if (!tagIndent) tagIndent = 0;
+    else tagIndent = tagIndent[0].length;
+    line = line.slice(tagIndent);
     line = line.replace(/\[([\s\S]*?)\](?:\(([\s\S]*?)\))?|<(\w+)>[\s\S]*?<\/\3>/g, function (_, content, href) {
         if (/^\</.test(_)) return _;
         if (href) var href1 = ` href=${strings.recode(href)}`;
         return `<a${href1}>${content || href}</a>`;
     });
     var a;
-    if (/^#/.test(line)) a = h(line);
-    else if (/^\*\s+/.test(line)) ul(line);
-    else if (/^\d+\.\s+/.test(line)) ol(line);
+    if (/^#/.test(line)) content.push(h(line));
+    else if (/^\*\s+/.test(line)) ul(line, tagIndent);
+    else if (/^\d+\.\s+/.test(line)) ol(line, tagIndent);
     else if (/^\|/.test(line)) tr(line);
-    else a = p(line);
-    if (a) content.push(a);
+    else {
+        if (list_elem && list_elem === content[content.length - 1] && list_elem.indent <= tagIndent) {
+            list_elem.appendChild(p(line));
+        }
+        else {
+            content.push(p2(line));
+        }
+    }
 }
 /**
  * @type {Element}
@@ -87,7 +100,7 @@ function richtext(line) {
 var content;
 function markdown(text) {
     var c = content = [];
-    text.replace(/ *(`+|\*+)(\S[\s\S]*?)\1 */g, function (_, q, c, i) {
+    text.replace(/([ \t\v]*)(`+|\*+)(\S[\s\S]*?)\2([ \t\v]*)/g, function (_, s1, q, c, s2, i) {
         if (/^\*/.test(q)) {
             var m = q.length;
             if (m & 1) c = `<i>${c}</i>`;
@@ -96,11 +109,11 @@ function markdown(text) {
         }
         _ = codetext.encode(_.trim()).slice(1, -1);
         if (/[\*#\.]\s/.test(text.slice(i - 1, i + 1))) _ = " " + _;
-        if (q.length === 1) return `<m>${_}</m>`;
+        if (q.length === 1) return `${s1}<m>${_}</m>${s2}`;
         var t = /^\S+/.exec(c);
         if (t) t = t[0]; c = c.slice(t.length).replace(/^(\r\n|\r|\n)|\s+$/g, '');
         try {
-            return codetext(t, c);
+            return s1 + codetext(t, c) + s2;
         } catch (e) {
             console.error(e);
             return c;

package/coms/zimoli/AudioContext_test.less

@@ -1,6 +1,10 @@
 & {
     white-space: nowrap;
     overflow: auto;
+    background: #421;
+    border-top: 10px solid #000;
+    padding: 20px 40px 60px 40px;
+    // perspective: 3000px; 多嵌套一层，不起作用
 }
 
 &>div {
@@ -11,7 +15,11 @@
         z-index: 2;
         width: 60px;
         text-align: center;
-        color: green;
+        text-transform: uppercase;
+        font-family: 'Times New Roman', Times, serif;
+        font-style: italic;
+        font-weight: 900;
+        color: #999;
 
         &:before {
             content: "c";
@@ -26,6 +34,32 @@
 
     button {
         pointer-events: all;
+        transform-style: preserve-3d;
+
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        position: relative;
+
+        &.hover {
+            >.track {
+                box-shadow: none;
+                background: #fff1;
+            }
+
+            box-shadow: 0 0 12px -4px #0003;
+        }
+
+        &.active {
+            z-index: 0;
+
+            >.track {
+                background: #0003;
+                background: linear-gradient(0deg, #0003, #0000);
+            }
+
+            transform-origin: 30px -270px -10px;
+            transform:rotateX(-7deg);
+        }
+
     }
 
     &.odd {
@@ -34,10 +68,9 @@
             margin: 0 2px;
             width: 56px;
             background: #fff;
-            color: #333;
+            color: #aaa;
             height: 280px;
             padding: 80px 0 0 0;
-
             box-shadow: 0 0 20px -6px rgba(0, 0, 0, .3);
 
             span {
@@ -52,7 +85,7 @@
 
         button {
             width: 40px;
-            margin: 0 10px;
+            margin: 10px 10px;
             box-shadow: 0 0 20px -6px rgba(0, 0, 0, .3);
 
             &:nth-child(1) {
@@ -68,7 +101,7 @@
             color: #fff;
             height: 120px;
 
-            &:nth-child(7n+2) {
+            &:nth-child(2) {
                 margin-right: 70px;
             }
         }