1Panel-dev/1Panel
1
1
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-12-16 12:09:13 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: Update styling and hover effects for compose list items in container management

Browse source
This commit is contained in:
HynoR 2025-11-18 23:56:00 +08:00
parent 491de5ccc9
commit 31e2fdbbc3
1 changed files with 3 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
frontend/src/views/container/compose/index.vue
View file

@ -33,11 +33,11 @@
<div
v-for="item in data"
:key="item.name"
class="compose-list-item p-3 mb-2 rounded cursor-pointer border"
class="p-3 mb-2 rounded cursor-pointer border transition-colors duration-200"
:class="[
selectedCompose?.name === item.name
? 'border-primary compose-list-item--selected'
: 'border-transparent compose-list-item--default',
? 'bg-blue-50 border-blue-500 dark:bg-blue-500/30 dark:border-blue-500/80'
: 'border-transparent hover:bg-slate-50 dark:hover:bg-white/[0.08]',
]"
@click="loadDetail(item)"
>
@ -642,26 +642,3 @@ const openComposeLogDrawer = () => {
});
};
</script>
<style scoped lang="scss">
.compose-list-item {
transition: background-color 0.2s ease;
}
.compose-list-item--selected {
background-color: #eff6ff;
}
:global(.dark) .compose-list-item--selected {
background-color: rgba(59, 130, 246, 0.3);
border-color: rgba(59, 130, 246, 0.8);
}
.compose-list-item--default:hover {
background-color: #f8fafc;
}
:global(.dark) .compose-list-item--default:hover {
background-color: rgba(255, 255, 255, 0.08);
}
</style>