mirror of
https://github.com/ijprest/keyboard-layout-editor.git
synced 2026-04-10 02:00:46 -07:00
Changed "no color" to render as a little 'x' instead of red stripes
This commit is contained in:
parent
c2b1e4ab7a
commit
966bb05663
2 changed files with 32 additions and 25 deletions
55
kb.css
55
kb.css
|
|
@ -24,7 +24,7 @@ html, body {
|
|||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
|
@ -49,8 +49,8 @@ html, body {
|
|||
/* The keyboard background */
|
||||
#keyboard {
|
||||
padding: 9px;
|
||||
position: relative;
|
||||
border: solid 1px #ddd;
|
||||
position: relative;
|
||||
border: solid 1px #ddd;
|
||||
border-radius: 6px;
|
||||
background-color: #eee;
|
||||
min-height: 56px;
|
||||
|
|
@ -71,7 +71,7 @@ html, body {
|
|||
/* Key labels */
|
||||
.keylabel>div { display: table-cell; position: static !important; }
|
||||
/* Vertical alignment */
|
||||
.keylabel0>div, .keylabel1>div, .keylabel2>div { vertical-align: top; }
|
||||
.keylabel0>div, .keylabel1>div, .keylabel2>div { vertical-align: top; }
|
||||
.keylabel3>div, .keylabel4>div, .keylabel5>div { vertical-align: middle; }
|
||||
.keylabel6>div, .keylabel7>div, .keylabel8>div { vertical-align: bottom; }
|
||||
.keylabel9, .keylabel10, .keylabel11 { top: 100%; margin-top: -1px; font-size: 10px !important; max-height: 1em !important; white-space: nowrap; overflow: hidden; }
|
||||
|
|
@ -82,18 +82,18 @@ html, body {
|
|||
/* Label Sizes */
|
||||
for i in (1..9) {
|
||||
.keylabel.textsize{i} {
|
||||
font-size: (6+2*i)px;
|
||||
font-size: (6+2*i)px;
|
||||
line-height: 1em;
|
||||
}
|
||||
}
|
||||
.keylabels { font-family: "Helvetica", "Arial", sans-serif; }
|
||||
.keylabel hr { display: inline; }
|
||||
.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";
|
||||
.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";
|
||||
}
|
||||
|
||||
/* Keycap-Profile Modifications */
|
||||
|
|
@ -130,7 +130,7 @@ for i in (1..9) {
|
|||
}
|
||||
.DSA.HOMING .keylabels, .SA.HOMING .keylabels { background-image: none; }
|
||||
|
||||
span.PETSCII {
|
||||
span.PETSCII {
|
||||
font-family: "C64ProMono";
|
||||
font-size: 6px !important;
|
||||
border: solid 1px;
|
||||
|
|
@ -141,14 +141,14 @@ span.PETSCII {
|
|||
|
||||
/* color swatches */
|
||||
#swatches { list-style-type: none; margin: 0px; padding: 0px; }
|
||||
.swatch {
|
||||
display: inline-block;
|
||||
.swatch {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 32px;
|
||||
border: solid 1px #888;
|
||||
width: 16px;
|
||||
height: 32px;
|
||||
border: solid 1px #888;
|
||||
margin-right: -1px;
|
||||
margin-bottom: -6px;
|
||||
margin-bottom: -6px;
|
||||
padding: 0px;
|
||||
}
|
||||
#swatches.disabled .swatch { background-color: rgb(235,235,228) !important; }
|
||||
|
|
@ -162,7 +162,7 @@ span.PETSCII {
|
|||
.hidden { display: none; }
|
||||
.error { border: solid 2px rgb(217,83,79); }
|
||||
#selectionRectangle { position: absolute; border: dashed 2px red; }
|
||||
#rotationCrosshairs {
|
||||
#rotationCrosshairs {
|
||||
display: none;
|
||||
position: absolute;
|
||||
margin: 0px;
|
||||
|
|
@ -216,12 +216,12 @@ span.PETSCII {
|
|||
#wrap > .navbar, #wrap > .body > .btn-group, #keyboard ~ *, #keyboard + *, #footer, #helpDialog, #markdownDialog { display: none; margin: 0 !important; padding: 0 !important; }
|
||||
div.body { margin: 0 !important; padding: 0 !important; }
|
||||
a { color: black; text-decoration: none; }
|
||||
#keyboard {
|
||||
border: none;
|
||||
background-color: inherit !important;
|
||||
transform: scale(0.75,0.75);
|
||||
#keyboard {
|
||||
border: none;
|
||||
background-color: inherit !important;
|
||||
transform: scale(0.75,0.75);
|
||||
position: absolute !important;
|
||||
left: 0px;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
padding-left: 0px; padding-top: 0px;
|
||||
}
|
||||
|
|
@ -241,3 +241,10 @@ span.PETSCII {
|
|||
|
||||
#swap-colors { position: absolute; top: 11px; left: 200px; z-index: 1; }
|
||||
.color-name { display: inline-block; min-width: 3em; font-size: 10px; white-space: nowrap; }
|
||||
|
||||
.use-default:after {
|
||||
content: "\d7"; /* × */
|
||||
right: 0px;
|
||||
bottom: -4px;
|
||||
position: absolute;
|
||||
}
|
||||
2
kb.html
2
kb.html
|
|
@ -755,7 +755,7 @@ Angular Templates
|
|||
ng-disabled="$parent.selectedKeys.length<1">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default"
|
||||
ng-style="{'background': $parent.selectedKeys.length<1 ? 'rgb(235, 235, 228)' : ($parent.multi.textColor[labelIndex] || 'repeating-linear-gradient(-45deg, transparent, transparent 4px, red 4px, red 5px, transparent 5px, transparent 10px), repeating-linear-gradient(45deg, transparent, transparent 4px, red 4px, red 5px, transparent 5px, transparent 10px)')}"
|
||||
ng-style="{'background': $parent.selectedKeys.length<1 ? '#eee' : (!$parent.multi.textColor[labelIndex] ? '#fff' : $parent.multi.textColor[labelIndex])}"
|
||||
ng-model="$parent.multi.textColor[labelIndex]"
|
||||
ng-change="$parent.updateMulti('textColor',labelIndex)"
|
||||
colorpicker="hex"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue