├── screenshot.png
├── static
    ├── img
    │   ├── avatar.jpg
    │   ├── icon.png
    │   └── pattern-1.png
    ├── fantasy.js
    ├── kico.js
    ├── fantasy.css
    └── kico.css
├── .github
    └── ISSUE_TEMPLATE.md
├── bangumi.php
├── index.php
├── README.md
├── page.php
├── post.php
├── LICENSE
├── archive.php
├── 404.php
├── README-EN.md
├── header.php
├── fantasy.php
├── comments.php
├── functions.php
└── footer.php


/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Dreamer-Paul/Fantasy/HEAD/screenshot.png


--------------------------------------------------------------------------------
/static/img/avatar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Dreamer-Paul/Fantasy/HEAD/static/img/avatar.jpg


--------------------------------------------------------------------------------
/static/img/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Dreamer-Paul/Fantasy/HEAD/static/img/icon.png


--------------------------------------------------------------------------------
/static/img/pattern-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Dreamer-Paul/Fantasy/HEAD/static/img/pattern-1.png


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | ### 1. 该问题的重现步骤是什么？
 2 | 
 3 | ### 2. 正常情况下应该是什么结果，你看到的呢？
 4 | 
 5 | ### 3. 服务器的运行环境是？
 6 | 
 7 | - 操作系统版本：
 8 | - Apache/Nginx 版本：
 9 | - PHP 版本：
10 | - 主题版本：
11 | - 浏览器版本：
12 | 
13 | [//]: # (如有图片请附上截图)


--------------------------------------------------------------------------------
/bangumi.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | /**
 4 |  * 追番
 5 |  *
 6 |  * @package custom
 7 |  */
 8 | 
 9 | if (!defined('__TYPECHO_ROOT_DIR__')) exit;
10 | 
11 | $this->need('header.php');
12 | 
13 | ?>
14 | <main>
15 |     <div class="wrap min">
16 |         <section class="board">
17 |             <div class="post-title">
18 |                 <h2><?php $this->title() ?></h2>
19 |             </div>
20 |             <article class="post-content exclude-img">
21 |                 <div class="row">
22 |                     <?php Fantasy::bangumi($this); ?>
23 |                 </div>
24 |             </article>
25 |         </section>
26 |         <?php $this->need('comments.php'); ?>
27 |     </div>
28 | </main>
29 | 
30 | <?php $this->need('footer.php'); ?>


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | /**
 4 |  * 一个优美梦幻的动漫风 Typecho 博客主题。
 5 |  *
 6 |  * @package Fantasy Theme
 7 |  * @author Dreamer-Paul
 8 |  * @version 1.3
 9 |  * @link https://paugram.com
10 |  */
11 | 
12 | if (!defined('__TYPECHO_ROOT_DIR__')) exit;
13 | 
14 | $this->need('header.php');
15 | 
16 | ?>
17 | <main>
18 |     <div class="wrap min">
19 |         <section class="board">
20 | <?php while($this->next()): ?>
21 |             <div class="post-item">
22 |                 <time class="date"><?php $this->date(); ?></time>
23 |                 <h3 class="title"><a href="<?php $this->permalink() ?>"><?php $this->title() ?></a></h3>
24 |             </div>
25 | <?php endwhile; ?>
26 |         </section>
27 |         <?php $this->pageNav('', '', 3, '...', array('wrapTag' => 'section', 'itemTag' => 'span')); ?>
28 |     </div>
29 | </main>
30 | 
31 | <?php $this->need('footer.php'); ?>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![Typecho Theme Fantasy Render Poster - Web Based Version](https://i.imgur.com/BF8J5tG.jpg "Fantasy")
 2 | 
 3 | 
 4 | # Fantasy
 5 | 一个优美梦幻的动漫风 Typecho 博客主题。基于动漫 “Slow Start” 官网的设计风格编写而成。<a href="../master/README-EN.md">English Document</a>
 6 | 
 7 | ## 使用方法
 8 | 1. `Star` 本项目
 9 | 1. 从这里 [下载](https://github.com/Dreamer-Paul/Fantasy/archive/master.zip) 主题源码
10 | 1. 上传本主题，重命名为 `Fantasy` 并放置在 `usr/themes/` 目录下
11 | 1. 登录你的 Typecho 后台，选择启用主题即可食用~
12 | 
13 | ## 项目故事
14 | 详见我的博文：[Fantasy 动漫风主题](https://paugram.com/coding/fantasy-theme.html)
15 | 
16 | ## 开源协议
17 | 本项目采用 `MIT` 开源协议进行授权，并在其基础上须保留原作者的版权注释（包括但不限于 CSS、JS 等文件），当然能在页尾写上主题地址就是最好的啦~
18 | 
19 | 原创不易！如果喜欢本项目，请 `Star` 它以示对我的支持~
20 | 
21 | 同时欢迎前往 [我的博客](https://paugram.com/about.html#donate) 为我提供赞助，谢谢您！
22 | 
23 | ## 使用的开源项目
24 |  - [Kico Style](https://github.com/Dreamer-Paul/Kico-Style)
25 |  - [Font Awesome](https://github.com/FortAwesome/Font-Awesome)


--------------------------------------------------------------------------------
/page.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | if (!defined('__TYPECHO_ROOT_DIR__')) exit;
 4 | 
 5 | $this->need('header.php');
 6 | 
 7 | ?>
 8 | <main>
 9 |     <div class="wrap min">
10 |         <section class="board">
11 |             <div class="post-title">
12 |                 <h2><?php $this->title() ?></h2>
13 | <?php if($this->authorId == $this->user->uid): ?>
14 |                 <div class="post-meta">
15 |                     <time class="date"><?php $this->date(); ?></time>
16 |                     <span class="comments"><?php $this->commentsNum('%d 条评论'); ?></span>
17 |                     <span class="edit"><a href="<?php $this->options->adminUrl(); ?>write-page.php?cid=<?php echo $this->cid;?>" target="_blank">编辑</a></span>
18 |                 </div>
19 | <?php endif; ?>
20 |             </div>
21 |             <article class="post-content">
22 |                 <?php $this->content(); ?>
23 |             </article>
24 |         </section>
25 |         <?php $this->need('comments.php'); ?>
26 |     </div>
27 | </main>
28 | 
29 | <?php $this->need('footer.php'); ?>


--------------------------------------------------------------------------------
/post.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | if (!defined('__TYPECHO_ROOT_DIR__')) exit;
 4 | 
 5 | $this->need('header.php');
 6 | 
 7 | ?>
 8 | <main>
 9 |     <div class="wrap min">
10 |         <section class="board">
11 |             <div class="post-title">
12 |                 <h2><?php $this->title() ?></h2>
13 |                 <div class="post-meta">
14 |                     <time class="date"><?php $this->date(); ?></time>
15 |                     <span class="category"><?php $this->category('，'); ?></span>
16 |                     <span class="comments"><?php $this->commentsNum('%d 评论'); ?></span>
17 | <?php if($this->authorId == $this->user->uid): ?>
18 |                     <span class="edit"><a href="<?php $this->options->adminUrl(); ?>write-post.php?cid=<?php echo $this->cid;?>" target="_blank">编辑</a></span>
19 | <?php endif; ?>
20 |                 </div>
21 |             </div>
22 |             <article class="post-content">
23 |                 <?php $this->content(); ?>
24 |             </article>
25 |         </section>
26 |         <?php $this->need('comments.php'); ?>
27 |     </div>
28 | </main>
29 | 
30 | <?php $this->need('footer.php'); ?>


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (C) 2018 Dreamer-Paul
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/archive.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | if (!defined('__TYPECHO_ROOT_DIR__')) exit;
 4 | 
 5 | $this->need('header.php');
 6 | 
 7 | ?>
 8 | <main>
 9 |     <div class="wrap min">
10 |         <section class="board head">
11 |             <h3><?php $this->archiveTitle(array(
12 |                 'category'  =>  _t('<i class="fa fa-folder"></i>%s'),
13 |                 'search'    =>  _t('<i class="fa fa-search"></i>搜索结果：%s'),
14 |                 'tag'       =>  _t('<i class="fa fa-tags"></i>%s'),
15 |                 'author'    =>  _t('<i class="fa fa-user"></i>%s 的文章')
16 |             ), '', ''); ?></h3>
17 |         </section>
18 |         <section class="board">
19 | <?php if ($this->have()): ?>
20 | <?php while($this->next()): ?>
21 |             <div class="post-item">
22 |                 <time class="date"><?php $this->date(); ?></time>
23 |                 <h3 class="title"><a href="<?php $this->permalink() ?>"><?php $this->title() ?></a></h3>
24 |             </div>
25 | <?php endwhile; ?>
26 | <?php else: ?>
27 |             <p>没有找到结果 (QWQ)</p>
28 | <?php endif; ?>
29 |         </section>
30 |         <?php $this->pageNav('', ''); ?>
31 |     </div>
32 | </main>
33 | 
34 | <?php $this->need('footer.php'); ?>


--------------------------------------------------------------------------------
/404.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | if (!defined('__TYPECHO_ROOT_DIR__')) exit;
 4 | 
 5 | $this->need('header.php');
 6 | 
 7 | ?>
 8 | <main>
 9 |     <div class="wrap min">
10 |         <section class="board error-page">
11 | 			<div class="post-title">
12 |                 <h2>404</h2>
13 | 				<p>你正在寻找的文章已经不见了，不妨看看其他文章？</p>
14 |             </div>
15 | 			<ul class="archives-list">
16 | <?php
17 | 
18 | function theme_random_posts(){
19 | 	$defaults = array(
20 | 		'xformat' => '<li class="archive-post"><a class="archive-post-title" href="{permalink}">{title}</a><span class="date">{date}</span></li>'
21 | 	);
22 | 
23 | 	$db = Typecho_Db::get();
24 | 	$sql = $db -> select() -> from('table.contents')
25 | 		-> where('status = ?','publish')
26 | 		-> where('type = ?', 'post')
27 | 		-> limit(6)
28 | 		-> order('RAND()');
29 | 	$result = $db->fetchAll($sql);
30 | 
31 | 	foreach($result as $value){
32 | 		$value = Typecho_Widget::widget('Widget_Abstract_Contents') -> filter($value);
33 | 		echo str_replace(array('{permalink}', '{title}', '{date}'), array($value['permalink'], $value['title'], date("Y-m-d", $value['created'])), $defaults['xformat']);
34 | 	}
35 | }
36 | 
37 | theme_random_posts();
38 | 
39 | ?>
40 | 			</ul>
41 |         </section>
42 |     </div>
43 | </main>
44 | 
45 | <?php $this->need('footer.php'); ?>


--------------------------------------------------------------------------------
/README-EN.md:
--------------------------------------------------------------------------------
 1 | ![Typecho Theme Fantasy Render Poster - Web Based Version](https://i.imgur.com/BF8J5tG.jpg "Fantasy")
 2 | 
 3 | 
 4 | # Fantasy
 5 | A Gorgeous, Fantastic Anime-Style Typecho Blog Theme. Based on The Official Website of Anime "Slow Start". <a href="README.md">中文文档</a>
 6 | 
 7 | ## How to Use It
 8 | 1. `Star` this project.
 9 | 1. Download the theme source code from [here](https://github.com/Dreamer-Paul/Fantasy/archive/master.zip).
10 | 1. Upload the theme to your server，rename it to `Fantasy` then put it under the  `usr/themes/` content.
11 | 1. Log in to your Typecho dashboard，select to enable the theme. Then enjoy it!
12 | 
13 | ## Project Story
14 | Please see my blog post for detail: [Fantasy Anime-Style Theme](https://paugram.com/coding/fantasy-theme.html)
15 | 
16 | ## Opensource License
17 | The project is released and authorise the `MIT` lisence. Base on that, you will still need to keep the original authors' copyright code comments (include but not exclude CSS and JS, etc.). It will be best if you could include the theme's URL at your footer!
18 | 
19 | It isn't easy to develop this project! If you like it, please support me by `Star` it .
20 | 
21 | At the same time welcome to [my blog](https://paugram.com/about.html#donate) and donate me, thank you!
22 | 
23 | ## Credit
24 | ### Used Opensource Project
25 |  - [Kico Style](https://github.com/Dreamer-Paul/Kico-Style)
26 |  - [Font Awesome](https://github.com/FortAwesome/Font-Awesome)


--------------------------------------------------------------------------------
/header.php:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-cmn-hans">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title><?php $this -> archiveTitle(array(
 6 |             'category'  =>  _t('%s'),
 7 |             'search'    =>  _t('含关键词 %s 的文章'),
 8 |             'tag'       =>  _t('标签 %s 下的文章'),
 9 |             'author'    =>  _t('%s 发布的文章')
10 |         ), '', ' - '); $this -> options -> title(); ?></title>
11 | <?php if($this -> options -> favicon): ?>
12 |     <link rel="icon" href="<?php $this -> options -> favicon() ?>" sizes="192x192"/>
13 | <?php else: ?>
14 |     <link rel="icon" href="<?php $this -> options -> themeUrl('static/img/icon.png'); ?>" sizes="192x192"/>
15 | <?php endif; ?>
16 |     <link href="<?php $this -> options -> themeUrl('static/kico.css'); ?>" rel="stylesheet" type="text/css"/>
17 |     <link href="<?php $this -> options -> themeUrl('static/fantasy.css'); ?>" rel="stylesheet" type="text/css"/>
18 |     <link href="https://fastly.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
19 |     <meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1"/>
20 |     <?php $this->header('generator=&template=&pingback=&xmlrpc=&wlw='); ?>
21 | <?php if($this -> options -> background): ?>
22 |     <style>body{ background: url(<?php $this -> options -> background() ?>) center/cover fixed }</style>
23 | <?php endif; ?>
24 | <?php if($this -> options -> custom_css): ?>
25 |     <style><?php $this -> options -> custom_css() ?></style>
26 | <?php endif; ?>
27 | </head>
28 | <body>
29 | <aside>
30 |     <nav class="side-nav">
31 |         <a href="<?php $this -> options -> siteUrl() ?>">首页</a>
32 |         <?php $this -> widget('Widget_Contents_Page_List') -> parse('<a href="{permalink}">{title}</a>'); ?>
33 | <?php if($this -> user -> hasLogin()): ?>
34 |         <a href="<?php $this -> options -> adminUrl() ?>" target="_blank">进入后台</a>
35 | <?php endif; ?>
36 |     </nav>
37 |     <nav class="side-action">
38 |         <div class="search-btn"></div>
39 |     </nav>
40 |     <div class="side-window">
41 |         <div class="side-wrap">
42 |             <form class="search-form" method="post">
43 |                 <input type="text" name="s" placeholder="搜索什么？">
44 |             </form>
45 |             <div class="side-category color-bar">
46 |                 <?php $this -> widget('Widget_Metas_Category_List') -> parse('<a href="{permalink}">{name}</a>'); ?>
47 |             </div>
48 |         </div>
49 |     </div>
50 | </aside>
51 | <header>
52 |     <div class="toggle"></div>
53 |     <div class="wrap min">
54 |         <h1 class="headline"><span><?php $this->options->title() ?></span></h1>
55 | <?php if ($this->options->home_social): ?>
56 |         <div class="head-social">
57 | <?php $this->options->home_social() ?>
58 |         </div>
59 | <?php endif; ?>
60 |     </div>
61 | </header>


--------------------------------------------------------------------------------
/fantasy.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | class Fantasy {
 4 |     // HTTPS 转换
 5 |     static function convert_https($url){
 6 |         return preg_replace("/^http:/", "https:", $url);
 7 |     }
 8 | 
 9 |     // 追番
10 |     static function bangumi($t){
11 |         $uid = Typecho_Widget::widget('Widget_Options') -> bgm_user;
12 |         $uid = $uid ? $uid : 433599;
13 |         $bgm = file_get_contents("https://api.bgm.tv/user/" . $uid . "/collection?cat=playing");
14 |         $bgm = json_decode($bgm);
15 | 
16 |         if($bgm){
17 |             foreach($bgm as $item){
18 |                 $bid  = $item -> subject -> id;
19 |                 $name = $item -> subject -> name_cn ? $item -> subject -> name_cn : $item -> subject -> name;
20 |                 $seem = $item -> ep_status;
21 |                 $image = self::convert_https($item -> subject -> images -> large);
22 |                 $total = property_exists($item -> subject, "eps_count") ? $item -> subject -> eps_count : $seem;
23 |                 $width = (int)$seem / $total * 100;
24 | ?>
25 |                     <div class="col-6 col-m-4">
26 |                         <a class="bangumi-item" target="_blank" href="https://bgm.tv/subject/<?php echo $bid ?>">
27 |                             <div class="bangumi-img" style="background-image: url(<?php echo $image ?>)">
28 |                                 <div class="bangumi-status">
29 |                                     <div class="bangumi-status-bar" style="width: <?php echo $width ?>%"></div>
30 |                                     <p>进度：<?php echo $seem ?> / <?php echo $total ?></p>
31 |                                 </div>
32 |                             </div>
33 |                             <h3><?php echo $name ?></h3>
34 |                         </a>
35 |                     </div>
36 | <?php
37 |             }
38 |         }
39 |         else{
40 | ?>
41 |                     <div class="col-12">
42 |                         <p>追番数据获取失败，请检查如下细节：</p>
43 |                         <ul>
44 |                             <li>用户 ID 是否正确？</li>
45 |                             <li>该用户是否在“在看”添加了番剧？</li>
46 |                             <li>服务器能否正常连接 <code>api.bgm.tv</code> ？</li>
47 |                         </ul>
48 |                     </div>
49 | <?php
50 |         }
51 | 
52 |         unset($bid, $name, $seem, $total, $img, $width);
53 |     }
54 | 
55 |     // 时间转换
56 |     static function tran_time($ts){
57 |         $dur = time() - $ts;
58 | 
59 |         if($dur < 0){
60 |             return $ts;
61 |         }
62 |         else if($dur < 60){
63 |             return $dur . ' 秒前';
64 |         }
65 |         else if($dur < 3600){
66 |             return floor($dur / 60) . ' 分钟前';
67 |         }
68 |         else if($dur < 86400){
69 |             return floor($dur / 3600) . ' 小时前';
70 |         }
71 |         else if($dur < 604800){ // 七天内
72 |             return floor($dur / 86400) . ' 天前';
73 |         }
74 |         else if($dur < 2592000){ // 一个月内
75 |             return floor($dur / 604800) . " 周前";
76 |         }
77 | 
78 |         else{
79 |             return date("y.m.d", $ts);
80 |         }
81 |     }
82 | 
83 |     // 上次登录
84 |     static function get_last_login(){
85 |         $db = Typecho_Db::get();
86 |         $query = $db -> select() -> from('table.users');
87 |         $logged = $db -> fetchRow($query)["logged"];
88 | 
89 |         return self::tran_time($logged);
90 |     }
91 | }


--------------------------------------------------------------------------------
/comments.php:
--------------------------------------------------------------------------------
 1 | <?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
 2 | <?php function threadedComments($comments, $options) {
 3 |     $commentClass = '';
 4 |     if ($comments->authorId) {
 5 |         if($comments->authorId == $comments->ownerId){
 6 |             $commentClass .= ' by-author';
 7 |         }
 8 |     }
 9 | 
10 |     $commentLevelClass = $comments->levels > 0 ? ' comment-child' : ' comment-parent';
11 | ?>
12 | 
13 |     <div class="comment-item<?php echo $commentClass ?>" id="<?php $comments->theId(); ?>">
14 |         <?php $comments -> gravatar('150', 'wavatar'); ?>
15 |         <div class="content">
16 |             <div class="comment-meta">
17 |                 <span class="comment-author"><?php $comments->author(); ?></span>
18 |                 <time class="comment-time"><?php $comments->date(); ?></time>
19 |                 <span class="comment-reply"><?php $comments->reply(); ?></span>
20 |             </div>
21 |             <?php $comments->content(); ?>
22 |         </div>
23 | <?php if ($comments->children) { ?>
24 |         <div class="comment-children">
25 |             <?php $comments->threadedComments($options); ?>
26 |         </div>
27 | <?php } ?>
28 |     </div>
29 | <?php } ?>
30 | 
31 | <?php if($this->allow('comment')): ?>
32 |         <section class="board">
33 |             <h3>参与讨论</h3>
34 |             <?php $this->comments()->to($comments); ?>
35 |             <div id="<?php $this->respondId(); ?>">
36 |                 <form class="comment-form" id="<?php $this->respondId(); ?>" action="<?php $this->commentUrl() ?>" id="comment-form" role="form">
37 |                     <div class="cancel-reply"><?php $comments->cancelReply(); ?></div>
38 |                     <figure class="comment-avatar">
39 | <?php if($this->user->hasLogin()): ?>
40 |                         <img src="<?php echo Typecho_Common::gravatarUrl($this->user->mail, 150, 'X', 'mm', true) ?>"/>
41 | <?php else: ?>
42 |                         <img src="<?php $this->options->themeUrl('static/img/avatar.jpg'); ?>"/>
43 | <?php endif; ?>
44 |                     </figure>
45 |                     <fieldset>
46 |                         <textarea rows="2" name="text" placeholder="说下感想吧！" required><?php $this->remember('text'); ?></textarea>
47 | <?php if(!$this->user->hasLogin()): ?>
48 |                         <input type="text" name="author" placeholder="昵称 *：" value="<?php $this->remember('author'); ?>" required="">
49 |                         <input type="email" name="mail" placeholder="电邮 *：" value="<?php $this->remember('mail'); ?>"<?php if ($this->options->commentsRequireMail): ?> required<?php endif; ?>>
50 |                         <input type="url" name="url" placeholder="http://" value="<?php $this->remember('url'); ?>"<?php if ($this->options->commentsRequireURL): ?> required<?php endif; ?>>
51 | <?php else: ?>
52 |                         <p class="logined"><a href="<?php $this->options->profileUrl(); ?>"><?php $this->user->screenName(); ?></a>，欢迎回来！不是你？<a href="<?php $this->options->logoutUrl(); ?>" title="登出">登出</a></p>
53 | <?php endif; ?>
54 |                         <button class="btn submit" type="submit"></button>
55 |                     </fieldset>
56 |                 </form>
57 |             </div>
58 | <?php if ($comments->have()): ?>
59 |         <?php $comments->listComments(array('before' => '<div class="comment-list">', 'after' => '</div>')); ?>
60 |         <?php $comments->pageNav('', '', 3, '...', array('wrapTag' => 'section', 'itemTag' => 'span')); ?>
61 | <?php else: ?>
62 |     <p class="no-comment">还没有评论呢！</p>
63 | <?php endif; ?>
64 | <?php endif; ?>
65 |         </section>


--------------------------------------------------------------------------------
/functions.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | if (!defined('__TYPECHO_ROOT_DIR__')) exit;
 3 | 
 4 | require_once("fantasy.php");
 5 | 
 6 | function themeConfig($form) {
 7 | 
 8 |     // 插件信息与更新检测
 9 |     function paul_update($name, $version){
10 |         echo "<style>.paul-info{text-align:center; margin:1em 0;} .paul-info > *{margin:0 0 1rem} .buttons a{background:#467b96; color:#fff; border-radius:4px; padding:.5em .75em; display:inline-block}</style>";
11 |         echo "<div class='paul-info'>";
12 |         echo "<h2>Fantasy 主题 (".$version.")</h2>";
13 |         echo "<p>By: <a href='https://github.com/Dreamer-Paul'>Dreamer-Paul</a></p>";
14 |         echo "<p class='buttons'><a href='https://paugram.com/coding/fantasy-theme.html'>项目介绍</a>
15 |               <a href='https://github.com/Dreamer-Paul/Fantasy/releases'>更新日志</a></p>";
16 | 
17 |         $update = file_get_contents("https://api.paugram.com/update/?name=".$name."&current=".$version."&site=".$_SERVER['HTTP_HOST']);
18 |         $update = json_decode($update, true);
19 | 
20 |         if(isset($update['text'])){echo "<p>".$update['text']."</p>"; };
21 |         if(isset($update['message'])){echo "<p>".$update['message']."</p>"; };
22 | 
23 |         echo "</div>";
24 |     }
25 |     paul_update("Fantasy", "1.3");
26 | 
27 |     // 自定义站点图标
28 |     $favicon = new Typecho_Widget_Helper_Form_Element_Text('favicon', NULL, NULL, _t('站点图标'), _t('在这里填入一张 png 图片地址（<a>192x192px</a>），不填则使用默认图标'));
29 |     $form -> addInput($favicon);
30 | 
31 |     // 自定义背景图
32 |     $background = new Typecho_Widget_Helper_Form_Element_Text('background', NULL, NULL, _t('站点背景'), _t('在这里填入一张图片地址，不填则显示默认背景'));
33 |     $form->addInput($background);
34 | 
35 |     // 自定义社交链接
36 |     $home_social = new Typecho_Widget_Helper_Form_Element_Textarea('home_social', NULL, NULL, _t('自定义社交链接'), _t('在这里填入你的自定义社交链接，不填则不输出。（格式请看<a href="https://github.com/Dreamer-Paul/Single/releases/tag/1.1" target="_blank">帮助信息</a>）'));
37 |     $form -> addInput($home_social);
38 | 
39 |     // 自定义样式表
40 |     $custom_css = new Typecho_Widget_Helper_Form_Element_Textarea('custom_css', NULL, NULL, _t('自定义样式表'), _t('在这里填入你的自定义样式表，不填则不输出'));
41 |     $form -> addInput($custom_css);
42 | 
43 |     // 自定义统计代码
44 |     $custom_script = new Typecho_Widget_Helper_Form_Element_Textarea('custom_script', NULL, NULL, _t('统计代码'), _t('在这里填入你的统计代码，不填则不输出。需要 <a>&lt;script&gt;</a> 标签'));
45 |     $form->addInput($custom_script);
46 | 
47 |     // 建站时间
48 |     $site_created = new Typecho_Widget_Helper_Form_Element_Text('site_created', NULL, '2018/07/09', _t('建站日期'), _t('在这里填入一个建站日期（格式：<a>2018/07/09</a>），不填则无法正常输出运行时间'));
49 |     $form -> addInput($site_created);
50 | 
51 |     // 备案号
52 |     $verify_num = new Typecho_Widget_Helper_Form_Element_Text('verify_num', NULL, '', _t('备案号'), _t('在这里填入一个备案号，不填则无法输出'));
53 |     $form -> addInput($verify_num);
54 | 
55 |     // 追番用户 ID
56 |     $bgm_user = new Typecho_Widget_Helper_Form_Element_Text('bgm_user', NULL, '', _t('追番用户 ID'), _t('在这里填入一个 <a>bangumi.tv</a> 的用户 ID，用于追番页面的输出，不填则输出作者的追番记录'));
57 |     $form -> addInput($bgm_user);
58 | 
59 |     // 页尾展示内容
60 |     $footer_content = new Typecho_Widget_Helper_Form_Element_Checkbox('footer_content',
61 |         array(
62 |             'verify' => _t('备案号'),
63 |             'link' => _t('社交链接'),
64 |             'time' => _t('运行时间'),
65 |             'hitokoto' => _t('随机一言')
66 |         ),
67 |         array('time', 'hitokoto'), _t('页尾展示内容'));
68 |     $form -> addInput($footer_content -> multiMode());
69 | }
70 | 
71 | function themeInit($archive){
72 | 
73 |     // AJAX 头像
74 |     if(isset($_GET['action']) && $_GET['action'] == 'gravatar' && $_GET['email']){
75 |         $host = 'https://secure.gravatar.com/avatar/';
76 |         $email = strtolower($_GET['email']);
77 |         $hash = md5($email);
78 | 
79 |         $reply = $host . $hash . '?d=robohash';
80 | 
81 |         header("location: $reply");
82 |         die();
83 |     }
84 | }


--------------------------------------------------------------------------------
/footer.php:
--------------------------------------------------------------------------------
 1 | <footer>
 2 |     <div class="wrap mid">
 3 |         <section class="foot-action">
 4 |             <div class="to-top"></div>
 5 |         </section>
 6 |         <section class="foot-widget">
 7 |             <div class="row">
 8 |                 <div class="col-m-3">
 9 |                     <h3>最新文章：</h3>
10 |                     <ul class="clear">
11 |                         <?php $this -> widget('Widget_Contents_Post_Recent', 'pageSize=6') -> parse('<li><a href="{permalink}" target="_blank">{title}</a></li>'); ?>
12 |                     </ul>
13 |                 </div>
14 |                 <div class="col-m-3">
15 |                     <h3>时光机：</h3>
16 |                     <ul class="clear">
17 |                         <?php $this -> widget('Widget_Contents_Post_Date', 'type=month&format=Y 年 m 月&limit=6') -> parse('<li><a href="{permalink}" rel="nofollow" target="_blank">{date}</a></li>'); ?>
18 |                     </ul>
19 |                 </div>
20 |                 <div class="col-m-3">
21 |                     <h3>最近评论：</h3>
22 |                     <div class="foot-comments">
23 | <?php $this -> widget('Widget_Comments_Recent', 'pageSize=5') -> to($comments); ?>
24 |                         <?php while($comments -> next()): ?>
25 |                             <a href="<?php $comments -> permalink(); ?>" rel="nofollow" target="_blank"><img src="<?php echo Typecho_Common::gravatarUrl($comments -> mail, 32, 'X', 'wavatar', $this -> request -> isSecure()) ?>"/><?php $comments -> author(false); ?>：<?php $comments -> excerpt(10, '...'); ?></a>
26 |                         <?php endwhile; ?>
27 |                     </div>
28 |                 </div>
29 |                 <div class="col-m-3">
30 |                     <h3>站点信息：</h3>
31 |                     <ul class="clear">
32 | <?php Typecho_Widget::widget('Widget_Stat')->to($stat); ?>
33 |                         <li>文章：<?php $stat->publishedPostsNum() ?> 篇</li>
34 |                         <li>分类：<?php $stat->categoriesNum() ?> 个</li>
35 |                         <li>评论：<?php $stat->publishedCommentsNum() ?> 条</li>
36 |                         <li>页面：<?php $stat->publishedPagesNum() ?> 个</li>
37 |                         <li>上次更新：<?php echo Fantasy::tran_time($this -> modified) ?></li>
38 |                         <li>上次登录：<?php echo Fantasy::get_last_login() ?></li>
39 |                     </ul>
40 |                 </div>
41 |             </div>
42 |         </section>
43 |         <section class="foot-copyright">
44 |             <div class="row">
45 |                 <div class="col-m-6 left bottom to-center">
46 | <?php if(in_array('verify', $this -> options -> footer_content) && $this -> options -> verify_num): ?>
47 |                     <p><a href="http://www.miitbeian.gov.cn" rel="nofollow" target="_blank"><?php $this -> options -> verify_num() ?></a></p>
48 | <?php endif; ?>
49 | <?php if(in_array('link', $this -> options -> footer_content) && $this -> options -> home_social): ?>
50 |                     <p class="foot-social"><?php $this -> options -> home_social() ?></p>
51 | <?php endif; ?>
52 | <?php if(in_array('time', $this -> options -> footer_content)): ?>
53 |                     <p class="foot-date">站点已萌萌哒存活了 <a>?</a> 天 <a>?</a> 小时 <a>?</a> 分 <a>?</a> 秒</p>
54 | <?php endif; ?>
55 | <?php if(in_array('hitokoto', $this -> options -> footer_content)): ?>
56 |                     <p class="foot-hitokoto">重要的是无论我们选择哪条路，都要担负起选择的责任。</p>
57 | <?php endif; ?>
58 |                 </div>
59 |                 <div class="col-m-6 right bottom to-center">
60 |                     <p>&copy; <?php echo date('Y') ?> <a href="<?php $this -> options -> siteUrl() ?>"><?php $this->options->title(); ?></a>. 版权所有.</p>
61 |                     <p>Published With <a href="http://typecho.org" target="_blank" rel="nofollow">Typecho.</a> Theme By <a href="https://github.com/Dreamer-Paul/Fantasy" target="_blank" rel="nofollow">Fantasy</a>.</p>
62 |                 </div>
63 |             </div>
64 |         </section>
65 |     </div>
66 | </footer>
67 | 
68 | <script src="<?php $this->options->themeUrl('static/kico.js'); ?>"></script>
69 | <script src="<?php $this->options->themeUrl('static/fantasy.js'); ?>"></script>
70 | <script>var fantasy = new Fantasy_Theme({created: <?php if($this -> options -> site_created): ?>"<?php echo $this -> options -> site_created; ?>"<?php else: ?>false<?php endif; ?>});</script>
71 | <?php $this -> options -> custom_script() ?>
72 | <?php $this -> footer() ?>
73 | 
74 | </body>
75 | </html>


--------------------------------------------------------------------------------
/static/fantasy.js:
--------------------------------------------------------------------------------
  1 | /* ----
  2 | 
  3 | # Fantasy Theme
  4 | # By: Dreamer-Paul
  5 | # Last Update: 2018.12.1
  6 | 
  7 | 一个优美梦幻的动漫风 Typecho 博客主题。
  8 | 
  9 | 本代码为奇趣保罗原创，并遵守 MIT 开源协议。欢迎访问我的博客：https://paugram.com
 10 | 
 11 | ---- */
 12 | 
 13 | var Fantasy_Theme = function (config) {
 14 |     var that = this;
 15 |     var element = {
 16 |         toggle: ks.select("header .toggle"),
 17 |         search: {
 18 |             btn: ks.select(".search-btn"),
 19 |             window: ks.select(".side-window"),
 20 |             input: ks.select(".side-window input")
 21 |         },
 22 |         content: ks.select(".post-content"),
 23 |         comment: {
 24 |             form: ks.select(".comment-form"),
 25 |             list: ks.select(".comment-list"),
 26 |             mail: document.getElementsByName("mail")[0],
 27 |             avatar: ks.select(".comment-avatar img")
 28 |         },
 29 |         top: ks.select(".to-top"),
 30 |         date: ks.select(".foot-date"),
 31 |         hitokoto: ks.select(".foot-hitokoto")
 32 |     };
 33 | 
 34 |     // 菜单按钮
 35 |     this.header = function () {
 36 |         element.toggle.onclick = function () {
 37 |             ks.select("aside").classList.toggle("active");
 38 |         };
 39 | 
 40 |         element.search.btn.onclick = function () {
 41 |             element.search.input.focus();
 42 |             element.search.window.classList.toggle("active");
 43 |         };
 44 |     };
 45 |     this.header();
 46 | 
 47 |     // 自动添加外链
 48 |     this.links = function (selector) {
 49 |         var links = selector.getElementsByTagName("a");
 50 | 
 51 |         for(var i = 0; i < links.length; i++){
 52 |             links[i].target = "_blank";
 53 |         }
 54 |     };
 55 | 
 56 |     if(element.content){
 57 |         this.links(element.content);
 58 |     }
 59 |     if(element.comment.list){
 60 |         this.links(element.comment.list);
 61 |     }
 62 | 
 63 |     // 评论
 64 |     this.comments = function () {
 65 |         element.comment.mail.onblur = function (event) {
 66 |             var reg = /@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
 67 | 
 68 |             if(reg.test(event.target.value)){
 69 |                 element.comment.avatar.src = "?action=gravatar&email=" + event.target.value;
 70 |             }
 71 |         }
 72 |     };
 73 | 
 74 |     // 评论
 75 |     if(element.comment.form && element.comment.mail){
 76 |         this.comments();
 77 |     }
 78 | 
 79 |     // 返回头部
 80 |     this.to_top = function () {
 81 |         element.top.onclick = ks.scrollTop;
 82 | 
 83 |         window.onscroll = function () {
 84 |             var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
 85 |             scroll >= window.innerHeight ? element.top.classList.add("active") : element.top.classList.remove("active");
 86 |         }
 87 |     };
 88 |     this.to_top();
 89 | 
 90 |     // 运行时间
 91 |     this.foot_date = function (date) {
 92 |         function run_date(date){
 93 |             var created = Date.parse(date);
 94 |             var now = new Date().getTime();
 95 |             var ran = now - created;
 96 | 
 97 |             var day = ran / 86400000;
 98 |             var day_c = Math.floor(day);
 99 | 
100 |             var hour = 24 * (day - day_c);
101 |             var hour_c = Math.floor(hour);
102 | 
103 |             var min = 60 * (hour - hour_c);
104 |             var min_c = Math.floor(min);
105 | 
106 |             var sec = Math.floor(60 * (min - min_c));
107 | 
108 |             return "站点已萌萌哒存活了 <a>" + day_c + "</a> 天 <a>" + hour_c + "</a> 小时 <a>" + min_c + "</a> 分 <a>" + sec + "</a> 秒";
109 |         }
110 | 
111 |         setInterval(function () {
112 |             element.date.innerHTML = run_date(date);
113 |         }, 1000);
114 |     };
115 | 
116 |     if(element.date && config.created){
117 |         this.foot_date(config.created);
118 |     }
119 | 
120 |     // 一言
121 |     this.hitokoto = function () {
122 |         ks.ajax({
123 |             method: "GET",
124 |             url: "https://v1.hitokoto.cn",
125 |             success: function (req){
126 |                 element.hitokoto.innerText = JSON.parse(req.response)["hitokoto"];
127 |             },
128 |             failed: function (req){
129 |                 ks.notice("请求一言失败！", {color: "red"});
130 |             }
131 |         });
132 |     };
133 | 
134 |     if(element.hitokoto){
135 |         this.hitokoto();
136 |     }
137 | };
138 | 
139 | // 图片缩放
140 | ks.image(".post-content:not(.exclude-image) img");
141 | 
142 | // 请保留版权说明
143 | if (window.console && window.console.log) {
144 |     console.log("%c Fantasy %c https://paugram.com ","color: #fff; margin: 1em 0; padding: 5px 0; background: #ffa9be;","margin: 1em 0; padding: 5px 0; background: #efefef;");
145 | }


--------------------------------------------------------------------------------
/static/kico.js:
--------------------------------------------------------------------------------
  1 | /* ----
  2 | 
  3 | # Kico Style 2.1
  4 | # By: Dreamer-Paul
  5 | # Last Update: 2018.12.25
  6 | 
  7 | 一个简洁、有趣的开源响应式框架，仅包含基础样式，需按照一定规则进行二次开发。
  8 | 
  9 | 欢迎你加入缤奇，和我们一起改变世界。
 10 | 本代码为奇趣保罗原创，并遵守 MIT 开源协议。欢迎访问我的博客：https://paugram.com
 11 | 
 12 | ---- */
 13 | 
 14 | function Kico_Style () {
 15 |     var kico = {};
 16 |     var that = this;
 17 | 
 18 |     // 批量执行
 19 |     this.forEach = function (data, fn) {
 20 |         for(var i = 0; i < data.length; i++){
 21 |             fn(data[i], i, data);
 22 |         }
 23 |     };
 24 | 
 25 |     // 对象创建
 26 |     this.create = function (tag, prop) {
 27 |         var obj = document.createElement(tag);
 28 | 
 29 |         if(prop){
 30 |             if(prop.id)    obj.id = prop.id;
 31 |             if(prop.href)  obj.href = prop.href;
 32 |             if(prop.class) obj.className = prop.class;
 33 |             if(prop.text)  obj.innerText = prop.text;
 34 |             if(prop.html)  obj.innerHTML = prop.html;
 35 | 
 36 |             if(prop.child){
 37 |                 if(prop.child.constructor === Array){
 38 |                     that.forEach(prop.child, function (i) {
 39 |                         obj.appendChild(i);
 40 |                     });
 41 |                 }
 42 |                 else{
 43 |                     obj.appendChild(prop.child);
 44 |                 }
 45 |             }
 46 |         }
 47 | 
 48 |         return obj;
 49 |     };
 50 | 
 51 |     // 对象选择
 52 |     this.select = function (obj) {
 53 |         if(typeof obj === 'object'){
 54 |             return obj;
 55 |         }
 56 |         else if(typeof obj === 'string'){
 57 |             return document.querySelector(obj);
 58 |         }
 59 |     };
 60 | 
 61 |     this.selectAll = function (obj) {
 62 |         if(typeof obj === 'object'){
 63 |             return obj;
 64 |         }
 65 |         else if(typeof obj === 'string'){
 66 |             return document.querySelectorAll(obj);
 67 |         }
 68 |     };
 69 | 
 70 |     // 弹窗
 71 |     kico.notice_list = this.create("div", {class: "ks-notice-list"});
 72 | 
 73 |     this.notice = function (content, attr) {
 74 |         var item = that.create("div", {class: "ks-notice"});
 75 |         item.innerHTML += "<span class='content'>" + content + "</span>";
 76 | 
 77 |         kico.notice_list.appendChild(item);
 78 | 
 79 |         if(!document.querySelector("body > .ks-notice-list")) document.body.appendChild(kico.notice_list);
 80 | 
 81 |         if(attr && attr.time){
 82 |             setTimeout(notice_remove, attr.time);
 83 |         }
 84 |         else{
 85 |             var close = this.create("span", {class: "close"});
 86 | 
 87 |             close.addEventListener("click", function () {
 88 |                 notice_remove();
 89 |             });
 90 | 
 91 |             item.classList.add("dismiss");
 92 |             item.appendChild(close);
 93 |         }
 94 | 
 95 |         if(attr && attr.color){item.classList.add(attr.color);}
 96 | 
 97 |         function notice_remove() {
 98 |             item.classList.add("remove");
 99 | 
100 |             setTimeout(function () {
101 |                 try{
102 |                     kico.notice_list.removeChild(item);
103 |                     item = null;
104 |                 }
105 |                 catch(err) {}
106 | 
107 |                 if(document.querySelector("body > .ks-notice-list") && kico.notice_list.childNodes.length === 0){
108 |                     document.body.removeChild(kico.notice_list);
109 |                 }
110 |             }, 300);
111 |         }
112 |     };
113 | 
114 |     // 遮罩
115 |     kico.overlay = this.create("div", {class: "ks-overlay"});
116 | 
117 |     this.overlay = function (attr) {
118 |         document.body.appendChild(kico.overlay);
119 | 
120 |         if(attr && attr.time){
121 |             setTimeout(overlay_remove, attr.time);
122 |         }
123 |         else{
124 |             kico.overlay.onclick = function (){ overlay_remove() };
125 |         }
126 | 
127 |         if(attr && attr.code){
128 |             kico.overlay.onclick = function (){ overlay_remove(); attr.code() }
129 |         }
130 | 
131 |         function overlay_remove() {
132 |             kico.overlay.onclick = null;
133 |             kico.overlay.classList.add("remove");
134 | 
135 |             setTimeout(function () {
136 |                 if(document.querySelector("body > .ks-overlay")){
137 |                     kico.overlay.classList.remove("remove");
138 |                     document.body.removeChild(kico.overlay);
139 |                 }
140 |             }, 300);
141 |         }
142 |     };
143 | 
144 |     // 图片缩放
145 |     kico.image_box = [];
146 |     kico.image_box.img = this.create("img");
147 |     kico.image_box.prev = this.create("div", {class: "ks-prev"});
148 |     kico.image_box.next = this.create("div", {class: "ks-next"});
149 |     kico.image_box.ball = this.create("div", {class: "ks-ball"});
150 | 
151 |     kico.image_box.wrap = this.create("div", {class: "ks-image", child: [
152 |         kico.image_box.img, kico.image_box.prev, kico.image_box.next, kico.image_box.ball
153 |     ]});
154 | 
155 |     this.image = function (selector) {
156 |         var current = 0;
157 |         var get_images = this.selectAll(selector);
158 | 
159 |         // 设置图片
160 |         function set_image(img) {
161 |             if(img.getAttribute("ks-original") !== null){
162 |                 kico.image_box.img.src = img.getAttribute("ks-original");
163 |             }
164 |             else if(img.src){
165 |                 kico.image_box.img.src = img.src;
166 |             }
167 | 
168 |             kico.image_box.ball.classList.add("loading");
169 |         }
170 | 
171 |         // 设置按钮
172 |         function set_buttons(c) {
173 |             function l(){
174 |                 if(current - 1 >= 0) current--;
175 | 
176 |                 set_image(get_images[current]);
177 |             }
178 | 
179 |             function r(){
180 |                 if(current + 1 < get_images.length) current++;
181 | 
182 |                 set_image(get_images[current]);
183 |             }
184 | 
185 |             kico.image_box.prev.onclick = l;
186 |             kico.image_box.next.onclick = r;
187 |         }
188 | 
189 |         // 循环内单条设定
190 |         function set_item(obj, num) {
191 |             var scale = 1;
192 |             var locationX, locationY;
193 | 
194 |             obj.setAttribute("ks-image", "active");
195 | 
196 |             function single_click(){
197 |                 current = num;
198 | 
199 |                 set_image(obj);
200 |                 set_buttons(num);
201 | 
202 |                 if(!document.body.contains(kico.image_box.wrap)) {
203 |                     document.body.appendChild(kico.image_box.wrap);
204 |                 }
205 |             }
206 | 
207 |             obj.onclick = single_click;
208 |         }
209 | 
210 |         this.forEach(get_images, function (i, j) {
211 |             if(i.src || i.getAttribute("ks-original")){
212 |                 set_item(i, j);
213 |             }
214 |         });
215 | 
216 |         kico.image_box.img.onclick = function () {
217 |             kico.image_box.wrap.classList.add("remove");
218 |             setTimeout(function () {
219 |                 try{
220 |                     document.body.removeChild(kico.image_box.wrap);
221 |                     kico.image_box.wrap.classList.remove("remove");
222 |                 }
223 |                 catch (err){}
224 |             }, 300);
225 |         };
226 | 
227 |         kico.image_box.img.onload = function () {
228 |             kico.image_box.ball.classList.remove("loading");
229 |         }
230 |     };
231 | 
232 |     // AJAX 组件
233 |     this.ajax = function (prop) {
234 |         if(!prop.url){
235 |             prop.url = document.location.origin + document.location.pathname;
236 |         }
237 | 
238 |         function test_crossDomain() {
239 |             var a = document.createElement("a");
240 |             a.href = window.location.hostname;
241 |             return a.hostname === prop.url ? true : false;
242 |         }
243 | 
244 |         if(prop.method === "POST"){
245 |             var data = new FormData();
246 | 
247 |             for(var pk in prop.data){
248 |                 data.append(pk, prop.data[pk]);
249 |             }
250 |         }
251 |         else if(prop.method === "GET"){
252 |             var url = prop.url + "?";
253 | 
254 |             for(var k in prop.data){
255 |                 url += k + "=" + prop.data[k] + "&";
256 |             }
257 | 
258 |             prop.url = url.substr(0, url.length - 1);
259 |         }
260 | 
261 |         var request = new XMLHttpRequest();
262 |         request.open(prop.method, prop.url);
263 |         if(prop.crossDomain){ request.setRequestHeader("X-Requested-With", "XMLHttpRequest"); }
264 | 
265 |         if(prop.header){
266 |             for(var i in prop.header){
267 |                 request.setRequestHeader(prop.header[i][0], prop.header[i][1]);
268 |             }
269 |         }
270 | 
271 |         request.send(data);
272 | 
273 |         request.onreadystatechange = function () {
274 |             if(request.readyState === 4){
275 |                 if(request.status === 200 || request.status === 304){
276 |                     prop.success ? prop.success(request) : console.log(prop.method + " 请求发送成功");
277 |                 }
278 |                 else{
279 |                     prop.failed ? prop.failed(request) : console.log(prop.method + " 请求发送失败");
280 |                 }
281 |             }
282 |         };
283 |     };
284 | 
285 |     // 返回页头
286 |     this.scrollTop = function () {
287 |         function to_top(){
288 |             if(window.scrollY !== 0){
289 |                 window.scrollTo(0, window.scrollY * 0.9);
290 |                 requestAnimationFrame(to_top);
291 |             }
292 |             else{
293 |                 cancelAnimationFrame(this);
294 |             }
295 |         }
296 | 
297 |         window.requestAnimationFrame(to_top);
298 |     };
299 | 
300 |     // Show Version
301 |     console.log("%c Kico Style %c https://paugram.com ","color: #fff; margin: 1em 0; padding: 5px 0; background: #3498db;","margin: 1em 0; padding: 5px 0; background: #efefef;");
302 | }
303 | 
304 | var ks = new Kico_Style();


--------------------------------------------------------------------------------
/static/fantasy.css:
--------------------------------------------------------------------------------
  1 | @charset "UTF-8";
  2 | 
  3 | /* ----
  4 | 
  5 | # Fantasy Theme
  6 | # By: Dreamer-Paul
  7 | # Last Update: 2018.2.10
  8 | 
  9 | 一个优美梦幻的动漫风 Typecho 博客主题。
 10 | 
 11 | 本代码为奇趣保罗原创，并遵守 MIT 开源协议。欢迎访问我的博客：https://paugram.com
 12 | 
 13 | ---- */
 14 | 
 15 | /* 0 - 全局
 16 | -------------------------------- */
 17 | body{
 18 |     color: #777790;
 19 |     background: #f7f7f7 url("img/pattern-1.png") repeat top center;
 20 | }
 21 | 
 22 | a, a:hover{ color: #ffa9be }
 23 | 
 24 | em{ background: #ffa9be }
 25 | 
 26 | h1, h2, h3{ font-weight: normal }
 27 | 
 28 | hr{ border-top: 2px #ccc dashed }
 29 | 
 30 | blockquote{
 31 |     color: #999;
 32 |     padding: 1em;
 33 |     border-radius: 1em;
 34 |     background: #fafafa;
 35 |     border: 2px #ccc dashed;
 36 | }
 37 | 
 38 | /* 1 - 页眉
 39 | -------------------------------- */
 40 | header .toggle{
 41 |     top: 1rem;
 42 |     right: 1rem;
 43 |     z-index: 2;
 44 |     width: 3em;
 45 |     height: 3em;
 46 |     display: none;
 47 |     cursor: pointer;
 48 |     position: fixed;
 49 |     background: #fff;
 50 |     border-radius: 66%;
 51 |     box-shadow: 0 0 20px rgba(0, 0, 0, .4);
 52 | }
 53 | header .toggle:before{
 54 |     display: block;
 55 |     content: "\f0c9";
 56 |     text-align: center;
 57 |     font: 1em/3em "FontAwesome";
 58 | }
 59 | 
 60 | /* 2 - 侧边栏
 61 | -------------------------------- */
 62 | aside{
 63 |     left: 0;
 64 |     top: 8em;
 65 |     z-index: 2;
 66 |     position: fixed;
 67 |     user-select: none;
 68 | }
 69 | aside::-webkit-scrollbar{ width: 0 }
 70 | 
 71 | /* - 侧边导航 */
 72 | .side-nav{
 73 |     z-index: 0;
 74 |     background: #fff;
 75 |     overflow: hidden;
 76 |     position: relative;
 77 |     border-radius: 0 1em 1em 0;
 78 |     box-shadow: 0 0 10px rgba(0, 0, 0, .2);
 79 | }
 80 | .side-nav a{
 81 |     color: #777790;
 82 |     display: block;
 83 |     padding: 1em 2em;
 84 |     position: relative;
 85 | }
 86 | .side-nav a:before{
 87 |     top: 0;
 88 |     left: 0;
 89 |     bottom: 0;
 90 |     width: .5em;
 91 |     content: '';
 92 |     z-index: -1;
 93 |     position: absolute;
 94 |     transition: width .3s;
 95 | }
 96 | .side-nav a:hover{ color: #fff }
 97 | .side-nav a:hover:before{ width: 100% }
 98 | 
 99 | .side-nav a:nth-child(1):before{ background: #ff8b46 }
100 | .side-nav a:nth-child(2):before{ background: #ffc71d }
101 | .side-nav a:nth-child(3):before{ background: #d4f00f }
102 | .side-nav a:nth-child(4):before{ background: #b1c6ff }
103 | .side-nav a:nth-child(5):before{ background: #dcb5ff }
104 | .side-nav a:nth-child(6):before{ background: #ff9fab }
105 | .side-nav a:nth-child(7):before{ background: #eae489 }
106 | .side-nav a:nth-child(8):before{ background: #acf0dc }
107 | .side-nav a:nth-child(9):before{ background: #f9dba7 }
108 | .side-nav a:nth-child(10):before{ background: #a9d6f6 }
109 | .side-nav a:nth-child(11):before{ background: #b5e8a4 }
110 | .side-nav a:nth-child(12):before{ background: #ffb7a5 }
111 | 
112 | /* - 侧边功能 */
113 | .side-action{
114 |     margin: 1em;
115 |     text-align: center;
116 | }
117 | .side-action .search-btn{ cursor: pointer }
118 | .side-action .search-btn:before{
119 |     content: "\f002";
120 |     font: 1em/2em "FontAwesome";
121 | }
122 | 
123 | /* - 功能窗 */
124 | .side-window{
125 |     top: 0;
126 |     left: 0;
127 |     opacity: 0;
128 |     z-index: -1;
129 |     width: 100%;
130 |     height: 100%;
131 |     display: table;
132 |     position: fixed;
133 |     visibility: hidden;
134 |     background: rgba(255, 255, 255, .9);
135 |     transition: opacity .3s, visibility .3s;
136 | }
137 | .side-window.active{
138 |     opacity: 1;
139 |     visibility: visible;
140 | }
141 | .side-wrap{
142 |     display: table-cell;
143 |     vertical-align: middle;
144 | }
145 | 
146 | /* -- 搜索框和分类 */
147 | .search-form, .side-category{
148 |     width: 90%;
149 |     margin: 0 auto;
150 |     max-width: 600px;
151 | }
152 | .side-window.active .search-form, .side-window.active .side-category{
153 |     animation: fade-in-bottom .5s; -webkit-animation: fade-in-bottom .5s;
154 | }
155 | 
156 | .search-form input{
157 |     width: 100%;
158 |     border: none;
159 |     display: block;
160 |     font-size: 1.5em;
161 |     border-radius: 0;
162 |     max-width: 600px;
163 |     padding: 0 0 .5em;
164 |     line-height: 1.5em;
165 |     border-bottom: 2px solid #777790;
166 | }
167 | 
168 | .side-category{
169 |     text-align: center;
170 |     margin: 2em auto 0 auto;
171 | }
172 | 
173 | .color-bar a{
174 |     color: #fff;
175 |     margin: .25em;
176 |     font-size: .85em;
177 |     border-radius: 3em;
178 |     padding: .5em .75em;
179 |     background: #777790;
180 |     display: inline-block;
181 | }
182 | 
183 | .color-bar a:nth-child(1){ background: #ff8b46 }
184 | .color-bar a:nth-child(2){ background: #ffc71d }
185 | .color-bar a:nth-child(3){ background: #d4f00f }
186 | .color-bar a:nth-child(4){ background: #b1c6ff }
187 | .color-bar a:nth-child(5){ background: #dcb5ff }
188 | .color-bar a:nth-child(6){ background: #ff9fab }
189 | .color-bar a:nth-child(7){ background: #eae489 }
190 | .color-bar a:nth-child(8){ background: #acf0dc }
191 | .color-bar a:nth-child(9){ background: #f9dba7 }
192 | .color-bar a:nth-child(10){ background: #a9d6f6 }
193 | .color-bar a:nth-child(11){ background: #b5e8a4 }
194 | .color-bar a:nth-child(12){ background: #ffb7a5 }
195 | 
196 | @media screen and (max-width: 600px){
197 |     header .toggle, .side-wrap{ display: block }
198 | 
199 |     aside{
200 |         top: 0;
201 |         left: 0;
202 |         right: 0;
203 |         bottom: 0;
204 |         overflow: auto;
205 |         border-radius: 0;
206 |         transition: transform .3s;
207 |         transform: translateX(-100%);
208 |         background: rgba(255, 255, 255, .95);
209 |     }
210 |     aside.active{ transform: translateX(0) }
211 | 
212 |     .side-nav{
213 |         background: none;
214 |         box-shadow: none;
215 |         border-radius: 0;
216 |     }
217 |     .side-nav a:hover{ color: inherit }
218 |     .side-nav a:hover:before{ width: 1em }
219 | 
220 |     .side-action{ display: none }
221 | 
222 |     .side-window{
223 |         opacity: 1;
224 |         height: auto;
225 |         display: block;
226 |         margin-top: 3em;
227 |         position: static;
228 |         background: none;
229 |         visibility: visible;
230 |     }
231 | 
232 |     .search-form input{ font-size: 1em }
233 | }
234 | 
235 | /* 3 - 正文
236 | -------------------------------- */
237 | header{ margin: 3em 0 }
238 | 
239 | .headline{
240 |     position: relative;
241 |     padding-bottom: .5em;
242 |     display: inline-block;
243 |     transition: transform .3s;
244 | }
245 | .headline:hover{ transform: rotate(-6deg) }
246 | .headline:after{
247 |     content: '';
248 |     height: 7px;
249 |     width: 100%;
250 |     left: 0;
251 |     bottom: 0;
252 |     position: absolute;
253 |     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAHCAYAAADwK5bPAAABDElEQVR4AWMoL5/wF4jfAvFVIF5TVjahuLR0kjIDFUFp6URVoLmlQPPXAfF1IH4HxP9Alv/Hgv8B8T6gBj8Ghv+M5FgI0ldW1h9QUTHxEMQ8THvAlhPA50CGNDQ0MBFjJUgd0MJAkD5CZoNdWFzcI1Ja2m9UXt6fWVExYSNQ4jcWxfeAuBkYGq5FRb2yubmT2KGWcQD1ywPl3IGWtgHph1j0/gRFaUVFf0JJyQS9ysopwjhdX13dJ11ePnECUMMPkGYK8FegOd0lJd1iJMdaVVW/JDAkeoCGvCHR0hegUACFKMWpFRTEoHgH+mIK0DFHgIY/A+LvUIu+AfETSMKaOKm0dIJPWtpMVmLMBQAofSPjvL1S8gAAAABJRU5ErkJggg==) repeat-x left center;
254 | }
255 | 
256 | @media screen and (max-width: 600px){
257 |     .headline{
258 |         text-align: center;
259 |     }
260 | }
261 | 
262 | header, main{ margin-left: 8em; margin-bottom: 3em }
263 | 
264 | @media screen and (max-width: 600px){
265 |     header, main{ margin-left: 0 }
266 | }
267 | 
268 | .head-social{
269 |     float: right;
270 |     margin: 1.25em 0;
271 |     user-select: none;
272 | }
273 | .head-social a{
274 |     color: inherit;
275 |     margin: 0 .5em;
276 |     display: inline-block;
277 |     transition: transform .3s;
278 | }
279 | .head-social a:hover{ transform: scale(1.2) }
280 | .head-social i{ font-size: 1.2em }
281 | 
282 | @media screen and (max-width: 600px){
283 |     header{ text-align: center }
284 | 
285 |     .head-social{
286 |         float: none;
287 |         margin-top: 2em;
288 |     }
289 | }
290 | 
291 | 
292 | .board{
293 |     padding: 1.5em;
294 |     background: #fff;
295 |     border-radius: 1.5em;
296 | }
297 | .board + .board{ margin-top: 2em }
298 | 
299 | .board.head{ display: inline-block }
300 | .board.head .fa{ margin-right: .75em }
301 | 
302 | .post-item, .post-title{
303 |     margin-bottom: 1.5em;
304 |     padding-bottom: 1.5em;
305 |     border-bottom: 2px dotted #777790;
306 | }
307 | .post-item:last-child{
308 |     margin-bottom: 0;
309 |     padding-bottom: 0;
310 |     border-bottom: none;
311 | }
312 | .post-item .date{
313 |     display: block;
314 |     color: #ffa9be;
315 |     font-size: .85em;
316 |     margin-bottom: .5em;
317 | }
318 | .post-item a{
319 |     color: #777790;
320 | }
321 | .post-item h3:hover{ opacity: .6 }
322 | 
323 | .post-item h3{
324 |     padding-left: 1em;
325 |     position: relative;
326 |     transition: opacity .3s;
327 | }
328 | .post-item h3:before{
329 |     content: '';
330 |     position: absolute;
331 |     left: 0;
332 |     top: .3em;
333 |     border: .4em solid transparent;
334 |     border-left-color: #ffa9be;
335 | }
336 | 
337 | .post-meta{
338 |     display: table;
339 |     color: #777790;
340 |     font-size: .85em;
341 | }
342 | 
343 | .post-meta .category:before, .post-meta .comments:before, .post-meta .viewed:before, .post-meta .edit:before{
344 |     content: '·';
345 |     margin: 0 .5em;
346 | }
347 | 
348 | .post-content > h1, .post-content > h2, .post-content > h3,
349 | .post-special > h1, .post-special > h2, .post-special > h3{ position: relative }
350 | .post-content > h1:before, .post-content > h2:before, .post-content > h3:before,
351 | .post-special > h1:before, .post-special > h2:before, .post-special > h3:before{
352 |     left: -1.5rem;
353 |     top: 0;
354 |     bottom: 0;
355 |     width: .5em;
356 |     content: '';
357 |     display: block;
358 |     position: absolute;
359 |     background: #ffa9be;
360 |     border-radius: 0 .5em .5em 0;
361 | }
362 | 
363 | /* -- 密码保护 */
364 | .post-content .protected .submit{
365 |     color: #fff;
366 |     padding: .5em 1em;
367 |     border-radius: 4px;
368 |     background: #ffa9be;
369 |     border: 1px solid #ffa9be;
370 | }
371 | 
372 | /* - 分页 */
373 | .page-navigator{
374 |     margin: 2em auto;
375 |     user-select: none;
376 |     text-align: center;
377 | }
378 | .page-navigator span{
379 |     margin-right: .5em;
380 |     display: inline-block;
381 | }
382 | .page-navigator span:last-child{ margin-right: 0 }
383 | 
384 | .page-navigator a{
385 |     width: 2em;
386 |     height: 2em;
387 |     color: inherit;
388 |     line-height: 1.75;
389 |     border-radius: 2em;
390 |     display: inline-block;
391 |     vertical-align: middle;
392 |     border: #777790 2px solid;
393 |     background: no-repeat center center;
394 |     transition: color .3s, background .3s;
395 | }
396 | .page-navigator a:hover, .page-navigator .current a{
397 |     color: #fff;
398 |     background-color: #777790;
399 | }
400 | 
401 | .board .page-navigator{
402 |     margin: 2em auto 0 auto;
403 | }
404 | 
405 | .page-navigator .category{
406 |     width: auto;
407 |     height: auto;
408 |     padding: .75em 1em;
409 | }
410 | 
411 | .page-navigator .prev a{
412 |     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAKCAYAAACJxx+AAAAAAXNSR0IArs4c6QAAALdJREFUGBljZMACKir6Xf7/Z0z+9+/fDBZk+cLCPk42NubO////5wDFGZmZmeThCioqJhoDJZYwMPzXgGn6/5+BkyU0dBWzouLTKqBkLVCCFSYJo1mUlJ61AE2rgAmg00yMjIx/0QWR+cySkkkHBQU//wYK2gIxM7IkkP2CESZQWtpvxMTEuAjI14aJAekLTDBOd3fhOU7ODyZA9/QBxf6BxBkZGb7DTYApBNHl5RPsgG6LBXpzPgDWrjI5DdIyLgAAAABJRU5ErkJggg==);
413 | }
414 | .page-navigator .prev a:hover{
415 |     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAKCAYAAACJxx+AAAAAAXNSR0IArs4c6QAAAHpJREFUGBltjzEKgDAMRYsueh3dHHTxWDo7ubh6AG/i2kXwLkKtr8XWCA08muT/8KlSibLW9rBB95NZlLDADa72aGCo4XRbUVox5DDCJYTQesMUpsSrMzJMzEk1XLmIAdIR4QhDBQfI0kH3L0oBM5jX9X1TOhFbWKF5ACRiwtdwpbVuAAAAAElFTkSuQmCC);
416 | }
417 | 
418 | .page-navigator .next a{
419 |     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAKCAYAAACJxx+AAAAAAXNSR0IArs4c6QAAAK5JREFUGBljLC+faMXA8D+VgYFhfmdnwSEgjQKYbW09VgJFfIE4Hsjmc3GxOHTgwIE/MFVM//8zcEI5IHbx9+8CZyoqJhnCFDCWl084D+QYwASg9G8g3XTvnlQ7C5oEjMsKZDQrKT3jZoKJYKMZGRn/4jIBZEULB8f7NmwKbjAyMsR1dBScBpnKBOR8hxr/H8iewsnJaQyTBImz/P37r5KJiTkLGFjzgBI7oYrhFACoHTMyp9L38AAAAABJRU5ErkJggg==);
420 | }
421 | .page-navigator .next a:hover{
422 |     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAKCAYAAACJxx+AAAAAAXNSR0IArs4c6QAAAHhJREFUGBlj+P//vxUQzwdiOwZsAChxDIhB4C8Q9wAxB4o6oMB5IEYGV4AcQ7giIAddAUjxLyCuAWJmFrhKVAYrkNsMxNxMqOIYvL8MQGNwWVEHlGPBpuA6UMIUbhaQA/PmPyB7MhBzwSVBDKCAPRCvBGJ3FAkoBwBhFKRDlAmnZgAAAABJRU5ErkJggg==);
423 | }
424 | 
425 | /* - 评论区 */
426 | .comment-form{
427 |     position: relative;
428 |     margin-bottom: 2em;
429 | }
430 | .comment-form input{
431 |     margin-right: .5em;
432 |     display: inline-block;
433 |     width: calc((100% - 5.5em) / 3);
434 | }
435 | .comment-form input, .comment-form textarea{
436 |     padding: .75em;
437 |     border-radius: 1em;
438 |     border-color: #ddd;
439 | }
440 | 
441 | @media screen and (max-width: 600px){
442 |     .comment-form{ margin-bottom: 5em }
443 |     .comment-form input, .comment-form textarea{ width: 100% }
444 | }
445 | 
446 | .comment-form .submit{
447 |     right: 0;
448 |     padding: 0;
449 |     color: #fff;
450 |     width: 3em;
451 |     height: 3em;
452 |     position: absolute;
453 |     border-radius: 66%;
454 |     background: #ffa9be;
455 | }
456 | .comment-form .submit:before{
457 |     content: '\f1d8';
458 |     font: 1em/1em FontAwesome;
459 | }
460 | .comment-form .logined{ display: inline-block }
461 | .comment-form .cancel-reply{
462 |     text-align: right;
463 |     margin-bottom: .5em;
464 | }
465 | 
466 | .comment-avatar{
467 |     width: 3em;
468 |     float: left;
469 |     margin-right: 1em;
470 | }
471 | .comment-avatar img{
472 |     height: auto;
473 |     border-radius: 66%;
474 | }
475 | 
476 | .comment-list .avatar{
477 |     width: 3em;
478 |     float: left;
479 |     height: auto;
480 |     display: block;
481 |     border-radius: 66%;
482 |     transition: box-shadow .3s;
483 |     box-shadow: 0 .25em .5em rgba(0, 0, 0, .2);
484 | }
485 | .comment-list div:hover .avatar{
486 |     box-shadow: 0 .3em .6em rgba(0, 0, 0, .3);
487 | }
488 | 
489 | .comment-list .comment-item{ margin-bottom: 1em }
490 | .comment-list .comment-item:last-child{ margin-bottom: 0 }
491 | 
492 | .comment-list .comment-meta{ margin-bottom: .5em }
493 | 
494 | .comment-meta .comment-time{
495 |     color: #aaa;
496 |     font-size: .75em;
497 |     margin-left: .5em;
498 | }
499 | .comment-list .comment-author, .comment-list a{ font-weight: lighter }
500 | 
501 | .comment-list .content{
502 |     background: #fff4fb;
503 |     border-radius: .5em;
504 |     margin: 0 0 1em 1.5em;
505 |     word-break: break-all;
506 |     padding: .75em .75em .75em 2.5em;
507 | }
508 | 
509 | /* - 作者的评论 */
510 | .comment-item.by-author > .content{ background: aliceblue }
511 | .comment-item.by-author > .content a{ color: cornflowerblue }
512 | 
513 | /* - 子评论 */
514 | .comment-list .comment-children{ margin-left: 1em }
515 | 
516 | /* - 回复评论 */
517 | .comment-list .comment-reply{
518 |     opacity: 0;
519 |     float: right;
520 |     transition: opacity .3s;
521 | }
522 | .comment-list .content:hover .comment-reply{ opacity: 1 }
523 | 
524 | .no-comment{
525 |     padding: 1em;
526 |     text-align: center;
527 |     border-radius: 1em;
528 |     background: #fafafa;
529 | }
530 | 
531 | /* - 归档 */
532 | .archives-list a{ color: inherit }
533 | 
534 | .archives-list li{
535 |     margin-bottom: .75em;
536 |     list-style-type: circle;
537 | }
538 | 
539 | .archives-list .date{ float: right }
540 | 
541 | /* - 追番 */
542 | .bangumi-item{
543 |     color: inherit;
544 |     text-align: center;
545 | }
546 | .bangumi-img{
547 |     overflow: hidden;
548 |     position: relative;
549 |     border-radius: 1em;
550 |     padding-bottom: 140%;
551 |     background: center/cover;
552 | }
553 | .bangumi-item h3{ margin: 1em 0 }
554 | 
555 | .bangumi-status{
556 |     left: 0;
557 |     right: 0;
558 |     bottom: 0;
559 |     color: #fff;
560 |     position: absolute;
561 |     transition: transform .3s;
562 |     transform: translateY(100%);
563 |     background: rgba(0, 0, 0, .5);
564 | }
565 | .bangumi-img:hover .bangumi-status{ transform: translateY(0) }
566 | 
567 | .bangumi-status-bar{
568 |     top: 0;
569 |     bottom: 0;
570 |     max-width: 100%;
571 |     position: absolute;
572 |     background: #ffa9be;
573 | }
574 | .bangumi-status p{
575 |     padding: .5em;
576 |     position: relative;
577 | }
578 | 
579 | /* 4 - 页尾
580 | -------------------------------- */
581 | footer{
582 |     padding: 2em 0;
583 |     background: #fff;
584 |     box-shadow: 0 0 8px rgba(0, 0, 0, .1);
585 | }
586 | footer h3{ color: #666 }
587 | 
588 | .foot-action{
589 |     z-index: 66;
590 |     right: 1rem;
591 |     bottom: 1rem;
592 |     position: fixed;
593 |     font-size: 1.2em;
594 |     line-height: 2em;
595 |     text-align: center;
596 | }
597 | .foot-action .to-top{
598 |     width: 2em;
599 |     height: 2em;
600 |     cursor: pointer;
601 |     background: #fff;
602 |     border-radius: 66%;
603 |     transform: scale(0);
604 |     transition: transform .3s;
605 |     box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
606 | }
607 | .foot-action .to-top.active{ transform: scale(1) }
608 | .foot-action .to-top:before{
609 |     content: "\f062";
610 |     font-family: FontAwesome;
611 | }
612 | 
613 | .foot-widget{ margin-bottom: 3em }
614 | 
615 | .foot-widget li{
616 |     overflow: hidden;
617 |     white-space: nowrap;
618 |     margin-bottom: .5em;
619 |     text-overflow: ellipsis;
620 | }
621 | .foot-widget li:before{
622 |     content: '\f105';
623 |     margin-right: .75em;
624 |     font-family: "FontAwesome";
625 | }
626 | 
627 | .foot-widget .foot-comments a{
628 |     color: inherit;
629 |     display: block;
630 |     overflow: hidden;
631 |     white-space: nowrap;
632 |     margin-bottom: .5em;
633 |     text-overflow: ellipsis;
634 | }
635 | .foot-widget .foot-comments img{
636 |     margin-right: .5em;
637 |     border-radius: 66%;
638 | }
639 | 
640 | .foot-copyright{
641 |     color: #999;
642 |     font-size: .875em;
643 | }
644 | .foot-copyright p{ margin: .25em 0 }
645 | 
646 | .foot-social a{
647 |     color: #777790;
648 |     margin-right: .75em;
649 | }
650 | .foot-social a:last-child{ margin: 0 }


--------------------------------------------------------------------------------
/static/kico.css:
--------------------------------------------------------------------------------
   1 | @charset "UTF-8";
   2 | 
   3 | /* ----
   4 | 
   5 | # Kico Style 2.1
   6 | # By: Dreamer-Paul
   7 | # Last Update: 2019.1.28
   8 | 
   9 | 一个简洁、有趣的开源响应式框架，仅包含基础样式，需按照一定规则进行二次开发。
  10 | 
  11 | 欢迎你加入缤奇，和我们一起改变世界。
  12 | 本代码为奇趣保罗原创，并遵守 MIT 开源协议。欢迎访问我的博客：https://paugram.com
  13 | 
  14 | ---- */
  15 | 
  16 | /* 0 - 全局
  17 | -------------------------------- */
  18 | html, body,
  19 | dl, dt, dd, ol, ul,
  20 | h1, h2, h3, h4, h5, h6,
  21 | pre, code, form, p,
  22 | fieldset, legend, figure{
  23 |     margin: 0;
  24 |     padding: 0;
  25 | }
  26 | 
  27 | html{
  28 |     color: #353535;
  29 |     font: 16px/1.5 'Microsoft Yahei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
  30 | }
  31 | 
  32 | html.font-s{ font-size: 14px }
  33 | html.font-m{ font-size: 16px }
  34 | html.font-l{ font-size: 18px }
  35 | 
  36 | @media screen and (max-width: 500px){
  37 |     html.font-auto{ font-size: 14px }
  38 | }
  39 | 
  40 | @media screen and (min-width: 1930px){
  41 |     html.font-auto{ font-size: 18px }
  42 | }
  43 | 
  44 | *, *:before, *:after{ box-sizing: border-box }
  45 | 
  46 | /* - 部分老式浏览器的更正 */
  47 | aside, article, section, figure, figcaption, header, main, footer, nav{ display: block }
  48 | 
  49 | /* - 选择内容 */
  50 | ::-moz-selection{
  51 |     color: #fff;
  52 |     background-color: rgba(0, 0, 0, .66);
  53 | }
  54 | 
  55 | ::selection{
  56 |     color: #fff;
  57 |     background-color: rgba(0, 0, 0, .66);
  58 | }
  59 | 
  60 | /* - 滚动条 */
  61 | ::-webkit-scrollbar{
  62 |     width: 10px;
  63 |     height: 10px;
  64 | }
  65 | 
  66 | ::-webkit-scrollbar-thumb{
  67 |     background: #ccc;
  68 |     border-radius: 5px;
  69 | }
  70 | 
  71 | ::-webkit-scrollbar-track:hover{
  72 |     border-radius: 5px;
  73 |     background: rgba(0, 0, 0, .05);
  74 | }
  75 | 
  76 | body::-webkit-scrollbar-thumb{
  77 |     box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07);
  78 | }
  79 | 
  80 | body::-webkit-scrollbar-track:hover{
  81 |     border-radius: 0;
  82 |     box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1);
  83 | }
  84 | 
  85 | .ks-scroll-hover::-webkit-scrollbar{
  86 |     display: none;
  87 | }
  88 | 
  89 | .ks-scroll-hover:hover::-webkit-scrollbar{
  90 |     display: inherit;
  91 | }
  92 | 
  93 | /* 1 - 容器
  94 | -------------------------------- */
  95 | .wrap{
  96 |     margin-left: auto;
  97 |     margin-right: auto;
  98 |     max-width: 1200px;
  99 |     padding: 0 1.25em;
 100 |     box-sizing: content-box;
 101 | }
 102 | 
 103 | .wrap.min{ max-width: 800px }
 104 | .wrap.mid{ max-width: 1000px }
 105 | .wrap.max{ max-width: 1400px }
 106 | .wrap.full{ max-width: 100% }
 107 | 
 108 | .wrap.thin{ padding: 0 .75em }
 109 | .wrap.thick{ padding: 0 1.5em }
 110 | .wrap.clear{
 111 |     padding-left: 0;
 112 |     padding-right: 0;
 113 | }
 114 | 
 115 | .clearfix:after{
 116 |     content: '';
 117 |     clear: both;
 118 |     display: block;
 119 | }
 120 | 
 121 | /* 2 - 元素
 122 | -------------------------------- */
 123 | h1{
 124 |     font-size: 2em;
 125 | }
 126 | 
 127 | h1, h2, h3, h4, h5, h6{
 128 |     margin-bottom: 1rem;
 129 | }
 130 | 
 131 | h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child{
 132 |     margin-bottom: 0;
 133 | }
 134 | 
 135 | p{
 136 |     line-height: 1.8;
 137 |     margin-bottom: 1em;
 138 | }
 139 | 
 140 | a{
 141 |     color: #3498db;
 142 |     text-decoration: none;
 143 | }
 144 | 
 145 | a:hover{
 146 |     color: #ffc670;
 147 | }
 148 | 
 149 | abbr[title]{
 150 |     cursor: help;
 151 |     text-decoration: none;
 152 |     border-bottom: 1px dotted;
 153 | }
 154 | 
 155 | em, mark, kbd{
 156 |     padding: 0 .5em;
 157 |     border-radius: .5em;
 158 |     display: inline-block;
 159 | }
 160 | 
 161 | em{
 162 |     color: #fff;
 163 |     font-style: normal;
 164 |     background: #3498db;
 165 | }
 166 | 
 167 | kbd{
 168 |     color: #fff;
 169 |     font-size: 90%;
 170 |     background: #333;
 171 |     font-family: 'Consolas', 'Courier New', monospace, "微软雅黑";
 172 | }
 173 | 
 174 | img, svg, audio, video{
 175 |     max-width: 100%;
 176 |     vertical-align: middle;
 177 | }
 178 | 
 179 | /* - 文章 */
 180 | article{ word-break: break-all }
 181 | 
 182 | article > *{ margin-bottom: 1em }
 183 | article > *:last-child{ margin-bottom: 0 }
 184 | 
 185 | article h1, article h2, article h3{ font-size: 1.2em }
 186 | article h4, article h5, article h6{ font-size: 1.1em }
 187 | 
 188 | /* - 按钮 */
 189 | .btn{
 190 |     outline: 0;
 191 |     font: inherit;
 192 |     color: inherit;
 193 |     cursor: pointer;
 194 |     background: #fff;
 195 |     user-select: none;
 196 |     border-radius: 4px;
 197 |     padding: .8em 1.5em;
 198 |     display: inline-block;
 199 |     border: 1px solid transparent;
 200 | }
 201 | .btn:hover{ color: inherit }
 202 | .btn:active{ background: #eee }
 203 | 
 204 | /* -- 禁用的按钮 */
 205 | .btn[disabled]{
 206 |     opacity: .5;
 207 |     cursor: not-allowed;
 208 | }
 209 | 
 210 | /* -- 有图标的按钮 */
 211 | .btn i{
 212 |     margin-right: 5px;
 213 | }
 214 | 
 215 | /* -- 按钮尺寸 */
 216 | .btn.small{
 217 |     padding: .5em 1em;
 218 | }
 219 | 
 220 | .btn.large{
 221 |     font-size: 1.2em;
 222 |     padding: 1em 2.5em;
 223 | }
 224 | 
 225 | /* -- 按钮颜色 */
 226 | .btn.red, .btn.yellow, .btn.blue, .btn.green{ color: #fff }
 227 | 
 228 | .btn.red{ background: #c40b00 }
 229 | .btn.yellow{ background: #ffb03a }
 230 | .btn.blue{ background: #3498db }
 231 | .btn.green{ background: #27a17e }
 232 | .btn.transparent{ background: transparent }
 233 | 
 234 | .btn.red:active{ background: #b00000 }
 235 | .btn.yellow:active{ background: #eb9c26 }
 236 | .btn.blue:active{ background: #2084c7 }
 237 | .btn.green:active{ background: #138d6a }
 238 | 
 239 | /* - 代码 */
 240 | pre, code{
 241 |     font-size: 1em;
 242 |     font-family: 'Consolas', 'Courier New', monospace, "微软雅黑";
 243 | }
 244 | 
 245 | pre{ word-wrap: normal }
 246 | 
 247 | code{
 248 |     color: #c40b00;
 249 |     font-size: 90%;
 250 |     word-wrap: normal;
 251 |     border-radius: 4px;
 252 |     padding: .25em .5em;
 253 |     word-break: break-all;
 254 |     background-color: #f7f2f4;
 255 | }
 256 | 
 257 | pre > code{
 258 |     color: #fff;
 259 |     padding: 1em;
 260 |     display: block;
 261 |     overflow-x: auto;
 262 |     word-break: normal;
 263 |     font-size: inherit;
 264 |     border-radius: 5px;
 265 |     background-color: #333;
 266 | }
 267 | 
 268 | /* - 项目列表 */
 269 | ul, ol{ margin-left: 1.25em }
 270 | ul.clear, ol.clear{
 271 |     margin-left: 0;
 272 |     list-style: none;
 273 | }
 274 | 
 275 | dl dd{ margin-left: 1.5em }
 276 | dl dd:before{
 277 |     content: "--";
 278 |     margin-right: .25em;
 279 | }
 280 | 
 281 | /* - 补间动画 */
 282 | a, .btn{
 283 |     transition: color 0.3s, background 0.3s;
 284 |     -o-transition: color 0.3s, background 0.3s;
 285 |     -moz-transition: color 0.3s, background 0.3s;
 286 |     -webkit-transition: color 0.3s, background 0.3s;
 287 | }
 288 | 
 289 | /* - 引用*/
 290 | blockquote{
 291 |     margin: 0 0 1em;
 292 |     line-height: 1.8;
 293 |     font-style: oblique;
 294 |     background: #f5fafd;
 295 |     padding: 1em 1em 1em 2em;
 296 |     border-left: 5px #3498db solid;
 297 | }
 298 | 
 299 | cite{
 300 |     color: #3498db;
 301 |     font-style: normal;
 302 | }
 303 | 
 304 | /* - 分割线 */
 305 | hr{
 306 |     border: 0;
 307 |     margin: 1.5em 0;
 308 |     border-top: 1px rgba(0, 0, 0, 0.5) solid;
 309 | }
 310 | hr.light{
 311 |     border-top: 1px rgba(255, 255, 255, 0.5) solid;
 312 | }
 313 | 
 314 | /* - 表单 */
 315 | input, textarea{ max-width: 100% }
 316 | 
 317 | input[disabled]{
 318 |     cursor: no-drop;
 319 | }
 320 | 
 321 | input[readonly]{
 322 |     background: rgb(235, 235, 228);
 323 | }
 324 | 
 325 | input, textarea, select{
 326 |     outline: none;
 327 |     font: inherit;
 328 |     background: none;
 329 | }
 330 | 
 331 | input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="number"], input[type="search"], textarea, select{
 332 |     padding: .5em;
 333 |     color: inherit;
 334 |     border-radius: 4px;
 335 |     border: #ccc 1px solid;
 336 | }
 337 | 
 338 | input[type="number"]:out-of-range{
 339 |     background: rgba(255, 0, 0, .3);
 340 | }
 341 | 
 342 | input[type="range"]{
 343 |     margin: 0;
 344 |     height: 100%;
 345 |     -webkit-appearance: none;
 346 |     -moz-appearance: none;
 347 |     cursor: ew-resize;
 348 |     cursor: grab;
 349 |     overflow: hidden;
 350 |     min-height: 1.5rem;
 351 | }
 352 | 
 353 | input[type="range"]:focus {
 354 |     box-shadow: none;
 355 |     outline: none;
 356 | }
 357 | 
 358 | input[type="range"]:active::-webkit-slider-thumb {
 359 |     border-color: #3498db;
 360 |     background-color: #3498db;
 361 | }
 362 | 
 363 | input[type="range"]:active::-moz-range-thumb {
 364 |     border-color: #3498db;
 365 |     background-color: #3498db;
 366 | }
 367 | 
 368 | input[type="range"]:focus::-ms-thumb {
 369 |     border-color: #9C27B0;
 370 |     background-color: #673AB7;
 371 | }
 372 | 
 373 | input[type="range"]::-moz-focus-outer { border: 0 }
 374 | 
 375 | input[type="range"]::-webkit-slider-runnable-track {
 376 |     background: #3498db;
 377 |     content: '';
 378 |     height: 2px;
 379 |     pointer-events: none;
 380 | }
 381 | 
 382 | input[type="range"]::-webkit-slider-thumb {
 383 |     width: 14px;
 384 |     height: 14px;
 385 |     -webkit-appearance: none;
 386 |     appearance: none;
 387 |     background: #fff;
 388 |     border-radius: 50px;
 389 |     margin-top: -6px;
 390 |     border: 1px solid rgba(0, 0, 0, 0.15);
 391 |     transition: .3s border-color, .3s background-color;
 392 | }
 393 | 
 394 | input[type="range"]::-moz-range-track {
 395 |     width: 240px;
 396 |     height: 2px;
 397 |     background: rgba(0, 50, 126, 0.12);
 398 | }
 399 | 
 400 | input[type="range"]::-moz-range-thumb {
 401 |     width: 14px;
 402 |     height: 14px;
 403 |     background: #fff;
 404 |     border-radius: 50px;
 405 |     border: 1px solid rgba(0, 30, 75, 0.12);
 406 |     position: relative;
 407 |     transition: .3s border-color, .3s background-color;
 408 | }
 409 | 
 410 | input[type="range"]::-moz-range-progress {
 411 |     height: 2px;
 412 |     background: #467fcf;
 413 |     border: 0;
 414 |     margin-top: 0;
 415 | }
 416 | 
 417 | textarea{
 418 |     display: block;
 419 |     overflow: auto;
 420 |     resize: vertical;
 421 | }
 422 | 
 423 | progress{
 424 |     overflow: auto;
 425 |     border-radius: 50px;
 426 | }
 427 | 
 428 | progress::-webkit-progress-bar{
 429 |     background-color: #eee;
 430 | }
 431 | 
 432 | /* - 缤奇表单模组 */
 433 | .ks-form label{
 434 |     display: block;
 435 |     cursor: pointer;
 436 |     user-select: none;
 437 | }
 438 | 
 439 | .ks-form label:last-child{
 440 |     margin-bottom: 0;
 441 | }
 442 | 
 443 | .ks-form label input{
 444 |     display: inline-block;
 445 | }
 446 | 
 447 | .ks-form label.submit > input[type="text"]{
 448 |     border-top-right-radius: 0;
 449 |     border-bottom-right-radius: 0;
 450 | }
 451 | 
 452 | .ks-form label.submit > input[type="text"] + button{
 453 |     vertical-align: middle;
 454 |     border-top-left-radius: 0;
 455 |     border-bottom-left-radius: 0;
 456 | }
 457 | 
 458 | .ks-form input{
 459 |     display: block;
 460 |     vertical-align: middle;
 461 | }
 462 | 
 463 | form textarea{ width: 100% }
 464 | 
 465 | /* -- 单选多选框 */
 466 | .ks-form input[type="checkbox"], .ks-form input[type="radio"]{
 467 |     float: left;
 468 |     width: 1.5em;
 469 |     height: 1.5em;
 470 |     cursor: pointer;
 471 |     position: relative;
 472 |     margin: 0 .5em 0 0;
 473 |     -moz-appearance: none;
 474 |     -webkit-appearance: none;
 475 | }
 476 | 
 477 | .ks-form input[type="checkbox"]:before, .ks-form input[type="radio"]:before{
 478 |     content: '';
 479 |     width: 100%;
 480 |     height: 100%;
 481 |     display: block;
 482 |     border-radius: .2em;
 483 |     border: 0 solid #3498db;
 484 |     box-shadow: 0 0 0 1px #ccc inset;
 485 |     transition: border 0.3s, background 0.3s, box-shadow 0.3s;
 486 | }
 487 | 
 488 | .ks-form input[type="checkbox"]:after{
 489 |     top: 10%;
 490 |     left: 10%;
 491 |     width: 30%;
 492 |     height: 60%;
 493 |     content: '';
 494 |     position: absolute;
 495 |     transition: transform .3s;
 496 |     transform-origin: 100% 100%;
 497 |     border-right: .15em solid #fff;
 498 |     border-bottom: .15em solid #fff;
 499 |     transform: rotate(45deg) scale(0);
 500 | }
 501 | 
 502 | .ks-form input[type="radio"]:before{
 503 |     border-radius: 100%;
 504 | }
 505 | 
 506 | .ks-form input[type="checkbox"]:checked:before{
 507 |     box-shadow: none;
 508 |     background: #3498db;
 509 | }
 510 | 
 511 | .ks-form input[type="checkbox"]:checked:after{
 512 |     transform: rotate(45deg) scale(1);
 513 | }
 514 | 
 515 | .ks-form input[type="radio"]:checked:before{
 516 |     background: #3498db;
 517 |     border: 2px solid #3498db;
 518 |     box-shadow: 0 0 0 .2em #fff inset;
 519 | }
 520 | 
 521 | /* -- 开关按钮 */
 522 | .ks-form input.switch{
 523 |     width: 4em;
 524 |     height: 2em;
 525 |     float: none;
 526 |     cursor: pointer;
 527 |     background: #eee;
 528 |     position: relative;
 529 |     border-radius: 50px;
 530 |     border: 1px solid #ddd;
 531 |     box-sizing: content-box;
 532 |     transition: border .3s, background .3s;
 533 | }
 534 | 
 535 | .ks-form input.switch:before{
 536 |     margin: 0;
 537 |     border: 0;
 538 |     width: 2em;
 539 |     height: 2em;
 540 |     content: '';
 541 |     display: block;
 542 |     box-shadow: none;
 543 |     background: #fff;
 544 |     position: absolute;
 545 |     border-radius: 100%;
 546 |     transition: transform 0.3s;
 547 | }
 548 | 
 549 | .ks-form input.switch:after{
 550 |     content: normal;
 551 | }
 552 | 
 553 | .ks-form input.switch:checked{
 554 |     box-shadow: none;
 555 |     background: #3498db;
 556 |     border-color: #3498db;
 557 | }
 558 | 
 559 | .ks-form input.switch:checked:before{
 560 |     background: #fff;
 561 |     transform: translateX(2em);
 562 | }
 563 | 
 564 | /* - 表单小组 */
 565 | fieldset{
 566 |     border: none;
 567 |     margin-bottom: 2em;
 568 | }
 569 | 
 570 | fieldset > *{ margin-bottom: 1em }
 571 | 
 572 | fieldset:last-child, fieldset > *:last-child{ margin-bottom: 0 }
 573 | 
 574 | /* -- 单行表单 */
 575 | .ks-form.inline fieldset label, .ks-form fieldset.inline label{
 576 |     float: left;
 577 |     display: block;
 578 |     margin: 0 1em .5em 0;
 579 | }
 580 | 
 581 | .ks-form fieldset.inline:after{
 582 |     content: '';
 583 |     clear: both;
 584 |     display: block;
 585 | }
 586 | 
 587 | /* - 表格*/
 588 | .ks-table{
 589 |     width: 100%;
 590 |     overflow-x: auto;
 591 |     overflow-y: hidden;
 592 |     border-radius: 5px;
 593 | }
 594 | 
 595 | table{
 596 |     border: 0;
 597 |     width: 100%;
 598 |     max-width: 100%;
 599 |     border-collapse: collapse;
 600 | }
 601 | 
 602 | table th, table td{
 603 |     padding: .75em;
 604 |     text-align: left;
 605 |     vertical-align: top;
 606 | }
 607 | 
 608 | table > thead > tr{
 609 |     border-bottom: 2px solid #ccc;
 610 | }
 611 | 
 612 | table > tbody > tr > td{
 613 |     border-bottom: 1px solid #ddd;
 614 | }
 615 | 
 616 | table > tbody > tr:last-child > td{
 617 |     border-bottom: 0;
 618 | }
 619 | 
 620 | table > tbody > tr{
 621 |     transition: background .3s;
 622 | }
 623 | 
 624 | table > tbody > tr:hover{
 625 |     background: #eee;
 626 | }
 627 | 
 628 | table > thead > tr > th, table > tbody > tr > th, table > tfoot > tr > th,
 629 | table > thead > tr > td, table > tbody > tr > td, table > tfoot > tr > td{
 630 |     white-space: nowrap;
 631 | }
 632 | 
 633 | /* - 蓝色风格 */
 634 | table.fill{
 635 |     border: 1px solid transparent;
 636 | }
 637 | 
 638 | table.fill > thead{
 639 |     background: #3498db;
 640 |     border-left: 1px solid #3498db;
 641 |     border-right: 1px solid #3498db;
 642 | }
 643 | table.fill > thead > tr{
 644 |     border-bottom: none;
 645 | }
 646 | table.fill > thead > tr > th, table.fill > thead > tr > td{
 647 |     color: #fff;
 648 |     padding: 1em .75em;
 649 | }
 650 | 
 651 | table.fill > tbody{
 652 |     border-left: 1px solid #ddd;
 653 |     border-right: 1px solid #ddd;
 654 |     border-bottom: 1px solid #ddd;
 655 | }
 656 | table.fill > tbody > tr:nth-child(even) > th, table.fill > tbody > tr:nth-child(even){
 657 |     background: #f7f7f7;
 658 | }
 659 | 
 660 | /* - 嵌入式网页 */
 661 | iframe{
 662 |     border: none;
 663 | }
 664 | 
 665 | /* - 栅格系统 */
 666 | .row{
 667 |     display: flex;
 668 |     flex-wrap: wrap;
 669 |     margin-left: -1.25em;
 670 |     margin-right: -1.25em;
 671 | }
 672 | 
 673 | .row.thin{
 674 |     margin-left: -1em;
 675 |     margin-right: -1em;
 676 | }
 677 | 
 678 | .row.full{
 679 |     margin-left: 0;
 680 |     margin-right: 0;
 681 | }
 682 | 
 683 | .row.scrollable{
 684 |     overflow: auto;
 685 |     margin-left: 0;
 686 |     margin-right: 0;
 687 |     flex-wrap: nowrap;
 688 | }
 689 | 
 690 | /* -- 对齐方式 */
 691 | .row.right{ justify-content: flex-end; }
 692 | .row.center{ justify-content: center; }
 693 | .row.around{ justify-content: space-around; }
 694 | .row.between{ justify-content: space-between; }
 695 | 
 696 | /* -- 网格间距 */
 697 | .row [class*="col-"]{
 698 |     position: relative;
 699 |     padding-left: 1.25em;
 700 |     padding-right: 1.25em;
 701 | }
 702 | 
 703 | .row.thin [class*="col-"]{
 704 |     padding-left: 1em;
 705 |     padding-right: 1em;
 706 | }
 707 | 
 708 | .row.full [class*="col-"]{
 709 |     padding: 0;
 710 |     margin-bottom: 0;
 711 | }
 712 | 
 713 | /* -- 网格主体 */
 714 | .row [class*="col-s-"],
 715 | .row [class*="col-m-"],
 716 | .row [class*="col-l-"]{
 717 |     flex: 0 0 100%;
 718 |     max-width: 100%;
 719 |     margin-bottom: 2em;
 720 | }
 721 | 
 722 | .row [class*="col-s-"]:last-child, .row [class*="col-m-"]:last-child, .row [class*="col-l-"]:last-child{
 723 |     margin-bottom: 0;
 724 | }
 725 | 
 726 | @media screen and (min-width: 600px){
 727 |     .row [class*="col-s-"]{
 728 |         margin-bottom: 0;
 729 |     }
 730 | }
 731 | 
 732 | @media screen and (min-width: 900px){
 733 |     .row [class*="col-m-"]{
 734 |         margin-bottom: 0;
 735 |     }
 736 | }
 737 | 
 738 | @media screen and (min-width: 1024px){
 739 |     .row [class*="col-l-"]{
 740 |         margin-bottom: 0;
 741 |     }
 742 | }
 743 | 
 744 | @media screen and (max-width: 600px){
 745 |     .row [class*="wrap-s"]{
 746 |         margin-bottom: 1em;
 747 |     }
 748 | }
 749 | 
 750 | @media screen and (max-width: 900px){
 751 |     .row [class*="wrap-m"]{
 752 |         margin-bottom: 1em;
 753 |     }
 754 | }
 755 | 
 756 | @media screen and (min-width: 1024px){
 757 |     .row [class*="wrap-l"]{
 758 |         margin-bottom: 1em;
 759 |     }
 760 | }
 761 | 
 762 | @media screen and (min-width: 600px){
 763 |     .col-s-left-1{ right: 8.3333%; }
 764 |     .col-s-left-2{ right: 16.6666%; }
 765 |     .col-s-left-3{ right: 25%; }
 766 |     .col-s-left-4{ right: 33.3333%; }
 767 |     .col-s-left-5{ right: 41.6666%; }
 768 |     .col-s-left-6{ right: 50%; }
 769 |     .col-s-left-7{ right: 58.3333%; }
 770 |     .col-s-left-8{ right: 66.6666%; }
 771 |     .col-s-left-9{ right: 75%; }
 772 |     .col-s-left-10{ right: 83.3333%; }
 773 |     .col-s-left-11{ right: 91.6666%; }
 774 |     .col-s-left-12{ right: 100%; }
 775 | 
 776 |     .col-s-right-1{ left: 8.3333%; }
 777 |     .col-s-right-2{ left: 16.6666%; }
 778 |     .col-s-right-3{ left: 25%; }
 779 |     .col-s-right-4{ left: 33.3333%; }
 780 |     .col-s-right-5{ left: 41.6666%; }
 781 |     .col-s-right-6{ left: 50%; }
 782 |     .col-s-right-7{ left: 58.3333%; }
 783 |     .col-s-right-8{ left: 66.6666%; }
 784 |     .col-s-right-9{ left: 75%; }
 785 |     .col-s-right-10{ left: 83.3333%; }
 786 |     .col-s-right-11{ left: 91.6666%; }
 787 |     .col-s-right-12{ left: 100%; }
 788 | }
 789 | 
 790 | @media screen and (min-width: 900px){
 791 |     .col-m-left-1{ right: 8.3333%; }
 792 |     .col-m-left-2{ right: 16.6666%; }
 793 |     .col-m-left-3{ right: 25%; }
 794 |     .col-m-left-4{ right: 33.3333%; }
 795 |     .col-m-left-5{ right: 41.6666%; }
 796 |     .col-m-left-6{ right: 50%; }
 797 |     .col-m-left-7{ right: 58.3333%; }
 798 |     .col-m-left-8{ right: 66.6666%; }
 799 |     .col-m-left-9{ right: 75%; }
 800 |     .col-m-left-10{ right: 83.3333%; }
 801 |     .col-m-left-11{ right: 91.6666%; }
 802 |     .col-m-left-12{ right: 100%; }
 803 | 
 804 |     .col-m-right-1{ left: 8.3333%; }
 805 |     .col-m-right-2{ left: 16.6666%; }
 806 |     .col-m-right-3{ left: 25%; }
 807 |     .col-m-right-4{ left: 33.3333%; }
 808 |     .col-m-right-5{ left: 41.6666%; }
 809 |     .col-m-right-6{ left: 50%; }
 810 |     .col-m-right-7{ left: 58.3333%; }
 811 |     .col-m-right-8{ left: 66.6666%; }
 812 |     .col-m-right-9{ left: 75%; }
 813 |     .col-m-right-10{ left: 83.3333%; }
 814 |     .col-m-right-11{ left: 91.6666%; }
 815 |     .col-m-right-12{ left: 100%; }
 816 | }
 817 | 
 818 | @media screen and (min-width: 900px){
 819 |     .col-l-left-1{ right: 8.3333%; }
 820 |     .col-l-left-2{ right: 16.6666%; }
 821 |     .col-l-left-3{ right: 25%; }
 822 |     .col-l-left-4{ right: 33.3333%; }
 823 |     .col-l-left-5{ right: 41.6666%; }
 824 |     .col-l-left-6{ right: 50%; }
 825 |     .col-l-left-7{ right: 58.3333%; }
 826 |     .col-l-left-8{ right: 66.6666%; }
 827 |     .col-l-left-9{ right: 75%; }
 828 |     .col-l-left-10{ right: 83.3333%; }
 829 |     .col-l-left-11{ right: 91.6666%; }
 830 |     .col-l-left-12{ right: 100%; }
 831 | 
 832 |     .col-l-right-1{ left: 8.3333%; }
 833 |     .col-l-right-2{ left: 16.6666%; }
 834 |     .col-l-right-3{ left: 25%; }
 835 |     .col-l-right-4{ left: 33.3333%; }
 836 |     .col-l-right-5{ left: 41.6666%; }
 837 |     .col-l-right-6{ left: 50%; }
 838 |     .col-l-right-7{ left: 58.3333%; }
 839 |     .col-l-right-8{ left: 66.6666%; }
 840 |     .col-l-right-9{ left: 75%; }
 841 |     .col-l-right-10{ left: 83.3333%; }
 842 |     .col-l-right-11{ left: 91.6666%; }
 843 |     .col-l-right-12{ left: 100%; }
 844 | }
 845 | 
 846 | /* --- 固定的 */
 847 | .row .col-1{
 848 |     -ms-flex: 0 0 8.3333%;
 849 |     flex: 0 0 8.3333%;
 850 |     max-width: 8.3333%;
 851 | }
 852 | 
 853 | .row .col-2{
 854 |     -ms-flex: 0 0 16.6666%;
 855 |     flex: 0 0 16.6666%;
 856 |     max-width: 16.6666%;
 857 | }
 858 | 
 859 | .row .col-3{
 860 |     -ms-flex: 0 0 25%;
 861 |     flex: 0 0 25%;
 862 |     max-width: 25%;
 863 | }
 864 | 
 865 | .row .col-4{
 866 |     -ms-flex: 0 0 33.3333%;
 867 |     flex: 0 0 33.3333%;
 868 |     max-width: 33.3333%;
 869 | }
 870 | 
 871 | .row .col-5{
 872 |     -ms-flex: 0 0 41.3333%;
 873 |     flex: 0 0 41.6666%;
 874 |     max-width: 41.6666%;
 875 | }
 876 | 
 877 | .row .col-6{
 878 |     -ms-flex: 0 0 50%;
 879 |     flex: 0 0 50%;
 880 |     max-width: 50%;
 881 | }
 882 | 
 883 | .row .col-7{
 884 |     -ms-flex: 0 0 58.3333%;
 885 |     flex: 0 0 58.3333%;
 886 |     max-width: 58.3333%;
 887 | }
 888 | 
 889 | .row .col-8{
 890 |     -ms-flex: 0 0 66.6666%;
 891 |     flex: 0 0 66.6666%;
 892 |     max-width: 66.6666%;
 893 | }
 894 | 
 895 | .row .col-9{
 896 |     -ms-flex: 0 0 75%;
 897 |     flex: 0 0 75%;
 898 |     max-width: 75%;
 899 | }
 900 | 
 901 | .row .col-10{
 902 |     -ms-flex: 0 0 83.3333%;
 903 |     flex: 0 0 83.3333%;
 904 |     max-width: 83.3333%;
 905 | }
 906 | 
 907 | .row .col-11{
 908 |     -ms-flex: 0 0 91.6666%;
 909 |     flex: 0 0 91.6666%;
 910 |     max-width: 91.6666%;
 911 | }
 912 | 
 913 | .row .col-12{
 914 |     -ms-flex: 0 0 100%;
 915 |     flex: 0 0 100%;
 916 |     max-width: 100%;
 917 | }
 918 | 
 919 | /* --- 手机 */
 920 | @media screen and (min-width: 600px){
 921 |     .row .col-s-1{
 922 |         -ms-flex: 0 0 8.3333%;
 923 |         flex: 0 0 8.3333%;
 924 |         max-width: 8.3333%;
 925 |     }
 926 | 
 927 |     .row .col-s-2{
 928 |         -ms-flex: 0 0 16.6666%;
 929 |         flex: 0 0 16.6666%;
 930 |         max-width: 16.6666%;
 931 |     }
 932 | 
 933 |     .row .col-s-3{
 934 |         -ms-flex: 0 0 25%;
 935 |         flex: 0 0 25%;
 936 |         max-width: 25%;
 937 |     }
 938 | 
 939 |     .row .col-s-4{
 940 |         -ms-flex: 0 0 33.3333%;
 941 |         flex: 0 0 33.3333%;
 942 |         max-width: 33.3333%;
 943 |     }
 944 | 
 945 |     .row .col-s-5{
 946 |         -ms-flex: 0 0 41.3333%;
 947 |         flex: 0 0 41.6666%;
 948 |         max-width: 41.6666%;
 949 |     }
 950 | 
 951 |     .row .col-s-6{
 952 |         -ms-flex: 0 0 50%;
 953 |         flex: 0 0 50%;
 954 |         max-width: 50%;
 955 |     }
 956 | 
 957 |     .row .col-s-7{
 958 |         -ms-flex: 0 0 58.3333%;
 959 |         flex: 0 0 58.3333%;
 960 |         max-width: 58.3333%;
 961 |     }
 962 | 
 963 |     .row .col-s-8{
 964 |         -ms-flex: 0 0 66.6666%;
 965 |         flex: 0 0 66.6666%;
 966 |         max-width: 66.6666%;
 967 |     }
 968 | 
 969 |     .row .col-s-9{
 970 |         -ms-flex: 0 0 75%;
 971 |         flex: 0 0 75%;
 972 |         max-width: 75%;
 973 |     }
 974 | 
 975 |     .row .col-s-10{
 976 |         -ms-flex: 0 0 83.3333%;
 977 |         flex: 0 0 83.3333%;
 978 |         max-width: 83.3333%;
 979 |     }
 980 | 
 981 |     .row .col-s-11{
 982 |         -ms-flex: 0 0 91.6666%;
 983 |         flex: 0 0 91.6666%;
 984 |         max-width: 91.6666%;
 985 |     }
 986 | 
 987 |     .row .col-s-12{
 988 |         -ms-flex: 0 0 100%;
 989 |         flex: 0 0 100%;
 990 |         max-width: 100%;
 991 |     }
 992 | }
 993 | 
 994 | /* --- 平板 */
 995 | @media screen and (min-width: 900px){
 996 |     .row .col-m-1{
 997 |         -ms-flex: 0 0 8.3333%;
 998 |         flex: 0 0 8.3333%;
 999 |         max-width: 8.3333%;
1000 |     }
1001 | 
1002 |     .row .col-m-2{
1003 |         -ms-flex: 0 0 16.6666%;
1004 |         flex: 0 0 16.6666%;
1005 |         max-width: 16.6666%;
1006 |     }
1007 | 
1008 |     .row .col-m-3{
1009 |         -ms-flex: 0 0 25%;
1010 |         flex: 0 0 25%;
1011 |         max-width: 25%;
1012 |     }
1013 | 
1014 |     .row .col-m-4{
1015 |         -ms-flex: 0 0 33.3333%;
1016 |         flex: 0 0 33.3333%;
1017 |         max-width: 33.3333%;
1018 |     }
1019 | 
1020 |     .row .col-m-5{
1021 |         -ms-flex: 0 0 41.3333%;
1022 |         flex: 0 0 41.6666%;
1023 |         max-width: 41.6666%;
1024 |     }
1025 | 
1026 |     .row .col-m-6{
1027 |         -ms-flex: 0 0 50%;
1028 |         flex: 0 0 50%;
1029 |         max-width: 50%;
1030 |     }
1031 | 
1032 |     .row .col-m-7{
1033 |         -ms-flex: 0 0 58.3333%;
1034 |         flex: 0 0 58.3333%;
1035 |         max-width: 58.3333%;
1036 |     }
1037 | 
1038 |     .row .col-m-8{
1039 |         -ms-flex: 0 0 66.6666%;
1040 |         flex: 0 0 66.6666%;
1041 |         max-width: 66.6666%;
1042 |     }
1043 | 
1044 |     .row .col-m-9{
1045 |         -ms-flex: 0 0 75%;
1046 |         flex: 0 0 75%;
1047 |         max-width: 75%;
1048 |     }
1049 | 
1050 |     .row .col-m-10{
1051 |         -ms-flex: 0 0 83.3333%;
1052 |         flex: 0 0 83.3333%;
1053 |         max-width: 83.3333%;
1054 |     }
1055 | 
1056 |     .row .col-m-11{
1057 |         -ms-flex: 0 0 91.6666%;
1058 |         flex: 0 0 91.6666%;
1059 |         max-width: 91.6666%;
1060 |     }
1061 | 
1062 |     .row .col-m-12{
1063 |         -ms-flex: 0 0 100%;
1064 |         flex: 0 0 100%;
1065 |         max-width: 100%;
1066 |     }
1067 | }
1068 | 
1069 | /* --- 电脑 */
1070 | @media screen and (min-width: 1024px){
1071 |     .row .col-l-1{
1072 |         -ms-flex: 0 0 8.3333%;
1073 |         flex: 0 0 8.3333%;
1074 |         max-width: 8.3333%;
1075 |     }
1076 | 
1077 |     .row .col-l-2{
1078 |         -ms-flex: 0 0 16.6666%;
1079 |         flex: 0 0 16.6666%;
1080 |         max-width: 16.6666%;
1081 |     }
1082 | 
1083 |     .row .col-l-3{
1084 |         -ms-flex: 0 0 25%;
1085 |         flex: 0 0 25%;
1086 |         max-width: 25%;
1087 |     }
1088 | 
1089 |     .row .col-l-4{
1090 |         -ms-flex: 0 0 33.3333%;
1091 |         flex: 0 0 33.3333%;
1092 |         max-width: 33.3333%;
1093 |     }
1094 | 
1095 |     .row .col-l-5{
1096 |         -ms-flex: 0 0 41.3333%;
1097 |         flex: 0 0 41.6666%;
1098 |         max-width: 41.6666%;
1099 |     }
1100 | 
1101 |     .row .col-l-6{
1102 |         -ms-flex: 0 0 50%;
1103 |         flex: 0 0 50%;
1104 |         max-width: 50%;
1105 |     }
1106 | 
1107 |     .row .col-l-7{
1108 |         -ms-flex: 0 0 58.3333%;
1109 |         flex: 0 0 58.3333%;
1110 |         max-width: 58.3333%;
1111 |     }
1112 | 
1113 |     .row .col-l-8{
1114 |         -ms-flex: 0 0 66.6666%;
1115 |         flex: 0 0 66.6666%;
1116 |         max-width: 66.6666%;
1117 |     }
1118 | 
1119 |     .row .col-l-9{
1120 |         -ms-flex: 0 0 75%;
1121 |         flex: 0 0 75%;
1122 |         max-width: 75%;
1123 |     }
1124 | 
1125 |     .row .col-l-10{
1126 |         -ms-flex: 0 0 83.3333%;
1127 |         flex: 0 0 83.3333%;
1128 |         max-width: 83.3333%;
1129 |     }
1130 | 
1131 |     .row .col-l-11{
1132 |         -ms-flex: 0 0 91.6666%;
1133 |         flex: 0 0 91.6666%;
1134 |         max-width: 91.6666%;
1135 |     }
1136 | 
1137 |     .row .col-l-12{
1138 |         -ms-flex: 0 0 100%;
1139 |         flex: 0 0 100%;
1140 |         max-width: 100%;
1141 |     }
1142 | }
1143 | 
1144 | /* -- 网格对齐方式 */
1145 | .row > .left, .row > .right, .row > .top, .row > .bottom, .row > .center{
1146 |     display: flex;
1147 |     flex-direction: column;
1148 | }
1149 | 
1150 | .row > .center{
1151 |     align-items: center;
1152 |     justify-content: center;
1153 | }
1154 | 
1155 | .row > .center-fixed{
1156 |     text-align: center;
1157 | }
1158 | 
1159 | .row > .left{
1160 |     -webkit-box-align: start;
1161 |     align-items: flex-start;
1162 | }
1163 | 
1164 | .row > .right{
1165 |     -webkit-box-align: end;
1166 |     align-items: flex-end;
1167 | }
1168 | 
1169 | .row > .top{
1170 |     justify-content: flex-start;
1171 | }
1172 | 
1173 | .row > .bottom{
1174 |     justify-content: flex-end;
1175 | }
1176 | 
1177 | @media screen and (max-width: 900px){
1178 |     .row > .to-center{
1179 |         align-items: center !important;
1180 |     }
1181 | }
1182 | 
1183 | /* - 隐藏栅格功能 */
1184 | @media screen and (max-width: 600px){
1185 |     .row > .hide-s{ display: none; }
1186 | }
1187 | 
1188 | @media screen and (max-width: 900px){
1189 |     .row > .hide-m{ display: none; }
1190 | }
1191 | 
1192 | @media screen and (max-width: 1024px){
1193 |     .row > .hide-l{ display: none; }
1194 | }
1195 | 
1196 | /* 4 - 动画
1197 | -------------------------------- */
1198 | 
1199 | /* - 淡入淡出 */
1200 | @keyframes fade-in{ from{ opacity: 0 } to{ opacity: 1 } }
1201 | @-webkit-keyframes fade-in{ from{ opacity: 0 } to{ opacity: 1 } }
1202 | 
1203 | @keyframes fade-off{ from{ opacity: 1 } to{ opacity: 0 } }
1204 | @-webkit-keyframes fade-off{ from{ opacity: 1 } to{ opacity: 0 } }
1205 | 
1206 | @keyframes fade-in-top{ from{ opacity: 0; transform: translateY(20px) } to{ opacity: 1; transform: translateY(0) } }
1207 | @-webkit-keyframes fade-in-top{ from{ opacity: 0; transform: translateY(20px) } to{ opacity: 1; transform: translateY(0) } }
1208 | 
1209 | @keyframes fade-in-bottom{ from{ opacity: 0; transform: translateY(-20px) } to{ opacity: 1; transform: translateY(0) } }
1210 | @-webkit-keyframes fade-in-bottom{ from{ opacity: 0; transform: translateY(-20px) } to{ opacity: 1; transform: translateY(0) } }
1211 | 
1212 | @keyframes fade-in-left{ from{ opacity: 0; transform: translateX(20px) } to{ opacity: 1; transform: translateX(0) } }
1213 | @-webkit-keyframes fade-in-left{ from{ opacity: 0; transform: translateX(20px) } to{ opacity: 1; transform: translateX(0) } }
1214 | 
1215 | @keyframes fade-in-right{ from{ opacity: 0; transform: translateX(-20px) } to{ opacity: 1; transform: translateX(0) } }
1216 | @-webkit-keyframes fade-in-right{ from{ opacity: 0; transform: translateX(-20px) } to{ opacity: 1; transform: translateX(0) } }
1217 | 
1218 | /* - 淡入缩放 */
1219 | @keyframes fade-small-large{ from{ opacity: 0; transform: scale(.5, .5) } to{ opacity: 1; transform: scale(1, 1) } }
1220 | @-webkit-keyframes fade-small-large{ from{ opacity: 0; transform: scale(.5, .5) } to{ opacity: 1; transform: scale(1, 1) } }
1221 | 
1222 | @keyframes fade-large-small{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(.5, .5) } }
1223 | @-webkit-keyframes fade-large-small{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(.5, .5) } }
1224 | 
1225 | @keyframes fade-larger-small{ from{ opacity: 0; transform: scale(1.5, 1.5) } to{ opacity: 1; transform: scale(1, 1) } }
1226 | @-webkit-keyframes fade-larger-small{ from{ opacity: 0; transform: scale(1.5, 1.5) } to{ opacity: 1; transform: scale(1, 1) } }
1227 | 
1228 | @keyframes fade-small-larger{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(1.5, 1.5) } }
1229 | @-webkit-keyframes fade-small-larger{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(1.5, 1.5) } }
1230 | 
1231 | @keyframes scale-small-large{ from{ transform: scale(0, 0) } to{ transform: scale(1, 1) } }
1232 | @-webkit-keyframes scale-small-large{ from{ transform: scale(0, 0) } to{ transform: scale(1, 1) } }
1233 | 
1234 | @keyframes scale-large-small{ from{ transform: scale(1, 1) } to{ transform: scale(0, 0) } }
1235 | @-webkit-keyframes scale-large-small{ from{ transform: scale(1, 1) } to{ transform: scale(0, 0) } }
1236 | 
1237 | /* - 平移 */
1238 | @keyframes up-and-down{ from{ transform: translateY(-20px) } to{ transform: translateY(20px) } }
1239 | @-webkit-keyframes up-and-down{ from{ transform: translateY(-20px) } to{ transform: translateY(20px) } }
1240 | 
1241 | @keyframes left-and-right{ from{ transform: translateX(-20px) } to{ transform: translateX(20px) } }
1242 | @-webkit-keyframes left-and-right{ from{ transform: translateX(-20px) } to{ transform: translateX(20px) } }
1243 | 
1244 | /* - 旋转 */
1245 | @keyframes rotate{ from{ transform: rotate(0deg) } to{ transform: rotate(360deg) } }
1246 | @-webkit-keyframes rotate{ from{ transform: rotate(0deg) } to{ transform: rotate(360deg) } }
1247 | 
1248 | /* - 弹跳*/
1249 | @keyframes jump{
1250 |     0% {
1251 |         transform: translateY(0) scale(1.15,.8)
1252 |     }
1253 | 
1254 |     20% {
1255 |         transform: translateY(-35px) scaleY(1.1)
1256 |     }
1257 | 
1258 |     50% {
1259 |         transform: translateY(-50px) scale(1)
1260 |     }
1261 | 
1262 |     80% {
1263 |         transform: translateY(-35px) scale(1)
1264 |     }
1265 | 
1266 |     to {
1267 |         transform: translateY(0) scale(1.15,.8)
1268 |     }
1269 | }
1270 | 
1271 | /* 5 - 组件
1272 | -------------------------------- */
1273 | 
1274 | /* - 弹窗 */
1275 | .ks-notice-list{
1276 |     top: 2em;
1277 |     left: 0;
1278 |     right: 0;
1279 |     z-index: 60;
1280 |     position: fixed;
1281 |     user-select: none;
1282 |     pointer-events: none;
1283 | }
1284 | 
1285 | .ks-notice{
1286 |     color: #fff;
1287 |     display: table;
1288 |     background: #333;
1289 |     border-radius: 3em;
1290 |     pointer-events: auto;
1291 |     margin: 0 auto 1em auto;
1292 |     box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.2);
1293 |     animation: fade-small-large .3s both;
1294 |     -webkit-animation: fade-small-large .3s both;
1295 | }
1296 | 
1297 | .ks-notice.remove{
1298 |     animation: fade-in-top .3s both reverse;
1299 |     -webkit-animation: fade-in-top .3s both reverse;
1300 | }
1301 | 
1302 | /* -- 弹窗颜色 */
1303 | .ks-notice.red{
1304 |     background: #ea644a;
1305 | }
1306 | 
1307 | .ks-notice.yellow{
1308 |     background: #f1a325;
1309 | }
1310 | 
1311 | .ks-notice.blue{
1312 |     background: #3498db;
1313 | }
1314 | 
1315 | .ks-notice.green{
1316 |     background: #38b03f;
1317 | }
1318 | 
1319 | .ks-notice .content, .ks-notice.dismiss .close{
1320 |     padding: .5em 1em;
1321 |     display: table-cell;
1322 | }
1323 | 
1324 | .ks-notice.dismiss .close{
1325 |     cursor: pointer;
1326 |     border-radius: 0 1em 1em 0;
1327 |     transition: background .3s;
1328 | }
1329 | 
1330 | .ks-notice.dismiss .close:hover{
1331 |     background: rgba(0, 0, 0, .1);
1332 | }
1333 | 
1334 | .ks-notice.dismiss .close:after{
1335 |     content: '×';
1336 |     font: inherit;
1337 | }
1338 | 
1339 | /* - 遮罩 */
1340 | .ks-overlay{
1341 |     top: 0;
1342 |     left: 0;
1343 |     right: 0;
1344 |     bottom: 0;
1345 |     z-index: 50;
1346 |     position: fixed;
1347 |     animation: fade-in .5s both;
1348 |     -webkit-animation: fade-in .5s both;
1349 |     background: rgba(0, 0, 0, .5);
1350 | }
1351 | 
1352 | .ks-overlay.remove{
1353 |     animation: fade-off .5s both;
1354 |     -webkit-animation: fade-off .5s both;
1355 | }
1356 | 
1357 | /* - 图片放大 */
1358 | [ks-image=active]{
1359 |     cursor: pointer;
1360 |     cursor: zoom-in;
1361 | }
1362 | 
1363 | .ks-image{
1364 |     top: 0;
1365 |     left: 0;
1366 |     right: 0;
1367 |     bottom: 0;
1368 |     z-index: 66;
1369 |     position: fixed;
1370 |     user-select: none;
1371 | }
1372 | 
1373 | .ks-image:before{
1374 |     top: 0;
1375 |     left: 0;
1376 |     right: 0;
1377 |     bottom: 0;
1378 |     content: '';
1379 |     position: absolute;
1380 |     animation: fade-in .5s both;
1381 |     -webkit-animation: fade-in .5s both;
1382 |     background: rgba(0, 0, 0, .5);
1383 | }
1384 | 
1385 | .ks-image .ks-prev{
1386 |     width: 10%;
1387 |     height: 100%;
1388 |     position: absolute;
1389 |     cursor: url(left.png), pointer;
1390 | }
1391 | .ks-image .ks-next{
1392 |     right: 0;
1393 |     width: 10%;
1394 |     height: 100%;
1395 |     position: absolute;
1396 |     cursor: url(right.png), pointer;
1397 | }
1398 | 
1399 | .ks-image .ks-ball{
1400 |     top: 1em;
1401 |     right: 1em;
1402 |     width: 2em;
1403 |     height: 2em;
1404 |     opacity: 0;
1405 |     border-radius: 66%;
1406 |     position: absolute;
1407 |     pointer-events: none;
1408 |     transition: opacity .3s;
1409 |     border: .5em #fff solid;
1410 |     border-left-color: #3498db;
1411 |     animation: rotate .5s linear infinite paused;
1412 |     -webkit-animation: rotate .5s linear infinite paused;
1413 | }
1414 | .ks-image .ks-ball.loading{
1415 |     opacity: 1;
1416 |     animation-play-state: running;
1417 | }
1418 | 
1419 | .ks-image img{
1420 |     top: 0;
1421 |     left: 0;
1422 |     right: 0;
1423 |     bottom: 0;
1424 |     margin: auto;
1425 |     max-width: 90%;
1426 |     max-height: 90%;
1427 |     cursor: zoom-out;
1428 |     position: absolute;
1429 |     animation: fade-small-large .3s backwards;
1430 |     -webkit-animation: fade-small-large .3s backwards;
1431 | }
1432 | 
1433 | .ks-image.remove:before{
1434 |     animation: fade-off .3s both;
1435 |     -webkit-animation: fade-off .3s both;
1436 | }
1437 | 
1438 | .ks-image.remove img{
1439 |     animation: fade-large-small .3s both;
1440 |     -webkit-animation: fade-large-small .3s both;
1441 | }
1442 | 
1443 | .ks-image img[src$=".jpg"]{
1444 |     box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
1445 | }
1446 | 
1447 | /* ----
1448 | 
1449 | :) Copyright (C) By Dreamer-Paul.
1450 | 
1451 | ---- */


--------------------------------------------------------------------------------