├── .babelrc ├── .editorconfig ├── .eslintignore ├── .gitignore ├── README.md ├── build ├── build.js ├── dev-client.js ├── dev-server.js ├── utils.js ├── webpack.base.conf.js ├── webpack.dev.conf.js └── webpack.prod.conf.js ├── config ├── dev.env.js ├── index.js ├── prod.env.js └── test.env.js ├── docs ├── 7620n.tar.gz ├── fonts │ ├── ionicons.eot │ ├── ionicons.svg │ ├── ionicons.ttf │ └── ionicons.woff ├── index.html ├── static │ ├── css │ │ ├── app.feef1bf9a8404da92f963c23ab27bd9e.css │ │ └── app.feef1bf9a8404da92f963c23ab27bd9e.css.map │ └── js │ │ ├── app.c32db84a2a5af9d41444.js │ │ ├── app.c32db84a2a5af9d41444.js.map │ │ ├── manifest.42dd3e13291521dcdca2.js │ │ ├── manifest.42dd3e13291521dcdca2.js.map │ │ ├── vendor.fd18057290da025b73fc.js │ │ └── vendor.fd18057290da025b73fc.js.map ├── style.css └── style │ ├── animate.min.css │ ├── default.css │ ├── ionicons.min.css │ └── styles.css ├── example ├── CNAME ├── fonts │ ├── ionicons.eot │ ├── ionicons.svg │ ├── ionicons.ttf │ └── ionicons.woff ├── index.html ├── style │ ├── animate.min.css │ ├── default.css │ ├── ionicons.min.css │ └── styles.css └── test.html ├── fonts ├── ionicons.eot ├── ionicons.svg ├── ionicons.ttf └── ionicons.woff ├── index.html ├── package.json ├── src ├── App.vue ├── assets │ └── logo.png ├── components │ ├── BlogPage.vue │ ├── CookDetailPage.vue │ ├── Hello.vue │ ├── Movie.vue │ ├── SMZDM.vue │ ├── ThirdPage.vue │ ├── food.vue │ ├── home.vue │ └── request.js └── main.js ├── static └── .gitkeep └── style ├── animate.min.css ├── default.css ├── ionicons.min.css └── styles.css /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-2"], 3 | "plugins": ["transform-runtime"], 4 | "comments": false 5 | } 6 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/*.js 2 | config/*.js 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | selenium-debug.log 6 | test/unit/coverage 7 | test/e2e/reports 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # css 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | 17 | # run unit tests 18 | npm run unit 19 | 20 | # run e2e tests 21 | npm run e2e 22 | 23 | # run all tests 24 | npm test 25 | ``` 26 | 27 | For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 28 | -------------------------------------------------------------------------------- /build/build.js: -------------------------------------------------------------------------------- 1 | // https://github.com/shelljs/shelljs 2 | require('shelljs/global') 3 | env.NODE_ENV = 'production' 4 | 5 | var path = require('path') 6 | var config = require('../config') 7 | var ora = require('ora') 8 | var webpack = require('webpack') 9 | var webpackConfig = require('./webpack.prod.conf') 10 | 11 | console.log( 12 | ' Tip:\n' + 13 | ' Built files are meant to be served over an HTTP server.\n' + 14 | ' Opening index.html over file:// won\'t work.\n' 15 | ) 16 | 17 | var spinner = ora('building for production...') 18 | spinner.start() 19 | 20 | var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory) 21 | rm('-rf', assetsPath) 22 | mkdir('-p', assetsPath) 23 | cp('-R', 'static/', assetsPath) 24 | 25 | webpack(webpackConfig, function (err, stats) { 26 | spinner.stop() 27 | if (err) throw err 28 | process.stdout.write(stats.toString({ 29 | colors: true, 30 | modules: false, 31 | children: false, 32 | chunks: false, 33 | chunkModules: false 34 | }) + '\n') 35 | }) 36 | -------------------------------------------------------------------------------- /build/dev-client.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | require('eventsource-polyfill') 3 | var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') 4 | 5 | hotClient.subscribe(function (event) { 6 | if (event.action === 'reload') { 7 | window.location.reload() 8 | } 9 | }) 10 | -------------------------------------------------------------------------------- /build/dev-server.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var express = require('express') 3 | var webpack = require('webpack') 4 | var config = require('../config') 5 | var proxyMiddleware = require('http-proxy-middleware') 6 | var webpackConfig = process.env.NODE_ENV === 'testing' 7 | ? require('./webpack.prod.conf') 8 | : require('./webpack.dev.conf') 9 | 10 | // default port where dev server listens for incoming traffic 11 | var port = process.env.PORT || config.dev.port 12 | // Define HTTP proxies to your custom API backend 13 | // https://github.com/chimurai/http-proxy-middleware 14 | var proxyTable = config.dev.proxyTable 15 | 16 | var app = express() 17 | var compiler = webpack(webpackConfig) 18 | 19 | var devMiddleware = require('webpack-dev-middleware')(compiler, { 20 | publicPath: webpackConfig.output.publicPath, 21 | stats: { 22 | colors: true, 23 | chunks: false 24 | } 25 | }) 26 | 27 | var hotMiddleware = require('webpack-hot-middleware')(compiler) 28 | // force page reload when html-webpack-plugin template changes 29 | compiler.plugin('compilation', function (compilation) { 30 | compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { 31 | hotMiddleware.publish({ action: 'reload' }) 32 | cb() 33 | }) 34 | }) 35 | 36 | // proxy api requests 37 | Object.keys(proxyTable).forEach(function (context) { 38 | var options = proxyTable[context] 39 | if (typeof options === 'string') { 40 | options = { target: options } 41 | } 42 | app.use(proxyMiddleware(context, options)) 43 | }) 44 | 45 | // handle fallback for HTML5 history API 46 | app.use(require('connect-history-api-fallback')()) 47 | 48 | // serve webpack bundle output 49 | app.use(devMiddleware) 50 | 51 | // enable hot-reload and state-preserving 52 | // compilation error display 53 | app.use(hotMiddleware) 54 | 55 | // serve pure static assets 56 | var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) 57 | app.use(staticPath, express.static('./static')) 58 | 59 | module.exports = app.listen(port, function (err) { 60 | if (err) { 61 | console.log(err) 62 | return 63 | } 64 | console.log('Listening at http://localhost:' + port + '\n') 65 | }) 66 | -------------------------------------------------------------------------------- /build/utils.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 4 | 5 | exports.assetsPath = function (_path) { 6 | var assetsSubDirectory = process.env.NODE_ENV === 'production' 7 | ? config.build.assetsSubDirectory 8 | : config.dev.assetsSubDirectory 9 | return path.posix.join(assetsSubDirectory, _path) 10 | } 11 | 12 | exports.cssLoaders = function (options) { 13 | options = options || {} 14 | // generate loader string to be used with extract text plugin 15 | function generateLoaders (loaders) { 16 | var sourceLoader = loaders.map(function (loader) { 17 | var extraParamChar 18 | if (/\?/.test(loader)) { 19 | loader = loader.replace(/\?/, '-loader?') 20 | extraParamChar = '&' 21 | } else { 22 | loader = loader + '-loader' 23 | extraParamChar = '?' 24 | } 25 | return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '') 26 | }).join('!') 27 | 28 | if (options.extract) { 29 | return ExtractTextPlugin.extract('vue-style-loader', sourceLoader) 30 | } else { 31 | return ['vue-style-loader', sourceLoader].join('!') 32 | } 33 | } 34 | 35 | // http://vuejs.github.io/vue-loader/configurations/extract-css.html 36 | return { 37 | css: generateLoaders(['css']), 38 | postcss: generateLoaders(['css']), 39 | less: generateLoaders(['css', 'less']), 40 | sass: generateLoaders(['css', 'sass?indentedSyntax']), 41 | scss: generateLoaders(['css', 'sass']), 42 | stylus: generateLoaders(['css', 'stylus']), 43 | styl: generateLoaders(['css', 'stylus']) 44 | } 45 | } 46 | 47 | // Generate loaders for standalone style files (outside of .vue) 48 | exports.styleLoaders = function (options) { 49 | var output = [] 50 | var loaders = exports.cssLoaders(options) 51 | for (var extension in loaders) { 52 | var loader = loaders[extension] 53 | output.push({ 54 | test: new RegExp('\\.' + extension + '$'), 55 | loader: loader 56 | }) 57 | } 58 | return output 59 | } 60 | -------------------------------------------------------------------------------- /build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var utils = require('./utils') 4 | var projectRoot = path.resolve(__dirname, '../') 5 | 6 | module.exports = { 7 | entry: { 8 | app: './src/main.js' 9 | }, 10 | output: { 11 | path: config.build.assetsRoot, 12 | publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, 13 | filename: '[name].js' 14 | }, 15 | resolve: { 16 | extensions: ['', '.js', '.vue'], 17 | fallback: [path.join(__dirname, '../node_modules')], 18 | alias: { 19 | 'src': path.resolve(__dirname, '../src'), 20 | 'assets': path.resolve(__dirname, '../src/assets'), 21 | 'components': path.resolve(__dirname, '../src/components') 22 | } 23 | }, 24 | resolveLoader: { 25 | fallback: [path.join(__dirname, '../node_modules')] 26 | }, 27 | module: { 28 | loaders: [ 29 | { 30 | test: /\.vue$/, 31 | loader: 'vue' 32 | }, 33 | { 34 | test: /\.js$/, 35 | loader: 'babel', 36 | include: projectRoot, 37 | exclude: /node_modules/ 38 | }, 39 | { 40 | test: /\.json$/, 41 | loader: 'json' 42 | }, 43 | { 44 | test: /\.html$/, 45 | loader: 'vue-html' 46 | }, 47 | { 48 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 49 | loader: 'url', 50 | query: { 51 | limit: 10000, 52 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 53 | } 54 | }, 55 | { 56 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 57 | loader: 'url', 58 | query: { 59 | limit: 10000, 60 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 61 | } 62 | } 63 | ] 64 | }, 65 | vue: { 66 | loaders: utils.cssLoaders() 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | var config = require('../config') 2 | var webpack = require('webpack') 3 | var merge = require('webpack-merge') 4 | var utils = require('./utils') 5 | var baseWebpackConfig = require('./webpack.base.conf') 6 | var HtmlWebpackPlugin = require('html-webpack-plugin') 7 | 8 | // add hot-reload related code to entry chunks 9 | Object.keys(baseWebpackConfig.entry).forEach(function (name) { 10 | baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) 11 | }) 12 | 13 | module.exports = merge(baseWebpackConfig, { 14 | module: { 15 | loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) 16 | }, 17 | // eval-source-map is faster for development 18 | devtool: '#eval-source-map', 19 | plugins: [ 20 | new webpack.DefinePlugin({ 21 | 'process.env': config.dev.env 22 | }), 23 | // https://github.com/glenjamin/webpack-hot-middleware#installation--usage 24 | new webpack.optimize.OccurenceOrderPlugin(), 25 | new webpack.HotModuleReplacementPlugin(), 26 | new webpack.NoErrorsPlugin(), 27 | // https://github.com/ampedandwired/html-webpack-plugin 28 | new HtmlWebpackPlugin({ 29 | filename: 'index.html', 30 | template: 'index.html', 31 | inject: true 32 | }) 33 | ] 34 | }) 35 | -------------------------------------------------------------------------------- /build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var utils = require('./utils') 4 | var webpack = require('webpack') 5 | var merge = require('webpack-merge') 6 | var baseWebpackConfig = require('./webpack.base.conf') 7 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 8 | var HtmlWebpackPlugin = require('html-webpack-plugin') 9 | var env = process.env.NODE_ENV === 'testing' 10 | ? require('../config/test.env') 11 | : config.build.env 12 | 13 | var webpackConfig = merge(baseWebpackConfig, { 14 | module: { 15 | loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true }) 16 | }, 17 | devtool: config.build.productionSourceMap ? '#source-map' : false, 18 | output: { 19 | path: config.build.assetsRoot, 20 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 21 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 22 | }, 23 | vue: { 24 | loaders: utils.cssLoaders({ 25 | sourceMap: config.build.productionSourceMap, 26 | extract: true 27 | }) 28 | }, 29 | plugins: [ 30 | // http://vuejs.github.io/vue-loader/workflow/production.html 31 | new webpack.DefinePlugin({ 32 | 'process.env': env 33 | }), 34 | new webpack.optimize.UglifyJsPlugin({ 35 | compress: { 36 | warnings: false 37 | } 38 | }), 39 | new webpack.optimize.OccurenceOrderPlugin(), 40 | // extract css into its own file 41 | new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')), 42 | // generate dist index.html with correct asset hash for caching. 43 | // you can customize output by editing /index.html 44 | // see https://github.com/ampedandwired/html-webpack-plugin 45 | new HtmlWebpackPlugin({ 46 | filename: process.env.NODE_ENV === 'testing' 47 | ? 'index.html' 48 | : config.build.index, 49 | template: 'index.html', 50 | inject: true, 51 | minify: { 52 | removeComments: true, 53 | collapseWhitespace: true, 54 | removeAttributeQuotes: true 55 | // more options: 56 | // https://github.com/kangax/html-minifier#options-quick-reference 57 | }, 58 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 59 | chunksSortMode: 'dependency' 60 | }), 61 | // split vendor js into its own file 62 | new webpack.optimize.CommonsChunkPlugin({ 63 | name: 'vendor', 64 | minChunks: function (module, count) { 65 | // any required modules inside node_modules are extracted to vendor 66 | return ( 67 | module.resource && 68 | /\.js$/.test(module.resource) && 69 | module.resource.indexOf( 70 | path.join(__dirname, '../node_modules') 71 | ) === 0 72 | ) 73 | } 74 | }), 75 | // extract webpack runtime and module manifest to its own file in order to 76 | // prevent vendor hash from being updated whenever app bundle is updated 77 | new webpack.optimize.CommonsChunkPlugin({ 78 | name: 'manifest', 79 | chunks: ['vendor'] 80 | }) 81 | ] 82 | }) 83 | 84 | if (config.build.productionGzip) { 85 | var CompressionWebpackPlugin = require('compression-webpack-plugin') 86 | 87 | webpackConfig.plugins.push( 88 | new CompressionWebpackPlugin({ 89 | asset: '[path].gz[query]', 90 | algorithm: 'gzip', 91 | test: new RegExp( 92 | '\\.(' + 93 | config.build.productionGzipExtensions.join('|') + 94 | ')$' 95 | ), 96 | threshold: 10240, 97 | minRatio: 0.8 98 | }) 99 | ) 100 | } 101 | 102 | module.exports = webpackConfig 103 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../docs/index.html'), 8 | assetsRoot: path.resolve(__dirname, '../docs'), 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: '/', 11 | productionSourceMap: true, 12 | // Gzip off by default as many popular static hosts such as 13 | // Surge or Netlify already gzip all static assets for you. 14 | // Before setting to `true`, make sure to: 15 | // npm install --save-dev compression-webpack-plugin 16 | productionGzip: false, 17 | productionGzipExtensions: ['js', 'css'] 18 | }, 19 | dev: { 20 | env: require('./dev.env'), 21 | port: 8080, 22 | assetsSubDirectory: 'static', 23 | assetsPublicPath: '/', 24 | proxyTable: {}, 25 | // CSS Sourcemaps off by default because relative paths are "buggy" 26 | // with this option, according to the CSS-Loader README 27 | // (https://github.com/webpack/css-loader#sourcemaps) 28 | // In our experience, they generally work as expected, 29 | // just be aware of this issue when enabling this option. 30 | cssSourceMap: false 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /config/test.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var devEnv = require('./dev.env') 3 | 4 | module.exports = merge(devEnv, { 5 | NODE_ENV: '"testing"' 6 | }) 7 | -------------------------------------------------------------------------------- /docs/7620n.tar.gz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuxizhe/css/3ed3499b487a3d975566938b9b3cc82b59de291d/docs/7620n.tar.gz -------------------------------------------------------------------------------- /docs/fonts/ionicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuxizhe/css/3ed3499b487a3d975566938b9b3cc82b59de291d/docs/fonts/ionicons.eot -------------------------------------------------------------------------------- /docs/fonts/ionicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuxizhe/css/3ed3499b487a3d975566938b9b3cc82b59de291d/docs/fonts/ionicons.ttf -------------------------------------------------------------------------------- /docs/fonts/ionicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuxizhe/css/3ed3499b487a3d975566938b9b3cc82b59de291d/docs/fonts/ionicons.woff -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /docs/static/css/app.feef1bf9a8404da92f963c23ab27bd9e.css: -------------------------------------------------------------------------------- 1 | .mobile{top:0;bottom:0;left:0;right:0;background:url(http://www.bz55.com/uploads/allimg/151030/139-151030111Q4.jpg) 50% no-repeat;position:absolute;overflow:hidden}@media (min-width:736px){.mobile{height:736px;width:414px;margin-top:-368px;margin-left:-207px;overflow:hidden;box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19)}.mobile,.sidebar-overlay{left:50%;top:50%;position:absolute}.sidebar-overlay{background-color:#000;opacity:.5;z-index:5;-webkit-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:all .5s ease-in-out 0s;transition:all .5s ease-in-out 0s}}.header{position:absolute;margin-left:10%;margin-top:30px;width:80%;height:100px;font-size:30px;color:#fff}.header .sidebar-icon:hover{cursor:pointer;background:#000;background-color:rgba(0,0,0,.1)}.sidebar.active .sidebar-content,.sidebar.active .sidebar-overlay{-webkit-transform:translateX(0);transform:translateX(0)}.sidebar-overlay{bottom:0;left:0;right:0;background-color:#000;opacity:.5;z-index:5;-webkit-transition:all .5s ease-in-out 0s;transition:all .5s ease-in-out 0s}.sidebar-content,.sidebar-overlay{top:0;position:absolute;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.sidebar-content{width:80%;height:100%;background-color:#fff;z-index:100;font-size:20px;padding:30px;-webkit-transition:all .3s ease-in-out 0s;transition:all .3s ease-in-out 0s}.nav-left{position:absolute;top:150px;line-height:50px}.nav-left a{display:block}.nav-left span{font-size:30px;padding:10px}.nav{right:20px;bottom:20px}.nav,.nav:after{position:absolute;width:50px;height:50px;background-color:#f23363;line-height:50px;border-radius:50%;-webkit-transition:all .1s ease-in-out 0s;transition:all .1s ease-in-out 0s}.nav:after{content:'';right:0;bottom:0;z-index:2}.musk{position:absolute;top:0;left:0;width:50px;height:50px;font-size:30px;border-radius:50%;-webkit-transition:all .3s cubic-bezier(.68,1.55,.265,1);transition:all .3s cubic-bezier(.68,1.55,.265,1);text-align:center;z-index:4}.musk:hover{cursor:pointer}.nav.active .musk{background:#cf0e3f;-webkit-transform:rotate(-135deg);transform:rotate(-135deg)}.nav.active:after{right:-150px;bottom:-150px;width:350px;height:350px}.nav-item{position:absolute;top:0;left:0;width:50px;height:50px;color:#fff;font-size:30px;-webkit-transition:all .3s cubic-bezier(.68,1.55,.265,1);transition:all .3s cubic-bezier(.68,1.55,.265,1);text-align:center;z-index:1}.nav.active .nav-item{z-index:3}.nav.active .nav-count-1{-webkit-transform:translate(10px,-130px);transform:translate(10px,-130px)}.nav.active .nav-count-2{-webkit-transform:translate(-42px,-117px);transform:translate(-42px,-117px)}.nav.active .nav-count-5{-webkit-transform:translate(-88px,-88px);transform:translate(-88px,-88px)}.nav.active .nav-count-3{-webkit-transform:translate(-117px,-42px);transform:translate(-117px,-42px)}.nav.active .nav-count-4{-webkit-transform:translate(-130px,10px);transform:translate(-130px,10px)}.routerview{position:absolute;top:120px;bottom:90px;margin-left:8%;margin-right:8%;overflow:auto;overflow-x:hidden;width:84%}.weatherright{right:10px;position:absolute;top:0;color:#fff;width:100px}.weatherright .type{float:left;width:55px;font-size:20px}.weatherright .curTemp{display:inline;font-size:20px;float:right}.weatherright .feng{float:left}.weatherright .fengli,.weatherright .hightemp,.weatherright .lowtemp{display:inline;float:right}.weatherleft{margin-left:20px;color:#fff;width:200px}.weatherleft .city{font-size:20px}.fore{margin:30px;color:#fff;text-align:center}.forecast{margin-bottom:10px;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}.forecast i{-webkit-box-flex:1;-ms-flex:1;flex:1}.forecast .date{-webkit-box-flex:2;-ms-flex:2;flex:2}.message-table{margin-bottom:40px}.form-inline.submit{position:fixed;bottom:25px;width:260px;display:-webkit-box;display:-ms-flexbox;display:flex}.form-inline.submit input{-webkit-box-flex:1;-ms-flex:1;flex:1}.form-inline.submit .message{-webkit-box-flex:2;-ms-flex:2;flex:2}.userchoice{position:fixed;top:90px;height:40px;width:300px;display:-webkit-box;display:-ms-flexbox;display:flex;color:#fff;text-align:center;font-size:20px}.userchoice div{-webkit-box-flex:1;-ms-flex:1;flex:1}.userchoice div:hover{cursor:pointer;background:#000;background-color:rgba(0,0,0,.1)}.users{margin-top:50px}.people{margin:20px;height:60px}.people:hover{cursor:pointer;background:#000;background-color:rgba(0,0,0,.1)}.people .img{width:50px;height:50px;overflow:hidden;border-radius:50%;border:2px solid #fff;box-shadow:0 3px 2px rgba(0,0,0,.4)}.people .name{font-size:20px}.people .name,.people .title{position:relative;left:80px;top:-50px;width:200px}.people .title{font-size:15px}.people .online{position:relative;left:250px;top:-85px;height:20px;width:20px;border-radius:50%;border:2px solid #fff;box-shadow:0 3px 2px rgba(0,0,0,.4);background-color:grey}.people .online.active{background-color:green}img{width:100%}#page3-content{overflow:auto;height:100%}@media (min-width:736px){.form-inline .form-control{width:0}.form-inline.submit{bottom:50%;margin-bottom:-340px}.form-inline.submit,.userchoice{position:fixed;width:300px;display:-webkit-box;display:-ms-flexbox;display:flex}.userchoice{top:50%;margin-top:-275px;height:40px;color:#fff;text-align:center;font-size:20px}}.movie td{word-wrap:break-word;max-width:300px} 2 | /*# sourceMappingURL=app.feef1bf9a8404da92f963c23ab27bd9e.css.map*/ -------------------------------------------------------------------------------- /docs/static/css/app.feef1bf9a8404da92f963c23ab27bd9e.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///webpack:///src/App.vue","webpack:///webpack:///src/components/home.vue","webpack:///webpack:///src/components/ThirdPage.vue","webpack:///webpack:///src/components/Movie.vue"],"names":[],"mappings":"AAwEA,QAGI,MACA,SACA,OACA,QACA,4FACA,kBAEA,eAAiB,CAErB,yBACI,QACI,aACA,YAGA,kBACA,mBAEA,gBACA,sEAA+E,CAEnF,yBARI,SACA,QAGA,iBAAmB,CAiBtB,iBARD,sBAEA,WACA,UACA,oCACQ,4BACR,0CACA,iCAAmC,CAClC,CAGL,QACI,kBACA,gBACA,gBACA,UACA,aAEA,eACA,UAAY,CAIhB,4BACI,eACA,gBACA,+BAAoC,CAKxC,kEAEI,gCACQ,uBAAyB,CAGrC,iBAEI,SACA,OACA,QACA,sBAEA,WACA,UAGA,0CACA,iCAAmC,CAGvC,kCAdI,MAKA,kBAGA,oCACQ,2BAA6B,CAkBxC,iBAVG,UACA,YACA,sBACA,YACA,eACA,aAGA,0CACA,iCAAmC,CAGvC,UACI,kBACA,UACA,gBAAkB,CAGtB,YACI,aAAe,CAGnB,eACI,eACA,YAAc,CAGlB,KAEI,WACA,WAAa,CAUjB,gBAZI,kBAGA,WACA,YACA,yBACA,iBACA,kBACA,0CACA,iCAAmC,CAgBtC,WAXG,WACA,QACA,SAQA,SAAW,CAGf,MACI,kBACA,MACA,OACA,WACA,YACA,eACA,kBACA,yDACA,iDACA,kBACA,SAAW,CAEf,YACI,cAAgB,CAGpB,kBACI,mBACA,kCACA,yBAA2B,CAS/B,kBAGI,aACA,cACA,YACA,YAAc,CAOlB,UACI,kBACA,MACA,OACA,WACA,YACA,WACA,eACA,yDACA,iDACA,kBACA,SAAW,CAKf,sBACI,SAAW,CAGf,yBACI,yCACQ,gCAAmC,CAG/C,yBACI,0CACQ,iCAAmC,CAG/C,yBACI,yCACQ,gCAAkC,CAG9C,yBACI,0CACQ,iCAAoC,CAGhD,yBACI,yCACQ,gCAAkC,CAG9C,YACE,kBACE,UACA,YACA,eACA,gBACA,cACA,kBACA,SAAW,CCjPf,cACI,WACA,kBACA,MACA,WACA,WAAa,CAGjB,oBACI,WACA,WACA,cAAgB,CAGpB,uBACI,eACA,eACA,WAAa,CAGjB,oBACI,UAAY,CAchB,qEAVI,eACA,WAAa,CAcjB,aAEI,iBACA,WACA,WAAa,CAGjB,mBAGI,cAAgB,CASpB,MACI,YACA,WACA,iBAAmB,CAIvB,UACI,mBACA,oBACA,oBACA,aACA,UAAY,CAGhB,YACI,mBACI,WACI,MAAQ,CAGpB,gBACI,mBACI,WACI,MAAQ,CCHpB,eACI,kBAAmB,CAGvB,oBACI,eACA,YACA,YACA,oBACA,oBACA,YAAc,CAGlB,0BACI,mBACI,WACI,MAAQ,CAGpB,6BACI,mBACI,WACI,MAAQ,CAGpB,YACI,eACA,SAEA,YACA,YACA,oBACA,oBACA,aACA,WACA,kBACA,cAAe,CAGnB,gBACI,mBACI,WACI,MAAO,CAGnB,sBACI,eACA,gBACA,+BAAoC,CAGxC,OACI,eAAiB,CAMrB,QACI,YACA,WAAY,CAGhB,cACI,eACA,gBACA,+BAAoC,CAGxC,aACI,WACA,YACA,gBACA,kBACA,sBACA,mCAAwC,CAG5C,cAII,cAAgB,CAIpB,6BAPI,kBACA,UACA,UAEA,WAAa,CAShB,eAFG,cAAgB,CAIpB,gBACI,kBACA,WACA,UACA,YACA,WACA,kBACA,sBACA,oCACA,qBAAuB,CAG3B,uBACI,sBAAwB,CAG5B,IACI,UAAW,CAGf,eACI,cACA,WAAa,CAGjB,yBACI,2BAGI,OAAS,CAGb,oBAEI,WACA,oBAAsB,CAM1B,gCARI,eAGA,YACA,oBACA,oBACA,YAAc,CAejB,YAXG,QACA,kBAEA,YAKA,WACA,kBACA,cAAe,CAClB,CC/OL,UACI,qBACA,eAAiB","file":"static/css/app.feef1bf9a8404da92f963c23ab27bd9e.css","sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.mobile {\n /*margin: 50px auto;*/\n /*width: 100%;*/\n top: 0px;\n bottom: 0px;\n left: 0px;\n right: 0px;\n background: url(http://www.bz55.com/uploads/allimg/151030/139-151030111Q4.jpg) center no-repeat;\n position: absolute;\n /*解决内容撑大的问题*/\n overflow: hidden;\n}\n@media (min-width: 736px){\n .mobile{\n height: 736px;\n width: 414px;\n left: 50%;\n top: 50%;\n margin-top: -368px;\n margin-left:-207px;\n position: absolute;;\n overflow: hidden;\n box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19);\n }\n .sidebar-overlay {\n top: 50%;\n /*bottom: 0px;*/\n left: 50%;\n /*right: 0px;*/\n background-color: black;\n position: absolute;\n opacity: 0.5;\n z-index: 5;\n -webkit-transform: translateX(-100%);\n transform: translateX(-100%);\n -webkit-transition: all .5s ease-in-out 0s;\n transition: all .5s ease-in-out 0s;\n }\n}\n\n.header {\n position: absolute;\n margin-left: 10%;\n margin-top: 30px;\n width: 80%;\n height: 100px;\n /*background-color: white;*/\n font-size: 30px;\n color: #fff;\n /*z-index: 2;*/\n}\n\n.header .sidebar-icon:hover {\n cursor: pointer;\n background: black;\n background-color: rgba(0, 0, 0, 0.1)\n}\n\n.sidebar {}\n\n.sidebar.active .sidebar-content,\n.sidebar.active .sidebar-overlay {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n}\n\n.sidebar-overlay {\n top: 0px;\n bottom: 0px;\n left: 0px;\n right: 0px;\n background-color: black;\n position: absolute;\n opacity: 0.5;\n z-index: 5;\n -webkit-transform: translateX(-100%);\n transform: translateX(-100%);\n -webkit-transition: all .5s ease-in-out 0s;\n transition: all .5s ease-in-out 0s;\n}\n\n.sidebar-content {\n position: absolute;\n top: 0px;\n width: 80%;\n height: 100%;\n background-color: white;\n z-index: 100;\n font-size: 20px;\n padding: 30px;\n -webkit-transform: translateX(-100%);\n transform: translateX(-100%);\n -webkit-transition: all .3s ease-in-out 0s;\n transition: all .3s ease-in-out 0s;\n}\n\n.nav-left {\n position: absolute;\n top: 150px;\n line-height: 50px;\n}\n\n.nav-left a {\n display: block;\n}\n\n.nav-left span {\n font-size: 30px;\n padding: 10px;\n}\n\n.nav {\n position: absolute;\n right: 20px;\n bottom: 20px;\n width: 50px;\n height: 50px;\n background-color: #f23363;\n line-height: 50px;\n border-radius: 50%;\n -webkit-transition: all .1s ease-in-out 0s;\n transition: all .1s ease-in-out 0s;\n}\n\n.nav:after {\n position: absolute;\n content: '';\n right: 0px;\n bottom: 0px;\n width: 50px;\n height: 50px;\n background-color: #f23363;\n line-height: 50px;\n border-radius: 50%;\n -webkit-transition: all .1s ease-in-out 0s;\n transition: all .1s ease-in-out 0s;\n z-index: 2;\n}\n\n.musk {\n position: absolute;\n top: 0;\n left: 0;\n width: 50px;\n height: 50px;\n font-size: 30px;\n border-radius: 50%;\n -webkit-transition: all .3s cubic-bezier(.68, 1.55, .265, 1);\n transition: all .3s cubic-bezier(.68, 1.55, .265, 1);\n text-align: center;\n z-index: 4;\n}\n.musk:hover {\n cursor: pointer;\n}\n\n.nav.active .musk {\n background: #cf0e3f;\n -webkit-transform: rotate(-135deg);\n transform: rotate(-135deg);\n}\n\n\n/*实现增加属性后 动画*/\n\n\n/*用after 实现的是 背景动的效果*/\n\n.nav.active:after {\n /*position: absolute;\n content: '';*/\n right: -150px;\n bottom: -150px;\n width: 350px;\n height: 350px;\n /*background-color: #f23363;\n line-height: 50px;\n border-radius: 50%;\n z-index: 1;*/\n}\n\n.nav-item {\n position: absolute;\n top: 0;\n left: 0;\n width: 50px;\n height: 50px;\n color: #fff;\n font-size: 30px;\n -webkit-transition: all .3s cubic-bezier(.68, 1.55, .265, 1);\n transition: all .3s cubic-bezier(.68, 1.55, .265, 1);\n text-align: center;\n z-index: 1;\n}\n\n.nav-item:hover {}\n\n.nav.active .nav-item {\n z-index: 3;\n}\n\n.nav.active .nav-count-1 {\n -webkit-transform: translate(10px, -130px);\n transform: translate(10px, -130px);\n}\n\n.nav.active .nav-count-2 {\n -webkit-transform: translate(-42px, -117px);\n transform: translate(-42px, -117px)\n}\n\n.nav.active .nav-count-5{\n -webkit-transform: translate(-88px, -88px);\n transform: translate(-88px, -88px)\n}\n\n.nav.active .nav-count-3 {\n -webkit-transform: translate(-117px, -42px);\n transform: translate(-117px, -42px);\n}\n\n.nav.active .nav-count-4 {\n -webkit-transform: translate(-130px, 10px);\n transform: translate(-130px, 10px)\n}\n\n.routerview{\n position: absolute;\n top: 120px;\n bottom: 90px;\n margin-left: 8%;\n margin-right: 8%;\n overflow: auto;\n overflow-x: hidden;\n width: 84%;\n}\n\n\n\n\n/** WEBPACK FOOTER **\n ** webpack:///src/App.vue\n **/","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.weatherright {\n right: 10px;\n position: absolute;\n top: 0px;\n color: white;\n width: 100px;\n}\n\n.weatherright .type {\n float: left;\n width: 55px;\n font-size: 20px;\n}\n\n.weatherright .curTemp {\n display: inline;\n font-size: 20px;\n float: right;\n}\n\n.weatherright .feng {\n float: left;\n}\n\n.weatherright .fengli {\n display: inline;\n float: right;\n /*right: 10px*/\n}\n\n.weatherright .hightemp {\n float: right;\n display: inline;\n}\n\n.weatherright .lowtemp {\n float: right;\n display: inline;\n}\n\n.weatherleft {\n /*margin: 30px;*/\n margin-left: 20px;\n color: white;\n width: 200px;\n}\n\n.weatherleft .city {\n /*float: left;\n*/\n font-size: 20px;\n}\n\n.weatherleft .week {\n /*margin-left: 30px;\n display: inline;\n font-size: 20px;*/\n}\n\n.fore {\n margin: 30px;\n color: white;\n text-align: center;\n /*width: 100%*/\n}\n\n.forecast {\n margin-bottom: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n\n.forecast i {\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n}\n\n.forecast .date {\n -webkit-box-flex: 2;\n -ms-flex: 2;\n flex: 2;\n}\n\n\n\n/** WEBPACK FOOTER **\n ** webpack:///src/components/home.vue\n **/","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.message-table {\n margin-bottom: 40px\n}\n\n.form-inline.submit {\n position: fixed;\n bottom: 25px;\n width: 260px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n\n.form-inline.submit input {\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n}\n\n.form-inline.submit .message {\n -webkit-box-flex: 2;\n -ms-flex: 2;\n flex: 2;\n}\n\n.userchoice {\n position: fixed;\n top: 90px;\n /*background-color: red;*/\n height: 40px;\n width: 300px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n color: white;\n text-align: center;\n font-size: 20px\n}\n\n.userchoice div {\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1\n}\n\n.userchoice div:hover {\n cursor: pointer;\n background: black;\n background-color: rgba(0, 0, 0, 0.1)\n}\n\n.users {\n margin-top: 50px;\n /*background-color: #a8bcf5;*/\n /*height: 100%;*/\n /*width: 350px;*/\n}\n\n.people {\n margin: 20px;\n height: 60px\n}\n\n.people:hover {\n cursor: pointer;\n background: black;\n background-color: rgba(0, 0, 0, 0.1)\n}\n\n.people .img {\n width: 50px;\n height: 50px;\n overflow: hidden;\n border-radius: 50%;\n border: 2px solid #fff;\n box-shadow: 0 3px 2px rgba(0, 0, 0, .4);\n}\n\n.people .name {\n position: relative;\n left: 80px;\n top: -50px;\n font-size: 20px;\n width: 200px;\n}\n\n.people .title {\n position: relative;\n left: 80px;\n top: -50px;\n font-size: 15px;\n width: 200px;\n}\n\n.people .online {\n position: relative;\n left: 250px;\n top: -85px;\n height: 20px;\n width: 20px;\n border-radius: 50%;\n border: 2px solid #fff;\n box-shadow: 0 3px 2px rgba(0, 0, 0, .4);\n background-color: grey;\n}\n\n.people .online.active {\n background-color: green;\n}\n\nimg {\n width: 100%\n}\n\n#page3-content {\n overflow: auto;\n height: 100%;\n}\n\n@media (min-width: 736px) {\n .form-inline .form-control {\n /*display: inline-block;*/\n /*改成width: 0 可以取消掉 bootstrap中的width属性*/\n width: 0;\n /*vertical-align: middle;*/\n }\n .form-inline.submit {\n position: fixed;\n bottom: 50%;\n margin-bottom: -340px;\n width: 300px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n .userchoice {\n position: fixed;\n top: 50%;\n margin-top: -275px;\n /*background-color: red;*/\n height: 40px;\n width: 300px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n color: white;\n text-align: center;\n font-size: 20px\n }\n}\n\n\n\n/** WEBPACK FOOTER **\n ** webpack:///src/components/ThirdPage.vue\n **/","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.movie td {\n word-wrap: break-word;\n max-width: 300px;\n}\n\n\n\n/** WEBPACK FOOTER **\n ** webpack:///src/components/Movie.vue\n **/"],"sourceRoot":""} -------------------------------------------------------------------------------- /docs/static/js/app.c32db84a2a5af9d41444.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([2,0],[function(e,t,o){"use strict";function s(e){return e&&e.__esModule?e:{"default":e}}var a=o(90),i=s(a),n=o(96),r=s(n),c=o(94),u=s(c),d=o(95),l=s(d),p=o(91),f=s(p),v=o(92),m=s(v),h=o(93),w=s(h);Vue.config.debug=!0,Vue.use(VueRouter);var b=new VueRouter({});b.map({chats:{component:u["default"]},food:{component:l["default"]},"/food/:id":{component:f["default"]},movie:{component:m["default"]},SMZDM:{component:w["default"]},home:{component:r["default"]}}),b.redirect({"*":"chats"}),b.start(i["default"],"#app")},,,,function(e,t,o){"use strict";function s(e){return e&&e.__esModule?e:{"default":e}}function a(e){return c?wilddog.sync().ref("/"+e):firebase.database().ref("/"+e)}function i(e){return new r["default"](function(t){var o=new XMLHttpRequest;o.open("GET",e),o.setRequestHeader("apikey","e4288f19fe0231d205fd43745d7b15fe"),o.send(),o.addEventListener("load",function(){t(JSON.parse(this.response))})})}Object.defineProperty(t,"__esModule",{value:!0});var n=o(43),r=s(n);t.firebaseData=a,t.request=i;var c=0;if(c){var u={syncDomain:"yuxizhe.wilddog.com",syncURL:"https://yuxizhe.wilddogio.com"};wilddog.initializeApp(u)}else{var u={apiKey:"AIzaSyD4az7go2CWyb-Yy_2wHISnfoytLEzUg-4",authDomain:"yuxizhe2008.firebaseapp.com",databaseURL:"https://yuxizhe2008.firebaseio.com",storageBucket:""};firebase.initializeApp(u)}},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t["default"]={data:function(){return{sidebar_show:!1,nav_show:!1,chats_show:!1,input_show:!1}}}},function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var s=o(4);t["default"]={data:function(){return{CookBook:{}}},route:{data:function(e){var t=e.to,o=this;(0,s.request)("http://apis.baidu.com/tngou/cook/show?id="+t.params.id).then(function(e){o.CookBook=e,console.log(e)}),console.log("HI")}}}},function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var s=o(4),a=(0,s.firebaseData)("rss");t["default"]={data:function(){return{movies:{}}},created:function(){var e,t=[],o=this;a.on("value",function(s){if(t=s.val(),null!=t)for(o.movies=t,e=0;e
Home

C哲的工具页
主页 聊天室 菜谱 电影 值得买

'},function(e,t){e.exports=" {{CookBook.name}}

{{CookBook.description}}

{{{CookBook.message}}} "},function(e,t){e.exports='
{{movie.title}}
'},function(e,t){e.exports='
{{movie.title}}
'},function(e,t){e.exports='
User
Message
{{peo.name}}
{{peo.title}}
人物 消息
{{user.name}} {{user.message}}
'},function(e,t){e.exports='

{{question.name}}

{{question.keywords}}

详细

'},function(e,t){e.exports='
{{weather.city}}
{{weather.today.week}}
{{weather.today.date}}
{{weather.today.type}}
{{weather.today.curTemp}}
{{weather.today.fengxiang}}
{{weather.today.fengli}}
--{{weather.today.hightemp}}
{{weather.today.lowtemp}}
{{weather.forecast[0].date}} {{weather.forecast[0].hightemp}} {{weather.forecast[0].lowtemp}} {{weather.forecast[0].type}}
{{weather.forecast[1].date}} {{weather.forecast[1].hightemp}} {{weather.forecast[1].lowtemp}} {{weather.forecast[1].type}}
{{weather.forecast[2].date}} {{weather.forecast[2].hightemp}} {{weather.forecast[2].lowtemp}} {{weather.forecast[2].type}}
{{weather.forecast[3].date}} {{weather.forecast[3].hightemp}} {{weather.forecast[3].lowtemp}} {{weather.forecast[3].type}}
'},function(e,t,o){var s,a,i={};o(78),s=o(35),a=o(83),e.exports=s||{},e.exports.__esModule&&(e.exports=e.exports["default"]);var n="function"==typeof e.exports?e.exports.options||(e.exports.options={}):e.exports;a&&(n.template=a),n.computed||(n.computed={}),Object.keys(i).forEach(function(e){var t=i[e];n.computed[e]=function(){return t}})},function(e,t,o){var s,a,i={};s=o(36),a=o(84),e.exports=s||{},e.exports.__esModule&&(e.exports=e.exports["default"]);var n="function"==typeof e.exports?e.exports.options||(e.exports.options={}):e.exports;a&&(n.template=a),n.computed||(n.computed={}),Object.keys(i).forEach(function(e){var t=i[e];n.computed[e]=function(){return t}})},function(e,t,o){var s,a,i={};o(79),s=o(37),a=o(85),e.exports=s||{},e.exports.__esModule&&(e.exports=e.exports["default"]);var n="function"==typeof e.exports?e.exports.options||(e.exports.options={}):e.exports;a&&(n.template=a),n.computed||(n.computed={}),Object.keys(i).forEach(function(e){var t=i[e];n.computed[e]=function(){return t}})},function(e,t,o){var s,a,i={};o(80),s=o(38),a=o(86),e.exports=s||{},e.exports.__esModule&&(e.exports=e.exports["default"]);var n="function"==typeof e.exports?e.exports.options||(e.exports.options={}):e.exports;a&&(n.template=a),n.computed||(n.computed={}),Object.keys(i).forEach(function(e){var t=i[e];n.computed[e]=function(){return t}})},function(e,t,o){var s,a,i={};o(81),s=o(39),a=o(87),e.exports=s||{},e.exports.__esModule&&(e.exports=e.exports["default"]);var n="function"==typeof e.exports?e.exports.options||(e.exports.options={}):e.exports;a&&(n.template=a),n.computed||(n.computed={}),Object.keys(i).forEach(function(e){var t=i[e];n.computed[e]=function(){return t}})},function(e,t,o){var s,a,i={};s=o(40),a=o(88),e.exports=s||{},e.exports.__esModule&&(e.exports=e.exports["default"]);var n="function"==typeof e.exports?e.exports.options||(e.exports.options={}):e.exports;a&&(n.template=a),n.computed||(n.computed={}),Object.keys(i).forEach(function(e){var t=i[e];n.computed[e]=function(){return t}})},function(e,t,o){var s,a,i={};o(82),s=o(41),a=o(89),e.exports=s||{},e.exports.__esModule&&(e.exports=e.exports["default"]);var n="function"==typeof e.exports?e.exports.options||(e.exports.options={}):e.exports;a&&(n.template=a),n.computed||(n.computed={}),Object.keys(i).forEach(function(e){var t=i[e];n.computed[e]=function(){return t}})}]); 2 | //# sourceMappingURL=app.c32db84a2a5af9d41444.js.map -------------------------------------------------------------------------------- /docs/static/js/manifest.42dd3e13291521dcdca2.js: -------------------------------------------------------------------------------- 1 | !function(e){function t(a){if(n[a])return n[a].exports;var r=n[a]={exports:{},id:a,loaded:!1};return e[a].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var a=window.webpackJsonp;window.webpackJsonp=function(c,o){for(var p,s,l=0,i=[];l0?e:r)(t)}},function(t,n,r){var e=r(52),o=r(15);t.exports=function(t){return e(o(t))}},function(t,n,r){var e=r(9),o=r(1)("toStringTag"),i="Arguments"==e(function(){return arguments}()),c=function(t,n){try{return t[n]}catch(r){}};t.exports=function(t){var n,r,u;return void 0===t?"Undefined":null===t?"Null":"string"==typeof(r=c(n=Object(t),o))?r:i?e(n):"Object"==(u=e(n))&&"function"==typeof n.callee?"Arguments":u}},function(t,n){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(t,n,r){t.exports=r(2).document&&document.documentElement},function(t,n,r){"use strict";var e=r(27),o=r(17),i=r(65),c=r(6),u=r(11),s=r(8),f=r(55),a=r(19),p=r(61),l=r(1)("iterator"),v=!([].keys&&"next"in[].keys()),h="@@iterator",d="keys",y="values",m=function(){return this};t.exports=function(t,n,r,x,g,_,b){f(r,n,x);var w,j,O,S=function(t){if(!v&&t in P)return P[t];switch(t){case d:return function(){return new r(this,t)};case y:return function(){return new r(this,t)}}return function(){return new r(this,t)}},M=n+" Iterator",T=g==y,E=!1,P=t.prototype,A=P[l]||P[h]||g&&P[g],C=A||S(g),k=g?T?S("entries"):C:void 0,R="Array"==n?P.entries||A:A;if(R&&(O=p(R.call(new t)),O!==Object.prototype&&(a(O,M,!0),e||u(O,l)||c(O,l,m))),T&&A&&A.name!==y&&(E=!0,C=function(){return A.call(this)}),e&&!b||!v&&!E&&P[l]||c(P,l,C),s[n]=C,s[M]=m,g)if(w={values:T?C:S(y),keys:_?C:S(d),entries:k},b)for(j in w)j in P||i(P,j,w[j]);else o(o.P+o.F*(v||E),n,w);return w}},function(t,n){t.exports=!0},function(t,n,r){var e=r(62),o=r(24);t.exports=Object.keys||function(t){return e(t,o)}},function(t,n){t.exports=function(t,n){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:n}}},function(t,n,r){var e=r(2),o="__core-js_shared__",i=e[o]||(e[o]={});t.exports=function(t){return i[t]||(i[t]={})}},function(t,n,r){var e,o,i,c=r(10),u=r(51),s=r(25),f=r(16),a=r(2),p=a.process,l=a.setImmediate,v=a.clearImmediate,h=a.MessageChannel,d=0,y={},m="onreadystatechange",x=function(){var t=+this;if(y.hasOwnProperty(t)){var n=y[t];delete y[t],n()}},g=function(t){x.call(t.data)};l&&v||(l=function(t){for(var n=[],r=1;arguments.length>r;)n.push(arguments[r++]);return y[++d]=function(){u("function"==typeof t?t:Function(t),n)},e(d),d},v=function(t){delete y[t]},"process"==r(9)(p)?e=function(t){p.nextTick(c(x,t,1))}:h?(o=new h,i=o.port2,o.port1.onmessage=g,e=c(i.postMessage,i,1)):a.addEventListener&&"function"==typeof postMessage&&!a.importScripts?(e=function(t){a.postMessage(t+"","*")},a.addEventListener("message",g,!1)):e=m in f("script")?function(t){s.appendChild(f("script"))[m]=function(){s.removeChild(this),x.call(t)}}:function(t){setTimeout(c(x,t,1),0)}),t.exports={set:l,clear:v}},function(t,n,r){var e=r(21),o=Math.min;t.exports=function(t){return t>0?o(e(t),9007199254740991):0}},function(t,n,r){var e=r(15);t.exports=function(t){return Object(e(t))}},function(t,n){var r=0,e=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++r+e).toString(36))}},,,,,,,,function(t,n,r){t.exports={"default":r(44),__esModule:!0}},function(t,n,r){t.exports={"default":r(45),__esModule:!0}},function(t,n,r){r(73),t.exports=r(3).Object.keys},function(t,n,r){r(74),r(76),r(77),r(75),t.exports=r(3).Promise},function(t,n){t.exports=function(){}},function(t,n){t.exports=function(t,n,r,e){if(!(t instanceof n)||void 0!==e&&e in t)throw TypeError(r+": incorrect invocation!");return t}},function(t,n,r){var e=r(22),o=r(32),i=r(69);t.exports=function(t){return function(n,r,c){var u,s=e(n),f=o(s.length),a=i(c,f);if(t&&r!=r){for(;f>a;)if(u=s[a++],u!=u)return!0}else for(;f>a;a++)if((t||a in s)&&s[a]===r)return t||a||0;return!t&&-1}}},function(t,n,r){var e=r(10),o=r(54),i=r(53),c=r(5),u=r(32),s=r(71),f={},a={},n=t.exports=function(t,n,r,p,l){var v,h,d,y,m=l?function(){return t}:s(t),x=e(r,p,n?2:1),g=0;if("function"!=typeof m)throw TypeError(t+" is not iterable!");if(i(m)){for(v=u(t.length);v>g;g++)if(y=n?x(c(h=t[g])[0],h[1]):x(t[g]),y===f||y===a)return y}else for(d=m.call(t);!(h=d.next()).done;)if(y=o(d,x,h.value,n),y===f||y===a)return y};n.BREAK=f,n.RETURN=a},function(t,n,r){t.exports=!r(7)&&!r(18)(function(){return 7!=Object.defineProperty(r(16)("div"),"a",{get:function(){return 7}}).a})},function(t,n){t.exports=function(t,n,r){var e=void 0===r;switch(n.length){case 0:return e?t():t.call(r);case 1:return e?t(n[0]):t.call(r,n[0]);case 2:return e?t(n[0],n[1]):t.call(r,n[0],n[1]);case 3:return e?t(n[0],n[1],n[2]):t.call(r,n[0],n[1],n[2]);case 4:return e?t(n[0],n[1],n[2],n[3]):t.call(r,n[0],n[1],n[2],n[3])}return t.apply(r,n)}},function(t,n,r){var e=r(9);t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==e(t)?t.split(""):Object(t)}},function(t,n,r){var e=r(8),o=r(1)("iterator"),i=Array.prototype;t.exports=function(t){return void 0!==t&&(e.Array===t||i[o]===t)}},function(t,n,r){var e=r(5);t.exports=function(t,n,r,o){try{return o?n(e(r)[0],r[1]):n(r)}catch(i){var c=t["return"];throw void 0!==c&&e(c.call(t)),i}}},function(t,n,r){"use strict";var e=r(59),o=r(29),i=r(19),c={};r(6)(c,r(1)("iterator"),function(){return this}),t.exports=function(t,n,r){t.prototype=e(c,{next:o(1,r)}),i(t,n+" Iterator")}},function(t,n,r){var e=r(1)("iterator"),o=!1;try{var i=[7][e]();i["return"]=function(){o=!0},Array.from(i,function(){throw 2})}catch(c){}t.exports=function(t,n){if(!n&&!o)return!1;var r=!1;try{var i=[7],c=i[e]();c.next=function(){return{done:r=!0}},i[e]=function(){return c},t(i)}catch(u){}return r}},function(t,n){t.exports=function(t,n){return{value:n,done:!!t}}},function(t,n,r){var e=r(2),o=r(31).set,i=e.MutationObserver||e.WebKitMutationObserver,c=e.process,u=e.Promise,s="process"==r(9)(c);t.exports=function(){var t,n,r,f=function(){var e,o;for(s&&(e=c.domain)&&e.exit();t;){o=t.fn,t=t.next;try{o()}catch(i){throw t?r():n=void 0,i}}n=void 0,e&&e.enter()};if(s)r=function(){c.nextTick(f)};else if(i){var a=!0,p=document.createTextNode("");new i(f).observe(p,{characterData:!0}),r=function(){p.data=a=!a}}else if(u&&u.resolve){var l=u.resolve();r=function(){l.then(f)}}else r=function(){o.call(e,f)};return function(e){var o={fn:e,next:void 0};n&&(n.next=o),t||(t=o,r()),n=o}}},function(t,n,r){var e=r(5),o=r(60),i=r(24),c=r(20)("IE_PROTO"),u=function(){},s="prototype",f=function(){var t,n=r(16)("iframe"),e=i.length,o="<",c=">";for(n.style.display="none",r(25).appendChild(n),n.src="javascript:",t=n.contentWindow.document,t.open(),t.write(o+"script"+c+"document.F=Object"+o+"/script"+c),t.close(),f=t.F;e--;)delete f[s][i[e]];return f()};t.exports=Object.create||function(t,n){var r;return null!==t?(u[s]=e(t),r=new u,u[s]=null,r[c]=t):r=f(),void 0===n?r:o(r,n)}},function(t,n,r){var e=r(13),o=r(5),i=r(28);t.exports=r(7)?Object.defineProperties:function(t,n){o(t);for(var r,c=i(n),u=c.length,s=0;u>s;)e.f(t,r=c[s++],n[r]);return t}},function(t,n,r){var e=r(11),o=r(33),i=r(20)("IE_PROTO"),c=Object.prototype;t.exports=Object.getPrototypeOf||function(t){return t=o(t),e(t,i)?t[i]:"function"==typeof t.constructor&&t instanceof t.constructor?t.constructor.prototype:t instanceof Object?c:null}},function(t,n,r){var e=r(11),o=r(22),i=r(48)(!1),c=r(20)("IE_PROTO");t.exports=function(t,n){var r,u=o(t),s=0,f=[];for(r in u)r!=c&&e(u,r)&&f.push(r);for(;n.length>s;)e(u,r=n[s++])&&(~i(f,r)||f.push(r));return f}},function(t,n,r){var e=r(17),o=r(3),i=r(18);t.exports=function(t,n){var r=(o.Object||{})[t]||Object[t],c={};c[t]=n(r),e(e.S+e.F*i(function(){r(1)}),"Object",c)}},function(t,n,r){var e=r(6);t.exports=function(t,n,r){for(var o in n)r&&t[o]?t[o]=n[o]:e(t,o,n[o]);return t}},function(t,n,r){t.exports=r(6)},function(t,n,r){"use strict";var e=r(2),o=r(3),i=r(13),c=r(7),u=r(1)("species");t.exports=function(t){var n="function"==typeof o[t]?o[t]:e[t];c&&n&&!n[u]&&i.f(n,u,{configurable:!0,get:function(){return this}})}},function(t,n,r){var e=r(5),o=r(14),i=r(1)("species");t.exports=function(t,n){var r,c=e(t).constructor;return void 0===c||void 0==(r=e(c)[i])?n:o(r)}},function(t,n,r){var e=r(21),o=r(15);t.exports=function(t){return function(n,r){var i,c,u=String(o(n)),s=e(r),f=u.length;return s<0||s>=f?t?"":void 0:(i=u.charCodeAt(s),i<55296||i>56319||s+1===f||(c=u.charCodeAt(s+1))<56320||c>57343?t?u.charAt(s):i:t?u.slice(s,s+2):(i-55296<<10)+(c-56320)+65536)}}},function(t,n,r){var e=r(21),o=Math.max,i=Math.min;t.exports=function(t,n){return t=e(t),t<0?o(t+n,0):i(t,n)}},function(t,n,r){var e=r(12);t.exports=function(t,n){if(!e(t))return t;var r,o;if(n&&"function"==typeof(r=t.toString)&&!e(o=r.call(t)))return o;if("function"==typeof(r=t.valueOf)&&!e(o=r.call(t)))return o;if(!n&&"function"==typeof(r=t.toString)&&!e(o=r.call(t)))return o;throw TypeError("Can't convert object to primitive value")}},function(t,n,r){var e=r(23),o=r(1)("iterator"),i=r(8);t.exports=r(3).getIteratorMethod=function(t){if(void 0!=t)return t[o]||t["@@iterator"]||i[e(t)]}},function(t,n,r){"use strict";var e=r(46),o=r(57),i=r(8),c=r(22);t.exports=r(26)(Array,"Array",function(t,n){this._t=c(t),this._i=0,this._k=n},function(){var t=this._t,n=this._k,r=this._i++;return!t||r>=t.length?(this._t=void 0,o(1)):"keys"==n?o(0,r):"values"==n?o(0,t[r]):o(0,[r,t[r]])},"values"),i.Arguments=i.Array,e("keys"),e("values"),e("entries")},function(t,n,r){var e=r(33),o=r(28);r(63)("keys",function(){return function(t){return o(e(t))}})},function(t,n){},function(t,n,r){"use strict";var e,o,i,c=r(27),u=r(2),s=r(10),f=r(23),a=r(17),p=r(12),l=r(14),v=r(47),h=r(49),d=r(67),y=r(31).set,m=r(58)(),x="Promise",g=u.TypeError,_=u.process,b=u[x],_=u.process,w="process"==f(_),j=function(){},O=!!function(){try{var t=b.resolve(1),n=(t.constructor={})[r(1)("species")]=function(t){t(j,j)};return(w||"function"==typeof PromiseRejectionEvent)&&t.then(j)instanceof n}catch(e){}}(),S=function(t,n){return t===n||t===b&&n===i},M=function(t){var n;return!(!p(t)||"function"!=typeof(n=t.then))&&n},T=function(t){return S(b,t)?new E(t):new o(t)},E=o=function(t){var n,r;this.promise=new t(function(t,e){if(void 0!==n||void 0!==r)throw g("Bad Promise constructor");n=t,r=e}),this.resolve=l(n),this.reject=l(r)},P=function(t){try{t()}catch(n){return{error:n}}},A=function(t,n){if(!t._n){t._n=!0;var r=t._c;m(function(){for(var e=t._v,o=1==t._s,i=0,c=function(n){var r,i,c=o?n.ok:n.fail,u=n.resolve,s=n.reject,f=n.domain;try{c?(o||(2==t._h&&R(t),t._h=1),c===!0?r=e:(f&&f.enter(),r=c(e),f&&f.exit()),r===n.promise?s(g("Promise-chain cycle")):(i=M(r))?i.call(r,u,s):u(r)):s(e)}catch(a){s(a)}};r.length>i;)c(r[i++]);t._c=[],t._n=!1,n&&!t._h&&C(t)})}},C=function(t){y.call(u,function(){var n,r,e,o=t._v;if(k(t)&&(n=P(function(){w?_.emit("unhandledRejection",o,t):(r=u.onunhandledrejection)?r({promise:t,reason:o}):(e=u.console)&&e.error&&e.error("Unhandled promise rejection",o)}),t._h=w||k(t)?2:1),t._a=void 0,n)throw n.error})},k=function(t){if(1==t._h)return!1;for(var n,r=t._a||t._c,e=0;r.length>e;)if(n=r[e++],n.fail||!k(n.promise))return!1;return!0},R=function(t){y.call(u,function(){var n;w?_.emit("rejectionHandled",t):(n=u.onrejectionhandled)&&n({promise:t,reason:t._v})})},F=function(t){var n=this;n._d||(n._d=!0,n=n._w||n,n._v=t,n._s=2,n._a||(n._a=n._c.slice()),A(n,!0))},I=function(t){var n,r=this;if(!r._d){r._d=!0,r=r._w||r;try{if(r===t)throw g("Promise can't be resolved itself");(n=M(t))?m(function(){var e={_w:r,_d:!1};try{n.call(t,s(I,e,1),s(F,e,1))}catch(o){F.call(e,o)}}):(r._v=t,r._s=1,A(r,!1))}catch(e){F.call({_w:r,_d:!1},e)}}};O||(b=function(t){v(this,b,x,"_h"),l(t),e.call(this);try{t(s(I,this,1),s(F,this,1))}catch(n){F.call(this,n)}},e=function(t){this._c=[],this._a=void 0,this._s=0,this._d=!1,this._v=void 0,this._h=0,this._n=!1},e.prototype=r(64)(b.prototype,{then:function(t,n){var r=T(d(this,b));return r.ok="function"!=typeof t||t,r.fail="function"==typeof n&&n,r.domain=w?_.domain:void 0,this._c.push(r),this._a&&this._a.push(r),this._s&&A(this,!1),r.promise},"catch":function(t){return this.then(void 0,t)}}),E=function(){var t=new e;this.promise=t,this.resolve=s(I,t,1),this.reject=s(F,t,1)}),a(a.G+a.W+a.F*!O,{Promise:b}),r(19)(b,x),r(66)(x),i=r(3)[x],a(a.S+a.F*!O,x,{reject:function(t){var n=T(this),r=n.reject;return r(t),n.promise}}),a(a.S+a.F*(c||!O),x,{resolve:function(t){if(t instanceof b&&S(t.constructor,this))return t;var n=T(this),r=n.resolve;return r(t),n.promise}}),a(a.S+a.F*!(O&&r(56)(function(t){b.all(t)["catch"](j)})),x,{all:function(t){var n=this,r=T(n),e=r.resolve,o=r.reject,i=P(function(){var r=[],i=0,c=1;h(t,!1,function(t){var u=i++,s=!1;r.push(void 0),c++,n.resolve(t).then(function(t){s||(s=!0,r[u]=t,--c||e(r))},o)}),--c||e(r)});return i&&o(i.error),r.promise},race:function(t){var n=this,r=T(n),e=r.reject,o=P(function(){h(t,!1,function(t){n.resolve(t).then(r.resolve,e)})});return o&&e(o.error),r.promise}})},function(t,n,r){"use strict";var e=r(68)(!0);r(26)(String,"String",function(t){this._t=String(t),this._i=0},function(){var t,n=this._t,r=this._i;return r>=n.length?{value:void 0,done:!0}:(t=e(n,r),this._i+=t.length,{value:t,done:!1})})},function(t,n,r){r(72);for(var e=r(2),o=r(6),i=r(8),c=r(1)("toStringTag"),u=["NodeList","DOMTokenList","MediaList","StyleSheetList","CSSRuleList"],s=0;s<5;s++){var f=u[s],a=e[f],p=a&&a.prototype;p&&!p[c]&&o(p,c,f),i[f]=i.Array}},,,,,,,,,,,,,,,,,,,,function(t,n){t.exports=function(){var t=[];return t.toString=function(){for(var t=[],n=0;n=0&&m.splice(n,1)}function u(t){var n=document.createElement("style");return n.type="text/css",i(t,n),n}function s(t,n){var r,e,o;if(n.singleton){var i=y++;r=d||(d=u(n)),e=f.bind(null,r,i,!1),o=f.bind(null,r,i,!0)}else r=u(n),e=a.bind(null,r),o=function(){c(r)};return e(t),function(n){if(n){if(n.css===t.css&&n.media===t.media&&n.sourceMap===t.sourceMap)return;e(t=n)}else o()}}function f(t,n,r,e){var o=r?"":e.css;if(t.styleSheet)t.styleSheet.cssText=x(n,o);else{var i=document.createTextNode(o),c=t.childNodes;c[n]&&t.removeChild(c[n]),c.length?t.insertBefore(i,c[n]):t.appendChild(i)}}function a(t,n){var r=n.css,e=n.media,o=n.sourceMap;if(e&&t.setAttribute("media",e),o&&(r+="\n/*# sourceURL="+o.sources[0]+" */",r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */"),t.styleSheet)t.styleSheet.cssText=r;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(r))}}var p={},l=function(t){var n;return function(){return"undefined"==typeof n&&(n=t.apply(this,arguments)),n}},v=l(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),h=l(function(){return document.head||document.getElementsByTagName("head")[0]}),d=null,y=0,m=[];t.exports=function(t,n){n=n||{},"undefined"==typeof n.singleton&&(n.singleton=v()),"undefined"==typeof n.insertAt&&(n.insertAt="bottom");var r=o(t);return e(r,n),function(t){for(var i=[],c=0;c a { 162 | vertical-align: top; 163 | width: calc(100% - 20px); 164 | max-width: 340px; 165 | display: inline-block; 166 | text-align: center; 167 | margin: 20px 10px; 168 | padding: 25px; 169 | font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif; 170 | } 171 | .related a { 172 | display: inline-block; 173 | text-align: left; 174 | margin: 20px auto; 175 | padding: 10px 20px; 176 | opacity: 0.8; 177 | -webkit-transition: opacity 0.3s; 178 | transition: opacity 0.3s; 179 | -webkit-backface-visibility: hidden; 180 | } 181 | 182 | .related a:hover, 183 | .related a:active { 184 | opacity: 1; 185 | } 186 | 187 | .related a img { 188 | max-width: 100%; 189 | opacity: 0.8; 190 | border-radius: 4px; 191 | } 192 | .related a:hover img, 193 | .related a:active img { 194 | opacity: 1; 195 | } 196 | .related h3{font-family: "Microsoft YaHei", sans-serif;} 197 | .related a h3 { 198 | font-weight: 300; 199 | margin-top: 0.15em; 200 | color: #fff; 201 | } 202 | /* icomoon */ 203 | .icon-htmleaf-home-outline:before { 204 | content: "\e5000"; 205 | } 206 | 207 | .icon-htmleaf-arrow-forward-outline:before { 208 | content: "\e5001"; 209 | } 210 | 211 | @media screen and (max-width: 50em) { 212 | .htmleaf-header { 213 | padding: 3em 10% 4em; 214 | } 215 | .htmleaf-header h1 { 216 | font-size:2em; 217 | } 218 | } 219 | 220 | 221 | @media screen and (max-width: 40em) { 222 | .htmleaf-header h1 { 223 | font-size: 1.5em; 224 | } 225 | } 226 | 227 | @media screen and (max-width: 30em) { 228 | .htmleaf-header h1 { 229 | font-size:1.2em; 230 | } 231 | } -------------------------------------------------------------------------------- /docs/style/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: teal; 3 | font: 300 18px/18px Roboto 4 | } 5 | 6 | *, 7 | :after, 8 | :before { 9 | box-sizing: border-box 10 | } 11 | 12 | .clearfix:after, 13 | .clearfix:before { 14 | content: ''; 15 | display: table 16 | } 17 | 18 | .clearfix:after { 19 | clear: both; 20 | display: block 21 | } 22 | 23 | .mobile-wrap { 24 | margin: 50px auto; 25 | width: 300px; 26 | height: 534px; 27 | overflow: hidden; 28 | position: relative; 29 | background: url(../img/background.jpg) center no-repeat; 30 | box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19) 31 | } 32 | 33 | .mobile-wrap:before { 34 | top: 0; 35 | left: 0; 36 | right: 0; 37 | bottom: 0; 38 | content: ''; 39 | position: absolute; 40 | background: rgba(90, 93, 165, .8); 41 | background: -webkit-linear-gradient(top, rgba(90, 93, 165, 1), rgba(0, 0, 0, .7)); 42 | background: linear-gradient(to bottom, rgba(90, 93, 165, 1), rgba(0, 0, 0, .7)) 43 | } 44 | 45 | .mobile { 46 | z-index: 99; 47 | color: #fff; 48 | height: 100%; 49 | padding: 15px; 50 | position: relative 51 | } 52 | 53 | .mobile .header { 54 | clear: both; 55 | overflow: hidden; 56 | padding-top: 15px 57 | } 58 | 59 | .mobile .header>span { 60 | font-size: 24px; 61 | min-width: 24px 62 | } 63 | 64 | .mobile .header>.title { 65 | font-size: 16px; 66 | line-height: 24px; 67 | margin-left: 15px 68 | } 69 | 70 | .mobile .header .pull-left { 71 | float: left 72 | } 73 | 74 | .mobile .header .pull-right { 75 | float: right 76 | } 77 | 78 | .mobile .header .ion-ios-arrow-back { 79 | min-width: 25px 80 | } 81 | 82 | .mobile .header .ion-ios-navicon>i { 83 | height: 1px; 84 | width: 20px; 85 | margin-top: 5px; 86 | background: #fff; 87 | position: relative; 88 | display: inline-block 89 | } 90 | 91 | .mobile .header .ion-ios-navicon>i:after, 92 | .mobile .header .ion-ios-navicon>i:before { 93 | content: ''; 94 | width: inherit; 95 | height: inherit; 96 | position: absolute; 97 | background: inherit 98 | } 99 | 100 | .mobile .header .ion-ios-navicon>i:before { 101 | bottom: 12px 102 | } 103 | 104 | .mobile .header .ion-ios-navicon>i:after { 105 | bottom: 6px 106 | } 107 | 108 | .nav { 109 | right: 15px; 110 | z-index: 20; 111 | width: 45px; 112 | bottom: 15px; 113 | height: 45px; 114 | display: block; 115 | position: absolute; 116 | line-height: 45px; 117 | border-radius: 50%; 118 | box-shadow: 0 0 5px 0 rgba(0, 0, 0, .75) 119 | } 120 | 121 | .mask { 122 | z-index: 21; 123 | color: #fff; 124 | width: inherit; 125 | height: inherit; 126 | cursor: pointer; 127 | font-size: 28px; 128 | text-align: center; 129 | border-radius: 50%; 130 | position: absolute; 131 | background: #f23363; 132 | -webkit-transition: all .1s ease-in-out 0s; 133 | transition: all .1s ease-in-out 0s 134 | } 135 | 136 | .nav.active .mask { 137 | background: #cf0e3f; 138 | -webkit-transform: rotate(-135deg); 139 | -ms-transform: rotate(-135deg); 140 | transform: rotate(-135deg) 141 | } 142 | 143 | .nav:after { 144 | top: 0; 145 | left: 0; 146 | content: ''; 147 | width: inherit; 148 | height: inherit; 149 | border-radius: 50%; 150 | position: absolute; 151 | background: #f23363; 152 | -webkit-transition: all .1s ease-in-out 0s; 153 | transition: all .1s ease-in-out 0s 154 | } 155 | 156 | .nav.active:after { 157 | top: -125px; 158 | left: -125px; 159 | width: 350px; 160 | height: 350px 161 | } 162 | 163 | .nav-item { 164 | top: 0; 165 | left: 0; 166 | z-index: 19; 167 | width: 45px; 168 | height: 45px; 169 | color: #fff; 170 | font-size: 24px; 171 | -webkit-transform: none; 172 | -ms-transform: none; 173 | transform: none; 174 | line-height: 45px; 175 | border-radius: 50%; 176 | position: absolute; 177 | text-align: center; 178 | -webkit-transition: all .3s cubic-bezier(.68, 1.55, .265, 1); 179 | transition: all .3s cubic-bezier(.68, 1.55, .265, 1) 180 | } 181 | 182 | .nav.active .nav-count-1 { 183 | -webkit-transform: translate(10px, -100px); 184 | -ms-transform: translate(10px, -100px); 185 | transform: translate(10px, -100px) 186 | } 187 | 188 | .nav.active .nav-count-2 { 189 | -webkit-transform: translate(-35px, -80px); 190 | -ms-transform: translate(-35px, -80px); 191 | transform: translate(-35px, -80px) 192 | } 193 | 194 | .nav.active .nav-count-3 { 195 | -webkit-transform: translate(-80px, -45px); 196 | -ms-transform: translate(-80px, -45px); 197 | transform: translate(-80px, -45px) 198 | } 199 | 200 | .nav.active .nav-count-4 { 201 | -webkit-transform: translate(-100px, 0); 202 | -ms-transform: translate(-100px, 0); 203 | transform: translate(-100px, 0) 204 | } 205 | 206 | .pull-left { 207 | float: left; 208 | cursor: pointer; 209 | } 210 | 211 | .pull-right { 212 | float: right; 213 | cursor: pointer; 214 | } 215 | 216 | .html, 217 | .invisible { 218 | display: none 219 | } 220 | 221 | .html.visible, 222 | .visible { 223 | display: block 224 | } 225 | 226 | .sidebar .sidebar-content, 227 | .sidebar .sidebar-overlay { 228 | top: 0; 229 | left: 0; 230 | bottom: 0; 231 | position: absolute; 232 | -webkit-transition: all .3s ease-in-out 0s; 233 | transition: all .3s ease-in-out 0s 234 | } 235 | 236 | .sidebar .sidebar-overlay { 237 | right: 0; 238 | opacity: 0; 239 | width: 100%; 240 | z-index: 999; 241 | -webkit-transform: scale(0); 242 | -ms-transform: scale(0); 243 | transform: scale(0); 244 | background: rgba(0, 0, 0, .4) 245 | } 246 | 247 | .sidebar .sidebar-content { 248 | width: 80%; 249 | color: #333; 250 | padding: 15px; 251 | z-index: 9999; 252 | background: #fff; 253 | -webkit-transform: translateX(-100%); 254 | -ms-transform: translateX(-100%); 255 | transform: translateX(-100%) 256 | } 257 | 258 | .sidebar.active .sidebar-content { 259 | -webkit-transform: translateX(0); 260 | -ms-transform: translateX(0); 261 | transform: translateX(0) 262 | } 263 | 264 | .sidebar.active .sidebar-overlay { 265 | opacity: 1; 266 | -webkit-transform: scale(1); 267 | -ms-transform: scale(1); 268 | transform: scale(1) 269 | } 270 | 271 | .sidebar .sidebar-content .top-head .name { 272 | font-size: 28px; 273 | font-weight: 400; 274 | margin-bottom: 5px 275 | } 276 | 277 | .sidebar .sidebar-content .top-head .email { 278 | font-size: 13px; 279 | margin-bottom: 50px 280 | } 281 | 282 | .sidebar .sidebar-content .nav-left>a { 283 | color: #333; 284 | display: block; 285 | font-size: 16px; 286 | padding: 10px 0; 287 | line-height: 24px; 288 | vertical-align: top; 289 | text-decoration: none 290 | } 291 | 292 | .sidebar .sidebar-content .nav-left>a>span { 293 | color: #aaa; 294 | font-size: 24px; 295 | min-width: 40px; 296 | display: inline-block 297 | } 298 | 299 | .chats, 300 | .compose, 301 | .credits, 302 | .settings, 303 | .welcome { 304 | margin-top: 50px 305 | } 306 | 307 | .on-off { 308 | display: none 309 | } 310 | 311 | .on-off+label { 312 | width: 30px; 313 | height: 10px; 314 | position: relative; 315 | border-radius: 5px; 316 | background: #dedee0; 317 | display: inline-block; 318 | -webkit-transition: all .3s ease-in-out 0s; 319 | transition: all .3s ease-in-out 0s 320 | } 321 | 322 | .on-off+label:after { 323 | left: 0; 324 | top: -2px; 325 | width: 15px; 326 | content: ''; 327 | height: 15px; 328 | position: absolute; 329 | border-radius: 50%; 330 | background: #bebdc2; 331 | -webkit-transition: all .3s ease-in-out 0s; 332 | transition: all .3s ease-in-out 0s 333 | } 334 | 335 | .on-off:checked+label { 336 | background: #fd99b3 337 | } 338 | 339 | .on-off:checked+label:after { 340 | left: 15px; 341 | background: #fb3666 342 | } 343 | 344 | .btn { 345 | color: #eee; 346 | width: 100%; 347 | border: none; 348 | font-size: 16px; 349 | padding: 12px 24px; 350 | background: #cf0e3f; 351 | border-radius: 30px 352 | } 353 | 354 | .welcome .datetime .date, 355 | .welcome .datetime .day { 356 | margin-bottom: 15px 357 | } 358 | 359 | .welcome .datetime .day { 360 | font-size: 28px; 361 | -webkit-animation-duration: .2s; 362 | animation-duration: .2s 363 | } 364 | 365 | .welcome .datetime .date { 366 | -webkit-animation-duration: .35s; 367 | animation-duration: .35s 368 | } 369 | 370 | .forecast { 371 | margin-top: 30px 372 | } 373 | 374 | .forecast .temperature { 375 | text-align: right 376 | } 377 | 378 | .forecast .datetime .day, 379 | .forecast .temperature .unit { 380 | font-size: 28px; 381 | min-height: 33px 382 | } 383 | 384 | .forecast .datetime .date, 385 | .forecast .temperature .location { 386 | color: #ccc; 387 | font-size: 12px 388 | } 389 | 390 | .forecast .temperature .unit>i { 391 | top: -2px; 392 | font-style: normal; 393 | position: relative 394 | } 395 | 396 | .forecast .animated { 397 | -webkit-animation-duration: .2s; 398 | animation-duration: .2s 399 | } 400 | 401 | .alarm-list { 402 | margin-top: 50px 403 | } 404 | 405 | .alarm-list .note { 406 | padding: 10px 0 407 | } 408 | 409 | .alarm-list .note:nth-child(1) { 410 | -webkit-animation-duration: .2s; 411 | animation-duration: .2s 412 | } 413 | 414 | .alarm-list .note:nth-child(2) { 415 | -webkit-animation-duration: .3s; 416 | animation-duration: .3s 417 | } 418 | 419 | .alarm-list .note:nth-child(3) { 420 | -webkit-animation-duration: .4s; 421 | animation-duration: .4s 422 | } 423 | 424 | .alarm-list .note .time { 425 | min-width: 35px; 426 | margin-right: 30px 427 | } 428 | 429 | .alarm-list .note .time>.shift, 430 | .alarm-list .note .to-do>.subject { 431 | color: #ccc; 432 | font-size: 11px 433 | } 434 | 435 | .alarm-list .note .time { 436 | text-align: center 437 | } 438 | 439 | .alarm-list .note .to-do>.title { 440 | font-size: 14px 441 | } 442 | 443 | .alarm-list .note:not(:last-child) { 444 | position: relative 445 | } 446 | 447 | .alarm-list .note:not(:last-child):before { 448 | bottom: 0; 449 | width: 82%; 450 | content: ''; 451 | right: -15px; 452 | position: absolute; 453 | border-bottom: 1px solid rgba(170, 170, 170, .5) 454 | } 455 | 456 | .user-list .user { 457 | width: 30px; 458 | height: 30px; 459 | margin: 4px; 460 | overflow: hidden; 461 | border-radius: 50%; 462 | display: inline-block; 463 | border: 1px solid #bbb 464 | } 465 | 466 | .user-list .user>img { 467 | width: 100% 468 | } 469 | 470 | .compose .forms .group { 471 | margin-bottom: 15px 472 | } 473 | 474 | .compose .forms .group>label { 475 | padding: 6px 0; 476 | min-width: 40px; 477 | display: inline-block 478 | } 479 | 480 | .compose .forms .group>label>span { 481 | min-width: 20px; 482 | display: inline-block 483 | } 484 | 485 | .compose .forms .group input, 486 | .compose .forms .group textarea { 487 | color: #fff; 488 | border: none; 489 | resize: none; 490 | min-width: 185px; 491 | background: 0 0; 492 | padding: 5px 10px 1px; 493 | border-bottom: 1px solid rgba(170, 170, 170, .6) 494 | } 495 | 496 | .compose .forms .visible { 497 | width: 100%; 498 | display: block!important 499 | } 500 | 501 | .compose .forms .action { 502 | margin-top: 50px 503 | } 504 | 505 | .compose .forms .group:nth-child(1) { 506 | -webkit-animation-duration: .1s; 507 | animation-duration: .1s 508 | } 509 | 510 | .compose .forms .group:nth-child(2) { 511 | -webkit-animation-duration: .2s; 512 | animation-duration: .2s 513 | } 514 | 515 | .compose .forms .group:nth-child(3) { 516 | -webkit-animation-duration: .3s; 517 | animation-duration: .3s 518 | } 519 | 520 | .compose .forms .group:nth-child(4) { 521 | -webkit-animation-duration: .4s; 522 | animation-duration: .4s 523 | } 524 | 525 | .chats .tabs-list { 526 | margin-bottom: 15px 527 | } 528 | 529 | .chats .tabs-list .tab { 530 | float: left; 531 | color: #aaa; 532 | font-size: 12px; 533 | font-weight: 400; 534 | margin-right: 15px; 535 | padding-bottom: 2px; 536 | text-decoration: none; 537 | text-transform: uppercase; 538 | border-bottom: 2px solid transparent 539 | } 540 | 541 | .chats .tabs-list .tab.active, 542 | .chats .tabs-list .tab:hover { 543 | color: #fff; 544 | border-bottom: 2px solid 545 | } 546 | 547 | .chats .active-users .user { 548 | padding: 5px 0; 549 | cursor: default 550 | } 551 | 552 | .chats .active-users .photo { 553 | width: 40px; 554 | height: 40px; 555 | overflow: hidden; 556 | border-radius: 50%; 557 | border: 2px solid #fff; 558 | box-shadow: 0 3px 2px rgba(0, 0, 0, .4) 559 | } 560 | 561 | .chats .active-users .photo img { 562 | width: 100% 563 | } 564 | 565 | .chats .active-users .desc { 566 | margin-left: 15px 567 | } 568 | 569 | .chats .active-users .desc p { 570 | margin: 0; 571 | font-size: 14px 572 | } 573 | 574 | .chats .active-users .desc .name { 575 | font-weight: 400 576 | } 577 | 578 | .chats .active-users .desc .position { 579 | color: #aaa; 580 | font-size: 12px 581 | } 582 | 583 | .chats .active-users .user .idle { 584 | height: 40px; 585 | position: relative 586 | } 587 | 588 | .chats .active-users .user .idle>span { 589 | top: 50%; 590 | right: 0; 591 | width: 15px; 592 | height: 15px; 593 | margin-top: -7.5px; 594 | position: absolute; 595 | border-radius: 50%; 596 | display: inline-block; 597 | border: 1px solid #fff 598 | } 599 | 600 | .chats .active-users .user .idle>.online { 601 | background: #2ecc71 602 | } 603 | 604 | .chats .active-users .user .idle>.offline { 605 | background: #95a5a6 606 | } 607 | 608 | .chats .active-users .user .idle>.away { 609 | background: #f2ca27 610 | } 611 | 612 | .chats .active-users .user:nth-child(1) { 613 | -webkit-animation-duration: .18s; 614 | animation-duration: .18s 615 | } 616 | 617 | .chats .active-users .user:nth-child(2) { 618 | -webkit-animation-duration: .25s; 619 | animation-duration: .25s 620 | } 621 | 622 | .chats .active-users .user:nth-child(3) { 623 | -webkit-animation-duration: .35s; 624 | animation-duration: .35s 625 | } 626 | 627 | .chats .active-users .user:nth-child(4) { 628 | -webkit-animation-duration: .4s; 629 | animation-duration: .4s 630 | } 631 | 632 | .chats .active-users .user:nth-child(5) { 633 | -webkit-animation-duration: .5s; 634 | animation-duration: .5s 635 | } 636 | 637 | .chats .active-users .user:nth-child(6) { 638 | -webkit-animation-duration: .6s; 639 | animation-duration: .6s 640 | } 641 | 642 | .chats .active-users .user .idle>span:before { 643 | right: 20px; 644 | bottom: -2px; 645 | display: none; 646 | padding: 0 5px; 647 | font-size: 12px; 648 | position: absolute; 649 | border-radius: 2px; 650 | content: attr(class); 651 | background: rgba(0, 0, 0, .4); 652 | text-transform: capitalize 653 | } 654 | 655 | .chats .active-users .user:hover .idle>span:before { 656 | display: block; 657 | -webkit-animation: fadeInRight .4s; 658 | animation: fadeInRight .4s 659 | } 660 | 661 | .profile { 662 | margin-top: 40px 663 | } 664 | 665 | .profile .photo { 666 | margin: auto; 667 | width: 150px; 668 | height: 150px; 669 | overflow: hidden; 670 | position: relative; 671 | border-radius: 50%; 672 | border: 6px solid #ccc 673 | } 674 | 675 | .profile .photo img { 676 | width: 100%; 677 | border-radius: 50%; 678 | -webkit-transition: all .2s ease-in-out 0s; 679 | transition: all .2s ease-in-out 0s 680 | } 681 | 682 | .profile .photo .social { 683 | top: 50%; 684 | left: 50%; 685 | width: 30px; 686 | z-index: 99; 687 | height: 30px; 688 | margin-top: -15px; 689 | margin-left: -15px; 690 | position: absolute; 691 | -webkit-transform: scale(0); 692 | -ms-transform: scale(0); 693 | transform: scale(0); 694 | -webkit-transition: all .4s ease-in-out 0s; 695 | transition: all .4s ease-in-out 0s 696 | } 697 | 698 | .profile .photo .social .soc-item { 699 | top: 0; 700 | left: 0; 701 | z-index: 19; 702 | width: 35px; 703 | height: 35px; 704 | color: #eee; 705 | font-size: 24px; 706 | -webkit-transform: none; 707 | -ms-transform: none; 708 | transform: none; 709 | line-height: 35px; 710 | border-radius: 50%; 711 | position: absolute; 712 | text-align: center; 713 | -webkit-transition: all .3s cubic-bezier(.68, 1.55, .265, 1); 714 | transition: all .3s cubic-bezier(.68, 1.55, .265, 1) 715 | } 716 | 717 | .profile .photo .social .soc-item:hover { 718 | color: #fff 719 | } 720 | 721 | .profile .photo:after { 722 | top: 0; 723 | left: 0; 724 | right: 0; 725 | bottom: 0; 726 | z-index: 0; 727 | content: ''; 728 | position: absolute; 729 | border-radius: 50%; 730 | -webkit-transform: scale(0); 731 | -ms-transform: scale(0); 732 | transform: scale(0); 733 | background: rgba(0, 0, 0, .2); 734 | -webkit-transition: all .3s ease-in-out 0s; 735 | transition: all .3s ease-in-out 0s 736 | } 737 | 738 | .profile .photo:hover img { 739 | -webkit-transform: scale(.5) rotate(10deg); 740 | -ms-transform: scale(.5) rotate(10deg); 741 | transform: scale(.5) rotate(10deg) 742 | } 743 | 744 | .profile .photo:hover .social, 745 | .profile .photo:hover:after { 746 | -webkit-transform: scale(1); 747 | -ms-transform: scale(1); 748 | transform: scale(1) 749 | } 750 | 751 | .profile .photo:hover .social .soc-count-1 { 752 | -webkit-transform: translate(0, -50px); 753 | -ms-transform: translate(0, -50px); 754 | transform: translate(0, -50px) 755 | } 756 | 757 | .profile .photo:hover .social .soc-count-2 { 758 | -webkit-transform: translate(-35px, -35px); 759 | -ms-transform: translate(-35px, -35px); 760 | transform: translate(-35px, -35px) 761 | } 762 | 763 | .profile .photo:hover .social .soc-count-3 { 764 | -webkit-transform: translate(-50px, 0); 765 | -ms-transform: translate(-50px, 0); 766 | transform: translate(-50px, 0) 767 | } 768 | 769 | .profile .photo:hover .social .soc-count-4 { 770 | -webkit-transform: translate(-35px, 35px); 771 | -ms-transform: translate(-35px, 35px); 772 | transform: translate(-35px, 35px) 773 | } 774 | 775 | .profile .photo:hover .social .soc-count-5 { 776 | -webkit-transform: translate(0, 50px); 777 | -ms-transform: translate(0, 50px); 778 | transform: translate(0, 50px) 779 | } 780 | 781 | .profile .photo:hover .social .soc-count-6 { 782 | -webkit-transform: translate(35px, 35px); 783 | -ms-transform: translate(35px, 35px); 784 | transform: translate(35px, 35px) 785 | } 786 | 787 | .profile .photo:hover .social .soc-count-7 { 788 | -webkit-transform: translate(50px, 0); 789 | -ms-transform: translate(50px, 0); 790 | transform: translate(50px, 0) 791 | } 792 | 793 | .profile .photo:hover .social .soc-count-8 { 794 | -webkit-transform: translate(35px, -35px); 795 | -ms-transform: translate(35px, -35px); 796 | transform: translate(35px, -35px) 797 | } 798 | 799 | .profile .details .heading { 800 | padding: 5px; 801 | margin: 10px 0; 802 | text-align: center; 803 | border-radius: 15px; 804 | background: rgba(0, 0, 0, .4) 805 | } 806 | 807 | .profile .details .heading>.name { 808 | font-size: 18px; 809 | font-weight: 400; 810 | padding-right: 5px 811 | } 812 | 813 | .profile .details .heading>.position { 814 | font-size: 12px; 815 | padding-left: 5px; 816 | vertical-align: 1px; 817 | border-left: 1px solid 818 | } 819 | 820 | .profile .details .text { 821 | margin: 0; 822 | color: #ccc; 823 | line-height: 24px; 824 | text-align: center; 825 | -webkit-animation-duration: .4s; 826 | animation-duration: .4s 827 | } 828 | 829 | .setting-list { 830 | margin-left: -15px; 831 | margin-right: -15px 832 | } 833 | 834 | .setting-list .gear { 835 | padding: 10px 15px; 836 | font-size: 14px; 837 | font-weight: 400 838 | } 839 | 840 | .setting-list .gear:not(:last-child) { 841 | border-bottom: 1px solid rgba(170, 170, 170, .4) 842 | } 843 | 844 | .setting-list .gear>.action { 845 | color: #aaa 846 | } 847 | 848 | .setting-list .gear:nth-child(1) { 849 | -webkit-animation-duration: .1s; 850 | animation-duration: .1s 851 | } 852 | 853 | .setting-list .gear:nth-child(2) { 854 | -webkit-animation-duration: .2s; 855 | animation-duration: .2s 856 | } 857 | 858 | .setting-list .gear:nth-child(3) { 859 | -webkit-animation-duration: .3s; 860 | animation-duration: .3s 861 | } 862 | 863 | .setting-list .gear:nth-child(4) { 864 | -webkit-animation-duration: .4s; 865 | animation-duration: .4s 866 | } 867 | 868 | .setting-list .gear:nth-child(5) { 869 | -webkit-animation-duration: .5s; 870 | animation-duration: .5s 871 | } 872 | 873 | .setting-list .gear:nth-child(6) { 874 | -webkit-animation-duration: .6s; 875 | animation-duration: .6s 876 | } 877 | 878 | .credits .title { 879 | line-height: 24px; 880 | text-align: center 881 | } 882 | 883 | .credits .credit-ol { 884 | margin: 20px 0; 885 | counter-reset: credits 886 | } 887 | 888 | .credits .credit-li { 889 | line-height: 30px; 890 | position: relative; 891 | padding-left: 20px 892 | } 893 | 894 | .credits .credit-li:before { 895 | top: 0; 896 | left: 0; 897 | position: absolute; 898 | content: counter(credits); 899 | counter-increment: credits 900 | } 901 | 902 | .credits .credit-li:nth-child(1) { 903 | -webkit-animation-duration: .3s; 904 | animation-duration: .3s 905 | } 906 | 907 | .credits .credit-li:nth-child(2) { 908 | -webkit-animation-duration: .4s; 909 | animation-duration: .4s 910 | } 911 | 912 | .credits .credit-li:nth-child(3) { 913 | -webkit-animation-duration: .5s; 914 | animation-duration: .5s 915 | } 916 | 917 | .credits .credit-li:nth-child(4) { 918 | -webkit-animation-duration: .6s; 919 | animation-duration: .6s 920 | } 921 | 922 | .credits .credit-li:nth-child(5) { 923 | -webkit-animation-duration: .7s; 924 | animation-duration: .7s 925 | } 926 | 927 | .credits .credit-li:nth-child(6) { 928 | -webkit-animation-duration: .8s; 929 | animation-duration: .8s 930 | } 931 | 932 | .credits .credit-li a { 933 | color: inherit; 934 | text-decoration: none; 935 | padding: 1px 5px; 936 | border-radius: 13px; 937 | -webkit-transition: all .6s ease-in-out 0s; 938 | transition: all .6s ease-in-out 0s 939 | } 940 | 941 | .credits .credit-li:hover a { 942 | box-shadow: 150px 0 0 0 rgba(0, 0, 0, .4) inset 943 | } 944 | 945 | .credits .credit-li span { 946 | font-size: 13px 947 | } 948 | 949 | .credits .text { 950 | margin-top: 10px; 951 | line-height: 22px; 952 | text-align: center; 953 | } -------------------------------------------------------------------------------- /example/CNAME: -------------------------------------------------------------------------------- 1 | css.yuxizhe.ml -------------------------------------------------------------------------------- /example/fonts/ionicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuxizhe/css/3ed3499b487a3d975566938b9b3cc82b59de291d/example/fonts/ionicons.eot -------------------------------------------------------------------------------- /example/fonts/ionicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuxizhe/css/3ed3499b487a3d975566938b9b3cc82b59de291d/example/fonts/ionicons.ttf -------------------------------------------------------------------------------- /example/fonts/ionicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuxizhe/css/3ed3499b487a3d975566938b9b3cc82b59de291d/example/fonts/ionicons.woff -------------------------------------------------------------------------------- /example/style/default.css: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.useso.com/css?family=Raleway:200,500,700,800); 2 | @font-face { 3 | font-family: 'icomoon'; 4 | src:url('../fonts/icomoon.eot?rretjt'); 5 | src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'), 6 | url('../fonts/icomoon.woff?rretjt') format('woff'), 7 | url('../fonts/icomoon.ttf?rretjt') format('truetype'), 8 | url('../fonts/icomoon.svg?rretjt#icomoon') format('svg'); 9 | font-weight: normal; 10 | font-style: normal; 11 | } 12 | 13 | [class^="icon-"], [class*=" icon-"] { 14 | font-family: 'icomoon'; 15 | speak: none; 16 | font-style: normal; 17 | font-weight: normal; 18 | font-variant: normal; 19 | text-transform: none; 20 | line-height: 1; 21 | 22 | /* Better Font Rendering =========== */ 23 | -webkit-font-smoothing: antialiased; 24 | -moz-osx-font-smoothing: grayscale; 25 | } 26 | 27 | body, html { font-size: 100%; padding: 0; margin: 0;} 28 | 29 | /* Reset */ 30 | *, 31 | *:after, 32 | *:before { 33 | -webkit-box-sizing: border-box; 34 | -moz-box-sizing: border-box; 35 | box-sizing: border-box; 36 | } 37 | 38 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 39 | .clearfix:before, 40 | .clearfix:after { 41 | content: " "; 42 | display: table; 43 | } 44 | 45 | .clearfix:after { 46 | clear: both; 47 | } 48 | 49 | body{ 50 | font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif; 51 | } 52 | a{color: #2fa0ec;text-decoration: none;outline: none;} 53 | a:hover,a:focus{color:#74777b;} 54 | 55 | .htmleaf-container{ 56 | margin: 0 auto; 57 | overflow: hidden; 58 | } 59 | 60 | .bgcolor-1 { background: #f0efee; } 61 | .bgcolor-2 { background: #f9f9f9; } 62 | .bgcolor-3 { background: #e8e8e8; }/*light grey*/ 63 | .bgcolor-4 { background: #2f3238; color: #fff; }/*Dark grey*/ 64 | .bgcolor-5 { background: #df6659; color: #521e18; }/*pink1*/ 65 | .bgcolor-6 { background: #2fa8ec; }/*sky blue*/ 66 | .bgcolor-7 { background: #d0d6d6; }/*White tea*/ 67 | .bgcolor-8 { background: #3d4444; color: #fff; }/*Dark grey2*/ 68 | .bgcolor-9 { background: #ef3f52; color: #fff;}/*pink2*/ 69 | .bgcolor-10{ background: #64448f; color: #fff;}/*Violet*/ 70 | .bgcolor-11{ background: #3755ad; color: #fff;}/*dark blue*/ 71 | .bgcolor-12{ background: #3498DB; color: #fff;}/*light blue*/ 72 | /* Header */ 73 | .htmleaf-header{ 74 | padding: 1em 190px 1em; 75 | letter-spacing: -1px; 76 | text-align: center; 77 | } 78 | .htmleaf-header h1 { 79 | color: #fff; 80 | font-weight: 600; 81 | font-size: 2em; 82 | line-height: 1; 83 | margin-bottom: 0; 84 | font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif; 85 | } 86 | .htmleaf-header h1 span { 87 | font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif; 88 | display: block; 89 | font-size: 60%; 90 | font-weight: 400; 91 | padding: 0.8em 0 0.5em 0; 92 | color: #c3c8cd; 93 | } 94 | /*nav*/ 95 | .htmleaf-demo a{color: #1d7db1;text-decoration: none;} 96 | .htmleaf-demo{width: 100%;padding-bottom: 1.2em;} 97 | .htmleaf-demo a{display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid #1d7db1;font-weight: 700;} 98 | .htmleaf-demo a:hover{opacity: 0.6;} 99 | .htmleaf-demo a.current{background:#1d7db1;color: #fff; } 100 | /* Top Navigation Style */ 101 | .htmleaf-links { 102 | position: relative; 103 | display: inline-block; 104 | white-space: nowrap; 105 | font-size: 1.5em; 106 | text-align: center; 107 | } 108 | 109 | .htmleaf-links::after { 110 | position: absolute; 111 | top: 0; 112 | left: 50%; 113 | margin-left: -1px; 114 | width: 2px; 115 | height: 100%; 116 | background: #dbdbdb; 117 | content: ''; 118 | -webkit-transform: rotate3d(0,0,1,22.5deg); 119 | transform: rotate3d(0,0,1,22.5deg); 120 | } 121 | 122 | .htmleaf-icon { 123 | display: inline-block; 124 | margin: 0.5em; 125 | padding: 0em 0; 126 | width: 1.5em; 127 | text-decoration: none; 128 | } 129 | 130 | .htmleaf-icon span { 131 | display: none; 132 | } 133 | 134 | .htmleaf-icon:before { 135 | margin: 0 5px; 136 | text-transform: none; 137 | font-weight: normal; 138 | font-style: normal; 139 | font-variant: normal; 140 | font-family: 'icomoon'; 141 | line-height: 1; 142 | speak: none; 143 | -webkit-font-smoothing: antialiased; 144 | } 145 | /* footer */ 146 | .htmleaf-footer{width: 100%;padding-top: 10px;} 147 | .htmleaf-small{font-size: 0.8em;} 148 | .center{text-align: center;} 149 | /****/ 150 | .related { 151 | width: 100%; 152 | margin-top: 30px; 153 | color: #fff; 154 | background: #333; 155 | text-align: center; 156 | font-size: 1.25em; 157 | padding: 0.5em 0; 158 | overflow: hidden; 159 | } 160 | 161 | .related > a { 162 | vertical-align: top; 163 | width: calc(100% - 20px); 164 | max-width: 340px; 165 | display: inline-block; 166 | text-align: center; 167 | margin: 20px 10px; 168 | padding: 25px; 169 | font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif; 170 | } 171 | .related a { 172 | display: inline-block; 173 | text-align: left; 174 | margin: 20px auto; 175 | padding: 10px 20px; 176 | opacity: 0.8; 177 | -webkit-transition: opacity 0.3s; 178 | transition: opacity 0.3s; 179 | -webkit-backface-visibility: hidden; 180 | } 181 | 182 | .related a:hover, 183 | .related a:active { 184 | opacity: 1; 185 | } 186 | 187 | .related a img { 188 | max-width: 100%; 189 | opacity: 0.8; 190 | border-radius: 4px; 191 | } 192 | .related a:hover img, 193 | .related a:active img { 194 | opacity: 1; 195 | } 196 | .related h3{font-family: "Microsoft YaHei", sans-serif;} 197 | .related a h3 { 198 | font-weight: 300; 199 | margin-top: 0.15em; 200 | color: #fff; 201 | } 202 | /* icomoon */ 203 | .icon-htmleaf-home-outline:before { 204 | content: "\e5000"; 205 | } 206 | 207 | .icon-htmleaf-arrow-forward-outline:before { 208 | content: "\e5001"; 209 | } 210 | 211 | @media screen and (max-width: 50em) { 212 | .htmleaf-header { 213 | padding: 3em 10% 4em; 214 | } 215 | .htmleaf-header h1 { 216 | font-size:2em; 217 | } 218 | } 219 | 220 | 221 | @media screen and (max-width: 40em) { 222 | .htmleaf-header h1 { 223 | font-size: 1.5em; 224 | } 225 | } 226 | 227 | @media screen and (max-width: 30em) { 228 | .htmleaf-header h1 { 229 | font-size:1.2em; 230 | } 231 | } -------------------------------------------------------------------------------- /example/style/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: teal; 3 | font: 300 18px/18px Roboto 4 | } 5 | 6 | *, 7 | :after, 8 | :before { 9 | box-sizing: border-box 10 | } 11 | 12 | .clearfix:after, 13 | .clearfix:before { 14 | content: ''; 15 | display: table 16 | } 17 | 18 | .clearfix:after { 19 | clear: both; 20 | display: block 21 | } 22 | 23 | .mobile-wrap { 24 | margin: 50px auto; 25 | width: 300px; 26 | height: 534px; 27 | overflow: hidden; 28 | position: relative; 29 | background: url(../img/background.jpg) center no-repeat; 30 | box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19) 31 | } 32 | 33 | .mobile-wrap:before { 34 | top: 0; 35 | left: 0; 36 | right: 0; 37 | bottom: 0; 38 | content: ''; 39 | position: absolute; 40 | background: rgba(90, 93, 165, .8); 41 | background: -webkit-linear-gradient(top, rgba(90, 93, 165, 1), rgba(0, 0, 0, .7)); 42 | background: linear-gradient(to bottom, rgba(90, 93, 165, 1), rgba(0, 0, 0, .7)) 43 | } 44 | 45 | .mobile { 46 | z-index: 99; 47 | color: #fff; 48 | height: 100%; 49 | padding: 15px; 50 | position: relative 51 | } 52 | 53 | .mobile .header { 54 | clear: both; 55 | overflow: hidden; 56 | padding-top: 15px 57 | } 58 | 59 | .mobile .header>span { 60 | font-size: 24px; 61 | min-width: 24px 62 | } 63 | 64 | .mobile .header>.title { 65 | font-size: 16px; 66 | line-height: 24px; 67 | margin-left: 15px 68 | } 69 | 70 | .mobile .header .pull-left { 71 | float: left 72 | } 73 | 74 | .mobile .header .pull-right { 75 | float: right 76 | } 77 | 78 | .mobile .header .ion-ios-arrow-back { 79 | min-width: 25px 80 | } 81 | 82 | .mobile .header .ion-ios-navicon>i { 83 | height: 1px; 84 | width: 20px; 85 | margin-top: 5px; 86 | background: #fff; 87 | position: relative; 88 | display: inline-block 89 | } 90 | 91 | .mobile .header .ion-ios-navicon>i:after, 92 | .mobile .header .ion-ios-navicon>i:before { 93 | content: ''; 94 | width: inherit; 95 | height: inherit; 96 | position: absolute; 97 | background: inherit 98 | } 99 | 100 | .mobile .header .ion-ios-navicon>i:before { 101 | bottom: 12px 102 | } 103 | 104 | .mobile .header .ion-ios-navicon>i:after { 105 | bottom: 6px 106 | } 107 | 108 | .nav { 109 | right: 15px; 110 | z-index: 20; 111 | width: 45px; 112 | bottom: 15px; 113 | height: 45px; 114 | display: block; 115 | position: absolute; 116 | line-height: 45px; 117 | border-radius: 50%; 118 | box-shadow: 0 0 5px 0 rgba(0, 0, 0, .75) 119 | } 120 | 121 | .mask { 122 | z-index: 21; 123 | color: #fff; 124 | width: inherit; 125 | height: inherit; 126 | cursor: pointer; 127 | font-size: 28px; 128 | text-align: center; 129 | border-radius: 50%; 130 | position: absolute; 131 | background: #f23363; 132 | -webkit-transition: all .1s ease-in-out 0s; 133 | transition: all .1s ease-in-out 0s 134 | } 135 | 136 | .nav.active .mask { 137 | background: #cf0e3f; 138 | -webkit-transform: rotate(-135deg); 139 | -ms-transform: rotate(-135deg); 140 | transform: rotate(-135deg) 141 | } 142 | 143 | .nav:after { 144 | top: 0; 145 | left: 0; 146 | content: ''; 147 | width: inherit; 148 | height: inherit; 149 | border-radius: 50%; 150 | position: absolute; 151 | background: #f23363; 152 | -webkit-transition: all .1s ease-in-out 0s; 153 | transition: all .1s ease-in-out 0s 154 | } 155 | 156 | .nav.active:after { 157 | top: -125px; 158 | left: -125px; 159 | width: 350px; 160 | height: 350px 161 | } 162 | 163 | .nav-item { 164 | top: 0; 165 | left: 0; 166 | z-index: 19; 167 | width: 45px; 168 | height: 45px; 169 | color: #fff; 170 | font-size: 24px; 171 | -webkit-transform: none; 172 | -ms-transform: none; 173 | transform: none; 174 | line-height: 45px; 175 | border-radius: 50%; 176 | position: absolute; 177 | text-align: center; 178 | -webkit-transition: all .3s cubic-bezier(.68, 1.55, .265, 1); 179 | transition: all .3s cubic-bezier(.68, 1.55, .265, 1) 180 | } 181 | 182 | .nav.active .nav-count-1 { 183 | -webkit-transform: translate(10px, -100px); 184 | -ms-transform: translate(10px, -100px); 185 | transform: translate(10px, -100px) 186 | } 187 | 188 | .nav.active .nav-count-2 { 189 | -webkit-transform: translate(-35px, -80px); 190 | -ms-transform: translate(-35px, -80px); 191 | transform: translate(-35px, -80px) 192 | } 193 | 194 | .nav.active .nav-count-3 { 195 | -webkit-transform: translate(-80px, -45px); 196 | -ms-transform: translate(-80px, -45px); 197 | transform: translate(-80px, -45px) 198 | } 199 | 200 | .nav.active .nav-count-4 { 201 | -webkit-transform: translate(-100px, 0); 202 | -ms-transform: translate(-100px, 0); 203 | transform: translate(-100px, 0) 204 | } 205 | 206 | .pull-left { 207 | float: left; 208 | cursor: pointer; 209 | } 210 | 211 | .pull-right { 212 | float: right; 213 | cursor: pointer; 214 | } 215 | 216 | .html, 217 | .invisible { 218 | display: none 219 | } 220 | 221 | .html.visible, 222 | .visible { 223 | display: block 224 | } 225 | 226 | .sidebar .sidebar-content, 227 | .sidebar .sidebar-overlay { 228 | top: 0; 229 | left: 0; 230 | bottom: 0; 231 | position: absolute; 232 | -webkit-transition: all .3s ease-in-out 0s; 233 | transition: all .3s ease-in-out 0s 234 | } 235 | 236 | .sidebar .sidebar-overlay { 237 | right: 0; 238 | opacity: 0; 239 | width: 100%; 240 | z-index: 999; 241 | -webkit-transform: scale(0); 242 | -ms-transform: scale(0); 243 | transform: scale(0); 244 | background: rgba(0, 0, 0, .4) 245 | } 246 | 247 | .sidebar .sidebar-content { 248 | width: 80%; 249 | color: #333; 250 | padding: 15px; 251 | z-index: 9999; 252 | background: #fff; 253 | -webkit-transform: translateX(-100%); 254 | -ms-transform: translateX(-100%); 255 | transform: translateX(-100%) 256 | } 257 | 258 | .sidebar.active .sidebar-content { 259 | -webkit-transform: translateX(0); 260 | -ms-transform: translateX(0); 261 | transform: translateX(0) 262 | } 263 | 264 | .sidebar.active .sidebar-overlay { 265 | opacity: 1; 266 | -webkit-transform: scale(1); 267 | -ms-transform: scale(1); 268 | transform: scale(1) 269 | } 270 | 271 | .sidebar .sidebar-content .top-head .name { 272 | font-size: 28px; 273 | font-weight: 400; 274 | margin-bottom: 5px 275 | } 276 | 277 | .sidebar .sidebar-content .top-head .email { 278 | font-size: 13px; 279 | margin-bottom: 50px 280 | } 281 | 282 | .sidebar .sidebar-content .nav-left>a { 283 | color: #333; 284 | display: block; 285 | font-size: 16px; 286 | padding: 10px 0; 287 | line-height: 24px; 288 | vertical-align: top; 289 | text-decoration: none 290 | } 291 | 292 | .sidebar .sidebar-content .nav-left>a>span { 293 | color: #aaa; 294 | font-size: 24px; 295 | min-width: 40px; 296 | display: inline-block 297 | } 298 | 299 | .chats, 300 | .compose, 301 | .credits, 302 | .settings, 303 | .welcome { 304 | margin-top: 50px 305 | } 306 | 307 | .on-off { 308 | display: none 309 | } 310 | 311 | .on-off+label { 312 | width: 30px; 313 | height: 10px; 314 | position: relative; 315 | border-radius: 5px; 316 | background: #dedee0; 317 | display: inline-block; 318 | -webkit-transition: all .3s ease-in-out 0s; 319 | transition: all .3s ease-in-out 0s 320 | } 321 | 322 | .on-off+label:after { 323 | left: 0; 324 | top: -2px; 325 | width: 15px; 326 | content: ''; 327 | height: 15px; 328 | position: absolute; 329 | border-radius: 50%; 330 | background: #bebdc2; 331 | -webkit-transition: all .3s ease-in-out 0s; 332 | transition: all .3s ease-in-out 0s 333 | } 334 | 335 | .on-off:checked+label { 336 | background: #fd99b3 337 | } 338 | 339 | .on-off:checked+label:after { 340 | left: 15px; 341 | background: #fb3666 342 | } 343 | 344 | .btn { 345 | color: #eee; 346 | width: 100%; 347 | border: none; 348 | font-size: 16px; 349 | padding: 12px 24px; 350 | background: #cf0e3f; 351 | border-radius: 30px 352 | } 353 | 354 | .welcome .datetime .date, 355 | .welcome .datetime .day { 356 | margin-bottom: 15px 357 | } 358 | 359 | .welcome .datetime .day { 360 | font-size: 28px; 361 | -webkit-animation-duration: .2s; 362 | animation-duration: .2s 363 | } 364 | 365 | .welcome .datetime .date { 366 | -webkit-animation-duration: .35s; 367 | animation-duration: .35s 368 | } 369 | 370 | .forecast { 371 | margin-top: 30px 372 | } 373 | 374 | .forecast .temperature { 375 | text-align: right 376 | } 377 | 378 | .forecast .datetime .day, 379 | .forecast .temperature .unit { 380 | font-size: 28px; 381 | min-height: 33px 382 | } 383 | 384 | .forecast .datetime .date, 385 | .forecast .temperature .location { 386 | color: #ccc; 387 | font-size: 12px 388 | } 389 | 390 | .forecast .temperature .unit>i { 391 | top: -2px; 392 | font-style: normal; 393 | position: relative 394 | } 395 | 396 | .forecast .animated { 397 | -webkit-animation-duration: .2s; 398 | animation-duration: .2s 399 | } 400 | 401 | .alarm-list { 402 | margin-top: 50px 403 | } 404 | 405 | .alarm-list .note { 406 | padding: 10px 0 407 | } 408 | 409 | .alarm-list .note:nth-child(1) { 410 | -webkit-animation-duration: .2s; 411 | animation-duration: .2s 412 | } 413 | 414 | .alarm-list .note:nth-child(2) { 415 | -webkit-animation-duration: .3s; 416 | animation-duration: .3s 417 | } 418 | 419 | .alarm-list .note:nth-child(3) { 420 | -webkit-animation-duration: .4s; 421 | animation-duration: .4s 422 | } 423 | 424 | .alarm-list .note .time { 425 | min-width: 35px; 426 | margin-right: 30px 427 | } 428 | 429 | .alarm-list .note .time>.shift, 430 | .alarm-list .note .to-do>.subject { 431 | color: #ccc; 432 | font-size: 11px 433 | } 434 | 435 | .alarm-list .note .time { 436 | text-align: center 437 | } 438 | 439 | .alarm-list .note .to-do>.title { 440 | font-size: 14px 441 | } 442 | 443 | .alarm-list .note:not(:last-child) { 444 | position: relative 445 | } 446 | 447 | .alarm-list .note:not(:last-child):before { 448 | bottom: 0; 449 | width: 82%; 450 | content: ''; 451 | right: -15px; 452 | position: absolute; 453 | border-bottom: 1px solid rgba(170, 170, 170, .5) 454 | } 455 | 456 | .user-list .user { 457 | width: 30px; 458 | height: 30px; 459 | margin: 4px; 460 | overflow: hidden; 461 | border-radius: 50%; 462 | display: inline-block; 463 | border: 1px solid #bbb 464 | } 465 | 466 | .user-list .user>img { 467 | width: 100% 468 | } 469 | 470 | .compose .forms .group { 471 | margin-bottom: 15px 472 | } 473 | 474 | .compose .forms .group>label { 475 | padding: 6px 0; 476 | min-width: 40px; 477 | display: inline-block 478 | } 479 | 480 | .compose .forms .group>label>span { 481 | min-width: 20px; 482 | display: inline-block 483 | } 484 | 485 | .compose .forms .group input, 486 | .compose .forms .group textarea { 487 | color: #fff; 488 | border: none; 489 | resize: none; 490 | min-width: 185px; 491 | background: 0 0; 492 | padding: 5px 10px 1px; 493 | border-bottom: 1px solid rgba(170, 170, 170, .6) 494 | } 495 | 496 | .compose .forms .visible { 497 | width: 100%; 498 | display: block!important 499 | } 500 | 501 | .compose .forms .action { 502 | margin-top: 50px 503 | } 504 | 505 | .compose .forms .group:nth-child(1) { 506 | -webkit-animation-duration: .1s; 507 | animation-duration: .1s 508 | } 509 | 510 | .compose .forms .group:nth-child(2) { 511 | -webkit-animation-duration: .2s; 512 | animation-duration: .2s 513 | } 514 | 515 | .compose .forms .group:nth-child(3) { 516 | -webkit-animation-duration: .3s; 517 | animation-duration: .3s 518 | } 519 | 520 | .compose .forms .group:nth-child(4) { 521 | -webkit-animation-duration: .4s; 522 | animation-duration: .4s 523 | } 524 | 525 | .chats .tabs-list { 526 | margin-bottom: 15px 527 | } 528 | 529 | .chats .tabs-list .tab { 530 | float: left; 531 | color: #aaa; 532 | font-size: 12px; 533 | font-weight: 400; 534 | margin-right: 15px; 535 | padding-bottom: 2px; 536 | text-decoration: none; 537 | text-transform: uppercase; 538 | border-bottom: 2px solid transparent 539 | } 540 | 541 | .chats .tabs-list .tab.active, 542 | .chats .tabs-list .tab:hover { 543 | color: #fff; 544 | border-bottom: 2px solid 545 | } 546 | 547 | .chats .active-users .user { 548 | padding: 5px 0; 549 | cursor: default 550 | } 551 | 552 | .chats .active-users .photo { 553 | width: 40px; 554 | height: 40px; 555 | overflow: hidden; 556 | border-radius: 50%; 557 | border: 2px solid #fff; 558 | box-shadow: 0 3px 2px rgba(0, 0, 0, .4) 559 | } 560 | 561 | .chats .active-users .photo img { 562 | width: 100% 563 | } 564 | 565 | .chats .active-users .desc { 566 | margin-left: 15px 567 | } 568 | 569 | .chats .active-users .desc p { 570 | margin: 0; 571 | font-size: 14px 572 | } 573 | 574 | .chats .active-users .desc .name { 575 | font-weight: 400 576 | } 577 | 578 | .chats .active-users .desc .position { 579 | color: #aaa; 580 | font-size: 12px 581 | } 582 | 583 | .chats .active-users .user .idle { 584 | height: 40px; 585 | position: relative 586 | } 587 | 588 | .chats .active-users .user .idle>span { 589 | top: 50%; 590 | right: 0; 591 | width: 15px; 592 | height: 15px; 593 | margin-top: -7.5px; 594 | position: absolute; 595 | border-radius: 50%; 596 | display: inline-block; 597 | border: 1px solid #fff 598 | } 599 | 600 | .chats .active-users .user .idle>.online { 601 | background: #2ecc71 602 | } 603 | 604 | .chats .active-users .user .idle>.offline { 605 | background: #95a5a6 606 | } 607 | 608 | .chats .active-users .user .idle>.away { 609 | background: #f2ca27 610 | } 611 | 612 | .chats .active-users .user:nth-child(1) { 613 | -webkit-animation-duration: .18s; 614 | animation-duration: .18s 615 | } 616 | 617 | .chats .active-users .user:nth-child(2) { 618 | -webkit-animation-duration: .25s; 619 | animation-duration: .25s 620 | } 621 | 622 | .chats .active-users .user:nth-child(3) { 623 | -webkit-animation-duration: .35s; 624 | animation-duration: .35s 625 | } 626 | 627 | .chats .active-users .user:nth-child(4) { 628 | -webkit-animation-duration: .4s; 629 | animation-duration: .4s 630 | } 631 | 632 | .chats .active-users .user:nth-child(5) { 633 | -webkit-animation-duration: .5s; 634 | animation-duration: .5s 635 | } 636 | 637 | .chats .active-users .user:nth-child(6) { 638 | -webkit-animation-duration: .6s; 639 | animation-duration: .6s 640 | } 641 | 642 | .chats .active-users .user .idle>span:before { 643 | right: 20px; 644 | bottom: -2px; 645 | display: none; 646 | padding: 0 5px; 647 | font-size: 12px; 648 | position: absolute; 649 | border-radius: 2px; 650 | content: attr(class); 651 | background: rgba(0, 0, 0, .4); 652 | text-transform: capitalize 653 | } 654 | 655 | .chats .active-users .user:hover .idle>span:before { 656 | display: block; 657 | -webkit-animation: fadeInRight .4s; 658 | animation: fadeInRight .4s 659 | } 660 | 661 | .profile { 662 | margin-top: 40px 663 | } 664 | 665 | .profile .photo { 666 | margin: auto; 667 | width: 150px; 668 | height: 150px; 669 | overflow: hidden; 670 | position: relative; 671 | border-radius: 50%; 672 | border: 6px solid #ccc 673 | } 674 | 675 | .profile .photo img { 676 | width: 100%; 677 | border-radius: 50%; 678 | -webkit-transition: all .2s ease-in-out 0s; 679 | transition: all .2s ease-in-out 0s 680 | } 681 | 682 | .profile .photo .social { 683 | top: 50%; 684 | left: 50%; 685 | width: 30px; 686 | z-index: 99; 687 | height: 30px; 688 | margin-top: -15px; 689 | margin-left: -15px; 690 | position: absolute; 691 | -webkit-transform: scale(0); 692 | -ms-transform: scale(0); 693 | transform: scale(0); 694 | -webkit-transition: all .4s ease-in-out 0s; 695 | transition: all .4s ease-in-out 0s 696 | } 697 | 698 | .profile .photo .social .soc-item { 699 | top: 0; 700 | left: 0; 701 | z-index: 19; 702 | width: 35px; 703 | height: 35px; 704 | color: #eee; 705 | font-size: 24px; 706 | -webkit-transform: none; 707 | -ms-transform: none; 708 | transform: none; 709 | line-height: 35px; 710 | border-radius: 50%; 711 | position: absolute; 712 | text-align: center; 713 | -webkit-transition: all .3s cubic-bezier(.68, 1.55, .265, 1); 714 | transition: all .3s cubic-bezier(.68, 1.55, .265, 1) 715 | } 716 | 717 | .profile .photo .social .soc-item:hover { 718 | color: #fff 719 | } 720 | 721 | .profile .photo:after { 722 | top: 0; 723 | left: 0; 724 | right: 0; 725 | bottom: 0; 726 | z-index: 0; 727 | content: ''; 728 | position: absolute; 729 | border-radius: 50%; 730 | -webkit-transform: scale(0); 731 | -ms-transform: scale(0); 732 | transform: scale(0); 733 | background: rgba(0, 0, 0, .2); 734 | -webkit-transition: all .3s ease-in-out 0s; 735 | transition: all .3s ease-in-out 0s 736 | } 737 | 738 | .profile .photo:hover img { 739 | -webkit-transform: scale(.5) rotate(10deg); 740 | -ms-transform: scale(.5) rotate(10deg); 741 | transform: scale(.5) rotate(10deg) 742 | } 743 | 744 | .profile .photo:hover .social, 745 | .profile .photo:hover:after { 746 | -webkit-transform: scale(1); 747 | -ms-transform: scale(1); 748 | transform: scale(1) 749 | } 750 | 751 | .profile .photo:hover .social .soc-count-1 { 752 | -webkit-transform: translate(0, -50px); 753 | -ms-transform: translate(0, -50px); 754 | transform: translate(0, -50px) 755 | } 756 | 757 | .profile .photo:hover .social .soc-count-2 { 758 | -webkit-transform: translate(-35px, -35px); 759 | -ms-transform: translate(-35px, -35px); 760 | transform: translate(-35px, -35px) 761 | } 762 | 763 | .profile .photo:hover .social .soc-count-3 { 764 | -webkit-transform: translate(-50px, 0); 765 | -ms-transform: translate(-50px, 0); 766 | transform: translate(-50px, 0) 767 | } 768 | 769 | .profile .photo:hover .social .soc-count-4 { 770 | -webkit-transform: translate(-35px, 35px); 771 | -ms-transform: translate(-35px, 35px); 772 | transform: translate(-35px, 35px) 773 | } 774 | 775 | .profile .photo:hover .social .soc-count-5 { 776 | -webkit-transform: translate(0, 50px); 777 | -ms-transform: translate(0, 50px); 778 | transform: translate(0, 50px) 779 | } 780 | 781 | .profile .photo:hover .social .soc-count-6 { 782 | -webkit-transform: translate(35px, 35px); 783 | -ms-transform: translate(35px, 35px); 784 | transform: translate(35px, 35px) 785 | } 786 | 787 | .profile .photo:hover .social .soc-count-7 { 788 | -webkit-transform: translate(50px, 0); 789 | -ms-transform: translate(50px, 0); 790 | transform: translate(50px, 0) 791 | } 792 | 793 | .profile .photo:hover .social .soc-count-8 { 794 | -webkit-transform: translate(35px, -35px); 795 | -ms-transform: translate(35px, -35px); 796 | transform: translate(35px, -35px) 797 | } 798 | 799 | .profile .details .heading { 800 | padding: 5px; 801 | margin: 10px 0; 802 | text-align: center; 803 | border-radius: 15px; 804 | background: rgba(0, 0, 0, .4) 805 | } 806 | 807 | .profile .details .heading>.name { 808 | font-size: 18px; 809 | font-weight: 400; 810 | padding-right: 5px 811 | } 812 | 813 | .profile .details .heading>.position { 814 | font-size: 12px; 815 | padding-left: 5px; 816 | vertical-align: 1px; 817 | border-left: 1px solid 818 | } 819 | 820 | .profile .details .text { 821 | margin: 0; 822 | color: #ccc; 823 | line-height: 24px; 824 | text-align: center; 825 | -webkit-animation-duration: .4s; 826 | animation-duration: .4s 827 | } 828 | 829 | .setting-list { 830 | margin-left: -15px; 831 | margin-right: -15px 832 | } 833 | 834 | .setting-list .gear { 835 | padding: 10px 15px; 836 | font-size: 14px; 837 | font-weight: 400 838 | } 839 | 840 | .setting-list .gear:not(:last-child) { 841 | border-bottom: 1px solid rgba(170, 170, 170, .4) 842 | } 843 | 844 | .setting-list .gear>.action { 845 | color: #aaa 846 | } 847 | 848 | .setting-list .gear:nth-child(1) { 849 | -webkit-animation-duration: .1s; 850 | animation-duration: .1s 851 | } 852 | 853 | .setting-list .gear:nth-child(2) { 854 | -webkit-animation-duration: .2s; 855 | animation-duration: .2s 856 | } 857 | 858 | .setting-list .gear:nth-child(3) { 859 | -webkit-animation-duration: .3s; 860 | animation-duration: .3s 861 | } 862 | 863 | .setting-list .gear:nth-child(4) { 864 | -webkit-animation-duration: .4s; 865 | animation-duration: .4s 866 | } 867 | 868 | .setting-list .gear:nth-child(5) { 869 | -webkit-animation-duration: .5s; 870 | animation-duration: .5s 871 | } 872 | 873 | .setting-list .gear:nth-child(6) { 874 | -webkit-animation-duration: .6s; 875 | animation-duration: .6s 876 | } 877 | 878 | .credits .title { 879 | line-height: 24px; 880 | text-align: center 881 | } 882 | 883 | .credits .credit-ol { 884 | margin: 20px 0; 885 | counter-reset: credits 886 | } 887 | 888 | .credits .credit-li { 889 | line-height: 30px; 890 | position: relative; 891 | padding-left: 20px 892 | } 893 | 894 | .credits .credit-li:before { 895 | top: 0; 896 | left: 0; 897 | position: absolute; 898 | content: counter(credits); 899 | counter-increment: credits 900 | } 901 | 902 | .credits .credit-li:nth-child(1) { 903 | -webkit-animation-duration: .3s; 904 | animation-duration: .3s 905 | } 906 | 907 | .credits .credit-li:nth-child(2) { 908 | -webkit-animation-duration: .4s; 909 | animation-duration: .4s 910 | } 911 | 912 | .credits .credit-li:nth-child(3) { 913 | -webkit-animation-duration: .5s; 914 | animation-duration: .5s 915 | } 916 | 917 | .credits .credit-li:nth-child(4) { 918 | -webkit-animation-duration: .6s; 919 | animation-duration: .6s 920 | } 921 | 922 | .credits .credit-li:nth-child(5) { 923 | -webkit-animation-duration: .7s; 924 | animation-duration: .7s 925 | } 926 | 927 | .credits .credit-li:nth-child(6) { 928 | -webkit-animation-duration: .8s; 929 | animation-duration: .8s 930 | } 931 | 932 | .credits .credit-li a { 933 | color: inherit; 934 | text-decoration: none; 935 | padding: 1px 5px; 936 | border-radius: 13px; 937 | -webkit-transition: all .6s ease-in-out 0s; 938 | transition: all .6s ease-in-out 0s 939 | } 940 | 941 | .credits .credit-li:hover a { 942 | box-shadow: 150px 0 0 0 rgba(0, 0, 0, .4) inset 943 | } 944 | 945 | .credits .credit-li span { 946 | font-size: 13px 947 | } 948 | 949 | .credits .text { 950 | margin-top: 10px; 951 | line-height: 22px; 952 | text-align: center; 953 | } -------------------------------------------------------------------------------- /example/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | test 6 | 18 | 19 | 20 | 21 |
22 | 23 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /fonts/ionicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuxizhe/css/3ed3499b487a3d975566938b9b3cc82b59de291d/fonts/ionicons.eot -------------------------------------------------------------------------------- /fonts/ionicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuxizhe/css/3ed3499b487a3d975566938b9b3cc82b59de291d/fonts/ionicons.ttf -------------------------------------------------------------------------------- /fonts/ionicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuxizhe/css/3ed3499b487a3d975566938b9b3cc82b59de291d/fonts/ionicons.woff -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "yuxizhe ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "build": "node build/build.js", 10 | "test": "" 11 | }, 12 | "dependencies": { 13 | "vue": "^1.0.21", 14 | "babel-runtime": "^6.0.0" 15 | }, 16 | "devDependencies": { 17 | "babel-core": "^6.0.0", 18 | "babel-loader": "^6.0.0", 19 | "babel-plugin-transform-runtime": "^6.0.0", 20 | "babel-preset-es2015": "^6.0.0", 21 | "babel-preset-stage-2": "^6.0.0", 22 | "babel-register": "^6.0.0", 23 | "connect-history-api-fallback": "^1.1.0", 24 | "css-loader": "^0.23.0", 25 | "eventsource-polyfill": "^0.9.6", 26 | "express": "^4.13.3", 27 | "extract-text-webpack-plugin": "^1.0.1", 28 | "file-loader": "^0.8.4", 29 | "function-bind": "^1.0.2", 30 | "html-webpack-plugin": "^2.8.1", 31 | "http-proxy-middleware": "^0.12.0", 32 | "json-loader": "^0.5.4", 33 | "ora": "^0.2.0", 34 | "shelljs": "^0.6.0", 35 | "url-loader": "^0.5.7", 36 | "vue-hot-reload-api": "^1.2.0", 37 | "vue-html-loader": "^1.0.0", 38 | "vue-loader": "^8.3.0", 39 | "vue-style-loader": "^1.0.0", 40 | "webpack": "^1.12.2", 41 | "webpack-dev-middleware": "^1.4.0", 42 | "webpack-hot-middleware": "^2.6.0", 43 | "webpack-merge": "^0.8.3" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 55 | 72 | 296 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuxizhe/css/3ed3499b487a3d975566938b9b3cc82b59de291d/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/BlogPage.vue: -------------------------------------------------------------------------------- 1 | 37 | 106 | 108 | -------------------------------------------------------------------------------- /src/components/CookDetailPage.vue: -------------------------------------------------------------------------------- 1 | 9 | 34 | -------------------------------------------------------------------------------- /src/components/Hello.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 22 | 27 | -------------------------------------------------------------------------------- /src/components/Movie.vue: -------------------------------------------------------------------------------- 1 | 15 | 54 | 60 | -------------------------------------------------------------------------------- /src/components/SMZDM.vue: -------------------------------------------------------------------------------- 1 | 15 | 54 | 56 | -------------------------------------------------------------------------------- /src/components/ThirdPage.vue: -------------------------------------------------------------------------------- 1 | 37 | 145 | 283 | -------------------------------------------------------------------------------- /src/components/food.vue: -------------------------------------------------------------------------------- 1 | 19 | 53 | 54 | -------------------------------------------------------------------------------- /src/components/home.vue: -------------------------------------------------------------------------------- 1 | 42 | 65 | 146 | -------------------------------------------------------------------------------- /src/components/request.js: -------------------------------------------------------------------------------- 1 | //import { Promise } from 'es6-promise' 2 | // import wilddog from "wilddog"; 3 | //import firebase from "firebase" 4 | 5 | 6 | // firebase 0 wilddog 1 7 | var env = 0; 8 | 9 | if (env) { 10 | 11 | 12 | var config = { 13 | syncDomain: "yuxizhe.wilddog.com", 14 | syncURL: "https://yuxizhe.wilddogio.com" //输入节点 URL 15 | }; 16 | wilddog.initializeApp(config); 17 | 18 | } else { 19 | 20 | //好像是因为 服务器端的firebase 需要google身份认证 所以会被墙。暂时用 wilddog 21 | var config = { 22 | apiKey: "AIzaSyD4az7go2CWyb-Yy_2wHISnfoytLEzUg-4", 23 | authDomain: "yuxizhe2008.firebaseapp.com", 24 | databaseURL: "https://yuxizhe2008.firebaseio.com", 25 | storageBucket: "", 26 | }; 27 | firebase.initializeApp(config); 28 | } 29 | 30 | export function firebaseData(id) { 31 | if (env) { 32 | return wilddog.sync().ref('/' + id); 33 | } else { 34 | return firebase.database().ref('/' + id); 35 | } 36 | 37 | }; 38 | 39 | 40 | export function request(url) { 41 | return new Promise(function(resolve) { 42 | var xhr = new XMLHttpRequest() 43 | xhr.open('GET', url) 44 | xhr.setRequestHeader('apikey', 'e4288f19fe0231d205fd43745d7b15fe') 45 | xhr.send() 46 | xhr.addEventListener('load', function() { 47 | resolve(JSON.parse(this.response)) 48 | }) 49 | }) 50 | } 51 | 52 | // export function download(url) { 53 | 54 | // return new Promise(function(resolve){ 55 | 56 | // http.get(url, function(res) { 57 | // var data = ""; 58 | // res.on('data', function (chunk) { 59 | // data += chunk; 60 | // }); 61 | // res.on("end", function() { 62 | // parseString(data, function (err, result) { 63 | // resolve(result); 64 | // }); 65 | // }); 66 | // }).on("error", function() { 67 | // resolve(null); 68 | // }); 69 | 70 | // }) 71 | 72 | // } 73 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App' 2 | import HomePage from './components/home.vue' 3 | import ChartPage from './components/ThirdPage.vue' 4 | import FoodPage from './components/food.vue' 5 | import CookDetailPage from './components/CookDetailPage.vue' 6 | import MoviePage from './components/Movie.vue' 7 | import SMZDMPage from './components/SMZDM.vue' 8 | 9 | 10 | Vue.config.debug = true; 11 | 12 | Vue.use(VueRouter) 13 | 14 | var router = new VueRouter({}) 15 | 16 | router.map({ 17 | 18 | 'chats': { 19 | component: ChartPage 20 | }, 21 | 'food': { 22 | component: FoodPage 23 | }, 24 | '/food/:id': { 25 | component: CookDetailPage 26 | }, 27 | 'movie': { 28 | component: MoviePage 29 | }, 30 | 'SMZDM': { 31 | component: SMZDMPage 32 | }, 33 | 'home': { 34 | component: HomePage 35 | } 36 | 37 | }) 38 | 39 | router.redirect({ 40 | // 重定向任意未匹配路径到 /news 41 | '*': 'chats' 42 | }) 43 | 44 | 45 | 46 | router.start(App, '#app') 47 | -------------------------------------------------------------------------------- /static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuxizhe/css/3ed3499b487a3d975566938b9b3cc82b59de291d/static/.gitkeep -------------------------------------------------------------------------------- /style/default.css: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.useso.com/css?family=Raleway:200,500,700,800); 2 | @font-face { 3 | font-family: 'icomoon'; 4 | src:url('../fonts/icomoon.eot?rretjt'); 5 | src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'), 6 | url('../fonts/icomoon.woff?rretjt') format('woff'), 7 | url('../fonts/icomoon.ttf?rretjt') format('truetype'), 8 | url('../fonts/icomoon.svg?rretjt#icomoon') format('svg'); 9 | font-weight: normal; 10 | font-style: normal; 11 | } 12 | 13 | [class^="icon-"], [class*=" icon-"] { 14 | font-family: 'icomoon'; 15 | speak: none; 16 | font-style: normal; 17 | font-weight: normal; 18 | font-variant: normal; 19 | text-transform: none; 20 | line-height: 1; 21 | 22 | /* Better Font Rendering =========== */ 23 | -webkit-font-smoothing: antialiased; 24 | -moz-osx-font-smoothing: grayscale; 25 | } 26 | 27 | body, html { font-size: 100%; padding: 0; margin: 0;} 28 | 29 | /* Reset */ 30 | *, 31 | *:after, 32 | *:before { 33 | -webkit-box-sizing: border-box; 34 | -moz-box-sizing: border-box; 35 | box-sizing: border-box; 36 | } 37 | 38 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 39 | .clearfix:before, 40 | .clearfix:after { 41 | content: " "; 42 | display: table; 43 | } 44 | 45 | .clearfix:after { 46 | clear: both; 47 | } 48 | 49 | body{ 50 | font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif; 51 | } 52 | a{color: #2fa0ec;text-decoration: none;outline: none;} 53 | a:hover,a:focus{color:#74777b;} 54 | 55 | .htmleaf-container{ 56 | margin: 0 auto; 57 | overflow: hidden; 58 | } 59 | 60 | .bgcolor-1 { background: #f0efee; } 61 | .bgcolor-2 { background: #f9f9f9; } 62 | .bgcolor-3 { background: #e8e8e8; }/*light grey*/ 63 | .bgcolor-4 { background: #2f3238; color: #fff; }/*Dark grey*/ 64 | .bgcolor-5 { background: #df6659; color: #521e18; }/*pink1*/ 65 | .bgcolor-6 { background: #2fa8ec; }/*sky blue*/ 66 | .bgcolor-7 { background: #d0d6d6; }/*White tea*/ 67 | .bgcolor-8 { background: #3d4444; color: #fff; }/*Dark grey2*/ 68 | .bgcolor-9 { background: #ef3f52; color: #fff;}/*pink2*/ 69 | .bgcolor-10{ background: #64448f; color: #fff;}/*Violet*/ 70 | .bgcolor-11{ background: #3755ad; color: #fff;}/*dark blue*/ 71 | .bgcolor-12{ background: #3498DB; color: #fff;}/*light blue*/ 72 | /* Header */ 73 | .htmleaf-header{ 74 | padding: 1em 190px 1em; 75 | letter-spacing: -1px; 76 | text-align: center; 77 | } 78 | .htmleaf-header h1 { 79 | color: #fff; 80 | font-weight: 600; 81 | font-size: 2em; 82 | line-height: 1; 83 | margin-bottom: 0; 84 | font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif; 85 | } 86 | .htmleaf-header h1 span { 87 | font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif; 88 | display: block; 89 | font-size: 60%; 90 | font-weight: 400; 91 | padding: 0.8em 0 0.5em 0; 92 | color: #c3c8cd; 93 | } 94 | /*nav*/ 95 | .htmleaf-demo a{color: #1d7db1;text-decoration: none;} 96 | .htmleaf-demo{width: 100%;padding-bottom: 1.2em;} 97 | .htmleaf-demo a{display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid #1d7db1;font-weight: 700;} 98 | .htmleaf-demo a:hover{opacity: 0.6;} 99 | .htmleaf-demo a.current{background:#1d7db1;color: #fff; } 100 | /* Top Navigation Style */ 101 | .htmleaf-links { 102 | position: relative; 103 | display: inline-block; 104 | white-space: nowrap; 105 | font-size: 1.5em; 106 | text-align: center; 107 | } 108 | 109 | .htmleaf-links::after { 110 | position: absolute; 111 | top: 0; 112 | left: 50%; 113 | margin-left: -1px; 114 | width: 2px; 115 | height: 100%; 116 | background: #dbdbdb; 117 | content: ''; 118 | -webkit-transform: rotate3d(0,0,1,22.5deg); 119 | transform: rotate3d(0,0,1,22.5deg); 120 | } 121 | 122 | .htmleaf-icon { 123 | display: inline-block; 124 | margin: 0.5em; 125 | padding: 0em 0; 126 | width: 1.5em; 127 | text-decoration: none; 128 | } 129 | 130 | .htmleaf-icon span { 131 | display: none; 132 | } 133 | 134 | .htmleaf-icon:before { 135 | margin: 0 5px; 136 | text-transform: none; 137 | font-weight: normal; 138 | font-style: normal; 139 | font-variant: normal; 140 | font-family: 'icomoon'; 141 | line-height: 1; 142 | speak: none; 143 | -webkit-font-smoothing: antialiased; 144 | } 145 | /* footer */ 146 | .htmleaf-footer{width: 100%;padding-top: 10px;} 147 | .htmleaf-small{font-size: 0.8em;} 148 | .center{text-align: center;} 149 | /****/ 150 | .related { 151 | width: 100%; 152 | margin-top: 30px; 153 | color: #fff; 154 | background: #333; 155 | text-align: center; 156 | font-size: 1.25em; 157 | padding: 0.5em 0; 158 | overflow: hidden; 159 | } 160 | 161 | .related > a { 162 | vertical-align: top; 163 | width: calc(100% - 20px); 164 | max-width: 340px; 165 | display: inline-block; 166 | text-align: center; 167 | margin: 20px 10px; 168 | padding: 25px; 169 | font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif; 170 | } 171 | .related a { 172 | display: inline-block; 173 | text-align: left; 174 | margin: 20px auto; 175 | padding: 10px 20px; 176 | opacity: 0.8; 177 | -webkit-transition: opacity 0.3s; 178 | transition: opacity 0.3s; 179 | -webkit-backface-visibility: hidden; 180 | } 181 | 182 | .related a:hover, 183 | .related a:active { 184 | opacity: 1; 185 | } 186 | 187 | .related a img { 188 | max-width: 100%; 189 | opacity: 0.8; 190 | border-radius: 4px; 191 | } 192 | .related a:hover img, 193 | .related a:active img { 194 | opacity: 1; 195 | } 196 | .related h3{font-family: "Microsoft YaHei", sans-serif;} 197 | .related a h3 { 198 | font-weight: 300; 199 | margin-top: 0.15em; 200 | color: #fff; 201 | } 202 | /* icomoon */ 203 | .icon-htmleaf-home-outline:before { 204 | content: "\e5000"; 205 | } 206 | 207 | .icon-htmleaf-arrow-forward-outline:before { 208 | content: "\e5001"; 209 | } 210 | 211 | @media screen and (max-width: 50em) { 212 | .htmleaf-header { 213 | padding: 3em 10% 4em; 214 | } 215 | .htmleaf-header h1 { 216 | font-size:2em; 217 | } 218 | } 219 | 220 | 221 | @media screen and (max-width: 40em) { 222 | .htmleaf-header h1 { 223 | font-size: 1.5em; 224 | } 225 | } 226 | 227 | @media screen and (max-width: 30em) { 228 | .htmleaf-header h1 { 229 | font-size:1.2em; 230 | } 231 | } -------------------------------------------------------------------------------- /style/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: teal; 3 | font: 300 18px/18px Roboto 4 | } 5 | 6 | *, 7 | :after, 8 | :before { 9 | box-sizing: border-box 10 | } 11 | 12 | .clearfix:after, 13 | .clearfix:before { 14 | content: ''; 15 | display: table 16 | } 17 | 18 | .clearfix:after { 19 | clear: both; 20 | display: block 21 | } 22 | 23 | .mobile-wrap { 24 | margin: 50px auto; 25 | width: 300px; 26 | height: 534px; 27 | overflow: hidden; 28 | position: relative; 29 | background: url(../img/background.jpg) center no-repeat; 30 | box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19) 31 | } 32 | 33 | .mobile-wrap:before { 34 | top: 0; 35 | left: 0; 36 | right: 0; 37 | bottom: 0; 38 | content: ''; 39 | position: absolute; 40 | background: rgba(90, 93, 165, .8); 41 | background: -webkit-linear-gradient(top, rgba(90, 93, 165, 1), rgba(0, 0, 0, .7)); 42 | background: linear-gradient(to bottom, rgba(90, 93, 165, 1), rgba(0, 0, 0, .7)) 43 | } 44 | 45 | .mobile { 46 | z-index: 99; 47 | color: #fff; 48 | height: 100%; 49 | padding: 15px; 50 | position: relative 51 | } 52 | 53 | .mobile .header { 54 | clear: both; 55 | overflow: hidden; 56 | padding-top: 15px 57 | } 58 | 59 | .mobile .header>span { 60 | font-size: 24px; 61 | min-width: 24px 62 | } 63 | 64 | .mobile .header>.title { 65 | font-size: 16px; 66 | line-height: 24px; 67 | margin-left: 15px 68 | } 69 | 70 | .mobile .header .pull-left { 71 | float: left 72 | } 73 | 74 | .mobile .header .pull-right { 75 | float: right 76 | } 77 | 78 | .mobile .header .ion-ios-arrow-back { 79 | min-width: 25px 80 | } 81 | 82 | .mobile .header .ion-ios-navicon>i { 83 | height: 1px; 84 | width: 20px; 85 | margin-top: 5px; 86 | background: #fff; 87 | position: relative; 88 | display: inline-block 89 | } 90 | 91 | .mobile .header .ion-ios-navicon>i:after, 92 | .mobile .header .ion-ios-navicon>i:before { 93 | content: ''; 94 | width: inherit; 95 | height: inherit; 96 | position: absolute; 97 | background: inherit 98 | } 99 | 100 | .mobile .header .ion-ios-navicon>i:before { 101 | bottom: 12px 102 | } 103 | 104 | .mobile .header .ion-ios-navicon>i:after { 105 | bottom: 6px 106 | } 107 | 108 | .nav { 109 | right: 15px; 110 | z-index: 20; 111 | width: 45px; 112 | bottom: 15px; 113 | height: 45px; 114 | display: block; 115 | position: absolute; 116 | line-height: 45px; 117 | border-radius: 50%; 118 | box-shadow: 0 0 5px 0 rgba(0, 0, 0, .75) 119 | } 120 | 121 | .mask { 122 | z-index: 21; 123 | color: #fff; 124 | width: inherit; 125 | height: inherit; 126 | cursor: pointer; 127 | font-size: 28px; 128 | text-align: center; 129 | border-radius: 50%; 130 | position: absolute; 131 | background: #f23363; 132 | -webkit-transition: all .1s ease-in-out 0s; 133 | transition: all .1s ease-in-out 0s 134 | } 135 | 136 | .nav.active .mask { 137 | background: #cf0e3f; 138 | -webkit-transform: rotate(-135deg); 139 | -ms-transform: rotate(-135deg); 140 | transform: rotate(-135deg) 141 | } 142 | 143 | .nav:after { 144 | top: 0; 145 | left: 0; 146 | content: ''; 147 | width: inherit; 148 | height: inherit; 149 | border-radius: 50%; 150 | position: absolute; 151 | background: #f23363; 152 | -webkit-transition: all .1s ease-in-out 0s; 153 | transition: all .1s ease-in-out 0s 154 | } 155 | 156 | .nav.active:after { 157 | top: -125px; 158 | left: -125px; 159 | width: 350px; 160 | height: 350px 161 | } 162 | 163 | .nav-item { 164 | top: 0; 165 | left: 0; 166 | z-index: 19; 167 | width: 45px; 168 | height: 45px; 169 | color: #fff; 170 | font-size: 24px; 171 | -webkit-transform: none; 172 | -ms-transform: none; 173 | transform: none; 174 | line-height: 45px; 175 | border-radius: 50%; 176 | position: absolute; 177 | text-align: center; 178 | -webkit-transition: all .3s cubic-bezier(.68, 1.55, .265, 1); 179 | transition: all .3s cubic-bezier(.68, 1.55, .265, 1) 180 | } 181 | 182 | .nav.active .nav-count-1 { 183 | -webkit-transform: translate(10px, -100px); 184 | -ms-transform: translate(10px, -100px); 185 | transform: translate(10px, -100px) 186 | } 187 | 188 | .nav.active .nav-count-2 { 189 | -webkit-transform: translate(-35px, -80px); 190 | -ms-transform: translate(-35px, -80px); 191 | transform: translate(-35px, -80px) 192 | } 193 | 194 | .nav.active .nav-count-3 { 195 | -webkit-transform: translate(-80px, -45px); 196 | -ms-transform: translate(-80px, -45px); 197 | transform: translate(-80px, -45px) 198 | } 199 | 200 | .nav.active .nav-count-4 { 201 | -webkit-transform: translate(-100px, 0); 202 | -ms-transform: translate(-100px, 0); 203 | transform: translate(-100px, 0) 204 | } 205 | 206 | .pull-left { 207 | float: left; 208 | cursor: pointer; 209 | } 210 | 211 | .pull-right { 212 | float: right; 213 | cursor: pointer; 214 | } 215 | 216 | .html, 217 | .invisible { 218 | display: none 219 | } 220 | 221 | .html.visible, 222 | .visible { 223 | display: block 224 | } 225 | 226 | .sidebar .sidebar-content, 227 | .sidebar .sidebar-overlay { 228 | top: 0; 229 | left: 0; 230 | bottom: 0; 231 | position: absolute; 232 | -webkit-transition: all .3s ease-in-out 0s; 233 | transition: all .3s ease-in-out 0s 234 | } 235 | 236 | .sidebar .sidebar-overlay { 237 | right: 0; 238 | opacity: 0; 239 | width: 100%; 240 | z-index: 999; 241 | -webkit-transform: scale(0); 242 | -ms-transform: scale(0); 243 | transform: scale(0); 244 | background: rgba(0, 0, 0, .4) 245 | } 246 | 247 | .sidebar .sidebar-content { 248 | width: 80%; 249 | color: #333; 250 | padding: 15px; 251 | z-index: 9999; 252 | background: #fff; 253 | -webkit-transform: translateX(-100%); 254 | -ms-transform: translateX(-100%); 255 | transform: translateX(-100%) 256 | } 257 | 258 | .sidebar.active .sidebar-content { 259 | -webkit-transform: translateX(0); 260 | -ms-transform: translateX(0); 261 | transform: translateX(0) 262 | } 263 | 264 | .sidebar.active .sidebar-overlay { 265 | opacity: 1; 266 | -webkit-transform: scale(1); 267 | -ms-transform: scale(1); 268 | transform: scale(1) 269 | } 270 | 271 | .sidebar .sidebar-content .top-head .name { 272 | font-size: 28px; 273 | font-weight: 400; 274 | margin-bottom: 5px 275 | } 276 | 277 | .sidebar .sidebar-content .top-head .email { 278 | font-size: 13px; 279 | margin-bottom: 50px 280 | } 281 | 282 | .sidebar .sidebar-content .nav-left>a { 283 | color: #333; 284 | display: block; 285 | font-size: 16px; 286 | padding: 10px 0; 287 | line-height: 24px; 288 | vertical-align: top; 289 | text-decoration: none 290 | } 291 | 292 | .sidebar .sidebar-content .nav-left>a>span { 293 | color: #aaa; 294 | font-size: 24px; 295 | min-width: 40px; 296 | display: inline-block 297 | } 298 | 299 | .chats, 300 | .compose, 301 | .credits, 302 | .settings, 303 | .welcome { 304 | margin-top: 50px 305 | } 306 | 307 | .on-off { 308 | display: none 309 | } 310 | 311 | .on-off+label { 312 | width: 30px; 313 | height: 10px; 314 | position: relative; 315 | border-radius: 5px; 316 | background: #dedee0; 317 | display: inline-block; 318 | -webkit-transition: all .3s ease-in-out 0s; 319 | transition: all .3s ease-in-out 0s 320 | } 321 | 322 | .on-off+label:after { 323 | left: 0; 324 | top: -2px; 325 | width: 15px; 326 | content: ''; 327 | height: 15px; 328 | position: absolute; 329 | border-radius: 50%; 330 | background: #bebdc2; 331 | -webkit-transition: all .3s ease-in-out 0s; 332 | transition: all .3s ease-in-out 0s 333 | } 334 | 335 | .on-off:checked+label { 336 | background: #fd99b3 337 | } 338 | 339 | .on-off:checked+label:after { 340 | left: 15px; 341 | background: #fb3666 342 | } 343 | 344 | .btn { 345 | color: #eee; 346 | width: 100%; 347 | border: none; 348 | font-size: 16px; 349 | padding: 12px 24px; 350 | background: #cf0e3f; 351 | border-radius: 30px 352 | } 353 | 354 | .welcome .datetime .date, 355 | .welcome .datetime .day { 356 | margin-bottom: 15px 357 | } 358 | 359 | .welcome .datetime .day { 360 | font-size: 28px; 361 | -webkit-animation-duration: .2s; 362 | animation-duration: .2s 363 | } 364 | 365 | .welcome .datetime .date { 366 | -webkit-animation-duration: .35s; 367 | animation-duration: .35s 368 | } 369 | 370 | .forecast { 371 | margin-top: 30px 372 | } 373 | 374 | .forecast .temperature { 375 | text-align: right 376 | } 377 | 378 | .forecast .datetime .day, 379 | .forecast .temperature .unit { 380 | font-size: 28px; 381 | min-height: 33px 382 | } 383 | 384 | .forecast .datetime .date, 385 | .forecast .temperature .location { 386 | color: #ccc; 387 | font-size: 12px 388 | } 389 | 390 | .forecast .temperature .unit>i { 391 | top: -2px; 392 | font-style: normal; 393 | position: relative 394 | } 395 | 396 | .forecast .animated { 397 | -webkit-animation-duration: .2s; 398 | animation-duration: .2s 399 | } 400 | 401 | .alarm-list { 402 | margin-top: 50px 403 | } 404 | 405 | .alarm-list .note { 406 | padding: 10px 0 407 | } 408 | 409 | .alarm-list .note:nth-child(1) { 410 | -webkit-animation-duration: .2s; 411 | animation-duration: .2s 412 | } 413 | 414 | .alarm-list .note:nth-child(2) { 415 | -webkit-animation-duration: .3s; 416 | animation-duration: .3s 417 | } 418 | 419 | .alarm-list .note:nth-child(3) { 420 | -webkit-animation-duration: .4s; 421 | animation-duration: .4s 422 | } 423 | 424 | .alarm-list .note .time { 425 | min-width: 35px; 426 | margin-right: 30px 427 | } 428 | 429 | .alarm-list .note .time>.shift, 430 | .alarm-list .note .to-do>.subject { 431 | color: #ccc; 432 | font-size: 11px 433 | } 434 | 435 | .alarm-list .note .time { 436 | text-align: center 437 | } 438 | 439 | .alarm-list .note .to-do>.title { 440 | font-size: 14px 441 | } 442 | 443 | .alarm-list .note:not(:last-child) { 444 | position: relative 445 | } 446 | 447 | .alarm-list .note:not(:last-child):before { 448 | bottom: 0; 449 | width: 82%; 450 | content: ''; 451 | right: -15px; 452 | position: absolute; 453 | border-bottom: 1px solid rgba(170, 170, 170, .5) 454 | } 455 | 456 | .user-list .user { 457 | width: 30px; 458 | height: 30px; 459 | margin: 4px; 460 | overflow: hidden; 461 | border-radius: 50%; 462 | display: inline-block; 463 | border: 1px solid #bbb 464 | } 465 | 466 | .user-list .user>img { 467 | width: 100% 468 | } 469 | 470 | .compose .forms .group { 471 | margin-bottom: 15px 472 | } 473 | 474 | .compose .forms .group>label { 475 | padding: 6px 0; 476 | min-width: 40px; 477 | display: inline-block 478 | } 479 | 480 | .compose .forms .group>label>span { 481 | min-width: 20px; 482 | display: inline-block 483 | } 484 | 485 | .compose .forms .group input, 486 | .compose .forms .group textarea { 487 | color: #fff; 488 | border: none; 489 | resize: none; 490 | min-width: 185px; 491 | background: 0 0; 492 | padding: 5px 10px 1px; 493 | border-bottom: 1px solid rgba(170, 170, 170, .6) 494 | } 495 | 496 | .compose .forms .visible { 497 | width: 100%; 498 | display: block!important 499 | } 500 | 501 | .compose .forms .action { 502 | margin-top: 50px 503 | } 504 | 505 | .compose .forms .group:nth-child(1) { 506 | -webkit-animation-duration: .1s; 507 | animation-duration: .1s 508 | } 509 | 510 | .compose .forms .group:nth-child(2) { 511 | -webkit-animation-duration: .2s; 512 | animation-duration: .2s 513 | } 514 | 515 | .compose .forms .group:nth-child(3) { 516 | -webkit-animation-duration: .3s; 517 | animation-duration: .3s 518 | } 519 | 520 | .compose .forms .group:nth-child(4) { 521 | -webkit-animation-duration: .4s; 522 | animation-duration: .4s 523 | } 524 | 525 | .chats .tabs-list { 526 | margin-bottom: 15px 527 | } 528 | 529 | .chats .tabs-list .tab { 530 | float: left; 531 | color: #aaa; 532 | font-size: 12px; 533 | font-weight: 400; 534 | margin-right: 15px; 535 | padding-bottom: 2px; 536 | text-decoration: none; 537 | text-transform: uppercase; 538 | border-bottom: 2px solid transparent 539 | } 540 | 541 | .chats .tabs-list .tab.active, 542 | .chats .tabs-list .tab:hover { 543 | color: #fff; 544 | border-bottom: 2px solid 545 | } 546 | 547 | .chats .active-users .user { 548 | padding: 5px 0; 549 | cursor: default 550 | } 551 | 552 | .chats .active-users .photo { 553 | width: 40px; 554 | height: 40px; 555 | overflow: hidden; 556 | border-radius: 50%; 557 | border: 2px solid #fff; 558 | box-shadow: 0 3px 2px rgba(0, 0, 0, .4) 559 | } 560 | 561 | .chats .active-users .photo img { 562 | width: 100% 563 | } 564 | 565 | .chats .active-users .desc { 566 | margin-left: 15px 567 | } 568 | 569 | .chats .active-users .desc p { 570 | margin: 0; 571 | font-size: 14px 572 | } 573 | 574 | .chats .active-users .desc .name { 575 | font-weight: 400 576 | } 577 | 578 | .chats .active-users .desc .position { 579 | color: #aaa; 580 | font-size: 12px 581 | } 582 | 583 | .chats .active-users .user .idle { 584 | height: 40px; 585 | position: relative 586 | } 587 | 588 | .chats .active-users .user .idle>span { 589 | top: 50%; 590 | right: 0; 591 | width: 15px; 592 | height: 15px; 593 | margin-top: -7.5px; 594 | position: absolute; 595 | border-radius: 50%; 596 | display: inline-block; 597 | border: 1px solid #fff 598 | } 599 | 600 | .chats .active-users .user .idle>.online { 601 | background: #2ecc71 602 | } 603 | 604 | .chats .active-users .user .idle>.offline { 605 | background: #95a5a6 606 | } 607 | 608 | .chats .active-users .user .idle>.away { 609 | background: #f2ca27 610 | } 611 | 612 | .chats .active-users .user:nth-child(1) { 613 | -webkit-animation-duration: .18s; 614 | animation-duration: .18s 615 | } 616 | 617 | .chats .active-users .user:nth-child(2) { 618 | -webkit-animation-duration: .25s; 619 | animation-duration: .25s 620 | } 621 | 622 | .chats .active-users .user:nth-child(3) { 623 | -webkit-animation-duration: .35s; 624 | animation-duration: .35s 625 | } 626 | 627 | .chats .active-users .user:nth-child(4) { 628 | -webkit-animation-duration: .4s; 629 | animation-duration: .4s 630 | } 631 | 632 | .chats .active-users .user:nth-child(5) { 633 | -webkit-animation-duration: .5s; 634 | animation-duration: .5s 635 | } 636 | 637 | .chats .active-users .user:nth-child(6) { 638 | -webkit-animation-duration: .6s; 639 | animation-duration: .6s 640 | } 641 | 642 | .chats .active-users .user .idle>span:before { 643 | right: 20px; 644 | bottom: -2px; 645 | display: none; 646 | padding: 0 5px; 647 | font-size: 12px; 648 | position: absolute; 649 | border-radius: 2px; 650 | content: attr(class); 651 | background: rgba(0, 0, 0, .4); 652 | text-transform: capitalize 653 | } 654 | 655 | .chats .active-users .user:hover .idle>span:before { 656 | display: block; 657 | -webkit-animation: fadeInRight .4s; 658 | animation: fadeInRight .4s 659 | } 660 | 661 | .profile { 662 | margin-top: 40px 663 | } 664 | 665 | .profile .photo { 666 | margin: auto; 667 | width: 150px; 668 | height: 150px; 669 | overflow: hidden; 670 | position: relative; 671 | border-radius: 50%; 672 | border: 6px solid #ccc 673 | } 674 | 675 | .profile .photo img { 676 | width: 100%; 677 | border-radius: 50%; 678 | -webkit-transition: all .2s ease-in-out 0s; 679 | transition: all .2s ease-in-out 0s 680 | } 681 | 682 | .profile .photo .social { 683 | top: 50%; 684 | left: 50%; 685 | width: 30px; 686 | z-index: 99; 687 | height: 30px; 688 | margin-top: -15px; 689 | margin-left: -15px; 690 | position: absolute; 691 | -webkit-transform: scale(0); 692 | -ms-transform: scale(0); 693 | transform: scale(0); 694 | -webkit-transition: all .4s ease-in-out 0s; 695 | transition: all .4s ease-in-out 0s 696 | } 697 | 698 | .profile .photo .social .soc-item { 699 | top: 0; 700 | left: 0; 701 | z-index: 19; 702 | width: 35px; 703 | height: 35px; 704 | color: #eee; 705 | font-size: 24px; 706 | -webkit-transform: none; 707 | -ms-transform: none; 708 | transform: none; 709 | line-height: 35px; 710 | border-radius: 50%; 711 | position: absolute; 712 | text-align: center; 713 | -webkit-transition: all .3s cubic-bezier(.68, 1.55, .265, 1); 714 | transition: all .3s cubic-bezier(.68, 1.55, .265, 1) 715 | } 716 | 717 | .profile .photo .social .soc-item:hover { 718 | color: #fff 719 | } 720 | 721 | .profile .photo:after { 722 | top: 0; 723 | left: 0; 724 | right: 0; 725 | bottom: 0; 726 | z-index: 0; 727 | content: ''; 728 | position: absolute; 729 | border-radius: 50%; 730 | -webkit-transform: scale(0); 731 | -ms-transform: scale(0); 732 | transform: scale(0); 733 | background: rgba(0, 0, 0, .2); 734 | -webkit-transition: all .3s ease-in-out 0s; 735 | transition: all .3s ease-in-out 0s 736 | } 737 | 738 | .profile .photo:hover img { 739 | -webkit-transform: scale(.5) rotate(10deg); 740 | -ms-transform: scale(.5) rotate(10deg); 741 | transform: scale(.5) rotate(10deg) 742 | } 743 | 744 | .profile .photo:hover .social, 745 | .profile .photo:hover:after { 746 | -webkit-transform: scale(1); 747 | -ms-transform: scale(1); 748 | transform: scale(1) 749 | } 750 | 751 | .profile .photo:hover .social .soc-count-1 { 752 | -webkit-transform: translate(0, -50px); 753 | -ms-transform: translate(0, -50px); 754 | transform: translate(0, -50px) 755 | } 756 | 757 | .profile .photo:hover .social .soc-count-2 { 758 | -webkit-transform: translate(-35px, -35px); 759 | -ms-transform: translate(-35px, -35px); 760 | transform: translate(-35px, -35px) 761 | } 762 | 763 | .profile .photo:hover .social .soc-count-3 { 764 | -webkit-transform: translate(-50px, 0); 765 | -ms-transform: translate(-50px, 0); 766 | transform: translate(-50px, 0) 767 | } 768 | 769 | .profile .photo:hover .social .soc-count-4 { 770 | -webkit-transform: translate(-35px, 35px); 771 | -ms-transform: translate(-35px, 35px); 772 | transform: translate(-35px, 35px) 773 | } 774 | 775 | .profile .photo:hover .social .soc-count-5 { 776 | -webkit-transform: translate(0, 50px); 777 | -ms-transform: translate(0, 50px); 778 | transform: translate(0, 50px) 779 | } 780 | 781 | .profile .photo:hover .social .soc-count-6 { 782 | -webkit-transform: translate(35px, 35px); 783 | -ms-transform: translate(35px, 35px); 784 | transform: translate(35px, 35px) 785 | } 786 | 787 | .profile .photo:hover .social .soc-count-7 { 788 | -webkit-transform: translate(50px, 0); 789 | -ms-transform: translate(50px, 0); 790 | transform: translate(50px, 0) 791 | } 792 | 793 | .profile .photo:hover .social .soc-count-8 { 794 | -webkit-transform: translate(35px, -35px); 795 | -ms-transform: translate(35px, -35px); 796 | transform: translate(35px, -35px) 797 | } 798 | 799 | .profile .details .heading { 800 | padding: 5px; 801 | margin: 10px 0; 802 | text-align: center; 803 | border-radius: 15px; 804 | background: rgba(0, 0, 0, .4) 805 | } 806 | 807 | .profile .details .heading>.name { 808 | font-size: 18px; 809 | font-weight: 400; 810 | padding-right: 5px 811 | } 812 | 813 | .profile .details .heading>.position { 814 | font-size: 12px; 815 | padding-left: 5px; 816 | vertical-align: 1px; 817 | border-left: 1px solid 818 | } 819 | 820 | .profile .details .text { 821 | margin: 0; 822 | color: #ccc; 823 | line-height: 24px; 824 | text-align: center; 825 | -webkit-animation-duration: .4s; 826 | animation-duration: .4s 827 | } 828 | 829 | .setting-list { 830 | margin-left: -15px; 831 | margin-right: -15px 832 | } 833 | 834 | .setting-list .gear { 835 | padding: 10px 15px; 836 | font-size: 14px; 837 | font-weight: 400 838 | } 839 | 840 | .setting-list .gear:not(:last-child) { 841 | border-bottom: 1px solid rgba(170, 170, 170, .4) 842 | } 843 | 844 | .setting-list .gear>.action { 845 | color: #aaa 846 | } 847 | 848 | .setting-list .gear:nth-child(1) { 849 | -webkit-animation-duration: .1s; 850 | animation-duration: .1s 851 | } 852 | 853 | .setting-list .gear:nth-child(2) { 854 | -webkit-animation-duration: .2s; 855 | animation-duration: .2s 856 | } 857 | 858 | .setting-list .gear:nth-child(3) { 859 | -webkit-animation-duration: .3s; 860 | animation-duration: .3s 861 | } 862 | 863 | .setting-list .gear:nth-child(4) { 864 | -webkit-animation-duration: .4s; 865 | animation-duration: .4s 866 | } 867 | 868 | .setting-list .gear:nth-child(5) { 869 | -webkit-animation-duration: .5s; 870 | animation-duration: .5s 871 | } 872 | 873 | .setting-list .gear:nth-child(6) { 874 | -webkit-animation-duration: .6s; 875 | animation-duration: .6s 876 | } 877 | 878 | .credits .title { 879 | line-height: 24px; 880 | text-align: center 881 | } 882 | 883 | .credits .credit-ol { 884 | margin: 20px 0; 885 | counter-reset: credits 886 | } 887 | 888 | .credits .credit-li { 889 | line-height: 30px; 890 | position: relative; 891 | padding-left: 20px 892 | } 893 | 894 | .credits .credit-li:before { 895 | top: 0; 896 | left: 0; 897 | position: absolute; 898 | content: counter(credits); 899 | counter-increment: credits 900 | } 901 | 902 | .credits .credit-li:nth-child(1) { 903 | -webkit-animation-duration: .3s; 904 | animation-duration: .3s 905 | } 906 | 907 | .credits .credit-li:nth-child(2) { 908 | -webkit-animation-duration: .4s; 909 | animation-duration: .4s 910 | } 911 | 912 | .credits .credit-li:nth-child(3) { 913 | -webkit-animation-duration: .5s; 914 | animation-duration: .5s 915 | } 916 | 917 | .credits .credit-li:nth-child(4) { 918 | -webkit-animation-duration: .6s; 919 | animation-duration: .6s 920 | } 921 | 922 | .credits .credit-li:nth-child(5) { 923 | -webkit-animation-duration: .7s; 924 | animation-duration: .7s 925 | } 926 | 927 | .credits .credit-li:nth-child(6) { 928 | -webkit-animation-duration: .8s; 929 | animation-duration: .8s 930 | } 931 | 932 | .credits .credit-li a { 933 | color: inherit; 934 | text-decoration: none; 935 | padding: 1px 5px; 936 | border-radius: 13px; 937 | -webkit-transition: all .6s ease-in-out 0s; 938 | transition: all .6s ease-in-out 0s 939 | } 940 | 941 | .credits .credit-li:hover a { 942 | box-shadow: 150px 0 0 0 rgba(0, 0, 0, .4) inset 943 | } 944 | 945 | .credits .credit-li span { 946 | font-size: 13px 947 | } 948 | 949 | .credits .text { 950 | margin-top: 10px; 951 | line-height: 22px; 952 | text-align: center; 953 | } --------------------------------------------------------------------------------