From f7b8721ec663c9886a6684ed99e85a69a6fb14f8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BB=93=E5=8F=91=E5=8F=97=E9=95=BF=E7=94=9F?= Date: Thu, 9 May 2019 23:10:12 +0800 Subject: [PATCH] =?UTF-8?q?=E7=B2=BE=E7=AE=80js?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../_posts/前端杂烩/CSS动画(1)-transform.md | 2 +- themes/yilia/layout/_partial/after-footer.ejs | 5 +- themes/yilia/package-lock.json | 6 - themes/yilia/package.json | 1 - .../yilia/source-src/css/article-inner.scss | 6 +- themes/yilia/source-src/css/article-main.scss | 2 +- themes/yilia/source-src/css/aside.scss | 206 ++--- .../yilia/source-src/css/core/_animation.scss | 426 +++++---- themes/yilia/source-src/css/core/_mixin.scss | 840 +++++++++--------- themes/yilia/source-src/css/core/_reset.scss | 216 +++-- .../yilia/source-src/css/mobile-slider.scss | 8 - themes/yilia/source-src/css/mobile.scss | 14 +- themes/yilia/source-src/css/reward.scss | 92 +- themes/yilia/source-src/css/share.scss | 182 ++-- themes/yilia/source-src/css/social.scss | 294 +++--- themes/yilia/source-src/css/tags.scss | 2 +- themes/yilia/source-src/css/tooltip.scss | 370 ++++---- themes/yilia/source-src/js/fix.js | 2 +- themes/yilia/source-src/js/main.js | 4 +- themes/yilia/source-src/js/mobile.js | 26 +- themes/yilia/source-src/js/share.js | 22 +- themes/yilia/source-src/js/slider.js | 4 +- themes/yilia/source-src/js/viewer.js | 2 +- 23 files changed, 1337 insertions(+), 1395 deletions(-) diff --git a/source/_posts/前端杂烩/CSS动画(1)-transform.md b/source/_posts/前端杂烩/CSS动画(1)-transform.md index 78f7bf4..aac334c 100644 --- a/source/_posts/前端杂烩/CSS动画(1)-transform.md +++ b/source/_posts/前端杂烩/CSS动画(1)-transform.md @@ -63,7 +63,7 @@ deg是旋转的角度 , 正数表示顺时针旋转 , 负数表示逆时针旋 同名函数接受2个参数 , 分别表示在X轴和Y轴上的移动距离 , 正数代表向该轴的正方向移动 , 负数代表向负方向移动 ```css .translate_div { - tranform : translate(100px, 20px); + transform : translate(100px, 20px); } ``` ![translate-x-y](/images/前端杂烩/animation/translate-x-y.png) diff --git a/themes/yilia/layout/_partial/after-footer.ejs b/themes/yilia/layout/_partial/after-footer.ejs index cbf696d..8d5cef8 100644 --- a/themes/yilia/layout/_partial/after-footer.ejs +++ b/themes/yilia/layout/_partial/after-footer.ejs @@ -1,5 +1,5 @@ <%- partial('script') %> diff --git a/themes/yilia/package-lock.json b/themes/yilia/package-lock.json index 051f8df..e2bb133 100644 --- a/themes/yilia/package-lock.json +++ b/themes/yilia/package-lock.json @@ -2839,12 +2839,6 @@ "entities": "^1.1.1" } }, - "dom101": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/dom101/-/dom101-1.3.0.tgz", - "integrity": "sha1-1/yjBoYkAXG2zxfC6FXWoy+iyck=", - "dev": true - }, "domain-browser": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz", diff --git a/themes/yilia/package.json b/themes/yilia/package.json index 9b64680..077ef5e 100644 --- a/themes/yilia/package.json +++ b/themes/yilia/package.json @@ -21,7 +21,6 @@ "autoprefixer": "^6.5.1", "clean-webpack-plugin": "^0.1.15", "css-loader": "^2.1.1", - "dom101": "^1.3.0", "file-loader": "^3.0.1", "html-webpack-plugin": "^3.2.0", "mini-css-extract-plugin": "^0.6.0", diff --git a/themes/yilia/source-src/css/article-inner.scss b/themes/yilia/source-src/css/article-inner.scss index 7b874da..44c119d 100644 --- a/themes/yilia/source-src/css/article-inner.scss +++ b/themes/yilia/source-src/css/article-inner.scss @@ -48,8 +48,8 @@ .article-entry{ line-height: 1.8em; - padding-right: 7.6923%; - padding-left: 7.6923%; + padding-right: $articlePadding; + padding-left: $articlePadding; .post-count { // 字数统计 color: rgb(185, 185, 185); font-size: 14px; @@ -61,7 +61,7 @@ } } img { - transition: transform 0.2s ease-out,box-shadow 0.5s ease; + transition: transform 0.3s ease-out,box-shadow 0.4s ease; cursor: zoom-in; &:hover { transform: scale(1.05,1.05); diff --git a/themes/yilia/source-src/css/article-main.scss b/themes/yilia/source-src/css/article-main.scss index a46bc14..f1a5ca1 100644 --- a/themes/yilia/source-src/css/article-main.scss +++ b/themes/yilia/source-src/css/article-main.scss @@ -86,7 +86,7 @@ .article-header{ border-left: 5px solid #4d4d4d; padding: 30px 0px 15px 25px; - padding-left: 7.6923%; + padding-left: $articlePadding; } .article-meta{ diff --git a/themes/yilia/source-src/css/aside.scss b/themes/yilia/source-src/css/aside.scss index fa67358..7321a25 100644 --- a/themes/yilia/source-src/css/aside.scss +++ b/themes/yilia/source-src/css/aside.scss @@ -1,118 +1,118 @@ .wrap-side-operation { - position: fixed; - right: 40px; - bottom: 50px; - z-index: 999; - font-size: 14px; - .icon-plane { - color: $colorF; - text-shadow: 1px 1px 1px #509eb7; - opacity: 0.7; - font-size: 52px; - line-height: 40px; - width: 40px; - text-align: center; - display: block; - } -} -.mod-side-operation { - width: 40px; - text-align: center; -} -.jump-container:hover .icon-back { - background: rgba(36, 193, 246, 0.9); -} - -.jump-container, .toc-container { - position: relative; - cursor: pointer; - width: 40px; - height: 40px; - opacity: .8; -} -.jump-plan-container { - position: absolute; - top: -11px; - left: -4px; - width: 50px; - height: 61px; - overflow: hidden; - .jump-plane { - display: block; - position: absolute; - width: 42px; - height: 66px; - transform: translateY(68px); - left: -2px; - } -} -.mod-side-operation__jump-to-top .icon-back { - transition: 0.3s; + position: fixed; + right: 40px; + bottom: 50px; + z-index: 999; + font-size: 14px; + .icon-plane { color: $colorF; - background: #ccc; - transform: rotate(90deg); - font-size: 32px; + text-shadow: 1px 1px 1px #509eb7; + opacity: 0.7; + font-size: 52px; line-height: 40px; width: 40px; text-align: center; display: block; - &:hover { - background: #24c1f6; - color: #24c1f6; - } + } +} +.mod-side-operation { + width: 40px; + text-align: center; +} +.jump-container:hover .icon-back { + background: rgba(36, 193, 246, 0.9); +} + +.jump-container, .toc-container { + position: relative; + cursor: pointer; + width: 40px; + height: 40px; + opacity: .8; +} +.jump-plan-container { + position: absolute; + top: -11px; + left: -4px; + width: 50px; + height: 61px; + overflow: hidden; + .jump-plane { + display: block; + position: absolute; + width: 42px; + height: 66px; + transform: translateY(68px); + left: -2px; + } +} +.mod-side-operation__jump-to-top .icon-back { + transition: 0.3s; + color: $colorF; + background: #ccc; + transform: rotate(90deg); + font-size: 32px; + line-height: 40px; + width: 40px; + text-align: center; + display: block; + &:hover { + background: #24c1f6; + color: #24c1f6; + } } .toc-container.tooltip-left{ - background: $colorC; - margin-top: 10px; - transition: 0.3s; - &:hover { - background: rgba(36, 193, 246, 0.9); + background: $colorC; + margin-top: 10px; + transition: 0.3s; + &:hover { + background: rgba(36, 193, 246, 0.9); + } + .icon-font { + font-size: 22px; + line-height: 40px; + color: $colorF; + } + .tooltip { + width: 40px; + height: 40px; + top: 0; + left: 0; + } + .tooltip-east .tooltip-content { + min-height: 100px; + text-align: left; + padding: 5px 0 5px 20px; + right: 4.7em; + min-width: 200px; + width: initial; + font-size: 14px; + text-shadow: 1px 1px 1px #398199; + bottom: -10px; + transform-origin: 100% 100%; + transform: translate3d(0, -10px, 0) rotate3d(1, 1, 1, -30deg); + a { + color: $colorF; } - .icon-font { - font-size: 22px; - line-height: 40px; - color: $colorF; + &::after { + top: initial; + bottom: 23px; } - .tooltip { - width: 40px; - height: 40px; - top: 0; - left: 0; + .toc-article { + max-height: 500px; + overflow-x: hidden; + overflow-y: auto; } - .tooltip-east .tooltip-content { - min-height: 100px; - text-align: left; - padding: 5px 0 5px 20px; - right: 4.7em; - min-width: 200px; - width: initial; - font-size: 14px; - text-shadow: 1px 1px 1px #398199; - bottom: -10px; - transform-origin: 100% 100%; - transform: translate3d(0, -10px, 0) rotate3d(1, 1, 1, -30deg); - a { - color: $colorF; - } - &::after { - top: initial; - bottom: 23px; - } - .toc-article { - max-height: 500px; - overflow-x: hidden; - overflow-y: auto; - } - .toc-article li ol, .toc-article li ul { - margin-left: 30px; - } - .toc-article li { - white-space: nowrap; - } + .toc-article li ol, .toc-article li ul { + margin-left: 30px; } - .tooltip:hover .tooltip-content { - bottom: -10px; - transform: translate(0); + .toc-article li { + white-space: nowrap; } + } + .tooltip:hover .tooltip-content { + bottom: -10px; + transform: translate(0); + } } \ No newline at end of file diff --git a/themes/yilia/source-src/css/core/_animation.scss b/themes/yilia/source-src/css/core/_animation.scss index 8bdc8ad..8d2134e 100644 --- a/themes/yilia/source-src/css/core/_animation.scss +++ b/themes/yilia/source-src/css/core/_animation.scss @@ -6,385 +6,355 @@ //----------------------------------------------------- %animation-basic { - animation-duration: 0.3s; - animation-fill-mode: both; + animation-duration: 0.3s; + animation-fill-mode: both; } // fade in/out //----------------------------------------------------- @mixin animation-fade-in($className: fade, $from: 0) { - $name: str-insert(In, $className, 0); + $name: str-insert(In, $className, 0); - .#{$className}-in { - animation-name: $name; - @extend %animation-basic; - } - @include animation-fade($name: $name, $from: $from); + .#{$className}-in { + animation-name: $name; + @extend %animation-basic; + } + @include animation-fade($name: $name, $from: $from); } @mixin animation-fade-out($className: fade, $to: 0) { - $name: str-insert(Out, $className, 0); + $name: str-insert(Out, $className, 0); - .#{$className}-out { - animation-name: $name; - @extend %animation-basic; - } + .#{$className}-out { + animation-name: $name; + @extend %animation-basic; + } - @include animation-fade($name: $name, $from: 1, $to: $to); + @include animation-fade($name: $name, $from: 1, $to: $to); } // shrink in/out //----------------------------------------------------- @mixin animation-shrink-in($className: shrink, $from: 0.815) { - $name: str-insert(In, $className, 0); - - .#{$className}-in { - animation-name: $name; - @extend %animation-basic; + $name: str-insert(In, $className, 0); + + .#{$className}-in { + animation-name: $name; + @extend %animation-basic; + } + @keyframes #{$name} { + 0% { + opacity: 0; + transform: scale($from); } - @keyframes #{$name} { - 0% { - opacity: 0; - transform: scale($from); - } - 100% { - opacity: 1; - transform: scale(1); - } + 100% { + opacity: 1; + transform: scale(1); } + } } @mixin animation-shrink-out($className: shrink, $to: 1.185) { - $name: str-insert(Out, $className, 0); + $name: str-insert(Out, $className, 0); - .#{$className}-out { - animation-name: $name; - @extend %animation-basic; - } + .#{$className}-out { + animation-name: $name; + @extend %animation-basic; + } - @keyframes #{$name} { - 0% { - opacity: 1; - transform: scale(1); - } - 100% { - opacity: 0; - transform: scale($to); - } + @keyframes #{$name} { + 0% { + opacity: 1; + transform: scale(1); } + 100% { + opacity: 0; + transform: scale($to); + } + } } // down in/out //----------------------------------------------------- @mixin animation-down-in($className: down, $value: 100%) { - $name: str-insert(In, $className, 0); - - .#{$className}-in { - animation-name: $name; - @extend %animation-basic; - } + $name: str-insert(In, $className, 0); + + .#{$className}-in { + animation-name: $name; + @extend %animation-basic; + } - @keyframes #{$name} { - 0% { - opacity: 0; - transform: translate(0, $value); - } - 100% { - opacity: 1; - transform: translate(0, 0); - } + @keyframes #{$name} { + 0% { + opacity: 0; + transform: translate(0, $value); } + 100% { + opacity: 1; + transform: translate(0, 0); + } + } } @mixin animation-down-out($className: down, $value: 100%) { - $name: str-insert(Out, $className, 0); + $name: str-insert(Out, $className, 0); - .#{$className}-out { - animation-name: $name; - @extend %animation-basic; - } + .#{$className}-out { + animation-name: $name; + @extend %animation-basic; + } - @keyframes #{$name} { - 0% { - opacity: 1; - transform: translate(0, 0); - } - 100% { - opacity: 0; - transform: translate(0, $value); - } + @keyframes #{$name} { + 0% { + opacity: 1; + transform: translate(0, 0); } + 100% { + opacity: 0; + transform: translate(0, $value); + } + } } // up in/out //----------------------------------------------------- @mixin animation-up-in($className: up, $value: -100%) { - $name: str-insert(In, $className, 0); - - .#{$className}-in { - animation-name: $name; - @extend %animation-basic; - } + $name: str-insert(In, $className, 0); + + .#{$className}-in { + animation-name: $name; + @extend %animation-basic; + } - @keyframes #{$name} { - 0% { - opacity: 0; - transform: translate(0, $value); - } - 100% { - opacity: 1; - transform: translate(0, 0); - } + @keyframes #{$name} { + 0% { + opacity: 0; + transform: translate(0, $value); } + 100% { + opacity: 1; + transform: translate(0, 0); + } + } } @mixin animation-up-out($className: up, $value: -100%) { - $name: str-insert(Out, $className, 0); + $name: str-insert(Out, $className, 0); - .#{$className}-out { - animation-name: $name; - @extend %animation-basic; - } + .#{$className}-out { + animation-name: $name; + @extend %animation-basic; + } - @keyframes #{$name} { - 0% { - opacity: 1; - transform: translate(0, 0); - } - 100% { - opacity: 0; - transform: translate(0, $value); - } + @keyframes #{$name} { + 0% { + opacity: 1; + transform: translate(0, 0); } + 100% { + opacity: 0; + transform: translate(0, $value); + } + } } // left in/out //----------------------------------------------------- @mixin animation-left-in($className: left, $value: -100%) { - $name: str-insert(In, $className, 0); - - .#{$className}-in { - animation-name: $name; - @extend %animation-basic; - } + $name: str-insert(In, $className, 0); + + .#{$className}-in { + animation-name: $name; + @extend %animation-basic; + } - @keyframes #{$name} { - 0% { - opacity: 0; - transform: translate($value, 0); - } - 100% { - opacity: 1; - transform: translate(0, 0); - } + @keyframes #{$name} { + 0% { + opacity: 0; + transform: translate($value, 0); } + 100% { + opacity: 1; + transform: translate(0, 0); + } + } } @mixin animation-left-out($className: left, $value: -100%) { - $name: str-insert(Out, $className, 0); + $name: str-insert(Out, $className, 0); - .#{$className}-out { - animation-name: $name; - @extend %animation-basic; - } + .#{$className}-out { + animation-name: $name; + @extend %animation-basic; + } - @keyframes #{$name} { - 0% { - opacity: 1; - transform: translate(0, 0); - } - 100% { - opacity: 0; - transform: translate($value, 0); - } + @keyframes #{$name} { + 0% { + opacity: 1; + transform: translate(0, 0); } + 100% { + opacity: 0; + transform: translate($value, 0); + } + } } // right in/out //----------------------------------------------------- @mixin animation-right-in($className: right, $value: 100%) { - $name: str-insert(In, $className, 0); - - .#{$className}-in { - animation-name: $name; - @extend %animation-basic; - } + $name: str-insert(In, $className, 0); + + .#{$className}-in { + animation-name: $name; + @extend %animation-basic; + } - @keyframes #{$name} { - 0% { - opacity: 0; - transform: translate($value, 0); - } - 100% { - opacity: 1; - transform: translate(0, 0); - } + @keyframes #{$name} { + 0% { + opacity: 0; + transform: translate($value, 0); } + 100% { + opacity: 1; + transform: translate(0, 0); + } + } } @mixin animation-right-out($className: right, $value: 100%) { - $name: str-insert(Out, $className, 0); + $name: str-insert(Out, $className, 0); - .#{$className}-out { - animation-name: $name; - @extend %animation-basic; - } + .#{$className}-out { + animation-name: $name; + @extend %animation-basic; + } - @keyframes #{$name} { - 0% { - opacity: 1; - transform: translate(0, 0); - } - 100% { - opacity: 0; - transform: translate($value, 0); - } + @keyframes #{$name} { + 0% { + opacity: 1; + transform: translate(0, 0); } + 100% { + opacity: 0; + transform: translate($value, 0); + } + } } /*弹性动画*/ @keyframes leftIn { from, 60%, 75%, 90%, to { - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { - transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } 60% { - transform: translate3d(358px, 0, 0); + transform: translate3d(358px, 0, 0); } 75% { - transform: translate3d(323px, 0, 0); + transform: translate3d(323px, 0, 0); } 90% { - transform: translate3d(338px, 0, 0); + transform: translate3d(338px, 0, 0); } to { - transform: translate3d(333px, 0, 0); + transform: translate3d(333px, 0, 0); } } %anmLeftIn { - animation-duration: .8s; - animation-fill-mode: both; - animation-name: leftIn; + animation-duration: .8s; + animation-fill-mode: both; + animation-name: leftIn; } @keyframes leftOut { from, 60%, 75%, 90%, to { - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { - transform: translate3d(333px, 0, 0); + transform: translate3d(333px, 0, 0); } 60% { - transform: translate3d(-25px, 0, 0); + transform: translate3d(-25px, 0, 0); } 75% { - transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0); } 90% { - transform: translate3d(-5px, 0, 0); + transform: translate3d(-5px, 0, 0); } to { - transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } %anmLeftOut { - animation-duration: .8s; - animation-name: leftOut; + animation-duration: .8s; + animation-name: leftOut; } @keyframes smallLeftIn { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } - - 0% { - transform: translate3d(0, 0, 0); - } - - 60% { - transform: translate3d(325px, 0, 0); - } - - 75% { - transform: translate3d(290px, 0, 0); - } - - 90% { - transform: translate3d(305px, 0, 0); - } - - to { - transform: translate3d(300px, 0, 0); - } + 0% {transform: translate3d(0, 0, 0);} + 60% {transform: translate3d(325px, 0, 0);} + 75% {transform: translate3d(290px, 0, 0);} + 90% {transform: translate3d(305px, 0, 0);} + to {transform: translate3d(300px, 0, 0);} } %anmSmallLeftIn { - animation-duration: .8s; - animation-fill-mode: both; - animation-name: smallLeftIn; + animation-duration: .8s; + animation-fill-mode: both; + animation-name: smallLeftIn; } @keyframes smallleftOut { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } - - 0% { - transform: translate3d(333px, 0, 0); - } - - 60% { - transform: translate3d(-25px, 0, 0); - } - - 75% { - transform: translate3d(10px, 0, 0); - } - - 90% { - transform: translate3d(-5px, 0, 0); - } - - to { - transform: translate3d(0, 0, 0); - } + 0% {transform: translate3d(333px, 0, 0);} + 60% {transform: translate3d(-25px, 0, 0);} + 75% {transform: translate3d(10px, 0, 0);} + 90% {transform: translate3d(-5px, 0, 0);} + to {transform: translate3d(0, 0, 0);} } %anmSmallLeftOut { - animation-duration: .8s; - animation-fill-mode: both; - animation-name: smallleftOut; + animation-duration: .8s; + animation-fill-mode: both; + animation-name: smallleftOut; } // 头像旋转动画 @keyframes profilepic { - 0% { - transform: rotate(360deg); - } - 100% { - transform: rotate(0deg); - } + 0% { + transform: rotate(360deg); + } + 100% { + transform: rotate(0deg); + } } %picRotate { - animation: profilepic 5s linear infinite; + animation: profilepic 5s linear infinite; } \ No newline at end of file diff --git a/themes/yilia/source-src/css/core/_mixin.scss b/themes/yilia/source-src/css/core/_mixin.scss index 4d19523..9f06e6d 100644 --- a/themes/yilia/source-src/css/core/_mixin.scss +++ b/themes/yilia/source-src/css/core/_mixin.scss @@ -14,278 +14,278 @@ // Center-align a block level element @mixin center-block($extend: true) { - @if $extend { - @extend %center-block; - } - @else { - margin-left: auto; - margin-right: auto; - } + @if $extend { + @extend %center-block; + } + @else { + margin-left: auto; + margin-right: auto; + } } %center-block { - @include center-block(false); + @include center-block(false); } // clearfix @mixin clearfix($extend: true) { - @if $extend { - @extend %clearfix; + @if $extend { + @extend %clearfix; + } + @else { + &::before, + &::after { + content: ""; + display: table; } - @else { - &::before, - &::after { - content: ""; - display: table; - } - &::after { - clear: both; - } + &::after { + clear: both; } + } } %clearfix { - @include clearfix(false); + @include clearfix(false); } // Hide only visually, but have it available for screenreaders // 只隐藏于视觉，屏幕浏览器可以阅读 @mixin hidden-clip($extend: true) { - @if $extend { - @extend %hidden-clip; - } - @else { - position: absolute; - clip: rect(1px, 1px, 1px, 1px); - } + @if $extend { + @extend %hidden-clip; + } + @else { + position: absolute; + clip: rect(1px, 1px, 1px, 1px); + } } %hidden-clip { - @include hidden-clip(false); + @include hidden-clip(false); } // ellipsis @mixin ellipsis($extend: true) { - @if $extend { - @extend %ellipsis; - } - @else { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } + @if $extend { + @extend %ellipsis; + } + @else { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } } %ellipsis { - @include ellipsis(false); + @include ellipsis(false); } // ellipsis lines // only old webkit flex box @mixin ellipsis-lines($lines: 2) { - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: $lines; - -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: $lines; + -webkit-box-orient: vertical; } // word-break @mixin word-break($extend: true) { - @if $extend { - @extend %word-break; - } - @else { - white-space: normal; - word-wrap: break-word; - word-break: break-all; - } + @if $extend { + @extend %word-break; + } + @else { + white-space: normal; + word-wrap: break-word; + word-break: break-all; + } } %word-break { - @include word-break(false); + @include word-break(false); } // disabled // add !important @mixin disabled($colorText: map-get($colorDisabled, text), $colorBg: map-get($colorDisabled, bg), $colorBorder: false) { - background-color: $colorBg !important; - color: $colorText !important; - cursor: default !important; - pointer-events: none !important; - @if $colorBorder { - border: 1px solid map-get($colorDisabled, border); - } + background-color: $colorBg !important; + color: $colorText !important; + cursor: default !important; + pointer-events: none !important; + @if $colorBorder { + border: 1px solid map-get($colorDisabled, border); + } } %disabled { - @include disabled; + @include disabled; } // image replace text @mixin ir($extend: true) { - @if $extend { - @extend %ir; - } - @else { - font: 0/0 a; - text-shadow: none; - border: 0 none; - color: transparent; - } + @if $extend { + @extend %ir; + } + @else { + font: 0/0 a; + text-shadow: none; + border: 0 none; + color: transparent; + } } %ir { - @include ir(false); + @include ir(false); } // fixed top or bottom or bottom & top @mixin fixed($pos: 0) { - position: fixed; - left: 0; - right: 0; - @if $pos == bottom { - bottom: 0; - } @else if $pos == all { - top: 0; - bottom: 0; - } @else { - top: $pos; - } + position: fixed; + left: 0; + right: 0; + @if $pos == bottom { + bottom: 0; + } @else if $pos == all { + top: 0; + bottom: 0; + } @else { + top: $pos; + } } %fixed-top { - @include fixed; + @include fixed; } %fixed-bottom { - @include fixed(bottom); + @include fixed(bottom); } // justify // 左右对齐 @mixin justify($extend: true) { - @if $extend { - @extend %justify; - } - @else { - display: flex; - justify-content: space-between; - } + @if $extend { + @extend %justify; + } + @else { + display: flex; + justify-content: space-between; + } } %justify { - @include justify(false); + @include justify(false); } // retina border // 0.5px实现 ios9 @mixin retina-one-px() { - @supports (border-width: 0.5px) { - @media only screen and (-webkit-min-device-pixel-ratio: 2), screen and (-webkit-min-device-pixel-ratio: 3) { - border-width: 0.5px; - } + @supports (border-width: 0.5px) { + @media only screen and (-webkit-min-device-pixel-ratio: 2), screen and (-webkit-min-device-pixel-ratio: 3) { + border-width: 0.5px; } + } } // linear-gradient实现 // 安卓4.3- 不支持background-size的百分比 @mixin retina-one-px-bg($direction: top, $color: $colorBorder) { - background-repeat: no-repeat; - @if $direction == top { - background-image: linear-gradient(to bottom, $color 50%, transparent 50%); - background-size: 100% 1px; - } - @if $direction == bottom { - background-image: linear-gradient(to top, $color 50%, transparent 50%); - background-size: 100% 1px; - background-position: left bottom; - } - @if $direction == left { - background-image: linear-gradient(to right, $color 50%, transparent 50%); - background-size: 1px 100%; - } - @if $direction == right { - background-image: linear-gradient(to left, $color 50%, transparent 50%); - background-size: 1px 100%; - background-position: right top; - } - @if $direction == v { // 左右两个边框 - background-image: linear-gradient(to right, $color 50%, transparent 50%),linear-gradient(to left, $color 50%, transparent 50%); - background-size: 1px 100%; - background-position: left top, right top; - } - @if $direction == h { // 上下两个边框 - background-image: linear-gradient(to bottom, $color 50%, transparent 50%), linear-gradient(to top, $color 50%, transparent 50%); - background-size: 100% 1px; - background-position: left top, left bottom; - } - @if $direction == all { // 上下左右四个边框 - background-image: linear-gradient(to bottom, $color 50%, transparent 50%), linear-gradient(to top, $color 50%, transparent 50%), linear-gradient(to right, $color 50%, transparent 50%),linear-gradient(to left, $color 50%, transparent 50%); - background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%; - background-position: left top, left bottom, left top, right top; - } + background-repeat: no-repeat; + @if $direction == top { + background-image: linear-gradient(to bottom, $color 50%, transparent 50%); + background-size: 100% 1px; + } + @if $direction == bottom { + background-image: linear-gradient(to top, $color 50%, transparent 50%); + background-size: 100% 1px; + background-position: left bottom; + } + @if $direction == left { + background-image: linear-gradient(to right, $color 50%, transparent 50%); + background-size: 1px 100%; + } + @if $direction == right { + background-image: linear-gradient(to left, $color 50%, transparent 50%); + background-size: 1px 100%; + background-position: right top; + } + @if $direction == v { // 左右两个边框 + background-image: linear-gradient(to right, $color 50%, transparent 50%),linear-gradient(to left, $color 50%, transparent 50%); + background-size: 1px 100%; + background-position: left top, right top; + } + @if $direction == h { // 上下两个边框 + background-image: linear-gradient(to bottom, $color 50%, transparent 50%), linear-gradient(to top, $color 50%, transparent 50%); + background-size: 100% 1px; + background-position: left top, left bottom; + } + @if $direction == all { // 上下左右四个边框 + background-image: linear-gradient(to bottom, $color 50%, transparent 50%), linear-gradient(to top, $color 50%, transparent 50%), linear-gradient(to right, $color 50%, transparent 50%),linear-gradient(to left, $color 50%, transparent 50%); + background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%; + background-position: left top, left bottom, left top, right top; + } } // border和transform实现 // 注意before和after的层级问题 @mixin retina-one-px-border($direction: top, $color: $colorBorder) { - position: absolute; - left: 0; - top: 0; - box-sizing: border-box; + position: absolute; + left: 0; + top: 0; + box-sizing: border-box; - @if $direction == top or $direction == bottom{ - right: 0; - height: 0; - transform: scaleY(0.5); - border-top: 1px solid $color; - } - @if $direction == bottom { - top: auto; - bottom: 0; - } - @if $direction == right or $direction == left{ - width: 0; - bottom: 0; - transform: scaleX(0.5); - border-left: 1px solid $color; - } - @if $direction == right { - left: auto; - right: 0; - } - @if $direction == all { - width: 200%; - height: 200%; - transform-origin: left top; - transform: scale(0.5); - border: 1px solid $color; - } + @if $direction == top or $direction == bottom{ + right: 0; + height: 0; + transform: scaleY(0.5); + border-top: 1px solid $color; + } + @if $direction == bottom { + top: auto; + bottom: 0; + } + @if $direction == right or $direction == left{ + width: 0; + bottom: 0; + transform: scaleX(0.5); + border-left: 1px solid $color; + } + @if $direction == right { + left: auto; + right: 0; + } + @if $direction == all { + width: 200%; + height: 200%; + transform-origin: left top; + transform: scale(0.5); + border: 1px solid $color; + } } // border top & bottom %border-tb { - position: relative; - &::before { - content: ""; - @include retina-one-px-border(top); - z-index: 1; - } - &::after { - content: ""; - @include retina-one-px-border(bottom); - } + position: relative; + &::before { + content: ""; + @include retina-one-px-border(top); + z-index: 1; + } + &::after { + content: ""; + @include retina-one-px-border(bottom); + } } // border all %border-all { - position: relative; - &::before { - content: ""; - @include retina-one-px-border(all); - z-index: -1; - } + position: relative; + &::before { + content: ""; + @include retina-one-px-border(all); + z-index: -1; + } } // mixin @@ -295,188 +295,188 @@ // table 等 // $child 参数请使用单引号，因为用于子元素选择器 @mixin equal-table($child: 'li') { - display: table; - table-layout: fixed; - width: 100%; + display: table; + table-layout: fixed; + width: 100%; - #{unquote($child)} { - display: table-cell; - } + #{unquote($child)} { + display: table-cell; + } } // flex 等分 // $child 参数请使用单引号，因为用于子元素选择器 @mixin equal-flex($child: 'li') { - display: flex; + display: flex; - #{unquote($child)} { - flex: 1; - width: 1%; - } + #{unquote($child)} { + flex: 1; + width: 1%; + } } // line equal gap // $child 参数请使用单引号，因为用于子元素选择器 @mixin line-equal-gap($gap: 10px, $child: 'li', $lr: true) { - display: flex; + display: flex; - @if $lr { - padding-left: $gap; - padding-right: $gap; - } + @if $lr { + padding-left: $gap; + padding-right: $gap; + } - #{unquote($child)} { - flex: 1; - width: 1%; - &:not(:first-of-type){ - margin-left: $gap; - } + #{unquote($child)} { + flex: 1; + width: 1%; + &:not(:first-of-type){ + margin-left: $gap; } + } } // line equal item @mixin line-equal-item($lr: true) { - display: flex; - justify-content: space-between; - @if $lr { - &::before, - &::after { - content: ""; - } + display: flex; + justify-content: space-between; + @if $lr { + &::before, + &::after { + content: ""; } + } } // flex center @mixin center-flex($direction: both) { - display: flex; - @if $direction == both { - justify-content: center; - align-items: center; - } - @else if $direction == x { - justify-content: center; - } - @else if $direction == y { - align-items: center; - } + display: flex; + @if $direction == both { + justify-content: center; + align-items: center; + } + @else if $direction == x { + justify-content: center; + } + @else if $direction == y { + align-items: center; + } } // translate center @mixin center-translate($direction: both) { - position: absolute; - @if $direction == both { - top: 50%; - left: 50%; - transform: translate3d(-50%, -50%, 0); - } - @else if $direction == x { - left: 50%; - transform: translate3d(-50%, 0, 0); - } - @else if $direction == y { - top: 50%; - transform: translate3d(0, -50%, 0); - } + position: absolute; + @if $direction == both { + top: 50%; + left: 50%; + transform: translate3d(-50%, -50%, 0); + } + @else if $direction == x { + left: 50%; + transform: translate3d(-50%, 0, 0); + } + @else if $direction == y { + top: 50%; + transform: translate3d(0, -50%, 0); + } } // object wrap // $child 参数请使用单引号，因为用于子元素选择器 @mixin object-wrap($percent: 100%, $child: 'img') { - position: relative; - padding-top: $percent; - height: 0; + position: relative; + padding-top: $percent; + height: 0; - #{unquote($child)} { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } + #{unquote($child)} { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } } // triangle 三角箭头 // 可采用空元素或伪元素生成，具体定位这里不涉及 %triangle-basic { - content: ""; - height: 0; - width: 0; - overflow: hidden; + content: ""; + height: 0; + width: 0; + overflow: hidden; } @mixin triangle($direction: top, $borderWidth: 6px, $borderColor: $colorC) { - @extend %triangle-basic; - @if $direction == top { - border-bottom: $borderWidth solid $borderColor; - border-left: $borderWidth dashed transparent; - border-right: $borderWidth dashed transparent; - } - @else if $direction == right { - border-left: $borderWidth solid $borderColor; - border-top: $borderWidth dashed transparent; - border-bottom: $borderWidth dashed transparent; - } - @else if $direction == bottom { - border-top: $borderWidth solid $borderColor; - border-left: $borderWidth dashed transparent; - border-right: $borderWidth dashed transparent; - } - @else if $direction == left { - border-right: $borderWidth solid $borderColor; - border-top: $borderWidth dashed transparent; - border-bottom: $borderWidth dashed transparent; - } + @extend %triangle-basic; + @if $direction == top { + border-bottom: $borderWidth solid $borderColor; + border-left: $borderWidth dashed transparent; + border-right: $borderWidth dashed transparent; + } + @else if $direction == right { + border-left: $borderWidth solid $borderColor; + border-top: $borderWidth dashed transparent; + border-bottom: $borderWidth dashed transparent; + } + @else if $direction == bottom { + border-top: $borderWidth solid $borderColor; + border-left: $borderWidth dashed transparent; + border-right: $borderWidth dashed transparent; + } + @else if $direction == left { + border-right: $borderWidth solid $borderColor; + border-top: $borderWidth dashed transparent; + border-bottom: $borderWidth dashed transparent; + } } // v arrow 方向箭头 @mixin v-arrow($direction: right, $borderWidth: 2px, $size: 10px) { - display: inline-block; - vertical-align: middle; - width: $size; - height: $size; - @if $direction == top { - border-top: $borderWidth solid currentColor; - border-right: $borderWidth solid currentColor; - transform: rotate(-45deg); - } - @else if $direction == right { - border-top: $borderWidth solid currentColor; - border-right: $borderWidth solid currentColor; - transform: rotate(45deg); - } - @else if $direction == bottom { - border-left: $borderWidth solid currentColor; - border-bottom: $borderWidth solid currentColor; - transform: rotate(-45deg); - } - @if $direction == left { - border-left: $borderWidth solid currentColor; - border-bottom: $borderWidth solid currentColor; - transform: rotate(45deg); - } + display: inline-block; + vertical-align: middle; + width: $size; + height: $size; + @if $direction == top { + border-top: $borderWidth solid currentColor; + border-right: $borderWidth solid currentColor; + transform: rotate(-45deg); + } + @else if $direction == right { + border-top: $borderWidth solid currentColor; + border-right: $borderWidth solid currentColor; + transform: rotate(45deg); + } + @else if $direction == bottom { + border-left: $borderWidth solid currentColor; + border-bottom: $borderWidth solid currentColor; + transform: rotate(-45deg); + } + @if $direction == left { + border-left: $borderWidth solid currentColor; + border-bottom: $borderWidth solid currentColor; + transform: rotate(45deg); + } } // selector // 改变父元素状态，如:hover或.active // 父元素不能有组合选择器，如.a, .b{} // .parent{ -// .child{ -// @include parent-state(":hover"){ -// color: #f00; -// } +// .child{ +// @include parent-state(":hover"){ +// color: #f00; // } +// } // } // .parent:hover .child { -// color: #f00; +// color: #f00; // } @mixin parent-state($states...) { - $parent: nth(nth(&, 1), (length(nth(&, 1))-1)); - - @each $state in $states { - @at-root #{selector-replace(&, $parent, str-insert($state, $parent, 0))} { - @content; - } + $parent: nth(nth(&, 1), (length(nth(&, 1))-1)); + + @each $state in $states { + @at-root #{selector-replace(&, $parent, str-insert($state, $parent, 0))} { + @content; } + } } // animation-fade @@ -485,17 +485,17 @@ // @include animation-fade($from: 1, $to: 0); @mixin animation-fade($name: animationFade, $from: 0, $to: false){ @keyframes #{animationFade} { - @if $from { - from { - opacity: $from; - } + @if $from { + from { + opacity: $from; } - @if $to { - to { - opacity: $to; - } + } + @if $to { + to { + opacity: $to; } } + } } // animation-translate @@ -504,34 +504,34 @@ // @include animation-translate($from: xy -50% -50%, $to: y -100%); // @include animation-translate($from: y 100px, $to: y 0px); @mixin animation-translate($name: animationTranslate, $from: y -100%, $to: false) { - @keyframes #{$name} { - @if $from and length($from) > 1 { - from { - @if nth($from, 1) == x { - transform: translate(nth($from, 2), 0); - } - @if nth($from, 1) == y { - transform: translate(0, nth($from, 2)); - } - @if nth($from, 1) == xy or nth($from, 1) == both { - transform: translate(nth($from, 2), nth($from, 3)); - } - } + @keyframes #{$name} { + @if $from and length($from) > 1 { + from { + @if nth($from, 1) == x { + transform: translate(nth($from, 2), 0); } - @if $to andd length($to) > 1 { - to { - @if nth($to, 1) == x { - transform: translate(nth($to, 2), 0); - } - @if nth($to, 1) == y { - transform: translate(0, nth($to, 2)); - } - @if nth($to, 1) == xy or nth($to, 1) == both { - transform: translate(nth($to, 2), nth($to, 3)); - } - } + @if nth($from, 1) == y { + transform: translate(0, nth($from, 2)); } + @if nth($from, 1) == xy or nth($from, 1) == both { + transform: translate(nth($from, 2), nth($from, 3)); + } + } } + @if $to andd length($to) > 1 { + to { + @if nth($to, 1) == x { + transform: translate(nth($to, 2), 0); + } + @if nth($to, 1) == y { + transform: translate(0, nth($to, 2)); + } + @if nth($to, 1) == xy or nth($to, 1) == both { + transform: translate(nth($to, 2), nth($to, 3)); + } + } + } + } } // % @@ -540,74 +540,74 @@ // bar line %bar-line { - line-height: $barHeight - 10px; - padding: 5px 10px; - position: relative; - display: block; - overflow: hidden; - @if $activeStateSwitch{ - &:active, - &:hover { - background-color: darken($colorF, 3%); - } - } - &:not(:first-of-type)::before { - content: ""; - @include retina-one-px-border; + line-height: $barHeight - 10px; + padding: 5px 10px; + position: relative; + display: block; + overflow: hidden; + @if $activeStateSwitch{ + &:active, + &:hover { + background-color: darken($colorF, 3%); } + } + &:not(:first-of-type)::before { + content: ""; + @include retina-one-px-border; + } } // item arrow, 右侧箭头跳转指向 %item-v-right { - &::after { - content: ""; - @include v-arrow; - color: $colorC; - position: absolute; - right: 15px; - top: 50%; - margin-top: -1px; - transform: rotate(45deg) translate(0, -50%); - box-sizing: border-box; - } + &::after { + content: ""; + @include v-arrow; + color: $colorC; + position: absolute; + right: 15px; + top: 50%; + margin-top: -1px; + transform: rotate(45deg) translate(0, -50%); + box-sizing: border-box; + } } // 间隔列表 %gap-item{ - position: relative; - background: #fff; - margin: 10px 0; - @if $activeStateSwitch{ - &:active, - &:hover { - background-color: darken($colorF, 3%); - } - } - &::before{ - content: ""; - @include retina-one-px-border; - } - &::after{ - content: ""; - @include retina-one-px-border(bottom); + position: relative; + background: #fff; + margin: 10px 0; + @if $activeStateSwitch{ + &:active, + &:hover { + background-color: darken($colorF, 3%); } + } + &::before{ + content: ""; + @include retina-one-px-border; + } + &::after{ + content: ""; + @include retina-one-px-border(bottom); + } } // 下面的几个%，由于版本或前缀，所以设计成% //----------------------------------------------------- // flex %display-flex { - display: flex; + display: flex; } // all-transition %transition-all { - transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; } // translate3d %translate3d { - transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } @@ -616,54 +616,54 @@ // btn-basic // 按钮基本样式，联合申明 %btn-basic { - display: inline-block; - vertical-align: middle; - cursor: pointer; - text-align: center; - border: 1px solid transparent; - box-sizing: border-box; - user-select: none; - padding: 0 1em; - white-space: nowrap; + display: inline-block; + vertical-align: middle; + cursor: pointer; + text-align: center; + border: 1px solid transparent; + box-sizing: border-box; + user-select: none; + padding: 0 1em; + white-space: nowrap; } // btn-size // 按钮大小 @mixin btn-size($padding: 1em, $height: $barHeight, $radius: 3px) { - padding: 0 $padding; - line-height: $height - 2px; // 减掉2px的上下高度 - @if $radius { - border-radius: $radius; - } + padding: 0 $padding; + line-height: $height - 2px; // 减掉2px的上下高度 + @if $radius { + border-radius: $radius; + } } // btn-color // 包括按钮背景色，文本色，是否有边框 @mixin btn-color($colorText: #333, $colorBg: #666, $colorBorder: false) { - color: nth($colorText, 1); - background-color: nth($colorBg, 1); - @if $colorBorder { - border-color: nth($colorBorder, 1); + color: nth($colorText, 1); + background-color: nth($colorBg, 1); + @if $colorBorder { + border-color: nth($colorBorder, 1); + } + &:hover, + &:active { + @if length($colorText) == 2 { + color: nth($colorText, 2); } - &:hover, - &:active { - @if length($colorText) == 2 { - color: nth($colorText, 2); - } - @if length($colorBg) == 2 { - background-color: nth($colorBg, 2); - } @else { - @if lightness($colorBg) > 40% { - background-color: darken($colorBg, 5%); - } - @else { - background-color: lighten($colorBg, 5%); - } - } - @if $colorBorder and length($colorBorder) == 2 { - border-color: nth($colorBorder, 2); // $colorBorder: #dbdbdb #ccc => #ccc - } + @if length($colorBg) == 2 { + background-color: nth($colorBg, 2); + } @else { + @if lightness($colorBg) > 40% { + background-color: darken($colorBg, 5%); + } + @else { + background-color: lighten($colorBg, 5%); + } } + @if $colorBorder and length($colorBorder) == 2 { + border-color: nth($colorBorder, 2); // $colorBorder: #dbdbdb #ccc => #ccc + } + } } @@ -672,28 +672,28 @@ // 为颜色添加白色，以百分比形式 @function tint($color, $percent) { - @return mix(white, $color, $percent); + @return mix(white, $color, $percent); } // 为颜色添加黑色，以百分比形式 @function shade($color, $percent) { - @return mix(black, $color, $percent); + @return mix(black, $color, $percent); } %shadow { - box-shadow: 0px 0px 6px 0px rgba(0,0,0,.75); + box-shadow: 0px 0px 6px 0px rgba(0,0,0,.75); } %trans { - transition: all 0.2s ease-in; - -ms-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + -ms-transition: all 0.2s ease-in; } %trans8 { - transition: all 0.8s ease-in; - -ms-transition: all 0.8s ease-in; + transition: all 0.8s ease-in; + -ms-transition: all 0.8s ease-in; } %paper-bg { - background: url('./img/checkered-pattern.png') repeat #5d5d5d; + background: url('./img/checkered-pattern.png') repeat #5d5d5d; } diff --git a/themes/yilia/source-src/css/core/_reset.scss b/themes/yilia/source-src/css/core/_reset.scss index 70b06d3..c875f55 100644 --- a/themes/yilia/source-src/css/core/_reset.scss +++ b/themes/yilia/source-src/css/core/_reset.scss @@ -12,21 +12,21 @@ // 1. Prevent mobile text size adjust after orientation change, without disabling user zoom. // 2. Remove the gray background color from tap, default value is inherit html { - -ms-text-size-adjust: 100%; // 1 - -webkit-text-size-adjust: 100%; // 1 - -webkit-tap-highlight-color: transparent; // 2 - height: 100%; + -ms-text-size-adjust: 100%; // 1 + -webkit-text-size-adjust: 100%; // 1 + -webkit-tap-highlight-color: transparent; // 2 + height: 100%; } // 1. Remove default margin body { - margin: 0; // 1 - font-size: $fontSize; - font-family: $fontFamily; - line-height: $fontLineHeight; - color: $colorText; - background-color: $colorBg; - min-height: 100%; + margin: 0; // 1 + font-size: $fontSize; + font-family: $fontFamily; + line-height: $fontLineHeight; + color: $colorText; + background-color: $colorBg; + min-height: 100%; } // HTML5 display definitions @@ -48,7 +48,7 @@ menu, nav, section, summary { - display: block; + display: block; } // 1. Correct `inline-block` display not defined in IE 9-. @@ -56,14 +56,14 @@ audio, canvas, progress, video { - display: inline-block; // 1 + display: inline-block; // 1 } // Prevent modern browsers from displaying `audio` without controls. // Remove excess height in iOS 5 devices. audio:not([controls]) { - display: none; - height: 0; + display: none; + height: 0; } // Add the correct vertical alignment in Chrome, Firefox, and Opera. @@ -73,9 +73,8 @@ progress { // Address `[hidden]` styling not present in IE 8/9/10. // Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. -[hidden], -template { - display: none; +[hidden],template { + display: none; } // Links @@ -85,13 +84,13 @@ template { // 2. Improve readability when focused and also mouse hovered in all browsers. a { - background: transparent; // 1 - text-decoration: none; - color: nth($colorLink, 1); - - &:active { - outline: 0; // 2 - } + background: transparent; // 1 + text-decoration: none; + color: nth($colorLink, 1); + + &:active { + outline: 0; // 2 + } } // Text-level semantics @@ -99,46 +98,44 @@ a { // Address styling not present in IE 8/9/10/11, Safari, and Chrome. abbr[title] { - border-bottom: 1px dotted; + border-bottom: 1px dotted; } // Address style set to `bolder` in Firefox 4+, Safari, and Chrome. -b, -strong { - font-weight: bold; +b,strong { + font-weight: bold; } // Address styling not present in Safari and Chrome. dfn { - font-style: italic; + font-style: italic; } // Address styling not present in IE 8/9. mark { - background: #ff0; - color: #000; + background: #ff0; + color: #000; } // Address inconsistent and variable font size in all browsers. small { - font-size: 80%; + font-size: 80%; } // Prevent `sub` and `sup` affecting `line-height` in all browsers. -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; +sub,sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } sup { - top: -0.5em; + top: -0.5em; } sub { - bottom: -0.25em; + bottom: -0.25em; } // Embedded content @@ -146,14 +143,14 @@ sub { // 1. Remove border when inside `a` element in IE 8/9/10. img { - border: 0; // 1 - vertical-align: middle; - max-width: 100%; + border: 0; // 1 + vertical-align: middle; + max-width: 100%; } // Correct overflow not hidden in IE 9/10/11. svg:not(:root) { - overflow: hidden; + overflow: hidden; } // Grouping content @@ -162,10 +159,10 @@ svg:not(:root) { // 1. Contain overflow in all browsers. // 2. Improve readability of pre-formatted text in all browsers. pre { - overflow: auto; // 1 - white-space: pre; // 2 - white-space: pre-wrap; // 2 - word-wrap: break-word; // 2 + overflow: auto; // 1 + white-space: pre; // 2 + white-space: pre-wrap; // 2 + word-wrap: break-word; // 2 } // 1. Address odd `em`-unit font size rendering in all browsers. @@ -173,8 +170,8 @@ code, kbd, pre, samp { - font-family: monospace, monospace; // 1 - font-size: 1em; // 2 + font-family: monospace, monospace; // 1 + font-size: 1em; // 2 } // Forms @@ -184,7 +181,7 @@ samp { // styling of `select`, unless a `border` property is set. // 1. Correct color not being inherited. -// Known issue: affects color of disabled elements. +// Known issue: affects color of disabled elements. // 2. Correct font properties not being inherited. // 3. Address margins set differently in Firefox 4+, Safari, and Chrome. button, @@ -192,10 +189,10 @@ input, optgroup, select, textarea { - color: inherit; // 1 - font: inherit; // 2 - margin: 0; // 3 - vertical-align: middle; + color: inherit; // 1 + font: inherit; // 2 + margin: 0; // 3 + vertical-align: middle; } // Show the overflow in IE. @@ -204,47 +201,46 @@ textarea { button, input, // 1 select { // 2 - overflow: visible; + overflow: visible; } // Address inconsistent `text-transform` inheritance for `button` and `select`. // All other form control elements do not inherit `text-transform` values. // Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. // Correct `select` style inheritance in Firefox. -button, -select { - text-transform: none; +button,select { + text-transform: none; } // 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` -// and `video` controls. +// and `video` controls. // 2. Correct inability to style clickable `input` types in iOS. // 3. Improve usability and consistency of cursor style between image-type -// `input` and others. +// `input` and others. button, html input[type="button"], // 1 input[type="reset"], input[type="submit"] { - -webkit-appearance: button; // 2 - cursor: pointer; // 3 + -webkit-appearance: button; // 2 + cursor: pointer; // 3 } // Re-set default cursor for disabled elements. [disabled] { - cursor: default; + cursor: default; } // Remove inner padding and border in Firefox 4+. button::-moz-focus-inner, input::-moz-focus-inner { - border: 0; - padding: 0; + border: 0; + padding: 0; } // 1. Address Firefox 4+ setting `line-height` on `input` using `!important` in -// the UA stylesheet. +// the UA stylesheet. input { - line-height: normal; // 1 + line-height: normal; // 1 } // It's recommended that you don't attempt to style these elements. @@ -254,8 +250,8 @@ input { // 2. Remove excess padding in IE 8/9/10. input[type="checkbox"], input[type="radio"] { - box-sizing: border-box; // 1 - padding: 0; // 2 + box-sizing: border-box; // 1 + padding: 0; // 2 } // Fix the cursor style for Chrome's increment/decrement buttons. For certain @@ -263,15 +259,15 @@ input[type="radio"] { // decrement button to change from `default` to `text`. input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { - height: auto; + height: auto; } // 1. Address `appearance` set to `searchfield` in Safari and Chrome. // 2. Address `box-sizing` set to `border-box` in Safari and Chrome -// (include `-moz` to future-proof). +// (include `-moz` to future-proof). input[type="search"] { - -webkit-appearance: textfield; // 1 - box-sizing: border-box; + -webkit-appearance: textfield; // 1 + box-sizing: border-box; } // Remove inner padding and search cancel button in Safari and Chrome on OS X. @@ -279,34 +275,34 @@ input[type="search"] { // padding (and `textfield` appearance). input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; + -webkit-appearance: none; } // Define consistent border, margin, and padding. fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; } // 1. Correct `color` not being inherited in IE 8/9/10/11. // 2. Remove padding so people aren't caught out if they zero out fieldsets. legend { - border: 0; // 1 - padding: 0; // 2 + border: 0; // 1 + padding: 0; // 2 } // 1. Remove default vertical scrollbar in IE 8/9/10/11. textarea { - overflow: auto; // 1 - resize: vertical; - vertical-align: top; + overflow: auto; // 1 + resize: vertical; + vertical-align: top; } // Don't inherit the `font-weight` (applied by a rule above). // NOTE: the default cannot safely be changed in Chrome and Safari on OS X. optgroup { - font-weight: bold; + font-weight: bold; } // webkit focus outline @@ -314,19 +310,18 @@ input, select, textarea, button { - outline: 0; + outline: 0; } // Android 下 input focus 消除高亮外框 -textarea, -input { - -webkit-user-modify: read-write-plaintext-only; +textarea,input { + -webkit-user-modify: read-write-plaintext-only; } // ie10 clear & password input::-ms-clear, input::-ms-reveal { - display: none; + display: none; } // 表单placeholder样式 @@ -334,85 +329,84 @@ input::-ms-reveal { // Firefox 19+ input::-moz-placeholder, textarea::-moz-placeholder { - color: $colorPlaceholder; + color: $colorPlaceholder; } // Internet Explorer 10+ input:-ms-input-placeholder, textarea:-ms-input-placeholder { - color: $colorPlaceholder; + color: $colorPlaceholder; } // Safari and Chrome input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { - color: $colorPlaceholder; + color: $colorPlaceholder; } // 如不支持placeholder添加class 或者 设置提示的placeholder .placeholder{ - color: $colorPlaceholder; + color: $colorPlaceholder; } // Tables //----------------------------------------------------- // Remove most spacing between table cells. table { - border-collapse: collapse; - border-spacing: 0; + border-collapse: collapse; + border-spacing: 0; } -td, -th { - padding: 0; +td,th { + padding: 0; } // 根据使用习惯，对normalize上进行补充 //----------------------------------------------------- h1, h2, h3, h4, h5, h6, p, figure, form, blockquote { - margin: 0; + margin: 0; } // ul ol dl ul, ol, li, dl, dd { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } ul, ol { - list-style: none outside none; + list-style: none outside none; } // hn h1, h2, h3 { - line-height: 2; - font-weight: normal; + line-height: 2; + font-weight: normal; } h1 { - font-size: 18px; + font-size: 18px; } h2 { - font-size: 16px; + font-size: 16px; } h3 { - font-size: 14px; + font-size: 14px; } // icon i { - font-style: normal; + font-style: normal; } // 所有元素为border-box * { - box-sizing: border-box; + box-sizing: border-box; } // 清除子元素浮动 .clearfix { - @extend %clearfix; + @extend %clearfix; } \ No newline at end of file diff --git a/themes/yilia/source-src/css/mobile-slider.scss b/themes/yilia/source-src/css/mobile-slider.scss index 8077a27..ea9da91 100644 --- a/themes/yilia/source-src/css/mobile-slider.scss +++ b/themes/yilia/source-src/css/mobile-slider.scss @@ -9,21 +9,13 @@ position: relative; overflow: hidden; background: #88acdb; - -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; - display: -webkit-box; - -webkit-box-orient: horizontal; - -webkit-box-pack: center; - -webkit-box-align: center; text-align: center; } .header-author { text-align: center; margin: 0.67em 0; font-size: 30px; - -webkit-transition: 0.3s; - -moz-transition: 0.3s; - -ms-transition: 0.3s; transition: 0.3s; } .header-subtitle { diff --git a/themes/yilia/source-src/css/mobile.scss b/themes/yilia/source-src/css/mobile.scss index fb8e048..9136054 100644 --- a/themes/yilia/source-src/css/mobile.scss +++ b/themes/yilia/source-src/css/mobile.scss @@ -44,12 +44,8 @@ html, body, #container { padding: 5px 20px; } } - &.show { - .header-menu{ - &.tools-nav { - display: block; - } - } + &.show .header-menu.tools-nav{ + display: block; } } @@ -159,7 +155,7 @@ html, body, #container { width: auto; height: 30px; margin-top: -5px; - position: ralative; + position: relative; .article-date{ font-size: 12px; border-radius: 0; @@ -257,9 +253,9 @@ html, body, #container { padding: 10px; .archive-year-wrap{ position: relative; - padding: 0 0 0 0; + padding: 0; a{ - padding: 0 0 0 0; + padding: 0; } } .article-meta{ diff --git a/themes/yilia/source-src/css/reward.scss b/themes/yilia/source-src/css/reward.scss index c71a585..9baebcb 100644 --- a/themes/yilia/source-src/css/reward.scss +++ b/themes/yilia/source-src/css/reward.scss @@ -1,51 +1,51 @@ .page-reward { - margin: 60px 0; - text-align: center; - .page-reward-btn { - position: relative; - display: inline-block; - width: 56px; - height: 56px; - line-height: 56px; - font-size: 20px; - color: $colorF; - background: #f44336; - border-radius: 50%; - box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); - -webkit-transition: .4s ease-in-out; - transition: .4s ease-in-out; - &:hover, &:active { - box-shadow: 0 6px 12px rgba(0,0,0,0.2),0 4px 15px rgba(0,0,0,0.2); - } - .tooltip-item { - display: block; - width: 56px; - height: 56px; - } + margin: 60px 0; + text-align: center; + .page-reward-btn { + position: relative; + display: inline-block; + width: 56px; + height: 56px; + line-height: 56px; + font-size: 20px; + color: $colorF; + background: #f44336; + border-radius: 50%; + box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); + -webkit-transition: .4s ease-in-out; + transition: .4s ease-in-out; + &:hover, &:active { + box-shadow: 0 6px 12px rgba(0,0,0,0.2),0 4px 15px rgba(0,0,0,0.2); } - .reward-box { - display: flex; - justify-content: space-around; + .tooltip-item { + display: block; + width: 56px; + height: 56px; } - .reward-p { - color: $colorF; - font-weight: bold; - text-shadow: 1px 1px 1px #45b9e0; - .icon { - margin: 0 10px; - color: #ddd; - } - } - .reward-type { - font-size: 16px; - display: block; - color: #4d4d4d; - margin: 20px 0 0 0; - } - .reward-img { - width: 130px; - height: 130px; - border: 6px solid $colorBorder; - border-radius: 3px; + } + .reward-box { + display: flex; + justify-content: space-around; + } + .reward-p { + color: $colorF; + font-weight: bold; + text-shadow: 1px 1px 1px #45b9e0; + .icon { + margin: 0 10px; + color: #ddd; } + } + .reward-type { + font-size: 16px; + display: block; + color: #4d4d4d; + margin: 20px 0 0 0; + } + .reward-img { + width: 130px; + height: 130px; + border: 6px solid $colorBorder; + border-radius: 3px; + } } diff --git a/themes/yilia/source-src/css/share.scss b/themes/yilia/source-src/css/share.scss index 4860464..90d69eb 100644 --- a/themes/yilia/source-src/css/share.scss +++ b/themes/yilia/source-src/css/share.scss @@ -2,106 +2,106 @@ min-height: 20px; } .share-btn { - float: right; - position: relative; + float: right; + position: relative; } .share-icons { - display: flex; - justify-content: center; - align-items: center; - flex-wrap: wrap; - a { - border: 1px solid $colorBorder; - border-radius: 50%; - display: -moz-inline-stack; - display: inline-block; - vertical-align: middle; - zoom: 1; - margin: 10px; - -webkit-transition: 0.3s; - transition: 0.3s; - text-align: center; - color: $colorF; - opacity: 0.7; - width: 28px; - height: 28px; - line-height: 26px; - text-shadow: 1px 1px 1px #509eb7; - &:active { - color: $colorF; - } - &:hover { - transform: scale(1.2); - } - &.share-outer { - border: none; - color: $colorF; - background: #4d4d4d; - text-shadow: none; - } + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + a { + border: 1px solid $colorBorder; + border-radius: 50%; + display: -moz-inline-stack; + display: inline-block; + vertical-align: middle; + zoom: 1; + margin: 10px; + -webkit-transition: 0.3s; + transition: 0.3s; + text-align: center; + color: $colorF; + opacity: 0.7; + width: 28px; + height: 28px; + line-height: 26px; + text-shadow: 1px 1px 1px #509eb7; + &:active { + color: $colorF; } + &:hover { + transform: scale(1.2); + } + &.share-outer { + border: none; + color: $colorF; + background: #4d4d4d; + text-shadow: none; + } + } } .page-modal { - //display: none; - position: fixed; - top: 24%; - left: 50%; - z-index: 1001; - padding: 20px; - text-align: center; - color: #727272; - background: $colorBg; - border-radius: 4px; - box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); - opacity: 0; - transform: translate(-50%, -200%); - p { - margin-bottom: 10px; - } - &.ready { - visibility: hidden; - display: block; - transform: translate(-50%, -100%); - transition: .3s; - } + //display: none; + position: fixed; + top: 24%; + left: 50%; + z-index: 1001; + padding: 20px; + text-align: center; + color: #727272; + background: $colorBg; + border-radius: 4px; + box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); + opacity: 0; + transform: translate(-50%, -200%); + p { + margin-bottom: 10px; + } + &.ready { + visibility: hidden; + display: block; + transform: translate(-50%, -100%); + transition: .3s; + } - &.in { - visibility: visible; - opacity: 1; - transform: translate(-50%, 0); - } + &.in { + visibility: visible; + opacity: 1; + transform: translate(-50%, 0); + } - .close { - position: absolute; - right: 10px; - top: 10px; - color: rgba(0, 0, 0, .2); - font-size: 16px; - line-height: 20px; - &:hover, &:active { - color: rgba(0, 0, 0, .4); - } + .close { + position: absolute; + right: 10px; + top: 10px; + color: rgba(0, 0, 0, .2); + font-size: 16px; + line-height: 20px; + &:hover, &:active { + color: rgba(0, 0, 0, .4); } + } } .mask { - visibility: hidden; - position: fixed; - top: 0; - left: 0; - bottom: 0; - z-index: 1000; - width: 100%; - height: 100%; - background: #000; - opacity: 0; - filter: alpha(opacity=0); - pointer-events: none; - -webkit-transition: .3s ease-in-out; - transition: .3s ease-in-out; - &.in { - visibility: visible; - pointer-events: auto; - opacity: .3; - } + visibility: hidden; + position: fixed; + top: 0; + left: 0; + bottom: 0; + z-index: 1000; + width: 100%; + height: 100%; + background: #000; + opacity: 0; + filter: alpha(opacity=0); + pointer-events: none; + -webkit-transition: .3s ease-in-out; + transition: .3s ease-in-out; + &.in { + visibility: visible; + pointer-events: auto; + opacity: .3; + } } diff --git a/themes/yilia/source-src/css/social.scss b/themes/yilia/source-src/css/social.scss index 447d3f3..db62307 100644 --- a/themes/yilia/source-src/css/social.scss +++ b/themes/yilia/source-src/css/social.scss @@ -1,150 +1,150 @@ #header .header-nav{ - width: 100%; - position: absolute; - transition: transform .3s ease-in; - .social { - margin-top: 10px; - text-align: center; - display: flex; - flex-wrap: wrap; - justify-content: center; - a { - border-radius:50%; - display:inline-block; - vertical-align:middle; - *vertical-align:auto; - zoom:1; - *display:inline; - margin:0 8px 15px 8px; - transition:0.3s; - text-align: center; - color: #fff; - opacity: 0.7; - width: 28px; - height: 28px; - line-height: 26px; - &:hover { - opacity:1 - } - } - a.weibo { - background: #aaaaff; - border:1px solid #aaaaff; - &:hover { - border:1px solid #aaaaff; - } - } - a.segmentfault { - background: #009a61; - border:1px solid #009a61; - &:hover { - border:1px solid #009a61; - } - } - a.rss { - background: #ef7522; - border:1px solid #ef7522; - &:hover { - border:1px solid #cf5d0f; - } - } - a.github { - background: #afb6ca; - border:1px solid #afb6ca; - &:hover { - border:1px solid #909ab6; - } - } - a.facebook { - background: #3b5998; - border:1px solid #3b5998; - &:hover { - border:1px solid #2d4373; - } - } - a.google { - background: #c83d20; - border:1px solid #c83d20; - &:hover { - border:1px solid #9c3019; - } - } - a.twitter { - background: #55cff8; - border:1px solid #55cff8; - &:hover { - border:1px solid #24c1f6; - } - } - a.linkedin { - background: #005a87; - border:1px solid #005a87; - &:hover { - border:1px solid #006b98; - } - } - a.acfun { - background: #fd4c5d; - border:1px solid #fd4c5d; - &:hover { - border:1px solid #fd4c5d; - } - } - a.bilibili { - background: #e15280; - border:1px solid #e15280; - &:hover { - border:1px solid #e15280; - } - } - a.zhihu { - background: #0078d8; - border:1px solid #0078d8; - &:hover { - border:1px solid #0078d8; - } - } - a.douban { - background: #06c611; - border:1px solid #06c611; - &:hover { - border:1px solid #06c611; - } - } - a.mail { - background: #005a87; - border:1px solid #005a87; - &:hover { - border:1px solid #006b98; - } - } - a.jianshu { - background: #ff5722; - border:1px solid #ff5722; - &:hover { - border:1px solid #ff5722; - } - } - a.weixin { - background: #4caf50; - border:1px solid #4caf50; - &:hover { - border:1px solid #4caf50; - } - } - a.qq { - background: #34baad; - border:1px solid #34baad; - &:hover { - border:1px solid #34baad; - } - } - a.psn { - background: #086ef6; - border:1px solid #086ef6; - &:hover { - border:1px solid #086ef6; - } - } + width: 100%; + position: absolute; + transition: transform .3s ease-in; + .social { + margin-top: 10px; + text-align: center; + display: flex; + flex-wrap: wrap; + justify-content: center; + a { + border-radius:50%; + display:inline-block; + vertical-align:middle; + *vertical-align:auto; + zoom:1; + *display:inline; + margin:0 8px 15px 8px; + transition:0.3s; + text-align: center; + color: #fff; + opacity: 0.7; + width: 28px; + height: 28px; + line-height: 26px; + &:hover { + opacity:1 + } } + a.weibo { + background: #aaaaff; + border:1px solid #aaaaff; + &:hover { + border:1px solid #aaaaff; + } + } + a.segmentfault { + background: #009a61; + border:1px solid #009a61; + &:hover { + border:1px solid #009a61; + } + } + a.rss { + background: #ef7522; + border:1px solid #ef7522; + &:hover { + border:1px solid #cf5d0f; + } + } + a.github { + background: #afb6ca; + border:1px solid #afb6ca; + &:hover { + border:1px solid #909ab6; + } + } + a.facebook { + background: #3b5998; + border:1px solid #3b5998; + &:hover { + border:1px solid #2d4373; + } + } + a.google { + background: #c83d20; + border:1px solid #c83d20; + &:hover { + border:1px solid #9c3019; + } + } + a.twitter { + background: #55cff8; + border:1px solid #55cff8; + &:hover { + border:1px solid #24c1f6; + } + } + a.linkedin { + background: #005a87; + border:1px solid #005a87; + &:hover { + border:1px solid #006b98; + } + } + a.acfun { + background: #fd4c5d; + border:1px solid #fd4c5d; + &:hover { + border:1px solid #fd4c5d; + } + } + a.bilibili { + background: #e15280; + border:1px solid #e15280; + &:hover { + border:1px solid #e15280; + } + } + a.zhihu { + background: #0078d8; + border:1px solid #0078d8; + &:hover { + border:1px solid #0078d8; + } + } + a.douban { + background: #06c611; + border:1px solid #06c611; + &:hover { + border:1px solid #06c611; + } + } + a.mail { + background: #005a87; + border:1px solid #005a87; + &:hover { + border:1px solid #006b98; + } + } + a.jianshu { + background: #ff5722; + border:1px solid #ff5722; + &:hover { + border:1px solid #ff5722; + } + } + a.weixin { + background: #4caf50; + border:1px solid #4caf50; + &:hover { + border:1px solid #4caf50; + } + } + a.qq { + background: #34baad; + border:1px solid #34baad; + &:hover { + border:1px solid #34baad; + } + } + a.psn { + background: #086ef6; + border:1px solid #086ef6; + &:hover { + border:1px solid #086ef6; + } + } + } } \ No newline at end of file diff --git a/themes/yilia/source-src/css/tags.scss b/themes/yilia/source-src/css/tags.scss index 10c34c1..e12a20b 100644 --- a/themes/yilia/source-src/css/tags.scss +++ b/themes/yilia/source-src/css/tags.scss @@ -103,7 +103,7 @@ .archive-article-date { color: $color9; - margin-right: 7.6923%; + margin-right: $articlePadding; float: right; transition: color 0.3s; &:hover { diff --git a/themes/yilia/source-src/css/tooltip.scss b/themes/yilia/source-src/css/tooltip.scss index 44005ee..704eee7 100644 --- a/themes/yilia/source-src/css/tooltip.scss +++ b/themes/yilia/source-src/css/tooltip.scss @@ -1,218 +1,218 @@ .tooltip-left { - .tooltip { - position: absolute; - z-index: 999; - cursor: pointer; - width: 28px; - height: 28px; - top: -10px; - right: 10px; - &:hover { - a.share-outer { - background: #24c1f6; - } - } + .tooltip { + position: absolute; + z-index: 999; + cursor: pointer; + width: 28px; + height: 28px; + top: -10px; + right: 10px; + &:hover { + a.share-outer { + background: #24c1f6; + } } + } - /* Trigger item */ + /* Trigger item */ - @-webkit-keyframes pulse { - from { -webkit-transform: scale3d(0.5,0.5,1); } - to { -webkit-transform: scale3d(1,1,1); } - } + @-webkit-keyframes pulse { + from { -webkit-transform: scale3d(0.5,0.5,1); } + to { -webkit-transform: scale3d(1,1,1); } + } - @keyframes pulse { - from { -webkit-transform: scale3d(0.5,0.5,1); transform: scale3d(0.5,0.5,1); } - to { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); } - } + @keyframes pulse { + from { -webkit-transform: scale3d(0.5,0.5,1); transform: scale3d(0.5,0.5,1); } + to { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); } + } - /* Tooltip */ + /* Tooltip */ - .tooltip-content { - position: absolute; - background: rgba(36,193,246,0.9); - z-index: 9999; - width: 200px; - bottom: 50%; - margin-bottom: -10px; - border-radius: 20px; - font-size: 1.1em; - text-align: center; - color: #fff; - opacity: 0; - cursor: default; - pointer-events: none; - -webkit-font-smoothing: antialiased; - -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; - transition: opacity 0.3s, transform 0.3s; - } + .tooltip-content { + position: absolute; + background: rgba(36,193,246,0.9); + z-index: 9999; + width: 200px; + bottom: 50%; + margin-bottom: -10px; + border-radius: 20px; + font-size: 1.1em; + text-align: center; + color: #fff; + opacity: 0; + cursor: default; + pointer-events: none; + -webkit-font-smoothing: antialiased; + -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; + transition: opacity 0.3s, transform 0.3s; + } - .tooltip-west .tooltip-content { - left: 3.5em; - -webkit-transform-origin: -2em 50%; - transform-origin: -2em 50%; - -webkit-transform: translate3d(0,50%,0) rotate3d(1,1,1,30deg); - transform: translate3d(0,50%,0) rotate3d(1,1,1,30deg); - } + .tooltip-west .tooltip-content { + left: 3.5em; + -webkit-transform-origin: -2em 50%; + transform-origin: -2em 50%; + -webkit-transform: translate3d(0,50%,0) rotate3d(1,1,1,30deg); + transform: translate3d(0,50%,0) rotate3d(1,1,1,30deg); + } - .tooltip-east .tooltip-content { - right: 3.5em; - -webkit-transform-origin: calc(100% + 2em) 50%; - transform-origin: calc(100% + 2em) 50%; - -webkit-transform: translate3d(0,50%,0) rotate3d(1,1,1,-30deg); - transform: translate3d(0,50%,0) rotate3d(1,1,1,-30deg); - } + .tooltip-east .tooltip-content { + right: 3.5em; + -webkit-transform-origin: calc(100% + 2em) 50%; + transform-origin: calc(100% + 2em) 50%; + -webkit-transform: translate3d(0,50%,0) rotate3d(1,1,1,-30deg); + transform: translate3d(0,50%,0) rotate3d(1,1,1,-30deg); + } - .tooltip:hover .tooltip-content { - opacity: 1; - -webkit-transform: translate3d(0,50%,0) rotate3d(0,0,0,0); - transform: translate3d(0,50%,0) rotate3d(0,0,0,0); - pointer-events: auto; - } + .tooltip:hover .tooltip-content { + opacity: 1; + -webkit-transform: translate3d(0,50%,0) rotate3d(0,0,0,0); + transform: translate3d(0,50%,0) rotate3d(0,0,0,0); + pointer-events: auto; + } - /* Gap "bridge" and arrow */ + /* Gap "bridge" and arrow */ - .tooltip-content::before, - .tooltip-content::after { - content: ''; - position: absolute; - } + .tooltip-content::before, + .tooltip-content::after { + content: ''; + position: absolute; + } - .tooltip-content::before { - height: 100%; - width: 3em; - } + .tooltip-content::before { + height: 100%; + width: 3em; + } - .tooltip-content::after { - width: 2em; - height: 2em; - top: 50%; - margin: -1em 0 0; - background: url(./img/tooltip.svg) no-repeat center center; - background-size: 100%; - } + .tooltip-content::after { + width: 2em; + height: 2em; + top: 50%; + margin: -1em 0 0; + background: url(./img/tooltip.svg) no-repeat center center; + background-size: 100%; + } - .tooltip-west .tooltip-content::before, - .tooltip-west .tooltip-content::after { - right: 99%; /* because of FF, otherwise we have a gap */ - } + .tooltip-west .tooltip-content::before, + .tooltip-west .tooltip-content::after { + right: 99%; /* because of FF, otherwise we have a gap */ + } - .tooltip-east .tooltip-content::before, - .tooltip-east .tooltip-content::after { - left: 99%; /* because of FF, otherwise we have a gap */ - } + .tooltip-east .tooltip-content::before, + .tooltip-east .tooltip-content::after { + left: 99%; /* because of FF, otherwise we have a gap */ + } - .tooltip-east .tooltip-content::after { - -webkit-transform: scale3d(-1,1,1); - transform: scale3d(-1,1,1); - } + .tooltip-east .tooltip-content::after { + -webkit-transform: scale3d(-1,1,1); + transform: scale3d(-1,1,1); + } } .tooltip-top { - .tooltip { - display: inline; - position: relative; - z-index: 999; - } + .tooltip { + display: inline; + position: relative; + z-index: 999; + } - /* Gap filler */ - .tooltip::after { - content: ''; - position: absolute; - width: 100%; - height: 20px; - bottom: 100%; - left: 50%; - pointer-events: none; - -webkit-transform: translateX(-50%); - transform: translateX(-50%); - } + /* Gap filler */ + .tooltip::after { + content: ''; + position: absolute; + width: 100%; + height: 20px; + bottom: 100%; + left: 50%; + pointer-events: none; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + } - .tooltip:hover::after { - pointer-events: auto; - } + .tooltip:hover::after { + pointer-events: auto; + } - /* Tooltip */ + /* Tooltip */ - .tooltip-content { - position: absolute; - z-index: 9999; - width: 370px; - left: 50%; - bottom: 100%; - font-size: 20px; - line-height: 1.4; - text-align: center; - font-weight: 400; - color: #4d4d4d; - background: transparent; - opacity: 0; - margin: 0 0 -10px -185px; - cursor: default; - pointer-events: none; - font-family: 'Satisfy', cursive; - -webkit-font-smoothing: antialiased; - -webkit-transition: opacity 0.3s 0.3s; - transition: opacity 0.3s 0.3s; - padding-bottom: 80px; - } + .tooltip-content { + position: absolute; + z-index: 9999; + width: 370px; + left: 50%; + bottom: 100%; + font-size: 20px; + line-height: 1.4; + text-align: center; + font-weight: 400; + color: #4d4d4d; + background: transparent; + opacity: 0; + margin: 0 0 -10px -185px; + cursor: default; + pointer-events: none; + font-family: 'Satisfy', cursive; + -webkit-font-smoothing: antialiased; + -webkit-transition: opacity 0.3s 0.3s; + transition: opacity 0.3s 0.3s; + padding-bottom: 80px; + } - .tooltip:hover .tooltip-content { - opacity: 1; - pointer-events: auto; - -webkit-transition-delay: 0s; - transition-delay: 0s; - } + .tooltip:hover .tooltip-content { + opacity: 1; + pointer-events: auto; + -webkit-transition-delay: 0s; + transition-delay: 0s; + } - .tooltip-content span { - display: block; - } + .tooltip-content span { + display: block; + } - .tooltip-text { - border-bottom: 10px solid #4d4d4d; - overflow: hidden; - -webkit-transform: scale3d(0,1,1); - transform: scale3d(0,1,1); - -webkit-transition: -webkit-transform 0.3s 0.3s; - transition: transform 0.3s 0.3s; - } + .tooltip-text { + border-bottom: 10px solid #4d4d4d; + overflow: hidden; + -webkit-transform: scale3d(0,1,1); + transform: scale3d(0,1,1); + -webkit-transition: -webkit-transform 0.3s 0.3s; + transition: transform 0.3s 0.3s; + } - .tooltip:hover .tooltip-text { - -webkit-transition-delay: 0s; - transition-delay: 0s; - -webkit-transform: scale3d(1,1,1); - transform: scale3d(1,1,1); - } + .tooltip:hover .tooltip-text { + -webkit-transition-delay: 0s; + transition-delay: 0s; + -webkit-transform: scale3d(1,1,1); + transform: scale3d(1,1,1); + } - .tooltip-inner { - background: rgba(36,193,246,0.9); - padding: 40px; - -webkit-transform: translate3d(0,100%,0); - transform: translate3d(0,100%,0); - -webkit-transition: -webkit-transform 0.3s; - transition: transform 0.3s; - } + .tooltip-inner { + background: rgba(36,193,246,0.9); + padding: 40px; + -webkit-transform: translate3d(0,100%,0); + transform: translate3d(0,100%,0); + -webkit-transition: -webkit-transform 0.3s; + transition: transform 0.3s; + } - .tooltip:hover .tooltip-inner { - -webkit-transition-delay: 0.3s; - transition-delay: 0.3s; - -webkit-transform: translate3d(0,0,0); - transform: translate3d(0,0,0); - } + .tooltip:hover .tooltip-inner { + -webkit-transition-delay: 0.3s; + transition-delay: 0.3s; + -webkit-transform: translate3d(0,0,0); + transform: translate3d(0,0,0); + } - /* Arrow */ + /* Arrow */ - .tooltip-content::after { - content: ''; - left: 50%; - border: solid transparent; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - border-color: transparent; - border-top-color: #4d4d4d; - border-width: 10px; - margin-left: -10px; - } + .tooltip-content::after { + content: ''; + left: 50%; + border: solid transparent; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-color: transparent; + border-top-color: #4d4d4d; + border-width: 10px; + margin-left: -10px; + } } \ No newline at end of file diff --git a/themes/yilia/source-src/js/fix.js b/themes/yilia/source-src/js/fix.js index ebf2933..2e5e004 100644 --- a/themes/yilia/source-src/js/fix.js +++ b/themes/yilia/source-src/js/fix.js @@ -9,7 +9,7 @@ function init() { } // 目录序号 - if (yiliaConfig && yiliaConfig.toc_hide_index) { + if (window.themeConfig && window.themeConfig.toc_hide_index) { let $a = document.querySelectorAll('.toc-number') Array.prototype.forEach.call($a, function($em){ $em.style.display = 'none' diff --git a/themes/yilia/source-src/js/main.js b/themes/yilia/source-src/js/main.js index 4c862bc..4bdf3fd 100644 --- a/themes/yilia/source-src/js/main.js +++ b/themes/yilia/source-src/js/main.js @@ -15,12 +15,12 @@ Util.addLoadEvent(function() { Aside.init() }) const commentConfig = require("../config/comment.json") -if(window.yiliaConfig.isPost && commentConfig.valine.enable) { +if(window.themeConfig.isPost && commentConfig.valine.enable) { // 文章详情页面, 并且启用了评论, 则加载评论相关代码 import(/* webpackChunkName: "comment" */ './comment') } -if(window.yiliaConfig.pageid === 'PhotoWall') { +if(window.themeConfig.pageid === 'PhotoWall') { // 自定义的照片墙页面 import(/* webpackChunkName: "photo-wall" */ './photo-wall') } \ No newline at end of file diff --git a/themes/yilia/source-src/js/mobile.js b/themes/yilia/source-src/js/mobile.js index caa8730..70a7863 100644 --- a/themes/yilia/source-src/js/mobile.js +++ b/themes/yilia/source-src/js/mobile.js @@ -1,6 +1,3 @@ -import addClass from 'dom101/add-class' -import removeClass from 'dom101/remove-class' -import after from 'dom101/after' // 浏览器判断 import Browser from './browser' // fix hexo 不支持的配置 @@ -14,11 +11,11 @@ function isPathMatch(path, href) { } function tabActive() { - let $tabs = document.querySelectorAll('.js-header-menu li a') + let tabs = document.querySelectorAll('.js-header-menu li a') let path = window.location.pathname - Array.prototype.forEach.call($tabs, function($tab, i){ - if (isPathMatch(path, $tab.getAttribute('href'))) { - addClass($tab, 'active') + Array.prototype.forEach.call(tabs, function(tab, i){ + if (isPathMatch(path, tab.getAttribute('href'))) { + tab.classList.add('active') } }) } @@ -49,8 +46,13 @@ function scrollStop($dom, top, limit, zIndex, diff) { if (nowTop - limit <= diff) { let $newDom = $dom.$newDom if (!$newDom) { - $newDom = $dom.cloneNode(true) - after($dom, $newDom) + $newDom = $dom.cloneNode(true) + let parentNode = $dom.parentNode + if(parentNode.lastChild == $dom){ // 将新生成的节点插入到当前节点之后 + parentNode.appendChild($newDom) + }else{ + parentNode.insertBefore($newDom, $dom.nextSibling) + } $dom.$newDom = $newDom $newDom.style.position = 'fixed' $newDom.style.top = (limit || nowTop) + 'px' @@ -88,14 +90,12 @@ function bindScroll() { handleScroll() } -function init() { +(function () { if (Browser.versions.mobile && window.screen.width < 800) { tabActive() bindScroll() } -} - -init(); +})() Util.addLoadEvent(function() { Fix.init() diff --git a/themes/yilia/source-src/js/share.js b/themes/yilia/source-src/js/share.js index a5e2fed..26670a7 100644 --- a/themes/yilia/source-src/js/share.js +++ b/themes/yilia/source-src/js/share.js @@ -1,5 +1,3 @@ -import addClass from 'dom101/add-class' -import removeClass from 'dom101/remove-class' import QRious from 'qrious' function generate(url, opts) { @@ -13,26 +11,24 @@ function generate(url, opts) { var qrcodeInit = false function showWX() { - let $wx = document.querySelector('.js-wx-box') - let $mask = document.querySelector('.mask') + let wx = document.querySelector('.js-wx-box') + let mask = document.querySelector('.mask') if(!qrcodeInit) { new QRious({ element: document.querySelector('.qrcode-canvas'), value: location.href - }); + }) qrcodeInit = true } - addClass($wx, 'in') - addClass($wx, 'ready') - addClass($mask, 'in') + wx.classList.add('in', 'ready') + mask.classList.add('in') } function hideWX() { - let $wx = document.querySelector('.js-wx-box') - let $mask = document.querySelector('.mask') - removeClass($wx, 'in') - removeClass($wx, 'ready') - removeClass($mask, 'in') + let wx = document.querySelector('.js-wx-box') + let mask = document.querySelector('.mask') + wx.classList.remove('in', 'ready') + mask.classList.remove('in') } function handleClick(type, opts) { diff --git a/themes/yilia/source-src/js/slider.js b/themes/yilia/source-src/js/slider.js index 23e8849..76e40ad 100644 --- a/themes/yilia/source-src/js/slider.js +++ b/themes/yilia/source-src/js/slider.js @@ -86,7 +86,7 @@ new Vue({ }, filters: { urlformat: (str) => { - return (window.yiliaConfig && window.yiliaConfig.root) ? window.yiliaConfig.root + str : '/' + str; + return (window.themeConfig && window.themeConfig.root) ? window.themeConfig.root + str : '/' + str; } }, watch: { @@ -101,7 +101,7 @@ new Vue({ } }, mounted () { - axios.get(window.yiliaConfig.root + 'content.json?t=' + (+ new Date())) + axios.get(window.themeConfig.root + 'content.json?t=' + (+ new Date())) .then((res)=>{ this.items = res.data }).catch((err) => { diff --git a/themes/yilia/source-src/js/viewer.js b/themes/yilia/source-src/js/viewer.js index a616cf7..63979b6 100644 --- a/themes/yilia/source-src/js/viewer.js +++ b/themes/yilia/source-src/js/viewer.js @@ -36,6 +36,6 @@ function init() { } // export default { init } -if(!window.yiliaConfig.pageid) { // 非个性化页面的普通文章 +if(!window.themeConfig.pageid) { // 非个性化页面的普通文章 Util.addLoadEvent(init) } \ No newline at end of file