github-forks
/
hotkeys
mirror of https://github.com/jaywcjlove/hotkeys.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add doc website.

Browse Source
2.x
jaywcjlove 6 years ago
parent 4d45d40207
commit 04a237b019
8 changed files with 1043 additions and 0 deletions
Show Stats Download Patch File Download Diff File

1
doc/.gitignore vendored
Unescape Escape View File

@ -0,0 +1 @@
node_modules/

25
doc/gulpfile.js
Unescape Escape View File

@ -0,0 +1,25 @@
var gulp = require('gulp');
var watch = require('gulp-watch');
var stylus = require('gulp-stylus');
// var rename = require("gulp-rename");
var nib = require('nib');
gulp.task('default', function() {
// 将你的默认的任务代码放在这
});
// 侦听文件改变执行任务
gulp.task('watch', function (cb) {
gulp.watch('./src/style.styl', ['stylus']);
});
// RUI CSS 生成
gulp.task('stylus', function () {
gulp.src('./src/style.styl')
.pipe(stylus({
compress:true,
use: nib()
}))
// .pipe(rename('RUI.min.css'))
.pipe(gulp.dest('./src/'));
});

381
doc/index.html
Unescape Escape View File

@ -0,0 +1,381 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hotkeys.js - A robust Javascript library for capturing keyboard input.</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="A robust Javascript library for capturing keyboard input and key combinations entered. It has no dependencies. Try to press your keyboard, The following button will highlight.">
<link rel="stylesheet" type="text/css" href="src/style.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/8.8.0/styles/default.min.css">
</head>
<body>
<div class="header">
<a href="https://github.com/jaywcjlove/hotkeys" target="_blank" class="github-corner"> <svg viewBox="0 0 250 250"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg> </a>
<div class="title">HotKeys</div>
<div class="lang"><a href="javascript:tran.setLang('default');">English</a><a href="javascript:tran.setLang('cn');">中文</a></div>
<div class="github_wrapper">
<a href="https://github.com/jaywcjlove/hotkeys/zipball/master">
<button class="github_style">Download as zip <!--{cn}zip 下载--></button>
</a>
<a href="https://github.com/jaywcjlove/hotkeys/tarball/master">
<button class="github_style">Download as tar.gz <!--{cn}tar.gz 下载--></button>
</a>
<a href="https://github.com/jaywcjlove/hotkeys/">
<button class="github_style">Fork on Github <!--{cn}复制代码到Github仓库--></button>
</a>
<a href="https://github.com/jaywcjlove/hotkeys/">
<button class="github_style">Doc on Github <!--{cn}文档在Github上--></button>
</a>
</div>
<div class="info">A robust Javascript library for capturing keyboard input and key combinations entered. It has no dependencies. Try to press your keyboard, The following button will highlight.
<!--{cn}捕获键盘输入和输入组合键，是一个强大的JavaScript库。它没有依赖。尝试按下你的键盘，下面的按钮将高亮显示-->
</div>
</div>
<div class="board">
<div class="keyboard" id="keyboard">
<ul>
<li data-keycode="27">esc</li>
<li data-keycode="112">F1</li>
<li data-keycode="113">F2</li>
<li data-keycode="114">F3</li>
<li data-keycode="115">F4</li>
<li data-keycode="116">F5</li>
<li data-keycode="117">F6</li>
<li data-keycode="118">F7</li>
<li data-keycode="119">F8</li>
<li data-keycode="120">F9</li>
<li data-keycode="121">F10</li>
<li data-keycode="122">F11</li>
<li data-keycode="123">F12</li>
<li data-keycode="-1">〇</li>
<li data-keycode="192"><span>~</span><span>`</span></li>
<li data-keycode="49"><span>!</span><span>1</span></li>
<li data-keycode="50"><span>@</span><span>2</span></li>
<li data-keycode="51"><span>#</span><span>3</span></li>
<li data-keycode="52"><span>$</span><span>4</span></li>
<li data-keycode="53"><span>%</span><span>5</span></li>
<li data-keycode="54"><span>^</span><span>6</span></li>
<li data-keycode="55"><span>&</span><span>7</span></li>
<li data-keycode="56"><span>*</span><span>8</span></li>
<li data-keycode="57"><span>(</span><span>9</span></li>
<li data-keycode="48"><span>)</span><span>0</span></li>
<li data-keycode="189"><span>＿</span><span>-</span></li>
<li data-keycode="187"><span>＋</span><span>=</span></li>
<li data-keycode="8"><span>delete</span></li>
<li data-keycode="9"><span>tab</span></li>
<li data-keycode="81">Q</li>
<li data-keycode="87">W</li>
<li data-keycode="69">E</li>
<li data-keycode="82">R</li>
<li data-keycode="84">T</li>
<li data-keycode="89">Y</li>
<li data-keycode="85">U</li>
<li data-keycode="73">I</li>
<li data-keycode="79">O</li>
<li data-keycode="80">P</li>
<li data-keycode="219"><span>{</span><span>[</span></li>
<li data-keycode="221"><span>}</span><span>]</span></li>
<li data-keycode="220"><span>|</span><span>\</span></li>
<li data-keycode="20"><i></i><span>CapsLock</span></li>
<li data-keycode="65">A</li>
<li data-keycode="83">S</li>
<li data-keycode="68">D</li>
<li data-keycode="70">F</li>
<li data-keycode="71">G</li>
<li data-keycode="72">H</li>
<li data-keycode="74">J</li>
<li data-keycode="75">K</li>
<li data-keycode="76">L</li>
<li data-keycode="186"><span>:</span><span>;</span></li>
<li data-keycode="222"><span>"</span><span>'</span></li>
<li data-keycode="13"><i>enter</i><span>return</span></li>
<li data-keycode="16"><span>shift</span></li>
<li data-keycode="90">Z</li>
<li data-keycode="88">X</li>
<li data-keycode="67">C</li>
<li data-keycode="86">V</li>
<li data-keycode="66">B</li>
<li data-keycode="78">N</li>
<li data-keycode="77">M</li>
<li data-keycode="188"><span>&lt;</span><span>,</span></li>
<li data-keycode="190"><span>&gt;</span><span>.</span></li>
<li data-keycode="191"><span>?</span><span>/</span></li>
<li data-keycode="16"><span>shift</span></li>
<li data-keycode="-1"><span>fn</span></li>
<li data-keycode="17"><span>control</span></li>
<li data-keycode="18"><i>alt</i><span>option</span></li>
<li data-keycode="91"><span>command</span></li>
<li data-keycode="32"></li>
<li data-keycode="93"><span>command</span></li>
<li data-keycode="18"><i>alt</i><span>option</span></li>
<li data-keycode="37">◀</li>
<li data-keycode="38">▲</li>
<li data-keycode="39">▶</li>
<li data-keycode="40">▼</li>
</ul>
</div>
</div>
<div class="warpper">
<div class="key_info" id="key_info"></div>
<br/>
<p>HotKeys is an input capture library with some very special features, it is easy to pick up and use, has a reasonable footprint (~3kb), and has no dependencies. It should not interfere with any JavaScript libraries or frameworks.<!--{cn}HotKeys有一些特别的功能，输入捕获键盘的库，很容易上手使用，你有理由使用它(~3kb)，并没有依赖。它不干涉任何其它的JavaScript框架或者库--></p>
<h1>USAGE<!--{cn}用法--></h1>
<p>Include hotkeys.js in your web app.<!--{cn}在您的web应用中引用hotkeys.js--></p>
<pre><code class="html">
&lt;script type=&quot;text/javascript&quot; src=&quot;hotkeys.js&quot;&gt;&lt;/script&gt;
</code></pre>
<h2>Browser Support<!--{cn}浏览器支持--></h2>
<p>Mousetrap has been tested and should work in<!--{cn}捕获器进行了测试，应该在这些浏览器中工作--></p>
<pre><code class="sh">
Internet Explorer 6+
Safari
Firefox
Chrome
</code></pre>
<h1>Building<!--{cn}构建--></h1>
<p>You will need Node.js installed on your system. you can run gulp directly:
<!--{cn}您需要在系统上安装Node.js的。您可以直接运行 Gulp ：--></p>
<pre>
<code class="sh">
# bower install
$ bower install hotkeysjs
# npm install
$ npm install hotkeys-js
$ gulp build && gulp min && gulp map
# The resulting files are:
# dist/hotkeys.js
# dist/hotkeys.min.js
# dist/hotkeys.min.map
</code></pre>
<h1>DEFINING SHORTCUTS<!--{cn}定义快捷键--></h1>
<p>One global method is exposed, key which defines shortcuts when called directly.<!--{cn}一个全局的方法暴露出来，关键的时候直接调用定义的快捷键。--></p>
<pre>
<code class="js">
hotkeys('a', function(event,handler){
//event.srcElement: input
//event.target: input
if(event.target === "input"){
alert('you pressed a!')
}
alert('you pressed a!')
});
hotkeys('ctrl+a,ctrl+b,r,f', function(event,handler){
switch(handler.key){
case "ctrl+a":alert('you pressed ctrl+a!');break;
case "ctrl+b":alert('you pressed ctrl+b!');break;
case "r":alert('you pressed r!');break;
case "f":alert('you pressed f!');break;
}
});
hotkeys('*','wcj', function(e){
console.log('do something',e);
});
</code></pre>
<h1>API REFERENCE<!--{cn}API参考--></h1>
<h2>Asterisk "*"</h2>
<p>Modifier key judgments<!--{cn}修改关键判断--></p>
<pre>
<code class="js">
hotkeys('*','wcj', function(e){
if(hotkeys.shift) console.log('shift is pressed！');
if(hotkeys.ctrl) console.log('shift is pressed! ');
if(hotkeys.alt) console.log('shift is pressed! ');
});
</code></pre>
<h2>setScope</h2>
<p>Use the <!--{cn}使用--><code>hotkeys.setScope</code> method to set scope.<!--{cn}设定范围。--></p>
<pre>
<code class="js">
// define shortcuts with a scope
hotkeys('ctrl+o, ctrl+alt+enter', 'issues', function(){
console.log('do something');
});
hotkeys('o, enter', 'files', function(){
console.log('do something else');
});
// set the scope (only 'all' and 'issues' shortcuts will be honored)
hotkeys.setScope('issues'); // default scope is 'all'
</code></pre>
<h2>deleteScope</h2>
<p>Use the <!--{cn}使用--><code>hotkeys.deleteScope</code> method to delete set scope.<!--{cn}删除设定范围。--></p>
<pre>
<code class="js">
hotkeys.deleteScope('issues');
</code></pre>
<h2>unbind</h2>
<p>Similar to defining shortcuts, they can be unbound using <!--{cn}定义的快捷键，解除绑定可以使用它--><code>hotkeys.unbind</code>.</p>
<pre>
<code class="js">
// unbind 'a' handler
hotkeys.unbind('a');
// unbind a hotkeys only for a single scope
// when no scope is specified it defaults to the current scope (hotkeys.getScope())
hotkeys.unbind('o, enter', 'issues');
hotkeys.unbind('o, enter', 'files');
</code></pre>
<h2>isPressed</h2>
<p>Other key queries. For example, <!--{cn}查询其它键。例如，--><code>hotkeys.isPressed(77)</code> is true if the <!--{cn}如果是真--><code>M</code> key is currently pressed.<!--{cn}当前按下的键。--></p>
<pre>
<code class="js">
hotkeys('a', function(){
console.log(hotkeys.isPressed("A")); //=> true
console.log(hotkeys.isPressed(65)); //=> true
});
</code></pre>
<h2>getPressedKeyCodes</h2>
<p>returns an array of key codes currently pressed.<!--{cn}返回当前按下的键盘码。--></p>
<pre>
<code class="js">
hotkeys('command+ctrl+shift+a', function(){
console.log(hotkeys.getPressedKeyCodes()); //=> [67, 16, 17, 91, 65]
})
</code></pre>
<h2>filter<!--{cn}filter过滤--></h2>
<p>
<code>INPUT</code> <code>SELECT</code> <code>TEXTAREA</code> default does not handle.<!--{cn}默认不处理他们。--><br/>
<code>Hotkeys.filter</code> to return to the <!--{cn}它返回--><code>true</code> shortcut keys set to play a role<!--{cn}设置热键发挥起作用-->, <code>flase</code> shortcut keys set up failure.<!--{cn}设置热键不起作用。-->
</p>
<pre>
<code class="js">
hotkeys.filter = function(event){
return true;
}
//How to add the filter to edit labels. &lt;div contentEditable=&quot;true&quot;&gt;&lt;/div&gt;
//"contentEditable" Older browsers that do not support drops
hotkeys.filter = function(event) {
var tagName = (event.target || event.srcElement).tagName;
return !(tagName.isContentEditable || tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA');
}
hotkeys.filter = function(event){
var tagName = (event.target || event.srcElement).tagName;
hotkeys.setScope(/^(INPUT|TEXTAREA|SELECT)$/.test(tagName) ? 'input' : 'other');
return true;
}
</code></pre>
<h2>noConflict</h2>
<p>Relinquish HotKeys’s control of the <!--{cn}放弃在--><code>hotkeys</code> variable.<!--{cn}的全局变量--></p>
<pre>
<code class="js">
var k = hotkeys.noConflict();
k('a', function() {
console.log("do something")
});
hotkeys()
// -->Uncaught TypeError: hotkeys is not a function(anonymous function)
// @ VM2170:2InjectedScript._evaluateOn
// @ VM2165:883InjectedScript._evaluateAndWrap
// @ VM2165:816InjectedScript.evaluate @ VM2165:682
</code></pre>
<h1>SUPPORTED KEYS<!--{cn}支持的热键--></h1>
<p>HotKeys understands the following modifiers:<!--{cn}热键支持的修饰键：-->
<code>⇧</code>, <code>shift</code>, <code>option</code>, <code>⌥</code>, <code>alt</code>, <code>ctrl</code>, <code>control</code>, <code>command</code>, and <code>⌘</code>.</p>
<p>The following special keys can be used for shortcuts:<!--{cn}下面的特殊键，可用于快捷键：-->
<code>backspace</code>, <code>tab</code>, <code>clear</code>, <code>enter</code>, <code>return</code>, <code>esc</code>, <code>escape</code>, <code>space</code>,
<code>up</code>, <code>down</code>, <code>left</code>, <code>right</code>, <code>home</code>, <code>end</code>, <code>pageup</code>, <code>pagedown</code>, <code>del</code>, <code>delete</code>
and <!--{cn}和--><code>f1</code> through <!--{cn}~--><code>f19</code>.<!--{cn}。--></p>
<p>
<code>⌘</code> Command()<br/>
<code>⌃</code> Control<br/>
<code>⌥</code> Option(alt)<br/>
<code>⇧</code> Shift<br/>
<code>⇪</code> Caps Lock(Capital)<br/>
<code>fn</code> Does not support fn<br/>
<code>↩︎</code> return/Enter space <br/>
</p>
<div class="github_shields">
<a href="https://github.com/jaywcjlove/hotkeys/network" target="_blank" rel="external"><img src="https://img.shields.io/github/forks/jaywcjlove/hotkeys.svg?style=social" alt=""></a> <a href="https://github.com/jaywcjlove/hotkeys/stargazers" target="_blank" rel="external"><img src="https://img.shields.io/github/stars/jaywcjlove/hotkeys.svg?style=social" alt=""></a> <a href="https://github.com/jaywcjlove/hotkeys/watchers" target="_blank" rel="external"><img src="https://img.shields.io/github/watchers/jaywcjlove/hotkeys.svg?style=social&label=Watch" alt=""></a> <a href="https://github.com/jaywcjlove/followers" target="_blank" rel="external"><img src="https://img.shields.io/github/followers/jaywcjlove.svg?style=social" alt=""></a>
</div>
<div class="kennywang">© <a target="_blank" href="http://jaywcjlove.github.io">kenny.wang</a> 2015</div>
</div>
<script type="text/javascript" src="//unpkg.com/translater.js@1.0.9/dist/translater.min.js?198711"></script>
<script type="text/javascript" src="//unpkg.com/hotkeys-js@2.0.8/dist/hotkeys.min.js?198711"></script>
<script type="text/javascript" src="src/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>

29
doc/package.json
Unescape Escape View File

@ -0,0 +1,29 @@
{
"name": "hotkeys",
"version": "1.0.0",
"description": "",
"main": "src/hotkeys.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/jaywcjlove/hotkeys.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/jaywcjlove/hotkeys/issues"
},
"homepage": "https://github.com/jaywcjlove/hotkeys",
"devDependencies": {
"highlight.js": "^8.8.0",
"jslite": "^1.1.6"
},
"dependencies": {
"gulp": "^3.9.0",
"gulp-stylus": "^2.1.0",
"gulp-watch": "^4.3.5",
"nib": "^1.1.0"
}
}

47
doc/src/hotkeys_main.js
Unescape Escape View File

@ -0,0 +1,47 @@
;(function($){
var $li_all = $('#keyboard li')
hotkeys('*', function(evn){
var key_num = evn.keyCode,str = '';
str = 'keyCode:' + key_num;
if(hotkeys.shift) str += ', shift';
if(hotkeys.ctrl) str += ', ctrl';
if(hotkeys.alt) str += ', alt';
if(hotkeys.control) str += ', control';
if(hotkeys.command) str += ', command';
$('#key_info').html(str);
console.log("evn1",evn,String.fromCharCode(evn.keyCode));
$li_all.each(function(index, el) {
var kc = $(el).data('keycode');
if(kc === key_num) $(el).addClass('pressed');
});
return false
});
$li_all.on('click',function(){
var key_num = $(this).data('keycode');
$('#key_info').html(key_num > -1 ? 'keyCode:' + $(this).data('keycode') : '');
})
$(document).on('keyup',function(){
$li_all.removeClass('pressed');
})
})(JSLite);

53
doc/src/main.js
Unescape Escape View File

@ -0,0 +1,53 @@
/*!
* home page (https://github.com/jaywcjlove/hotkeys)
*/
var keyboards = document.getElementById('keyboard').getElementsByTagName('li');
var keyinfo = document.getElementById('key_info')
// var $li_all = $('#keyboard li')
hotkeys('*', function (evn) {
var key_num = evn.keyCode, str = '';
str = 'keyCode:' + key_num;
if (hotkeys.shift) str += ', shift';
if (hotkeys.ctrl) str += ', ctrl';
if (hotkeys.alt) str += ', alt';
if (hotkeys.control) str += ', control';
if (hotkeys.command) str += ', command';
keyinfo.innerHTML = str;
console.log("evn1", evn, String.fromCharCode(evn.keyCode));
for(var i =0;i < keyboards.length; i++){
var kc = parseInt(keyboards[i].dataset.keycode,10);
if (kc === key_num) keyboards[i].className = 'pressed';
}
return false
});
function addEvent(elem, event, fn) {
if (elem.addEventListener) {
elem.addEventListener(event, fn, false);
} else if (elem.attachEvent) {
elem.attachEvent('on' + event, fn);
} else {
elem['on' + event] = fn;
}
}
for(var i =0;i < keyboards.length; i++){
keyboards[i].onclick = function (params) {
var kc = parseInt(this.dataset.keycode, 10);
keyinfo.innerHTML = 'keyCode:' + kc;
}
}
addEvent(document,'keyup',function(){
for (var i = 0; i < keyboards.length; i++) {
var kc = parseInt(keyboards[i].dataset.keycode, 10);
keyboards[i].className = '';
}
})
var tran = new Translater();

2
doc/src/style.css
View File

File diff suppressed because one or more lines are too long

505
doc/src/style.styl
Unescape Escape View File

@ -0,0 +1,505 @@
@charset "utf-8"
/* http://images.apple.com/v/macbook/c/design/images/keyboard_backlight_off_large_2x.jpg */
// 使用nib模块 和 CSS reset
// ==================================
@import 'nib'
// CSS reset
global-reset()
reset-html5()
mq_tablet = "screen and (min-width: 480px) and (max-width: 1004px)"
mq_mobile = "screen and (max-width: 479px)"
/* margin */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, img, form, applet, fieldset, legend, button, input, textarea, th, table, tr, td
margin: 0
padding: 0
border: none
/* body */
body
font-family: "微软雅黑"
font-size: 12px
color:#535353
position: relative
background: #fff
font-family: "PingHei","Lucida Grande", "Lucida Sans Unicode", "STHeitiSC-Light", "Helvetica","Arial","Verdana","sans-serif"
body, div, fieldset, form, h1, h2, h3, h4, h5, h6, html, p
-webkit-text-size-adjust: none
/* img */
img
padding: 0
margin: 0
vertical-align: top
border: none
/* div */
li,ul
outside: none
list-style: none
margin: 0 auto
padding: 0 auto
display: block
font-family: "Vrinda"
-webkit-user-select: none
-moz-user-select: none
-ms-user-select: none
user-select: none
.clear
clear: both
height: 0
width: 100%
span, b, i, a, :after, :before
-webkit-transition: all 0.5s
/* font */
a
text-decoration: none
a:hover, a:active, a:focus
text-decoration: none
i
font-style: normal
auto-width()
width: 995px
margin: 0 auto 0 auto
@media mq_tablet
width: auto
padding 20px
@media mq_mobile
width auto
padding 20px
a.github-corner
position: fixed;
top: 0;
right: 0;
.github-corner
svg
fill:#e1e1e1
color:#000
position:absolute
top:0
border:0
right:0
z-index:99
width:4.375rem
height:4.375rem
.github-corner:hover
.octo-arm
-webkit-animation:octocat-wave 560ms ease-in-out
animation:octocat-wave 560ms ease-in-out
@-webkit-keyframes octocat-wave
0%,100%
-webkit-transform:rotate(0);
transform:rotate(0)
20%,60%
-webkit-transform:rotate(-25deg)
transform:rotate(-25deg)
40%,80%
-webkit-transform:rotate(10deg)
transform:rotate(10deg)
@keyframes octocat-wave
0%,100%
-webkit-transform:rotate(0)
transform:rotate(0)
20%,60%
-webkit-transform:rotate(-25deg)
transform:rotate(-25deg)
40%,80%
-webkit-transform:rotate(10deg)
transform:rotate(10deg)
.header
background-color: #292929
padding: 74px 0 80px 0
@media mq_tablet
padding: 64px 0 25px 0
@media mq_mobile
padding: 54px 0 15px 0
.lang
text-align center
padding-top 20px
a
color #fff
margin 0 5px
.info
padding: 25px 0 8px 0
text-align: center
font-size: 27px
line-height: 34px
color:#878787
auto-width()
@media mq_tablet
font-size 21px
line-height 24px
@media mq_mobile
font-size 14px
line-height 18px
.title
text-align: center
font-size: 53px
font-weight: bold
color: #fff;
.github_wrapper
text-align: center
padding: 60px 0 22px 0
@media mq_tablet
padding: 64px 0 15px 0
@media mq_mobile
padding: 29px 0 0 0
margin 10px 30px 0 30px
.github_style
position: relative
display: inline-block
border: 1px solid #ddd
border-bottom-color: #bbb
padding: 9px 15px
font-family: Helvetica, arial, freesans, clean, sans-serif
font-size: 12px
font-weight: bold
color: #666
text-shadow: 0 1px rgba(255, 255, 255, 0.9)
cursor: pointer
border-radius: 3px
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)
background: whitesmoke
background-image: linear-gradient(-90deg, whitesmoke 0%, #e5e5e5 100%)
@media mq_mobile
padding: 3px 10px
margin-top 5px
&:hover
color: #337797;
border: 1px solid #CBE3EE
border-bottom-color: #97C7DD
background: #f0f7fa
background-image: -moz-linear-gradient(-90deg, #f0f7fa 0%, #d8eaf2 100%)
background-image: -webkit-linear-gradient(-90deg, #f0f7fa 0%, #d8eaf2 100%)
background-image: -o-linear-gradient(-90deg, #f0f7fa 0%, #d8eaf2 100%)
background-image: -ms-linear-gradient(-90deg, #f0f7fa 0%, #d8eaf2 100%)
&:active
border: 1px solid #2A65A0
border-bottom-color: #0770A0
color: #fff
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3)
background: #0770a0
background-image: -moz-linear-gradient(-90deg, #0770a0 0%, #0ca6dd 100%)
background-image: -webkit-linear-gradient(-90deg, #0770a0 0%, #0ca6dd 100%)
background-image: -o-linear-gradient(-90deg, #0770a0 0%, #0ca6dd 100%)
background-image: -ms-linear-gradient(-90deg, #0770a0 0%, #0ca6dd 100%)
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1)
-moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1)
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1)
.warpper
padding: 0 0 100px 0
font-size: 16px
auto-width()
code
border-radius: 4px
background-color:#ECECEC
padding:1px 5px
color:#9F0101
@media mq_mobile
font-size: 12px;
line-height 14px
padding:0 5px
pre
width auto
code
color:#000
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace
font-size: 14px
line-height 18px
p
padding: 10px 0 8px 5px
font-size: 14px
line-height: 21px
@media mq_mobile
padding: 10px 0 5px 5px
line-height 18px
h1
padding:15px 0 5px 5px
font-weight bold
@media mq_mobile
font-weight bold
padding-left 5px
font-size 18px
h2
padding: 15px 0 5px 15px
font-weight: bold
font-size: 14px
@media mq_mobile
font-weight bold
padding-left 5px
font-size 14px
.key_info
position:fixed
top:10px
left:10px
.kennywang
text-align:center
padding: 15px 0 0 0
font-size: 12px
.github_shields
padding: 60px 0 0 0
text-align:center
.keyboard
height: 394px
border-radius: 10px
border: 1px solid #C9C9C9
background: #F2F2F2
box-shadow: 2px 0px 2px #E2E2E2 inset,-2px 2px 3px #E2E2E2 inset,1px -0px 0px #C1C1C1 inset,0px -2px 3px #C1C1C1 inset
user-select: none
auto-width()
margin-top -66px
@media mq_mobile
display none
height: auto
@media mq_tablet
display none
ul
width: 992px
margin-top: 9px
padding-left: 11px
position: relative
float: left
/* border:2px solid black;*/
li
width: 62px
height: 62px
float: left
margin-right: 5px
margin-bottom: 5px
background: #151515
color: rgb(200,200,200)
text-align: center
line-height: 62px
font-size: 12px
border-radius: 5px
border: 1px solid #3A3A3A
box-shadow: 1px 0px 0px rgb(0,0,0),0px 1px 0px rgb(0,0,0),-1px 0px 0px rgb(0,0,0),0px -1px 0px rgb(0,0,0)
-webkit-user-select: none
-moz-user-select: none
-ms-user-select: none
user-select: none
cursor: pointer
position: relative
&:active
color:#52F800
background-color: #100068
border:1px solid #332376
.pressed
color:#52F800
background-color: #100068
border:1px solid #332376
.keyboard li:nth-child(1)
width: 99px
height: 28px
line-height: 28px
text-indent: 1em
text-align: left
.keyboard li:nth-child(2),
.keyboard li:nth-child(3),
.keyboard li:nth-child(4),
.keyboard li:nth-child(5),
.keyboard li:nth-child(6),
.keyboard li:nth-child(7),
.keyboard li:nth-child(8),
.keyboard li:nth-child(9),
.keyboard li:nth-child(10),
.keyboard li:nth-child(11),
.keyboard li:nth-child(12),
.keyboard li:nth-child(13),
.keyboard li:nth-child(14)
width: 60px
height: 28px
line-height: 28px
.keyboard li:nth-child(15),
.keyboard li:nth-child(16),
.keyboard li:nth-child(17),
.keyboard li:nth-child(18),
.keyboard li:nth-child(19),
.keyboard li:nth-child(20),
.keyboard li:nth-child(21),
.keyboard li:nth-child(22),
.keyboard li:nth-child(23),
.keyboard li:nth-child(24),
.keyboard li:nth-child(25),
.keyboard li:nth-child(26),
.keyboard li:nth-child(27),
.keyboard li:nth-child(40),
.keyboard li:nth-child(41),
.keyboard li:nth-child(42),
.keyboard li:nth-child(53),
.keyboard li:nth-child(54),
.keyboard li:nth-child(64),
.keyboard li:nth-child(65),
.keyboard li:nth-child(66)
padding: 7px 0
height: 48px
.keyboard li:nth-child(15) span,
.keyboard li:nth-child(16) span,
.keyboard li:nth-child(17) span,
.keyboard li:nth-child(18) span,
.keyboard li:nth-child(19) span,
.keyboard li:nth-child(20) span,
.keyboard li:nth-child(21) span,
.keyboard li:nth-child(22) span,
.keyboard li:nth-child(23) span,
.keyboard li:nth-child(24) span,
.keyboard li:nth-child(25) span,
.keyboard li:nth-child(26) span,
.keyboard li:nth-child(27) span,
.keyboard li:nth-child(40) span,
.keyboard li:nth-child(41) span,
.keyboard li:nth-child(42) span,
.keyboard li:nth-child(53) span,
.keyboard li:nth-child(54) span,
.keyboard li:nth-child(64) span,
.keyboard li:nth-child(65) span,
.keyboard li:nth-child(66) span
line-height: 23px
height: 23px
width: 100%
float: left
font-size:14px
.keyboard li:nth-child(28) span,
.keyboard li:nth-child(55) span,
.keyboard li:nth-child(67) span
line-height: 14px
margin-top: 43px
float: right
margin-right: 8px
//字母键
.keyboard li:nth-child(30),
.keyboard li:nth-child(31),
.keyboard li:nth-child(32),
.keyboard li:nth-child(33),
.keyboard li:nth-child(34),
.keyboard li:nth-child(35),
.keyboard li:nth-child(36),
.keyboard li:nth-child(37),
.keyboard li:nth-child(38),
.keyboard li:nth-child(39),
.keyboard li:nth-child(44),
.keyboard li:nth-child(45),
.keyboard li:nth-child(46),
.keyboard li:nth-child(47),
.keyboard li:nth-child(48),
.keyboard li:nth-child(49),
.keyboard li:nth-child(50),
.keyboard li:nth-child(51),
.keyboard li:nth-child(52),
.keyboard li:nth-child(57),
.keyboard li:nth-child(58),
.keyboard li:nth-child(59),
.keyboard li:nth-child(60),
.keyboard li:nth-child(61),
.keyboard li:nth-child(62),
.keyboard li:nth-child(63)
font-size:18px
line-height: 64px
.keyboard li:nth-child(29) span,
.keyboard li:nth-child(43) span,
.keyboard li:nth-child(56) span,
.keyboard li:nth-child(68) span,
.keyboard li:nth-child(69) span,
.keyboard li:nth-child(70) span,
.keyboard li:nth-child(71) span,
.keyboard li:nth-child(73) span,
.keyboard li:nth-child(74) span
line-height: 14px
margin-top: 43px
text-indent: 5px
float: left
.keyboard li:nth-child(28),
.keyboard li:nth-child(29)
width: 73px
.keyboard li:nth-child(43),
.keyboard li:nth-child(55)
width: 102px
.keyboard
li:nth-child(43).pressed
i
background:#52f800
li:nth-child(43)
&:active
i
background:#52f800
i
position: absolute
top: 5px
left: 5px
width: 6px
height: 6px
background: #fff
border-radius: 3px
.keyboard li:nth-child(55) i,
.keyboard li:nth-child(70) i
position: absolute
right: 8px
top: 5px
font-size: 12px
line-height: 12px
.keyboard li:nth-child(70) i
left: -26px
.keyboard li:nth-child(74) i
position: absolute
left: 8px
top: 5px
font-size: 12px
line-height: 12px
.keyboard li:nth-child(56)
width: 136px
.keyboard li:nth-child(67)
width: 137px
.keyboard li:nth-child(71),
.keyboard li:nth-child(73)
width: 70px
.keyboard li:nth-child(72)
width: 333px
.keyboard li:nth-child(76),
.keyboard li:nth-child(78)
height: 29px
line-height: 29px
.keyboard li:nth-child(76)
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
.keyboard li:nth-child(78)
border-top-left-radius: 0;
border-top-right-radius: 0;
position: absolute
bottom: 0
right: 84px
Write Preview
Loading…
Cancel
Save