mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-19 06:43:51 +02:00
77 lines
1.7 KiB
CSS
77 lines
1.7 KiB
CSS
/**
|
|
* Shared layout styles for Favorites tab pages.
|
|
* FavoritesAvatar.vue, FavoritesFriend.vue, and FavoritesWorld.vue.
|
|
*/
|
|
|
|
/* ============ Splitter ============ */
|
|
|
|
.favorites-splitter [data-slot='resizable-handle'] {
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.favorites-splitter [data-slot='resizable-handle']:hover,
|
|
.favorites-splitter [data-slot='resizable-handle']:focus-visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* ============ Group Item ============ */
|
|
|
|
.group-item {
|
|
border-radius: var(--radius-lg);
|
|
border: 1px solid var(--border);
|
|
padding: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.group-item:hover {
|
|
background-color: var(--accent);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.group-item--public {
|
|
border-left: 3px solid var(--visibility-public);
|
|
}
|
|
|
|
.group-item--friends {
|
|
border-left: 3px solid var(--visibility-friends);
|
|
}
|
|
|
|
.group-item--private {
|
|
border-left: 3px solid var(--visibility-private);
|
|
}
|
|
|
|
/* ============ Grid Layouts ============ */
|
|
|
|
.favorites-search-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(
|
|
var(--favorites-grid-columns, 1),
|
|
minmax(
|
|
var(--favorites-card-min-width, 240px),
|
|
var(--favorites-card-target-width, 1fr)
|
|
)
|
|
);
|
|
gap: var(--favorites-card-gap, 12px);
|
|
justify-content: start;
|
|
padding-bottom: 12px;
|
|
}
|
|
|
|
.favorites-card-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(
|
|
var(--favorites-grid-columns, 1),
|
|
minmax(
|
|
var(--favorites-card-min-width, 260px),
|
|
var(--favorites-card-target-width, 1fr)
|
|
)
|
|
);
|
|
gap: var(--favorites-card-gap, 12px);
|
|
justify-content: start;
|
|
padding: 4px 2px 12px 2px;
|
|
}
|
|
|
|
.favorites-card-list::after {
|
|
content: '';
|
|
}
|