scss替换为less
This commit is contained in:
parent
4578670432
commit
c1cbb45b34
GPG Key ID:
0599BECB75C1E68D
718
themes/yilia/package-lock.json
generated
718
themes/yilia/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -36,10 +36,10 @@
|
|||||||
"css-loader": "^5.2.7",
|
"css-loader": "^5.2.7",
|
||||||
"file-loader": "^6.2.0",
|
"file-loader": "^6.2.0",
|
||||||
"html-webpack-plugin": "^5.5.0",
|
"html-webpack-plugin": "^5.5.0",
|
||||||
|
"less": "^4.1.3",
|
||||||
|
"less-loader": "^11.1.0",
|
||||||
"mini-css-extract-plugin": "^2.6.0",
|
"mini-css-extract-plugin": "^2.6.0",
|
||||||
"postcss-loader": "^6.2.1",
|
"postcss-loader": "^6.2.1",
|
||||||
"sass": "^1.49.9",
|
|
||||||
"sass-loader": "^12.6.0",
|
|
||||||
"terser-webpack-plugin": "^5.3.1",
|
"terser-webpack-plugin": "^5.3.1",
|
||||||
"url-loader": "^4.1.1",
|
"url-loader": "^4.1.1",
|
||||||
"webpack": "^5.70.0",
|
"webpack": "^5.70.0",
|
||||||
|
|||||||
6
themes/yilia/source-src/css/_core.less
Normal file
6
themes/yilia/source-src/css/_core.less
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
@import "core/_variables";
|
||||||
|
@import "core/_mixin";
|
||||||
|
@import "core/_animation";
|
||||||
|
@import "core/_reset";
|
||||||
@ -1,7 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
|
|
||||||
@import "core/variables";
|
|
||||||
@import "core/media-queries";
|
|
||||||
@import "core/mixin";
|
|
||||||
@import "core/animation";
|
|
||||||
@import "core/reset";
|
|
||||||
@ -1,17 +1,17 @@
|
|||||||
.archives-wrap{
|
.archives-wrap {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0 30px;
|
margin: 0 30px;
|
||||||
padding-right: 60px;
|
padding-right: 60px;
|
||||||
border-bottom: 1px solid #eee;
|
border-bottom: 1px solid #eee;
|
||||||
background: adjust-color($colorBg, $alpha: -0.2);
|
background: fade(@colorBg, 80%);
|
||||||
@extend %trans;
|
.trans();
|
||||||
&:first-child{
|
&:first-child {
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
}
|
}
|
||||||
&:last-child{
|
&:last-child {
|
||||||
margin-bottom: 80px;
|
margin-bottom: 80px;
|
||||||
}
|
}
|
||||||
.archive-year-wrap{
|
.archive-year-wrap {
|
||||||
line-height: 35px;
|
line-height: 35px;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -19,50 +19,50 @@
|
|||||||
font-size: 1.8em;
|
font-size: 1.8em;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
.archive-year-wrap a{
|
.archive-year-wrap a {
|
||||||
color: $color6;
|
color: @color6;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
padding-left: 48px;
|
padding-left: 48px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.archives {
|
.archives {
|
||||||
position:relative;
|
position: relative;
|
||||||
.article-info{
|
.article-info {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
.archive-article {
|
.archive-article {
|
||||||
margin-left:200px;
|
margin-left: 200px;
|
||||||
padding:20px 0;
|
padding: 20px 0;
|
||||||
border-bottom: 1px solid #eee;
|
border-bottom: 1px solid #eee;
|
||||||
border-top: 1px solid #fff;
|
border-top: 1px solid #fff;
|
||||||
transition: border-color 0.2s ease-in;
|
transition: border-color 0.2s ease-in;
|
||||||
position: relative;
|
position: relative;
|
||||||
&:first-child{
|
&:first-child {
|
||||||
border-top: none;
|
border-top: none;
|
||||||
}
|
}
|
||||||
&:last-child{
|
&:last-child {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.archive-article-title {
|
.archive-article-title {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: $colorText;
|
color: @colorText;
|
||||||
transition: color 0.3s;
|
transition: color 0.3s;
|
||||||
&:hover{
|
&:hover {
|
||||||
color: #657b83;
|
color: #657b83;
|
||||||
}
|
}
|
||||||
span{
|
span {
|
||||||
display: block;
|
display: block;
|
||||||
color: #a8a8a8;
|
color: #a8a8a8;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 14px;
|
line-height: 14px;
|
||||||
height: 7px;
|
height: 7px;
|
||||||
padding-left: 2px;
|
padding-left: 2px;
|
||||||
&:before{
|
&:before {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
content: "“";
|
content: "\201C";
|
||||||
font-family: serif;
|
font-family: serif;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
margin: 4px 4px 0 -12px;
|
margin: 4px 4px 0 -12px;
|
||||||
@ -72,50 +72,50 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.archive-article-inner{
|
.archive-article-inner {
|
||||||
.icon-clock {
|
.icon-clock {
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
.archive-article-header{
|
.archive-article-header {
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 36px;
|
min-height: 36px;
|
||||||
}
|
}
|
||||||
.article-meta{
|
.article-meta {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
.article-date time{
|
.article-date time {
|
||||||
color: $colorA;
|
color: @colorA;
|
||||||
}
|
}
|
||||||
.archive-article-date, .article-tag-list{
|
.archive-article-date, .article-tag-list {
|
||||||
margin-right: 30px;
|
margin-right: 30px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
zoom: 1;
|
zoom: 1;
|
||||||
color: $color6;
|
color: @color6;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
.archive-article-date{
|
.archive-article-date {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
.article-category{
|
.article-category {
|
||||||
&:before{
|
&:before {
|
||||||
float: left;
|
float: left;
|
||||||
margin-top: 1px;
|
margin-top: 1px;
|
||||||
left: 15px;
|
left: 15px;
|
||||||
}
|
}
|
||||||
.article-category-link{
|
.article-category-link {
|
||||||
width: auto;
|
width: auto;
|
||||||
max-width: 83px;
|
max-width: 83px;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.article-tag-list{
|
.article-tag-list {
|
||||||
margin-top: 0px;
|
margin-top: 0px;
|
||||||
&:before{
|
&:before {
|
||||||
left: 15px;
|
left: 15px;
|
||||||
}
|
}
|
||||||
.article-tag-list-item{
|
.article-tag-list-item {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: auto;
|
width: auto;
|
||||||
max-width: 83px;
|
max-width: 83px;
|
||||||
@ -1,7 +1,7 @@
|
|||||||
.article-inner {
|
.article-inner {
|
||||||
border-color: #d1d1d1;
|
border-color: #d1d1d1;
|
||||||
// 目录标题
|
// 目录标题
|
||||||
h1,h2,h3,h4,h5,h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
&:first-child {
|
&:first-child {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
@ -27,7 +27,7 @@
|
|||||||
font-size: 1.1875rem;
|
font-size: 1.1875rem;
|
||||||
line-height: 1.1052631579;
|
line-height: 1.1052631579;
|
||||||
}
|
}
|
||||||
h4,h5,h6{
|
h4, h5, h6 {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
line-height: 1.3125;
|
line-height: 1.3125;
|
||||||
@ -37,10 +37,10 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-entry{
|
.article-entry {
|
||||||
line-height: 1.8em;
|
line-height: 1.8em;
|
||||||
padding-right: $articlePadding;
|
padding-right: @articlePadding;
|
||||||
padding-left: $articlePadding;
|
padding-left: @articlePadding;
|
||||||
.post-count { // 字数统计
|
.post-count { // 字数统计
|
||||||
color: rgb(185, 185, 185);
|
color: rgb(185, 185, 185);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@ -53,32 +53,32 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
img {
|
img {
|
||||||
transition: transform 0.3s ease-out,box-shadow 0.4s ease;
|
transition: transform 0.3s ease-out, box-shadow 0.4s ease;
|
||||||
cursor: zoom-in;
|
cursor: zoom-in;
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: scale(1.05,1.05);
|
transform: scale(1.05, 1.05);
|
||||||
box-shadow: 0px 0px 10px 2px #87afea;
|
box-shadow: 0px 0px 10px 2px #87afea;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
p{
|
p {
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
}
|
}
|
||||||
p code,li code{
|
p code, li code {
|
||||||
padding: 3px 4px;
|
padding: 3px 4px;
|
||||||
margin: 0 3px;
|
margin: 0 3px;
|
||||||
background: #f5ecee;
|
background: #f5ecee;
|
||||||
color: #c7254e;
|
color: #c7254e;
|
||||||
font-family: Menlo,Monaco,"Andale Mono","lucida console","Courier New","Microsoft YaHei";
|
font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", "Microsoft YaHei";
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
border-radius: $radiusSmall;
|
border-radius: @radiusSmall;
|
||||||
}
|
}
|
||||||
blockquote {
|
blockquote {
|
||||||
padding: 15px 20px;
|
padding: 15px 20px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
border-left: 5px solid #657b83;
|
border-left: 5px solid #657b83;
|
||||||
background: #f6f6f6;
|
background: #f6f6f6;
|
||||||
p{
|
p {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
@ -87,11 +87,11 @@
|
|||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
ul {
|
ul {
|
||||||
li:before{
|
li:before {
|
||||||
content: "";
|
content: "";
|
||||||
width: 6px;
|
width: 6px;
|
||||||
height: 6px;
|
height: 6px;
|
||||||
border: 1px solid $color9;
|
border: 1px solid @color9;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
background: #aaa;
|
background: #aaa;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -101,28 +101,28 @@
|
|||||||
}
|
}
|
||||||
ol {
|
ol {
|
||||||
counter-reset: item;
|
counter-reset: item;
|
||||||
li:before{
|
li:before {
|
||||||
counter-increment: item;
|
counter-increment: item;
|
||||||
content: counter(item)".";
|
content: counter(item) ".";
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
ul,ol{
|
ul, ol {
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
}
|
}
|
||||||
li{
|
li {
|
||||||
ul,ol{
|
ul, ol {
|
||||||
margin-left: 30px;
|
margin-left: 30px;
|
||||||
li:before{
|
li:before {
|
||||||
content: "";
|
content: "";
|
||||||
background: #dedede;
|
background: #dedede;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
h1{
|
h1 {
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
}
|
}
|
||||||
h2,h3,h4,h5,h6{
|
h2, h3, h4, h5, h6 {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #574C4C;
|
color: #574C4C;
|
||||||
@ -130,18 +130,18 @@
|
|||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
border-bottom: 1px solid #ddd;
|
border-bottom: 1px solid #ddd;
|
||||||
}
|
}
|
||||||
video{
|
video {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
strong {
|
strong {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
.caption{
|
.caption {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
color: #aaa;
|
color: #aaa;
|
||||||
}
|
}
|
||||||
hr{
|
hr {
|
||||||
height: 0;
|
height: 0;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
@ -156,33 +156,33 @@
|
|||||||
padding: 5px 15px;
|
padding: 5px 15px;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
font-family: Menlo,Monaco,"Andale Mono","lucida console","Courier New",monospace;
|
font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
|
||||||
code{
|
code {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
table{
|
table {
|
||||||
margin: 15px 0;
|
margin: 15px 0;
|
||||||
border-collapse:collapse;
|
border-collapse: collapse;
|
||||||
tr,td{
|
tr, td {
|
||||||
height:35px;
|
height: 35px;
|
||||||
}
|
}
|
||||||
thead tr{
|
thead tr {
|
||||||
background: #f8f8f8;
|
background: #f8f8f8;
|
||||||
}
|
}
|
||||||
tbody tr:hover{
|
tbody tr:hover {
|
||||||
background: #efefef;
|
background: #efefef;
|
||||||
}
|
}
|
||||||
td,th{
|
td, th {
|
||||||
border: 1px solid #bbb;
|
border: 1px solid #bbb;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
figure table{
|
figure table {
|
||||||
border: none;
|
border: none;
|
||||||
width: auto;
|
width: auto;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
tbody tr:hover{
|
tbody tr:hover {
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -12,9 +12,9 @@
|
|||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: #fff #ddd;
|
border-color: #fff #ddd;
|
||||||
background: adjust-color($colorBg, $alpha: -0.2);
|
background: fade(@colorBg, 80%);
|
||||||
@extend %trans;
|
.trans();
|
||||||
img{
|
img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -28,19 +28,19 @@
|
|||||||
transition: color 0.3s;
|
transition: color 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-header{
|
.article-header {
|
||||||
border-left: 5px solid #4d4d4d;
|
border-left: 5px solid #4d4d4d;
|
||||||
padding: 30px 0px 15px 25px;
|
padding: 30px 0px 15px 25px;
|
||||||
padding-left: $articlePadding;
|
padding-left: @articlePadding;
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-meta{
|
.article-meta {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 23px;
|
top: 23px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
time{
|
time {
|
||||||
color: #aaa;
|
color: #aaa;
|
||||||
.icon-clock {
|
.icon-clock {
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
@ -49,34 +49,34 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-more-link{
|
.article-more-link {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
float: right;
|
float: right;
|
||||||
a{
|
a {
|
||||||
background-color: #4d4d4d;
|
background-color: #4d4d4d;
|
||||||
color: $colorF;
|
color: @colorF;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
padding: 5px 8px 5px;
|
padding: 5px 8px 5px;
|
||||||
line-height: 16px;
|
line-height: 16px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
transition: background-color 0.3s;
|
transition: background-color 0.3s;
|
||||||
&:hover{
|
&:hover {
|
||||||
background: #3c3c3c;
|
background: #3c3c3c;
|
||||||
}
|
}
|
||||||
&.hidden{
|
&.hidden {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.article-info-index.article-info{
|
.article-info-index.article-info {
|
||||||
padding-top: 20px;
|
padding-top: 20px;
|
||||||
margin: 30px $articlePadding 0 $articlePadding;
|
margin: 30px @articlePadding 0 @articlePadding;
|
||||||
min-height: 72px;
|
min-height: 72px;
|
||||||
border-top: 1px solid #ddd;
|
border-top: 1px solid #ddd;
|
||||||
}
|
}
|
||||||
.article-info-post.article-info{
|
.article-info-post.article-info {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: none;
|
border: none;
|
||||||
margin: -30px 0 20px $articlePadding;
|
margin: -30px 0 20px @articlePadding;
|
||||||
}
|
}
|
||||||
@ -5,7 +5,7 @@
|
|||||||
z-index: 999;
|
z-index: 999;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
.icon {
|
.icon {
|
||||||
color: $colorF;
|
color: @colorF;
|
||||||
text-shadow: 1px 1px 1px #509eb7;
|
text-shadow: 1px 1px 1px #509eb7;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
@ -19,7 +19,7 @@
|
|||||||
width: 40px;
|
width: 40px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.jump-container:hover, .toc-container:hover{
|
.jump-container:hover, .toc-container:hover {
|
||||||
.icon {
|
.icon {
|
||||||
background: rgba(36, 193, 246, 0.9);
|
background: rgba(36, 193, 246, 0.9);
|
||||||
}
|
}
|
||||||
@ -50,7 +50,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.toc-container.tooltip-left{
|
.toc-container.tooltip-left {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
transition: 0.3s;
|
transition: 0.3s;
|
||||||
.tooltip {
|
.tooltip {
|
||||||
@ -72,7 +72,7 @@
|
|||||||
transform-origin: 100% 100%;
|
transform-origin: 100% 100%;
|
||||||
transform: translate3d(0, -10px, 0) rotate3d(1, 1, 1, -30deg);
|
transform: translate3d(0, -10px, 0) rotate3d(1, 1, 1, -30deg);
|
||||||
a {
|
a {
|
||||||
color: $colorF;
|
color: @colorF;
|
||||||
}
|
}
|
||||||
&::after {
|
&::after {
|
||||||
top: initial;
|
top: initial;
|
||||||
94
themes/yilia/source-src/css/core/_animation.less
Normal file
94
themes/yilia/source-src/css/core/_animation.less
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
//-----------------------------------------------------
|
||||||
|
// animate less
|
||||||
|
// 提供动画 mixin 及基础 placeholder 类
|
||||||
|
//-----------------------------------------------------
|
||||||
|
|
||||||
|
// animation-basic 基础动画属性
|
||||||
|
.animation-basic() {
|
||||||
|
animation-duration: 0.3s;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 公共动画基础属性
|
||||||
|
//-----------------------------------------------------
|
||||||
|
.anmCommon() {
|
||||||
|
animation-duration: .5s;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes leftIn {
|
||||||
|
from {
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translate(333px, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes leftOut {
|
||||||
|
from {
|
||||||
|
transform: translate(333px, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.anmLeftIn() {
|
||||||
|
.anmCommon();
|
||||||
|
animation-name: leftIn;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anmLeftOut() {
|
||||||
|
.anmCommon();
|
||||||
|
animation-name: leftOut;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes smallLeftIn {
|
||||||
|
from {
|
||||||
|
transform: translate(0, 0);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translate(300px, 0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes smallleftOut {
|
||||||
|
from {
|
||||||
|
transform: translate(300px, 0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translate(0, 0);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.anmSmallLeftIn() {
|
||||||
|
.anmCommon();
|
||||||
|
animation-name: smallLeftIn;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anmSmallLeftOut() {
|
||||||
|
.anmCommon();
|
||||||
|
animation-name: smallleftOut;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 头像旋转动画
|
||||||
|
@keyframes profilepic {
|
||||||
|
0% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.picRotate() {
|
||||||
|
animation: profilepic 5s linear infinite;
|
||||||
|
}
|
||||||
@ -1,328 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
|
|
||||||
//-----------------------------------------------------
|
|
||||||
// animate.scss
|
|
||||||
// 提供6组动画 fade-in/out, shrink-in/out, up-in/out, down-in/out, left-in/out, right-in/out
|
|
||||||
//-----------------------------------------------------
|
|
||||||
|
|
||||||
%animation-basic {
|
|
||||||
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);
|
|
||||||
|
|
||||||
.#{$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);
|
|
||||||
|
|
||||||
.#{$className}-out {
|
|
||||||
animation-name: $name;
|
|
||||||
@extend %animation-basic;
|
|
||||||
}
|
|
||||||
|
|
||||||
@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;
|
|
||||||
}
|
|
||||||
@keyframes #{$name} {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scale($from);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin animation-shrink-out($className: shrink, $to: 1.185) {
|
|
||||||
$name: str-insert(Out, $className, 0);
|
|
||||||
|
|
||||||
.#{$className}-out {
|
|
||||||
animation-name: $name;
|
|
||||||
@extend %animation-basic;
|
|
||||||
}
|
|
||||||
|
|
||||||
@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;
|
|
||||||
}
|
|
||||||
|
|
||||||
@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);
|
|
||||||
|
|
||||||
.#{$className}-out {
|
|
||||||
animation-name: $name;
|
|
||||||
@extend %animation-basic;
|
|
||||||
}
|
|
||||||
|
|
||||||
@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;
|
|
||||||
}
|
|
||||||
|
|
||||||
@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);
|
|
||||||
|
|
||||||
.#{$className}-out {
|
|
||||||
animation-name: $name;
|
|
||||||
@extend %animation-basic;
|
|
||||||
}
|
|
||||||
|
|
||||||
@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;
|
|
||||||
}
|
|
||||||
|
|
||||||
@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);
|
|
||||||
|
|
||||||
.#{$className}-out {
|
|
||||||
animation-name: $name;
|
|
||||||
@extend %animation-basic;
|
|
||||||
}
|
|
||||||
|
|
||||||
@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;
|
|
||||||
}
|
|
||||||
|
|
||||||
@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);
|
|
||||||
|
|
||||||
.#{$className}-out {
|
|
||||||
animation-name: $name;
|
|
||||||
@extend %animation-basic;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes #{$name} {
|
|
||||||
0% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate(0, 0);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate($value, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
%anmCommon {
|
|
||||||
animation-duration: .5s;
|
|
||||||
animation-fill-mode: both;
|
|
||||||
animation-timing-function: ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes leftIn {
|
|
||||||
from {
|
|
||||||
transform: translate(0, 0);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: translate(333px, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes leftOut {
|
|
||||||
from {
|
|
||||||
transform: translate(333px, 0);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: translate(0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
%anmLeftIn {
|
|
||||||
@extend %anmCommon;
|
|
||||||
animation-name: leftIn;
|
|
||||||
}
|
|
||||||
|
|
||||||
%anmLeftOut {
|
|
||||||
@extend %anmCommon;
|
|
||||||
animation-name: leftOut;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes smallLeftIn {
|
|
||||||
from {
|
|
||||||
transform: translate(0, 0);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: translate(300px, 0);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes smallleftOut {
|
|
||||||
from {
|
|
||||||
transform: translate(300px, 0);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: translate(0, 0);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
%anmSmallLeftIn {
|
|
||||||
@extend %anmCommon;
|
|
||||||
animation-name: smallLeftIn;
|
|
||||||
}
|
|
||||||
|
|
||||||
%anmSmallLeftOut {
|
|
||||||
@extend %anmCommon;
|
|
||||||
animation-name: smallleftOut;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 头像旋转动画
|
|
||||||
@keyframes profilepic {
|
|
||||||
0% {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
%picRotate {
|
|
||||||
animation: profilepic 5s linear infinite;
|
|
||||||
}
|
|
||||||
@ -1,247 +0,0 @@
|
|||||||
@charset "utf-8";
|
|
||||||
|
|
||||||
//-----------------------------------------------------
|
|
||||||
// media queries scss
|
|
||||||
// author: Rafal Bromirski
|
|
||||||
// github: http://github.com/paranoida/sass-mediaqueries
|
|
||||||
// version: 1.6.1
|
|
||||||
//-----------------------------------------------------
|
|
||||||
|
|
||||||
|
|
||||||
// generator
|
|
||||||
// ----------------------------------------------------
|
|
||||||
|
|
||||||
@mixin mq($args...) {
|
|
||||||
$media-type: 'only screen';
|
|
||||||
$media-type-key: 'media-type';
|
|
||||||
$args: keywords($args);
|
|
||||||
$expr: '';
|
|
||||||
|
|
||||||
@if map-has-key($args, $media-type-key) {
|
|
||||||
$media-type: map-get($args, $media-type-key);
|
|
||||||
$args: map-remove($args, $media-type-key);
|
|
||||||
}
|
|
||||||
|
|
||||||
@each $key, $value in $args {
|
|
||||||
@if $value {
|
|
||||||
$expr: "#{$expr} and (#{$key}: #{$value})";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media #{$media-type} #{$expr} {
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// screen
|
|
||||||
// ----------------------------------------------------
|
|
||||||
|
|
||||||
@mixin screen($min, $max, $orientation: false) {
|
|
||||||
@include mq($min-width: $min, $max-width: $max, $orientation: $orientation) {
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin max-screen($max) {
|
|
||||||
@include mq($max-width: $max) {
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin min-screen($min) {
|
|
||||||
@include mq($min-width: $min) {
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin screen-height($min, $max, $orientation: false) {
|
|
||||||
@include mq($min-height: $min, $max-height: $max, $orientation: $orientation) {
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin max-screen-height($max) {
|
|
||||||
@include mq($max-height: $max) {
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin min-screen-height($min) {
|
|
||||||
@include mq($min-height: $min) {
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// hdpi
|
|
||||||
// ----------------------------------------------------
|
|
||||||
|
|
||||||
@mixin hdpi($ratio: 1.3) {
|
|
||||||
@media only screen and (-webkit-min-device-pixel-ratio: $ratio),
|
|
||||||
screen and (min-resolution: #{round($ratio*96)}dpi) {
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// hdtv
|
|
||||||
// ----------------------------------------------------
|
|
||||||
|
|
||||||
@mixin hdtv($standard: '1080') {
|
|
||||||
$min-width: false;
|
|
||||||
$min-height: false;
|
|
||||||
|
|
||||||
$standards: ('720p', 1280px, 720px)
|
|
||||||
('1080', 1920px, 1080px)
|
|
||||||
('2K', 2048px, 1080px)
|
|
||||||
('4K', 4096px, 2160px);
|
|
||||||
|
|
||||||
@each $s in $standards {
|
|
||||||
@if $standard == nth($s, 1) {
|
|
||||||
$min-width: nth($s, 2);
|
|
||||||
$min-height: nth($s, 3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mq(
|
|
||||||
$min-device-width: $min-width,
|
|
||||||
$min-device-height: $min-height,
|
|
||||||
$min-width: $min-width,
|
|
||||||
$min-height: $min-height
|
|
||||||
) {
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// iphone 4
|
|
||||||
// ----------------------------------------------------
|
|
||||||
|
|
||||||
@mixin iphone4($orientation: false) {
|
|
||||||
$min: 320px;
|
|
||||||
$max: 480px;
|
|
||||||
$pixel-ratio: 2;
|
|
||||||
$aspect-ratio: '2/3';
|
|
||||||
|
|
||||||
@include mq(
|
|
||||||
$min-device-width: $min,
|
|
||||||
$max-device-width: $max,
|
|
||||||
$orientation: $orientation,
|
|
||||||
$device-aspect-ratio: $aspect-ratio,
|
|
||||||
$-webkit-device-pixel-ratio: $pixel-ratio
|
|
||||||
) {
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// iphone 5
|
|
||||||
// ----------------------------------------------------
|
|
||||||
|
|
||||||
@mixin iphone5($orientation: false) {
|
|
||||||
$min: 320px;
|
|
||||||
$max: 568px;
|
|
||||||
$pixel-ratio: 2;
|
|
||||||
$aspect-ratio: '40/71';
|
|
||||||
|
|
||||||
@include mq(
|
|
||||||
$min-device-width: $min,
|
|
||||||
$max-device-width: $max,
|
|
||||||
$orientation: $orientation,
|
|
||||||
$device-aspect-ratio: $aspect-ratio,
|
|
||||||
$-webkit-device-pixel-ratio: $pixel-ratio
|
|
||||||
) {
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// iphone 6
|
|
||||||
// ----------------------------------------------------
|
|
||||||
|
|
||||||
@mixin iphone6($orientation: false) {
|
|
||||||
$min: 375px;
|
|
||||||
$max: 667px;
|
|
||||||
$pixel-ratio: 2;
|
|
||||||
|
|
||||||
@include mq(
|
|
||||||
$min-device-width: $min,
|
|
||||||
$max-device-width: $max,
|
|
||||||
$orientation: $orientation,
|
|
||||||
$-webkit-device-pixel-ratio: $pixel-ratio
|
|
||||||
) {
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// iphone 6 plus
|
|
||||||
// ----------------------------------------------------
|
|
||||||
|
|
||||||
@mixin iphone6-plus($orientation: false) {
|
|
||||||
$min: 414px;
|
|
||||||
$max: 736px;
|
|
||||||
$pixel-ratio: 3;
|
|
||||||
|
|
||||||
@include mq(
|
|
||||||
$min-device-width: $min,
|
|
||||||
$max-device-width: $max,
|
|
||||||
$orientation: $orientation,
|
|
||||||
$-webkit-device-pixel-ratio: $pixel-ratio
|
|
||||||
) {
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// ipad (all)
|
|
||||||
// ----------------------------------------------------
|
|
||||||
|
|
||||||
@mixin ipad($orientation: false) {
|
|
||||||
$min: 768px;
|
|
||||||
$max: 1024px;
|
|
||||||
|
|
||||||
@include mq(
|
|
||||||
$min-device-width: $min,
|
|
||||||
$max-device-width: $max,
|
|
||||||
$orientation: $orientation
|
|
||||||
) {
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// ipad-retina
|
|
||||||
// ----------------------------------------------------
|
|
||||||
|
|
||||||
@mixin ipad-retina($orientation: false) {
|
|
||||||
$min: 768px;
|
|
||||||
$max: 1024px;
|
|
||||||
$pixel-ratio: 2;
|
|
||||||
|
|
||||||
@include mq(
|
|
||||||
$min-device-width: $min,
|
|
||||||
$max-device-width: $max,
|
|
||||||
$orientation: $orientation,
|
|
||||||
$-webkit-device-pixel-ratio: $pixel-ratio
|
|
||||||
) {
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// orientation
|
|
||||||
// ----------------------------------------------------
|
|
||||||
|
|
||||||
@mixin landscape() {
|
|
||||||
@include mq($orientation: landscape) {
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin portrait() {
|
|
||||||
@include mq($orientation: portrait) {
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
409
themes/yilia/source-src/css/core/_mixin.less
Normal file
409
themes/yilia/source-src/css/core/_mixin.less
Normal file
@ -0,0 +1,409 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
//-----------------------------------------------------
|
||||||
|
// mixin less
|
||||||
|
// 包括常用的 mixin 及辅助样式
|
||||||
|
// LESS 中用 .name() 定义 mixin（不会输出到 CSS），用 .name() 调用
|
||||||
|
//-----------------------------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
// Center-align a block level element
|
||||||
|
//-----------------------------------------------------
|
||||||
|
.center-block() {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
// clearfix
|
||||||
|
//-----------------------------------------------------
|
||||||
|
.clearfix() {
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hide only visually, but have it available for screenreaders
|
||||||
|
//-----------------------------------------------------
|
||||||
|
.hidden-clip() {
|
||||||
|
position: absolute;
|
||||||
|
clip: rect(1px, 1px, 1px, 1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ellipsis
|
||||||
|
//-----------------------------------------------------
|
||||||
|
.ellipsis() {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ellipsis lines (only old webkit flex box)
|
||||||
|
//-----------------------------------------------------
|
||||||
|
.ellipsis-lines(@lines: 2) {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: @lines;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
// word-break
|
||||||
|
//-----------------------------------------------------
|
||||||
|
.word-break() {
|
||||||
|
white-space: normal;
|
||||||
|
word-wrap: break-word;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
// disabled
|
||||||
|
//-----------------------------------------------------
|
||||||
|
.disabled(@disabledText: @colorDisabled-text; @disabledBg: @colorDisabled-bg; @disabledBorder: false) {
|
||||||
|
background-color: @disabledBg !important;
|
||||||
|
color: @disabledText !important;
|
||||||
|
cursor: default !important;
|
||||||
|
pointer-events: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// image replace text
|
||||||
|
//-----------------------------------------------------
|
||||||
|
.ir() {
|
||||||
|
font: 0/0 a;
|
||||||
|
text-shadow: none;
|
||||||
|
border: 0 none;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
// fixed top or bottom
|
||||||
|
//-----------------------------------------------------
|
||||||
|
.fixed(@pos: 0) {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: @pos;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-bottom() {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// justify 左右对齐
|
||||||
|
//-----------------------------------------------------
|
||||||
|
.justify() {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
// retina border 0.5px 实现 (ios9)
|
||||||
|
//-----------------------------------------------------
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// retina border via linear-gradient
|
||||||
|
//-----------------------------------------------------
|
||||||
|
.retina-one-px-bg(@direction: top; @color: @colorBorder) {
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
// retina border via transform
|
||||||
|
//-----------------------------------------------------
|
||||||
|
.retina-one-px-border(@direction: top; @color: @colorBorder) {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
right: 0;
|
||||||
|
height: 0;
|
||||||
|
transform: scaleY(0.5);
|
||||||
|
border-top: 1px solid @color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.retina-one-px-border-bottom(@color: @colorBorder) {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
height: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
transform: scaleY(0.5);
|
||||||
|
border-top: 1px solid @color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.retina-one-px-border-all(@color: @colorBorder) {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 200%;
|
||||||
|
height: 200%;
|
||||||
|
transform-origin: left top;
|
||||||
|
transform: scale(0.5);
|
||||||
|
border: 1px solid @color;
|
||||||
|
}
|
||||||
|
|
||||||
|
// border top & bottom placeholder
|
||||||
|
//-----------------------------------------------------
|
||||||
|
.border-tb() {
|
||||||
|
position: relative;
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
.retina-one-px-border();
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
.retina-one-px-border-bottom();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// border all placeholder
|
||||||
|
//-----------------------------------------------------
|
||||||
|
.border-all() {
|
||||||
|
position: relative;
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
.retina-one-px-border-all();
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// equal-table
|
||||||
|
//-----------------------------------------------------
|
||||||
|
.equal-table(@child: ~"li") {
|
||||||
|
display: table;
|
||||||
|
table-layout: fixed;
|
||||||
|
width: 100%;
|
||||||
|
@{child} {
|
||||||
|
display: table-cell;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// equal-flex
|
||||||
|
//-----------------------------------------------------
|
||||||
|
.equal-flex(@child: ~"li") {
|
||||||
|
display: flex;
|
||||||
|
@{child} {
|
||||||
|
flex: 1;
|
||||||
|
width: 1%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// flex center
|
||||||
|
//-----------------------------------------------------
|
||||||
|
.center-flex() {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
// translate center
|
||||||
|
//-----------------------------------------------------
|
||||||
|
.center-translate() {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate3d(-50%, -50%, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
// triangle 三角箭头
|
||||||
|
//-----------------------------------------------------
|
||||||
|
.triangle-basic() {
|
||||||
|
content: "";
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.triangle(@direction: top; @borderWidth: 6px; @borderColor: @colorC) {
|
||||||
|
.triangle-basic();
|
||||||
|
}
|
||||||
|
|
||||||
|
// v-arrow 方向箭头
|
||||||
|
//-----------------------------------------------------
|
||||||
|
.v-arrow(@direction: right; @borderWidth: 2px; @size: 10px) {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
width: @size;
|
||||||
|
height: @size;
|
||||||
|
border-top: @borderWidth solid currentColor;
|
||||||
|
border-right: @borderWidth solid currentColor;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
// btn-size
|
||||||
|
//-----------------------------------------------------
|
||||||
|
.btn-size(@padding: 1em; @height: @barHeight; @radius: 3px) {
|
||||||
|
padding: 0 @padding;
|
||||||
|
line-height: (@height - 2px);
|
||||||
|
border-radius: @radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
// btn-color (simplified)
|
||||||
|
//-----------------------------------------------------
|
||||||
|
.btn-color(@btnColorText: #333; @btnColorBg: #666; @btnColorBorder: false) {
|
||||||
|
color: @btnColorText;
|
||||||
|
background-color: @btnColorBg;
|
||||||
|
&:hover, &:active {
|
||||||
|
background-color: darken(@btnColorBg, 5%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// function: tint - 为颜色添加白色
|
||||||
|
//-----------------------------------------------------
|
||||||
|
.tint(@color; @percent) {
|
||||||
|
// Use mix(white, @color, @percent) equivalent
|
||||||
|
// In LESS: mix(white, @color, @percent)
|
||||||
|
}
|
||||||
|
|
||||||
|
// function: shade - 为颜色添加黑色
|
||||||
|
//-----------------------------------------------------
|
||||||
|
.shade(@color; @percent) {
|
||||||
|
// In LESS: mix(black, @color, @percent)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 下面是常用 placeholder 转为 LESS mixin
|
||||||
|
//-----------------------------------------------------
|
||||||
|
|
||||||
|
// shadow
|
||||||
|
.shadow() {
|
||||||
|
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, .75);
|
||||||
|
}
|
||||||
|
|
||||||
|
// trans
|
||||||
|
.trans() {
|
||||||
|
transition: all 0.2s ease-in;
|
||||||
|
-ms-transition: all 0.2s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
// trans8
|
||||||
|
.trans8() {
|
||||||
|
transition: all 0.8s ease-in;
|
||||||
|
-ms-transition: all 0.8s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
// display-flex
|
||||||
|
.display-flex() {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
// transition-all
|
||||||
|
.transition-all() {
|
||||||
|
transition: all 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
// translate3d
|
||||||
|
.translate3d() {
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
// bar-line
|
||||||
|
.bar-line() {
|
||||||
|
line-height: (@barHeight - 10px);
|
||||||
|
padding: 5px 10px;
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
&:active,
|
||||||
|
&:hover {
|
||||||
|
background-color: darken(@colorF, 3%);
|
||||||
|
}
|
||||||
|
&:not(:first-of-type)::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
right: 0;
|
||||||
|
height: 0;
|
||||||
|
transform: scaleY(0.5);
|
||||||
|
border-top: 1px solid @colorBorder;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// item-v-right 右侧箭头
|
||||||
|
.item-v-right() {
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-top: 2px solid currentColor;
|
||||||
|
border-right: 2px solid currentColor;
|
||||||
|
color: @colorC;
|
||||||
|
position: absolute;
|
||||||
|
right: 15px;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -1px;
|
||||||
|
transform: rotate(45deg) translate(0, -50%);
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// gap-item 间隔列表
|
||||||
|
.gap-item() {
|
||||||
|
position: relative;
|
||||||
|
background: #fff;
|
||||||
|
margin: 10px 0;
|
||||||
|
&:active,
|
||||||
|
&:hover {
|
||||||
|
background-color: darken(@colorF, 3%);
|
||||||
|
}
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
right: 0;
|
||||||
|
height: 0;
|
||||||
|
transform: scaleY(0.5);
|
||||||
|
border-top: 1px solid @colorBorder;
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
height: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
transform: scaleY(0.5);
|
||||||
|
border-top: 1px solid @colorBorder;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// triangle-basic
|
||||||
|
.triangle-basic-class() {
|
||||||
|
content: "";
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
@ -1,694 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
|
|
||||||
//-----------------------------------------------------
|
|
||||||
// mixin scss
|
|
||||||
// 包括常用的mixin, %, @function 及辅助的btn和背景图片icon
|
|
||||||
// mixin，通过@include调用，样式通过拷贝的方式使用，尤其适用于传递参数
|
|
||||||
// %，通过@extend调用，样式通过组合申明的方式使用，适用于不传参数的代码片段
|
|
||||||
// @function，返回一个值，用于调用
|
|
||||||
//-----------------------------------------------------
|
|
||||||
|
|
||||||
// mixin & %
|
|
||||||
// 既定义了mixin也定义了%，根据需求使用@include或@extend调用
|
|
||||||
//-----------------------------------------------------
|
|
||||||
|
|
||||||
// Center-align a block level element
|
|
||||||
@mixin center-block($extend: true) {
|
|
||||||
@if $extend {
|
|
||||||
@extend %center-block;
|
|
||||||
}
|
|
||||||
@else {
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
%center-block {
|
|
||||||
@include center-block(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
// clearfix
|
|
||||||
@mixin clearfix($extend: true) {
|
|
||||||
@if $extend {
|
|
||||||
@extend %clearfix;
|
|
||||||
}
|
|
||||||
@else {
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
content: "";
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
%clearfix {
|
|
||||||
@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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
%hidden-clip {
|
|
||||||
@include hidden-clip(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ellipsis
|
|
||||||
@mixin ellipsis($extend: true) {
|
|
||||||
@if $extend {
|
|
||||||
@extend %ellipsis;
|
|
||||||
}
|
|
||||||
@else {
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
%ellipsis {
|
|
||||||
@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;
|
|
||||||
}
|
|
||||||
|
|
||||||
// word-break
|
|
||||||
@mixin word-break($extend: true) {
|
|
||||||
@if $extend {
|
|
||||||
@extend %word-break;
|
|
||||||
}
|
|
||||||
@else {
|
|
||||||
white-space: normal;
|
|
||||||
word-wrap: break-word;
|
|
||||||
word-break: break-all;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
%word-break {
|
|
||||||
@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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
%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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
%ir {
|
|
||||||
@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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
%fixed-top {
|
|
||||||
@include fixed;
|
|
||||||
}
|
|
||||||
|
|
||||||
%fixed-bottom {
|
|
||||||
@include fixed(bottom);
|
|
||||||
}
|
|
||||||
|
|
||||||
// justify
|
|
||||||
// 左右对齐
|
|
||||||
@mixin justify($extend: true) {
|
|
||||||
@if $extend {
|
|
||||||
@extend %justify;
|
|
||||||
}
|
|
||||||
@else {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
%justify {
|
|
||||||
@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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// border和transform实现
|
|
||||||
// 注意before和after的层级问题
|
|
||||||
@mixin retina-one-px-border($direction: top, $color: $colorBorder) {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// border all
|
|
||||||
%border-all {
|
|
||||||
position: relative;
|
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
@include retina-one-px-border(all);
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// mixin
|
|
||||||
// 只定义了mixin，所以只能通过@include来调用
|
|
||||||
//-----------------------------------------------------
|
|
||||||
|
|
||||||
// table 等
|
|
||||||
// $child 参数请使用单引号，因为用于子元素选择器
|
|
||||||
@mixin equal-table($child: 'li') {
|
|
||||||
display: table;
|
|
||||||
table-layout: fixed;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
#{unquote($child)} {
|
|
||||||
display: table-cell;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// flex 等分
|
|
||||||
// $child 参数请使用单引号，因为用于子元素选择器
|
|
||||||
@mixin equal-flex($child: 'li') {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
#{unquote($child)} {
|
|
||||||
flex: 1;
|
|
||||||
width: 1%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// line equal gap
|
|
||||||
// $child 参数请使用单引号，因为用于子元素选择器
|
|
||||||
@mixin line-equal-gap($gap: 10px, $child: 'li', $lr: true) {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
@if $lr {
|
|
||||||
padding-left: $gap;
|
|
||||||
padding-right: $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: "";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// object wrap
|
|
||||||
// $child 参数请使用单引号，因为用于子元素选择器
|
|
||||||
@mixin object-wrap($percent: 100%, $child: 'img') {
|
|
||||||
position: relative;
|
|
||||||
padding-top: $percent;
|
|
||||||
height: 0;
|
|
||||||
|
|
||||||
#{unquote($child)} {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// triangle 三角箭头
|
|
||||||
// 可采用空元素或伪元素生成，具体定位这里不涉及
|
|
||||||
%triangle-basic {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// selector
|
|
||||||
// 改变父元素状态，如:hover或.active
|
|
||||||
// 父元素不能有组合选择器，如.a, .b{}
|
|
||||||
// .parent{
|
|
||||||
// .child{
|
|
||||||
// @include parent-state(":hover"){
|
|
||||||
// color: #f00;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// .parent:hover .child {
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// animation-fade
|
|
||||||
// @include animation-fade
|
|
||||||
// @include animation-fade($from: false, $to: .5);
|
|
||||||
// @include animation-fade($from: 1, $to: 0);
|
|
||||||
@mixin animation-fade($name: animationFade, $from: 0, $to: false){
|
|
||||||
@keyframes #{animationFade} {
|
|
||||||
@if $from {
|
|
||||||
from {
|
|
||||||
opacity: $from;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@if $to {
|
|
||||||
to {
|
|
||||||
opacity: $to;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// animation-translate
|
|
||||||
// @include animation-translate
|
|
||||||
// @include animation-translate($from: x -100%);
|
|
||||||
// @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));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@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));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// %
|
|
||||||
// 只定义了%，所以只能通过@extend来调用
|
|
||||||
//-----------------------------------------------------
|
|
||||||
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 间隔列表
|
|
||||||
%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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 下面的几个%，由于版本或前缀，所以设计成%
|
|
||||||
//-----------------------------------------------------
|
|
||||||
// flex
|
|
||||||
%display-flex {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
// all-transition
|
|
||||||
%transition-all {
|
|
||||||
transition: all 0.3s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
// translate3d
|
|
||||||
%translate3d {
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// btn
|
|
||||||
//----------------------------------------------------
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
// btn-size
|
|
||||||
// 按钮大小
|
|
||||||
@mixin btn-size($padding: 1em, $height: $barHeight, $radius: 3px) {
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
&: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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//function
|
|
||||||
//-----------------------------------------------------
|
|
||||||
|
|
||||||
// 为颜色添加白色，以百分比形式
|
|
||||||
@function tint($color, $percent) {
|
|
||||||
@return mix(white, $color, $percent);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 为颜色添加黑色，以百分比形式
|
|
||||||
@function shade($color, $percent) {
|
|
||||||
@return mix(black, $color, $percent);
|
|
||||||
}
|
|
||||||
|
|
||||||
%shadow {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
%trans8 {
|
|
||||||
transition: all 0.8s ease-in;
|
|
||||||
-ms-transition: all 0.8s ease-in;
|
|
||||||
}
|
|
||||||
@ -1,7 +1,7 @@
|
|||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
|
|
||||||
//-----------------------------------------------------
|
//-----------------------------------------------------
|
||||||
// reset scss
|
// reset less
|
||||||
// 包括normalize，清零重置
|
// 包括normalize，清零重置
|
||||||
//-----------------------------------------------------
|
//-----------------------------------------------------
|
||||||
|
|
||||||
@ -21,20 +21,17 @@ html {
|
|||||||
// 1. Remove default margin
|
// 1. Remove default margin
|
||||||
body {
|
body {
|
||||||
margin: 0; // 1
|
margin: 0; // 1
|
||||||
font-size: $fontSize;
|
font-size: @fontSize;
|
||||||
font-family: $fontFamily;
|
font-family: @fontFamily;
|
||||||
line-height: $fontLineHeight;
|
line-height: @fontLineHeight;
|
||||||
color: $colorText;
|
color: @colorText;
|
||||||
background-color: $colorBg;
|
background-color: @colorBg;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
// HTML5 display definitions
|
// HTML5 display definitions
|
||||||
//-----------------------------------------------------
|
//-----------------------------------------------------
|
||||||
|
|
||||||
// Correct `block` display not defined for any HTML5 element in IE 8/9.
|
|
||||||
// Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
|
|
||||||
// Correct `block` display not defined for `main` in IE 11.
|
|
||||||
article,
|
article,
|
||||||
aside,
|
aside,
|
||||||
details,
|
details,
|
||||||
@ -73,7 +70,7 @@ progress {
|
|||||||
|
|
||||||
// Address `[hidden]` styling not present in IE 8/9/10.
|
// Address `[hidden]` styling not present in IE 8/9/10.
|
||||||
// Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
|
// Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
|
||||||
[hidden],template {
|
[hidden], template {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -86,7 +83,7 @@ progress {
|
|||||||
a {
|
a {
|
||||||
background: transparent; // 1
|
background: transparent; // 1
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: nth($colorLink, 1);
|
color: @colorLink;
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
outline: 0; // 2
|
outline: 0; // 2
|
||||||
@ -96,34 +93,28 @@ a {
|
|||||||
// Text-level semantics
|
// Text-level semantics
|
||||||
//-----------------------------------------------------
|
//-----------------------------------------------------
|
||||||
|
|
||||||
// Address styling not present in IE 8/9/10/11, Safari, and Chrome.
|
|
||||||
abbr[title] {
|
abbr[title] {
|
||||||
border-bottom: 1px dotted;
|
border-bottom: 1px dotted;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
|
b, strong {
|
||||||
b,strong {
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Address styling not present in Safari and Chrome.
|
|
||||||
dfn {
|
dfn {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Address styling not present in IE 8/9.
|
|
||||||
mark {
|
mark {
|
||||||
background: #ff0;
|
background: #ff0;
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Address inconsistent and variable font size in all browsers.
|
|
||||||
small {
|
small {
|
||||||
font-size: 80%;
|
font-size: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
sub, sup {
|
||||||
sub,sup {
|
|
||||||
font-size: 75%;
|
font-size: 75%;
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -156,15 +147,6 @@ svg:not(:root) {
|
|||||||
// Grouping content
|
// Grouping content
|
||||||
//-----------------------------------------------------
|
//-----------------------------------------------------
|
||||||
|
|
||||||
// 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
|
|
||||||
// }
|
|
||||||
|
|
||||||
// 1. Address odd `em`-unit font size rendering in all browsers.
|
// 1. Address odd `em`-unit font size rendering in all browsers.
|
||||||
code,
|
code,
|
||||||
kbd,
|
kbd,
|
||||||
@ -177,13 +159,6 @@ samp {
|
|||||||
// Forms
|
// Forms
|
||||||
//-----------------------------------------------------
|
//-----------------------------------------------------
|
||||||
|
|
||||||
// Known limitation: by default, Chrome and Safari on OS X allow very limited
|
|
||||||
// styling of `select`, unless a `border` property is set.
|
|
||||||
|
|
||||||
// 1. Correct color not being inherited.
|
|
||||||
// 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,
|
button,
|
||||||
input,
|
input,
|
||||||
optgroup,
|
optgroup,
|
||||||
@ -196,33 +171,25 @@ textarea {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Show the overflow in IE.
|
// Show the overflow in IE.
|
||||||
// 1. Show the overflow in Edge.
|
|
||||||
// 2. Show the overflow in Edge, Firefox, and IE.
|
|
||||||
button,
|
button,
|
||||||
input, // 1
|
input,
|
||||||
select { // 2
|
select {
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Address inconsistent `text-transform` inheritance for `button` and `select`.
|
// Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||||
// All other form control elements do not inherit `text-transform` values.
|
button, select {
|
||||||
// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
|
|
||||||
// Correct `select` style inheritance in Firefox.
|
|
||||||
button,select {
|
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
// 1. Correct inability to style clickable `input` types in iOS.
|
||||||
// and `video` controls.
|
// 2. Improve usability and consistency of cursor style between image-type `input` and others.
|
||||||
// 2. Correct inability to style clickable `input` types in iOS.
|
|
||||||
// 3. Improve usability and consistency of cursor style between image-type
|
|
||||||
// `input` and others.
|
|
||||||
button,
|
button,
|
||||||
html input[type="button"], // 1
|
html input[type="button"],
|
||||||
input[type="reset"],
|
input[type="reset"],
|
||||||
input[type="submit"] {
|
input[type="submit"] {
|
||||||
-webkit-appearance: button; // 2
|
-webkit-appearance: button; // 1
|
||||||
cursor: pointer; // 3
|
cursor: pointer; // 2
|
||||||
}
|
}
|
||||||
|
|
||||||
// Re-set default cursor for disabled elements.
|
// Re-set default cursor for disabled elements.
|
||||||
@ -237,42 +204,33 @@ input::-moz-focus-inner {
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1. Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
// 1. Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet.
|
||||||
// the UA stylesheet.
|
|
||||||
input {
|
input {
|
||||||
line-height: normal; // 1
|
line-height: normal; // 1
|
||||||
}
|
}
|
||||||
|
|
||||||
// It's recommended that you don't attempt to style these elements.
|
// 1. Address `box-sizing` set to `border-box` in Safari and Chrome (include `-webkit-`).
|
||||||
// Firefox's implementation doesn't respect box-sizing, padding, or width.
|
// 2. Address `height` property not being respected.
|
||||||
|
|
||||||
// 1. Address box sizing set to `content-box` in IE 8/9/10.
|
|
||||||
// 2. Remove excess padding in IE 8/9/10.
|
|
||||||
input[type="checkbox"],
|
input[type="checkbox"],
|
||||||
input[type="radio"] {
|
input[type="radio"] {
|
||||||
box-sizing: border-box; // 1
|
box-sizing: border-box; // 1
|
||||||
padding: 0; // 2
|
padding: 0; // 2
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fix the cursor style for Chrome's increment/decrement buttons. For certain
|
// Fix the cursor style for Chrome's increment/decrement buttons.
|
||||||
// `font-size` values of the `input`, it causes the cursor style of the
|
|
||||||
// decrement button to change from `default` to `text`.
|
|
||||||
input[type="number"]::-webkit-inner-spin-button,
|
input[type="number"]::-webkit-inner-spin-button,
|
||||||
input[type="number"]::-webkit-outer-spin-button {
|
input[type="number"]::-webkit-outer-spin-button {
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1. Address `appearance` set to `searchfield` in Safari and Chrome.
|
// 1. Address `appearance` set to `searchfield` in Safari and Chrome.
|
||||||
// 2. Address `box-sizing` set to `border-box` in Safari and Chrome
|
// 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
|
||||||
// (include `-moz` to future-proof).
|
|
||||||
input[type="search"] {
|
input[type="search"] {
|
||||||
-webkit-appearance: textfield; // 1
|
-webkit-appearance: textfield; // 1
|
||||||
box-sizing: border-box;
|
box-sizing: content-box; // 2
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove inner padding and search cancel button in Safari and Chrome on OS X.
|
// Remove inner padding and search cancel button in Safari and Chrome on OS X.
|
||||||
// Safari (but not Chrome) clips the cancel button when the search input has
|
|
||||||
// padding (and `textfield` appearance).
|
|
||||||
input[type="search"]::-webkit-search-cancel-button,
|
input[type="search"]::-webkit-search-cancel-button,
|
||||||
input[type="search"]::-webkit-search-decoration {
|
input[type="search"]::-webkit-search-decoration {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
@ -292,15 +250,12 @@ legend {
|
|||||||
padding: 0; // 2
|
padding: 0; // 2
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1. Remove default vertical scrollbar in IE 8/9/10/11.
|
// Remove default vertical scrollbar in IE 8/9/10/11.
|
||||||
textarea {
|
textarea {
|
||||||
overflow: auto; // 1
|
overflow: auto;
|
||||||
resize: vertical;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Don't inherit the `font-weight` (applied by a rule above).
|
// 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 {
|
optgroup {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
@ -314,7 +269,7 @@ button {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Android 下 input focus 消除高亮外框
|
// Android 下 input focus 消除高亮外框
|
||||||
textarea,input {
|
textarea, input {
|
||||||
-webkit-user-modify: read-write-plaintext-only;
|
-webkit-user-modify: read-write-plaintext-only;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -325,39 +280,38 @@ input::-ms-reveal {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 表单placeholder样式
|
// 表单placeholder样式
|
||||||
// 注意不可联合申明，否则无效
|
|
||||||
// Firefox 19+
|
// Firefox 19+
|
||||||
input::-moz-placeholder,
|
input::-moz-placeholder,
|
||||||
textarea::-moz-placeholder {
|
textarea::-moz-placeholder {
|
||||||
color: $colorPlaceholder;
|
color: @colorPlaceholder;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Internet Explorer 10+
|
// Internet Explorer 10+
|
||||||
input:-ms-input-placeholder,
|
input:-ms-input-placeholder,
|
||||||
textarea:-ms-input-placeholder {
|
textarea:-ms-input-placeholder {
|
||||||
color: $colorPlaceholder;
|
color: @colorPlaceholder;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Safari and Chrome
|
// Safari and Chrome
|
||||||
input::-webkit-input-placeholder,
|
input::-webkit-input-placeholder,
|
||||||
textarea::-webkit-input-placeholder {
|
textarea::-webkit-input-placeholder {
|
||||||
color: $colorPlaceholder;
|
color: @colorPlaceholder;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 如不支持placeholder添加class 或者 设置提示的placeholder
|
// 如不支持placeholder添加class
|
||||||
.placeholder{
|
.placeholder {
|
||||||
color: $colorPlaceholder;
|
color: @colorPlaceholder;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Tables
|
// Tables
|
||||||
//-----------------------------------------------------
|
//-----------------------------------------------------
|
||||||
// Remove most spacing between table cells.
|
|
||||||
table {
|
table {
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
td,th {
|
td, th {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -408,5 +362,5 @@ i {
|
|||||||
|
|
||||||
// 清除子元素浮动
|
// 清除子元素浮动
|
||||||
.clearfix {
|
.clearfix {
|
||||||
@extend %clearfix;
|
.clearfix();
|
||||||
}
|
}
|
||||||
72
themes/yilia/source-src/css/core/_variables.less
Normal file
72
themes/yilia/source-src/css/core/_variables.less
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
//-----------------------------------------------------
|
||||||
|
// variables less
|
||||||
|
//-----------------------------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
// font相关
|
||||||
|
//-----------------------------------------------------
|
||||||
|
@fontSize: 14px;
|
||||||
|
@fontLineHeight: 1.5;
|
||||||
|
@fontFamily: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;
|
||||||
|
// ios华文黑体, Android 4.0之后, Android 4.0之前
|
||||||
|
@fontCn: STHeiTi, Roboto, "Droid Sans Fallback", Arial;
|
||||||
|
// ios4.0+, ios4.0-, Android 4.0+, Android 4.0-
|
||||||
|
@fontEn: "Helvetica Neue", Helvetica, Roboto, "Droid Sans", Arial;
|
||||||
|
|
||||||
|
// 背景色，文本色，边框色，链接色
|
||||||
|
//-----------------------------------------------------
|
||||||
|
@colorText: #333;
|
||||||
|
@colorBodyBg: #e3d8cc;
|
||||||
|
@colorBg: #f0eae3;
|
||||||
|
@colorBorder: #dbdbdb;
|
||||||
|
@colorLink: #08c;
|
||||||
|
@colorPlaceholder: #999;
|
||||||
|
|
||||||
|
// 标签颜色组
|
||||||
|
@tagColors: #88acdb, #ffa07a, #ca5757, #76becc, #7e608d, #6fc0e4, #bc8f8f;
|
||||||
|
@tagcolorsLength: 7;
|
||||||
|
|
||||||
|
// disabled state (原 $colorDisabled map)
|
||||||
|
@colorDisabled-text: #999;
|
||||||
|
@colorDisabled-bg: #e3e3e3;
|
||||||
|
@colorDisabled-border: #dbdbdb;
|
||||||
|
|
||||||
|
// 基本颜色
|
||||||
|
//-----------------------------------------------------
|
||||||
|
@color3: #333;
|
||||||
|
@color6: #666;
|
||||||
|
@color9: #999;
|
||||||
|
@colorA: #aaa;
|
||||||
|
@colorC: #ccc;
|
||||||
|
@colorF: #f5f5f5;
|
||||||
|
|
||||||
|
|
||||||
|
// 元素上下间距
|
||||||
|
//-----------------------------------------------------
|
||||||
|
@gap: 20px;
|
||||||
|
|
||||||
|
|
||||||
|
// header,footer等的高度
|
||||||
|
//-----------------------------------------------------
|
||||||
|
@barHeight: 44px;
|
||||||
|
|
||||||
|
|
||||||
|
// radius
|
||||||
|
//-----------------------------------------------------
|
||||||
|
@radiusBase: 5px;
|
||||||
|
@radiusSmall: 3px;
|
||||||
|
|
||||||
|
|
||||||
|
// timing-function
|
||||||
|
//-----------------------------------------------------
|
||||||
|
@timingFunction: cubic-bezier(0.42, 0, 0.58, 1);
|
||||||
|
|
||||||
|
|
||||||
|
// active state switch
|
||||||
|
//-----------------------------------------------------
|
||||||
|
@activeStateSwitch: true;
|
||||||
|
|
||||||
|
|
||||||
|
@articlePadding: 7.6923%;
|
||||||
@ -1,72 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
|
|
||||||
//-----------------------------------------------------
|
|
||||||
// variables scss
|
|
||||||
//-----------------------------------------------------
|
|
||||||
|
|
||||||
|
|
||||||
// font相关
|
|
||||||
//-----------------------------------------------------
|
|
||||||
$fontSize: 14px !default;
|
|
||||||
$fontLineHeight: 1.5 !default;
|
|
||||||
$fontFamily: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif !default;
|
|
||||||
// ios华文黑体,Android 4.0之后,Android 4.0之前
|
|
||||||
$fontCn: STHeiTi, Roboto, "Droid Sans Fallback", Arial !default;
|
|
||||||
// ios4.0+,ios4.0-,Android 4.0+,Android 4.0-
|
|
||||||
$fontEn: "Helvetica Neue", Helvetica, Roboto, "Droid Sans", Arial !default;
|
|
||||||
|
|
||||||
|
|
||||||
// 背景色，文本色，边框色，链接色
|
|
||||||
//-----------------------------------------------------
|
|
||||||
$colorText: #333 !default;
|
|
||||||
$colorBodyBg: #e3d8cc !default;
|
|
||||||
$colorBg: #f0eae3 !default;
|
|
||||||
$colorBorder: #dbdbdb !default;
|
|
||||||
$colorLink: #08c !default;
|
|
||||||
$colorPlaceholder: #999 !default; // input placeholder color
|
|
||||||
$tagcolorList: #88acdb #ffa07a #ca5757 #76becc #7e608d #6fc0e4 #bc8f8f; // 标签颜色组
|
|
||||||
$colorDisabled: (text: #999, bg: #e3e3e3, border: #dbdbdb) !default; // textColor bgColor borderColor
|
|
||||||
|
|
||||||
|
|
||||||
// 基本颜色
|
|
||||||
// color function : http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
|
|
||||||
// lighten($color, $amount)
|
|
||||||
// darken($color, $amount)
|
|
||||||
// opacity($color, $amount)
|
|
||||||
// mix($color1, $color2[, $amount])
|
|
||||||
//-----------------------------------------------------
|
|
||||||
$color3: #333;
|
|
||||||
$color6: #666;
|
|
||||||
$color9: #999;
|
|
||||||
$colorA: #aaa;
|
|
||||||
$colorC: #ccc;
|
|
||||||
$colorF: #f5f5f5;
|
|
||||||
|
|
||||||
|
|
||||||
// 元素上下间距
|
|
||||||
//-----------------------------------------------------
|
|
||||||
$gap: 20px !default;
|
|
||||||
|
|
||||||
|
|
||||||
// header,footer等的高度
|
|
||||||
//-----------------------------------------------------
|
|
||||||
$barHeight: 44px !default;
|
|
||||||
|
|
||||||
|
|
||||||
// radius
|
|
||||||
//-----------------------------------------------------
|
|
||||||
$radiusBase: 5px !default;
|
|
||||||
$radiusSmall: 3px !default;
|
|
||||||
|
|
||||||
|
|
||||||
// timing-function
|
|
||||||
//-----------------------------------------------------
|
|
||||||
$timingFunction: cubic-bezier(0.42, 0, 0.58, 1);
|
|
||||||
|
|
||||||
|
|
||||||
// active state switch
|
|
||||||
//-----------------------------------------------------
|
|
||||||
$activeStateSwitch: true !default;
|
|
||||||
|
|
||||||
|
|
||||||
$articlePadding: 7.6923%;
|
|
||||||
@ -11,7 +11,7 @@
|
|||||||
.icon {
|
.icon {
|
||||||
/* use !important to prevent issues with browser extensions that change fonts */
|
/* use !important to prevent issues with browser extensions that change fonts */
|
||||||
font-family: 'FontAwesome' !important;
|
font-family: 'FontAwesome' !important;
|
||||||
speak: none;
|
speak-as: none;
|
||||||
font-size:16px;
|
font-size:16px;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
|
|||||||
17
themes/yilia/source-src/css/footer.less
Normal file
17
themes/yilia/source-src/css/footer.less
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
#footer {
|
||||||
|
font-size: 14px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 30px;
|
||||||
|
opacity: 0.6;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
.outer {
|
||||||
|
padding: 0 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.footer-left {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.footer-right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
@ -1,17 +0,0 @@
|
|||||||
#footer {
|
|
||||||
font-size: 14px;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 30px;
|
|
||||||
opacity: 0.6;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
.outer{
|
|
||||||
padding: 0 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.footer-left{
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
.footer-right{
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
58
themes/yilia/source-src/css/grid.less
Normal file
58
themes/yilia/source-src/css/grid.less
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
body, button, input, select, textarea {
|
||||||
|
color: #1a1a1a;
|
||||||
|
font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.75;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
overflow-y: hidden;
|
||||||
|
background: @colorBodyBg;
|
||||||
|
}
|
||||||
|
html, body, #container {
|
||||||
|
height: 100%;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
#mobile-nav, .js-mobile-btnctn {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#container {
|
||||||
|
position: relative;
|
||||||
|
min-height: 100%;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
background-color: @colorBodyBg;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
background-position: right;
|
||||||
|
&.show {
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
body:not(.night) #container.show {
|
||||||
|
background-image: linear-gradient(200deg, #5aa5c6, #a4854b) !important;
|
||||||
|
}
|
||||||
|
.body-wrap {
|
||||||
|
padding-top: 30px;
|
||||||
|
margin-bottom: 80px;
|
||||||
|
}
|
||||||
|
.mid-col {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
min-height: 100%;
|
||||||
|
left: 300px;
|
||||||
|
width: auto;
|
||||||
|
&.show {
|
||||||
|
.anmLeftIn();
|
||||||
|
.article {
|
||||||
|
.trans();
|
||||||
|
// transition: opacity .3s ease-in, background-color .3s ease-in;
|
||||||
|
opacity: 0.5 !important;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.hide {
|
||||||
|
.anmLeftOut();
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,58 +0,0 @@
|
|||||||
body, button, input, select, textarea {
|
|
||||||
color: #1a1a1a;
|
|
||||||
font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
|
|
||||||
font-size: 16px;
|
|
||||||
font-size: 1rem;
|
|
||||||
line-height: 1.75;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
overflow-y: hidden;
|
|
||||||
background:$colorBodyBg;
|
|
||||||
}
|
|
||||||
html, body, #container {
|
|
||||||
height: 100%;
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
#mobile-nav,.js-mobile-btnctn {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
#container{
|
|
||||||
position:relative;
|
|
||||||
min-height:100%;
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
background-color: $colorBodyBg;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: contain;
|
|
||||||
background-position: right;
|
|
||||||
&.show {
|
|
||||||
overflow-y: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
body:not(.night) #container.show {
|
|
||||||
background-image: linear-gradient(200deg,#5aa5c6,#a4854b) !important;
|
|
||||||
}
|
|
||||||
.body-wrap{
|
|
||||||
padding-top: 30px;
|
|
||||||
margin-bottom: 80px;
|
|
||||||
}
|
|
||||||
.mid-col {
|
|
||||||
position:absolute;
|
|
||||||
right:0;
|
|
||||||
min-height:100%;
|
|
||||||
left: 300px;
|
|
||||||
width: auto;
|
|
||||||
&.show {
|
|
||||||
@extend %anmLeftIn;
|
|
||||||
.article {
|
|
||||||
@extend %trans;
|
|
||||||
// transition: opacity .3s ease-in, background-color .3s ease-in;
|
|
||||||
opacity: 0.5 !important;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.hide {
|
|
||||||
@extend %anmLeftOut;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
120
themes/yilia/source-src/css/left.less
Normal file
120
themes/yilia/source-src/css/left.less
Normal file
@ -0,0 +1,120 @@
|
|||||||
|
.left-col {
|
||||||
|
background-color: @colorBg;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: top;
|
||||||
|
width: 300px;
|
||||||
|
position: fixed;
|
||||||
|
opacity: 1;
|
||||||
|
.trans();
|
||||||
|
height: 100%;
|
||||||
|
z-index: 999;
|
||||||
|
.shadow();
|
||||||
|
|
||||||
|
.intrude-less {
|
||||||
|
width: 76%;
|
||||||
|
text-align: center;
|
||||||
|
margin: 62px auto 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header {
|
||||||
|
width: 100%;
|
||||||
|
height: 300px;
|
||||||
|
position: relative;
|
||||||
|
a {
|
||||||
|
color: #696969;
|
||||||
|
transition: color 0.3s;
|
||||||
|
&:hover {
|
||||||
|
color: #B0A0AA;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.header-subtitle {
|
||||||
|
text-align: center;
|
||||||
|
color: @color9;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 25px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
.header-menu {
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 31px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
float: none;
|
||||||
|
min-height: 150px;
|
||||||
|
margin-left: -12px;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
ul {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateX(-50%) translateY(-50%);
|
||||||
|
li {
|
||||||
|
cursor: default;
|
||||||
|
a {
|
||||||
|
font-size: 14px;
|
||||||
|
min-width: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.header-smart-menu {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
a {
|
||||||
|
&:after {
|
||||||
|
content: '/';
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
&:after {
|
||||||
|
content: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.profilepic {
|
||||||
|
text-align: center;
|
||||||
|
display: block;
|
||||||
|
border: 5px solid @colorF;
|
||||||
|
border-radius: 300px;
|
||||||
|
width: 128px;
|
||||||
|
height: 128px;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #88acdb;
|
||||||
|
.trans();
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: horizontal;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
text-align: center;
|
||||||
|
&:hover {
|
||||||
|
.picRotate();
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
border-radius: 300px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
opacity: 1;
|
||||||
|
.trans();
|
||||||
|
&.show {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.header-author {
|
||||||
|
text-align: center;
|
||||||
|
margin: 0.67em 0;
|
||||||
|
font-size: 30px;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,120 +0,0 @@
|
|||||||
.left-col {
|
|
||||||
background-color: $colorBg;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
background-position: top;
|
|
||||||
width: 300px;
|
|
||||||
position:fixed;
|
|
||||||
opacity:1;
|
|
||||||
@extend %trans;
|
|
||||||
height:100%;
|
|
||||||
z-index: 999;
|
|
||||||
@extend %shadow;
|
|
||||||
|
|
||||||
.intrude-less {
|
|
||||||
width: 76%;
|
|
||||||
text-align: center;
|
|
||||||
margin: 62px auto 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#header{
|
|
||||||
width:100%;
|
|
||||||
height: 300px;
|
|
||||||
position: relative;
|
|
||||||
a {
|
|
||||||
color: #696969;
|
|
||||||
transition: color 0.3s;
|
|
||||||
&:hover {
|
|
||||||
color: #B0A0AA;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.header-subtitle{
|
|
||||||
text-align: center;
|
|
||||||
color:$color9;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 25px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
}
|
|
||||||
.header-menu{
|
|
||||||
font-weight: 300;
|
|
||||||
line-height: 31px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
float:none;
|
|
||||||
min-height: 150px;
|
|
||||||
margin-left: -12px;
|
|
||||||
text-align: center;
|
|
||||||
position: relative;
|
|
||||||
ul {
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateX(-50%) translateY(-50%);
|
|
||||||
li{
|
|
||||||
cursor: default;
|
|
||||||
a{
|
|
||||||
font-size: 14px;
|
|
||||||
min-width: 300px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.header-smart-menu {
|
|
||||||
font-size: 16px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
a {
|
|
||||||
&:after {
|
|
||||||
content: '/';
|
|
||||||
margin-left: 4px;
|
|
||||||
}
|
|
||||||
&:last-child {
|
|
||||||
&:after {
|
|
||||||
content: ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.profilepic{
|
|
||||||
text-align: center;
|
|
||||||
display: block;
|
|
||||||
border: 5px solid $colorF;
|
|
||||||
border-radius: 300px;
|
|
||||||
width: 128px;
|
|
||||||
height: 128px;
|
|
||||||
margin: 0 auto;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
background: #88acdb;
|
|
||||||
@extend %trans;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-box-orient: horizontal;
|
|
||||||
-webkit-box-pack: center;
|
|
||||||
-webkit-box-align: center;
|
|
||||||
text-align: center;
|
|
||||||
&:hover {
|
|
||||||
@extend %picRotate;
|
|
||||||
}
|
|
||||||
img{
|
|
||||||
border-radius: 300px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
opacity: 1;
|
|
||||||
@extend %trans;
|
|
||||||
&.show{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.header-author{
|
|
||||||
text-align: center;
|
|
||||||
margin: 0.67em 0;
|
|
||||||
font-size: 30px;
|
|
||||||
transition: 0.3s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,4 +1,4 @@
|
|||||||
@import 'core';
|
@import './_core';
|
||||||
@import './grid';
|
@import './grid';
|
||||||
@import './left';
|
@import './left';
|
||||||
@import './scroll';
|
@import './scroll';
|
||||||
@ -19,7 +19,7 @@
|
|||||||
@import './waifu';
|
@import './waifu';
|
||||||
@import './night';
|
@import './night';
|
||||||
@import './page/photo-wall';
|
@import './page/photo-wall';
|
||||||
@import './page/categories.scss';
|
@import './page/categories.less';
|
||||||
@media screen and (max-width: 800px) {
|
@media screen and (max-width: 800px) {
|
||||||
@import './mobile';
|
@import './mobile';
|
||||||
@import './mobile-slider';
|
@import './mobile-slider';
|
||||||
@ -1,7 +1,7 @@
|
|||||||
.profilepic {
|
.profilepic {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
display: block;
|
display: block;
|
||||||
border: 5px solid $colorF;
|
border: 5px solid @colorF;
|
||||||
border-radius: 300px;
|
border-radius: 300px;
|
||||||
width: 128px;
|
width: 128px;
|
||||||
height: 128px;
|
height: 128px;
|
||||||
@ -20,13 +20,13 @@
|
|||||||
}
|
}
|
||||||
.header-subtitle {
|
.header-subtitle {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: $color9;
|
color: @color9;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 25px;
|
line-height: 25px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-line-clamp: 2;
|
line-clamp: 2;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
}
|
}
|
||||||
.header-subtitle {
|
.header-subtitle {
|
||||||
@ -3,7 +3,7 @@
|
|||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
#container {
|
#container {
|
||||||
background: $colorBodyBg;
|
background: @colorBodyBg;
|
||||||
}
|
}
|
||||||
.left-col {
|
.left-col {
|
||||||
display: none;
|
display: none;
|
||||||
@ -120,7 +120,7 @@
|
|||||||
padding: 10px;
|
padding: 10px;
|
||||||
border: 0;
|
border: 0;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
background: #{$colorBg};
|
background: @colorBg;
|
||||||
.article-more-link {
|
.article-more-link {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
183
themes/yilia/source-src/css/night.less
Normal file
183
themes/yilia/source-src/css/night.less
Normal file
@ -0,0 +1,183 @@
|
|||||||
|
/*
|
||||||
|
* 夜间模式配色
|
||||||
|
*/
|
||||||
|
@mainBg_night: #1f2e3c;
|
||||||
|
@articleBg_night: #15202b;
|
||||||
|
@borderColor_night: #38444d;
|
||||||
|
@textColor_night: #d5d5d5;
|
||||||
|
|
||||||
|
@keyframes leftIn_night {
|
||||||
|
from {
|
||||||
|
transform: translate(0, 0);
|
||||||
|
background: @mainBg_night;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translate(333px, 0);
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes leftOut_night {
|
||||||
|
from {
|
||||||
|
transform: translate(333px, 0);
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translate(0, 0);
|
||||||
|
background: @mainBg_night;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.anmLeftIn_night() {
|
||||||
|
.anmCommon();
|
||||||
|
animation-name: leftIn_night;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anmLeftOut_night() {
|
||||||
|
.anmCommon();
|
||||||
|
animation-name: leftOut_night;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.night {
|
||||||
|
background: @mainBg_night;
|
||||||
|
// 展开菜单之后的背景
|
||||||
|
#container, #container.show {
|
||||||
|
background-color: @mainBg_night;
|
||||||
|
}
|
||||||
|
// 文章区域
|
||||||
|
.article {
|
||||||
|
background: fade(@articleBg_night, 80%);
|
||||||
|
border-color: @borderColor_night;
|
||||||
|
color: @textColor_night;
|
||||||
|
.article-title {
|
||||||
|
color: @colorF;
|
||||||
|
}
|
||||||
|
.article-entry {
|
||||||
|
table {
|
||||||
|
border-color: @borderColor_night;
|
||||||
|
th, td {
|
||||||
|
border-color: @borderColor_night;
|
||||||
|
}
|
||||||
|
thead tr {
|
||||||
|
background: @mainBg_night;
|
||||||
|
}
|
||||||
|
tbody tr:hover {
|
||||||
|
background: lighten(@mainBg_night, 10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
blockquote {
|
||||||
|
background: #2c2c2c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
color: @colorC;
|
||||||
|
border-bottom-color: @borderColor_night;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 归档列表
|
||||||
|
.archives-wrap {
|
||||||
|
background: fade(@articleBg_night, 80%);
|
||||||
|
border-bottom-color: @borderColor_night;
|
||||||
|
.archive-article {
|
||||||
|
border-color: @borderColor_night;
|
||||||
|
}
|
||||||
|
a.archive-article-title {
|
||||||
|
color: @textColor_night;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 左侧栏
|
||||||
|
.left-col {
|
||||||
|
background-color: @articleBg_night;
|
||||||
|
background-image: none !important;
|
||||||
|
}
|
||||||
|
#mobile-nav {
|
||||||
|
background: none;
|
||||||
|
.overlay {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 头像 看板娘 图标 -> 降低亮度滤镜
|
||||||
|
.profilepic, .waifu, #header .header-nav .social a {
|
||||||
|
filter: brightness(30%);
|
||||||
|
}
|
||||||
|
// 文章信息栏
|
||||||
|
.article-info-index.article-info {
|
||||||
|
border-top-color: @borderColor_night;
|
||||||
|
}
|
||||||
|
#footer {
|
||||||
|
color: @textColor_night;
|
||||||
|
}
|
||||||
|
// 高亮关键字
|
||||||
|
.article-entry p code, .article-entry li code {
|
||||||
|
background: @mainBg_night;
|
||||||
|
color: #bf7676;
|
||||||
|
}
|
||||||
|
// 分类列表
|
||||||
|
.category-list li.category-list-item {
|
||||||
|
border-color: @borderColor_night;
|
||||||
|
}
|
||||||
|
// 标签颜色组 (unrolled from @for loop, darken(color, 25%))
|
||||||
|
.tagcloud {
|
||||||
|
a.color1 {
|
||||||
|
background: darken(#88acdb, 25%);
|
||||||
|
&::before {
|
||||||
|
border-right-color: darken(#88acdb, 25%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
a.color2 {
|
||||||
|
background: darken(#ffa07a, 25%);
|
||||||
|
&::before {
|
||||||
|
border-right-color: darken(#ffa07a, 25%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
a.color3 {
|
||||||
|
background: darken(#ca5757, 25%);
|
||||||
|
&::before {
|
||||||
|
border-right-color: darken(#ca5757, 25%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
a.color4 {
|
||||||
|
background: darken(#76becc, 25%);
|
||||||
|
&::before {
|
||||||
|
border-right-color: darken(#76becc, 25%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
a.color5 {
|
||||||
|
background: darken(#7e608d, 25%);
|
||||||
|
&::before {
|
||||||
|
border-right-color: darken(#7e608d, 25%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
a.color6 {
|
||||||
|
background: darken(#6fc0e4, 25%);
|
||||||
|
&::before {
|
||||||
|
border-right-color: darken(#6fc0e4, 25%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
a.color7 {
|
||||||
|
background: darken(#bc8f8f, 25%);
|
||||||
|
&::before {
|
||||||
|
border-right-color: darken(#bc8f8f, 25%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 滚动条
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
background-color: @articleBg_night;
|
||||||
|
}
|
||||||
|
.page-modal {
|
||||||
|
background: @mainBg_night;
|
||||||
|
color: @textColor_night;
|
||||||
|
.close {
|
||||||
|
color: @textColor_night;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#search-panel {
|
||||||
|
.search-input > input[type=text] {
|
||||||
|
color: @textColor_night;
|
||||||
|
}
|
||||||
|
.more-item {
|
||||||
|
background: linear-gradient(-180deg, @articleBg_night 10%, rgba(255, 255, 255, 0) 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,149 +0,0 @@
|
|||||||
/*
|
|
||||||
* 夜间模式配色
|
|
||||||
*/
|
|
||||||
$mainBg_night: #1f2e3c; // 主背景色
|
|
||||||
$articleBg_night: #15202b; // 文章背景色
|
|
||||||
$borderColor_night: #38444d; // 边框颜色
|
|
||||||
$textColor_night: #d5d5d5; // 文字颜色
|
|
||||||
|
|
||||||
@keyframes leftIn_night {
|
|
||||||
from {
|
|
||||||
transform: translate(0, 0);
|
|
||||||
background:$mainBg_night;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: translate(333px, 0);
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes leftOut_night {
|
|
||||||
from {
|
|
||||||
transform: translate(333px, 0);
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: translate(0, 0);
|
|
||||||
background:$mainBg_night;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
%anmLeftIn_night {
|
|
||||||
@extend %anmCommon;
|
|
||||||
animation-name: leftIn_night;
|
|
||||||
}
|
|
||||||
|
|
||||||
%anmLeftOut_night {
|
|
||||||
@extend %anmCommon;
|
|
||||||
animation-name: leftOut_night;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.night {
|
|
||||||
background: $mainBg_night;
|
|
||||||
// 展开菜单之后的背景
|
|
||||||
#container, #container.show {
|
|
||||||
background-color: $mainBg_night;
|
|
||||||
}
|
|
||||||
// 文章区域
|
|
||||||
.article{
|
|
||||||
background: adjust-color($articleBg_night, $alpha: -0.2);
|
|
||||||
border-color: $borderColor_night;
|
|
||||||
color: $textColor_night;
|
|
||||||
.article-title { // 主标题
|
|
||||||
color: $colorF;
|
|
||||||
}
|
|
||||||
.article-entry {
|
|
||||||
table { // 表格
|
|
||||||
border-color: $borderColor_night;
|
|
||||||
th,td {
|
|
||||||
border-color: $borderColor_night;
|
|
||||||
}
|
|
||||||
thead tr { // 表头
|
|
||||||
background: $mainBg_night;
|
|
||||||
}
|
|
||||||
tbody tr:hover { // 表格行指向
|
|
||||||
background: lighten($mainBg_night, 10%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
blockquote{ // 引用
|
|
||||||
background: #2c2c2c;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
h1,h2,h3,h4,h5,h6 { // 章节标题
|
|
||||||
color: $colorC;
|
|
||||||
border-bottom-color: $borderColor_night;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 归档列表
|
|
||||||
.archives-wrap {
|
|
||||||
background: adjust-color($articleBg_night, $alpha: -0.2);
|
|
||||||
border-bottom-color: $borderColor_night;
|
|
||||||
.archive-article {
|
|
||||||
border-color: $borderColor_night;
|
|
||||||
}
|
|
||||||
a.archive-article-title {
|
|
||||||
color: $textColor_night;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 左侧栏
|
|
||||||
.left-col {
|
|
||||||
background-color: $articleBg_night;
|
|
||||||
background-image: none !important;
|
|
||||||
}
|
|
||||||
#mobile-nav {
|
|
||||||
background: none;
|
|
||||||
.overlay {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 头像 看板娘 图标 -> 降低亮度滤镜
|
|
||||||
.profilepic, .waifu, #header .header-nav .social a {
|
|
||||||
filter: brightness(30%);
|
|
||||||
}
|
|
||||||
// 文章信息栏
|
|
||||||
.article-info-index.article-info {
|
|
||||||
border-top-color: $borderColor_night;
|
|
||||||
}
|
|
||||||
#footer {
|
|
||||||
color: $textColor_night;
|
|
||||||
}
|
|
||||||
// 高亮关键字
|
|
||||||
.article-entry p code, .article-entry li code {
|
|
||||||
background: $mainBg_night;
|
|
||||||
color: #bf7676;
|
|
||||||
}
|
|
||||||
// 分类列表
|
|
||||||
.category-list li.category-list-item {
|
|
||||||
border-color: $borderColor_night;
|
|
||||||
}
|
|
||||||
// 标签颜色组
|
|
||||||
.tagcloud {
|
|
||||||
@for $index from 1 to length($tagcolorList)+1 {
|
|
||||||
a.color#{$index}{
|
|
||||||
background: darken(nth($tagcolorList,$index), 25%);
|
|
||||||
&::before{
|
|
||||||
border-right-color: darken(nth($tagcolorList,$index), 25%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 滚动条
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
background-color: $articleBg_night;
|
|
||||||
}
|
|
||||||
.page-modal {
|
|
||||||
background: $mainBg_night;
|
|
||||||
color: $textColor_night;
|
|
||||||
.close {
|
|
||||||
color: $textColor_night;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#search-panel {
|
|
||||||
.search-input > input[type=text] {
|
|
||||||
color: $textColor_night;
|
|
||||||
}
|
|
||||||
.more-item {
|
|
||||||
background: linear-gradient(-180deg,$articleBg_night 10%,rgba(255, 255, 255, 0) 100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
39
themes/yilia/source-src/css/page.less
Normal file
39
themes/yilia/source-src/css/page.less
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
#page-nav {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 30px;
|
||||||
|
.page-number {
|
||||||
|
width: 25px;
|
||||||
|
height: 30px;
|
||||||
|
background: #4d4d4d;
|
||||||
|
display: inline-block;
|
||||||
|
color: @colorF;
|
||||||
|
line-height: 30px;
|
||||||
|
font-size: 14px;
|
||||||
|
margin: 0 5px 30px;
|
||||||
|
border-radius: 2px;
|
||||||
|
&:hover {
|
||||||
|
background: #5e5e5e;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.current {
|
||||||
|
background: #88acdb;
|
||||||
|
cursor: default;
|
||||||
|
&:hover {
|
||||||
|
background: #88acdb;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.extend {
|
||||||
|
color: #4d4d4d;
|
||||||
|
margin: 0 27px;
|
||||||
|
opacity: 1;
|
||||||
|
&:hover {
|
||||||
|
color: #5e5e5e;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.prev.disabled, .next.disabled {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
&:hover .extend {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,39 +0,0 @@
|
|||||||
#page-nav{
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 30px;
|
|
||||||
.page-number{
|
|
||||||
width: 25px;
|
|
||||||
height: 30px;
|
|
||||||
background: #4d4d4d;
|
|
||||||
display: inline-block;
|
|
||||||
color: $colorF;
|
|
||||||
line-height: 30px;
|
|
||||||
font-size: 14px;
|
|
||||||
margin: 0 5px 30px;
|
|
||||||
border-radius: 2px;
|
|
||||||
&:hover{
|
|
||||||
background: #5e5e5e;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.current{
|
|
||||||
background: #88acdb;
|
|
||||||
cursor: default;
|
|
||||||
&:hover{
|
|
||||||
background: #88acdb;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.extend{
|
|
||||||
color: #4d4d4d;
|
|
||||||
margin: 0 27px;
|
|
||||||
opacity: 1;
|
|
||||||
&:hover{
|
|
||||||
color: #5e5e5e;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.prev.disabled,.next.disabled {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
&:hover .extend {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -5,11 +5,11 @@
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0 1em .5em 0;
|
margin: 0 1em .5em 0;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
border: 1px solid $colorBorder;
|
border: 1px solid @colorBorder;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
@extend %trans;
|
.trans();
|
||||||
&:hover {
|
&:hover {
|
||||||
background:rgba(204, 204, 204, 0.3);
|
background: rgba(204, 204, 204, 0.3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -39,7 +39,7 @@
|
|||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
background: $colorLink;
|
background: @colorLink;
|
||||||
transition: width .3s ease;
|
transition: width .3s ease;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -20,7 +20,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
#load-tip {
|
#load-tip {
|
||||||
color: $color9;
|
color: @color9;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@ -8,13 +8,13 @@
|
|||||||
height: 56px;
|
height: 56px;
|
||||||
line-height: 56px;
|
line-height: 56px;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
color: $colorF;
|
color: @colorF;
|
||||||
background: #f44336;
|
background: #f44336;
|
||||||
border-radius: 50%;
|
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);
|
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
||||||
transition: .4s ease-in-out;
|
transition: .4s ease-in-out;
|
||||||
&:hover, &:active {
|
&:hover, &:active {
|
||||||
box-shadow: 0 6px 12px rgba(0,0,0,0.2),0 4px 15px rgba(0,0,0,0.2);
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
.tooltip-item {
|
.tooltip-item {
|
||||||
display: block;
|
display: block;
|
||||||
@ -27,7 +27,7 @@
|
|||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
}
|
}
|
||||||
.reward-p {
|
.reward-p {
|
||||||
color: $colorF;
|
color: @colorF;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-shadow: 1px 1px 1px #45b9e0;
|
text-shadow: 1px 1px 1px #45b9e0;
|
||||||
.icon {
|
.icon {
|
||||||
@ -44,7 +44,7 @@
|
|||||||
.reward-img {
|
.reward-img {
|
||||||
width: 130px;
|
width: 130px;
|
||||||
height: 130px;
|
height: 130px;
|
||||||
border: 6px solid $colorBorder;
|
border: 6px solid @colorBorder;
|
||||||
border-radius: $radiusSmall;
|
border-radius: @radiusSmall;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
65
themes/yilia/source-src/css/scroll.less
Normal file
65
themes/yilia/source-src/css/scroll.less
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
/* 设置滚动条的样式 */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background-color: @colorBg;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-button {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-button:start:increment, ::-webkit-scrollbar-button:end:decrement {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-corner {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
border-radius: 8px;
|
||||||
|
background-color: rgba(0, 0, 0, .3);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
border-radius: 8px;
|
||||||
|
background-color: rgba(0, 0, 0, .5);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||||
|
border-right: 1px solid transparent;
|
||||||
|
border-left: 1px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track:hover {
|
||||||
|
background-color: rgba(0, 0, 0, .15);
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-button:start {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background: url(./img/scrollbar_arrow.png) no-repeat 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-button:start:hover {
|
||||||
|
background: url(./img/scrollbar_arrow.png) no-repeat -15px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-button:start:active {
|
||||||
|
background: url(./img/scrollbar_arrow.png) no-repeat -30px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-button:end {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background: url(./img/scrollbar_arrow.png) no-repeat 0 -18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-button:end:hover {
|
||||||
|
background: url(./img/scrollbar_arrow.png) no-repeat -15px -18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-button:end:active {
|
||||||
|
background: url(./img/scrollbar_arrow.png) no-repeat -30px -18px;
|
||||||
|
}
|
||||||
@ -1,65 +0,0 @@
|
|||||||
/* 设置滚动条的样式 */
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
background-color: $colorBg;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-button {
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-button:start:increment,::-webkit-scrollbar-button:end:decrement {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-corner {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
border-radius: 8px;
|
|
||||||
background-color: rgba(0,0,0,.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
border-radius: 8px;
|
|
||||||
background-color: rgba(0,0,0,.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track,::-webkit-scrollbar-thumb {
|
|
||||||
border-right: 1px solid transparent;
|
|
||||||
border-left: 1px solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track:hover {
|
|
||||||
background-color: rgba(0,0,0,.15);
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar-button:start {
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
background: url(./img/scrollbar_arrow.png) no-repeat 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-button:start:hover {
|
|
||||||
background: url(./img/scrollbar_arrow.png) no-repeat -15px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-button:start:active {
|
|
||||||
background: url(./img/scrollbar_arrow.png) no-repeat -30px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-button:end {
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
background: url(./img/scrollbar_arrow.png) no-repeat 0 -18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-button:end:hover {
|
|
||||||
background: url(./img/scrollbar_arrow.png) no-repeat -15px -18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-button:end:active {
|
|
||||||
background: url(./img/scrollbar_arrow.png) no-repeat -30px -18px;
|
|
||||||
}
|
|
||||||
@ -11,7 +11,7 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
a {
|
a {
|
||||||
border: 1px solid $colorBorder;
|
border: 1px solid @colorBorder;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
display: -moz-inline-stack;
|
display: -moz-inline-stack;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -20,21 +20,21 @@
|
|||||||
margin: 10px;
|
margin: 10px;
|
||||||
transition: 0.3s;
|
transition: 0.3s;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: $colorF;
|
color: @colorF;
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
width: 28px;
|
width: 28px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
line-height: 26px;
|
line-height: 26px;
|
||||||
text-shadow: 1px 1px 1px #509eb7;
|
text-shadow: 1px 1px 1px #509eb7;
|
||||||
&:active {
|
&:active {
|
||||||
color: $colorF;
|
color: @colorF;
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
}
|
}
|
||||||
&.share-outer {
|
&.share-outer {
|
||||||
border: none;
|
border: none;
|
||||||
color: $colorF;
|
color: @colorF;
|
||||||
background: #4d4d4d;
|
background: #4d4d4d;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
@ -49,9 +49,9 @@
|
|||||||
padding: 20px;
|
padding: 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #727272;
|
color: #727272;
|
||||||
background: $colorBg;
|
background: @colorBg;
|
||||||
border-radius: 4px;
|
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);
|
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
transition: .3s;
|
transition: .3s;
|
||||||
@ -1,4 +1,4 @@
|
|||||||
#header .header-nav{
|
#header .header-nav {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
transition: transform .3s ease-in;
|
transition: transform .3s ease-in;
|
||||||
@ -9,14 +9,12 @@
|
|||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
a {
|
a {
|
||||||
border-radius:50%;
|
border-radius: 50%;
|
||||||
display:inline-block;
|
display: inline-block;
|
||||||
vertical-align:middle;
|
vertical-align: middle;
|
||||||
*vertical-align:auto;
|
zoom: 1;
|
||||||
zoom:1;
|
margin: 0 8px 15px 8px;
|
||||||
*display:inline;
|
transition: 0.3s;
|
||||||
margin:0 8px 15px 8px;
|
|
||||||
transition:0.3s;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
@ -24,63 +22,63 @@
|
|||||||
height: 28px;
|
height: 28px;
|
||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
&:hover {
|
&:hover {
|
||||||
opacity:1
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
a.weibo {
|
a.weibo {
|
||||||
background: #aaaaff;
|
background: #aaaaff;
|
||||||
border:1px solid #aaaaff;
|
border: 1px solid #aaaaff;
|
||||||
&:hover {
|
&:hover {
|
||||||
border:1px solid #aaaaff;
|
border: 1px solid #aaaaff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
a.segmentfault {
|
a.segmentfault {
|
||||||
background: #009a61;
|
background: #009a61;
|
||||||
border:1px solid #009a61;
|
border: 1px solid #009a61;
|
||||||
&:hover {
|
&:hover {
|
||||||
border:1px solid #009a61;
|
border: 1px solid #009a61;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
a.rss {
|
a.rss {
|
||||||
background: #ef7522;
|
background: #ef7522;
|
||||||
border:1px solid #ef7522;
|
border: 1px solid #ef7522;
|
||||||
&:hover {
|
&:hover {
|
||||||
border:1px solid #cf5d0f;
|
border: 1px solid #cf5d0f;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
a.github {
|
a.github {
|
||||||
background: #767c8d;
|
background: #767c8d;
|
||||||
border:1px solid #767c8d;
|
border: 1px solid #767c8d;
|
||||||
&:hover {
|
&:hover {
|
||||||
border:1px solid #666d80;
|
border: 1px solid #666d80;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
a.facebook {
|
a.facebook {
|
||||||
background: #3b5998;
|
background: #3b5998;
|
||||||
border:1px solid #3b5998;
|
border: 1px solid #3b5998;
|
||||||
&:hover {
|
&:hover {
|
||||||
border:1px solid #2d4373;
|
border: 1px solid #2d4373;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
a.google {
|
a.google {
|
||||||
background: #c83d20;
|
background: #c83d20;
|
||||||
border:1px solid #c83d20;
|
border: 1px solid #c83d20;
|
||||||
&:hover {
|
&:hover {
|
||||||
border:1px solid #9c3019;
|
border: 1px solid #9c3019;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
a.twitter {
|
a.twitter {
|
||||||
background: #55cff8;
|
background: #55cff8;
|
||||||
border:1px solid #55cff8;
|
border: 1px solid #55cff8;
|
||||||
&:hover {
|
&:hover {
|
||||||
border:1px solid #24c1f6;
|
border: 1px solid #24c1f6;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
a.linkedin {
|
a.linkedin {
|
||||||
background: #005a87;
|
background: #005a87;
|
||||||
border:1px solid #005a87;
|
border: 1px solid #005a87;
|
||||||
&:hover {
|
&:hover {
|
||||||
border:1px solid #006b98;
|
border: 1px solid #006b98;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/*
|
/*
|
||||||
@ -100,23 +98,23 @@
|
|||||||
}*/
|
}*/
|
||||||
a.zhihu {
|
a.zhihu {
|
||||||
background: #0078d8;
|
background: #0078d8;
|
||||||
border:1px solid #0078d8;
|
border: 1px solid #0078d8;
|
||||||
&:hover {
|
&:hover {
|
||||||
border:1px solid #0078d8;
|
border: 1px solid #0078d8;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
a.douban {
|
a.douban {
|
||||||
background: #06c611;
|
background: #06c611;
|
||||||
border:1px solid #06c611;
|
border: 1px solid #06c611;
|
||||||
&:hover {
|
&:hover {
|
||||||
border:1px solid #06c611;
|
border: 1px solid #06c611;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
a.mail {
|
a.mail {
|
||||||
background: #005a87;
|
background: #005a87;
|
||||||
border:1px solid #005a87;
|
border: 1px solid #005a87;
|
||||||
&:hover {
|
&:hover {
|
||||||
border:1px solid #006b98;
|
border: 1px solid #006b98;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/*
|
/*
|
||||||
120
themes/yilia/source-src/css/tags.less
Normal file
120
themes/yilia/source-src/css/tags.less
Normal file
@ -0,0 +1,120 @@
|
|||||||
|
// tags.less
|
||||||
|
// 标签颜色组：将 @for 循环手动展开
|
||||||
|
// @tagColors: #88acdb, #ffa07a, #ca5757, #76becc, #7e608d, #6fc0e4, #bc8f8f
|
||||||
|
|
||||||
|
#header .tagcloud a {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.tagcloud {
|
||||||
|
a.js-tag {
|
||||||
|
display: inline-block;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 10px;
|
||||||
|
color: @colorF;
|
||||||
|
height: 18px;
|
||||||
|
line-height: 18px;
|
||||||
|
padding: 0 5px 0px 10px;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 0 5px 5px 0;
|
||||||
|
margin: 5px 9px 5px 8px;
|
||||||
|
font-family: Menlo, Monaco, "Andale Mono", "lucida console";
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
&::before {
|
||||||
|
content: " ";
|
||||||
|
width: 0px;
|
||||||
|
height: 0px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -18px;
|
||||||
|
border: 9px solid transparent;
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
content: " ";
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
background-color: @colorF;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, .3);
|
||||||
|
position: absolute;
|
||||||
|
top: 7px;
|
||||||
|
left: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 手动展开 @for $index from 1 to 8 的 7 个标签颜色
|
||||||
|
a.color1 {
|
||||||
|
background: #88acdb;
|
||||||
|
&::before { border-right-color: #88acdb; }
|
||||||
|
}
|
||||||
|
a.color2 {
|
||||||
|
background: #ffa07a;
|
||||||
|
&::before { border-right-color: #ffa07a; }
|
||||||
|
}
|
||||||
|
a.color3 {
|
||||||
|
background: #ca5757;
|
||||||
|
&::before { border-right-color: #ca5757; }
|
||||||
|
}
|
||||||
|
a.color4 {
|
||||||
|
background: #76becc;
|
||||||
|
&::before { border-right-color: #76becc; }
|
||||||
|
}
|
||||||
|
a.color5 {
|
||||||
|
background: #7e608d;
|
||||||
|
&::before { border-right-color: #7e608d; }
|
||||||
|
}
|
||||||
|
a.color6 {
|
||||||
|
background: #6fc0e4;
|
||||||
|
&::before { border-right-color: #6fc0e4; }
|
||||||
|
}
|
||||||
|
a.color7 {
|
||||||
|
background: #bc8f8f;
|
||||||
|
&::before { border-right-color: #bc8f8f; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.article-tag-list {
|
||||||
|
.article-tag-list-item {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.article-pop-out {
|
||||||
|
float: left;
|
||||||
|
.icon-thumb-tack {
|
||||||
|
color: @color9;
|
||||||
|
float: left;
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-top: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.article-tag, .article-category {
|
||||||
|
float: left;
|
||||||
|
.article-tag-list {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.icon {
|
||||||
|
color: @color9;
|
||||||
|
float: left;
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.article-pop-out {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.archive-article-date {
|
||||||
|
color: @color9;
|
||||||
|
margin-right: @articlePadding;
|
||||||
|
float: right;
|
||||||
|
transition: color 0.3s;
|
||||||
|
&:hover {
|
||||||
|
color: #b5b5b5;
|
||||||
|
}
|
||||||
|
.icon {
|
||||||
|
margin: 5px 5px 5px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,95 +0,0 @@
|
|||||||
#header .tagcloud a{
|
|
||||||
color:#fff;
|
|
||||||
}
|
|
||||||
.tagcloud{
|
|
||||||
a.js-tag{
|
|
||||||
display:inline-block;
|
|
||||||
text-decoration:none;
|
|
||||||
font-weight: normal;
|
|
||||||
font-size:10px;
|
|
||||||
color:$colorF;
|
|
||||||
height:18px;
|
|
||||||
line-height:18px;
|
|
||||||
padding:0 5px 0px 10px;
|
|
||||||
position:relative;
|
|
||||||
border-radius:0 5px 5px 0;
|
|
||||||
margin: 5px 9px 5px 8px;
|
|
||||||
font-family: Menlo, Monaco, "Andale Mono", "lucida console";
|
|
||||||
&:hover{
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
&::before{
|
|
||||||
content: " ";
|
|
||||||
width: 0px;
|
|
||||||
height: 0px;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: -18px;
|
|
||||||
border: 9px solid transparent;
|
|
||||||
}
|
|
||||||
&::after{
|
|
||||||
content:" ";
|
|
||||||
width:4px;
|
|
||||||
height:4px;
|
|
||||||
background-color:$colorF;
|
|
||||||
border-radius:4px;
|
|
||||||
box-shadow:0px 0px 0px 1px rgba(0,0,0,.3);
|
|
||||||
position:absolute;
|
|
||||||
top: 7px;
|
|
||||||
left: 2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@for $index from 1 to length($tagcolorList)+1 {
|
|
||||||
a.color#{$index}{
|
|
||||||
background: nth($tagcolorList,$index);
|
|
||||||
&::before{
|
|
||||||
border-right-color: nth($tagcolorList,$index);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.article-tag-list{
|
|
||||||
.article-tag-list-item{
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.article-pop-out{
|
|
||||||
float: left;
|
|
||||||
.icon-thumb-tack {
|
|
||||||
color: $color9;
|
|
||||||
float: left;
|
|
||||||
margin-right: 10px;
|
|
||||||
margin-top: 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.article-tag, .article-category{
|
|
||||||
float: left;
|
|
||||||
.article-tag-list{
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
.icon {
|
|
||||||
color: $color9;
|
|
||||||
float: left;
|
|
||||||
margin-right: 10px;
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.article-pop-out {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.archive-article-date {
|
|
||||||
color: $color9;
|
|
||||||
margin-right: $articlePadding;
|
|
||||||
float: right;
|
|
||||||
transition: color 0.3s;
|
|
||||||
&:hover {
|
|
||||||
color: #b5b5b5;
|
|
||||||
}
|
|
||||||
.icon {
|
|
||||||
margin: 5px 5px 5px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -8,18 +8,17 @@
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
overflow-scrolling: touch;
|
.trans();
|
||||||
@extend %trans;
|
|
||||||
&.show {
|
&.show {
|
||||||
@extend %anmSmallLeftIn;
|
.anmSmallLeftIn();
|
||||||
}
|
}
|
||||||
&.hide {
|
&.hide {
|
||||||
@extend %anmSmallLeftOut;
|
.anmSmallLeftOut();
|
||||||
}
|
}
|
||||||
.tools-nav {
|
.tools-nav {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.tools-wrap, .tools-section{
|
.tools-wrap, .tools-section {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
color: #e5e5e5;
|
color: #e5e5e5;
|
||||||
width: 360px;
|
width: 360px;
|
||||||
@ -33,24 +32,24 @@
|
|||||||
.search-wrap {
|
.search-wrap {
|
||||||
margin: 20px 20px 10px 20px;
|
margin: 20px 20px 10px 20px;
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: 2px solid $colorF;
|
border-bottom: 2px solid @colorF;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
.search-ipt {
|
.search-ipt {
|
||||||
color: $colorF;
|
color: @colorF;
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
width: 0;
|
width: 0;
|
||||||
min-width: 80px;
|
min-width: 80px;
|
||||||
}
|
}
|
||||||
>.icon-search {
|
> .icon-search {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 7px;
|
bottom: 7px;
|
||||||
color: $colorF;
|
color: @colorF;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@extend %trans;
|
.trans();
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
}
|
}
|
||||||
@ -63,8 +62,8 @@
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 25px;
|
line-height: 25px;
|
||||||
>.icon-close {
|
> .icon-close {
|
||||||
color: darken($colorF, 15%);
|
color: darken(@colorF, 15%);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-right: 3px;
|
margin-right: 3px;
|
||||||
@ -79,10 +78,10 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
.article-tag-list {
|
.article-tag-list {
|
||||||
@extend %trans;
|
.trans();
|
||||||
margin: 15px 10px 0;
|
margin: 15px 10px 0;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
background: rgba(255,255,255,0.2);
|
background: rgba(255, 255, 255, 0.2);
|
||||||
&.show {
|
&.show {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
@ -95,7 +94,6 @@
|
|||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
color: rgba(77, 77, 77, 0.75);
|
color: rgba(77, 77, 77, 0.75);
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
overflow-scrolling: touch;
|
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
.search-li {
|
.search-li {
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
@ -109,15 +107,15 @@
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
display: block;
|
display: block;
|
||||||
color: rgba(255,255,248,1);
|
color: rgba(255, 255, 248, 1);
|
||||||
text-shadow: 1px 1px rgba(77,77,77,0.25);
|
text-shadow: 1px 1px rgba(77, 77, 77, 0.25);
|
||||||
.icon {
|
.icon {
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
color: #fffdd8;
|
color: #fffdd8;
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
@extend %trans;
|
.trans();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.search-time, .search-tag, .search-category {
|
.search-time, .search-tag, .search-category {
|
||||||
@ -133,7 +131,7 @@
|
|||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
@extend %trans;
|
.trans();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -145,7 +143,7 @@
|
|||||||
}
|
}
|
||||||
.aboutme-wrap {
|
.aboutme-wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items:center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -153,17 +151,18 @@
|
|||||||
text-shadow: 1px 1px rgba(77, 77, 77, 0.45);
|
text-shadow: 1px 1px rgba(77, 77, 77, 0.45);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 按钮开关
|
|
||||||
@mixin borderRadius($radius:20px) {
|
// 按钮开关相关 mixin
|
||||||
border-radius: $radius;
|
.borderRadius(@radius: 20px) {
|
||||||
border-top-left-radius: $radius;
|
border-radius: @radius;
|
||||||
border-top-right-radius: $radius;
|
border-top-left-radius: @radius;
|
||||||
border-bottom-left-radius: $radius;
|
border-top-right-radius: @radius;
|
||||||
border-bottom-right-radius: $radius;
|
border-bottom-left-radius: @radius;
|
||||||
|
border-bottom-right-radius: @radius;
|
||||||
}
|
}
|
||||||
|
|
||||||
$duration: .4s;
|
@duration: .4s;
|
||||||
$checkedColor: #64bd63;
|
@checkedColor: #64bd63;
|
||||||
label.bui-switch-label {
|
label.bui-switch-label {
|
||||||
input {
|
input {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -171,9 +170,9 @@ label.bui-switch-label {
|
|||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
input:checked {
|
input:checked {
|
||||||
border-color: $checkedColor;
|
border-color: @checkedColor;
|
||||||
box-shadow: $checkedColor 0 0 0 16px inset;
|
box-shadow: @checkedColor 0 0 0 16px inset;
|
||||||
background-color: $checkedColor;
|
background-color: @checkedColor;
|
||||||
&:before {
|
&:before {
|
||||||
left: 27px;
|
left: 27px;
|
||||||
}
|
}
|
||||||
@ -201,13 +200,10 @@ label.bui-switch-label {
|
|||||||
border: 1px solid #dfdfdf;
|
border: 1px solid #dfdfdf;
|
||||||
background-color: #fdfdfd;
|
background-color: #fdfdfd;
|
||||||
box-shadow: #dfdfdf 0 0 0 0 inset;
|
box-shadow: #dfdfdf 0 0 0 0 inset;
|
||||||
@include borderRadius();
|
.borderRadius();
|
||||||
background-clip: content-box;
|
background-clip: content-box;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
-webkit-appearance: none;
|
appearance: none;
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
user-select: none;
|
user-select: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
&:before {
|
&:before {
|
||||||
@ -216,28 +212,28 @@ label.bui-switch-label {
|
|||||||
height: 18px;
|
height: 18px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 1px;
|
left: 1px;
|
||||||
@include borderRadius();
|
.borderRadius();
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
input:checked + .bui-switch {
|
input:checked + .bui-switch {
|
||||||
border-color: $checkedColor;
|
border-color: @checkedColor;
|
||||||
box-shadow: $checkedColor 0 0 0 16px inset;
|
box-shadow: @checkedColor 0 0 0 16px inset;
|
||||||
background-color: $checkedColor;
|
background-color: @checkedColor;
|
||||||
&:before {
|
&:before {
|
||||||
left: 30px;
|
left: 30px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.bui-switch-animbg {
|
&.bui-switch-animbg {
|
||||||
transition: background-color ease $duration;
|
transition: background-color ease @duration;
|
||||||
.bui-switch:before {
|
.bui-switch:before {
|
||||||
transition: left 0.3s;
|
transition: left 0.3s;
|
||||||
}
|
}
|
||||||
input:checked + .bui-switch {
|
input:checked + .bui-switch {
|
||||||
box-shadow: #dfdfdf 0 0 0 0 inset;
|
box-shadow: #dfdfdf 0 0 0 0 inset;
|
||||||
background-color: $checkedColor;
|
background-color: @checkedColor;
|
||||||
transition: border-color $duration, background-color ease $duration;
|
transition: border-color @duration, background-color ease @duration;
|
||||||
&:before {
|
&:before {
|
||||||
transition: left 0.3s;
|
transition: left 0.3s;
|
||||||
}
|
}
|
||||||
@ -248,7 +244,7 @@ label.bui-switch-label {
|
|||||||
#search-panel {
|
#search-panel {
|
||||||
width: 500px;
|
width: 500px;
|
||||||
top: 10%;
|
top: 10%;
|
||||||
transform: translate(-50%,0);
|
transform: translate(-50%, 0);
|
||||||
.search {
|
.search {
|
||||||
border-bottom: 1px solid #ccc;
|
border-bottom: 1px solid #ccc;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -273,10 +269,10 @@ label.bui-switch-label {
|
|||||||
position: relative;
|
position: relative;
|
||||||
.search-result-item {
|
.search-result-item {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
border-bottom: 1px dashed $colorC;
|
border-bottom: 1px dashed @colorC;
|
||||||
padding: 10px 10px 0;
|
padding: 10px 10px 0;
|
||||||
&:hover {
|
&:hover {
|
||||||
border-bottom-color: $colorA;
|
border-bottom-color: @colorA;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.tip {
|
.tip {
|
||||||
@ -285,7 +281,7 @@ label.bui-switch-label {
|
|||||||
.more-item {
|
.more-item {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transform: rotate(180deg) translateY(60px);
|
transform: rotate(180deg) translateY(60px);
|
||||||
background: linear-gradient(-180deg,$colorBg 10%,rgba(255, 255, 255, 0) 100%);
|
background: linear-gradient(-180deg, @colorBg 10%, rgba(255, 255, 255, 0) 100%);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 70px;
|
height: 70px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -17,15 +17,15 @@
|
|||||||
/* Trigger item */
|
/* Trigger item */
|
||||||
|
|
||||||
@keyframes pulse {
|
@keyframes pulse {
|
||||||
from { transform: scale3d(0.5,0.5,1); }
|
from { transform: scale3d(0.5, 0.5, 1); }
|
||||||
to { transform: scale3d(1,1,1); }
|
to { transform: scale3d(1, 1, 1); }
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Tooltip */
|
/* Tooltip */
|
||||||
|
|
||||||
.tooltip-content {
|
.tooltip-content {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: rgba(36,193,246,0.9);
|
background: rgba(36, 193, 246, 0.9);
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
bottom: 50%;
|
bottom: 50%;
|
||||||
@ -44,18 +44,18 @@
|
|||||||
.tooltip-west .tooltip-content {
|
.tooltip-west .tooltip-content {
|
||||||
left: 3.5em;
|
left: 3.5em;
|
||||||
transform-origin: -2em 50%;
|
transform-origin: -2em 50%;
|
||||||
transform: translate3d(0,50%,0) rotate3d(1,1,1,30deg);
|
transform: translate3d(0, 50%, 0) rotate3d(1, 1, 1, 30deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip-east .tooltip-content {
|
.tooltip-east .tooltip-content {
|
||||||
right: 3.5em;
|
right: 3.5em;
|
||||||
transform-origin: calc(100% + 2em) 50%;
|
transform-origin: calc(100% + 2em) 50%;
|
||||||
transform: translate3d(0,50%,0) rotate3d(1,1,1,-30deg);
|
transform: translate3d(0, 50%, 0) rotate3d(1, 1, 1, -30deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip:hover .tooltip-content {
|
.tooltip:hover .tooltip-content {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translate3d(0,50%,0) rotate3d(0,0,0,0);
|
transform: translate3d(0, 50%, 0) rotate3d(0, 0, 0, 0);
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -83,16 +83,16 @@
|
|||||||
|
|
||||||
.tooltip-west .tooltip-content::before,
|
.tooltip-west .tooltip-content::before,
|
||||||
.tooltip-west .tooltip-content::after {
|
.tooltip-west .tooltip-content::after {
|
||||||
right: 99%; /* because of FF, otherwise we have a gap */
|
right: 99%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip-east .tooltip-content::before,
|
.tooltip-east .tooltip-content::before,
|
||||||
.tooltip-east .tooltip-content::after {
|
.tooltip-east .tooltip-content::after {
|
||||||
left: 99%; /* because of FF, otherwise we have a gap */
|
left: 99%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip-east .tooltip-content::after {
|
.tooltip-east .tooltip-content::after {
|
||||||
transform: scale3d(-1,1,1);
|
transform: scale3d(-1, 1, 1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -157,25 +157,25 @@
|
|||||||
.tooltip-text {
|
.tooltip-text {
|
||||||
border-bottom: 10px solid #4d4d4d;
|
border-bottom: 10px solid #4d4d4d;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transform: scale3d(0,1,1);
|
transform: scale3d(0, 1, 1);
|
||||||
transition: transform 0.3s ease-in;
|
transition: transform 0.3s ease-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip:hover .tooltip-text {
|
.tooltip:hover .tooltip-text {
|
||||||
transition-delay: 0s;
|
transition-delay: 0s;
|
||||||
transform: scale3d(1,1,1);
|
transform: scale3d(1, 1, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip-inner {
|
.tooltip-inner {
|
||||||
background: rgba(36,193,246,0.9);
|
background: rgba(36, 193, 246, 0.9);
|
||||||
padding: 40px;
|
padding: 40px;
|
||||||
transform: translate3d(0,100%,0);
|
transform: translate3d(0, 100%, 0);
|
||||||
transition: transform 0.3s ease-in;
|
transition: transform 0.3s ease-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip:hover .tooltip-inner {
|
.tooltip:hover .tooltip-inner {
|
||||||
transition-delay: 0.3s;
|
transition-delay: 0.3s;
|
||||||
transform: translate3d(0,0,0);
|
transform: translate3d(0, 0, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Arrow */
|
/* Arrow */
|
||||||
@ -20,7 +20,7 @@
|
|||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
border: 1px solid rgba(107, 107, 107, 0.7);
|
border: 1px solid rgba(107, 107, 107, 0.7);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background-color: $colorBg;
|
background-color: @colorBg;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -48,14 +48,14 @@
|
|||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
left: 20px;
|
left: 20px;
|
||||||
border-top: 10px $colorBg solid;
|
border-top: 10px @colorBg solid;
|
||||||
border-left: 7px transparent solid;
|
border-left: 7px transparent solid;
|
||||||
border-right: 6px $colorBg solid;
|
border-right: 6px @colorBg solid;
|
||||||
border-bottom: 10px transparent solid;
|
border-bottom: 10px transparent solid;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.waifu-tool {
|
.waifu-tool {
|
||||||
color: $colorA;
|
color: @colorA;
|
||||||
top: 80px;
|
top: 80px;
|
||||||
right: 60px;
|
right: 60px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@ -64,13 +64,13 @@
|
|||||||
display: block;
|
display: block;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: rgb(57, 57, 57);
|
color: rgb(57, 57, 57);
|
||||||
background-color: $colorBg;
|
background-color: @colorBg;
|
||||||
border: 1px solid rgb(57, 57, 57);
|
border: 1px solid rgb(57, 57, 57);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
padding: 0 4px;
|
padding: 0 4px;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
@extend %trans;
|
.trans();
|
||||||
animation-duration: 30s;
|
animation-duration: 30s;
|
||||||
animation-iteration-count: infinite;
|
animation-iteration-count: infinite;
|
||||||
animation-name: shake;
|
animation-name: shake;
|
||||||
@ -82,7 +82,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
#live2d{
|
#live2d {
|
||||||
position: relative;
|
position: relative;
|
||||||
cursor: grab;
|
cursor: grab;
|
||||||
&:active {
|
&:active {
|
||||||
@ -1,5 +1,5 @@
|
|||||||
// 样式
|
// 样式
|
||||||
import '../css/main.scss'
|
import '../css/main.less'
|
||||||
import '../css/font-awsome.css'
|
import '../css/font-awsome.css'
|
||||||
// 分享
|
// 分享
|
||||||
import Share from './share'
|
import Share from './share'
|
||||||
|
|||||||
@ -46,8 +46,8 @@ module.exports = function(env, argv) {
|
|||||||
},
|
},
|
||||||
exclude: /node_modules/
|
exclude: /node_modules/
|
||||||
},{
|
},{
|
||||||
test: /\.(scss|sass)$/,
|
test: /\.less$/,
|
||||||
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
|
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
|
||||||
},{
|
},{
|
||||||
test: /\.css$/,
|
test: /\.css$/,
|
||||||
use: [MiniCssExtractPlugin.loader, 'css-loader']
|
use: [MiniCssExtractPlugin.loader, 'css-loader']
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user