canastack-admin
/
sw-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Add universe tabs and planet marker CSS 

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Your Name 2026-01-24 07:37:12 +00:00
parent 733296dd59
commit a1ef3cf6ff
1 changed files with 85 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/styles/universe.css
View File

@ -326,3 +326,88 @@ body[data-theme="light"] .island-universe-canvas {
0 10px 40px rgba(0, 0, 0, 0.1),
inset 0 0 0 1px rgba(30, 58, 138, 0.1);
}
/* ===== FILTER TABS ===== */
.island-universe-tabs {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.universe-tab {
padding: 0.6rem 1.25rem;
border-radius: 25px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.7);
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: all 0.25s ease;
}
.universe-tab:hover {
background: rgba(255, 255, 255, 0.12);
color: #fff;
border-color: rgba(255, 255, 255, 0.25);
}
.universe-tab.is-active {
background: linear-gradient(135deg, rgba(96, 165, 250, 0.3), rgba(139, 92, 246, 0.3));
border-color: rgba(96, 165, 250, 0.5);
color: #fff;
box-shadow: 0 4px 15px rgba(96, 165, 250, 0.25);
}
body[data-theme="light"] .universe-tab {
background: rgba(30, 58, 138, 0.08);
border-color: rgba(30, 58, 138, 0.2);
color: rgba(30, 58, 138, 0.7);
}
body[data-theme="light"] .universe-tab:hover {
background: rgba(30, 58, 138, 0.12);
color: #1e3a8a;
}
body[data-theme="light"] .universe-tab.is-active {
background: linear-gradient(135deg, rgba(37, 99, 235, 0.2), rgba(99, 102, 241, 0.2));
border-color: rgba(37, 99, 235, 0.4);
color: #1e40af;
}
/* ===== PLANET MARKERS ===== */
.universe-planet-marker {
cursor: pointer;
z-index: 5;
}
@keyframes universePlanetOrbit {
0%, 100% {
transform: translateY(0px) rotate(0deg);
}
25% {
transform: translateY(-8px) rotate(2deg);
}
50% {
transform: translateY(-3px) rotate(-1deg);
}
75% {
transform: translateY(-10px) rotate(1deg);
}
}
/* Responsive tabs */
@media (max-width: 600px) {
.island-universe-tabs {
gap: 0.5rem;
}
.universe-tab {
padding: 0.5rem 0.9rem;
font-size: 0.85rem;
}
}