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 5 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-font-size: 14px;
@page-min-width: 240px; @page-min-width: 240px;
@layout-menu-width: 5.6rem; // Note: we'll set some values in pixels instead of rem to eliminate
@layout-menu-width-sm: 3rem; // Firefox sub-pixel rendering bug(s)
@layout-header-height: 4.2rem;
@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-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-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-height: @layout-header-height;
@layout-touch-header-font-size: 1.2rem; @layout-touch-header-font-size: floor(1.2 * @page-font-size);
@layout-touch-menu-record-height: 3.4rem; @layout-touch-menu-record-height: floor(3.4 * @page-font-size);
@layout-touch-menu-record-font-size: 1.2rem; @layout-touch-menu-record-font-size: floor(1.2 * @page-font-size);
@layout-touch-icon-width: 2.2em; @layout-touch-icon-width: 2.2em;
@layout-mobile-menu-width: (@screen-width-mini * .85); @layout-mobile-menu-width: (@screen-width-mini * .85);
@ -43,11 +46,11 @@
@layout-contact-icon-width: 112px; @layout-contact-icon-width: 112px;
@layout-contact-icon-height: 135px; @layout-contact-icon-height: 135px;
@listing-line-height: 2.5rem; @listing-line-height: floor(2.5 * @page-font-size);
@listing-touch-line-height: 3.4rem; @listing-touch-line-height: floor(3.4 * @page-font-size);
@listing-treetoggle-width: 1.5em; @listing-treetoggle-width: 1.5em;
@mail-header-photo-height: 4rem; @mail-header-photo-height: 4rem;
// Additional icons // Additional icons
@icon-resize-corner: data-uri("image/svg+xml;charset=utf-8", "../images/corner-handle.svg"); // size: 512x512 @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, .form-control-plaintext,
label.col-form-label { 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 { .form-control-plaintext {
@ -602,7 +602,7 @@ html.ms .propform {
/* Some common icons for "iconized inputs" */ /* Some common icons for "iconized inputs" */
.input-group .icon { .input-group .icon {
text-decoration: none; text-decoration: none;
padding: .375rem .5rem; padding: floor(.375 * @page-font-size) .5rem;
&.input-group-text { &.input-group-text {
min-width: 2.4rem; min-width: 2.4rem;
@ -708,7 +708,7 @@ html.ms .propform {
.custom-control-label { .custom-control-label {
&:before, &:before,
&:after { &: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 ***/ /*** Smart recipient input field ***/
@recipient-input-margin-fix: .25rem; @recipient-input-margin-fix: round(.25 * @page-font-size);
.recipient-input { .recipient-input {
display: flex; display: flex;
@ -955,7 +955,7 @@ html.ms .propform {
flex-grow: 1; flex-grow: 1;
display: inline-block; display: inline-block;
line-height: 1.1; line-height: 1.1;
padding: .25rem; padding: floor(.25 * @page-font-size);
vertical-align: middle; vertical-align: middle;
} }
@ -1305,7 +1305,7 @@ html.ms .propform {
&:before, &:before,
&:after { &:after {
border-radius: .6rem; border-radius: .6rem;
margin: .15rem 0; margin: floor(.15 * @page-font-size) 0;
html.touch & { html.touch & {
border-radius: .8rem; border-radius: .8rem;
@ -1315,34 +1315,36 @@ html.ms .propform {
&:before { &:before {
left: 2px; left: 2px;
width: 2rem; top: 4px;
height: 1.2rem; width: floor(1.9 * @page-font-size);
height: floor(1.2 * @page-font-size);
html.touch & { html.touch & {
top: .2rem; top: floor(.2 * @page-font-size);
width: 2.6rem; width: floor(2.5 * @page-font-size);
height: 1.6rem; height: floor(1.6 * @page-font-size);
} }
} }
&:after { &:after {
left: 4px; left: 4px;
width: ~"calc(1.2rem - 4px)"; top: 6px;
height: ~"calc(1.2rem - 4px)"; width: floor(1.2 * @page-font-size) - 4;
height: floor(1.2 * @page-font-size) - 4;
html.touch & { html.touch & {
top: ~"calc(.2rem + 2px)"; top: floor(.2 * @page-font-size) + 2;
height: ~"calc(1.6rem - 4px)"; height: floor(1.6 * @page-font-size) - 4;
width: ~"calc(1.6rem - 4px)"; width: floor(1.6 * @page-font-size) - 4;
} }
} }
} }
.custom-control-input:checked ~ .custom-control-label::after { .custom-control-input:checked ~ .custom-control-label::after {
transform: translateX(.8rem); transform: translateX(floor(1.2 * @page-font-size) - 6);
html.touch & { html.touch & {
transform: translateX(1rem); transform: translateX(floor(1.6 * @page-font-size) - 9);
} }
} }
@ -1364,7 +1366,7 @@ html.ms .propform {
} }
& + .hint { & + .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; top: 0;
position: absolute; position: absolute;
padding: .25rem .5rem; padding: .25rem .5rem;
margin: ((@layout-header-height - 2rem) / 2) .5rem; margin: ((@layout-header-height - 2 * @page-font-size) / 2) .5rem;
&:before { &:before {
&:extend(.font-icon-class); &:extend(.font-icon-class);
@ -110,7 +110,7 @@
button { button {
.overflow-ellipsis; .overflow-ellipsis;
min-width: 5rem; min-width: 5rem;
margin: .65rem .3rem; margin: floor(.65 * @page-font-size) floor(.3 * @page-font-size);
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;

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

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