/* sdk/furnishar-styles.css */ /* Main App Styling */ /* ---------- FurnishAR UI Theme Vars (v1) ---------- */ :root { --far-swatch-size: 40px; --far-swatch-radius: 8px; --far-swatch-border: #ddd; --far-swatch-border-active: #0066ff; --far-swatch-shadow: none; --far-panel-radius: 8px; --far-panel-border: #eee; --far-panel-bg: #fff; --far-panel-text: #111; --far-panel-muted: #666; --far-section-header-bg: #f1f1f1; --far-section-header-text: #111; --far-card-radius: 8px; --far-card-border: #eee; --far-card-shadow: none; --far-card-border-active: #0066ff; --far-card-bg-active: #f0f7ff; --far-select-radius: 10px; --far-select-border: #ddd; --far-select-bg: #fff; --far-hotspot-background: #4285f4; --far-hotspot-border: #3367d6; --far-mount-loading-bg: #dddddd; --far-mount-loading-bg-2: #f5f5f5; --far-mount-error-bg: #f7f7f7; --far-mount-error-border: #e5e5e5; --far-mount-error-text: #666666; --far-mount-error-title: #222222; } [data-furnishar-loading="true"] { background: linear-gradient(90deg, var(--far-mount-loading-bg) 25%, var(--far-mount-loading-bg-2) 50%, var(--far-mount-loading-bg) 75%); background-size: 200% 100%; animation: far-mount-pulse 1.4s ease-in-out infinite; } [data-furnishar-error="true"] { display: flex; align-items: center; justify-content: center; background: var(--far-mount-error-bg); } .furnishar-mount-error { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 100%; padding: 20px; text-align: center; border: 1px solid var(--far-mount-error-border); color: var(--far-mount-error-text); font-size: 13px; line-height: 1.4; background: var(--far-mount-error-bg); box-sizing: border-box; } .furnishar-mount-error-title { color: var(--far-mount-error-title); font-size: 14px; font-weight: 600; } .furnishar-mount-error-text { color: var(--far-mount-error-text); } @keyframes far-mount-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Modal Container */ #furnishar-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 9999; display: flex; } /* Viewer Container */ .furnishar-container { position: relative; display: flex; width: 100%; height: 100%; flex-direction: row; justify-content: space-between; gap: 1rem; max-width: 2048px; max-height: 1080px; margin: 5vh auto; background: white; border-radius: 1rem; } /* Configuration Panel */ .furnishar-controls { position: relative; width: 360px; background: var(--far-panel-bg); color: var(--far-panel-text); display: flex; flex-direction: column; } .config-title-wrapper { padding: 20px; border-bottom: 1px solid #eee; } .config-title { font-size: 18px; font-weight: bold; display: block; } .config-subtitle { font-size: 14px; color: var(--far-panel-muted); display: block; margin-top: 5px; } /* Option Items */ #ConfiguratorPanel { padding: 15px; flex: 1; overflow-y: auto; } .option-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 15px; } .option-item { display: flex; flex-direction: row; align-items: center; padding: 10px; gap: 10px; border: 1px solid var(--far-card-border); border-radius: var(--far-card-radius); background: white; cursor: pointer; transition: all 0.2s ease; } .option-item:hover { border-color: #ccc; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .option-item.selected { border-color: var(--far-card-border-active); background: var(--far-card-bg-active); } .furnishar-variants { display: flex; flex-direction: column; gap: 8px; } .swatch { width: var(--far-swatch-size); height: var(--far-swatch-size); border-radius: var(--far-swatch-radius); margin-bottom: 8px; background-size: cover; background-position: center; border: 1px solid #ddd; } .furnishar-swatches { display: flex; gap: 8px; margin-top: 12px; } .furnishar-variants .furnishar-swatches { display: flex; gap: 8px; flex-wrap: wrap; } .swatch-circle { width: var(--far-swatch-size); height: var(--far-swatch-size); border-radius: var(--far-swatch-radius); border: 1px solid var(--far-swatch-border); box-shadow: var(--far-swatch-shadow); background-size: cover; background-position: center; cursor: pointer; padding: 2px; } .swatch-circle:hover { border-color: #333; } .swatch-circle.selected { border : 2px solid var(--far-swatch-border-active); background-clip: padding-box; box-shadow: 0 0 4px var(--far-swatch-border-active); } .option-title { font-size: 14px; font-weight: 500; margin-bottom: 2px; } .option-subtitle { font-size: 12px; color: #666; } /* Action Buttons */ .action-buttons { padding: 15px; display: flex; gap: 10px; border-top: 1px solid #eee; } .action-buttons button { padding: 10px 15px; background: #fff; color: #333; border: 1px solid #ddd; border-radius: 20px; cursor: pointer; font-size: 14px; flex: 1; } .action-buttons button:hover { background: #f1f1f1; } .config-section { margin-bottom: 1rem; border: 1px solid var(--far-panel-border); border-radius: var(--far-panel-radius); overflow: hidden; } .config-section-header { padding: 10px 15px; font-weight: bold; background:var(--far-section-header-bg); color: var(--far-section-header-text); cursor: pointer; position: relative; user-select: none; transition: background 0.3s; } .config-section-header:hover { background: #e8e8e8; } .config-section-header::after { content: "▼"; position: absolute; right: 15px; transition: transform 0.2s ease; } .config-section-header.expanded::after { transform: rotate(-180deg); } /* make option list collapsed by default */ .config-section .option-list { display: none; } /* when header has .expanded, show list as grid */ .config-section-header.expanded + .option-list { display: grid; } /* Hide menu button on desktop */ .mobile-configure-button-wrapper { display: none; position: absolute; top: 30px; left: 20px; z-index: 1002; } model-viewer { position: relative; --post-color-grading-intensity: 1.2; } .furnishar-container model-viewer { flex: 1; width: 100%; height: 100%; min-width: 0; /* prevents overflow in flex row */ min-height: 0; position: relative; } model-viewer.camera-loading { cursor: wait; } model-viewer.camera-loading::after { content: "Loading view..."; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(1, 1, 1, 0.4); color: white; padding: 8px 16px; border-radius: 4px; } /* Hotspot Styles */ .furnishar-hotspot { position: relative; z-index: 5; display: block; width: 10px; height: 10px; border-radius: 999px; background-color:var(--far-hotspot-background); border: 2px solid var(--far-hotspot-border); box-sizing: border-box; pointer-events: auto; } .furnishar-hotspot:hover { transform: scale(1.2); box-shadow: 0 0 12px rgba(66, 133, 244, 0.6); border-color: var(--far-hotspot-border); } .furnishar-hotspot:focus { box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.3); } .furnishar-hotspot:not[data-visible] { opacity: var(--min-hotspot-opacity); pointer-events: none; } /* Annotation Styling */ .furnishar-annotation { position: absolute; background: white; border-radius: 8px; padding: 4px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); min-width: 100px; max-width: 300px; transform: translate(8px, 4px); z-index: 100; pointer-events: auto; cursor: pointer; opacity: 1; transition: opacity 0.3s ease; font-family: -apple-system, BlinkMacSystemFont, sans-serif; } .furnishar-hotspot:hover .furnishar-annotation { opacity: 1; } .annotation-title { display: block; margin-bottom: 2px; color: #202124; font-size: 14px; font-weight: 600; line-height: 1; } .annotation-description { margin: 0; font-size: 12px; color: #5f6368; line-height: 1; } /* Action-specific styles */ .furnishar-hotspot[data-action="info"] { --far-hotspot-background: #fbbc04; --far-hotspot-border: #f29900; } .furnishar-hotspot[data-action="material"] { --far-hotspot-background: #34a853; --far-hotspot-border: #2e8b47; } .furnishar-hotspot[data-action="navigate"] { --far-hotspot-background: #4285f4; --far-hotspot-border: #3367d6; } .furnishar-hotspot[data-action="animation"] { --far-hotspot-background: #ea4335; --far-hotspot-border: #d23c2e; } /* keep hotspot above everything inside model-viewer */ model-viewer .furnishar-hotspot, model-viewer ::slotted(.furnishar-hotspot) { z-index: 10; } .furnishar-watermark{ position:absolute; bottom:12px; left:12px; z-index:20; padding:6px 10px; border-radius:10px; background: rgba(255,255,255,0.8); font-size:12px; color:#111; pointer-events:none; } /* MOBILE RESPONSIVE PANEL TOGGLE */ @media (max-width: 768px) { #furnishar-modal { height: 100vh; width: 100vw; top: 0; left: 0; } .furnishar-container { flex-direction: column; height: 100%; width: 100%; max-height: 100vh; padding: 0; margin: 0; border-radius: 0; } .furnishar-container model-viewer { height: 90vh; min-height: unset; max-height: 90vh; } .furnishar-controls { display: flex; flex-direction: column; position: absolute; top: 0; right: 0; height: 100%; width: 100%; max-width: 400px; max-height: 768px; background: white; z-index: 1001; padding: 6rem 1rem 1rem 1rem; transform: translateX(100%); transition: transform 0.3s ease; } .furnishar-controls.visible { transform: translateX(0); } .mobile-configure-button-wrapper { display: block; } #menuButton { background: #fff; color: #333; border: 1px solid #ddd; border-radius: 50px; padding: 10px 15px; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); cursor: pointer; } #menuButton.active { background:rgb(224, 224, 224); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); } #configBtnSvg { width: 20px; height: 20px; } }