add a 1px padding to each sprite image
fixes #137 because browsers rounde the sprite position when zoomed in and that leads to overlaps. A 1px padding around each image combats these overlaps.
This commit is contained in:
Felix Niklas
parent
3f330a2588
commit
18b30e5154
2 changed files with 218 additions and 206 deletions
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 108 KiB After Width: | Height: | Size: 108 KiB |
|
|
@ -898,7 +898,7 @@ ol.tabs li {
|
|||
}
|
||||
|
||||
.dark.cog.icon {
|
||||
background-position: 0 -76px;
|
||||
background-position: 0 -77px;
|
||||
}
|
||||
|
||||
.green.plus.icon {
|
||||
|
|
@ -906,19 +906,19 @@ ol.tabs li {
|
|||
}
|
||||
|
||||
.white.plus.icon {
|
||||
background-position: -20px -76px;
|
||||
background-position: -20px -77px;
|
||||
}
|
||||
|
||||
.signout.icon {
|
||||
width: 15px;
|
||||
height: 19px;
|
||||
background-position: 0 -96px;
|
||||
background-position: 0 -98px;
|
||||
}
|
||||
|
||||
.switchView.icon {
|
||||
width: 19px;
|
||||
height: 18px;
|
||||
background-position: -15px -96px;
|
||||
background-position: -15px -98px;
|
||||
}
|
||||
|
||||
.priority.icon {
|
||||
|
|
@ -963,7 +963,7 @@ ol.tabs li {
|
|||
.organisation.icon {
|
||||
height: 13px;
|
||||
width: 14px;
|
||||
background-position: 0 -115px;
|
||||
background-position: 0 -118px;
|
||||
}
|
||||
|
||||
.icon-switch:hover .organisation.icon,
|
||||
|
|
@ -975,79 +975,79 @@ ol.tabs li {
|
|||
.user.icon {
|
||||
height: 13px;
|
||||
width: 14px;
|
||||
background-position: -14px -115px;
|
||||
background-position: -15px -118px;
|
||||
}
|
||||
|
||||
.icon-switch:hover .user.icon,
|
||||
.task.active .user.icon,
|
||||
.white.user.icon {
|
||||
background-position: -14px -128px;
|
||||
background-position: -15px -128px;
|
||||
}
|
||||
|
||||
.note.icon {
|
||||
height: 13px;
|
||||
width: 14px;
|
||||
background-position: -28px -115px;
|
||||
background-position: -30px -118px;
|
||||
}
|
||||
|
||||
.icon-switch:hover .note.icon,
|
||||
.task.active .note.icon,
|
||||
.white.note.icon {
|
||||
background-position: -28px -128px;
|
||||
background-position: -30px -128px;
|
||||
}
|
||||
|
||||
.pen.icon {
|
||||
height: 13px;
|
||||
width: 14px;
|
||||
background-position: -42px -115px;
|
||||
background-position: -45px -118px;
|
||||
}
|
||||
|
||||
.icon-switch:hover .pen.icon,
|
||||
.task.active .pen.icon,
|
||||
.white.pen.icon {
|
||||
background-position: -42px -128px;
|
||||
background-position: -45px -128px;
|
||||
}
|
||||
|
||||
.important.icon {
|
||||
height: 13px;
|
||||
width: 14px;
|
||||
background-position: -56px -115px;
|
||||
background-position: -60px -118px;
|
||||
}
|
||||
.icon-switch:hover .important.icon,
|
||||
.task.active .important.icon,
|
||||
.white.important.icon {
|
||||
background-position: -56px -128px;
|
||||
background-position: -60px -128px;
|
||||
}
|
||||
|
||||
.tools.icon {
|
||||
height: 13px;
|
||||
width: 14px;
|
||||
background-position: -70px -115px;
|
||||
background-position: -75px -118px;
|
||||
}
|
||||
.icon-switch:hover .tools.icon,
|
||||
.task.active .tools.icon,
|
||||
.white.tools.icon {
|
||||
background-position: -70px -128px;
|
||||
background-position: -75px -128px;
|
||||
}
|
||||
|
||||
.clock.icon {
|
||||
height: 13px;
|
||||
width: 14px;
|
||||
background-position: -84px -115px;
|
||||
background-position: -90px -118px;
|
||||
}
|
||||
.icon-switch:hover .clock.icon,
|
||||
.task.active .clock.icon,
|
||||
.white.clock.icon {
|
||||
background-position: -84px -128px;
|
||||
background-position: -90px -128px;
|
||||
}
|
||||
|
||||
.team.icon {
|
||||
height: 13px;
|
||||
width: 20px;
|
||||
background-position: -98px -115px;
|
||||
background-position: -105px -118px;
|
||||
}
|
||||
.white.team.icon {
|
||||
background-position: -98px -128px;
|
||||
background-position: -105px -128px;
|
||||
}
|
||||
|
||||
.channel.icon {
|
||||
|
|
@ -1056,79 +1056,79 @@ ol.tabs li {
|
|||
}
|
||||
|
||||
.email.channel.icon {
|
||||
background-position: 0 -141px;
|
||||
background-position: 0 -146px;
|
||||
}
|
||||
|
||||
.received-calls.channel.icon {
|
||||
background-position: -17px -141px;
|
||||
background-position: -18px -146px;
|
||||
}
|
||||
|
||||
.outbound-calls.channel.icon {
|
||||
background-position: -34px -141px;
|
||||
background-position: -36px -146px;
|
||||
}
|
||||
|
||||
.facebook.channel.icon {
|
||||
background-position: -51px -141px;
|
||||
background-position: -54px -146px;
|
||||
}
|
||||
|
||||
.twitter.channel.icon {
|
||||
background-position: -68px -141px;
|
||||
background-position: -72px -146px;
|
||||
}
|
||||
|
||||
.gray.email.channel.icon {
|
||||
background-position: -85px -141px;
|
||||
background-position: -90px -146px;
|
||||
}
|
||||
|
||||
.gray.received-calls.channel.icon {
|
||||
background-position: -102px -141px;
|
||||
background-position: -108px -146px;
|
||||
}
|
||||
|
||||
.gray.outbound-calls.channel.icon {
|
||||
background-position: -119px -141px;
|
||||
background-position: -126px -146px;
|
||||
}
|
||||
|
||||
.gray.facebook.channel.icon {
|
||||
background-position: -136px -141px;
|
||||
background-position: -144px -146px;
|
||||
}
|
||||
|
||||
.gray.twitter.channel.icon {
|
||||
background-position: -153px -141px;
|
||||
background-position: -162px -146px;
|
||||
}
|
||||
|
||||
.gray.note.channel.icon {
|
||||
background-position: -170px -141px;
|
||||
background-position: -180px -146px;
|
||||
}
|
||||
|
||||
.gray.phone.channel.icon {
|
||||
background-position: -187px -141px;
|
||||
background-position: -198px -146px;
|
||||
}
|
||||
|
||||
.white.email.channel.icon {
|
||||
background-position: -204px -141px;
|
||||
background-position: -216px -146px;
|
||||
}
|
||||
|
||||
.white.received-calls.channel.icon {
|
||||
background-position: -221px -141px;
|
||||
background-position: -234px -146px;
|
||||
}
|
||||
|
||||
.white.outbound-calls.channel.icon {
|
||||
background-position: -238px -141px;
|
||||
background-position: -252px -146px;
|
||||
}
|
||||
|
||||
.white.facebook.channel.icon {
|
||||
background-position: -255px -141px;
|
||||
background-position: -270px -146px;
|
||||
}
|
||||
|
||||
.white.twitter.channel.icon {
|
||||
background-position: -272px -141px;
|
||||
background-position: -288px -146px;
|
||||
}
|
||||
|
||||
.white.note.channel.icon {
|
||||
background-position: -289px -141px;
|
||||
background-position: -306px -146px;
|
||||
}
|
||||
|
||||
.white.phone.channel.icon {
|
||||
background-position: -306px -141px;
|
||||
background-position: -324px -146px;
|
||||
}
|
||||
|
||||
.mood.icon {
|
||||
|
|
@ -1137,35 +1137,35 @@ ol.tabs li {
|
|||
}
|
||||
|
||||
.mood.icon.superbad-state {
|
||||
background-position: 0 -157px;
|
||||
background-position: 0 -163px;
|
||||
}
|
||||
|
||||
.mood.icon.bad-state {
|
||||
background-position: -60px -157px;
|
||||
background-position: -61px -163px;
|
||||
}
|
||||
|
||||
.mood.icon.ok-state {
|
||||
background-position: -120px -157px;
|
||||
background-position: -122px -163px;
|
||||
}
|
||||
|
||||
.mood.icon.good-state {
|
||||
background-position: -180px -157px;
|
||||
background-position: -183px -163px;
|
||||
}
|
||||
|
||||
.mood.icon.supergood-state {
|
||||
background-position: -240px -157px;
|
||||
background-position: -244px -163px;
|
||||
}
|
||||
|
||||
.stopwatch.icon {
|
||||
width: 77px;
|
||||
height: 83px;
|
||||
background-position: 0 -216px;
|
||||
background-position: 0 -223px;
|
||||
}
|
||||
|
||||
.in-process.icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-position: -77px -216px;
|
||||
background-position: -79px -225px;
|
||||
}
|
||||
|
||||
.in-process.superbad-state,
|
||||
|
|
@ -1196,19 +1196,19 @@ ol.tabs li {
|
|||
.reopening.icon {
|
||||
width: 68px;
|
||||
height: 47px;
|
||||
background-position: -141px -216px;
|
||||
background-position: -146px -225px;
|
||||
}
|
||||
|
||||
.paperclip.icon {
|
||||
width: 31px;
|
||||
height: 29px;
|
||||
background-position: -141px -263px;
|
||||
background-position: -145px -274px;
|
||||
}
|
||||
|
||||
.stat-all-tickets.icon {
|
||||
width: 48px;
|
||||
height: 83px;
|
||||
background-position: -209px -216px;
|
||||
background-position: -216px -224px;
|
||||
}
|
||||
|
||||
.stat-tickets {
|
||||
|
|
@ -1224,24 +1224,24 @@ ol.tabs li {
|
|||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.stat-ticket.superbad-state {
|
||||
background-position: -257px -256px;
|
||||
}
|
||||
|
||||
.stat-ticket.bad-state {
|
||||
background-position: -257px -246px;
|
||||
}
|
||||
|
||||
.stat-ticket.ok-state {
|
||||
background-position: -257px -236px;
|
||||
.stat-ticket.supergood-state {
|
||||
background-position: -265px -223px;
|
||||
}
|
||||
|
||||
.stat-ticket.good-state {
|
||||
background-position: -257px -226px;
|
||||
background-position: -265px -235px;
|
||||
}
|
||||
|
||||
.stat-ticket.supergood-state {
|
||||
background-position: -257px -216px;
|
||||
.stat-ticket.ok-state {
|
||||
background-position: -265px -246px;
|
||||
}
|
||||
|
||||
.stat-ticket.bad-state {
|
||||
background-position: -265px -257px;
|
||||
}
|
||||
|
||||
.stat-ticket.superbad-state {
|
||||
background-position: -265px -268px;
|
||||
}
|
||||
|
||||
.left.arrow.icon,
|
||||
|
|
@ -1257,19 +1257,19 @@ ol.tabs li {
|
|||
}
|
||||
|
||||
.left.arrow.icon {
|
||||
background-position: 0 -299px;
|
||||
background-position: 0 -307px;
|
||||
}
|
||||
|
||||
.right.arrow.icon {
|
||||
background-position: -8px -299px;
|
||||
background-position: -9px -307px;
|
||||
}
|
||||
|
||||
.white.left.arrow.icon {
|
||||
background-position: -16px -299px;
|
||||
background-position: -18px -307px;
|
||||
}
|
||||
|
||||
.white.right.arrow.icon {
|
||||
background-position: -24px -299px;
|
||||
background-position: -27px -307px;
|
||||
}
|
||||
|
||||
.checkbox.icon {
|
||||
|
|
@ -1277,7 +1277,7 @@ ol.tabs li {
|
|||
margin: 0; /* overwriting bootstrap */
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-position: -32px -299px;
|
||||
background-position: -36px -307px;
|
||||
}
|
||||
|
||||
.white.checkbox.icon {
|
||||
|
|
@ -1285,117 +1285,117 @@ ol.tabs li {
|
|||
}
|
||||
|
||||
:checked + .checkbox.icon {
|
||||
background-position: -42px -299px;
|
||||
background-position: -47px -307px;
|
||||
}
|
||||
|
||||
.arrow-right.icon {
|
||||
width: 12px;
|
||||
height: 11px;
|
||||
background-position: -52px -299px;
|
||||
background-position: -58px -307px;
|
||||
}
|
||||
|
||||
.delete.icon {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
background-position: -64px -300px;
|
||||
background-position: -71px -308px;
|
||||
}
|
||||
|
||||
.select-arrow.icon {
|
||||
width: 12px;
|
||||
height: 7px;
|
||||
background-position: -73px -300px;
|
||||
background-position: -81px -308px;
|
||||
}
|
||||
|
||||
.dark.group.icon {
|
||||
width: 23px;
|
||||
height: 24px;
|
||||
background-position: 0 -311px;
|
||||
background-position: 0 -320px;
|
||||
}
|
||||
|
||||
.dark.message.icon {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
background-position: -23px -311px;
|
||||
background-position: -24px -320px;
|
||||
}
|
||||
|
||||
.dark.person.icon {
|
||||
width: 11px;
|
||||
height: 24px;
|
||||
background-position: -42px -311px;
|
||||
background-position: -44px -320px;
|
||||
}
|
||||
|
||||
.dark.templates.icon {
|
||||
width: 19px;
|
||||
height: 22px;
|
||||
background-position: -53px -311px;
|
||||
background-position: -56px -320px;
|
||||
}
|
||||
|
||||
.split.action.icon {
|
||||
width: 18px;
|
||||
height: 15px;
|
||||
background-position: 0 -336px;
|
||||
background-position: 0 -346px;
|
||||
}
|
||||
|
||||
.reply.action.icon {
|
||||
width: 14px;
|
||||
height: 15px;
|
||||
background-position: -18px -336px;
|
||||
background-position: -19px -346px;
|
||||
}
|
||||
|
||||
.internal.action.icon,
|
||||
.public.visibility.icon {
|
||||
width: 11px;
|
||||
height: 15px;
|
||||
background-position: -32px -336px;
|
||||
background-position: -34px -346px;
|
||||
}
|
||||
|
||||
.public.action.icon,
|
||||
.internal.visibility.icon {
|
||||
width: 11px;
|
||||
height: 15px;
|
||||
background-position: -43px -336px;
|
||||
background-position: -46px -346px;
|
||||
}
|
||||
|
||||
.recipients.icon {
|
||||
width: 16px;
|
||||
height: 12px;
|
||||
background-position: -54px -339px;
|
||||
background-position: -58px -349px;
|
||||
}
|
||||
|
||||
.white.close.icon {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
background-position: -70px -338px;
|
||||
background-position: -75px -348px;
|
||||
}
|
||||
|
||||
.close.icon {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
background-position: -83px -338px;
|
||||
background-position: -89px -348px;
|
||||
}
|
||||
|
||||
.help.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-position: -96px -335px;
|
||||
background-position: -103px -345px;
|
||||
}
|
||||
|
||||
.download.icon {
|
||||
width: 14px;
|
||||
height: 13px;
|
||||
background-position: -112px -339px;
|
||||
background-position: -120px -349px;
|
||||
}
|
||||
|
||||
.checkmark.icon {
|
||||
width: 16px;
|
||||
height: 15px;
|
||||
background-position: -126px -337px;
|
||||
background-position: -135px -347px;
|
||||
}
|
||||
|
||||
.error.icon {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
background-position: -143px -339px;
|
||||
background-position: -153px -349px;
|
||||
}
|
||||
|
||||
.loading.icon {
|
||||
|
|
|
|||
Loading…
Reference in a new issue