mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-09-07 00:36:41 +08:00
优化卡片样式,移除多余的圆角设置,提升组件一致性
This commit is contained in:
@@ -530,7 +530,7 @@ function onRemoveSubscribe() {
|
|||||||
v-bind="hover.props"
|
v-bind="hover.props"
|
||||||
:height="props.height"
|
:height="props.height"
|
||||||
:width="props.width"
|
:width="props.width"
|
||||||
class="outline-none shadow ring-gray-500 rounded-lg"
|
class="outline-none shadow ring-gray-500"
|
||||||
:class="{
|
:class="{
|
||||||
'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
|
'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
|
||||||
'ring-1': isImageLoaded,
|
'ring-1': isImageLoaded,
|
||||||
|
|||||||
@@ -77,7 +77,6 @@ function goPersonDetail() {
|
|||||||
v-bind="hover.props"
|
v-bind="hover.props"
|
||||||
:height="personProps.height"
|
:height="personProps.height"
|
||||||
:width="personProps.width"
|
:width="personProps.width"
|
||||||
class="rounded-lg"
|
|
||||||
:class="{
|
:class="{
|
||||||
'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
|
'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
|
||||||
}"
|
}"
|
||||||
|
|||||||
@@ -43,7 +43,7 @@ function goPlay(isHovering: boolean | null = false) {
|
|||||||
v-bind="hover.props"
|
v-bind="hover.props"
|
||||||
:height="props.height"
|
:height="props.height"
|
||||||
:width="props.width"
|
:width="props.width"
|
||||||
class="outline-none shadow ring-gray-500 rounded-lg"
|
class="outline-none shadow ring-gray-500"
|
||||||
:class="{
|
:class="{
|
||||||
'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
|
'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
|
||||||
'ring-1': isImageLoaded,
|
'ring-1': isImageLoaded,
|
||||||
|
|||||||
@@ -295,7 +295,7 @@ function onSubscribeEditRemove() {
|
|||||||
<VCard
|
<VCard
|
||||||
v-bind="hover.props"
|
v-bind="hover.props"
|
||||||
:key="props.media?.id"
|
:key="props.media?.id"
|
||||||
class="flex flex-col rounded-lg h-full"
|
class="flex flex-col h-full"
|
||||||
:class="{
|
:class="{
|
||||||
'outline-dashed outline-1': props.media?.best_version && imageLoaded,
|
'outline-dashed outline-1': props.media?.best_version && imageLoaded,
|
||||||
'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
|
'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
|
||||||
|
|||||||
@@ -100,7 +100,7 @@ function doDelete() {
|
|||||||
<VCard
|
<VCard
|
||||||
v-bind="hover.props"
|
v-bind="hover.props"
|
||||||
:key="props.media?.id"
|
:key="props.media?.id"
|
||||||
class="flex flex-col rounded-lg h-full"
|
class="flex flex-col h-full"
|
||||||
:class="{
|
:class="{
|
||||||
'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
|
'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
|
||||||
}"
|
}"
|
||||||
|
|||||||
@@ -61,7 +61,7 @@ const currentPath = computed(() => route.path)
|
|||||||
:color="moreActiveState ? 'primary' : ''"
|
:color="moreActiveState ? 'primary' : ''"
|
||||||
/>
|
/>
|
||||||
<VMenu v-model="moreMenuDialog" close-on-content-click activator="parent">
|
<VMenu v-model="moreMenuDialog" close-on-content-click activator="parent">
|
||||||
<VList class="font-bold" lines="one">
|
<VList class="font-bold" lines="one" elevation="1">
|
||||||
<VListSubheader class="bg-transparent"> 更多 </VListSubheader>
|
<VListSubheader class="bg-transparent"> 更多 </VListSubheader>
|
||||||
<VListItem
|
<VListItem
|
||||||
class="pe-20"
|
class="pe-20"
|
||||||
|
|||||||
@@ -38,26 +38,24 @@ function logout() {
|
|||||||
|
|
||||||
// 执行重启操作
|
// 执行重启操作
|
||||||
async function restart() {
|
async function restart() {
|
||||||
{
|
restartDialog.value = false
|
||||||
restartDialog.value = false
|
// 调用API重启
|
||||||
// 调用API重启
|
try {
|
||||||
try {
|
// 显示等待框
|
||||||
// 显示等待框
|
progressDialog.value = true
|
||||||
progressDialog.value = true
|
const result: { [key: string]: any } = await api.get('system/restart')
|
||||||
const result: { [key: string]: any } = await api.get('system/restart')
|
if (!result?.success) {
|
||||||
if (!result?.success) {
|
// 隐藏等待框
|
||||||
// 隐藏等待框
|
progressDialog.value = false
|
||||||
progressDialog.value = false
|
// 重启不成功
|
||||||
// 重启不成功
|
$toast.error(result.message)
|
||||||
$toast.error(result.message)
|
return
|
||||||
return
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error)
|
|
||||||
}
|
}
|
||||||
// 注销
|
} catch (error) {
|
||||||
logout()
|
console.error(error)
|
||||||
}
|
}
|
||||||
|
// 注销
|
||||||
|
logout()
|
||||||
}
|
}
|
||||||
|
|
||||||
// 显示重启确认对话框
|
// 显示重启确认对话框
|
||||||
@@ -88,7 +86,7 @@ const userLevel = computed(() => userStore.level)
|
|||||||
<VImg :src="avatar" />
|
<VImg :src="avatar" />
|
||||||
|
|
||||||
<VMenu activator="parent" width="230" location="bottom end" offset="14px">
|
<VMenu activator="parent" width="230" location="bottom end" offset="14px">
|
||||||
<VList>
|
<VList elevation="1">
|
||||||
<!-- 👉 User Avatar & Name -->
|
<!-- 👉 User Avatar & Name -->
|
||||||
<VListItem>
|
<VListItem>
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
|
|||||||
+2
-2
@@ -228,7 +228,7 @@ onUnmounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
<!-- 登录表单 -->
|
<!-- 登录表单 -->
|
||||||
<div class="auth-wrapper d-flex align-center justify-center">
|
<div class="auth-wrapper d-flex align-center justify-center">
|
||||||
<VCard class="auth-card px-7 py-3 w-full h-full rounded-lg opacity-85" max-width="24rem">
|
<VCard class="auth-card px-7 py-3 w-full h-full opacity-85" max-width="24rem">
|
||||||
<VCardItem class="justify-center">
|
<VCardItem class="justify-center">
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
<div class="d-flex pe-0">
|
<div class="d-flex pe-0">
|
||||||
@@ -289,7 +289,7 @@ onUnmounted(() => {
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@use '@core/scss/pages/page-auth.scss';
|
@use '@core/scss/pages/page-auth';
|
||||||
|
|
||||||
.v-card-item__prepend {
|
.v-card-item__prepend {
|
||||||
padding-inline-end: 0 !important;
|
padding-inline-end: 0 !important;
|
||||||
|
|||||||
@@ -1,5 +1,3 @@
|
|||||||
import { VCard } from 'vuetify/lib/components/index.mjs'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
IconBtn: {
|
IconBtn: {
|
||||||
icon: true,
|
icon: true,
|
||||||
@@ -31,6 +29,7 @@ export default {
|
|||||||
},
|
},
|
||||||
VCard: {
|
VCard: {
|
||||||
elevation: 0,
|
elevation: 0,
|
||||||
|
rounded: 'lg',
|
||||||
},
|
},
|
||||||
VMenu: {
|
VMenu: {
|
||||||
elevation: 0,
|
elevation: 0,
|
||||||
@@ -41,9 +40,12 @@ export default {
|
|||||||
VBottomSheet: {
|
VBottomSheet: {
|
||||||
elevation: 0,
|
elevation: 0,
|
||||||
},
|
},
|
||||||
|
VExpansionPanels: {
|
||||||
|
elevation: 0,
|
||||||
|
},
|
||||||
VList: {
|
VList: {
|
||||||
color: 'primary',
|
color: 'primary',
|
||||||
elevation: 1,
|
elevation: 0,
|
||||||
},
|
},
|
||||||
VPagination: {
|
VPagination: {
|
||||||
activeColor: 'primary',
|
activeColor: 'primary',
|
||||||
|
|||||||
@@ -507,7 +507,7 @@ function loadMore({ done }: { done: any }) {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 移动端头部和筛选区域 -->
|
<!-- 移动端头部和筛选区域 -->
|
||||||
<VCard class="d-block d-sm-none search-header-mobile rounded-lg">
|
<VCard class="d-block d-sm-none search-header-mobile">
|
||||||
<!-- 移动端头部 -->
|
<!-- 移动端头部 -->
|
||||||
<div class="view-header">
|
<div class="view-header">
|
||||||
<div class="d-flex align-center flex-wrap pa-2">
|
<div class="d-flex align-center flex-wrap pa-2">
|
||||||
@@ -623,32 +623,32 @@ function loadMore({ done }: { done: any }) {
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.search-header {
|
.search-header {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
background-color: rgba(var(--v-theme-background), 0.95);
|
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
|
background-color: rgba(var(--v-theme-background), 0.95);
|
||||||
|
inset-block-start: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.view-header {
|
.view-header {
|
||||||
background-color: rgb(var(--v-theme-surface));
|
|
||||||
border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
|
||||||
|
background-color: rgb(var(--v-theme-surface));
|
||||||
}
|
}
|
||||||
|
|
||||||
.sort-container {
|
.sort-container {
|
||||||
border-right: 1px solid rgba(var(--v-theme-on-surface), 0.12);
|
border-inline-end: 1px solid rgba(var(--v-theme-on-surface), 0.12);
|
||||||
padding-right: 12px;
|
padding-inline-end: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-bar {
|
.filter-bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 8px;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-btn {
|
.filter-btn {
|
||||||
min-width: 0;
|
min-inline-size: 0;
|
||||||
transition: transform 0.2s;
|
transition: transform 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -658,21 +658,20 @@ function loadMore({ done }: { done: any }) {
|
|||||||
|
|
||||||
.sort-select {
|
.sort-select {
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
min-width: 120px;
|
|
||||||
max-width: 160px;
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
max-inline-size: 160px;
|
||||||
|
min-inline-size: 120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sort-select :deep(.v-field__input) {
|
.sort-select :deep(.v-field__input) {
|
||||||
padding-top: 5px;
|
min-block-size: 36px;
|
||||||
padding-bottom: 5px;
|
padding-block: 5px;
|
||||||
min-height: 36px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.selected-filters {
|
.selected-filters {
|
||||||
background-color: rgba(var(--v-theme-surface-variant), 0.08);
|
|
||||||
border-radius: 0 0 12px 12px;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
border-radius: 0 0 12px 12px;
|
||||||
|
background-color: rgba(var(--v-theme-surface-variant), 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-menu-content {
|
.filter-menu-content {
|
||||||
@@ -685,24 +684,24 @@ function loadMore({ done }: { done: any }) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.filter-chip {
|
.filter-chip {
|
||||||
|
border: 1px solid rgba(var(--v-theme-primary), 0.2);
|
||||||
margin: 4px;
|
margin: 4px;
|
||||||
transition: all 0.2s ease;
|
|
||||||
background-color: rgba(var(--v-theme-primary), 0.1) !important;
|
background-color: rgba(var(--v-theme-primary), 0.1) !important;
|
||||||
color: rgba(var(--v-theme-on-surface), 0.9) !important;
|
color: rgba(var(--v-theme-on-surface), 0.9) !important;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
border: 1px solid rgba(var(--v-theme-primary), 0.2);
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-chip:hover {
|
.filter-chip:hover {
|
||||||
transform: translateY(-2px);
|
|
||||||
background-color: rgba(var(--v-theme-primary), 0.15) !important;
|
background-color: rgba(var(--v-theme-primary), 0.15) !important;
|
||||||
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-chip.v-chip--selected {
|
.filter-chip.v-chip--selected {
|
||||||
background-color: rgba(var(--v-theme-primary), 0.85) !important;
|
background-color: rgba(var(--v-theme-primary), 0.85) !important;
|
||||||
|
box-shadow: 0 2px 4px rgba(var(--v-theme-primary), 0.3);
|
||||||
color: rgb(var(--v-theme-on-primary)) !important;
|
color: rgb(var(--v-theme-on-primary)) !important;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
box-shadow: 0 2px 4px rgba(var(--v-theme-primary), 0.3);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-tag {
|
.filter-tag {
|
||||||
@@ -722,10 +721,10 @@ function loadMore({ done }: { done: any }) {
|
|||||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
@media (width <= 600px) {
|
||||||
.sort-select {
|
.sort-select {
|
||||||
min-width: 100px;
|
max-inline-size: 120px;
|
||||||
max-width: 120px;
|
min-inline-size: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-btn {
|
.filter-btn {
|
||||||
@@ -733,49 +732,50 @@ function loadMore({ done }: { done: any }) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sort-container {
|
.sort-container {
|
||||||
border-right: none;
|
border-inline-end: none;
|
||||||
padding-right: 0;
|
inline-size: 100%;
|
||||||
margin-bottom: 8px;
|
margin-block-end: 8px;
|
||||||
width: 100%;
|
padding-inline-end: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sort-select {
|
.sort-select {
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-bar {
|
.filter-bar {
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
margin-top: 8px;
|
margin-block-start: 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-sort-select {
|
.mobile-sort-select {
|
||||||
min-width: 110px;
|
max-inline-size: 130px;
|
||||||
max-width: 130px;
|
min-inline-size: 110px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-buttons-grid {
|
.filter-buttons-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-btn-mobile {
|
.filter-btn-mobile {
|
||||||
height: auto;
|
|
||||||
min-height: 48px;
|
|
||||||
padding: 4px 0;
|
|
||||||
background-color: rgba(var(--v-theme-surface), 1);
|
|
||||||
border-radius: 8px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
|
border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
|
||||||
|
border-radius: 8px;
|
||||||
|
background-color: rgba(var(--v-theme-surface), 1);
|
||||||
|
block-size: auto;
|
||||||
|
min-block-size: 48px;
|
||||||
|
padding-block: 4px;
|
||||||
|
padding-inline: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-icon {
|
.filter-icon {
|
||||||
margin-bottom: 2px;
|
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
margin-block-end: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-label {
|
.filter-label {
|
||||||
@@ -785,9 +785,9 @@ function loadMore({ done }: { done: any }) {
|
|||||||
|
|
||||||
.search-header-mobile {
|
.search-header-mobile {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
background-color: rgba(var(--v-theme-background), 0.95);
|
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
|
background-color: rgba(var(--v-theme-background), 0.95);
|
||||||
|
inset-block-start: 0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -344,7 +344,7 @@ function toggleFilterMenu(key: string) {
|
|||||||
<!-- 搜索头部容器 - 新增,用于固定在顶部 -->
|
<!-- 搜索头部容器 - 新增,用于固定在顶部 -->
|
||||||
<div class="search-header d-none d-sm-block">
|
<div class="search-header d-none d-sm-block">
|
||||||
<!-- PC端页面头部和筛选栏 -->
|
<!-- PC端页面头部和筛选栏 -->
|
||||||
<VCard class="view-header mb-3 rounded-lg">
|
<VCard class="view-header mb-3">
|
||||||
<div class="d-flex align-center flex-wrap pa-3">
|
<div class="d-flex align-center flex-wrap pa-3">
|
||||||
<VChip color="primary" variant="flat" size="small" class="search-count me-3" prepend-icon="mdi-magnify">
|
<VChip color="primary" variant="flat" size="small" class="search-count me-3" prepend-icon="mdi-magnify">
|
||||||
{{ dataList.length }} 个资源
|
{{ dataList.length }} 个资源
|
||||||
@@ -452,7 +452,7 @@ function toggleFilterMenu(key: string) {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 移动端头部和筛选区域 -->
|
<!-- 移动端头部和筛选区域 -->
|
||||||
<VCard class="d-block d-sm-none search-header-mobile rounded-lg mb-3">
|
<VCard class="d-block d-sm-none search-header-mobile mb-3">
|
||||||
<!-- 移动端头部 -->
|
<!-- 移动端头部 -->
|
||||||
<div class="view-header">
|
<div class="view-header">
|
||||||
<div class="d-flex align-center flex-wrap pa-2">
|
<div class="d-flex align-center flex-wrap pa-2">
|
||||||
@@ -572,30 +572,30 @@ function toggleFilterMenu(key: string) {
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.torrent-view {
|
.torrent-view {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100%;
|
block-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-header {
|
.search-header {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
background-color: rgba(var(--v-theme-background), 0.95);
|
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
|
background-color: rgba(var(--v-theme-background), 0.95);
|
||||||
|
inset-block-start: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-header-mobile {
|
.search-header-mobile {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
background-color: rgba(var(--v-theme-background), 0.95);
|
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
|
background-color: rgba(var(--v-theme-background), 0.95);
|
||||||
|
inset-block-start: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.view-header {
|
.view-header {
|
||||||
background-color: rgb(var(--v-theme-surface));
|
|
||||||
border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
|
|
||||||
box-shadow: none;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
|
||||||
|
background-color: rgb(var(--v-theme-surface));
|
||||||
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-count {
|
.search-count {
|
||||||
@@ -605,19 +605,20 @@ function toggleFilterMenu(key: string) {
|
|||||||
.filter-bar {
|
.filter-bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 4px;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-divider {
|
.filter-divider {
|
||||||
width: 1px;
|
|
||||||
height: 24px;
|
|
||||||
background-color: rgba(var(--v-theme-on-surface), 0.12);
|
background-color: rgba(var(--v-theme-on-surface), 0.12);
|
||||||
margin: 0 8px;
|
block-size: 24px;
|
||||||
|
inline-size: 1px;
|
||||||
|
margin-block: 0;
|
||||||
|
margin-inline: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-btn {
|
.filter-btn {
|
||||||
min-width: 0;
|
min-inline-size: 0;
|
||||||
transition: transform 0.2s;
|
transition: transform 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -627,12 +628,12 @@ function toggleFilterMenu(key: string) {
|
|||||||
|
|
||||||
.sort-select {
|
.sort-select {
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
min-width: 100px;
|
max-inline-size: 120px;
|
||||||
max-width: 120px;
|
min-inline-size: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-menu-content {
|
.filter-menu-content {
|
||||||
max-height: 50vh;
|
max-block-size: 50vh;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -642,24 +643,24 @@ function toggleFilterMenu(key: string) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.filter-chip {
|
.filter-chip {
|
||||||
|
border: 1px solid rgba(var(--v-theme-primary), 0.2);
|
||||||
margin: 4px;
|
margin: 4px;
|
||||||
transition: all 0.2s ease;
|
|
||||||
background-color: rgba(var(--v-theme-primary), 0.1) !important;
|
background-color: rgba(var(--v-theme-primary), 0.1) !important;
|
||||||
color: rgba(var(--v-theme-on-surface), 0.9) !important;
|
color: rgba(var(--v-theme-on-surface), 0.9) !important;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
border: 1px solid rgba(var(--v-theme-primary), 0.2);
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-chip:hover {
|
.filter-chip:hover {
|
||||||
transform: translateY(-2px);
|
|
||||||
background-color: rgba(var(--v-theme-primary), 0.15) !important;
|
background-color: rgba(var(--v-theme-primary), 0.15) !important;
|
||||||
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-chip.v-chip--selected {
|
.filter-chip.v-chip--selected {
|
||||||
background-color: rgba(var(--v-theme-primary), 0.85) !important;
|
background-color: rgba(var(--v-theme-primary), 0.85) !important;
|
||||||
|
box-shadow: 0 2px 4px rgba(var(--v-theme-primary), 0.3);
|
||||||
color: rgb(var(--v-theme-on-primary)) !important;
|
color: rgb(var(--v-theme-on-primary)) !important;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
box-shadow: 0 2px 4px rgba(var(--v-theme-primary), 0.3);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-tag {
|
.filter-tag {
|
||||||
@@ -672,16 +673,17 @@ function toggleFilterMenu(key: string) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.selected-filters {
|
.selected-filters {
|
||||||
background-color: rgba(var(--v-theme-surface-variant), 0.08);
|
|
||||||
padding: 8px 12px;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
background-color: rgba(var(--v-theme-surface-variant), 0.08);
|
||||||
|
padding-block: 8px;
|
||||||
|
padding-inline: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.resource-list-container {
|
.resource-list-container {
|
||||||
|
padding: 8px;
|
||||||
|
border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
background-color: rgb(var(--v-theme-surface));
|
background-color: rgb(var(--v-theme-surface));
|
||||||
border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
|
|
||||||
padding: 8px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.resource-list {
|
.resource-list {
|
||||||
@@ -695,36 +697,37 @@ function toggleFilterMenu(key: string) {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
min-height: 300px;
|
min-block-size: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-sort-select {
|
.mobile-sort-select {
|
||||||
min-width: 110px;
|
max-inline-size: 130px;
|
||||||
max-width: 130px;
|
min-inline-size: 110px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-buttons-grid {
|
.filter-buttons-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-btn-mobile {
|
.filter-btn-mobile {
|
||||||
height: auto;
|
|
||||||
min-height: 48px;
|
|
||||||
padding: 4px 0;
|
|
||||||
background-color: rgba(var(--v-theme-surface), 1);
|
|
||||||
border-radius: 8px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
|
border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
|
||||||
|
border-radius: 8px;
|
||||||
|
background-color: rgba(var(--v-theme-surface), 1);
|
||||||
|
block-size: auto;
|
||||||
|
min-block-size: 48px;
|
||||||
|
padding-block: 4px;
|
||||||
|
padding-inline: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-icon {
|
.filter-icon {
|
||||||
margin-bottom: 2px;
|
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
margin-block-end: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-label {
|
.filter-label {
|
||||||
@@ -732,9 +735,9 @@ function toggleFilterMenu(key: string) {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
@media (width <= 600px) {
|
||||||
.sort-select {
|
.sort-select {
|
||||||
min-width: 100px;
|
min-inline-size: 100px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user