mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-09-07 00:36:41 +08:00
fix: restore search filter chip colors (#493)
This commit is contained in:
@@ -141,4 +141,29 @@ function updateFilter(key: string, values: string[]) {
|
|||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.filter-options {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-chip {
|
||||||
|
border: 1px solid rgba(var(--v-theme-primary), 0.2);
|
||||||
|
margin: 4px;
|
||||||
|
background-color: rgba(var(--v-theme-primary), 0.1) !important;
|
||||||
|
color: rgba(var(--v-theme-on-surface), 0.9) !important;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-chip:hover {
|
||||||
|
background-color: rgba(var(--v-theme-primary), 0.15) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-chip.v-chip--selected {
|
||||||
|
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;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -142,4 +142,24 @@ function handleDetail(item: Context) {
|
|||||||
max-block-size: 60vh;
|
max-block-size: 60vh;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.chip-season {
|
||||||
|
background-color: #3f51b5;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chip-free {
|
||||||
|
background-color: #4caf50;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chip-discount {
|
||||||
|
background-color: #ff5722;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chip-bonus {
|
||||||
|
background-color: #9c27b0;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -106,3 +106,30 @@ function updateFilter(values: string[]) {
|
|||||||
</VCard>
|
</VCard>
|
||||||
</VDialog>
|
</VDialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.filter-options {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-chip {
|
||||||
|
border: 1px solid rgba(var(--v-theme-primary), 0.2);
|
||||||
|
margin: 4px;
|
||||||
|
background-color: rgba(var(--v-theme-primary), 0.1) !important;
|
||||||
|
color: rgba(var(--v-theme-on-surface), 0.9) !important;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-chip:hover {
|
||||||
|
background-color: rgba(var(--v-theme-primary), 0.15) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-chip.v-chip--selected {
|
||||||
|
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;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -372,7 +372,7 @@ onMounted(() => {
|
|||||||
:key="key"
|
:key="key"
|
||||||
variant="tonal"
|
variant="tonal"
|
||||||
size="small"
|
size="small"
|
||||||
:color="filterForm[key].length > 0 ? 'primary' : undefined"
|
color="primary"
|
||||||
:prepend-icon="getFilterIcon(key)"
|
:prepend-icon="getFilterIcon(key)"
|
||||||
class="filter-btn"
|
class="filter-btn"
|
||||||
rounded="pill"
|
rounded="pill"
|
||||||
@@ -555,7 +555,7 @@ onMounted(() => {
|
|||||||
v-for="(title, key) in filterTitles"
|
v-for="(title, key) in filterTitles"
|
||||||
v-show="filterOptions[key].length > 0"
|
v-show="filterOptions[key].length > 0"
|
||||||
:key="key"
|
:key="key"
|
||||||
variant="text"
|
variant="tonal"
|
||||||
color="primary"
|
color="primary"
|
||||||
class="filter-btn-mobile"
|
class="filter-btn-mobile"
|
||||||
@click="toggleFilterMenu(key)"
|
@click="toggleFilterMenu(key)"
|
||||||
@@ -575,7 +575,7 @@ onMounted(() => {
|
|||||||
</VBtn>
|
</VBtn>
|
||||||
|
|
||||||
<!-- 全部筛选按钮 -->
|
<!-- 全部筛选按钮 -->
|
||||||
<VBtn variant="text" color="primary" class="filter-btn-mobile" @click="toggleAllFilterMenu">
|
<VBtn variant="tonal" color="primary" class="filter-btn-mobile" @click="toggleAllFilterMenu">
|
||||||
<VIcon icon="mdi-filter-variant" class="filter-icon me-1"></VIcon>
|
<VIcon icon="mdi-filter-variant" class="filter-icon me-1"></VIcon>
|
||||||
<span class="filter-label">
|
<span class="filter-label">
|
||||||
{{ t('torrent.allFilters') }}
|
{{ t('torrent.allFilters') }}
|
||||||
@@ -665,7 +665,6 @@ onMounted(() => {
|
|||||||
|
|
||||||
.filter-btn {
|
.filter-btn {
|
||||||
min-inline-size: 0;
|
min-inline-size: 0;
|
||||||
background: rgba(var(--v-theme-surface-variant), 0.1);
|
|
||||||
transition: opacity 0.2s;
|
transition: opacity 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -733,7 +732,6 @@ onMounted(() => {
|
|||||||
justify-content: 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;
|
border-radius: 8px;
|
||||||
background-color: rgba(var(--v-theme-surface-variant), 0.08);
|
|
||||||
block-size: auto;
|
block-size: auto;
|
||||||
min-block-size: 48px;
|
min-block-size: 48px;
|
||||||
padding-block: 4px;
|
padding-block: 4px;
|
||||||
|
|||||||
Reference in New Issue
Block a user