Initial commit
This commit is contained in:
431
frontend/src/styles/Layout.css
Normal file
431
frontend/src/styles/Layout.css
Normal file
@@ -0,0 +1,431 @@
|
||||
/* ==========================================
|
||||
UNIFIED PAGE LAYOUT SYSTEM
|
||||
Standard layout classes for all pages
|
||||
========================================== */
|
||||
|
||||
/* ========== BASE LAYOUT ========== */
|
||||
|
||||
/* App container - contains sidebar and main content */
|
||||
.app-layout {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
background: var(--color-bg-main);
|
||||
}
|
||||
|
||||
/* Main content area - adjusts for sidebar */
|
||||
.main-content {
|
||||
flex: 1;
|
||||
margin-left: var(--sidebar-width);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: margin-left 0.3s ease;
|
||||
}
|
||||
|
||||
/* Adjust main content when sidebar is collapsed */
|
||||
.sidebar.collapsed~.main-content {
|
||||
margin-left: var(--sidebar-width-collapsed);
|
||||
}
|
||||
|
||||
/* ========== PAGE STRUCTURE ========== */
|
||||
|
||||
/* Page header container - centered with symmetric padding */
|
||||
.page-tabs-container,
|
||||
.admin-tabs-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0.75rem var(--page-padding-x);
|
||||
background: var(--color-bg-main);
|
||||
}
|
||||
|
||||
/* Page header slider - rounded pill style (like admin panel) */
|
||||
.page-tabs-slider,
|
||||
.admin-tabs-slider {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 4px;
|
||||
gap: 4px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Page title section inside slider */
|
||||
.page-title-section,
|
||||
.admin-title-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1.25rem;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.page-title-section .material-symbols-outlined,
|
||||
.admin-title-section .material-symbols-outlined {
|
||||
font-size: 1.25rem;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.page-title-text,
|
||||
.admin-title-text {
|
||||
color: var(--color-text-primary);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* Divider between title and tabs (for pages with tabs) */
|
||||
.page-tabs-divider,
|
||||
.admin-tabs-divider {
|
||||
width: 1px;
|
||||
height: 32px;
|
||||
background: var(--color-border);
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
|
||||
/* Tab buttons (for pages with tabs) */
|
||||
.page-tab-btn,
|
||||
.admin-tab-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: var(--tab-padding);
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: var(--radius-lg);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--tab-font-size);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
white-space: nowrap;
|
||||
outline: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.page-tab-btn:focus,
|
||||
.admin-tab-btn:focus,
|
||||
.page-tab-btn:focus-visible,
|
||||
.admin-tab-btn:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.page-tab-btn.active:focus,
|
||||
.admin-tab-btn.active:focus,
|
||||
.page-tab-btn.active:focus-visible,
|
||||
.admin-tab-btn.active:focus-visible {
|
||||
box-shadow: 0 2px 8px rgba(var(--color-accent-rgb), 0.3);
|
||||
}
|
||||
|
||||
.page-tab-btn .material-symbols-outlined,
|
||||
.admin-tab-btn .material-symbols-outlined {
|
||||
font-size: var(--icon-md);
|
||||
transition: inherit;
|
||||
}
|
||||
|
||||
.page-tab-btn:hover:not(.active),
|
||||
.admin-tab-btn:hover:not(.active) {
|
||||
color: var(--color-text-primary);
|
||||
background: rgba(var(--color-accent-rgb), 0.1);
|
||||
}
|
||||
|
||||
.page-tab-btn.active,
|
||||
.admin-tab-btn.active {
|
||||
background: var(--color-accent);
|
||||
color: white;
|
||||
box-shadow: 0 2px 8px rgba(var(--color-accent-rgb), 0.3);
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
margin: 0.5rem 0 0;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* Standard Section Title */
|
||||
.section-title {
|
||||
margin: 0;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* Standard Section Header */
|
||||
.section-header {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
/* Standard Page Section */
|
||||
.page-section {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.page-section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ========== MOBILE MENU BUTTON ========== */
|
||||
|
||||
/* Hidden by default on desktop */
|
||||
.mobile-menu-btn {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: var(--radius-lg);
|
||||
color: var(--color-text-primary);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mobile-menu-btn:hover {
|
||||
background: rgba(var(--color-accent-rgb), 0.1);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.mobile-menu-btn .material-symbols-outlined {
|
||||
font-size: var(--icon-lg);
|
||||
}
|
||||
|
||||
/* ========== ACTION BUTTONS IN SLIDER ========== */
|
||||
|
||||
/* Action buttons that appear in the slider (like Add User) */
|
||||
.page-tabs-slider .btn-primary,
|
||||
.admin-tabs-slider .btn-primary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
margin-left: auto;
|
||||
font-size: 0.9rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.page-tabs-slider .btn-primary .material-symbols-outlined,
|
||||
.admin-tabs-slider .btn-primary .material-symbols-outlined {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* ========== PAGE CONTENT ========== */
|
||||
|
||||
/* Main content wrapper - with symmetric padding from sidebar edge to window edge */
|
||||
.page-content {
|
||||
flex: 1;
|
||||
padding: var(--page-padding-y) var(--page-padding-x);
|
||||
width: 100%;
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Content wrapper for centered content with max-width (use inside page-content if needed) */
|
||||
.content-wrapper {
|
||||
max-width: var(--page-max-width);
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Admin tab content (for tabbed interfaces) */
|
||||
.admin-tab-content {
|
||||
padding: var(--page-padding-y) var(--page-padding-x);
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ========== RESPONSIVE DESIGN ========== */
|
||||
|
||||
/* Tablet - reduce padding */
|
||||
@media (max-width: 1024px) {
|
||||
|
||||
.page-tabs-container,
|
||||
.admin-tabs-container {
|
||||
padding: var(--page-padding-y-tablet) var(--page-padding-x-tablet);
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: var(--page-padding-y-tablet) var(--page-padding-x-tablet);
|
||||
}
|
||||
|
||||
.admin-tab-content {
|
||||
padding: var(--page-padding-y-tablet) var(--page-padding-x-tablet);
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile - remove sidebar margin */
|
||||
@media (max-width: 768px) {
|
||||
.main-content {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* Override collapsed state margin on mobile */
|
||||
.sidebar.collapsed~.main-content {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* Show mobile menu button */
|
||||
.mobile-menu-btn {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.page-tabs-container,
|
||||
.admin-tabs-container {
|
||||
padding: var(--page-padding-y-mobile) var(--page-padding-x-mobile);
|
||||
}
|
||||
|
||||
.page-tabs-slider,
|
||||
.admin-tabs-slider {
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.page-title-section,
|
||||
.admin-title-section {
|
||||
flex: 1;
|
||||
justify-content: flex-start;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.page-title-section .material-symbols-outlined,
|
||||
.admin-title-section .material-symbols-outlined {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
/* Hide divider on mobile */
|
||||
.page-tabs-divider,
|
||||
.admin-tabs-divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Tabs on second row - full width */
|
||||
.page-tab-btn,
|
||||
.admin-tab-btn {
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 0.9rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Hide text on mobile, show only icons */
|
||||
.page-tab-btn span:not(.material-symbols-outlined),
|
||||
.admin-tab-btn span:not(.material-symbols-outlined) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page-tab-btn .material-symbols-outlined,
|
||||
.admin-tab-btn .material-symbols-outlined {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
/* Action buttons in slider - icon only on mobile */
|
||||
.page-tabs-slider .btn-primary,
|
||||
.admin-tabs-slider .btn-primary {
|
||||
padding: 0.5rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.page-tabs-slider .btn-primary span:not(.material-symbols-outlined),
|
||||
.admin-tabs-slider .btn-primary span:not(.material-symbols-outlined) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: var(--page-padding-y-mobile) var(--page-padding-x-mobile);
|
||||
}
|
||||
|
||||
.admin-tab-content {
|
||||
padding: var(--page-padding-y-mobile) var(--page-padding-x-mobile);
|
||||
}
|
||||
}
|
||||
|
||||
/* Small mobile - further reduce spacing */
|
||||
@media (max-width: 480px) {
|
||||
|
||||
.page-tabs-container,
|
||||
.admin-tabs-container {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.admin-tab-content {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== TAB CONTENT ANIMATIONS ========== */
|
||||
|
||||
/* Prevent layout shift when switching tabs */
|
||||
.admin-tab-content {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
transition: grid-template-rows 0.25s ease;
|
||||
}
|
||||
|
||||
.admin-tab-content>div {
|
||||
opacity: 0;
|
||||
animation: tabFadeIn 0.25s ease forwards;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
@keyframes tabFadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== UTILITY COMPONENTS ========== */
|
||||
|
||||
/* Tab Content Placeholder (for "coming soon" pages) */
|
||||
.tab-content-placeholder {
|
||||
text-align: center;
|
||||
padding: 4rem 2rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.tab-content-placeholder .placeholder-icon {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.tab-content-placeholder .placeholder-icon .material-symbols-outlined {
|
||||
font-size: 80px;
|
||||
color: var(--color-accent);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.tab-content-placeholder h3 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.tab-content-placeholder p {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
Reference in New Issue
Block a user