Enhance sidebars with premium glass-bolt design
Build And Push Image / docker (push) Successful in 1m49s
Details
Build And Push Image / docker (push) Successful in 1m49s
Details
- Added CSS variables for consistent glass-bolt theming - Enhanced glass drawer with gradient backgrounds (70-85% opacity) - Added floating orb decorations with smooth animations - Implemented shimmer effects on navigation item hover - Added system status indicator to admin sidebar - Enhanced animations (float, subtle-pulse, pulse-dot) - Applied premium styling to all three layouts (admin, board, member) - Preserved all existing functionality while overlaying new design - Based on BoltAI mockup inspiration for premium aesthetic 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
64a12ecd5b
commit
d8453160d3
114
DESIGN-SYSTEM.md
114
DESIGN-SYSTEM.md
|
|
@ -188,7 +188,7 @@ $gray-900: #18181b;
|
|||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ Sidebar │ Main Content │
|
||||
│ 250px │ Flexible │
|
||||
│ 280px │ Flexible │
|
||||
│ │ ┌───────────────────────┐ │
|
||||
│ │ │ Header Section │ │
|
||||
│ │ ├───────────────────────┤ │
|
||||
|
|
@ -199,6 +199,118 @@ $gray-900: #18181b;
|
|||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
#### Enhanced Sidebar Design
|
||||
```scss
|
||||
.enhanced-glass-sidebar {
|
||||
// Subtle glass background with gradient
|
||||
background: linear-gradient(135deg,
|
||||
rgba(255, 255, 255, 0.6) 0%,
|
||||
rgba(248, 249, 250, 0.8) 100%);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.05);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
// Decorative floating orbs (non-interactive)
|
||||
.floating-orb {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(30px);
|
||||
pointer-events: none;
|
||||
animation: float 8s ease-in-out infinite;
|
||||
|
||||
&.orb-1 {
|
||||
top: 20%;
|
||||
right: -50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: radial-gradient(circle,
|
||||
rgba(220, 38, 38, 0.05), transparent);
|
||||
}
|
||||
|
||||
&.orb-2 {
|
||||
bottom: 30%;
|
||||
left: -30px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: radial-gradient(circle,
|
||||
rgba(220, 38, 38, 0.03), transparent);
|
||||
animation-delay: 3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Navigation Items with Premium Feel
|
||||
.nav-item {
|
||||
border-radius: 12px;
|
||||
margin: 6px 16px;
|
||||
padding: 12px 16px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
// Shimmer effect on hover
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.1),
|
||||
transparent);
|
||||
pointer-events: none;
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(220, 38, 38, 0.05);
|
||||
transform: translateX(2px);
|
||||
|
||||
&::after {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: rgba(220, 38, 38, 0.1);
|
||||
border-left: 3px solid $monaco-red-600;
|
||||
transform: scale(1.02);
|
||||
|
||||
.icon {
|
||||
animation: subtle-pulse 3s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// System Status Indicator
|
||||
.system-status {
|
||||
margin-top: auto;
|
||||
padding: 1rem;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||||
|
||||
.status-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
background: rgba(16, 185, 129, 0.05);
|
||||
border-radius: 8px;
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #10b981;
|
||||
border-radius: 50%;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 6. Animation & Transitions
|
||||
|
||||
#### Hover Effects
|
||||
|
|
|
|||
|
|
@ -265,6 +265,19 @@
|
|||
</div>
|
||||
</v-card>
|
||||
</div>
|
||||
|
||||
<!-- System Status Indicator -->
|
||||
<div class="system-status pa-4 mt-auto">
|
||||
<v-card class="status-indicator-card" elevation="0">
|
||||
<v-card-text class="d-flex align-center pa-3">
|
||||
<div class="status-dot"></div>
|
||||
<div class="ml-3">
|
||||
<div class="text-caption font-weight-medium">System Status</div>
|
||||
<div class="text-caption monaco-muted-text">All services operational</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</div>
|
||||
</template>
|
||||
</v-navigation-drawer>
|
||||
|
||||
|
|
@ -454,10 +467,59 @@ watch(width, (newWidth) => {
|
|||
<style scoped lang="scss">
|
||||
@import '~/assets/scss/main.scss';
|
||||
|
||||
// Glass Drawer Styles
|
||||
// CSS Variables for Glass Bolt Theme
|
||||
:root {
|
||||
--glass-bg: rgba(255, 255, 255, 0.6);
|
||||
--glass-bg-ultra: rgba(255, 255, 255, 0.8);
|
||||
--glass-blur: 4px;
|
||||
--glass-blur-heavy: 10px;
|
||||
--glass-border: rgba(0, 0, 0, 0.05);
|
||||
--glass-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
--monaco-red: #dc2626;
|
||||
--monaco-red-dark: #b91c1c;
|
||||
--monaco-red-light: rgba(220, 38, 38, 0.1);
|
||||
}
|
||||
|
||||
// Enhanced Glass Drawer with Premium Feel
|
||||
.glass-drawer {
|
||||
@include glass-effect(0.95, 30px);
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
|
||||
background: linear-gradient(135deg,
|
||||
rgba(255, 255, 255, 0.7) 0%,
|
||||
rgba(248, 249, 250, 0.85) 100%) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-right: 1px solid var(--glass-border) !important;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
// Floating Orbs (decorative)
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(40px);
|
||||
pointer-events: none;
|
||||
animation: float 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: 20%;
|
||||
right: -60px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: radial-gradient(circle,
|
||||
rgba(220, 38, 38, 0.06), transparent);
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: 30%;
|
||||
left: -40px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: radial-gradient(circle,
|
||||
rgba(220, 38, 38, 0.04), transparent);
|
||||
animation-delay: 3s;
|
||||
}
|
||||
}
|
||||
|
||||
.glass-logo-section {
|
||||
|
|
@ -474,10 +536,38 @@ watch(width, (newWidth) => {
|
|||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
transform: translateY(0) translateX(0);
|
||||
}
|
||||
25% {
|
||||
transform: translateY(-15px) translateX(5px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
transform: translateY(-10px) translateX(-5px);
|
||||
}
|
||||
75% {
|
||||
transform: translateY(-5px) translateX(3px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes subtle-pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-dot {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -497,35 +587,50 @@ watch(width, (newWidth) => {
|
|||
|
||||
.glass-nav-item {
|
||||
border-radius: 12px !important;
|
||||
margin: 4px 12px !important;
|
||||
margin: 6px 16px !important;
|
||||
padding: 12px 16px !important;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
|
||||
// Shimmer effect setup
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.15),
|
||||
transparent);
|
||||
pointer-events: none;
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(220, 38, 38, 0.05) !important;
|
||||
transform: translateX(2px);
|
||||
transform: translateX(3px);
|
||||
box-shadow: 0 2px 8px rgba(220, 38, 38, 0.1);
|
||||
|
||||
&::after {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.v-list-item--active {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(220, 38, 38, 0.15) 0%,
|
||||
rgba(220, 38, 38, 0.12) 0%,
|
||||
rgba(220, 38, 38, 0.08) 100%) !important;
|
||||
color: #dc2626 !important;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 3px;
|
||||
height: 70%;
|
||||
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
color: var(--monaco-red) !important;
|
||||
transform: scale(1.02);
|
||||
border-left: 3px solid var(--monaco-red);
|
||||
box-shadow: 0 2px 12px rgba(220, 38, 38, 0.15);
|
||||
|
||||
.v-icon {
|
||||
color: #dc2626 !important;
|
||||
color: var(--monaco-red) !important;
|
||||
animation: subtle-pulse 3s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -664,4 +769,65 @@ watch(width, (newWidth) => {
|
|||
margin: 2px 8px 2px 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// System Status Indicator Styles
|
||||
.system-status {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(to top,
|
||||
rgba(255, 255, 255, 0.9),
|
||||
rgba(255, 255, 255, 0));
|
||||
padding-top: 2rem !important;
|
||||
}
|
||||
|
||||
.status-indicator-card {
|
||||
background: rgba(16, 185, 129, 0.05) !important;
|
||||
border: 1px solid rgba(16, 185, 129, 0.1);
|
||||
border-radius: 12px !important;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: rgba(16, 185, 129, 0.08) !important;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #10b981;
|
||||
border-radius: 50%;
|
||||
animation: pulse-dot 2s infinite;
|
||||
box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
// Premium Glass Effects on Navigation Items
|
||||
.glass-nav-item,
|
||||
.glass-nav-item-sub {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.05) 50%,
|
||||
transparent 100%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -523,10 +523,59 @@ watch(width, (newWidth) => {
|
|||
<style scoped lang="scss">
|
||||
@import '~/assets/scss/main.scss';
|
||||
|
||||
// Glass Drawer Styles
|
||||
// CSS Variables for Glass Bolt Theme
|
||||
:root {
|
||||
--glass-bg: rgba(255, 255, 255, 0.6);
|
||||
--glass-bg-ultra: rgba(255, 255, 255, 0.8);
|
||||
--glass-blur: 4px;
|
||||
--glass-blur-heavy: 10px;
|
||||
--glass-border: rgba(0, 0, 0, 0.05);
|
||||
--glass-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
--monaco-red: #dc2626;
|
||||
--monaco-red-dark: #b91c1c;
|
||||
--monaco-red-light: rgba(220, 38, 38, 0.1);
|
||||
}
|
||||
|
||||
// Enhanced Glass Drawer with Premium Feel
|
||||
.glass-drawer {
|
||||
@include glass-effect(0.95, 30px);
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
|
||||
background: linear-gradient(135deg,
|
||||
rgba(255, 255, 255, 0.7) 0%,
|
||||
rgba(248, 249, 250, 0.85) 100%) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-right: 1px solid var(--glass-border) !important;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
// Floating Orbs (decorative)
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(40px);
|
||||
pointer-events: none;
|
||||
animation: float 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: 20%;
|
||||
right: -60px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: radial-gradient(circle,
|
||||
rgba(220, 38, 38, 0.06), transparent);
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: 30%;
|
||||
left: -40px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: radial-gradient(circle,
|
||||
rgba(220, 38, 38, 0.04), transparent);
|
||||
animation-delay: 3s;
|
||||
}
|
||||
}
|
||||
|
||||
.glass-logo-section {
|
||||
|
|
@ -543,10 +592,38 @@ watch(width, (newWidth) => {
|
|||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
transform: translateY(0) translateX(0);
|
||||
}
|
||||
25% {
|
||||
transform: translateY(-15px) translateX(5px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
transform: translateY(-10px) translateX(-5px);
|
||||
}
|
||||
75% {
|
||||
transform: translateY(-5px) translateX(3px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes subtle-pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-dot {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -562,12 +639,36 @@ watch(width, (newWidth) => {
|
|||
|
||||
.glass-nav-item {
|
||||
border-radius: 12px !important;
|
||||
margin: 4px 12px !important;
|
||||
margin: 6px 16px !important;
|
||||
padding: 12px 16px !important;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
|
||||
// Shimmer effect setup
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.15),
|
||||
transparent);
|
||||
pointer-events: none;
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(220, 38, 38, 0.05) !important;
|
||||
transform: translateX(2px);
|
||||
transform: translateX(3px);
|
||||
box-shadow: 0 2px 8px rgba(220, 38, 38, 0.1);
|
||||
|
||||
&::after {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.v-list-item--active {
|
||||
|
|
|
|||
|
|
@ -321,11 +321,60 @@ watch(width, (newWidth) => {
|
|||
<style scoped lang="scss">
|
||||
@import '~/assets/scss/main.scss';
|
||||
|
||||
// Enhanced Glass Drawer Styles
|
||||
// CSS Variables for Glass Bolt Theme
|
||||
:root {
|
||||
--glass-bg: rgba(255, 255, 255, 0.6);
|
||||
--glass-bg-ultra: rgba(255, 255, 255, 0.8);
|
||||
--glass-blur: 4px;
|
||||
--glass-blur-heavy: 10px;
|
||||
--glass-border: rgba(0, 0, 0, 0.05);
|
||||
--glass-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
--monaco-red: #dc2626;
|
||||
--monaco-red-dark: #b91c1c;
|
||||
--monaco-red-light: rgba(220, 38, 38, 0.1);
|
||||
}
|
||||
|
||||
// Enhanced Glass Drawer with Premium Feel
|
||||
.enhanced-glass-drawer {
|
||||
@include enhanced-glass(0.95, 30px);
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
|
||||
background: linear-gradient(135deg,
|
||||
rgba(255, 255, 255, 0.7) 0%,
|
||||
rgba(248, 249, 250, 0.85) 100%) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-right: 1px solid var(--glass-border) !important;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
// Floating Orbs (decorative)
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(40px);
|
||||
pointer-events: none;
|
||||
animation: float 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: 20%;
|
||||
right: -60px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: radial-gradient(circle,
|
||||
rgba(220, 38, 38, 0.06), transparent);
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: 30%;
|
||||
left: -40px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: radial-gradient(circle,
|
||||
rgba(220, 38, 38, 0.04), transparent);
|
||||
animation-delay: 3s;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-section {
|
||||
|
|
@ -439,6 +488,43 @@ watch(width, (newWidth) => {
|
|||
50% { transform: scale(1.1); }
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0) translateX(0);
|
||||
}
|
||||
25% {
|
||||
transform: translateY(-15px) translateX(5px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px) translateX(-5px);
|
||||
}
|
||||
75% {
|
||||
transform: translateY(-5px) translateX(3px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes subtle-pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-dot {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
// Glass Divider
|
||||
.glass-divider {
|
||||
opacity: 0.2;
|
||||
|
|
|
|||
Loading…
Reference in New Issue