diff --git a/assets/css/frontend/medal.css b/assets/css/frontend/medal.css index 60f2760e..deb8d39a 100644 --- a/assets/css/frontend/medal.css +++ b/assets/css/frontend/medal.css @@ -8,32 +8,39 @@ * ============================================================ */ /* ---------- 顶部资料卡入口(zibll user-medal-info parity) ---------- */ -.aksrt-medal-entry { +.aksrt-medal-entry, +.uc-header__meta-item { display: inline-flex; align-items: center; gap: 4px; min-width: 0; margin: 2px 8px 2px 0; - padding: 2px 0; - border: 0; - background: transparent; - color: var(--muted-2-color, var(--color-ink-4)); + padding: .3em .6em; + border: 1px solid var(--color-line-soft, var(--main-border-color, rgba(136, 136, 136, .18))); + border-radius: var(--mini-radius, 4px); + background: var(--surface-2, rgba(136, 136, 136, .1)); + box-shadow: var(--shadow-xs, 0 1px 3px rgba(0, 0, 0, .08)); + color: var(--muted-2-color, var(--color-ink-3)); font: inherit; font-size: 12px; - line-height: 1.4; - cursor: pointer; + line-height: 1.44; white-space: nowrap; - transition: color .15s ease, opacity .15s ease; +} +.aksrt-medal-entry { + cursor: pointer; + transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease; } .aksrt-medal-entry:hover, .aksrt-medal-entry:focus-visible { + border-color: var(--focus-color-opacity3, var(--focus-color)); + background: var(--focus-color-opacity1, rgba(59, 130, 246, .1)); + box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, .1)); color: var(--focus-color); opacity: 1; } .aksrt-medal-entry:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; - border-radius: var(--mini-radius, 6px); } .aksrt-medal-entry__icons { display: inline-flex; @@ -63,6 +70,14 @@ .aksrt-medal-entry__count { margin-left: 2px; } .aksrt-medal-entry__arrow { margin-left: 1px; font-size: .9em; } +@media (max-width: 767px) { + .aksrt-medal-entry, + .uc-header__meta-item { + margin-right: 4px; + max-width: 100%; + } +} + .medal-cat-box { position: relative;