Files
BewlyBewly/src/styles/adaptedStyles/articlesPage.scss
2024-02-12 16:40:41 +08:00

357 lines
10 KiB
SCSS

.bewly-design.articlePage {
.right-side-bar .catalog .catalog-text {
line-height: unset;
}
.right-side-bar .catalog{
justify-content: center;
}
body {
background-color: unset;
}
// #region theme color adaption part
// Increase the priority of the style inside by writing a non-existent selector in :not()
:not(fdjslfds) {
.page-content .right-side .rank-module .rank-list .item a:hover,
.page-content
.left-side
.article-list
.article-list-holder
.article-item:hover
.item-holder
.article-title,
.page-content .right-side .rank-module .rank-tabs-bar .rank-tabs-list li.on,
.page-content .right-side .up-list .up-item .info-holder .head .follow,
.page-content
.right-side
.up-list
.up-item
.info-holder
.head
.nick-name:hover,
.page-content
.right-side
.up-list
.up-item
.info-holder
.dynamic
.arc-title:hover,
.categories-bar .tag-item.on,
.nav-tab-bar .tab-item.on,
.nav-tab-bar .tab-item.on a,
.page-content
.left-side
.partitio-name
.filter
.filter-btn-lst
.filter-btn:hover,
.page-content .right-side .rank-module .complete-rank:hover,
.article-detail .topic-info,
.right-side-bar .side-toolbar .toolbar-item:hover .iconfont,
.right-side-bar .side-toolbar .toolbar-item:hover > .toolbar-item__num,
.right-side-bar .catalog:hover .catalog-text,
.right-side-bar .catalog:hover .icon-catalog,
.right-side-bar .catalog-panel .catalog-item:hover,
.right-side-bar .catalog-panel .catalog-item--on .icon-bilibili-tv,
.nav-tab-bar .tab-item:hover,
.video-link__to,
.interaction-info .hover-item:hover,
.interaction-info .hover-item:hover i {
color: var(--bew-theme-color);
}
.right-side-bar .catalog-panel .catalog-item--on {
color: var(--bew-theme-color) !important;
}
.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 {
background-color: var(--bew-theme-color);
}
.page-content .right-side .rank-module .rank-tabs-bar .rank-tabs-list li.on,
.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 {
border-color: var(--bew-theme-color);
}
.nav-tab-bar .logo,
.article-detail .topic-info:before {
filter: var(--bew-filter-icon-glow);
}
.nav-tab-bar .tab-item.on {
// width: 28px;
height: 28px;
overflow: hidden;
&::before {
transform: translateY(-28px);
filter: drop-shadow(0 28px 0 var(--bew-theme-color));
}
}
.page-content .left-side .article-list .tips-holder {
position: relative;
overflow: hidden;
}
.page-content .left-side .article-list .tips-holder .no-more {
transform: translateX(-680px);
filter: drop-shadow(680px 0 0 var(--bew-theme-color));
}
}
// #endregion
// #region dark mode adaption part
&.dark {
.nav-tab-bar .tab-item,
.page-content .left-side .partitio-name,
.page-content .right-side .rank-module .rank-tabs-bar label,
.page-content
.left-side
.article-list
.article-list-holder
.article-item
.item-holder
.article-title-holder,
.page-content .right-side .rank-module .rank-list .item a,
.page-content .right-side .up-list .title,
.page-content .right-side .up-list .up-item .info-holder .head .nick-name,
.page-content .right-side .more .top-bar,
.page-content .right-side .more .help .title,
.page-content .right-side .more .link .title,
.article-container .title-container .title,
.normal-article-holder,
.article-up-info .up-name,
.right-side-bar .catalog-panel__title,
.right-side-bar .catalog-panel .catalog-item,
.fixed-top-header .inner > p,
.fixed-top-header .inner .up-info,
.page-content
.right-side
.search-module
.search-block
.search-word-panel
.history-item
a,
.categories-bar .tag-item,
.page-content .right-side .rank-module .complete-rank,
.article-detail .bangumi-rate-panel .info .title,
.page-content .right-side .up-list .fresh-btn,
.ql-container,
.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 {
color: var(--bew-text-1);
}
span[style*="color:#000000"] {
color: var(--bew-text-1) !important;
}
.page-content
.left-side
.article-list
.article-list-holder
.article-item
.item-holder
.article-desc,
.page-content .right-side .up-list .up-item .info-holder .dynamic,
.page-content .right-side .more .help .info,
.page-content .right-side .more .link .info,
.article-read-info .publish-text,
.article-up-info .avatar-info-pannel,
.article-read-info *,
.right-side-bar .catalog,
.right-side-bar .side-toolbar .toolbar-item .iconfont,
.right-side-bar .side-toolbar .toolbar-item,
.right-side-bar .to-top .iconfont,
.right-side-bar .catalog-panel__info,
.page-content .right-side .search-module .search-block .search-word-panel,
.article-breadcrumb .breadcrumb-title,
.article-breadcrumb .breadcrumb-name,
.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 {
color: var(--bew-text-2);
}
.page-content
.left-side
.article-list
.article-list-holder
.article-item
.item-holder
.article-info-bar
*,
.page-content
.right-side
.up-list
.up-item
.info-holder
.dynamic
.arc-title,
.page-content
.left-side
.article-list
.article-list-holder
.article-item
.item-holder
.article-title-holder
.list-mark,
.interaction-info .toolbar .share-box,
.interaction-info,
.followed {
color: var(--bew-text-3);
}
.page-content .left-side .article-list .article-list-holder .article-item,
.page-content .right-side .rank-module .rank-list .item,
.page-content .right-side .up-list,
.article-up-info,
.page-content
.right-side
.up-list
.up-item
.info-holder
.head
.follow.followed,
.modal-box-holder .modal-box .modal-footer .modal-btn-default,
.ql-container,
.view-note .note-content .ql-container .ql-editor,
.bili-dialog-bomb .appeal-box .header,
.bili-dialog-bomb .appeal-box .submit,
.bili-dialog-bomb .appeal-box .submit .cancel,
.bili-button.primary.plain {
background-color: transparent;
}
.article-container,
.page-content .right-side .rank-module .complete-rank,
.comment-wrapper .comment-m {
background-color: var(--bew-content-solid-1);
}
.comment-wrapper .comment-m {
--bew-bg: var(--bew-content-solid-1);
}
.right-side-bar .to-top,
.right-side-bar .side-toolbar,
.right-side-bar .catalog,
.right-side-bar .catalog:after,
.right-side-bar .catalog-panel,
.page-content .right-side .search-module .search-block .search-word-panel,
.page-content
.right-side
.search-module
.search-block
.search-word-panel
.panel-title
p
span,
.page-content .left-side .partitio-name .filter .filter-btn-lst,
.to-top,
.bili-dialog-bomb .appeal-box {
background-color: var(--bew-elevated-solid-1);
}
.fixed-top-header,
.modal-box-holder .modal-box {
background-color: var(--bew-elevated-solid-2);
}
.page-content .right-side .rank-module .rank-list .item .rank-index,
.article-read-info .spoiler,
.page-content .right-side .up-list .fresh-btn {
background-color: var(--bew-fill-1);
}
.right-side-bar .catalog-panel .catalog-item:hover,
.page-content
.right-side
.search-module
.search-block
.search-word-panel
.history-item:hover,
.page-content
.right-side
.search-module
.search-block
.search-word-panel
.suggest-item:hover,
.followed,
.van-popover.van-followed .follow_dropdown li:hover {
background-color: var(--bew-fill-2);
}
.page-content .left-side .article-list .article-list-holder .article-item,
.page-content .right-side .up-list .title,
.page-content .right-side .rank-module .rank-tabs-bar,
.page-content .right-side .more .top-bar,
.article-container__content,
.page-content
.left-side
.article-list
.article-list-holder
.article-item
.item-holder
.article-title-holder
.list-mark,
.page-content .right-side .search-module .search-block,
.page-content .right-side .search-module .search-block .search-word-panel,
.categories-bar,
.modal-box-holder .modal-box .modal-head .modal-title,
.modal-box-holder .modal-box .modal-footer .modal-btn-default,
.modal-box-holder .modal-box .modal-footer .modal-btn-primary,
.page-content .right-side .up-list .fresh-btn,
.page-content
.right-side
.search-module
.search-block
.search-word-panel
.panel-title
.split-line,
.bili-dialog-bomb .appeal-box .header,
.bili-dialog-bomb
.appeal-box
.wrap
.container
.textarea
.textarea-wrap
textarea,
.bili-dialog-bomb .appeal-box .submit .cancel,
.bili-dialog-bomb .appeal-box .submit,
.van-popover.van-followed,
.followed {
border-color: var(--bew-border-color);
}
.to-top {
border-color: var(--bew-elevated-solid-1);
}
.nav-tab-bar .tab-item:before {
filter: invert(1) hue-rotate(180deg);
}
.page-content .right-side .up-list .fresh-btn:before {
filter: brightness(2) contrast(0);
}
}
// #endregion
}