Update dark style and image viewer style

style/style-dark-slice-2.min.scss

@@ -1 +1 @@
-.recom-wrap .no-result,.side-bar-popup-cntr,.link-popup-panel,.timeline-header,.timeline-wrapper,.tl-head .tl-day,li.season-item .season-body .season-title span.follow,.season-timer .current-timer:before,.bili-header-m .i_menu_login,.slot-ctnr .panel,.news-list .news-item:hover,.publish-panel .publish-list .publish-item:hover,#canvas-detail-comment-ctnr,.comment-ctnr,.bili-header-m .nav-menu .nav-con .nav-item .bml-box,.danmaku-menu,.bilibili-player-context-menu-container.black,.bilibili-player-contextmenu-subwrapp>span.hover,.tab-box .item.active::after,.tab-box .item.active::before,.guard-desc-box,.buy-info-box,.live-module .tab-box{background-color:#222!important;}.progress-bar-body,.more-btn-cntr,.timer-wrap,.fjw-random,.slot-ctnr .panel li:hover,.user-panel-ctnr .exit-btn,.news-notice-panel,.news-list .news-item,.article-content-ctnr,.works-ctnr,.author-info,.dashboard,.sidebar-canvas,.paging-box-big .next,.paging-box-big .prev,.bilibili-player-ending-panel-box-functions .bui-button.bui-button-disabled,.bilibili-player-context-menu-container.black ul>li.hover,.bilibili-player-context-menu-container.black ul>li a:hover,.intimacy-bar,.tab-box{background-color:#444!important;}.tl-head .tl-day .indicator,.season-timeline .season-group .group-time:before{background-color:#aaa!important;}.news-list .news-item .date,.empty-hint,.article-content-ctnr>hr,.author-info .communicate-btn{background-color:transparent!important;}.introduction-text,.vote-percentage,.bread-crumb ul li a,.sub-nav-m ul li a,.up-info .up-info-tip,.bili-header-m .i_menu_login .reg,.live-ctn .live-attch .host,.dynamic-m .title span:not(.sp),.history-tag,li.no-data,.bilibili-player-ending-panel-box-functions .bui-button.bui-button-disabled,.paging-box-big .page-jump,.coin-operated-m .coin-bottom .tips,.select-month .tip,.act-info,.i-live .i-live-off-guest{color:#aaa!important;}.section-title>a.t,.section>.section-title,.link-popup-panel,.more-btn-text,.chat-history-panel .gift-item .gift-count,.chat-history-panel .hover-panel>span,.is-max .vote-percentage,.tl-head .tl-day.today span,li.season-item .season-body .season-title,.channel-m,.hot-box li .txt,.bili-header-m .i_menu_login .tip,.user-info-name,.slot-ctnr a,.user-panel-ctnr .exit-btn,.more:hover .text,.more .icon-font,.empty-hint .hint-text,.live-ctn .live-attch .title,button.button.more,.dashboard li .text,.dashboard li.collection .text,.dashboard li.share .text,.room-list .list-item .uname,.chat-history-panel .chat-item,.paging-box-big .next,.paging-box-big .prev,.tab-box .item.active,.tab-box .item,.tab-box .item .title,.tab-box .item .desc,.buy-info-box .left-part,.bilibili-player-ending-panel-box-functions .bilibili-player-upinfo-electric.little,.pk-rank.side-bar-icon+.size-bar-text,.gui-settings-button:not(.save){color:#eee!important;}.gift-item-wrap .num,.side-bar-popup-cntr,.timeline-header .tl-weeks:after,.bili-header-m .i_menu_login,.article-content-ctnr,.works-ctnr,.comment-ctnr,.author-info,.dashboard,button.button.more,.dashboard li.like,.bilibili-player-ending-panel-box-functions .bilibili-player-upinfo-electric,.paging-box-big .next,.paging-box-big .prev,.buy-info-box{border-color:transparent!important;}.season-timeline .season-group,.season-timeline .season-group .group-time:before,li.history,.elec .elec-monthly-count{border-color:#aaa!important;}.hot-live .room-list{    border-color: #444 !important}.tl-head .today .day-of-week,.svg-icon.top1{filter:brightness(0) invert(1)!important;}.wrapper .modal-close:hover,.coin-operated-m .close:hover{filter:$blueImageFilter!important;}.season-timer .current-timer:before,li.season-item .season-body .season-title span.follow,.user-panel-ctnr .ctrl-btn .svg-icon,.publish-panel .publish-list .publish-item a{filter:$pinkImageFilter!important;}.wrapper .modal-body .elec-protocol .checkbox.checked,.wrapper .modal-close,.coin-operated-m .close,.i-live .i-live-m,.tag-list .tag-icon,.i-live .i-live-off-guest a .i-live-arrow{filter:grayscale(1)!important;}.i-live .i-live-fo-btn,.i-live .i-live-unfo-btn{border-radius:4px!important;}.timeline-header,.timeline-wrapper,.timeline-header .tl-weeks{box-shadow:none!important;}.side-bar-popup-cntr,.link-popup-panel,.bili-header-m .i_menu_login{box-shadow:0px 1px 20px 2px $customStyleColor30!important;}.side-bar-popup-cntr>.arrow,.empty-hint .hint-img{display:none!important;}.link-input:focus{border-color:$customStyleColor!important;}.progress-bar-inner,.tl-head .tl-day.today .indicator,.primary-menu .nav-menu .channel.on::after,.hot-box li .tag-type,.bili-header-m .i_menu_login .login-btn,.news-list .news-item .type,.author-info .favourite-btn,.live-status.on-live,.live-status.on-live:hover,.paging-box-big .next:hover,.paging-box-big .prev:hover,.bilibili-player-ending-panel-box-functions .bilibili-player-upinfo-electric,.bui-button.bui-button-blue,.bui-button.bui-button-gray3:hover,.intimacy-bar>span,.h .h-follow{background-color:$customStyleColor!important;}.union-cntr a,.title-link,.link-popup-panel .title-ctnr .popup-title,.user-info-name.active,.bread-crumb ul li.on a,.bread-crumb ul li:hover a,li.season-item .season-body .season-title:hover,li.season-item .season-body .season-desc.published,.season-timer .season-label,.season-timer .current-timer,.sub-nav-m ul li.on a,.sub-nav-m ul li a:hover,.hot-box li:hover .txt,.live-module .zone-title .headline .online span,.bilibili-player-video-sendbar .bilibili-player-video-danmaku-wrap a,.slot-ctnr .panel li:hover,.user-panel-ctnr .exit-btn:hover,.author-info .communicate-btn,.live-ctn .live-attch .title:hover,.live-ctn .live-attch .host:hover,button.button.more:hover,.author-info .link-pink:hover,.link-footer a:hover,.chat-history-panel .chat-item.welcome-guard .username,.bilibili-player-ending-panel-box-functions div.active,.bilibili-player-ending-panel-box-functions div.active:hover,.bilibili-player-ending-panel-box-recommend-add-watchlater .icon-22wait-choice,.coin-operated-m .mc-box.on .c-num,.bilibili-player-context-menu-container span.bppl-state-selected,.control-panel-ctnr .title,.buy-detail .rights,.i-live:hover .i-live-title,.i-live .i-live-fo-btn,.room-introduction-content a{color:$customStyleColor!important;}.hot-box li .tag-type,.bili-header-m .i_menu_login .login-btn,.bili-header-m .i_menu_login .reg a,.news-list .news-item .type,.author-info .favourite-btn,.live-status.on-live,.paging-box-big .next:hover,.paging-box-big .prev:hover,.bui-button.bui-button-blue,.bui-button.bui-button-gray3:hover,.h .h-follow{color:$foreground!important;}.bilibili-player-ending-panel-box-functions div.active .bp-svgicon,.bilibili-player-ending-panel-box-functions div.active:hover .bp-svgicon{fill:$customStyleColor!important;}
+.recom-wrap .no-result,.side-bar-popup-cntr,.link-popup-panel,.timeline-header,.timeline-wrapper,.tl-head .tl-day,li.season-item .season-body .season-title span.follow,.season-timer .current-timer:before,.bili-header-m .i_menu_login,.slot-ctnr .panel,.news-list .news-item:hover,.publish-panel .publish-list .publish-item:hover,#canvas-detail-comment-ctnr,.comment-ctnr,.bili-header-m .nav-menu .nav-con .nav-item .bml-box,.danmaku-menu,.bilibili-player-context-menu-container.black,.bilibili-player-contextmenu-subwrapp>span.hover,.tab-box .item.active::after,.tab-box .item.active::before,.guard-desc-box,.buy-info-box,.live-module .tab-box{background-color:#222!important;}.progress-bar-body,.more-btn-cntr,.timer-wrap,.fjw-random,.slot-ctnr .panel li:hover,.user-panel-ctnr .exit-btn,.news-notice-panel,.news-list .news-item,.article-content-ctnr,.works-ctnr,.author-info,.dashboard,.sidebar-canvas,.paging-box-big .next,.paging-box-big .prev,.bilibili-player-ending-panel-box-functions .bui-button.bui-button-disabled,.bilibili-player-context-menu-container.black ul>li.hover,.bilibili-player-context-menu-container.black ul>li a:hover,.intimacy-bar,.tab-box{background-color:#444!important;}.tl-head .tl-day .indicator,.season-timeline .season-group .group-time:before{background-color:#aaa!important;}.news-list .news-item .date,.empty-hint,.article-content-ctnr>hr,.author-info .communicate-btn{background-color:transparent!important;}.introduction-text,.vote-percentage,.bread-crumb ul li a,.sub-nav-m ul li a,.up-info .up-info-tip,.bili-header-m .i_menu_login .reg,.live-ctn .live-attch .host,.dynamic-m .title span:not(.sp),.history-tag,li.no-data,.bilibili-player-ending-panel-box-functions .bui-button.bui-button-disabled,.paging-box-big .page-jump,.coin-operated-m .coin-bottom .tips,.select-month .tip,.act-info,.i-live .i-live-off-guest{color:#aaa!important;}.section-title>a.t,.section>.section-title,.link-popup-panel,.more-btn-text,.chat-history-panel .gift-item .gift-count,.chat-history-panel .hover-panel>span,.is-max .vote-percentage,.tl-head .tl-day.today span,li.season-item .season-body .season-title,.channel-m,.hot-box li .txt,.bili-header-m .i_menu_login .tip,.user-info-name,.slot-ctnr a,.user-panel-ctnr .exit-btn,.more:hover .text,.more .icon-font,.empty-hint .hint-text,.live-ctn .live-attch .title,button.button.more,.dashboard li .text,.dashboard li.collection .text,.dashboard li.share .text,.room-list .list-item .uname,.chat-history-panel .chat-item,.paging-box-big .next,.paging-box-big .prev,.tab-box .item.active,.tab-box .item,.tab-box .item .title,.tab-box .item .desc,.buy-info-box .left-part,.bilibili-player-ending-panel-box-functions .bilibili-player-upinfo-electric.little,.pk-rank.side-bar-icon+.size-bar-text,.gui-settings-button:not(.save){color:#eee!important;}.gift-item-wrap .num,.side-bar-popup-cntr,.timeline-header .tl-weeks:after,.bili-header-m .i_menu_login,.article-content-ctnr,.works-ctnr,.comment-ctnr,.author-info,.dashboard,button.button.more,.dashboard li.like,.bilibili-player-ending-panel-box-functions .bilibili-player-upinfo-electric,.paging-box-big .next,.paging-box-big .prev,.buy-info-box{border-color:transparent!important;}.season-timeline .season-group,.season-timeline .season-group .group-time:before,li.history,.elec .elec-monthly-count{border-color:#aaa!important;}.hot-live .room-list{    border-color: #444 !important}.tl-head .today .day-of-week,.svg-icon.top1{filter:brightness(0) invert(1)!important;}.wrapper .modal-close:hover,.coin-operated-m .close:hover,.bili-header-m .bilibili-suggest .cancel:hover{filter:$blueImageFilter!important;}.season-timer .current-timer:before,li.season-item .season-body .season-title span.follow,.user-panel-ctnr .ctrl-btn .svg-icon,.publish-panel .publish-list .publish-item a{filter:$pinkImageFilter!important;}.wrapper .modal-body .elec-protocol .checkbox.checked,.wrapper .modal-close,.coin-operated-m .close,.i-live .i-live-m,.tag-list .tag-icon,.i-live .i-live-off-guest a .i-live-arrow{filter:grayscale(1)!important;}.i-live .i-live-fo-btn,.i-live .i-live-unfo-btn{border-radius:4px!important;}.timeline-header,.timeline-wrapper,.timeline-header .tl-weeks{box-shadow:none!important;}.side-bar-popup-cntr,.link-popup-panel,.bili-header-m .i_menu_login{box-shadow:0px 1px 20px 2px $customStyleColor30!important;}.side-bar-popup-cntr>.arrow,.empty-hint .hint-img{display:none!important;}.link-input:focus{border-color:$customStyleColor!important;}.progress-bar-inner,.tl-head .tl-day.today .indicator,.primary-menu .nav-menu .channel.on::after,.hot-box li .tag-type,.bili-header-m .i_menu_login .login-btn,.news-list .news-item .type,.author-info .favourite-btn,.live-status.on-live,.live-status.on-live:hover,.paging-box-big .next:hover,.paging-box-big .prev:hover,.bilibili-player-ending-panel-box-functions .bilibili-player-upinfo-electric,.bui-button.bui-button-blue,.bui-button.bui-button-gray3:hover,.intimacy-bar>span,.h .h-follow{background-color:$customStyleColor!important;}.union-cntr a,.title-link,.link-popup-panel .title-ctnr .popup-title,.user-info-name.active,.bread-crumb ul li.on a,.bread-crumb ul li:hover a,li.season-item .season-body .season-title:hover,li.season-item .season-body .season-desc.published,.season-timer .season-label,.season-timer .current-timer,.sub-nav-m ul li.on a,.sub-nav-m ul li a:hover,.hot-box li:hover .txt,.live-module .zone-title .headline .online span,.bilibili-player-video-sendbar .bilibili-player-video-danmaku-wrap a,.slot-ctnr .panel li:hover,.user-panel-ctnr .exit-btn:hover,.author-info .communicate-btn,.live-ctn .live-attch .title:hover,.live-ctn .live-attch .host:hover,button.button.more:hover,.author-info .link-pink:hover,.link-footer a:hover,.chat-history-panel .chat-item.welcome-guard .username,.bilibili-player-ending-panel-box-functions div.active,.bilibili-player-ending-panel-box-functions div.active:hover,.bilibili-player-ending-panel-box-recommend-add-watchlater .icon-22wait-choice,.coin-operated-m .mc-box.on .c-num,.bilibili-player-context-menu-container span.bppl-state-selected,.control-panel-ctnr .title,.buy-detail .rights,.i-live:hover .i-live-title,.i-live .i-live-fo-btn,.room-introduction-content a{color:$customStyleColor!important;}.hot-box li .tag-type,.bili-header-m .i_menu_login .login-btn,.bili-header-m .i_menu_login .reg a,.news-list .news-item .type,.author-info .favourite-btn,.live-status.on-live,.paging-box-big .next:hover,.paging-box-big .prev:hover,.bui-button.bui-button-blue,.bui-button.bui-button-gray3:hover,.h .h-follow{color:$foreground!important;}.bilibili-player-ending-panel-box-functions div.active .bp-svgicon,.bilibili-player-ending-panel-box-functions div.active:hover .bp-svgicon{fill:$customStyleColor!important;}

style/style-dark-slice-2.scss

@@ -195,7 +195,8 @@ li.history,
     filter: brightness(0) invert(1) !important;
 }
 .wrapper .modal-close:hover,
-.coin-operated-m .close:hover
+.coin-operated-m .close:hover,
+.bili-header-m .bilibili-suggest .cancel:hover
 {
     filter: $blueImageFilter !important;
 }

style/style-image-viewer.min.scss

@@ -1 +1 @@
-.image-viewer-container{background:rgba(0,0,0,0.85);width:100%;height:100%;position:fixed;top:0;left:0;z-index:100000;display:none;justify-content:center;align-items:center;}@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)){.image-viewer-container{background:rgba(0,0,0,0.618);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);}}.image-viewer-container.opened{display:flex;}.image-viewer{width:90%;height:90%;display:grid;grid-template-columns:auto 48px;grid-template-rows:48px auto 48px;grid-template-areas:"image close" "image ." "image download";grid-column-gap:12px;justify-items:center;justify-content:stretch;align-items:center;align-content:stretch;}.image-viewer .image{grid-area:image;width:auto;height:auto;max-width:100%;max-height:100%;}.image-viewer .close{grid-area:close;}.image-viewer .download{grid-area:download;}.icon{cursor:pointer;width:100%;height:100%;}.icon path{fill:#eee;}
+.image-viewer-container{background:rgba(0,0,0,0.85);width:100%;height:100%;position:fixed;top:0;left:0;z-index:100000;display:none;justify-content:center;align-items:center;}@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)){.image-viewer-container{background:rgba(0,0,0,0.618);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);}}.image-viewer-container.opened{display:flex;}.image-viewer{width:90%;height:90%;display:grid;grid-template-columns:auto 48px;grid-template-rows:48px auto 48px;grid-template-areas:"image close" "image ." "image download";grid-column-gap:12px;justify-items:center;justify-content:stretch;align-items:center;align-content:stretch;}.image-viewer .image{grid-area:image;width:auto;height:auto;max-width:100%;max-height:100%;}.image-viewer .close{grid-area:close;}.image-viewer .download{grid-area:download;}.image-viewer-icon{cursor:pointer;width:100%;height:100%;}.image-viewer-icon svg{max-width:48px;max-height:48px;}.image-viewer-icon path{fill:#eee;transition:all 0.2s;transform-origin:center;}.image-viewer-icon:hover path{fill:$customStyleColor;transform:scale(1.2);}

style/style-image-viewer.scss

@@ -55,13 +55,25 @@
 {
     grid-area: download;
 }
-.icon
+.image-viewer-icon
 {
     cursor: pointer;
     width: 100%;
     height: 100%;
 }
-.icon path
+.image-viewer-icon svg
+{
+    max-width: 48px;
+    max-height: 48px;
+}
+.image-viewer-icon path
 {
     fill: #eee;
+    transition: all 0.2s;
+    transform-origin: center;
+}
+.image-viewer-icon:hover path
+{
+    fill: $customStyleColor;
+    transform: scale(1.2);
 }

utils/image-viewer.html

@@ -1,13 +1,13 @@
 <div class="image-viewer-container">
     <div class="image-viewer">
         <img class="image" />
-        <a class="close icon">
+        <a class="close image-viewer-icon" title="关闭">
             <svg viewBox="0 0 24 24">
             <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
             />
             </svg>
         </a>
-        <a target="_blank" class="download icon">
+        <a target="_blank" class="download image-viewer-icon" title="下载">
             <svg viewBox="0 0 24 24">
                 <path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
             </svg>