/* ========================================================================== ships-search.css — body.page-ships-search -------------------------------------------------------------------------- Q88 Dry "Vessel Search" (friendly URL /Ships.aspx, DNN-routed). Unlike the wet Q88 portal — which serves Vessel Search at /Q88Search.aspx via the Q88Search.ascx module (pnlSearchCriteria + ASPxGridView Grid2, skinned by q88search.css + vesselSearchAdvanced.css under body.page-q88search) — the Dry portal renders DesktopModules/Q88/CustomSearchV2.ascx ("Baltic99 Search"). That module has DIFFERENT markup, so the q88search.css rules never match and the page rendered fully legacy. This file re-skins CustomSearchV2. Both sub-views render on the SAME path (/Ships.aspx), so one body class covers both: • Form view (?c=1) cpMain ModuleTemplateV2 → table.StdTable.BorderV2Bottom + tr.SubHeader2 (Question | Criteria) + tr#trSearch rows (label + input) • Results view (?c=1&v=result) modView ModuleTemplateV2 → table.StdTable (DataGrid dgVessel) + tr.ColHeader / tr.Alt / tr.Pager Grid treatment matches the canonical StdTable data-grid skin (DESIGN.md §5 / q88status.css §1-4, body.page-q88status — the sibling Dry Fleet Status grid): the .modV2 CARD owns the single frame (1px border, 8px radius, 16px inner padding) and the inner table is border-less — header band 48h #f5f5f5 / #0f172a 14·500, data rows 42h 14·400 with 1px #e2e8f0 separators, no zebra, hover only. Footer Clear/Search LinkButtons are coloured by the global components.css .LinkButton skin; we only lay out the footer container here. box-sizing:border-box on the padded slots (§2/§3/§7) is load-bearing: without it the content-box default + horizontal padding overflows the card to the right (off-screen results "Search" button + criteria-form horizontal scroll). Routed in MasterTemplates/Default.master.cs (Ships.aspx → page-ships-search). ========================================================================== */ /* -------------------------------------------------------------------------- 1. ModuleTemplateV2 card chrome (cpMain form + modView results) navigation.css L658 forces `.sidebar-nav .modV2 { width:100% }`; box-sizing border-box + 48px side margin needs `width:auto` to constrain inside .q88-content (same trap documented in admin-qa-pages.css §B.1). -------------------------------------------------------------------------- */ body.page-ships-search .modV2 { display: block !important; background-color: var(--card-raised, var(--surface-raised, #ffffff)) !important; border: 1px solid var(--border-default, var(--input, #e2e8f0)) !important; border-radius: 8px !important; box-shadow: none !important; margin: 24px 48px !important; padding: 0 !important; box-sizing: border-box !important; width: auto !important; max-width: none !important; min-width: 0 !important; text-align: left !important; } /* Flatten the ModuleTemplateV2 layout table (direct child of .modV2) so the Title / Main / Footer slots stack as blocks. `>` keeps this off the nested StdTable form/grid inside .modV2Main. */ body.page-ships-search .modV2 > table, body.page-ships-search .modV2 > table > tbody, body.page-ships-search .modV2 > table > tbody > tr, body.page-ships-search .modV2 > table > tbody > tr > td { display: block !important; width: 100% !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; background-image: none !important; } body.page-ships-search > .q88-content br { display: none !important; } /* -------------------------------------------------------------------------- 2. Title bar — .modV2TitleContainer > .modV2Title (+ legacy .PageTitle span) + .modV2TRight (PopupMenu actions) box-sizing:border-box is REQUIRED: the slot defaults to content-box, and with horizontal padding the flex row would render `card-width + padding`, overflowing the card to the right (pushes the results "Search" button off the right edge). Same omission on §3/§7 caused the criteria-form overflow. -------------------------------------------------------------------------- */ body.page-ships-search .modV2 .modV2TitleContainer { box-sizing: border-box !important; background: transparent !important; background-image: none !important; border: 0 !important; border-bottom: 1px solid var(--border-default, #e2e8f0) !important; padding: 16px 20px !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; min-height: auto !important; height: auto !important; } body.page-ships-search .modV2 .modV2Title, body.page-ships-search .modV2 .modV2Title .PageTitle { background: transparent !important; background-image: none !important; color: var(--text-strong, #0f172a) !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 18px !important; line-height: 28px !important; font-weight: 600 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; text-transform: none !important; text-shadow: none !important; float: none !important; display: block !important; text-align: left !important; } body.page-ships-search .modV2 .modV2TRight { background: transparent !important; background-image: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; float: none !important; display: flex !important; align-items: center !important; gap: 8px !important; } body.page-ships-search .modV2 .modV2TRight:empty { display: none !important; } /* SubHeader slot is unused by CustomSearchV2 — collapse it if present. */ body.page-ships-search .modV2 .modV2SubHeader:empty { display: none !important; } /* -------------------------------------------------------------------------- 3. Main body slot. padding:16px insets the table 16px inside the card (the "16px around the table" inset from DESIGN.md §5.1 — matches the Fleet Status grid card, which uses .modV2{padding:16px}). The criteria Repeater renders with MainNoPadding="true", which we override here for the same inset. -------------------------------------------------------------------------- */ body.page-ships-search .modV2 .modV2Main { box-sizing: border-box !important; background: transparent !important; background-image: none !important; border: 0 !important; padding: 16px !important; margin: 0 !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px !important; line-height: 20px !important; color: var(--text-primary, #0f172a) !important; text-align: left !important; } /* -------------------------------------------------------------------------- 4. FORM view — table.StdTable.BorderV2Bottom tr.SubHeader2 (Question | Criteria column header) tr#trSearch (label cell + answer/input cell) -------------------------------------------------------------------------- */ body.page-ships-search .modV2Main table.StdTable.BorderV2Bottom { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; background: transparent !important; /* No own frame — the .modV2 card border is the single boundary (matches the Fleet Status grid). `border:0` also kills the navy bottom rule that the BorderV2Bottom class adds via MainWhiteout.css. */ border: 0 !important; border-radius: 0 !important; overflow: visible !important; margin: 0 !important; table-layout: auto !important; } /* Column-header band (was legacy navy SubHeader2) — canonical grid header. */ body.page-ships-search .modV2Main table.StdTable.BorderV2Bottom > tbody > tr.SubHeader2, body.page-ships-search .modV2Main table.StdTable.BorderV2Bottom > tbody > tr.SubHeader2 > td { background: var(--surface-muted, #f5f5f5) !important; background-color: var(--surface-muted, #f5f5f5) !important; color: var(--text-strong, #0f172a) !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px !important; line-height: 1 !important; font-weight: 500 !important; text-transform: none !important; text-shadow: none !important; height: 48px !important; padding: 0 16px !important; border: 0 !important; border-bottom: 1px solid var(--border-default, #e2e8f0) !important; text-align: left !important; vertical-align: middle !important; } /* Criteria rows — 8px vertical padding gives the 32px inputs breathing room (form rows aren't fixed-height data rows). */ body.page-ships-search .modV2Main table.StdTable.BorderV2Bottom > tbody > tr:not(.SubHeader2) > td { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--border-default, #e2e8f0) !important; color: var(--text-strong, #0f172a) !important; font-size: 14px !important; line-height: 20px !important; font-weight: 400 !important; padding: 8px 16px !important; vertical-align: middle !important; text-shadow: none !important; } body.page-ships-search .modV2Main table.StdTable.BorderV2Bottom > tbody > tr:last-child > td { border-bottom: 0 !important; } /* First column = question label. */ body.page-ships-search .modV2Main table.StdTable.BorderV2Bottom > tbody > tr:not(.SubHeader2) > td:first-child { color: var(--text-strong, #0f172a) !important; font-weight: 500 !important; white-space: nowrap !important; width: 1%; padding-right: 32px !important; } /* -------------------------------------------------------------------------- 5. RESULTS view — table.StdTable (DataGrid dgVessel), NO .BorderV2Bottom tr.ColHeader (column header), tr.Pager (pager). The DataGrid also emits tr.Alt rows, but per DESIGN.md §5.4 / the Fleet Status grid we do NOT zebra-stripe — row separators + hover only — so tr.Alt is left untouched. -------------------------------------------------------------------------- */ body.page-ships-search .modV2Main table.StdTable:not(.BorderV2Bottom) { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; background: transparent !important; /* No own frame — the .modV2 card border is the single boundary. */ border: 0 !important; border-radius: 0 !important; overflow: visible !important; margin: 0 !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px !important; line-height: 20px !important; color: var(--text-primary, #0f172a) !important; table-layout: auto !important; } /* 5a. Header row (tr.ColHeader) — canonical grid header (48h, dark label). */ body.page-ships-search .modV2Main table.StdTable:not(.BorderV2Bottom) > tbody > tr.ColHeader, body.page-ships-search .modV2Main table.StdTable:not(.BorderV2Bottom) > tbody > tr.ColHeader > td, body.page-ships-search .modV2Main table.StdTable:not(.BorderV2Bottom) > tbody > tr.ColHeader > th { background: var(--surface-muted, #f5f5f5) !important; background-color: var(--surface-muted, #f5f5f5) !important; color: var(--text-strong, #0f172a) !important; font-size: 14px !important; line-height: 1 !important; font-weight: 500 !important; text-transform: none !important; text-shadow: none !important; height: 48px !important; padding: 0 16px !important; border: 0 !important; border-bottom: 1px solid var(--border-default, #e2e8f0) !important; text-align: left !important; vertical-align: middle !important; white-space: nowrap !important; } body.page-ships-search .modV2Main table.StdTable:not(.BorderV2Bottom) > tbody > tr.ColHeader a { color: inherit !important; text-decoration: none !important; } /* Header alignment must follow each column's DATA alignment (DESIGN.md §5.9: text=left, numeric/date=right, icon/bool=center). The DataGrid already emits the correct per-column `align` attr on BOTH header and data s and the data cells honour it — but the blanket `text-align:left` above overrides the header's align, so numeric headers (Dwt/LOA/Beam/Draft) drift left of their right-aligned values. Re-assert the markup alignment on the header (higher specificity via [align] + !important beats the left default above). */ body.page-ships-search .modV2Main table.StdTable:not(.BorderV2Bottom) > tbody > tr.ColHeader > td[align="right"], body.page-ships-search .modV2Main table.StdTable:not(.BorderV2Bottom) > tbody > tr.ColHeader > th[align="right"] { text-align: right !important; } body.page-ships-search .modV2Main table.StdTable:not(.BorderV2Bottom) > tbody > tr.ColHeader > td[align="center"], body.page-ships-search .modV2Main table.StdTable:not(.BorderV2Bottom) > tbody > tr.ColHeader > th[align="center"] { text-align: center !important; } /* 5b. Data rows — 42h, no zebra (DESIGN.md §5.4: row separator + hover only), matching the Fleet Status grid. Guard against .ColHeader / .Pager so the treatment never bleeds onto the header or pager rows. */ body.page-ships-search .modV2Main table.StdTable:not(.BorderV2Bottom) > tbody > tr:not(.ColHeader):not(.Pager) > td { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--border-default, #e2e8f0) !important; color: var(--text-strong, #0f172a) !important; font-size: 14px !important; line-height: 20px !important; font-weight: 400 !important; padding: 0 16px !important; height: 42px !important; vertical-align: middle !important; text-shadow: none !important; } /* Drop the separator on the last data row so it sits flush with the card. */ body.page-ships-search .modV2Main table.StdTable:not(.BorderV2Bottom) > tbody > tr:not(.ColHeader):not(.Pager):last-child > td { border-bottom: 0 !important; } body.page-ships-search .modV2Main table.StdTable:not(.BorderV2Bottom) > tbody > tr:not(.ColHeader):not(.Pager):hover > td { background-color: var(--surface-row-hover, #f8fafc) !important; } /* Header always wins over hover/alt. */ body.page-ships-search .modV2Main table.StdTable:not(.BorderV2Bottom) > tbody > tr.ColHeader:hover > td, body.page-ships-search .modV2Main table.StdTable:not(.BorderV2Bottom) > tbody > tr.ColHeader:hover > th { background-color: var(--surface-muted, #f8fafc) !important; } /* Vessel-name links. */ body.page-ships-search .modV2Main table.StdTable:not(.BorderV2Bottom) > tbody > tr > td a:not(.LinkButton) { color: var(--primary, #0d9488) !important; text-decoration: none !important; font-weight: 500 !important; } body.page-ships-search .modV2Main table.StdTable:not(.BorderV2Bottom) > tbody > tr > td a:not(.LinkButton):hover { text-decoration: underline !important; } /* 5c. Pager row (tr.Pager) — distinct from admin-list's tr.Header. */ body.page-ships-search .modV2Main table.StdTable:not(.BorderV2Bottom) > tbody > tr.Pager, body.page-ships-search .modV2Main table.StdTable:not(.BorderV2Bottom) > tbody > tr.Pager > td { background: var(--surface-muted, #f5f5f5) !important; background-color: var(--surface-muted, #f5f5f5) !important; color: var(--text-muted, #475569) !important; font-size: 13px !important; line-height: 18px !important; font-weight: 500 !important; height: 40px !important; padding: 8px 16px !important; border: 0 !important; border-bottom: 1px solid var(--border-default, #e2e8f0) !important; text-align: left !important; } body.page-ships-search .modV2Main table.StdTable:not(.BorderV2Bottom) > tbody > tr.Pager a { color: var(--primary, #0d9488) !important; text-decoration: none !important; padding: 0 6px !important; font-weight: 600 !important; } body.page-ships-search .modV2Main table.StdTable:not(.BorderV2Bottom) > tbody > tr.Pager a:hover { color: var(--button-primary-hover, #0f766e) !important; text-decoration: underline !important; } body.page-ships-search .modV2Main table.StdTable:not(.BorderV2Bottom) > tbody > tr.Pager span { color: var(--text-primary, #0f172a) !important; font-weight: 700 !important; padding: 0 6px !important; } /* -------------------------------------------------------------------------- 6. Form controls (criteria inputs) -------------------------------------------------------------------------- */ body.page-ships-search .modV2 input[type="text"], body.page-ships-search .modV2 input[type="password"], body.page-ships-search .modV2 select { box-sizing: border-box !important; min-height: 32px !important; padding: 6px 10px !important; border: 1px solid var(--border-default, var(--input, #cbd5e1)) !important; border-radius: 6px !important; background-color: var(--card-raised, var(--surface-raised, #ffffff)) !important; color: var(--text-strong, #0f172a) !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px !important; line-height: 20px !important; font-weight: 400 !important; box-shadow: none !important; outline: none !important; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important; } body.page-ships-search .modV2 input[type="text"]:focus, body.page-ships-search .modV2 input[type="password"]:focus, body.page-ships-search .modV2 select:focus { border-color: var(--border-focus, #0d9488) !important; box-shadow: 0 0 0 3px rgba(var(--primary-tint), 0.16) !important; } /* -------------------------------------------------------------------------- 7. Footer slot (modPopFooter) — Clear / Search. Button colours come from the global components.css .LinkButton skin; we only lay out the footer band. The inline
wraps them. -------------------------------------------------------------------------- */ body.page-ships-search .modV2 .modPopFooter { box-sizing: border-box !important; background: transparent !important; border: 0 !important; border-top: 1px solid var(--border-default, #e2e8f0) !important; padding: 16px 20px !important; margin: 0 !important; } body.page-ships-search .modV2 .modPopFooter > div { padding-top: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 8px !important; } /* Footer buttons — Clear (Secondary/ghost) + Search (primary). The global 36px footer-button skin (components.css §9.10) is scoped to `.modPopPnl` (uc:Modal popups), so it never reaches this inline ModuleTemplateV2 footer — the buttons would otherwise keep the legacy 12px/29px size. Replicate the canonical recipe here so they match every other refresh footer button (DESIGN.md §9.10 / §5.2: 36h, 8px radius, 14px Inter). */ body.page-ships-search .modV2 .modPopFooter a.LinkButton { display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; height: 36px !important; padding: 0 16px !important; border-radius: 8px !important; background: var(--button-primary-bg, var(--brand-primary, #0d9488)) !important; color: var(--button-primary-text, #ffffff) !important; border: 1px solid var(--button-primary-bg, var(--brand-primary, #0d9488)) !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px !important; font-weight: 500 !important; line-height: 1 !important; text-decoration: none !important; cursor: pointer !important; min-width: 64px !important; box-shadow: none !important; transition: background-color 120ms ease, border-color 120ms ease !important; } /* The legacy   spacer would be a flex item and offset the label — collapse it. */ body.page-ships-search .modV2 .modPopFooter a.LinkButton > ins { display: none !important; } body.page-ships-search .modV2 .modPopFooter a.LinkButton:hover { background: var(--button-primary-bg-hover, var(--brand-primary-hover, #0f766e)) !important; border-color: var(--button-primary-bg-hover, var(--brand-primary-hover, #0f766e)) !important; color: var(--button-primary-text, #ffffff) !important; } /* Secondary (Clear) — ghost slate pill. */ body.page-ships-search .modV2 .modPopFooter a.LinkButton.Secondary { background: var(--surface-raised, #ffffff) !important; color: var(--text-primary, #0f172a) !important; border: 1px solid var(--border-default, #e2e8f0) !important; } body.page-ships-search .modV2 .modPopFooter a.LinkButton.Secondary:hover { background: var(--surface-hover, #f1f5f9) !important; border-color: var(--border-default, #e2e8f0) !important; color: var(--text-primary, #0f172a) !important; } /* -------------------------------------------------------------------------- 8. Results module refinements — the results module (modView ModuleTemplateV2, id …_modView_pnlMod) has an EMPTY Title slot wrapping the dgVessel grid. The card frame, 16px table inset, and border-less grid all come from §1/§3/§5 now (single boundary = the card border), so this section only supplies the synthetic title label and hides the empty top pager row. -------------------------------------------------------------------------- */ /* Label the empty results header bar. The modView title text is held in an (initially empty) ; guard on :empty so that if the results module ever sets a real title, our synthetic label is suppressed instead of duplicating in front of it. */ body.page-ships-search [id$="_modView_lblTitle"]:empty::before { content: "Search results"; color: var(--text-strong, #0f172a) !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 18px !important; line-height: 28px !important; font-weight: 600 !important; } /* The DataGrid emits a top Pager row that is EMPTY when results fit one page (no page-number links). Collapse it so it doesn't render as a blank grey band above the column header; keep it when it actually has page links. */ body.page-ships-search .modV2Main table.StdTable:not(.BorderV2Bottom) > tbody > tr.Pager:not(:has(a)) { display: none !important; } /* -------------------------------------------------------------------------- 9. TitleRight options menu (popMenuActions) — three-dot (vertical ellipsis) trigger. The legacy `a.Img-Std-Options` paints a hamburger from the StdIcons.png sprite; replace it with the SAME kebab the grid overflow menu uses (grid.css §6) — a 4px dot + two ±7px box-shadow dots — so the Dry Vessel Search action menu matches the canonical grid kebab. ships-search is NOT a page-grid page, so the grid.css rule doesn't reach it; replicate here. -------------------------------------------------------------------------- */ body.page-ships-search a[id$="_popMenuActions_lbPopupMenu"].Img-Std-Options { width: 32px !important; height: 32px !important; padding: 0 !important; background: transparent !important; background-image: none !important; border: 1px solid transparent !important; border-radius: 6px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: var(--text-strong, #0f172a) !important; text-indent: 0 !important; position: relative !important; box-sizing: border-box !important; vertical-align: middle !important; } /* The legacy clearpixel inside would offset the centred dots — hide it. */ body.page-ships-search a[id$="_popMenuActions_lbPopupMenu"].Img-Std-Options > img { display: none !important; } body.page-ships-search a[id$="_popMenuActions_lbPopupMenu"].Img-Std-Options::before { content: '' !important; display: block !important; width: 4px !important; height: 4px !important; border-radius: 50% !important; background: var(--text-strong, #0f172a) !important; box-shadow: 0 -7px 0 0 var(--text-strong, #0f172a), 0 7px 0 0 var(--text-strong, #0f172a) !important; } body.page-ships-search a[id$="_popMenuActions_lbPopupMenu"].Img-Std-Options:hover { background: var(--surface-muted, #f5f5f5) !important; border-color: var(--border-default, #e2e8f0) !important; } /* -------------------------------------------------------------------------- 10. TitleRight action button — the RESULTS view (modView) puts a primary "Search" LinkButton in the title bar (_modView_btnSearch). It's NOT in a .modPopFooter, so the §7 footer-button skin misses it, and the legacy markup pins it small via an inline `style="display:inline-block;height:14px"`. Re-skin it to the same canonical 36px primary pill as the footer Search button; `!important` beats the inline height/display. -------------------------------------------------------------------------- */ body.page-ships-search .modV2 .modV2TRight a.LinkButton { display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; height: 36px !important; padding: 0 16px !important; border-radius: 8px !important; background: var(--button-primary-bg, var(--brand-primary, #0d9488)) !important; color: var(--button-primary-text, #ffffff) !important; border: 1px solid var(--button-primary-bg, var(--brand-primary, #0d9488)) !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px !important; font-weight: 500 !important; line-height: 1 !important; text-decoration: none !important; cursor: pointer !important; min-width: 64px !important; box-shadow: none !important; transition: background-color 120ms ease, border-color 120ms ease !important; } body.page-ships-search .modV2 .modV2TRight a.LinkButton > ins { display: none !important; } body.page-ships-search .modV2 .modV2TRight a.LinkButton:hover { background: var(--button-primary-bg-hover, var(--brand-primary-hover, #0f766e)) !important; border-color: var(--button-primary-bg-hover, var(--brand-primary-hover, #0f766e)) !important; color: var(--button-primary-text, #ffffff) !important; }