/* ============================================================ MyFinVar UI Patch — Dark Theme Fixes Version: 2026-02-27 v3 Author: Chetas INTEGRATION: Add this as the LAST stylesheet in your HTML : This file overrides existing styles to fix visual inconsistencies in the Portfolio Analysis section's dark theme. No existing files need to be modified. ============================================================ */ :root { --patch-bg-primary: #1a1f2e; --patch-bg-card: #242938; --patch-bg-hover: #2d3347; --patch-bg-active: #343b52; --patch-border: #3a4160; --patch-border-active: #3980f4; --patch-text-primary: #e2e6f0; --patch-text-secondary: #9ba3bf; --patch-text-muted: #6b7394; --patch-accent: #3980f4; --patch-accent-hover: #4d8ff7; --patch-accent-glow: rgba(57, 128, 244, 0.25); --patch-success: #4ade80; --patch-radius: 8px; --patch-radius-sm: 6px; --patch-transition: 0.2s ease; } /* 1. Performance Tab Buttons (Compare, Back Test, Project) */ .performance-tabs .performance-tab { background: var(--patch-bg-card); border: 1px solid var(--patch-border); border-radius: var(--patch-radius); padding: 4px; transition: border-color var(--patch-transition), box-shadow var(--patch-transition); } .performance-tabs .performance-tab:hover { border-color: var(--patch-border-active); } .performance-tabs .performance-tab.active { border-color: var(--patch-border-active); box-shadow: 0 0 12px var(--patch-accent-glow); } .performance-tabs .performance-tab button, #myfinvar_analyze_button, #myfinvar_project_button, #myfinvar_projectf_button { background: var(--patch-bg-card) !important; color: var(--patch-text-primary) !important; border: 1px solid var(--patch-border) !important; border-radius: var(--patch-radius-sm) !important; padding: 8px 18px !important; font-size: 14px !important; font-weight: 500 !important; cursor: pointer !important; transition: all var(--patch-transition) !important; } .performance-tabs .performance-tab button:hover, #myfinvar_analyze_button:hover, #myfinvar_project_button:hover, #myfinvar_projectf_button:hover { background: var(--patch-bg-hover) !important; border-color: var(--patch-border-active) !important; color: #fff !important; } .performance-tabs .performance-tab.active button { background: var(--patch-accent) !important; border-color: var(--patch-accent) !important; color: #fff !important; box-shadow: 0 2px 10px var(--patch-accent-glow); } /* 2. Toggle Buttons */ button[onclick*="toggle_hidden_next"] { background: var(--patch-bg-card) !important; color: var(--patch-text-secondary) !important; border: 1px solid var(--patch-border) !important; border-radius: var(--patch-radius-sm) !important; padding: 8px 12px !important; font-size: 14px !important; min-width: 36px; cursor: pointer !important; transition: all var(--patch-transition) !important; } button[onclick*="toggle_hidden_next"]:hover { background: var(--patch-bg-hover) !important; border-color: var(--patch-border-active) !important; color: var(--patch-text-primary) !important; } /* 3. Dropdowns inside performance tabs */ .performance-tabs select, #myfinvar_chart_type, #myfinvar_plot_months { background: var(--patch-bg-card) !important; color: var(--patch-text-primary) !important; border: 1px solid var(--patch-border) !important; border-radius: var(--patch-radius-sm) !important; padding: 6px 10px !important; font-size: 13px !important; } /* 4. Similar stocks section */ .portfolio-sector-section { color: var(--patch-text-primary) !important; font-size: 14px !important; font-weight: 500; padding: 16px 0 8px 0; margin-top: 12px; border-top: 1px solid var(--patch-border); } .portfolio-sector-section .radio-group { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 4px !important; margin-top: 10px !important; flex-wrap: nowrap !important; } .portfolio-sector-section .radio-label { color: var(--patch-text-primary) !important; font-size: 14px !important; font-weight: 400; display: inline-flex !important; align-items: center !important; gap: 6px !important; cursor: pointer; padding: 6px 10px; border-radius: var(--patch-radius-sm); border: 1px solid transparent; transition: all var(--patch-transition); white-space: nowrap; margin: 0 !important; } .portfolio-sector-section .radio-label:hover { background: var(--patch-bg-hover); border-color: var(--patch-border); } .portfolio-sector-section .radio-label br { display: none !important; } .portfolio-sector-section input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 18px; height: 18px; border: 2px solid var(--patch-border); border-radius: 50%; background: var(--patch-bg-card); cursor: pointer; position: relative; transition: all var(--patch-transition); flex-shrink: 0; margin: 0 !important; } .portfolio-sector-section input[type="radio"]:checked { border-color: var(--patch-accent); background: var(--patch-bg-card); } .portfolio-sector-section input[type="radio"]:checked::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: var(--patch-accent); } .portfolio-sector-section input[type="radio"]:hover { border-color: var(--patch-accent-hover); } /* 5. Update Button — inline with radios */ .portfolio-sector-section .update-button, .portfolio-sector-section .radio-group .btn-secondary { background: var(--patch-bg-card) !important; color: var(--patch-text-primary) !important; border: 1px solid var(--patch-border) !important; border-radius: var(--patch-radius-sm) !important; padding: 6px 16px !important; font-size: 13px !important; font-weight: 500 !important; cursor: pointer !important; transition: all var(--patch-transition) !important; margin: 0 0 0 4px !important; line-height: 1.4 !important; vertical-align: middle !important; } .portfolio-sector-section .update-button:hover, .portfolio-sector-section .radio-group .btn-secondary:hover { background: var(--patch-bg-hover) !important; border-color: var(--patch-border-active) !important; } /* 6. Optimize Button */ #similar_portfolio { background: var(--patch-accent) !important; color: #fff !important; border: none !important; border-radius: var(--patch-radius-sm) !important; padding: 10px 28px !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important; transition: all var(--patch-transition) !important; margin-top: 12px; } #similar_portfolio:hover { background: var(--patch-accent-hover) !important; box-shadow: 0 4px 16px var(--patch-accent-glow); transform: translateY(-1px); } /* 7. Accept/Reject Dropdown */ #similar_portfolio_close { background: var(--patch-bg-card) !important; color: var(--patch-text-primary) !important; border: 1px solid var(--patch-border) !important; border-radius: var(--patch-radius-sm) !important; padding: 10px 20px !important; font-size: 14px !important; font-weight: 500 !important; cursor: pointer !important; transition: all var(--patch-transition) !important; margin-top: 12px; margin-left: 8px; } #similar_portfolio_close:hover { border-color: var(--patch-border-active) !important; background-color: var(--patch-bg-hover) !important; } #similar_portfolio_close option { background: var(--patch-bg-card); color: var(--patch-text-primary); } /* 8. Cash / CD Section */ #my_var_fixed_tkrs { padding: 12px 0; color: var(--patch-text-secondary); } #my_var_fixed_tkrs button { background: var(--patch-bg-card) !important; color: var(--patch-text-primary) !important; border: 1px solid var(--patch-border) !important; border-radius: var(--patch-radius-sm) !important; padding: 6px 16px !important; font-size: 13px !important; font-weight: 500 !important; cursor: pointer !important; transition: all var(--patch-transition) !important; } #my_var_fixed_tkrs button:hover { background: var(--patch-bg-hover) !important; border-color: var(--patch-border-active) !important; } #my_var_fixed_tkrs input[type="text"] { background: var(--patch-bg-card) !important; color: var(--patch-text-primary) !important; border: 1px solid var(--patch-border) !important; border-radius: var(--patch-radius-sm) !important; padding: 6px 8px !important; font-size: 13px !important; text-align: center; width: 50px; } /* 9. Section subtitles */ .compare-result-title, .performance-title { color: var(--patch-text-primary) !important; font-size: 16px !important; font-weight: 600; margin: 16px 0 8px 0; } #my_var_tkrs_result > span[onclick] { color: var(--patch-accent) !important; cursor: pointer; font-size: 14px; font-weight: 500; padding: 4px 8px; border-radius: var(--patch-radius-sm); } /* 10. Compare Result Table */ #my_var_tkrs_results_table { background: var(--patch-bg-card) !important; border: 1px solid var(--patch-border) !important; border-radius: var(--patch-radius) !important; overflow: hidden; } #my_var_tkrs_results_table th { background: var(--patch-bg-hover) !important; color: var(--patch-text-secondary) !important; border-bottom: 1px solid var(--patch-border) !important; padding: 8px !important; font-size: 12px !important; font-weight: 600; text-transform: uppercase; } #my_var_tkrs_results_table td { border-bottom: 1px solid var(--patch-border) !important; padding: 4px !important; } #my_var_tkrs_results_table input { background: transparent !important; border: none !important; color: var(--patch-text-primary) !important; font-size: 13px !important; text-align: center; } #my_var_tkrs_results_table .tkr_name { color: var(--patch-accent) !important; font-weight: 600 !important; } /* 11. Projection inputs */ #overall_avg, #overall_stddev { background: transparent !important; border: 1px solid var(--patch-border) !important; border-radius: var(--patch-radius-sm) !important; color: var(--patch-success) !important; font-weight: 600 !important; padding: 4px 8px !important; } #projection_params select, #projection_params input, #param_n_years { background: var(--patch-bg-card) !important; color: var(--patch-text-primary) !important; border: 1px solid var(--patch-border) !important; border-radius: var(--patch-radius-sm) !important; padding: 4px 8px !important; font-size: 13px !important; } /* 12. Performance title */ .performance-title { color: var(--patch-text-primary) !important; font-size: 18px !important; font-weight: 700; } /* 13. Info button */ #info_section_button { background: var(--patch-bg-card) !important; color: var(--patch-text-primary) !important; border: 1px solid var(--patch-border) !important; border-radius: var(--patch-radius-sm) !important; padding: 6px 16px !important; font-size: 13px !important; cursor: pointer !important; } /* 14. Feature level dropdown */ #feature_level_pd select { background: var(--patch-bg-card) !important; color: var(--patch-text-primary) !important; border: 1px solid var(--patch-border) !important; border-radius: var(--patch-radius-sm) !important; padding: 6px 12px !important; font-size: 13px !important; } #feature_level_pd { color: #000 !important; } /* 15. Stocks/Options buttons */ .main_page_button { background: var(--patch-bg-card) !important; color: var(--patch-text-primary) !important; border: 1px solid var(--patch-border) !important; border-radius: var(--patch-radius-sm) !important; padding: 8px 24px !important; font-size: 14px !important; font-weight: 500 !important; cursor: pointer !important; } .main_page_button[style*="lightgreen"] { background: var(--patch-accent) !important; border-color: var(--patch-accent) !important; color: #fff !important; } /* 16. Similar selectors */ .similar_selector { background: var(--patch-bg-card) !important; color: var(--patch-text-primary) !important; border: 1px solid var(--patch-border) !important; border-radius: var(--patch-radius-sm) !important; padding: 4px 8px !important; font-size: 12px !important; } /* 17. Portfolio dropdown */ .portfolio-select { background: var(--patch-bg-card) !important; color: var(--patch-text-primary) !important; border: 1px solid var(--patch-border) !important; border-radius: var(--patch-radius-sm) !important; } /* 18. Chart frames */ .chart_image { border-radius: var(--patch-radius) !important; border: 1px solid var(--patch-border) !important; margin: 8px 0; } /* 19. Fix green text bleed */ #var_stocks_page { color: var(--patch-text-primary); } #var_stocks_page span, #var_stocks_page div { color: inherit; } /* 20. Option premiums */ #run_premiums, #run_activity { background: var(--patch-bg-card) !important; color: var(--patch-text-primary) !important; border: 1px solid var(--patch-border) !important; border-radius: var(--patch-radius-sm) !important; padding: 8px 18px !important; font-size: 14px !important; font-weight: 500 !important; cursor: pointer !important; } #option_params { color: var(--patch-text-secondary) !important; font-size: 13px; } #annualized_checkbox { accent-color: var(--patch-accent); } /* ---------------------------------------------------------- 21. Stock Filter Results Table — Column Alignment ---------------------------------------------------------- */ #filter_main .table-container table { table-layout: fixed; width: 100%; } /* Column widths — distribute space properly */ #filter_main .table-container th:nth-child(1) { width: 7%; } /* Ticker */ #filter_main .table-container th:nth-child(2) { width: 16%; } /* Name */ #filter_main .table-container th:nth-child(3) { width: 15%; } /* Sector */ #filter_main .table-container th:nth-child(4) { width: 12%; } /* Return Annual % */ #filter_main .table-container th:nth-child(5) { width: 12%; } /* Dividend Annual % */ #filter_main .table-container th:nth-child(6) { width: 12%; } /* Return Std Dev */ #filter_main .table-container th:nth-child(7) { width: 14%; } /* No of Years Beats SPY */ #filter_main .table-container th:nth-child(8) { width: 12%; } /* Correlation to SPY */ /* Center-align numeric columns (4-8) for both headers and values */ #filter_main .table-container th:nth-child(n+4), #filter_main .table-container td:nth-child(n+4) { text-align: center !important; } /* Left-align text columns (1-3) */ #filter_main .table-container th:nth-child(-n+3), #filter_main .table-container td:nth-child(-n+3) { text-align: left !important; } /* Ensure td content doesn't overflow */ #filter_main .table-container td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 10px 8px !important; } #filter_main .table-container th { padding: 10px 8px !important; }