GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-05-10 17:42:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化多个组件的样式和结构，简化了主题切换器、快捷栏、用户通知和用户个人资料的布局，提升了用户体验。同时，移除了不必要的样式，确保组件在不同主题下的显示效果一致。

Browse Source
This commit is contained in:
jxxghp
2025-04-18 16:58:37 +08:00
parent 06f4898ce8
commit 229264f2d0
6 changed files with 154 additions and 487 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/@core/components/ThemeSwitcher.vue
View File

@@ -195,36 +195,31 @@ onMounted(() => {
<VIcon :icon="getThemeIcon" />
</IconBtn>
</template>
<VList class="theme-switcher-list pt-0 overflow-hidden">
<VCardItem class="theme-switcher-header">
<VCardTitle class="font-weight-medium text-primary">主题选择</VCardTitle>
<VList class="pt-0">
<VCardItem class="py-3">
<VCardTitle>主题选择</VCardTitle>
</VCardItem>
<div class="theme-switcher-options px-2">
<VDivider class="mb-2" />
<div class="px-2">
<VListItem
v-for="theme in props.themes"
:key="theme.name"
@click="changeTheme(theme.name)"
class="theme-option"
:class="{ 'theme-option-active': currentThemeName === theme.name }"
:active="currentThemeName === theme.name"
class="mb-1"
>
<template #prepend>
<div class="theme-icon-wrapper">
<VIcon :icon="theme.icon" />
</div>
<VIcon :icon="theme.icon" />
</template>
<VListItemTitle>{{ theme.title }}</VListItemTitle>
<template #append v-if="currentThemeName === theme.name">
<VIcon icon="mdi-check" color="primary" size="small" />
</template>
</VListItem>
<VDivider class="my-2" />
<VListItem @click="cssDialog = true" class="theme-option custom-theme-option">
<VListItem @click="cssDialog = true">
<template #prepend>
<div class="theme-icon-wrapper custom-theme-icon">
<VIcon icon="mdi-palette" />
</div>
<VIcon icon="mdi-palette" />
</template>
<VListItemTitle>自定义主题</VListItemTitle>
</VListItem>
@@ -242,12 +237,7 @@ onMounted(() => {
<VDialogCloseBtn @click="cssDialog = false" />
</VCardItem>
<VDivider />
<VAceEditor
v-model:value="customCSS"
lang="css"
:theme="editorTheme"
style="block-size: 100%; min-block-size: 30rem"
/>
<VAceEditor v-model:value="customCSS" lang="css" :theme="editorTheme" class="w-full min-h-[30rem]" />
<VDivider />
<VCardText class="text-center">
<VBtn @click="saveCustomCSS" class="w-1/2">
@@ -260,73 +250,3 @@ onMounted(() => {
</VCard>
</VDialog>
</template>
<style lang="scss">
.theme-switcher-header {
background: linear-gradient(to right, rgba(var(--v-theme-primary), 0.04), rgba(var(--v-theme-primary), 0.01));
border-block-end: 1px solid rgba(var(--v-theme-on-surface), 0.08);
padding-block: 12px;
padding-inline: 16px;
}
.theme-switcher-options {
overflow-y: hidden;
}
.theme-option {
border-radius: 8px;
margin-block: 4px;
margin-inline: 0;
transition: all 0.2s ease;
&:hover {
background-color: rgba(var(--v-theme-primary), 0.04);
transform: translateX(4px);
}
&.theme-option-active {
background-color: rgba(var(--v-theme-primary), 0.08);
}
}
.theme-icon-wrapper {
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: rgba(var(--v-theme-primary), 0.08);
block-size: 36px;
inline-size: 36px;
margin-inline-end: 12px;
transition: all 0.2s ease;
.v-icon {
color: rgba(var(--v-theme-primary), 0.9);
}
}
.custom-theme-icon {
background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.15), rgba(var(--v-theme-info), 0.15));
.v-icon {
color: rgba(var(--v-theme-primary), 0.9);
}
}
// Theme transition
.app-copy {
position: fixed !important;
z-index: -1 !important;
overflow: clip !important;
contain: size style !important;
pointer-events: none !important;
}
.app-transition {
--clip-size: 0;
--clip-pos: 0 0;
clip-path: circle(var(--clip-size) at var(--clip-pos));
transition: clip-path 0.35s ease-out;
}
</style>

4
src/layouts/components/Footer.vue
View File

@@ -61,7 +61,7 @@ const currentPath = computed(() => route.path)
:color="moreActiveState ? 'primary' : ''"
/>
<VMenu v-model="moreMenuDialog" close-on-content-click activator="parent" scrim>
<VList class="font-bold" lines="one">
<VList lines="one">
<VListSubheader class="bg-transparent"> 更多 </VListSubheader>
<VListItem
class="pe-20 ps-5"
@@ -73,7 +73,7 @@ const currentPath = computed(() => route.path)
:base-color="currentPath === menu.to ? 'primary' : undefined"
>
<VListItemTitle>
<span class="text-lg">{{ menu.title }}</span>
<span class="text-base">{{ menu.title }}</span>
</VListItemTitle>
</VListItem>
</VList>

292
src/layouts/components/ShortcutBar.vue
View File

@@ -45,6 +45,57 @@ const sendButtonDisabled = ref(false)
// 聊天容器
const chatContainer = ref<HTMLElement>()
// 定义捷径列表
const shortcuts = [
{
title: '识别',
subtitle: '名称识别测试',
icon: 'mdi-text-recognition',
dialog: 'nameTest',
dialogRef: nameTestDialog,
},
{
title: '规则',
subtitle: '规则测试',
icon: 'mdi-filter-cog',
dialog: 'ruleTest',
dialogRef: ruleTestDialog,
},
{
title: '日志',
subtitle: '实时日志',
icon: 'mdi-file-document',
dialog: 'logging',
dialogRef: loggingDialog,
},
{
title: '网络',
subtitle: '网速连通性测试',
icon: 'mdi-network',
dialog: 'netTest',
dialogRef: netTestDialog,
},
{
title: '系统',
subtitle: '健康检查',
icon: 'mdi-cog',
dialog: 'systemTest',
dialogRef: systemTestDialog,
},
{
title: '消息',
subtitle: '消息中心',
icon: 'mdi-message',
dialog: 'message',
dialogRef: messageDialog,
},
]
// 打开对话框
function openDialog(dialogRef) {
dialogRef.value = true
}
// 滚动到底部
function scrollMessageToEnd() {
nextTick(() => {
@@ -78,25 +129,9 @@ onMounted(() => {
scrollMessageToEnd()
const shortcut = getQueryValue('shortcut')
if (shortcut) {
switch (shortcut) {
case 'nameTest':
nameTestDialog.value = true
break
case 'netTest':
netTestDialog.value = true
break
case 'logging':
loggingDialog.value = true
break
case 'ruleTest':
ruleTestDialog.value = true
break
case 'systemTest':
systemTestDialog.value = true
break
case 'message':
messageDialog.value = true
break
const found = shortcuts.find(item => item.dialog === shortcut)
if (found) {
found.dialogRef.value = true
}
}
})
@@ -110,7 +145,6 @@ onMounted(() => {
max-height="560"
location="top end"
origin="top end"
transition="scale-transition"
close-on-content-click
close-on-back
scrim
@@ -122,81 +156,35 @@ onMounted(() => {
</IconBtn>
</template>
<!-- Menu Content -->
<VCard class="shortcut-menu-card">
<VCardItem class="shortcut-header border-b">
<VCardTitle class="font-weight-medium text-primary">捷径</VCardTitle>
<VCard class="overflow-hidden">
<VCardItem class="py-3">
<VCardTitle>捷径</VCardTitle>
<template #append>
<IconBtn @click="appsMenu = false" class="shortcut-close-btn">
<IconBtn @click="appsMenu = false">
<VIcon icon="mdi-close" />
</IconBtn>
</template>
</VCardItem>
<div class="ps ps--active-y shortcut-menu-container">
<div class="shortcut-grid">
<!-- 识别 -->
<div class="shortcut-item" @click="nameTestDialog = true">
<div class="shortcut-icon-wrapper">
<VIcon icon="mdi-text-recognition" size="24" />
</div>
<div class="shortcut-text">
<div class="shortcut-title">识别</div>
<div class="shortcut-subtitle">名称识别测试</div>
</div>
</div>
<!-- 规则 -->
<div class="shortcut-item" @click="ruleTestDialog = true">
<div class="shortcut-icon-wrapper">
<VIcon icon="mdi-filter-cog" size="24" />
</div>
<div class="shortcut-text">
<div class="shortcut-title">规则</div>
<div class="shortcut-subtitle">规则测试</div>
</div>
</div>
<!-- 日志 -->
<div class="shortcut-item" @click="loggingDialog = true">
<div class="shortcut-icon-wrapper">
<VIcon icon="mdi-file-document" size="24" />
</div>
<div class="shortcut-text">
<div class="shortcut-title">日志</div>
<div class="shortcut-subtitle">实时日志</div>
</div>
</div>
<!-- 网络 -->
<div class="shortcut-item" @click="netTestDialog = true">
<div class="shortcut-icon-wrapper">
<VIcon icon="mdi-network" size="24" />
</div>
<div class="shortcut-text">
<div class="shortcut-title">网络</div>
<div class="shortcut-subtitle">网速连通性测试</div>
</div>
</div>
<!-- 系统 -->
<div class="shortcut-item" @click="systemTestDialog = true">
<div class="shortcut-icon-wrapper">
<VIcon icon="mdi-cog" size="24" />
</div>
<div class="shortcut-text">
<div class="shortcut-title">系统</div>
<div class="shortcut-subtitle">健康检查</div>
</div>
</div>
<!-- 消息 -->
<div class="shortcut-item" @click="messageDialog = true">
<div class="shortcut-icon-wrapper">
<VIcon icon="mdi-message" size="24" />
</div>
<div class="shortcut-text">
<div class="shortcut-title">消息</div>
<div class="shortcut-subtitle">消息中心</div>
</div>
<VDivider />
<div class="pa-3">
<div class="grid grid-cols-2 gap-3">
<!-- 循环渲染快捷方式 -->
<div v-for="(item, index) in shortcuts" :key="index">
<VCard
flat
variant="outlined"
class="pa-4 d-flex align-center rounded-lg cursor-pointer transition-transform duration-300 hover:-translate-y-1"
hover
@click="openDialog(item.dialogRef)"
>
<VAvatar variant="tonal" size="48" class="me-4" rounded="lg">
<VIcon :icon="item.icon" size="24" />
</VAvatar>
<div>
<div class="text-body-1 text-high-emphasis font-weight-medium">{{ item.title }}</div>
<div class="text-caption text-medium-emphasis">{{ item.subtitle }}</div>
</div>
</VCard>
</div>
</div>
</div>
@@ -245,16 +233,14 @@ onMounted(() => {
<VCard>
<VDialogCloseBtn @click="loggingDialog = false" />
<VCardItem>
<VCardTitle class="inline-flex">
<VCardTitle class="d-inline-flex">
<VIcon icon="mdi-file-document" class="me-2" />
实时日志
<a class="mx-2 inline-flex items-center justify-center" :href="allLoggingUrl()" target="_blank">
<div
class="inline-flex cursor-pointer items-center rounded-full bg-gray-600 px-2 text-sm text-gray-200 ring-1 ring-gray-500 transition hover:bg-gray-700"
>
<VIcon icon="mdi-open-in-new" />
<span class="ms-1">在新窗口中打开</span>
</div>
<a class="mx-2 d-inline-flex align-center" :href="allLoggingUrl()" target="_blank">
<VChip color="grey-darken-1" size="small" class="ml-2">
<VIcon icon="mdi-open-in-new" size="small" start />
在新窗口中打开
</VChip>
</a>
</VCardTitle>
</VCardItem>
@@ -333,113 +319,3 @@ onMounted(() => {
</VCard>
</VDialog>
</template>
<style lang="scss" scoped>
.shortcut-menu-card {
overflow: hidden;
}
.shortcut-header {
background: linear-gradient(to right, rgba(var(--v-theme-primary), 0.04), rgba(var(--v-theme-primary), 0.01));
border-block-end: 1px solid rgba(var(--v-theme-on-surface), 0.08);
padding-block: 12px;
padding-inline: 16px;
}
.shortcut-close-btn {
transition: transform 0.3s ease;
&:hover {
transform: rotate(90deg);
}
}
.shortcut-menu-container {
padding: 16px;
}
.shortcut-grid {
display: grid;
gap: 16px;
grid-template-columns: repeat(2, 1fr);
}
.shortcut-icon-wrapper {
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background-color: rgba(var(--v-theme-primary), 0.08);
block-size: 48px;
inline-size: 48px;
margin-inline-end: 16px;
transition: all 0.3s ease;
.v-icon {
color: rgba(var(--v-theme-primary), 1);
transition: transform 0.3s ease;
}
}
.shortcut-item {
position: relative;
z-index: 1;
display: flex;
overflow: hidden;
align-items: center;
padding: 16px;
border: 1px solid rgba(var(--v-theme-on-surface), 0.05);
border-radius: 12px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
&::before {
position: absolute;
z-index: -1;
background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.08) 0%, rgba(var(--v-theme-primary), 0) 60%);
content: '';
inset: 0;
opacity: 0;
transition: opacity 0.3s ease;
}
&:hover {
border-color: rgba(var(--v-theme-primary), 0.15);
transform: translateY(-4px);
&::before {
opacity: 1;
}
.shortcut-icon-wrapper {
background-color: rgba(var(--v-theme-primary), 0.12);
transform: scale(1.1);
.v-icon {
transform: scale(1.2);
}
}
}
&:active {
box-shadow: 0 3px 10px rgba(var(--v-theme-on-surface), 0.08);
transform: translateY(0);
}
}
.shortcut-text {
flex: 1;
}
.shortcut-title {
color: rgba(var(--v-theme-on-surface), 0.95);
font-size: 1rem;
font-weight: 600;
margin-block-end: 4px;
}
.shortcut-subtitle {
color: rgba(var(--v-theme-on-surface), 0.7);
font-size: 0.8rem;
}
</style>

100
src/layouts/components/UserNotification.vue
View File

@@ -41,7 +41,14 @@ onBeforeUnmount(() => {
</script>
<template>
<VMenu v-model="appsMenu" width="400" transition="scale-transition" close-on-content-click class="notification-menu" scrim>
<VMenu
v-model="appsMenu"
width="400"
transition="scale-transition"
close-on-content-click
class="notification-menu"
scrim
>
<!-- Menu Activator -->
<template #activator="{ props }">
<VBadge v-if="hasNewMessage" dot color="error" :offset-x="5" :offset-y="5" v-bind="props">
@@ -55,13 +62,12 @@ onBeforeUnmount(() => {
</template>
<!-- Menu Content -->
<VCard>
<VCardItem class="notification-header">
<VCardTitle class="font-weight-medium text-primary">通知中心</VCardTitle>
<VCardItem class="py-3">
<VCardTitle>通知中心</VCardTitle>
<template #append>
<VTooltip text="设为已读">
<template #activator="{ props }">
<IconBtn
class="mark-read-btn"
v-bind="props"
@click="
() => {
@@ -76,89 +82,33 @@ onBeforeUnmount(() => {
</VTooltip>
</template>
</VCardItem>
<div v-if="notificationList.length > 0" class="notification-list">
<VListItem v-for="(item, i) in notificationList" :key="i" lines="two" class="notification-item">
<VDivider />
<div v-if="notificationList.length > 0">
<VListItem v-for="(item, i) in notificationList" :key="i" lines="two" class="mb-1">
<template #prepend>
<VAvatar rounded class="notification-avatar">
<VAvatar rounded>
<VIcon v-if="item.type === 'user'" icon="mdi-account-alert" size="large"></VIcon>
<VIcon v-else-if="item.type === 'plugin'" icon="mdi-robot" size="large"></VIcon>
<VIcon v-else icon="mdi-laptop" size="large"></VIcon>
</VAvatar>
</template>
<div class="notification-content">
<div class="notification-title overflow-visiable break-words whitespace-break-spaces">
<div>
<div class="text-body-1 text-high-emphasis break-words whitespace-break-spaces">
{{ item.title }}
</div>
<div class="notification-text">{{ item.text }}</div>
<div class="notification-time">{{ formatDateDifference(item.date) }}</div>
<div class="text-caption mt-1.5">
{{ item.text }}
</div>
<div class="text-sm text-primary mt-1.5">
{{ formatDateDifference(item.date) }}
</div>
</div>
</VListItem>
</div>
<div v-else class="no-notification">
<div class="text-center">
<VIcon icon="mdi-bell-sleep-outline" size="40" class="mb-3 text-primary" />
<div>暂无通知</div>
</div>
<div v-else class="py-8 text-center">
<VIcon icon="mdi-bell-sleep-outline" size="40" class="mb-3" />
<div>暂无通知</div>
</div>
</VCard>
</VMenu>
</template>
<style lang="scss" scoped>
.notification-header {
background: linear-gradient(to right, rgba(var(--v-theme-primary), 0.04), rgba(var(--v-theme-primary), 0.01));
border-block-end: 1px solid rgba(var(--v-theme-on-surface), 0.08);
padding-block: 12px;
padding-inline: 16px;
}
.notification-list {
padding: 8px;
max-block-size: 500px;
overflow-y: auto;
}
.notification-item {
.notification-avatar {
background-color: rgba(var(--v-theme-primary), 0.1);
}
.notification-title {
font-size: 0.95rem;
font-weight: 600;
}
.notification-text {
color: rgba(var(--v-theme-on-surface), 0.75);
font-size: 0.85rem;
margin-block-start: 6px;
}
.notification-time {
color: rgba(var(--v-theme-primary), 0.8);
font-size: 0.8rem;
margin-block-start: 6px;
}
}
.no-notification {
color: rgba(var(--v-theme-on-surface), 0.6);
font-size: 0.95rem;
padding-block: 30px;
padding-inline: 0;
}
.mark-read-btn {
border-radius: 8px;
transition: all 0.2s ease;
&:hover {
background-color: rgba(var(--v-theme-primary), 0.1);
transform: scale(1.05);
}
}
.notification-menu .v-overlay__content {
overflow: hidden;
}
</style>

142
src/layouts/components/UserProfile.vue
View File

@@ -86,59 +86,52 @@ const userLevel = computed(() => userStore.level)
<VImg :src="avatar" />
<VMenu activator="parent" width="230" location="bottom end" offset="14px" class="user-menu" scrim>
<VList class="overflow-hidden pt-0">
<VList class="pt-0">
<!-- 👉 User Avatar & Name -->
<div class="user-profile-header px-2 py-4 mb-2">
<div class="d-flex align-center">
<VAvatar size="60" class="user-avatar" color="primary" rounded="sm">
<VListItem class="py-4" bg-color="primary" bg-opacity="0.05">
<template #prepend>
<VAvatar size="60" color="primary" rounded="sm" class="border-2 border-opacity-10">
<VImg :src="avatar" />
</VAvatar>
<div class="ms-4">
<div class="user-role">
{{ superUser ? '管理员' : '普通用户' }}
</div>
<div class="user-name">
{{ userName }}
</div>
</div>
</template>
<div>
<span class="text-primary text-sm font-medium d-block">
{{ superUser ? '管理员' : '普通用户' }}
</span>
<span class="text-high-emphasis text-lg font-weight-bold">
{{ userName }}
</span>
</div>
</div>
</VListItem>
<VDivider class="mb-2" />
<div class="px-2">
<!-- 👉 Profile -->
<VListItem link @click="router.push('/profile')" class="user-menu-item mb-1">
<VListItem link @click="router.push('/profile')" class="mb-1 rounded-lg" hover>
<template #prepend>
<div class="user-menu-icon">
<VIcon icon="mdi-account-outline" />
</div>
<VIcon icon="mdi-account-outline" />
</template>
<VListItemTitle>个人信息</VListItemTitle>
</VListItem>
<VListItem link @click="router.push('/apps')" class="user-menu-item mb-1">
<VListItem link @click="router.push('/apps')" class="mb-1 rounded-lg" hover>
<template #prepend>
<div class="user-menu-icon">
<VIcon icon="mdi-view-grid-outline" />
</div>
<VIcon icon="mdi-view-grid-outline" />
</template>
<VListItemTitle>功能视图</VListItemTitle>
</VListItem>
<!-- 👉 Site Auth -->
<VListItem v-if="userLevel < 2 && superUser" link @click="showSiteAuthDialog" class="user-menu-item mb-1">
<VListItem v-if="userLevel < 2 && superUser" link @click="showSiteAuthDialog" class="mb-1 rounded-lg" hover>
<template #prepend>
<div class="user-menu-icon">
<VIcon icon="mdi-lock-check-outline" />
</div>
<VIcon icon="mdi-lock-check-outline" />
</template>
<VListItemTitle>用户认证</VListItemTitle>
</VListItem>
<!-- 👉 FAQ -->
<VListItem href="https://wiki.movie-pilot.org" target="_blank" class="user-menu-item mb-1">
<VListItem href="https://wiki.movie-pilot.org" target="_blank" class="mb-1 rounded-lg" hover>
<template #prepend>
<div class="user-menu-icon">
<VIcon icon="mdi-help-circle-outline" />
</div>
<VIcon icon="mdi-help-circle-outline" />
</template>
<VListItemTitle>帮助文档</VListItemTitle>
</VListItem>
@@ -147,19 +140,19 @@ const userLevel = computed(() => userStore.level)
<VDivider v-if="superUser" class="my-3" />
<!-- 👉 restart -->
<VListItem v-if="superUser" @click="showRestartDialog" class="user-menu-item mb-1">
<VListItem v-if="superUser" @click="showRestartDialog" class="mb-1 rounded-lg" hover>
<template #prepend>
<div class="user-menu-icon restart-icon">
<VIcon icon="mdi-restart" />
</div>
<VIcon icon="mdi-restart" />
</template>
<VListItemTitle>重启</VListItemTitle>
</VListItem>
</div>
<!-- 👉 Logout -->
<div class="px-2 mt-3 mb-2">
<VBtn color="error" block class="logout-btn" @click="logout">
<template #prepend> <VIcon icon="mdi-logout" /> </template>
<VBtn color="error" block class="py-3 rounded-lg" elevation="2" @click="logout">
<template #prepend>
<VIcon icon="mdi-logout" />
</template>
退出登录
</VBtn>
</div>
@@ -175,94 +168,21 @@ const userLevel = computed(() => userStore.level)
<VDialog v-if="restartDialog" v-model="restartDialog" max-width="25rem">
<VCard>
<VCardItem>
<div class="flex items-center justify-center mt-3">
<div class="d-flex align-center justify-center mt-3">
<VAvatar color="warning" variant="text" size="x-large">
<VIcon size="x-large" icon="mdi-alert" />
</VAvatar>
<div class="ms-3">
<p class="font-bold text-xl text-high-emphasis">确认重启系统吗？</p>
<p class="font-weight-bold text-xl text-high-emphasis">确认重启系统吗？</p>
<p>重启后，您将被注销并需要重新登录。</p>
</div>
</div>
</VCardItem>
<VCardActions class="mx-auto">
<VBtn variant="elevated" color="error" @click="restart" prepend-icon="mdi-restart" class="px-5"> 确定 </VBtn>
<VBtn variant="tonal" color="secondary" class="px-5" @click="restartDialog = false">取消</VBtn>
<VBtn variant="elevated" color="error" @click="restart" prepend-icon="mdi-restart" class="px-5"> 确定 </VBtn>
</VCardActions>
<VDialogCloseBtn @click="restartDialog = false" />
</VCard>
</VDialog>
</template>
<style lang="scss" scoped>
.user-profile-header {
background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.05), rgba(var(--v-theme-primary), 0.02));
}
.user-role {
color: rgba(var(--v-theme-primary), 0.9);
font-size: 0.875rem;
font-weight: 500;
margin-block-end: 4px;
}
.user-name {
color: rgba(var(--v-theme-on-surface), 0.9);
font-size: 1.125rem;
font-weight: 600;
}
.user-avatar {
border: 2px solid rgba(var(--v-theme-on-surface), 0.1);
box-shadow: 0 4px 12px rgba(var(--v-theme-primary), 0.2);
}
.user-menu-item {
border-radius: 8px;
margin-block: 4px;
margin-inline: 0;
transition: all 0.2s ease;
&:hover {
background-color: rgba(var(--v-theme-primary), 0.06);
transform: translateX(4px);
}
}
.user-menu-icon {
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: rgba(var(--v-theme-primary), 0.08);
block-size: 36px;
inline-size: 36px;
margin-inline-end: 12px;
transition: all 0.2s ease;
.v-icon {
color: rgba(var(--v-theme-primary), 0.9);
}
}
.restart-icon {
background-color: rgba(var(--v-theme-error), 0.1);
.v-icon {
color: rgba(var(--v-theme-error), 0.9);
}
}
.logout-btn {
padding: 12px;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(var(--v-theme-error), 0.2);
font-weight: 500;
letter-spacing: 0.5px;
}
.user-menu .v-overlay__content {
border-radius: 8px !important;
box-shadow: 0 4px 12px rgba(var(--v-theme-on-surface), 0.08) !important;
}
</style>

1
src/plugins/vuetify/defaults.ts
View File

@@ -26,6 +26,7 @@ export default {
VBtn: {
// set v-btn default color to primary
color: 'primary',
elevation: 0,
},
VCard: {
elevation: 0,