/* GLOBAL RESET & MOBILE FIXES */ * { -webkit-tap-highlight-color: transparent; outline: none; } /* Rigid Layout: Forces app to fill the iframe/screen perfectly */ html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; background: #e5e7eb; font-family: 'Montserrat', sans-serif; touch-action: none; position: fixed; /* Lock body to view */ top: 0; left: 0; } canvas { display: block; } /* --- LAYOUT STRUCTURE --- */ /* 1. TOP BAR (Global Controls) */ .top-bar { position: absolute; top: 0; left: 0; width: 100%; height: auto; min-height: 50px; background: white; border-bottom: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; z-index: 50; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); transition: all 0.2s; } /* 2. SIDEBAR (Templates - PC Only) */ .sidebar { position: absolute; top: 50px; left: 0; width: 220px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px); border-right: 1px solid #e5e7eb; padding: 16px; overflow-y: auto; z-index: 40; display: none; /* Hidden on mobile by default */ flex-direction: column; gap: 8px; } /* 3. EDITOR (Bottom Panel) */ #editor { position: absolute; bottom: 0; left: 0; width: 100%; background: white; border-top: 1px solid #e5e7eb; display: flex; flex-direction: column; z-index: 60; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; } /* TAB NAVIGATION */ .tabs-header { display: flex; border-bottom: 1px solid #e5e7eb; background: #f9fafb; flex-shrink: 0; } .tab-btn { padding: 12px 24px; font-size: 13px; font-weight: 600; color: #6b7280; background: transparent; border: none; border-right: 1px solid #e5e7eb; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .tab-btn:hover { background: #f3f4f6; color: #111; } .tab-btn.active { background: white; color: #2563eb; border-bottom: 2px solid #2563eb; margin-bottom: -1px; } /* TAB CONTENT */ .tab-content { padding: 16px; overflow-y: auto; flex-grow: 1; -webkit-overflow-scrolling: touch; } .tab-pane { display: none; gap: 20px; align-items: flex-start; } .tab-pane.active { display: flex; flex-wrap: wrap; } /* COMPONENT STYLES */ .section-title { font-size: 10px; font-weight: 800; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px; display: block; } .opt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } .separator { width: 100%; height: 1px; background: #f1f5f9; margin: 8px 0; } /* Big Buttons for Block Types */ .block-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 80px; height: 80px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; transition: all 0.2s; flex-shrink: 0; } .block-btn:hover { border-color: #9ca3af; background: #f3f4f6; } .block-btn.active { border-color: #2563eb; background: #eff6ff; color: #2563eb; box-shadow: 0 0 0 1px #2563eb; } .block-btn svg { width: 32px; height: 32px; stroke-width: 1.5; stroke: currentColor; color: #4b5563; } .block-btn.active svg { color: #2563eb; } .block-btn span { font-size: 11px; font-weight: 600; color: #4b5563; } /* Standard Buttons */ .std-btn { padding: 8px 16px; font-size: 12px; font-weight: 600; color: #4b5563; border: 1px solid #e5e7eb; background: white; border-radius: 6px; cursor: pointer; transition: all 0.2s; flex-shrink: 0; } .std-btn:hover { border-color: #9ca3af; background: #f9fafb; } .std-btn.active { background: #2563eb; color: white; border-color: #2563eb; } /* Swatches */ .swatch-group { display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0; } .swatch-item { width: 42px; height: 42px; border-radius: 6px; border: 1px solid #e5e7eb; cursor: pointer; position: relative; overflow: hidden; flex-shrink: 0; } .swatch-item.selected { border: 2px solid #2563eb; transform: scale(1.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .swatch-label { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(255, 255, 255, 0.85); font-size: 8px; text-align: center; padding: 2px 0; font-weight: 700; color: #374151; } /* Color Circle for Handles/Legs */ .color-circle { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #e5e7eb; cursor: pointer; transition: transform 0.2s; flex-shrink: 0; } .color-circle:hover { transform: scale(1.05); } .color-circle.selected { border-color: #2563eb; transform: scale(1.15); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2); } /* Templates Sidebar Items */ .tpl-item { display: flex; align-items: center; gap: 10px; padding: 10px; background: white; border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; transition: all 0.2s; } .tpl-item:hover { border-color: #2563eb; background: #f0f7ff; } .tpl-item svg { width: 20px; height: 20px; color: #4b5563; } .tpl-item span { font-size: 13px; font-weight: 500; color: #374151; } /* RESPONSIVE DESIGN */ @media (min-width: 1024px) { .sidebar { display: flex !important; bottom: 35vh !important; } #editor { height: 35vh !important; display: flex !important; flex-direction: column !important; background: white; z-index: 40; } #editor .tab-content { flex: 1 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } #editor .tab-pane.active { display: flex !important; flex-direction: row !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 50px !important; padding: 30px 60px !important; overflow-x: auto !important; flex-wrap: nowrap !important; flex: 1 !important; } #editor .tab-pane.active>div { flex-shrink: 0 !important; } .separator-v { width: 1px !important; height: 100px !important; /* Fixed height for consistency */ background: #f1f5f9 !important; align-self: center !important; margin: 0 10px !important; } } @media (max-width: 1023px) { .sidebar { display: none; } .top-bar { padding: 6px 10px; flex-direction: column-reverse; align-items: stretch; gap: 6px; } .top-bar>div { width: 100%; justify-content: space-between; } #editor { height: 45vh; } .tabs-header { overflow-x: auto; } .tab-btn { padding: 10px 16px; white-space: nowrap; } .opt-grid { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; } .block-btn { width: 60px; height: 60px; } .block-btn svg { width: 24px; height: 24px; } .block-btn span { font-size: 9px; } } /* Utilities */ #measurements-layer { pointer-events: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; overflow: hidden; } .canvas-area { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } /* Dimensions Styles */ .dim-label { position: absolute; background: white; border: 1px solid #3b82f6; color: #1e3a8a; padding: 2px 5px; border-radius: 3px; font-size: 10px; font-weight: 700; white-space: nowrap; transform: translate(-50%, -50%); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); z-index: 20; font-family: monospace; } .dim-line { position: absolute; background: #3b82f6; height: 1px; transform-origin: top left; opacity: 0.8; } .dim-cap { position: absolute; width: 1px; height: 6px; background: #3b82f6; transform: translate(-50%, -50%); opacity: 1; } .dim-int-label { position: absolute; color: #1f2937; font-size: 9px; font-weight: 700; transform: translate(-50%, -50%); pointer-events: none; text-align: center; line-height: 1.1; background: rgba(255, 255, 255, 0.7); padding: 1px 2px; border-radius: 2px; } /* FORCE HIDE SITE HEADER & FOOTER (If layout bleed occurs) */ header, #mobileSearch, #mobileMenu, .mega-menu, footer { display: none !important; }
FABRICA DE MOBILIER
L: 3
H: 2
0 Lei
Modele Presetate
Noptieră
Comodă TV
Bibliotecă
Dulap
Acțiuni
1. Tip Modul
2. Opțiuni Ușă / Deschidere
3. Model Mâner
4. Culoare Mâner
Culoare Carcasă
Culori Fronturi
Opțiuni
Sistem Susținere