984f4e2db4
- Added data-mainmenu attribute to TopNavBar component - Added #woonoow-admin-app [data-mainmenu] to print CSS hide rules - Now hides: header, nav, mainmenu, submenubar, bottomnav
376 lines
8.5 KiB
CSS
376 lines
8.5 KiB
CSS
/* Import design tokens for UI sizing and control defaults */
|
|
@import './components/ui/tokens.css';
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* WooNooW global theme (shadcn baseline, deduplicated) */
|
|
@layer base {
|
|
:root {
|
|
--background: 0 0% 100%;
|
|
--foreground: 222.2 84% 4.9%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 222.2 84% 4.9%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 222.2 84% 4.9%;
|
|
--primary: 222.2 47.4% 11.2%;
|
|
--primary-foreground: 210 40% 98%;
|
|
--secondary: 210 40% 96.1%;
|
|
--secondary-foreground: 222.2 47.4% 11.2%;
|
|
--muted: 210 40% 96.1%;
|
|
--muted-foreground: 215.4 16.3% 46.9%;
|
|
--accent: 210 40% 96.1%;
|
|
--accent-foreground: 222.2 47.4% 11.2%;
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
--border: 214.3 31.8% 91.4%;
|
|
--input: 214.3 31.8% 91.4%;
|
|
--ring: 222.2 84% 4.9%;
|
|
--chart-1: 12 76% 61%;
|
|
--chart-2: 173 58% 39%;
|
|
--chart-3: 197 37% 24%;
|
|
--chart-4: 43 74% 66%;
|
|
--chart-5: 27 87% 67%;
|
|
--radius: 0.5rem;
|
|
}
|
|
|
|
.dark {
|
|
--background: 222.2 84% 4.9%;
|
|
--foreground: 210 40% 98%;
|
|
--card: 222.2 84% 4.9%;
|
|
--card-foreground: 210 40% 98%;
|
|
--popover: 222.2 84% 4.9%;
|
|
--popover-foreground: 210 40% 98%;
|
|
--primary: 210 40% 98%;
|
|
--primary-foreground: 222.2 47.4% 11.2%;
|
|
--secondary: 217.2 32.6% 17.5%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
--muted: 217.2 32.6% 17.5%;
|
|
--muted-foreground: 215 20.2% 65.1%;
|
|
--accent: 217.2 32.6% 17.5%;
|
|
--accent-foreground: 210 40% 98%;
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
--border: 217.2 32.6% 17.5%;
|
|
--input: 217.2 32.6% 17.5%;
|
|
--ring: 212.7 26.8% 83.9%;
|
|
--chart-1: 220 70% 50%;
|
|
--chart-2: 160 60% 45%;
|
|
--chart-3: 30 80% 55%;
|
|
--chart-4: 280 65% 60%;
|
|
--chart-5: 340 75% 55%;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
@apply text-foreground;
|
|
}
|
|
|
|
/* Override WordPress common.css focus/active styles */
|
|
a:focus,
|
|
a:active {
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
color: inherit !important;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
WordPress Admin Override Fixes
|
|
These rules use high specificity + !important
|
|
to override WordPress admin CSS conflicts
|
|
============================================ */
|
|
|
|
/* Fix SVG icon styling - WordPress sets fill:currentColor on all SVGs */
|
|
#woonoow-admin-app svg {
|
|
fill: none !important;
|
|
}
|
|
|
|
/* But allow explicit fill-current class to work for filled icons */
|
|
#woonoow-admin-app svg.fill-current,
|
|
#woonoow-admin-app .fill-current svg,
|
|
#woonoow-admin-app [class*="fill-"] svg {
|
|
fill: currentColor !important;
|
|
}
|
|
|
|
/* Fix radio button indicator - WordPress overrides circle fill */
|
|
#woonoow-admin-app [data-radix-radio-group-item] svg,
|
|
#woonoow-admin-app [role="radio"] svg {
|
|
fill: currentColor !important;
|
|
}
|
|
|
|
/* Fix font-weight inheritance - prevent WordPress bold overrides */
|
|
#woonoow-admin-app text,
|
|
#woonoow-admin-app tspan {
|
|
font-weight: inherit !important;
|
|
}
|
|
|
|
/* Reset form element styling that WordPress overrides */
|
|
#woonoow-admin-app input[type="radio"],
|
|
#woonoow-admin-app input[type="checkbox"] {
|
|
appearance: none !important;
|
|
-webkit-appearance: none !important;
|
|
}
|
|
|
|
/* Command palette input: remove native borders/shadows to match shadcn */
|
|
.command-palette-search {
|
|
border: none !important;
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* ----------------------------------------------------
|
|
Print helpers (hide WP chrome, expand canvas, labels)
|
|
---------------------------------------------------- */
|
|
|
|
/* Page defaults for print */
|
|
@page {
|
|
size: auto;
|
|
/* let the browser choose */
|
|
margin: 12mm;
|
|
/* comfortable default */
|
|
}
|
|
|
|
@media print {
|
|
|
|
/* Hide WordPress admin chrome */
|
|
#adminmenuback,
|
|
#adminmenuwrap,
|
|
#adminmenu,
|
|
#wpadminbar,
|
|
#wpfooter,
|
|
#screen-meta,
|
|
.notice,
|
|
.update-nag {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Hide WooNooW app shell - all nav, header, submenu elements */
|
|
#woonoow-admin-app header,
|
|
#woonoow-admin-app nav,
|
|
#woonoow-admin-app [data-mainmenu],
|
|
#woonoow-admin-app [data-submenubar],
|
|
#woonoow-admin-app [data-bottomnav],
|
|
.woonoow-app-header,
|
|
.woonoow-topnav,
|
|
.woonoow-bottom-nav,
|
|
.woonoow-submenu,
|
|
.no-print {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Reset layout to full-bleed for our app */
|
|
html,
|
|
body,
|
|
#wpwrap,
|
|
#wpcontent,
|
|
#woonoow-admin-app,
|
|
#woonoow-admin-app>div,
|
|
.woonoow-app {
|
|
background: #fff !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
max-width: none !important;
|
|
width: 100% !important;
|
|
min-height: auto !important;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
/* Ensure print content is visible and takes full page */
|
|
.print-a4 {
|
|
position: absolute !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
width: 100% !important;
|
|
min-height: auto !important;
|
|
height: auto !important;
|
|
padding: 15mm !important;
|
|
margin: 0 !important;
|
|
box-shadow: none !important;
|
|
background: white !important;
|
|
-webkit-print-color-adjust: exact !important;
|
|
print-color-adjust: exact !important;
|
|
}
|
|
|
|
.print-a4 * {
|
|
-webkit-print-color-adjust: exact !important;
|
|
print-color-adjust: exact !important;
|
|
}
|
|
|
|
/* Ensure backgrounds print */
|
|
.print-a4 .bg-gray-50 {
|
|
background-color: #f9fafb !important;
|
|
}
|
|
|
|
.print-a4 .bg-gray-900 {
|
|
background-color: #111827 !important;
|
|
}
|
|
|
|
.print-a4 .text-white {
|
|
color: white !important;
|
|
}
|
|
|
|
/* Hide outer container styling */
|
|
.min-h-screen {
|
|
min-height: auto !important;
|
|
background: white !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.print-only {
|
|
display: block !important;
|
|
}
|
|
|
|
/* Improve table row density on paper */
|
|
.print-tight tr>* {
|
|
padding-top: 6px !important;
|
|
padding-bottom: 6px !important;
|
|
}
|
|
}
|
|
|
|
/* By default, label-only content stays hidden unless in print or label mode */
|
|
.print-only {
|
|
display: none;
|
|
}
|
|
|
|
/* Label mode toggled by router (?mode=label) */
|
|
.woonoow-label-mode .print-only {
|
|
display: block;
|
|
}
|
|
|
|
.woonoow-label-mode .no-print-label,
|
|
.woonoow-label-mode .wp-header-end,
|
|
.woonoow-label-mode .wrap {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Optional page presets (opt-in by adding the class to a wrapper before printing) */
|
|
.print-a4 {}
|
|
|
|
.print-letter {}
|
|
|
|
.print-4x6 {}
|
|
|
|
@media print {
|
|
|
|
/* A4 Invoice layout */
|
|
@page {
|
|
size: A4;
|
|
margin: 0;
|
|
}
|
|
|
|
.print-a4 {
|
|
width: 210mm !important;
|
|
min-height: 297mm !important;
|
|
padding: 20mm !important;
|
|
margin: 0 auto !important;
|
|
box-sizing: border-box !important;
|
|
background: white !important;
|
|
-webkit-print-color-adjust: exact !important;
|
|
print-color-adjust: exact !important;
|
|
}
|
|
|
|
.print-a4 * {
|
|
-webkit-print-color-adjust: exact !important;
|
|
print-color-adjust: exact !important;
|
|
}
|
|
|
|
/* Ensure backgrounds print */
|
|
.print-a4 .bg-gray-50 {
|
|
background-color: #f9fafb !important;
|
|
}
|
|
|
|
.print-a4 .bg-gray-900 {
|
|
background-color: #111827 !important;
|
|
}
|
|
|
|
.print-a4 .text-white {
|
|
color: white !important;
|
|
}
|
|
|
|
.print-letter {}
|
|
|
|
/* Thermal label (4x6in) with minimal margins */
|
|
.print-4x6 {
|
|
width: 6in;
|
|
}
|
|
|
|
.print-4x6 * {
|
|
-webkit-print-color-adjust: exact;
|
|
print-color-adjust: exact;
|
|
}
|
|
}
|
|
|
|
/* --- WooNooW: Popper menus & fullscreen fixes --- */
|
|
[data-radix-popper-content-wrapper] {
|
|
z-index: 2147483647 !important;
|
|
}
|
|
|
|
body.woonoow-fullscreen .woonoow-app {
|
|
overflow: visible;
|
|
}
|
|
|
|
/* --- WooCommerce Admin Notices --- */
|
|
.woocommerce-message,
|
|
.woocommerce-error,
|
|
.woocommerce-info {
|
|
position: relative;
|
|
border-left: 4px solid #00a32a;
|
|
padding: 12px 16px;
|
|
margin: 16px 0;
|
|
background: #f0f6fc;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.woocommerce-error {
|
|
border-left-color: #d63638;
|
|
background: #fcf0f1;
|
|
}
|
|
|
|
.woocommerce-info {
|
|
border-left-color: #2271b1;
|
|
background: #f0f6fc;
|
|
}
|
|
|
|
html #wpadminbar {
|
|
position: fixed;
|
|
top: 0;
|
|
}
|
|
|
|
/* WordPress Media Modal z-index fix */
|
|
/* Ensure WP media modal appears above Radix UI components (Dialog, Select, etc.) */
|
|
.media-modal {
|
|
z-index: 999999 !important;
|
|
pointer-events: auto !important;
|
|
}
|
|
|
|
/* Ensure media modal content is above the backdrop and receives clicks */
|
|
.media-modal-content {
|
|
z-index: 1000000 !important;
|
|
pointer-events: auto !important;
|
|
}
|
|
|
|
/* Ensure all interactive elements in WP media can receive clicks */
|
|
.media-modal .media-frame,
|
|
.media-modal .media-toolbar,
|
|
.media-modal .attachments,
|
|
.media-modal .attachment {
|
|
pointer-events: auto !important;
|
|
} |