💄 style: hide announcement modal scrollbar
Improve UX by hiding the vertical scrollbar inside the announcement (NoticeModal)
while keeping the content scrollable.
Changes
• NoticeModal.js
- Introduce `notice-content-scroll` class to the content wrapper.
- Remove inline custom scrollbar styling for cleaner code.
• index.css
- Add `.notice-content-scroll` to the global hidden-scrollbar rules, ensuring
scrollbars are hidden across browsers.
Result
Users can still scroll through long announcements, but no scrollbar is shown,
giving the modal a cleaner and more consistent appearance.
This commit is contained in:
@@ -64,11 +64,7 @@ const NoticeModal = ({ visible, onClose, isMobile }) => {
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
dangerouslySetInnerHTML={{ __html: noticeContent }}
|
dangerouslySetInnerHTML={{ __html: noticeContent }}
|
||||||
className="max-h-[60vh] overflow-y-auto pr-2"
|
className="notice-content-scroll max-h-[60vh] overflow-y-auto pr-2"
|
||||||
style={{
|
|
||||||
scrollbarWidth: 'thin',
|
|
||||||
scrollbarColor: 'var(--semi-color-tertiary) transparent'
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -375,23 +375,25 @@ code {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* 隐藏卡片内容区域的滚动条 */
|
/* 隐藏卡片内容区域的滚动条 */
|
||||||
.card-content-scroll::-webkit-scrollbar,
|
|
||||||
.model-settings-scroll::-webkit-scrollbar,
|
|
||||||
.thinking-content-scroll::-webkit-scrollbar,
|
|
||||||
.custom-request-textarea .semi-input::-webkit-scrollbar,
|
|
||||||
.custom-request-textarea textarea::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-content-scroll,
|
.card-content-scroll,
|
||||||
.model-settings-scroll,
|
.model-settings-scroll,
|
||||||
.thinking-content-scroll,
|
.thinking-content-scroll,
|
||||||
.custom-request-textarea .semi-input,
|
.custom-request-textarea .semi-input,
|
||||||
.custom-request-textarea textarea {
|
.custom-request-textarea textarea,
|
||||||
|
.notice-content-scroll {
|
||||||
-ms-overflow-style: none;
|
-ms-overflow-style: none;
|
||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card-content-scroll::-webkit-scrollbar,
|
||||||
|
.model-settings-scroll::-webkit-scrollbar,
|
||||||
|
.thinking-content-scroll::-webkit-scrollbar,
|
||||||
|
.custom-request-textarea .semi-input::-webkit-scrollbar,
|
||||||
|
.custom-request-textarea textarea::-webkit-scrollbar,
|
||||||
|
.notice-content-scroll::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* 图片列表滚动条样式 */
|
/* 图片列表滚动条样式 */
|
||||||
.image-list-scroll::-webkit-scrollbar {
|
.image-list-scroll::-webkit-scrollbar {
|
||||||
width: 6px;
|
width: 6px;
|
||||||
|
|||||||
Reference in New Issue
Block a user