banananetwork
/
roundcubemail
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Elastic: Fix Firefox sub-pixel positioning issues

Browse Source 
... by using size values rounded in less - in most prominent places.
There's still problem with form controls padding, but we'll work on this
when really needed.
pull/6763/head
Aleksander Machniak 6 years ago
parent 0feb46574c
commit 35b12620eb
4 changed files with 40 additions and 35 deletions
Show Stats Download Patch File Download Diff File

27
skins/elastic/styles/variables.less
Unescape Escape View File

@ -24,18 +24,21 @@
@page-font-size: 14px;
@page-min-width: 240px;
@layout-menu-width: 5.6rem;
@layout-menu-width-sm: 3rem;
@layout-header-height: 4.2rem;
// Note: we'll set some values in pixels instead of rem to eliminate
// Firefox sub-pixel rendering bug(s)
@layout-menu-width: floor(5.6 * @page-font-size);
@layout-menu-width-sm: floor(3 * @page-font-size);
@layout-header-height: floor(4.2 * @page-font-size);
@layout-footer-height: @layout-header-height;
@layout-footer-small-height: 2.5rem;
@layout-footer-small-height: floor(2.5 * @page-font-size);
@layout-header-font-size: 1rem;
@layout-searchbar-height: 2.6rem;
@layout-searchbar-height: floor(2.6 * @page-font-size);
@layout-touch-header-height: @layout-header-height;
@layout-touch-header-font-size: 1.2rem;
@layout-touch-menu-record-height: 3.4rem;
@layout-touch-menu-record-font-size: 1.2rem;
@layout-touch-header-font-size: floor(1.2 * @page-font-size);
@layout-touch-menu-record-height: floor(3.4 * @page-font-size);
@layout-touch-menu-record-font-size: floor(1.2 * @page-font-size);
@layout-touch-icon-width: 2.2em;
@layout-mobile-menu-width: (@screen-width-mini * .85);
@ -43,11 +46,11 @@
@layout-contact-icon-width: 112px;
@layout-contact-icon-height: 135px;
@listing-line-height: 2.5rem;
@listing-touch-line-height: 3.4rem;
@listing-treetoggle-width: 1.5em;
@listing-line-height: floor(2.5 * @page-font-size);
@listing-touch-line-height: floor(3.4 * @page-font-size);
@listing-treetoggle-width: 1.5em;
@mail-header-photo-height: 4rem;
@mail-header-photo-height: 4rem;
// Additional icons
@icon-resize-corner: data-uri("image/svg+xml;charset=utf-8", "../images/corner-handle.svg"); // size: 512x512

40
skins/elastic/styles/widgets/forms.less
Unescape Escape View File

@ -483,7 +483,7 @@ html.ms .propform {
.form-control-plaintext,
label.col-form-label {
padding: .375rem .375rem .375rem 0;
padding: floor(.375 * @page-font-size) floor(.375 * @page-font-size) floor(.375 * @page-font-size) 0;
}
.form-control-plaintext {
@ -602,7 +602,7 @@ html.ms .propform {
/* Some common icons for "iconized inputs" */
.input-group .icon {
text-decoration: none;
padding: .375rem .5rem;
padding: floor(.375 * @page-font-size) .5rem;
&.input-group-text {
min-width: 2.4rem;
@ -708,7 +708,7 @@ html.ms .propform {
.custom-control-label {
&:before,
&:after {
margin: -.15rem 0 0 0;
margin: calc(floor(.15 * @page-font-size) * -1) 0 0 0;
}
}
@ -917,7 +917,7 @@ html.ms .propform {
/*** Smart recipient input field ***/
@recipient-input-margin-fix: .25rem;
@recipient-input-margin-fix: round(.25 * @page-font-size);
.recipient-input {
display: flex;
@ -955,7 +955,7 @@ html.ms .propform {
flex-grow: 1;
display: inline-block;
line-height: 1.1;
padding: .25rem;
padding: floor(.25 * @page-font-size);
vertical-align: middle;
}
@ -1305,7 +1305,7 @@ html.ms .propform {
&:before,
&:after {
border-radius: .6rem;
margin: .15rem 0;
margin: floor(.15 * @page-font-size) 0;
html.touch & {
border-radius: .8rem;
@ -1315,34 +1315,36 @@ html.ms .propform {
&:before {
left: 2px;
width: 2rem;
height: 1.2rem;
top: 4px;
width: floor(1.9 * @page-font-size);
height: floor(1.2 * @page-font-size);
html.touch & {
top: .2rem;
width: 2.6rem;
height: 1.6rem;
top: floor(.2 * @page-font-size);
width: floor(2.5 * @page-font-size);
height: floor(1.6 * @page-font-size);
}
}
&:after {
left: 4px;
width: ~"calc(1.2rem - 4px)";
height: ~"calc(1.2rem - 4px)";
top: 6px;
width: floor(1.2 * @page-font-size) - 4;
height: floor(1.2 * @page-font-size) - 4;
html.touch & {
top: ~"calc(.2rem + 2px)";
height: ~"calc(1.6rem - 4px)";
width: ~"calc(1.6rem - 4px)";
top: floor(.2 * @page-font-size) + 2;
height: floor(1.6 * @page-font-size) - 4;
width: floor(1.6 * @page-font-size) - 4;
}
}
}
.custom-control-input:checked ~ .custom-control-label::after {
transform: translateX(.8rem);
transform: translateX(floor(1.2 * @page-font-size) - 6);
html.touch & {
transform: translateX(1rem);
transform: translateX(floor(1.6 * @page-font-size) - 9);
}
}
@ -1364,7 +1366,7 @@ html.ms .propform {
}
& + .hint {
margin-top: .25rem;
margin-top: floor(.25 * @page-font-size);
}
}

4
skins/elastic/styles/widgets/jqueryui.less
Unescape Escape View File

@ -85,7 +85,7 @@
top: 0;
position: absolute;
padding: .25rem .5rem;
margin: ((@layout-header-height - 2rem) / 2) .5rem;
margin: ((@layout-header-height - 2 * @page-font-size) / 2) .5rem;
&:before {
&:extend(.font-icon-class);
@ -110,7 +110,7 @@
button {
.overflow-ellipsis;
min-width: 5rem;
margin: .65rem .3rem;
margin: floor(.65 * @page-font-size) floor(.3 * @page-font-size);
&:last-child {
margin-right: 0;

4
skins/elastic/styles/widgets/lists.less
Unescape Escape View File

@ -484,7 +484,7 @@ ul.treelist {
right: 0;
min-width: 2em;
line-height: 1.4rem;
margin: (@listing-line-height - 1.4rem)/2;
margin: (@listing-line-height - 1.4 * @page-font-size) / 2;
padding: 0 .3em;
border-radius: .4em;
background: @color-list-badge-background;
@ -494,7 +494,7 @@ ul.treelist {
html.touch & {
line-height: 2rem;
margin: (@listing-touch-line-height - 2rem)/2;
margin: (@listing-touch-line-height - 2 * @page-font-size) / 2;
}
}

Write Preview
Loading…
Cancel
Save