use sprites to reduce the number of requests

This commit is contained in:
Jakob Ketterl
2020-09-10 22:29:01 +02:00
parent 626fa7681b
commit 63c31eba22
8 changed files with 137 additions and 18 deletions

View File

@ -6,3 +6,7 @@ html, body
font-family: "DejaVu Sans", Verdana, Geneva, sans-serif;
}
.sprite {
background-image: url(../gfx/openwebrx-sprites.png);
display: inline-block;
}

View File

@ -192,3 +192,44 @@
text-shadow: none;
}
.sprite-panel-log {
background-position: 0 0;
width: 38px;
height: 38px;
}
.sprite-panel-receiver {
background-position: -38px 0;
width: 40px;
height: 38px;
}
.sprite-panel-map {
background-position: -78px 0;
width: 38px;
height: 38px;
}
.sprite-panel-settings {
background-position: -116px 0;
width: 38px;
height: 38px;
}
.sprite-panel-status {
background-position: -154px 0;
width: 44px;
height: 38px;
}
.sprite-rx-details-arrow-down {
background-position: -141px -467px;
width: 43px;
height: 12px;
}
.sprite-rx-details-arrow-up {
background-position: -141px -455px;
width: 43px;
height: 12px;
}

View File

@ -1162,3 +1162,79 @@ img.openwebrx-mirror-img
margin: -10px;
}
.sprite-zoom {
background-size: 55px 151px;
width: 27px;
height: 27px;
}
.sprite-zoom-in {
background-position: 0 -10px;
}
.sprite-zoom-out {
background-position: 0 -38px;
}
.sprite-zoom-in-total {
background-size: 49px 133px;
background-position: 0 -57.5px;
width: 24px;
}
.sprite-zoom-out-total {
background-size: 50px 139px;
background-position: 0 -88.5px;
width: 25px;
}
.sprite-edit {
background-size: 70.7px 193.2px;
background-position: -35px -145.25px;
width: 14px;
height: 14px;
}
.sprite-trashcan {
background-size: 70.7px 193.2px;
background-position: -49px -145.25px;
width: 14px;
height: 14px;
}
.sprite-speaker {
background-size: 29.2px 79.7px;
width: 14px;
height: 14.6px;
}
#openwebrx-mute-on .sprite-speaker {
background-position: -14.4px -20.4px;
}
#openwebrx-mute-off .sprite-speaker {
background-position: -14.4px -5.8px;
}
.sprite-squelch {
background-size: 28.3px 77.3px;
background-position: 0 -64.3px;
width: 14px;
height: 13px;
}
.sprite-waterfall {
background-size: 27.7px 75.8px;
}
.sprite-waterfall-auto {
background-position: -13.7px -45.6px;
width: 14px;
height: 11.4px;
}
.sprite-waterfall-default {
background-position: -13.7px -33.2px;
width: 14px;
height: 12.5px;
}