Merge pull request #22879 from mnjul/bug_1053613_lockscreen_pin_bcksp…

…c_lastrow_vertical_separator

Bug 1053613 - Lockscreen PIN keypad: backspace key misaligned & wrong, vertical separators missing, last row too high. r=gweng

apps/system/style/lockscreen/lockscreen.css

@@ -382,21 +382,21 @@ button::-moz-focus-inner {
 
 #lockscreen-passcode-code {
   position: absolute;
-  bottom: 21.4rem;
+  bottom: 20.4rem;
   height: 7rem;
   width: 100%;
   background-color: rgba(51, 51, 51, 0.3);
   margin: 0;
   padding: 0 1rem;
   -moz-box-sizing: border-box;
   visibility: hidden;
-  transform: translateY(calc(21.4rem + 7.2rem));
+  transform: translateY(calc(20.4rem + 7.2rem));
   transition: visibility 0.3s ease, transform 0.3s ease;
 }
 
 [data-passcode-status="success"] #lockscreen-passcode-pad,
 [data-passcode-status="success"] #lockscreen-passcode-code {
-  transform: translateY(calc(21.4rem + 7.2rem)) !important;
+  transform: translateY(calc(20.4rem + 7.2rem)) !important;
 }
 
 [data-panel="passcode"] #lockscreen-passcode-code {
@@ -449,11 +449,11 @@ button::-moz-focus-inner {
   -moz-box-sizing: border-box;
   position: absolute;
   bottom: 0;
-  height: 21.4rem;
+  height: 20.4rem;
   width: 100%;
   background-color: #606b6e;
   visibility: hidden;
-  transform: translateY(calc(21.4rem + 7em));
+  transform: translateY(calc(20.4rem + 7em));
   transition: visibility 0.3s ease, transform 0.3s ease;
 }
 
@@ -471,17 +471,16 @@ button::-moz-focus-inner {
   display: block;
   float: left;
   width: 33.333%;
-  height: 5rem;
+  height: 5.1rem;
   outline: none;
   padding: 0; /* 2rem; */
 
-  font-size: 3rem;
+  font-size: 3.2rem;
   font-weight: 400;
-  line-height: 4.2rem;
+  line-height: 4rem;
 
   color: #fff;
   text-decoration: none;
-  font-family: 'Keyboard Symbols', sans-serif;
 }
 
 #lockscreen-passcode-pad > a > div {
@@ -495,23 +494,32 @@ button::-moz-focus-inner {
   text-align: center;
 }
 
-#lockscreen-passcode-pad > a:last-child > div{
+#lockscreen-passcode-pad > a[data-key="3"] > div,
+#lockscreen-passcode-pad > a[data-key="6"] > div,
+#lockscreen-passcode-pad > a[data-key="9"] > div,
+#lockscreen-passcode-pad > a[data-key="c"] > div,
+#lockscreen-passcode-pad > a[data-key="b"] > div{
   border-right: none;
 }
 
-#lockscreen-passcode-pad > a:nth-child(3n+1):not([data-key="b"]) > div{
-  border-left: none;
-}
-
 #lockscreen-passcode-pad > a[data-key="b"] > div {
   font-size: 1.5rem;
-  padding-left: 4rem;
+  font-weight: 500;
   color: #abb0b1;
+  font-family: 'Keyboard Symbols', sans-serif;
 }
 
-#lockscreen-passcode-pad > a.last-row {
-  height: 6.4rem;
-  line-height: 5.6rem;
+#lockscreen-passcode-pad > a.last-row > div {
+  padding-top: 0.4rem;
+  height: calc(100% - 1.2rem);
+}
+
+#lockscreen-passcode-pad > a.last-row[data-key="e"] > div {
+  height: calc(100% - 1rem);
+}
+
+#lockscreen-passcode-pad > a.last-row:not([data-key="0"]) > div {
+  padding-top: 0.2rem;
 }
 
 #lockscreen-passcode-pad > a > div > span {
@@ -553,25 +561,25 @@ button::-moz-focus-inner {
 }
 
 #lockscreen-passcode-pad .row0 > div{
-  border-right-color: #606B6E;
+  border-right-color: #525b5e;
 }
 
 #lockscreen-passcode-pad .row1 > div {
-  border-right-color: #5B6668;
+  border-right-color: #4c5657;
 }
 
 #lockscreen-passcode-pad .row2 > div {
-  border-right-color: #566063;
+  border-right-color: #475052;
 }
 
 #lockscreen-passcode-pad .row3 > div {
-  border-right-color: #525C5E;
+  border-right-color: #434b4d;
 }
 
 #lockscreen-passcode-pad > a.row0 > div,
 #lockscreen-passcode-pad > a.row1 > div,
 #lockscreen-passcode-pad > a.row2 > div {
-  margin-top: 0.1rem;
+  margin-top: 0.4rem;
 }
 
 #lockscreen-passcode-pad > a.row0 > div > span,
@@ -587,7 +595,8 @@ button::-moz-focus-inner {
 }
 
 #lockscreen-passcode-pad > a.lockscreen-passcode-pad-func > div{
-  padding: 0 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
   text-align: center;
 }