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

Fix/dark mode UI (#8113)

Browse Source 
* fix dark mode ui

* fix dnd ui

* optimize

* update tags count text color

* optimize logo, form input, toaster ui, etc

---------

Co-authored-by: zhouwenxuan <aries@Mac.local>
This commit is contained in:
Aries
2025-08-08 13:34:56 +08:00
committed by GitHub
parent d546b8ccdf
commit 14737b26a7
90 changed files with 463 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/css/dirent-list-item.css
View File

@@ -1,5 +1,5 @@
.tr-drop-effect {
background-color: #f7f7f7;
background-color: var(--bs-tr-hover-bg);
}
.star-empty {
@@ -25,19 +25,3 @@
top: 50%;
left: 50%;
}
.tag-list-title {
overflow: hidden;
}
.dirent-sdoc-draft-identifier {
display: inline-block;
font-size: 14px;
color: #666;
background: #eee;
padding: 0 8px;
height: 20px;
line-height: 20px;
border-radius: 10px;
margin-left: 6px;
}

16
frontend/src/css/file-history-old.css
View File

@@ -2,8 +2,8 @@
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #eee;
background-color: #f5f5f5;
border-bottom: 1px solid var(--bs-border-secondary-color);
background-color: var(--bs-header-bg);
font-size: 1rem;
padding: 0.5rem 1rem;
}
@@ -37,10 +37,14 @@
padding: .5em 0;
background: #efefef;
border: 0;
color: #666;
color: var(--bs-icon-color);
border-radius: 2px;
}
[data-bs-theme=dark] .old-history-main .get-more-btn {
background: rgba(255, 255, 255, 0.05);
}
.old-history-main .get-more-btn:hover {
color: #444;
}
@@ -59,6 +63,10 @@
line-height: 1.5;
}
[data-bs-theme=dark] .old-history-main h2 {
color: var(--bs-body-secondary-color);
}
.old-history-main .file-name {
color: #ed7109;
word-wrap: break-word;
@@ -84,7 +92,7 @@
}
.old-history-more-operation i {
color: #999;
color: var(--bs-icon-secondary-color);
cursor: pointer;
}

17
frontend/src/css/files-activities.css
View File

@@ -1,10 +1,13 @@
.activity-details {
text-decoration: underline;
cursor: pointer;
color: var(--bs-body-secondary-color);
}
.activity-details:hover {
color: var(--bs-body-color);
}
.mobile-activity-time {
display: inline-block;
margin-bottom: .2em;
@@ -25,7 +28,7 @@
.activity-modifier-selector-container {
width: 320px;
background: var(--bs-body-bg);
background: var(--bs-popover-bg);
border: 1px solid var(--bs-border-secondary-color);
margin-top: 2px;
z-index: 2;
@@ -33,8 +36,8 @@
.activity-selected-modifiers {
min-height: 2rem;
background: #f5f5f5;
border-bottom: 1px solid #dde2ea;
background: var(--bs-body-secondary-bg);
border-bottom: 1px solid var(--bs-border-secondary-color);
line-height: 1;
}
@@ -45,6 +48,7 @@
padding: 0 8px 0 2px;
border-radius: 10px;
background: #eaeaea;
color: #212529;
}
.unselect-activity-user {
@@ -66,7 +70,7 @@
}
.activity-user-item:hover {
background: #f5f5f5;
background: var(--bs-body-secondary-bg);
}
.activity-user-name {
@@ -77,3 +81,8 @@
border: none;
margin: 0;
}
.relative-time,
.small-lib-link {
color: var(--bs-body-secondary-color);
}

2
frontend/src/css/grid-view.css
View File

@@ -84,7 +84,7 @@
}
.grid-drop-show {
background: #f7f7f7;
background: var(--bs-tr-hover-bg);
}
.selection-box {

11
frontend/src/css/layout.css
View File

@@ -95,7 +95,6 @@
.cur-view-path {
padding: 8px 16px;
height: 48px;
background: var(--bs-body-bg);
display: flex;
align-items: center;
flex-shrink: 0;
@@ -135,7 +134,7 @@
.cur-view-path .cur-view-path-btn.sf3-font,
.cur-view-path .cur-view-path-btn .sf3-font {
font-size: 16px;
color: var(--bs-icon-secondary-color);
color: var(--bs-icon-color);
}
.cur-view-path .cur-view-path-btn:hover {
@@ -155,12 +154,6 @@
content: '';
}
.cur-view-path {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 200ms;
}
.cur-view-content {
padding: 0rem 1rem;
flex: 1;
@@ -307,7 +300,7 @@ img[src=""],img:not([src]) { /* for first loading img*/
.cur-view-container .sf3-font-star-empty.sf3-font,
.cur-view-container .sf3-font-star.sf3-font {
color: var(--bs-icon-tertiary-color);
color: var(--bs-icon-secondary-color);
}
.path-container {

17
frontend/src/css/lib-content-view.css
View File

@@ -115,7 +115,7 @@
.folder-toggle-icon {
position: absolute;
left: 0;
color: var(--bs-icon-secondary-color);
color: var(--bs-icon-color);
line-height: 1.625;
width: 1.5rem;
display: flex;
@@ -148,7 +148,7 @@
display: inline-block;
width: 1rem;
text-align: center;
color: var(--bs-icon-secondary-color);
color: var(--bs-icon-color);
}
.tree-node-inner .right-icon {
@@ -157,7 +157,7 @@
right: 0.5rem;
bottom: 0;
width: 1rem;
color: var(--bs-icon-secondary-color);
color: var(--bs-icon-color);
z-index: 2;
font-size: 0.8125rem;
text-align: center;
@@ -169,7 +169,7 @@
vertical-align: middle;
font-size: 0.8125rem;
line-height: 1.625rem !important;
color: var(--bs-icon-secondary-color);
color: var(--bs-icon-color);
}
.tree-node-hight-light {
@@ -323,7 +323,7 @@
.dir-view-path .sf3-font-refresh {
transform: rotateY(180deg);
color: var(--bs-icon-secondary-color);
color: var(--bs-icon-color);
cursor: pointer;
font-size: 14px;
display: inline-block;
@@ -331,7 +331,7 @@
.dir-view-path .sf3-font-new,
.dir-view-path .path-item-dropdown-toggle {
color: var(--bs-icon-secondary-color);
color: var(--bs-icon-color);
}
.dir-view-path .path-item-dropdown-toggle {
@@ -484,7 +484,7 @@
border: 0;
cursor: pointer;
box-shadow: none;
background: var(--bs-body-bg);
background: transparent;
color: var(--bs-body-color);
}
@@ -493,13 +493,14 @@
}
.custom-modal .modal-footer .footer-left-btn:not(.disabled):hover {
background-color: var(--bs-nav-hover-bg);
background-color: var(--bs-bg-secondary-color);
border-radius: 3px;
}
.cur-view-container .cur-view-path {
display: flex;
align-items: center;
border-bottom: 1px solid var(--bs-border-secondary-color);
}
.cur-view-container .cur-view-path .cur-view-path-left {

4
frontend/src/css/lib-settings.css
View File

@@ -9,14 +9,14 @@
}
.lib-setting-nav {
border-bottom: 1px solid rgba(0,40,100,0.12) !important;
border-bottom: 1px solid var(--bs-border-color) !important;
}
@media (min-width: 768px) {
.lib-setting-nav {
min-width: 240px;
border-bottom: none;
border-right: 1px solid rgba(0,40,100,0.12) !important;
border-right: 1px solid var(--bs-border-color) !important;
}
}

17
frontend/src/css/metadata-rc-calendar.css
View File

@@ -94,3 +94,20 @@
fill: gray;
font-size: 12px;
}
[data-bs-theme=dark] .rc-calendar {
background-color: var(--bs-popover-bg);
border: 1px solid var(--bs-border-secondary-color);
box-shadow: none;
}
[data-bs-theme=dark] .rc-calendar .rc-calendar-input-wrap,
[data-bs-theme=dark] .rc-calendar .rc-calendar-header,
[data-bs-theme=dark] .rc-calendar .rc-calendar-body,
[data-bs-theme=dark] .rc-calendar .rc-calendar-footer {
border-color: var(--bs-border-secondary-color);
}
[data-bs-theme=dark] .rc-calendar-disabled-cell .rc-calendar-date {
background: rgba(255, 255, 255, .02);
}

6
frontend/src/css/notice-item.css
View File

@@ -1,6 +1,6 @@
.notification-item {
padding: 14px 16px 14px 10px;
border-bottom: 1px solid #ededed;
border-bottom: 1px solid var(--bs-border-secondary-color);
position: relative;
cursor: pointer;
}
@@ -10,7 +10,7 @@
}
.notification-item:hover {
background: #f5f5f5;
background: var(--bs-tr-hover-bg);
}
.notification-item .notification-item-header {
@@ -57,7 +57,7 @@
}
.notification-item .notification-header-info .notification-time {
color: #666;
color: var(--bs-body-secondary-color);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

2
frontend/src/css/notification.css
View File

@@ -24,7 +24,7 @@
#notifications .sf-icon-bell {
font-size: 16px;
line-height: 1;
color: var(--bs-icon-secondary-color);
color: var(--bs-icon-color);
vertical-align: middle;
border-radius: 4px;
}

5
frontend/src/css/pagination.css
View File

@@ -3,6 +3,11 @@
font-weight: normal;
}
[data-bs-theme=dark] .paginator .btn:disabled {
background-color: rgba(255, 255, 255, .02);
border-color: rgba(255, 255, 255, .1);
}
.paginator .paginator-dropdown .btn:active,
.paginator .paginator-dropdown .btn:focus {
background: var(--bs-body-bg);

2
frontend/src/css/repo-folder-trash.css
View File

@@ -43,7 +43,7 @@ body {
}
.clean {
border-color: #ccc;
border-color: var(--bs-border-secondary-color);
border-radius: 2px;
height: 30px;
line-height: 28px;

4
frontend/src/css/repo-history.css
View File

@@ -15,7 +15,7 @@ body {
.details {
font-size: 12px;
color: #666;
color: var(--bs-body-secondary-color);
text-decoration: underline;
margin-left: .25rem;
}
@@ -43,7 +43,7 @@ body {
/* for the dialog */
.repo-snapshot-tip {
font-size: .875rem;
color: #666;
color: var(--bs-body-secondary-color);
}
#repo-history-dialog.modal-dialog {

2
frontend/src/css/repo-info-bar.css
View File

@@ -52,7 +52,7 @@
}
.info-icon {
color: var(--bs-icon-secondary-color);
color: var(--bs-icon-color);
vertical-align: -3px;
}

4
frontend/src/css/seahub-modal-header.css
View File

@@ -8,7 +8,7 @@
font-size: 1.40625rem;
font-weight: 700;
line-height: 1;
color: var(--bs-icon-secondary-color);
color: var(--bs-icon-color);
}
.modal .seahub-modal-btn.close:not(:disabled):not(.disabled):hover {
@@ -27,5 +27,5 @@
}
.modal .seahub-modal-btn .seahub-modal-btn-inner .sf3-font {
color: #666;
color: var(--bs-icon-color);
}

7
frontend/src/css/search.css
View File

@@ -71,7 +71,7 @@
pointer-events: all;
font-style: normal;
min-width: 20px;
color: var(--bs-icon-secondary-color);
color: var(--bs-icon-color);
height: 20px;
margin: 9px;
border: 0;
@@ -98,6 +98,7 @@
height: 1.875rem;
width: 15rem;
font-size: .875rem;
background-color: var(--bs-body-bg);
}
.search-container.show .search-input {
@@ -209,6 +210,10 @@
background-color: #dbdbdb;
}
[data-bs-theme=dark] .search-result-item .search-icon-right:hover {
background-color: rgba(255, 255, 255, .1);
}
.item-content .item-name a {
color: #EA8102 !important;
}

7
frontend/src/css/select-editor.css
View File

@@ -75,3 +75,10 @@
background-color: inherit !important;
border: 1px solid var(--bs-border-color);
}
.permission-editor .sf3-font-down {
display: inline-block;
transform: translateY(2px);
transition: all 0.1s;
font-size: 14px !important;
}

4
frontend/src/css/select-users-icon.css
View File

@@ -2,11 +2,11 @@
position: absolute;
top: 6px;
right: 12px;
border-left: 1px solid #ccc;
border-left: 1px solid var(--bs-border-secondary-color);
padding-left: 9px;
font-size: 18px;
cursor: pointer;
color: #999;
color: var(--bs-icon-secondary-color);
}
.add-members .toggle-detail-btn:hover {

2
frontend/src/css/share-link-dialog.css
View File

@@ -183,7 +183,7 @@ input.expire-input {
}
.custom-permission .permission-header .back-icon {
color: var(--bs-icon-tertiary-color);
color: var(--bs-icon-secondary-color);
margin-right: 10px;
cursor: pointer;
}

2
frontend/src/css/single-dropdown-toolbar.css
View File

@@ -1,5 +1,5 @@
.sf-dropdown-combined-toggle {
color: var(--bs-icon-secondary-color);
color: var(--bs-icon-color);
padding: 2px 4px;
border-radius: 3px;
}

4
frontend/src/css/sub-folder-permission.css
View File

@@ -1,3 +1,7 @@
.share-dialog .share-dialog-content {
min-height: 28rem;
}
.permission-tips {
color: var(--bs-body-secondary-color);
}

2
frontend/src/css/toolbar.css
View File

@@ -63,7 +63,7 @@
.common-toolbar .sf-icon-color-mode {
font-size: 16px;
color: var(--bs-icon-secondary-color);
color: var(--bs-icon-color);
border-radius: 4px;
}

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

@@ -48,6 +48,10 @@
border: none;
}
.notification-list-content .notification-modal-body .notice-dialog-side .nav-item .nav-link:hover {
background-color: var(--bs-nav-hover-bg);
}
.notification-list-content .notification-modal-body .notice-dialog-side .nav-item .nav-link.active {
background-color: var(--bs-nav-active-bg);
color: var(--bs-body-color);

6
frontend/src/css/user-settings.css
View File

@@ -21,7 +21,7 @@ body {
font-size: 0.9375rem;
font-weight: normal;
padding-bottom: 0.3rem;
border-bottom: 1px solid #eee;
border-bottom: 1px solid var(--bs-border-color);
margin-bottom: 0.7rem;
}
.user-avatar {
@@ -42,11 +42,11 @@ body {
cursor: pointer;
}
.eye-icon {
color: #666;
color: var(--bs-icon-color);
}
.input-tip {
padding-top: calc(0.375rem + 1px);
color: #666;
color: var(--bs-body-secondary-color);
}
@media (min-width: 768px) {
.input-tip {

8
frontend/src/css/view-modes.css
View File

@@ -15,3 +15,11 @@
top: 0;
left: 0;
}
.view-modes-dropdown-shortcut {
color: var(--bs-body-secondary-color);
}
.dropdown-item:hover .view-modes-dropdown-shortcut {
color: #fff;
}