Toolbar buttons: lock line-height + min-height so a and button render same size
Browse files- static/index.html +6 -1
static/index.html
CHANGED
|
@@ -103,7 +103,12 @@
|
|
| 103 |
font-size: 10px; font-weight: 400; letter-spacing: 0.5px;
|
| 104 |
padding: 5px 11px; border: 1px solid #ccc; border-radius: 3px;
|
| 105 |
background: #fff; color: var(--muted); cursor: pointer;
|
| 106 |
-
transition: all 0.15s; text-decoration: none;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 107 |
}
|
| 108 |
.btn:hover { border-color: var(--muted-3); color: var(--ink); }
|
| 109 |
.btn:disabled { opacity: 0.6; cursor: wait; }
|
|
|
|
| 103 |
font-size: 10px; font-weight: 400; letter-spacing: 0.5px;
|
| 104 |
padding: 5px 11px; border: 1px solid #ccc; border-radius: 3px;
|
| 105 |
background: #fff; color: var(--muted); cursor: pointer;
|
| 106 |
+
transition: all 0.15s; text-decoration: none;
|
| 107 |
+
/* inline-flex + fixed line-height + min-height keeps <a> and <button>
|
| 108 |
+
the same size — the ↗ glyph would otherwise inflate the link's
|
| 109 |
+
line-box height. */
|
| 110 |
+
display: inline-flex; align-items: center;
|
| 111 |
+
line-height: 1.4; min-height: 26px; box-sizing: border-box;
|
| 112 |
}
|
| 113 |
.btn:hover { border-color: var(--muted-3); color: var(--ink); }
|
| 114 |
.btn:disabled { opacity: 0.6; cursor: wait; }
|