mirror of
https://github.com/BewlyBewly/BewlyBewly.git
synced 2025-04-14 13:15:29 +00:00
Merge branch 'main' into dev
This commit is contained in:
Hakadao
@@ -42,17 +42,27 @@ const userInfo = reactive<UserInfo | NonNullable<unknown>>({}) as UnwrapNestedRe
|
||||
const hideTopBar = ref<boolean>(false)
|
||||
const hoveringTopBar = ref<boolean>(false)
|
||||
|
||||
const showChannelsPop = ref<boolean>(false)
|
||||
const showUserPanelPop = ref<boolean>(false)
|
||||
const showNotificationsPop = ref<boolean>(false)
|
||||
const showMomentsPop = ref<boolean>(false)
|
||||
const showFavoritesPop = ref<boolean>(false)
|
||||
const showUploadPop = ref<boolean>(false)
|
||||
const showHistoryPop = ref<boolean>(false)
|
||||
const showWatchLaterPop = ref<boolean>(false)
|
||||
const showMorePop = ref<boolean>(false)
|
||||
// const showChannelsPop = ref<boolean>(false)
|
||||
// const showUserPanelPop = ref<boolean>(false)
|
||||
// const showNotificationsPop = ref<boolean>(false)
|
||||
// const showMomentsPop = ref<boolean>(false)
|
||||
// const showFavoritesPop = ref<boolean>(false)
|
||||
// const showHistoryPop = ref<boolean>(false)
|
||||
// const showWatchLaterPop = ref<boolean>(false)
|
||||
// const showUploadPop = ref<boolean>(false)
|
||||
// const showMorePop = ref<boolean>(false)
|
||||
|
||||
const momentsPopKey = ref<string>(`momentsPop[${Number(new Date())}]`)
|
||||
const popupVisible = reactive({
|
||||
channels: false,
|
||||
userPanel: false,
|
||||
notifications: false,
|
||||
moments: false,
|
||||
favorites: false,
|
||||
history: false,
|
||||
watchLater: false,
|
||||
upload: false,
|
||||
more: false,
|
||||
})
|
||||
|
||||
const isLogin = ref<boolean>(false)
|
||||
const unReadMessage = reactive<UnReadMessage | NonNullable<unknown>>(
|
||||
@@ -71,48 +81,114 @@ const momentsPopRef = ref()
|
||||
const scrollTop = ref<number>(0)
|
||||
const oldScrollTop = ref<number>(0)
|
||||
|
||||
function closeAllTopBarPopup(exceptionKey?: keyof typeof popupVisible) {
|
||||
Object.keys(popupVisible).forEach((key) => {
|
||||
if (key !== exceptionKey)
|
||||
popupVisible[key as keyof typeof popupVisible] = false
|
||||
})
|
||||
}
|
||||
|
||||
// Channels
|
||||
const channels = useDelayedHover({
|
||||
beforeEnter: () => closeAllTopBarPopup('channels'),
|
||||
enter: () => {
|
||||
logo.value.classList.add('activated')
|
||||
popupVisible.channels = true
|
||||
},
|
||||
leave: () => {
|
||||
logo.value.classList.remove('activated')
|
||||
popupVisible.channels = false
|
||||
},
|
||||
})
|
||||
|
||||
// Avatar
|
||||
const avatar = useDelayedHover({
|
||||
enter: () => openUserPanel(),
|
||||
leave: () => closeUserPanel(),
|
||||
beforeEnter: () => closeAllTopBarPopup('userPanel'),
|
||||
enter: () => {
|
||||
popupVisible.userPanel = true
|
||||
avatarImg.value.classList.add('hover')
|
||||
avatarShadow.value.classList.add('hover')
|
||||
},
|
||||
beforeLeave: () => {
|
||||
popupVisible.userPanel = false
|
||||
avatarImg.value.classList.remove('hover')
|
||||
avatarShadow.value.classList.remove('hover')
|
||||
},
|
||||
leave: () => {
|
||||
popupVisible.userPanel = false
|
||||
avatarImg.value.classList.remove('hover')
|
||||
avatarShadow.value.classList.remove('hover')
|
||||
},
|
||||
})
|
||||
|
||||
// Notifications
|
||||
const notifications = useDelayedHover({
|
||||
enter: () => showNotificationsPop.value = true,
|
||||
leave: () => showNotificationsPop.value = false,
|
||||
beforeEnter: () => closeAllTopBarPopup('notifications'),
|
||||
enter: () => {
|
||||
popupVisible.notifications = true
|
||||
},
|
||||
leave: () => {
|
||||
popupVisible.notifications = false
|
||||
},
|
||||
})
|
||||
// Moments
|
||||
const moments = useDelayedHover({
|
||||
beforeEnter: () => closeAllTopBarPopup('moments'),
|
||||
enter: () => {
|
||||
showMomentsPop.value = true
|
||||
popupVisible.moments = true
|
||||
momentsPopRef.value && momentsPopRef.value.checkIfHasNewMomentsThenUpdateMoments()
|
||||
},
|
||||
leave: () => showMomentsPop.value = false,
|
||||
leave: () => {
|
||||
popupVisible.moments = false
|
||||
},
|
||||
})
|
||||
// Favorites
|
||||
const favorites = useDelayedHover({
|
||||
enter: () => showFavoritesPop.value = true,
|
||||
leave: () => showFavoritesPop.value = false,
|
||||
})
|
||||
// Upload
|
||||
const upload = useDelayedHover({
|
||||
enter: () => showUploadPop.value = true,
|
||||
leave: () => showUploadPop.value = false,
|
||||
beforeEnter: () => closeAllTopBarPopup('favorites'),
|
||||
enter: () => {
|
||||
popupVisible.favorites = true
|
||||
},
|
||||
leave: () => {
|
||||
popupVisible.favorites = false
|
||||
},
|
||||
})
|
||||
// History
|
||||
const history = useDelayedHover({
|
||||
enter: () => showHistoryPop.value = true,
|
||||
leave: () => showHistoryPop.value = false,
|
||||
beforeEnter: () => closeAllTopBarPopup('history'),
|
||||
enter: () => {
|
||||
popupVisible.history = true
|
||||
},
|
||||
leave: () => {
|
||||
popupVisible.history = false
|
||||
},
|
||||
})
|
||||
// Watch Later
|
||||
const watchLater = useDelayedHover({
|
||||
enter: () => showWatchLaterPop.value = true,
|
||||
leave: () => showWatchLaterPop.value = false,
|
||||
beforeEnter: () => closeAllTopBarPopup('watchLater'),
|
||||
enter: () => {
|
||||
popupVisible.watchLater = true
|
||||
},
|
||||
leave: () => {
|
||||
popupVisible.watchLater = false
|
||||
},
|
||||
})
|
||||
// Upload
|
||||
const upload = useDelayedHover({
|
||||
beforeEnter: () => closeAllTopBarPopup('upload'),
|
||||
enter: () => {
|
||||
popupVisible.upload = true
|
||||
},
|
||||
leave: () => {
|
||||
popupVisible.upload = false
|
||||
},
|
||||
})
|
||||
// More
|
||||
const more = useDelayedHover({
|
||||
enter: () => showMorePop.value = true,
|
||||
leave: () => showMorePop.value = false,
|
||||
beforeEnter: () => closeAllTopBarPopup(),
|
||||
enter: () => {
|
||||
popupVisible.more = true
|
||||
},
|
||||
leave: () => popupVisible.more = false,
|
||||
})
|
||||
|
||||
watch(() => settings.value.autoHideTopBar, (newVal) => {
|
||||
@@ -121,7 +197,7 @@ watch(() => settings.value.autoHideTopBar, (newVal) => {
|
||||
})
|
||||
|
||||
watch(
|
||||
showNotificationsPop,
|
||||
() => popupVisible.notifications,
|
||||
(newVal, oldVal) => {
|
||||
if (newVal === oldVal)
|
||||
return
|
||||
@@ -132,7 +208,7 @@ watch(
|
||||
)
|
||||
|
||||
watch(
|
||||
showMomentsPop,
|
||||
() => popupVisible.moments,
|
||||
async (newVal, oldVal) => {
|
||||
if (newVal === oldVal)
|
||||
return
|
||||
@@ -142,7 +218,7 @@ watch(
|
||||
},
|
||||
)
|
||||
|
||||
watch(showFavoritesPop, (newVal, oldVal) => {
|
||||
watch(() => popupVisible.favorites, (newVal, oldVal) => {
|
||||
if (newVal === oldVal)
|
||||
return
|
||||
if (newVal) {
|
||||
@@ -203,28 +279,6 @@ function handleScroll() {
|
||||
oldScrollTop.value = scrollTop.value
|
||||
}
|
||||
|
||||
function showLogoMenuDropdown() {
|
||||
logo.value.classList.add('activated')
|
||||
showChannelsPop.value = true
|
||||
}
|
||||
|
||||
function closeLogoMenuDropdown() {
|
||||
logo.value.classList.remove('activated')
|
||||
showChannelsPop.value = false
|
||||
}
|
||||
|
||||
function openUserPanel() {
|
||||
showUserPanelPop.value = true
|
||||
avatarImg.value.classList.add('hover')
|
||||
avatarShadow.value.classList.add('hover')
|
||||
}
|
||||
|
||||
function closeUserPanel() {
|
||||
showUserPanelPop.value = false
|
||||
avatarImg.value.classList.remove('hover')
|
||||
avatarShadow.value.classList.remove('hover')
|
||||
}
|
||||
|
||||
async function getUserInfo() {
|
||||
try {
|
||||
const res = await browser.runtime
|
||||
@@ -251,7 +305,7 @@ async function getUnreadMessageCount() {
|
||||
if (!isLogin.value)
|
||||
return
|
||||
|
||||
unReadMessageCount.value = 0
|
||||
let result = 0
|
||||
|
||||
try {
|
||||
let res
|
||||
@@ -263,7 +317,7 @@ async function getUnreadMessageCount() {
|
||||
Object.entries(unReadMessage).forEach(([key, value]) => {
|
||||
if (key !== 'up') {
|
||||
if (typeof value === 'number')
|
||||
unReadMessageCount.value += value
|
||||
result += value
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -274,31 +328,34 @@ async function getUnreadMessageCount() {
|
||||
if (res.code === 0) {
|
||||
Object.assign(unReadDm, res.data)
|
||||
if (typeof unReadDm.follow_unread === 'number')
|
||||
unReadMessageCount.value += unReadDm.follow_unread
|
||||
result += unReadDm.follow_unread
|
||||
}
|
||||
}
|
||||
catch (error) {
|
||||
unReadMessageCount.value = 0
|
||||
console.error(error)
|
||||
}
|
||||
finally {
|
||||
unReadMessageCount.value = result
|
||||
}
|
||||
}
|
||||
|
||||
async function getTopBarNewMomentsCount() {
|
||||
if (!isLogin)
|
||||
return
|
||||
|
||||
newMomentsCount.value = 0
|
||||
let result = 0
|
||||
|
||||
try {
|
||||
const res = await browser.runtime.sendMessage({
|
||||
contentScriptQuery: 'getTopBarNewMomentsCount',
|
||||
})
|
||||
|
||||
if (typeof res.data.update_info.item.count === 'number')
|
||||
newMomentsCount.value = res.data.update_info.item.count
|
||||
if (res.code === 0) {
|
||||
if (typeof res.data.update_info.item.count === 'number')
|
||||
result = res.data.update_info.item.count
|
||||
}
|
||||
}
|
||||
catch {
|
||||
newMomentsCount.value = 0
|
||||
finally {
|
||||
newMomentsCount.value = result
|
||||
}
|
||||
}
|
||||
|
||||
@@ -349,13 +406,12 @@ defineExpose({
|
||||
|
||||
<div shrink-0 flex="inline xl:1 justify-center">
|
||||
<div
|
||||
ref="channels"
|
||||
z-1 relative w-fit mr-auto
|
||||
@mouseenter.self="showLogoMenuDropdown()"
|
||||
@mouseleave.self="closeLogoMenuDropdown()"
|
||||
>
|
||||
<Transition name="slide-out">
|
||||
<a
|
||||
v-if="showLogo"
|
||||
v-show="showLogo"
|
||||
ref="logo" href="//www.bilibili.com"
|
||||
class="group logo"
|
||||
style="backdrop-filter: var(--bew-filter-glass-1)"
|
||||
@@ -385,7 +441,7 @@ defineExpose({
|
||||
|
||||
<Transition name="slide-in">
|
||||
<ChannelsPop
|
||||
v-show="showChannelsPop"
|
||||
v-show="popupVisible.channels"
|
||||
class="bew-popover"
|
||||
pos="!left-0 !top-70px"
|
||||
transform="!translate-x-0"
|
||||
@@ -467,7 +523,7 @@ defineExpose({
|
||||
/>
|
||||
<Transition name="slide-in">
|
||||
<UserPanelPop
|
||||
v-if="showUserPanelPop"
|
||||
v-if="popupVisible.userPanel"
|
||||
:user-info="userInfo"
|
||||
after:h="!0"
|
||||
class="bew-popover"
|
||||
@@ -496,7 +552,7 @@ defineExpose({
|
||||
<div
|
||||
ref="notifications"
|
||||
class="right-side-item"
|
||||
:class="{ active: showNotificationsPop }"
|
||||
:class="{ active: popupVisible.notifications }"
|
||||
>
|
||||
<template v-if="unReadMessageCount > 0">
|
||||
<div
|
||||
@@ -520,7 +576,7 @@ defineExpose({
|
||||
|
||||
<Transition name="slide-in">
|
||||
<NotificationsPop
|
||||
v-if="showNotificationsPop"
|
||||
v-if="popupVisible.notifications"
|
||||
class="bew-popover"
|
||||
/>
|
||||
</Transition>
|
||||
@@ -530,7 +586,7 @@ defineExpose({
|
||||
<div
|
||||
ref="moments"
|
||||
class="right-side-item"
|
||||
:class="{ active: showMomentsPop }"
|
||||
:class="{ active: popupVisible.moments }"
|
||||
>
|
||||
<template v-if="newMomentsCount > 0">
|
||||
<div
|
||||
@@ -553,7 +609,7 @@ defineExpose({
|
||||
</a>
|
||||
|
||||
<Transition name="slide-in">
|
||||
<MomentsPop v-show="showMomentsPop" :key="momentsPopKey" ref="momentsPopRef" class="bew-popover" />
|
||||
<MomentsPop v-show="popupVisible.moments" ref="momentsPopRef" class="bew-popover" />
|
||||
</Transition>
|
||||
</div>
|
||||
|
||||
@@ -561,7 +617,7 @@ defineExpose({
|
||||
<div
|
||||
ref="favorites"
|
||||
class="right-side-item"
|
||||
:class="{ active: showFavoritesPop }"
|
||||
:class="{ active: popupVisible.favorites }"
|
||||
>
|
||||
<a
|
||||
:href="`https://space.bilibili.com/${mid}/favlist`"
|
||||
@@ -574,7 +630,7 @@ defineExpose({
|
||||
<Transition name="slide-in">
|
||||
<KeepAlive>
|
||||
<FavoritesPop
|
||||
v-if="showFavoritesPop"
|
||||
v-if="popupVisible.favorites"
|
||||
ref="favoritesPopRef"
|
||||
class="bew-popover"
|
||||
/>
|
||||
@@ -586,7 +642,7 @@ defineExpose({
|
||||
<div
|
||||
ref="history"
|
||||
class="right-side-item"
|
||||
:class="{ active: showHistoryPop }"
|
||||
:class="{ active: popupVisible.history }"
|
||||
>
|
||||
<a
|
||||
href="https://www.bilibili.com/account/history"
|
||||
@@ -597,7 +653,7 @@ defineExpose({
|
||||
</a>
|
||||
|
||||
<Transition name="slide-in">
|
||||
<HistoryPop v-if="showHistoryPop" class="bew-popover" />
|
||||
<HistoryPop v-if="popupVisible.history" class="bew-popover" />
|
||||
</Transition>
|
||||
</div>
|
||||
|
||||
@@ -605,7 +661,7 @@ defineExpose({
|
||||
<div
|
||||
ref="watchLater"
|
||||
class="right-side-item"
|
||||
:class="{ active: showWatchLaterPop }"
|
||||
:class="{ active: popupVisible.watchLater }"
|
||||
>
|
||||
<a
|
||||
href="https://www.bilibili.com/watchlater/#/list"
|
||||
@@ -616,7 +672,7 @@ defineExpose({
|
||||
</a>
|
||||
|
||||
<Transition name="slide-in">
|
||||
<WatchLaterPop v-if="showWatchLaterPop" class="bew-popover" />
|
||||
<WatchLaterPop v-if="popupVisible.watchLater" class="bew-popover" />
|
||||
</Transition>
|
||||
</div>
|
||||
|
||||
@@ -636,7 +692,7 @@ defineExpose({
|
||||
<div
|
||||
ref="more"
|
||||
class="right-side-item"
|
||||
:class="{ active: showMorePop }"
|
||||
:class="{ active: popupVisible.more }"
|
||||
display="lg:!none flex"
|
||||
>
|
||||
<a title="More">
|
||||
@@ -644,7 +700,7 @@ defineExpose({
|
||||
</a>
|
||||
|
||||
<Transition name="slide-in">
|
||||
<MorePop v-show="showMorePop" class="bew-popover" />
|
||||
<MorePop v-show="popupVisible.more" class="bew-popover" />
|
||||
</Transition>
|
||||
</div>
|
||||
|
||||
@@ -677,7 +733,7 @@ defineExpose({
|
||||
|
||||
<Transition name="slide-in">
|
||||
<UploadPop
|
||||
v-if="showUploadPop"
|
||||
v-if="popupVisible.upload"
|
||||
class="bew-popover"
|
||||
pos="!left-auto !right-0"
|
||||
transform="!translate-x-0"
|
||||
@@ -732,7 +788,7 @@ defineExpose({
|
||||
overflow-visible
|
||||
after:content-empty
|
||||
after:opacity-100 after:w-full after:h-100px
|
||||
after:absolute after:-top-30px after:left-1/2 after:-z-1
|
||||
after:absolute after:top--30px after:left-1/2 after:-z-1
|
||||
after:transform after:-translate-x-1/2;
|
||||
}
|
||||
|
||||
@@ -759,8 +815,8 @@ defineExpose({
|
||||
--at-apply: relative text-$bew-text-1 flex items-center;
|
||||
|
||||
&:not(.avatar) a {
|
||||
--at-apply:text-xl flex items-center p-2 rounded-40px
|
||||
duration-300;
|
||||
--at-apply: text-xl flex items-center p-2 rounded-40px duration-300 relative z-5;
|
||||
// --at-apply: after:content-empty after:absolute after:w-120% after:h-120% after:z-0 after:bg-yellow;
|
||||
}
|
||||
|
||||
&.active a, &:not(.upload) a:hover {
|
||||
|
||||
@@ -10,7 +10,7 @@ const list = reactive([
|
||||
name: t('topbar.noti_dropdown.replys'),
|
||||
url: 'https://message.bilibili.com/#/reply',
|
||||
unreadCount: 0,
|
||||
icon: 'i-mingcute:share-forward-line',
|
||||
icon: 'i-mingcute:chat-3-line',
|
||||
},
|
||||
{
|
||||
name: t('topbar.noti_dropdown.mentions'),
|
||||
|
||||
@@ -1,22 +1,41 @@
|
||||
export function useDelayedHover({ delay = 200, enter, leave }: { delay?: number, enter: Function, leave: Function }) {
|
||||
export function useDelayedHover({ enterDelay = 250, leaveDelay = 310, beforeEnter, enter, beforeLeave, leave }:
|
||||
{ enterDelay?: number, leaveDelay?: number, beforeEnter?: Function, enter: Function, beforeLeave?: Function, leave: Function }) {
|
||||
const el = ref<HTMLElement>()
|
||||
|
||||
let timer: any | undefined
|
||||
let enterTimer: any | undefined
|
||||
let leaveTimer: any | undefined
|
||||
|
||||
function handleMouseEnter() {
|
||||
if (timer) {
|
||||
clearTimeout(timer)
|
||||
timer = undefined
|
||||
if (beforeEnter)
|
||||
beforeEnter()
|
||||
|
||||
if (enterTimer) {
|
||||
clearTimeout(enterTimer)
|
||||
enterTimer = undefined
|
||||
}
|
||||
timer = setTimeout(() => {
|
||||
if (leaveTimer) {
|
||||
clearTimeout(leaveTimer)
|
||||
leaveTimer = undefined
|
||||
}
|
||||
enterTimer = setTimeout(() => {
|
||||
enter()
|
||||
}, delay)
|
||||
}, enterDelay)
|
||||
}
|
||||
function handleMouseLeave() {
|
||||
if (timer) {
|
||||
leave()
|
||||
clearTimeout(timer)
|
||||
timer = undefined
|
||||
if (beforeLeave)
|
||||
beforeLeave()
|
||||
|
||||
if (enterTimer) {
|
||||
clearTimeout(enterTimer)
|
||||
enterTimer = undefined
|
||||
}
|
||||
if (leaveTimer) {
|
||||
clearTimeout(leaveTimer)
|
||||
leaveTimer = undefined
|
||||
}
|
||||
leaveTimer = setTimeout(() => {
|
||||
leave()
|
||||
}, leaveDelay)
|
||||
}
|
||||
|
||||
watch(el, (el, _, onCleanup) => {
|
||||
|
||||
@@ -33,7 +33,11 @@
|
||||
|
||||
#link-message-container {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// #region theme color adaption part
|
||||
// Increase the priority of the style inside by writing a non-existent selector in `:not()`
|
||||
:not(fdjslfds) {
|
||||
.space-left {
|
||||
.item:hover a,
|
||||
.item.active a,
|
||||
@@ -53,7 +57,18 @@
|
||||
.line-1 .like-item:hover,
|
||||
.space-right .space-right-top .title a:hover,
|
||||
.button-box .item > button.active,
|
||||
.operate-btn {
|
||||
.operate-btn,
|
||||
.action-menu .menu-list a:hover,
|
||||
.bp-popup-panel .title-ctnr .popup-title,
|
||||
.bl-button--ghost,
|
||||
.action-button.del-button:hover svg *,
|
||||
.love-card .action-button:hover > svg *,
|
||||
.content .input-section .row .emoji-btn:hover svg *,
|
||||
.content .input-section .row .emoji-btn.active svg *,
|
||||
.reply-card .action-button:not(.del-button):hover > svg *,
|
||||
.at-card .action-button:not(.del-button):hover > svg *,
|
||||
.action-button.active svg *,
|
||||
.bili-im .left .title .back-link:hover {
|
||||
color: var(--bew-theme-color);
|
||||
}
|
||||
|
||||
@@ -64,7 +79,8 @@
|
||||
color: var(--bew-theme-color) !important;
|
||||
}
|
||||
|
||||
.send-btn.active {
|
||||
.send-btn.active,
|
||||
.bl-button--ghost:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
@@ -75,11 +91,7 @@
|
||||
.css-o1815x .border,
|
||||
.css-o1815x .dot,
|
||||
.action-button:hover .border,
|
||||
.action-button > .action-icon.active .border,
|
||||
.content .input-section .row .emoji-btn:hover svg,
|
||||
.content .input-section .row .emoji-btn.active svg,
|
||||
.action-button:hover svg,
|
||||
.action-button.active svg {
|
||||
.action-button > .action-icon.active .border {
|
||||
fill: var(--bew-theme-color) !important;
|
||||
}
|
||||
|
||||
@@ -88,7 +100,9 @@
|
||||
.medal-system,
|
||||
.medal-master,
|
||||
.send-btn.active,
|
||||
.operate-btn {
|
||||
.operate-btn,
|
||||
.bl-button--ghost,
|
||||
.bl-button--ghost:hover {
|
||||
border-color: var(--bew-theme-color);
|
||||
}
|
||||
|
||||
@@ -98,6 +112,10 @@
|
||||
border-color: var(--bew-theme-color) !important;
|
||||
}
|
||||
|
||||
.tab-list .tab-item.active::before {
|
||||
border-top-color: var(--bew-theme-color);
|
||||
}
|
||||
|
||||
.medal-admin,
|
||||
.medal-system,
|
||||
.medal-master,
|
||||
@@ -105,7 +123,9 @@
|
||||
.tab-list .tab-item.active::after,
|
||||
.content .btnrow .btn.save,
|
||||
.send-button,
|
||||
.notify-number {
|
||||
.notify-number,
|
||||
.bl-button--primary,
|
||||
.bl-button--ghost:hover {
|
||||
background-color: var(--bew-theme-color);
|
||||
}
|
||||
|
||||
@@ -114,7 +134,8 @@
|
||||
background-color: var(--bew-theme-color) !important;
|
||||
}
|
||||
|
||||
.send-btn.active:hover {
|
||||
.send-btn.active:hover,
|
||||
.bl-button--primary:hover {
|
||||
background-color: var(--bew-theme-color-80);
|
||||
}
|
||||
|
||||
@@ -126,190 +147,210 @@
|
||||
filter: var(--bew-filter-icon-glow);
|
||||
}
|
||||
}
|
||||
// #endregion
|
||||
|
||||
// #region dark mode adaption part
|
||||
&.dark {
|
||||
// remove background in dark mode
|
||||
#message-navbar + .container::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#link-message-container {
|
||||
.space-left {
|
||||
.title,
|
||||
.item a {
|
||||
color: var(--bew-text-1);
|
||||
}
|
||||
|
||||
.side-bar .icon {
|
||||
filter: contrast(0) brightness(2);
|
||||
}
|
||||
}
|
||||
|
||||
.loading .progress {
|
||||
background-color: transparent;
|
||||
filter: contrast(0) brightness(2);
|
||||
}
|
||||
|
||||
.space-right .space-right-top .title,
|
||||
.space-right .line-2,
|
||||
.line-1 .name-field,
|
||||
.space-left {
|
||||
.title,
|
||||
.config,
|
||||
.radio-selector,
|
||||
.header .tab,
|
||||
.bili-im .list-item .name,
|
||||
.bili-im .list-item .last-word,
|
||||
.bili-im .message .message-content:not(.is-img),
|
||||
.bili-im
|
||||
.msg-notify
|
||||
.cover-container
|
||||
.table-container
|
||||
.modules
|
||||
.module
|
||||
.detail,
|
||||
.bili-im .core-style,
|
||||
.detail .content,
|
||||
.follow-btn.active,
|
||||
.bp-emoji-box .emoji.kaomoji,
|
||||
.bp-emoji-box2 .emoji.kaomoji,
|
||||
.reply-textarea,
|
||||
.ar-recommend-item__info--title {
|
||||
.item a {
|
||||
color: var(--bew-text-1);
|
||||
}
|
||||
|
||||
.line-1,
|
||||
.text-box,
|
||||
.bottom,
|
||||
.tip,
|
||||
.bili-im .msg-notify .content,
|
||||
.follow-btn.inactive,
|
||||
.notify-wrapper .notify-text,
|
||||
.msg-time .time,
|
||||
.send-btn:not(.active),
|
||||
.orginal-reply,
|
||||
.content .input-section .row .emoji-btn,
|
||||
.content .btnrow .btn.save.disabled,
|
||||
.content .btnrow .btn.clear,
|
||||
.msg-push-new__leave-message--text {
|
||||
color: var(--bew-text-2);
|
||||
}
|
||||
|
||||
.line-3,
|
||||
.line-3 *,
|
||||
.bili-im
|
||||
.msg-notify
|
||||
.cover-container
|
||||
.table-container
|
||||
.modules
|
||||
.module
|
||||
.mtitle,
|
||||
.content .btnrow .btn.clear:hover {
|
||||
color: var(--bew-text-3);
|
||||
}
|
||||
|
||||
.divider,
|
||||
.at-item:not(:last-child)::after,
|
||||
.love-item:not(:last-child)::after,
|
||||
.header,
|
||||
.bili-im .left,
|
||||
.bili-im .left .title,
|
||||
.bili-im .right .title,
|
||||
.bili-im .send-box,
|
||||
.liked-user:not(:last-child)::after,
|
||||
.follow-btn.active,
|
||||
.divided-line,
|
||||
.static-popup,
|
||||
.send-btn:not(.active),
|
||||
.content .input-section,
|
||||
.content .input-section .row .emoji-btn,
|
||||
.content .btnrow .btn.clear,
|
||||
.reply-textarea {
|
||||
border-color: var(--bew-border-color);
|
||||
}
|
||||
|
||||
.orginal-reply {
|
||||
border-color: var(--bew-text-2);
|
||||
}
|
||||
|
||||
.space-right .space-right-top .title,
|
||||
.card,
|
||||
.config {
|
||||
box-shadow: unset;
|
||||
}
|
||||
|
||||
.config .config-item:not(:first-child)::before,
|
||||
.bili-im .msg-notify hr,
|
||||
.divider-last::before, .divider-last::after,
|
||||
.header::after,
|
||||
.split-line {
|
||||
background-color: var(--bew-border-color);
|
||||
}
|
||||
|
||||
.bili-im .left,
|
||||
.bili-im .msg-notify,
|
||||
.bili-im .msg-push-new,
|
||||
.bili-im .message .message-content:not(.is-img),
|
||||
.bili-im .send-box,
|
||||
.follow-btn.inactive,
|
||||
.follow-btn.active,
|
||||
.notify-wrapper .notify-text,
|
||||
.bp-emoji-box .pagination,
|
||||
.bp-emoji-box2 .pagination,
|
||||
.send-btn:not(.active),
|
||||
.toggle,
|
||||
.content .btnrow .btn.save.disabled,
|
||||
.reply-textarea,
|
||||
.list-item.top {
|
||||
background-color: var(--bew-fill-1);
|
||||
}
|
||||
|
||||
.bili-im .list-item.active,
|
||||
.bili-im .list-item:hover,
|
||||
.bp-emoji-box .emoji-cover.selected,
|
||||
.bp-emoji-box .emoji:hover,
|
||||
.bp-emoji-box2 .emoji-cover.selected,
|
||||
.bp-emoji-box2 .emoji:hover {
|
||||
background-color: var(--bew-fill-2);
|
||||
}
|
||||
|
||||
.msg-push-new__leave-message {
|
||||
background-color: var(--bew-fill-3);
|
||||
}
|
||||
|
||||
.space-left,
|
||||
.space-right,
|
||||
.emoji-list .emoji {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.link-progress-tv {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.space-right-top .title,
|
||||
.card,
|
||||
.config,
|
||||
.bili-im,
|
||||
.bili-im .message-list {
|
||||
background-color: var(--bew-content-solid-1);
|
||||
}
|
||||
|
||||
.static-popup {
|
||||
background-color: var(--bew-elevated-solid-1);
|
||||
}
|
||||
|
||||
.follow-btn.inactive,
|
||||
.content .btnrow .btn.save.disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.action-button > .action-icon .border {
|
||||
fill: var(--bew-text-3);
|
||||
}
|
||||
|
||||
.link-progress-tv {
|
||||
filter: invert(1) brightness(2);
|
||||
.side-bar .icon {
|
||||
filter: contrast(0) brightness(2);
|
||||
}
|
||||
}
|
||||
|
||||
.loading .progress {
|
||||
background-color: transparent;
|
||||
filter: contrast(0) brightness(2);
|
||||
}
|
||||
|
||||
.space-right .space-right-top .title,
|
||||
.space-right .line-2,
|
||||
.line-1 .name-field,
|
||||
.title,
|
||||
.config,
|
||||
.radio-selector,
|
||||
.header .tab,
|
||||
.bili-im .list-item .name,
|
||||
.bili-im .list-item .last-word,
|
||||
.bili-im .message .message-content:not(.is-img),
|
||||
.bili-im
|
||||
.msg-notify
|
||||
.cover-container
|
||||
.table-container
|
||||
.modules
|
||||
.module
|
||||
.detail,
|
||||
.bili-im .core-style,
|
||||
.detail .content,
|
||||
.follow-btn.active,
|
||||
.bp-emoji-box .emoji.kaomoji,
|
||||
.bp-emoji-box2 .emoji.kaomoji,
|
||||
.reply-textarea,
|
||||
.ar-recommend-item__info--title,
|
||||
.action-menu .menu-list a,
|
||||
.bp-popup-panel .content-text,
|
||||
.tab-list,
|
||||
.group-helper-msg-list .name {
|
||||
color: var(--bew-text-1);
|
||||
}
|
||||
|
||||
.line-1,
|
||||
.text-box,
|
||||
.bottom,
|
||||
.tip,
|
||||
.bili-im .msg-notify .content,
|
||||
.follow-btn.inactive,
|
||||
.notify-wrapper .notify-text,
|
||||
.msg-time .time,
|
||||
.send-btn:not(.active),
|
||||
.orginal-reply,
|
||||
.content .input-section .row .emoji-btn,
|
||||
.content .btnrow .btn.save.disabled,
|
||||
.content .btnrow .btn.clear,
|
||||
.msg-push-new__leave-message--text,
|
||||
.bp-icon-font.icon-close:before {
|
||||
color: var(--bew-text-2);
|
||||
}
|
||||
|
||||
.line-3,
|
||||
.line-3 *,
|
||||
.bili-im
|
||||
.msg-notify
|
||||
.cover-container
|
||||
.table-container
|
||||
.modules
|
||||
.module
|
||||
.mtitle,
|
||||
.content .btnrow .btn.clear:hover {
|
||||
color: var(--bew-text-3);
|
||||
}
|
||||
|
||||
.divider,
|
||||
.at-item:not(:last-child)::after,
|
||||
.love-item:not(:last-child)::after,
|
||||
.header,
|
||||
.bili-im .left,
|
||||
.bili-im .left .title,
|
||||
.bili-im .right .title,
|
||||
.bili-im .send-box,
|
||||
.liked-user:not(:last-child)::after,
|
||||
.follow-btn.active,
|
||||
.divided-line,
|
||||
.static-popup,
|
||||
.send-btn:not(.active),
|
||||
.content .input-section,
|
||||
.content .input-section .row .emoji-btn,
|
||||
.content .btnrow .btn.clear,
|
||||
.reply-textarea,
|
||||
.action-menu .menu-list {
|
||||
border-color: var(--bew-border-color);
|
||||
}
|
||||
|
||||
.action-menu .menu-list:before {
|
||||
border-right-color: var(--bew-border-color);
|
||||
border-top-color: var(--bew-border-color);
|
||||
}
|
||||
|
||||
.orginal-reply {
|
||||
border-color: var(--bew-text-2);
|
||||
}
|
||||
|
||||
.space-right .space-right-top .title,
|
||||
.card,
|
||||
.config {
|
||||
box-shadow: unset;
|
||||
}
|
||||
|
||||
.config .config-item:not(:first-child)::before,
|
||||
.bili-im .msg-notify hr,
|
||||
.divider-last::before,
|
||||
.divider-last::after,
|
||||
.header::after,
|
||||
.split-line {
|
||||
background-color: var(--bew-border-color);
|
||||
}
|
||||
|
||||
.bili-im .left,
|
||||
.bili-im .msg-notify,
|
||||
.bili-im .msg-push-new,
|
||||
.bili-im .message .message-content:not(.is-img),
|
||||
.bili-im .send-box,
|
||||
.follow-btn.inactive,
|
||||
.follow-btn.active,
|
||||
.notify-wrapper .notify-text,
|
||||
.bp-emoji-box .pagination,
|
||||
.bp-emoji-box2 .pagination,
|
||||
.send-btn:not(.active),
|
||||
.toggle,
|
||||
.content .btnrow .btn.save.disabled,
|
||||
.reply-textarea,
|
||||
.list-item.top {
|
||||
background-color: var(--bew-fill-1);
|
||||
}
|
||||
|
||||
.bili-im .list-item.active,
|
||||
.bili-im .list-item:hover,
|
||||
.bp-emoji-box .emoji-cover.selected,
|
||||
.bp-emoji-box .emoji:hover,
|
||||
.bp-emoji-box2 .emoji-cover.selected,
|
||||
.bp-emoji-box2 .emoji:hover,
|
||||
.action-menu .menu-list a:hover {
|
||||
background-color: var(--bew-fill-2);
|
||||
}
|
||||
|
||||
.msg-push-new__leave-message {
|
||||
background-color: var(--bew-fill-3);
|
||||
}
|
||||
|
||||
.space-left,
|
||||
.space-right,
|
||||
.emoji-list .emoji {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.link-progress-tv {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.space-right-top .title,
|
||||
.card,
|
||||
.config,
|
||||
.bili-im,
|
||||
.bili-im .message-list {
|
||||
background-color: var(--bew-content-solid-1);
|
||||
}
|
||||
|
||||
.static-popup,
|
||||
.action-menu .menu-list,
|
||||
.action-menu .menu-list:before,
|
||||
.bp-popup-panel,
|
||||
.group-helper-msg-list,
|
||||
.tab-list .tab-item.active::before,
|
||||
.group-helper-msg-list::after {
|
||||
background-color: var(--bew-elevated-solid-1);
|
||||
}
|
||||
|
||||
.follow-btn.inactive,
|
||||
.content .btnrow .btn.save.disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.action-button > .action-icon .border {
|
||||
fill: var(--bew-text-3);
|
||||
}
|
||||
|
||||
.link-progress-tv {
|
||||
filter: invert(1) brightness(2);
|
||||
}
|
||||
}
|
||||
// #endregion
|
||||
}
|
||||
|
||||
@@ -8,6 +8,10 @@
|
||||
border-radius: 0 0 8px 8px;
|
||||
}
|
||||
|
||||
.collection-m-exp {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// #region theme color adaption part
|
||||
.note-list .list-note-operation,
|
||||
.note-pc .note-container .note-header .note-operation,
|
||||
@@ -30,7 +34,13 @@
|
||||
.capture-bar
|
||||
.bar-right
|
||||
.copy-link:hover,
|
||||
.note-up .up-desc-container .desc-top .attention-btn-container:hover {
|
||||
.note-up .up-desc-container .desc-top .attention-btn-container:hover,
|
||||
.report-dialog
|
||||
.vui_dialog--footer
|
||||
.report-dialog-footer
|
||||
.button-wrap
|
||||
.comfirm-report:hover,
|
||||
.collection-m-exp .bottom .btn:hover {
|
||||
background-color: var(--bew-theme-color-80);
|
||||
}
|
||||
|
||||
@@ -38,6 +48,16 @@
|
||||
background-color: var(--bew-theme-color-80) !important;
|
||||
}
|
||||
|
||||
.follow-dialog-wrap-exp
|
||||
.follow-dialog-window
|
||||
.content
|
||||
.group-list
|
||||
.add-group
|
||||
.input-group
|
||||
.submitGroup {
|
||||
background-color: var(--bew-theme-color-10);
|
||||
}
|
||||
|
||||
.note-detail .note-operation .tab-action-item.is-active .tab-icon {
|
||||
color: var(--bew-theme-color);
|
||||
}
|
||||
|
||||
@@ -2,13 +2,20 @@
|
||||
// #region theme color adaption part
|
||||
// Increase the priority of the style inside by writing a non-existent selector in :not()
|
||||
:not(fdjslfds) {
|
||||
.watch-later-list header .s-btn {
|
||||
.watch-later-list header .s-btn,
|
||||
.bili-dialog .con .btn-box .btn-submit,
|
||||
.bili-dialog .con .btn-box .btn-cancel:hover {
|
||||
border-color: var(--bew-theme-color);
|
||||
}
|
||||
|
||||
.bili-dialog .con .btn-box .btn-submit:hover {
|
||||
border-color: var(--bew-theme-color-80);
|
||||
}
|
||||
|
||||
.watch-later-list header .s-btn,
|
||||
.watch-later-list .list-box .av-item .av-about .t:hover,
|
||||
.watch-later-list .list-box .av-item .av-about .info .user:hover {
|
||||
.watch-later-list .list-box .av-item .av-about .info .user:hover,
|
||||
.bili-dialog .con .btn-box .btn-cancel:hover {
|
||||
color: var(--bew-theme-color);
|
||||
}
|
||||
|
||||
@@ -16,30 +23,48 @@
|
||||
color: white;
|
||||
}
|
||||
|
||||
.watch-later-list header .s-btn:hover {
|
||||
.watch-later-list header .s-btn:hover,
|
||||
.bili-dialog .con .btn-box .btn-submit {
|
||||
background-color: var(--bew-theme-color);
|
||||
}
|
||||
|
||||
.bili-dialog .con .btn-box .btn-submit:hover {
|
||||
background-color: var(--bew-theme-color-80);
|
||||
}
|
||||
|
||||
.bili-dialog .con .btn-box .btn-cancel {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
// #endregion
|
||||
|
||||
// #region dark mode adaption part
|
||||
&.dark {
|
||||
.watch-later-list .list-box .av-item .key,
|
||||
.watch-later-list .list-box .av-item .av-about .t {
|
||||
.watch-later-list .list-box .av-item .av-about .t,
|
||||
.bili-dialog .con header,
|
||||
.bili-dialog .con .txt {
|
||||
color: var(--bew-text-1);
|
||||
}
|
||||
|
||||
.watch-later-list .list-box .av-item .av-about .info .user {
|
||||
.watch-later-list .list-box .av-item .av-about .info .user,
|
||||
.bili-dialog .con .btn-box .btn-cancel {
|
||||
color: var(--bew-text-2);
|
||||
}
|
||||
|
||||
.watch-later-list .list-box .av-item .av-about {
|
||||
.watch-later-list .list-box .av-item .av-about,
|
||||
.bili-dialog .con header,
|
||||
.bili-dialog .con .btn-box .btn-cancel {
|
||||
border-color: var(--bew-border-color);
|
||||
}
|
||||
|
||||
.watch-later-list header .s-btn {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.bili-dialog .con {
|
||||
background-color: var(--bew-elevated-solid-1);
|
||||
}
|
||||
}
|
||||
// #endregion
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user