162 lines
3.3 KiB
CSS
162 lines
3.3 KiB
CSS
|
/* SOCIAL NEXUS */
|
||
|
|
.story-ring {
|
||
|
|
position: relative;
|
||
|
|
width: 64px;
|
||
|
|
height: 64px;
|
||
|
|
border-radius: 50%;
|
||
|
|
padding: 3px;
|
||
|
|
background: var(--color-void-800);
|
||
|
|
cursor: pointer;
|
||
|
|
transition: transform 0.2s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.story-ring::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
inset: 0;
|
||
|
|
border-radius: 50%;
|
||
|
|
padding: 2px;
|
||
|
|
background: linear-gradient(45deg, var(--color-cyan-500), var(--color-magenta-500));
|
||
|
|
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||
|
|
-webkit-mask-composite: xor;
|
||
|
|
mask-composite: exclude;
|
||
|
|
}
|
||
|
|
|
||
|
|
.story-ring.live::before {
|
||
|
|
background: var(--color-magenta-500);
|
||
|
|
box-shadow: 0 0 15px var(--color-magenta-glow);
|
||
|
|
animation: pulse-ring 2s infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
.story-ring.close-friends::before {
|
||
|
|
background: var(--color-lime-500);
|
||
|
|
}
|
||
|
|
|
||
|
|
.story-ring:hover {
|
||
|
|
transform: scale(1.05);
|
||
|
|
}
|
||
|
|
|
||
|
|
.feed-post {
|
||
|
|
background: var(--color-void-50);
|
||
|
|
border: 1px solid var(--color-void-200);
|
||
|
|
border-radius: var(--radius-lg);
|
||
|
|
padding: var(--space-6);
|
||
|
|
margin-bottom: var(--space-6);
|
||
|
|
}
|
||
|
|
|
||
|
|
.post-header {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: var(--space-4);
|
||
|
|
margin-bottom: var(--space-4);
|
||
|
|
}
|
||
|
|
|
||
|
|
.post-avatar {
|
||
|
|
width: 48px;
|
||
|
|
height: 48px;
|
||
|
|
border-radius: 50%;
|
||
|
|
border: 2px solid var(--color-magenta-500);
|
||
|
|
padding: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.post-action {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 6px;
|
||
|
|
color: var(--color-void-400);
|
||
|
|
font-size: var(--text-xs);
|
||
|
|
font-family: var(--font-mono);
|
||
|
|
transition: color 0.2s;
|
||
|
|
background: transparent;
|
||
|
|
border: none;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.post-action:hover {
|
||
|
|
color: var(--color-cyan-400);
|
||
|
|
}
|
||
|
|
|
||
|
|
.post-action.liked {
|
||
|
|
color: var(--color-magenta-500);
|
||
|
|
}
|
||
|
|
|
||
|
|
.post-action svg {
|
||
|
|
width: 18px;
|
||
|
|
height: 18px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* GAMIFICATION */
|
||
|
|
.xp-container {
|
||
|
|
width: 100%;
|
||
|
|
height: 8px;
|
||
|
|
background: var(--color-void-300);
|
||
|
|
border-radius: var(--radius-full);
|
||
|
|
overflow: hidden;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.xp-fill {
|
||
|
|
height: 100%;
|
||
|
|
background: var(--grad-gaming);
|
||
|
|
width: 0%;
|
||
|
|
transition: width 1s var(--ease-out);
|
||
|
|
box-shadow: 0 0 10px var(--color-xp-gold);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* INVENTORY GRID */
|
||
|
|
.inventory-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
|
||
|
|
gap: var(--space-2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-slot {
|
||
|
|
aspect-ratio: 1;
|
||
|
|
background: var(--color-void-100);
|
||
|
|
border: 1px solid var(--color-void-200);
|
||
|
|
border-radius: var(--radius-sm);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
position: relative;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.2s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-slot:hover {
|
||
|
|
background: var(--color-void-200);
|
||
|
|
border-color: var(--color-void-400);
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-slot.rare {
|
||
|
|
border-color: var(--color-cyan-500);
|
||
|
|
box-shadow: inset 0 0 10px rgba(0, 219, 245, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-slot.epic {
|
||
|
|
border-color: var(--color-magenta-500);
|
||
|
|
box-shadow: inset 0 0 10px rgba(236, 72, 153, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-slot.legendary {
|
||
|
|
border-color: var(--color-xp-gold);
|
||
|
|
box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.2);
|
||
|
|
animation: pulse 2s infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-slot img {
|
||
|
|
width: 80%;
|
||
|
|
height: 80%;
|
||
|
|
object-fit: contain;
|
||
|
|
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-count {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 2px;
|
||
|
|
right: 4px;
|
||
|
|
font-size: 10px;
|
||
|
|
font-family: var(--font-mono);
|
||
|
|
color: #fff;
|
||
|
|
text-shadow: 0 1px 2px #000;
|
||
|
|
}
|