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
@@ -5746,6 +5746,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;
|
||||
|
||||
Vendored
+1
-1
@@ -1 +1 @@
|
||||
:root{--color-primary: #f04494;--color-primary-hover: #e0307e;--color-primary-active: #c9206d;--color-primary-soft: rgba(240, 68, 148, .1);--color-primary-softer: rgba(240, 68, 148, .05);--color-on-primary: #FFFFFF;--color-ink: #333333;--color-ink-2: #4e5358;--color-ink-3: #777777;--color-ink-4: #999999;--surface-page: #f5f6f7;--surface-1: #FFFFFF;--surface-2: #eeeeee;--surface-3: #e9ecef;--surface-4: #f8f8f8;--color-line: rgba(50, 50, 50, .06);--color-line-soft: rgba(0, 0, 0, .03);--color-line-stronger: rgba(50, 50, 50, .12);--color-success: #10B981;--color-warning: #F59E0B;--color-error: #EF4444;--color-info: #3B82F6;--color-accent: #18a058;--color-accent-soft: rgba(24, 160, 88, .12);--color-accent-shadow: rgba(24, 160, 88, .28);--font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;--font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--text-xs: .75rem;--text-sm: .875rem;--text-base: .875rem;--text-md: 1.125rem;--text-lg: 1.25rem;--text-xl: 1.5rem;--text-2xl: 1.875rem;--text-3xl: 2.25rem;--text-4xl: 3rem;--text-5xl: 3.75rem;--leading-tight: 1.2;--leading-snug: 1.4;--leading-normal: 1.6;--leading-relaxed: 1.6;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-7: 32px;--space-8: 40px;--space-9: 48px;--space-10: 64px;--space-11: 80px;--space-12: 96px;--radius-xs: 3px;--radius-sm: 4px;--radius: 8px;--radius-lg: 8px;--radius-xl: 12px;--radius-2xl: 16px;--radius-pill: 100px;--radius-avatar: 50%;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .03);--shadow-sm: 0 0 10px rgba(116, 116, 116, .08);--shadow: 0 0 10px rgba(116, 116, 116, .12);--shadow-lg: 0 12px 32px rgba(18, 18, 18, .1);--shadow-drawer: 0 18px 60px rgba(0, 0, 0, .2);--nav-height: 60px;--container: 1200px;--container-wide: 1440px;--container-read: 760px;--container-page: 880px;--sidebar-width: 311px;--content-gap: 24px;--section-gap: 24px;--sidebar-bp: 992px;--ease: cubic-bezier(.4, 0, .2, 1);--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--dur-fast: .15s;--dur: .25s;--dur-slow: .4s;--focus-ring: 0 0 2px 3px rgba(253, 83, 161, .4);--z-dropdown: 100;--z-sticky: 200;--z-fixed: 300;--z-overlay: 400;--z-modal: 500;--z-popover: 600;--z-toast: 700;--z-tooltip: 800;--radius-btn: 4px;--btn-sm-h: 28px;--btn-md-h: 34px;--btn-lg-h: 44px;--card-padding: 15px;--card-padding-sm: 10px;--card-gap: 16px;--card-gap-lg: 20px;--color-primary-light: var(--color-primary-soft);--color-surface: var(--surface-1);--color-line-strong: var(--color-line);--color-bg-hover: var(--surface-2);--color-border-light: var(--color-line-soft);--color-fill: var(--surface-2);--color-warning-bg: #fffbe6;--color-warning-text: #ad6800;--text-secondary: var(--color-ink-3);--text-tertiary: var(--color-ink-4);--surface-active: var(--surface-2);--surface-card: var(--surface-1);--surface-hover: var(--surface-2);--surface-secondary: var(--surface-2);--radius-code: var(--radius);--radius-full: 100px;--shadow-xl: 0 0 10px rgba(116, 116, 116, .12);--space-16: 64px;--z-floating: 900;--transition-fast: .15s ease;--transition-base: .25s ease;--header-bg: var(--blur-bg);--header-color: var(--color-ink-2);--footer-bg: var(--surface-1);--footer-color: var(--color-ink-4);--blur-bg: rgba(255, 255, 255, .8);--float-btn-bg: rgba(200, 200, 200, .4);--font-heading: var(--font-ui);--radius-card: var(--radius);--radius-md: var(--radius);--color-primary-50: var(--color-primary-soft);--color-primary-dark: var(--color-primary-active);--shadow-md: var(--shadow);--mini-radius: calc(var(--radius) / 1.4);--aksrt-avatar-size-xs: 24px;--aksrt-avatar-size-sm: 32px;--aksrt-avatar-size: 40px;--aksrt-avatar-size-lg: 56px;--aksrt-avatar-size-xl: 80px;--aksrt-card-thumb-scale: 56.25%;--aksrt-rose: #f43f5e;--aksrt-rose-soft: rgba(244, 63, 94, .12);--aksrt-blue: #3b82f6;--aksrt-blue-soft: rgba(59, 130, 246, .12);--aksrt-green: #10b981;--aksrt-green-soft: rgba(16, 185, 129, .12);--aksrt-orange: #f97316;--aksrt-orange-soft:rgba(249, 115, 22, .12);--aksrt-purple: #8b5cf6;--aksrt-purple-soft:rgba(139, 92, 246, .12);--aksrt-cyan: #06b6d4;--aksrt-cyan-soft: rgba(6, 182, 212, .12);--aksrt-yellow: #eab308;--aksrt-yellow-soft:rgba(234, 179, 8, .12);--aksrt-red: #ef4444;--aksrt-red-soft: rgba(239, 68, 68, .12);--aksrt-teal: #14b8a6;--aksrt-teal-soft: rgba(20, 184, 166, .12);--aksrt-indigo: #6366f1;--aksrt-indigo-soft:rgba(99, 102, 241, .12);--aksrt-pink: #ec4899;--aksrt-pink-soft: rgba(236, 72, 153, .12);--aksrt-vip-gold-1: #f6d365;--aksrt-vip-gold-2: #fda085;--aksrt-grad-sunset-1: #f093fb;--aksrt-grad-sunset-2: #f5576c;--aksrt-graLine truncated
|
||||
:root{--color-primary: #f04494;--color-primary-hover: #e0307e;--color-primary-active: #c9206d;--color-primary-soft: rgba(240, 68, 148, .1);--color-primary-softer: rgba(240, 68, 148, .05);--color-on-primary: #FFFFFF;--color-ink: #333333;--color-ink-2: #4e5358;--color-ink-3: #777777;--color-ink-4: #999999;--surface-page: #f5f6f7;--surface-1: #FFFFFF;--surface-2: #eeeeee;--surface-3: #e9ecef;--surface-4: #f8f8f8;--color-line: rgba(50, 50, 50, .06);--color-line-soft: rgba(0, 0, 0, .03);--color-line-stronger: rgba(50, 50, 50, .12);--color-success: #10B981;--color-warning: #F59E0B;--color-error: #EF4444;--color-info: #3B82F6;--color-accent: #18a058;--color-accent-soft: rgba(24, 160, 88, .12);--color-accent-shadow: rgba(24, 160, 88, .28);--font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;--font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--text-xs: .75rem;--text-sm: .875rem;--text-base: .875rem;--text-md: 1.125rem;--text-lg: 1.25rem;--text-xl: 1.5rem;--text-2xl: 1.875rem;--text-3xl: 2.25rem;--text-4xl: 3rem;--text-5xl: 3.75rem;--leading-tight: 1.2;--leading-snug: 1.4;--leading-normal: 1.6;--leading-relaxed: 1.6;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-7: 32px;--space-8: 40px;--space-9: 48px;--space-10: 64px;--space-11: 80px;--space-12: 96px;--radius-xs: 3px;--radius-sm: 4px;--radius: 8px;--radius-lg: 8px;--radius-xl: 12px;--radius-2xl: 16px;--radius-pill: 100px;--radius-avatar: 50%;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .03);--shadow-sm: 0 0 10px rgba(116, 116, 116, .08);--shadow: 0 0 10px rgba(116, 116, 116, .12);--shadow-lg: 0 12px 32px rgba(18, 18, 18, .1);--shadow-drawer: 0 18px 60px rgba(0, 0, 0, .2);--nav-height: 60px;--container: 1200px;--container-wide: 1440px;--container-read: 760px;--container-page: 880px;--sidebar-width: 311px;--content-gap: 24px;--section-gap: 24px;--sidebar-bp: 992px;--ease: cubic-bezier(.4, 0, .2, 1);--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--dur-fast: .15s;--dur: .25s;--dur-slow: .4s;--focus-ring: 0 0 2px 3px rgba(253, 83, 161, .4);--z-dropdown: 100;--z-sticky: 200;--z-fixed: 300;--z-overlay: 400;--z-modal: 500;--z-popover: 600;--z-toast: 700;--z-tooltip: 800;--radius-btn: 4px;--btn-sm-h: 28px;--btn-md-h: 34px;--btn-lg-h: 44px;--card-padding: 15px;--card-padding-sm: 10px;--card-gap: 16px;--card-gap-lg: 20px;--color-primary-light: var(--color-primary-soft);--color-surface: var(--surface-1);--color-line-strong: var(--color-line);--color-bg-hover: var(--surface-2);--color-border-light: var(--color-line-soft);--color-fill: var(--surface-2);--color-warning-bg: #fffbe6;--color-warning-text: #ad6800;--text-secondary: var(--color-ink-3);--text-tertiary: var(--color-ink-4);--surface-active: var(--surface-2);--surface-card: var(--surface-1);--surface-hover: var(--surface-2);--surface-secondary: var(--surface-2);--radius-code: var(--radius);--radius-full: 100px;--shadow-xl: 0 0 10px rgba(116, 116, 116, .12);--space-16: 64px;--z-floating: 900;--transition-fast: .15s ease;--transition-base: .25s ease;--header-bg: var(--blur-bg);--header-color: var(--color-ink-2);--footer-bg: var(--surface-1);--footer-color: var(--color-ink-4);--blur-bg: rgba(255, 255, 255, .8);--float-btn-bg: rgba(200, 200, 200, .4);--font-heading: var(--font-ui);--radius-card: var(--radius);--radius-md: var(--radius);--color-primary-50: var(--color-primary-soft);--color-primary-dark: var(--color-primary-active);--shadow-md: var(--shadow);--mini-radius: calc(var(--radius) / 1.4);--aksrt-avatar-size-xs: 24px;--aksrt-avatar-size-sm: 32px;--aksrt-avatar-size: 40px;--aksrt-avatar-size-lg: 56px;--aksrt-avatar-size-xl: 80px;--aksrt-card-thumb-scale: 56.25%;--aksrt-rose: #f43f5e;--aksrt-rose-soft: rgba(244, 63, 94, .12);--aksrt-blue: #3b82f6;--aksrt-blue-soft: rgba(59, 130, 246, .12);--aksrt-green: #10b981;--aksrt-green-soft: rgba(16, 185, 129, .12);--aksrt-orange: #f97316;--aksrt-orange-soft:rgba(249, 115, 22, .12);--aksrt-purple: #8b5cf6;--aksrt-purple-soft:rgba(139, 92, 246, .12);--aksrt-cyan: #06b6d4;--aksrt-cyan-soft: rgba(6, 182, 212, .12);--aksrt-yellow: #eab308;--aksrt-yellow-soft:rgba(234, 179, 8, .12);--aksrt-red: #ef4444;--aksrt-red-soft: rgba(239, 68, 68, .12);--aksrt-teal: #14b8a6;--aksrt-teal-soft: rgba(20, 184, 166, .12);--aksrt-indigo: #6366f1;--aksrt-indigo-soft:rgba(99, 102, 241, .12);--aksrt-pink: #ec4899;--aksrt-pink-soft: rgba(236, 72, 153, .12);--aksrt-vip-gold-1: #f6d365;--aksrt-vip-gold-2: #fda085;--aksrt-grad-sunset-1: #f093fb;--aksrt-grad-sunset-2: #f5576c;--aksrt-graLine truncated
|
||||
+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;
|
||||
|
||||
@@ -1058,8 +1058,6 @@ body.uc-modal-open {
|
||||
}
|
||||
.focus-color { color: var(--focus-color, #f59e0b); }
|
||||
|
||||
/* 用户中心「我的徽章」弹窗样式已迁至 assets/css/frontend/medal.css（legacy medal 风格）。 */
|
||||
|
||||
.uc-points-tasks__row.is-done { opacity: .72; }
|
||||
.uc-points-tasks__progress-bar {
|
||||
height: 6px;
|
||||
|
||||
Reference in new issue
Block a user