// Faithful adaptation of Enterprise account_reports' look. // Source reference: // account_reports/static/src/components/account_report/account_report.scss // We mirror the same root selector (.account_report), the same table // semantics (.line_name + .line_cell + .line_level_N), the same border // treatment (1px gray-300, 0.25rem radius, sticky thead) and the same // button hover behavior (gray-300 -> enterprise action color). // // Trimmed: chatter, annotations, audit-balance and journal-line debug // popovers are Enterprise-only features we do not ship. .account_report { //-------------------------------------------------------------------- // Header (Fusion-only -- Enterprise uses Odoo ControlPanel; we keep // a lightweight header to host the report title + AI commentary // trigger but style it to feel native). //-------------------------------------------------------------------- .o_fusion_report_header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 1.5rem; background-color: $o-view-background-color; border-bottom: 1px solid $o-gray-300; h1 { font-size: 1.125rem; font-weight: 600; margin: 0; color: $o-gray-800; } .o_fusion_report_period { font-size: 0.8rem; color: $o-gray-600; margin-top: 2px; } } //-------------------------------------------------------------------- // Scroll container (mirrors Enterprise) //-------------------------------------------------------------------- .o_account_report_scroll_container { margin-inline: 0 !important; } //-------------------------------------------------------------------- // Table (verbatim from Enterprise, minus chatter/annotation/audit) //-------------------------------------------------------------------- .table { background-color: $o-view-background-color; border-collapse: separate; border-spacing: 0; font-size: 0.8rem; margin: 24px 24px; padding: 24px; width: auto; min-width: 800px; border: 1px solid $o-gray-300; border-radius: 0.25rem; > :not(caption) > * > * { padding: 0.25rem 0.75rem } > thead { > tr { th:first-child { color: lightgrey; } th:not(:first-child) { text-align: center; vertical-align: middle; } } > tr:not(:last-child) > th:not(:first-child) { border: 1px solid $o-gray-300 } } > tbody { > tr { &.unfolded { font-weight: bold } > td { a { cursor: pointer } .clickable { color: $o-enterprise-action-color } &.muted { color: $o-gray-300 } &:empty::after{ content: "\00a0" } &:empty { line-height: 1 } } &:not(.empty) > td { border-bottom: 1px solid $o-gray-200 } &.total { font-weight: bold } &.o_bold_tr { font-weight: bold } &.unfolded { > td { border-bottom: 1px solid $o-gray-300 } .btn_action { opacity: 1 } .btn_more { opacity: 1 } } &:hover { &.empty > * { --table-accent-bg: transparent } .muted { color: $o-gray-800 } .btn_action, .btn_more { opacity: 1; color: $o-enterprise-action-color; } .btn_dropdown { color: $o-enterprise-action-color } .btn_foldable { color: $o-enterprise-action-color } } } } @media print { border: 0; padding: 0; } } table.striped { > thead > tr:not(:first-child) > th:nth-child(2n+3) { background: $o-gray-100 } > tbody { > tr:not(.line_level_0):not(.empty) > td:nth-child(2n+3) { background: $o-gray-100 } > tr.line_level_0 > td:nth-child(2n+3) { background: $o-gray-300 } } } thead.sticky { background-color: $o-view-background-color; position: sticky; top: 0; z-index: 999; } //-------------------------------------------------------------------- // Line cells //-------------------------------------------------------------------- .line_name { vertical-align: middle; > .wrapper { display: flex; align-items: center; > .content { display: flex; align-items: center; } } .name { white-space: nowrap } &.draft { color: $o-info; } &.unfoldable:hover { cursor: pointer } } .line_cell { vertical-align: middle; > .wrapper { display: flex; align-items: center; > .content { display: flex; align-items: center; } } &.date > .wrapper { justify-content: center } &.numeric > .wrapper { justify-content: flex-end } .name { white-space: nowrap } } //-------------------------------------------------------------------- // Indentation per level //-------------------------------------------------------------------- .line_level_0 { color: $o-gray-700; font-weight: bold; > td { border-bottom: 0 !important; background-color: $o-gray-300; } .muted { color: $o-gray-400 !important } } @for $i from 2 through 16 { .line_level_#{$i} { $indentation: (($i + 1) * 8px) - 20px; > td { color: $o-gray-700; &.line_name.unfoldable .wrapper { column-gap: calc(#{ $indentation }) } &.line_name:not(.unfoldable) .wrapper { padding-left: $indentation } } } } //-------------------------------------------------------------------- // Variance helpers (Fusion-only -- comparison reports surface signed // deltas right-aligned in their own column). //-------------------------------------------------------------------- .variance_pos { color: $o-success } .variance_neg { color: $o-danger } //-------------------------------------------------------------------- // Link //-------------------------------------------------------------------- .link { color: $o-enterprise-action-color } //-------------------------------------------------------------------- // Buttons (foldable / dropdown / action / more) //-------------------------------------------------------------------- .btn_dropdown, .btn_foldable, .btn_foldable_empty, .btn_more, .btn_action { border: none; color: $o-gray-300; font-size: inherit; font-weight: normal; padding: 0; text-align: center; width: 20px; white-space: nowrap; background: transparent; &:hover { color: $o-enterprise-action-color !important; cursor: pointer; } } .btn_foldable { color: $o-gray-500 } .btn_foldable_empty:hover { cursor: default } .btn_more { opacity: 1 } .btn_action { opacity: 0; background-color: $o-view-background-color; color: $o-gray-600; width: auto; padding: 0 0.25rem; margin: 0 0.25rem; border: 1px solid $o-gray-300; border-radius: 0.25rem; } //-------------------------------------------------------------------- // Dropdown //-------------------------------------------------------------------- .dropdown { display: inline } } //-------------------------------------------------------------------- // Period filter bar (Fusion-only -- Enterprise has a much richer // filter component; we keep our minimal date+comparison+report-type // bar but style it to feel native to .account_report). //-------------------------------------------------------------------- .account_report .o_fusion_report_filters { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.5rem 1.5rem; background-color: $o-view-background-color; border-bottom: 1px solid $o-gray-200; font-size: 0.8rem; label { color: $o-gray-700; margin-bottom: 0; font-weight: normal; } .form-select, .form-control { font-size: 0.8rem; padding: 0.25rem 0.5rem; height: auto; min-height: 0; } } //-------------------------------------------------------------------- // AI commentary panel (Fusion-only addition) //-------------------------------------------------------------------- .account_report .o_fusion_commentary_panel { background-color: $o-view-background-color; border: 1px solid $o-gray-300; border-radius: 0.25rem; margin: 0 24px 24px; padding: 1rem 1.25rem; font-size: 0.85rem; h4 { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.5rem; color: $o-gray-800; } .commentary-section { margin-bottom: 0.75rem; h5 { font-size: 0.75rem; font-weight: 600; color: $o-gray-600; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.25rem; } ul { margin: 0; padding-left: 1.25rem; li { margin: 0.15rem 0 } } p { margin: 0 } } .commentary-meta { font-size: 0.7rem; color: $o-gray-500; } } //-------------------------------------------------------------------- // Anomaly strip (Fusion-only) -- now a plain Bootstrap-style alert, // inset to align with the report table padding. //-------------------------------------------------------------------- .account_report .o_fusion_anomaly_strip { margin: 0.5rem 24px 0; padding: 0.4rem 0.75rem; border: 1px solid; border-radius: 0.25rem; font-size: 0.8rem; .anomaly_label { font-weight: 600 } .anomaly_delta { margin-left: 0.5rem } .anomaly_severity { margin-left: 0.75rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.8; } }