Bug 1328868 - Part 10 - Make about:config handle text zoom changes a bit more gracefully. r?sebastian
This means scaling the the size of the images used for buttons and making sure that at large magnifications, the toolbar's text input properly moves into its own line instead of simply overlapping the preference immediately below. We also want to make sure that the text on any buttons remains vertically centred.
MozReview-Commit-ID: 7rUf1tucAzL
--- a/mobile/android/themes/core/config.css
+++ b/mobile/android/themes/core/config.css
@@ -9,18 +9,19 @@ body {
background-color: #ced7de;
-moz-user-select: none;
font-family: "Clear Sans",sans-serif;
-moz-text-size-adjust: none;
}
.toolbar {
width: 100%;
- height: 3em;
- position: fixed;
+ min-height: 3em;
+ display: flow-root;
+ position: sticky;
top: 0;
left: 0;
z-index: 10;
box-shadow: 0 0 3px #444;
background-color: #ced7de;
color: #000000;
font-weight: bold;
border-bottom: 2px solid;
@@ -29,17 +30,17 @@ body {
.toolbar-container {
max-width: 40em;
margin-left: auto;
margin-right: auto;
}
#filter-container {
- margin: 0.5em;
+ margin: 0.375em;
height: 2em;
border: 1px solid transparent;
border-image-source: url("chrome://browser/skin/images/textfield.png");
border-image-slice: 1 1 3 1;
border-image-width: 1px 1px 3px 1px;
overflow: hidden;
display: flex;
flex-direction: row;
@@ -73,42 +74,42 @@ body {
min-width: 3em;
box-sizing: border-box;
opacity: 0.75;
}
#new-pref-toggle-button {
background-position: center center;
background-image: url("chrome://browser/skin/images/config-plus.png");
- background-size: 48px 48px;
- height: 48px;
- width: 48px;
+ background-size: 3em 3em;
+ height: 3em;
+ width: 3em;
display: inline-block;
outline-style: none;
float: left;
}
#new-pref-toggle-button:dir(rtl) {
float: right;
}
#filter-search-button {
background-image: url("chrome://browser/skin/images/search.png");
- background-size: 32px 32px;
- height: 32px;
- width: 32px;
+ background-size: 2em 2em;
+ height: 2em;
+ width: 2em;
display: inline-block;
outline-style: none;
}
#filter-input-clear-button {
background-image: url("chrome://browser/skin/images/search-clear-30.png");
- background-size: 32px 32px;
- height: 32px;
- width: 32px;
+ background-size: 2em 2em;
+ height: 2em;
+ width: 2em;
display: inline-block;
outline-style: none;
}
#filter-input[value=""] + #filter-input-clear-button {
display: none;
}
@@ -119,17 +120,16 @@ body {
float: right;
}
#content {
position: relative;
margin: 0;
margin-left: auto;
margin-right: auto;
- padding-top: 3em;
padding-left: 0;
padding-right: 0;
min-height: 100%;
max-width: 40em;
}
ul {
list-style-position: inside;
@@ -267,18 +267,19 @@ li {
color: #d3d3d3;
}
.pref-item.selected {
background-color: rgba(0,0,255,0.05);
}
.pref-button {
- display: inline-block;
+ display: inline-flex;
box-sizing: border-box;
+ align-items: center;
text-align: center;
padding: 10px 1em;
border-left: 1px solid rgba(0,0,0,0.1);
opacity: 0;
transition-property: opacity;
transition-duration: 500ms;
}
@@ -299,22 +300,24 @@ li {
}
.pref-button[disabled] {
display: none;
}
.pref-button.up {
background-image: url("chrome://browser/skin/images/arrowup-16.png");
+ background-size: 1em 1em;
background-position: center center;
background-repeat: no-repeat;
}
.pref-button.down {
background-image: url("chrome://browser/skin/images/arrowdown-16.png");
+ background-size: 1em 1em;
background-position: center center;
background-repeat: no-repeat;
}
#prefs-shield {
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);