├── babel.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── languages
    │   ├── index.js
    │   ├── ch.js
    │   └── en.js
    ├── views
    │   ├── About.vue
    │   └── Home.vue
    ├── store
    │   ├── index.js
    │   └── modules
    │   │   └── baberrage.js
    ├── main.js
    ├── router.js
    ├── paper.json
    ├── components
    │   └── HelloWorld.vue
    └── App.vue
├── vue.config.js
├── .gitignore
├── README.md
└── package.json


/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/superhos/vue-baberrage-demo-page/master/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/superhos/vue-baberrage-demo-page/master/src/assets/logo.png


--------------------------------------------------------------------------------
/src/languages/index.js:
--------------------------------------------------------------------------------
1 | import en from './en.js'
2 | import ch from './ch.js'
3 | export default {
4 |   en,
5 |   ch
6 | }


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="about">
3 |     <h1>This is an about page</h1>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   baseUrl: process.env.NODE_ENV === 'production'
3 |     ? '/vue-baberrage/'
4 |     : '/'
5 | }


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | import baberrage from './modules/baberrage'
 4 | 
 5 | Vue.use(Vuex)
 6 | 
 7 | export default new Vuex.Store({
 8 |   modules: {
 9 |     baberrage
10 |   }
11 | })


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 
23 | .history


--------------------------------------------------------------------------------
/src/languages/ch.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   message: {
 3 |     introduce: '一个简单的Vue弹幕插件',
 4 |     start: '开始使用',
 5 |     doc: '查看文档',
 6 |     title1: '容易使用',
 7 |     content1: '只需几行代码,简单配置即可使用。',
 8 |     title2: '高性能',
 9 |     content2: '过百条同屏弹幕依然能保持60FPS.',
10 |     title3: '独立',
11 |     content3: '弹幕数据部分交还给使用者自己管理，可以配合Vuex使用'
12 |   }
13 | }


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <img alt="Vue logo" src="../assets/logo.png">
 4 |     <HelloWorld msg="Welcome to Your Vue.js App"/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | // @ is an alias to /src
10 | import HelloWorld from '@/components/HelloWorld.vue'
11 | 
12 | export default {
13 |   name: 'home',
14 |   components: {
15 |     HelloWorld
16 |   }
17 | }
18 | </script>
19 | 


--------------------------------------------------------------------------------
/src/languages/en.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   message: {
 3 |     introduce: 'A Simple Vue Plugin for Baberrage.',
 4 |     start: 'GET STARTED',
 5 |     doc: 'DOC',
 6 |     title1: 'Easy',
 7 |     content1: 'Easy to use. Only a few words of code.',
 8 |     title2: 'High Performance',
 9 |     content2: '100 messages also can keep on 60FPS.',
10 |     title3: 'Independent',
11 |     content3: 'You can manage the messages by yourself via Vuex'
12 |   }
13 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-baberrage-website
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Run your tests
19 | ```
20 | npm run test
21 | ```
22 | 
23 | ### Lints and fixes files
24 | ```
25 | npm run lint
26 | ```
27 | 
28 | ### Customize configuration
29 | See [Configuration Reference](https://cli.vuejs.org/config/).
30 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueI18n from 'vue-i18n'
 3 | import App from './App.vue'
 4 | import router from './router'
 5 | import store from './store'
 6 | import { vueBaberrage } from 'vue-baberrage'
 7 | // import { vueBaberrage } from './lib/vue-baberrage'
 8 | import messages from './languages'
 9 | 
10 | Vue.use(vueBaberrage)
11 | Vue.use(VueI18n)
12 | Vue.config.productionTip = false
13 | 
14 | const i18n = new VueI18n({
15 |   locale: 'ch', // set locale
16 |   messages, // set locale messages
17 | })
18 | 
19 | new Vue({
20 |   router,
21 |   store,
22 |   i18n,
23 |   render: h => h(App)
24 | }).$mount('#app')
25 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>vue-baberrage-website</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-baberrage-website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Home from './views/Home.vue'
 4 | 
 5 | Vue.use(Router)
 6 | 
 7 | export default new Router({
 8 |   mode: 'history',
 9 |   base: process.env.BASE_URL,
10 |   routes: [
11 |     {
12 |       path: '/',
13 |       name: 'home',
14 |       component: Home
15 |     },
16 |     {
17 |       path: '/about',
18 |       name: 'about',
19 |       // route level code-splitting
20 |       // this generates a separate chunk (about.[hash].js) for this route
21 |       // which is lazy-loaded when the route is visited.
22 |       component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
23 |     }
24 |   ]
25 | })
26 | 


--------------------------------------------------------------------------------
/src/store/modules/baberrage.js:
--------------------------------------------------------------------------------
 1 | // initial state
 2 | // shape: [{ id, quantity }]
 3 | const state = {
 4 |     messageList: []
 5 | }
 6 |   
 7 | // getters
 8 | const getters = {
 9 |     messageList: (state) => {
10 |       return state.messageList
11 |     }
12 | }
13 |   
14 | // actions
15 | const actions = {
16 |     addMessage ({ commit }, message) {
17 |         commit('pushMessageToList', { message })
18 |     }
19 | }
20 |   
21 | // mutations
22 | const mutations = {
23 |     pushMessageToList (state, { message }) {
24 |       state.messageList.push(message)
25 |     }
26 | }
27 |   
28 | export default {
29 |     namespaced: true,
30 |     state,
31 |     getters,
32 |     actions,
33 |     mutations
34 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-baberrage-website",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "es6-promise": "^4.2.8",
12 |     "vue": "^2.5.21",
13 |     "vue-baberrage": "^3.2.4",
14 |     "vue-i18n": "^8.7.0",
15 |     "vue-router": "^3.0.1",
16 |     "vue2-github-corners": "^0.1.12",
17 |     "vuex": "^3.1.2"
18 |   },
19 |   "devDependencies": {
20 |     "@vue/cli-plugin-babel": "^3.3.0",
21 |     "@vue/cli-plugin-eslint": "^3.3.0",
22 |     "@vue/cli-service": "^3.3.0",
23 |     "babel-eslint": "^10.0.1",
24 |     "eslint": "^5.8.0",
25 |     "eslint-plugin-vue": "^5.0.0",
26 |     "node-sass": "^4.9.0",
27 |     "sass-loader": "^7.0.1",
28 |     "vue-template-compiler": "^2.5.21"
29 |   },
30 |   "eslintConfig": {
31 |     "root": true,
32 |     "env": {
33 |       "node": true
34 |     },
35 |     "extends": [
36 |       "plugin:vue/essential",
37 |       "eslint:recommended"
38 |     ],
39 |     "rules": {},
40 |     "parserOptions": {
41 |       "parser": "babel-eslint"
42 |     }
43 |   },
44 |   "postcss": {
45 |     "plugins": {
46 |       "autoprefixer": {}
47 |     }
48 |   },
49 |   "browserslist": [
50 |     "> 1%",
51 |     "last 2 versions",
52 |     "not ie <= 8"
53 |   ]
54 | }
55 | 


--------------------------------------------------------------------------------
/src/paper.json:
--------------------------------------------------------------------------------
 1 | [
 2 |  {"id": 10000, "avatar": "https://s2.ax1x.com/2020/02/17/3PmEyd.md.png", "msg": "钟声响起归家的讯号  在他生命里  仿佛带点唏嘘", "time": 15},
 3 |  {"id": 10001, "avatar": "https://s2.ax1x.com/2020/02/17/3PmEyd.md.png", "msg": "黑色肌肤给他的意义  是一生奉献 肤色斗争中  年月把拥有变做失去", "time": 15},
 4 |  {"id": 10002, "avatar": "https://s2.ax1x.com/2020/02/17/3PmEyd.md.png", "msg": "疲倦的双眼带着期望  今天只有残留的躯壳  迎接光辉岁月", "time": 15},
 5 |  {"id": 10003, "avatar": "https://s2.ax1x.com/2020/02/17/3PmEyd.md.png", "msg": "风雨中抱紧自由  一生经过彷徨的挣扎  自信可改变未来", "time": 15},
 6 |  {"id": 10004, "avatar": "https://s2.ax1x.com/2020/02/17/3PmEyd.md.png", "msg": "问谁又能做到  可否不分肤色的界限  愿这土地里", "time": 15},
 7 |  {"id": 10005, "avatar": "https://s2.ax1x.com/2020/02/17/3PmEyd.md.png", "msg": "不分你我高低  缤纷色彩闪出的美丽  是因它没有", "time": 15},
 8 |  {"id": 10006, "avatar": "https://s2.ax1x.com/2020/02/17/3PmEyd.md.png", "msg": "分开每种色彩  年月把拥有变做失去  疲倦的双眼带着期望", "time": 15},
 9 |  {"id": 10007, "avatar": "https://s2.ax1x.com/2020/02/17/3PmEyd.md.png", "msg": "今天只有残留的躯壳  迎接光辉岁月  风雨中抱紧自由", "time": 15},
10 |  {"id": 10008, "avatar": "https://s2.ax1x.com/2020/02/17/3PmEyd.md.png", "msg": "一生经过彷徨的挣扎  自信可改变未来  问谁又能做到", "time": 15},
11 |  {"id": 10009, "avatar": "https://s2.ax1x.com/2020/02/17/3PmEyd.md.png", "msg": "今天只有残留的躯壳  迎接光辉岁月  风雨中抱紧自由", "time": 15},
12 |  {"id": 10010, "avatar": "https://s2.ax1x.com/2020/02/17/3PmEyd.md.png", "msg": "一生经过彷徨的挣扎  自信可改变未来  问谁又能做到", "time": 15},
13 |  {"id": 10011, "avatar": "https://s2.ax1x.com/2020/02/17/3PmEyd.md.png", "msg": "今天只有残留的躯壳  迎接光辉岁月  风雨中抱紧自由", "time": 15},
14 |  {"id": 10012, "avatar": "https://s2.ax1x.com/2020/02/17/3PmEyd.md.png", "msg": "一生经过彷徨的挣扎  自信可改变未来  问谁又能做到", "time": 15}
15 | ]


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <p>
 5 |       For a guide and recipes on how to configure / customize this project,<br>
 6 |       check out the
 7 |       <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
 8 |     </p>
 9 |     <h3>Installed CLI Plugins</h3>
10 |     <ul>
11 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
13 |     </ul>
14 |     <h3>Essential Links</h3>
15 |     <ul>
16 |       <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
17 |       <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
18 |       <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
19 |       <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
20 |       <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
21 |     </ul>
22 |     <h3>Ecosystem</h3>
23 |     <ul>
24 |       <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
25 |       <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
26 |       <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
27 |       <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
28 |       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
29 |     </ul>
30 |   </div>
31 | </template>
32 | 
33 | <script>
34 | export default {
35 |   name: 'HelloWorld',
36 |   props: {
37 |     msg: String
38 |   }
39 | }
40 | </script>
41 | 
42 | <!-- Add "scoped" attribute to limit CSS to this component only -->
43 | <style scoped lang="scss">
44 | h3 {
45 |   margin: 40px 0 0;
46 | }
47 | ul {
48 |   list-style-type: none;
49 |   padding: 0;
50 | }
51 | li {
52 |   display: inline-block;
53 |   margin: 0 10px;
54 | }
55 | a {
56 |   color: #42b983;
57 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <div class="stage">
  4 |       <div class="lang">
  5 |         <span @click="changeLang('ch')">中</span>
  6 |         <span @click="changeLang('en')">English</span>
  7 |       </div>
  8 |       <VueGithubCorners :repoUrl="repoUrl" :catColor="catColor" :bgColor="bgColor"></VueGithubCorners>
  9 |       <div class="logo">
 10 |         <img width="230" alt="Vue-baberrage logo" src="./assets/logo.png">
 11 |       </div>
 12 |       <div class="slide">
 13 |       </div>
 14 |       <div class="slide slide-2">
 15 |       </div>
 16 |       <div class="slide slide-3">
 17 |       </div>
 18 |       <vue-baberrage
 19 |         :isShow= "barrageIsShow"
 20 |         :barrageList = "messageList"
 21 |         :loop = "barrageLoop"
 22 |         :maxWordCount = "60"
 23 |         >
 24 |       </vue-baberrage>
 25 |       <div class="demo-control">
 26 |         <div class="inside">
 27 |           <input type="text" style="float:left"  v-model="msg" />
 28 |           <button type="button" style="float:left" @click="addToList">LAUNCH</button>
 29 |         </div>
 30 |       </div>
 31 |     </div>
 32 |     <div class="content">
 33 |       <h1>{{$t("message.introduce")}}</h1>
 34 |       <img alt="" src="https://img.shields.io/badge/vueBaberrage.js-3.2.4-green.svg">
 35 |       <img alt="" src="https://img.shields.io/badge/vue.js-2.5.22-brightgreen.svg">
 36 |       <img alt="" src="https://img.shields.io/badge/minified size-15kB-blue.svg">
 37 |       
 38 |       <div class="button-group">
 39 |         <a :href="repoUrl" target="_blank">{{$t("message.start")}}</a>
 40 |         <a :href="repoUrl" target="_blank" class="fan">{{$t("message.doc")}}</a>
 41 |       </div>
 42 | 
 43 |       <div class="box-container">
 44 |         <div class="box">
 45 |           <h2>{{$t("message.title1")}}</h2>
 46 |           <p>{{$t("message.content1")}}</p>
 47 |         </div>
 48 |         <div class="box">
 49 |           <h2>{{$t("message.title2")}}</h2>
 50 |           <p>{{$t("message.content2")}}</p>
 51 |         </div>
 52 |         <div class="box">
 53 |           <h2>{{$t("message.title3")}}</h2>
 54 |           <p>{{$t("message.content3")}}</p>
 55 |         </div>
 56 |       </div>
 57 |     </div>
 58 |     <div class="footer">
 59 |       <div>
 60 |       MIT Licensed | Copyright @ 2019 SevensChan (<a href="https://www.chenhaotaishuaile.com">Homepage</a>)
 61 |       </div>
 62 |     </div>
 63 |   </div>
 64 | </template>
 65 | 
 66 | <script>
 67 | import 'es6-promise/auto'
 68 | import { mapState, mapActions } from 'vuex'
 69 | import { VueGithubCorners } from 'vue2-github-corners'
 70 | import { MESSAGE_TYPE } from 'vue-baberrage'
 71 | import paper from './paper.json'
 72 | import { setInterval, clearInterval } from 'timers';
 73 | 
 74 | export default {
 75 |   name: 'app',
 76 |   components: {VueGithubCorners},
 77 |   computed: mapState({
 78 |     messageList: state => state.baberrage.messageList
 79 |   }),
 80 |   data () {
 81 |     return {
 82 |       msg: 'Hello World! Vue-baberrage 3.2.4!',
 83 |       repoUrl: 'https://github.com/superhos/vue-baberrage',
 84 |       catColor: '#025d63',
 85 |       bgColor: '#FFF',
 86 |       barrageIsShow: true,
 87 |       currentId: 0,
 88 |       barrageLoop: false,
 89 |       barrageList: []
 90 |     }
 91 |   },
 92 |   mounted () {
 93 |     let id = 0
 94 |     let amount = paper.length
 95 |     let intervalId = setInterval(() => {
 96 |       if (id >= amount) {
 97 |         clearInterval(intervalId)
 98 |         return
 99 |       }
100 |       this.addMessage(paper[id++])
101 |     }, 1000)
102 |   },
103 |   methods: {
104 |     ...mapActions('baberrage', [
105 |       'addMessage'
106 |     ]),
107 |     removeList () {
108 |       this.barrageList = []
109 |     },
110 |     addToList () {
111 |       this.addMessage({
112 |         id: ++this.currentId,
113 |         avatar: 'https://s2.ax1x.com/2020/02/17/3PmEyd.md.png',
114 |         msg: this.msg,
115 |         // time: Math.floor(Math.random() * 10 + 5),
116 |         // style: {
117 |         //   fontSize: 15
118 |         // },
119 |         time: 5,
120 |         // extraWidth: 60,
121 |         type: MESSAGE_TYPE.NORMAL
122 |       })
123 |     },
124 |     changeLang (lang) {
125 |       this.$i18n.locale = lang
126 |     }
127 |   }
128 | }
129 | </script>
130 | 
131 | <style>
132 | html, body {
133 |   margin: 0;
134 | }
135 | 
136 | #app {
137 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
138 |   -webkit-font-smoothing: antialiased;
139 |   -moz-osx-font-smoothing: grayscale;
140 |   text-align: center;
141 |   color: #2c3e50;
142 | }
143 | 
144 | h1, h2 {
145 |   font-weight: normal;
146 | }
147 | 
148 | .stage {
149 |   height: 300px;
150 |   width: 100%;
151 |   background: #025d63;
152 |   position: relative;
153 |   overflow: hidden;
154 | }
155 | 
156 | .lang {
157 |   position: absolute;
158 |   left: 0;
159 |   top: 0;
160 |   color: #66aabb;
161 |   padding: 5px 10px;
162 |   font-size: 15px;
163 |   z-index: 998;
164 | }
165 | 
166 | .lang span{
167 |   margin-right: 8px;
168 |   cursor: pointer;
169 | }
170 | 
171 | .lang span:hover {
172 |   color: #FFF;
173 | }
174 | 
175 | .logo {
176 |   position: relative;
177 |   z-index: 99;
178 | }
179 | 
180 | .github-corners {
181 |   position: absolute;
182 |   top: 0;
183 |   right: 0;
184 |   height: 100px;
185 |   width: 100px;
186 |   z-index: 9999;
187 | }
188 | 
189 | .slide {
190 |   width: 100%;
191 |   height: 150px;
192 |   background: #02676d;
193 |   position: absolute;
194 |   left: 0%;
195 |   z-index: 1;
196 |   transform: rotate(-45deg);
197 | }
198 | 
199 | .slide-2 {
200 |   width: 100%;
201 |   height: 60px;
202 |   left: -120px;
203 |   z-index:80;
204 | }
205 | 
206 | .slide-3 {
207 |   width: 100%;
208 |   height: 40px;
209 |   left: 205px;
210 |   z-index:1;
211 | }
212 | 
213 | ul {
214 |   list-style-type: none;
215 |   padding: 0;
216 | }
217 | 
218 | li {
219 |   display: inline-block;
220 |   margin: 0 10px;
221 | }
222 | 
223 | a {
224 |   color: #42b983;
225 | }
226 | 
227 | .content {
228 |   margin-top:3em;
229 |   padding-bottom:3em;
230 | }
231 | 
232 | .content h1 {
233 |   margin:0;
234 |   margin-bottom: 20px;
235 | }
236 | 
237 | .content img {
238 |   margin-right: 5px;
239 | }
240 | 
241 | .content .button-group {
242 |   margin-top: 15px;
243 | }
244 | 
245 | .content .button-group a{
246 |   position: relative;
247 |   height: 50px;
248 |   width: 10em;
249 |   background: #00686e;
250 |   border: 1px solid #00686e;
251 |   color: #FFF;
252 |   border-radius: 50px;
253 |   margin: 1em 0;
254 |   letter-spacing: 0.1em;
255 |   min-width: 8em;
256 |   text-align: center;
257 |   margin-right: 1em;
258 |   display: inline-block;
259 |   font-size: 1.2em;
260 |   line-height: 2.7em;
261 |   font-weight: 100;
262 |   cursor: pointer;
263 |   text-decoration: none;
264 | }
265 | 
266 | .content .button-group a.fan {
267 |   background: #FFF;
268 |   border:1px solid #00686e;
269 |   color: #00686e;
270 | }
271 | 
272 | .baberrage-stage {
273 |   top: 0;
274 |   z-index:5;
275 | }
276 | 
277 | .baberrage-stage .baberrage-item.normal{
278 |   color:#FFF;
279 | }
280 | 
281 | .top{
282 |   border:1px solid #66aabb;
283 | }
284 | 
285 | .demo-control {
286 |   width: 100%;
287 |   box-sizing: border-box;
288 |   height: 58px;
289 |   margin: 0 auto;
290 |   position: absolute;
291 |   bottom: 30px;
292 |   align-items: center;
293 |   display: flex;
294 |   justify-content: center;
295 |   z-index: 99;
296 | }
297 | 
298 | .demo-control .inside{
299 |   background: rgba(0, 0, 0, 0.6);
300 |   padding: 15px 5px;
301 |   border-radius: 5px;
302 |   border: 2px solid #8ad9ff;
303 |   width: 400px;
304 |   align-items: center;
305 |   display: flex;
306 |   justify-content: center;
307 | }
308 | 
309 | .demo-control input, .demo-control button, .demo-controlselect{
310 |   height:35px;
311 |   padding:0;
312 |   float:left;
313 |   background:#00f3d8;
314 |   border:1px solid #71daff;
315 |   color:#008e97;
316 |   border-radius:0;
317 |   width:15%;
318 |   box-sizing: border-box;
319 |   outline: none;
320 | }
321 | 
322 | .demo-control button{
323 |   border-top-right-radius: 5px;
324 |   border-bottom-right-radius: 5px;
325 |   border-left: 0;
326 | }
327 | 
328 | .demo-control button:hover{
329 |   color:#00f3d8;
330 |   background:#008e97;
331 |   cursor: pointer;
332 | }
333 | 
334 | .demo-control input{
335 |   width: 75%;
336 |   height: 35px;
337 |   background: rgba(0,0,0,.7);
338 |   border: 1px solid #8ad9ff;
339 |   padding-left: 15px;
340 |   color: #FFF;
341 | }
342 | 
343 | .box-container {
344 |   display: flex;
345 |   justify-content: space-evenly;
346 |   width: 60%;
347 |   margin: 0 auto;
348 |   border-top: 1px solid #e3e3e3;
349 |   margin-top: 15px;
350 |   padding-top: 15px;
351 | }
352 | 
353 | .box-container .box {
354 |   flex: 1;
355 |   padding: 5px 10px;
356 | }
357 | 
358 | .footer {
359 |   padding: 1em 0;
360 |   color: #767676;
361 |   justify-content: center;
362 |   text-align: center;
363 |   width: 100%;
364 |   display: flex;
365 | }
366 | 
367 | .footer div {
368 |   width: 60%;
369 |   border-top: 1px solid #e3e3e3;
370 |   padding-top: 1em;
371 | }
372 | 
373 | @media only screen and (max-width: 768px) {
374 |   /* For mobile phones: */
375 |   .box-container {
376 |     flex-direction: column;
377 |   }
378 | }
379 | </style>
380 | 


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