init
This commit is contained in:
301
src/components/common/Layout/Layout.css
Normal file
301
src/components/common/Layout/Layout.css
Normal file
@@ -0,0 +1,301 @@
|
||||
/* Layout Component - Premium Glassmorphism Style */
|
||||
|
||||
.app-layout {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* Background is managed by the theme system */
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* App Header Styles */
|
||||
.app-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 var(--spacing-xl);
|
||||
/* Increased horizontal padding */
|
||||
|
||||
/* Glassmorphism Header */
|
||||
/* Glassmorphism Header */
|
||||
background: var(--glass-panel-bg);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.02);
|
||||
/* Very subtle border */
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.02);
|
||||
/* Ultra soft shadow */
|
||||
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
height: 70px;
|
||||
/* Taller header */
|
||||
box-sizing: border-box;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Brand Section Wrapper */
|
||||
.brand-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* Brand Logo (Independent Icon) */
|
||||
.brand-logo {
|
||||
flex-shrink: 0;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
.brand-logo-inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* Dynamic Gradient based on accent color */
|
||||
background: linear-gradient(135deg, var(--accent-primary-hover) 0%, var(--accent-secondary) 100%);
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
/* Dynamic Shadow */
|
||||
box-shadow: 0 4px 12px var(--shadow-color);
|
||||
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M5 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-4.5a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5V10a.5.5 0 0 1 .5-.5h4.5a.5.5 0 0 0 .5-.5V5a2 2 0 0 0-2-2H5Zm10 12v3h3v-3h-3ZM9 7h6v2H9V7Zm0 4h3v6H9v-6Z'/%3E%3C/svg%3E") no-repeat center / contain;
|
||||
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M5 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-4.5a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5V10a.5.5 0 0 1 .5-.5h4.5a.5.5 0 0 0 .5-.5V5a2 2 0 0 0-2-2H5Zm10 12v3h3v-3h-3ZM9 7h6v2H9V7Zm0 4h3v6H9v-6Z'/%3E%3C/svg%3E") no-repeat center / contain;
|
||||
}
|
||||
|
||||
/* Hover Effect: 3D Rotation */
|
||||
.brand-logo:hover .brand-logo-inner {
|
||||
transform: rotateY(180deg);
|
||||
/* NEW HOVER SHADOW */
|
||||
box-shadow: 0 8px 20px var(--shadow-color);
|
||||
}
|
||||
|
||||
/* Brand Text Column */
|
||||
.brand-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.app-header h1 {
|
||||
font-family: 'Outfit', sans-serif;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 800;
|
||||
margin: 0;
|
||||
line-height: 1.1;
|
||||
/* NEW GRADIENT TEXT */
|
||||
background: linear-gradient(135deg, var(--accent-primary-hover) 0%, var(--accent-primary) 50%, var(--accent-secondary) 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: var(--accent-primary);
|
||||
letter-spacing: -0.5px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Remove old pseudo-element logo */
|
||||
.app-header h1::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.brand-slogan {
|
||||
margin: 0;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
letter-spacing: 0.2px;
|
||||
white-space: nowrap;
|
||||
opacity: 0.8;
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.brand-wrapper:hover .brand-slogan {
|
||||
color: var(--accent-primary);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.brand-slogan {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Initial State for Actions (Right Side) */
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
/* More space between buttons */
|
||||
}
|
||||
|
||||
/* Common Header Button Styles */
|
||||
/* Common Header Button Styles */
|
||||
.theme-toggle,
|
||||
.header-profile-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
/* Larger targets */
|
||||
height: 44px;
|
||||
background: transparent;
|
||||
/* Clean default state */
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
/* Softer rounded corners */
|
||||
cursor: pointer;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
color: var(--text-tertiary);
|
||||
/* Muted color by default */
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
/* Subtle primary tint on hover */
|
||||
color: var(--primary-color);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.header-profile-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.theme-toggle:active,
|
||||
.header-profile-btn:active {
|
||||
transform: translateY(0) scale(0.95);
|
||||
}
|
||||
|
||||
/* Avatar Styles */
|
||||
.header-avatar-img {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.header-profile-btn:hover .header-avatar-img {
|
||||
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
|
||||
border-color: var(--primary-light);
|
||||
}
|
||||
|
||||
.header-avatar-placeholder {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #e0e7ff 0%, #f3e8ff 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--primary-color);
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.header-profile-btn:hover .header-avatar-placeholder {
|
||||
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
|
||||
background: linear-gradient(135deg, #c7d2fe 0%, #e9d5ff 100%);
|
||||
}
|
||||
|
||||
.header-avatar-initial {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Theme Icons */
|
||||
.theme-icon {
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.theme-icon.sun {
|
||||
color: #f59e0b;
|
||||
/* Amber */
|
||||
}
|
||||
|
||||
.theme-icon.moon {
|
||||
color: #6366f1;
|
||||
/* Indigo */
|
||||
}
|
||||
|
||||
/* App Body - Flex container for nav and main */
|
||||
.app-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
/* Allow flex children to scroll */
|
||||
}
|
||||
|
||||
.app-main {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--spacing-md);
|
||||
padding-bottom: calc(80px + var(--spacing-md));
|
||||
/* Space for mobile nav */
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Desktop/Tablet - Side by side layout */
|
||||
@media (min-width: 768px) {
|
||||
.app-body {
|
||||
flex-direction: row;
|
||||
height: calc(100vh - 64px);
|
||||
/* Full height minus header */
|
||||
overflow: hidden;
|
||||
/* Prevent body scroll, force main to scroll */
|
||||
}
|
||||
|
||||
.app-main {
|
||||
flex: 1;
|
||||
padding: var(--spacing-lg);
|
||||
padding-bottom: var(--spacing-lg);
|
||||
overflow-y: auto;
|
||||
/* Internal scrolling */
|
||||
height: 100%;
|
||||
/* Ensure it takes full height of parent */
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.app-main {
|
||||
padding: var(--spacing-xl);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.app-main {
|
||||
padding: var(--spacing-xl);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) {
|
||||
.app-main {
|
||||
max-width: 1920px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduced motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
.app-main,
|
||||
.theme-toggle,
|
||||
.app-header {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user