/* * LuminaCloud — Page Editor styles * * Cache-buster: ?v=5 (bumped Phase 3r — coordinated with * page-editor.js?v=9 + builtin-tile-customizer.js?v=1). * * Loaded by every user-created page. Defines the tile-grid base, the * Web Dev affordances (⋯ button, drag state, "+" creation tile), and * the tile-edit modal (with icon picker). Keyed off body.web-dev-active * so non-editors see a read-only tile grid and nothing else. */ /* ── Tile grid base ───────────────────────────────────────────────────── */ .quick-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; } .qa{ position:relative; background:var(--surface); border:var(--bubble-border); border-radius:var(--r); padding:18px 16px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; cursor:pointer; transition:box-shadow .15s, border-color .15s; box-shadow:var(--bubble-shadow); min-height:96px; } .qa:hover{ border-color:rgba(0,0,0,0.12); box-shadow:0 4px 16px rgba(0,0,0,0.1); } .qa-icon{ width:36px;height:36px; border-radius:var(--r-sm); background:var(--red-pale); color:var(--red); display:flex;align-items:center;justify-content:center; } .qa-icon svg{width:20px;height:20px} .qa-label{font-size:13px;font-weight:700;line-height:1.25} .qa-sub{ font-size:10px; font-family:var(--mono); color:var(--dim); text-transform:uppercase; letter-spacing:.05em; } /* Empty state — shown on a new page when no tiles yet AND no edit mode. */ .page-empty{ grid-column:1/-1; padding:48px 20px; text-align:center; font-family:var(--mono); font-size:12px; color:var(--dim); background:var(--surface); border:1px dashed var(--border); border-radius:var(--r); } /* ── ⋯ overflow button (Web Dev Mode only) ────────────────────────────── */ /* Phase 3k consistency — ⋯ lives in the LOWER right corner of every tile across the app (home, user pages, hub pages, accounts). Keeps the editing affordance in one predictable spot for users. */ .qa-more{ position:absolute; bottom:8px; right:8px; width:24px; height:24px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; border-radius:var(--r-sm); color:var(--dim); cursor:pointer; font-weight:700; font-family:var(--display); font-size:16px; line-height:1; opacity:0; transition:opacity .15s, background .15s, color .15s; } .qa:hover .qa-more, .qa-more:focus, .qa-more.open{opacity:1} .qa-more:hover{background:var(--surface2); color:var(--text)} @media(hover:none){ .qa-more{opacity:.7} } /* Shared overflow popover — one instance, appended to on first use. */ .tile-menu{ position:absolute; z-index:900; min-width:140px; background:var(--surface); border:var(--bubble-border); border-radius:var(--r-sm); box-shadow:var(--bubble-shadow); padding:4px; display:none; } .tile-menu.visible{display:block} .tile-menu button{ display:block; width:100%; text-align:left; padding:8px 12px; border:none; background:transparent; font-family:var(--display); font-size:13px; color:var(--text); cursor:pointer; border-radius:var(--r-sm); } .tile-menu button:hover{background:var(--surface2)} .tile-menu button.danger{color:var(--red)} .tile-menu button.danger:hover{background:var(--red); color:#fff} /* Drag state — same pattern the home page uses. */ body.web-dev-active .qa-pagetile{cursor:grab} body.web-dev-active .qa-pagetile:active{cursor:grabbing} .qa-dragging{opacity:.4} .qa-drop-target{outline:2px solid var(--purple); outline-offset:-2px} /* Cross-section drop highlight — applied to a destination grid when a tile from another grid is dragged over its bare background. The same purple outline as a per-tile drop target, but framing the whole grid so the user sees the destination zone. */ .qa-grid-drop-target{ outline:2px dashed var(--purple); outline-offset:4px; border-radius:var(--r-sm); } /* Phase 3i — shared tile-drag.js wires up draggable tiles inside any row that opts in. Two opt-in markers exist: • .quick-row[data-row] — hub page tile rows (curated ) • [data-tile-drag-row] — generic grids, e.g. accounts page's .acc-grid with [data-slug] cards Keep the cursor affordance in sync with the user-tile drag above. Direct-child selectors so descendants nested deep inside don't get styled — only the row's immediate children. */ body.web-dev-active .quick-row[data-row] > .qa[draggable="true"], body.web-dev-active [data-tile-drag-row] > [draggable="true"][data-slug]{cursor:grab} body.web-dev-active .quick-row[data-row] > .qa[draggable="true"]:active, body.web-dev-active [data-tile-drag-row] > [draggable="true"][data-slug]:active{cursor:grabbing} /* ── "+" creation tile ────────────────────────────────────────────────── */ .qa-new{ border:2px dashed var(--border); background:transparent; box-shadow:none; color:var(--dim); transition:border-color .15s, color .15s, background .15s; } .qa-new:hover{ border-color:var(--red); color:var(--red); background:var(--surface); } .qa-new .qa-icon{ background:transparent; color:inherit; font-size:28px; font-weight:300; line-height:1; } .qa-new-label{ font-size:11px; font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; color:inherit; } /* CSS gates — hide all edit affordances when mode is off. */ body:not(.web-dev-active) .qa-more, body:not(.web-dev-active) .qa-new{ display:none !important; } /* ── Tile-edit modal ──────────────────────────────────────────────────── */ .modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:1000; display:none; align-items:center; justify-content:center; } .modal-overlay.visible{display:flex} .modal{ background:var(--surface); border:1px solid var(--border); border-radius:var(--modal-r); padding:24px 28px; width:100%; max-width:460px; max-height:90vh; overflow-y:auto; box-shadow:var(--modal-shadow); } .modal-title{font-size:16px;font-weight:700;margin-bottom:4px} .modal-sub{font-size:11px;color:var(--dim);font-family:var(--mono);margin-bottom:20px} .modal-field{margin-bottom:14px} .modal-label{ font-size:11px; font-weight:600; font-family:var(--mono); color:var(--dim); text-transform:uppercase; letter-spacing:.06em; margin-bottom:5px; } .modal-input{ width:100%; padding:8px 12px; border:1px solid var(--border); border-radius:var(--r-sm); font-family:var(--mono); font-size:13px; background:var(--surface2); color:var(--text); outline:none; transition:border-color .15s; } .modal-input:focus{box-shadow:var(--focus-ring)} .modal-error{ font-size:11px; color:var(--red); font-family:var(--mono); margin-top:6px; min-height:14px; } .modal-footer{ display:flex; gap:8px; justify-content:flex-end; margin-top:20px; padding-top:16px; border-top:1px solid var(--border); } .btn-modal-cancel{ padding:7px 16px; border-radius:var(--r-sm); font-family:var(--display); font-size:13px; font-weight:600; cursor:pointer; background:var(--surface); color:var(--muted); border:1px solid var(--border); } .btn-modal-cancel:hover{color:var(--text)} .btn-modal-save{ padding:7px 16px; border-radius:var(--r-sm); font-family:var(--display); font-size:13px; font-weight:600; cursor:pointer; background:var(--red); color:#fff; border:none; transition:filter .15s; } .btn-modal-save:hover{filter:brightness(1.08)} .btn-modal-save:disabled{opacity:.5;cursor:not-allowed;filter:none} /* ── Kind picker (chip row) ───────────────────────────────────────────── */ /* * Three radio-style chips at the top of the create modal: "LuminaCloud page", * "External URL", "Sub-page". Picking one swaps the kind-specific fields * below (page dropdown / url input / slug input). Edit mode hides the row * entirely via .modal.is-editing — kind is set at creation and stays put. */ .kind-options{ display:flex; flex-wrap:wrap; gap:6px; } .kind-opt{ flex:1 1 0; min-width:90px; padding:10px 10px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface2); color:var(--muted); font-family:var(--display); font-size:12px; font-weight:600; cursor:pointer; text-align:center; transition:all .12s; } .kind-opt:hover{border-color:var(--red); color:var(--text)} .kind-opt.active{ background:var(--red); color:#fff; border-color:var(--red); } .kind-opt .kind-sub{ display:block; font-family:var(--mono); font-weight:400; font-size:10px; color:inherit; opacity:.8; margin-top:2px; letter-spacing:.04em; text-transform:lowercase; } /* Kind-specific field groups — only one is visible at a time, switched by adding / removing .visible based on the selected kind. */ .kind-panel{display:none} .kind-panel.visible{display:block} .modal-hint{ font-size:11px; color:var(--dim); font-family:var(--mono); margin-top:6px; line-height:1.4; } .modal-select{ width:100%; padding:8px 12px; border:1px solid var(--border); border-radius:var(--r-sm); font-family:var(--mono); font-size:13px; background:var(--surface2); color:var(--text); outline:none; } .modal-select:focus{box-shadow:var(--focus-ring)} /* ── Searchable page picker (Phase 3d) ───────────────────────────────── */ /* * Replaces the old