Changed "no color" to render as a little 'x' instead of red stripes

This commit is contained in:
Ian Prest 2015-07-18 21:46:31 -04:00
parent c2b1e4ab7a
commit 966bb05663
2 changed files with 32 additions and 25 deletions

55
kb.css
View file

@ -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;
}

View file

@ -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"