Fix SCSS syntax error in FloatingInput component
Build And Push Image / docker (push) Failing after 1m11s
Details
Build And Push Image / docker (push) Failing after 1m11s
Details
- Fixed incorrect '&' selector placement causing build failure - Created members page mockup with multiple view modes - Added MemberCard component for member listings 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
d4ecd15914
commit
c1f986bc07
|
|
@ -20,7 +20,8 @@
|
|||
"mcp__context7__get-library-docs",
|
||||
"Bash(npm install:*)",
|
||||
"Bash(git add:*)",
|
||||
"Bash(git push:*)"
|
||||
"Bash(git push:*)",
|
||||
"Bash(git commit:*)"
|
||||
],
|
||||
"deny": [],
|
||||
"ask": []
|
||||
|
|
|
|||
|
|
@ -183,10 +183,10 @@ const clearInput = () => {
|
|||
border-color: #dc2626;
|
||||
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
|
||||
transform: translateY(-1px);
|
||||
|
||||
.floating-input--glass& {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
.floating-input--focused.floating-input--glass & {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
// Error state
|
||||
|
|
|
|||
|
|
@ -0,0 +1,883 @@
|
|||
<template>
|
||||
<div class="members-mockup">
|
||||
<!-- Header -->
|
||||
<header class="members-header">
|
||||
<div
|
||||
v-motion
|
||||
:initial="{ opacity: 0, y: -20 }"
|
||||
:enter="{ opacity: 1, y: 0 }"
|
||||
class="members-header__content"
|
||||
>
|
||||
<h1 class="members-header__title">Members Directory</h1>
|
||||
<p class="members-header__subtitle">Connect with {{ totalMembers }} MonacoUSA members worldwide</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-motion
|
||||
:initial="{ opacity: 0, y: -20 }"
|
||||
:enter="{ opacity: 1, y: 0, transition: { delay: 100 } }"
|
||||
class="members-header__actions"
|
||||
>
|
||||
<MonacoButton variant="glass" icon="download">
|
||||
Export Directory
|
||||
</MonacoButton>
|
||||
<MonacoButton variant="primary" icon="user-plus">
|
||||
Invite Member
|
||||
</MonacoButton>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Search and Filters -->
|
||||
<div
|
||||
v-motion
|
||||
:initial="{ opacity: 0, y: 20 }"
|
||||
:enter="{ opacity: 1, y: 0, transition: { delay: 200 } }"
|
||||
class="members-controls"
|
||||
>
|
||||
<div class="members-controls__search">
|
||||
<FloatingInput
|
||||
v-model="searchQuery"
|
||||
label="Search members by name, company, or skills..."
|
||||
leftIcon="search"
|
||||
variant="glass"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="members-controls__filters">
|
||||
<select class="filter-select">
|
||||
<option value="">All Roles</option>
|
||||
<option value="board">Board Member</option>
|
||||
<option value="executive">Executive</option>
|
||||
<option value="member">Member</option>
|
||||
<option value="honorary">Honorary</option>
|
||||
</select>
|
||||
|
||||
<select class="filter-select">
|
||||
<option value="">All Industries</option>
|
||||
<option value="tech">Technology</option>
|
||||
<option value="finance">Finance</option>
|
||||
<option value="real-estate">Real Estate</option>
|
||||
<option value="hospitality">Hospitality</option>
|
||||
</select>
|
||||
|
||||
<select class="filter-select">
|
||||
<option value="">Sort By</option>
|
||||
<option value="name">Name (A-Z)</option>
|
||||
<option value="recent">Recently Joined</option>
|
||||
<option value="active">Most Active</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Bar -->
|
||||
<div
|
||||
v-motion
|
||||
:initial="{ opacity: 0, x: -20 }"
|
||||
:enter="{ opacity: 1, x: 0, transition: { delay: 300 } }"
|
||||
class="members-stats"
|
||||
>
|
||||
<div class="stat-chip">
|
||||
<span class="stat-chip__value">{{ filteredMembers.length }}</span>
|
||||
<span class="stat-chip__label">Results</span>
|
||||
</div>
|
||||
<div class="stat-chip">
|
||||
<span class="stat-chip__value">{{ onlineCount }}</span>
|
||||
<span class="stat-chip__label">Online Now</span>
|
||||
</div>
|
||||
<div class="stat-chip">
|
||||
<span class="stat-chip__value">{{ newThisMonth }}</span>
|
||||
<span class="stat-chip__label">New This Month</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- View Toggle -->
|
||||
<div
|
||||
v-motion
|
||||
:initial="{ opacity: 0 }"
|
||||
:enter="{ opacity: 1, transition: { delay: 350 } }"
|
||||
class="view-controls"
|
||||
>
|
||||
<div class="view-toggle">
|
||||
<button
|
||||
class="view-toggle__btn"
|
||||
:class="{ 'view-toggle__btn--active': viewMode === 'grid' }"
|
||||
@click="viewMode = 'grid'"
|
||||
>
|
||||
<span>⊞</span> Grid View
|
||||
</button>
|
||||
<button
|
||||
class="view-toggle__btn"
|
||||
:class="{ 'view-toggle__btn--active': viewMode === 'list' }"
|
||||
@click="viewMode = 'list'"
|
||||
>
|
||||
<span>☰</span> List View
|
||||
</button>
|
||||
<button
|
||||
class="view-toggle__btn"
|
||||
:class="{ 'view-toggle__btn--active': viewMode === 'compact' }"
|
||||
@click="viewMode = 'compact'"
|
||||
>
|
||||
<span>▦</span> Compact
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Members Grid/List -->
|
||||
<div
|
||||
class="members-container"
|
||||
:class="`members-container--${viewMode}`"
|
||||
>
|
||||
<!-- Grid View -->
|
||||
<template v-if="viewMode === 'grid'">
|
||||
<MemberCard
|
||||
v-for="(member, index) in filteredMembers"
|
||||
:key="member.id"
|
||||
:member="member"
|
||||
:featured="member.featured"
|
||||
:delay="index"
|
||||
variant="glass"
|
||||
@click="selectMember"
|
||||
@connect="connectMember"
|
||||
@message="messageMember"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- List View -->
|
||||
<template v-else-if="viewMode === 'list'">
|
||||
<div
|
||||
v-for="(member, index) in filteredMembers"
|
||||
:key="member.id"
|
||||
v-motion
|
||||
:initial="{ opacity: 0, x: -20 }"
|
||||
:enter="{
|
||||
opacity: 1,
|
||||
x: 0,
|
||||
transition: { delay: 400 + (index * 30) }
|
||||
}"
|
||||
class="member-list-item"
|
||||
@click="selectMember(member)"
|
||||
>
|
||||
<div class="member-list-item__avatar">
|
||||
<img v-if="member.avatar" :src="member.avatar" :alt="member.name" />
|
||||
<div v-else class="avatar-placeholder">{{ getInitials(member.name) }}</div>
|
||||
<span
|
||||
v-if="member.status === 'online'"
|
||||
class="status-indicator"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="member-list-item__info">
|
||||
<h3 class="member-list-item__name">{{ member.name }}</h3>
|
||||
<p class="member-list-item__title">{{ member.title }} at {{ member.company }}</p>
|
||||
</div>
|
||||
|
||||
<div class="member-list-item__tags">
|
||||
<span
|
||||
v-for="tag in member.tags?.slice(0, 2)"
|
||||
:key="tag"
|
||||
class="tag"
|
||||
>
|
||||
{{ tag }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="member-list-item__meta">
|
||||
<span class="meta-text">Member since {{ member.joinDate }}</span>
|
||||
<span v-if="member.connections" class="meta-text">{{ member.connections }} connections</span>
|
||||
</div>
|
||||
|
||||
<div class="member-list-item__actions">
|
||||
<MonacoButton
|
||||
:variant="member.connected ? 'ghost' : 'primary'"
|
||||
size="sm"
|
||||
@click.stop="connectMember(member)"
|
||||
>
|
||||
{{ member.connected ? 'Connected' : 'Connect' }}
|
||||
</MonacoButton>
|
||||
<MonacoButton
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
icon="message"
|
||||
@click.stop="messageMember(member)"
|
||||
>
|
||||
Message
|
||||
</MonacoButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Compact View -->
|
||||
<template v-else>
|
||||
<div class="compact-grid">
|
||||
<div
|
||||
v-for="(member, index) in filteredMembers"
|
||||
:key="member.id"
|
||||
v-motion
|
||||
:initial="{ opacity: 0, scale: 0.9 }"
|
||||
:enter="{
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
transition: { delay: 400 + (index * 20) }
|
||||
}"
|
||||
class="compact-card"
|
||||
@click="selectMember(member)"
|
||||
>
|
||||
<div class="compact-card__avatar">
|
||||
<img v-if="member.avatar" :src="member.avatar" :alt="member.name" />
|
||||
<div v-else class="avatar-placeholder-small">{{ getInitials(member.name) }}</div>
|
||||
</div>
|
||||
<div class="compact-card__info">
|
||||
<h4 class="compact-card__name">{{ member.name }}</h4>
|
||||
<p class="compact-card__role">{{ member.title }}</p>
|
||||
</div>
|
||||
<button
|
||||
class="compact-card__connect"
|
||||
:class="{ 'compact-card__connect--connected': member.connected }"
|
||||
@click.stop="connectMember(member)"
|
||||
>
|
||||
{{ member.connected ? '✓' : '+' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Load More -->
|
||||
<div
|
||||
v-motion
|
||||
:initial="{ opacity: 0 }"
|
||||
:enter="{ opacity: 1, transition: { delay: 800 } }"
|
||||
class="load-more"
|
||||
>
|
||||
<MonacoButton variant="glass" icon="refresh" block>
|
||||
Load More Members
|
||||
</MonacoButton>
|
||||
</div>
|
||||
|
||||
<!-- Floating Stats Widget -->
|
||||
<GlassCard
|
||||
variant="glass"
|
||||
class="network-widget"
|
||||
:animated="true"
|
||||
:delay="900"
|
||||
>
|
||||
<h4 class="network-widget__title">Your Network</h4>
|
||||
<div class="network-stats">
|
||||
<div class="network-stat">
|
||||
<span class="network-stat__value">47</span>
|
||||
<span class="network-stat__label">Connections</span>
|
||||
</div>
|
||||
<div class="network-stat">
|
||||
<span class="network-stat__value">12</span>
|
||||
<span class="network-stat__label">Pending</span>
|
||||
</div>
|
||||
<div class="network-stat">
|
||||
<span class="network-stat__value">5</span>
|
||||
<span class="network-stat__label">New Messages</span>
|
||||
</div>
|
||||
</div>
|
||||
<MonacoButton variant="primary" size="sm" block>
|
||||
View All Connections
|
||||
</MonacoButton>
|
||||
</GlassCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import GlassCard from '~/components/ui/GlassCard.vue'
|
||||
import MonacoButton from '~/components/ui/MonacoButton.vue'
|
||||
import FloatingInput from '~/components/ui/FloatingInput.vue'
|
||||
import MemberCard from '~/components/ui/MemberCard.vue'
|
||||
|
||||
const searchQuery = ref('')
|
||||
const viewMode = ref('grid')
|
||||
const totalMembers = ref(1234)
|
||||
const onlineCount = ref(89)
|
||||
const newThisMonth = ref(23)
|
||||
|
||||
const members = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: 'Alexandra Martin',
|
||||
avatar: '/api/placeholder/150/150',
|
||||
title: 'CEO',
|
||||
company: 'Monaco Ventures',
|
||||
role: 'Board Member',
|
||||
status: 'online',
|
||||
tags: ['Leadership', 'Strategy', 'Investment'],
|
||||
joinDate: '2021',
|
||||
connections: 234,
|
||||
connected: false,
|
||||
featured: true
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Jean-Paul Rousseau',
|
||||
avatar: '/api/placeholder/150/150',
|
||||
title: 'Managing Director',
|
||||
company: 'Riviera Capital',
|
||||
role: 'Executive',
|
||||
status: 'online',
|
||||
tags: ['Finance', 'Real Estate', 'Banking'],
|
||||
joinDate: '2020',
|
||||
connections: 189,
|
||||
connected: true,
|
||||
featured: false
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'Sarah Chen',
|
||||
avatar: '',
|
||||
title: 'VP of Technology',
|
||||
company: 'TechMonaco',
|
||||
role: 'Member',
|
||||
status: 'offline',
|
||||
tags: ['Technology', 'AI', 'Innovation', 'Blockchain'],
|
||||
joinDate: '2022',
|
||||
connections: 156,
|
||||
connected: false,
|
||||
featured: false
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'Marcus Williams',
|
||||
avatar: '/api/placeholder/150/150',
|
||||
title: 'Partner',
|
||||
company: 'Monaco Law Group',
|
||||
role: 'Member',
|
||||
status: 'away',
|
||||
tags: ['Legal', 'Corporate Law', 'M&A'],
|
||||
joinDate: '2021',
|
||||
connections: 98,
|
||||
connected: false,
|
||||
featured: false
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: 'Isabella Romano',
|
||||
avatar: '/api/placeholder/150/150',
|
||||
title: 'Creative Director',
|
||||
company: 'Romano Design Studio',
|
||||
role: 'Member',
|
||||
status: 'online',
|
||||
tags: ['Design', 'Branding', 'Marketing'],
|
||||
joinDate: '2023',
|
||||
connections: 67,
|
||||
connected: true,
|
||||
featured: false
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: 'Thomas Anderson',
|
||||
avatar: '',
|
||||
title: 'Investment Manager',
|
||||
company: 'Monte Carlo Holdings',
|
||||
role: 'Honorary',
|
||||
status: 'offline',
|
||||
tags: ['Investment', 'Wealth Management', 'Private Equity'],
|
||||
joinDate: '2019',
|
||||
connections: 321,
|
||||
connected: false,
|
||||
featured: true
|
||||
}
|
||||
])
|
||||
|
||||
const filteredMembers = computed(() => {
|
||||
if (!searchQuery.value) return members.value
|
||||
|
||||
const query = searchQuery.value.toLowerCase()
|
||||
return members.value.filter(member =>
|
||||
member.name.toLowerCase().includes(query) ||
|
||||
member.company?.toLowerCase().includes(query) ||
|
||||
member.title?.toLowerCase().includes(query) ||
|
||||
member.tags?.some(tag => tag.toLowerCase().includes(query))
|
||||
)
|
||||
})
|
||||
|
||||
const getInitials = (name: string) => {
|
||||
return name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)
|
||||
}
|
||||
|
||||
const selectMember = (member: any) => {
|
||||
console.log('Selected member:', member)
|
||||
}
|
||||
|
||||
const connectMember = (member: any) => {
|
||||
member.connected = !member.connected
|
||||
console.log('Connect with:', member)
|
||||
}
|
||||
|
||||
const messageMember = (member: any) => {
|
||||
console.log('Message:', member)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.members-mockup {
|
||||
padding: 2rem;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.members-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.5rem;
|
||||
|
||||
&__content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #27272a;
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: 1.125rem;
|
||||
color: #6b7280;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.members-controls {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&__search {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
&__filters {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
padding: 0.75rem 1rem;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 12px;
|
||||
font-size: 0.875rem;
|
||||
color: #27272a;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
outline: none;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-color: rgba(220, 38, 38, 0.2);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: #dc2626;
|
||||
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.members-stats {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.stat-chip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 20px;
|
||||
|
||||
&__value {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
}
|
||||
|
||||
.view-controls {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.view-toggle {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 12px;
|
||||
|
||||
&__btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(220, 38, 38, 0.05);
|
||||
}
|
||||
|
||||
&--active {
|
||||
background: #dc2626;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.members-container {
|
||||
margin-bottom: 2rem;
|
||||
|
||||
&--grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
&--list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
&--compact {
|
||||
.compact-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.member-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem 1.5rem;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
position: relative;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__name {
|
||||
margin: 0 0 0.25rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #27272a;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&__tags {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-placeholder,
|
||||
.avatar-placeholder-small {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
|
||||
font-weight: 600;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.avatar-placeholder-small {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
background: #10b981;
|
||||
border: 2px solid white;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: rgba(220, 38, 38, 0.1);
|
||||
color: #dc2626;
|
||||
border-radius: 6px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.meta-text {
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.compact-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__name {
|
||||
margin: 0 0 0.125rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: #27272a;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&__role {
|
||||
margin: 0;
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&__connect {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background: #dc2626;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: #b91c1c;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
&--connected {
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
color: #10b981;
|
||||
|
||||
&:hover {
|
||||
background: rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.load-more {
|
||||
max-width: 400px;
|
||||
margin: 2rem auto;
|
||||
}
|
||||
|
||||
.network-widget {
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
right: 2rem;
|
||||
width: 280px;
|
||||
z-index: 10;
|
||||
|
||||
&__title {
|
||||
margin: 0 0 1rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #dc2626;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.network-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.network-stat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 8px;
|
||||
|
||||
&__value {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 0.625rem;
|
||||
color: #6b7280;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive
|
||||
@media (max-width: 768px) {
|
||||
.members-header {
|
||||
&__actions {
|
||||
width: 100%;
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.members-controls {
|
||||
flex-direction: column;
|
||||
|
||||
&__filters {
|
||||
width: 100%;
|
||||
|
||||
.filter-select {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.member-list-item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
&__tags,
|
||||
&__meta {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.network-widget {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue