diff --git a/addons/home_dashboard/static/src/css/pos_style.css b/addons/home_dashboard/static/src/css/pos_style.css index a9a0e1f..b811336 100644 --- a/addons/home_dashboard/static/src/css/pos_style.css +++ b/addons/home_dashboard/static/src/css/pos_style.css @@ -1,206 +1,299 @@ /* ======================================== - ODOO POINT OF SALE (POS) THEME - Golden Yellow & Teal Premium + CHENNORA RUSH MODE - POS THEME (ULTRA PREMIUM) ======================================== */ :root { - --pos-primary: #fecd4f; - --pos-secondary: #2bb1a5; - --pos-header-bg: #ffffff; + --pos-primary: #111827; + /* Slate Dark */ + --pos-secondary: #0a8a49; + /* Success Green */ + --pos-accent-orange: #e66421; + /* Biryani Orange */ + --pos-accent-gold: #cc9900; + /* Tandoor Gold */ + --pos-accent-red: #d93025; + /* Curry Red */ + --pos-bg-main: #f8fafc; + /* Ultra light gray */ + --pos-card-dark: #1a1d23; + /* Dark Card Background */ + --pos-text-light: #ffffff; + --pos-text-dark: #111827; + --border-radius-xl: 24px; + --border-radius-lg: 16px; } -/* 1. Main POS Header */ +/* 1. Main POS Layout Swapping */ +/* Standard Odoo: Leftpane = Cart, Rightpane = Products */ +/* Goal: Food List on Left, Orders/Calculations on Right */ +/* .pos .pos-content, +.pos .product-screen { + display: flex !important; + flex-direction: row-reverse !important; */ +/* SWAP Panes */ +/* height: calc(100vh - 85px) !important; +} */ + +.pos .leftpane, +.pos .order-container { + /* The Cart Section - Move to Right */ + width: 480px !important; + border-left: 2px solid #f1f5f9 !important; + border-right: none !important; + background: #ffffff !important; + display: flex !important; + flex-direction: column !important; + flex: none !important; +} + +.product-screen { + display: flex !important; + flex-direction: row-reverse !important; +} + +.pos .rightpane, +.pos .product-list-container { + /* The Product Section - Move to Left */ + flex: 1 !important; + background: #f8fafc !important; +} + +/* 2. Header & Branding */ .pos .pos-topheader { - background: var(--pos-header-bg) !important; - border-bottom: 2px solid var(--pos-primary) !important; - color: #2c3e50 !important; - margin-bottom: 20px !important; + background: #ffffff !important; + border-bottom: 2px solid #f1f5f9 !important; + color: var(--pos-text-dark) !important; + height: 85px !important; + display: flex !important; + align-items: center !important; + padding: 0 30px !important; } -/* 2. Replace POS Logo with Company Logo from Settings */ +/* Logo from Odoo Settings */ +.pos .pos-logo { + display: flex !important; + align-items: center !important; + gap: 15px !important; + margin-right: 50px !important; + width: auto !important; +} + +.pos .pos-logo img, .pos .pos-logo { content: url('/web/binary/company_logo') !important; - height: 40px !important; + height: 55px !important; width: auto !important; - padding: 5px !important; object-fit: contain !important; } -/* 3. Floor Map Header (The purple bar in image) */ -.pos .floor-map .header { - background: var(--pos-secondary) !important; +/* "Rush Mode" Label next to logo */ +.pos .pos-logo::after { + content: "RUSH MODE"; + font-size: 14px; + font-weight: 800; + color: #ef4444; + letter-spacing: 2px; + border-left: 2px solid #e5e7eb; + padding-left: 20px; + margin-left: 10px; +} + +/* 3. Search Bar - Teal Theme */ +.pos .search-bar { + background: #e0f2f1 !important; + border-radius: var(--border-radius-lg) !important; + margin: 0 !important; + width: 380px !important; + height: 50px !important; + display: flex !important; + align-items: center !important; + padding: 0 20px !important; +} + +.pos .search-bar input { + background: transparent !important; + border: none !important; + font-weight: 800 !important; + color: #00695c !important; + font-size: 16px !important; + text-transform: uppercase !important; +} + +/* 4. Category Bar - Fix Truncation */ +.pos .category-list { + display: flex !important; + gap: 12px !important; + padding: 15px 30px !important; + background: #ffffff !important; + border-bottom: 2px solid #f1f5f9 !important; +} + +.pos .category-button { + border-radius: var(--border-radius-lg) !important; + font-weight: 900 !important; + text-transform: uppercase !important; + padding: 12px 30px !important; + font-size: 14px !important; + border: none !important; + min-width: 140px !important; + /* STOP MAI... truncation */ + white-space: nowrap !important; + background: #f1f5f9 !important; + color: #475569 !important; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important; +} + +.pos .category-button.active { + background: #111827 !important; color: #ffffff !important; +} + +/* Dynamic Colors for specific indexes */ +.pos .category-button:nth-child(2) { + background: var(--pos-accent-orange) !important; + color: white !important; +} + +.pos .category-button:nth-child(3) { + background: var(--pos-accent-gold) !important; + color: white !important; +} + +/* 5. Product Cards - Dark Premium */ +.pos .product-list-container { + background: #f8fafc !important; +} + +.pos .product-list { + display: flex !important; + flex-direction: row !important; + padding: 25px !important; + gap: 25px !important; +} + +.pos .product { + background: #259a8f !important; + border-radius: var(--border-radius-lg) !important; + width: 210px !important; + height: 230px !important; + border: none !important; + box-shadow: 0 2px 4px rgba(42, 106, 126, 0.05) !important; + transition: all 0.3s ease !important; + position: relative !important; + overflow: hidden !important; +} + +.pos .product:hover { + transform: translateY(-8px) scale(1.02) !important; +} + +.pos .product .product-img { + width: 100% !important; + height: 150px !important; + object-fit: cover !important; +} + +.product-img img { + width: 100% !important; + height: 100% !important; + /* object-fit: cover !important; */ +} + +.pos .product .product-name { + color: #ffffff !important; + font-size: 16px !important; font-weight: 700 !important; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important; + padding: 12px 15px 5px 15px !important; + background: transparent !important; } -/* 4. Table/Seat Icons in Floor Map */ -.pos .floor-map .table { - border-radius: 12px !important; -} - -.pos .floor-map .table.selected { - background: var(--pos-primary) !important; - color: #000 !important; -} - -/* 5. Product Screen - Action Pad & Numpad */ -.pos .action-pad .button, -.pos .numpad .button { - border-radius: 10px !important; +.pos .product .price-tag { + background: transparent !important; + color: #ffffff !important; + font-size: 15px !important; font-weight: 600 !important; + position: relative !important; + bottom: 5px !important; + left: 15px !important; + top: auto !important; + right: auto !important; + padding: 0 !important; +} + +/* 6. Order (Cart) Styling - Now on Right */ +.pos .order-container { + background: #ffffff !important; + padding: 10px 0 !important; +} + +.pos .orderline { + border-radius: var(--border-radius-lg) !important; + border: 2px solid #f1f5f9 !important; + margin: 8px 20px !important; + padding: 15px !important; + background: white !important; transition: all 0.2s ease !important; } +.pos .orderline.selected { + border: 2px solid var(--pos-secondary) !important; + background: #f0fdf4 !important; + box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1) !important; +} + +.pos .orderline .product-name { + font-weight: 900 !important; + font-size: 17px !important; + color: #111827 !important; +} + +/* 7. Summary & Pay Button */ +.pos .order-summary { + background: #ffffff !important; + padding: 25px 30px !important; + border-top: 2px dashed #e2e8f0 !important; +} + +.pos .summary .total { + color: var(--pos-secondary) !important; + font-size: 40px !important; + font-weight: 900 !important; + letter-spacing: -1px; +} + .pos .action-pad .button.pay { background: var(--pos-secondary) !important; color: white !important; - border: none !important; -} - -.pos .action-pad .button.pay:hover { - background: #259a8f !important; -} - -.pos .numpad .button:active { - background: var(--pos-primary) !important; - color: #000 !important; -} - -/* 6. Order Widget */ -.pos .order-container { - background: #f8fafc !important; -} - -.pos .order-line.selected { - background: rgba(254, 205, 79, 0.15) !important; - border-left: 4px solid var(--pos-primary) !important; -} - -/* 7. Product List - Alignment & Grand Look Transformation */ -.pos .product-list-container { - background: linear-gradient(135deg, #8fe0d6 0%, #ffecb5 100%) !important; -} - -.pos .product-list { + border-radius: var(--border-radius-lg) !important; + margin: 20px !important; + height: 75px !important; + font-size: 24px !important; + font-weight: 900 !important; + text-transform: uppercase !important; display: flex !important; - flex-wrap: wrap !important; - gap: 30px !important; - /* Proper gap between cards */ - padding: 20px !important; - justify-content: flex-start !important; -} - -.pos .product-list .product { - background: #ffffff !important; - border: none !important; - border-radius: 20px !important; - /* Smoother rounded corners */ - box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important; - overflow: visible !important; - /* Allow image to overflow slightly if needed */ - transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; - margin: 0 !important; - /* Margin replaced by parent gap */ - height: 230px !important; - /* Increased from 180px */ - width: 210px !important; - /* Increased from 140px */ - display: flex !important; - flex-direction: column !important; align-items: center !important; - padding: 15px !important; - position: relative !important; - /* For price tag positioning */ + justify-content: center !important; + box-shadow: 0 12px 25px rgba(10, 138, 73, 0.3) !important; + border: none !important; } -.pos .product-list .product:hover { - transform: translateY(-8px) !important; - box-shadow: 0 20px 40px rgba(43, 177, 165, 0.15) !important; +.pos .action-pad .button.pay::after { + content: "\2794"; + margin-left: 15px; + font-size: 30px; } -/* Circular Food Images with Premium Border */ -.pos .product .product-img { - width: 130px !important; - /* Increased from 100px */ - height: 130px !important; - /* Increased from 100px */ - border-radius: 50% !important; - /* Perfectly circular */ - border: 5px solid #ffffff !important; - /* box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1) !important; */ - margin-bottom: 8px !important; - transition: transform 0.3s ease; +/* 8. Numpad styling */ +.pos .numpad { + background: #f8fafc !important; + padding: 20px !important; } -.pos .product:hover .product-img { - transform: scale(1.1); -} - -/* Product Name Styling */ -.pos .product .product-name { - font-size: 15px !important; - /* Increased from 13px */ - font-weight: 700 !important; - color: #2c3e50 !important; - text-align: center !important; - padding: 2px 10px !important; - line-height: 1.2 !important; - background: transparent !important; -} - -/* Premium Floating Price Tag */ -.pos .product .price-tag { - background: var(--pos-secondary) !important; - /* Teal */ - color: #ffffff !important; - border-radius: 20px !important; - padding: 6px 16px !important; - /* Padding increased */ - font-weight: 800 !important; - font-size: 14px !important; - /* Price font increased */ - bottom: -15px !important; - /* Float at the bottom */ - top: auto !important; - right: auto !important; - box-shadow: 0 4px 10px rgba(43, 177, 165, 0.3) !important; - border: 3px solid #ffffff !important; - text-align: center !important; -} - -/* Info Icon Styling */ -.pos .product .product-info-button { - background: rgba(254, 205, 79, 0.9) !important; - /* Golden Yellow */ - color: #000 !important; - border-radius: 50% !important; - top: 5px !important; - right: 5px !important; -} - -/* 8. POS Buttons */ -.pos .button { - border-radius: 8px !important; -} - -.pos .button.highlight { - background: var(--pos-primary) !important; - color: #000 !important; -} - -/* 9. Search Bar */ -.pos .search-bar input { - border-radius: 20px !important; +.pos .numpad button { + border-radius: 12px !important; border: 1px solid #e2e8f0 !important; -} - -.pos .search-bar input:focus { - border-color: var(--pos-secondary) !important; -} - -.btn-primary { - color: #FFFFFF; - background-color: #259a8f !important; - border-color: #259a8f !important; + background: white !important; + height: 55px !important; + font-weight: 700 !important; + font-size: 14px !important; } \ No newline at end of file