mirror of
https://github.com/BewlyBewly/BewlyBewly.git
synced 2025-04-14 13:15:29 +00:00
feat: dark theme support to video page & search page
* style: adjust style of certain components * refactor: refine implementation for wallpaper mask and background effect * feat: add functionality to the top bar logo for returning to the homepage on click
This commit is contained in:
Hakadao
@@ -1,5 +1,6 @@
|
||||
import type { Tabs } from 'webextension-polyfill'
|
||||
import browser from 'webextension-polyfill'
|
||||
|
||||
// import { onMessage, sendMessage } from 'webext-bridge'
|
||||
import { resetCss } from './resetWebsiteStyle'
|
||||
import { setupAllMsgLstnrs } from './messageListeners'
|
||||
@@ -57,15 +58,9 @@ browser.tabs.onUpdated.addListener((tabId: number, changInfo: Tabs.OnUpdatedChan
|
||||
|| /https?:\/\/www.bilibili.com\/?$/.test(`${tab.url}`)
|
||||
|| /https?:\/\/bilibili.com\/\?spm_id_from=.*/.test(`${tab.url}`)
|
||||
|| /https?:\/\/www.bilibili.com\/\?spm_id_from=(.)*/.test(`${tab.url}`)
|
||||
|| true
|
||||
// || /https?:\/\/(www.)?bilibili.com\/video\/.*/.test(`${tab.url}`)
|
||||
) {
|
||||
browser.scripting.insertCSS({
|
||||
css: resetCss,
|
||||
target: {
|
||||
tabId,
|
||||
},
|
||||
})
|
||||
|
||||
if (changInfo.status === 'loading') {
|
||||
// browser.scripting.insertCSS({
|
||||
// css: `
|
||||
@@ -81,6 +76,13 @@ browser.tabs.onUpdated.addListener((tabId: number, changInfo: Tabs.OnUpdatedChan
|
||||
// },
|
||||
// })
|
||||
|
||||
browser.scripting.insertCSS({
|
||||
css: resetCss,
|
||||
target: {
|
||||
tabId,
|
||||
},
|
||||
})
|
||||
|
||||
// If it not a macOS, we will inject CSS to design the scrollbar
|
||||
if (!navigator.userAgent.includes('Mac OS X')) {
|
||||
browser.scripting.insertCSS({
|
||||
|
||||
@@ -3,66 +3,41 @@ export const resetCss = `
|
||||
* this stylesheet is used to reset the styles of the bilibili default style
|
||||
*/
|
||||
|
||||
:root {
|
||||
--bew-bg: hsl(220, 14%, 96%);
|
||||
// :root {
|
||||
// --bew-bg: hsl(220, 14%, 96%);
|
||||
// }
|
||||
|
||||
// --band_blue: var(--bew-theme-color);
|
||||
// --text1: var(--bew-text-1);
|
||||
// --text2: var(--bew-text-2);
|
||||
// --text3: var(--bew-text-3);
|
||||
// --bg1: var(--bew-content-1);
|
||||
// --bg2: var(--bew-content-1);
|
||||
// --bg3: var(--bew-content-1);
|
||||
// --line-light: var(--bew-fill-2);
|
||||
// --line_regular: var(--bew-fill-3);
|
||||
// --line_bold: var(--bew-fill-4);
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
--bew-bg: hsl(230 12% 6%);
|
||||
}
|
||||
// :root.dark {
|
||||
// --bew-bg: hsl(230 12% 6%);
|
||||
// }
|
||||
|
||||
html,
|
||||
body {
|
||||
font-size: 14px !important;
|
||||
min-width: unset !important;
|
||||
filter: none !important;
|
||||
}
|
||||
|
||||
html, body {
|
||||
background-color: var(--bew-bg);
|
||||
}
|
||||
a,
|
||||
a:hover {
|
||||
color: unset;
|
||||
}
|
||||
// html, body {
|
||||
// background-color: var(--bew-bg);
|
||||
// }
|
||||
|
||||
/*
|
||||
// button {
|
||||
// border: unset;
|
||||
// background: unset;
|
||||
// /* hide the original home page */
|
||||
// .login-tip {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
// &:focus,
|
||||
// &:active {
|
||||
// background: currentColor;
|
||||
// }
|
||||
// }*/
|
||||
|
||||
/* hide the original home page */
|
||||
.login-tip {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body > #i_cecream,
|
||||
#i_cecream *,
|
||||
#app,
|
||||
.international-footer {
|
||||
position: absolute;
|
||||
top: 200vh;
|
||||
visibility: hidden !important;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden !important;
|
||||
pointer-events: none !important;
|
||||
display: none;
|
||||
}
|
||||
// body > #i_cecream,
|
||||
// #i_cecream *,
|
||||
// /* #app, */
|
||||
// .international-footer {
|
||||
// position: absolute;
|
||||
// top: 200vh;
|
||||
// visibility: hidden !important;
|
||||
// width: 0;
|
||||
// height: 0;
|
||||
// overflow: hidden !important;
|
||||
// pointer-events: none !important;
|
||||
// display: none;
|
||||
// }
|
||||
`
|
||||
|
||||
@@ -14,6 +14,7 @@ interface Props {
|
||||
color?: string
|
||||
textColor?: string
|
||||
strong?: boolean
|
||||
round?: boolean
|
||||
}
|
||||
|
||||
// const props = withDefaults(defineProps<Props>(), {})
|
||||
@@ -37,7 +38,7 @@ function handleClick(evt: MouseEvent) {
|
||||
${strong ? 'b-button--strong' : ''}
|
||||
${color || textColor ? 'b-button--custom-color' : ''}
|
||||
`"
|
||||
:style="{ backgroundColor: color, color: textColor }"
|
||||
:style="{ 'backgroundColor': color, 'color': textColor, '--b-radius': round ? '50px' : '' }"
|
||||
@click="handleClick"
|
||||
>
|
||||
<slot name="left" />
|
||||
@@ -59,7 +60,7 @@ function handleClick(evt: MouseEvent) {
|
||||
--at-apply: bg-$b-color hover:bg-$b-color-hover
|
||||
rounded-$b-radius p-$b-padding transform-gpu active:scale-95
|
||||
duration-300 flex items-center gap-2 text-size-$b-font-size
|
||||
text-$b-text-color;
|
||||
text-$b-text-color lh-1.5em;
|
||||
|
||||
& svg {
|
||||
--at-apply: text-size-$b-icon-size
|
||||
|
||||
@@ -160,6 +160,7 @@ function handleKeyDown() {
|
||||
@keyup.enter="navigateToSearchResultPage(keyword)"
|
||||
@keyup.up="handleKeyUp"
|
||||
@keyup.down="handleKeyDown"
|
||||
@keydown.stop="() => {}"
|
||||
>
|
||||
<button
|
||||
p-2
|
||||
@@ -174,7 +175,7 @@ function handleKeyDown() {
|
||||
style="--un-drop-shadow: drop-shadow(0 0 6px var(--bew-theme-color)) "
|
||||
@click="navigateToSearchResultPage(keyword)"
|
||||
>
|
||||
<tabler:search />
|
||||
<tabler:search block align-middle />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -205,7 +206,7 @@ function handleKeyDown() {
|
||||
pointer-events-auto
|
||||
cursor-pointer
|
||||
text="base $bew-text-2"
|
||||
leading-0
|
||||
leading-0 p-0
|
||||
@click.stop="handleDelete(item.value)"
|
||||
>
|
||||
<ic-baseline-clear />
|
||||
|
||||
@@ -59,20 +59,20 @@ label {
|
||||
input[type="range"] {
|
||||
&::-webkit-slider-thumb {
|
||||
--at-apply: appearance-none w-$b-thumb-height h-$b-thumb-height bg-white rounded-$b-thumb-height
|
||||
border-2 border-$bew-border-color cursor-pointer;
|
||||
ring-$bew-border-color ring-2 cursor-pointer duration-300;
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb:hover {
|
||||
--at-apply: border-$bew-theme-color;
|
||||
--at-apply: ring-$bew-theme-color;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
--at-apply: appearance-none w-$b-thumb-height h-$b-thumb-height bg-white rounded-$b-thumb-height
|
||||
border-2 border-$bew-border-color cursor-pointer;
|
||||
ring-$bew-border-color ring-2 cursor-pointer duration-300;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb:hover {
|
||||
--at-apply: border-$bew-theme-color;
|
||||
--at-apply: ring-$bew-theme-color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -200,7 +200,7 @@ function getNewMomentsCount() {
|
||||
opacity="100"
|
||||
pointer-events-none
|
||||
z--1
|
||||
:style="{ background: settings.wallpaper ? 'linear-gradient(rgba(0,0,0,.8), transparent)' : `linear-gradient(var(--bew-bg), transparent)` }"
|
||||
:style="{ background: settings.wallpaper ? 'linear-gradient(rgba(0,0,0,4), transparent)' : `linear-gradient(var(--bew-bg), transparent)` }"
|
||||
/>
|
||||
</Transition>
|
||||
|
||||
@@ -209,7 +209,9 @@ function getNewMomentsCount() {
|
||||
@mouseenter.self="showLogoMenuDropdown()"
|
||||
@mouseleave.self="closeLogoMenuDropdown()"
|
||||
>
|
||||
<div ref="logo" class="logo">
|
||||
<a
|
||||
ref="logo" class="logo" href="//www.bilibili.com"
|
||||
>
|
||||
<svg
|
||||
t="1645466458357"
|
||||
class="icon"
|
||||
@@ -226,14 +228,14 @@ function getNewMomentsCount() {
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<tabler:chevron-down
|
||||
<!-- <tabler:chevron-down
|
||||
w="!4"
|
||||
h="!4"
|
||||
m="l-4"
|
||||
icon="stroke-4"
|
||||
:style="{ color: settings.wallpaper && showTopbarMask ? 'white' : 'var(--bew-text-1)' }"
|
||||
/>
|
||||
</div>
|
||||
/> -->
|
||||
</a>
|
||||
<Transition name="slide-in">
|
||||
<TopbarChannelsPop
|
||||
v-if="showChannelsPop"
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
// import { onMessage } from 'webext-bridge'
|
||||
import { createApp } from 'vue'
|
||||
import type { App as AppType } from 'vue'
|
||||
import App from './views/App.vue'
|
||||
import { setupApp } from '~/logic/common-setup'
|
||||
import { i18n } from '~/utils/i18n'
|
||||
@@ -63,7 +62,16 @@ function injectApp() {
|
||||
setupApp(app)
|
||||
app.use(i18n).mount(root)
|
||||
}
|
||||
else {
|
||||
else if (
|
||||
// video page
|
||||
/https?:\/\/(www.)?bilibili.com\/video\/.*/.test(currentUrl)
|
||||
// watch later playlist
|
||||
|| /https?:\/\/(www.)?bilibili.com\/list\/watchlater.*/.test(currentUrl)
|
||||
// favorite playlist
|
||||
|| /https?:\/\/(www.)?bilibili.com\/list\/ml.*/.test(currentUrl)
|
||||
// search page
|
||||
|| /https?:\/\/search.bilibili.com\.*/.test(currentUrl)
|
||||
) {
|
||||
// const originalPageContent = document.querySelector('#i_cecream')
|
||||
// if (originalPageContent)
|
||||
// originalPageContent.innerHTML = ''
|
||||
@@ -77,6 +85,12 @@ function injectApp() {
|
||||
styleEl.setAttribute('rel', 'stylesheet')
|
||||
styleEl.setAttribute('href', browser.runtime.getURL('dist/contentScripts/style.css'))
|
||||
shadowDOM.appendChild(styleEl)
|
||||
|
||||
const newStyleEl = document.createElement('link')
|
||||
newStyleEl.setAttribute('rel', 'stylesheet')
|
||||
newStyleEl.setAttribute('href', browser.runtime.getURL('dist/contentScripts/style.css'))
|
||||
document.body.appendChild(newStyleEl)
|
||||
|
||||
shadowDOM.appendChild(root)
|
||||
|
||||
// inject svg icons
|
||||
@@ -90,5 +104,3 @@ function injectApp() {
|
||||
app.use(i18n).mount(root)
|
||||
}
|
||||
}
|
||||
|
||||
export default app as AppType
|
||||
|
||||
@@ -72,7 +72,7 @@ defineProps<{
|
||||
<img
|
||||
:src="`${removeHttpFromUrl(cover)}@466w_622h.webp`"
|
||||
:alt="title"
|
||||
rounded="$bew-radius" aspect="12/16"
|
||||
rounded="$bew-radius" aspect="12/16" max-w-full w-full
|
||||
>
|
||||
|
||||
<!-- image after hovering -->
|
||||
|
||||
@@ -11,14 +11,15 @@ import History from './History/History.vue'
|
||||
import WatchLater from './WatchLater/WatchLater.vue'
|
||||
import Favorites from './Favorites/Favorites.vue'
|
||||
import Video from './Video/Video.vue'
|
||||
import { accessKey, activatedPage, settings } from '~/logic'
|
||||
import { accessKey, settings } from '~/logic'
|
||||
import '~/styles/index.ts'
|
||||
import { AppPage, LanguageType } from '~/enums/appEnums'
|
||||
import { getUserID, hexToRGBA, smoothScrollToTop } from '~/utils/main'
|
||||
import emitter from '~/utils/mitt'
|
||||
|
||||
const activatedPage = ref<AppPage>(AppPage.Home)
|
||||
const { locale } = useI18n()
|
||||
const [showSettings, toggle] = useToggle(false)
|
||||
const [showSettings, toggleSettings] = useToggle(false)
|
||||
const isDark = useDark({
|
||||
onChanged: (isDark: boolean) => {
|
||||
if (isDark) {
|
||||
@@ -101,15 +102,6 @@ watch(() => accessKey.value, () => {
|
||||
accessKey.value = ''
|
||||
})
|
||||
|
||||
watch(() => settings.value.wallpaper, () => {
|
||||
setAppWallpaper()
|
||||
})
|
||||
|
||||
watch(() => settings.value.searchPageWallpaper, () => {
|
||||
if (activatedPage.value === AppPage.Search)
|
||||
setAppWallpaper()
|
||||
})
|
||||
|
||||
watch(() => settings.value.wallpaperMaskOpacity, () => {
|
||||
setAppWallpaperMaskingOpacity()
|
||||
})
|
||||
@@ -121,10 +113,8 @@ watch(() => settings.value.searchPageWallpaperMaskOpacity, () => {
|
||||
watch(() => activatedPage.value, (newValue, oldValue) => {
|
||||
// If u have set the `individuallySetSearchPageWallpaper`, reapply the wallpaper when the new page is search page
|
||||
// or when switching from a search page to another page, since search page has its own wallpaper.
|
||||
if (settings.value.individuallySetSearchPageWallpaper && (newValue === AppPage.Search || oldValue === AppPage.Search)) {
|
||||
setAppWallpaper()
|
||||
if (settings.value.individuallySetSearchPageWallpaper && (newValue === AppPage.Search || oldValue === AppPage.Search))
|
||||
setAppWallpaperMaskingOpacity()
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
@@ -153,14 +143,14 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
if (!isBilibiliHomePage.value) {
|
||||
const originalTopBar: HTMLElement = document.querySelector('#biliMainHeader') as HTMLElement
|
||||
originalTopBar!.style.visibility = 'hidden'
|
||||
const originalTopBar: HTMLElement = document.querySelector('#biliMainHeader, #bili-header-container') as HTMLElement
|
||||
if (originalTopBar)
|
||||
originalTopBar.style.visibility = 'hidden'
|
||||
}
|
||||
|
||||
setAppAppearance()
|
||||
setAppLanguage()
|
||||
setAppThemeColor()
|
||||
setAppWallpaper()
|
||||
setAppWallpaperMaskingOpacity()
|
||||
})
|
||||
|
||||
@@ -210,9 +200,9 @@ function setAppAppearance() {
|
||||
else
|
||||
mainAppRef.value?.classList.remove('dark')
|
||||
|
||||
// Override Bilibili Evolved background color
|
||||
document.body.style.setProperty('background-color', 'unset', 'important')
|
||||
document.documentElement.style.setProperty('background-color', 'var(--bew-bg)', 'important')
|
||||
// // Override Bilibili Evolved background color
|
||||
// document.body.style.setProperty('background-color', 'unset', 'important')
|
||||
// document.documentElement.style.setProperty('background-color', 'var(--bew-bg)', 'important')
|
||||
}
|
||||
|
||||
function setAppThemeColor() {
|
||||
@@ -222,19 +212,10 @@ function setAppThemeColor() {
|
||||
for (let i = 0; i < 9; i++)
|
||||
bewlyElement.style.setProperty(`--bew-theme-color-${i + 1}0`, hexToRGBA(settings.value.themeColor, i * 0.1 + 0.1))
|
||||
}
|
||||
}
|
||||
|
||||
function setAppWallpaper() {
|
||||
nextTick(() => {
|
||||
if (settings.value.individuallySetSearchPageWallpaper && activatedPage.value === AppPage.Search)
|
||||
document.documentElement.style.backgroundImage = `url(${settings.value.searchPageWallpaper})`
|
||||
else
|
||||
document.documentElement.style.backgroundImage = `url(${settings.value.wallpaper})`
|
||||
|
||||
document.documentElement.style.backgroundSize = 'cover'
|
||||
document.documentElement.style.backgroundPosition = 'center'
|
||||
document.documentElement.style.transition = 'backgroundImage .5s ease-in-out'
|
||||
})
|
||||
document.body.style.setProperty('--bew-theme-color', settings.value.themeColor)
|
||||
for (let i = 0; i < 9; i++)
|
||||
document.body.style.setProperty(`--bew-theme-color-${i + 1}0`, hexToRGBA(settings.value.themeColor, i * 0.1 + 0.1))
|
||||
}
|
||||
|
||||
function setAppWallpaperMaskingOpacity() {
|
||||
@@ -257,23 +238,47 @@ function handleBackToTop() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- background mask -->
|
||||
<div
|
||||
v-if="(!settings.individuallySetSearchPageWallpaper && settings.enableWallpaperMasking) || (activatedPage !== AppPage.Search && settings.enableWallpaperMasking)"
|
||||
pos="absolute top-0 left-0" w-full h-full pointer-events-none bg="$bew-bg-mask" z--1
|
||||
:style="{
|
||||
backdropFilter: `blur(${settings.wallpaperBlurIntensity}px)`,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
v-else-if="settings.individuallySetSearchPageWallpaper && activatedPage === AppPage.Search && settings.searchPageEnableWallpaperMasking"
|
||||
pos="absolute top-0 left-0" w-full h-full pointer-events-none bg="$bew-bg-mask" z--1
|
||||
:style="{
|
||||
backdropFilter: `blur(${settings.searchPageWallpaperBlurIntensity}px)`,
|
||||
}"
|
||||
/>
|
||||
<template v-if="isBilibiliHomePage">
|
||||
<template v-if="activatedPage === AppPage.Search">
|
||||
<!-- background -->
|
||||
<div
|
||||
pos="absolute top-0 left-0" w-full h-full duration-300 bg="cover center $bew-homepage-bg"
|
||||
:style="{ backgroundImage: `url(${settings.individuallySetSearchPageWallpaper ? settings.searchPageWallpaper : settings.wallpaper})` }"
|
||||
/>
|
||||
<!-- background mask -->
|
||||
<transition name="fade">
|
||||
<div
|
||||
v-if="(!settings.individuallySetSearchPageWallpaper && settings.enableWallpaperMasking) || (settings.searchPageEnableWallpaperMasking)"
|
||||
pos="absolute top-0 left-0" w-full h-full pointer-events-none bg="$bew-bg-mask"
|
||||
:style="{
|
||||
backdropFilter: `blur(${settings.individuallySetSearchPageWallpaper ? settings.searchPageWallpaperBlurIntensity : settings.wallpaperBlurIntensity}px)`,
|
||||
}"
|
||||
/>
|
||||
</transition>
|
||||
</template>
|
||||
<template v-else>
|
||||
<!-- background -->
|
||||
<div
|
||||
pos="absolute top-0 left-0" w-full h-full duration-300 bg="cover center $bew-bg"
|
||||
:style="{ backgroundImage: `url(${settings.wallpaper})` }"
|
||||
/>
|
||||
<!-- background mask -->
|
||||
<transition name="fade">
|
||||
<div
|
||||
v-if="settings.enableWallpaperMasking"
|
||||
pos="absolute top-0 left-0" w-full h-full pointer-events-none bg="$bew-bg-mask"
|
||||
:style="{
|
||||
backdropFilter: `blur(${settings.wallpaperBlurIntensity}px)`,
|
||||
}"
|
||||
/>
|
||||
</transition>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<div ref="mainAppRef" text="$bew-text-1" transition="opacity duration-300" h-100vh overflow-y-scroll :style="{ opacity: mainAppOpacity }">
|
||||
<div
|
||||
ref="mainAppRef" class="bewly-wrapper" text="$bew-text-1" transition="opacity duration-300" overflow-y-scroll z-60
|
||||
:style="{ opacity: mainAppOpacity, height: isBilibiliHomePage ? '100vh' : '0' }"
|
||||
>
|
||||
<div m-auto max-w="$bew-page-max-width" :style="{ opacity: showSettings ? 0.4 : 1 }">
|
||||
<Transition name="topbar">
|
||||
<Topbar
|
||||
@@ -305,7 +310,7 @@ function handleBackToTop() {
|
||||
<Tooltip :content="$t('dock.search')" :placement="tooltipPlacement">
|
||||
<button
|
||||
class="dock-item"
|
||||
:class="{ active: activatedPage === AppPage.Search && !isVideoPage }"
|
||||
:class="{ active: activatedPage === AppPage.Search }"
|
||||
@click="changeActivatePage(AppPage.Search)"
|
||||
>
|
||||
<tabler:search />
|
||||
@@ -315,7 +320,7 @@ function handleBackToTop() {
|
||||
<Tooltip :content="$t('dock.home')" :placement="tooltipPlacement">
|
||||
<button
|
||||
class="dock-item"
|
||||
:class="{ active: activatedPage === AppPage.Home && !isVideoPage }"
|
||||
:class="{ active: activatedPage === AppPage.Home }"
|
||||
@click="changeActivatePage(AppPage.Home)"
|
||||
>
|
||||
<tabler:home />
|
||||
@@ -325,7 +330,7 @@ function handleBackToTop() {
|
||||
<Tooltip :content="$t('dock.anime')" :placement="tooltipPlacement">
|
||||
<button
|
||||
class="dock-item"
|
||||
:class="{ active: activatedPage === AppPage.Anime && !isVideoPage }"
|
||||
:class="{ active: activatedPage === AppPage.Anime }"
|
||||
@click="changeActivatePage(AppPage.Anime)"
|
||||
>
|
||||
<tabler:device-tv />
|
||||
@@ -335,7 +340,7 @@ function handleBackToTop() {
|
||||
<Tooltip :content="$t('dock.history')" :placement="tooltipPlacement">
|
||||
<button
|
||||
class="dock-item"
|
||||
:class="{ active: activatedPage === AppPage.History && !isVideoPage }"
|
||||
:class="{ active: activatedPage === AppPage.History }"
|
||||
@click="changeActivatePage(AppPage.History)"
|
||||
>
|
||||
<tabler:clock />
|
||||
@@ -355,7 +360,7 @@ function handleBackToTop() {
|
||||
<Tooltip :content="$t('dock.watch_later')" :placement="tooltipPlacement">
|
||||
<button
|
||||
class="dock-item"
|
||||
:class="{ active: activatedPage === AppPage.WatchLater && !isVideoPage }"
|
||||
:class="{ active: activatedPage === AppPage.WatchLater }"
|
||||
@click="changeActivatePage(AppPage.WatchLater)"
|
||||
>
|
||||
<iconoir:playlist-play />
|
||||
@@ -383,21 +388,37 @@ function handleBackToTop() {
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip :content="$t('dock.settings')" :placement="tooltipPlacement">
|
||||
<button class="dock-item" @click="toggle()">
|
||||
<button class="dock-item" @click="toggleSettings()">
|
||||
<tabler:settings />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</aside>
|
||||
<aside v-else pos="fixed top-0 right-6px" h-full flex items-center z-10>
|
||||
<div flex="~ gap-2 col">
|
||||
<Tooltip :content="isDark ? $t('dock.dark_mode') : $t('dock.light_mode')" placement="left">
|
||||
<Button size="small" round shadow="$bew-shadow-1" w-45px h-45px @click="toggleDark()">
|
||||
<tabler:moon-stars v-if="isDark" text-xl shrink-0 lh-0 />
|
||||
<tabler:sun v-else text-xl shrink-0 lh-0 />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip :content="$t('dock.settings')" placement="left">
|
||||
<Button size="small" round shadow="$bew-shadow-1" w-45px h-45px @click="toggleSettings">
|
||||
<tabler:settings text-xl shrink-0 lh-0 />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main
|
||||
v-if="isBilibiliHomePage"
|
||||
p="t-80px" m-auto
|
||||
relative
|
||||
:w="isVideoPage ? '[calc(100%-160px)]' : 'lg:85% md:[calc(90%-60px)] [calc(100%-140px)]'"
|
||||
>
|
||||
<!-- control button group -->
|
||||
<div
|
||||
v-if="isBilibiliHomePage && activatedPage !== AppPage.Search"
|
||||
v-if="activatedPage !== AppPage.Search"
|
||||
pos="fixed right-24 bottom-4" z-4
|
||||
>
|
||||
<!-- refresh button -->
|
||||
@@ -420,9 +441,8 @@ function handleBackToTop() {
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Transition v-if="isBilibiliHomePage" name="fade">
|
||||
<Transition name="fade">
|
||||
<Component :is="pages[activatedPage]" :key="dynamicComponentKey" absolute w-full />
|
||||
<!-- <Video v-else /> -->
|
||||
</Transition>
|
||||
</main>
|
||||
</div>
|
||||
@@ -444,6 +464,10 @@ function handleBackToTop() {
|
||||
}
|
||||
|
||||
.dock-wrap {
|
||||
svg {
|
||||
--at-apply: block align-middle;
|
||||
}
|
||||
|
||||
&.left {
|
||||
--at-apply: left-2;
|
||||
}
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
import { useStorageLocal } from '~/composables/useStorageLocal'
|
||||
import { AppPage } from '~/enums/appEnums'
|
||||
import type { Settings } from '~/models/models'
|
||||
|
||||
export const storageDemo = useStorageLocal('webext-demo', 'Storage Demo')
|
||||
export const accessKey = useStorageLocal('accessKey', '')
|
||||
export const activatedPage = useStorageLocal('activatedPage', ref<AppPage>(AppPage.Home))
|
||||
|
||||
export const settings = useStorageLocal('settings', ref<Settings>({
|
||||
language: '',
|
||||
|
||||
@@ -39,7 +39,7 @@ export async function getManifest() {
|
||||
host_permissions: ['*://*.bilibili.com/*', '*://*.mcbbs.net/*'],
|
||||
content_scripts: [
|
||||
{
|
||||
matches: ['http://www.bilibili.com/*', 'https://www.bilibili.com/*'],
|
||||
matches: ['*://www.bilibili.com/*', '*://search.bilibili.com/*'],
|
||||
js: ['./dist/contentScripts/index.global.js'],
|
||||
run_at: 'document_start',
|
||||
match_about_blank: true,
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import '@unocss/reset/tailwind.css'
|
||||
// import '@unocss/reset/tailwind.css'
|
||||
import './variables.scss'
|
||||
import './main.scss'
|
||||
import './reset.scss'
|
||||
import 'uno.css'
|
||||
|
||||
@@ -8,8 +8,12 @@
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
html, body {
|
||||
font-size: 14px!important;
|
||||
html,
|
||||
body {
|
||||
// font-size: 14px !important;
|
||||
// min-width: unset !important;
|
||||
// filter: none !important;
|
||||
background-color: var(--bew-bg) !important;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
@@ -26,7 +30,7 @@ html > ::-webkit-scrollbar-track {
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(120, 120, 122, .6);
|
||||
background-color: rgba(120, 120, 122, 0.6);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
@@ -34,22 +38,6 @@ html > ::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// html,
|
||||
// body,
|
||||
// #app {
|
||||
// margin: 0;
|
||||
// padding: 0;
|
||||
// }
|
||||
|
||||
// html {
|
||||
// filter: none !important;
|
||||
// }
|
||||
|
||||
// body {
|
||||
// background: var(--bew-bg) !important;
|
||||
// color: var(--bew-text-1);
|
||||
// }
|
||||
|
||||
.keep-two-lines {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -59,6 +47,25 @@ html > ::-webkit-scrollbar-track {
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
--at-apply: color-$bew-text-1;
|
||||
}
|
||||
}
|
||||
|
||||
// adjust watcher later playlist container
|
||||
.playlist-container {
|
||||
padding: 0 70px;
|
||||
}
|
||||
|
||||
// video page
|
||||
.video-container-v1 {
|
||||
padding: 0 70px;
|
||||
}
|
||||
|
||||
.card-loaded {
|
||||
background-color: var(--bew-elevated-solid-1);
|
||||
}
|
||||
|
||||
463
src/styles/reset.scss
Normal file
463
src/styles/reset.scss
Normal file
@@ -0,0 +1,463 @@
|
||||
// copy from @unocss/reset/tailwind.css
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
// box-sizing: border-box; /* 1 */
|
||||
border-width: 0; /* 2 */
|
||||
border-style: solid; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Remove the default font size and weight for headings.
|
||||
*/
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/*
|
||||
Removes the default spacing and border for appropriate elements.
|
||||
*/
|
||||
|
||||
blockquote,
|
||||
dl,
|
||||
dd,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
hr,
|
||||
figure,
|
||||
p,
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Correct the inability to style clickable types in iOS and Safari.
|
||||
2. Remove default button styles.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type='button'],
|
||||
[type='reset'],
|
||||
[type='submit'] {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
background-color: transparent; /* 2 */
|
||||
background-image: none; /* 2 */
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
menu {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Change the font styles in all browsers.
|
||||
2. Remove the margin in Firefox and Safari.
|
||||
3. Remove default padding in all browsers.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-feature-settings: inherit; /* 1 */
|
||||
font-variation-settings: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
font-weight: inherit; /* 1 */
|
||||
line-height: inherit; /* 1 */
|
||||
color: inherit; /* 1 */
|
||||
// margin: 0; /* 2 */
|
||||
// padding: 0; /* 3 */
|
||||
}
|
||||
|
||||
button {
|
||||
border: unset;
|
||||
}
|
||||
|
||||
:host {
|
||||
/*
|
||||
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
|
||||
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
|
||||
*/
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box; /* 1 */
|
||||
// border-width: 0; /* 2 */
|
||||
// border-style: solid; /* 2 */
|
||||
// border-color: #e5e7eb; /* 2 */
|
||||
}
|
||||
|
||||
// /*
|
||||
// 1. Use a consistent sensible line-height in all browsers.
|
||||
// 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
// 3. Use a more readable tab size.
|
||||
// 4. Use the user's configured `sans` font-family by default.
|
||||
// */
|
||||
|
||||
// html {
|
||||
// line-height: 1.5; /* 1 */
|
||||
// -webkit-text-size-adjust: 100%; /* 2 */
|
||||
// -moz-tab-size: 4; /* 3 */
|
||||
// tab-size: 4; /* 3 */
|
||||
// font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
|
||||
// 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
|
||||
// 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
||||
// 'Noto Color Emoji'; /* 4 */
|
||||
// }
|
||||
|
||||
// /*
|
||||
// 1. Remove the margin in all browsers.
|
||||
// 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
|
||||
// */
|
||||
|
||||
// body {
|
||||
// margin: 0; /* 1 */
|
||||
// line-height: inherit; /* 2 */
|
||||
// }
|
||||
|
||||
/*
|
||||
1. Add the correct height in Firefox.
|
||||
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
|
||||
3. Ensure horizontal rules are visible by default.
|
||||
*/
|
||||
|
||||
hr {
|
||||
height: 0; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
border-top-width: 1px; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
Add the correct text decoration in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
abbr:where([title]) {
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
|
||||
/*
|
||||
Remove the default font size and weight for headings.
|
||||
*/
|
||||
|
||||
// h1,
|
||||
// h2,
|
||||
// h3,
|
||||
// h4,
|
||||
// h5,
|
||||
// h6 {
|
||||
// font-size: inherit;
|
||||
// font-weight: inherit;
|
||||
// }
|
||||
|
||||
/*
|
||||
Reset links to optimize for opt-in styling instead of opt-out.
|
||||
*/
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
/*
|
||||
Add the correct font weight in Edge and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Use the user's configured `mono` font family by default.
|
||||
2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp,
|
||||
pre {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
||||
'Liberation Mono', 'Courier New', monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/*
|
||||
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
|
||||
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
|
||||
3. Remove gaps between table borders by default.
|
||||
*/
|
||||
|
||||
table {
|
||||
text-indent: 0; /* 1 */
|
||||
border-color: inherit; /* 2 */
|
||||
border-collapse: collapse; /* 3 */
|
||||
}
|
||||
|
||||
// /*
|
||||
// 1. Change the font styles in all browsers.
|
||||
// 2. Remove the margin in Firefox and Safari.
|
||||
// 3. Remove default padding in all browsers.
|
||||
// */
|
||||
|
||||
// button,
|
||||
// input,
|
||||
// optgroup,
|
||||
// select,
|
||||
// textarea {
|
||||
// font-family: inherit; /* 1 */
|
||||
// font-feature-settings: inherit; /* 1 */
|
||||
// font-variation-settings: inherit; /* 1 */
|
||||
// font-size: 100%; /* 1 */
|
||||
// font-weight: inherit; /* 1 */
|
||||
// line-height: inherit; /* 1 */
|
||||
// color: inherit; /* 1 */
|
||||
// // margin: 0; /* 2 */
|
||||
// // padding: 0; /* 3 */
|
||||
// }
|
||||
|
||||
// button {
|
||||
// border: unset;
|
||||
// }
|
||||
|
||||
/*
|
||||
Remove the inheritance of text transform in Edge and Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
// /*
|
||||
// 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
// 2. Remove default button styles.
|
||||
// */
|
||||
|
||||
// button,
|
||||
// [type='button'],
|
||||
// [type='reset'],
|
||||
// [type='submit'] {
|
||||
// -webkit-appearance: button; /* 1 */
|
||||
// background-color: transparent; /* 2 */
|
||||
// background-image: none; /* 2 */
|
||||
// }
|
||||
|
||||
/*
|
||||
Use the modern Firefox focus style for all focusable elements.
|
||||
*/
|
||||
|
||||
:-moz-focusring {
|
||||
outline: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
|
||||
*/
|
||||
|
||||
:-moz-ui-invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/*
|
||||
Add the correct vertical alignment in Chrome and Firefox.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/*
|
||||
Correct the cursor style of increment and decrement buttons in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-inner-spin-button,
|
||||
::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Correct the odd appearance in Chrome and Safari.
|
||||
2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type='search'] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Correct the inability to style clickable types in iOS and Safari.
|
||||
2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Add the correct display in Chrome and Safari.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/*
|
||||
Removes the default spacing and border for appropriate elements.
|
||||
*/
|
||||
|
||||
// blockquote,
|
||||
// dl,
|
||||
// dd,
|
||||
// h1,
|
||||
// h2,
|
||||
// h3,
|
||||
// h4,
|
||||
// h5,
|
||||
// h6,
|
||||
// hr,
|
||||
// figure,
|
||||
// p,
|
||||
// pre {
|
||||
// margin: 0;
|
||||
// }
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// ol,
|
||||
// ul,
|
||||
// menu {
|
||||
// list-style: none;
|
||||
// margin: 0;
|
||||
// padding: 0;
|
||||
// }
|
||||
|
||||
/*
|
||||
Prevent resizing textareas horizontally by default.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
|
||||
2. Set the default placeholder color to the user's configured gray 400 color.
|
||||
*/
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
opacity: 1; /* 1 */
|
||||
color: #9ca3af; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Set the default cursor for buttons.
|
||||
*/
|
||||
|
||||
button,
|
||||
[role='button'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*
|
||||
Make sure disabled buttons don't get the pointer cursor.
|
||||
*/
|
||||
:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
|
||||
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
|
||||
This can trigger a poorly considered lint error in some tools but is included by design.
|
||||
*/
|
||||
|
||||
img,
|
||||
svg,
|
||||
video,
|
||||
canvas,
|
||||
audio,
|
||||
iframe,
|
||||
embed,
|
||||
object {
|
||||
display: block; /* 1 */
|
||||
vertical-align: middle; /* 2 */
|
||||
}
|
||||
|
||||
// /*
|
||||
// Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
|
||||
// */
|
||||
|
||||
// img,
|
||||
// video {
|
||||
// max-width: 100%;
|
||||
// height: auto;
|
||||
// }
|
||||
|
||||
/* Make elements with the HTML hidden attribute stay hidden by default */
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -81,7 +81,8 @@
|
||||
--bew-text-4: hsl(215 19% 72%);
|
||||
// #endregion
|
||||
|
||||
--bew-bg: hsl(220 14% 96%);
|
||||
--bew-bg: hsl(0 0% 100%);
|
||||
--bew-homepage-bg: hsl(220 14% 96%);
|
||||
--bew-bg-mask-opacity: 0;
|
||||
--bew-bg-mask: hsl(220 14% 96% / var(--bew-bg-mask-opacity));
|
||||
|
||||
@@ -122,6 +123,7 @@
|
||||
--bew-text-4: hsl(215 19% 25%);
|
||||
|
||||
--bew-bg: hsl(230 12% 6%);
|
||||
--bew-homepage-bg: hsl(230 12% 6%);
|
||||
--bew-bg-mask: hsl(230 12% 6% / var(--bew-bg-mask-opacity));
|
||||
|
||||
--bew-content-1: hsl(230 12% 13% / var(--bew-content-opacity));
|
||||
@@ -143,14 +145,302 @@
|
||||
}
|
||||
|
||||
:root {
|
||||
--band_blue: var(--bew-theme-color);
|
||||
// --band_blue: var(--bew-theme-color);
|
||||
// --text1: var(--bew-text-1);
|
||||
// --text2: var(--bew-text-2);
|
||||
// --text3: var(--bew-text-3);
|
||||
// --bg1: var(--bew-content-1);
|
||||
// --bg2: var(--bew-content-1);
|
||||
// --bg3: var(--bew-content-1);
|
||||
// --line-light: var(--bew-fill-2);
|
||||
// --line_regular: var(--bew-fill-3);
|
||||
// --line_bold: var(--bew-fill-4);
|
||||
|
||||
// --v_brand_pink: var(--bew-theme-color, #ff6699);
|
||||
// --v_brand_pink_thin: var(--bew-theme-color-20, #ffecf1);
|
||||
// --v_brand_blue: var(--bew-theme-color, #00aeec);
|
||||
// --v_brand_blue_thin: var(--bew-theme-color-20, #dff6fd);
|
||||
// --v_stress_red: var(--stress_red, #f85a54);
|
||||
// --v_stress_red_thin: var(--stress_red_thin, #feecea);
|
||||
// --v_success_green: var(--success_green, #2ac864);
|
||||
// --v_success_green_thin: var(--success_green_thin, #e4f8ea);
|
||||
// --v_operate_orange: var(--operate_orange, #ff7f24);
|
||||
// --v_operate_orange_thin: var(--operate_orange_thin, #fff0e3);
|
||||
// --v_pay_yellow: var(--pay_yellow, #ffb027);
|
||||
// --v_pay_yellow_thin: var(--pay_yellow_thin, #fff6e4);
|
||||
// --v_bg1: var(--bew-content-solid-1);
|
||||
// --v_bg2: var(--bew-content-solid-1);
|
||||
// --v_bg3: var(--bew-content-solid-1);
|
||||
// --v_bg1_float: var(--bew-elevated-solid-1, #ffffff);
|
||||
// --v_bg2_float: var(--bew-elevated-solid-2, #f1f2f3);
|
||||
// --v_text_white: var(--text_white, #ffffff);
|
||||
// --v_text1: var(--bew-text-1);
|
||||
// --v_text2: var(--bew-text-2);
|
||||
// --v_text3: var(--bew-text-3);
|
||||
// --v_text4: var(--bew-text-4);
|
||||
// --v_text_link: var(--bew-theme-color);
|
||||
// --v_text_notice: var(--text_notice, #e58900);
|
||||
// --v_line_light: var(--bew-fill-1);
|
||||
// --v_line_regular: var(--bew-fill-2);
|
||||
// --v_line_bold: var(--bew-fill-3);
|
||||
// --v_graph_white: var(--graph_white, #ffffff);
|
||||
// --v_graph_bg_thin: var(--graph_bg_thin, #f6f7f8);
|
||||
// --v_graph_bg_regular: var(--graph_bg_regular, #f1f2f3);
|
||||
// --v_graph_bg_thick: var(--graph_bg_thick, #e3e5e7);
|
||||
// --v_graph_weak: var(--graph_weak, #c9ccd0);
|
||||
// --v_graph_medium: var(--graph_medium, #9499a0);
|
||||
// --v_graph_icon: var(--graph_icon, #61666d);
|
||||
// --v_shadow: var(--shadow, #000000);
|
||||
// --v_brand_pink_hover: var(--brand_pink_hover, #ff8cb0);
|
||||
// --v_brand_pink_active: var(--brand_pink_active, #e84b85);
|
||||
// --v_brand_pink_disabled: var(--brand_pink_disabled, #ffb3ca);
|
||||
// --v_brand_blue_hover: var(--brand_blue_hover, #40c5f1);
|
||||
// --v_brand_blue_active: var(--brand_blue_active, #008ac5);
|
||||
// --v_brand_blue_disabled: var(--brand_blue_disabled, #80daf6);
|
||||
// --v_stress_red_hover: var(--stress_red_hover, #fa857f);
|
||||
// --v_stress_red_active: var(--stress_red_active, #e23d3d);
|
||||
// --v_stress_red_disabled: var(--stress_red_disabled, #fcafaa);
|
||||
// --v_text_hover: var(--text_hover, #797f87);
|
||||
// --v_text_active: var(--text_active, #61666d);
|
||||
// --v_text_disabled: var(--text_disabled, #c9ccd0);
|
||||
// --v_line_border: var(--line_border, #c9ccd0);
|
||||
// --v_line_bolder_hover: var(--line_bolder_hover, #e3e5e7);
|
||||
// --v_line_bolder_active: var(--line_bolder_active, #aeb3b9);
|
||||
// --v_line_bolder_disabled: var(--line_bolder_disabled, #f1f2f3);
|
||||
}
|
||||
|
||||
:root.dark,
|
||||
.dark body {
|
||||
--brand_pink: var(--bew-theme-color);
|
||||
--brand_pink_thin: var(--bew-theme-color-20);
|
||||
--brand_blue: var(--bew-theme-color);
|
||||
--brand_blue_thin: var(--bew-theme-color-20);
|
||||
--stress_red: var(--Re5);
|
||||
--stress_red_thin: var(--Re1);
|
||||
--success_green: var(--Gr5);
|
||||
--success_green_thin: var(--Gr1);
|
||||
--operate_orange: var(--Or5);
|
||||
--operate_orange_thin: var(--Or1);
|
||||
--pay_yellow: var(--Ye5);
|
||||
--pay_yellow_thin: var(--Ye1);
|
||||
--bg1: var(--bew-bg);
|
||||
--bg2: var(--bew-content-solid-1);
|
||||
--bg3: var(--bew-content-solid-1);
|
||||
--bg1_float: var(--bew-elevated-solid-1);
|
||||
--bg2_float: var(--bew-elevated-solid-2);
|
||||
--text_white: var(--Wh0_u);
|
||||
--text1: var(--bew-text-1);
|
||||
--text2: var(--bew-text-2);
|
||||
--text3: var(--bew-text-3);
|
||||
--bg1: var(--bew-content-1);
|
||||
--bg2: var(--bew-content-1);
|
||||
--bg3: var(--bew-content-1);
|
||||
--line-light: var(--bew-fill-2);
|
||||
--line_regular: var(--bew-fill-3);
|
||||
--line_bold: var(--bew-fill-4);
|
||||
--text4: var(--bew-text-4);
|
||||
--text_link: var(--bew-theme-color);
|
||||
--text_notice: var(--Ye6);
|
||||
--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_bg_thick: var(--bew-content-solid-1);
|
||||
--graph_weak: var(--Ga3);
|
||||
--graph_medium: var(--Ga5);
|
||||
--graph_icon: var(--Ga7);
|
||||
--shadow: var(--Ba0);
|
||||
|
||||
--bpx-primary-color: var(--bew-theme-color);
|
||||
--bpx-fn-color: var(--bew-theme-color);
|
||||
--bpx-fn-hover-color: var(--bew-theme-color);
|
||||
|
||||
--v_brand_blue: var(--brand_blue);
|
||||
--v_brand_blue_thin: var(--brand_blue_thin);
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
--Ga0: #0d0d0e;
|
||||
--Ga0_s: #1e2022;
|
||||
--Ga0_t: #1e2022;
|
||||
--Ga1: #000000;
|
||||
--Ga1_s: #232527;
|
||||
--Ga1_t: #232527;
|
||||
--Ga1_e: #232527;
|
||||
--Ga2: #2f3134;
|
||||
--Ga2_t: #2f3134;
|
||||
--Ga3: #46494d;
|
||||
--Ga3_t: #46494d;
|
||||
--Ga4: #5e6267;
|
||||
--Ga4_t: #5e6267;
|
||||
--Ga5: #757a81;
|
||||
--Ga5_t: #757a81;
|
||||
--Ga6: #8b9097;
|
||||
--Ga6_t: #8b9097;
|
||||
--Ga7: #a2a7ae;
|
||||
--Ga7_t: #a2a7ae;
|
||||
--Ga8: #b9bdc2;
|
||||
--Ga8_t: #b9bdc2;
|
||||
--Ga9: #d0d3d7;
|
||||
--Ga9_t: #d0d3d7;
|
||||
--Ga10: #e7e9eb;
|
||||
--Ga10_t: #e7e9eb;
|
||||
--Ga11: #242628;
|
||||
--Ga12: #1f2022;
|
||||
--Wh0: #17181a;
|
||||
--Wh0_t: #17181a;
|
||||
--Ba0: #000000;
|
||||
--Ba0_s: #ffffff;
|
||||
--Ba0_t: #000000;
|
||||
--Pi0: #26161c;
|
||||
--Pi1: #2f1a22;
|
||||
--Pi2: #472030;
|
||||
--Pi3: #76304b;
|
||||
--Pi4: #a73e65;
|
||||
--Pi5: #d44e7d;
|
||||
--Pi5_t: #d44e7d;
|
||||
--Pi6: #dc6d94;
|
||||
--Pi7: #e38caa;
|
||||
--Pi8: #ebabc1;
|
||||
--Pi9: #f2cad8;
|
||||
--Pi10: #fae9ef;
|
||||
--Ma0: #261525;
|
||||
--Ma1: #2e182d;
|
||||
--Ma2: #461c43;
|
||||
--Ma3: #72296c;
|
||||
--Ma4: #a13396;
|
||||
--Ma5: #cb41bb;
|
||||
--Ma6: #d462c7;
|
||||
--Ma7: #dd83d3;
|
||||
--Ma8: #e6a4de;
|
||||
--Ma9: #efc5ea;
|
||||
--Ma10: #f8e6f6;
|
||||
--Re0: #261314;
|
||||
--Re1: #2e1617;
|
||||
--Re2: #471a1c;
|
||||
--Re3: #742728;
|
||||
--Re4: #a63131;
|
||||
--Re5: #d1403e;
|
||||
--Re6: #d9615f;
|
||||
--Re7: #e18281;
|
||||
--Re8: #e9a3a2;
|
||||
--Re9: #f1c5c4;
|
||||
--Re10: #f9e5e5;
|
||||
--Or0: #28180f;
|
||||
--Or1: #301b10;
|
||||
--Or2: #4a230e;
|
||||
--Or3: #783610;
|
||||
--Or4: #a9490d;
|
||||
--Or5: #d66011;
|
||||
--Or6: #dd7c3a;
|
||||
--Or7: #e49764;
|
||||
--Or8: #ebb38d;
|
||||
--Or9: #f2ceb6;
|
||||
--Or10: #faeadf;
|
||||
--Ye0: #2a1e0f;
|
||||
--Ye1: #342410;
|
||||
--Ye2: #4d300b;
|
||||
--Ye3: #7c4c08;
|
||||
--Ye4: #ad6800;
|
||||
--Ye5: #db8700;
|
||||
--Ye6: #e19c2c;
|
||||
--Ye7: #e7b158;
|
||||
--Ye8: #eec584;
|
||||
--Ye9: #f4dab1;
|
||||
--Ye10: #faefdd;
|
||||
--Ly0: #2a2310;
|
||||
--Ly1: #332a11;
|
||||
--Ly2: #49390c;
|
||||
--Ly3: #745909;
|
||||
--Ly4: #a27c00;
|
||||
--Ly5: #cca000;
|
||||
--Ly6: #d5b02c;
|
||||
--Ly7: #dec158;
|
||||
--Ly8: #e7d184;
|
||||
--Ly9: #efe2b1;
|
||||
--Ly10: #f8f2dd;
|
||||
--Lg0: #19220f;
|
||||
--Lg1: #1e2911;
|
||||
--Lg2: #273c0e;
|
||||
--Lg3: #3c600f;
|
||||
--Lg4: #50840b;
|
||||
--Lg5: #67a70e;
|
||||
--Lg6: #81b638;
|
||||
--Lg7: #9cc562;
|
||||
--Lg8: #b6d58b;
|
||||
--Lg9: #d0e4b5;
|
||||
--Lg10: #ebf3df;
|
||||
--Gr0: #102017;
|
||||
--Gr1: #11271b;
|
||||
--Gr2: #123923;
|
||||
--Gr3: #175c34;
|
||||
--Gr4: #198042;
|
||||
--Gr5: #1fa251;
|
||||
--Gr6: #46b26f;
|
||||
--Gr7: #6dc28d;
|
||||
--Gr8: #93d2ab;
|
||||
--Gr9: #bae2c9;
|
||||
--Gr10: #e1f3e8;
|
||||
--Cy0: #0c1f20;
|
||||
--Cy1: #0d2627;
|
||||
--Cy2: #093739;
|
||||
--Cy3: #085b5c;
|
||||
--Cy4: #028080;
|
||||
--Cy5: #03a29f;
|
||||
--Cy6: #2fb2b0;
|
||||
--Cy7: #5ac2c0;
|
||||
--Cy8: #86d2d1;
|
||||
--Cy9: #b2e2e1;
|
||||
--Cy10: #ddf3f3;
|
||||
--Lb0: #0a1b23;
|
||||
--Lb1: #0b202a;
|
||||
--Lb2: #082d40;
|
||||
--Lb3: #064a69;
|
||||
--Lb4: #006996;
|
||||
--Lb5: #0087bd;
|
||||
--Lb6: #2c9cc8;
|
||||
--Lb7: #58b1d4;
|
||||
--Lb8: #84c5df;
|
||||
--Lb9: #b1dbeb;
|
||||
--Lb10: #ddeff6;
|
||||
--Bl0: #151826;
|
||||
--Bl1: #181c2f;
|
||||
--Bl2: #1f2748;
|
||||
--Bl3: #2e3c76;
|
||||
--Bl4: #3b53a8;
|
||||
--Bl5: #4b6bd4;
|
||||
--Bl6: #6a85db;
|
||||
--Bl7: #899ee3;
|
||||
--Bl8: #a9b8ea;
|
||||
--Bl9: #c8d2f2;
|
||||
--Bl10: #e7ebf9;
|
||||
--Pu0: #1d1628;
|
||||
--Pu1: #221a31;
|
||||
--Pu2: #31214c;
|
||||
--Pu3: #4e317d;
|
||||
--Pu4: #6d3fb1;
|
||||
--Pu5: #8c50e0;
|
||||
--Pu6: #a06ee5;
|
||||
--Pu7: #b48deb;
|
||||
--Pu8: #c8abf0;
|
||||
--Pu9: #dbc9f5;
|
||||
--Pu10: #f0e8fb;
|
||||
--Br0: #211d1b;
|
||||
--Br1: #282320;
|
||||
--Br2: #382f2a;
|
||||
--Br3: #59483f;
|
||||
--Br4: #7a6154;
|
||||
--Br5: #9a7c6a;
|
||||
--Br6: #ac9384;
|
||||
--Br7: #bda99e;
|
||||
--Br8: #cebfb7;
|
||||
--Br9: #e0d7d1;
|
||||
--Br10: #f2eeeb;
|
||||
--Si0: #212325;
|
||||
--Si1: #27292c;
|
||||
--Si2: #36393f;
|
||||
--Si3: #535962;
|
||||
--Si4: #6f7987;
|
||||
--Si5: #8c99aa;
|
||||
--Si6: #a0abb9;
|
||||
--Si7: #b4bcc7;
|
||||
--Si8: #c8ced6;
|
||||
--Si9: #dce0e5;
|
||||
--Si10: #f0f2f4;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/// <reference types="vitest" />
|
||||
|
||||
import { dirname, relative } from 'path'
|
||||
import { dirname, relative } from 'node:path'
|
||||
import type { UserConfig } from 'vite'
|
||||
import { defineConfig } from 'vite'
|
||||
import Vue from '@vitejs/plugin-vue'
|
||||
|
||||
Reference in New Issue
Block a user