diff --git a/public/style.css b/public/style.css index df6a0eb..93e5423 100644 --- a/public/style.css +++ b/public/style.css @@ -109,34 +109,28 @@ a:hover { text-overflow: ellipsis; } -.verified-icon { +.icon { color: #fff; - background-color: #1da1f2; border-radius: 50%; display: inline-block; text-align: center; vertical-align: middle; + flex-shrink: 0; + margin: 2px 0 3px 3px; +} + +.verified-icon { + background-color: #1da1f2; height: 14px; width: 14px; font-size: 10px; - flex-shrink: 0; - margin: 3px; - margin-top: 2px; } .protected-icon { - color: #fff; background-color: #353535; - border-radius: 50%; - display: inline-block; - text-align: center; - vertical-align: middle; height: 18px; width: 18px; font-size: 12px; - flex-shrink: 0; - margin: 3px; - margin-top: 2px; font-weight: bold; } @@ -616,7 +610,6 @@ video { margin-top: 10px; border: solid 1px #404040; border-radius: 10px; - padding: 6px; background-color: #121212; } @@ -627,6 +620,7 @@ video { .quote-container { position: relative; overflow: auto; + padding: 6px; } .quote-link { diff --git a/src/formatters.nim b/src/formatters.nim index 639f6c0..6e5ba52 100644 --- a/src/formatters.nim +++ b/src/formatters.nim @@ -76,9 +76,9 @@ proc linkUser*(profile: Profile; class=""): string = result = a(text, href = href, class = class, title = text) if not username and profile.verified: - result &= span("✔", class="verified-icon", title="Verified account") + result &= span("✔", class="icon verified-icon", title="Verified account") if not username and profile.protected: - result &= span("🔒", class="protected-icon", title="Protected account") + result &= span("🔒", class="icon protected-icon", title="Protected account") proc pageTitle*(profile: Profile): string = &"{profile.fullname} (@{profile.username}) | Nitter"