/* ============ kkxy_appcenter 公共样式（主题自适应） ============ */ /* 颜色全部走 Bootstrap CSS 变量，随站点 明暗模式 与 品牌色自动切换，无需按主题写死。 变量来源：view/css/theme.css（--bs-body-bg / --bs-body-color / --bs-border-color / --bs-tertiary-bg / --bs-primary / --bs-primary-rgb / --x-page-bg 等）。 */ /* 筛选栏增强 */ .kk-ac-filterbar { background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: .625rem; box-shadow: 0 1px 3px rgba(0,0,0,.04); } .kk-ac-filter-row { gap: .5rem; } .kk-ac-filter-label { color: var(--bs-secondary-color); font-size: .8rem; min-width: 56px; flex-shrink: 0; font-weight: 500; } .kk-ac-filter-values { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; } .kk-ac-chip { display: inline-block; padding: .25rem .75rem; background: var(--bs-body-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color); border-radius: .375rem; text-decoration: none; font-size: .8rem; transition: all .15s; cursor: pointer; user-select: none; } .kk-ac-chip:hover { background: var(--bs-tertiary-bg); border-color: var(--bs-primary); color: var(--bs-primary); } .kk-ac-chip.active { background: var(--bs-primary); color: #fff; border-color: var(--bs-primary); } /* 应用列表卡片 */ .kk-ac-card.h-80 { height: 80% !important; } .kk-ac-card { color: var(--bs-body-color); transition: all .2s; } .kk-ac-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.1); border-color: var(--bs-primary); color: var(--bs-body-color); } .kk-ac-card-icon { width: 56px; height: 56px; border-radius: .5rem; object-fit: cover; flex-shrink: 0; background: var(--bs-tertiary-bg); } .kk-ac-icon-default { display: flex; align-items: center; justify-content: center; color: var(--bs-secondary-color); font-size: 1.35rem; } .kk-ac-card-title { font-size: .95rem; font-weight: 500; line-height: 1.3; margin-bottom: .2rem; color: var(--bs-primary); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .kk-ac-card-tags { margin-top: .25rem; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem; } /* 价格标签推到右侧 */ .kk-ac-card-tags .kk-ac-tag-free, .kk-ac-card-tags .kk-ac-tag-paid { margin-left: auto; } /* 功能标签紧随价格之后 */ .kk-ac-card-tags .kk-ac-tag-cat { margin-left: .2rem; } .kk-ac-card-meta { color: var(--bs-secondary-color); line-height: 1.4; font-size: .72rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; overflow-wrap: break-word; } /* 标签样式 */ .kk-ac-tag { display: inline-block; padding: .1rem .4rem; margin-right: .2rem; font-size: .7rem; border-radius: .25rem; background: var(--bs-tertiary-bg); color: var(--bs-body-color); } /* ============ 列表式布局（每行一个应用）============ */ .kk-ac-list { display: flex; flex-direction: column; gap: .5rem; } .kk-ac-row { color: var(--bs-body-color); transition: all .15s; } .kk-ac-row:hover { border-color: var(--bs-primary); box-shadow: 0 2px 10px rgba(0,0,0,.06); color: var(--bs-body-color); } .kk-ac-row-icon { width: 48px; height: 48px; border-radius: .4rem; object-fit: cover; flex-shrink: 0; background: var(--bs-tertiary-bg); } .kk-ac-row-icon-default { display: flex; align-items: center; justify-content: center; color: var(--bs-secondary-color); font-size: 1.2rem; } .kk-ac-row-main { min-width: 0; } .kk-ac-row-title { font-size: .9rem; font-weight: 600; color: var(--bs-body-color); margin-right: .25rem; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kk-ac-row-brief { color: var(--bs-secondary-color); font-size: .76rem; line-height: 1.35; margin-top: .15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kk-ac-row-stats { flex-shrink: 0; margin-left: .75rem; gap: .75rem; } .kk-ac-row-stat { display: inline-flex; align-items: center; font-size: .72rem; } .kk-ac-row-date { font-size: .72rem; color: var(--bs-secondary-color); } /* 卡片底部统计区 */ .kk-ac-card-stats { border-top: 1px dashed var(--bs-border-color); } /* 语义标签：浅色模式用柔和实底； 深色模式在 [data-bs-theme="dark"] 块里用半透明底 + 浅色字（见文末）。 */ /* 标签背景统一跟随主题色：浅色模式用 primary 半透明底 + primary 深色字 */ .kk-ac-tag-type, .kk-ac-tag-cat, .kk-ac-tag-free, .kk-ac-tag-paid { background: rgba(var(--bs-primary-rgb), .12); color: var(--bs-primary); } .kk-ac-author-stats .kk-ac-stat-num { font-size: 1.05rem; font-weight: 600; color: var(--bs-body-color); } /* 卡片底部统计区 */ .kk-ac-card-stats { padding-top: 0; margin-top: 0; border-top: 1px dashed var(--bs-border-color); } .kk-ac-card-meta-row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; } .kk-ac-card-stat { display: inline-flex; align-items: center; font-size: .72rem; } .kk-ac-card-author { display: none; } .kk-ac-dot { color: var(--bs-secondary-color); } /* 详情页应用头部 */ .kk-ac-app-hero { background: var(--bs-body-bg); } .kk-ac-app-icon { width: 100px; height: 100px; border-radius: 1rem; object-fit: cover; flex-shrink: 0; background: var(--bs-tertiary-bg); } .kk-ac-app-title { font-size: 1.5rem; font-weight: 600; color: var(--bs-body-color); margin: 0; } .kk-ac-app-brief { line-height: 1.5; } .kk-ac-app-actions { min-width: 140px; } .kk-ac-buy-btn { line-height: 1.4; text-align: center; } .kk-ac-buy-btn-price { display: block; font-size: 1.05rem; font-weight: 700; } .kk-ac-buy-btn-label { display: block; font-size: .8rem; font-weight: 400; opacity: .85; } /* Tab 内容 */ .kk-ac-intro { line-height: 1.7; color: var(--bs-body-color); word-break: break-word; } .kk-ac-intro h1, .kk-ac-intro h2, .kk-ac-intro h3, .kk-ac-intro h4, .kk-ac-intro h5, .kk-ac-intro h6 { margin-top: 1.2em; margin-bottom: .6em; font-weight: 600; color: var(--bs-body-color); } .kk-ac-intro h2 { font-size: 1.3rem; } .kk-ac-intro h3 { font-size: 1.15rem; } .kk-ac-intro p { margin-bottom: 1em; } .kk-ac-intro code { background: var(--bs-tertiary-bg); color: #d63384; padding: .1em .4em; border-radius: .25rem; font-size: .9em; } .kk-ac-intro pre { background: #212529; color: #f8f9fa; padding: 1em; border-radius: .5rem; overflow-x: auto; margin: 1em 0; } .kk-ac-intro pre code { background: transparent; color: inherit; padding: 0; } .kk-ac-intro img { max-width: 100%; height: auto; border-radius: .25rem; } .kk-ac-intro iframe { max-width: 100%; border: 0; border-radius: .25rem; } .kk-ac-intro video { max-width: 100%; height: auto; border-radius: .25rem; } .kk-ac-intro audio { max-width: 100%; } .kk-ac-intro .iframe-wrapper { max-width: 100%; } .kk-ac-intro .iframe-wrapper iframe { max-width: 100%; border: 0; border-radius: .25rem; } .kk-ac-intro table { width: 100%; border-collapse: collapse; margin: 1em 0; } .kk-ac-intro table th, .kk-ac-intro table td { border: 1px solid var(--bs-border-color); padding: .5em .75em; } .kk-ac-intro blockquote { border-left: 4px solid var(--bs-primary); background: var(--bs-tertiary-bg); padding: .75em 1em; margin: 1em 0; color: var(--bs-secondary-color); } /* 截图 */ .kk-ac-screenshots { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; } .kk-ac-screenshots a { display: block; border-radius: .5rem; overflow: hidden; border: 1px solid var(--bs-border-color); aspect-ratio: 16/9; background: var(--bs-tertiary-bg); } .kk-ac-screenshots img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .kk-ac-screenshots a:hover img { transform: scale(1.05); } /* 版本时间线 */ .kk-ac-timeline { position: relative; padding-left: 24px; } .kk-ac-timeline::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--bs-border-color); } .kk-ac-timeline-item { position: relative; padding-bottom: 1.5rem; } .kk-ac-timeline-dot { position: absolute; left: -24px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--bs-primary); border: 3px solid var(--bs-body-bg); box-shadow: 0 0 0 1px var(--bs-border-color); } .kk-ac-version-tag { background: var(--bs-primary); color: #fff; padding: .15rem .5rem; border-radius: .25rem; font-size: .85rem; font-weight: 600; } .kk-ac-version-log { background: var(--bs-tertiary-bg); padding: .75rem 1rem; border-radius: .25rem; font-size: .9rem; color: var(--bs-body-color); line-height: 1.6; white-space: pre-wrap; } /* TOC 目录 */ .kk-ac-toc { background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: .5rem; border-left: 3px solid var(--bs-primary); } .kk-ac-toc-title { font-size: .9rem; color: var(--bs-body-color); } .kk-ac-toc-list { padding-left: 0; } .kk-ac-toc-item { padding: .2rem 0; } .kk-ac-toc-item a { color: var(--bs-secondary-color); transition: color .15s; } .kk-ac-toc-item a:hover { color: var(--bs-primary); } /* 侧栏 */ .kk-ac-side-title { font-size: 1rem; font-weight: 600; margin: 0 0 1rem 0; padding-bottom: .5rem; border-bottom: 1px solid var(--bs-border-color); } .kk-ac-info-table td { padding: .35rem .5rem; font-size: .875rem; border: 0; } .kk-ac-info-table tr:not(:last-child) td { border-bottom: 1px dashed var(--bs-border-color); } /* 评论列表 */ .kk-ac-comment-list { font-size: .875rem; } .kk-ac-comment-item { padding: .5rem 0; border-bottom: 1px solid var(--bs-border-color); } .kk-ac-comment-item:last-child { border-bottom: 0; } .kk-ac-comment-meta { font-size: .8rem; } .kk-ac-comment-meta span:first-child { font-size: .85rem; } .kk-ac-comment-body { font-size: .85rem; line-height: 1.5; color: var(--bs-body-color); word-break: break-word; } /* 登录提示 */ .kk-ac-login-tip { background: var(--bs-tertiary-bg); border-radius: .5rem; padding: 1rem; } /* ============ 发布表单 - 应用图标上传区（新设计） ============ */ .kk-ac-icon-layout { display: flex; gap: 1.5rem; align-items: flex-start; } /* 拖拽/点击上传 + 预览一体 */ .kk-ac-icon-dropzone { position: relative; width: 120px; height: 120px; border-radius: 1rem; border: 2px dashed var(--bs-border-color); background: var(--bs-tertiary-bg); cursor: pointer; overflow: hidden; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--bs-secondary-color); transition: border-color .2s, background .2s, color .2s; text-align: center; } .kk-ac-icon-dropzone:hover, .kk-ac-icon-dropzone.dragover { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .06); color: var(--bs-primary); } .kk-ac-icon-dropzone:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; } .kk-ac-icon-dropzone.has-icon { border-style: solid; border-color: var(--bs-primary); } .kk-ac-icon-dropzone.has-icon .kk-ac-icon-placeholder, .kk-ac-icon-dropzone.has-icon .kk-ac-icon-drop-text { display: none; } .kk-ac-icon-dropzone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .kk-ac-icon-placeholder { font-size: 2rem; margin-bottom: .25rem; } .kk-ac-icon-drop-text { font-size: .72rem; padding: 0 .5rem; line-height: 1.3; } .kk-ac-icon-dropzone.uploading::after { content: ''; position: absolute; inset: 0; background: rgba(var(--bs-body-color-rgb, 0), .4); } .kk-ac-icon-dropzone .kk-ac-icon-spinner { position: absolute; z-index: 2; color: var(--bs-primary); font-size: 1.5rem; } .kk-ac-icon-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; z-index: 3; /* 确保始终在最上层，可重复点击上传 */ } .kk-ac-icon-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1rem; padding-top: .25rem; } .kk-ac-icon-tip { line-height: 1.5; } .kk-ac-icon-url-wrap .input-group-text { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); } /* ============ 发布表单 - 应用截图上传区（新设计） ============ */ .kk-ac-ss-area { display: flex; flex-wrap: wrap; gap: .75rem; } .kk-ac-screenshot-list { display: contents; /* 让截图缩略图直接进入 .kk-ac-ss-area 的 flex 布局 */ } .kk-ac-ss-add { position: relative; /* 关键：约束内部 file-input 的 absolute 定位，避免覆盖 URL 输入框 */ width: 120px; height: 90px; border: 2px dashed var(--bs-border-color); border-radius: .5rem; background: var(--bs-tertiary-bg); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--bs-secondary-color); transition: border-color .2s, background .2s, color .2s; flex-shrink: 0; text-align: center; } .kk-ac-ss-add:hover, .kk-ac-ss-add.dragover { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .06); color: var(--bs-primary); } .kk-ac-ss-add:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; } .kk-ac-ss-add i { font-size: 1.4rem; margin-bottom: .15rem; } .kk-ac-ss-add-text { font-size: .72rem; } .kk-ac-ss-add small { font-size: .65rem; margin-top: .15rem; } .kk-ac-screenshot-item { position: relative; width: 120px; height: 90px; border-radius: .5rem; overflow: hidden; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); flex-shrink: 0; } .kk-ac-screenshot-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; } .kk-ac-screenshot-item:hover img { transform: scale(1.04); } .kk-ac-screenshot-remove { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(220, 53, 69, .9); color: #fff; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .85rem; line-height: 1; opacity: 0; transition: opacity .15s, background .15s; } .kk-ac-screenshot-item:hover .kk-ac-screenshot-remove { opacity: 1; } .kk-ac-screenshot-remove:hover { background: #dc3545; } .kk-ac-screenshot-item.kk-ac-ss-uploading { opacity: .6; display: flex; align-items: center; justify-content: center; } .kk-ac-screenshot-item.kk-ac-ss-uploading img { display: none; } .kk-ac-screenshot-item.kk-ac-ss-broken::after { content: '加载失败'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .7rem; color: var(--bs-danger); background: var(--bs-tertiary-bg); pointer-events: none; } .kk-ac-screenshot-item.kk-ac-ss-broken .kk-ac-screenshot-remove { opacity: 1; } .kk-ac-ss-url-row .input-group-text { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); } .kk-ac-fav-icon { width: 40px; height: 40px; border-radius: .5rem; object-fit: cover; flex-shrink: 0; } /* 响应式 */ @media (max-width: 768px) { .kk-ac-app-hero { flex-direction: column; align-items: flex-start; } .kk-ac-app-actions { flex-direction: row; min-width: 0; margin-top: 1rem; margin-left: 0 !important; } .kk-ac-app-actions .btn { flex: 1; } .kk-ac-app-icon { width: 72px; height: 72px; } .kk-ac-app-title { font-size: 1.25rem; } .kk-ac-filter-label { min-width: 100%; } } /* ============ 深色模式专属覆盖 ============ */ /* 语义标签在深色下改为半透明底 + 浅色字，保证可读性（借用 Bootstrap 暗色语义色）。 */ /* 深色模式下标签背景透明度稍高，字色保持 primary（自动适配） */ [data-bs-theme="dark"] .kk-ac-tag-type, [data-bs-theme="dark"] .kk-ac-tag-cat, [data-bs-theme="dark"] .kk-ac-tag-free, [data-bs-theme="dark"] .kk-ac-tag-paid { background: rgba(var(--bs-primary-rgb), .22); color: var(--bs-primary); } /* ============ Chips 选择器（分类单选 / 标签多选） ============ */ .kk-ac-chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: .25rem 0; } .kk-ac-chip { display: inline-flex; align-items: center; padding: .3rem .75rem; font-size: .85rem; line-height: 1.4; color: var(--bs-body-color); background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: .375rem; cursor: pointer; user-select: none; transition: all .15s; } .kk-ac-chip:hover { border-color: var(--bs-primary); color: var(--bs-primary); } .kk-ac-chip.active { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } [data-bs-theme="dark"] .kk-ac-chip.active { color: #fff; } /* 深色下卡片悬浮阴影需更深才可见 */ [data-bs-theme="dark"] .kk-ac-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.5); } /* ============ 发布页：btn-check hover 修复（字体不变白）============ */ .kk-ac-pub-card .btn-check + .btn-outline-primary:hover, .kk-ac-pub-card .btn-check + .btn-outline-success:hover, .kk-ac-pub-card .btn-check + .btn-outline-warning:hover { color: #000; background: var(--bs-tertiary-bg); } [data-bs-theme="dark"] .kk-ac-pub-card .btn-check + .btn-outline-primary:hover, [data-bs-theme="dark"] .kk-ac-pub-card .btn-check + .btn-outline-success:hover, [data-bs-theme="dark"] .kk-ac-pub-card .btn-check + .btn-outline-warning:hover { color: #fff; } .kk-ac-pub-card .btn-check:checked + .btn-outline-primary, .kk-ac-pub-card .btn-check:checked + .btn-outline-success, .kk-ac-pub-card .btn-check:checked + .btn-outline-warning { color: #fff; } /* ============ 发布页：积分类型选择 ============ */ .kk-ac-price-currency { width: auto; min-width: 100px; } .kk-ac-price-unit { font-weight: 600; min-width: 50px; text-align: center; } /* ============ 发布页：版本历史列表 ============ */ .kk-ac-version-list { display: flex; flex-direction: column; gap: 1rem; } .kk-ac-version-item { padding: .75rem 1rem; background: var(--bs-tertiary-bg); border-radius: .5rem; border: 1px solid var(--bs-border-color); } .kk-ac-version-item-log { font-size: .875rem; line-height: 1.6; color: var(--bs-body-color); white-space: pre-wrap; word-break: break-word; } .kk-ac-version-edit-form textarea { font-size: .875rem; } /* ============ 发布页：标签芯片增强 ============ */ .kk-ac-tags-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .375rem; } .kk-ac-tag-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .5rem .15rem .625rem; font-size: .75rem; border-radius: 1rem; background: rgba(var(--bs-primary-rgb), .12); color: var(--bs-primary); border: 1px solid rgba(var(--bs-primary-rgb), .25); } .kk-ac-tag-chip-remove { background: none; border: 0; color: inherit; cursor: pointer; padding: 0; font-size: .85rem; line-height: 1; opacity: .6; transition: opacity .15s; } .kk-ac-tag-chip-remove:hover { opacity: 1; } /* ============ 发布页：提交成功遮罩 ============ */ .kk-ac-redirect-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 9999; display: flex; align-items: center; justify-content: center; } .kk-ac-redirect-box { background: var(--bs-body-bg); border-radius: 1rem; padding: 2rem 2.5rem; text-align: center; max-width: 400px; box-shadow: 0 8px 32px rgba(0,0,0,.2); } .kk-ac-redirect-icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(var(--bs-success-rgb, 25), .12); color: var(--bs-success); display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 1rem; } .kk-ac-redirect-msg { font-size: 1.1rem; font-weight: 600; color: var(--bs-body-color); margin-bottom: .5rem; } .kk-ac-redirect-count { font-size: .875rem; color: var(--bs-secondary-color); margin-bottom: 1rem; } .kk-ac-redirect-link { font-size: .875rem; } /* 截图上传中状态 */ .kk-ac-screenshot-item.kk-ac-ss-uploading { opacity: .6; display: flex; align-items: center; justify-content: center; } .kk-ac-screenshot-item.kk-ac-ss-uploading img { display: none; } .kk-ac-screenshot-item.kk-ac-ss-broken::after { content: '加载失败'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .7rem; color: var(--bs-danger); background: var(--bs-tertiary-bg); pointer-events: none; } .kk-ac-screenshot-item.kk-ac-ss-broken .kk-ac-screenshot-remove { opacity: 1; } /* 发布表单 input 字体优化 */ .kk-ac-pub-card .form-control, .kk-ac-pub-card .form-select { font-size: .9375rem; } .kk-ac-pub-card .form-control-lg { font-size: 1rem; } /* ============ 发布页：卡片布局 ============ */ .kk-ac-pub-header { display: flex; align-items: center; gap: 1rem; } .kk-ac-pub-icon-wrap { width: 56px; height: 56px; border-radius: 1rem; background: rgba(var(--bs-primary-rgb), .12); color: var(--bs-primary); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; flex-shrink: 0; } .kk-ac-pub-title { font-size: 1.5rem; font-weight: 700; color: var(--bs-body-color); } .kk-ac-pub-sub { font-size: .875rem; } .kk-ac-pub-card { position: relative; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .75rem; /* overflow: hidden 移除：避免裁切内部下拉菜单（如功能标签多选） */ } .kk-ac-pub-card-head { display: flex; align-items: center; padding: .875rem 1.25rem; background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); font-size: 1rem; font-weight: 600; color: var(--bs-body-color); border-top-left-radius: .75rem; border-top-right-radius: .75rem; } .kk-ac-pub-card-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bs-primary); color: #fff; font-size: .85rem; font-weight: 700; margin-right: .625rem; flex-shrink: 0; } .kk-ac-pub-card-body { padding: 1.25rem; } /* 文件上传区 */ .kk-ac-file-upload-zone { position: relative; border: 2px dashed var(--bs-border-color); border-radius: .75rem; padding: 2rem 1rem; text-align: center; transition: all .2s; cursor: pointer; background: var(--bs-tertiary-bg); } .kk-ac-file-upload-zone:hover { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .04); } .kk-ac-file-upload-zone.dragover { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .08); } .kk-ac-file-upload-icon { font-size: 2.5rem; color: var(--bs-secondary-color); display: block; margin-bottom: .5rem; } .kk-ac-file-upload-text { font-size: .875rem; color: var(--bs-secondary-color); } .kk-ac-file-input { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .kk-ac-file-status-ok { color: var(--bs-success); display: flex; align-items: center; gap: .375rem; font-size: .875rem; } .kk-ac-file-status-err { color: var(--bs-danger); display: flex; align-items: center; gap: .375rem; font-size: .875rem; } /* 提交按钮区 */ .kk-ac-pub-submit-wrap { position: sticky; bottom: 0; padding: 1rem 0; z-index: 10; } .kk-ac-pub-submit-wrap .btn { border-radius: .5rem; font-weight: 600; box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), .3); } .kk-ac-pub-submit-btn { min-width: 200px; max-width: 320px; padding: .625rem 2.5rem; font-size: 1rem; } /* ============ 我的应用页：卡片网格 ============ */ .kk-ac-my-title { font-size: 1.5rem; font-weight: 700; color: var(--bs-body-color); } .kk-ac-my-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--bs-secondary-color); font-weight: 500; padding: .5rem 1rem; transition: all .15s; } .kk-ac-my-tabs .nav-link:hover { color: var(--bs-primary); border-bottom-color: rgba(var(--bs-primary-rgb), .3); } .kk-ac-my-tabs .nav-link.active { color: var(--bs-primary); border-bottom-color: var(--bs-primary); background: transparent; } .kk-ac-my-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; } .kk-ac-my-card { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .75rem; padding: 1rem; transition: all .2s; display: flex; flex-direction: column; } .kk-ac-my-card:hover { border-color: var(--bs-primary); box-shadow: 0 4px 12px rgba(0,0,0,.08); } .kk-ac-my-card-icon { width: 48px; height: 48px; border-radius: .5rem; overflow: hidden; flex-shrink: 0; background: var(--bs-tertiary-bg); display: flex; align-items: center; justify-content: center; color: var(--bs-secondary-color); font-size: 1.5rem; } .kk-ac-my-card-icon img { width: 100%; height: 100%; object-fit: cover; } .kk-ac-my-card-title { font-size: 1rem; font-weight: 600; color: var(--bs-body-color); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; transition: color .15s; } .kk-ac-my-card-title:hover { color: var(--bs-primary); } .kk-ac-my-card-brief { font-size: .85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .kk-ac-my-card-stats { display: flex; gap: 1rem; padding: .5rem 0; border-top: 1px dashed var(--bs-border-color); border-bottom: 1px dashed var(--bs-border-color); margin-bottom: .75rem; } .kk-ac-my-stat { font-size: .8rem; color: var(--bs-secondary-color); display: inline-flex; align-items: center; } .kk-ac-my-card-footer { display: flex; gap: .5rem; margin-top: auto; } .kk-ac-my-card-footer .btn { flex: 1; } /* 空状态 */ .kk-ac-my-empty { text-align: center; padding: 4rem 1rem; color: var(--bs-secondary-color); } .kk-ac-my-empty i { font-size: 4rem; color: var(--bs-border-color); margin-bottom: 1rem; display: block; } .kk-ac-my-empty p { font-size: 1.1rem; margin-bottom: 1.5rem; } /* ============ 深色模式：发布页/我的应用 ============ */ [data-bs-theme="dark"] .kk-ac-pub-card { background: var(--bs-body-bg); } [data-bs-theme="dark"] .kk-ac-my-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.5); } [data-bs-theme="dark"] .kk-ac-file-upload-zone:hover { background: rgba(var(--bs-primary-rgb), .08); } /* ============ 响应式 ============ */ @media (max-width: 576px) { .kk-ac-pub-header { flex-direction: column; text-align: center; } .kk-ac-my-grid { grid-template-columns: 1fr; } .kk-ac-icon-layout { flex-direction: column; align-items: center; } .kk-ac-icon-side { width: 100%; } } /* ============ 详情页：Tab 行背景色 ============ */ .kk-ac-detail-tabs-card { overflow: hidden; } .kk-ac-tabs-wrap { background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color); padding: 0; } .kk-ac-tabs-wrap .nav-tabs { border: 0; margin: 0; gap: .25rem; } .kk-ac-tabs-wrap .nav-link { border: 0; border-radius: .375rem .375rem 0 0; color: var(--bs-secondary-color); transition: all .15s; padding: .5rem 1rem; } .kk-ac-tabs-wrap .nav-link:hover { color: var(--bs-primary); background: var(--bs-tertiary-bg); } .kk-ac-tabs-wrap .nav-link.active { background: var(--bs-tertiary-bg); color: var(--bs-primary); font-weight: 600; } .kk-ac-tab-content { background: var(--bs-body-bg); } /* ============ 详情页：TOC 电脑端吸顶 ============ */ @media (min-width: 992px) { .kk-ac-toc-wrap { position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; z-index: 100; } } /* ============ 详情页：图片灯箱 ============ */ .kk-ac-lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, .92); z-index: 10000; display: flex; align-items: center; justify-content: center; cursor: zoom-out; } .kk-ac-lb-img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: .5rem; box-shadow: 0 8px 32px rgba(0, 0, 0, .5); } .kk-ac-lb-close { position: absolute; top: 1rem; right: 1.5rem; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; border: 0; font-size: 1.75rem; line-height: 1; cursor: pointer; transition: background .15s; } .kk-ac-lb-close:hover { background: rgba(255, 255, 255, .3); } .kk-ac-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; border: 0; font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; } .kk-ac-lb-nav:hover { background: rgba(255, 255, 255, .3); } .kk-ac-lb-prev { left: 1.5rem; } .kk-ac-lb-next { right: 1.5rem; } .kk-ac-lb-counter { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); color: #fff; font-size: .9rem; background: rgba(0, 0, 0, .5); padding: .25rem .75rem; border-radius: 1rem; } /* ============ 发布页：版本历史编辑表单增强 ============ */ .kk-ac-ver-edit-version { max-width: 200px; } .kk-ac-version-edit-form .kk-ac-ver-edit-version-wrap { margin-bottom: .5rem; } /* ============ 详情页右侧栏：作者信息 / 应用详情 / 应用统计 ============ */ /* 作者信息统计数字 */ .kk-ac-author-stats .kk-ac-author-stat-num, .kk-ac-stat-grid .kk-ac-stat-num { font-size: 1.05rem; font-weight: 600; color: var(--bs-body-color); line-height: 1.2; margin-bottom: .15rem; } /* 统计栏分隔线 */ .kk-ac-author-stats > div + div, .kk-ac-stat-grid > div + div { border-left: 1px solid var(--bs-border-color); } /* 应用详情列表 */ .kk-ac-info-list { margin: 0; padding: 0; list-style: none; } .kk-ac-info-list li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem 0; font-size: .875rem; } .kk-ac-info-list li + li { border-top: 1px dashed var(--bs-border-color); } .kk-ac-info-list li > span:last-child { color: var(--bs-body-color); font-weight: 500; text-align: right; word-break: break-all; } /* ============ 分页：增加间距，避免拥挤 ============ */ .kk-ac-pagination .pagination { gap: .375rem; } .kk-ac-pagination .page-item .page-link { min-width: 2.5rem; text-align: center; border-radius: .375rem !important; border: 1px solid var(--bs-border-color); padding: .4rem .7rem; transition: all .15s; } .kk-ac-pagination .page-item.disabled .page-link { border-color: transparent; } /* ============ 基础设置紧凑布局 ============ */ /* 路由提示条（横向紧凑） */ .kk-ac-route-bar { display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-left: 3px solid var(--bs-primary); border-radius: .375rem; margin-bottom: .75rem; flex-wrap: wrap; } .kk-ac-route-bar-label { display: flex; align-items: center; gap: .25rem; font-size: .8rem; font-weight: 600; color: var(--bs-secondary-color); flex-shrink: 0; } .kk-ac-route-bar-label i { color: var(--bs-primary); } .kk-ac-route-bar-items { display: flex; align-items: center; gap: .5rem; flex: 1; flex-wrap: wrap; } .kk-ac-route-bar-item { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .375rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .25rem; font-size: .75rem; } .kk-ac-route-bar-name { color: var(--bs-secondary-color); font-size: .7rem; } .kk-ac-route-bar-item code { font-family: monospace; font-size: .75rem; color: var(--bs-body-color); background: transparent; padding: 0; } .kk-ac-route-bar-item .btn { color: var(--bs-secondary-color); font-size: .8rem; line-height: 1; } .kk-ac-route-bar-item .btn:hover { color: var(--bs-primary); } .kk-ac-route-bar-help { display: flex; align-items: center; gap: .25rem; font-size: .7rem; color: var(--bs-secondary-color); flex-shrink: 0; } .kk-ac-route-bar-help i { color: var(--bs-primary); } [data-bs-theme="dark"] .kk-ac-route-bar-item { background: rgba(255,255,255,.03); } /* 设置区域横向并列布局 */ .kk-ac-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 768px) { .kk-ac-settings-grid { grid-template-columns: 1fr; } } .kk-ac-settings-col { padding: .5rem .75rem; border: 1px solid var(--bs-border-color); border-radius: .375rem; background: var(--bs-body-bg); } .kk-ac-settings-col-label { display: flex; align-items: center; gap: .25rem; margin-bottom: .5rem; font-size: .75rem; font-weight: 600; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .03em; } .kk-ac-settings-col-label i { color: var(--bs-primary); font-size: .85rem; } .kk-ac-settings-col-body { } [data-bs-theme="dark"] .kk-ac-settings-col { background: rgba(255,255,255,.02); } /* 紧凑开关列表 */ .kk-ac-switch-compact { display: flex; flex-direction: column; gap: .375rem; } .kk-ac-switch-compact-item { display: flex; align-items: center; justify-content: space-between; padding: .25rem 0; } .kk-ac-switch-compact-label { font-size: .8rem; color: var(--bs-body-color); line-height: 1.3; } /* 审核通知提示条（紧凑） */ .kk-ac-audit-notify-hint { display: flex; align-items: center; gap: .375rem; padding: .375rem .625rem; margin-top: .5rem; background: rgba(13, 110, 253, 0.08); border: 1px solid rgba(13, 110, 253, 0.2); border-left: 3px solid var(--bs-primary); border-radius: .25rem; font-size: .75rem; color: var(--bs-emphasis-color); line-height: 1.4; transition: opacity .2s ease, max-height .2s ease; overflow: hidden; max-height: 100px; } .kk-ac-audit-notify-hint i { color: var(--bs-primary); flex-shrink: 0; font-size: .85rem; } .kk-ac-audit-notify-compact { margin-top: .5rem; } .kk-ac-audit-notify-hidden { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; border-width: 0; } [data-bs-theme="dark"] .kk-ac-audit-notify-hint { background: rgba(13, 110, 253, 0.12); } /* ============ 数据与卸载（紧凑合并布局）============ */ .kk-ac-data-compact { border: 1px solid var(--bs-border-color); border-radius: .375rem; background: var(--bs-body-bg); overflow: hidden; } .kk-ac-data-compact-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem .75rem; background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); flex-wrap: wrap; } .kk-ac-data-compact-title { display: flex; align-items: center; gap: .375rem; font-size: .8rem; font-weight: 600; color: var(--bs-body-color); } .kk-ac-data-compact-title > i { color: var(--bs-primary); font-size: .9rem; } .kk-ac-data-compact-title .badge { font-size: .7rem; font-weight: 500; } /* 表名 chips 横向排列 */ .kk-ac-data-compact-tables { display: flex; flex-wrap: wrap; gap: .375rem; padding: .5rem .75rem; border-bottom: 1px solid var(--bs-border-color); } .kk-ac-data-tbl-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .375rem; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: .25rem; font-size: .7rem; cursor: help; transition: background .15s ease; } .kk-ac-data-tbl-chip:hover { background: var(--bs-body-bg); } .kk-ac-data-tbl-chip.is-missing { opacity: .55; } .kk-ac-data-tbl-remark { color: var(--bs-secondary-color); font-size: .7rem; } .kk-ac-data-tbl-code { font-family: monospace; font-size: .7rem; color: var(--bs-body-color); background: transparent; padding: 0; } .kk-ac-data-tbl-chip .badge { font-size: .65rem; padding: .2em .4em; } [data-bs-theme="dark"] .kk-ac-data-tbl-chip { background: rgba(255,255,255,.03); } /* 状态条：状态 + 开关 */ .kk-ac-data-compact-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .75rem; background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color); transition: background .2s ease; flex-wrap: wrap; } .kk-ac-data-compact-foot.is-active { background: rgba(220, 53, 69, 0.05); } .kk-ac-data-compact-state { display: inline-flex; align-items: center; gap: .375rem; font-size: .8rem; font-weight: 600; color: var(--bs-body-color); } .kk-ac-data-compact-foot.is-inactive .kk-ac-data-compact-state > i { color: var(--bs-success, #198754); } .kk-ac-data-compact-foot.is-active .kk-ac-data-compact-state > i { color: var(--bs-danger, #dc3545); } .kk-ac-data-compact-toggle { display: inline-flex; align-items: center; gap: .5rem; } .kk-ac-data-compact-toggle-label { font-size: .8rem; color: var(--bs-secondary-color); cursor: pointer; margin: 0; user-select: none; } .kk-ac-data-compact-toggle .form-check-input:checked { background-color: var(--bs-danger, #dc3545); border-color: var(--bs-danger, #dc3545); } /* 底部提示行 */ .kk-ac-data-compact-tip { display: flex; align-items: center; gap: .375rem; padding: .4rem .75rem; background: var(--bs-tertiary-bg); font-size: .72rem; color: var(--bs-secondary-color); line-height: 1.5; } .kk-ac-data-compact-tip > i { color: var(--bs-warning, #ffc107); flex-shrink: 0; font-size: .85rem; } [data-bs-theme="dark"] .kk-ac-data-compact-foot { background: rgba(255,255,255,.02); } [data-bs-theme="dark"] .kk-ac-data-compact-foot.is-active { background: rgba(220, 53, 69, 0.08); } /* ============ 统一确认/提示弹窗（kkConfirm / kkAlert）============ */ .kk-ac-confirm-content { border-radius: .75rem; border: 1px solid var(--bs-border-color); box-shadow: 0 8px 32px rgba(0,0,0,.12); overflow: hidden; } .kk-ac-confirm-content .modal-header { padding: 1rem 1.25rem .5rem; } .kk-ac-confirm-content .modal-title { font-size: 1.05rem; font-weight: 600; color: var(--bs-body-color); } .kk-ac-confirm-content .modal-body { padding: .25rem 1.25rem 1rem; } .kk-ac-confirm-content .modal-body p { font-size: .9rem; } .kk-ac-confirm-content .modal-footer { padding: .5rem 1.25rem 1.25rem; gap: .5rem; } .kk-ac-confirm-content .modal-footer .btn { min-width: 5rem; border-radius: .5rem; font-size: .875rem; font-weight: 500; padding: .45rem 1rem; transition: all .15s; } .kk-ac-confirm-content .modal-footer .btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.1); } .kk-ac-confirm-content .btn-close { font-size: .8rem; opacity: .5; transition: opacity .15s; } .kk-ac-confirm-content .btn-close:hover { opacity: .8; }