wordpress-theme-aksrt/assets/css/frontend/medal.css

/* ============================================================
 * 徽章入口与弹窗运行时适配
 * ------------------------------------------------------------
 * 徽章列表、卡片和彩头复用 main.css 的参考主题样式。
 * ============================================================ */

/* ---------- 顶部资料卡入口（legacy user-medal-info parity） ---------- */
.jio-medal-entry,
.uc-header__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin: 2px 8px 2px 0;
  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.44;
  white-space: nowrap;
}
.jio-medal-entry {
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.jio-medal-entry:hover,
.jio-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;
}
.jio-medal-entry:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
}
.jio-medal-entry__icons {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-width: 0;
}
.jio-medal-entry__icon {
  width: auto;
  height: 1.45em;
  max-width: 2.2em;
  margin: 0 1px;
  object-fit: contain;
  vertical-align: middle;
}
.jio-medal-entry__icon + .jio-medal-entry__icon { margin-left: -1px; }
.jio-medal-entry__fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  color: var(--focus-color);
  background: var(--focus-color-opacity1);
  border-radius: 50%;
}
.jio-medal-entry__count { margin-left: 2px; }
.jio-medal-entry__arrow { margin-left: 1px; font-size: .9em; }

@media (max-width: 767px) {
  .jio-medal-entry,
  .uc-header__meta-item {
    margin-right: 4px;
    max-width: 100%;
  }
}

/* 参考主题 modal-body：只适配共享运行时，列表/卡片由 main.css 定义。 */
.jio-modal-runtime.jio-badge-modal .jio-modal-runtime__dialog {
  width: 600px;
  max-width: calc(100% - 20px);
  max-height: calc(100vh - 20px);
  background: var(--main-bg-color);
  border-radius: var(--main-radius);
  box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  color: var(--main-color);
  font: 14px/1.42857143 "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: auto;
  text-rendering: auto;
}
.jio-modal-runtime.jio-badge-modal--single .jio-modal-runtime__dialog {
  width: 400px;
}
.jio-badge-modal:not(.jio-modal-runtime--bottom) .jio-modal-runtime__dialog {
  transform: scale(.9);
  transition: transform .5s cubic-bezier(.32, .85, .45, 1.18), width .3s;
}
.jio-badge-modal.is-open .jio-modal-runtime__dialog { transform: scale(1); }
.jio-badge-modal .jio-modal-runtime__content { padding: 0; }
.jio-badge-modal .modal-body { padding: 15px; }
.jio-badge-modal .jio-modal-runtime__loading {
  position: absolute;
  inset: 0;
  min-height: inherit;
  padding: 0;
  background: var(--main-bg-color);
  border-radius: inherit;
  color: var(--main-color);
}

/* 参考主题的徽章图标无资源时保留同尺寸占位。 */
.jio-badge-modal .medal-icon--fa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  font-size: 34px;
  color: var(--focus-color);
}
.jio-badge-modal .medal-single-card .medal-icon--fa { font-size: 72px; }
.jio-badge-modal .medal-list > a { display: block; }
.jio-badge-modal .medal-list > a:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
}
.jio-badge-modal .jio-null__img { display: inline-block; }

/* 公共运行时的按钮网格需还原为参考主题的平均分栏操作区。 */
.jio-modal-runtime.jio-badge-modal .modal-buts.but-average {
  display: flex;
  gap: 0;
  margin: 0 -15px -15px;
  border-radius: 0 0 var(--main-radius) var(--main-radius);
}
.jio-badge-modal .modal-buts.but-average > .but {
  min-height: 0;
  padding: .8em;
}

/* 与参考主题 mobile_bottom 一致，保留非 full-sm 子窗的底部留白。 */
.jio-modal-runtime--bottom.jio-badge-modal .jio-modal-runtime__dialog {
  margin-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 50px rgba(0, 0, 0, .15);
  transform: translateY(110%);
  transition: transform .4s;
  overflow: visible;
}
.jio-modal-runtime--bottom.jio-badge-modal .jio-modal-runtime__content {
  max-height: calc(100vh - 20px);
  overflow: auto;
  border-radius: inherit;
}
.jio-modal-runtime--bottom.jio-badge-modal.is-open .jio-modal-runtime__dialog {
  transform: translateY(0);
  transition: transform .6s cubic-bezier(.28, .9, .34, .99);
}
.jio-modal-runtime--bottom.jio-badge-modal .modal-colorful-header {
  border-radius: inherit;
}
.jio-badge-modal .touch-close {
  position: absolute;
  top: -24px;
  width: 100%;
}
.jio-badge-modal .touch-close::before {
  content: ' ';
  display: block;
  width: 40px;
  height: 4px;
  margin: 15px auto;
  border-radius: 10px;
  background: var(--muted-3-color);
  opacity: .8;
}
@media (max-width: 767px) {
  .jio-modal-runtime.jio-badge-modal:not(.jio-badge-modal--single) .jio-modal-runtime__dialog { width: 100%; }
}
@media (max-width: 640px) {
  .jio-badge-modal.jio-modal-runtime--bottom.jio-modal-runtime--parent { perspective: 1000px; }
  .jio-modal-runtime.jio-badge-modal.jio-modal-runtime--bottom.jio-modal-runtime--parent.is-open .jio-modal-runtime__dialog {
    transform: rotateX(11deg) scale(.95);
    padding-bottom: 0;
  }
  .jio-modal-runtime.jio-badge-modal--single .jio-modal-runtime__dialog { width: 100%; }
  .jio-modal-runtime--bottom.jio-badge-modal--overview .jio-modal-runtime__dialog {
    max-width: 100%;
    margin-bottom: -1px;
    border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}