fix(user): align badge modals with reference theme
This commit is contained in:
kate522 committed
1 parent
8e9d3a7e49
commit
1c501ff713
17 files changed
+931
-313
No files matched your search
+91
-242
@@ -1,7 +1,7 @@
|
||||
/* ============================================================
|
||||
* 徽章弹窗（legacy medal 1:1 风格）
|
||||
* 徽章入口与弹窗运行时适配
|
||||
* ------------------------------------------------------------
|
||||
* 共享于用户中心与公开主页的服务端 HTML 徽章弹窗。
|
||||
* 徽章列表、卡片和彩头复用 main.css 的参考主题样式。
|
||||
* ============================================================ */
|
||||
|
||||
/* ---------- 顶部资料卡入口（legacy user-medal-info parity） ---------- */
|
||||
@@ -75,268 +75,117 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.medal-cat-box {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 8px 8px 4px;
|
||||
margin-bottom: 16px;
|
||||
background: var(--muted-border-color, rgba(136, 136, 136, 0.06));
|
||||
border-radius: var(--main-radius, 8px);
|
||||
/* 参考主题 modal-body：只适配共享运行时，列表/卡片由 main.css 定义。 */
|
||||
.aksrt-modal-runtime.aksrt-badge-modal .aksrt-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;
|
||||
}
|
||||
.medal-cat-box:last-child { margin-bottom: 0; }
|
||||
|
||||
.medal-cat-head { margin-bottom: 6px; }
|
||||
|
||||
.medal-cat-name {
|
||||
display: inline-block;
|
||||
margin-top: -8px;
|
||||
padding: 6px 22px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--focus-color);
|
||||
background: var(--focus-color-opacity1);
|
||||
border-radius: 0 0 1000px 1000px;
|
||||
.aksrt-modal-runtime.aksrt-badge-modal--single .aksrt-modal-runtime__dialog {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
/* ---------- 卡片网格（legacy .medal-list-box / .medal-list） ---------- */
|
||||
.medal-list-box {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 8px 4px;
|
||||
.aksrt-badge-modal:not(.aksrt-modal-runtime--bottom) .aksrt-modal-runtime__dialog {
|
||||
transform: scale(.9);
|
||||
transition: transform .5s cubic-bezier(.32, .85, .45, 1.18), width .3s;
|
||||
}
|
||||
|
||||
.medal-list-box--grant { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.medal-grant-item { min-width: 0; }
|
||||
.medal-grant-item .medal-card { height: 100%; }
|
||||
.medal-grant-item > .but { display: block; width: 100%; }
|
||||
|
||||
.medal-list {
|
||||
display: block;
|
||||
width: auto !important;
|
||||
margin: 0 !important;
|
||||
min-width: 0;
|
||||
.aksrt-badge-modal.is-open .aksrt-modal-runtime__dialog { transform: scale(1); }
|
||||
.aksrt-badge-modal .aksrt-modal-runtime__content { padding: 0; }
|
||||
.aksrt-badge-modal .modal-body { padding: 15px; }
|
||||
.aksrt-badge-modal .aksrt-modal-runtime__loading {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
min-height: inherit;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: var(--main-bg-color);
|
||||
border-radius: inherit;
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
.medal-card {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 8px 4px 6px;
|
||||
border-radius: var(--mini-radius, 6px);
|
||||
transition: transform 0.15s ease, background-color 0.15s ease;
|
||||
}
|
||||
.medal-list:hover .medal-card,
|
||||
.medal-list:focus-visible .medal-card {
|
||||
transform: translateY(-2px);
|
||||
background: var(--focus-color-opacity1);
|
||||
}
|
||||
.medal-list:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; border-radius: var(--mini-radius, 6px); }
|
||||
|
||||
.medal-card .medal-icon {
|
||||
width: auto;
|
||||
height: 70px;
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.medal-card .medal-icon--fa {
|
||||
/* 参考主题的徽章图标无资源时保留同尺寸占位。 */
|
||||
.aksrt-badge-modal .medal-icon--fa {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 56px;
|
||||
height: 70px;
|
||||
font-size: 34px;
|
||||
color: var(--focus-color);
|
||||
}
|
||||
.aksrt-badge-modal .medal-single-card .medal-icon--fa { font-size: 72px; }
|
||||
.aksrt-badge-modal .medal-list > a { display: block; }
|
||||
.aksrt-badge-modal .medal-list > a:focus-visible {
|
||||
outline: 2px solid var(--focus-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.aksrt-badge-modal .aksrt-null__img { display: inline-block; }
|
||||
|
||||
/* 未获得：灰度 + 透明（legacy .no-has） */
|
||||
.medal-card.no-has {
|
||||
-webkit-filter: grayscale(100%);
|
||||
filter: grayscale(100%);
|
||||
opacity: 0.6;
|
||||
/* 公共运行时的按钮网格需还原为参考主题的平均分栏操作区。 */
|
||||
.aksrt-modal-runtime.aksrt-badge-modal .modal-buts.but-average {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
margin: 0 -15px -15px;
|
||||
border-radius: 0 0 var(--main-radius) var(--main-radius);
|
||||
}
|
||||
.aksrt-badge-modal .modal-buts.but-average > .but {
|
||||
min-height: 0;
|
||||
padding: .8em;
|
||||
}
|
||||
|
||||
.medal-card__name {
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
color: var(--muted-color, var(--color-ink-3));
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
/* 与参考主题 mobile_bottom 一致，保留非 full-sm 子窗的底部留白。 */
|
||||
.aksrt-modal-runtime--bottom.aksrt-badge-modal .aksrt-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;
|
||||
}
|
||||
.medal-card.is-has .medal-card__name { color: var(--key-color, var(--color-ink)); }
|
||||
|
||||
.medal-card__wear {
|
||||
margin-top: 2px;
|
||||
font-size: 11px;
|
||||
line-height: 1.3;
|
||||
color: var(--focus-color);
|
||||
.aksrt-modal-runtime--bottom.aksrt-badge-modal .aksrt-modal-runtime__content {
|
||||
max-height: calc(100vh - 20px);
|
||||
overflow: auto;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
/* ---------- 单徽章详情卡（legacy .medal-single-card） ---------- */
|
||||
.medal-single-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
padding: 22px 14px 18px;
|
||||
margin-bottom: 14px;
|
||||
background: var(--muted-border-color, rgba(136, 136, 136, 0.06));
|
||||
border-radius: var(--main-radius, 8px);
|
||||
.aksrt-modal-runtime--bottom.aksrt-badge-modal.is-open .aksrt-modal-runtime__dialog {
|
||||
transform: translateY(0);
|
||||
transition: transform .6s cubic-bezier(.28, .9, .34, .99);
|
||||
}
|
||||
.medal-single-bg {
|
||||
.aksrt-modal-runtime--bottom.aksrt-badge-modal .modal-colorful-header {
|
||||
border-radius: inherit;
|
||||
}
|
||||
.aksrt-badge-modal .touch-close {
|
||||
position: absolute;
|
||||
top: 43px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: auto;
|
||||
z-index: 0;
|
||||
max-width: 305px;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
.medal-single-bg img {
|
||||
top: -24px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
.medal-single-main { position: relative; }
|
||||
|
||||
.medal-single-card .medal-icon {
|
||||
width: auto;
|
||||
height: 120px;
|
||||
max-width: 200px;
|
||||
object-fit: contain;
|
||||
.aksrt-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;
|
||||
}
|
||||
.medal-single-card .medal-icon--fa {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 120px;
|
||||
font-size: 72px;
|
||||
color: var(--focus-color);
|
||||
@media (max-width: 767px) {
|
||||
.aksrt-modal-runtime.aksrt-badge-modal:not(.aksrt-badge-modal--single) .aksrt-modal-runtime__dialog { width: 100%; }
|
||||
}
|
||||
|
||||
.medal-single-name {
|
||||
margin-top: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.medal-single-desc {
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.medal-single-state {
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* ---------- 弹窗骨架（远程弹窗 .medal-modal） ---------- */
|
||||
.aksrt-modal-runtime.aksrt-badge-modal:not(.aksrt-modal-runtime--bottom) .aksrt-modal-runtime__dialog {
|
||||
width: min(620px, calc(100vw - 32px));
|
||||
}
|
||||
.aksrt-modal-runtime.aksrt-badge-modal--single:not(.aksrt-modal-runtime--bottom) .aksrt-modal-runtime__dialog {
|
||||
width: min(400px, calc(100vw - 32px));
|
||||
}
|
||||
.aksrt-modal-runtime.aksrt-badge-modal--grant:not(.aksrt-modal-runtime--bottom) .aksrt-modal-runtime__dialog {
|
||||
width: min(520px, calc(100vw - 32px));
|
||||
}
|
||||
|
||||
.medal-modal { position: relative; padding: 6px 4px 12px; }
|
||||
.medal-modal__empty {
|
||||
padding: 24px 0;
|
||||
text-align: center;
|
||||
color: var(--muted-2-color, var(--color-ink-4));
|
||||
}
|
||||
|
||||
.medal-modal__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
padding-right: 28px;
|
||||
}
|
||||
.medal-modal__avatar {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
box-shadow: 0 0 0 2px var(--focus-color-opacity1);
|
||||
}
|
||||
.medal-modal__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
min-width: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.medal-modal__title .medal-icon {
|
||||
width: auto;
|
||||
height: 1.6em;
|
||||
margin-left: 4px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.medal-modal__scroll {
|
||||
max-height: 50vh;
|
||||
max-height: 50dvh;
|
||||
overflow-y: auto;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
/* 底部操作区（legacy .modal-buts.but-average 语义） */
|
||||
.medal-modal__buts {
|
||||
display: flex;
|
||||
margin: 12px -4px -12px;
|
||||
border-top: 1px solid var(--main-border-color, var(--color-line));
|
||||
}
|
||||
.medal-modal__buts > .but {
|
||||
flex: 1;
|
||||
padding: 0.7em;
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
.medal-modal__buts > .but + .but { border-left: 1px solid var(--main-border-color, var(--color-line)); }
|
||||
.medal-modal__buts > .but:hover { background: var(--focus-color-opacity05); opacity: 1; }
|
||||
|
||||
/* 单卡弹窗 */
|
||||
.medal-modal--single { padding: 10px 8px 14px; text-align: center; }
|
||||
.medal-modal__actions { margin-top: 4px; }
|
||||
.medal-modal__actions .but.btn-block,
|
||||
.medal-modal__actions .badg.btn-block { display: block; width: 100%; }
|
||||
.medal-modal__back {
|
||||
display: inline-block;
|
||||
margin-top: 12px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.medal-modal__back:hover { color: var(--focus-color); }
|
||||
|
||||
/* ---------- 细滚动条（legacy .mini-scrollbar） ---------- */
|
||||
.mini-scrollbar { scrollbar-width: thin; scrollbar-color: var(--muted-border-color, rgba(136, 136, 136, 0.3)) transparent; }
|
||||
.mini-scrollbar::-webkit-scrollbar { width: 5px; height: 5px; }
|
||||
.mini-scrollbar::-webkit-scrollbar-thumb { background: var(--muted-border-color, rgba(136, 136, 136, 0.3)); border-radius: 10px; }
|
||||
.mini-scrollbar::-webkit-scrollbar-track { background: transparent; }
|
||||
|
||||
/* ---------- 响应式（legacy: 桌面 5 列 / 移动 4 列） ---------- */
|
||||
@media (max-width: 768px) {
|
||||
.medal-list-box { grid-template-columns: repeat(4, 1fr); }
|
||||
.medal-list-box--grant { grid-template-columns: 1fr; }
|
||||
.medal-card .medal-icon { height: 55px; }
|
||||
.medal-card .medal-icon--fa { width: 44px; height: 55px; font-size: 26px; }
|
||||
.medal-single-card .medal-icon { height: 96px; }
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.medal-list-box { grid-template-columns: repeat(3, 1fr); }
|
||||
@media (max-width: 640px) {
|
||||
.aksrt-badge-modal.aksrt-modal-runtime--bottom.aksrt-modal-runtime--parent { perspective: 1000px; }
|
||||
.aksrt-modal-runtime.aksrt-badge-modal.aksrt-modal-runtime--bottom.aksrt-modal-runtime--parent.is-open .aksrt-modal-runtime__dialog {
|
||||
transform: rotateX(11deg) scale(.95);
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.aksrt-modal-runtime.aksrt-badge-modal--single .aksrt-modal-runtime__dialog { width: 100%; }
|
||||
.aksrt-modal-runtime--bottom.aksrt-badge-modal--overview .aksrt-modal-runtime__dialog {
|
||||
max-width: 100%;
|
||||
margin-bottom: -1px;
|
||||
border-radius: 16px 16px 0 0;
|
||||
padding-bottom: env(safe-area-inset-bottom, 0px);
|
||||
}
|
||||
}
|
||||
@@ -70,6 +70,16 @@ body.aksrt-modal-runtime-open {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.aksrt-modal-runtime.is-open.aksrt-modal-runtime--parent {
|
||||
pointer-events: none;
|
||||
}
|
||||
.aksrt-modal-runtime.is-open.aksrt-modal-runtime--parent .aksrt-modal-runtime__dialog {
|
||||
transform: scale(.98);
|
||||
}
|
||||
.aksrt-modal-runtime--child .aksrt-modal-runtime__overlay {
|
||||
background: rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
.aksrt-modal-runtime__overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
Reference in new issue
Block a user