haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-06 09:21:54 +00:00
Code Issues Releases Wiki Activity

change notification dialog style

Browse Source
This commit is contained in:
Michael An
2024-12-02 13:35:49 +08:00
committed by 孙永强
parent 3f17045e47
commit b5a52668e9
4 changed files with 109 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
frontend/src/css/user-notifications.css
View File

@@ -49,6 +49,32 @@
padding: 12px 8px;
}
.notification-list-content .notification-modal-body .notice-dialog-side .nav-item {
position: relative;
}
.notification-list-content .notification-modal-body .notice-dialog-side .nav-item .nav-link {
border: none;
}
.notification-list-content .notification-modal-body .notice-dialog-side .nav-item .nav-link.active {
background-color: #F5F5F5;
color: #212529;
}
.notification-list-content .notification-modal-body .notice-dialog-side .nav-item .nav-link.active::before {
content: '';
position: absolute;
display: block;
width: 3px;
height: 26px;
left: -5px;
top: 2px;
background-color: #ff9800;
border-radius: 2px;
z-index: 2;
}
.notification-list-content .notification-modal-body .notice-dialog-main {
display: flex;
flex: 0 0 80%;
@@ -57,7 +83,7 @@
.notification-modal-body .notification-dialog-body {
overflow: auto;
padding: 2rem 1rem;
padding: 1rem;
height: 100%;
}
@@ -91,8 +117,64 @@
.notification-dialog-body table td {
padding: 0.5rem 0.1875rem;
border-bottom: 1px solid #eee;
border-bottom: none;
color: #212529;
font-size: 14px;
word-break: break-all;
}
.notification-dialog-body table td ul {
list-style: none;
}
.notification-dialog-body .notification-user-name {
font-weight: normal;
}
.notification-dialog-body .notification-item .avatar {
width: 24px;
height: 24px;
}
.notification-dialog-body .notification-item .notification-point {
top: calc(50% - 4px);
}
@media (max-width: 768px) {
.notification-list-dialog {
width: 100%;
max-width: 100%;
height: 100%;
margin: 0;
}
.notification-list-content .notification-modal-body {
display: block;
}
.notification-list-content .notification-modal-body .notice-dialog-side {
display: block;
padding: 0;
}
.notification-list-content .notification-item .notification-user-name {
display: none;
}
.notification-list-content .notice-dialog-main {
height: 100%;
}
.notification-list-content .notice-dialog-side>ul {
flex-direction: row !important;
}
.notification-list-content .notice-dialog-side>ul>li {
width: 50% !important;
}
.notification-list-content .notice-dialog-side>ul>li .nav-link:before {
display: none;
}
}