kate522andClaude Opus 5
0007e78bfe
While uploading, the confirm button turned into a thin 3px bar below the label instead of the reference's striped overlay that fills the button. Two causes: - the markup used <span class="progress">; Bootstrap sizes the bar with a block-level .progress, so the swap produced a flattened line - shell.css carried a bespoke override pinning .progress to `position: static; height: 3px`, discarding the absolute full-size overlay that main.css already provides Changes: - emit the reference skeleton: <div class="progress progress-striped active"> > <div class="progress-bar progress-bar-success">, so the striped bar spans the button and the gradient shows through the translucent layer - give the upload button `position: relative` so the overlay is contained by the button rather than the dropdown panel; delete the static-line override - restore the reference's "正在处理请稍等..." toast and switch the label to "处理中 ..." at 100%, both keyed to the shared `miniupload_ajax` toast id so the completion message replaces the loading one - notify() now forwards the toast id instead of dropping it Tests: comment-image-upload contract gains two cases pinning the div-based striped overlay and the deletion of the 3px override; suite 835/836 with the pre-existing frontend-lifecycle failure. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
70 lines
1.9 KiB
CSS
70 lines
1.9 KiB
CSS
/* ============================================================
|
||
* Jio Comments — 补充层
|
||
*
|
||
* 评论区布局样式已硬切换为自有版权（见 layout.css / mobile-item.css），
|
||
* vendor main.min.css 不再提供评论区规则。
|
||
* 本文件放 Jio 特有标记与评论图片上传的补充规则。
|
||
* 共享基础样式仍由 bundle 中更早加载的 bootstrap 3 与
|
||
* core/tokens.css 提供。
|
||
* ============================================================ */
|
||
|
||
#comments .comment-image-tabs .comment-image-upload {
|
||
margin: 0;
|
||
}
|
||
|
||
#comments .comment-image-upload-label {
|
||
display: block;
|
||
width: 100%;
|
||
}
|
||
|
||
#comments .comment-image-upload .preview {
|
||
width: 100%;
|
||
height: 96px;
|
||
min-height: 96px;
|
||
margin-bottom: 6px;
|
||
overflow: hidden;
|
||
border: 1px dashed var(--muted-border-color);
|
||
border-radius: var(--main-radius);
|
||
background: var(--main-shadow);
|
||
}
|
||
|
||
#comments .comment-image-upload .preview img {
|
||
display: block;
|
||
width: 100%;
|
||
height: 96px;
|
||
object-fit: cover;
|
||
}
|
||
|
||
#comments .comment-image-upload .input-expand-upload {
|
||
min-width: 88px;
|
||
}
|
||
|
||
/* 上传中：按钮内容换成「加载点 + 文案 + 铺满按钮的条纹进度层」。
|
||
按钮作为定位祖先，.progress 沿用 main.css 的绝对铺满（inset:0 / 100%）
|
||
与负 z-index，progress-bar 走 Bootstrap 的 progress-bar-success 条纹；
|
||
负层绘制在按钮背景之上、正文之下，因此文案与进度条同时可见。 */
|
||
#comments .comment-image-upload .input-expand-upload {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
#comments .comment-header .jio-identity-chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 3px;
|
||
vertical-align: middle;
|
||
max-width: 9em;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
font-size: 11px;
|
||
}
|
||
|
||
#comments .comment-header .jio-identity-medal {
|
||
display: inline-block;
|
||
width: auto;
|
||
height: 1.1em;
|
||
max-width: 6em;
|
||
object-fit: contain;
|
||
vertical-align: -0.15em;
|
||
}
|