From 03912823caa50fa31f0034fefeda15dcbe73d055 Mon Sep 17 00:00:00 2001 From: Jun Wako Date: Tue, 12 Jan 2016 10:16:19 +0900 Subject: [PATCH] Fix css of keymap editor --- editor/alps64/index.html | 2 +- editor/alps64/keyboard.css | 115 --------------------- editor/{m0110 => common}/keymap_editor.css | 40 +++---- editor/hhkb/index.html | 2 +- editor/hhkb/keyboard.css | 101 ------------------ editor/m0110/m0110.html | 8 +- editor/m0110/m0110a.html | 8 +- 7 files changed, 32 insertions(+), 244 deletions(-) delete mode 100644 editor/alps64/keyboard.css rename editor/{m0110 => common}/keymap_editor.css (82%) delete mode 100644 editor/hhkb/keyboard.css diff --git a/editor/alps64/index.html b/editor/alps64/index.html index 9607015e..f282592e 100644 --- a/editor/alps64/index.html +++ b/editor/alps64/index.html @@ -2,7 +2,7 @@ TMK Keymap Editor - + diff --git a/editor/alps64/keyboard.css b/editor/alps64/keyboard.css deleted file mode 100644 index 2d0baa93..00000000 --- a/editor/alps64/keyboard.css +++ /dev/null @@ -1,115 +0,0 @@ -html * { - font-family:helvetica, arial, sans-serif; -} - -.key { - box-shadow:inset -3px -3px 5px 5px #ebebeb; - background-color:#ffffff; - border-radius:6px; - border:2px solid #dcdcdc; - display:inline-block; - float: left; - color:#777777; - font-family:helvetica, arial, sans-serif; - font-size:16px; - font-weight:bold; - text-decoration:none; - padding:4px 16px 16px 4px; - width: 25px; - height: 25px; - overflow: hidden; - margin: 0px 1px 1px 0px; - white-space: normal; -} -.key:hover { - background-color:#ebebeb; -} -.key:active { -} -.key:focus { -} -.key-editing { - background-color:#b4b4b4; - border:2px solid #7f7f7f; - position:relative; - top:2px; -} -/* This imageless css button was generated by CSSButtonGenerator.com */ - -/* Key unit and pixel - * key unit: 1.00 1.25 1.50 1.75 2.00 - * px: 50 62.5 75 87.5 100 - * - * Key CSS Metrics - * +---------------------------+ - * | margin | - * | +-----------------------+ | - * | |border 2 | | - * | | +-------------------+ | | - * | | |padding 4 | | | - * | | | +--------------+ | | | - * |0|2|4|width x height|16|2|1| - * | | | +--------------+ | | | - * | | | 16 | | | - * | | +-------------------+ | | - * | | 2 | | - * | +-----------------------+ | - * | 1 | - * +---------------------------+ - * width/height:25 + (margin:0 + border:2 + padding:4 + padding:16 + border:2 + margin:1) = 50px - */ -.btn100 { width:25px; } /* 50 - 25 */ -.btn125 { width:37.5px; } /* 62.5 - 25 */ -.btn150 { width:50px; } /* 75 - 25 */ -.btn175 { width:62.5px; } /* 87.5 - 25 */ -.btn200 { width:75px; } /* 100 - 25 */ -.btn225 { width:87.5px; } /* 112.5 - 25 */ -.btn250 { width:100; } /* 125 - 25 */ -.btn275 { width:112.5px; } /* 137.5 - 25 */ -.btn600 { width:275px; } /* 300 - 25 */ -.btn625 { width:287.5px; } /* 312.5 - 25 */ -.btn700 { width:325px; } /* 350 - 25 */ -.btn750 { width:350px; } /* 375 - 25 */ - -.spc100 { width:25px; visibility:hidden; } -.spc125 { width:37.5px; visibility:hidden; } -.spc150 { width:50px; visibility:hidden; } -.spc175 { width:62.5px; visibility:hidden; } -.spc200 { width 75px; visibility:hidden; } - -.keyboard-row { - width: auto; - display: inline-block; -} - -.keyboard-outline { -} - -.keyboard-pane { - width: 750px; - font-size: 14px; - font-weight:bold; -} - - - -.action { - font-size:16px; - font-weight:bold; - min-width: 30px; -} - -.keycode_tabs { - width: 750px; - overflow: auto; - font-size:14px; - font-weight:bold; -} - - - -/* http://www.w3schools.com/cssref/css3_pr_resize.asp */ -.resizable { - resize: both; - overflow: auto; -} diff --git a/editor/m0110/keymap_editor.css b/editor/common/keymap_editor.css similarity index 82% rename from editor/m0110/keymap_editor.css rename to editor/common/keymap_editor.css index bfa955a7..a0bd1f06 100644 --- a/editor/m0110/keymap_editor.css +++ b/editor/common/keymap_editor.css @@ -2,13 +2,9 @@ html * { font-family:helvetica, arial, sans-serif; } -.key, .key-nc { - -moz-box-shadow:inset -8px -10px 0px -3px #ffffff; - -webkit-box-shadow:inset -8px -10px 0px -3px #ffffff; - box-shadow:inset -8px -10px 0px -3px #ffffff; - background-color:#ededed; - -moz-border-radius:6px; - -webkit-border-radius:6px; +.key, .keync { + box-shadow:inset -3px -3px 2px 5px #ebebeb; + background-color:#ffffff; border-radius:6px; border:2px solid #dcdcdc; display:inline-block; @@ -26,22 +22,28 @@ html * { white-space: normal; } .key:hover { - background-color:#dfdfdf; -} -.key:active { - position:relative; - top:1px; -} -.key-editing { - background-color:#b4b4b4; + box-shadow:inset -3px -3px 2px 5px #cfcfcf; position:relative; top:2px; } +.key:active { +} +.key:focus { +} +.key-editing { + box-shadow:inset -3px -3px 2px 5px #cfcfcf; + position:relative; + top:2px; + background-color:#efefef; + border:2px solid #7f7f7f; +} /* This imageless css button was generated by CSSButtonGenerator.com */ /* Key unit and pixel + * * key unit: 1.00 1.25 1.50 1.75 2.00 - * px: 50 62.5 75 87.5 100 + * width: 25 37.5 50 62.5 75 + * overall: 50 62.5 75 87.5 100 * * Key CSS Metrics * +---------------------------+ @@ -59,7 +61,7 @@ html * { * | +-----------------------+ | * | 1 | * +---------------------------+ - * width/height:25 + (margin:0 + border:2 + padding:4 + padding:16 + border:2 + margin:1) = 50px + * margin:1 + border:4 + padding:20 = 25px */ .btn100 { width:25px; } /* 50 - 25 */ .btn125 { width:37.5px; } /* 62.5 - 25 */ @@ -81,6 +83,7 @@ html * { .spc200 { width 75px; visibility:hidden; } .keyboard-row { + width: auto; display: inline-block; } @@ -88,6 +91,7 @@ html * { } .keyboard-pane { + width: 750px; font-size: 14px; font-weight:bold; } @@ -101,7 +105,7 @@ html * { } .keycode_tabs { - max-width: 750px; + width: 750px; overflow: auto; font-size:14px; font-weight:bold; diff --git a/editor/hhkb/index.html b/editor/hhkb/index.html index 99e56caa..325699fa 100644 --- a/editor/hhkb/index.html +++ b/editor/hhkb/index.html @@ -2,7 +2,7 @@ TMK Keymap Editor - + diff --git a/editor/hhkb/keyboard.css b/editor/hhkb/keyboard.css deleted file mode 100644 index 886218f8..00000000 --- a/editor/hhkb/keyboard.css +++ /dev/null @@ -1,101 +0,0 @@ -html * { - font-family:helvetica, arial, sans-serif; -} - -.key { - box-shadow:inset -3px -3px 5px 5px #ebebeb; - background-color:#ffffff; - -moz-border-radius:6px; - -webkit-border-radius:6px; - border-radius:6px; - border:2px solid #dcdcdc; - display:block; - float: left; - color:#777777; - font-family:helvetica, arial, sans-serif; - font-size:16px; - font-weight:bold; - text-decoration:none; - padding:4px 16px 16px 4px; - width: 24px; - height: 24px; - overflow: hidden; - margin: 0px 1px 1px 0px; -} -.key:hover { - background-color:#ebebeb; -} -.key:active { -} -.key:focus { -} -.key-editing { - //background-color:#bfbfbf; - border:2px solid #7f7f7f; - position:relative; - //top:2px; -} -/* This imageless css button was generated by CSSButtonGenerator.com */ - -/* Key size and pixel - * key: 1.00 1.25 1.50 1.75 2.00 - * size: 50 62.5 75 87.5 100 - * width: 24 36.5 49 61.5 74 - * - * margin:1 + border:2 + padding:4 + width:24 + padding:16 + border:2 + margin:1 = 50px - * width:24 + 26px = 50px - */ -.btn100 { width:24px; } -.btn125 { width:36.5px; } -.btn150 { width:47.5px; } -.btn175 { width:60px; } -.btn200 { width:74px; } -.btn225 { width:83px; } -.btn250 { width:99px; } -.btn275 { width:111.5px; } -.btn600 { width:259px; } -.btn625 { width:270px; } -.btn700 { width:324px; } - -.spc100 { width:24px; visibility:hidden; } -.spc125 { width:36.5px; visibility:hidden; } -.spc150 { width:47.5px; visibility:hidden; } -.spc175 { width:60px; visibility:hidden; } -.spc200 { width 74px; visibility:hidden; } - -.keyboard-row { - width: auto; - display: inline-block; -} - -.keyboard-outline { -} - -.keyboard-pane { - width: 750px; - font-size: 14px; - font-weight:bold; -} - - - -.action { - font-size:16px; - font-weight:bold; - min-width: 30px; -} - -.keycode_tabs { - max-width: 750px; - overflow: auto; - font-size:14px; - font-weight:bold; -} - - - -/* http://www.w3schools.com/cssref/css3_pr_resize.asp */ -.resizable { - resize: both; - overflow: auto; -} diff --git a/editor/m0110/m0110.html b/editor/m0110/m0110.html index 5eaa0fed..79218c1f 100644 --- a/editor/m0110/m0110.html +++ b/editor/m0110/m0110.html @@ -2,7 +2,7 @@ TMK Keymap Editor - + @@ -116,7 +116,7 @@
-
*1
+
*1
@@ -131,13 +131,13 @@
-
*2
+
*2
-
*3
+
*3
diff --git a/editor/m0110/m0110a.html b/editor/m0110/m0110a.html index 549eef6d..95392c97 100644 --- a/editor/m0110/m0110a.html +++ b/editor/m0110/m0110a.html @@ -2,7 +2,7 @@ TMK Keymap Editor - + @@ -73,7 +73,7 @@
-
*2
+
*2
@@ -116,7 +116,7 @@
-
*1
+
*1
@@ -138,7 +138,7 @@
-
*2
+
*2