ijprest / keyboard-layout-editor

Web application to enable the design & editing of keyboard layouts
http://www.keyboard-layout-editor.com/
Other
1.32k stars 246 forks source link

custom key border color #239

Closed Fred-Vatin closed 6 years ago

Fred-Vatin commented 6 years ago

Hi,

I'd like to customize key border color. Since there is no option for that in properties tab (I wish a such option exists), I tried custom styles.

The only rule that works is :

.keyborder {
    border-color: rgba(255,255,255,.3) !important;
}

Without !important, it's not applied but if used, then, the selected and hover border color doesn't work anymore. So, it is not a viable solution in edition mode but can still be applied when the work is finished.

The custom styles doesn't support nested element so there is no workaround like applying a custom border color for selected key: #keyboard .selected > .keycap > .keyborder (inspired by the generated rule by the app) below the above rule with !important won't change anything.

PLUS…

I wish there were another key profile named PLAIN that get rid of any 3D effect. Currently, the way to achieve that is applying this CSS:

.keytop,
.keylabels {
    border-color: transparent !important;
}
.keytop {
    background-color: transparent !important;
}
ijprest commented 6 years ago

I've deployed a tweak to the templates & CSS that will allow you modify the border color without having to use !important (which will in-turn allow the hover & selected borders to still work). E.g., just use this:

.keyborder {
    border-color: rgba(255,255,255,.3);
}

For your second request... it would be pretty easy to do, but what's the use-case? (I'm just wondering how/why it would be used, to make sure it's done in the best way.)

Fred-Vatin commented 6 years ago

The use-case of plain background key color: printing to paste on the physical kbd.

ijprest commented 6 years ago

OK, I've added a "FLAT" profile. I figure it will achieve the effect you want, while also being generally useful for representing certain types of membrane keyboards.

Fred-Vatin commented 6 years ago

Thanks for the FLAT mode. But it brings a new issue. Loot at this key: key Bottom legend like in this screenshot, so as center legend are misplaced, too high.

ijprest commented 6 years ago

OK, I've now adjusted the sizing of the FLAT profile. Let me know what you think.

Fred-Vatin commented 6 years ago

Good job 👍