s on wide viewports and leak the mobile UI into the desktop layout. These rules live OUTSIDE every @media block on purpose. Inside @media (max-width: 768px) below, the more specific `body.m-mode .m-app` / `body.m-mode .m-sheet.active` / etc. selectors re-enable each one with the proper layout. No !important on purpose: specificity alone is enough for the mobile rules to win, and we don't want to break any cascade. ============================================== */ .m-app, .m-sheet, .m-drawer { display: none; } /* ============================================== Upload-area tips: swap copy between desktop and mobile so touch users don't see "drag & drop" instructions they can't act on. Used by the Design preview drop zone, the Design "Add Images" modal, and the Hello page upload card. Keep desktop visible, hide mobile by default. ============================================== */ .gfw-tip-desktop { display: inline; } .gfw-tip-mobile { display: none; } @media screen and (max-width: 768px) { .gfw-tip-desktop { display: none; } .gfw-tip-mobile { display: inline; } } /* ============================================== Hello Page - Mobile (max-width: 768px) ============================================== */ @media screen and (max-width: 768px) { /* --- Section & Content --- */ .hello_section .content { width: calc(100% - 2.4rem); padding: 1.6rem 0 3rem; height: auto; min-height: 100vh; } /* --- Top Bar --- */ .hello_section .hello_top { grid-template-columns: auto 1fr auto; gap: 0.8rem; } .hello_section .hello_top h1 { font-size: 1.8rem; text-align: center; white-space: nowrap; } .hello_section .hello_top .back { padding: 0 1.4rem; line-height: 3.4rem; font-size: 1.2rem; gap: 0.6rem; } .hello_section .hello_top .back::before { width: 1rem; height: 1rem; } .hello_section .hello_top .logo img { width: 6rem; } .hello_section .hello_main { flex-direction: column; margin-top: 2rem; gap: 2rem; align-items: stretch; } .hello_section .hello_main h2 { font-size: 2rem; } .hello_section .hello_main .rt { width: 100%; order: 1; padding: 2rem 1.6rem; border-radius: 1.4rem; } .hello_section .hello_main .rt .wrap { padding: 2rem 1.4rem; border-radius: 1.2rem; gap: 1.6rem; } .hello_section .hello_main .rt .text h2 { font-size: 2rem; } .hello_section .hello_main .rt .text p { font-size: 1.3rem; } .hello_section .hello_main .rt .hello_upload { padding: 3rem 1.6rem 2rem; border-radius: 1rem; } .hello_section .hello_main .rt .hello_upload .img { width: 4.5rem; height: 4rem; } .hello_section .hello_main .rt .hello_upload p { font-size: 1.3rem; margin-top: 2rem; line-height: 2rem; } .hello_section .hello_main .rt .history { margin-top: 1.4rem; padding-top: 1.4rem; } .hello_section .hello_main .rt .history .title { font-size: 1.3rem; } .hello_section .hello_main .rt .history ul { gap: 1rem; max-height: none; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 0.6rem; margin-top: 1.2rem; } .hello_section .hello_main .rt .history li { width: 8.5rem; height: 8.5rem; flex-shrink: 0; scroll-snap-align: start; padding: 0.6rem; border-radius: 0.8rem; } .hello_section .hello_main .rt .history li::before { display: none; } .hello_section .hello_main .rt .history li .add { display: none; } .hello_section .hello_main .rt .history li .more { opacity: 0.85; width: 2rem; height: 2rem; right: 0.2rem; top: 0.2rem; border-radius: 0.4rem; background-size: 50%; } .hello_section .hello_main .rt .history li:active { border-color: var(--primary); outline-color: var(--primary); transform: scale(0.94); transition: transform 0.1s ease; } .hello_section .hello_main .lt { order: 2; } .hello_section .hello_main .lt h2 { font-size: 1.8rem; text-align: center; } .hello_section .hello_main .lt ul { margin-top: 1.6rem; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 1.2rem; padding-bottom: 0.8rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .hello_section .hello_main .lt li { flex: 0 0 auto; width: 24rem; padding: 1.6rem; background: rgba(255, 255, 255, 0.9); border-radius: 1.2rem; scroll-snap-align: start; display: flex; align-items: center; gap: 1.2rem; } .hello_section .hello_main .lt li + li { margin-top: 0; } .hello_section .hello_main .lt li .icon { position: static; width: 4.4rem; height: 4.4rem; flex-shrink: 0; } .hello_section .hello_main .lt li .text { max-width: none; } .hello_section .hello_main .lt li .text h3 { font-size: 1.4rem; } .hello_section .hello_main .lt li .text p { font-size: 1.2rem; line-height: 1.7rem; margin-top: 0.3rem; } .loading-item { width: 8.5rem; height: 8.5rem; } .loading-spinner::after { width: 2.4rem; height: 2.4rem; } .loading-progress { height: 2rem; } .loading-progress-text { font-size: 1rem; } } /* ============================================== Design / Pattern Page - Mobile (max-width: 768px) ============================================== Strategy: completely hide the desktop chrome (sidebar, header, footer, tabs, design tools panels) and render a brand-new mobile UI with 3 tabs (Options / Design / Preview) plus bottom sheets that host the relocated original DOM (canvas, layers list, design tools, etc.). This way every existing behavior keeps working but the user sees a touch-optimized layout. ============================================== */ @media screen and (max-width: 768px) { /* lock background scroll while the mobile shell is the page */ html, body { background: #f4f6fb; } /* hide desktop chrome */ .layout_container > .layout_sider, body.m-mode header, body.m-mode .layout_main[data-main="products"] > .tabs, body.m-mode .layout_main[data-main="design"], body.m-mode .layout_main[data-main="help"], body.m-mode .layout_footer, body.m-mode .images_modal .layout_sider { display: none !important; } /* desktop preview has its own top/bot rows that we replace */ body.m-mode .preview .preview_top, body.m-mode .preview .preview_bot, body.m-mode .preview .preview_note { display: none !important; } /* desktop tabs in design tools panel - hidden on mobile, we replace */ body.m-mode .layout_main[data-main="products"] > .slides { display: contents; } /* hide the design_tools desktop chrome — we relocate parts of it into sheets */ body.m-mode .design_tools { display: none !important; } body.m-mode .design_tools.m-tools-host-active { display: block !important; } /* products_options is moved into the Options panel by JS using move + clone, but we still want to make it look right when it lives there */ body.m-mode .products_options { padding: 0; margin: 0; background: transparent; } /* Layout container becomes a transparent flow */ body.m-mode .layout_container, body.m-mode .layout, body.m-mode .layout_wrap, body.m-mode main, body.m-mode .layout_body { display: block !important; width: 100%; height: auto; min-height: 0; padding: 0; margin: 0; background: transparent; overflow: visible; } /* ============================================ Mobile App Shell ============================================ */ .m-app { display: none; } body.m-mode .m-app { display: flex; flex-direction: column; position: fixed; inset: 0; background: #eef2f8; z-index: 50; } /* Top bar */ .m-topbar { display: flex; align-items: center; gap: 1.2rem; padding: 1.2rem 1.4rem; background: #fff; border-bottom: 1px solid #ececec; flex-shrink: 0; } .m-topbar .m-menu-btn, .m-topbar .m-save-btn { width: 4rem; height: 4rem; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 0.8rem; color: #1c2942; } .m-topbar .m-menu-btn:active, .m-topbar .m-save-btn:active { background: #f0f3f8; } .m-topbar .m-menu-btn::before { content: ''; width: 2.2rem; height: 1.6rem; background: linear-gradient(#1c2942, #1c2942) top/100% 2px no-repeat, linear-gradient(#1c2942, #1c2942) center/100% 2px no-repeat, linear-gradient(#1c2942, #1c2942) bottom/100% 2px no-repeat; } .m-topbar .m-save-btn { width: auto; padding: 0 1.2rem; gap: 0.6rem; font-size: 1.4rem; font-weight: 500; } .m-topbar .m-save-btn::before { content: ''; width: 1.8rem; height: 1.8rem; background: url("data:image/svg+xml;utf8,") no-repeat center/contain; } .m-topbar .m-title { flex: 1; font-size: 1.6rem; font-weight: 600; color: #0c1b54; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Tabs */ .m-tabs { display: flex; gap: 0.6rem; padding: 0.8rem 1rem 0; background: #d3e2f0; flex-shrink: 0; } .m-tab { flex: 1; background: transparent; border: none; padding: 1rem 0.4rem; font-size: 1.4rem; font-weight: 500; color: #5a6a85; cursor: pointer; border-radius: 0.8rem 0.8rem 0 0; display: flex; align-items: center; justify-content: center; gap: 0.6rem; } .m-tab.active { background: #fff; color: var(--primary); font-weight: 600; } .m-tab .m-tab-icon { width: 1.8rem; height: 1.8rem; display: inline-block; background: no-repeat center/contain; opacity: 0.7; } .m-tab.active .m-tab-icon { opacity: 1; } .m-tab[data-mtab="options"] .m-tab-icon { background-image: url("data:image/svg+xml;utf8,"); } .m-tab[data-mtab="design"] .m-tab-icon { background-image: url("data:image/svg+xml;utf8,"); } .m-tab[data-mtab="preview"] .m-tab-icon { background-image: url("data:image/svg+xml;utf8,"); } /* Content area */ .m-content { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #d3e2f0; position: relative; } .m-panel { display: none; width: 100%; min-height: 100%; background: #fff; box-sizing: border-box; } .m-panel.active { display: block; } /* ============================================ OPTIONS PANEL ============================================ */ .m-panel[data-panel="options"] { padding: 0; } .m-panel[data-panel="options"] .m-options-host { padding: 1.6rem; overflow: hidden; } .pattern_popup ul .img img{ opacity: 1; } /* style .products_options when relocated into mobile options panel */ body.m-mode .m-options-host .products_options { padding: 0; margin: 0; flex-direction: column; } body.m-mode .m-options-host .products_options .title { font-size: 1.4rem; font-weight: 600; color: #0c1b54; margin-bottom: 1rem; } body.m-mode .m-options-host .products_options .hr { height: 1px; background: #ececec; margin: 1.8rem -1.6rem; } /* Fabric type */ body.m-mode .m-options-host .products_options .type .wrap { display: grid; grid-template-columns: 1fr; gap: 0; align-items: stretch; } body.m-mode .m-options-host .products_options .type .wrap > .img { display: none; } body.m-mode .m-options-host .products_options .type .title { display: inline-block; margin-right: auto; } body.m-mode .m-options-host .products_options .type .decide { color: var(--primary); text-decoration: underline; font-size: 1.3rem; cursor: pointer; float: right; } body.m-mode .m-options-host .products_options .type select { width: 100%; height: 4.4rem; border: 1px solid #d4d9e3; border-radius: 0.8rem; padding: 0 4rem 0 1.4rem; font-size: 1.4rem; color: #1c2942; background-color: #fff; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 1.2rem center; background-size: 1.4rem; appearance: none; -webkit-appearance: none; margin-bottom: 1rem; } body.m-mode .m-options-host .products_options .short_description { display: none; } .custom-popup .popup-option{ font-size: 14px; } /* Print size */ body.m-mode .m-options-host .products_options .size .size_options ul { display: flex; flex-direction: column; gap: 1.5rem; align-items: start; margin-top: 1.25rem; } body.m-mode .m-options-host .products_options .size .size_options li { font-size: 1.4rem; color: #1c2942; display: flex; align-items: center; gap: 0.8rem; cursor: pointer; } body.m-mode .m-options-host .products_options .size .size_options li::before { content: ''; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 2px solid #b9c3d3; background: #fff; box-sizing: border-box; transition: all .2s; } body.m-mode .m-options-host .products_options .size .size_options li.active { color: var(--primary); font-weight: 500; } body.m-mode .m-options-host .products_options .size .size_options li.active::before { border-color: var(--primary); border-width: 5px; } body.m-mode .m-options-host .products_options .size > .title { margin-bottom: 0.8rem; } body.m-mode .m-options-host .products_options .size .item { display: grid; grid-template-columns: 1fr 13rem; gap: 0.8rem; align-items: center; margin-top: 1.2rem; } body.m-mode .m-options-host .products_options .size .item .label { grid-column: 1 / -1; font-size: 1.3rem; color: #1c2942; margin-bottom: 0.2rem; font-weight: 500; } body.m-mode .m-options-host .products_options .size .item input { height: 4.2rem; border: 1px solid #d4d9e3; border-radius: 0.6rem; padding: 0 1.2rem; font-size: 1.4rem; width: 100%; background: #fff; } body.m-mode .m-options-host .products_options .size .item input[readonly] { background-color: #f3f5f9; } body.m-mode .m-options-host .products_options .size .item select { height: 4.2rem; border: 1px solid #d4d9e3; border-radius: 0.6rem; padding: 0 2.4rem 0 1rem; font-size: 1.3rem; width: 100%; background-color: #fff; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 0.6rem center; background-size: 1.2rem; appearance: none; -webkit-appearance: none; } /* Ensure native dropdown options fit even on small Android browsers */ body.m-mode .m-options-host .products_options .size .item select option { font-size: 1.4rem; padding: 0.4rem 0; } body.m-mode .m-options-host .products_options .size .note { display: none; } /* Edge & colors as collapsible "card" rows with chevron */ body.m-mode .m-options-host .products_options .edge, body.m-mode .m-options-host .products_options .colors { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid #ececec; position: relative; } body.m-mode .m-options-host .products_options .edge > .title, body.m-mode .m-options-host .products_options .colors > .title { padding-right: 3rem; } body.m-mode .m-options-host .products_options .edge::after, body.m-mode .m-options-host .products_options .colors::after { content: ''; position: absolute; top: 1.4rem; right: 0; width: 2rem; height: 2rem; background: url("data:image/svg+xml;utf8,") no-repeat center/contain; pointer-events: none; } body.m-mode .m-options-host .products_options .edge ul { display: flex; gap: 1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 1rem; padding: 0.4rem 0; } body.m-mode .m-options-host .products_options .edge li { flex: 0 0 auto; width: 6.8rem; text-align: center; cursor: pointer; } body.m-mode .m-options-host .products_options .edge li .img { width: 6.8rem; height: 6.8rem; border-radius: 0.6rem; border: 2px solid transparent; background: #f3f5f9; overflow: hidden; } body.m-mode .m-options-host .products_options .edge li.active .img { border-color: var(--primary); } body.m-mode .m-options-host .products_options .edge li .name { font-size: 1rem; line-height: 1.3rem; margin-top: 0.5rem; color: #5a6a85; } body.m-mode .m-options-host .products_options .colors ul { display: flex; gap: 1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 1rem; padding: 0.4rem 0; } body.m-mode .m-options-host .products_options .colors li { flex: 0 0 auto; width: 6.8rem; text-align: center; cursor: pointer; } body.m-mode .m-options-host .products_options .colors li .color { width: 6.8rem; height: 6.8rem; border-radius: 0.6rem; border: 2px solid #d4d9e3; box-sizing: border-box; } body.m-mode .m-options-host .products_options .colors li.active .color { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); } body.m-mode .m-options-host .products_options .colors li .color::after { display: none; } body.m-mode .m-options-host .products_options .colors li .name { font-size: 1rem; margin-top: 0.5rem; color: #5a6a85; } /* ============================================ DESIGN PANEL (canvas + dock) ============================================ */ .m-panel[data-panel="design"] { background: #fff; padding: 0; display: none; flex-direction: column; /* Lock the design panel to the visible content area so the dock stays pinned at the bottom regardless of canvas size. */ height: 100%; min-height: 0; overflow: hidden; } .m-panel[data-panel="design"].active { display: flex; } .m-canvas-host { /* flex:1 with min-height:0 lets this region take all space the panel has minus the dock, and lets internal overflow (.preview_wrap) handle scrolling instead of pushing the dock off-screen. */ flex: 1 1 0; min-height: 0; position: relative; /* Dot-grid workspace background — gives the side margins a design-tool feel instead of plain white when a portrait canvas doesn't fill the full width. */ background-color: #eef1f6; background-image: radial-gradient(circle, #c4ccd8 1px, transparent 1px); background-size: 20px 20px; padding: 0.5rem; display: flex; align-items: stretch; justify-content: stretch; overflow: hidden; } /* The relocated .preview block */ body.m-mode .m-canvas-host > .preview { width: 100%; height: 100%; margin: 0; padding: 0; background: transparent; border-radius: 0; box-shadow: none; display: flex; align-items: center; justify-content: center; overflow: hidden; } body.m-mode .m-canvas-host .preview_wrap { width: 100%; height: 100%; /* Never allow horizontal overflow — canvas must stay within viewport. Vertical scrolling is preserved for tall portrait canvases. */ overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; align-items: center; flex-direction: column; /* For tall canvases that overflow vertically we need to anchor to the top so the user can scroll; for shorter canvases we want to center. flex-start + auto margins on the child gives both. */ justify-content: flex-start; padding: 0; background: transparent; } /* Drop zone is replaced by the bottom Add sheet on mobile, but we keep it visible until the user adds their first design so the Design tab isn't empty. design.js will swap to the canvas automatically when content is added. */ body.m-mode .m-canvas-host .preview_upload { border: 2px dashed #c8d1e0; border-radius: 1.2rem; padding: 2.5rem 1.6rem; text-align: center; width: 100%; max-width: 36rem; max-height: 25rem; margin: 0 auto; background: #fafbfd; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; box-sizing: border-box; margin-top: 8rem; } body.m-mode .m-canvas-host .preview_upload .img { max-width: 5rem; } body.m-mode .m-canvas-host .preview_upload p { font-size: 1.3rem; color: #5a6a85; margin: 0; } body.m-mode .m-canvas-host .preview_upload label { width: 100%; max-width: 22rem; } body.m-mode .m-canvas-host .preview_upload button { background: var(--primary); color: #fff; border: none; border-radius: 0.8rem; padding: 1.2rem 2rem; font-size: 1.4rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; line-height: 1; } .products_options .size{ margin-top: 0.2rem; } /* body.m-mode .m-canvas-host .preview_upload button::before { content: '+'; font-size: 1.8rem; line-height: 1; } */ .preview .preview_upload button::before{ width: 2rem; height: 2rem; } /* Don't use !important so design.js's show()/hide() controls visibility */ body.m-mode .m-canvas-host .canvas { width: 100%; /* auto height + min-height lets a tall .canvas-wrapper push the parent .preview_wrap into vertical scroll mode instead of being clipped at 100% of viewport. */ height: auto; overflow: visible; align-items: center; justify-content: center; /* Auto top/bottom margins: when the canvas is shorter than the available area (square / landscape) they split the free space equally → vertical center. When the canvas overflows (tall portrait) the margins collapse to 0 → canvas anchors to the top and scrolls. */ margin-top: auto; margin-bottom: auto; } /* When .canvas becomes visible (design.js .show()), ensure flex layout */ body.m-mode .m-canvas-host .canvas:not([style*="display: none"]):not([style*="display:none"]) { display: flex; flex-direction: column; } /* Rulers stay positioned off-screen as on desktop, but reposition the real canvas-wrapper to be visible inside our mobile shell. */ body.m-mode .m-canvas-host .ruler-container { overflow: visible; background: transparent; width: auto; height: auto; position: static !important; left: auto !important; top: auto !important; padding: 0; } body.m-mode .m-canvas-host .canvas-wrapper { /* auto top/bottom margin centers the canvas vertically when it fits in the viewport, but lets it stick to the top when it overflows so scrolling reveals the bottom. */ margin: auto; background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06); border-radius: 2px; position: relative; flex-shrink: 0; } body.m-mode .ruler-top .unit-label{ top: 1px; left: -29px; font-size: 12px; } /* ── Compact mobile rulers ──────────────────────────────────────────── JS hPadding=60 (30px each side) keeps ruler-left (left:-28px) safely 2px from the overflow-x:hidden clip edge and reduces wasted blank. CSS safety-net mirrors the 28px ruler offset so it works even before JS fires. */ /* Narrower ruler strips */ body.m-mode .m-canvas-host .ruler-left { width: 28px; left: -28px; } body.m-mode .m-canvas-host .ruler-top { height: 28px; top: -28px; } /* Shorter tick marks proportional to 28px ruler */ body.m-mode .m-canvas-host .ruler-top .ruler-mark.major { height: 14px; width: 2px; } body.m-mode .m-canvas-host .ruler-top .ruler-mark.medium { height: 9px; } body.m-mode .m-canvas-host .ruler-top .ruler-mark.minor { height: 6px; } body.m-mode .m-canvas-host .ruler-left .ruler-mark.major { width: 14px; height: 2px; } body.m-mode .m-canvas-host .ruler-left .ruler-mark.medium { width: 9px; } body.m-mode .m-canvas-host .ruler-left .ruler-mark.minor { width: 6px; } /* Compact label font & repositioned to fit 28px ruler */ body.m-mode .m-canvas-host .ruler-label { font-size: 10px; } body.m-mode .m-canvas-host .ruler-left .ruler-label { right: 14px; } body.m-mode .m-canvas-host .ruler-top .ruler-label { top: 3px; } /* CSS safety-net: guarantee ruler-left is never clipped on first paint */ body.m-mode .m-canvas-host .canvas { padding-left: 30px; padding-top: 30px; padding-right: 0px; box-sizing: border-box; } /* Don't touch width/height here — Fabric.js sets the canvas buffer dimensions via setWidth/setHeight and writes inline width/height style. Overriding height with auto would squash a portrait canvas. */ body.m-mode .m-canvas-host #imageCanvas { touch-action: none; } /* fullscreen toggle button */ .m-canvas-fullscreen { position: absolute; top: 1.4rem; right: 1.4rem; width: 3.6rem; height: 3.6rem; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 5; } .m-canvas-fullscreen::before { content: ''; width: 1.6rem; height: 1.6rem; background: url("data:image/svg+xml;utf8,") no-repeat center/contain; } /* Dock: Layers / + / Tools. Sits at the bottom of the locked-height design panel as a non-shrinking flex item — always visible. */ .m-dock { flex-shrink: 0; flex-grow: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; padding: 1rem 1.4rem 1rem; background: #fff; border-top: 1px solid #ececec; position: relative; z-index: 5; box-shadow: 0 -2px 12px rgba(12, 27, 84, 0.06); } .m-dock-btn { background: transparent; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; color: #5a6a85; font-size: 1.1rem; padding: 0.4rem; } .m-dock-btn .m-dock-icon { width: 2.4rem; height: 2.4rem; background: no-repeat center/contain; } .m-dock-btn[data-action="layers"] .m-dock-icon { background-image: url("data:image/svg+xml;utf8,"); } .m-dock-btn[data-action="tools"] .m-dock-icon { background-image: url("data:image/svg+xml;utf8,"); } .m-dock-btn[data-action="add"] { align-self: center; width: 5.6rem; height: 5.6rem; border-radius: 50%; background: var(--primary); color: #fff; margin: -2.4rem auto 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(12, 27, 84, 0.3); } .m-dock-btn[data-action="add"]::before { content: '+'; font-size: 3rem; font-weight: 300; line-height: 1; } /* ============================================ PREVIEW PANEL ============================================ */ .m-panel[data-panel="preview"] { background: #fff; padding: 1.6rem; } .m-preview-host { width: 100%; min-height: 35rem; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #ffffff; border-radius: 1rem; overflow: hidden; } .m-preview-host img, .m-preview-host canvas { max-width: 100%; height: auto; display: block; } .m-preview-host .m-preview-empty { text-align: center; color: #5a6a85; font-size: 1.3rem; padding: 4rem 2rem; } .m-preview-note { display: flex; align-items: flex-start; gap: 0.8rem; margin-top: 1.2rem; padding: 1rem 1.4rem; background: color-mix(in srgb, var(--primary) 10%, #fff); border: 1px solid color-mix(in srgb, var(--primary) 35%, #fff); border-left: 4px solid var(--primary); border-radius: 0.8rem; font-size: 1.25rem; line-height: 1.6; color: var(--primary); width: 100%; box-sizing: border-box; } .m-preview-note::before { content: "i"; display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.6rem; background: var(--primary); color: #fff; border-radius: 50%; font-size: 1rem; font-weight: 700; font-style: italic; flex-shrink: 0; margin-top: 0.1rem; } .m-preview-toolbar { display: flex; gap: 0.8rem; margin-top: 1.2rem; justify-content: center; } .m-preview-toolbar button { background: #fff; border: 1px solid #d4d9e3; border-radius: 0.6rem; padding: 0.8rem 1.4rem; font-size: 1.3rem; color: #1c2942; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; } /* ============================================ BOTTOM BAR ============================================ */ .m-bottombar { flex-shrink: 0; display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: 1rem 1.4rem; background: #fff; border-top: 1px solid #ececec; box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.05); z-index: 60; } .m-qty-trigger { background: #fff; border: 1px solid #d4d9e3; border-radius: 0.6rem; padding: 0.8rem 1rem; font-size: 1.3rem; color: #1c2942; display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; } .m-qty-trigger::after { content: ''; width: 1.2rem; height: 1.2rem; background: url("data:image/svg+xml;utf8,") no-repeat center/contain; } .m-price { font-size: 1.8rem; font-weight: 600; color: #1c2942; text-align: center; } .m-action-btn { background: #1c2942; color: #fff; border: none; border-radius: 0.6rem; padding: 1.2rem 1.8rem; font-size: 1.3rem; font-weight: 600; cursor: pointer; white-space: nowrap; } .m-action-btn:disabled { opacity: 0.65; cursor: not-allowed; } .m-action-btn--loading { display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem; } .m-action-spin { display: inline-block; width: 1.4rem; height: 1.4rem; border: 0.2rem solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: m-action-spin 0.8s linear infinite; flex: 0 0 auto; } @keyframes m-action-spin { to { transform: rotate(360deg); } } /* ============================================ BOTTOM SHEETS ============================================ */ .m-sheet { position: fixed; inset: 0; background: rgba(0, 0, 0, 0); display: none; align-items: flex-end; justify-content: center; z-index: 200000; transition: background .25s ease; } .m-sheet.active { display: flex; background: rgba(0, 0, 0, 0.45); } .m-sheet .m-sheet-card { width: 100%; max-height: 88vh; background: #fff; border-radius: 1.6rem 1.6rem 0 0; transform: translateY(100%); transition: transform .3s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; overflow: hidden; } .m-sheet.active .m-sheet-card { transform: translateY(0); } /* While the sheet is sliding in (first ~350ms) we ignore taps so the touchend/click that triggered open can't accidentally interact with the freshly-shown content. The close button still works because mobile-app.js removes the class before the first interaction. */ .m-sheet.m-just-opened, .m-sheet.m-just-opened .m-sheet-card, .m-sheet.m-just-opened * { pointer-events: none !important; } .m-sheet-header { display: flex; align-items: center; gap: 1rem; padding: 1.4rem 1.6rem 1.2rem; border-bottom: 1px solid #ececec; } .m-sheet-title { flex: 1; font-size: 1.6rem; font-weight: 600; color: #0c1b54; } .m-sheet-actions { display: flex; align-items: center; gap: 0.8rem; } .m-sheet-actions button { width: 3.2rem; height: 3.2rem; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 0.6rem; color: #1c2942; } .m-sheet-actions button:active { background: #f0f3f8; } .m-sheet-close::before { content: ''; width: 1.6rem; height: 1.6rem; background: url("data:image/svg+xml;utf8,") no-repeat center/contain; } .m-sheet-edit::before { content: ''; width: 1.6rem; height: 1.6rem; background: url("data:image/svg+xml;utf8,") no-repeat center/contain; } .m-sheet-delete::before { content: ''; width: 1.6rem; height: 1.6rem; background: url("data:image/svg+xml;utf8,") no-repeat center/contain; } .m-sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 1.2rem 1.6rem 2rem; flex: 1; } /* Layers sheet */ body.m-mode .m-sheet[data-sheet="layers"] .m-sheet-body #layersList { margin: 0; padding: 0; list-style: none; } body.m-mode .m-sheet[data-sheet="layers"] .m-sheet-body #layersList > li { display: grid; grid-template-columns: 5.6rem 1fr auto auto; gap: 1.2rem; align-items: center; padding: 1.2rem 0; border-bottom: 1px solid #f0f0f0; cursor: pointer; margin: 0; } body.m-mode .m-sheet[data-sheet="layers"] .m-sheet-body #layersList > li:last-child { border-bottom: none; } body.m-mode .m-sheet[data-sheet="layers"] .m-sheet-body #layersList > li.active { background: #f7faff; } body.m-mode .m-sheet[data-sheet="layers"] .m-sheet-body #layersList .img { width: 5.6rem; height: 5.6rem; border-radius: 0.6rem; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; border: 1px solid #ececec; } body.m-mode .m-sheet[data-sheet="layers"] .m-sheet-body #layersList .img.text-layer { font-size: 2.4rem; color: #1c2942; font-weight: 600; } body.m-mode .m-sheet[data-sheet="layers"] .m-sheet-body #layersList .img img { width: 100%; height: 100%; object-fit: contain; } body.m-mode .m-sheet[data-sheet="layers"] .m-sheet-body #layersList .selected { display: none; } body.m-mode .m-sheet[data-sheet="layers"] .m-sheet-body #layersList .infos .name { font-size: 1.4rem; font-weight: 600; color: #1f9d55; display: flex; align-items: center; gap: 0.5rem; } body.m-mode .m-sheet[data-sheet="layers"] .m-sheet-body #layersList .infos .name.poor { color: #d63a4b; } body.m-mode .m-sheet[data-sheet="layers"] .m-sheet-body #layersList .infos .name.medium { color: #d68a3a; } body.m-mode .m-sheet[data-sheet="layers"] .m-sheet-body #layersList .infos .name::before { content: ''; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: currentColor; flex-shrink: 0; -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center/contain; mask: url("data:image/svg+xml;utf8,") no-repeat center/contain; } body.m-mode .m-sheet[data-sheet="layers"] .m-sheet-body #layersList .infos .desc { font-size: 1.1rem; color: #888; margin-top: 0.2rem; } body.m-mode .m-sheet[data-sheet="layers"] .m-sheet-body #layersList .reset { display: block; width: 3.2rem; height: 3.2rem; border: 1px solid #ececec; border-radius: 0.5rem; background: #fff url("data:image/svg+xml;utf8,") no-repeat center/1.4rem; cursor: pointer; font-size: 0; color: transparent; flex-shrink: 0; margin-right: 0; gap: 0; -webkit-tap-highlight-color: transparent; } body.m-mode .m-sheet[data-sheet="layers"] .m-sheet-body #layersList .reset::before { display: none; } body.m-mode .m-sheet[data-sheet="layers"] .m-sheet-body #layersList .funcs { display: flex; gap: 0.6rem; align-items: center; } body.m-mode .m-sheet[data-sheet="layers"] .m-sheet-body #layersList .funcs > div { width: 3.2rem; height: 3.2rem; border: 1px solid #ececec; border-radius: 0.5rem; background: #fff no-repeat center/1.2rem; cursor: pointer; } body.m-mode .m-sheet[data-sheet="layers"] .m-sheet-body #layersList .funcs .btn_up { background-image: url("data:image/svg+xml;utf8,"); } body.m-mode .m-sheet[data-sheet="layers"] .m-sheet-body #layersList .funcs .btn_down { background-image: url("data:image/svg+xml;utf8,"); } body.m-mode .m-sheet[data-sheet="layers"] .m-sheet-body #layersList .funcs .btn_delete { background-image: url("data:image/svg+xml;utf8,"); } body.m-mode .m-sheet[data-sheet="layers"] .m-sheet-body #layersList .funcs .m-edit-btn { background-image: url("data:image/svg+xml;utf8,"); } body.m-mode .m-sheet[data-sheet="layers"] .m-sheet-body #layersList li:first-child .funcs .btn_up, body.m-mode .m-sheet[data-sheet="layers"] .m-sheet-body #layersList li:last-child .funcs .btn_down { pointer-events: none; background-color: #eee; opacity: 0.5; } body.m-mode .m-sheet[data-sheet="layers"] .m-sheet-empty { text-align: center; padding: 3rem 1rem; color: #5a6a85; font-size: 1.3rem; } /* Add Design sheet (grid) */ .m-add-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem 0.4rem; padding: 1rem 0; } .m-add-item { background: transparent; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 0.8rem 0.2rem; color: #1c2942; font-size: 1.1rem; font-weight: 500; } .m-add-item .m-add-icon { width: 5rem; height: 5rem; border-radius: 1rem; background: #f3f5f9 no-repeat center/2.4rem; display: flex; align-items: center; justify-content: center; } .m-add-item[data-act="image"] .m-add-icon { background-image: url("data:image/svg+xml;utf8,"); } .m-add-item[data-act="background"] .m-add-icon { background-image: url("data:image/svg+xml;utf8,"); } .m-add-item[data-act="text"] .m-add-icon { background-image: url("data:image/svg+xml;utf8,"); } .m-add-item[data-act="clipart"] .m-add-icon { background-image: url("data:image/svg+xml;utf8,"); } .m-add-item[data-act="wordart"] .m-add-icon { background-image: url("data:image/svg+xml;utf8,"); } .m-add-item:active { transform: scale(0.96); } /* Tools sheet */ .m-history-row { display: flex; gap: 1rem; padding: 0.8rem 0 0.4rem; border-bottom: 1px solid #ececec; margin-bottom: 0.4rem; } .m-history-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.7rem; height: 4.4rem; border: 1px solid #d4d9e3; border-radius: 0.8rem; background: #fff; cursor: pointer; font-size: 1.3rem; font-weight: 500; color: #1c2942; } .m-history-btn:active { background: #f0f3f8; } .m-history-btn:disabled { opacity: 0.35; cursor: default; } .m-history-icon { width: 2rem; height: 2rem; background: no-repeat center/contain; flex-shrink: 0; } .m-history-icon--undo { background-image: url("data:image/svg+xml;utf8,"); } .m-history-icon--redo { background-image: url("data:image/svg+xml;utf8,"); } .m-tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem 0.4rem; padding: 1rem 0; } .m-tools-grid .m-tool { background: transparent; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.6rem 0.2rem; color: #1c2942; font-size: 1.1rem; } .m-tools-grid .m-tool .m-tool-icon { width: 4.4rem; height: 4.4rem; border-radius: 0.6rem; border: 1px solid #d4d9e3; background: #fff no-repeat center/2rem; display: flex; align-items: center; justify-content: center; } .m-tools-grid .m-tool[data-tool="pattern"] .m-tool-icon { background-image: url("data:image/svg+xml;utf8,"); } .m-tools-grid .m-tool[data-tool="size-down"] .m-tool-icon { background-image: url("data:image/svg+xml;utf8,"); } .m-tools-grid .m-tool[data-tool="size-up"] .m-tool-icon { background-image: url("data:image/svg+xml;utf8,"); } .m-tools-grid .m-tool[data-tool="fit"] .m-tool-icon { background-image: url("data:image/svg+xml;utf8,"); } .m-tools-grid .m-tool[data-tool="fill"] .m-tool-icon { background-image: url("data:image/svg+xml;utf8,"); } .m-tools-grid .m-tool[data-tool="rotate-l"] .m-tool-icon { background-image: url("data:image/svg+xml;utf8,"); } .m-tools-grid .m-tool[data-tool="rotate-r"] .m-tool-icon { background-image: url("data:image/svg+xml;utf8,"); } .m-tools-grid .m-tool[data-tool="effects"] .m-tool-icon { background-image: url("data:image/svg+xml;utf8,"); } /* Text controls sheet body */ .m-text-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1.2rem; padding: 1.2rem 0 0.4rem; margin-top: 1rem; border-top: 1px solid #eef0f4; } .m-text-controls .m-tc { display: flex; flex-direction: column; gap: 0.6rem; } .m-text-controls .m-tc.full { grid-column: 1 / -1; } .m-text-controls .m-tc > label { font-size: 1.2rem; color: #5a6a85; font-weight: 600; letter-spacing: 0.02em; } .m-text-controls .m-tc select, .m-text-controls .m-tc input[type="text"], .m-text-controls .m-tc input[type="number"] { height: 4.4rem; border: 1px solid #d4d9e3; border-radius: 0.8rem; padding: 0 1.2rem; font-size: 1.4rem; color: #0c1b54; background: #fff; outline: none; appearance: none; -webkit-appearance: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .m-text-controls .m-tc select { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.4rem; padding-right: 3rem; } .m-text-controls .m-tc select:focus, .m-text-controls .m-tc input:focus { border-color: var(--primary, #2543d6); box-shadow: 0 0 0 3px rgba(37, 67, 214, 0.12); } /* Font Color: native picker styled as a swatch with a chevron */ .m-text-controls .m-tc-color { position: relative; height: 4.4rem; border: 1px solid #d4d9e3; border-radius: 0.8rem; background: #fff; overflow: hidden; display: flex; align-items: center; padding: 0.4rem 1rem 0.4rem 0.4rem; gap: 0.8rem; } .m-text-controls .m-tc-color input[type="color"] { width: 4rem; height: 3.4rem; border: none; padding: 0; background: transparent; cursor: pointer; appearance: none; -webkit-appearance: none; border-radius: 0.6rem; overflow: hidden; } .m-text-controls .m-tc-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } .m-text-controls .m-tc-color input[type="color"]::-webkit-color-swatch { border: 1px solid #d4d9e3; border-radius: 0.5rem; } .m-text-controls .m-tc-color input.m-tc-color-hex { flex: 1; min-width: 0; height: 100%; border: none; outline: none; background: transparent; padding: 0; font-size: 1.3rem; color: #0c1b54; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; font-family: inherit; } .m-text-controls .m-tc-color input.m-tc-color-hex:focus { color: var(--primary, #2543d6); } .m-text-controls .m-tc-color::after { content: ''; width: 1.2rem; height: 1.2rem; margin-left: auto; background: url("data:image/svg+xml;utf8,") no-repeat center/contain; pointer-events: none; flex-shrink: 0; } /* Text Alignment: segmented control */ .m-text-controls #mTcAlign, .m-text-controls .text-align-buttons { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; padding: 0.4rem; background: #f3f5fa; border-radius: 0.9rem; border: 1px solid #e3e7ef; } .m-text-controls .text-align-btn { appearance: none; -webkit-appearance: none; height: 4rem; border: none; background: transparent; border-radius: 0.6rem; color: #5a6a85; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; padding: 0; } .m-text-controls .text-align-btn svg { width: 2rem; height: 2rem; fill: currentColor; display: block; } .m-text-controls .text-align-btn:active { background: rgba(37, 67, 214, 0.08); } .m-text-controls .text-align-btn.active { background: #fff; color: var(--primary, #2543d6); box-shadow: 0 1px 3px rgba(12, 27, 84, 0.12); } /* Adjust dimensions sheet */ .m-adjust { padding: 0.4rem 0; } .m-adjust .m-adjust-hint { font-size: 1.2rem; color: #5a6a85; margin-bottom: 1.4rem; line-height: 1.6; } .m-adjust .m-adjust-row { display: grid; grid-template-columns: 9rem 1fr 1fr; gap: 1rem; align-items: center; margin-bottom: 1rem; } .m-adjust .m-adjust-thumb { width: 9rem; height: 9rem; grid-row: 1 / 4; border-radius: 0.6rem; border: 1px solid #ececec; background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; } .m-adjust .m-adjust-thumb img { width: 100%; height: 100%; object-fit: contain; } .m-adjust .m-adjust-field { display: flex; flex-direction: column; gap: 0.4rem; } .m-adjust .m-adjust-field label { font-size: 1.2rem; color: #5a6a85; } .m-adjust .m-adjust-field input { height: 3.8rem; border: 1px solid #d4d9e3; border-radius: 0.6rem; padding: 0 1rem; font-size: 1.3rem; width: 100%; } .m-adjust .m-adjust-quality { margin-top: 1rem; padding: 1rem 1.2rem; background: #e9f7ee; color: #1f9d55; border-radius: 0.6rem; font-size: 1.3rem; display: flex; align-items: center; gap: 0.6rem; } .m-adjust .m-adjust-quality.poor { background: #fdecee; color: #d63a4b; } .m-adjust .m-adjust-quality.medium { background: #fff5e6; color: #d68a3a; } .m-adjust .m-adjust-quality strong { font-weight: 600; } .m-adjust .m-adjust-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.4rem; } .m-adjust .m-adjust-buttons button { height: 4.4rem; border-radius: 0.6rem; font-size: 1.3rem; font-weight: 600; cursor: pointer; border: 1px solid #d4d9e3; background: #fff; color: #1c2942; } .m-adjust .m-adjust-buttons button.primary { background: #1c2942; color: #fff; border-color: #1c2942; } /* Quantity sheet */ .m-qty-sheet-body { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: 1rem 0 0.4rem; } .m-qty-sheet-body label { font-size: 1.4rem; color: #1c2942; font-weight: 500; } .m-qty-sheet-body input { border: 1px solid #d4d9e3; border-radius: 0.6rem; height: 4.4rem; padding: 0 1rem; font-size: 1.4rem; width: 100%; background: #fff; } .m-qty-sheet-body button { background: #1c2942; color: #fff; border: none; border-radius: 0.6rem; height: 4.4rem; padding: 0 2rem; font-size: 1.4rem; font-weight: 600; cursor: pointer; } .m-qty-sheet-body .m-qty-row { display: contents; } /* Confirm Delete sheet */ .m-confirm-body { padding: 0.4rem 0; } .m-confirm-body p { font-size: 1.4rem; color: #1c2942; margin-bottom: 1.2rem; } .m-confirm-body .m-confirm-info { display: grid; grid-template-columns: 8rem 1fr; gap: 1.2rem; align-items: center; padding: 1.2rem; border: 1px solid #ececec; border-radius: 0.6rem; margin-bottom: 1.2rem; } .m-confirm-body .m-confirm-info .img { width: 8rem; height: 8rem; border-radius: 0.6rem; overflow: hidden; background: #f3f5f9; display: flex; align-items: center; justify-content: center; } .m-confirm-body .m-confirm-info .img img { width: 100%; height: 100%; object-fit: contain; } .m-confirm-body .m-confirm-info .desc { font-size: 1.2rem; color: #5a6a85; } .m-confirm-body .m-confirm-info .desc strong { color: #1c2942; display: block; margin-bottom: 0.4rem; font-size: 1.3rem; } .m-confirm-body .m-confirm-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .m-confirm-body .m-confirm-buttons button { height: 4.4rem; border-radius: 0.6rem; font-size: 1.3rem; font-weight: 600; cursor: pointer; border: 1px solid #d4d9e3; background: #fff; color: #1c2942; } .m-confirm-body .m-confirm-buttons button.primary { background: #1c2942; color: #fff; border-color: #1c2942; } /* Menu drawer */ .m-drawer { position: fixed; inset: 0; background: rgba(0, 0, 0, 0); display: none; z-index: 250; } .m-drawer.active { display: block; background: rgba(0, 0, 0, 0.45); } .m-drawer .m-drawer-card { width: 78%; max-width: 32rem; height: 100%; background: #fff; transform: translateX(-100%); transition: transform .3s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; } .m-drawer.active .m-drawer-card { transform: translateX(0); } .m-drawer-header { padding: 1.6rem; border-bottom: 1px solid #ececec; display: flex; align-items: center; gap: 1rem; } .m-drawer-header img { width: 4rem; height: 4rem; } .m-drawer-header .m-drawer-title { flex: 1; font-size: 1.5rem; font-weight: 600; color: #0c1b54; } .m-drawer-list { padding: 1rem 0; } .m-drawer-list a { display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.6rem; color: #1c2942; font-size: 1.4rem; text-decoration: none; } .m-drawer-list a:active { background: #f0f3f8; } /* Help-decide modal: full screen on mobile (existing modal kept as-is, but ensure mobile-friendly) */ body.m-mode .help-decide-modal { z-index: 300; } body.m-mode .help-decide-content { width: 100%; max-width: 100%; max-height: 100vh; border-radius: 0; } body.m-mode .help-decide-header { padding: 1.2rem 1.6rem; } body.m-mode .help-decide-header h2 { font-size: 1.7rem; } body.m-mode .products-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; padding: 1rem; } body.m-mode .product-info { padding: 0.8rem; } body.m-mode .product-title { font-size: 1.2rem; } body.m-mode .product-price { font-size: 1.2rem; margin-bottom: 0.8rem; } body.m-mode .product-actions { flex-direction: column; gap: 0.6rem; } body.m-mode .product-actions .select-fabric-btn { width: 100%; text-align: center; padding: 0.6rem 1rem; font-size: 1.2rem; } /* ============================================ Legacy popup mobile chrome A small header injected by mobile-app.js into legacy popups so users can close them with one tap. ============================================ */ .m-legacy-header { display: flex; align-items: center; gap: 1rem; padding: 1.4rem 1.6rem; border-bottom: 1px solid #ececec; background: #fff; position: sticky; top: 0; z-index: 5; flex-shrink: 0; } .m-legacy-header .m-legacy-title { flex: 1; font-size: 1.6rem; font-weight: 600; color: #0c1b54; } .m-legacy-header .m-legacy-close { width: 3.6rem; height: 3.6rem; border: none; background: #f3f5f9; border-radius: 50%; cursor: pointer; position: relative; } .m-legacy-header .m-legacy-close::before, .m-legacy-header .m-legacy-close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 1.6rem; height: 0.2rem; background: #1c2942; border-radius: 1px; } .m-legacy-header .m-legacy-close::before { transform: translate(-50%, -50%) rotate(45deg); } .m-legacy-header .m-legacy-close::after { transform: translate(-50%, -50%) rotate(-45deg); } /* ============================================ Add Design / Clipart / Word Art modal — full-screen mobile sheet ============================================ */ body.m-mode .images_modal { z-index: 300; background: rgba(0, 0, 0, 0.5); padding: 0; } body.m-mode .images_modal .modal_wrap { margin: 0; width: 100%; height: 100vh; max-height: 100vh; flex-direction: column; border-radius: 0; overflow: hidden; background: #fff; } /* hide desktop sider; we use a tab strip instead */ body.m-mode .images_modal .layout_sider { display: none !important; } body.m-mode .images_modal .main { flex: 1; overflow: hidden; padding: 0; display: flex; flex-direction: column; } body.m-mode .images_modal .table-list-it { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 1.4rem 1.4rem 2rem; } body.m-mode .images_modal .list-it { display: none; } body.m-mode .images_modal .list-it.active { display: block; } /* Mobile tab strip injected by mobile-app.js */ body.m-mode .images_modal .m-images-tabs { display: flex; gap: 0.6rem; padding: 1rem 1.4rem; background: #fafbfd; border-bottom: 1px solid #ececec; flex-shrink: 0; } body.m-mode .images_modal .m-images-tabs button { flex: 1; padding: 1rem 0.6rem; background: #fff; border: 1px solid #d4d9e3; border-radius: 0.8rem; font-size: 1.3rem; font-weight: 500; color: #5a6a85; cursor: pointer; } body.m-mode .images_modal .m-images-tabs button.active { color: #fff; background: var(--primary); border-color: var(--primary); } /* Upload tab */ body.m-mode .images_modal .upload-title { font-size: 1.4rem; font-weight: 600; color: #0c1b54; margin-bottom: 1rem; } body.m-mode .images_modal .upload-area { padding: 2.5rem 1.6rem; min-height: 14rem; border: 2px dashed #c8d1e0; border-radius: 1.2rem; background: #fafbfd; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center; cursor: pointer; } body.m-mode .images_modal .upload-area .img { width: 5rem; height: auto; } body.m-mode .images_modal .upload-area p { font-size: 1.3rem; color: #5a6a85; margin: 0; } body.m-mode .images_modal .upload-history { margin-top: 1.6rem; } body.m-mode .images_modal .upload-history .history-title { font-size: 1.4rem; font-weight: 600; color: #0c1b54; margin-bottom: 1rem; } body.m-mode .images_modal .upload-history .list ul { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 1rem; list-style: none; padding: 0; margin: 0; } body.m-mode .images_modal .upload-history .list li { aspect-ratio: 1; border-radius: 0.8rem; overflow: hidden; border: 2px solid #ececec; background: #fff; cursor: pointer; position: relative; transition: border-color .2s; } body.m-mode .images_modal .upload-history .list li.active, body.m-mode .images_modal .upload-history .list li.selected { border-color: var(--primary); } body.m-mode .images_modal .upload-history .list li .img, body.m-mode .images_modal .upload-history .list li img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Clipart tab */ body.m-mode .images_modal .clipart .selects ul { display: flex; flex-direction: column; gap: 0.8rem; list-style: none; padding: 0; margin: 0 0 1rem; } body.m-mode .images_modal .clipart .selects li { width: 100%; } body.m-mode .images_modal .clipart .selects select { width: 100%; height: 4.2rem; border: 1px solid #d4d9e3; border-radius: 0.8rem; padding: 0 3rem 0 1.2rem; font-size: 1.3rem; color: #1c2942; background-color: #fff; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.2rem; appearance: none; -webkit-appearance: none; } body.m-mode .images_modal .clipart .list ul { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; list-style: none; padding: 0; margin: 0; } body.m-mode .images_modal .clipart .list li { aspect-ratio: 1; border-radius: 0.8rem; overflow: hidden; border: 1px solid #ececec; background: #fafbfd; cursor: pointer; padding: 0.6rem; } body.m-mode .images_modal .clipart .list li .img, body.m-mode .images_modal .clipart .list li img { width: 100%; height: 100%; object-fit: contain; display: block; } /* Word Art tab */ body.m-mode .images_modal .wordart_box { padding: 0; } body.m-mode .images_modal .wordart_box .header h1 { font-size: 1.8rem; color: #0c1b54; margin: 0 0 0.4rem; } body.m-mode .images_modal .wordart_box .header p { font-size: 1.25rem; color: #5a6a85; margin: 0 0 1.2rem; } body.m-mode .images_modal .wordart_box .container { flex-direction: column; gap: 1.2rem; padding: 0; } body.m-mode .images_modal .wordart_box .canvas-area { height: 22rem; width: 100%; flex: unset; border: 1px solid #ececec; border-radius: 0.8rem; background: #fff; overflow: hidden; position: sticky; top: 0rem; } body.m-mode .images_modal .wordart_box .canvas-area canvas { width: 100% !important; height: 100% !important; display: block; } body.m-mode .images_modal .wordart_box .control-panel { padding: 0; width: 100%; box-shadow: none; } body.m-mode .images_modal .wordart_box .input-group { margin-bottom: 0.8rem; } body.m-mode .images_modal .wordart_box .input-group input { width: 100%; height: 4rem; border: 1px solid #d4d9e3; border-radius: 0.6rem; padding: 0 1.2rem; font-size: 1.3rem; } body.m-mode .images_modal .wordart_box .add-word-btn, body.m-mode .images_modal .wordart_box .mix-button { width: 100%; height: 4rem; border: 1px dashed #c8d1e0; border-radius: 0.6rem; background: #fff; color: var(--primary); font-size: 1.3rem; cursor: pointer; margin-bottom: 1rem; } body.m-mode .images_modal .wordart_box .mix-button { border-style: solid; background: #f3f5f9; color: #1c2942; } body.m-mode .images_modal .wordart_box .section { margin-bottom: 1rem; } body.m-mode .images_modal .wordart_box .section-title { font-size: 1.3rem; font-weight: 600; color: #0c1b54; margin-bottom: 0.6rem; display: block; } body.m-mode .images_modal .wordart_box .font-select { width: 100%; height: 4rem; border: 1px solid #d4d9e3; border-radius: 0.6rem; padding: 0 3rem 0 1.2rem; font-size: 1.3rem; background-color: #fff; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.2rem; appearance: none; -webkit-appearance: none; } body.m-mode .images_modal .wordart_box .color-picker { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.6rem; } body.m-mode .images_modal .wordart_box .color-option { aspect-ratio: 1; border-radius: 50%; overflow: hidden; cursor: pointer; border: 2px solid transparent; box-shadow: 0 0 0 1px #d4d9e3; } body.m-mode .images_modal .wordart_box .color-option.active { border-color: var(--primary); } body.m-mode .images_modal .wordart_box .zoom-slider { width: 100%; } body.m-mode .images_modal .wordart_box .action-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid #ececec; } body.m-mode .images_modal .wordart_box .action-buttons .btn { height: 4.4rem; border-radius: 0.8rem; border: 1px solid #d4d9e3; background: #fff; color: #1c2942; font-size: 1.3rem; font-weight: 500; cursor: pointer; } body.m-mode .images_modal .wordart_box .action-buttons .btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); } body.m-mode .images_modal .wordart_box .advanced-toggle { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; cursor: pointer; border-top: 1px solid #ececec; } /* ============================================ Pattern popup as bottom sheet (matches reference) ============================================ */ body.m-mode .pattern_popup { position: fixed !important; inset: 0 !important; width: 100% !important; height: 100% !important; padding: 0 !important; background: rgba(0, 0, 0, 0); display: flex; flex-direction: column; justify-content: flex-end; z-index: 280; pointer-events: none; } body.m-mode .pattern_popup.active { background: rgba(0, 0, 0, 0.4); pointer-events: auto; } body.m-mode .pattern_popup .pattern_wrap { border-radius: 1.6rem 1.6rem 0 0; padding: 0 1.6rem 6rem; background: #fff; max-width: 100%; width: 100%; box-sizing: border-box; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.12); max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } body.m-mode .pattern_popup .pattern_wrap::before { content: ''; display: block; width: 4rem; height: 0.4rem; background: #d4d9e3; border-radius: 0.2rem; margin: 1rem auto 1.4rem; } body.m-mode .pattern_popup .pattern_wrap.m-decorated::before { display: none; } body.m-mode .pattern_popup .pattern_wrap.m-decorated { padding-top: 0; } body.m-mode .pattern_popup .pattern_title { font-size: 1.5rem; font-weight: 700; color: #0c1b54; margin: 0 0 1rem; padding: 0; } /* hide the first "Pattern Type" title (replaced by injected header) keep "Pattern Tile width" title visible */ body.m-mode .pattern_popup .pattern_wrap.m-decorated > .pattern_title:first-of-type { display: none; } body.m-mode .pattern_popup ul { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; margin: 0 0 1.6rem; padding: 0; list-style: none; } body.m-mode .pattern_popup li { width: auto !important; height: auto !important; padding: 1rem 1.2rem !important; border-radius: 0.8rem !important; border: 1.5px solid #d4d9e3 !important; background: #fff !important; display: flex !important; align-items: center !important; gap: 0.8rem !important; cursor: pointer; transition: all .2s; flex-direction: column; } body.m-mode .pattern_popup li.active { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; } body.m-mode .pattern_popup li .img { width: 3rem !important; height: 3rem !important; flex-shrink: 0; padding-bottom: 0; margin: 0 !important; border: none !important; } body.m-mode .pattern_popup li.active .img img { filter: brightness(0) invert(1); } body.m-mode .pattern_popup li .name { font-size: 1.3rem !important; font-weight: 500 !important; color: #1c2942 !important; margin: 0 !important; text-align: left !important; } body.m-mode .pattern_popup li.active .name { color: #fff !important; } body.m-mode .pattern_popup .slider { display: flex; align-items: center; gap: 1rem; margin-top: 0.6rem; } body.m-mode .pattern_popup .slider input { flex: 1; height: 0.4rem; accent-color: var(--primary); } body.m-mode .pattern_popup .slider span { font-size: 1.2rem; color: #000000; min-width: 5rem; text-align: right; } /* ============================================ Effects popup as bottom sheet ============================================ */ body.m-mode .effets_popup { position: fixed !important; inset: 0 !important; width: 100% !important; height: 100% !important; padding: 0 !important; background: rgba(0, 0, 0, 0); display: flex; flex-direction: column; justify-content: flex-end; z-index: 280; pointer-events: none; } body.m-mode .effets_popup.active { background: rgba(0, 0, 0, 0.4); pointer-events: auto; } body.m-mode .effets_popup .effets_wrap { border-radius: 1.6rem 1.6rem 0 0; padding: 0 1.6rem 2rem; background: #fff; max-width: 100%; width: 100%; box-sizing: border-box; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.12); } body.m-mode .effets_popup .effets_wrap::before { content: ''; display: block; width: 4rem; height: 0.4rem; background: #d4d9e3; border-radius: 0.2rem; margin: 1rem auto 1.4rem; } body.m-mode .effets_popup .effets_wrap.m-decorated::before { display: none; } body.m-mode .effets_popup .effets_wrap.m-decorated { padding-top: 0; } body.m-mode .effets_popup .effets_title { font-size: 1.5rem; font-weight: 700; color: #0c1b54; margin: 0 0 1rem; padding: 0; } /* original "Effects Type" header is replaced by injected m-legacy-header */ body.m-mode .effets_popup .effets_wrap.m-decorated > .effets_title { display: none; } body.m-mode .effets_popup ul { display: flex !important; flex-direction: column; gap: 0.8rem; margin: 0; padding: 0; list-style: none; } body.m-mode .effets_popup li { padding: 1.4rem 1.6rem !important; border-radius: 1rem !important; border: 1.5px solid #d4d9e3 !important; background: #fff !important; cursor: pointer; display: flex !important; align-items: center !important; gap: 1rem !important; margin: 0 !important; } body.m-mode .effets_popup li.active { background: var(--primary) !important; border-color: var(--primary) !important; } body.m-mode .effets_popup li::before { content: ''; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid #b9c3d3; background: #fff; flex-shrink: 0; box-sizing: border-box; } body.m-mode .effets_popup li.active::before { border-color: #fff; background: var(--primary); box-shadow: inset 0 0 0 3px #fff; } body.m-mode .effets_popup li .name { font-size: 1.4rem !important; font-weight: 500 !important; color: #1c2942 !important; border: none; } body.m-mode .effets_popup li.active .name{ color: #ffffff !important; } .effets_popup ul .active .name{ background-color: var(--primary) !important; } /* ============================================ Background color sheet (Mobile) ============================================ */ .m-bg-body { padding: 0.4rem 0 0.8rem; } .m-bg-current { display: flex; align-items: center; gap: 1.2rem; padding: 1.2rem; background: #f3f5f9; border-radius: 1rem; margin-bottom: 1.6rem; } .m-bg-swatch { width: 4.4rem; height: 4.4rem; border-radius: 0.8rem; border: 1px solid #d4d9e3; flex-shrink: 0; background-image: linear-gradient(45deg, #ddd 25%, transparent 25%), linear-gradient(-45deg, #ddd 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ddd 75%), linear-gradient(-45deg, transparent 75%, #ddd 75%); background-size: 0.8rem 0.8rem; background-position: 0 0, 0 0.4rem, 0.4rem -0.4rem, -0.4rem 0px; } .m-bg-info { flex: 1; min-width: 0; } .m-bg-label { font-size: 1.2rem; color: #5a6a85; } .m-bg-hex { font-size: 1.5rem; color: #1c2942; font-weight: 600; } .m-bg-clear { background: #fff; border: 1px solid #d4d9e3; border-radius: 0.6rem; padding: 0.7rem 1.2rem; font-size: 1.2rem; color: #c83333; cursor: pointer; } .m-bg-presets-title, .m-bg-custom-title { font-size: 1.3rem; font-weight: 600; color: #0c1b54; margin: 1.4rem 0 0.8rem; } .m-bg-presets { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.8rem; } .m-bg-presets button { aspect-ratio: 1; border: 2px solid #d4d9e3; border-radius: 0.8rem; cursor: pointer; padding: 0; transition: transform .15s; } .m-bg-presets button.active { border-color: var(--primary); transform: scale(1.05); box-shadow: 0 0 0 2px rgba(28, 41, 66, 0.15); } .m-bg-custom { display: grid; grid-template-columns: 5rem 1fr; gap: 0.8rem; align-items: center; } .m-bg-custom input[type="color"] { width: 5rem; height: 4.4rem; border: 1px solid #d4d9e3; border-radius: 0.6rem; padding: 0.4rem; background: #fff; cursor: pointer; } .m-bg-custom input[type="text"] { height: 4.4rem; border: 1px solid #d4d9e3; border-radius: 0.6rem; padding: 0 1.2rem; font-size: 1.4rem; color: #1c2942; text-transform: lowercase; } .m-bg-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 1.6rem; } .m-bg-buttons button { height: 4.6rem; border-radius: 0.8rem; border: 1px solid #d4d9e3; background: #fff; color: #1c2942; font-size: 1.4rem; font-weight: 500; cursor: pointer; } .m-bg-buttons button.primary { background: var(--primary); color: #fff; border-color: var(--primary); } /* ============================================ Generic SELECT bottom sheet (replaces script.js .custom-popup) ============================================ */ body.m-mode .m-sheet[data-sheet="select"] .m-sheet-card { max-height: 70vh; } body.m-mode .m-sheet[data-sheet="select"] .m-sheet-body { padding: 0; max-height: calc(70vh - 6rem); overflow-y: auto; -webkit-overflow-scrolling: touch; } .m-select-list { list-style: none; margin: 0; padding: 0.6rem 0; } .m-select-list .m-select-opt { display: flex; align-items: center; padding: 1.4rem 2rem; font-size: 1.5rem; color: #1c2942; cursor: pointer; border-top: 1px solid #f1f3f7; user-select: none; } .m-select-list .m-select-opt:first-child { border-top: 0; } .m-select-list .m-select-opt:active { background: #f3f5f9; } .m-select-list .m-select-opt.active { color: var(--primary); font-weight: 600; background: #f3f7fb; } .m-select-list .m-select-opt.active::after { content: ''; margin-left: auto; width: 2rem; height: 2rem; background: url("data:image/svg+xml;utf8,") no-repeat center/contain; } /* Hide the legacy custom-popup on mobile so script.js's popup never appears */ body.m-mode .custom-popup { display: none !important; } /* preview modal sized for mobile */ body.m-mode .preview-modal { padding: 1.4rem; padding-top: 6rem; box-sizing: border-box; align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; } body.m-mode .preview-content { max-width: 100%; max-height: none; width: 100%; } /* Keep close button always visible even when content is tall */ body.m-mode .preview-close { position: fixed; top: 0.8rem; right: 0.8rem; top: 0.8rem; /* override absolute top: -50px */ } body.m-mode .preview-canvas-wrapper { max-height: 75vh; min-height: 75vh; background-color: transparent; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } body.m-mode .preview-canvas { display: block; /* width/height are set dynamically by JS — do not override with max-width/height:auto */ transition: width 0.2s ease, height 0.2s ease; } /* helpers */ .m-hide { display: none !important; } /* =================================================================== PATTERN PAGE — mobile shell (template-pattern.php) The pattern page has its own dedicated mobile shell (.m-app--pattern) because its information architecture differs from the design page: - Only TWO tabs (Options / Design) - The "Design" tab embeds a full pattern preview canvas + thumbs + tile-width slider, no dock / layers / fabric tools - "Help Me Decide" modal & a fullscreen pattern preview modal We reuse the .m-app / .m-topbar / .m-tabs / .m-content / .m-section / .m-sheet / .m-drawer primitives from the design shell above. ================================================================== */ /* Account & cart icons in the top bar */ .m-topbar .m-icon-btn { width: 4rem; height: 4rem; border: none; background: transparent; color: #1c2942; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 0.8rem; text-decoration: none; } .m-topbar .m-icon-btn:active { background: #f0f3f8; } .m-topbar .m-icon-account::before { content: ''; width: 2.2rem; height: 2.2rem; background: url("data:image/svg+xml;utf8,") no-repeat center/contain; } .m-topbar .m-icon-cart::before { content: ''; width: 2.2rem; height: 2.2rem; background: url("data:image/svg+xml;utf8,") no-repeat center/contain; } .m-topbar-actions { display: flex; align-items: center; gap: 0.4rem; } /* Pattern shell base */ .m-app--pattern { background: #eef2f8; } body.m-mode .m-app--pattern .m-topbar .m-title { text-align: left; } /* The two-tab variant centers the tabs */ .m-tabs.m-tabs--two .m-tab { font-size: 1.5rem; padding: 1.2rem 0.4rem; } /* Pattern panels share padding rules. Panel inner is borderless & backgroundless per user request — sections breathe directly on the page background instead of being wrapped in a card with a visible outline. We add bottom padding equal to the bottom-bar height so the last section (tile-width slider) is never hidden behind the fixed action bar. */ .m-app--pattern .m-content { padding: 1.2rem 1.4rem 0; background-color: #ffffff; } .m-app--pattern .m-panel { display: none; padding: 0; background: transparent; } .m-app--pattern .m-panel.active { display: block; } /* IMPORTANT: the generic rule for `.m-panel[data-panel="design"]` (around line 687) locks the design panel to viewport height with `overflow: hidden` for the template-design.php canvas-and-dock layout. On the pattern page (`.m-app--pattern`) the design panel is just a normal scrollable list of sections (canvas card, type buttons, tile width slider, ...), so we must override those constraints — otherwise sections at the bottom of the design tab (e.g. `.m-mp-tile-section`) get clipped off-screen and the user can never scroll to them. */ .m-app--pattern .m-panel[data-panel="design"] { height: auto; min-height: 0; overflow: visible; display: none; flex-direction: row; background: transparent; } .m-app--pattern .m-panel[data-panel="design"].active { display: block; } .m-app--pattern .m-panel-inner { background: transparent; border-radius: 0; box-shadow: none; padding: 0; margin: 0 0 1.4rem; } /* Reserve room at the bottom of each panel so the fixed bottom bar (~12rem when the note is shown) doesn't cover content. */ .m-app--pattern .m-panel[data-panel="options"] .m-panel-inner { padding-bottom: 14rem; } .m-app--pattern .m-panel[data-panel="design"] .m-panel-inner { padding-bottom: 14rem; } /* Hide the bottom border under the tabs strip — the user marked it as visual noise; tabs are clearly delimited by their own active-state underline. */ body.m-mode .m-app--pattern .m-tabs { border-bottom: 0; box-shadow: none; } /* Section primitives (also used by some controls below) */ .m-app--pattern .m-section { padding: 1.4rem 0; } .m-app--pattern .m-section:first-child { padding-top: 0; } .m-app--pattern .m-section:last-child { padding-bottom: 0; } .m-app--pattern .m-section h2, .m-app--pattern .m-section h3 { margin: 0 0 1.2rem; font-size: 1.5rem; font-weight: 700; color: #1c2942; } .m-app--pattern .m-section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .m-app--pattern .m-section-head h2, .m-app--pattern .m-section-head h3 { margin: 0; } .m-app--pattern .m-section-divider { border: 0; border-top: 1px solid #ececec; margin: 1.4rem 0; } .m-app--pattern .m-help-link { color: var(--primary); text-decoration: underline; font-size: 1.3rem; font-weight: 500; cursor: pointer; } /* === OPTIONS PANEL: fabric type === */ /* Hide the relocated native /