Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 1df613493b | |||
| 66c864c9e8 | |||
| 708d817f67 |
@ -94,7 +94,7 @@ pagination_dir: page
|
|||||||
theme: yilia
|
theme: yilia
|
||||||
|
|
||||||
# 图片存储仓库地址
|
# 图片存储仓库地址
|
||||||
picture_cdn: https://nas.colorfulsweet.site:9003
|
picture_cdn: https://cdn.colorfulsweet.site
|
||||||
|
|
||||||
# ICP备案号
|
# ICP备案号
|
||||||
ICP: 鲁ICP备19028444号
|
ICP: 鲁ICP备19028444号
|
||||||
|
|||||||
@ -1,84 +0,0 @@
|
|||||||
---
|
|
||||||
title: 函数式进阶-管道
|
|
||||||
date: 2023-01-19 22:09:39
|
|
||||||
tags:
|
|
||||||
- JavaScript
|
|
||||||
- 函数
|
|
||||||
categories:
|
|
||||||
- JavaScript
|
|
||||||
---
|
|
||||||
|
|
||||||
管道处理是一种比较常见的api设计方式，意思是上一步的执行结果作为下一步的入参
|
|
||||||
顺序执行
|
|
||||||
|
|
||||||
<!-- more -->
|
|
||||||
|
|
||||||
如果我们需要在JS中实现这一点
|
|
||||||
当然可以这样做
|
|
||||||
```typescript
|
|
||||||
func1(func2(func3(arg)))
|
|
||||||
```
|
|
||||||
首先这样代码很难看，其次是这样嵌套的代码调用是固定的，没有做到动态的函数式编程
|
|
||||||
|
|
||||||
### 基本形式
|
|
||||||
|
|
||||||
如果要实现一个管道，可以这样做
|
|
||||||
```javascript
|
|
||||||
// pipe函数的参数接受若干个参数, 都是Function类型
|
|
||||||
const pipe = (...funcs) => {
|
|
||||||
// 这个pipe函数是会返回一个函数
|
|
||||||
return inputValue => { // 这个函数的初始入参作为第一个函数的调用入参, 之后将该函数返回值作为下一个函数的入参
|
|
||||||
return funcs.reduce((currentValue, currentFunction) => {
|
|
||||||
return currentFunction(currentValue)
|
|
||||||
}, inputValue)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
上面是使用`reduce`作用是正序执行，如果要逆序执行可以使用`reduceRight`
|
|
||||||
调用示例
|
|
||||||
```javascript
|
|
||||||
const func1 = value => {
|
|
||||||
return value * 10
|
|
||||||
}
|
|
||||||
const func2 = value => {
|
|
||||||
return value + 5
|
|
||||||
}
|
|
||||||
const func3 = value => {
|
|
||||||
return value * 0.5
|
|
||||||
}
|
|
||||||
const result = pipe(func1, func2, func3)(30)
|
|
||||||
console.log(result)
|
|
||||||
```
|
|
||||||
|
|
||||||
### 异步函数
|
|
||||||
如果输入的函数是异步的，或者同步异步都有呢
|
|
||||||
那么函数的返回结果就不能立刻拿到了
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
const pipeAsync = (...funcs) => {
|
|
||||||
return async (inputValue) => {
|
|
||||||
return funcs.reduce((chain, func) => {
|
|
||||||
return chain.then(func)
|
|
||||||
}, Promise.resolve(inputValue))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
区别就是不管函数是不是异步的，都当做异步处理，作为then的回调函数
|
|
||||||
调用示例
|
|
||||||
```javascript
|
|
||||||
const func4 = async value => {
|
|
||||||
return value * 10
|
|
||||||
}
|
|
||||||
|
|
||||||
const func5 = value => {
|
|
||||||
return value + 5
|
|
||||||
}
|
|
||||||
|
|
||||||
const func6 = async value => {
|
|
||||||
return value * 0.5
|
|
||||||
}
|
|
||||||
|
|
||||||
pipeAsync(func4, func5, func6)(30).then(result2 => {
|
|
||||||
console.log(result2)
|
|
||||||
})
|
|
||||||
```
|
|
||||||
@ -1,197 +0,0 @@
|
|||||||
---
|
|
||||||
title: 洛城故事
|
|
||||||
date: 2016-03-21 16:58:09
|
|
||||||
categories:
|
|
||||||
- 男生女生
|
|
||||||
---
|
|
||||||
—— 文/杭小夕
|
|
||||||
<!-- more -->
|
|
||||||
### 第一章
|
|
||||||
|
|
||||||
那是个夏末的一个阴霾漫天的黄昏，打了下课铃，我和我同学像往常一样去食堂吃饭。牛肉烩面，典型的河南菜，急行军一样的匆匆吃完，然后就打算在球场上打会儿篮球再回班里上自习。
|
|
||||||
可是那天的天空似乎黑的特别早，还是在夏天，不到七点钟。黑幕像是田地里的庄稼瞬间生长蔓延，从四野迅速的占据了天空。我是运着篮球一下子觉得看不见篮球的位置了。一起打球的同学也觉得奇怪，疑惑不解的嘟囔着抹抹额头上的刚出的汗一起回班。
|
|
||||||
沙尘从关不紧的门窗里长驱直入。大风吹得悬挂的电灯剧烈的晃荡，让人担心它们会不会掉下来。不时有人的书本被刮落在地，灰尘溅落在眼睛里或者覆盖在桌椅上。那节自习课让所有人都狼狈不堪。只等着救命的放学铃早点响起，住校的赶快回寝室，走读的赶快回家。
|
|
||||||
就是在这时，坐在靠窗位置的学生突然啊的一声惊叫，打破了教室里惶然不安的气氛。他站起来指着窗外说，看啊！你们快来看！
|
|
||||||
我们集体凑到窗前顺着他的所指看过去。借着教室里不甚明亮的灯光，我推了推鼻梁上的淡蓝色镜片，不远出天垄上有一行人正在往邙山深处走去，与其说是走，倒不如说是在并脚跳跃着前进。黑漆漆的昏暗天幕下，不见星月，茫然混沌天边延展至视线更远处，那一队人隐隐约约是三个，也可能是四个，一身白衣，最前面的那个戴着电影或者古书中描写的黑白无常所戴的那种高冠帽，手里拿着一根长长的挂着招魂幡的白色杆子。他身后的那几人握着一根绳索跟在他身后蹦跳着前进。像是一队游荡在世间的无主孤魂此时被鬼卒擒获，由他带领走进北邙山，寻找可以安息的所在。
|
|
||||||
所有的人都被吓呆了。一个胆小的女生失声问道，他们是不是鬼？然后很多人都惶惶不可终日起来，有一个多事的人说，如果看见了鬼魂。鬼使很快就会前来把你带走的。这句话无异一道晴空霹雳。很多人都被吓得魂不附体，有几个胆小的已经在嘤嘤的哭开了，嘴里嚷着我不在这上学了，我要转学。
|
|
||||||
和我家住隔壁的芒生低头沉思了一会，然后抬头很认真地说。那条路白天是不存在的对不对？以前要是进山的话就会走东边的那条路。那条田垄平时就一直是一块荒地，不曾有人打那经过。我想，那就是老人们说的阴路了吧。走死人的地方，老人们说咱们邙山的阴气特别重，很多游魂会沿着指引来到这里，然后在邙山寻找一处地宫栖身。
|
|
||||||
那，那我们会不会有危险？不是说活人是看不见的吗？一个学生问。
|
|
||||||
也许会吧，我也不知道，不过据说那些看到这些的人很快就会死去。就好像那些老人，他们已经濒临死亡，所以才会看见。可是一般也只是一两个人看到，没道理说我们都看见了啊。芒生一边努力的回忆一边说出自己的看法。
|
|
||||||
于是在场的人就更加混乱了。老师听见教室里的动静赶来维持秩序。当她了解了所发生的状况，眼睛也闪过一丝恐惧，但还是努力平静然后劝诫大家唯物论是不是白学了？这世界上何来的鬼魂之说？那不过是封建迷信。可是她却明显的底气不足，说话的声音都有些失真。
|
|
||||||
一时间大家都像是没头苍蝇一样手足无措。在这混乱之中我平静得不露声色。芒生站在人群的另一端看着我，同样是若有所地对我笑了笑。窗外的风沙依旧猛烈，窗框被吹的哐当直响。教室里的空气变得沉重，那群跳动着的身影在眼眶中渐渐远去不见，却像是躯体面临死亡时的挣扎。
|
|
||||||
放学回去的路上，我和芒生一起推着自行车走在风沙肆虐的土胚路上。我笑笑说，我可真佩服你的想象力啊，编辑的这么有模有样。我都要被你唬住了。
|
|
||||||
可是芒生却一脸认真的对我说，要不是我事先知道，我也一定会被吓掉魂的。何况我刚说的也不全是我瞎编的，阴路有这回事，确实是有的。
|
|
||||||
我不再说话，推着车子顶风奋力埋头向前走。抬起头的时候，一阵大风席卷着沙尘直扑在脸上，脖子上从小就戴着的一块玉牌晃荡的敲着胸口，我觉得自己如同一下子掉进了尘埃的洞穴。
|
|
||||||
|
|
||||||
第一章(完)
|
|
||||||
|
|
||||||
### 第二章 【轰轰隆隆的吼声，声嘶力竭的惨叫，几乎要把人心撕碎】
|
|
||||||
|
|
||||||
芒生和我一样，也是此处原驻的居民。而学校大多数人都不是，他们大多是在洛龙区的工厂里上班的外来客的子女，因为我们这所学校的门槛很低，收取的费用也少，加之教学质量一直还不错才吸引了他们在这里读书。
|
|
||||||
我们看见那一幕而不觉得吃惊害怕的原因只有一个，我们知道真相。
|
|
||||||
我和芒生家就隔一道墙，在鲁河区最北边几近荒郊的地方，有两座白色的二层小楼。分别是我们各自的家。是在我六岁的时候拆了老宅子盖起来的。但是这里还是农村，于是就引得很多人的羡慕。可是有一点让人觉得反常的是，我们各自的父母都没有多少土地，也没有工作，却有钱有漂亮的小楼。所以后来我爸和芒生的父亲合伙买了一辆卡车，对外说是在城里跑运输的。
|
|
||||||
实际不是。
|
|
||||||
我们这种障眼法，骗骗外乡人倒还不失为一种好办法。然而在懂行的明眼人看来，根本就是秃子头上的虱子。
|
|
||||||
那群在风沙的夜晚走进邙山的家伙，根本就不是什么鬼怪游魂，不过是一群乔装打扮的人。他们大大寿衣下面是一袭黑色紧身的"老鼠衣"，上面挂满了齐全的工具。而那条所谓的拘魂索不过是一跳结实的绳索，手中摇晃的招魂幡更是伪装的漂亮，他们会在进山之后去掉挂在上面的白幡，露出它的本来面目。那就是闻名于世的奇特发明，洛阳铲。
|
|
||||||
早在十年之前，我还是个孩子的时候，我就知道这里的居民从事着一项见不得人的秘密职业。很多户人家都心照不宣，大家不种地不耕田，但是日子都过的很富裕。是靠祖宗遗留下来的宝藏，我们从死人手里夺取这些宝物然后变卖出去。虽然任何时候都是严令禁止的，但是却依然成风。那是一种断子绝孙的罪恶勾当--盗墓。
|
|
||||||
我母亲在生我的时候难产而死。我从小和爸爸相依为命，按照这里的风俗，一般盗墓的人都是有血缘关系的，却绝少是父子。因为出于中国人自古对死者的敬畏，掘人坟墓是必要遭到天谴的，所以绝大数人就算自己是盗墓贼也会在孩子面前维持住自己的尊严。不愿意让自己的孩子也会牵扯进这份始终流传着的盗取他人坟墓自己也必将暴尸荒野的诅咒来。然而我父亲却是在我刚刚懂事开始就手把手地教我使用洛阳铲取土来推测底下是否有夯土层，教我通过地面上庄稼的长势来判断底下是否会有墓葬，也会带我用铧犁改制的滚刀在地下掘出狭窄的长长的通道。然后借着头顶矿灯微弱的灯光挑拣珍贵的小件文物趁着夜色带出墓穴。我今年十七岁，却已经是一个有着十年盗墓经验的老手了。
|
|
||||||
也许，爸爸这样做是因为整个村子里他就只有我一个亲人吧。这件事情，除了芒生的爸爸和二叔和另外两家人知道，其余人的观点，也仅仅是猜测。
|
|
||||||
那天晚上回到家，爸爸果然不在，厨房里留好了饭菜。我 草草吃完，心里没有一丝不安，安安稳稳的睡下。我自然是放心爸爸的技术的，几铲下去，他就能大致知道墓穴的年代，形状，以及墓门的位置。秦埋岭汉埋坡，明朝的死人砖头多。这早已是我烂熟于心的经验。我甚至还有一丝小小的兴奋，不知道爸爸这次又能带什么好物件，上次行动已经是三个月之前的事情了。我们家和芒生家合伙干的。有一件青玉玉琮被爸爸以六万块钱的价格出手了，虽然我很清楚，那东西一到拍卖会上就不知道会在价钱后面跟上多少个零。但那一笔钱着实让我潇洒了一把，我得到了3000块钱的辛苦钱，我用这笔钱带着小秋玩遍了整个洛阳。小秋是个很漂亮的女孩子，我的同学，郑州人。她很喜欢龙门石窟还有白马寺和关林。我送给她一台数码相机，让她能够随心所欲地拍摄了许多好看的照片。结果她成了我的女朋友。
|
|
||||||
我躺在床上，想象着这次爸爸会给我多少钱零花。我也许可以和小秋去一趟少林寺，她一直说想要去那里玩。这下字就有资金了。如果还有剩下的，那就可以给自己买一双Nike的新款篮球鞋，学校篮球赛的时候穿上，一定会很拉风。我这样美滋滋地想着，嘴角挂着笑意睡着了。
|
|
||||||
大概是五点种左右，卧室门被拍的直响，我料想是爸爸回来了，下床穿着拖鞋去开门。
|
|
||||||
他一身风尘两手空空的冲进来，直接跌坐在床上，满头大汗的脱下紧贴皮肤的"老鼠衣"。拿起床头的水杯咕咚咕咚一口气喝净，喘息未定的扶着胸口。然后最里喃喃自语一般的说，完了完了，这下出事了。
|
|
||||||
我也被爸爸的举动吓坏了，过了好一会儿，觉得他也许平静一些了，这才小心的问，怎么了爸？出什么事了？
|
|
||||||
|
|
||||||
|
|
||||||
爸爸抓起床单擦干脸上脖子上的汗，急促的说，我们这次是要挖一座东汉的墓，就是上次我带你去看的那个地方，在邙上最里面，昨晚我跟芒生他爸和他二叔一起动手。一开始都很顺，地道很快就挖好了，芒生二叔下地宫，我和芒生爸在外面接应。他从墓葬左耳室一侧进去，基本没遇上什么麻烦。估摸着他已经到地宫中心了，我们从地洞口听见里面一阵轰轰隆隆的吼声，然后是一声惨叫，那声音几乎就要把人心撕碎了。然后地面就突然一震，地表猛然塌陷下去，我和芒生爸被震的跌在地上，就没命地跑回来了。
|
|
||||||
是不是机关呢？听了爸爸的描述，我的眉头也不由得皱了起来，爸爸从小就以盗墓为业，几十年来最多也只是打过空手却还没有出过这样的事情。我努力搜索脑袋里留存的经验与记忆，怀疑是古人为防陵寝被盗而设置的机关。
|
|
||||||
不，不是机关。要是机关的话也就是墓门上落下巨石把墓穴封死，我们打地道进去根本就不会担心这个。而且那声音不像是机关的声音，更像是野兽，一头饿极了的野兽。那吼声恐怕狮子老虎听到了也会吓得掉头就跑的。爸爸的语气毋庸置疑，他把一身装备藏进我卧室床底下的地窟里。然后像是陷入了回忆的泥淖中半晌才又抬起头说。这不是第一次了，洛豫，你爷爷的大伯就是在民国二十九年进一座北魏的墓葬遇到这种情况结果就再没出来，那时候你爷爷在外面吓得连魂都没有了。一连三年都没敢再有动作，后来为了生计才有开始干的。我听说之后一直都不相信，没想到自己竟然碰上了。
|
|
||||||
会是什么呢？我自问，却根本没有头绪，起身去端来热水，让爸爸洗漱一下，安顿他休息。外面的天光已经开始发白，一群麻雀呼呼啦啦的落在院子里的电线上。我也再没有困意，穿好衣服，打算早早去找芒生然后去学校，好好合计一下。
|
|
||||||
|
|
||||||
第二章(完)
|
|
||||||
|
|
||||||
### 第三章 【躺在地上的尸体，口中满是鲜血】
|
|
||||||
|
|
||||||
我和芒生推着自行车走在路上，他神色凝重，失去亲人的痛苦让一向无厘头的他沉默不语。我小心问他，怎么样？你有眉目吗？
|
|
||||||
芒生摇摇头，头也不抬的走着，然后我从他的眼睛里看到了怀疑。他说，这根本就是不可能的事情啊。什么异兽啊，住在坟里吗？不吃不喝呆了一千多年？如果不是机关，那会是什么？我二叔对我一向很好，小时候我爹经常出门联系买主，可以说是我二叔以便教我技术以便把我带大的，这次他出事，我不能就这样算了。
|
|
||||||
那你打算怎么办？我也有些紧张了。
|
|
||||||
他猛然抬头，目光直接而明亮的看着我，眼神里有着坚定。洛豫，你说我们算不算兄弟？
|
|
||||||
你这不是废话吗！我不把你当兄弟那你是我什么人？我很仗义的拍拍他的肩膀，你是不是有计划了？说吧，我绝对跟着你干！
|
|
||||||
今天晚上十一点多，你带好家伙，咱俩近那座汉墓。至少要把我二叔的尸首带出来。别跟别人说，就咱们两个，你要是不答应的话我就自己去。芒生看着我，那眼神义无反顾。
|
|
||||||
我想了一下，其实一想起来爸爸说的那些我就觉得心里发毛。可是芒生说得有道理，不能就这样算了。于是我点点头，很笃定的说，好，咱们干！
|
|
||||||
我们骑上车子往学校里赶，夏末秋初的早晨凉意袭人，天空如此高远，我却觉得开始头疼欲裂一般，有某种声音在耳边隐隐的响起，眼前只觉得暗下来，一幕幕模糊不可辨认的景象电影胶片一样的急速闪过，说不出来是为什么。
|
|
||||||
整整一天，我都没有说什么话，下课时小秋跑过来问我怎么了，没精打采的。我只推托说昨天没睡好。她穿了一件圆领长袖，胸前戴了一块比戒指大一圈的白玉凤霞玦，用黑色皮绳挂着。我盯着在她胸前晃动的玉玦，却第一次觉得它的诡异。玦是股热搭弓射箭时套在拇指上用来保护手指的一种器物。后来就成了权贵的一种装饰品，演变成扳指。这一件是以前我们挖一座北齐时期的墓葬的收获我把它送给了小秋。然而因为在坟墓中经历了千年的浸染，尸气腐蚀了玉料，现在它上面散落着暗红色的血斑，阴雨沉默在白玉里。我突然觉得这东西的邪恶，因为它是爸爸硬生生从化成泥水的死尸手指上拽下来的。我开始担心晚上的行动会不会有不可预知的危险，于是我打起精神微笑着对小秋说，你别担心，我没事。
|
|
||||||
我知道小秋喜欢我绝不是因为我有很多钱，而是我不经意的桀骜和温柔打动了她。十七八的女生，多少都会有些虚荣心，可小秋还是很让人舒心的女生，高中时她刚转来，没有朋友，于是只是喜欢在邙山的山脚散步，我就会耐心的陪着她。一开始的时候她什么都不说，双手比成一个方框为这里的山峦取景，然后渐渐地告诉我很多往事，我不懂怎么讨女生玩那个的欢心，就是安静的听。于是和她一起坐在北邙山山脚下的田垄上仰望天空里的云朵的时候是我最开心的时刻。
|
|
||||||
知识我从来没有告诉过她，我和爸爸都是以盗墓为生的。她胸前的玉石是私人的宝物，我们在一起的所有花销也是拜那些埋葬在这里的古人所赐。这是一项禁忌，我永远都不会说出来。
|
|
||||||
放学后我和芒生结伴回家，一路上我们没有说什么。等到了家门口他又一次提醒我，别忘了，十一点，我在邙山的那棵歪脖树下等你。
|
|
||||||
是夜，无雨，微风。天空中没有月亮，散落了许多无人招领的星辰，星光微弱忽闪，脚下的道路模糊不可辨认，但以往的经验还是行我在黑夜中轻车熟路。树叶发出簌簌响动，刚出殡不久的新坟上还有白色的幡子在风中舞动。不知道那些死后的亡灵将会归于何处。
|
|
||||||
我穿着黑色的“老鼠衣”，背着工具包直奔那棵歪脖子树下，爸爸因为作昨夜的事情而惊魂未定疲惫不堪，睡得很沉。等到了地方，芒生深受敏捷地从树上跳下来，走吧，他在夜幕中冲我挥挥手，他的脸在黑暗中飘忽不定。
|
|
||||||
我们很快就找到了那座出事的汉墓。地面明显下陷，是地宫全面坍塌的迹象。根据以往的经验，我们决定从昨晚的盗洞挖掘前进，这样会比较轻松，安全度也相对高些。
|
|
||||||
|
|
||||||
一开始是芒生弓身打算进地宫，让我在外面接应。却被我拒绝了，芒生比我小，就算只是小了两个月但我也是他哥，何况我的技术比他要好。于是我执意下去，强令芒生在墓从中等着我，拿着两条绳索，一条捆在自己腰上，另一条拿在手里，等找到了他二叔就把人带出来。
|
|
||||||
我手里的滚刀连续转动，原先被土埋住的地道很轻易就挖开了。是一个倾斜约30度的侧道，大约十二米的距离，之通道主墓室之下，再直上进入地宫。于是我们挖掘的通道就像是作业本上的对勾，沙土很松软，便于挖掘，但是也因此十分危险，加之之前所发生的异事，我十分谨慎，速度并不快。一个多小时之后，我从地宫底面的夯土中钻出来，开始打量这座东汉的陵墓。
|
|
||||||
我没有戴矿工帽，在漆黑如同深海的狭窄地宫里没有意思光亮，星光在出口处停顿被隔离。然而我的眼睛却似乎就是为了黑夜而存在的。就算是再黑暗的空间里我也可以清楚地看见一切。微明的眸子里闪烁着暗红色的光，洞悉地宫里每一处浮雕的花纹。这件事只有我爸爸和芒生一家知道，毕竟对外人说了也不会被相信。在白天我是惧怕阳光的戴着淡蓝色镜片的眼镜治疗着顽固的散光，仰望天空的时候总会被阳光刺痛。以至于我刚进学校的时候那副淡蓝色防紫外线眼镜引来了许多人的侧目。
|
|
||||||
整个地宫虽然已经塌陷，但是仍有两根承重梁尚未完全损毁，左右耳室和墓道都已经被沙土封闭，但地宫中心位置的棺椁却还完好，只是不知道何时被人打开了，腐朽的棺木斜靠在一旁，立在两侧的宫灯被摔成几段，刻满了华丽云纹的墙壁上也赫然显现着爪子刮过的痕迹。一股异样的腥臭气味充斥了狭小的空间。这间墓室丽似乎经过了一场剧烈的打斗，狼籍错乱。我留心看了这些痕迹，断定绝非是芒生二叔的到来所引起的。墙上的抓痕已经模糊，棺椁被移动的地方也早已开始风化，也许这次你死我活的打斗也是发生在数百年前。
|
|
||||||
我绕到棺椁的后面寻找芒生二叔的尸体，脚下被 一处较为柔软的硬物绊了一下。低头一看，却是我要找的人。我吃了一惊，脑袋里涌起剧烈的恐惧，但很快就努力的克制住自己镇定下来。不过是一具尸体罢了，我们盗墓者哪一个不是在和死人打交道，然而如此近距离的接触一具新死的尸体，却还是让我顿时毛骨悚然起来。
|
|
||||||
他面如死灰，铁青而不见一丝血色，身体异常僵硬，如同石块一样，让我费了很大力气才把绳索拴在他的腰上。在给他翻身的时候，我猛然看见在他的脖子后面有一处伤口，仔细辨认之后我顿时双腿发软。那伤口是一排牙齿的咬痕，四处黑乎乎的血窟窿有序的错落其间。看来爸爸说地宫里有野兽的事情并非是胡言乱语。我努力搜索脑海里的记忆，突然想起显贵死后会在墓中豢养守灵兽，就好像新闻里说当考古人员打开埃及法老的陵寝时，一只数千年前的灵提狗箭一样地窜出来，在阳光下立即死去。那么咬死芒生二叔的，会不会就是传说中凶残嗜血的守灵兽？
|
|
||||||
我一刻也不敢停留，马上拉动绳子拖着尸体借着墓外芒生的助力往外爬，带着尸体一起出来。
|
|
||||||
芒生看见自己亲人的尸体，瞬间悲伤不能自已。他趴在他二叔的尸体上呜咽着开始哭泣，他不敢发出太大的声音，压抑的哭声让人心情沉重。我等了一会儿，然后说你先别难过，我们先把人抬回去吧。
|
|
||||||
芒生接纳了我的建议。他二叔是个精瘦的人，挖坑打洞的活一般都是他来干。芒生把尸体搭在自己肩头，我在一旁招呼着，于是我们就这样背着尸体往来时的方向走。
|
|
||||||
可是刚走了没几步，就听见芒生突然像是受到了巨大的疼痛一样惨叫了一声。他丢下尸体跳了起来，我紧张的问怎么了？出什么事了吗？
|
|
||||||
芒生捂着脖子后面说，有人咬了我一口。他伸出手掌让我看，满是鲜血，而他的脖子也涌出大量的血。我忐忑不安的看着仰躺在地上的尸体。发现他的口中沾满了芒生的鲜血。
|
|
||||||
我们面面相觑，有过一刻的沉默，那一瞬间恐惧潮水一样的向我们扑过来。我们的精神已经濒临崩溃，芒生看着我，我因为发抖而觉得站立不稳。最终我们像是受惊的鸟，丢下工具和背包没命的狂奔起来。
|
|
||||||
一路上荒山的夜晚森然可怖，嶙峋的石块和虬曲的树枝在风中如同暗中潜伏的异兽，我们他一口气跑回家里，不敢有丝毫的停歇。
|
|
||||||
第三章(完)
|
|
||||||
|
|
||||||
### 第四章 【无尽的黑暗，冰凉的石壁，亮点忽明忽暗的微弱红光】
|
|
||||||
|
|
||||||
第二天一早，我和芒生知道这件事不能瞒着家里，何况把工具都丢在了墓前，爸爸迟早是要发现的。芒生和他爸一起来我家，四个人分成两组，我们深知这下是闯祸了，对昨晚的事情供认不讳。
|
|
||||||
胡闹！我爸怒不可谒的说，谁让你们去的？你以为你自己的水平很高了是不是？还差得远呢！连个招呼都不打就敢去，还好回来了，要是你们出事了，那我和芒生爸怎么办？！
|
|
||||||
芒生站在屋子中间不说话，他的脖子上缠着纱布，一张脸因为失血而显得苍白。他有些倔强的说，我只是想把二叔带回来，我们总不能就这样把他丢在墓里吧。
|
|
||||||
芒生爸沉思了一会，他说，我们不是说你们这样做就错了，只是太危险了，我就不多说什么了。芒生你别去上课了，在家好好休息，洛豫你回去收拾一下，等会我们去把东西拿回来。
|
|
||||||
我点点头，转念又问，可是爸，我找到芒生二叔的时候，他绝对是已经死了啊。怎么可能会咬到芒生呢？那座墓里究竟有什么东西？我到现在还是不明白。
|
|
||||||
两个成人相视沉默。我看见爸爸的表情有过瞬间的失神。他张张嘴，欲言又止的样子。然后他说，我们也不清楚，你先去准备一下，我们马上就去，要是咱们的东西落到警察手里就完了。
|
|
||||||
站在昨晚我和芒生挖出的盗洞入口。环视四周之后。我禁不止失声惊叫起来。怎么回事？难道已经有别人来过了？
|
|
||||||
在昨晚我们开始逃跑的那个位置上，蒿草被我的脚步压倒的痕迹还清晰可见，除了我们留下的那两条痕迹之外，再没有什么人回来的迹象。我们丢弃的绳索，滚刀等工具也慌乱的散落在地上，可是芒生二叔的尸体却不见了踪影。
|
|
||||||
在场的两个大人还是比较冷静。他们细细的查看了现场，确定没有其他的人来过，可是这样一来疑惑就更大了。我找到尸体时他已经被埋在地宫里快二十四个小时了，而且那时他面无血色，身体石块一般僵硬，脖子上的伤口决定是致命的。难道他没死吗？但是现场并没有脚印，草丛的倒伏这一类的痕迹，那他去哪里了？我看着直径两尺的黑乎乎的洞口想不出合理的答案，除非，除非墓穴里真的有所谓的守灵兽，在我们离开之后它从地下钻出来，把尸体又给拖了回去。
|
|
||||||
那么芒生又为什么被尸体咬伤了？
|
|
||||||
芒生爸爸思索了一下说，也许，地宫里真的有什么不干净的东西？
|
|
||||||
我爸爸却比较干脆，没怎么理论这些，他说，别管其他的了，只要警察不知道就是万幸了。要是动力真的有什么不干净的东西，那咱们就把洞口封死，然后赶紧走，免得再出什么事。他的态度很失常的镇定，如同，他经历过一样。或许也只是我多心了。
|
|
||||||
于是我们用泥土把盗洞的入口封死，收拾好东西匆匆回去了。
|
|
||||||
这件事情也许就此告一段落了吧。芒生二叔被永远的封在了地宫之内，若是他人问起，也就大可说是去南方打工了。反正我想我们家不会就此金盆洗手，这次盗墓扑空，我们的生活也许就要拮据一段时间了。那么爸爸再次去盗墓的时候，还会不会碰上同样的事情？这让我不寒而栗。
|
|
||||||
然而我并没有提起，当我进入地宫在纯粹的黑暗中问道一股浓重的尸体气味，音乐的听到了一种似乎是喉咙深处发出的低吼，这嘶吼的陵寝中的一切都让我觉得有一种莫名的熟悉。这让我想起一只以来我时常会经历的一个梦境，无尽的黑暗，冰冷的石壁，腥臭的腐烂气味，亮点忽明忽暗的微弱红点，凌空飞舞的头颅。我说不清为什么会有这样的梦境，就像我说不清这件事情的来龙去脉一样。
|
|
||||||
但是我心里生起一种诡异的预感，这件事情，也许并非到此为止，说不定，才刚刚开始。
|
|
||||||
回到家里，我去隔壁院子看望芒生，推开他卧室的房门，还没有进去，就听见芒生大声在叫，赶快把门关上！听见没有，把门关你上！
|
|
||||||
我一头雾水，但还是照做了。房间里的光下那是这样的暗，窗帘被紧紧拉上。然后我惊奇的发现，就连窗户上的玻璃也被人实实地糊了好几层，真的是一点光也透不进来了。我很纳闷的走到芒生身边，低声问他，你这是要干什么啊？屋子里这么暗，你是要修养又不是要冬眠，哪能不晒晒太阳啊？
|
|
||||||
你别管，我觉得这样舒服。大概是因为身体虚弱的缘故吧，芒生的呻吟听起来很混浊。他的脖子上缠着厚厚的纱布，隐隐约约的可以看见浸染的血迹。我担心他，怎么样了？现在，我说，觉得好点没？
|
|
||||||
没事了，我休息几天就可以了。芒生说，他显然在回避被咬这件事情。没等我在说什么，他就开口说想要睡觉 ，让我离开。我虽然不清楚状况，但还是离开了。
|
|
||||||
他的房间里没有意思光，猛然间让我回想起幽暗的地宫。还偶遇空气中那种奇特的味道，难道是脏衣服散发出来的吗？转身关门的那一刻，我看见两点红光即刻闪了一下，这一闪惊出了我一身的冷汗。
|
|
||||||
第四章(完)
|
|
||||||
|
|
||||||
### 第五章 【血肉模糊的身体，拖着乌黑的血迹，消失在幽深的邙山深处】
|
|
||||||
|
|
||||||
疲惫让我觉得身体快要散架一样，那天的阳光格外刺眼，好像是可以灼伤皮肤一般。我回家蒙头大睡，知道隔天的凌晨。这几天以来发生的事情，已经快要把要把我的神经给泵段了。
|
|
||||||
学校里倒还平安无事，我按部就班的上课下课，觉得觉得心神不宁的时候就会下意识的抚摸自己胸前的那块玉牌，上面有一只外形像老虎的古代瑞兽，叫辟邪。
|
|
||||||
中午没有回去，在学校吃饭，小秋和我坐在一起，她问我你怎么了？昨天一天都没来，今天状态也很不好。我不知道要如何回答。没什么啊。我想了想说，芒生你知道吧，他让狗咬了，我有点担心他。
|
|
||||||
这个谎话的却编的不怎么样。而小秋接着问，啊？严不严重，有没有去打疫苗呢？
|
|
||||||
我不打算再说下去，只是搪塞说没事的，你别担心，过几天他就回来上课了。到时候咱们一起打羽毛球。
|
|
||||||
小秋接受了我的提议，她的眼睛明亮清澈又闪着温润的光芒。那好吧洛豫，我回去上课了。
|
|
||||||
我坐了一会，食堂里的人渐渐的散了。我还是在担心芒生，不知道他现在是不是觉得好一点了。晚上回家后我再去看望他吧。
|
|
||||||
可是没等晚上放学回家，芒生就过来上课了。晚自习开始后没多久，天色彻底的暗下来。老师坐在讲台上批改作业，教室里很安静。然后门被砰地一声推开了，像是一声闷雷，我们全体受惊，抬头看向门口。
|
|
||||||
芒生脖子上缠着纱布，没有说话。老师冷了一下，然后看见受伤的他，本着关心也就没有说什么，让他回到自己的座位上。
|
|
||||||
可是当芒生从我身边走过的时候，他的眼睛呆滞的向前直视没有看我。一时间我又闻到了一股潮湿腐坏的恶劣气味，像是在地下深处滋生出的味道。芒生的动作有些僵硬，坐下时发出了巨大的声响。
|
|
||||||
我用询问的目光扭头看着他，希望他能给我一些有用的信息。可认识芒生的眼珠似乎不灵活了，他扭动脖子才能直视着我，那目光阴冷而诡异，不带一点感情。
|
|
||||||
他反常的举动让我不明就里，芒生如同变了一个人，变得陌生，他好像不认识我了。僵坐在座位上除了呼吸不做其他的事情。我莫名又一种预感，这个夜晚，注定不会平静。
|
|
||||||
于是我无心再做其他的事情，我的余光一直注意着芒生。他面色铁青，没有一点表情中又透着一丝凶狠。这期间我不停地低头看表，额头上开始出汗。
|
|
||||||
离下课不到五分钟了。教室里突然传出一阵压抑的低吼，这吼声让所有人都吓了一跳。循着声音来源看过去，却是芒生低着头从喉咙深处发出的，他的同桌明显的被芒生搞晕了，他对芒生说你干什么啊？吓我一跳！
|
|
||||||
芒生并没有回答，她的身子向同桌倾斜，然后手臂铁圈一样的把他死死的卡住。我猛然之间知道他要做什么了，一句快跑还没有从喉咙里喊出来，芒生的同桌就被忙大亨一低头瞬间咬住了脖子。
|
|
||||||
他用尽所有的力量挣扎着，拳头膝盖没遮没拦的落在芒生的头上背上，可芒生却死丝毫感觉不到疼痛一样只顾用力的撕咬。很快他同桌的反抗减弱下来，身体瘫软不再动弹，只是不是的抽动几下。血液从他脖子上的伤口处涌下来，他的大动脉一定是被咬破了，殷红心热的沿着脖子胸口流到地上。
|
|
||||||
我们都看明白了，芒生在吮吸他的血。
|
|
||||||
一时间教室里的人都被吓掉了魂，没有热你以为自己看见的是真的。知道有人杀猪一样的惨叫起来，快跑啊！慌乱才瞬间扩散开来。所有人都没命的往教室外跑，拥挤推攘中摔倒了不少人，他们呢却如同穷途末路一样，爬起来继续往门外挤去。
|
|
||||||
有人关上了教室里的灯，黑暗瞬间覆盖。只是隔壁班的慌乱的灯光折射而来，那个被芒生咬死的学生倒在地上，黑暗中芒生只有一个模糊又恐怖的轮廓。空旷的教室里只有鲜血的腥味。
|
|
||||||
|
|
||||||
我想芒生一定不知道自己做了什么。我没有走，而是大声的喊，芒生你怎么了？！你给我醒醒！！你知道你做了什么吗？
|
|
||||||
我以为我可以唤醒他，他呆立在黑暗里半天没有移动。然后是听见有人在喊他，转过身，很奇怪的几乎是拖着身体缓慢的朝我走过来。这是我看见芒生的眼睛变了颜色，不再是以往那个开朗而有点痞痞的少年的茶色瞳孔了，而是成了暗红色，带着浓重的杀意向我逼近。
|
|
||||||
我没有放弃，还在勉力喊着他。直到他靠近我，又一次用手臂牢牢的困住我。这是我才发现他的身体冰凉如铁，没有意思暖意，而他不知道怎么会有这么大的力气，我根本挣脱不开。
|
|
||||||
芒生发出野兽一样的吼声，他面目狰狞的长大薪酬的嘴，我看见了四颗特别尖锐而粗长的牙，就和在他耳熟脖子上照成的伤口牙齿是一样的。他就像完全不知道我是他从小嬉戏打闹的洛豫一样，朝我的脖子上直直的咬下来。
|
|
||||||
我绝望的闭上眼睛，等待着绝对的知名一击。
|
|
||||||
然后却没有，我只听见芒生的一声痛苦的吼叫，就被他松开了。我全身乏力的瘫倒在地上，睁开眼睛，看见他正痛苦的用双手抱住头往后退，如同有两个自己在大脑里相互折磨一样，最后的一份理智强行让他放开了我。那是我发现他的手掌也完全变了样子，小麦色健康的肌肤换成了铅灰色的鳄鱼一样粗糙皮肤，上面有许多让人恶心的突起疙瘩，而他的指甲却变得厚而尖长，就好像某种爬行动物的爪子。
|
|
||||||
我不确定芒生是否还认得我，他就已经转换了方向，面对墙壁猛力的用手一拍，钢筋混凝土的墙壁就被他轻松地大破楚一个窟窿。他一阵乱拍，在墙上打出一个一人宽大的洞口。接着，从那个洞口子教学四楼最落到地上。
|
|
||||||
我的脑子里翁的一下，不相信眼前所发生的一切。我站起来不顾浑身的疼痛追上去，透过那个缺口往地面上看，芒生血肉模糊的摔在地上。脑浆混合着血液在地上肆意迸溅，可他的血液竟然是黑色的。我的第一反应是玩了，这下芒生铁定活不成了。却没想到他俺竟然不连贯的，机械的又站了起来，拖着几乎要散架裂成碎块的身体继续往北面的围墙移动，打碎了砖砌的围墙朝北邙山的乱葬岗走去。身后拖着一条乌黑的血迹，消失在在洛阳初秋肃杀而幽深的邙山深处。
|
|
||||||
我跑出去，在混乱的走廊上的人群中找到了小秋，她扑进我怀里浑身都在颤抖。这是怎么了？洛豫，你不是说芒生没什么吗？为什么会这样？我听说了，他怎么会杀人呢？
|
|
||||||
我紧紧地抱住她，不知道套用什么办法来安慰这个如惊弓之鸟的孩子，只有拉着她往操场上的空地跑去。我说，小秋你别害怕，这些斗不过是一场噩梦。
|
|
||||||
小秋却满脸泪水的看着我，夜风中她的表情萧瑟，不知道是因为害怕还是因为寒冷，不是的，洛豫，你骗我，芒生真的出事了。
|
|
||||||
第五章(完)
|
|
||||||
|
|
||||||
### 第六章【连着丝绳如同流星，清脆空灵的一声脆响，如同幻灭】
|
|
||||||
|
|
||||||
学校里因为死了人而暂时停课。我们却都没有为这突如其来的假期而觉得一丝的高兴。与之相反，是巨大的恐惧。尤其是当天晚上我们班里目睹了那场惨剧的同学们，全都躲在家里不敢出门。到了晚上更是恐惧不能成眠。
|
|
||||||
我爸和芒生的父亲也知道了这件事情，这下轮到芒生的父亲坐不住了。短短几天之内，他失去了自己的弟弟和儿子，他跪在客厅冰凉的地板上悲痛欲绝的嚎哭。后来芒生妈也知道了自己儿子出了事情，歇斯底里地厮打着自己的丈夫，嘴里不停地喊着你还我儿子你还我儿子。
|
|
||||||
我爸爸在一旁一言不发，只是间或叹了口气。等到他们夫妻两个稍稍平静了一些才开口说，咱们现在要怎么办？芒生已经死了，就这样不了了之吧，不然的话，谁知道最后会成什么样子？
|
|
||||||
死了？不是啊，爸，你没看见，芒生虽然变了样子，但是我亲眼看见他跑进邙山里面了。他还没有死。咱们真的不去救他了吗？
|
|
||||||
爸爸又叹了口气，很无奈的样子。洛豫，有些事情我不想告诉你，但是我要对你说，芒生他的的确确是死了。你所看见的，只是他被尸气感染的尸体？
|
|
||||||
尸体？
|
|
||||||
嗯，就是，爸爸看着我，停下来，那时候他的表情很古怪，似乎不愿意对我提及即将说出来的那两个字一样，芒生被不干净的东西咬了，他现在只是一具僵尸。
|
|
||||||
我倒吸一口凉气，脸上显现出一阵苦笑。我说，爸，你怎么也信这个？这怎么可能？
|
|
||||||
没等爸爸回答，芒生的妈妈就开口截断了话题，她抱怨一样的质问自己的丈夫，都是你啊！不好好做歌正经营生，非要去盗墓，这是丧尽天良的事情啊，现在好了吧，报应来了，你弟弟和你儿子都死了，你看看咱们还能活多久！
|
|
||||||
我的脑袋里一片空白，从小我就听老人们说，古代那些墓葬的主人自然是害怕后人盗墓的。他们会在墓穴里种下诅咒。于是我们邙山世世代代都流传着这样一种说法，但凡是盗墓的，必将断子绝孙死无葬身之地，那时我只当是吓唬人的老生常谈，却没想到竟然会应验的这么残忍。看着我爸爸难过后怕的表情，我开口说，爸，要不，我们以后就不干这行了吧。我们好好的找个事情做，你看，我不是还好好的吗？咱两平平安安的就好。
|
|
||||||
平平安安的？芒生爸爸嗤笑着说，你还以为你人好好的？你都不知道你......
|
|
||||||
他没说完就被我爸打断了。我爸爸突然提高了声调怒不可遏地说，你们给我闭嘴！咱们还是好好合计一下看怎么办吧！等到警察知道了就全完了！你少那我儿子说事！然后我把看着目瞪口呆的我说，洛豫，我也不想再干了，当初你妈妈怀你的时候一切都很正常，她身体也好，可是却在分娩的时候难产而死。我一直觉得对不起她，我不能再让你出事了。
|
|
||||||
我点点头，我知道了，爸，我听你的。只是觉得很难过，毕竟我和芒生是从小就认识的，以前就算是去做坏事也多亏了他和我搭伙。我会连他的那一份也好好活着的。
|
|
||||||
|
|
||||||
深夜的郊区安静的失常，月光惨淡的照在庭院里。芒生父亲的脸上有古怪的表情，欲言又止的样子。我起身打算和爸爸回去，就在我买出房门的时候，由于连日来的疲倦而动作不灵活，一下子脚下踩空，打了个趔趄，朝墙角跌去，随着身体的猛然前倾，胸前的玉牌飞去，连着红色的丝绳如同流星。我的玉牌撞击在墙面上，对着清脆空灵的一声脆响，如同幻灭一般摔成了几块。
|
|
||||||
我愣了一下，这块玉牌几乎是我从小就戴着的，没想到在芒生死后也要毁掉了。难道是天意吗？我苦笑着摇摇头，俯身把碎片捡了起来。
|
|
||||||
周围的人都不说话，那一刻出奇的安静。我背对着灯光，眼前影影绰绰的一团阴影。玉牌碎了以后我觉得自己突然有些晕眩，似乎是被掏空了一样，心理空落落的失去了着落。扶着墙站了一会，然后转身叫父亲一起回家。
|
|
||||||
然而就在我转身的那一刻，我突然发现我爸爸竟然流泪了。他的脸上老泪纵横，似乎突然面临着一场劫难而无声的隐忍难受。我有些疑惑和惶恐，转身走到他身边小声的问，爸，你怎么了？
|
|
||||||
他抬手抹去脸上的泪水，定定的看着我，又扭头看了看芒生的父亲。然后用他那始终慈爱的大手抚摸着我的脸颊，试探一样的问我，要不这样吧，洛豫，我们再去找找芒生，你看行不行？
|
|
||||||
我不明白爸爸为什么突然改变了主意，却也没有多想，也许是因为心底始终不相信他是真的变成僵尸了吧。于是我很笃定的点点头，好的，爸，我们现在就去。
|
|
||||||
第六章(完)
|
|
||||||
|
|
||||||
### 第七章【即便无人知晓，为了逃脱千方百计，也注定万劫不复】
|
|
||||||
|
|
||||||
似乎我命中就注定要与这邙山有何瓜葛，我和两个父亲一同走在通往邙山最深处的路上，一轮惨白的月光映照在四野迷乱凄厉。血腥味从地面上芒生留下的紫黑色痕迹散发出来。我们顺着这痕迹寻找他落脚的地点。爸爸似乎心事重重，一路上话很少。
|
|
||||||
我问爸爸，芒生真的成为了僵尸？你可以让我知道这些吗？
|
|
||||||
嗯，邙山这里自古就是墓葬的最佳位置，山北水南为阴，再加上无数的坟墓使得这里阴气十足。久而久之有些下葬的尸体长期经受地下阴寒之气的侵染而成为了僵尸，他们的灵魂已死，身体却会被不自觉的支配着。就像你看见的那样，他们的眼睛是红色，皮肤如同披甲，指甲尖长，嗜血惧光。在夜晚偶尔也会从墓中来到地面游荡，天亮后回去。芒生他二叔就是在地宫里尸变就成了僵尸。而芒生又被僵尸咬伤，很快也就成了僵尸。
|
|
||||||
听了爸爸的叙述，我一点也不觉得荒诞。这是我亲眼所见，芒生的惨死，还有，我突然就想起来了什么，继续问爸爸，那么，那个被芒生咬死的学生是不是也会尸变？
|
|
||||||
爸爸点点头。除非他在变成僵尸之后刚好是在白天，强烈的阳光可以把他晒化，要是在晚上，他一定会伤人之后逃进邙山的。
|
|
||||||
那就是说，危险的不只是我们这边，那个男生的家人一定还毫不知情的收着儿子的尸体悲痛的吧。他会不会又去袭击别人，到那时难道不就会有更多的僵尸出现了？
|
|
||||||
芒生的爸爸叹了一口气，你说的没错，但是我们也没办法了，听天由命吧。
|
|
||||||
我不知道要说什么了。也同他们一起沉默，知道眼前的血迹停止了，是一方狭窄的洞穴，笔直而下通往一座深埋于地下的地宫，挖掘的痕迹十分凌乱，竟然是被人用手掘出的。我不禁愕然，十分害怕的问：芒生是不是就躲在里面？
|
|
||||||
爸爸点点头，就是在这里。他的神情很古怪，如同在做着某种艰难的取舍。
|
|
||||||
那我们接下来要怎么办？要不要下去？我们还可以救他吗？
|
|
||||||
我们还不好决定，要先有个人下去才行。芒生的爸爸说。
|
|
||||||
那，我突然心里涌起一阵让人心寒无比的错觉，我回头看着眼前的两位长辈，他们的脸色都是十分不好，我小心的问，那，我们谁下去？
|
|
||||||
还是你去吧，洛豫，只有你的眼睛可以再黑暗中看清东西。爸爸说。他难道不知道地宫内是极其危险的吗？他难道不知道如果我被芒生攻击之后自己也会感染尸毒成为僵尸吗？可是他的语气既绝望又毋庸置疑，我无法选择，也没有回转的余地。只得硬着头皮点点头，那好吧，我去。
|
|
||||||
|
|
||||||
我顺着绳索缓缓深入，一直下到深达七米的地底，洞穴在身边转了一个弯，通向一侧的地宫。然而当我正打算小心的进入的时候，头顶上传来了爸爸悲痛欲绝的哭声，他抽泣着说，洛豫，对不起，你别怪我。
|
|
||||||
我不明白他为什么会这样，仰起头，月光自远处的天空穿过，映着爸爸的那张满是泪痕的脸。他看着洞窟内隐约模糊的我说，洛豫，你知不知道，其实你也是一具僵尸。
|
|
||||||
我惊愕的张大嘴巴。爸！你说什么啊！我怎么可能也是僵尸！
|
|
||||||
洛豫，事到如今我也不想再瞒你了，当真是报应，我做盗墓这营生原以为天衣无缝没人知道，可到头来却还是落了个家破人亡的下场。在你七岁的时候，我第一次带你进邙山看我盗墓，那时候我和芒生他爸还有你三个人，我带你去只是要让你练练胆量。可没想到你第一次进山就被夜行的飞尸给咬伤了，我不甘心你就这么死去，于是就给你戴上了一块我们从一座皇陵里盗出来的辟邪玉牌，希望能够压制住尸毒。这件事就只有我和芒生他爸知道。这么多年除了你的眼睛尸变之外索性没有什么大碍。可是今天你却把玉牌给打碎了，也许很快你就会尸变了，我没有办法才出此下策，洛豫，别怪爸爸。若早知如此，当初我也绝不会去做这伤天害理的勾当了。
|
|
||||||
原来一直困扰我的哪个梦境是真的，我的眼泪泉水一样的迸出来。我大声喊，爸！爸！求求你拉我上去，别杀我，求求你别杀我！
|
|
||||||
可是没有用了，我似乎已经感觉到在地宫一角潜伏着的杀气，一股腥臭的尸气无声的嗜咬着我的皮肤。沙土冰雹一样的自头顶盖下来，将我逼退到盗洞的转角。然而在我的视线被劈头盖脸的沙土完全遮挡的前一秒，我看见一直站在父亲身后的芒生的爸爸突然张开嘴巴，露出四颗尖利的长牙，他面目狰狞，眼睛在月光下转瞬突变成了暗红色，喉咙深处发出一阵野兽般的低吼朝爸爸扑过去。
|
|
||||||
我声嘶力竭的叫喊起来。因为他们一直都不知道，我摔坏的那块玉牌，是假的。早在自己十三岁的时候，又一次和芒生玩耍的时候，那枚玉牌就已经被我不小心摔碎了。我害怕回家会挨打，就从街边的地摊上买了一块形状相似的赝品掩饰自己闯的祸。这些年来，我戴着的玉牌，都只不过是一件五块钱从地摊上买回来的赝品啊！那枚真的玉辟邪早已经在六年的轮回里为我化解了那些潜藏在身体里的尸毒，还赐予了我夜视的眼睛。现在的我，还是一个人，一个正常的人！
|
|
||||||
可是，没有人会再理会我知道的真相了，我被困在密封的地宫之内，料想原来这世间有些事情决不可做，一旦做了，即便无人知晓千方百计的努力逃脱，也注定是要万劫不复。
|
|
||||||
我僵坐在潮湿阴冷的地上。黑暗中无声的哭泣，我想念小秋，我还答应她等到十一假期会和她一起去少林寺，也要和她一起打羽毛球，一起坐在北邙山山脚下的田垄上仰望天空里的云朵懒洋洋的飘过。
|
|
||||||
然而一切都来不及了，一阵低吼打乱了我纷乱而绝望的思绪，寂静而深沉的黑暗中，一双闪烁着黑红色亮光的眼睛幽灵一样的朝我这里靠近......
|
|
||||||
|
|
||||||
(全文完)
|
|
||||||
@ -70,6 +70,9 @@ top: true
|
|||||||
# 站点图标
|
# 站点图标
|
||||||
favicon: /favicon.ico
|
favicon: /favicon.ico
|
||||||
|
|
||||||
|
#头像url
|
||||||
|
avatar: https://cdn.colorfulsweet.site/resources/avatar.jpg
|
||||||
|
|
||||||
#是否开启分享
|
#是否开启分享
|
||||||
share_enable: true
|
share_enable: true
|
||||||
|
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<div class="intrude-less">
|
<div class="intrude-less">
|
||||||
<header id="header" class="inner">
|
<header id="header" class="inner">
|
||||||
<a href="<%=config.root%>" @mouseover="linkMouseover('home')" class="profilepic">
|
<a href="<%=config.root%>" @mouseover="linkMouseover('home')" class="profilepic">
|
||||||
<img src="<%=config.picture_cdn%>/avatar.jpg" class="js-avatar">
|
<img src="<%=theme.avatar%>" class="js-avatar">
|
||||||
</a>
|
</a>
|
||||||
<hgroup>
|
<hgroup>
|
||||||
<h1 class="header-author"><a href="<%=config.root%>" @mouseover="linkMouseover('home')"><%=theme.author%></a></h1>
|
<h1 class="header-author"><a href="<%=config.root%>" @mouseover="linkMouseover('home')"><%=theme.author%></a></h1>
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
<div class="intrude-less">
|
<div class="intrude-less">
|
||||||
<header id="header" class="inner">
|
<header id="header" class="inner">
|
||||||
<div class="profilepic">
|
<div class="profilepic">
|
||||||
<img src="<%=config.picture_cdn%>/avatar.jpg" class="js-avatar">
|
<img src="<%=theme.avatar%>" class="js-avatar">
|
||||||
</div>
|
</div>
|
||||||
<hgroup>
|
<hgroup>
|
||||||
<h1 class="header-author js-header-author"><%=theme.author%></h1>
|
<h1 class="header-author js-header-author"><%=theme.author%></h1>
|
||||||
|
|||||||
@ -2,8 +2,8 @@
|
|||||||
<html>
|
<html>
|
||||||
<%- partial('_partial/head') %>
|
<%- partial('_partial/head') %>
|
||||||
<body>
|
<body>
|
||||||
<div id="container" :class="{show:isCtnShow}" style="background-image: url('/api/v2/common/randomBg?label=background');" @click="hideSlider">
|
<div id="container" :class="{show:isCtnShow}" style="background-image: url('/api/v1/common/randomBg?label=background');" @click="hideSlider">
|
||||||
<div class="left-col" style="background-image: url('/api/v2/common/randomBg?label=banner');" >
|
<div class="left-col" style="background-image: url('/api/v1/common/randomBg?label=banner');" >
|
||||||
<%- partial('_partial/left-col', null, {cache: !config.relative_link}) %>
|
<%- partial('_partial/left-col', null, {cache: !config.relative_link}) %>
|
||||||
<%- partial('_partial/live2d') %>
|
<%- partial('_partial/live2d') %>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
1265
themes/yilia/package-lock.json
generated
1265
themes/yilia/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -30,16 +30,16 @@
|
|||||||
"@babel/plugin-transform-runtime": "^7.17.0",
|
"@babel/plugin-transform-runtime": "^7.17.0",
|
||||||
"@babel/preset-env": "^7.16.11",
|
"@babel/preset-env": "^7.16.11",
|
||||||
"autoprefixer": "^10.4.2",
|
"autoprefixer": "^10.4.2",
|
||||||
"axios": "^1.13.6",
|
"axios": "^0.21.1",
|
||||||
"babel-loader": "8.3.0",
|
"babel-loader": "8.2.3",
|
||||||
"clean-webpack-plugin": "^4.0.0",
|
"clean-webpack-plugin": "^4.0.0",
|
||||||
"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",
|
||||||
|
|||||||
@ -1,6 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
|
|
||||||
@import "core/_variables";
|
|
||||||
@import "core/_mixin";
|
|
||||||
@import "core/_animation";
|
|
||||||
@import "core/_reset";
|
|
||||||
7
themes/yilia/source-src/css/_core.scss
Normal file
7
themes/yilia/source-src/css/_core.scss
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
@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: fade(@colorBg, 80%);
|
background: adjust-color($colorBg, $alpha: -0.2);
|
||||||
.trans();
|
@extend %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: "\201C";
|
content: "“";
|
||||||
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,5 +1,5 @@
|
|||||||
.body-wrap > article {
|
.body-wrap > article {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-outer {
|
.article-outer {
|
||||||
@ -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: fade(@colorBg, 80%);
|
background: adjust-color($colorBg, $alpha: -0.2);
|
||||||
.trans();
|
@extend %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;
|
||||||
}
|
}
|
||||||
@ -16,4 +16,4 @@
|
|||||||
}
|
}
|
||||||
#article-nav #article-nav-older {
|
#article-nav #article-nav-older {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
@ -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,4 +94,4 @@
|
|||||||
bottom: -10px;
|
bottom: -10px;
|
||||||
transform: translate(0);
|
transform: translate(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,94 +0,0 @@
|
|||||||
@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;
|
|
||||||
}
|
|
||||||
328
themes/yilia/source-src/css/core/_animation.scss
Normal file
328
themes/yilia/source-src/css/core/_animation.scss
Normal file
@ -0,0 +1,328 @@
|
|||||||
|
@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;
|
||||||
|
}
|
||||||
247
themes/yilia/source-src/css/core/_media-queries.scss
Normal file
247
themes/yilia/source-src/css/core/_media-queries.scss
Normal file
@ -0,0 +1,247 @@
|
|||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,409 +0,0 @@
|
|||||||
@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;
|
|
||||||
}
|
|
||||||
694
themes/yilia/source-src/css/core/_mixin.scss
Normal file
694
themes/yilia/source-src/css/core/_mixin.scss
Normal file
@ -0,0 +1,694 @@
|
|||||||
|
@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 less
|
// reset scss
|
||||||
// 包括normalize，清零重置
|
// 包括normalize，清零重置
|
||||||
//-----------------------------------------------------
|
//-----------------------------------------------------
|
||||||
|
|
||||||
@ -21,17 +21,20 @@ 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,
|
||||||
@ -70,7 +73,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;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -83,8 +86,8 @@ progress {
|
|||||||
a {
|
a {
|
||||||
background: transparent; // 1
|
background: transparent; // 1
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: @colorLink;
|
color: nth($colorLink, 1);
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
outline: 0; // 2
|
outline: 0; // 2
|
||||||
}
|
}
|
||||||
@ -93,28 +96,34 @@ 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;
|
||||||
}
|
}
|
||||||
|
|
||||||
b, strong {
|
// Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
|
||||||
|
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%;
|
||||||
}
|
}
|
||||||
|
|
||||||
sub, sup {
|
// Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||||
|
sub,sup {
|
||||||
font-size: 75%;
|
font-size: 75%;
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -147,6 +156,15 @@ 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,
|
||||||
@ -159,6 +177,13 @@ 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,
|
||||||
@ -171,25 +196,33 @@ 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,
|
input, // 1
|
||||||
select {
|
select { // 2
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Address inconsistent `text-transform` inheritance for `button` and `select`.
|
// Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||||
button, select {
|
// All other form control elements do not inherit `text-transform` values.
|
||||||
|
// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
|
||||||
|
// Correct `select` style inheritance in Firefox.
|
||||||
|
button,select {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1. Correct inability to style clickable `input` types in iOS.
|
// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||||
// 2. Improve usability and consistency of cursor style between image-type `input` and others.
|
// and `video` controls.
|
||||||
|
// 2. Correct inability to style clickable `input` types in iOS.
|
||||||
|
// 3. Improve usability and consistency of cursor style between image-type
|
||||||
|
// `input` and others.
|
||||||
button,
|
button,
|
||||||
html input[type="button"],
|
html input[type="button"], // 1
|
||||||
input[type="reset"],
|
input[type="reset"],
|
||||||
input[type="submit"] {
|
input[type="submit"] {
|
||||||
-webkit-appearance: button; // 1
|
-webkit-appearance: button; // 2
|
||||||
cursor: pointer; // 2
|
cursor: pointer; // 3
|
||||||
}
|
}
|
||||||
|
|
||||||
// Re-set default cursor for disabled elements.
|
// Re-set default cursor for disabled elements.
|
||||||
@ -204,33 +237,42 @@ input::-moz-focus-inner {
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1. Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet.
|
// 1. Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||||
|
// the UA stylesheet.
|
||||||
input {
|
input {
|
||||||
line-height: normal; // 1
|
line-height: normal; // 1
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1. Address `box-sizing` set to `border-box` in Safari and Chrome (include `-webkit-`).
|
// It's recommended that you don't attempt to style these elements.
|
||||||
// 2. Address `height` property not being respected.
|
// Firefox's implementation doesn't respect box-sizing, padding, or width.
|
||||||
|
|
||||||
|
// 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.
|
// Fix the cursor style for Chrome's increment/decrement buttons. For certain
|
||||||
|
// `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: content-box; // 2
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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;
|
||||||
@ -250,12 +292,15 @@ legend {
|
|||||||
padding: 0; // 2
|
padding: 0; // 2
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove default vertical scrollbar in IE 8/9/10/11.
|
// 1. Remove default vertical scrollbar in IE 8/9/10/11.
|
||||||
textarea {
|
textarea {
|
||||||
overflow: auto;
|
overflow: auto; // 1
|
||||||
|
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;
|
||||||
}
|
}
|
||||||
@ -269,7 +314,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;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -280,38 +325,39 @@ 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添加class 或者 设置提示的placeholder
|
||||||
.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;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -362,5 +408,5 @@ i {
|
|||||||
|
|
||||||
// 清除子元素浮动
|
// 清除子元素浮动
|
||||||
.clearfix {
|
.clearfix {
|
||||||
.clearfix();
|
@extend %clearfix;
|
||||||
}
|
}
|
||||||
@ -1,72 +0,0 @@
|
|||||||
@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%;
|
|
||||||
72
themes/yilia/source-src/css/core/_variables.scss
Normal file
72
themes/yilia/source-src/css/core/_variables.scss
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
@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%;
|
||||||
166
themes/yilia/source-src/css/font-awsome.css
Normal file
166
themes/yilia/source-src/css/font-awsome.css
Normal file
@ -0,0 +1,166 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: "FontAwesome";
|
||||||
|
src: url("./fonts/fontawsome-thin.eot"); /* IE9 */
|
||||||
|
src: url("./fonts/fontawsome-thin.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
|
||||||
|
url("./fonts/fontawsome-thin.woff") format("woff"), /* chrome、firefox */
|
||||||
|
url("./fonts/fontawsome-thin.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
|
||||||
|
url("./fonts/fontawsome-thin.svg#uxfonteditor") format("svg"); /* iOS 4.1- */
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
.icon {
|
||||||
|
/* use !important to prevent issues with browser extensions that change fonts */
|
||||||
|
font-family: 'FontAwesome' !important;
|
||||||
|
speak: none;
|
||||||
|
font-size:16px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: normal;
|
||||||
|
font-variant: normal;
|
||||||
|
text-transform: none;
|
||||||
|
line-height: 1;
|
||||||
|
|
||||||
|
/* Better Font Rendering =========== */
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
.icon-search:before {
|
||||||
|
content: "\f002";
|
||||||
|
}
|
||||||
|
.icon-check:before {
|
||||||
|
content: "\f00c";
|
||||||
|
}
|
||||||
|
.icon-remove:before,
|
||||||
|
.icon-close:before {
|
||||||
|
content: "\f00d";
|
||||||
|
}
|
||||||
|
.icon-home:before {
|
||||||
|
content: "\f015";
|
||||||
|
}
|
||||||
|
.icon-twitter-square:before {
|
||||||
|
content: "\f081";
|
||||||
|
}
|
||||||
|
.icon-iconcebook-square:before {
|
||||||
|
content: "\f082";
|
||||||
|
}
|
||||||
|
.icon-github-square:before {
|
||||||
|
content: "\f092";
|
||||||
|
}
|
||||||
|
.icon-ellipsis-v:before {
|
||||||
|
content: "\f142";
|
||||||
|
}
|
||||||
|
.icon-google-plus-square:before {
|
||||||
|
content: "\f0d4";
|
||||||
|
}
|
||||||
|
.icon-twitter:before {
|
||||||
|
content: "\f099";
|
||||||
|
}
|
||||||
|
.icon-facebook:before {
|
||||||
|
content: "\f09a";
|
||||||
|
}
|
||||||
|
.icon-github:before {
|
||||||
|
content: "\f09b";
|
||||||
|
}
|
||||||
|
.icon-feed:before,
|
||||||
|
.icon-rss:before {
|
||||||
|
content: "\f09e";
|
||||||
|
}
|
||||||
|
.icon-weibo:before {
|
||||||
|
content: "\f18a";
|
||||||
|
}
|
||||||
|
.icon-google-plus:before {
|
||||||
|
content: "\f0d5";
|
||||||
|
}
|
||||||
|
.icon-tag:before {
|
||||||
|
content: "\f02b";
|
||||||
|
}
|
||||||
|
.icon-tags:before {
|
||||||
|
content: "\f02c";
|
||||||
|
}
|
||||||
|
.icon-book:before {
|
||||||
|
content: "\f02d";
|
||||||
|
}
|
||||||
|
.icon-calendar:before {
|
||||||
|
content: "\f073";
|
||||||
|
}
|
||||||
|
.icon-file-text:before {
|
||||||
|
content: "\f15c";
|
||||||
|
}
|
||||||
|
.icon-file-text-o:before {
|
||||||
|
content: "\f0f6";
|
||||||
|
}
|
||||||
|
.icon-clock:before {
|
||||||
|
content: "\f017";
|
||||||
|
}
|
||||||
|
.icon-eye:before {
|
||||||
|
content: "\f06e";
|
||||||
|
}
|
||||||
|
.icon-camera:before {
|
||||||
|
content: "\f030";
|
||||||
|
}
|
||||||
|
.icon-comment:before {
|
||||||
|
content: "\f075";
|
||||||
|
}
|
||||||
|
.icon-comment-o:before {
|
||||||
|
content: "\f0e5";
|
||||||
|
}
|
||||||
|
.icon-info:before {
|
||||||
|
content: "\f129";
|
||||||
|
}
|
||||||
|
.icon-info-circle:before {
|
||||||
|
content: "\f05a";
|
||||||
|
}
|
||||||
|
.icon-qq:before {
|
||||||
|
content: "\f1d6";
|
||||||
|
}
|
||||||
|
.icon-wechat:before,
|
||||||
|
.icon-weixin:before {
|
||||||
|
content: "\f1d7";
|
||||||
|
}
|
||||||
|
.icon-spinner:before {
|
||||||
|
content: "\f110";
|
||||||
|
}
|
||||||
|
.icon-arrow-circle-o-right:before {
|
||||||
|
content: "\f18e";
|
||||||
|
}
|
||||||
|
.icon-arrow-circle-o-left:before {
|
||||||
|
content: "\f190";
|
||||||
|
}
|
||||||
|
.icon-share-alt:before {
|
||||||
|
content: "\f1e0";
|
||||||
|
}
|
||||||
|
.icon-share-alt-square:before {
|
||||||
|
content: "\f1e1";
|
||||||
|
}
|
||||||
|
.icon-list:before {
|
||||||
|
content: "\f03a";
|
||||||
|
}
|
||||||
|
.icon-mail:before {
|
||||||
|
content: "\f0e0";
|
||||||
|
}
|
||||||
|
.icon-mail-o:before {
|
||||||
|
content: "\f003";
|
||||||
|
}
|
||||||
|
.icon-chevron-up:before {
|
||||||
|
content: "\f077";
|
||||||
|
}
|
||||||
|
.icon-thumb-tack:before {
|
||||||
|
content: "\f08d";
|
||||||
|
}
|
||||||
|
.icon-quote-left:before {
|
||||||
|
content: "\f10d";
|
||||||
|
}
|
||||||
|
.icon-quote-right:before {
|
||||||
|
content: "\f10e";
|
||||||
|
}
|
||||||
|
.icon-angle-left:before {
|
||||||
|
content: "\f104";
|
||||||
|
}
|
||||||
|
.icon-github-alt:before {
|
||||||
|
content: "\f113";
|
||||||
|
}
|
||||||
|
.icon-linkedin-square:before {
|
||||||
|
content: "\f08c";
|
||||||
|
}
|
||||||
|
.icon-linkedin:before {
|
||||||
|
content: "\f0e1";
|
||||||
|
}
|
||||||
@ -1,164 +0,0 @@
|
|||||||
@font-face {
|
|
||||||
font-family: "FontAwesome";
|
|
||||||
src: url("./fonts/fontawsome-thin.eot"); /* IE9 */
|
|
||||||
src: url("./fonts/fontawsome-thin.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
|
|
||||||
url("./fonts/fontawsome-thin.woff") format("woff"), /* chrome、firefox */
|
|
||||||
url("./fonts/fontawsome-thin.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
|
|
||||||
url("./fonts/fontawsome-thin.svg#uxfonteditor") format("svg"); /* iOS 4.1- */
|
|
||||||
}
|
|
||||||
.icon {
|
|
||||||
/* use !important to prevent issues with browser extensions that change fonts */
|
|
||||||
font-family: 'FontAwesome';
|
|
||||||
speak: none;
|
|
||||||
font-size:16px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: normal;
|
|
||||||
font-variant: normal;
|
|
||||||
text-transform: none;
|
|
||||||
line-height: 1;
|
|
||||||
|
|
||||||
/* Better Font Rendering =========== */
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
&.icon-search:before {
|
|
||||||
content: "\f002";
|
|
||||||
}
|
|
||||||
&.icon-check:before {
|
|
||||||
content: "\f00c";
|
|
||||||
}
|
|
||||||
&.icon-remove:before,
|
|
||||||
&.icon-close:before {
|
|
||||||
content: "\f00d";
|
|
||||||
}
|
|
||||||
&.icon-home:before {
|
|
||||||
content: "\f015";
|
|
||||||
}
|
|
||||||
&.icon-twitter-square:before {
|
|
||||||
content: "\f081";
|
|
||||||
}
|
|
||||||
&.icon-iconcebook-square:before {
|
|
||||||
content: "\f082";
|
|
||||||
}
|
|
||||||
&.icon-github-square:before {
|
|
||||||
content: "\f092";
|
|
||||||
}
|
|
||||||
&.icon-ellipsis-v:before {
|
|
||||||
content: "\f142";
|
|
||||||
}
|
|
||||||
&.icon-google-plus-square:before {
|
|
||||||
content: "\f0d4";
|
|
||||||
}
|
|
||||||
&.icon-twitter:before {
|
|
||||||
content: "\f099";
|
|
||||||
}
|
|
||||||
&.icon-facebook:before {
|
|
||||||
content: "\f09a";
|
|
||||||
}
|
|
||||||
&.icon-github:before {
|
|
||||||
content: "\f09b";
|
|
||||||
}
|
|
||||||
&.icon-feed:before,
|
|
||||||
&.icon-rss:before {
|
|
||||||
content: "\f09e";
|
|
||||||
}
|
|
||||||
&.icon-weibo:before {
|
|
||||||
content: "\f18a";
|
|
||||||
}
|
|
||||||
&.icon-google-plus:before {
|
|
||||||
content: "\f0d5";
|
|
||||||
}
|
|
||||||
&.icon-tag:before {
|
|
||||||
content: "\f02b";
|
|
||||||
}
|
|
||||||
&.icon-tags:before {
|
|
||||||
content: "\f02c";
|
|
||||||
}
|
|
||||||
&.icon-book:before {
|
|
||||||
content: "\f02d";
|
|
||||||
}
|
|
||||||
&.icon-calendar:before {
|
|
||||||
content: "\f073";
|
|
||||||
}
|
|
||||||
&.icon-file-text:before {
|
|
||||||
content: "\f15c";
|
|
||||||
}
|
|
||||||
&.icon-file-text-o:before {
|
|
||||||
content: "\f0f6";
|
|
||||||
}
|
|
||||||
&.icon-clock:before {
|
|
||||||
content: "\f017";
|
|
||||||
}
|
|
||||||
&.icon-eye:before {
|
|
||||||
content: "\f06e";
|
|
||||||
}
|
|
||||||
&.icon-camera:before {
|
|
||||||
content: "\f030";
|
|
||||||
}
|
|
||||||
&.icon-comment:before {
|
|
||||||
content: "\f075";
|
|
||||||
}
|
|
||||||
&.icon-comment-o:before {
|
|
||||||
content: "\f0e5";
|
|
||||||
}
|
|
||||||
&.icon-info:before {
|
|
||||||
content: "\f129";
|
|
||||||
}
|
|
||||||
&.icon-info-circle:before {
|
|
||||||
content: "\f05a";
|
|
||||||
}
|
|
||||||
&.icon-qq:before {
|
|
||||||
content: "\f1d6";
|
|
||||||
}
|
|
||||||
&.icon-wechat:before,
|
|
||||||
&.icon-weixin:before {
|
|
||||||
content: "\f1d7";
|
|
||||||
}
|
|
||||||
&.icon-spinner:before {
|
|
||||||
content: "\f110";
|
|
||||||
}
|
|
||||||
&.icon-arrow-circle-o-right:before {
|
|
||||||
content: "\f18e";
|
|
||||||
}
|
|
||||||
&.icon-arrow-circle-o-left:before {
|
|
||||||
content: "\f190";
|
|
||||||
}
|
|
||||||
&.icon-share-alt:before {
|
|
||||||
content: "\f1e0";
|
|
||||||
}
|
|
||||||
&.icon-share-alt-square:before {
|
|
||||||
content: "\f1e1";
|
|
||||||
}
|
|
||||||
&.icon-list:before {
|
|
||||||
content: "\f03a";
|
|
||||||
}
|
|
||||||
&.icon-mail:before {
|
|
||||||
content: "\f0e0";
|
|
||||||
}
|
|
||||||
&.icon-mail-o:before {
|
|
||||||
content: "\f003";
|
|
||||||
}
|
|
||||||
&.icon-chevron-up:before {
|
|
||||||
content: "\f077";
|
|
||||||
}
|
|
||||||
&.icon-thumb-tack:before {
|
|
||||||
content: "\f08d";
|
|
||||||
}
|
|
||||||
&.icon-quote-left:before {
|
|
||||||
content: "\f10d";
|
|
||||||
}
|
|
||||||
&.icon-quote-right:before {
|
|
||||||
content: "\f10e";
|
|
||||||
}
|
|
||||||
&.icon-angle-left:before {
|
|
||||||
content: "\f104";
|
|
||||||
}
|
|
||||||
&.icon-github-alt:before {
|
|
||||||
content: "\f113";
|
|
||||||
}
|
|
||||||
&.icon-linkedin-square:before {
|
|
||||||
content: "\f08c";
|
|
||||||
}
|
|
||||||
&.icon-linkedin:before {
|
|
||||||
content: "\f0e1";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -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;
|
|
||||||
}
|
|
||||||
17
themes/yilia/source-src/css/footer.scss
Normal file
17
themes/yilia/source-src/css/footer.scss
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,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 {
|
|
||||||
.anmLeftIn();
|
|
||||||
.article {
|
|
||||||
.trans();
|
|
||||||
// transition: opacity .3s ease-in, background-color .3s ease-in;
|
|
||||||
opacity: 0.5 !important;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.hide {
|
|
||||||
.anmLeftOut();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
58
themes/yilia/source-src/css/grid.scss
Normal file
58
themes/yilia/source-src/css/grid.scss
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 {
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -159,4 +159,4 @@ pre .number {
|
|||||||
pre .id,
|
pre .id,
|
||||||
pre .css ~ * .id {
|
pre .css ~ * .id {
|
||||||
color: #fd971f;
|
color: #fd971f;
|
||||||
}
|
}
|
||||||
@ -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;
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
120
themes/yilia/source-src/css/left.scss
Normal file
120
themes/yilia/source-src/css/left.scss
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;
|
||||||
|
@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,5 +1,4 @@
|
|||||||
@import './_core';
|
@import 'core';
|
||||||
@import './font-awsome.less';
|
|
||||||
@import './grid';
|
@import './grid';
|
||||||
@import './left';
|
@import './left';
|
||||||
@import './scroll';
|
@import './scroll';
|
||||||
@ -20,7 +19,7 @@
|
|||||||
@import './waifu';
|
@import './waifu';
|
||||||
@import './night';
|
@import './night';
|
||||||
@import './page/photo-wall';
|
@import './page/photo-wall';
|
||||||
@import './page/categories.less';
|
@import './page/categories.scss';
|
||||||
@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,15 +20,15 @@
|
|||||||
}
|
}
|
||||||
.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;
|
||||||
line-clamp: 2;
|
-webkit-line-clamp: 2;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
}
|
}
|
||||||
.header-subtitle {
|
.header-subtitle {
|
||||||
padding: 0 24px;
|
padding: 0 24px;
|
||||||
}
|
}
|
||||||
@ -3,7 +3,7 @@
|
|||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
#container {
|
#container {
|
||||||
background: @colorBodyBg;
|
background: $colorBodyBg;
|
||||||
}
|
}
|
||||||
.left-col {
|
.left-col {
|
||||||
display: none;
|
display: none;
|
||||||
@ -19,8 +19,8 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.cloud-tie-wrapper {
|
.cloud-tie-wrapper {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
min-height: 20px;
|
min-height: 20px;
|
||||||
}
|
}
|
||||||
.tools-col {
|
.tools-col {
|
||||||
left: -300px;
|
left: -300px;
|
||||||
@ -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;
|
||||||
}
|
}
|
||||||
@ -270,21 +270,21 @@
|
|||||||
z-index: 2;
|
z-index: 2;
|
||||||
color: #424242;
|
color: #424242;
|
||||||
}
|
}
|
||||||
.overlay{
|
.overlay{
|
||||||
height: 110px;
|
height: 110px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
background: #4d4d4d;
|
background: #4d4d4d;
|
||||||
}
|
}
|
||||||
#header{
|
#header{
|
||||||
padding: 10px 0 0 0;
|
padding: 10px 0 0 0;
|
||||||
.profilepic{
|
.profilepic{
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.js-mobile-btnctn {
|
.js-mobile-btnctn {
|
||||||
display: block;
|
display: block;
|
||||||
@ -360,4 +360,4 @@
|
|||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,183 +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() {
|
|
||||||
.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%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
149
themes/yilia/source-src/css/night.scss
Normal file
149
themes/yilia/source-src/css/night.scss
Normal file
@ -0,0 +1,149 @@
|
|||||||
|
/*
|
||||||
|
* 夜间模式配色
|
||||||
|
*/
|
||||||
|
$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%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
39
themes/yilia/source-src/css/page.scss
Normal file
39
themes/yilia/source-src/css/page.scss
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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;
|
||||||
.trans();
|
@extend %trans;
|
||||||
&:hover {
|
&:hover {
|
||||||
background: rgba(204, 204, 204, 0.3);
|
background:rgba(204, 204, 204, 0.3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -39,8 +39,8 @@
|
|||||||
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -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;
|
|
||||||
}
|
|
||||||
65
themes/yilia/source-src/css/scroll.scss
Normal file
65
themes/yilia/source-src/css/scroll.scss
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,5 +1,5 @@
|
|||||||
.share-wrap {
|
.share-wrap {
|
||||||
min-height: 20px;
|
min-height: 20px;
|
||||||
}
|
}
|
||||||
.share-btn {
|
.share-btn {
|
||||||
float: right;
|
float: right;
|
||||||
@ -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,14 +49,14 @@
|
|||||||
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;
|
||||||
p {
|
p {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.in {
|
&.in {
|
||||||
@ -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,12 +9,14 @@
|
|||||||
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;
|
||||||
zoom: 1;
|
*vertical-align:auto;
|
||||||
margin: 0 8px 15px 8px;
|
zoom:1;
|
||||||
transition: 0.3s;
|
*display:inline;
|
||||||
|
margin:0 8px 15px 8px;
|
||||||
|
transition:0.3s;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
@ -22,63 +24,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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/*
|
/*
|
||||||
@ -98,23 +100,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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/*
|
/*
|
||||||
@ -140,4 +142,4 @@
|
|||||||
}
|
}
|
||||||
}*/
|
}*/
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,120 +0,0 @@
|
|||||||
// 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
95
themes/yilia/source-src/css/tags.scss
Normal file
95
themes/yilia/source-src/css/tags.scss
Normal file
@ -0,0 +1,95 @@
|
|||||||
|
#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,17 +8,18 @@
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
.trans();
|
overflow-scrolling: touch;
|
||||||
|
@extend %trans;
|
||||||
&.show {
|
&.show {
|
||||||
.anmSmallLeftIn();
|
@extend %anmSmallLeftIn;
|
||||||
}
|
}
|
||||||
&.hide {
|
&.hide {
|
||||||
.anmSmallLeftOut();
|
@extend %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;
|
||||||
@ -32,24 +33,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;
|
||||||
.trans();
|
@extend %trans;
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
}
|
}
|
||||||
@ -62,8 +63,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;
|
||||||
@ -78,10 +79,10 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
.article-tag-list {
|
.article-tag-list {
|
||||||
.trans();
|
@extend %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;
|
||||||
}
|
}
|
||||||
@ -94,6 +95,7 @@
|
|||||||
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;
|
||||||
@ -107,15 +109,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;
|
||||||
.trans();
|
@extend %trans;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.search-time, .search-tag, .search-category {
|
.search-time, .search-tag, .search-category {
|
||||||
@ -131,7 +133,7 @@
|
|||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
.trans();
|
@extend %trans;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -143,7 +145,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%;
|
||||||
@ -151,18 +153,17 @@
|
|||||||
text-shadow: 1px 1px rgba(77, 77, 77, 0.45);
|
text-shadow: 1px 1px rgba(77, 77, 77, 0.45);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// 按钮开关
|
||||||
// 按钮开关相关 mixin
|
@mixin borderRadius($radius:20px) {
|
||||||
.borderRadius(@radius: 20px) {
|
border-radius: $radius;
|
||||||
border-radius: @radius;
|
border-top-left-radius: $radius;
|
||||||
border-top-left-radius: @radius;
|
border-top-right-radius: $radius;
|
||||||
border-top-right-radius: @radius;
|
border-bottom-left-radius: $radius;
|
||||||
border-bottom-left-radius: @radius;
|
border-bottom-right-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;
|
||||||
@ -170,18 +171,18 @@ 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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
input:disabled + .bui-switch {
|
input:disabled + .bui-switch {
|
||||||
background-color: #e8e8e8;
|
background-color: #e8e8e8;
|
||||||
border: solid 1px #dfdfdf;
|
border: solid 1px #dfdfdf;
|
||||||
&:before {
|
&:before {
|
||||||
background-color: #c1c1c1;
|
background-color: #c1c1c1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
input:disabled:checked + .bui-switch {
|
input:disabled:checked + .bui-switch {
|
||||||
@ -200,10 +201,13 @@ 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;
|
||||||
.borderRadius();
|
@include borderRadius();
|
||||||
background-clip: content-box;
|
background-clip: content-box;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
appearance: none;
|
-webkit-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 {
|
||||||
@ -212,28 +216,28 @@ label.bui-switch-label {
|
|||||||
height: 18px;
|
height: 18px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 1px;
|
left: 1px;
|
||||||
.borderRadius();
|
@include 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;
|
||||||
}
|
}
|
||||||
@ -244,7 +248,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;
|
||||||
@ -269,10 +273,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 {
|
||||||
@ -281,10 +285,10 @@ 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,17 +83,17 @@
|
|||||||
|
|
||||||
.tooltip-west .tooltip-content::before,
|
.tooltip-west .tooltip-content::before,
|
||||||
.tooltip-west .tooltip-content::after {
|
.tooltip-west .tooltip-content::after {
|
||||||
right: 99%;
|
right: 99%; /* because of FF, otherwise we have a gap */
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip-east .tooltip-content::before,
|
.tooltip-east .tooltip-content::before,
|
||||||
.tooltip-east .tooltip-content::after {
|
.tooltip-east .tooltip-content::after {
|
||||||
left: 99%;
|
left: 99%; /* because of FF, otherwise we have a gap */
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip-east .tooltip-content::after {
|
.tooltip-east .tooltip-content::after {
|
||||||
transform: scale3d(-1, 1, 1);
|
transform: scale3d(-1,1,1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip-top {
|
.tooltip-top {
|
||||||
@ -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 */
|
||||||
@ -193,4 +193,4 @@
|
|||||||
border-width: 10px;
|
border-width: 10px;
|
||||||
margin-left: -10px;
|
margin-left: -10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -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;
|
||||||
.trans();
|
@extend %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 {
|
||||||
@ -291,4 +291,4 @@
|
|||||||
0%, 100% {
|
0%, 100% {
|
||||||
transform: translate(0, 0) rotate(0);
|
transform: translate(0, 0) rotate(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,5 +1,6 @@
|
|||||||
// 样式
|
// 样式
|
||||||
import '../css/main.less'
|
import '../css/main.scss'
|
||||||
|
import '../css/font-awsome.css'
|
||||||
// 分享
|
// 分享
|
||||||
import Share from './share'
|
import Share from './share'
|
||||||
// 边缘
|
// 边缘
|
||||||
|
|||||||
@ -20,23 +20,23 @@ function tabActive() {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function getElementLeft(element) {
|
function getElementLeft(element) {
|
||||||
var actualLeft = element.offsetLeft
|
var actualLeft = element.offsetLeft
|
||||||
var current = element.offsetParent
|
var current = element.offsetParent
|
||||||
while (current !== null) {
|
while (current !== null) {
|
||||||
actualLeft += current.offsetLeft
|
actualLeft += current.offsetLeft
|
||||||
current = current.offsetParent
|
current = current.offsetParent
|
||||||
}
|
}
|
||||||
return actualLeft
|
return actualLeft
|
||||||
}
|
}
|
||||||
function getElementTop(element) {
|
function getElementTop(element) {
|
||||||
var actualTop = element.offsetTop
|
var actualTop = element.offsetTop
|
||||||
var current = element.offsetParent
|
var current = element.offsetParent
|
||||||
while (current !== null) {
|
while (current !== null) {
|
||||||
actualTop += current.offsetTop
|
actualTop += current.offsetTop
|
||||||
current = current.offsetParent
|
current = current.offsetParent
|
||||||
}
|
}
|
||||||
return actualTop
|
return actualTop
|
||||||
}
|
}
|
||||||
|
|
||||||
function scrollStop($dom, top, limit, zIndex, diff) {
|
function scrollStop($dom, top, limit, zIndex, diff) {
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import http from './request'
|
import axios from 'axios'
|
||||||
import PhotoSwipe from 'photoswipe'
|
import PhotoSwipe from 'photoswipe'
|
||||||
import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default'
|
import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default'
|
||||||
|
|
||||||
@ -27,10 +27,10 @@ function loadMoreItems(step) {
|
|||||||
scrollLock = true //加载过程中锁定滚动加载
|
scrollLock = true //加载过程中锁定滚动加载
|
||||||
loadTip.style.display = 'block'
|
loadTip.style.display = 'block'
|
||||||
// 滚动到底部时调用
|
// 滚动到底部时调用
|
||||||
http.get('/api/v2/common/photos', {params: {start:totalIndex, limit:step}}).then(res => {
|
axios.get(`${themeConfig.root}api/v1/common/photos`, {params: {start:totalIndex, limit:step}}).then(res => {
|
||||||
var itemContainer = document.createElement('div')
|
var itemContainer = document.createElement('div')
|
||||||
for(let index = 0 ; index<res.list.length && totalIndex<res.total ; index++,totalIndex++ ) {
|
for(let index = 0 ; index<res.data.data.length && totalIndex<res.data.total ; index++,totalIndex++ ) {
|
||||||
let imgHeight = null, imgFile = res.list[index],
|
let imgHeight = null, imgFile = res.data.data[index],
|
||||||
imgSrc = `${themeConfig.pictureCdn}/${imgFile.name}`,
|
imgSrc = `${themeConfig.pictureCdn}/${imgFile.name}`,
|
||||||
imgThumbnail = imgFile.thumbnail ? `${themeConfig.pictureCdn}/${imgFile.thumbnail}` : imgSrc
|
imgThumbnail = imgFile.thumbnail ? `${themeConfig.pictureCdn}/${imgFile.thumbnail}` : imgSrc
|
||||||
let wrapperWidth = photoWallWrapper.getBoundingClientRect().width
|
let wrapperWidth = photoWallWrapper.getBoundingClientRect().width
|
||||||
@ -69,7 +69,7 @@ function loadMoreItems(step) {
|
|||||||
itemContainer.classList.add('item-container')
|
itemContainer.classList.add('item-container')
|
||||||
// itemContainer.insertAdjacentHTML('beforeend', imgItems)
|
// itemContainer.insertAdjacentHTML('beforeend', imgItems)
|
||||||
photoWallWrapper.appendChild(itemContainer)
|
photoWallWrapper.appendChild(itemContainer)
|
||||||
if( totalIndex >= res.total ) {
|
if( totalIndex >= res.data.total ) {
|
||||||
loadTip.textContent = '没有更多图片啦/(ㄒoㄒ)/~~'
|
loadTip.textContent = '没有更多图片啦/(ㄒoㄒ)/~~'
|
||||||
} else {
|
} else {
|
||||||
setTimeout(()=>{
|
setTimeout(()=>{
|
||||||
|
|||||||
@ -1,25 +0,0 @@
|
|||||||
import axios from 'axios'
|
|
||||||
|
|
||||||
const http = axios.create({
|
|
||||||
timeout: 10000,
|
|
||||||
paramsSerializer: {
|
|
||||||
indexes: null
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
http.interceptors.response.use(res => {
|
|
||||||
const responseBody = res.data
|
|
||||||
// 统一响应格式处理
|
|
||||||
switch (responseBody.code) {
|
|
||||||
case 0:
|
|
||||||
// 成功，直接返回数据
|
|
||||||
return responseBody.data
|
|
||||||
case -1:
|
|
||||||
return Promise.reject(new Error(responseBody.message || '请求失败'))
|
|
||||||
default:
|
|
||||||
// 其他情况，兼容没有包装格式的响应
|
|
||||||
return res.data
|
|
||||||
}
|
|
||||||
}, err => Promise.reject(err))
|
|
||||||
|
|
||||||
export default http
|
|
||||||
@ -1,4 +1,4 @@
|
|||||||
import http from './request'
|
import axios from 'axios'
|
||||||
import Vue from 'vue/dist/vue.esm'
|
import Vue from 'vue/dist/vue.esm'
|
||||||
import waifuTips from '../config/waifu-tip.json'
|
import waifuTips from '../config/waifu-tip.json'
|
||||||
|
|
||||||
@ -99,15 +99,16 @@ const vm = new Vue({
|
|||||||
limit: this.fullTextSearch.limit,
|
limit: this.fullTextSearch.limit,
|
||||||
words: this.fullTextSearchWords
|
words: this.fullTextSearchWords
|
||||||
}
|
}
|
||||||
http.get('/api/v2/common/search', {params}).then(res => {
|
axios.get(window.themeConfig.root + 'api/v1/common/search', {params}).then(res => {
|
||||||
this.fullTextSearch.isLoading = false
|
this.fullTextSearch.isLoading = false
|
||||||
fullTextSearchTimer = null
|
fullTextSearchTimer = null
|
||||||
if(!Array.isArray(res.list) || !res.list.length) {
|
let result = res.data
|
||||||
|
if(!Array.isArray(result.data) || !result.data.length) {
|
||||||
this.fullTextSearch.tip = '未搜索到匹配文章'
|
this.fullTextSearch.tip = '未搜索到匹配文章'
|
||||||
} else {
|
} else {
|
||||||
this.fullTextSearchItems.push(...res.list)
|
this.fullTextSearchItems.push(...result.data)
|
||||||
}
|
}
|
||||||
this.fullTextSearch.hasMore = (res.total > this.fullTextSearch.pageNum * this.fullTextSearch.limit)
|
this.fullTextSearch.hasMore = (result.total > this.fullTextSearch.pageNum * this.fullTextSearch.limit)
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
this.fullTextSearch.tip = '加载失败, 请刷新重试'
|
this.fullTextSearch.tip = '加载失败, 请刷新重试'
|
||||||
this.fullTextSearch.isLoading = false
|
this.fullTextSearch.isLoading = false
|
||||||
@ -168,8 +169,8 @@ const vm = new Vue({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
fetch(window.themeConfig.root + 'content.json').then(res => res.json()).then(resJson=>{
|
axios.get(window.themeConfig.root + 'content.json').then((res)=>{
|
||||||
this.items = resJson
|
this.items = res.data
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
console.warn('加载文章列表失败')
|
console.warn('加载文章列表失败')
|
||||||
})
|
})
|
||||||
@ -224,7 +225,8 @@ function handleSearch(searchItems) {
|
|||||||
|
|
||||||
async function welcomeMessage() {
|
async function welcomeMessage() {
|
||||||
let now = new Date().getHours()
|
let now = new Date().getHours()
|
||||||
return http.get('/api/v2/common/config/waifu_tip').then(textTimes => {
|
return axios.get(`${window.themeConfig.root}api/v1/common/config/waifu_tip`).then(res => {
|
||||||
|
let textTimes = res.data
|
||||||
let text = null
|
let text = null
|
||||||
Array.prototype.sort.call(textTimes, (item1, item2) => {
|
Array.prototype.sort.call(textTimes, (item1, item2) => {
|
||||||
if(item1.start>item2.start) {
|
if(item1.start>item2.start) {
|
||||||
@ -271,8 +273,8 @@ const waifuTools = {
|
|||||||
},
|
},
|
||||||
'tools.chart'() {
|
'tools.chart'() {
|
||||||
// 一言
|
// 一言
|
||||||
http.get('/api/v2/common/hitokoto', { params: {format: 'json'} }).then(res => {
|
axios.get(`${window.themeConfig.root}api/v1/common/hitokoto?length=40&format=json`).then(res => {
|
||||||
this.showMessage(res.hitokoto + (res.from?` ——${res.from}`:''))
|
this.showMessage(res.data.hitokoto + (res.data.from?` ——${res.data.from}`:''))
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
'tools.search'() {
|
'tools.search'() {
|
||||||
|
|||||||
@ -46,8 +46,8 @@ module.exports = function(env, argv) {
|
|||||||
},
|
},
|
||||||
exclude: /node_modules/
|
exclude: /node_modules/
|
||||||
},{
|
},{
|
||||||
test: /\.less$/,
|
test: /\.(scss|sass)$/,
|
||||||
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
|
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
|
||||||
},{
|
},{
|
||||||
test: /\.css$/,
|
test: /\.css$/,
|
||||||
use: [MiniCssExtractPlugin.loader, 'css-loader']
|
use: [MiniCssExtractPlugin.loader, 'css-loader']
|
||||||
|
|||||||
@ -923,9 +923,8 @@ decimal.js@^10.3.1:
|
|||||||
integrity sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==
|
integrity sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==
|
||||||
|
|
||||||
decode-uri-component@^0.2.0:
|
decode-uri-component@^0.2.0:
|
||||||
version "0.2.2"
|
version "0.2.0"
|
||||||
resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz#e69dbe25d37941171dd540e024c444cd5188e1e9"
|
resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
|
||||||
integrity sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==
|
|
||||||
|
|
||||||
deep-extend@^0.6.0:
|
deep-extend@^0.6.0:
|
||||||
version "0.6.0"
|
version "0.6.0"
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user