themes: scale down icons for network interfaces

Many LuCI icons doubled in size during migration to vector graphics
in commit ae5d91da90 (16px to 32px).

Sizing of their instances is mostly controlled by CSS, but there's
an exception - network interface boxes of "Interfaces" page in LuCI.
Current CSS doesn't specify any particular size requirements to follow,
so the icons just scale with the images served, thus effectively
doubling in width and height compared to state before the vectorization
commit. Such a big icons look odd and take up too much space, especially
for bridge interfaces with many ports.

Instead of reverting to the original 16×16px, this commit proposes
compromise of 24×24px as most of other icons within LuCI became a bit
bigger as well.

Signed-off-by: Dávid Benko <davidbenko@davidbenko.dev>
This commit is contained in:
Dávid Benko
2025-08-23 18:00:33 +02:00
committed by Paul Donald
parent f53e99d229
commit 65c1075b86
4 changed files with 20 additions and 0 deletions

View File

@@ -2188,6 +2188,11 @@ th[data-sort-direction="desc"]::after { content: "\a0\25bc"; }
white-space: normal;
}
#cbi-network-interface .ifacebox img {
width: 24px;
height: 24px;
}
.ifacebadge {
display: inline-block;
flex-direction: row;

View File

@@ -2084,6 +2084,11 @@ td > .ifacebadge,
padding: .25em;
}
#cbi-network-interface .ifacebox img {
width: 24px;
height: 24px;
}
.cbi-image-button {
margin-left: .5rem;
}

View File

@@ -704,6 +704,11 @@ p > a {
white-space: nowrap;
}
#cbi-network-interface .ifacebox img {
width: 24px;
height: 24px;
}
.ifacebadge {
display: inline-flex;
align-items: center;

View File

@@ -1653,6 +1653,11 @@ select + .cbi-button {
min-width: 35%;
}
#cbi-network-interface .ifacebox img {
width: 24px;
height: 24px;
}
.zonebadge {
padding: 2px;