mirror of
https://github.com/BewlyBewly/BewlyBewly.git
synced 2025-04-14 13:15:29 +00:00
feat(top-bar): tweak top bar styles
This commit is contained in:
Hakadao
@@ -63,6 +63,12 @@ const isSearchPage = computed((): boolean => {
|
||||
|
||||
// 當使用背景時，強制 icon 變白色用於區分背景
|
||||
const forceWhiteIcon = computed((): boolean => {
|
||||
if (
|
||||
// 分區頁面由於上面有背景，所以強制 icon 變白色用於區分背景
|
||||
// channel, anime, chinese anime, tv shows, movie, variety shows, mooc
|
||||
/https?:\/\/(?:www.)?bilibili.com\/(?:v|anime|guochuang|tv|movie|variety|mooc).*/.test(location.href)
|
||||
)
|
||||
return true
|
||||
if (!isHomePage())
|
||||
return false
|
||||
if (activatedPage.value === AppPage.Search) {
|
||||
@@ -439,12 +445,12 @@ defineExpose({
|
||||
<Transition name="fade">
|
||||
<div
|
||||
v-if="!reachTop"
|
||||
pos="absolute top-0 left-0" w-full h="[calc(var(--bew-top-bar-height)+10px)]"
|
||||
pos="absolute top-0 left-0" w-full h="[calc(var(--bew-top-bar-height)+20px)]"
|
||||
pointer-events-none opacity-100
|
||||
:style="{
|
||||
background: `linear-gradient(to bottom, ${
|
||||
forceWhiteIcon
|
||||
? 'rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4) calc(var(--bew-top-bar-height) / 2)'
|
||||
? 'rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2) calc(var(--bew-top-bar-height) / 2)'
|
||||
: 'color-mix(in oklab, var(--bew-bg), transparent 20%), color-mix(in oklab, var(--bew-bg), transparent 40%) calc(var(--bew-top-bar-height) / 2)'
|
||||
}, transparent)`,
|
||||
}"
|
||||
@@ -465,17 +471,20 @@ defineExpose({
|
||||
grid="~ place-items-center"
|
||||
rounded="46px" duration-300
|
||||
w-46px h-46px transform-gpu
|
||||
bg="hover:$bew-theme-color dark-hover:white"
|
||||
bg="hover:$bew-theme-color"
|
||||
@click="event => handleClickTopBarItem(event, 'channels')"
|
||||
>
|
||||
<svg
|
||||
t="1720198072316" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="1477" width="38" height="38"
|
||||
un-fill="$bew-theme-color dark:white" un-group-hover:fill="white dark:$bew-theme-color"
|
||||
filter="drop-shadow-[0_0_4px_var(--bew-theme-color-60)] dark:drop-shadow-[0_0_4px_var(--bew-theme-color)]"
|
||||
:style="{
|
||||
fill: forceWhiteIcon ? 'white' : 'var(--bew-theme-color)',
|
||||
filter: forceWhiteIcon ? 'drop-shadow(0 0 6px black)' : 'drop-shadow(0 0 4px var(--bew-theme-color-60))',
|
||||
}"
|
||||
group-hover:fill="!white"
|
||||
group-hover:filter="!none"
|
||||
duration-300 mt--1px
|
||||
>
|
||||
>
|
||||
<path d="M450.803484 456.506027l-120.670435 23.103715 10.333298 45.288107 119.454151-23.102578-9.117014-45.289244z m65.04448 120.060586c-29.483236 63.220622-55.926329 15.502222-55.926328 15.502223l-19.754098 12.768142s38.90176 53.192249 75.986489 12.764729c43.770311 40.42752 77.203911-13.068516 77.203911-13.068516l-17.934791-11.55072c0.001138-0.304924-31.305956 44.983182-59.575183-16.415858z m59.57632-74.773617L695.182222 524.895573l10.029511-45.288106-120.364373-23.103716-9.423076 45.289245z m237.784178-88.926436c-1.905778-84.362809-75.487004-100.540871-75.487004-100.540871s-57.408853-0.316302-131.944676-0.95232l54.237867-52.332089s8.562916-10.784996-6.026809-22.834062c-14.592-12.051342-15.543182-6.660551-20.615396-3.487289-4.441884 3.169849-69.462471 66.920676-80.878933 78.340551-29.494613 0-60.2624-0.319716-90.075591-0.319716h10.466418s-77.705671-76.754489-82.781298-80.241777c-5.075627-3.488427-5.709369-8.56064-20.616533 3.487289-14.589724 12.05248-6.026809 22.8352-6.026809 22.8352l55.504213 53.919288c-60.261262 0-112.280462 0.319716-136.383147 1.268623-78.025387 22.521173-71.99744 100.859449-71.99744 100.859449s0.950044 168.100978 0 253.103217c8.562916 85.00224 73.899804 98.636231 73.899805 98.636231s26.007324 0.63488 45.357511 0.63488c1.900089 5.391929 3.486151 32.034133 33.302756 32.034134 29.495751 0 33.30048-32.034133 33.30048-32.034134s217.263218-0.950044 235.340231-0.950044c0.953458 9.196658 5.394204 33.619058 35.207395 33.303893 29.494613-0.636018 31.714418-35.20512 31.714418-35.20512s10.151253-0.95232 40.280747 0c70.413653-13.005938 74.534684-95.468658 74.534684-95.468657s-1.265209-169.689316-0.312889-254.056676zM752.628622 681.8304c0 13.319964-10.467556 24.102684-23.471218 24.102684H300.980907c-13.003662 0-23.47008-10.78272-23.47008-24.102684V397.961671c0-13.32224 10.467556-24.106098 23.47008-24.106098h428.176497c13.003662 0 23.471218 10.783858 23.471218 24.106098v283.868729z" p-id="1478" /></svg>
|
||||
</a>
|
||||
|
||||
@@ -491,7 +500,7 @@ defineExpose({
|
||||
</div>
|
||||
|
||||
<!-- search bar -->
|
||||
<div flex="inline 1 md:justify-center <md:justify-end items-center" w="full">
|
||||
<div flex="inline 1 md:justify-center items-center" w="full">
|
||||
<Transition name="slide-out">
|
||||
<SearchBar
|
||||
v-if="showSearchBar"
|
||||
@@ -883,10 +892,10 @@ defineExpose({
|
||||
}
|
||||
|
||||
.logo.activated {
|
||||
--uno: "bg-$bew-theme-color dark:bg-white";
|
||||
--uno: "bg-$bew-theme-color";
|
||||
|
||||
svg {
|
||||
--uno: "fill-white dark:fill-$bew-theme-color";
|
||||
--uno: "!fill-white !filter-none";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -947,14 +956,13 @@ defineExpose({
|
||||
.unread-dot {
|
||||
--uno: "w-8px h-8px bg-$bew-theme-color rounded-8px absolute right-2px top-2px";
|
||||
}
|
||||
|
||||
.right-side-item {
|
||||
--uno: "relative text-$bew-text-1 flex items-center";
|
||||
|
||||
&:not(.avatar) a {
|
||||
--uno: "text-lg grid place-items-center rounded-40px duration-300 relative z-5";
|
||||
--uno: "h-34px w-34px";
|
||||
filter: drop-shadow(0 0 4px var(--bew-bg));
|
||||
filter: drop-shadow(0 0 6px var(--bew-bg));
|
||||
}
|
||||
|
||||
&.active a,
|
||||
@@ -964,7 +972,7 @@ defineExpose({
|
||||
|
||||
.white-icon {
|
||||
--uno: "text-white";
|
||||
filter: drop-shadow(0 0 4px black) !important;
|
||||
filter: drop-shadow(0 0 6px black) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user