/* ============================================================================ Conversion popup (Q88 questionnaire) — Figma 62:10748 Re-skins the AjaxToolkit PopupControlExtender that opens next to the `qConvertUnit` trigger on questionnaire fields (Controls/Converter.ascx). Same legacy "corner-image-table" chrome as the date picker / history popups (.tL/.tM/.tClose/.tR + .contentL/.content/.contentR + .bL/.bM/.bR). We hide that chrome and lay out a flat Figma card. Scope: :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup The marker class is added in Converter.ascx; refreshed pages opt in by adding their body class to the :is() list above. page-fleetreport joined for the FleetReportList Edit-Vessel inline form (QEN-8776). Pages still NOT opted in (Vessel info, Mooring) keep the legacy popup. ========================================================================== */ :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup { width: 320px !important; /* override inline 215px */ max-width: 320px !important; background: #ffffff; /* `!important` required to beat inline `style="...border:none;"` on the outer in Converter.ascx. */ border: 1px solid var(--raw-slate-200, #e2e8f0) !important; border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -1px rgba(0,0,0,0.10); padding: 16px !important; box-sizing: border-box; border-collapse: separate; border-spacing: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--text-primary); position: relative; /* anchors absolute .tClose */ } /* Inside the EditQuestionAnswer popup the AjaxToolkit PopupControlExtender uses Position="right" + OffsetX="-200" globally (tuned for full-width host pages); inside the narrower iframe that overshoots the right edge. Shift the card left via transform so it lands directly under the trigger, fully inside the iframe. Vertical clipping (popup taller than the 375px iframe) is handled by Scripts/Q88.EditQAIframeResize.js, which grows both iframes to reveal the whole popup — keeping it anchored directly below the control. Scoped to popup-edit-qa only so the host-page placement is untouched. */ body.popup-edit-qa .q88-conv-popup { transform: translateX(-120px); } /* Force Inter inside the card — legacy `.toolTipPopupContainer .tM` and other descendants inherit `font-family: tahoma...` from MainWhiteout.css. */ :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup, :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup .tM, :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup .content, :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup .content table td, :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup .content > div:last-child > a { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* -------------------------------------------------------------------------- Hide all legacy corner-image chrome + the bottom decoration row -------------------------------------------------------------------------- */ :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup .pointerTl, :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup .pointerTr, :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup .pointerBr, :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup .tL, :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup .tR, :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup .contentL, :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup .contentR, :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup .bL, :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup .bM, :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup .bR { display: none !important; } /* Whole bottom-chrome row */ :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup > tbody > tr:last-child { display: none !important; } /* Outer table wrapper cells — strip padding/border, transparent bg */ :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup > tbody > tr > td { padding: 0 !important; border: 0 !important; background: transparent !important; } :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup > tbody > tr > td > table { width: 100% !important; border-collapse: collapse; } :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup > tbody > tr > td > table > tbody > tr > td { padding: 0 !important; border: 0 !important; background: transparent !important; } /* -------------------------------------------------------------------------- Header row: "Conversion" title + Lucide X close -------------------------------------------------------------------------- */ /* The .tM cell holds the title. `margin: 0 !important` beats MainWhiteout `.toolTipPopupContainer .tM { margin: 0 16px 0 15px }`. */ :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup .tM { display: block !important; margin: 0 !important; padding: 0 24px 12px 0 !important; /* 24px right reserves room for X */ background: transparent !important; border: 0 !important; width: auto !important; height: auto !important; font-size: 16px; line-height: 24px; font-weight: 700; color: #0f172a; text-align: left !important; } /* The .tClose cell — Lucide X glyph, absolute positioned top-right */ :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup .tClose { display: block !important; position: absolute; top: 16px; right: 16px; width: 16px; height: 16px; background: transparent !important; border: 0 !important; padding: 0 !important; cursor: pointer; color: #475569; } :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup .tClose::before { content: ""; display: block; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / 16px; mask: url("data:image/svg+xml;utf8,") no-repeat center / 16px; } :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup .tClose:hover { color: #0f172a; } /* -------------------------------------------------------------------------- Body: input rows + Save/Cancel actions `padding: 0 !important` on .content overrides legacy `.content { padding: 5px }`. `max-height: none` + `overflow: visible` override MainWhiteout.css:2941 `.toolTipPopupContainer .content { max-height: 235px; overflow: auto }` which clipped the Weight view (7 rows = ~310px) to 235px with a scrollbar. -------------------------------------------------------------------------- */ :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup .content { padding: 0 !important; background-color: transparent !important; text-align: left; color: #0f172a; max-height: none !important; overflow: visible !important; } /* The unit-conversion tables (one per MultiView active view) */ :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup .content table { width: 100% !important; border-collapse: separate; border-spacing: 0 8px; /* 8px vertical gap between rows */ margin: 0 !important; } :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup .content table td { padding: 0 !important; border: 0 !important; background: transparent !important; vertical-align: middle; text-align: left !important; } /* Input cell */ :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup .content table td:first-child { width: 160px; padding-right: 10px !important; } /* Unit-label cell */ :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup .content table td:nth-child(2) { font-size: 13px; line-height: 1; color: #1a1a1a; white-space: nowrap; } /* Inputs — Figma input chip: 160 × 36, slate-200 border, 8px radius. `--raw-slate-200` (not `--border-input`) — the project's `--border-input` resolves to `#adadad` in the legacy theme, not Figma's `base/border #e2e8f0`. */ :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup .content input[type="text"], :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup .content input.NumericAlignedRight { width: 160px !important; height: 36px !important; padding: 4px 12px !important; margin: 0 !important; border: 1px solid var(--raw-slate-200, #e2e8f0) !important; border-radius: 8px !important; background: var(--input-background, #ffffff) !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px !important; line-height: 20px !important; font-weight: 500 !important; color: var(--text-primary, #0f172a) !important; box-sizing: border-box; text-align: right !important; box-shadow: none !important; float: none !important; } :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup .content input[type="text"]:focus, :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup .content input.NumericAlignedRight:focus { outline: none !important; border-color: var(--brand-primary) !important; box-shadow: 0 0 0 2px rgba(var(--primary-tint), 0.20) !important; } /* -------------------------------------------------------------------------- Save / Cancel button row. Legacy markup is `  |  ` in a float:right div. `font-size: 0` on the wrapper hides the ` | ` text node; children reset to 14px. flex with gap supplies the spacing. -------------------------------------------------------------------------- */ :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup .content > div:last-child { display: flex !important; align-items: center; justify-content: flex-end; gap: 11px; padding: 16px 0 0 0 !important; margin: 0 !important; float: none !important; font-size: 0; /* hides  |  text node */ } /* Save (LinkButton) + Cancel (HyperLink) — both render as `` */ :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup .content > div:last-child > a { display: inline-flex !important; align-items: center; justify-content: center; height: 36px; padding: 8px 16px !important; border-radius: 8px !important; font-size: 14px !important; line-height: 20px; font-weight: 500; text-decoration: none !important; box-sizing: border-box; border: 0 !important; cursor: pointer; } /* Save = primary teal. The `:not(#__x__)` on body is an ID-specificity hack — it adds 1 ID worth of specificity without depending on any real parent ID. This is needed to beat questionnaire.css:742 `:is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) #tblQuestionnaire a:not(:has(img)) { color: var(--text-link) !important }` (specificity 0,1,1,3) which paints every in-row anchor teal-600 — on a teal-600 button background that makes Save text invisible. The popup exists in TWO locations: the per-row Converter.ascx instances (inside #tblQuestionnaire) AND the shared `ucConverterA` dummy popup (CreateQuestionnaire.ascx:718, OUTSIDE #tblQuestionnaire — used by most rows whose unit click routes here). A selector that includes `#tblQuestionnaire` would only fix the first set; the `:not(#__x__)` trick fixes both. Final specificity: (0,1,5,3) — beats the broad rule on class count after ID tie. */ :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport):not(#__x__) .q88-conv-popup .content > div:last-child > a[id$="_hlkSave"] { background-color: var(--brand-primary) !important; color: #eff6ff !important; } :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport):not(#__x__) .q88-conv-popup .content > div:last-child > a[id$="_hlkSave"]:hover { background-color: var(--button-primary-hover) !important; color: #eff6ff !important; } /* Cancel = secondary slate */ :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport):not(#__x__) .q88-conv-popup .content > div:last-child > a[id$="_hlkCancel"] { background-color: var(--raw-slate-100, #f1f5f9) !important; color: #1e293b !important; } :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport):not(#__x__) .q88-conv-popup .content > div:last-child > a[id$="_hlkCancel"]:hover { background-color: var(--border-default) !important; color: var(--text-primary) !important; } /* LinkButton renders ` ` before its content — becomes a flex item inside the inline-flex `` and shifts the label right. See linkbutton-ins-spacer-trap.md. */ :is(body.page-questionnaire, body.popup-edit-qa, body.page-fleetreport) .q88-conv-popup .content > div:last-child > a > ins { display: none !important; }