Mobile: Formulabar: inherit more from desktop, remove negative value

- Inherit padding from #formulabar desktop, a single dimension instead
of placing different margins/padding across mobile
- Fix alignments
- Use css vars for buttons sizes

Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: I21110e43115576a212d29b1a55268fbeed6d52af

browser/css/device-mobile.css

@@ -152,15 +152,13 @@ textarea.cool-annotation-textarea {
 
 /* Related to toolbar.css */
 @-moz-document url-prefix() {
-	#formulabar #addressInput{
-		color: var(--color-main-text);
-		border: 1px solid var(--color-border) !important;
-		border-radius: 0px;
-	}
 	#toolbar-up{
 		top: -1px;
 	}
 }
+#formulabar:not(.expanded) #addressInput {
+	align-self: center;
+}
 #toolbar-up #redo.disabled, #toolbar-up #undo.disabled, #toolbar-up #mobile_wizard.disabled, #toolbar-up #insertion_mobile_wizard.disabled {
 	display: none;
 }
@@ -194,16 +192,11 @@ nav:not(.spreadsheet-color-indicator) ~ #toolbar-wrapper #toolbar-up.w2ui-toolba
 	border-color: transparent;
 }
 .formulabar.unotoolbutton {
-	margin: 0 !important;
-}
-#expand.formulabar {
-	margin-inline-start: -8px !important;
-	height: 30px !important;
+	justify-self: center;
 }
 .formulabar.toolbox {
-	grid-column-gap: 8px;
 	/* fx = inputfield expander */
-	grid-template-columns: 32px auto 16px 0;
+	grid-template-columns: calc(var(--btn-size)*2) auto var(--btn-size);
 	display: grid;
 	grid-auto-flow: column;
 	align-items: start;
@@ -211,11 +204,6 @@ nav:not(.spreadsheet-color-indicator) ~ #toolbar-wrapper #toolbar-up.w2ui-toolba
 .expanded .formulabar.toolbox {
 	align-items: flex-start;
 }
-#formulabar {
-	padding: 0px !important;
-	border-top: 1px solid #bbbbbb !important;
-	margin-bottom: 5px;
-}
 #formulabar > .root-container > .formulabar {
 	grid-template-columns: 70px auto;
 }
@@ -252,12 +240,6 @@ nav:not(.spreadsheet-color-indicator) ~ #toolbar-wrapper #toolbar-up.w2ui-toolba
 	-o-transform: rotate(180deg);
 	transform: rotate(180deg);
 }
-#addressInput{
-	margin-inline-start: 8px;
-	width: 50px;
-	height: 26px;
-	align-self: start;
-}
 .w2ui-icon.equal, .w2ui-icon.autosum{width: 38px !important;}
 
 #toolbar-up .checked{

browser/css/jsdialogs.css

@@ -1780,6 +1780,7 @@ input[type='number']:hover::-webkit-outer-spin-button {
 	flex-grow: 1;
 	background-color: var(--color-background-lighter);
 	border-radius: var(--border-radius) 0 0 var(--border-radius);
+	align-self: stretch;
 }
 
 .ui-custom-textarea {