Fix TLS badge padlock icon centering and symmetry

Replace 14x14 SVG path with properly centered 16x16 padlock, use
symmetric padding, and add vertical-align: middle.
This commit is contained in:
satoshi
2026-05-10 17:23:55 +03:00
parent de81e2e111
commit e2e47d251f
2 changed files with 18 additions and 16 deletions
+9 -8
View File
@@ -122,8 +122,8 @@
{r.workerName} {r.workerName}
{#if r.tls} {#if r.tls}
<span class="badge tls" title="Connected via TLS"> <span class="badge tls" title="Connected via TLS">
<svg viewBox="0 0 14 14" aria-hidden="true"> <svg viewBox="0 0 16 16" aria-hidden="true">
<path d="M4 6V4.5a3 3 0 0 1 6 0V6h.5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1H4Zm1.4 0h3.2V4.5a1.6 1.6 0 0 0-3.2 0V6Z"/> <path d="M8 1a3.5 3.5 0 0 0-3.5 3.5V7H4a1.5 1.5 0 0 0-1.5 1.5v5A1.5 1.5 0 0 0 4 15h8a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 12 7h-.5V4.5A3.5 3.5 0 0 0 8 1Zm2 6H6V4.5a2 2 0 1 1 4 0V7Z"/>
</svg> </svg>
<span>TLS</span> <span>TLS</span>
</span> </span>
@@ -208,21 +208,22 @@
.badge.tls { .badge.tls {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.32em; gap: 0.3em;
font-size: 0.78em; font-size: 0.72em;
font-weight: 600; font-weight: 600;
letter-spacing: 0.04em; letter-spacing: 0.04em;
color: var(--good); color: var(--good);
border: 1px solid #3a7558; border: 1px solid #3a7558;
background: #112e22; background: #112e22;
padding: 0.18em 0.55em 0.18em 0.4em; padding: 0.15em 0.5em;
border-radius: 5px; border-radius: 4px;
text-transform: uppercase; text-transform: uppercase;
line-height: 1; line-height: 1;
vertical-align: middle;
} }
.badge.tls svg { .badge.tls svg {
width: 0.95em; width: 0.9em;
height: 0.95em; height: 0.9em;
fill: currentColor; fill: currentColor;
flex-shrink: 0; flex-shrink: 0;
} }
+9 -8
View File
@@ -226,8 +226,8 @@
{r.worker} {r.worker}
{#if r.tls} {#if r.tls}
<span class="badge tls" title="Connected via TLS"> <span class="badge tls" title="Connected via TLS">
<svg viewBox="0 0 14 14" aria-hidden="true"> <svg viewBox="0 0 16 16" aria-hidden="true">
<path d="M4 6V4.5a3 3 0 0 1 6 0V6h.5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1H4Zm1.4 0h3.2V4.5a1.6 1.6 0 0 0-3.2 0V6Z"/> <path d="M8 1a3.5 3.5 0 0 0-3.5 3.5V7H4a1.5 1.5 0 0 0-1.5 1.5v5A1.5 1.5 0 0 0 4 15h8a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 12 7h-.5V4.5A3.5 3.5 0 0 0 8 1Zm2 6H6V4.5a2 2 0 1 1 4 0V7Z"/>
</svg> </svg>
<span>TLS</span> <span>TLS</span>
</span> </span>
@@ -358,21 +358,22 @@
.badge.tls { .badge.tls {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.32em; gap: 0.3em;
font-size: 0.78em; font-size: 0.72em;
font-weight: 600; font-weight: 600;
letter-spacing: 0.04em; letter-spacing: 0.04em;
color: var(--good); color: var(--good);
border: 1px solid #3a7558; border: 1px solid #3a7558;
background: #112e22; background: #112e22;
padding: 0.18em 0.55em 0.18em 0.4em; padding: 0.15em 0.5em;
border-radius: 5px; border-radius: 4px;
text-transform: uppercase; text-transform: uppercase;
line-height: 1; line-height: 1;
vertical-align: middle;
} }
.badge.tls svg { .badge.tls svg {
width: 0.95em; width: 0.9em;
height: 0.95em; height: 0.9em;
fill: currentColor; fill: currentColor;
flex-shrink: 0; flex-shrink: 0;
} }