From 9985334e3c17246ab3bc7c0951c979df102fa127 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 6 Jan 2016 19:47:13 +0800 Subject: [PATCH] update page style --- site/static/home.js | 303 ------------- site/static/homeLoad.js | 116 ----- site/static/script.js | 3 + site/static/style.css | 952 +--------------------------------------- site/theme.js | 2 +- 5 files changed, 10 insertions(+), 1366 deletions(-) delete mode 100644 site/static/home.js delete mode 100644 site/static/homeLoad.js diff --git a/site/static/home.js b/site/static/home.js deleted file mode 100644 index 46b7aed017..0000000000 --- a/site/static/home.js +++ /dev/null @@ -1,303 +0,0 @@ -$(function() { - var getTransform = function() { - var style = "transform", - anim = "animation", - pers = "perspective"; - var i, prefix = ['webkit', 'moz', 'ms', 'o'], - htmlStyle = $("html")[0].style; - if (!"transform" in htmlStyle) { - for (i in prefix) { - style = "-" + prefix[i] + "-transform"; - if (style in htmlStyle) break; - } - } - if (!"animation" in htmlStyle) { - for (i in prefix) { - anim = "-" + prefix[i] + "-animation"; - if (anim in htmlStyle) break; - } - } - if (!"perspective" in htmlStyle) { - for (i in prefix) { - pers = "-" + prefix[i] + "-perspective"; - if (pers in htmlStyle) break; - } - } - return [style, anim, pers] - }; - var C = createjs || {}, - T = TweenMax || {}; - var bannerAnim = { - w: 2400, - h: 1300, - p_w: 0, - p_h: 0, - stage: null, - Canvas: null, - lineData:[ - {x:270,y:795,line:4,color:["rgba(190,196,200,1)","rgba(190,196,200,0)"],w:70,h:70,rotate:-15,circ:{x:10,y:10,r:50}}, - {x:850,y:220,w:70,h:70,line:4,color:["rgba(190,196,200,1)","rgba(190,196,200,0)"],circ:{x:10,y:10,r:50}}, - {x:930,y:445,w:230,h:110,line:4,color:["rgba(110,180,224,1)","rgba(110,180,224,0)"],circ:[{x:20,y:15,r:80},{x:125,y:15,r:80}]}, - {x:1160,y:670,w:440,h:115,line:4,color:["rgba(240,119,111,1)","rgba(240,119,111,0)"],circ:[{x:60,y:15,r:80},{x:178,y:15,r:80},{x:308,y:15,r:80}]}, - {x:1290,y:135,w:524,h:115,line:4,color:["rgba(190,196,200,1)","rgba(190,196,200,0)"],circ:[{x:40,y:15,r:80},{x:165,y:15,r:80},{x:295,y:15,r:80},{x:415,y:15,r:80}]}, - {x:1345,y:510,w:75,h:75,line:4,color:["rgba(240,119,111,1)","rgba(240,119,111,0)"],circ:{x:10,y:10,r:55}}, - {x:1455,y:340,w:210,h:210,line:4,color:["rgba(190,196,200,1)","rgba(190,196,200,0)"],circ:[{x:20,y:20,r:75},{x:120,y:20,r:75},{x:20,y:110,r:75},{x:120,y:110,r:75}]}, - {x:1695,y:300,w:120,h:345,line:4,color:["rgba(240,119,111,1)","rgba(240,119,111,0)"],circ:[{x:25,y:15,r:75},{x:35,y:25,r:55},{x:25,y:125,r:75},{x:35,y:135,r:55},{x:25,y:245,r:75},{x:35,y:255,r:55}]}, - {x:1730,y:745,w:75,h:75,line:4,color:["rgba(240,119,111,1)","rgba(240,119,111,0)"],circ:{x:10,y:10,r:55}}, - {x:1910,y:470,w:115,h:450,line:4,color:["rgba(110,180,224,1)","rgba(110,180,224,0)"],circ:[{x:25,y:20,r:75},{x:35,y:30,r:55},{x:25,y:130,r:75},{x:35,y:140,r:55},{x:25,y:240,r:75},{x:35,y:250,r:55},{x:25,y:340,r:75},{x:35,y:350,r:55}]}, - {x:1920,y:260,w:75,h:75,line:4,color:["rgba(240,119,111,1)","rgba(240,119,111,0)"],circ:{x:10,y:10,r:55}}, - {x:2070,y:250,w:230,h:455,line:4,color:["rgba(110,180,224,1)","rgba(110,180,224,0)"],circ:[{x:25,y:30,r:75},{x:35,y:40,r:55},{x:25,y:185,r:75},{x:35,y:195,r:55},{x:25,y:340,r:75},{x:35,y:350,r:55}, {x:140,y:30,r:75},{x:150,y:40,r:55},{x:140,y:185,r:75},{x:150,y:195,r:55},{x:140,y:340,r:75},{x:150,y:350,r:55}]}, - ], - init: function() { - var self = this; - self.box = $(".banner-box"); - self.animBox = $("#bannerAnim"); - self.imgBox = $(".banner-img"); - self.txtBox = $(".banner-entry"); - //创建canvas; - self.Canvas = $("").appendTo(self.animBox); //document.createElement('canvas'); - self.Canvas[0].width = self.w; - self.Canvas[0].height = self.h; - self.stage = new C.Stage('myC'); - - C.Ticker.setFPS(30); - C.Ticker.useRAF = true; - C.Ticker.addEventListener("tick", self.stage); - C.Touch.enable(self.stage, true); //单指触摸 - - self.bannerResize(); - $(window).bind("resize", self.bannerResize); - self.start() - }, - bannerResize: function() { - var self = bannerAnim; - self.p_w = self.box.parent().width(); - self.p_h = self.box.parent().height(); - //获取比例； - var w_s = self.p_w / self.w + 0.08, - h_s = self.p_h / self.h + 0.08; - var scale = self.scale = w_s > h_s ? w_s : h_s; - var tra = getTransform()[0]; - self.animBox.attr("style", ""); - self.imgBox.attr("style", ""); - var boxSty = { - "width": self.w, - "height": self.h - }; - - boxSty[tra] = "scale(" + scale + "," + scale + ")"; - self.animBox.css(boxSty); - var imgSty = {}; - imgSty[tra] = "scale(" + scale + "," + scale + ")"; - self.imgBox.css(imgSty); - if (w_s > h_s) { - self.animBox.css({ - "margin-top": (self.p_h - self.h * w_s) / 2, - "margin-left": (self.p_w - self.w * w_s) / 2 - }); - self.imgBox.css({ - "margin-top": (self.p_h - self.h * w_s) / 2 - (1 - scale) * self.h / 2, - "margin-left": (self.p_w - self.w * w_s) / 2 - (1 - scale) * self.w / 2 - }); - } else { - self.animBox.css({ - "margin-left": (self.p_w - self.w * h_s) / 2, - "margin-top": (self.p_h - self.h * h_s) / 2 - }); - self.imgBox.css({ - "margin-left": (self.p_w - self.w * h_s) / 2 - (1 - scale) * self.w / 2, - "margin-top": (self.p_h - self.h * h_s) / 2 - (1 - scale) * self.h / 2 - }); - } - }, - start: function() { - this.addLine(); - }, - glowLine: function(line, w, h, color) { - w = w || 0, h = h || 0; - var r = w / 2 || h / 2; - var glBox = new C.Container(); - var Line = new C.Shape(); - var glow = new C.Shape(); - glBox.addChild(glow); - glBox.addChild(Line); - glow.alpha = .3; - var blurFilter = new C.BlurFilter(3, 3, 10); - glow.filters = [blurFilter]; - var bounds = blurFilter.getBounds(); - if (w) { - Line.graphics.ss(line, "round").rs(color, [0, 1], r, h, 0, r, h, r).mt(0, 0).lt(w, h); - glow.graphics.ss(line + 4, "round").rs(color, [0, 1], r, h, 0, r, h, r).mt(0, 0).lt(w, h); - glow.cache(bounds.x, bounds.y - 2, w + bounds.width, line + bounds.height); - } else { - Line.graphics.ss(line, "round").rs(color, [0, 1], w, r, 0, w, r, r).mt(0, 0).lt(w, h); - glow.graphics.ss(line + 4, "round").rs(color, [0, 1], w, r, 0, w, r, r).mt(0, 0).lt(w, h); - glow.cache(bounds.x - 2, bounds.y, line + bounds.width, h + bounds.height); - } - return glBox; - }, - addMouseAnim: function() { - var self = this, - img_x = self.imgBox; - $("body").bind("mousemove", function(e) { - var _x = -(e.pageX - $(this).width() / 2) / 40; //,_y= -(e.pageY-$(this).height()/2)/35; - if (_x > self.w * .04) { - _x = self.w * .04 - } - T.set(self.imgBox, { - scale: self.scale, - transformPerspective: 400 - }); - T.killTweensOf(self.imgBox, true); - var tobj = {}; - if (navigator.userAgent.indexOf('Firefox') >= 0) { - tobj.x = _x - } else { - tobj.x = _x; - tobj.rotationY = _x / 60; - } - T.to(self.imgBox, .5, tobj); - }) - }, - endTween: function() { - var self = bannerAnim; - T.to(self.animBox, .5, { - alpha: 0, - onComplete: function() { - self.animBox.remove(); - self.addMouseAnim() - } - }); - self.imgBox.removeClass("fn-alpha-out") - self.imgBox.css("opacity", 1); - - }, - textTween: function() { - var self = this; - self.txtBox.removeClass("fn-hide"); - for (var i = 0; i < self.txtBox.children().length; i++) { - var mc = self.txtBox.children().eq(i); - T.from(mc, .5, { - delay: .15 * i, - alpha: 0, - y: "80", - onComplete: function(mc) { - mc.removeAttr("style"); - }, - onCompleteParams: [mc] - }) - } - }, - addLine: function() { - var self = bannerAnim; - var a_lineBox = [], - end_num = 0; - setTimeout(function() { - self.textTween(); - }, 500); - - function addLine(i, j, lineBox) { - var t = new C.Shape(); - if (j % 2) { - t.graphics.s(self.lineData[i].color[0]).ss(self.lineData[i].line).mt(0, 0).lt(0, self.lineData[i].h); - var at = Math.floor(j / 2); - t.x = self.lineData[i].w * at - } else { - t.graphics.s(self.lineData[i].color[0]).ss(self.lineData[i].line).mt(0, 0).lt(self.lineData[i].w, 0); - var at = j / 2; - t.y = self.lineData[i].h * at; - } - lineBox.addChild(t); - T.from(t, .5, { - alpha: 0 - }) - } - - function addCirc(i, lineBox) { - end_num++; - if (self.lineData[i].circ.length > 0) { - for (var j = 0; j < self.lineData[i].circ.length; j++) { - var circ = new C.Shape(); - circ.graphics.s(self.lineData[i].color[0]).ss(self.lineData[i].line).dc(self.lineData[i].circ[j].x + self.lineData[i].circ[j].r / 2, self.lineData[i].circ[j].y + self.lineData[i].circ[j].r / 2, self.lineData[i].circ[j].r / 2); - lineBox.addChild(circ); - T.from(circ, .5, { - alpha: 0 - }) - } - } else { - var circ = new C.Shape(); - circ.graphics.s(self.lineData[i].color[0]).ss(self.lineData[i].line).dc(self.lineData[i].circ.x + self.lineData[i].circ.r / 2, self.lineData[i].circ.y + self.lineData[i].circ.r / 2, self.lineData[i].circ.r / 2); - lineBox.addChild(circ); - T.from(circ, .5, { - alpha: 0 - }) - } - if (end_num >= self.lineData.length) { - setTimeout(self.endTween, 500) - } - } - - function tween(line, obj, i, j, lineBox, arr) { - var t = obj; - t.alpha = 0; - t.scale = 2; - t.ease = Power1.easeOut; - T.to(line, .5, t); - addLine(i, j, lineBox); - arr.push(j); - a_lineBox[i] = arr; - if (a_lineBox[i].length >= 4) { - addCirc(i, lineBox) - } - } - for (var i = 0; i < self.lineData.length; i++) { - var lineBox = new C.Container(); - self.stage.addChild(lineBox); - lineBox.x = self.lineData[i].x; - lineBox.y = self.lineData[i].y + 125; - lineBox.rotation = self.lineData[i].rotate; - var arr = []; - //画外壳方形 - for (var j = 0; j < 4; j++) { - var line, ma = Math.ceil(Math.random() * 2 - 1), - tweenobj; - if (j % 2) { - tweenobj = ma ? self.lineData[i].h * 2 : -self.lineData[i].h * 2; - line = self.glowLine(self.lineData[i].line, 0, self.lineData[i].h, self.lineData[i].color); - var t = Math.floor(j / 2); - line.x = self.lineData[i].w * t; - T.from(line, .5, { - alpha: 0, - y: tweenobj, - scale: 0, - delay: j * .1 + Math.random() * i * .1, - ease: Power1.easeIn, - onComplete: tween, - onCompleteParams: [line, { - y: -tweenobj - }, i, j, lineBox, arr] - }); - } else { - tweenobj = ma ? self.lineData[i].w * 2 : -self.lineData[i].w * 2; - line = self.glowLine(self.lineData[i].line, self.lineData[i].w, 0, self.lineData[i].color); - var t = j / 2; - line.y = self.lineData[i].h * t; - T.from(line, .5, { - alpha: 0, - x: tweenobj, - scale: 0, - delay: j * .1 + Math.random() * i * .1, - ease: Power1.easeIn, - onComplete: tween, - onCompleteParams: [line, { - x: -tweenobj - }, i, j, lineBox, arr] - }); - } - lineBox.addChild(line) - } - } - } - }; - window.bannerAnim = bannerAnim; -}); diff --git a/site/static/homeLoad.js b/site/static/homeLoad.js deleted file mode 100644 index 1a23a6021e..0000000000 --- a/site/static/homeLoad.js +++ /dev/null @@ -1,116 +0,0 @@ -/** - * Created by jljsj on 15/6/3. - */ -$(function() { - $.ajaxSetup({ - cache: true - }); - var loadData = [ - "https://os.alipayobjects.com/rmsportal/PfhNcINWBAnMIWR.js", // easeljs-0.8.0.min.js - "https://os.alipayobjects.com/rmsportal/nGFyCGHAblMWsYE.js", // TweenMax.min.js - "/static/home.js", - "https://t.alipayobjects.com/images/T1CFtgXb0jXXXXXXXX.jpg" - ]; - var animEndStr = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; - var loadFunc = { - init: function() { - var self = this; - self.body = $("body"); - self.header = $("#header") || $("header"); - self.main = $(".main"); - self.footer = $("#footer") || $("footer"); - self.addLoad() - }, - addLoad: function() { - var self = this; - self.loadBox = $("
" + - "
" + - "" + - "Ant Design" + - "
" + - "
" + - "
").appendTo(".banner-box"); - self.loadBar = self.loadBox.find(".load-bar"); - var loadText = self.loadBox.find("span"), - str = loadText.text(), - loadClass = ["yoyo-load0", "yoyo-load1", "yoyo-load2", "yoyo-load3", "yoyo-load4", "yoyo-load5"]; - loadText.empty(); - - function c_random(num, arrlen) { - var arr = []; - - function r(i) { - var t = Math.round(Math.random() * (num - 1)); - if (t == arr[i - 1]) { - r(i); - return - } - arr.push(t) - } - for (var i = 0; i < arrlen; i++) { - r(i) - } - return arr; - } - var tarr = c_random(loadClass.length, str.length); - for (var i = 0; i < str.length; i++) { - var t = str[i]; - if (t == " ") { - t = " " - } - var _class = "yoyo-x-left"; - if (i > 0 && i < str.length - 1) { - _class = loadClass[tarr[i]] - } - if (i == str.length - 1) { - _class = 'yoyo-x-right' - } - loadText.append("

" + t + "

") - } - self.load() - }, - load: function() { - var self = this, - num = 0; - - function endLoad() { - self.loadBox.addClass("load-out").one(animEndStr, function() { - self.loadBox.remove(); - bannerAnim.init(); - }); - } - - function getLoad() { - var str = loadData[num]; - if (str.indexOf(".js") >= 0) { - $.getScript(str.indexOf('http') === 0 ? str : (rootUrl + str), function() { - num++; - self.loadBar.css("width", num / loadData.length * 100 + "%"); - if (num >= loadData.length) { - setTimeout(endLoad, 300); - } else { - getLoad(); - } - }) - } else { - var img = new Image(); - img.onload = img.onerror = function() { - num++; - self.loadBar.css("width", num / loadData.length * 100 + "%"); - if (num >= loadData.length) { - setTimeout(endLoad, 300); - } else { - getLoad(); - } - }; - img.src = str; - } - } - getLoad(); - } - }; - - $().ready(function() { - loadFunc.init() - }); -}); diff --git a/site/static/script.js b/site/static/script.js index 8f0d3b855e..5401f42823 100644 --- a/site/static/script.js +++ b/site/static/script.js @@ -6,6 +6,7 @@ InstantClickChangeFns.push(function() { }, 0); } + $('.component-demos .icon-all').off('click'); $('.component-demos .icon-all').on('click', function() { if ($(this).hasClass('expand')) { $(this).removeClass('expand'); @@ -49,6 +50,7 @@ InstantClickChangeFns.push(function() { hashChange(); // 高亮侧边演示菜单 + $(window).off('hashchange'); $(window).on('hashchange', hashChange); // 移动 API 文档到演示下方 @@ -77,6 +79,7 @@ InstantClickChangeFns.push(function() { onScroll(); // 滚动高亮 + $(window).off('scroll'); $(window).on('scroll', onScroll); // 添加上一页下一页 diff --git a/site/static/style.css b/site/static/style.css index 0049efa6d7..59e640d893 100644 --- a/site/static/style.css +++ b/site/static/style.css @@ -40,7 +40,7 @@ li { } a { - color: #00ABEA; + color: #2db7f5; text-decoration: none; transition: color .3s ease; } @@ -56,11 +56,11 @@ a:hover { } ::selection { - background: #4BB8FF; + background: #2db7f5; color: #fff; } ::-moz-selection { - background: #4BB8FF; + background: #2db7f5; color: #fff; } @@ -500,7 +500,7 @@ footer ul li > a { padding: 30px 80px 120px; border-left: 1px solid #e9e9e9; border-right: 1px solid #e9e9e9; - width: 80%; + width: 90%; height: 100%; } @@ -508,7 +508,7 @@ footer ul li > a { color: #666; font-size: 14px; line-height: 1.8; - width: 80%; + width: 90%; } .highlight { @@ -721,117 +721,6 @@ footer ul li > a { border-color: #2db7f5; } -/****************************动画样式*********************************/ -.delay-mode { - animation-fill-mode: backwards !important; - -webkit-animation-fill-mode: backwards !important; -} - -.no-delay { - animation-delay: 0s !important; - -webkit-animation-delay: 0s !important; - -moz-animation-delay: 0s !important; - -o-animation-delay: 0s !important; -} - -.from-rotate-scale-m { - animation: mRotateScale .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); - -webkit-animation: mRotateScale .4s cubic-bezier(0.175, 0.885, 0.32, 1.275); -} - -.from-rotate-scale-l { - animation: lRotateScale .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); - -webkit-animation: lRotateScale .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -} - -.from-scale-l { - animation: lScale .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); - -webkit-animation: lScale .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -} - -.from-scale-m { - animation: mScale .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); - -webkit-animation: mScale .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -} - -.from-x-left { - animation: xLeft .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); - -webkit-animation: xLeft .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -} - -.from-x-right { - animation: xRight .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); - -webkit-animation: xRight .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -} - -.from-y-top { - animation: yTop .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); - -webkit-animation: yTop .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -} - -.from-y-bottom { - animation: yBottom .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); - -webkit-animation: yBottom .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -} - -.to-img-blur { - opacity: 0; - animation: toImgBlur .5s ease-out; - -webkit-animation: toImgBlur .5s ease-out; - -moz-animation: toImgBlur .5s ease-out; - -o-animation: toImgBlur .5s ease-out; - -ms-animation: toImgBlur .5s ease-out; -} - -.from-img-blur { - opacity: 1 !important; - animation: fromImgBlur .5s ease-out; - -webkit-animation: fromImgBlur .5s ease-out; - -moz-animation: fromImgBlur .5s ease-out; - -o-animation: fromImgBlur .5s ease-out; - -ms-animation: fromImgBlur .5s ease-out; -} - -.alpha-out { - opacity: 0; - animation: alphaOut .5s ease-out; - -webkit-animation: alphaOut .5s ease-out; -} - -.yoyo-x-right{ - animation: xRightMatrixR 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; - -webkit-animation: xRightMatrixR 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; -} -.yoyo-x-left{ - animation: xLeftMatrixR 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; - -webkit-animation: xLeftMatrixR 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; -} - -.yoyo-load0{ - animation: Load0 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; - -webkit-animation: Load0 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; -} -.yoyo-load1{ - animation: Load1 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; - -webkit-animation: Load1 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; -} -.yoyo-load2{ - animation: Load2 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; - -webkit-animation: Load2 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; -} -.yoyo-load3{ - animation: Load3 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; - -webkit-animation: Load3 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; -} -.yoyo-load4{ - animation: Load4 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; - -webkit-animation: Load4 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; -} -.yoyo-load5{ - animation: Load5 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; - -webkit-animation: Load5 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; -} - /* autocomplete */ .ui-select ul { outline: none; @@ -865,835 +754,6 @@ footer ul li > a { } /* autocomplete end */ -@keyframes Load5 { - 0% { - opacity: 0; - transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5); - } - 20% { - opacity: 0; - transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5); - } - - 80% { - opacity: 1; - transform: translate(0,0) rotate(0deg) scale(1, 1); - } -} - -@-webkit-keyframes Load5 { - 0% { - opacity: 0; - -webkit-transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5); - } - 20% { - opacity: 0; - -webkit-transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5); - } - - 80% { - opacity: 1; - -webkit-transform: translate(0,0) rotate(0deg) scale(1, 1); - } -} -@keyframes Load4 { - 0% { - opacity: 0; - transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5); - } - 20% { - opacity: 0; - transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5); - } - - 80% { - opacity: 1; - transform: translate(0,0) rotate(0deg) scale(1, 1); - } -} - -@-webkit-keyframes Load4 { - 0% { - opacity: 0; - -webkit-transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5); - } - 20% { - opacity: 0; - -webkit-transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5); - } - - 80% { - opacity: 1; - -webkit-transform: translate(0,0) rotate(0deg) scale(1, 1); - } -} -@keyframes Load3 { - 0% { - opacity: 0; - transform: translate(-30px,-30px) rotate(30deg) scale(1.5, 1.5); - } - 20% { - opacity: 0; - transform: translate(-30px,-30px) rotate(30deg) scale(1.5, 1.5); - } - - 80% { - opacity: 1; - transform: translate(0,0) rotate(0deg) scale(1, 1); - } -} - -@-webkit-keyframes Load3 { - 0% { - opacity: 0; - -webkit-transform: translate(-30px,-30px) rotate(30deg) scale(1.5, 1.5); - } - 20% { - opacity: 0; - -webkit-transform: translate(-30px,-30px) rotate(30deg) scale(1.5, 1.5); - } - - 80% { - opacity: 1; - -webkit-transform: translate(0,0) rotate(0deg) scale(1, 1); - } -} -@keyframes Load2 { - 0% { - opacity: 0; - transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5); - } - 20% { - opacity: 0; - transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5); - } - - 80% { - opacity: 1; - transform: translate(0,0) rotate(0deg) scale(1, 1); - } -} - -@-webkit-keyframes Load2 { - 0% { - opacity: 0; - -webkit-transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5); - } - 20% { - opacity: 0; - -webkit-transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5); - } - - 80% { - opacity: 1; - -webkit-transform: translate(0,0) rotate(0deg) scale(1, 1); - } -} -@keyframes Load1 { - 0% { - opacity: 0; - transform: translate(30px,30px) rotate(30deg) scale(1.5, 1.5); - } - 20% { - opacity: 0; - transform: translate(30px,30px) rotate(30deg) scale(1.5, 1.5); - } - - 80% { - opacity: 1; - transform: translate(0,0) rotate(0deg) scale(1, 1); - } -} - -@-webkit-keyframes Load1 { - 0% { - opacity: 0; - -webkit-transform: translate(30px,30px) rotate(30deg) scale(1.5, 1.5); - } - 20% { - opacity: 0; - -webkit-transform: translate(30px,30px) rotate(30deg) scale(1.5, 1.5); - } - - 80% { - opacity: 1; - -webkit-transform: translate(0,0) rotate(0deg) scale(1, 1); - } -} - -@keyframes Load0 { - 0% { - opacity: 0; - transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5); - } - 20% { - opacity: 0; - transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5); - } - - 80% { - opacity: 1; - transform: translate(0,0) rotate(0deg) scale(1, 1); - } -} - -@-webkit-keyframes Load0 { - 0% { - opacity: 0; - -webkit-transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5); - } - 20% { - opacity: 0; - -webkit-transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5); - } - - 80% { - opacity: 1; - -webkit-transform: translate(0,0) rotate(0deg) scale(1, 1); - } -} - -@keyframes xLeftMatrixR { - 0% { - opacity: 0; - transform: translateX(-50px) rotate(-30deg) scale(1.5, 1.5); - } - 20% { - opacity: 0; - transform: translateX(-50px) rotate(-30deg) scale(1.5, 1.5); - } - - 80% { - opacity: 1; - transform: translateX(0px) rotate(0deg) scale(1, 1); - } -} - -@-webkit-keyframes xLeftMatrixR { - 0% { - opacity: 0; - -webkit-transform: translateX(-50px) rotate(-30deg) scale(1.5, 1.5); - } - 20% { - opacity: 0; - -webkit-transform: translateX(-50px) rotate(-30deg) scale(1.5, 1.5); - } - - 80% { - opacity: 1; - -webkit-transform: translateX(0px) rotate(0deg) scale(1, 1); - } -} - -@keyframes xRightMatrixR { - 0% { - opacity: 0; - transform: translateX(50px) rotate(30deg) scale(1.5, 1.5); - } - 20% { - opacity: 0; - transform: translateX(50px) rotate(30deg) scale(1.5, 1.5); - } - - 80% { - opacity: 1; - transform: translateX(0px) rotate(0deg) scale(1, 1); - } -} - -@-webkit-keyframes xRightMatrixR { - 0% { - opacity: 0; - -webkit-transform: translateX(50px) rotate(30deg) scale(1.5, 1.5); - } - 20% { - opacity: 0; - -webkit-transform: translateX(50px) rotate(30deg) scale(1.5, 1.5); - } - - 80% { - opacity: 1; - -webkit-transform: translateX(0px) rotate(0deg) scale(1, 1); - } -} -@keyframes fromImgBlur { - 0% { - opacity: 0; - filter: blur(15px); - } - - 100% { - opacity: 1; - filter: blur(0px); - } -} - -@-webkit-keyframes fromImgBlur { - 0% { - opacity: 0; - -webkit-filter: blur(15px); - } - - 100% { - opacity: 1; - -webkit-filter: blur(0px); - } -} - -@-moz-keyframes fromImgBlur { - 0% { - opacity: 0; - -moz-filter: blur(15px); - } - - 100% { - opacity: 1; - -moz-filter: blur(0px); - } -} - -@-ms-keyframes fromImgBlur { - 0% { - opacity: 0; - -ms-filter: blur(15px); - } - - 100% { - opacity: 1; - -ms-filter: blur(0px); - } -} - -@-o-keyframes fromImgBlur { - 0% { - opacity: 0; - -o-filter: blur(15px); - } - - 100% { - opacity: 1; - -o-filter: blur(0px); - } -} - -@keyframes toImgBlur { - 0% { - opacity: 1; - filter: blur(0px); - } - - 100% { - opacity: 0; - filter: blur(15px); - } -} - -@-webkit-keyframes toImgBlur { - 0% { - opacity: 1; - -webkit-filter: blur(0px); - } - - 100% { - opacity: 0; - -webkit-filter: blur(15px); - } -} - -@-moz-keyframes toImgBlur { - 0% { - opacity: 1; - -moz-filter: blur(0px); - } - - 100% { - opacity: 0; - -moz-filter: blur(15px); - } -} - -@-ms-keyframes toImgBlur { - 0% { - opacity: 1; - -ms-filter: blur(0px); - } - - 100% { - opacity: 0; - -ms-filter: blur(15px); - } -} - -@-o-keyframes toImgBlur { - 0% { - opacity: 1; - -o-filter: blur(0px); - } - - 100% { - opacity: 0; - -o-filter: blur(15px); - } -} - -@keyframes yBottom { - 0% { - opacity: 0; - margin-top: 100px; - } - - 100% { - opacity: 1; - margin-top: 0px; - } -} - -@-webkit-keyframes yBottom { - 0% { - opacity: 0; - margin-top: 100px; - } - - 100% { - opacity: 1; - margin-top: 0px; - } -} - -@keyframes yTop { - 0% { - opacity: 0; - margin-top: -100px; - } - - 100% { - opacity: 1; - margin-top: 0px; - } -} - -@-webkit-keyframes yTop { - 0% { - opacity: 0; - margin-top: -100px; - } - - 100% { - opacity: 1; - margin-top: 0px; - } -} - -@keyframes xRight { - 0% { - opacity: 0; - margin-left: 100px; - } - - 100% { - opacity: 1; - margin-left: 0px; - } -} - -@-webkit-keyframes xRight { - 0% { - opacity: 0; - margin-left: 100px; - } - - 100% { - opacity: 1; - margin-right: 0px; - } -} - -@keyframes xLeft { - 0% { - opacity: 0; - margin-left: -100px; - } - - 100% { - opacity: 1; - margin-left: 0px; - } -} - -@-webkit-keyframes xLeft { - 0% { - opacity: 0; - margin-left: -100px; - } - - 100% { - opacity: 1; - margin-left: 0px; - } -} - -@keyframes mScale { - 0% { - opacity: 0; - transform: scale(0, 0); - } - - 100% { - opacity: 1; - transform: scale(1, 1); - } -} - -@-webkit-keyframes mScale { - 0% { - opacity: 0; - -webkit-transform: scale(0, 0); - } - - 100% { - opacity: 1; - -webkit-transform: scale(1, 1); - } -} - -@keyframes lScale { - 0% { - opacity: 0; - transform: scale(1.5, 1.5); - } - - 100% { - opacity: 1; - transform: scale(1, 1); - } -} - -@-webkit-keyframes lScale { - 0% { - opacity: 0; - -webkit-transform: scale(1.5, 1.5); - } - - 100% { - opacity: 1; - -webkit-transform: scale(1, 1); - } -} - -@keyframes mRotateScale { - 0% { - opacity: 0; - transform: rotate(90deg) scale(0, 0); - } - - 100% { - opacity: 1; - transform: rotate(0deg) scale(1, 1); - } -} - -@-webkit-keyframes mRotateScale { - 0% { - opacity: 0; - -webkit-transform: rotate(90deg) scale(0, 0); - } - - 100% { - opacity: 1; - -webkit-transform: rotate(0deg) scale(1, 1); - } -} - -@keyframes lRotateScale { - 0% { - opacity: 0; - transform: rotate(90deg) scale(1.5, 1.5); - } - - 100% { - opacity: 1; - transform: rotate(0deg) scale(1, 1); - } -} - -@-webkit-keyframes lRotateScale { - 0% { - opacity: 0; - -webkit-transform: rotate(90deg) scale(1.5, 1.5); - } - - 100% { - opacity: 1; - -webkit-transform: rotate(0deg) scale(1, 1); - } -} - -@keyframes RotaeX { - to { - transform: rotate(360deg); - } -} - -@-webkit-keyframes RotaeX { - to { - -webkit-transform: rotate(360deg); - } -} - -@keyframes scaleOut { - 0% { - transform: scale(1, 1); - } - - 100% { - transform: scale(0, 0); - } -} - -@-webkit-keyframes scaleOut { - 0% { - -webkit-transform: scale(1, 1); - ; - } - - 100% { - -webkit-transform: scale(0, 0); - ; - } -} - -@keyframes yTopMatrix { - 0% { - opacity: 0; - transform: translateY(-50px); - } - - 100% { - opacity: 1; - transform: translateY(0px); - } -} - -@-webkit-keyframes yTopMatrix { - 0% { - opacity: 0; - -webkit-transform: translateY(-50px); - } - - 100% { - opacity: 1; - -webkit-transform: translateY(0px); - } -} - -@keyframes yBottomMatrix { - 0% { - opacity: 0; - transform: translateY(50px); - } - - 100% { - opacity: 1; - transform: translateY(0px); - } -} - -@-webkit-keyframes yBottomMatrix { - 0% { - opacity: 0; - -webkit-transform: translateY(50px); - } - - 100% { - opacity: 1; - -webkit-transform: translateY(0px); - } -} - -@keyframes xLeftMatrix { - 0% { - opacity: 0; - transform: translateX(-50px); - } - - 100% { - opacity: 1; - transform: translateX(0px); - } -} - -@-webkit-keyframes xLeftMatrix { - 0% { - opacity: 0; - -webkit-transform: translateX(-50px); - } - - 100% { - opacity: 1; - -webkit-transform: translateX(0px); - } -} - -@keyframes xRightMatrix { - 0% { - opacity: 0; - transform: translateX(50px); - } - - 100% { - opacity: 1; - transform: translateX(0px); - } -} - -@-webkit-keyframes xRightMatrix { - 0% { - opacity: 0; - -webkit-transform: translateX(50px); - } - - 100% { - opacity: 1; - -webkit-transform: translateX(0px); - } -} - -@keyframes mainOut { - 0% { - transform: rotateY(0deg); - } - - 100% { - transform: rotateY(90deg); - } -} - -@-webkit-keyframes mainOut { - 0% { - -webkit-transform: rotateY(0deg); - } - - 100% { - -webkit-transform: rotateY(90deg); - } -} - -@keyframes alphaTo { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} - -@-webkit-keyframes alphaTo { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} - -@keyframes alphaOut { - 0% { - opacity: 1; - } - - 100% { - opacity: 0; - } -} - -@-webkit-keyframes alphaOut { - 0% { - opacity: 1; - } - - 100% { - opacity: 0; - } -} - -@-webkit-keyframes rotateCircle { - 0% { - -webkit-transform-origin: 50% 50%; - -webkit-transform: rotate(0deg); - } - - 100% { - -webkit-transform-origin: 50% 50%; - -webkit-transform: rotate(360deg); - } -} - -@keyframes rotateCircle { - 0% { - transform-origin: 50% 50%; - transform: rotate(0deg); - } - - 100% { - transform-origin: 50% 50%; - transform: rotate(360deg); - } -} - -@-webkit-keyframes rotateCircleBack { - 0% { - -webkit-transform-origin: 50% 50%; - -webkit-transform: rotate(360deg); - } - - 100% { - -webkit-transform-origin: 50% 50%; - -webkit-transform: rotate(0deg); - } -} - -@keyframes rotateCircleBack { - 0% { - transform-origin: 50% 50%; - transform: rotate(360deg); - } - - 100% { - transform-origin: 50% 50%; - transform: rotate(0deg); - } -} - -@keyframes loadTween { - 0% { - transform: rotateY(0deg); - } - - 50% { - transform: rotateY(180deg); - } - - 100% { - transform: rotateX(-180deg); - } -} - -@-webkit-keyframes loadTween { - 0% { - -webkit-transform: rotateY(0deg); - } - - 50% { - -webkit-transform: rotateY(180deg); - } - - 100% { - -webkit-transform: rotateX(-180deg); - } -} - /***************************************************************************/ .api-link { font-size: 16px; @@ -1745,7 +805,7 @@ footer ul li > a { } .code-boxes-col-1-1 { - width: 80%; + width: 90%; } .code-boxes-col-2-1 { diff --git a/site/theme.js b/site/theme.js index e8c48a3642..4bc9cd949b 100644 --- a/site/theme.js +++ b/site/theme.js @@ -164,7 +164,7 @@ module.exports = function(nico) { }); }, rootDirectoryIn: function(directory, rootDirectories) { - return rootDirectories.indexOf(directory.split('/')[0]) >= 0; + return rootDirectories.indexOf(getRootDirectory(directory)) >= 0; }, removeCodeBoxIdPrefix: function(id) { return id.split('-').slice(2).join('-');