Skip to content

Loading…

Bug 827702 - Change the highlight color of the space key #7376

Merged
merged 1 commit into from

4 participants

@crh0716

https://bugzilla.mozilla.org/show_bug.cgi?id=827702

Change the css style for the space key.

@basiclines

@crh0716 Can you show me the result on the device? I don't know where is your sit :S

@basiclines

r+ from my side, thx!

@crh0716

pivanov, I was considering the same thing, too. But in the end I think space key is a "normal key" so it should look like other normal keys. I'll find a UX guy to make the call before land it. Thanks for your suggestion!

@basiclines

Seems amazing thx! r+ from my side

@pivanov
Mozilla-B2G member

r+ from my side too

@vingtetun vingtetun merged commit 7d9709c into mozilla-b2g:master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
Showing with 12 additions and 22 deletions.
  1. +12 −22 apps/keyboard/style/keyboard.css
View
34 apps/keyboard/style/keyboard.css
@@ -243,35 +243,25 @@ button::-moz-focus-inner {
}
/* Spacebar exceptions */
-.keyboard-key[data-keycode="32"] > .visual-wrapper {
-background-position: center 2.2rem;
-}
-
.keyboard-key.highlighted[data-keycode="32"] > .visual-wrapper {
- border: solid 1px #000;
+ background: #4AB6CB;
border-radius: 0.3rem;
- background: #252220 url(images/key-bg.png) no-repeat center 2.2rem;
- background-size: 100% 100%;
- opacity: 0.5;
- margin: 0;
+ border: solid 1px #3f5459;
height: 4rem;
}
-
-.keyboard-key.highlighted[data-keycode="32"] > .visual-wrapper > span {
- border: none;
- border-top: solid 1px #514e4d;
- background: none;
+.keyboard-key.highlighted[data-keycode="32"] > .visual-wrapper:after {
+ content: "";
position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- z-index: 1;
- height: 100%;
+ left: -0.2rem;
+ right: -0.2rem;
+ top: -0.2rem;
+ bottom: -0.25rem;
+ z-index: -1;
+ background: #4495A8;
+ border-radius: 0.3rem;
}
-
-.keyboard-key.highlighted[data-keycode="32"] > .visual-wrapper:after,
.keyboard-key.highlighted[data-keycode="32"] > .visual-wrapper:before,
+.keyboard-key.highlighted[data-keycode="32"] > .visual-wrapper > span,
.keyboard-key.highlighted[data-keycode="32"] > .visual-wrapper > span:after {
display: none;
}
Something went wrong with that request. Please try again.