mirror of
https://github.com/ijprest/keyboard-layout-editor.git
synced 2026-04-15 12:20:21 -07:00
25cca4bb2e
-- Line spacing was too big on the keycaps (I think it was picking up the spacing from Bootstrap); fixed in CSS -- DSA keys were showing the inner-border in the incorrect spot (wasn't really noticable on the dark colors of Retro DSA); fixed in CSS -- Replaced custom min/max functions with the correct Math.min, Math.max functions. -- The valiation for x/y offsets was too aggressive; for some oddly-shaped keys, it didn't let you set values that were big enough. -- Swapped the order of the keylabel tops for the primary & secondary rectangles. This ensures that the label is in the same place whether stepped or not, at the expense of maybe affecting old layouts.
214 lines
7.5 KiB
CSS
214 lines
7.5 KiB
CSS
@font-face {
|
|
font-family: 'engravers_gothic_fsregular';
|
|
src: url('fonts/EngraversGothic-Regular-webfont.eot');
|
|
src: url('fonts/EngraversGothic-Regular-webfont.eot?#iefix') format('embedded-opentype'),
|
|
url('fonts/EngraversGothic-Regular-webfont.woff') format('woff'),
|
|
url('fonts/EngraversGothic-Regular-webfont.ttf') format('truetype'),
|
|
url('fonts/EngraversGothic-Regular-webfont.svg#engravers_gothic_fsregular') format('svg');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
font-family: "Segoe UI", "Arial", "Helvetica", sans-serif;
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
cursor: default;
|
|
}
|
|
.body {
|
|
margin: 10px;
|
|
}
|
|
|
|
/* Wrapper for page content to push down footer */
|
|
#wrap {
|
|
min-height: 100%;
|
|
height: auto !important;
|
|
height: 100%;
|
|
/* Negative indent footer by its height */
|
|
margin: 0 auto -70px;
|
|
/* Pad bottom by footer height */
|
|
padding: 0 0 60px;
|
|
}
|
|
|
|
/* Set the fixed height of the footer here */
|
|
#footer {
|
|
height: 70px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
/* The keyboard background */
|
|
#keyboard {
|
|
padding: 5px;
|
|
position:relative;
|
|
border: solid 1px #ddd;
|
|
border-radius: 6px;
|
|
background-color: #eee;
|
|
min-height: 64px;
|
|
-webkit-box-sizing:content-box;
|
|
-moz-box-sizing:content-box;
|
|
box-sizing:content-box;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.key {
|
|
position: relative;
|
|
display:table;
|
|
-webkit-box-sizing:content-box;
|
|
-moz-box-sizing:content-box;
|
|
box-sizing:content-box;
|
|
}
|
|
|
|
/* The external border of the keycap */
|
|
.keyborder {
|
|
position: absolute;
|
|
border-radius: 5px;
|
|
border: solid 1px black;
|
|
-webkit-box-sizing:content-box;
|
|
-moz-box-sizing:content-box;
|
|
box-sizing:content-box;
|
|
}
|
|
.keyborder.inner { opacity: 0.1; }
|
|
|
|
.hover .keyborder { border-color: green; }
|
|
.selected .keyborder { border-color: red; }
|
|
.ghosted { opacity: 0.4; }
|
|
|
|
/* The sides of the cap (darker) */
|
|
.keybg {
|
|
position: absolute;
|
|
border-radius: 5px;
|
|
-webkit-box-sizing:content-box;
|
|
-moz-box-sizing:content-box;
|
|
box-sizing:content-box;
|
|
}
|
|
|
|
/* The face of the cap */
|
|
.keyfg {
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
|
position: absolute;
|
|
border-radius: 3px;
|
|
display:table-cell;
|
|
-webkit-box-sizing:content-box;
|
|
-moz-box-sizing:content-box;
|
|
box-sizing:content-box;
|
|
}
|
|
.keyfg .keylabel.textsize1 { font-size: 8px; line-height: 1em; }
|
|
.keyfg .keylabel.textsize2 { font-size: 10px; line-height: 1em; }
|
|
.keyfg .keylabel.textsize3 { font-size: 12px; line-height: 1em; }
|
|
.keyfg .keylabel.textsize4 { font-size: 14px; line-height: 1em; }
|
|
.keyfg .keylabel.textsize5 { font-size: 16px; line-height: 1em; }
|
|
.keyfg .keylabel.textsize6 { font-size: 18px; line-height: 1em; }
|
|
.keyfg .keylabel.textsize7 { font-size: 20px; line-height: 1em; }
|
|
.keyfg .keylabel.textsize8 { font-size: 22px; line-height: 1em; }
|
|
.keyfg .keylabel.textsize9 { font-size: 24px; line-height: 1em; }
|
|
.keyfg .keylabel hr { display: inline; }
|
|
.keyfg .keylabel hr:before {
|
|
position: relative;
|
|
display: block;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
content: "\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500";
|
|
}
|
|
|
|
.DCS .keyfg {
|
|
background: -moz-linear-gradient(left, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.1) 100%);
|
|
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.1)), color-stop(40%,rgba(0,0,0,0)), color-stop(60%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.1)));
|
|
background: -webkit-linear-gradient(left, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0) 60%,rgba(0,0,0,0.1) 100%);
|
|
background: -o-linear-gradient(left, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0) 60%,rgba(0,0,0,0.1) 100%);
|
|
background: -ms-linear-gradient(left, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0) 60%,rgba(0,0,0,0.1) 100%);
|
|
background: linear-gradient(to right, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0) 60%,rgba(0,0,0,0.1) 100%);
|
|
}
|
|
.DSA .keyborder.inner { margin-top: 3px; border-radius: 8px; }
|
|
.DSA .keyfg {
|
|
font-family: 'engravers_gothic_fsregular'; /* substitute for Gorton Modified */
|
|
border-radius: 8px;
|
|
margin-top: 3px;
|
|
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, rgba(46,46,46,0.1) 90%, rgba(51,51,51,0.1) 100%);
|
|
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0)), color-stop(90%,rgba(46,46,46,0.1)), color-stop(100%,rgba(51,51,51,0.1)));
|
|
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(46,46,46,0.1) 90%,rgba(51,51,51,0.1) 100%);
|
|
background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(46,46,46,0.1) 90%,rgba(51,51,51,0.1) 100%);
|
|
background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(46,46,46,0.1) 90%,rgba(51,51,51,0.1) 100%);
|
|
background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(46,46,46,0.1) 90%,rgba(51,51,51,0.1) 100%);
|
|
}
|
|
|
|
/* Key labels */
|
|
.keylabels { display: table; }
|
|
.keylabel { display: table-row; position: absolute; left:2px; top:2px; right:2px; bottom:2px; }
|
|
.keylabel > div { display: table-cell; }
|
|
.keylabel3>div, .keylabel4>div, .keylabel6>div, .keylabel8>div { text-align: right; }
|
|
.keylabel7>div, .keylabel8>div { vertical-align: middle; }
|
|
.keylabel2>div, .keylabel4>div { vertical-align: bottom; }
|
|
.keylabel5, .keylabel6 { top:100%; margin-top:-3px; font-size: 10px !important; white-space:nowrap; overflow: hidden;}
|
|
.keylabel1.centerx-true>div, .keylabel2.centerx-true>div, .keylabel5.centerf-true>div, .keylabel7.centerx-true>div { text-align: center; }
|
|
.keylabel1.centery-true>div, .keylabel3.centery-true>div { vertical-align: middle; }
|
|
|
|
/* color swatches */
|
|
#swatches {
|
|
list-style-type: none;
|
|
-webkit-margin-before: 0em;
|
|
-webkit-margin-after: 0em;
|
|
-webkit-margin-start: 0px;
|
|
-webkit-margin-end: 0px;
|
|
-webkit-padding-start: 0px;
|
|
}
|
|
.swatch {
|
|
display: inline-block;
|
|
position:relative;
|
|
width: 16px;
|
|
height: 32px;
|
|
border:solid 1px #888;
|
|
margin-right:-1px;
|
|
margin-bottom:-6px;
|
|
padding:0px;
|
|
}
|
|
#swatches.disabled .swatch {
|
|
background-color: rgb(235,235,228) !important;
|
|
}
|
|
|
|
|
|
/* general styles */
|
|
.hidden { display: none; }
|
|
.error { border: solid 2px rgb(217,83,79); }
|
|
#selectionRectangle { position: absolute; border: dashed 2px red; }
|
|
|
|
#rawdata {
|
|
width: 100%;
|
|
height: 200px;
|
|
font-family: "Consolas", "Courier New", "Courier", monospace;
|
|
}
|
|
#rawdata-error {
|
|
font-family: "Consolas", "Courier New", "Courier", monospace;
|
|
white-space: pre;
|
|
}
|
|
|
|
.tab-content {
|
|
border-left: 1px solid #ddd;
|
|
border-right: 1px solid #ddd;
|
|
border-bottom: 1px solid #ddd;
|
|
padding-top: 15px;
|
|
padding-bottom: 15px;
|
|
}
|
|
#properties.row { padding-left:30px; }
|
|
.form-horizontal .control-label {
|
|
float:left;
|
|
padding-right: 5px;
|
|
padding-top: 3px;
|
|
width: 120px;
|
|
}
|
|
.form-horizontal input { margin-bottom: 2px; }
|
|
|
|
.shortcuts tr > td:first-child { text-align:right; padding-right: 6px; padding-top: 3px;}
|
|
.shortcuts .shortcut { background-color: #444; color: white; padding: 1px 6px; border-radius:6px; }
|
|
|
|
.checkbox-label { font-weight: normal; padding-left: 4px; }
|
|
|
|
/* Tooltip modifications */
|
|
.hint--rounded:after { width: 300px; }
|
|
.hint:after, [data-hint]:after { white-space: pre-line; }
|
|
.hint:before, .hint:after, [data-hint]:before, [data-hint]:after { -webkit-transition: 0.1s ease; -moz-transition: 0.1s ease; transition: 0.1s ease; }
|