mobile . themes
This commit is contained in:
@@ -463,7 +463,85 @@ button[onclick^="quickScore"]:active {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
/* 粒子背景容器 */
|
||||
/* 聊天界面优化 */
|
||||
#messageArea {
|
||||
overflow-y: auto !important;
|
||||
overflow-x: hidden;
|
||||
scroll-behavior: smooth;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#messageArea::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
#messageArea::-webkit-scrollbar-track {
|
||||
background: rgba(15, 23, 42, 0.3);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#messageArea::-webkit-scrollbar-thumb {
|
||||
background: rgba(59, 130, 246, 0.5);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#messageArea::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(59, 130, 246, 0.7);
|
||||
}
|
||||
|
||||
/* 聊天视图布局修复 */
|
||||
#chatView {
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
#chatView.flex {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
#chatView.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 确保输入框始终在底部 */
|
||||
#chatView > div:last-child {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
/* 左侧面板滚动优化 */
|
||||
#roomList::-webkit-scrollbar,
|
||||
#chatNotifPanel::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
#roomList::-webkit-scrollbar-track,
|
||||
#chatNotifPanel::-webkit-scrollbar-track {
|
||||
background: rgba(15, 23, 42, 0.2);
|
||||
}
|
||||
|
||||
#roomList::-webkit-scrollbar-thumb,
|
||||
#chatNotifPanel::-webkit-scrollbar-thumb {
|
||||
background: rgba(59, 130, 246, 0.4);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* 移除hide-scrollbar在聊天区域的影响 */
|
||||
.hide-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.hide-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 但是消息区域要显示滚动条 */
|
||||
#messageArea.hide-scrollbar::-webkit-scrollbar {
|
||||
display: block !important;
|
||||
width: 8px;
|
||||
}
|
||||
.particles-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -472,4 +550,174 @@ button[onclick^="quickScore"]:active {
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 响应式表格容器 - 解决表格内容显示不全 */
|
||||
.table-responsive {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
overflow-y: visible;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.table-responsive::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.table-responsive::-webkit-scrollbar-track {
|
||||
background: rgba(15, 23, 42, 0.3);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.table-responsive::-webkit-scrollbar-thumb {
|
||||
background: rgba(59, 130, 246, 0.5);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.table-responsive::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(59, 130, 246, 0.7);
|
||||
}
|
||||
|
||||
/* 表格优化 - 确保内容完整显示 */
|
||||
.table-futuristic {
|
||||
min-width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.table-futuristic td,
|
||||
.table-futuristic th {
|
||||
padding: 12px 16px;
|
||||
vertical-align: middle;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
/* 文字换行优化 */
|
||||
.text-wrap {
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.text-ellipsis-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.text-ellipsis-3 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 管理后台内容区域优化 */
|
||||
.admin-content-wrapper {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* 卡片内容区域优化 */
|
||||
.card-content-scrollable {
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.card-content-scrollable::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.card-content-scrollable::-webkit-scrollbar-track {
|
||||
background: rgba(15, 23, 42, 0.2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.card-content-scrollable::-webkit-scrollbar-thumb {
|
||||
background: rgba(59, 130, 246, 0.4);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 移动端优化 */
|
||||
@media (max-width: 768px) {
|
||||
.futuristic-card,
|
||||
.futuristic-card-dark {
|
||||
border-radius: 16px;
|
||||
padding: 16px !important;
|
||||
}
|
||||
|
||||
.table-futuristic td,
|
||||
.table-futuristic th {
|
||||
padding: 8px 12px;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.btn-futuristic,
|
||||
.btn-outline-futuristic {
|
||||
padding: 8px 16px;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 图片容器优化 */
|
||||
.img-container {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.img-container img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
/* 长文本内容优化 */
|
||||
.content-text {
|
||||
line-height: 1.8;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
/* 统计卡片响应式优化 */
|
||||
@media (max-width: 640px) {
|
||||
.grid-cols-2 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 侧边栏响应式优化 */
|
||||
@media (max-width: 768px) {
|
||||
.sidebar-futuristic {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
/* 防止内容溢出 */
|
||||
.overflow-safe {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 弹性容器优化 */
|
||||
.flex-container-safe {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* 网格容器优化 */
|
||||
.grid-container-safe {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
}
|
||||
Reference in New Issue
Block a user