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

style: adjust styles for top bar logo & search bar

Browse Source
This commit is contained in:
Hakadao
2023-10-29 15:22:48 +08:00
parent ccce9c2e05
commit 4901facbd3
2 changed files with 64 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -280,10 +280,13 @@ function handleKeyDown() {
}
#search-wrap {
--b-search-bar-color: var(--bew-content-1);
--b-search-bar-color-hover: var(--bew-content-1-hover);
--b-search-bar-color-focus: var(--b-search-bar-color);
@mixin card-content {
--at-apply: text-base outline-none w-full
bg-$bew-content-1 shadow-$bew-shadow-2;
bg-$b-search-bar-color shadow-$bew-shadow-2;
backdrop-filter: var(--bew-filter-glass);
}
@@ -292,7 +295,12 @@ function handleKeyDown() {
@include card-content;
--at-apply: shadow-$bew-shadow-2;
&:hover {
--at-apply: bg-$b-search-bar-color-hover;
}
&:focus {
--at-apply: bg-$b-search-bar-color-focus;
box-shadow: 0 6px 16px var(--bew-theme-color-40), inset 0 0 6px var(--bew-theme-color-30)
}
}

128
src/components/Topbar/Topbar.vue
View File

@@ -4,7 +4,6 @@ import { onMounted, watch } from 'vue'
import type { UnReadDm, UnReadMessage, UserInfo } from './types'
import { updateInterval } from './notify'
import { getUserID } from '~/utils/main'
import { settings } from '~/logic'
interface Props {
showSearchBar?: boolean
@@ -95,12 +94,12 @@ async function initData() {
}
function showLogoMenuDropdown() {
logo.value.classList.add('hover')
logo.value.classList.add('activated')
showChannelsPop.value = true
}
function closeLogoMenuDropdown() {
logo.value.classList.remove('hover')
logo.value.classList.remove('activated')
showChannelsPop.value = false
}
@@ -203,65 +202,62 @@ async function getTopbarNewMomentsCount() {
p="lg:x-20 md:x-16 x-14"
h="70px"
>
<Transition name="fade">
<div w="xl:280px">
<div
v-show="showTopbarMask"
class="fixed top-0 left-0"
w="full"
h="80px"
opacity="80"
pointer-events-none
z--1
:style="{
background: (settings.wallpaper || settings.useSearchPageModeOnHomePage) && isHomePage
? 'linear-gradient(rgba(0,0,0,0.6), transparent)' : `linear-gradient(var(--bew-homepage-bg), transparent)`
}"
/>
</Transition>
<div
class="left-side" z-1 w="xl:280px" shrink-0
@mouseenter.self="showLogoMenuDropdown()"
@mouseleave.self="closeLogoMenuDropdown()"
>
<Transition name="slide-out">
<a
v-if="showLogo"
ref="logo" class="logo" href="//www.bilibili.com"
:style="{ fill: (settings.wallpaper || settings.useSearchPageModeOnHomePage) && isHomePage ? 'white' : 'var(--bew-logo-color)' }"
>
<svg
t="1645466458357"
class="icon"
viewBox="0 0 2299 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="2663"
width="60"
height="60"
z-1 shrink-0 relative w-fit
@mouseenter.self="showLogoMenuDropdown()"
@mouseleave.self="closeLogoMenuDropdown()"
>
<Transition name="slide-out">
<a
v-if="showLogo"
ref="logo" href="//www.bilibili.com"
class="group logo"
flex items-center backdrop-glass border="1 $bew-border-color"
rounded="50px" p="x-4" shadow="$bew-shadow-2" duration-300
bg="$bew-elevated-1 hover:$bew-theme-color dark-hover:white"
w-auto h-50px
>
<path
d="M1775.840814 322.588002c6.0164 1.002733 53.144869-9.525967 55.150336-6.016401 3.0082 4.5123 24.065601 155.92504 18.550567 156.927774s-44.621635 10.027334-44.621635 10.027334c-3.0082-20.556034-28.577901-147.903173-29.079268-160.938707m75.205003-14.539634l20.556034 162.944174c10.5287-0.501367 53.144869-3.509567 57.155803-4.010934-6.0164-61.668103-16.545101-158.933241-16.545101-158.93324-20.054668-4.010934-41.112069-4.010934-61.166736 0m-40.610702 226.116376s92.752838-23.564234 126.344406-12.0328c17.046467 61.668103 48.131202 407.611118 51.139402 421.649386-21.057401 2.506833-90.246004 8.523234-95.761037 10.027333-4.5123-26.071068-81.72277-403.098818-81.722771-419.643919m343.436183-207.565809c5.515034 1.5041 54.648969-5.013667 55.150335-1.5041 1.002733 12.032801 6.0164 157.42914 0.501367 157.930507s-44.621635 4.010934-44.621635 4.010934c-1.002733-20.054668-12.032801-146.90044-11.030067-160.437341m75.70637-4.010933l4.010933 160.938707c10.5287 0 52.643502 2.506833 57.155803 2.005467-1.002733-61.668103 0-158.933241 0-158.933241-20.054668-3.509567-40.610702-5.013667-61.166736-4.010933m-64.676303 216.089043s94.758304-12.534167 126.845772 2.506833c7.019134 72.196803 6.0164 408.613852 7.019134 422.652119-21.558768 0-90.246004 1.002733-95.761038 2.005467-1.002733-26.071068-39.607968-410.619319-38.103868-427.164419m-220.099977-413.627519c54.648969 278.759879 96.262404 755.058234 97.766504 785.641602 0 0 43.117535 1.002733 91.750105 4.010934C2105.740095 614.383415 2070.644427 134.575493 2071.145794 119.033126c-12.032801-13.536901-126.344406 6.0164-126.344406 6.0164m-120.328005 659.297196c-10.5287-78.213204-290.291313-166.955108-447.720454-138.377206 0 0-19.553301-172.470141-27.073801-339.425248-6.517767-143.390873-1.002733-282.770813 0.501366-305.833681-10.5287-7.5205-123.837572 46.627102-185.004308 69.188603 0 0 73.199537 309.844614 126.344406 952.59671 0 0 84.730971 9.0246 230.12731-19.051934s317.365114-115.815705 302.825481-219.097244m-341.932083 140.88404l-24.566967-176.982441c6.0164-3.0082 156.927774 53.144869 172.971507 63.172203-2.506833 11.030067-148.40454 113.810238-148.40454 113.810238M610.664628 322.588002c6.0164 1.002733 53.144869-9.525967 55.150335-6.016401 3.0082 4.5123 24.065601 155.92504 18.550568 156.927774s-44.621635 10.027334-44.621635 10.027334c-3.0082-20.556034-28.577901-147.903173-29.079268-160.938707m75.205003-14.539634l20.556034 162.944174c10.5287-0.501367 53.144869-3.509567 57.155803-4.010934-6.517767-61.668103-16.545101-158.933241-16.545101-158.93324-20.054668-4.010934-41.112069-4.010934-61.166736 0m-40.610702 226.116376s92.752838-23.564234 126.344406-12.0328c17.046467 61.668103 48.131202 407.611118 51.139402 421.649386-21.057401 2.506833-90.246004 8.523234-95.761037 10.027333-4.5123-26.071068-81.72277-403.098818-81.722771-419.643919m343.436182-207.565809c5.515034 1.5041 54.648969-5.013667 55.150336-1.5041 1.002733 12.032801 6.0164 157.42914 0.501367 157.930507s-44.621635 4.010934-44.621635 4.010934c-1.002733-20.054668-11.531434-146.90044-11.030068-160.437341m75.706371-4.010933l4.010933 160.938707c10.5287 0 52.643502 2.506833 57.155803 2.005467-1.002733-61.668103 0-158.933241 0-158.933241-20.054668-3.509567-40.610702-4.5123-61.166736-4.010933m-64.676303 216.089043s94.758304-12.534167 126.845772 2.506833c7.019134 72.196803 6.0164 408.613852 7.019134 422.652119-21.558768 0-90.246004 1.002733-95.761038 2.005467-0.501367-26.071068-39.607968-410.619319-38.103868-427.164419m-220.099977-413.627519c54.648969 278.759879 96.262404 755.058234 97.766504 785.641602 0 0 43.117535 1.002733 91.750105 4.010934-28.577901-300.318647-63.67357-780.126569-63.172203-796.170303-12.032801-13.035534-126.344406 6.517767-126.344406 6.517767m-120.328005 659.297196c-10.5287-78.213204-290.291313-166.955108-447.720454-138.377206 0 0-19.553301-172.470141-27.073801-339.425248-6.517767-143.390873-1.002733-282.770813 0.501366-305.833681C174.475608-6.308547 61.166736 47.337689 0 69.89919c0 0 73.199537 309.844614 126.344406 952.59671 0 0 84.730971 9.0246 230.12731-19.051934s317.365114-115.815705 302.825481-219.097244m-341.932083 140.88404l-24.566967-176.982441c6.0164-3.0082 156.927774 53.144869 172.971507 63.172203-2.506833 11.030067-148.40454 113.810238-148.40454 113.810238"
p-id="2664"
/>
</svg>
</a>
</Transition>
<svg
t="1645466458357"
viewBox="0 0 2299 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="2663"
width="50"
height="40"
duration-300
un-fill="$bew-theme-color dark:white" un-group-hover:fill="white dark:$bew-theme-color"
>
<path
d="M1775.840814 322.588002c6.0164 1.002733 53.144869-9.525967 55.150336-6.016401 3.0082 4.5123 24.065601 155.92504 18.550567 156.927774s-44.621635 10.027334-44.621635 10.027334c-3.0082-20.556034-28.577901-147.903173-29.079268-160.938707m75.205003-14.539634l20.556034 162.944174c10.5287-0.501367 53.144869-3.509567 57.155803-4.010934-6.0164-61.668103-16.545101-158.933241-16.545101-158.93324-20.054668-4.010934-41.112069-4.010934-61.166736 0m-40.610702 226.116376s92.752838-23.564234 126.344406-12.0328c17.046467 61.668103 48.131202 407.611118 51.139402 421.649386-21.057401 2.506833-90.246004 8.523234-95.761037 10.027333-4.5123-26.071068-81.72277-403.098818-81.722771-419.643919m343.436183-207.565809c5.515034 1.5041 54.648969-5.013667 55.150335-1.5041 1.002733 12.032801 6.0164 157.42914 0.501367 157.930507s-44.621635 4.010934-44.621635 4.010934c-1.002733-20.054668-12.032801-146.90044-11.030067-160.437341m75.70637-4.010933l4.010933 160.938707c10.5287 0 52.643502 2.506833 57.155803 2.005467-1.002733-61.668103 0-158.933241 0-158.933241-20.054668-3.509567-40.610702-5.013667-61.166736-4.010933m-64.676303 216.089043s94.758304-12.534167 126.845772 2.506833c7.019134 72.196803 6.0164 408.613852 7.019134 422.652119-21.558768 0-90.246004 1.002733-95.761038 2.005467-1.002733-26.071068-39.607968-410.619319-38.103868-427.164419m-220.099977-413.627519c54.648969 278.759879 96.262404 755.058234 97.766504 785.641602 0 0 43.117535 1.002733 91.750105 4.010934C2105.740095 614.383415 2070.644427 134.575493 2071.145794 119.033126c-12.032801-13.536901-126.344406 6.0164-126.344406 6.0164m-120.328005 659.297196c-10.5287-78.213204-290.291313-166.955108-447.720454-138.377206 0 0-19.553301-172.470141-27.073801-339.425248-6.517767-143.390873-1.002733-282.770813 0.501366-305.833681-10.5287-7.5205-123.837572 46.627102-185.004308 69.188603 0 0 73.199537 309.844614 126.344406 952.59671 0 0 84.730971 9.0246 230.12731-19.051934s317.365114-115.815705 302.825481-219.097244m-341.932083 140.88404l-24.566967-176.982441c6.0164-3.0082 156.927774 53.144869 172.971507 63.172203-2.506833 11.030067-148.40454 113.810238-148.40454 113.810238M610.664628 322.588002c6.0164 1.002733 53.144869-9.525967 55.150335-6.016401 3.0082 4.5123 24.065601 155.92504 18.550568 156.927774s-44.621635 10.027334-44.621635 10.027334c-3.0082-20.556034-28.577901-147.903173-29.079268-160.938707m75.205003-14.539634l20.556034 162.944174c10.5287-0.501367 53.144869-3.509567 57.155803-4.010934-6.517767-61.668103-16.545101-158.933241-16.545101-158.93324-20.054668-4.010934-41.112069-4.010934-61.166736 0m-40.610702 226.116376s92.752838-23.564234 126.344406-12.0328c17.046467 61.668103 48.131202 407.611118 51.139402 421.649386-21.057401 2.506833-90.246004 8.523234-95.761037 10.027333-4.5123-26.071068-81.72277-403.098818-81.722771-419.643919m343.436182-207.565809c5.515034 1.5041 54.648969-5.013667 55.150336-1.5041 1.002733 12.032801 6.0164 157.42914 0.501367 157.930507s-44.621635 4.010934-44.621635 4.010934c-1.002733-20.054668-11.531434-146.90044-11.030068-160.437341m75.706371-4.010933l4.010933 160.938707c10.5287 0 52.643502 2.506833 57.155803 2.005467-1.002733-61.668103 0-158.933241 0-158.933241-20.054668-3.509567-40.610702-4.5123-61.166736-4.010933m-64.676303 216.089043s94.758304-12.534167 126.845772 2.506833c7.019134 72.196803 6.0164 408.613852 7.019134 422.652119-21.558768 0-90.246004 1.002733-95.761038 2.005467-0.501367-26.071068-39.607968-410.619319-38.103868-427.164419m-220.099977-413.627519c54.648969 278.759879 96.262404 755.058234 97.766504 785.641602 0 0 43.117535 1.002733 91.750105 4.010934-28.577901-300.318647-63.67357-780.126569-63.172203-796.170303-12.032801-13.035534-126.344406 6.517767-126.344406 6.517767m-120.328005 659.297196c-10.5287-78.213204-290.291313-166.955108-447.720454-138.377206 0 0-19.553301-172.470141-27.073801-339.425248-6.517767-143.390873-1.002733-282.770813 0.501366-305.833681C174.475608-6.308547 61.166736 47.337689 0 69.89919c0 0 73.199537 309.844614 126.344406 952.59671 0 0 84.730971 9.0246 230.12731-19.051934s317.365114-115.815705 302.825481-219.097244m-341.932083 140.88404l-24.566967-176.982441c6.0164-3.0082 156.927774 53.144869 172.971507 63.172203-2.506833 11.030067-148.40454 113.810238-148.40454 113.810238"
p-id="2664"
/>
</svg>
</a>
</Transition>
<Transition name="slide-in">
<ChannelsPop
v-if="showChannelsPop"
class="bew-popover"
pos="!left-0 !top-70px"
transform="!translate-x-0"
/>
</Transition>
<Transition name="slide-in">
<ChannelsPop
v-if="showChannelsPop"
class="bew-popover"
pos="!left-0 !top-70px"
transform="!translate-x-0"
/>
</Transition>
</div>
</div>
<!-- search bar -->
<div flex="~" w="full" justify="md:center <md:end" items-center>
<Transition name="slide-out">
<SearchBar v-if="props.showSearchBar" />
<SearchBar
v-if="props.showSearchBar"
style="
--b-search-bar-color: var(--bew-elevated-1);
--b-search-bar-hover: var(--bew-elevated-1-hover);
"
/>
</Transition>
</div>
@@ -536,31 +532,17 @@ async function getTopbarNewMomentsCount() {
after:transform after:-translate-x-1/2;
}
.left-side {
--at-apply: relative ;
.logo {
--at-apply: flex items-center;
.logo.activated {
--at-apply: bg-$bew-theme-color dark:bg-white;
&.hover {
svg:nth-child(2) {
--at-apply: transform rotate-180;
}
}
svg {
--at-apply: w-60px h-auto filter;
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
&:nth-child(2) {
--at-apply: duration-300;
}
}
svg {
--at-apply: fill-white dark:fill-$bew-theme-color;
}
}
.right-side {
--at-apply: flex h-55px items-center rounded-full p-2 backdrop-glass
bg-$bew-content-1 text-$bew-text-1 border-1 border-$bew-border-color
bg-$bew-elevated-1 text-$bew-text-1 border-1 border-$bew-border-color
box-border;
box-shadow: var(--bew-shadow-2);