matteoscrugli
77980828f5
- Change tab bar to position: fixed for both top and bottom positions - Add padding-top to main-content to account for fixed top bar - Handle sidebar collapsed state and mobile for left positioning - Remove padding-top when bar is at bottom position 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
988 lines
24 KiB
CSS
988 lines
24 KiB
CSS
/* ==========================================
|
|
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;
|
|
min-height: 100dvh;
|
|
background: var(--color-bg-main);
|
|
}
|
|
|
|
/* Main content area - adjusts for sidebar */
|
|
.main-content {
|
|
flex: 1;
|
|
margin-left: var(--sidebar-width);
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: margin-left 0.3s ease;
|
|
padding-top: var(--tabs-bar-height, 72px);
|
|
}
|
|
|
|
/* Adjust main content when sidebar is collapsed */
|
|
.sidebar.collapsed~.main-content {
|
|
margin-left: var(--sidebar-width-collapsed);
|
|
}
|
|
|
|
/* ========== PAGE STRUCTURE ========== */
|
|
|
|
/* Page header container */
|
|
.page-tabs-container,
|
|
.admin-tabs-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 0.75rem;
|
|
position: fixed;
|
|
top: 0;
|
|
left: var(--sidebar-width);
|
|
right: 0;
|
|
z-index: 100;
|
|
background: var(--color-bg-main);
|
|
}
|
|
|
|
/* Adjust tab bar position when sidebar is collapsed */
|
|
[data-sidebar-collapsed='true'] .page-tabs-container,
|
|
[data-sidebar-collapsed='true'] .admin-tabs-container {
|
|
left: var(--sidebar-width-collapsed);
|
|
}
|
|
|
|
/* Ensure no extra margin from body */
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Disable tap highlight on all interactive elements */
|
|
button,
|
|
a,
|
|
input,
|
|
select,
|
|
textarea,
|
|
label,
|
|
[role="button"],
|
|
[tabindex],
|
|
.sidebar,
|
|
.sidebar *,
|
|
.nav-item,
|
|
.order-card,
|
|
.toggle-modern,
|
|
.page-tab-btn,
|
|
.admin-tabs-slider *,
|
|
.page-tabs-slider * {
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
/* 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-card-outline);
|
|
border-radius: var(--radius-xl);
|
|
padding: 4px;
|
|
gap: 4px;
|
|
box-shadow: var(--shadow-md);
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
@supports (color: color-mix(in srgb, black, transparent)) {
|
|
.page-tabs-slider,
|
|
.admin-tabs-slider {
|
|
background: color-mix(in srgb, var(--color-bg-elevated) 75%, transparent);
|
|
backdrop-filter: blur(20px) saturate(1.15);
|
|
}
|
|
}
|
|
|
|
.page-tabs-slider::-webkit-scrollbar,
|
|
.admin-tabs-slider::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.tabs-scroll-shell {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.tabs-scroll-slider {
|
|
cursor: grab;
|
|
overscroll-behavior-x: contain;
|
|
min-width: 0;
|
|
}
|
|
|
|
.tabs-scroll-slider--dragging {
|
|
cursor: grabbing;
|
|
user-select: none;
|
|
}
|
|
|
|
.tabs-scroll-arrow {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 34px;
|
|
height: 34px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--color-border);
|
|
background: var(--color-bg-elevated);
|
|
color: var(--color-text-secondary);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: var(--shadow-md);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease, color 0.2s ease;
|
|
z-index: 2;
|
|
}
|
|
|
|
.tabs-scroll-arrow .material-symbols-outlined {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.tabs-scroll-arrow.visible {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.tabs-scroll-arrow:hover {
|
|
background: var(--color-bg-card);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.tabs-scroll-arrow:active {
|
|
transform: translateY(-50%) scale(0.96);
|
|
}
|
|
|
|
.tabs-scroll-arrow.left {
|
|
left: -12px;
|
|
}
|
|
|
|
.tabs-scroll-arrow.right {
|
|
right: -12px;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.tabs-scroll-slider {
|
|
touch-action: pan-x;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.tabs-scroll-arrow {
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
|
|
.tabs-scroll-arrow.left {
|
|
left: -8px;
|
|
}
|
|
|
|
.tabs-scroll-arrow.right {
|
|
right: -8px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.tabs-scroll-arrow.left {
|
|
left: -6px;
|
|
}
|
|
|
|
.tabs-scroll-arrow.right {
|
|
right: -6px;
|
|
}
|
|
}
|
|
|
|
@supports (color: color-mix(in srgb, black, white)) {
|
|
.page-tabs-slider,
|
|
.admin-tabs-slider {
|
|
background: color-mix(in srgb, var(--color-bg-elevated) 78%, transparent);
|
|
}
|
|
}
|
|
|
|
/* 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.10);
|
|
}
|
|
|
|
.page-tab-btn.active,
|
|
.admin-tab-btn.active {
|
|
background: var(--color-accent);
|
|
color: white;
|
|
box-shadow: 0 4px 12px rgba(var(--color-accent-rgb), 0.25);
|
|
}
|
|
|
|
.page-subtitle {
|
|
margin: 0.5rem 0 0;
|
|
color: var(--color-text-secondary);
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
/* Standard Section Title */
|
|
.section-title {
|
|
margin: 0 0 var(--section-title-gap) 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: var(--section-title-gap);
|
|
}
|
|
|
|
.section-header .section-title {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* 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-color: 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 {
|
|
padding: var(--page-padding-y) var(--page-padding-x);
|
|
width: 100%;
|
|
max-width: var(--page-max-width);
|
|
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: var(--page-max-width);
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
}
|
|
|
|
.page-content--narrow,
|
|
.admin-tab-content--narrow,
|
|
.content-narrow {
|
|
max-width: var(--page-max-width-narrow);
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Remove double padding when theme-tab-content is nested inside admin-tab-content */
|
|
.admin-tab-content .theme-tab-content {
|
|
padding: 0;
|
|
max-width: none;
|
|
}
|
|
|
|
.admin-tab-content .content-narrow {
|
|
max-width: var(--page-max-width-narrow);
|
|
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);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* Tab bar full width on mobile */
|
|
.page-tabs-container,
|
|
.admin-tabs-container {
|
|
left: 0;
|
|
}
|
|
|
|
/* Show mobile menu button with logo */
|
|
.mobile-menu-btn {
|
|
display: flex;
|
|
position: absolute;
|
|
left: 16px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
z-index: 1;
|
|
background-image: url('/logo_black.svg');
|
|
background-size: 28px 28px;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.mobile-menu-btn .material-symbols-outlined {
|
|
display: none;
|
|
}
|
|
|
|
[data-theme='dark'] .mobile-menu-btn {
|
|
background-image: url('/logo_white.svg');
|
|
}
|
|
|
|
.mobile-menu-btn:hover {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.page-tabs-container,
|
|
.admin-tabs-container {
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.page-tabs-slider,
|
|
.admin-tabs-slider {
|
|
width: 100%;
|
|
flex-wrap: nowrap;
|
|
justify-content: flex-start;
|
|
gap: 4px;
|
|
position: relative;
|
|
min-height: 48px;
|
|
}
|
|
|
|
.tabs-scroll-shell {
|
|
width: 100%;
|
|
}
|
|
|
|
.page-title-section,
|
|
.admin-title-section {
|
|
display: flex;
|
|
flex: 1;
|
|
justify-content: flex-start;
|
|
padding: 0.5rem 0.75rem;
|
|
padding-left: 72px;
|
|
font-size: 1rem;
|
|
height: 100%;
|
|
align-items: center;
|
|
}
|
|
|
|
.page-title-section .material-symbols-outlined,
|
|
.admin-title-section .material-symbols-outlined {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.page-title-text,
|
|
.admin-title-text {
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
/* Hide divider on mobile */
|
|
.page-tabs-divider,
|
|
.admin-tabs-divider {
|
|
display: none;
|
|
}
|
|
|
|
/* Hide title section when tabs are present on mobile */
|
|
.page-tabs-slider[data-has-tabs='true'] .page-title-section,
|
|
.page-tabs-slider[data-has-tabs='true'] .admin-title-section,
|
|
.admin-tabs-slider[data-has-tabs='true'] .page-title-section,
|
|
.admin-tabs-slider[data-has-tabs='true'] .admin-title-section {
|
|
display: none;
|
|
}
|
|
|
|
/* Add padding-left when tabs are present to avoid logo overlap */
|
|
.page-tabs-slider[data-has-tabs='true'],
|
|
.admin-tabs-slider[data-has-tabs='true'] {
|
|
padding-left: 72px;
|
|
}
|
|
|
|
/* Center title section absolutely when no tabs are present on mobile */
|
|
.page-tabs-slider[data-has-tabs='false'],
|
|
.admin-tabs-slider[data-has-tabs='false'] {
|
|
justify-content: center;
|
|
}
|
|
|
|
.page-tabs-slider[data-has-tabs='false'] .page-title-section,
|
|
.page-tabs-slider[data-has-tabs='false'] .admin-title-section,
|
|
.admin-tabs-slider[data-has-tabs='false'] .page-title-section,
|
|
.admin-tabs-slider[data-has-tabs='false'] .admin-title-section {
|
|
display: flex;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
padding: 0.5rem 0.75rem;
|
|
flex: none;
|
|
}
|
|
|
|
/* Lighter icon color in dark theme when only title is shown */
|
|
.page-tabs-slider[data-has-tabs='false'] .page-title-section .material-symbols-outlined,
|
|
.page-tabs-slider[data-has-tabs='false'] .admin-title-section .material-symbols-outlined,
|
|
.admin-tabs-slider[data-has-tabs='false'] .page-title-section .material-symbols-outlined,
|
|
.admin-tabs-slider[data-has-tabs='false'] .admin-title-section .material-symbols-outlined {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* Tabs - expand to fill, but scrollable when overflow */
|
|
.page-tab-btn,
|
|
.admin-tab-btn {
|
|
flex: 1 0 auto;
|
|
justify-content: center;
|
|
padding: 0.5rem 0.75rem;
|
|
font-size: 0.9rem;
|
|
min-width: 44px;
|
|
}
|
|
|
|
/* 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: var(--page-padding-y-mobile) var(--page-padding-x-mobile);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
}
|
|
|
|
/* ========== TAB CONTENT ANIMATIONS ========== */
|
|
|
|
/* Prevent layout shift when switching tabs */
|
|
.admin-tab-content:not(.swipe-tabs):not(.swipe-panel-content) {
|
|
display: grid;
|
|
grid-template-rows: 1fr;
|
|
transition: grid-template-rows 0.25s ease;
|
|
}
|
|
|
|
.admin-tab-content:not(.swipe-tabs):not(.swipe-panel-content)>div {
|
|
opacity: 0;
|
|
animation: tabFadeIn 0.25s ease forwards;
|
|
min-height: 0;
|
|
}
|
|
|
|
.admin-tab-swipe {
|
|
width: 100%;
|
|
max-width: none;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Swipeable tab panels */
|
|
.swipe-tabs {
|
|
position: relative;
|
|
background: var(--color-bg-main);
|
|
touch-action: pan-y;
|
|
}
|
|
|
|
.swipe-tabs-track {
|
|
display: flex;
|
|
width: 100%;
|
|
will-change: transform;
|
|
transform: translate3d(0, 0, 0);
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
.swipe-tabs-panel {
|
|
flex: 0 0 100%;
|
|
width: 100%;
|
|
min-height: 1px;
|
|
background: var(--color-bg-main);
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
.swipe-tabs--static {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.swipe-tabs--static .swipe-tabs-panel {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.swipe-tabs--snap {
|
|
overflow: hidden;
|
|
touch-action: pan-y;
|
|
overscroll-behavior-x: contain;
|
|
}
|
|
|
|
.swipe-tabs--snap::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.swipe-tabs--snap .swipe-tabs-panel {
|
|
overflow: hidden;
|
|
contain: paint;
|
|
}
|
|
|
|
.swipe-tabs-panel-inner {
|
|
width: 100%;
|
|
}
|
|
|
|
.swipe-tabs--dragging .swipe-tabs-panel-inner {
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-webkit-touch-callout: none;
|
|
}
|
|
|
|
.admin-tab-content.swipe-tabs {
|
|
display: block;
|
|
}
|
|
|
|
.admin-tab-content.swipe-tabs>div {
|
|
opacity: 1;
|
|
animation: none;
|
|
}
|
|
|
|
.swipe-panel-content {
|
|
display: block;
|
|
}
|
|
|
|
.swipe-panel-content>div {
|
|
opacity: 1;
|
|
animation: none;
|
|
}
|
|
|
|
@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;
|
|
}
|
|
|
|
/* ========== DARK THEME OVERRIDES ========== */
|
|
|
|
/* Top bar in dark mode: match sidebar style exactly */
|
|
[data-theme='dark'] .page-tabs-slider,
|
|
[data-theme='dark'] .admin-tabs-slider {
|
|
background: var(--color-bg-sidebar);
|
|
border: 1px solid var(--color-sidebar-border);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
@supports (color: color-mix(in srgb, black, white)) {
|
|
[data-theme='dark'] .page-tabs-slider,
|
|
[data-theme='dark'] .admin-tabs-slider {
|
|
background: color-mix(in srgb, var(--color-bg-sidebar) 72%, transparent);
|
|
backdrop-filter: blur(24px) saturate(1.2);
|
|
}
|
|
}
|
|
|
|
/* Text colors in dark top bar */
|
|
[data-theme='dark'] .page-title-section,
|
|
[data-theme='dark'] .admin-title-section {
|
|
color: #f1f5f9;
|
|
}
|
|
|
|
[data-theme='dark'] .page-title-text,
|
|
[data-theme='dark'] .admin-title-text {
|
|
color: #f1f5f9;
|
|
}
|
|
|
|
[data-theme='dark'] .page-tab-btn,
|
|
[data-theme='dark'] .admin-tab-btn {
|
|
color: rgba(241, 245, 249, 0.7);
|
|
}
|
|
|
|
[data-theme='dark'] .page-tab-btn:hover:not(.active),
|
|
[data-theme='dark'] .admin-tab-btn:hover:not(.active) {
|
|
color: #f1f5f9;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
[data-theme='dark'] .page-tabs-divider,
|
|
[data-theme='dark'] .admin-tabs-divider {
|
|
background: rgba(255, 255, 255, 0.12);
|
|
}
|
|
|
|
/* ========== DARK THEME + AUTO ACCENT OVERRIDES ========== */
|
|
|
|
/* Tab buttons with auto accent in dark mode: use off-white background with dark text */
|
|
[data-theme='dark'][data-accent='auto'] .page-tab-btn.active,
|
|
[data-theme='dark'][data-accent='auto'] .admin-tab-btn.active {
|
|
background: #e5e7eb;
|
|
color: #111827;
|
|
box-shadow: 0 0 20px 2px rgba(229, 231, 235, 0.4);
|
|
}
|
|
|
|
[data-theme='dark'][data-accent='auto'] .page-tab-btn.active:focus,
|
|
[data-theme='dark'][data-accent='auto'] .admin-tab-btn.active:focus,
|
|
[data-theme='dark'][data-accent='auto'] .page-tab-btn.active:focus-visible,
|
|
[data-theme='dark'][data-accent='auto'] .admin-tab-btn.active:focus-visible {
|
|
box-shadow: 0 0 25px 4px rgba(229, 231, 235, 0.5);
|
|
}
|
|
|
|
/* ========== TAB BAR POSITION ========== */
|
|
|
|
/*
|
|
* Tab bar positioning system:
|
|
* - 'top': default, no changes needed
|
|
* - 'bottom': fixed at bottom on all screens (only when tabs are present)
|
|
* - 'responsive': top on desktop (>768px), bottom on mobile (<=768px)
|
|
*
|
|
* Uses data-has-tabs set by TabsScroller to avoid :has() support issues.
|
|
*/
|
|
|
|
/* Bottom position - fixed at bottom (global setting for all pages) */
|
|
/* Note: Primary positioning is handled by TabsScroller component with inline styles.
|
|
These CSS rules serve as fallback/additional styling. */
|
|
[data-tab-position='bottom'] .page-tabs-container[data-has-tabs='true'],
|
|
[data-tab-position='bottom'] .admin-tabs-container[data-has-tabs='true'] {
|
|
position: fixed;
|
|
top: auto;
|
|
bottom: 0;
|
|
left: var(--sidebar-width);
|
|
right: 0;
|
|
z-index: 100;
|
|
padding: 0.5rem;
|
|
padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
|
|
}
|
|
|
|
/* Handle collapsed sidebar */
|
|
[data-tab-position='bottom'][data-sidebar-collapsed='true'] .page-tabs-container[data-has-tabs='true'],
|
|
[data-tab-position='bottom'][data-sidebar-collapsed='true'] .admin-tabs-container[data-has-tabs='true'] {
|
|
left: var(--sidebar-width-collapsed);
|
|
}
|
|
|
|
/* Adjust slider styling for bottom position */
|
|
[data-tab-position='bottom'] .page-tabs-slider[data-has-tabs='true'],
|
|
[data-tab-position='bottom'] .admin-tabs-slider[data-has-tabs='true'] {
|
|
width: 100%;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
/* Remove top padding when bar is at bottom */
|
|
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] {
|
|
padding-top: 0;
|
|
}
|
|
|
|
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] .page-content,
|
|
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] .admin-tab-swipe {
|
|
padding-top: var(--page-padding-y);
|
|
}
|
|
|
|
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] .page-content,
|
|
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] .admin-tab-swipe,
|
|
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] .admin-tab-content {
|
|
padding-bottom: calc(
|
|
var(--page-padding-y) +
|
|
var(--tabs-bar-height, calc(72px + env(safe-area-inset-bottom, 0px)))
|
|
);
|
|
}
|
|
|
|
/* Mobile: full width at bottom */
|
|
@media (max-width: 768px) {
|
|
[data-tab-position='bottom'] .page-tabs-container[data-has-tabs='true'],
|
|
[data-tab-position='bottom'] .admin-tabs-container[data-has-tabs='true'] {
|
|
left: 0;
|
|
}
|
|
|
|
/* Override collapsed state on mobile */
|
|
[data-tab-position='bottom'][data-sidebar-collapsed='true'] .page-tabs-container[data-has-tabs='true'],
|
|
[data-tab-position='bottom'][data-sidebar-collapsed='true'] .admin-tabs-container[data-has-tabs='true'] {
|
|
left: 0;
|
|
}
|
|
|
|
/* Hide divider on mobile when bar is at bottom */
|
|
[data-tab-position='bottom'] .page-tabs-slider[data-has-tabs='true'] .page-tabs-divider,
|
|
[data-tab-position='bottom'] .page-tabs-slider[data-has-tabs='true'] .admin-tabs-divider,
|
|
[data-tab-position='bottom'] .admin-tabs-slider[data-has-tabs='true'] .page-tabs-divider,
|
|
[data-tab-position='bottom'] .admin-tabs-slider[data-has-tabs='true'] .admin-tabs-divider {
|
|
display: none;
|
|
}
|
|
|
|
/* Mobile padding for bottom position */
|
|
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] .page-content,
|
|
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] .admin-tab-swipe {
|
|
padding-top: var(--page-padding-y-mobile);
|
|
}
|
|
|
|
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] .page-content,
|
|
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] .admin-tab-swipe,
|
|
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] .admin-tab-content {
|
|
padding-bottom: calc(
|
|
var(--page-padding-y-mobile) +
|
|
var(--tabs-bar-height, calc(72px + env(safe-area-inset-bottom, 0px)))
|
|
);
|
|
}
|
|
}
|
|
|
|
/* Responsive position - top on desktop, bottom on mobile */
|
|
@media (max-width: 768px) {
|
|
[data-tab-position='responsive'] .page-tabs-container[data-has-tabs='true'],
|
|
[data-tab-position='responsive'] .admin-tabs-container[data-has-tabs='true'] {
|
|
position: fixed;
|
|
top: auto;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
padding: 0.5rem;
|
|
padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
|
|
}
|
|
|
|
[data-tab-position='responsive'] .page-tabs-slider[data-has-tabs='true'],
|
|
[data-tab-position='responsive'] .admin-tabs-slider[data-has-tabs='true'] {
|
|
width: 100%;
|
|
justify-content: flex-start;
|
|
/* padding-left: 72px inherited from mobile rules for menu button spacing */
|
|
}
|
|
|
|
/* Hide title section when bar is at bottom (only on pages with tabs) */
|
|
[data-tab-position='responsive'] .page-tabs-slider[data-has-tabs='true'] .page-title-section,
|
|
[data-tab-position='responsive'] .page-tabs-slider[data-has-tabs='true'] .admin-title-section,
|
|
[data-tab-position='responsive'] .admin-tabs-slider[data-has-tabs='true'] .page-title-section,
|
|
[data-tab-position='responsive'] .admin-tabs-slider[data-has-tabs='true'] .admin-title-section {
|
|
display: none;
|
|
}
|
|
|
|
/* Hide divider when bar is at bottom */
|
|
[data-tab-position='responsive'] .page-tabs-slider[data-has-tabs='true'] .page-tabs-divider,
|
|
[data-tab-position='responsive'] .page-tabs-slider[data-has-tabs='true'] .admin-tabs-divider,
|
|
[data-tab-position='responsive'] .admin-tabs-slider[data-has-tabs='true'] .page-tabs-divider,
|
|
[data-tab-position='responsive'] .admin-tabs-slider[data-has-tabs='true'] .admin-tabs-divider {
|
|
display: none;
|
|
}
|
|
|
|
/* Remove top padding when bar is at bottom */
|
|
[data-tab-position='responsive'] .main-content[data-has-tabs='true'] {
|
|
padding-top: 0;
|
|
}
|
|
|
|
[data-tab-position='responsive'] .main-content[data-has-tabs='true'] .page-content,
|
|
[data-tab-position='responsive'] .main-content[data-has-tabs='true'] .admin-tab-swipe {
|
|
padding-top: var(--page-padding-y-mobile);
|
|
}
|
|
|
|
[data-tab-position='responsive'] .main-content[data-has-tabs='true'] .page-content,
|
|
[data-tab-position='responsive'] .main-content[data-has-tabs='true'] .admin-tab-swipe,
|
|
[data-tab-position='responsive'] .main-content[data-has-tabs='true'] .admin-tab-content {
|
|
padding-bottom: calc(
|
|
var(--page-padding-y-mobile) +
|
|
var(--tabs-bar-height, calc(72px + env(safe-area-inset-bottom, 0px)))
|
|
);
|
|
}
|
|
}
|