@presidio-dev/factifai-agent/dist/core/nodes/reporting/templates/html-styles.d.ts

An AI powered browser automation testing agent powered by LLMs.

export declare const htmlStyles = "\n        :root {\n            --primary: #4a6fd0;\n            --primary-dark: #3a5cb0;\n            --success: #2ecc71;\n            --warning: #f39c12;\n            --danger: #e74c3c;\n            --light: #f8f9fa;\n            --dark: #343a40;\n            --border: #dee2e6;\n            --border-radius: 8px;\n            --shadow: 0 4px 6px rgba(0,0,0,0.1);\n            --spacing: 1.5rem;\n        }\n        \n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n        \n        body {\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n            line-height: 1.6;\n            color: #333;\n            background-color: #f5f7fa;\n            padding: 0;\n            margin: 0;\n        }\n        \n        .container {\n            max-width: 1200px;\n            margin: 0 auto;\n            padding: 2rem;\n        }\n        \n        header {\n            background-color: white;\n            padding: var(--spacing);\n            border-radius: var(--border-radius);\n            margin-bottom: 2rem;\n            box-shadow: var(--shadow);\n        }\n        \n        .report-title {\n            font-size: 2rem;\n            color: var(--dark);\n            margin-bottom: 0.5rem;\n        }\n        \n        .report-meta {\n            color: #6c757d;\n            font-size: 0.9rem;\n            display: flex;\n            justify-content: space-between;\n        }\n        \n        .stats-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n            gap: 1rem;\n            margin-bottom: 2rem;\n        }\n        \n        .stat-card {\n            background-color: white;\n            border-radius: var(--border-radius);\n            padding: 1.5rem;\n            box-shadow: var(--shadow);\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            text-align: center;\n        }\n        \n        .stat-value {\n            font-size: 2rem;\n            font-weight: bold;\n            margin-bottom: 0.5rem;\n        }\n        \n        .stat-label {\n            color: #6c757d;\n            font-size: 0.9rem;\n        }\n        \n        .card {\n            background-color: white;\n            border-radius: var(--border-radius);\n            margin-bottom: 2rem;\n            box-shadow: var(--shadow);\n            overflow: hidden;\n        }\n        \n        .card-header {\n            background-color: var(--light);\n            padding: 1rem 1.5rem;\n            border-bottom: 1px solid var(--border);\n            font-weight: 600;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n        }\n        \n        .card-body {\n            padding: 1.5rem;\n        }\n        \n        .card-title {\n            margin-bottom: 1rem;\n            font-size: 1.25rem;\n            color: var(--dark);\n        }\n        \n        .summary {\n            background-color: white;\n            border-radius: var(--border-radius);\n            padding: 1.5rem;\n            margin-bottom: 2rem;\n            box-shadow: var(--shadow);\n        }\n        \n        .recommendation-list {\n            list-style-type: none;\n            margin-bottom: 1rem;\n        }\n        \n        .recommendation-item {\n            display: flex;\n            align-items: flex-start;\n            margin-bottom: 1rem;\n            padding-bottom: 1rem;\n            border-bottom: 1px solid var(--border);\n        }\n        \n        .recommendation-item:last-child {\n            border-bottom: none;\n            padding-bottom: 0;\n        }\n        \n        .recommendation-icon {\n            color: var(--primary);\n            margin-right: 1rem;\n            font-size: 1.25rem;\n        }\n        \n        .test-cases {\n            border-collapse: collapse;\n            width: 100%;\n            margin-bottom: 1rem;\n        }\n        \n        .test-cases th,\n        .test-cases td {\n            text-align: left;\n            padding: 1rem;\n            border-bottom: 1px solid var(--border);\n        }\n        \n        .test-cases th {\n            background-color: var(--light);\n            font-weight: 600;\n            color: var(--dark);\n        }\n        \n        .test-cases tr:last-child td {\n            border-bottom: none;\n        }\n        \n        .test-cases tr:hover {\n            background-color: #f8f9fa;\n        }\n        \n        .badge {\n            display: inline-block;\n            padding: 0.35em 0.65em;\n            font-size: 0.75em;\n            font-weight: 700;\n            line-height: 1;\n            text-align: center;\n            white-space: nowrap;\n            vertical-align: baseline;\n            border-radius: 0.25rem;\n        }\n        \n        .badge-success {\n            background-color: var(--success);\n            color: white;\n        }\n        \n        .badge-danger {\n            background-color: var(--danger);\n            color: white;\n        }\n        \n        .status-icon {\n            display: inline-block;\n            width: 1.5rem;\n            height: 1.5rem;\n            border-radius: 50%;\n            text-align: center;\n            line-height: 1.5rem;\n            color: white;\n            font-weight: bold;\n            margin-right: 0.5rem;\n        }\n        \n        .status-success {\n            background-color: var(--success);\n        }\n        \n        .status-failure {\n            background-color: var(--danger);\n        }\n        \n        .test-log {\n            background-color: #f8f9fa;\n            border-radius: 0.25rem;\n            padding: 1rem;\n            margin-top: 0.5rem;\n            white-space: pre-wrap;\n            font-family: monospace;\n            font-size: 0.875rem;\n            color: #212529;\n            border: 1px solid #eee;\n        }\n        \n        .test-details {\n            margin-top: 1rem;\n            display: none;\n        }\n        \n        .clickable-row {\n            cursor: pointer;\n            transition: background-color 0.2s ease-in-out;\n        }\n        \n        .clickable-row:hover {\n            background-color: rgba(74, 111, 208, 0.05) !important;\n        }\n\n        .expandable {\n            cursor: pointer;\n        }\n        \n        .expandable:after {\n            content: \"\u25BC\";\n            float: right;\n            color: #6c757d;\n            font-size: 0.75rem;\n        }\n        \n        .critical-issues {\n            list-style-type: none;\n        }\n        \n        .critical-issue-item {\n            display: flex;\n            align-items: flex-start;\n            padding: 1rem;\n            background-color: rgba(231, 76, 60, 0.1);\n            border-left: 4px solid var(--danger);\n            border-radius: 4px;\n            margin-bottom: 1rem;\n        }\n        \n        .critical-icon {\n            color: var(--danger);\n            margin-right: 1rem;\n            font-size: 1.25rem;\n        }\n        \n        .progress {\n            background-color: #e9ecef;\n            border-radius: 0.25rem;\n            height: 8px;\n            overflow: hidden;\n        }\n        \n        .progress-bar {\n            background-color: var(--primary);\n            height: 100%;\n        }\n        \n        @media (max-width: 768px) {\n            .container {\n                padding: 1rem;\n            }\n            \n            .stats-grid {\n                grid-template-columns: 1fr;\n            }\n            \n            .test-cases th,\n            .test-cases td {\n                padding: 0.75rem;\n            }\n        }\n";
//# sourceMappingURL=html-styles.d.ts.map