@qwickapps/react-framework 1.3.4 → 1.4.0

package/src/components/pages/Page.css

@@ -1,26 +1,55 @@
 /**
- * Page Component Styles
+ * Page Component Styles - Clean Architecture
  * 
- * Styles for the main page component with various layout options
- * and responsive behavior.
+ * Separation of concerns:
+ * - Normal view: Only content styling, no print assumptions
+ * - Print view: Clean print defaults with CSS variable-driven customization
+ * - No hardcoded colors, margins, or paddings
  */
 
+/* =================== CSS VARIABLE DEFAULTS =================== */
+
 .page {
+  /* Normal view variables - theme-based */
+  --page-background: var(--theme-surface, #ffffff);
+  --page-text-color: var(--theme-on-surface, #000000);
+  
+  /* Padding system - no hardcoded values */
   --page-padding-none: 0;
-  --page-padding-small: 1rem;
-  --page-padding-medium: 1.5rem;
-  --page-padding-large: 2rem;
+  --page-padding-small: var(--theme-spacing-small, 1rem);
+  --page-padding-medium: var(--theme-spacing-medium, 1.5rem);
+  --page-padding-large: var(--theme-spacing-large, 2rem);
+  
+  /* Print variables - configurable defaults */
+  --print-page-size: A4;
+  --print-page-margins: 12mm; /* Standard default */
+  --print-background: transparent;
+  --print-background-first-page: var(--print-background, transparent);
+  --print-header-height: 0px; /* No header by default */
+  --print-footer-height: 0px; /* No footer by default */
   
+  /* Base page setup */
   min-height: 100%;
   width: 100%;
+  background: var(--page-background);
+  color: var(--page-text-color);
 }
 
-/* =================== PAGE VARIANTS =================== */
+/* =================== NORMAL VIEW - CONTENT ONLY =================== */
 
-.page-variant-default {
-  /* Standard page layout */
+.page-content {
+  /* Content has no default margin/padding - completely controlled by props */
+  margin: 0;
+  padding: 0;
+  background: transparent; /* Never assume background - inherit from page or theme */
+  color: inherit;
+  line-height: var(--theme-line-height, 1.6);
+  overflow-y: auto;
 }
 
+/* =================== PAGE VARIANTS (NORMAL VIEW) =================== */
+
+
 .page-variant-centered {
   display: flex;
   flex-direction: column;
@@ -29,12 +58,12 @@
 }
 
 .page-variant-narrow {
-  max-width: 600px;
+  max-width: var(--page-max-width-narrow, 600px);
   margin: 0 auto;
 }
 
 .page-variant-wide {
-  max-width: 1400px;
+  max-width: var(--page-max-width-wide, 1400px);
   margin: 0 auto;
 }
 
@@ -43,7 +72,7 @@
   width: 100%;
 }
 
-/* =================== PADDING =================== */
+/* =================== PADDING (CONFIGURABLE) =================== */
 
 .page-padding-none {
   padding: var(--page-padding-none);
@@ -61,7 +90,7 @@
   padding: var(--page-padding-large);
 }
 
-/* =================== BACKGROUND =================== */
+/* =================== BACKGROUND (THEME-BASED) =================== */
 
 .page-background-default {
   background: transparent;
@@ -75,28 +104,28 @@
   background: var(--theme-surface-variant);
 }
 
-/* =================== MAX WIDTH =================== */
+/* =================== MAX WIDTH (CONFIGURABLE) =================== */
 
 .page-max-width-small {
-  max-width: 600px;
+  max-width: var(--page-max-width-small, 600px);
   margin-left: auto;
   margin-right: auto;
 }
 
 .page-max-width-medium {
-  max-width: 800px;
+  max-width: var(--page-max-width-medium, 800px);
   margin-left: auto;
   margin-right: auto;
 }
 
 .page-max-width-large {
-  max-width: 1200px;
+  max-width: var(--page-max-width-large, 1200px);
   margin-left: auto;
   margin-right: auto;
 }
 
 .page-max-width-extra-large {
-  max-width: 1400px;
+  max-width: var(--page-max-width-extra-large, 1400px);
   margin-left: auto;
   margin-right: auto;
 }
@@ -105,356 +134,299 @@
   max-width: none;
 }
 
-/* =================== PAGE HEADER & FOOTER =================== */
-
-.page-header {
-  margin-bottom: 1.5rem;
-}
-
-.page-footer {
-  margin-top: 1.5rem;
-}
-
-.page-title {
-  font-size: clamp(1.75rem, 4vw, 2.5rem);
-  font-weight: 600;
-  line-height: 1.2;
-  margin: 0;
-  color: var(--theme-on-background);
-  flex: 1;
-  transition: font-size 0.3s ease, font-weight 0.3s ease, margin 0.3s ease;
-}
-
-/* Title shrinking on scroll */
-.page-title-collapsed .page-title {
-  font-size: clamp(1.25rem, 3vw, 1.75rem);
-  font-weight: 500;
-  margin-bottom: 0.5rem;
-}
-
-.page-title-collapsed .page-header {
-  margin-bottom: 1rem;
-}
-
-.page-header-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-}
-
-/* =================== PAGE CONTENT =================== */
-
-.page-content {
-  color: var(--theme-on-background);
-  line-height: 1.6;
-  overflow-y: auto;
-  max-height: calc(100vh - var(--page-header-height, 200px));
-}
-
-/* =================== LOADING STATE =================== */
-
-.page-loading {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 200px;
-  text-align: center;
-  color: var(--theme-on-background);
-  gap: 1rem;
-}
-
-.loading-spinner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.spinner {
-  width: 40px;
-  height: 40px;
-  border: 3px solid var(--theme-outline-variant);
-  border-top: 3px solid var(--theme-primary);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-/* Loading Bar Variants */
-.page-loading-bar {
-  position: relative;
-  width: 100%;
-  height: 4px;
-  background: var(--theme-outline-variant);
-  overflow: hidden;
-}
-
-.page-loading-bar-top {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-}
+/* =================== PRINT STYLES - CLEAN DEFAULTS =================== */
 
-.page-loading-bar-bottom {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-
-.loading-bar-progress {
-  height: 100%;
-  background: linear-gradient(90deg, var(--theme-primary), var(--theme-secondary));
-  width: 30%;
-  animation: loading-bar-slide 2s ease-in-out infinite;
-}
-
-@keyframes loading-bar-slide {
-  0% { transform: translateX(-100%); }
-  50% { transform: translateX(350%); }
-  100% { transform: translateX(-100%); }
-}
-
-/* Loading Dots */
-.page-loading-dots {
-  min-height: 120px;
-}
-
-.loading-dots {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.loading-dots span {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--theme-primary);
-  animation: loading-dots-bounce 1.4s ease-in-out infinite both;
-}
-
-.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
-.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
-
-@keyframes loading-dots-bounce {
-  0%, 80%, 100% { 
-    transform: scale(0);
-    opacity: 0.5;
+@media print {
+  /* Default @page - use standard margins */
+  @page {
+    size: A4;
+    margin: 12mm;
   }
-  40% { 
-    transform: scale(1);
-    opacity: 1;
+  
+  /* Zero margins for borderless/edge-to-edge printing */
+  .page-print-mode.page-print-borderless {
+    @page {
+      margin: 0mm;
+    }
   }
-}
-
-.loading-message {
-  margin-top: 1rem;
-  font-size: 0.875rem;
-  color: var(--theme-on-background);
-  opacity: 0.8;
-}
-
-/* =================== MESSAGE STATE =================== */
-
-.page-message {
-  display: flex;
-  align-items: flex-start;
-  gap: 1rem;
-  padding: 1rem 1.5rem;
-  margin: 1rem 0;
-  border-radius: var(--theme-border-radius, 8px);
-  border-left: 4px solid;
-  color: var(--theme-on-background);
-  background: var(--theme-surface-variant);
-}
-
-.page-message-error {
-  border-left-color: var(--theme-error, #dc2626);
-  background: rgba(220, 38, 38, 0.05);
-  color: var(--theme-error, #dc2626);
-}
-
-.page-message-warning {
-  border-left-color: var(--theme-warning, #f59e0b);
-  background: rgba(245, 158, 11, 0.05);
-  color: var(--theme-warning, #f59e0b);
-}
-
-.page-message-success {
-  border-left-color: var(--theme-success, #10b981);
-  background: rgba(16, 185, 129, 0.05);
-  color: var(--theme-success, #10b981);
-}
-
-.page-message-info {
-  border-left-color: var(--theme-info, #3b82f6);
-  background: rgba(59, 130, 246, 0.05);
-  color: var(--theme-info, #3b82f6);
-}
-
-.page-message-loading {
-  border-left-color: var(--theme-primary);
-  background: rgba(var(--theme-primary-rgb, 59, 130, 246), 0.05);
-  color: var(--theme-primary);
-}
-
-.message-icon {
-  font-size: 1.5rem;
-  flex-shrink: 0;
-  margin-top: 0.125rem;
-}
-
-.message-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.message-content p {
-  margin: 0;
-  font-size: 0.875rem;
-  line-height: 1.5;
-}
-
-.message-content h3 {
-  margin: 0 0 0.5rem 0;
-  font-size: 1rem;
-  font-weight: 600;
-}
-
-/* Message variants for different contexts */
-.page-message.message-compact {
-  padding: 0.75rem 1rem;
-  margin: 0.5rem 0;
-}
-
-.page-message.message-prominent {
-  padding: 1.5rem 2rem;
-  margin: 1.5rem 0;
-  text-align: center;
-  flex-direction: column;
-  min-height: 200px;
-  justify-content: center;
-}
-
-.page-message.message-prominent .message-icon {
-  font-size: 3rem;
-  margin: 0 auto 1rem;
-}
-
-.page-message.message-prominent .message-content {
-  text-align: center;
-}
-
-/* =================== RESPONSIVE ADJUSTMENTS =================== */
-
-@media (max-width: 768px) {
-  .page-header {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 1rem;
+  
+  /* Page margin variants with explicit values (CSS variables don't work reliably in @page) */
+  .page-print-mode.page-print-compact:not(.page-print-borderless) {
+    @page {
+      margin: 6mm;
+    }
   }
   
-  .page-title {
-    font-size: clamp(1.5rem, 6vw, 2rem);
+  .page-print-mode.page-print-large:not(.page-print-borderless) {
+    @page {
+      margin: 20mm;
+    }
   }
   
-  .page-header-actions {
-    justify-content: flex-start;
+  .page-print-mode.page-print-formal:not(.page-print-borderless) {
+    @page {
+      margin: 25mm;
+    }
   }
   
-  .page-padding-medium {
-    padding: var(--page-padding-small);
+  /* Base print page setup */
+  .page-print-mode {
+    /* Clean print defaults */
+    background: var(--print-background, transparent);
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+    width: 100vw;
+    max-width: none !important;
+    box-sizing: border-box;
+    overflow: visible;
+    
+    /* Ensure colors print */
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
   }
   
-  .page-padding-large {
-    padding: var(--page-padding-medium);
+  /* Edge-to-edge background support */
+  .page-print-mode.has-background::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--print-background, transparent);
+    background-size: var(--print-background-size, cover);
+    background-position: var(--print-background-position, center);
+    background-repeat: var(--print-background-repeat, no-repeat);
+    z-index: -1;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
   }
   
-  /* Adjust max widths on mobile */
-  .page-max-width-small,
-  .page-max-width-medium,
-  .page-max-width-large,
-  .page-max-width-extra-large {
-    margin-left: 1rem;
-    margin-right: 1rem;
-    max-width: calc(100% - 2rem);
+  /* First page background override */
+  .page-print-mode.has-background:first-child::before {
+    background: var(--print-background-first-page, var(--print-background, transparent));
   }
-}
-
-@media (max-width: 480px) {
-  .page-header-actions {
-    width: 100%;
-    justify-content: stretch;
+  
+  /* =================== HEADERS AND FOOTERS - OPTIONAL =================== */
+  
+  /* Headers - positioned at page top */
+  .page-print-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
     
-    > * {
-      flex: 1;
-      min-width: 0;
-    }
+    /* Completely configurable dimensions */
+    height: var(--print-header-height, 0px);
+    min-height: var(--print-header-height, 0px);
+    max-height: var(--print-header-height, 0px);
+    
+    /* Headers/footers positioned at true edges - no margin/padding */
+    margin: 0;
+    padding: 0;
+    background: var(--print-header-background, transparent);
+    
+    /* Overflow handling */
+    overflow: var(--print-header-overflow, hidden);
+    box-sizing: border-box;
+    
+    /* Layout - configurable */
+    display: var(--print-header-display, flex);
+    align-items: var(--print-header-align-items, center);
+    justify-content: var(--print-header-justify-content, flex-start);
+  }
+  
+  /* First-page-only placeholder containers are hidden by default; app can override */
+  .page-print-header-first-page,
+  .page-print-footer-first-page {
+    display: none !important;
   }
   
-  .retry-button {
+  /* Footers - positioned at page bottom */
+  .page-print-footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    
+    /* Completely configurable dimensions */
+    height: var(--print-footer-height, 0px);
+    min-height: var(--print-footer-height, 0px);
+    max-height: var(--print-footer-height, 0px);
+    
+    /* Headers/footers positioned at true edges - no margin/padding */
+    margin: 0;
+    padding: 0;
+    background: var(--print-footer-background, transparent);
+    
+    /* Overflow handling */
+    overflow: var(--print-footer-overflow, hidden);
+    box-sizing: border-box;
+    
+    /* Layout - configurable */
+    display: var(--print-footer-display, flex);
+    align-items: var(--print-footer-align-items, center);
+    justify-content: var(--print-footer-justify-content, center);
+  }
+  
+  /* Ensure header/footer content respects dimensions */
+  .page-print-header *,
+  .page-print-footer * {
+    box-sizing: border-box;
+    max-height: 100%;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+  
+  /* =================== CONTENT MARGINS - DYNAMIC =================== */
+  
+  .page-print-mode .page-content {
+    /* Use box-sizing to ensure consistent behavior across all pages */
+    box-sizing: border-box !important;
+    
+    /* Offset content for header/footer */
+    margin: 0 !important;
+    padding: 0 !important;
+    
+    /* Add a repeatable top gap for header and bottom gap for footer per fragmented page */
+    padding-top: var(--print-header-height, 0) !important;
+    padding-bottom: var(--print-footer-height, 0) !important;
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+    
+    /* Content has transparent background */
+    background: transparent !important;
+    
+    /* Allow content to flow across pages */
+    overflow: visible;
     width: 100%;
-    max-width: 300px;
+    
+    /* Remove any debug outlines in print */
+    outline: none !important;
   }
-}
-
-/* =================== HIGH CONTRAST MODE =================== */
-
-@media (prefers-contrast: high) {
-  .page-title {
-    font-weight: 700;
+  
+  /* Force all child elements to respect parent margins */
+  .page-print-mode .page-content * {
+    position: relative !important;
   }
   
-  .spinner {
-    border-width: 4px;
+  /* Ensure no child element has negative margins that could cause bleed */
+  .page-print-mode .page-content > * {
+    margin-top: 0 !important;
   }
   
-  .retry-button {
-    border: 2px solid var(--theme-on-primary);
+  /* Content positioning is handled above */
+  
+  /* =================== CLEAN PRINT OVERRIDES =================== */
+  
+  /* Remove interactive elements */
+  .page-print-mode .page-header-actions,
+  .page-print-mode button:not(.page-print-header button):not(.page-print-footer button),
+  .page-print-mode .page-loading,
+  .page-print-mode .page-error,
+  .page-print-mode [data-print-hide="true"] {
+    display: none !important;
   }
-}
-
-/* =================== REDUCED MOTION =================== */
-
-@media (prefers-reduced-motion: reduce) {
-  .spinner {
-    animation: none;
+  
+  /* Remove app-level elements */
+  .page-print-mode ~ .app-footer,
+  .page-print-mode ~ footer,
+  .page-print-mode ~ [data-testid="footer"] {
+    display: none !important;
+  }
+  
+  /* Clean link styles */
+  .page-print-mode a {
+    text-decoration: none;
+    color: inherit;
+  }
+  
+  /* Ensure all content prints with colors */
+  .page-print-mode,
+  .page-print-mode * {
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+  
+  /* Better page break handling */
+  .page-print-mode * {
+    box-sizing: border-box;
+  }
+  
+  /* Allow controlled page breaking */
+  .page-break-before {
+    page-break-before: always;
+    break-before: page;
+  }
+  
+  .page-break-after {
+    page-break-after: always;
+    break-after: page;
   }
   
-  .retry-button {
-    transition: none;
+  .page-break-inside-avoid {
+    page-break-inside: avoid;
+    break-inside: avoid;
   }
   
-  .retry-button:hover {
-    transform: none;
+  .page-break-inside-auto {
+    page-break-inside: auto;
+    break-inside: auto;
+  }
+  
+  /* Additional content flow control for page breaks */
+  .page-print-mode .page-content::before {
+    content: '';
+    display: block;
+  }
+  
+  /* Additional content flow control for page breaks */
+  .page-print-mode .page-content::after {
+    content: '';
+    display: block;
   }
 }
 
-/* =================== PRINT STYLES =================== */
+/* =================== RESPONSIVE ADJUSTMENTS (NORMAL VIEW ONLY) =================== */
 
-@media print {
-  .page-header-actions {
-    display: none;
+@media screen and (max-width: 768px) {
+  .page-padding-medium {
+    padding: var(--page-padding-small);
   }
   
-  .page-loading,
-  .page-error {
-    display: none;
+  .page-padding-large {
+    padding: var(--page-padding-medium);
   }
   
-  .page-title {
-    color: black;
-    font-size: 1.5rem;
+  /* Adjust max widths on mobile */
+  .page-max-width-small,
+  .page-max-width-medium,
+  .page-max-width-large,
+  .page-max-width-extra-large {
+    margin-left: var(--theme-spacing-small, 1rem);
+    margin-right: var(--theme-spacing-small, 1rem);
+    max-width: calc(100% - 2 * var(--theme-spacing-small, 1rem));
   }
-  
-  .page-content {
-    color: black;
+}
+
+/* =================== ACCESSIBILITY =================== */
+
+@media (prefers-contrast: high) {
+  .page {
+    /* High contrast adjustments use theme variables */
+    background: var(--theme-surface-high-contrast, var(--theme-surface));
+    color: var(--theme-on-surface-high-contrast, var(--theme-on-surface));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* Remove animations - no hardcoded transitions to disable */
+  .page * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
   }
 }