:root { --bg-green: #295c00; --bg-red: #cc0000; --comparison-table-sticky-border: 1pt dashed #ff8c0060; --comparison-table-row-size: 6rem; --comparison-table-head-size: var(--comparison-table-row-size); } .spot_box:has(.comparison_table) { padding: 0px; margin: auto; max-width: calc(var(--contents-width) - var(--els-gap) * 4); border: var(--border-std); box-shadow: var(--box-glow); } .spot_box:has(.comparison_table) h3 { left: 0px; right: 0px; } .comparison_table { position: relative; left: 0px; right: 0px; bottom: 0px; margin-top: 0px; max-width: stretch; contain: layout; overflow: hidden; user-select: none; border-radius: calc(var(--mp) * 2); box-shadow: var(--box-shadow); border: var(--border-std); background: var(--bg-gradient-blue); } .comparison_table_grid { display: grid; overflow: scroll; border-radius: calc(var(--mp) * 1); } .comparison_table_value_reverse_yes, .comparison_table_value_no, .comparison_table_value_reverse_no, .comparison_table_value_yes { margin: auto; color: white; padding: calc(var(--mp) * 1); width: 2.5rem; aspect-ratio: 1 / 1; border-radius: 100%; display: flex; align-content: center; justify-content: center; align-items: center; justify-items: center; text-transform: uppercase; } .comparison_table_row, .comparison_table_head_row, .comparison_table_head_col { border-right: 1pt solid #80808040; border-bottom: 1pt solid #80808040; hyphens: auto; padding: calc(var(--mp) * 1); width: stretch; display: flex; align-content: center; justify-content: center; align-items: center; justify-items: center; flex-direction: column; width: calc(var(--comparison-table-row-size) * 2); height: var(--comparison-table-row-size); word-break: normal; } .comparison_table_head_col { height: var(--comparison-table-head-size); text-align: center; font-size: 1rem !important; } .comparison_table_row_0 { background: #ffffff10; background: var(--box-bg-color-light-trans); backdrop-filter: var(--backdrop-filter); position: sticky; top: var(--comparison-table-head-size); z-index: 2000 !important; border-bottom: var(--comparison-table-sticky-border); } .comparison_table .comparison_table_cell_0_0 { background: var(--box-bg-color-light-trans); backdrop-filter: var(--backdrop-filter); z-index: 2500 !important; } .comparison_table_row { hyphens: auto; } .comparison_table_head_col, .comparison_table_col_name { position: sticky; z-index: 1000; } .comparison_table_head_col:first-child, .comparison_table_col_name { border-right: var(--comparison-table-sticky-border); } .comparison_table_head_col:first-child { z-index: 2000; } .comparison_table_head_col:first-child, .comparison_table_col_name { left: 0pt; } .comparison_table_head_col { top: 0px; z-index: 1000; } .comparison_table_head_col, .comparison_table_col_name { background-color: var(--box-bg-color-dark); contain: layout; } .comparison_table_head_col b, .comparison_table_col_name b { font-size: 1.25rem !important; } .comparison_table_row a { display: block; margin: Auto; text-align: center; bottom: var(--mp); } .comparison_table_value_no { background-color: var(--bg-red) !important; } .comparison_table_value_yes { background-color: var(--bg-green) !important; } .comparison_table_col_limitations_free .comparison_table_value_no, .comparison_table_col_free_is_limited .comparison_table_value_no, .comparison_table_col_paid_version .comparison_table_value_no { background-color: var(--bg-green) !important; } .comparison_table_col_limitations_free .comparison_table_value_yes, .comparison_table_col_free_is_limited .comparison_table_value_yes, .comparison_table_col_paid_version .comparison_table_value_yes { background-color: var(--bg-red) !important; } .comparison_table_value_generic, .comparison_table_cell_content_update_frequency, .comparison_table_cell_content_legacy_extensions_support, .comparison_table_cell_content_free_is_limited, .comparison_table_cell_content_limitations_free, .comparison_table_cell_content_startup_speed, .comparison_table_cell_content_difficulty { background-color: rgb(0, 43, 78); padding: calc(var(--mp) * 1); padding-left: calc(var(--mp) * 2); padding-right: calc(var(--mp) * 2); border-radius: calc(var(--mp) * 4); margin: auto; text-align: center; color: white; } .comparison_table_cell_content { text-align: center; font-size: .9rem; } .comparison_table_cell_content_update_frequency_monthly, .comparison_table_cell_content_update_frequency_weekly, .comparison_table_cell_content_update_frequency_daily, .comparison_table_cell_content_difficulty_very_low, .comparison_table_cell_content_startup_speed_very_high { background-color: var(--bg-green) !important; } .comparison_table_cell_content_difficulty_low, .comparison_table_cell_content_startup_speed_high { background-color: #004400; } .comparison_table_cell_content_update_frequency_medium, .comparison_table_cell_content_update_frequency_variable, .comparison_table_cell_content_limitations_free_limited_features, .comparison_table_cell_content_limitations_free_limited_modules, .comparison_table_cell_content_legacy_extensions_support_limited, .comparison_table_cell_content_difficulty_medium, .comparison_table_cell_content_startup_speed_medium { background-color: darkorange; color: #242424; } .comparison_table_cell_content_update_frequency_rare, .comparison_table_cell_content_difficulty_high, .comparison_table_cell_content_startup_speed_low { background-color: #8a0000; } .comparison_table_cell_content_difficulty_very_high, .comparison_table_cell_content_startup_speed_very_low { background-color: var(--bg-red); } @media screen and (min-width:1024px) { .comparison_table_grid { max-height: 43rem; } } @media screen and (orientation:portrait) and (max-width:1023px) { .comparison_table_col_name, .comparison_table_head_col:first-child { width: 9rem !important; } .comparison_table_grid { max-height: calc(100dvh - var(--header-size) - var(--footer-size) - var(--mp) * 8); } }