From d9192e05c7cfe74d61a9ff22ff68a0fcfbc16cc0 Mon Sep 17 00:00:00 2001 From: Hakadao Date: Thu, 13 Jun 2024 02:09:05 +0800 Subject: [PATCH] fix(adaptedStyles): adapted unadapted contents (#834) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: adaptation of theme styles * Fix: Code formatting issues in SCSS files * Fix: Code formatting issues in SCSS files * Fix: Code formatting issues in SCSS files * style addition * delete electric style * add noteListPage file * Fix the length of the input box * Fix issues with the previous commit * add style * fix theme style for more pages * docs: adjust FireFox link (#824) * 简中文档补全 * 火狐商店链接修正 * feat: video preview time jump (#821) * docs: update firefox link * fix: home page tab loading animation issues (#827) * fix: resolve i18n not affecting #822 * Create FUNDING.yml * fix(adaptedStyles): adapted user space page styles (#831) * fix: userSpace page style * add style * add style * fix(adaptedStyles): video page comment button disable style (#833) * fix videoPage comment button disable dark style * remove box-shadow * chore(TopBar): remove `important:` * fix(adaptedStyles): update note page class name && adjust note page styles --------- Co-authored-by: 夜晚的鸡鸣 <110297461+MidnightCrowing@users.noreply.github.com> Co-authored-by: 陈生杂物房 <88823709+TC999@users.noreply.github.com> --- .../animePlayback&MoviePage.scss | 8 +- src/styles/adaptedStyles/articlesPage.scss | 66 ++++- src/styles/adaptedStyles/footer.scss | 4 + src/styles/adaptedStyles/index.ts | 6 + src/styles/adaptedStyles/momentsPage.scss | 13 +- src/styles/adaptedStyles/notePage.scss | 244 ++++++++++++++++ src/styles/adaptedStyles/userSpacePage.scss | 264 +++++++++++++----- src/styles/adaptedStyles/videoPage.scss | 49 +++- 8 files changed, 571 insertions(+), 83 deletions(-) create mode 100644 src/styles/adaptedStyles/notePage.scss diff --git a/src/styles/adaptedStyles/animePlayback&MoviePage.scss b/src/styles/adaptedStyles/animePlayback&MoviePage.scss index 34f8a9fb..35d5daf9 100644 --- a/src/styles/adaptedStyles/animePlayback&MoviePage.scss +++ b/src/styles/adaptedStyles/animePlayback&MoviePage.scss @@ -49,7 +49,8 @@ background-color: var(--bew-theme-color-80); } - [class*="mediainfo_mediaToolbar"] [class*="mediainfo_btnHome"] { + [class*="mediainfo_mediaToolbar"] [class*="mediainfo_btnHome"], + [class*="SectionSelector_SectionSelector"] [class*="SectionSelector_sectionItem"][class*="SectionSelector_active"] { background-color: var(--bew-theme-color-10); } @@ -97,7 +98,8 @@ .squirtle-single-side-setting .squirtle-single-setting-other-choice.active .squirtle-svg-icon.active - path { + path, + .bui-danmaku-switch-on path:nth-child(2) { fill: var(--bew-theme-color); } @@ -210,6 +212,7 @@ fill: var(--bew-border-color); } } + // #endregion // #region Old anime playback & movie page @@ -383,5 +386,6 @@ background-color: var(--bew-bg); } } + // #endregion } diff --git a/src/styles/adaptedStyles/articlesPage.scss b/src/styles/adaptedStyles/articlesPage.scss index 54cfe104..0b619ec2 100644 --- a/src/styles/adaptedStyles/articlesPage.scss +++ b/src/styles/adaptedStyles/articlesPage.scss @@ -7,6 +7,10 @@ line-height: 3em; } + .reply-box.fixed-box { + padding-right: 20px; + } + // #region theme color adaption part // Increase the priority of the style inside by writing a non-existent selector in :not() :not(fdjslfds) { @@ -33,7 +37,9 @@ .interaction-info .hover-item:hover, .interaction-info .hover-item:hover i, .normal-article-holder a, - .read-article-holder .card-text-label { + .read-article-holder .card-text-label, + .share-dynamic-dialog .sdd-card .name, + .bili-dialog-bomb .appeal-box .wrap .container .textarea .memo a { color: var(--bew-theme-color); } @@ -44,7 +50,8 @@ .page-content .right-side .rank-module .rank-list .item:nth-child(-n + 3) .rank-index, .article-detail .unfollow, .modal-box-holder .modal-box .modal-footer .modal-btn-primary, - .bili-dialog-bomb .appeal-box .submit .confirm { + .bili-dialog-bomb .appeal-box .submit .confirm, + .bili-dialog-bomb .appeal-box .wrap .container .options .option .checkbox.checked:before { background-color: var(--bew-theme-color); } @@ -52,7 +59,8 @@ .page-content .right-side .up-list .up-item .info-holder .head .follow, .categories-bar .tag-item.on, .modal-box-holder .modal-box .modal-footer .modal-btn-primary, - .read-article-holder .card-text-label { + .read-article-holder .card-text-label, + .bili-dialog-bomb .appeal-box .wrap .container .options .option .checkbox.checked { border-color: var(--bew-theme-color); } @@ -82,6 +90,7 @@ filter: drop-shadow(680px 0 0 var(--bew-theme-color)); } } + // #endregion // #region dark mode adaption part @@ -112,7 +121,9 @@ .view-note .note-content .ql-container .ql-editor, .bili-dialog-bomb .appeal-box .wrap .container .question, .van-popover.van-followed, - .van-popover.van-followed .follow_dropdown li:hover { + .van-popover.van-followed .follow_dropdown li:hover, + .share-dynamic-dialog .sdd-head, + .share-success-dialog .info { color: var(--bew-text-1); } @@ -138,7 +149,10 @@ .article-breadcrumb .slash, .article-detail .bangumi-rate-panel .info .desc, .modal-box-holder .modal-box .modal-footer .modal-btn-default, - .bili-dialog-bomb .appeal-box .submit .cancel { + .bili-dialog-bomb .appeal-box .submit .cancel, + .interaction-info .toolbar .share-box .qrcode-tit, + .share-dynamic-dialog .sdd-input, + .share-success-dialog .hint { color: var(--bew-text-2); } @@ -158,7 +172,8 @@ .list-mark, .interaction-info .toolbar .share-box, .interaction-info, - .followed { + .followed, + .share-dynamic-dialog .sdd-card .sdd-card-content { color: var(--bew-text-3); } @@ -179,14 +194,27 @@ .article-container, .page-content .right-side .rank-module .complete-rank, - .comment-wrapper .comment-m { + .bili-comment.browser-pc, + .reply-box.fixed-box, + .comment-wrapper .comment-m, + .share-dynamic-dialog, + .share-dynamic-dialog .sdd-card .sdd-card-content, + .share-success-dialog { background-color: var(--bew-content-solid-1); } + .interaction-info .toolbar .share-box .qrcode-box { + background-color: var(--bew-content-solid-2); + } + .comment-wrapper .comment-m { --bew-bg: var(--bew-content-solid-1); } + .share-dynamic-dialog .sdd-card { + background-color: var(--bew-bg); + } + .right-side-bar .to-top, .right-side-bar .side-toolbar, .right-side-bar .catalog, @@ -246,11 +274,15 @@ .bili-dialog-bomb .appeal-box .submit, .van-popover.van-followed, .followed, - .read-article-holder .row-video-holder { + .read-article-holder .row-video-holder, + .interaction-info .toolbar .share-box .qrcode-box, + .share-dynamic-dialog .sdd-action-bar, + .share-dynamic-dialog .sdd-head { border-color: var(--bew-border-color); } - .to-top { + .to-top, + .share-success-dialog { border-color: var(--bew-elevated-solid-1); } @@ -261,6 +293,22 @@ .page-content .right-side .up-list .fresh-btn:before { filter: brightness(2) contrast(0); } + + .interaction-info .toolbar .share-box .qrcode-box { + box-shadow: 0 0 4px var(--bew-border-color); + } + + .interaction-info .toolbar .share-box .qrcode-ctnr { + background: white; + box-sizing: border-box; + padding: 5px; + } + + .interaction-info .toolbar .share-box .qrcode-ctnr canvas { + width: 122px; + height: 122px; + } } + // #endregion } diff --git a/src/styles/adaptedStyles/footer.scss b/src/styles/adaptedStyles/footer.scss index c4cf404a..8351ca84 100644 --- a/src/styles/adaptedStyles/footer.scss +++ b/src/styles/adaptedStyles/footer.scss @@ -38,6 +38,10 @@ .international-footer .link-box .link-item { border-color: var(--bew-border-color); } + + .bili-footer { + min-width: fit-content; + } } // #endregion } diff --git a/src/styles/adaptedStyles/index.ts b/src/styles/adaptedStyles/index.ts index 05e24d8f..ecfb7eb7 100644 --- a/src/styles/adaptedStyles/index.ts +++ b/src/styles/adaptedStyles/index.ts @@ -45,6 +45,12 @@ async function setupStyles() { document.documentElement.classList.add('watchLaterPage') } + // user note page 笔记页 + else if (/https?:\/\/space.bilibili\.com\.*\/v\/note-list/.test(currentUrl)) { + await import('./notePage.scss') + document.documentElement.classList.add('notePage') + } + // user space page 空间页 else if (/https?:\/\/space.bilibili\.com\.*/.test(currentUrl)) { await import('./userSpacePage.scss') diff --git a/src/styles/adaptedStyles/momentsPage.scss b/src/styles/adaptedStyles/momentsPage.scss index 9d980c23..7a69c9b4 100644 --- a/src/styles/adaptedStyles/momentsPage.scss +++ b/src/styles/adaptedStyles/momentsPage.scss @@ -20,6 +20,10 @@ position: relative; } + .reply-box.fixed-box { + padding-right: 20px; + } + :not(fjlsfd) { .dyn-orig-author__following.following-icon:before, .bili-dyn-live-users__more:hover:after, @@ -45,6 +49,10 @@ background-color: var(--bew-theme-color); } + .bili-set-follow-group__add__btn { + background-color: var(--bew-theme-color-10); + } + .bili-dyn-publishing__action:not(.disabled):hover { background-color: var(--bew-theme-color-80); } @@ -102,7 +110,8 @@ filter: invert(1); } - .bili-button.primary.plain { + .bili-button.primary.plain, + .bili-set-follow-group__list.is-disabled:after { background-color: transparent; } } @@ -281,7 +290,7 @@ } .bili-topic-search__popover { - background-color: var(--bew-fill-1); + background-color: var(--bew-content-solid-2); border-color: var(--bew-border-color); } diff --git a/src/styles/adaptedStyles/notePage.scss b/src/styles/adaptedStyles/notePage.scss new file mode 100644 index 00000000..e2ba11e9 --- /dev/null +++ b/src/styles/adaptedStyles/notePage.scss @@ -0,0 +1,244 @@ +.bewly-design.notePage { + // #region theme color adaption part + // Increase the priority of the style inside by writing a non-existent selector in `:not()` + :not(fdjslfds) { + #page-series-index .no-channel-container em, + .manage-note--header .tools-btns .edit-btn--ghost, + .note-single-item .go-video-btn, + .note-list-del-popup span.btn-no, + .ql-snow.ql-toolbar .ql-picker-item.ql-selected, + .ql-snow .ql-toolbar .ql-picker-item.ql-selected, + .ql-snow.ql-toolbar .ql-picker-item:hover, + .ql-snow .ql-toolbar .ql-picker-item:hover, + .ql-snow.ql-toolbar .ql-picker-label.ql-active, + .ql-snow .ql-toolbar .ql-picker-label.ql-active, + .ql-snow.ql-toolbar .ql-picker-label:hover, + .ql-snow .ql-toolbar .ql-picker-label:hover, + .ql-snow.ql-toolbar button.ql-active, + .ql-snow .ql-toolbar button.ql-active, + .ql-snow.ql-toolbar button:focus, + .ql-snow .ql-toolbar button:focus, + .ql-snow.ql-toolbar button:hover, + .ql-snow .ql-toolbar button:hover, + .dialog-note-content a { + color: var(--bew-theme-color); + } + + .van-tabs-bar .van-tabs-tab.van-tabs-tab-active, + .dialog-note-footer .btn-cancel { + color: var(--bew-theme-color) !important; + } + + .manage-note--header .tools-btns .edit-btn--ghost, + .note-single-item .go-video-btn, + .dialog-note-footer .btn-cancel { + border-color: var(--bew-theme-color); + } + + #page-series-index .channel-option.no-channel .create-channel, + .manage-note--header .tools-btns .publish-btn, + .note-single-item .go-video-btn:hover, + .note-list-del-popup span.btn-ok, + .el-pagination.is-background .el-pager li:not(.disabled).active, + .dialog-note-footer .btn-confirm, + .checkbox .box.checked { + background-color: var(--bew-theme-color); + } + + .note-tabs .van-tabs_active-bar { + background-color: var(--bew-theme-color) !important; + } + + .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill, + .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill, + .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill, + .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill, + .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill, + .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill, + .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, + .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, + .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, + .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill, + .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, + .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, + .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill, + .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill, + .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, + .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, + .ql-snow.ql-toolbar button.ql-active .ql-fill, + .ql-snow .ql-toolbar button.ql-active .ql-fill, + .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill, + .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill, + .ql-snow.ql-toolbar button:focus .ql-fill, + .ql-snow .ql-toolbar button:focus .ql-fill, + .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill, + .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill, + .ql-snow.ql-toolbar button:hover .ql-fill, + .ql-snow .ql-toolbar button:hover .ql-fill, + .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill, + .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill { + fill: var(--bew-theme-color); + } + + .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke, + .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke, + .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter, + .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter, + .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke, + .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke, + .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter, + .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter, + .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, + .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke, + .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, + .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, + .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke, + .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke, + .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter, + .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter, + .ql-snow.ql-toolbar button.ql-active .ql-stroke, + .ql-snow .ql-toolbar button.ql-active .ql-stroke, + .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter, + .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter, + .ql-snow.ql-toolbar button:focus .ql-stroke, + .ql-snow .ql-toolbar button:focus .ql-stroke, + .ql-snow.ql-toolbar button:focus .ql-stroke-miter, + .ql-snow .ql-toolbar button:focus .ql-stroke-miter, + .ql-snow.ql-toolbar button:hover .ql-stroke, + .ql-snow .ql-toolbar button:hover .ql-stroke, + .ql-snow.ql-toolbar button:hover .ql-stroke-miter, + .ql-snow .ql-toolbar button:hover .ql-stroke-miter { + stroke: var(--bew-theme-color); + } + + .note-single-item a.go-video-btn:hover { + color: white !important; + } + } + // #endregion + + // #region dark mode adaption part + &.dark { + .note-list .note-header, + .note-list .note-tabs, + .note-list-item, + .note-single-item, + .van-dialog { + background-color: var(--bew-bg); + } + + .note-list-del-popup { + background-color: var(--bew-content-solid-1); + } + + .note-list-item, + .editor-innter .ql-editor { + &::-webkit-scrollbar-thumb { + background-color: rgba(120, 120, 140, 0.44); + } + } + + // .note-list-item::-webkit-scrollbar-track { + // background-color: var(--bg1); + // } + + // .editor-innter .ql-editor::-webkit-scrollbar-track { + // background-color: var(--bew-content-1); + // } + + .note-header .note-title .note-text, + .note-single-item .note-item__detail--title, + .ql-snow.ql-toolbar button, + .ql-snow.ql-toolbar .ql-bar .ql-size, + .protocal-dialog .van-dialog__title, + .dialog-note-content { + color: var(--bew-text-1); + } + + .van-tabs-bar .van-tabs-tab { + color: var(--bew-text-1) !important; + } + + .ql-toolbar.ql-snow + .ql-container.ql-snow, + .el-pagination.is-background .btn-next, + .el-pagination.is-background .btn-prev, + .el-pagination.is-background .el-pager li, + .ql-container, + .my-notes-empty, + .pub-notes-empty { + color: var(--bew-text-2); + } + + .manage-note--header .status-bar .text, + .note-header .note-title .note-count, + .note-single-item .note-item__detail--summary, + .note-tooltip.info { + color: var(--bew-text-3); + } + + .el-pagination.is-background .btn-next.disabled, + .el-pagination.is-background .btn-next:disabled, + .el-pagination.is-background .btn-prev.disabled, + .el-pagination.is-background .btn-prev:disabled, + .el-pagination.is-background .el-pager li.disabled { + color: var(--bew-text-4); + } + + .note-list-del-popup p { + color: white; + } + + .ql-snow .ql-fill { + fill: var(--bew-text-1); + } + + .ql-snow.readonly-toolbar .ql-fill { + fill: var(--bew-text-2); + } + + .ql-snow .ql-stroke { + fill: var(--bg2); + } + + .ql-snow .ql-stroke { + stroke: var(--bew-text-1); + } + + .manage-note #web-toolbar { + border-top-color: var(--bew-border-color); + } + + .protocal-dialog .van-dialog__header { + border-bottom-color: var(--bew-border-color); + } + + .note-tabs .van-tabs-bar:after { + background-color: var(--bew-border-color); + } + + .el-pagination.is-background .btn-next, + .el-pagination.is-background .btn-prev, + .el-pagination.is-background .el-pager li, + .ql-container, + #web-toolbar, + #web-toolbar .ql-picker-options, + .view-manage-note, + .note-tooltip.info, + .my-notes-manage-note { + background-color: var(--bew-content-solid-1); + } + + .ql-toolbar.ql-snow + .ql-container.ql-snow { + background-color: var(--bew-fill-1); + } + + .note-single-item--selected { + background-color: var(--bew-fill-2); + } + + .ql-toolbar.ql-snow .ql-picker-options { + box-shadow: 0 2px 8px rgb(255 255 255 / 20%); + } + } + // #endregion +} diff --git a/src/styles/adaptedStyles/userSpacePage.scss b/src/styles/adaptedStyles/userSpacePage.scss index 782a2f11..83f18c12 100644 --- a/src/styles/adaptedStyles/userSpacePage.scss +++ b/src/styles/adaptedStyles/userSpacePage.scss @@ -39,6 +39,10 @@ position: static; } + .comment-bilibili-mask { + position: fixed; + } + // #region theme color adaption part // Increase the priority of the style inside by writing a non-existent selector in :not() // 淺色模式下主要對 theme color 調整配合 bewlybewly 配色 @@ -55,6 +59,7 @@ .i-live .i-live-off-guest a, .modal-wrapper .modal-header-close:hover, a:hover, + .h .h-v-host:hover, #page-index .channel .section-right-options .play-all-channel:hover .video-commonplayer_play, #page-follows .follow-tabs span.active, #page-follows .follow-tabs span:hover, @@ -88,11 +93,19 @@ .video-container.can-hover:hover .text-area .title, .card .button-area .more-button:hover, .card .more-panel .child-button:hover, + #page-series-index .no-channel-container em, .expand-btn, .up-info .up-focus-btn, .article-container:hover .text-area .title, .bp-popup-panel .title-ctnr .popup-title, - .bl-button--ghost:not(:hover) { + .bl-button--ghost:not(:hover), + .modal-wrapper .modal-header-close:hover, + .btn-container .btn:hover, + .follow-dialog-wrap .follow-dialog-window .content .group-list li:hover, + .follow-dialog-wrap .follow-dialog-window .content .group-list .add-group .input-group .submit, + .bb-comment .operation .opera-list li:hover, + .comment-bilibili-fold .operation .opera-list li:hover, + .bili-topic-new__default__create__text { color: var(--bew-theme-color); } @@ -112,7 +125,8 @@ .fans-name[style*="color"], .dynamic-keyword, .card .main-content .user-name a[style*="color"], - .dynamic-link-hover-bg { + .dynamic-link-hover-bg, + .im-popup .bp-popup-panel .title-ctnr .popup-title { color: var(--bew-theme-color) !important; } @@ -136,7 +150,19 @@ .be-pager-options-elevator input:focus, .up-info .up-focus-btn, .bl-button--ghost, - .bl-button--ghost:hover { + .bl-button--ghost:hover, + .h .report-popup-item.checked .report-popup-item-checkbox, + .h .report-popup .report-popup-tip__radio input[type="radio"]:checked + label:before, + .btn-container .btn:hover, + .follow-dialog-wrap .follow-dialog-window .content .group-list .add-group .add-btn:hover, + .follow-dialog-wrap .follow-dialog-window .content .group-list .add-group .input-group, + .follow-dialog-wrap .follow-dialog-window .content .group-list .add-group .input-group .submit, + .content .group-list li:hover input[type="checkbox"] + i, + .content .group-list li input[type="checkbox"]:checked + i, + .content .group-list li input[type="checkbox"]:checked:hover + i, + .comment-bilibili-con .btn .btn-cancel:hover, + .comment-bilibili-con .btn .btn-submit, + #page-setting #setting-new-tag:focus + #setting-new-tag-btn { border-color: var(--bew-theme-color); } @@ -175,22 +201,42 @@ .be-tags-container .tag.new-tag, #page-fav .fav-sidenav .fav-item.cur:hover .icon-cursor, .favInfo-box .collection-details .collection-btn, + #page-series-index .channel-option.no-channel .create-channel, .video-container .types, .bl-button--primary, - .bl-button--ghost:hover { + .bl-button--ghost:hover, + .h .report-popup-item.checked .report-popup-item-checkbox, + .h .report-popup .report-popup-tip__radio input[type="radio"]:checked + label:after, + .follow-dialog-wrap .follow-dialog-window .bottom .btn, + .comment-bilibili-con .btn .btn-submit, + .bili-topic-new__default__create__icon:after, + .bili-topic-new__default__create__icon:before { background-color: var(--bew-theme-color); } + .follow-dialog-wrap .follow-dialog-window .content .group-list .add-group .input-group .submit { + background-color: var(--bew-theme-color-10); + } + + .bili-topic-new__default__create__icon { + background-color: var(--bew-theme-color-20); + } + .btn.primary:focus, .btn.primary:hover, .h .h-follow:hover, .game-card__btn:hover, .favInfo-box .favInfo-details .fav-options .fav-play:hover, .favInfo-box .collection-details .collection-btn:hover, - .bl-button--primary:hover { + .bl-button--primary:hover, + .comment-bilibili-con .btn .btn-submit:hover { background-color: var(--bew-theme-color-80); } + .h .h-guest-hint { + background-color: var(--bew-theme-color-90); + } + .create-wrapper .choose-action .confirm-btn, .create-wrapper .choose-action .next-btn, .create-wrapper .create-action .confirm-btn, @@ -223,10 +269,29 @@ .search-nav-item.search-nav-actived .num, .search-nav-item.search-nav-actived .text, .bangumi-pagelistbox .p:hover, - .bangumi-pagelistbox .p.active { + .bangumi-pagelistbox .p.active, + .comment-bilibili-con .btn .btn-submit:hover { color: white !important; } + + .content .group-list li input[type="checkbox"] + i { + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAMZJREFUOBFjZACCY8cuSP/4+6ebkYHB4T8DgyRIjFgA1PMcqOcABzNLqZWVwVNGkGE///45w8DANIGZ898iOxOT58QaBlJ36MwZyb/fmeIYGP4VsDOzmDDuO3xmGSMD00VHW6NOUgxCV7v/8Lny/wz/9JlA3gS5DF0BqXyQGSCzGIAuBAYBdQDILCbqGIUwZdRARFiQyxoNQ3JDDqFvCIQhqDwDFUEIR5PHApkBMosJVDhCyjPyDILpApkBMov6BSzIBmpWAQCEVFxRmF8CTgAAAABJRU5ErkJggg==); + border-width: 1px; + border-radius: 5px; + border-color: #bec3cc; + } + + .content .group-list li input[type="checkbox"]:hover + i { + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAMZJREFUOBFjZACCY8cuSP/4+6ebkYHB4T8DgyRIjFgA1PMcqOcABzNLqZWVwVNGkGE///45w8DANIGZ898iOxOT58QaBlJ36MwZyb/fmeIYGP4VsDOzmDDuO3xmGSMD00VHW6NOUgxCV7v/8Lny/wz/9JlA3gS5DF0BqXyQGSCzGIAuBAYBdQDILCbqGIUwZdRARFiQyxoNQ3JDDqFvCIQhqDwDFUEIR5PHApkBMosJVDhCyjPyDILpApkBMov6BSzIBmpWAQCEVFxRmF8CTgAAAABJRU5ErkJggg==); + } + + .content .group-list li input[type="checkbox"]:checked + i, + .content .group-list li input[type="checkbox"]:checked:hover + i { + background: var(--bew-theme-color) url(//s1.hdslb.com/bfs/static/jinkela/note-list/assets/ic_check.svg) no-repeat + 50% / 9px; + } } + // #endregion // #region dark mode adaption part @@ -237,14 +302,6 @@ --bg2: var(--bew-bg); } - .main-content .card-content .post-content.repost, - .main-content .card-content .post-content .original-card-content .article-container, - .main-content .card-content .deleted, - .card .more-panel, - .card .more-panel:after { - background-color: var(--bg2); - } - .n .n-inner, #page-index .col-1, #page-index .col-2 .section, @@ -287,7 +344,12 @@ #page-follows .modal-container.edit-video-modal .target-followitem, #page-fav .fav-main .search-input input, #page-fav .fav-main .fav-action-bottom .search-results-num, - .card .main-content .user-name a { + .card .main-content .user-name a, + .h .report-popup-tip, + .follow-dialog-wrap .follow-dialog-window .title, + .follow-dialog-wrap .follow-dialog-window .content .group-list li, + .be-input, + .pugv-container .pugv-item .item-infos .main-title { color: var(--bew-text-1); } @@ -312,14 +374,20 @@ #page-fav .search-empty-hint p, .small-item .meta, #page-fav .fav-main .fav-meta, - .video-container .text-area .content { + .video-container .text-area .content, + .h .report-popup-item-text, + .follow-dialog-wrap .follow-dialog-window .content .info .uname, + .selector-box, + .textarea { color: var(--bew-text-2); } .bili-dyn-interaction__item__desc .bili-rich-text__content, .opus-list .opus-item-time, .list-item .meta, - .favInfo-box .favInfo-details .fav-options .meta { + .favInfo-box .favInfo-details .fav-options .meta, + .content-text, + .report-tip { color: var(--bew-text-3); } @@ -423,7 +491,13 @@ .section .operation, .section .count, .large-item .cover img, - #page-follows .modal-container.edit-video-modal .modal-body .target-followlist { + #page-follows .modal-container.edit-video-modal .modal-body .target-followlist, + .btn-container .btn, + .h .space-report-popup .modal-wrapper .modal-body, + .follow-dialog-wrap .follow-dialog-window .title, + .follow-dialog-wrap .follow-dialog-window .bottom, + .static-popup, + .bili-at-popup { border-color: var(--bew-border-color); } @@ -431,6 +505,10 @@ border-color: var(--bew-border-color) !important; } + .emoji-box { + border-color: var(--bew-content-solid-2); + } + #page-fav .fav-main .small-item { border-color: transparent; } @@ -444,52 +522,49 @@ } .section-title, - #page-index .col-2 .section .user-auth.no-auth .no-auth-title .goto-auth, - .user-info .user-info-title .info-title, - .article-title, - #page-index .channel.guest .channel-item .channel-title .channel-name, - #page-index .channel .channel-item .channel-name, - .large-item .title, - #pin-wrapper .pin-layer-vlist .small-item .title, - #page-setting .setting-privacy-item .setting-privacy-name, - #page-setting .setting-index-module, - .favInfo-box .favInfo-details .fav-name, - #page-follows .follow-main .follow-action-bottom li, - .modal-wrapper .modal-title, - #page-fav .fav-sidenav .nav-title .text, - .be-dropdown-item, - a, - // span, - .create-wrapper .dialog-title, - .create-wrapper .create-input .command, - .create-wrapper .choose-action .back-btn, - .create-wrapper .choose-action .cancel-btn, - .create-wrapper .create-action .back-btn, - .create-wrapper .create-action .cancel-btn, - .edit-media-list .edit-mask .edit-board .head, - .edit-media-list .edit-mask .edit-board .edit-info .info-wrap .title, - .edit-media-list - .edit-mask - .edit-board - .edit-info - .upload-cover-wrapper - .cover-title, - .pgc-space-follow-item .bangumi-options .opt-list li, - #page-setting #setting-new-tag-btn, - #page-follows .follow-main .follow-action-top .back-to-info, - #page-video .play-all-btn, - #page-fav .fav-main .filter-item, - #page-fav .fav-main .filter-item .filter-type .be-dropdown-item span, - #page-fav .fav-main .fav-action-bottom li, - .sub-tabs span, - #page-follows .follow-tabs, - #page-index .col-2 .section .user-auth .profession-description, - .elec .elec-count, - #page-index .col-2 .section .user-auth .auth-description, - #page-series-index .channel-item .channel-name, - #page-collection-detail .channel-detail .content .breadcrumb .item, - .bangumi-pagelistbox .custom-right .custom-right-inner.custompage, - .feed-dynamic-header-title { + #page-index .col-2 .section .user-auth.no-auth .no-auth-title .goto-auth, + .user-info .user-info-title .info-title, + .article-title, + #page-index .channel.guest .channel-item .channel-title .channel-name, + #page-index .channel .channel-item .channel-name, + .large-item .title, + #pin-wrapper .pin-layer-vlist .small-item .title, + #page-setting .setting-privacy-item .setting-privacy-name, + #page-setting .setting-index-module, + .favInfo-box .favInfo-details .fav-name, + #page-follows .follow-main .follow-action-bottom li, + .modal-wrapper .modal-title, + #page-fav .fav-sidenav .nav-title .text, + .be-dropdown-item, + a, + // span, + .create-wrapper .dialog-title, + .create-wrapper .create-input .command, + .create-wrapper .choose-action .back-btn, + .create-wrapper .choose-action .cancel-btn, + .create-wrapper .create-action .back-btn, + .create-wrapper .create-action .cancel-btn, + .edit-media-list .edit-mask .edit-board .head, + .edit-media-list .edit-mask .edit-board .edit-info .info-wrap .title, + .edit-media-list .edit-mask .edit-board .edit-info .upload-cover-wrapper .cover-title, + .pgc-space-follow-item .bangumi-options .opt-list li, + #page-setting #setting-new-tag-btn, + #page-follows .follow-main .follow-action-top .back-to-info, + #page-video .play-all-btn, + #page-fav .fav-main .filter-item, + #page-fav .fav-main .filter-item .filter-type .be-dropdown-item span, + #page-fav .fav-main .fav-action-bottom li, + .sub-tabs span, + #page-follows .follow-tabs, + .elec .elec-count, + #page-index .col-2 .section .user-auth .auth-description, + #page-series-index .channel-item .channel-name, + #page-collection-detail .channel-detail .content .breadcrumb .item, + .bangumi-pagelistbox .custom-right .custom-right-inner.custompage, + .feed-dynamic-header-title, + .bb-comment .operation .opera-list, + .comment-bilibili-fold .operation .opera-list, + .bili-at-popup__user-name { color: var(--bew-text-1); } @@ -503,15 +578,36 @@ .v-search-result, .feed-dynamic-header-search, .section .count, - .list-create .text { + .list-create .text, + .btn-container .btn { color: var(--bew-text-2); } + .emoji.kaomoji { + color: white; + } + .section .count:before, - .series-item .item-title .qipapnum:before { + .series-item .item-title .qipapnum:before, + .follow-dialog-wrap .follow-dialog-window .layout { display: none; } + .emoji-box, + .emoji-box .emoji-tabs .tab-link:hover, + .comment-bilibili-con, + .static-popup, + .emoji-cover.selected, + .emoji, + .ps .ps__rail-x:hover, + .ps .ps__rail-y:hover, + .ps .ps__rail-x:focus, + .ps .ps__rail-y:focus, + .ps .ps__rail-x.ps--clicking, + .ps .ps__rail-y.ps--clicking { + background-color: var(--bew-bg); + } + #pin-wrapper #pin-layer, .i-mp-action-menu, .modal-wrapper, @@ -519,7 +615,11 @@ .dialog-wrapper, .edit-media-list .edit-mask .edit-board, .pgc-space-follow-item .bangumi-options .opt-list, - .bp-popup-panel { + .bp-popup-panel, + .follow-dialog-wrap .follow-dialog-window, + .follow-dialog-wrap .follow-dialog-window .title, + .follow-dialog-wrap .follow-dialog-window .content, + .bili-at-popup__user--selected { background-color: var(--bew-elevated-solid-1); } @@ -594,10 +694,40 @@ background-color: var(--bew-content-solid-1); } + .main-content .card-content .post-content.repost, + .main-content .card-content .post-content .original-card-content .article-container, + .main-content .card-content .deleted, + .card .more-panel, + .card .more-panel:after, + .bb-comment .operation .opera-list, + .comment-bilibili-fold .operation .opera-list, + .bili-at-popup { + background-color: var(--bew-content-solid-2); + } + + .emoji-box .emoji-tabs, + .bb-comment .operation .opera-list li:hover, + .comment-bilibili-fold .operation .opera-list li:hover, + .pagination { + background-color: var(--bew-content-1); + } + + .emoji-box .emoji-text:hover, + .emoji-box .emoji-tabs .tab-link.on { + background-color: var(--bew-content-2); + } + .elec .new-elec-trigger:hover { background-color: rgb(65 31 39); } + .emoji-box.bottom:before, + .btn-container .btn, + .follow-dialog-wrap .follow-dialog-window .content .group-list ul .follow-group-mask, + .comment-bilibili-con .btn .btn-cancel { + background: unset; + } + .be-dropdown-item:hover, .elec .elec-status, .elec .elec-status-bg, diff --git a/src/styles/adaptedStyles/videoPage.scss b/src/styles/adaptedStyles/videoPage.scss index 6c66c652..26dce15f 100644 --- a/src/styles/adaptedStyles/videoPage.scss +++ b/src/styles/adaptedStyles/videoPage.scss @@ -12,9 +12,48 @@ position: relative; } + .qrcode .van-qrcode { + padding: 5px; + } + + .qrcode .van-qrcode canvas { + width: 90px; + height: 90px; + } + // #region theme color adaption part // Increase the priority of the style inside by writing a non-existent selector in `:not()` :not(fdjslfds) { + .content .group-list li input[type="checkbox"] + i { + border-width: 1px; + border-radius: 5px; + border-color: #bec3cc; + } + + .coin-operated-m-exp .like-checkbox input[type="checkbox"]:checked + i { + border-radius: 3px; + } + + .content .group-list li input[type="checkbox"]:checked + i, + .content .group-list li input[type="checkbox"]:checked:hover + i, + .coin-operated-m-exp .like-checkbox input[type="checkbox"]:checked + i, + .video-share-popover + .video-share-dropdown + .dropdown-top + .dropdown-top-left + .capture-bar + .bar-left + > label + #check-timestamp:checked::after { + background: var(--bew-theme-color) url(//s1.hdslb.com/bfs/static/jinkela/note-list/assets/ic_check.svg) no-repeat + 50% / 9px; + } + + .content .group-list li input[type="checkbox"] + i, + .content .group-list li input[type="checkbox"]:hover + i { + background: unset; + } + .note-list .list-note-operation, .note-pc .note-container .note-header .note-operation, .note-up .up-desc-container .desc-top .attention-btn-container { @@ -46,6 +85,7 @@ background-color: var(--bew-theme-color-80) !important; } + .collection-m-exp .content .group-list .add-group .input-group .submit, .follow-dialog-wrap-exp .follow-dialog-window .content .group-list .add-group .input-group .submitGroup { background-color: var(--bew-theme-color-10); } @@ -82,7 +122,11 @@ .coin-operated-m-exp .mc-box:hover, .coin-operated-m-exp .mc-box.on, - .note-pc .note-container .note-header .note-operation { + .note-pc .note-container .note-header .note-operation, + .content .group-list li:hover input[type="checkbox"] + i, + .content .group-list li input[type="checkbox"]:checked + i, + .content .group-list li input[type="checkbox"]:checked:hover + i, + .coin-operated-m-exp .like-checkbox input[type="checkbox"]:checked + i { border-color: var(--bew-theme-color); } @@ -169,8 +213,7 @@ .bpx-player-viewpoint-menu-item-active, .cur-play-icon, .playing-gif, - .multi-page-v1 .cur-list .list-box li.on img, - .coin-operated-m-exp .like-checkbox input[type="checkbox"]:checked + i { + .multi-page-v1 .cur-list .list-box li.on img { filter: var(--bew-filter-icon-glow); } }