renun/BewlyBewly
1
0
Fork 0
mirror of https://github.com/BewlyBewly/BewlyBewly.git synced 2025-04-14 13:15:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: rename content color variable names

Browse Source
This commit is contained in:
Hakadao
2024-06-27 01:24:19 +08:00
parent 4fe4c92733
commit 021c7c4dcf
26 changed files with 82 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Button.vue
View File

@@ -52,8 +52,8 @@ function handleClick(evt: MouseEvent) {
<style lang="scss" scoped>
.b-button {
--b-button-color: var(--bew-content-solid-1);
--b-button-color-hover: var(--bew-content-solid-1-hover);
--b-button-color: var(--bew-content-solid);
--b-button-color-hover: var(--bew-content-solid-hover);
--b-button-text-color: var(--bew-text-1);
--b-button-radius: var(--bew-radius);
--b-button-padding: 14px;

6
src/components/Dock/Dock.vue
View File

@@ -256,7 +256,7 @@ function handleBackToTopOrRefresh() {
.dock-content-inner {
--uno: "duration-300 ease-in-out transform-gpu";
--uno: "p-2 m-2 bg-$bew-content-2 dark:bg-$bew-elevated";
--uno: "p-2 m-2 bg-$bew-content-alt dark:bg-$bew-elevated";
--uno: "flex flex-col gap-2 shrink-0";
--uno: "rounded-full border-1 border-$bew-border-color";
box-shadow: var(--bew-shadow-edge-glow-1), var(--bew-shadow-2);
@@ -273,7 +273,7 @@ function handleBackToTopOrRefresh() {
--uno: "md:w-45px w-35px md:h-45px h-35px";
--uno: "grid place-items-center";
--uno: "filter-$bew-filter-glass-1";
--uno: "bg-$bew-elevated hover:bg-$bew-content-1-hover";
--uno: "bg-$bew-elevated hover:bg-$bew-content-hover";
--uno: "rounded-full shadow-$bew-shadow-2 border-1 border-$bew-border-color";
backdrop-filter: var(--bew-filter-glass-1);
@@ -309,7 +309,7 @@ function handleBackToTopOrRefresh() {
--uno: "aspect-square relative";
--uno: "leading-0";
--uno: "rounded-60px antialiased";
--uno: "bg-$bew-content-1 hover:bg-$bew-fill-2 cursor-pointer";
--uno: "bg-$bew-content hover:bg-$bew-fill-2 cursor-pointer";
--uno: "dark:bg-$bew-fill-1 dark-hover:bg-$bew-fill-4";
box-shadow: var(--bew-shadow-edge-glow-1), var(--bew-shadow-1);

4
src/components/SearchBar/SearchBar.vue
View File

@@ -343,8 +343,8 @@ async function handleClearSearchHistory() {
}
#search-wrap {
--b-search-bar-color: var(--bew-content-1);
--b-search-bar-color-hover: var(--bew-content-1-hover);
--b-search-bar-color: var(--bew-content);
--b-search-bar-color-hover: var(--bew-content-hover);
--b-search-bar-color-focus: var(--b-search-bar-color);
@mixin card-content {

4
src/components/Settings/Settings.vue
View File

@@ -137,7 +137,7 @@ function setCurrentTitle() {
backdrop-filter: var(--bew-filter-glass-2);
"
flex="~ gap-2 col" rounded="30px hover:25px" p-2 shadow
bg="$bew-content-2 hover:$bew-elevated dark:$bew-elevated dark-hover:$bew-elevated"
bg="$bew-content-alt hover:$bew-elevated dark:$bew-elevated dark-hover:$bew-elevated"
scale="group-hover:105" duration-300 overflow-hidden antialiased transform-gpu
border="1 $bew-border-color"
>
@@ -174,7 +174,7 @@ function setCurrentTitle() {
--un-shadow: var(--bew-shadow-4), var(--bew-shadow-edge-glow-2);
backdrop-filter: var(--bew-filter-glass-2);
"
relative overflow="x-hidde" w-full h-full bg="$bew-content-2 dark:$bew-elevated"
relative overflow="x-hidde" w-full h-full bg="$bew-content-alt dark:$bew-elevated"
shadow rounded="$bew-radius" border="1 $bew-border-color" transform-gpu
>
<header

4
src/components/Settings/components/ChangeWallpaper.vue
View File

@@ -162,7 +162,7 @@ function handleRemoveCustomWallpaper() {
>
<button
style="backdrop-filter: var(--bew-filter-glass-1);"
bg="$bew-content-1" rounded-full w-28px h-28px
bg="$bew-content" rounded-full w-28px h-28px
grid place-items-center
@click="handleUploadWallpaper"
>
@@ -170,7 +170,7 @@ function handleRemoveCustomWallpaper() {
</button>
<button
style="backdrop-filter: var(--bew-filter-glass-1);"
bg="$bew-content-1" rounded-full w-28px h-28px
bg="$bew-content" rounded-full w-28px h-28px
grid place-items-center
@click="handleRemoveCustomWallpaper"
>

2
src/components/Settings/components/ChildSettingsDialog.vue
View File

@@ -24,7 +24,7 @@ function handleClose() {
--un-shadow: var(--bew-shadow-3) var(--bew-shadow-edge-glow-2);
backdrop-filter: var(--bew-filter-glass-2);
"
pos="fixed top-1/2 left-1/2" bg="$bew-content-2 dark:$bew-elevated" rounded="$bew-radius"
pos="fixed top-1/2 left-1/2" bg="$bew-content-alt dark:$bew-elevated" rounded="$bew-radius"
transform="translate--1/2 translate-z-0 gpu" z-2 shadow overflow="x-hidden y-overlay" w="$b-dialog-width"
h="$b-dialog-height" antialiased
>

2
src/components/Settings/components/SettingsItemGroup.vue
View File

@@ -17,7 +17,7 @@ defineProps<{
<main
style="box-shadow: var(--bew-shadow-edge-glow-1), var(--bew-shadow-1);"
mt-2 px-4 mx--4 rounded="$bew-radius"
bg="$bew-content-1 dark:$bew-fill-1"
bg="$bew-content dark:$bew-fill-1"
shadow="$bew-shadow-edge-glow-1"
>
<slot />

4
src/components/TopBar/components/FavoritesPop.vue
View File

@@ -152,7 +152,7 @@ defineExpose({
pos="fixed top-0 left-0"
w="full"
h-50px
bg="$bew-content-1"
bg="$bew-content"
z="2"
un-border="!rounded-t-$bew-radius"
>
@@ -210,7 +210,7 @@ defineExpose({
<Loading
v-if="isLoading && favoriteResources.length === 0"
pos="absolute left-0"
bg="$bew-content-1"
bg="$bew-content"
z="1"
w="full"
h="full"

2
src/components/TopBar/components/HistoryPop.vue
View File

@@ -228,7 +228,7 @@ function getHistoryList(type: Business, view_at = 0 as number) {
<Empty
v-if="!isLoading && historys.length === 0"
pos="absolute top-0 left-0"
bg="$bew-content-1"
bg="$bew-content"
z="0" w="full" h="full"
flex="~ items-center"
/>

2
src/components/TopBar/components/MomentsPop.vue
View File

@@ -332,7 +332,7 @@ defineExpose({
<Empty
v-if="!isLoading && moments.length === 0"
pos="absolute top-0 left-0"
bg="$bew-content-1"
bg="$bew-content"
z="0" w="full" h="full"
flex="~ items-center"
/>

2
src/components/TopBar/components/WatchLaterPop.vue
View File

@@ -112,7 +112,7 @@ function getAllWatchLaterList() {
<Empty
v-if="!isLoading && watchLaterList.length === 0"
pos="absolute top-0 left-0"
bg="$bew-content-1"
bg="$bew-content"
z="0" w="full" h="full"
flex="~ items-center"
/>

2
src/contentScripts/views/History/History.vue
View File

@@ -482,7 +482,7 @@ function jumpToLoginPage() {
p="x-14px"
lh-35px h-35px
rounded="$bew-radius"
bg="$bew-content-solid-1"
bg="$bew-content-solid"
shadow="$bew-shadow-1"
outline-none
w-full

6
src/styles/adaptedStyles/animePage.scss
View File

@@ -85,14 +85,14 @@
#home_v3_module_page_switch.home-page-switch-wrapper .inner-content-body-container .prev-page,
.time-line-wrapper .time-line-body .timeline-common-content .next-page,
.time-line-wrapper .time-line-body .timeline-common-content .prev-page {
background-color: var(--bew-content-solid-1);
background-color: var(--bew-content-solid);
}
.nav-tool-container .channel-entry .channel-item:hover,
.nav-tool-container .new-q:hover,
.nav-tool-container .top:hover,
.nav-tool-container .service:hover {
background-color: var(--bew-content-solid-1-hover);
background-color: var(--bew-content-solid-hover);
}
.section-title-v2-wrapper .title-left .week-day-wrapper .week-day-item.active {
@@ -100,7 +100,7 @@
}
.section-title-v2-wrapper .title-right:hover {
background-color: var(--bew-content-solid-1-hover);
background-color: var(--bew-content-solid-hover);
}
.recommend-feed-line-rank-wrapper.feenline-rank-wrapper {

6
src/styles/adaptedStyles/animePlayback&MoviePage.scss
View File

@@ -130,7 +130,7 @@
[class*="rankList_sponsor_rank_item"][class*="rankList_pos_rank_module"]
[class*="rankList_sp_right"]
[class*="rankList_sp_msg"] {
background-color: var(--bew-content-solid-1);
background-color: var(--bew-content-solid);
}
.special.wide .main-container {
@@ -146,7 +146,7 @@
}
[class*="SectionSelector_SectionSelector"] [class*="SectionSelector_expand"] {
background: linear-gradient(270deg, var(--bew-content-solid-1) 46.21%, transparent);
background: linear-gradient(270deg, var(--bew-content-solid) 46.21%, transparent);
}
[class*="numberListItem_number_list_item"] {
@@ -362,7 +362,7 @@
.main-container .review-module .review-list .review-item .review-body,
.main-container .nav-tools .tool-item,
.main-container .season-list .ss-list-wrapper .expand-more {
background-color: var(--bew-content-solid-1);
background-color: var(--bew-content-solid);
}
.ep-list-wrapper .ep-item.cursor,

6
src/styles/adaptedStyles/articlesPage.scss
View File

@@ -297,15 +297,15 @@
.share-dynamic-dialog,
.share-dynamic-dialog .sdd-card .sdd-card-content,
.share-success-dialog {
background-color: var(--bew-content-solid-1);
background-color: var(--bew-content-solid);
}
.interaction-info .toolbar .share-box .qrcode-box {
background-color: var(--bew-content-solid-2);
background-color: var(--bew-content-alt-solid);
}
.comment-wrapper .comment-m {
--bew-bg: var(--bew-content-solid-1);
--bew-bg: var(--bew-content-solid);
}
.share-dynamic-dialog .sdd-card {

4
src/styles/adaptedStyles/comments.scss
View File

@@ -209,7 +209,7 @@
.bb-comment .comment-send-lite.comment-send-lite,
.comment-bilibili-fold .comment-send-lite.comment-send-lite,
.comment-wrapper .comment-m {
// background-color: var(--bew-content-solid-1);
// background-color: var(--bew-content-solid);
background-color: var(--bew-bg);
}
@@ -227,7 +227,7 @@
.comment-bilibili-fold .comment-send-lite .textarea-container.focus textarea,
.bili-dyn-forward-publishing__editor:not(.disabled):focus,
.bili-dyn-forward-publishing__editor:not(.disabled):hover {
background-color: var(--bew-content-solid-1);
background-color: var(--bew-content-solid);
}
.forw-area {

2
src/styles/adaptedStyles/error404Page.scss
View File

@@ -28,7 +28,7 @@
// #region dark mode adaption part
&.dark {
.error-container {
background-color: var(--bew-content-solid-1);
background-color: var(--bew-content-solid);
}
}
// #endregion

2
src/styles/adaptedStyles/footer.scss
View File

@@ -31,7 +31,7 @@
.bili-footer .footer-wrp,
.international-footer {
background-color: var(--bew-content-solid-1);
background-color: var(--bew-content-solid);
}
.bili-footer .boston-postcards li,

4
src/styles/adaptedStyles/historyPage.scss
View File

@@ -118,11 +118,11 @@
}
.history-dlg {
background-color: var(--bew-content-solid-1);
background-color: var(--bew-content-solid);
}
.go-top-m .go-top {
background-color: var(--bew-content-solid-1) !important;
background-color: var(--bew-content-solid) !important;
}
}
}

2
src/styles/adaptedStyles/homePage.scss
View File

@@ -39,7 +39,7 @@
}
.single-card.floor-card .badge {
background-color: var(--bew-content-solid-1);
background-color: var(--bew-content-solid);
}
}
}

6
src/styles/adaptedStyles/loginDialog.scss
View File

@@ -95,7 +95,7 @@
.forget-tip,
.bili-mini,
.el-input__inner {
background-color: var(--bew-content-solid-1);
background-color: var(--bew-content-solid);
}
&.el-popper, // & -> .el-select-dropdown
@@ -150,13 +150,13 @@
// & -> .el-select-dropdown
&.el-popper[x-placement^="bottom"] .popper__arrow:after {
border-bottom-color: var(--bew-content-solid-2);
border-bottom-color: var(--bew-content-alt-solid);
}
.tab__form .form__item input,
.bili-mini-account input,
.bili-mini-password input {
box-shadow: inset 0 0 0 1000px var(--bew-content-solid-1);
box-shadow: inset 0 0 0 1000px var(--bew-content-solid);
}
.bili-mini-content-wp .login-client-qr-code img,

12
src/styles/adaptedStyles/momentsPage.scss
View File

@@ -80,7 +80,7 @@
.bili-dyn-home--member,
#app {
--bg1: var(--bew-content-solid-1);
--bg1: var(--bew-content-solid);
--bg2: var(--bew-bg);
}
@@ -246,7 +246,7 @@
.bili-dyn-live-users__title,
.bili-dyn-list-loading,
.video-container {
background-color: var(--bew-content-solid-1);
background-color: var(--bew-content-solid);
}
.bili-rich-textarea__inner {
@@ -298,7 +298,7 @@
}
.bili-topic-search__popover {
background-color: var(--bew-content-solid-2);
background-color: var(--bew-content-alt-solid);
border-color: var(--bew-border-color);
}
@@ -323,11 +323,11 @@
.bili-dyn-card-video__body,
.bili-dyn-card-pgc__body,
.feed-card .loading-content {
background-color: var(--bew-content-solid-1);
background-color: var(--bew-content-solid);
}
.bili-dyn-item__panel .bili-comment {
--bg1: var(--bew-content-solid-1);
--bg1: var(--bew-content-solid);
}
.reference .dyn-goods__wrap,
@@ -368,7 +368,7 @@
}
.bili-dyn-version-control__btn {
background-color: var(--bew-content-solid-1);
background-color: var(--bew-content-solid);
border-color: var(--bew-border-color);
color: var(--bew-text-1);
}

6
src/styles/adaptedStyles/notePage.scss
View File

@@ -128,7 +128,7 @@
}
.note-list-del-popup {
background-color: var(--bew-content-solid-1);
background-color: var(--bew-content-solid);
}
.note-list-item,
@@ -143,7 +143,7 @@
}
.editor-innter .ql-editor::-webkit-scrollbar-track {
background-color: var(--bew-content-1);
background-color: var(--bew-content);
}
.note-header .note-title .note-text,
@@ -225,7 +225,7 @@
.view-manage-note,
.note-tooltip.info,
.my-notes-manage-note {
background-color: var(--bew-content-solid-1);
background-color: var(--bew-content-solid);
}
.ql-toolbar.ql-snow + .ql-container.ql-snow {

6
src/styles/adaptedStyles/notificationsPage.scss
View File

@@ -342,11 +342,11 @@
.config,
.bili-im,
.bili-im .message-list {
background-color: var(--bew-content-solid-1);
background-color: var(--bew-content-solid);
}
.cs-q-tab-area ul.cs-q-tabs {
background-color: var(--bew-content-solid-2);
background-color: var(--bew-content-alt-solid);
}
.static-popup,
@@ -361,7 +361,7 @@
}
.cs-q-tab-area.shadow:after {
background: linear-gradient(270deg, var(--bew-content-solid-2) 0%, transparent 100%);
background: linear-gradient(270deg, var(--bew-content-alt-solid) 0%, transparent 100%);
}
.follow-btn.inactive,

16
src/styles/adaptedStyles/userSpacePage.scss
View File

@@ -295,7 +295,7 @@
// 深色模式下對主題顏色調整
&.dark {
.bili-dyn-item {
--bg1: var(--bew-content-solid-1);
--bg1: var(--bew-content-solid);
--bg2: var(--bew-bg);
}
@@ -506,7 +506,7 @@
}
.emoji-box {
border-color: var(--bew-content-solid-2);
border-color: var(--bew-content-alt-solid);
}
#page-fav .fav-main .small-item {
@@ -631,7 +631,7 @@
}
.col-full {
background-color: var(--bew-content-solid-1);
background-color: var(--bew-content-solid);
box-shadow: 0 0 0 1px var(--bew-border-color);
}
@@ -680,7 +680,7 @@
}
#page-setting #setting-new-tag-btn {
background: var(--bew-content-solid-1);
background: var(--bew-content-solid);
}
.search-page,
@@ -695,7 +695,7 @@
#page-index .col-1::after,
#page-index .col-2 .section,
#page-dynamic .col-2 .section {
background-color: var(--bew-content-solid-1);
background-color: var(--bew-content-solid);
}
.main-content .card-content .post-content.repost,
@@ -706,19 +706,19 @@
.bb-comment .operation .opera-list,
.comment-bilibili-fold .operation .opera-list,
.bili-at-popup {
background-color: var(--bew-content-solid-2);
background-color: var(--bew-content-alt-solid);
}
.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);
background-color: var(--bew-content);
}
.emoji-box .emoji-text:hover,
.emoji-box .emoji-tabs .tab-link.on {
background-color: var(--bew-content-2);
background-color: var(--bew-content-alt);
}
.elec .new-elec-trigger:hover {

48
src/styles/variables.scss
View File

@@ -140,15 +140,15 @@
// `--bew-content-*` for the flat background elements
// #region `--bew-content-*` background colors
--bew-content-1: hsl(0 0% 100% / var(--bew-content-opacity));
--bew-content-1-hover: hsl(0 0% 85% / var(--bew-content-opacity));
--bew-content-2: hsl(240 31% 95% / var(--bew-content-opacity));
--bew-content-2-hover: hsl(240 31% 80% / var(--bew-content-opacity));
--bew-content: hsl(0 0% 100% / var(--bew-content-opacity));
--bew-content-hover: hsl(0 0% 85% / var(--bew-content-opacity));
--bew-content-alt: hsl(240 31% 95% / var(--bew-content-opacity));
--bew-content-alt-hover: hsl(240 31% 80% / var(--bew-content-opacity));
--bew-content-solid-1: hsl(0 0% 100%);
--bew-content-solid-1-hover: hsl(0 0% 85%);
--bew-content-solid-2: hsl(240 31% 95%);
--bew-content-solid-2-hover: hsl(240 31% 85%);
--bew-content-solid: hsl(0 0% 100%);
--bew-content-solid-hover: hsl(0 0% 85%);
--bew-content-alt-solid: hsl(240 31% 95%);
--bew-content-alt-solid-hover: hsl(240 31% 85%);
// #endregion
// `--bew-elevated-*` for popup, dialog and difference layers with difference elevation levels
@@ -212,15 +212,15 @@
--bew-homepage-bg: hsl(230 12% 6%);
--bew-homepage-bg-mask: hsl(230 12% 6% / var(--bew-homepage-bg-mask-opacity));
--bew-content-1: hsl(230 12% 12% / var(--bew-content-opacity));
--bew-content-1-hover: hsl(230 12% 28% / var(--bew-content-opacity));
--bew-content-2: hsl(240 14% 15% / var(--bew-content-opacity));
--bew-content-2-hover: hsl(240 14% 31% / var(--bew-content-opacity));
--bew-content: hsl(230 12% 12% / var(--bew-content-opacity));
--bew-content-hover: hsl(230 12% 28% / var(--bew-content-opacity));
--bew-content-alt: hsl(240 14% 15% / var(--bew-content-opacity));
--bew-content-alt-hover: hsl(240 14% 31% / var(--bew-content-opacity));
--bew-content-solid-1: hsl(230 12% 12%);
--bew-content-solid-1-hover: hsl(230 12% 28%);
--bew-content-solid-2: hsl(240 14% 15%);
--bew-content-solid-2-hover: hsl(240 14% 31%);
--bew-content-solid: hsl(230 12% 12%);
--bew-content-solid-hover: hsl(230 12% 28%);
--bew-content-alt-solid: hsl(240 14% 15%);
--bew-content-alt-solid-hover: hsl(240 14% 31%);
--bew-elevated: hsl(230 12% 16% / var(--bew-content-opacity));
--bew-elevated-hover: hsl(230 12% 32% / var(--bew-content-opacity));
@@ -290,8 +290,8 @@
--pay_yellow: var(--Ye5);
--pay_yellow_thin: var(--Ye1);
--bg1: var(--bew-bg);
--bg2: var(--bew-content-solid-2);
--bg3: var(--bew-content-solid-2);
--bg2: var(--bew-content-alt-solid);
--bg3: var(--bew-content-alt-solid);
--bg1_float: var(--bew-elevated-solid);
--bg2_float: var(--bew-elevated-solid);
--text_white: var(--Wh0_u);
@@ -304,9 +304,9 @@
--line_light: var(--bew-fill-1);
--line_regular: var(--bew-fill-2);
--line_bold: var(--bew-fill-3);
--graph_white: var(--bew-content-solid-1);
--graph_bg_thin: var(--bew-content-solid-1);
--graph_bg_regular: var(--bew-content-solid-1);
--graph_white: var(--bew-content-solid);
--graph_bg_thin: var(--bew-content-solid);
--graph_bg_regular: var(--bew-content-solid);
--graph_bg_thick: var(--bew-elevated-solid);
--graph_weak: var(--Ga3);
--graph_medium: var(--Ga5);
@@ -326,16 +326,16 @@
--graph_bg_thin_rgb: 13, 14, 17;
--bpx-aux-header-bg: var(--bew-content-solid-1);
--bpx-aux-header-bg: var(--bew-content-solid);
--bpx-aux-header-icon: var(--bew-text-2);
--bpx-aux-header-font: var(--bew-text-1);
--bpx-aux-content-bg: var(--bew-bg);
--bpx-aux-content-font1: var(--bew-text-1);
--bpx-aux-content-font2: var(--bew-text-2);
--bpx-aux-footer-bg: var(--bew-content-solid-1);
--bpx-aux-footer-bg: var(--bew-content-solid);
--bpx-aux-footer-font: var(--bew-text-3);
--bpx-aux-footer-font-hover: var(--bew-text-1);
--bpx-dmsend-main-bg: var(--bew-content-solid-1);
--bpx-dmsend-main-bg: var(--bew-content-solid);
--bpx-dmsend-input-bg: var(--bew-fill-1);
--bpx-dmsend-info-font: var(--bew-text-1);
--bpx-dmsend-switch-icon: var(--bew-text-2);