:root { color-scheme: light dark; font-family: 'Nunito', sans-serif; font-size: calc(0.8rem + var(--font_size_adjustment, 0rem)); font-weight: normal; --content-width-min: 20rem; --content-width-optimal: 80ch; --def_spacing: .5rem; --def_spacing_half: calc(var(--def_spacing) * .5); --def_spacing2: calc(var(--def_spacing) * 2); --height_header: 3rem; --height_guide: 0rem; --height_subscription_status: 0rem; --height_footer: 4.5rem; --height_footer_modal: 4.5rem; --sidenav_spacer: 0rem; --panel_info_spacer: 0rem; --panel_info_width: min(calc(100% - 1rem), 55ch); --table_cell_padding: .2rem .5rem .2rem .5rem; --icon_size: 1.5em; --standard_border_radius: 1rem; --input_switch_option_off_display: block; --input_switch_option_on_display: none; --input_min_height: 2.7rem; -webkit-tap-highlight-color: transparent; /* Animation presets */ --animation_standard_props: .2s both ease-in-out; --animation_pop_down: var(--animation_standard_props) animateFade, var(--animation_standard_props) animateSlideVertical; --animation_fade_translation: var(--animation_standard_props) animateFade, var(--animation_standard_props) animateTranslateXY; } html { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body, .theme--light { --input_switch_accent_boxshadow: 0px 0px 2px 0px hsl(0, 0%, 67%); --input_switch_text_color: hsl(0, 0%, 100%); --default_border_line: 1px solid hsl(0, 0%, 80%); --default_border_line2: 1px solid hsl(0, 0%, 80%); --default_border_line3: 1px solid hsl(0, 0%, 80%); --default_border_line_heavy: 2px solid hsl(0, 0%, 80%); --default_overlay_border_line: 1px solid hsl(0, 0%, 70%); --def_shadow: 0 1px 2px 0 hsla(205, 5%, 25%, 0.3), 0 1px 3px 1px hsla(205, 5%, 25%, .15); --def_drop_shadow: drop-shadow(0px 1px 2px hsla(205, 5%, 25%, 0.3)) drop-shadow(0px 1px 3px hsla(205, 5%, 25%, 0.15)); --box_shadow_modal: 4px 4px 3px hsla(0, 0%, 0%, 0.2), -4px -4px 3px hsla(0, 0%, 40%, 0.55); --box_shadow_tooltip: 1px 2px 3px hsla(0, 0%, 0%, 0.2), -1px -1px 3px hsla(0, 0%, 40%, 0.55); --box_shadow_button: 0 3px 1px -2px hsla(0, 0%, 0%, 0.2), 0 2px 2px 0 hsla(0, 0%, 0%, 0.14), 0 1px 5px 0 hsla(0, 0%, 0%, 0.12); --box_shadow_inset_top: inset 0px 3px 3px -3px hsl(0, 0%, 80%); --box_shadow_inset_bottom: inset 0px -3px 3px -3px hsl(0, 0%, 80%); --box_shadow_input: inset 0 2px 3px 0 hsla(0, 0%, 0%, 0.15); --color_focus: hsl(210, 82%, 56%); --color_text_default: hsl(0, 0%, 0%); color: var(--color_text_default); --color_text_header: hsl(0, 0%, 100%); --color_text_header_hover: hsl(180, 78%, 40%); --color_text_navigation: hsl(215, 20%, 35%); --color_text_section_divider: hsl(215, 20%, 35%); --color_text_card_heading: hsl(215, 20%, 35%); --color_text_section_heading: hsl(215, 20%, 55%); --color_text_defined_term: hsl(210, 65%, 30%); --color_text_group: hsl(215, 20%, 35%); --color_text_with_background: hsl(0, 0%, 100%); --color_text_with_background_dark: hsl(0, 0%, 0%); --color_text_primary: hsl(0, 0%, 0%); --color_text_info: hsl(0, 0%, 45%); --color_text_na: hsl(0, 0%, 80%); --color_text_na_heading: hsl(0, 0%, 60%); --color_text_notification: hsl(20, 90%, 50%); --color_text_warning: hsl(355, 100%, 50%); --color_text_warning_alternative: hsl(40, 100%, 55%); --color_text_warning_with_background: hsl(355, 100%, 35%); --color_text_error: hsl(355, 100%, 25%); --color_text_button: hsl(0, 0%, 100%); --color_text_positive: hsl(165, 100%, 25%); --color_text_positive_light: hsl(165, 100%, 50%); --color_text_negative: hsl(355, 100%, 45%); --color_text_negative_light: hsl(355, 100%, 90%); --color_text_income: hsl(165, 100%, 35%); --color_text_expenditure: hsl(0, 95%, 70%); --color_text_asset: hsl(205, 100%, 50%); --color_text_liability: hsl(40, 100%, 45%); --color_text_opening_balance: hsl(216, 19%, 35%); --color_text_portfolio_buy: hsl(205, 100%, 50%); --color_text_portfolio_sell: hsl(40, 100%, 45%); --color_text_input_placeholder: hsl(0, 0%, 55%); --color_text_input_label: hsl(0, 0%, 65%); --color_text_valid: hsl(165, 100%, 40%); --color_text_invalid: hsl(360, 100%, 40%); --color_text_guide_indicator: hsl(280, 46%, 65%); --color_heatmap_positive: 165, 100%, 40%; --color_heatmap_negative: 0, 100%, 80%; --color_historic_budget_good: hsl(165, 100%, 40%); --color_historic_budget_warn: hsl(40, 100%, 55%); --color_historic_budget_bad: hsl(0, 95%, 75%); --color_historic_budget_worst: hsl(0, 100%, 50%); --meter_bar_used_color_good: hsl(165, 60%, 60%); --meter_bar_used_color_warn: hsl(40, 100%, 45%); --meter_bar_used_color_warn_alt: hsl(55, 100%, 45%); --meter_bar_used_color_bad: hsl(0, 90%, 80%); --meter_bar_used_color_worst: hsl(0, 85%, 70%); --color_background_body: hsl(225, 35%, 95%); --color_background_header: hsl(215, 20%, 35%); --color_background_sidebar: hsl(0, 0%, 100%); --color_background_sidebar_alternative: hsl(225, 35%, 92%); --color_bg_alpha: 100%; --color_background_card: hsl(0, 0%, 100%); --color_background_tooltip: hsla(0, 0%, 100%, 1); --color_background_tooltip_overlay: hsla(0, 0%, 0%, 0.7); --color_background_clickable_section_heading: hsl(210, 15%, 85%); --color_background_clickable_section: hsl(225, 75%, 95%); --color_background_clickable_section2: hsl(225, 75%, 95%); --color_background_combobox_label: hsl(0, 0%, 100%, 1); --color_background_input_accent_inactive: hsl(0, 0%, 75%); --color_background_input_accent_focus: hsl(200, 98%, 50%); --color_background_input_accent_checked: hsl(180, 78%, 40%); --color_background_input_back_unchecked: hsl(0, 0%, 90%); --color_background_input_disabled: hsl(0, 0%, 98%); --color_background_input_back_focus: hsl(198, 100%, 90%); --color_background_input_back_checked: hsla(180, 78%, 42%, 0.65); --color_background_delete_row: hsl(0, 0%, 90%); --color_background_invalid: hsl(0, 100%, 90%); --color_background_invalid_overlay: hsl(0, 100%, 90%, 50%); --color_background_warning: hsl(55, 100%, 45%); --color_background_budget: hsl(215, 52%, 90%); --brightness_tooltip_target: 80%; } .theme--dark { --color_text_default: hsl(0, 0%, 85%); --def_shadow: 1px 2px 3px hsla(0, 0%, 0%, 0.2), -4px -4px 3px hsla(213, 24%, 10%, 0.2); --def_drop_shadow: drop-shadow(1px 2px 3px hsla(0, 0%, 0%, 0.2)); --shadow_light: var(--def_shadow); --box_shadow_modal: var(--def_shadow); --box_shadow_header: none; --box_shadow_tooltip: none; --box_shadow_brightness_guide_focus: 60%; --box_shadow_inset_top: inset 0px 3px 3px -3px hsl(0, 0%, 10%); --box_shadow_inset_bottom: inset 0px -3px 3px -3px hsl(0, 0%, 10%); --box_shadow_checkbox_button: inset 0px 0px 5px 1px hsl(0 0% 15%); --default_border_line: 1px solid hsl(0, 0%, 15%); --default_border_line2: 1px solid hsl(0, 0%, 25%); --default_border_line3: 1px solid hsl(0, 0%, 5%); --default_border_line_heavy: 2px solid hsl(0, 0%, 15%); --default_overlay_border_line: 1px solid hsl(0, 0%, 90%); --border_table_row: 1px solid hsl(0, 0%, 40%); --border_table_total_row: 1px solid hsl(212, 30%, 40%); --border_budget_bar_alternative: 1px solid hsl(0, 0%, 20%); --border_tag: 1px solid hsl(0, 0%, 40%); --color_focus: hsl(210, 73%, 50%); --color_background_body: hsl(0, 0%, 10%); --color_background_scrollbar_track: hsl(0, 0%, 10%); --color_background_scrollbar_thumb: hsl(0, 0%, 45%); --color_background_scrollbar_thumb: hsl(210, 67%, 30%); --color_background_header: hsl(0, 0%, 15%); --color_background_breadcrumbs: hsl(0, 0%, 20%); --color_background_sidebar: hsl(0, 0%, 15%); --color_background_sidebar_alternative: hsl(225, 10%, 15%); --color_background_card: hsl(0, 0%, 20%); --color_background_card_inactive: hsl(0, 0%, 15%); --color_background_delete_row: hsl(0, 0%, 17%); --color_background_clickable_section_heading: hsl(210, 15%, 25%); --color_background_clickable_section: hsl(0, 0%, 17%); --color_background_clickable_section2: hsl(0, 0%, 12%); --color_background_combobox_label: hsl(0, 0%, 20%, 1); --color_background_card_group_heading: hsl(210, 15%, 20%); --color_background_card_group_heading2: hsl(210, 15%, 30%); --color_background_card_bottom_bar: hsl(0, 0%, 25%); --color_background_tooltip: hsla(0, 0%, 20%, 1); --color_background_section_heading: hsl(215, 20%, 35%); --color_background_input: hsl(0, 0%, 15%); --color_background_input_disabled: hsl(0, 0%, 19%); --color_background_input_back_unchecked: hsl(0, 0%, 15%); --color_background_input_accent_inactive: hsl(0, 0%, 15%); --color_background_section_header: hsl(225, 45%, 40%); --color_background_section_header_ripple: hsl(220, 20%, 35%); --color_background_button_disabled: hsl(0, 0%, 25%); --color_background_table_heading: hsl(230, 25%, 25%); --color_background_table_heading_highlight: hsl(230, 50%, 50%); --color_background_table_row_2: hsl(0, 0%, 15%); --color_background_table_row_3: hsl(0, 0%, 12%); --color_background_chart_tooltip_row_odd: hsl(0, 0%, 15%); --color_background_highlight: hsl(225, 45%, 45%); --color_background_guide_menu_item_highlight: hsl(165, 100%, 30%); --color_background_budget: hsl(225, 50%, 30%); --color_background_budget_meter: hsl(0, 0%, 18%); --color_background_goal_meter: hsl(165, 100%, 20%); --color_background_warning: hsl(55, 100%, 45%); --color_background_payee_tag: hsl(0, 0%, 24%); --color_text_navigation: hsl(0, 0%, 80%); --color_text_header: hsl(0, 0%, 80%); --color_text_section_divider: hsl(0, 0%, 90%); --color_text_card_heading: hsl(0, 0%, 90%); --color_text_section_heading: hsl(216, 19%, 65%); --color_text_primary: hsl(0, 0%, 85%); --color_text_info: hsl(0, 0%, 70%); --color_text_info_important: hsl(280, 100%, 75%); --color_text_error_no_background: hsl(357, 100%, 55%); --color_text_na: hsl(0, 0%, 35%); --color_text_na_heading: hsl(0, 0%, 50%); --color_text_warning: hsl(355, 100%, 70%); --color_text_warning_alternative: hsl(40, 100%, 45%); --color_text_table_total: hsl(0, 0%, 85%); --color_text_input: hsl(0, 0%, 90%); --color_text_input_placeholder: hsl(0, 0%, 55%); --color_text_input_label: hsl(0, 0%, 60%); --color_text_input_caret: hsl(0, 0%, 60%); --color_text_table_heading: hsl(216, 19%, 85%); --color_text_operator: hsl(216, 19%, 85%); --color_text_positive: hsl(150, 80%, 70%); --color_text_negative: hsl(0, 95%, 75%); --color_text_asset: hsl(205, 100%, 60%); --color_text_liability: hsl(40, 100%, 55%); --color_text_income: hsl(165, 100%, 40%); --color_text_expenditure: hsl(0, 95%, 75%); --color_text_opening_balance: hsl(216, 19%, 55%); --color_text_portfolio_buy: hsl(205, 100%, 60%); --color_text_portfolio_sell: hsl(40, 100%, 55%); --color_heatmap_positive: 165, 100%, 30%; --color_heatmap_negative: 0, 100%, 25%; --color_historic_budget_good: hsl(165, 100%, 30%); --color_historic_budget_warn: hsl(40, 100%, 45%); --color_historic_budget_bad: hsl(0, 75%, 40%); --color_historic_budget_worst: hsl(0, 100%, 25%); --meter_bar_used_color_good: hsl(165, 100%, 30%); --meter_bar_used_color_warn: hsl(40, 100%, 45%); --meter_bar_used_color_warn_alt: hsl(55, 100%, 45%); --meter_bar_used_color_bad: hsl(0, 75%, 60%); --meter_bar_used_color_worst: hsl(0, 100%, 40%); --color_text_shadow: 1px 1px 0px black; --color_text_button_disabled: hsl(0, 0%, 45%); --color_icon: hsl(0, 0%, 90%); --tag_opacity: .8; --filter_birghtness: brightness(100); --brightness_tooltip_target: 40%; } a { color: inherit; } /* ====== SCROLLBAR ====== */ @media (hover: hover) { body { /* Only for Firefox */ scrollbar-width: thin; scrollbar-color: /* var(--color_background_scrollbar_thumb, hsl(280, 46%, 65%)) */ var(--color_background_scrollbar_thumb, hsl(210, 73%, 80%)) var(--color_background_scrollbar_track, hsl(0, 0%, 95%)); } ::-webkit-scrollbar { width: 10px; height: 15px; } ::-webkit-scrollbar-track { background: var(--color_background_scrollbar_track, hsl(0, 0%, 95%)); } ::-webkit-scrollbar-corner { background: var(--color_background_scrollbar_track, hsl(0, 0%, 95%)); } ::-webkit-scrollbar-thumb { /* background: var(--color_background_scrollbar_thumb, hsl(0, 0%, 55%)); */ /* background: var(--color_background_scrollbar_thumb, hsl(280, 46%, 65%)); */ background: var(--color_background_scrollbar_thumb, hsl(210, 73%, 80%)); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { /* background: hsl(280, 100%, 65%); */ background: var(--color_focus); } } html, .--no_overscroll, .--no_overscroll * { overscroll-behavior: none; } /* ====== ZINDEX ====== */ #id_modal { z-index: 30; } #id_modal_bottom_bar_close { z-index: 40; } #id_banner_install_app { z-index: 44; } #id_banner_premium_feature { z-index: 45; } #id_banner_subscription_status { z-index: 46; } #id_info_panel_back { z-index: 49; } #id_combo_box { z-index: 58; } #id_help_bar { z-index: 59; } #id_nav_bar { z-index: 60; } #id_header { z-index: 70; } /* ====== BANNER ====== */ .body__banner { position: fixed !important; top: calc(var(--height_header) + var(--height_guide)); right: var(--panel_info_spacer); min-height: 3.5rem; width: calc(100% - var(--sidenav_spacer) - var(--panel_info_spacer)); display: flex; justify-content: center; } .body__banner~.PrimaryContainer { --height_subscription_status: 3rem; } /* ====== HEADER ====== */ #id_header { position: fixed; top: 0; height: var(--height_header); width: 100vw; box-shadow: var(--box_shadow_header, 0px 2px 2px hsl(0, 0%, 67%)); background-color: var(--color_background_header); display: grid; grid-template-areas: var(--header_grid_area, "header_nav header_search header_actions" ); grid-auto-columns: max-content; grid-template-columns: var(--header_template_columns, min-content 1fr); } .--offline { --color_background_header: hsl(0, 0%, 67%); } #id_toggle_side_nav { grid-area: header_nav; display: var(--navigation_toggle_display, inline-block); margin-left: .5rem; padding-inline: 0; /* Fix Safari iOS bug */ } #id_image_logo { grid-area: header_logo; display: var(--logo_display, none); height: var(--height_header); padding-inline: var(--def_spacing); align-items: center; } #id_header_search { --input_bar_display: none; --box_shadow_input: none; --search_bar_width: 2.5rem; --input_min_width: 2.5rem; --scale: 1.5; --color_icon_overide: hsl(0, 0%, 100%); --input_cursor: pointer; z-index: 2; grid-area: header_search; display: flex; align-items: center; padding-right: 1rem; pointer-events: none; } .--scale_icon { transform: scale(var(--scale, 1)); transition: all .2s; } #id_header_search:where( :focus-within, :has(#id_data_universal_search:hover), ) { --search_bar_width: 100%; --box_shadow_input: inset 0 0 20px hsla(0, 0%, 0%, 0.4); --input_bar_display: unset; --color_icon_overide: unset; --scale: unset; --input_cursor: unset; grid-column-end: var(--header_search_grid_col_end_override, -1); background-color: var(--color_background_header); } /* ====== MAIN CONTAINERS ====== */ body { margin: 0; padding: 0; } /* Required to restricted overflow on sticky tables*/ #id_content { /* When changing the height test on firefox with overflow and sticky bottom items as firefox has some bugs with these */ --height_footer: 0rem; --custom_toolbar_margin_top: calc(var(--def_spacing) * -2); padding-left: 0; border-left: solid transparent var(--def_spacing); scroll-snap-type: x mandatory; overscroll-behavior-x: none; scrollbar-gutter: stable; } .PrimaryContainer { --primary_container_height: calc(var(--primary_container_initial_height, 100%) - var(--primary_container_height_adjustment, 0rem) - var(--height_header) - var(--height_guide) - var(--height_subscription_status)); position: fixed; height: var(--primary_container_height); max-height: var(--primary_container_height); right: var(--panel_info_spacer); width: calc(100% - var(--sidenav_spacer) - var(--panel_info_spacer)); box-sizing: border-box; padding: calc(var(--def_spacing) * 2) var(--def_spacing) 0rem var(--def_spacing); margin-top: calc(var(--height_header) + var(--height_guide) + var(--height_subscription_status)); gap: calc(var(--def_spacing) * 2); overflow: auto; display: flex; flex-direction: column; align-items: center; outline: none; } .PrimaryContainer:after { /* Needed for Firefox as padding on the container is ignored on overflow scroll */ content: ''; padding: var(--primary_container_spacer, calc(var(--def_spacing) * 2)); } .PrimaryContainer>*, .SizeWrapper, .SizeWrapperWide { width: clamp(var(--content-width-min), var(--content-width-required, var(--content-width-optimal)), 100%); max-width: 100%; } .SizeWrapperWide { --content-width-required: calc(var(--content-width-optimal) + 6rem); } .MaxContentWidth { width: max-content; min-width: max(var(--content-width-min), min(var(--content-width-optimal), 100%)); } /* ====== TOOLBAR ====== */ .custom_toolbar { --custom_card_border_radius: 0 0 var(--standard_border_radius) var(--standard_border_radius); --overflow: visible; display: inline-grid; grid-template-columns: minmax(auto, 1fr) auto minmax(auto, 1fr); flex-grow: 1; gap: var(--def_spacing); margin-top: var(--custom_toolbar_margin_top); min-height: 5rem; } .custom_toolbar--2col { grid-template-columns: auto minmax(2rem, auto); } .custom_toolbar__item--left { display: flex; grid-column: 1; justify-self: start; align-items: center; } .custom_toolbar__item--center { grid-column: 2; justify-self: stretch; } .custom_toolbar__item--right { display: flex; justify-self: end; align-items: center; } .custom_toolbar__item--has_auto_hide { justify-self: stretch; } .custom_toolbar__auto_hide_items { flex-grow: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(2rem, max-content)); grid-auto-rows: 100%; overflow: hidden; } /* ====== MERGED COMPONENT ====== */ .merged_component { --modified_border_radius: 0; border-radius: var(--standard_border_radius); } .merged_component--two_button { box-shadow: var(--box_shadow_button); --modified_box_shadow: none; } .merged_component--two_button> :last-child { border-left: var(--button_group_button_border_left); } .merged_component> :where(:not(.merged_component--ignore)):first-child { --modified_border_radius: var(--standard_border_radius) 0 0 var(--standard_border_radius); } .merged_component> :nth-last-child(1 of :not(.Hidden)) { --modified_border_radius: 0 var(--standard_border_radius) var(--standard_border_radius) 0; } .merged_component> :first-child:nth-last-child(1 of :not(.Hidden)) { --modified_border_radius: var(--standard_border_radius); } /* ====== COMBOBOX ====== */ .jsComboboxMainItem, .jsComboboxHideHiddenItems .jsComboboxHiddenItem { display: none; } .jsComboboxHideHiddenItems .jsComboboxMainItem { display: block; } @media only screen and (max-height: 100ch) { /* Media query used allow combobox to overlap guide on small screen */ #id_combo_box { --height_guide: 0rem !important; } } /* ====== HEADER ====== */ .header_button { height: 100%; min-width: 4rem; background-color: transparent; border: none; border-radius: var(--standard_border_radius); cursor: pointer; color: var(--color_text_header); --color_icon: var(--color_text_header); text-align: center; outline: none; text-decoration: none; font-size: 1.5rem; } .header_button:is(:focus, :hover) { color: var(--color_text_header_hover); --color_icon: var(--color_text_header_hover); } #id_input_universal_search::placeholder { color: var(--color_text_na); } /* ====== SIDEBARS ====== */ .sidebar { --sidebar_transition: transform .2s linear var(--transition_delay, 0s); position: fixed; top: var(--height_header); height: calc(100% - var(--height_header)); outline: none; box-shadow: var(--def_shadow); background-color: var(--color_background_sidebar); display: flex; flex-direction: column; overflow-x: hidden; white-space: nowrap; transition: var(--sidebar_transition); will-change: transform; } #id_nav_bar { --sidenav_width_wide: 18rem; --sidenav_width_narrow: 5rem; --icon_size: 2rem; --color_icon: var(--color_text_navigation); width: var(--sidenav_width_wide); border-radius: var(--sidenav_border_radius, 0 var(--standard_border_radius) var(--standard_border_radius) 0); transform: translateX(var(--aside_translateX, calc(var(--sidenav_width_wide) * -1))); color: var(--color_text_navigation); } .sidebar__content_wrapper { --default_border_line: var(--default_border_line3); display: flex; flex-direction: column; height: 100%; align-items: stretch; transition: var(--sidebar_transition); transform: translateX(var(--nav_content_translateX)); will-change: transform; } .nav_bar__item { padding: 1.5rem; gap: 1.5rem; } @media only screen and (max-width: 125ch) { .sidebar--show_sidebar+#id_info_panel_back { --info_panel_back_opacity: .8; --info_panel_translate_delay: 0s; --info_panel_back_translateX: 0; } } #id_help_bar { right: 0; width: var(--panel_info_width); } #id_help_bar { width: min(calc(100% - 4rem), 65ch); transform: translateX(var(--aside_translateX, 100%)); border-radius: var(--standard_border_radius) 0 0 var(--standard_border_radius); } /* focus within is required if sidebar is closed and used tabs into it */ .sidebar--show_sidebar, #id_nav_bar:is(:focus-within, .sidebar--show_sidebar) { --aside_translateX: 0; } #id_body:has(#id_info_panel.sidebar--show_sidebar) { --info_panel_icon_hide_display: flex; --info_panel_icon_show_display: none; } .custom_icon--has_notification { position: relative; } .custom_icon--has_notification::after { content: ''; position: absolute; top: .5rem; right: .25rem; height: .5rem; width: .5rem; border-radius: 50%; background-color: red; } @media only screen and (min-width: 40rem) { :root { --sidenav_spacer: 5rem; --header_grid_area: "header_nav header_logo header_search header_actions"; --header_template_columns: min-content min-content 1fr; --logo_display: flex; --header_search_grid_col_end_override: auto; } #id_nav_bar { --aside_translateX: 0; } #id_nav_bar:not(:is(:focus-within, .sidebar--show_sidebar)) { --aside_translateX: calc(var(--sidenav_width_wide) * -1 + var(--sidenav_width_narrow)); --nav_content_translateX: calc(var(--sidenav_width_wide) - var(--sidenav_width_narrow)); --sidenav_border_radius: 0; } @media (hover: hover) and (pointer: fine) { :root { --header_grid_area: "header_logo header_search header_actions"; --header_template_columns: min-content 1fr; --navigation_toggle_display: none; } #id_nav_bar:hover { --aside_translateX: 0rem; --nav_content_translateX: 0rem; --sidenav_border_radius: initial; --transition_delay: .2s; } #id_nav_bar:has(.popup_menu:hover) { --transition_delay: 0s; } } } @media only screen and (min-width: 150ch) { .LoggedIn.--pin_info_panel { --panel_info_spacer: var(--panel_info_width); --info_panel_translateX: 0; --info_panel_border_radius: 0; --messages_right_offset: var(--panel_info_width); --info_panel_icon_hide_display: flex; --info_panel_icon_show_display: none; } } /* ====== CONTAINERS ====== */ .WillChange { will-change: transform; } .DisplayContent { display: contents; } .CheckContent:empty { --display_override: none; display: none; } .grid_text_image { display: grid; grid-template-areas: var(--grid_text_image_template_area, "title" "image" "text" "bar" ); grid-auto-columns: 1fr; grid-auto-rows: min-content; gap: 0 var(--def_spacing); justify-items: stretch; } @media (min-width: 45rem) { .grid_text_image { --grid_text_image_template_area: "title title" "text image" "bar bar"; } .grid_text_image--left { --grid_text_image_template_area: "title title" "image text" "bar bar"; } .grid_text_image--left .grid_text_image__image { border-radius: 0 var(--standard_border_radius) var(--standard_border_radius) 0; } .grid_text_image__image { border-radius: var(--standard_border_radius) 0 0 var(--standard_border_radius); } } .grid_text_image__text { grid-area: text; } .grid_text_image__image { grid-area: image; max-width: 100%; height: auto; align-self: center; } .grid_bar { display: grid; grid-template-areas: "left_section center_section right_section"; grid-template-columns: repeat(3, minmax(max-content, 1fr)); justify-items: center; } .grid_bar__item--left, .grid_bar> :not(:where(.grid_bar__item--center, .grid_bar__item--right)):first-child:not(:last-child) { grid-area: left_section; justify-self: start; } .grid_bar__item--center, .grid_bar> :not(:where(.grid_bar__item--left, .grid_bar__item--right)):first-child:last-child { grid-area: center_section; } .grid_bar__item--right, .grid_bar> :not(:where(.grid_bar__item--center, .grid_bar__item--left)):last-child:not(:first-child) { grid-area: right_section; justify-self: end; } .ContainerMargin> :not(.ContainerMargin), :not(.ContainerMargin):not(.custom_card):not(.popup_menu__menu)>.ContainerMargin:not(.ContainerPadding) { margin: var(--def_spacing); } dl { margin-block-start: 0; /*Chrome is defaulting this to 1rem*/ } /*Moving these further down can cause layout to break*/ .u-flex { display: flex; align-items: center; justify-content: center; } .u-flex_col { display: flex; flex-direction: column; align-items: center; justify-content: center; } /* ====== OVERFLOW ====== */ .u-overflow_visible { --overflow: visible; overflow: var(--overflow); } .u-overflow_auto { --overflow: auto; overflow: var(--overflow); } .u-overflow_hidden { --overflow: hidden; overflow: var(--overflow); } .u-overflow_clip { overflow: clip; } @media (hover: hover) and (pointer: fine) { .u-scrollbar_on_hover { overflow: hidden; } .u-scrollbar_on_hover:hover { overflow-y: auto; } } /* ====== CARD ====== */ .custom_card { box-sizing: border-box; overflow: var(--overflow, auto); border-radius: var(--custom_card_border_radius, var(--standard_border_radius)); box-shadow: var(--card_shadow, var(--def_shadow)); background-color: var(--color_background_card); } .custom_card> :where(.custom_table:last-child, #id_combo_box_list) { margin-bottom: 0; } .custom_card--with_buttons { display: flex; flex-direction: column; max-height: var(--override_card_max_height, calc(100vh - var(--height_header) - var(--height_guide) - var(--height_footer) - var(--height_max_reduction, 11rem))); } .custom_card__heading { --color_icon: var(--color_text_card_heading); box-sizing: border-box; min-width: 10rem; margin: 0; padding: 0.5rem 0 0.5rem 0; padding-left: var(--def_spacing); padding-right: var(--def_spacing); white-space: nowrap; font-weight: bolder; color: var(--color_text_card_heading); font-size: 1.2rem; } #id_modal .custom_card__heading { /* Required to position the close button correctly */ position: relative; } .custom_card__section_heading { background-color: var(--color_background_card_group_heading, hsla(210, 15%, 95%, 1)); --bg_color_table_row: var(--color_background_card_group_heading, hsla(210, 15%, 95%, 1)); --ripple_color: var(--color_background_section_header_ripple, hsl(220, 20%, 80%)); } .custom_card__section_heading--subheading { background-color: var(--color_background_card_group_heading2, hsl(210, 15%, 95%, .9)); } .custom_card__mini_heading { background-color: var(--color_background_section_heading, hsl(222, 77%, 90%)); } .custom_card__section--inactive { --color_text_overide: var(--color_text_na); --color_icon_overide: var(--color_text_na); --color_icon_clickable: var(--color_text_na); --color_background_overide: var(--color_background_card_inactive, hsl(0, 0%, 94%)); color: var(--color_text_na); background-color: var(--color_background_overide); } .custom_card__section--warning { background-color: var(--color_background_invalid); color: var(--color_text_warning_with_background); --color_icon: var(--color_text_warning_with_background); } .custom_card__section--error { background-color: var(--color_background_invalid); color: var(--color_text_error); --color_icon: var(--color_text_error); } /* ====== MODAL ====== */ #id_modal { --primary_container_spacer: calc((var(--height_footer_modal) + (var(--def_spacing) * 3)) / 2); --sticky_position_bottom: var(--height_footer_modal); --card_shadow: var(--box_shadow_modal); --color_text_card_heading: var(--color_text_with_background); /* Needed to stop element being full page height and causing reflow on scroll due to dynamic browser ui on mobile */ --primary_container_height_adjustment: 1px; box-shadow: 0 1px 0px black; transform: translateX(var(--modal_translateX, 100%)); background-color: hsla(0, 0%, 0%, 0.8); opacity: var(--modal_opacity, 0); transition: opacity .3s ease-in-out; animation-fill-mode: forwards; overscroll-behavior: contain; } #id_modal_bottom_bar_close { --min_width_button: 5rem; display: none; position: fixed; bottom: 0; right: var(--panel_info_spacer); height: var(--height_footer_modal); } .--show_modal+#id_modal_bottom_bar_close { display: flex; } .--show_modal { --modal_translateX: 0; --modal_opacity: 1; } .--hide_modal { --modal_translateX: 0; } #id_modal.--hide_modal>* { --translate_y_from: -3rem; animation: var(--animation_fade_translation); animation-direction: reverse; } /* ====== DEFAULT INPUTS ====== */ .custom_input__wrapper { position: relative; box-shadow: var(--box_shadow_input); border-radius: var(--modified_border_radius, var(--standard_border_radius)); background-color: var(--color_background_input, hsl(0, 0%, 98%)); overflow: hidden; min-width: var(--input_min_width, 5rem); /*Needed to prevent text area resizing being too small*/ min-height: var(--input_min_height); /*Needed to prevent text area resizing being too small*/ align-items: end; /*Needed to display select element correctly in safari*/ cursor: var(--input_cursor); } .custom_input__wrapper:is(:hover, :focus-within) { --input_bar_bg_color: hsl(200, 100%, 50%); --txt_color_radio: var(--color_text_header_hover); } .custom_input__wrapper:focus-within { --input_bar_animation_name: AnimateInputBar } @keyframes AnimateInputBar { from { transform: scaleX(0.2); } to { transform: scaleY(2); } } .custom_input--expandable { --input_min_width: 1rem; --input_padding_right: 0; transition: grid-template-columns .25s; } .custom_input--expandable:has(:placeholder-shown):not(:focus-within) { --expandable_input_track_size: 0fr; --input_label_opacity: 0; /* --box_shadow_input: none; */ --color_background_input: transparent; --input_bar_display: none; --color_icon: var(--color_text_info); } .custom_input--radio { --input_width: 1.5rem; --input_height: 1.5rem; --input_min_height: auto; --input_cursor: pointer; min-height: auto; padding: var(--def_spacing); color: var(--txt_color_radio); align-items: center; } .custom_input__wrapper--textarea { --input_height: 100%; max-height: min(100vh - 30rem, 40ch); cursor: auto; } .custom_input--with_icon { --input_padding_left: 2.5rem; --custom_input_label_left: .5rem; --custom_input_label_translate_x: 2rem; --custom_input_label_translate_y: .5rem; --color_icon: var(--color_text_input_label); display: grid; grid-template-columns: auto var(--expandable_input_track_size, 1fr) auto; justify-content: start; } .custom_input--with_icon .custom_input__input:placeholder-shown { --input_padding_top: 0; } .custom_input__wrapper::before { display: var(--input_bar_display, inline-block); content: ''; height: 1px; background-color: var(--input_bar_bg_color, hsl(0, 0%, 73%)); position: absolute; bottom: 0px; /* Needed for Safari */ width: 100%; transform-origin: center; animation: .2s ease-out forwards; animation-name: var(--input_bar_animation_name); } .custom_input__icon { grid-row: 1; grid-column: 1; } .custom_input__input:not(:placeholder-shown)~.custom_input__label { --input_label_opacity: 1; --custom_input_label_translate_y: 0; } .custom_input--tall { --input_padding_top: 0; --custom_input_label_translate_y_override: .5rem; } .custom_input--tall:not(:has(:placeholder-shown)) { --custom_input_translate_y: .75rem; } .custom_input--has_info_label { --input_padding_top: 0; --input_label_opacity: 1; --custom_input_label_translate_y_override: .5rem; } .custom_input--info_label_show { --custom_input_translate_y: .75rem; } .custom_input__label { position: absolute; top: 0.1rem; left: var(--custom_input_label_left, .75rem); right: var(--custom_input_label_right, auto); overflow: hidden; border-radius: var(--standard_border_radius); font-size: .9rem; font-weight: normal; white-space: nowrap; color: var(--color_text_input_label); opacity: var(--input_label_opacity_override, var(--input_label_opacity, 0)); transform: translate(var(--custom_input_label_translate_x, 0), var(--custom_input_label_translate_y_override, var(--custom_input_label_translate_y, 1.25rem))); transition: transform 0.1s ease-in-out; } .custom_input__label--hide { --input_label_opacity_override: 0; --input_padding_top: 0; } .custom_input__input, input, select { position: var(--input_postion); box-sizing: border-box; grid-row: 1; grid-column: 1 / span 2; left: var(--input_left, 0); margin: 0; width: var(--input_width, 100%); height: var(--input_height); min-height: var(--input_min_height); /*Extra Top padding needed to stop the floating label being cut off*/ padding: var(--input_padding_override, var(--input_padding_top, 1rem) var(--input_padding_right, .5rem) 0 var(--input_padding_left, .75rem)); border: none; background-color: transparent; font-family: inherit; font-size: inherit; text-align: var(--custom_input_text_align); transform: translate(var(--custom_input_translate_x, 0), var(--custom_input_translate_y, 0)); transition: transform 0.1s ease-in-out; outline: none; } .custom_input__input[type='text'] { --input_cursor: text; } .custom_input__input { caret-color: var(--color_text_input_caret); color: var(--color_text_overide, var(--color_text_input, hsl(0, 0%, 0%))); cursor: var(--input_cursor); } .custom_input__input--simple_text_area { padding: 0; margin: 0; text-align: left; border: none; color: var(--color_text_overide, var(--color_text_input, hsl(0, 0%, 0%))); background-color: transparent; } select.custom_input__input { -webkit-appearance: none; } .custom_input__select_option { background-color: hsl(0, 0%, 100%); color: hsl(0, 0%, 0%); } .custom_input__input--validatable_hidden { opacity: 0; width: 0; height: 0; max-height: 0; min-height: 0; padding: 0; float: left; pointer-events: none; user-select: none; } .custom_input__input--with_select_icon { margin-right: -2rem; cursor: pointer; } input:read-only { cursor: auto; border-bottom: none; } [type='checkbox'] { width: 2rem; min-width: 2rem; max-width: 2rem; } ::placeholder, input:placeholder-shown~.custom_input__input { color: var(--color_text_input_placeholder); } .custom_table input[type='number'] { text-align: right; } /* :invalid selector on the select only works on an option if the select box is required, and the selected option's value is empty, so you can style it as you would a text box's placeholder text. Setting it to disabled prevents the user from selecting it in the select options, and setting it to hidden hides it from the select options. */ select:invalid, select option[value=""] { color: hsl(0, 0%, 73%); } .delete_row__group:has(.delete_row__toggle:checked), .IgnoreCell { --color_background_input: var(--color_background_delete_row); --color_background_invalid: var(--color_background_delete_row); --color_background_button_overide: var(--color_text_na); --color_text_overide: var(--color_text_na); background-color: var(--color_background_delete_row); color: var(--color_text_na); } .custom_input__wrapper--valid, .custom_input__wrapper--invalid { --custom_input_label_translate_x: 1rem; --custom_input_translate_x: 1rem; --input_postion: relative; --input_left: -1rem; --input_padding_left: 2rem; } :where(.custom_input__wrapper--valid, .custom_input__wrapper--invalid)::after { content: var(--input_validation_content, "✔"); position: absolute; bottom: 0; left: 0; padding: .2rem .2rem .2rem .5rem; font-weight: bold; color: var(--input_validation_txt_color, var(--color_text_valid)); } .custom_input__wrapper--invalid { --input_validation_content: "✘"; --input_validation_txt_color: var(--color_text_invalid); } .InvalidCell, .form__error_message { --color_background_input: var(--color_background_invalid); background-color: var(--color_background_invalid); color: var(--color_text_overide, var(--color_text_error)); } .form__error_message--warning { background-color: var(--color_background_warning); color: hsl(0, 0%, 0%); } .custom_input--text_align_right { --custom_input_text_align: right; --custom_input_label_left: auto; --custom_input_label_right: .5rem; --custom_input_label_translate_x: 0; } @media (hover: hover) and (pointer: fine) { .custom_input--text_align_right { --custom_input_label_right: 1.5rem; } .custom_input--no_spinner .custom_input--text_align_right { --custom_input_label_right: .5rem; } } .custom_input--search ::-webkit-search-cancel-button { -webkit-appearance: none; } .custom_input__input:placeholder-shown~.jsClearInputButton { --custom_button_display: none } .custom_input--toggle_sign { --custom_button_display: none; --min_width_button: 2.5rem; min-width: 17ch; max-width: var(--input_max_width, calc(17ch + 2.5rem)); } .custom_input--toggle_sign:not(:is(:focus-within, :hover)) .custom_input__wrapper { --modified_border_radius: var(--standard_border_radius); } .custom_input--toggle_sign:is(:focus-within, :hover) { --custom_button_display: flex; --input_min_width: calc(100% - 2.5rem); } /* Remove spinner icon from Chrome, Safari, Edge, Opera */ .custom_input--no_spinner input::-webkit-outer-spin-button, .custom_input--no_spinner input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Remove spinner icon from Firefox */ :where(.custom_input--no_spinner, .Disabled) input[type=number] { -moz-appearance: textfield; } /* ====== CLICKABLE CONTENT ====== */ .clickable--section { position: relative; } .clickable--section::before { content: var(--clickable_content); position: absolute; top: 0; left: 0; width: .5rem; height: 100%; background-color: var(--color_focus); color: var(--color_text_with_background); --color_icon: var(--color_text_with_background); } .clickable, .clickable--section, .Clickable { outline: none; } select, .clickable, .clickable--pointer_only, .clickable--section, .Clickable { cursor: pointer; } .clickable--text { text-decoration: underline; } @media (any-pointer: fine) { /* Media query used to prevent hover state being stuck on touch devices */ .clickable:not(:has(.clickable:is(:hover, :focus-visible))):is(:hover, :focus-visible) { --color_icon_overide: var(--color_icon_clickable); background-color: var(--color_bg_clickable); backdrop-filter: var(--color_bg_filter_clickable); } .clickable--has_clickable:has(.clickable:is(:hover, :focus-visible)) { box-shadow: none; } .clickable__section_heading { --color_bg_clickable: var(--color_background_clickable_section_heading); } .clickable__card_heading, .clickable__section { --color_bg_clickable: var(--color_background_clickable_section); } .clickable__section2 { --color_bg_clickable: var(--color_background_clickable_section2); } .clickable__section_on_dark_bg { --color_bg_clickable: var(--color_focus); } .clickable__section_with_dark_bg { --color_bg_filter_clickable: brightness(1.1); } .clickable__icon { --color_bg_clickable: var(--color_focus); --color_icon_clickable: var(--color_text_with_background); } .clickable__cell:is(:hover, :focus-visible) { background-color: inherit; box-shadow: inset 0 0 0 2px var(--color_focus); } .clickable--table_row:is(:hover, :focus-visible) td { cursor: pointer; box-shadow: inset 0 2px 0 0 var(--color_focus), inset 0 -2px 0 0 var(--color_focus); } .clickable--section:is(:hover, :focus) { --clickable_content: ''; } .Clickable:not(.custom_input__wrapper):is(:hover, :focus) { --ripple_color: hsl(280, 46%, 75%); --color_icon_overide: var(--color_text_with_background); --color_text_overide: var(--color_text_with_background); --color_background_overide: var(--color_focus); --color_adjustment: brightness(.9); --tag_border_color_overide: hsl(0, 0%, 100%); --tag_back_color_overide: transparent; --brightness_tooltip_target: 50%; background-color: var(--color_focus); color: var(--color_text_with_background); } } /* ====== EXPANDABLE ====== */ .jsSelectAllGroup:has(.ExpandGroup.ExpandOpen) { --expand_group_toggle_icon_open: none; --expand_group_toggle_icon_closed: flex; } .expand_group__toggle:focus-within:not(:active) { --expand_group_toggle_animation: var(--animation_standard_props) animateRotateIn; } .expand_group__toggle_icon--open { --icon_display_override: var(--expand_group_toggle_icon_open, flex); animation: var(--expand_group_toggle_animation); } .expand_group__toggle_icon--close { --icon_display_override: var(--expand_group_toggle_icon_closed, none); animation-name: animateRotateOut; animation: var(--expand_group_toggle_animation); } .ExpandGroup:not(.ExpandOpen):not(.--animate_expand) .ExpandItem, .ExpandGroup.ExpandClose:not(.--animate_expand) .ExpandItem, .ExpandGroup.ExpandClose:not(.--animate_expand)+.ExpandItem, .ExpandGroup.ExpandClose:not(.--animate_expand)+.ExpandItem~.ExpandItem, .ExpandGroup:not(.ExpandOpen) .ExpandIconClose, .ExpandGroup.ExpandOpen .ExpandIconOpen { display: none; } .ExpandGroup.ExpandOpen .ExpandGroup:not(.ExpandOpen) .ExpandIconOpen { display: inline-block; } .ExpandOpen [data-ui_on_click~="uiExpandToggle"].u-border_rounded { border-radius: var(--standard_border_radius) var(--standard_border_radius) 0 0; } .ExpandOpen [data-ui_on_click~="uiExpandToggle"].u-border_rounded+.custom_card { border-radius: 0 0 var(--standard_border_radius) var(--standard_border_radius); } .AnimateExpandIcon.--animate_expand :where(.ExpandIconOpen, .ExpandIconClose) { animation: var(--animation_standard_props) animateRotateOut; } .ExpandIconClose { animation-name: animateRotateIn !important; } /* Animate sibling elements */ .ExpandSiblings--reversed, .ExpandSiblings { --translate_y_to: calc(0rem - var(--animation_height)); position: relative; z-index: 100; animation: var(--animation_standard_props) animateTranslateXY; } .ExpandSiblings--reversed { animation-direction: reverse; } /* Required for table row animations */ .--animate_expand { position: relative; z-index: 1; } .ExpandItem { --translate_y_from: -3rem; } .--expand_horizontal { --translate_x_from: -3rem; --translate_y_from: 0; } .ExpandClose.--animate_expand~.ExpandItem, .ExpandClose.--animate_expand .ExpandItem { z-index: -100; animation-direction: reverse !important; } :where(.ExpandOpen, .ExpandClose).--animate_expand~.ExpandItem, :where(.ExpandOpen, .ExpandClose).--animate_expand .ExpandItem { pointer-events: none; animation: var(--animation_fade_translation); } .--animate_expand :has(+ .ExpandItem) { z-index: 1; position: var(--position, relative); } /* ====== CHECKBOX ====== */ .custom_checkbox { position: relative; outline: none; cursor: pointer; margin: var(--custom_checkbox_margin, auto); clear: both; } .custom_checkbox__element { height: 2rem; width: 2rem; border-radius: calc(var(--standard_border_radius) / 2); box-shadow: var(--box_shadow_input); background-color: var(--input_checkbox_back_color_override, var(--input_checkbox_back_color, var(--color_background_input_back_unchecked))); } .custom_checkbox__element::after { content: ""; margin-top: -.3rem; width: .5rem; height: 1rem; border: solid hsl(0, 0%, 100%); border-width: 0 2px 2px 0; border-radius: 0 0 3px 0; transform: var(--input_checkbox_transform, rotate(0deg) scale(0)); transition: transform 0.2s ease-out; } .custom_checkbox:is(:active, :hover, :focus) { --input_checkbox_back_color: var(--color_background_input_back_focus); } .custom_checkbox__input:checked~.custom_checkbox__element { --input_checkbox_back_color: var(--color_background_input_accent_checked); --input_checkbox_transform: rotate(45deg) scale(1); } /* ====== SWITCH ======*/ .custom_switch { --color_bg_input_back_unchecked: var(--color_background_input_back_unchecked); --color_bg_input_back_checked: var(--color_background_input_back_checked); --color_bg_input_accent_unchecked: var(--color_background_input_accent_inactive); --color_bg_input_accent_checked: var(--color_background_input_accent_checked); } .custom_switch--inverted_options { --color_bg_input_back_unchecked: var(--color_background_input_back_checked); --color_bg_input_back_checked: var(--color_background_input_back_unchecked); --color_bg_input_accent_unchecked: var(--color_background_input_accent_checked); --color_bg_input_accent_checked: var(--color_background_input_accent_inactive); rotate: 180deg; } .custom_switch__input { height: 0; width: 0; min-width: 0; visibility: hidden; } .custom_switch__label { --color_icon: var(--input_switch_text_color); display: grid; grid-template-columns: auto var(--input_switch_label_offset, 1fr); justify-content: end; align-content: center; width: 4rem; height: 1.25rem; border-radius: 100px; box-shadow: var(--box_shadow_input); background-color: var(--input_switch_back_color, var(--color_bg_input_back_unchecked)); color: var(--input_switch_text_color); cursor: pointer; outline: none; transition: grid-template-columns 0.2s ease-out; -webkit-tap-highlight-color: transparent; } .custom_switch__options { width: 1.25rem; height: 1.25rem; padding: 0.5rem; border-radius: 50%; background-color: var(--input_switch_accent_color, var(--color_bg_input_accent_unchecked)); box-shadow: var(--input_switch_accent_boxshadow); font-size: x-small; user-select: none; } .custom_switch__option_off { display: var(--input_switch_option_off_display); } .custom_switch__option_on { display: var(--input_switch_option_on_display); } .custom_switch__input:checked+.custom_switch__label { --input_switch_back_color: var(--color_bg_input_back_checked); --input_switch_accent_color: var(--color_bg_input_accent_checked); --input_switch_label_offset: 0fr; --input_switch_option_off_display: none; --input_switch_option_on_display: block; } .custom_switch:is(:hover, :focus) { --input_switch_back_color: var(--color_background_input_back_focus); --input_switch_accent_boxshadow: 0px 0px 1px 1px var(--color_background_input_accent_focus); } .custom_switch:is(:hover, :focus) .custom_switch__input:checked+.custom_switch__label { --input_switch_accent_color: var(--color_background_input_accent_focus); } /* ====== INPUR RANGE ====== */ .custom_input__input--range { -webkit-appearance: none; padding: 0rem; cursor: pointer; } .custom_input__input--range::-webkit-slider-runnable-track { height: 1rem; background-color: var(--input_checkbox_back_color_override, var(--input_checkbox_back_color, var(--color_background_input_back_unchecked))); border: none; border-radius: var(--standard_border_radius); box-shadow: var(--box_shadow_input); } .custom_input__input--range::-moz-range-track { height: 1rem; background-color: var(--input_checkbox_back_color_override, var(--input_checkbox_back_color, var(--color_background_input_back_unchecked))); border: none; border-radius: var(--standard_border_radius); box-shadow: var(--box_shadow_input); } .custom_input__input--range::-webkit-slider-thumb { -webkit-appearance: none; margin-top: -.5rem; height: 2rem; width: 3rem; border: none; box-shadow: var(--input_switch_accent_boxshadow); border-radius: var(--standard_border_radius); background-color: var(--input_switch_accent_color, var(--color_background_input_accent_checked)); } .custom_input__input--range::-moz-range-thumb { margin-top: -.5rem; height: 2rem; width: 3rem; border: none; box-shadow: var(--input_switch_accent_boxshadow); border-radius: var(--standard_border_radius); background-color: var(--input_switch_accent_color, var(--color_background_input_accent_checked)); } .custom_input__input--range:is(:active, :hover, :focus) { --input_checkbox_back_color: var(--color_background_input_back_focus); --input_switch_accent_color: var(--color_background_input_accent_focus); } /* ====== BUTTONS ====== */ .custom_button { --box_shadow_button_hover: 0px 2px 2px hsla(0, 0%, 0%, .4); --color_icon: var(--color_text_button); font-size: 1em; /* Needed for Safari */ box-sizing: border-box; min-height: 2.5rem; min-width: var(--min_width_button, min-content); /*Don't make this too big as need dynamic sized buttons for small screens*/ padding: 0 var(--def_spacing); display: var(--custom_button_display, flex); gap: var(--def_spacing); margin: 0; /* Needed for Safari */ justify-content: center; align-items: center; background-color: var(--color_background_button_overide, var(--color_background_button_hover, var(--color_background_button, hsl(216 19% 44%)))); opacity: var(--custom_button_opacity); border: none; border-radius: var(--modified_border_radius, var(--standard_border_radius)); color: var(--color_text_button) !important; text-align: center; text-decoration: none; cursor: pointer; user-select: none; outline: none; flex-shrink: 0; font-family: 'Nunito', sans-serif; box-shadow: var(--modified_box_shadow, var(--box_shadow_button)); transition: transform .1s ease-out; } .custom_button:is(:hover, :focus-visible) { -webkit-tap-highlight-color: transparent; } .custom_button:not(:active):is(:hover, :focus-visible) { --box_shadow_button: var(--box_shadow_button_hover); --color_background_button_hover: var(--clr_bg_button_hover); filter: var(--button_filter_hover, brightness(110%)); } .custom_button:not(:active):focus-visible { /*State to show if a user tabs to an element*/ --box_shadow_button: inset 0px 0px 0px 2px hsl(0, 0%, 0%), inset 0px 0px 0px 3px hsl(0, 0%, 100%), var(--box_shadow_button_hover); } .custom_button--icon { height: auto; min-width: 2.5rem; } .custom_button__spacer::before { height: 100%; border-left: 2px solid hsl(0, 0%, 100%); margin: 0 var(--def_spacing) 0 var(--def_spacing); content: ''; } .custom_button__spacer--vertical { width: 100%; max-height: 1px; background-color: hsl(0, 0%, 100%); flex-grow: 0; } .AnimateButtonReveal { --translate_x_from: -1rem; animation: var(--animation_fade_translation); } .custom_button--bar_item { --color_background_button: transparent; --color_text_button: var(--color_text_info); --clr_bg_button_hover: var(--color_background_clickable_section); --modified_box_shadow: 0; --button_filter_hover: none; } .custom_button--no_shadow { --box_shadow_button: none; } .custom_button--menu_item { --modified_border_radius: 0; --modified_box_shadow: none; --color_background_button: none; --color_text_button: var(--color_text_default); --clr_bg_button_hover: var(--color_background_clickable_section); --button_filter_hover: none; box-sizing: content-box; flex-grow: 1; } .custom_button--link { --button_filter_hover: none; --color_background_button: transparent; --color_text_button: var(--color_text); --color_icon: var(--color_text, var(--color_text_default)); text-decoration: underline; box-shadow: none; } .custom_button--action { --color_background_button: hsl(180, 58%, 45%); } .custom_button--action_off { --color_background_button: hsl(215, 20%, 25%); } .custom_button--action_add { --color_background_button: hsl(165, 100%, 30%); } .custom_button--checkbox_action_remove:has(input:checked), .custom_button--action_remove { --color_background_button: hsl(0, 70%, 45%); } .custom_button--call_to_action { --color_background_button: var(--color_focus); } .custom_button--toggle { --color_background_button: hsl(210, 90%, 55%); } .custom_button--checkbox:has(input:checked) { --custom_button_icon_unchecked_display: none; --custom_button_icon_checked_display: inline-flex; --custom_button_text_unchecked_display: none; --custom_button_text_checked_display: inline-flex; } .custom_button--checkbox:focus-within:not(:active) { --button_icon_animation: var(--animation_standard_props) animateRotateIn; } .custom_button__text--unchecked { display: var(--custom_button_text_unchecked_display, flex); } .custom_button__text--checked { display: var(--custom_button_text_checked_display, none); ; } .custom_button__icon--unchecked { --icon_display_override: var(--custom_button_icon_unchecked_display, inline-flex); animation-name: animateRotateOut; animation: var(--button_icon_animation); } .custom_button__icon--checked { --icon_display_override: var(--custom_button_icon_checked_display, none); animation: var(--button_icon_animation); } .custom_button--current_page { --color_background_button: hsl(210, 90%, 55%); } .custom_button--signup { --color_background_button: hsl(20, 90%, 50%); } .custom_button--check_active_input:has(.custom_button__active_trigger:where( :not([type="checkbox"]):not(:placeholder-shown), [type="checkbox"]:checked, )) { --color_background_button: hsl(180, 58%, 45%); } /* ====== HIDE IF INPUT EMPTY ====== */ .check_input_empty__wrapper:has(:placeholder-shown) .check_input_empty__hide { display: none; } /* ====== TABLE ====== */ .custom_table { border-width: 0; border-spacing: 0; text-align: right; margin: 0; table-layout: fixed; min-width: 100%; font-style: normal; font-weight: normal; } .custom_table__head { z-index: 3; display: var(--table_head_display, table-header-group); color: var(--color_text_table_heading, hsl(216, 19%, 35%)); } .custom_table__body { display: var(--table_body_display, table-row-group); } .custom_table__row { display: var(--table_row_display, table-row); border-style: none; background-color: var(--bg_color_table_row, var(--color_background_card)); } .custom_table__row--total { --border_top_table_cell: var(--border_table_total_row, 1px solid hsl(212, 30%, 80%)); color: var(--color_text_table_total, hsl(216, 19%, 35%)); } .custom_table__head_cell { display: var(--table_cell_display, table-cell); padding: var(--table_cell_padding); background-color: var(--table_bg_color_overide, var(--color_background_table_heading, hsl(225, 35%, 95%))); vertical-align: bottom; align-items: end; justify-content: end; text-align: right; } .custom_table__body_cell { display: var(--table_cell_display, table-cell); border-top: var(--border_top_table_cell); border-bottom: var(--border_bottom_table_cell); box-shadow: var(--box_shadow_table_cell); padding: var(--table_cell_padding); background-color: inherit; align-items: center; justify-content: end; text-align: right; } :is(.custom_table__head_cell, .custom_table__body_cell):first-child { grid-column: 1; text-align: left; justify-content: start; } .custom_table__body_cell:not(:last-child):first-child { z-index: 1; position: sticky; left: 0; max-width: 45vw; } .custom_table__head_cell:not(:last-child):first-child { z-index: 4; position: sticky; left: 0; max-width: 45vw; } .AlternateRows tr:not(:last-child) { --border_bottom_table_cell: var(--border_table_row, 1px solid hsl(0, 0%, 80%)); } .custom_table__head_cell:first-child, .custom_table__row:first-child .custom_table__body_cell:first-child { border-top-left-radius: var(--standard_border_radius); /* Animation removes rounded border as you scroll */ animation-name: animationBorderRadius; animation-range-start: 1rem; animation-timing-function: step-start; animation-timeline: scroll(x); } .custom_table__head_cell:last-child, .custom_table__row:first-child .custom_table__body_cell:last-child { border-top-right-radius: var(--standard_border_radius); } .custom_table__row:last-child .custom_table__body_cell:first-child { border-bottom-left-radius: var(--table_first_cell_border_radius_bl, var(--standard_border_radius)); /* Animation removes rounded border as you scroll */ animation-name: animationBorderRadius; animation-range-start: 1rem; animation-timing-function: step-start; animation-timeline: scroll(x); } .custom_table__row:last-child .custom_table__body_cell:last-child { border-bottom-right-radius: var(--table_first_cell_border_radius_br, var(--standard_border_radius)); } @keyframes animationBorderRadius { to { border-top-left-radius: 0; border-bottom-left-radius: 0; } } /* ====== DATA GRID ====== */ .data_grid { display: grid; grid-template-columns: repeat(var(--grid_columns, 3), auto); } .data_grid__subcol { display: grid; grid-template-rows: subgrid; grid-row: span calc(var(--rows, 0) + var(--dynamic_rows, 0)); } .data_grid__subgrid { display: grid; grid: subgrid / subgrid; grid-column: 1 / -1; grid-row: span calc(var(--rows, 0) + var(--dynamic_rows, 0)); } /* Safari freezes with subgrid in rows so set heights dynamically using js */ @supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) { .data_grid__subcol, .data_grid__subgrid { grid-template-rows: auto; grid-row: auto; } } .data_grid__subrow { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; } .data_grid__cell--span_all_columns { grid-column: 1 / -1; } .data_grid__cell--text { text-align: left; justify-content: start; } .data_grid__cell--number { justify-content: end; text-align: right; } /* ====== DATA GRID - CUSTOM DASHBOARD ====== */ .data_grid--custom_dashboard { counter-reset: card_number; --custom_dashboard_template_columns: var(--custom_dashboard_template_columns_narrow, 1); } .data_grid__custom_dashboard--show_wide { display: var(--custom_dashboard_wide_display, none); } .data_grid--custom_dashboard:has(.data_grid__custom_dashboard_card_menu_icon.popover__target) .jsCustomDashboardCardHeading::before { counter-increment: card_number; content: var(--card_counter, counter(card_number)) ") "; } .data_grid__custom_dashboard_card { --custom_dashboard_card_column_span: var(--custom_dashboard_card_column_span_narrow, 1); --custom_dashboard_card_row_span: var(--custom_dashboard_card_row_span_narrow, 1); grid-column: span min(var(--custom_dashboard_card_column_span, 1), var(--custom_dashboard_template_columns)); grid-row: span var(--custom_dashboard_card_row_span, 1); } @media only screen and (min-width: 100ch) { #id_content { --custom_dashboard_wide_display: flex; } .data_grid--custom_dashboard { --custom_dashboard_template_columns: var(--custom_dashboard_template_columns_wide, 4); } .data_grid__custom_dashboard_card { --custom_dashboard_card_column_span: var(--custom_dashboard_card_column_span_wide, 1); --custom_dashboard_card_row_span: var(--custom_dashboard_card_row_span_wide, 1); order: var(--card_order_wide); --card_counter: var(--card_order_wide_text); } .data_grid__custom_dashboard--show_narrow { display: none; } } /* ====== DATA GRID - PORTFOLIO ====== */ .data_grid__portfolio_total_row { grid-template-areas: var(--portfolio_account_row_template_area, "label label label label label valuation menu" ". . . . roi roi menu" ); } .data_grid__portfolio_subcell { font-size: var(--portfolio_subcell_font_size, .8rem); padding-bottom: var(--portfolio_cell_padding_bottom, var(--def_spacing)); } .data_grid__portfolio_cell_purchase_cost, .data_grid__portfolio_cell_share_of_account, .data_grid__portfolio_cell_share_of_portfolio, .data_grid__portfolio_cell_gain_unrealised, .data_grid__portfolio_cell_gain_realised, .data_grid__portfolio_cell_gain_income { display: none; } .data_grid__portfolio_cell_note { display: var(--portfolio_column_display_note, none); grid-area: note; } @media only screen and (min-width: 120ch) { #id_section_portfolio { --portfolio_widescreen_only_display: content; } .data_grid__portfolio_cell_sticky { z-index: 1; position: sticky; left: 0; border-right: var(--default_border_line); } .data_grid__portfolio_cell_purchase_cost { display: var(--portfolio_column_display_purchase_cost, none); grid-area: purchase_cost; } .data_grid__portfolio_cell_share_of_account { display: var(--portfolio_column_display_share_of_account, none); grid-area: share_of_account; } .data_grid__portfolio_cell_share_of_portfolio { display: var(--portfolio_column_display_share_of_portfolio, none); grid-area: share_of_portfolio; } .data_grid__portfolio_cell_gain_unrealised { display: var(--portfolio_column_display_gain_unrealised, none); grid-area: gain_unrealised; } .data_grid__portfolio_cell_gain_realised { display: var(--portfolio_column_display_gain_realised, none); grid-area: gain_realised; } .data_grid__portfolio_cell_gain_income { display: var(--portfolio_column_display_gain_income, none); grid-area: gain_income; } .data_grid--portfolio { --portfolio_header_row_display: grid; --portfolio_template_colums: repeat(16, auto); --portfolio_account_row_template_area: "label . . . . purchase_cost valuation share_of_account share_of_portfolio gain_unrealised gain_realised gain_income roi roi . menu"; --portfolio_item_row_template_area: "label symbol holding price price purchase_cost valuation share_of_account share_of_portfolio gain_unrealised gain_realised gain_income roi roi note menu"; --portfolio_symbol_small_display: none; --portfolio_symbol_large_display: flex; --portfolio_value_label_display: none; --portfolio_item_column_gap: 0; --portfolio_cell_return_display: contents; --portfolio_cell_padding_bottom: 0; --portfolio_value_padding: var(--def_spacing) calc(var(--def_spacing) * .5); --portfolio_cell_align: end; --portfolio_subcell_font_size: auto; } } /* ====== DATA GRID - BUDGET INPUT ====== */ .data_grid--recurring_budget_input:has(.data_grid--recurring_budget_alterations:nth-child(2)) { --recurring_budget_input_columns: 1fr auto auto auto; --recurring_budget_input_row_delete_display: flex; } .data_grid__row--altered_budget_inputs+.data_grid__row--altered_budget_calculated { display: none; } /* ====== DYNAMIC CONTENT ====== */ .dynamic_content::before { content: var(--dynamic_content); } .dynamic_content--placeholder { --dynamic_content: "..."; } /* ====== COUNTER ====== */ .counter__wrapper { counter-reset: section; } .counter__item::before { display: flex; align-items: center; justify-content: center; padding: var(--def_spacing); counter-increment: section; content: counter(section); } /* ====== FINANCIAL STATEMENT ====== */ .--has_budget_override::before { content: '◦'; margin-right: 1ch; } .FSSection+ :is(.FSAccountGroup, .FSAccount), .FSAccountGroup+.FSAccount:not([data-account_group_name='']) { --box_shadow_table_cell: var(--box_shadow_inset_top); } /* :is selector around :has prevents Firefox invalidating all selectors */ .FSAccount:is(:has(+ .FSSection)), .LastRow:not([data-account_group_name='']):not(.ExpandOpen) { --box_shadow_table_cell: var(--box_shadow_inset_bottom); } /* :is selector around :has prevents Firefox invalidating all selectors */ .FSSection+.FSAccount:is(:has(+ .FSSection)), .FSSection+.FSAccountGroup.LastRow:not(.ExpandOpen), .FSAccountGroup+.FSAccount.LastRow:not([data-account_group_name='']) { --box_shadow_table_cell: var(--box_shadow_inset_top), var(--box_shadow_inset_bottom); } /* ====== INPUT GRID ====== */ .InputGrid { display: grid; grid-template-columns: minmax(min-content, auto); grid-auto-columns: max-content; grid-gap: var(--def_spacing); align-items: stretch; } .InputGrid-row { display: contents; } .InputGrid-c1 { grid-column-start: 1; left: 0; } .InputGrid-c2 { grid-column-start: 2; } .InputGrid-c3 { grid-column-start: 3; } .InputGrid-c4 { grid-column-start: 4; } /* ====== LIST ====== */ ol { list-style-type: none; margin: 0; padding: 0; /*border-bottom: 1px solid #C7C7C7; /*Even darker grey*/ } .UnorderedList { padding-inline-start: 1.25rem; } .ParagraphStandard ol { list-style-type: decimal; margin: revert; padding: revert; } .ParagraphStandard li { margin: .5rem 0; } /* ====== POPUP MENU ===== */ .popup_menu { position: var(--popup_menu_position, relative); } .popup_menu__button { width: var(--popup_menu_button_width, fit-content); height: var(--popup_menu_button_height); } :is(.popup_menu, .popup_menu__button, ):focus { outline: none; } .popup_menu__menu { z-index: 1; display: var(--popup_menu_display, none); contain: layout style paint; position: absolute; left: var(--popup_menu_position_left, 0rem); right: var(--popup_menu_position_right, auto); top: var(--popup_menu_position_top); bottom: var(--popup_menu_position_bottom); margin-top: var(--popup_menu_offset, var(--def_spacing)); box-shadow: var(--def_shadow); background-color: var(--color_background_card); border: var(--default_overlay_border_line); border-radius: var(--popup_menu_border, 0 0 var(--standard_border_radius) var(--standard_border_radius)); color: var(--color_text_primary); min-width: 10ch; width: max-content; max-width: calc(var(--popup_page_size, calc(100vw - 4.5rem - var(--sidenav_spacer))) - var(--popup_max_width_adjustment, 0rem)); /*Make this a bit shorted than the screen less top and bottom bars so it works on mobile with url bar*/ max-height: calc(100vh - 15rem - var(--height_guide)); overflow-y: auto; flex-direction: column; transform: translate(var(--popup_menu_translate_x)); animation: var(--animation_pop_down); transform-origin: var(--popup_menu_transform_origin, top); will-change: transform; } .merged_component .popup_menu__menu { --modified_border_radius: var(--standard_border_radius); } .popup_menu__section_heading { border-top: var(--default_border_line); padding: calc(var(--def_spacing) * 2); padding-bottom: var(--def_spacing); display: flex; gap: calc(var(--def_spacing) * 2); align-items: center; justify-content: flex-start; color: var(--color_text_section_heading); font-weight: bold; } .popup_menu__item { min-height: 2.5rem; padding-inline: calc(var(--def_spacing) * 2); padding-block: var(--def_spacing); display: flex; gap: calc(var(--def_spacing) * 2); align-items: center; justify-content: flex-start; } .popup_menu--open { --popup_menu_display: flex; } .popup_menu--right { --popup_menu_position_left: auto; --popup_menu_position_right: 0rem; --popup_menu_transform_origin: top right; } .popup_menu--center_top { --popup_menu_position_left: 50%; --popup_menu_position_bottom: calc(100% + var(--popup_menu_offset, var(--def_spacing))); --popup_menu_border: var(--standard_border_radius) var(--standard_border_radius) 0 0; --popup_menu_transform_origin: bottom; --popup_menu_translate_x: -50%; --translate_x_from: -100%; } .popup_menu--center_bottom { --popup_menu_position_left: 50%; --popup_menu_translate_x: -50%; --translate_x_from: -50%; } @media (hover: hover) and (pointer: fine) { /* Media query used to prevent hover state being stuck on touch devices */ .popup_menu { --popup_menu_offset: var(--popup_menu_hover_offset, 0rem); } .popup_menu:not(.popup_menu--no_hover_show):where(.popup_menu__button:hover, :has(.popup_menu__button:hover)), .popup_menu__menu:where(:hover, :focus-within) { --popup_menu_display: flex; } } /* ====== TOOLTIP ====== */ .custom_popover { --override_card_max_height: min(calc(100vh - 10rem), 60ch); contain: layout style; z-index: 10000; position: absolute; display: var(--tooltip_display, none); width: max-content; min-width: 10ch; max-width: min(50ch, calc(100vw - 4rem)); outline: none; padding: var(--tooltip_spacing, 1rem); } .tooltip--no_spacing { --tooltip_spacing: 0; } .popover__menu_icon--open { --icon_display_override: var(--popover_menu_icon_open_display, inline-flex); /* animation: var(--animation_standard_props) animateRotateIn; */ } .popover__menu_icon--close { --icon_display_override: var(--popover_menu_icon_close_display, none); animation: var(--animation_standard_props) animateRotateOut; } .popover__target { --popover_menu_icon_open_display: none; --popover_menu_icon_close_display: inline-flex; anchor-name: --popover_target; } .popover__target:where(.popover__target--highlight) { box-shadow: inset 0px 0px 0px 1px hsl(0, 0%, var(--brightness_tooltip_target)); } .--tooltip_visible { --tooltip_display: block; } .--tooltip_transition { transition: top .2s ease-out, left .2s ease-out, right .2s ease-out; } @position-try --popover_position_x1 { right: anchor(left); left: auto; } @position-try --popover_position_x2 { right: anchor(right); left: auto; } @position-try --popover_position_x3 { right: auto; left: auto; } .tooltip__content { overflow: hidden; box-shadow: var(--box_shadow_tooltip); border: var(--default_overlay_border_line); background-color: var(--color_background_tooltip); border-radius: var(--tooltip_border_radius, var(--standard_border_radius)); min-height: 2rem; } .tooltip--rounded_bottom { --tooltip_border_radius: 0 0 var(--standard_border_radius) var(--standard_border_radius); } .tooltip--rounded_right { --tooltip_border_radius: 0 var(--standard_border_radius) var(--standard_border_radius) 0; } @media only screen and (max-width: 125ch) { :where(#id_content, .jsPopoverParent):has(.popover--dragging) { overflow: hidden; } .popover--menu { --tooltip_border_radius: var(--standard_border_radius) var(--standard_border_radius) 0 0; --translate_y_from: 100%; position: sticky; top: auto !important; left: 0 !important; bottom: 0 !important; min-width: 100%; display: flex; justify-content: center; background-color: hsl(0deg 0% 0% / 80%); transition: transform .25s ease-in-out allow-discrete, display .25s allow-discrete; transition: transform .25s ease-in-out allow-discrete; /* animation: var(--animation_standard_props) animateTranslateXY !important; */ } .popover--dragging { animation: none !important; } .popover--menu .tooltip__content::before { content: ''; height: .25rem; margin: .5rem calc(50% - 2rem) .5rem calc(50% - 2rem); background: linear-gradient(to right, grey 0%, grey 100%); background-size: 100%; background-repeat: no-repeat; background-position: center; border-radius: .5rem; } /* @starting-style { .popover--menu { transform: translateY(100%); } } */ } /* ====== CHART ====== */ .chart__wrapper { --chart_tooltip_background_color: var(--color_background_tooltip_overlay); --chart_max_height: 35vh; display: grid; justify-content: stretch; grid-auto-columns: minmax(45ch, 1fr); } .chart__wrapper--side_tooltip { --chart_tooltip_pointer_events: auto; --chart_tooltip_max_height: var(--chart_max_height); --chart_tooltip_min_width: 30ch; --chart_tooltip_header_position: sticky; --chart_tooltip_background_color: var(--color_background_card); --chart_tooltip_text_color: var(--color_text_default); --color_text_negative_light: var(--color_text_negative); --color_text_positive_light: var(--color_text_positive); --chart_tooltip_total_border: var(--border_table_total_row, 1px solid hsl(212, 30%, 80%)); --chart_tooltip_animation_y: -3rem; grid-template-columns: minmax(0, 2fr); } @media (min-width: 140ch) { .chart__wrapper--side_tooltip { grid-auto-flow: var(--chart_grid_flow, column); --chart_tooltip_animation_y: 0; --chart_tooltip_animation_x: 3rem; } } .chart__canvas_wrapper { min-height: 20rem; height: var(--chart_height, clamp(20rem, 40rem, var(--chart_max_height))); cursor: pointer; } .chart__canvas_wrapper--summary_to_detail { min-height: 10rem; --chart_height: var(--chart_height_categories, 10rem); padding: var(--chart_padding); } #id_content .chart__item--detailed, #id_wrapper_chart_popout .chart__item--summary { display: none; } .chart__tooltip { --color_background_chart_tooltip_row: inherit; z-index: 10000; background: var(--chart_tooltip_background_color); border-radius: var(--standard_border_radius); color: var(--chart_tooltip_text_color, hsl(0, 0%, 100%)); opacity: 1; pointer-events: var(--chart_tooltip_pointer_events, none); position: var(--chart_tooltip_position); max-height: var(--chart_tooltip_max_height); min-width: var(--chart_tooltip_min_width); overflow-y: auto; overflow-x: hidden; } .chart__wrapper--side_tooltip table { --color_background_chart_tooltip_row_alternate: var(--color_background_chart_tooltip_row_odd, hsl(0, 0%, 95%)); --translate_x_from: var(--chart_tooltip_animation_x); --translate_y_from: var(--chart_tooltip_animation_y); animation: var(--animation_fade_translation); } .chart__tooltip_header { --table_first_cell_border_radius_bl: 0; --table_first_cell_border_radius_br: 0; position: var(--chart_tooltip_header_position); top: 0; } .chart__tooltip_th { min-width: 8ch; } .chart__tooltip_th:first-child { text-align: left; border-top-left-radius: calc(var(--standard_border_radius) / 2); } .chart__tooltip_th:last-child { border-top-right-radius: calc(var(--standard_border_radius) / 2); } .chart__tooltip_first_cell { display: flex; width: 100%; min-width: 15ch; align-items: center; text-align: left; } .chart__tooltip--overlay { --chart_tooltip_position: absolute; transform: translate(-50%, 0); transition: all .2s ease; } .chart__tooltip .custom_table { margin: 0; } .chart__tooltip :where(tr, th) { border-width: 0; } .chart__tooltip__legend_item { flex-shrink: 0; border-width: 2px; margin-right: 10px; height: 10px; width: 10px; display: inline-block; } .chart__tooltip_row { background-color: var(--color_background_chart_tooltip_row); } .chart__tooltip_total_row { position: sticky; bottom: 0; font-weight: bold; background-color: var(--chart_tooltip_background_color); } .chart__tooltip_total_row td { border-top: var(--chart_tooltip_total_border, 1px solid hsl(0, 0%, 100%)); } .chart__tooltip_row:nth-child(2n) { background-color: var(--color_background_chart_tooltip_row_alternate) } /* ====== ICONS ====== */ .custom_icon { vertical-align: middle; justify-content: center; display: var(--icon_display_override, inline-flex); } .custom_icon__element { height: var(--icon_size); width: var(--icon_size); fill: var(--color_icon_overide, var(--color_icon)); } /* ====== HIGHLIGHTS ====== */ .highlight { background-color: var(--color_background_highlight, hsl(222, 77%, 90%)); } .highlight--transaction_entry { background-color: var(--color_background_highlight, hsl(222, 77%, 90%)); border-radius: var(--standard_border_radius); } .highlight--page_status { background-color: hsl(165, 100%, 30%); --color_icon: var(--color_text_with_background); color: var(--color_text_with_background); } .highlight--login { --color_text_overide: var(--color_text_with_background); --color_icon_overide: var(--color_text_overide); background-color: hsl(20, 90%, 50%); color: var(--color_text_overide); } .highlight--positive { --color_icon: var(--color_text_overide, hsl(179, 100%, 15%)); background-color: var(--color_background_overide, hsl(150, 100%, 85%)); color: var(--color_text_overide, hsl(179, 100%, 15%)); filter: var(--color_adjustment); } .highlight--positive_most { background-color: var(--color_background_overide, hsl(165, 100%, 30%)); color: var(--color_text_overide, hsl(0, 0%, 100%)); --color_icon: var(--color_text_overide, hsl(0, 0%, 100%)); filter: var(--color_adjustment); } .highlight--negative { background-color: var(--color_background_overide, var(--color_background_invalid)); color: var(--color_text_overide, hsl(355, 100%, 30%)); --color_icon: var(--color_text_overide, hsl(355, 100%, 30%)); filter: var(--color_adjustment); } .highlight--error, .highlight--negative_most { background-color: var(--color_background_overide, hsl(0, 70%, 45%)); color: var(--color_text_overide, hsl(0, 0%, 100%)); --color_icon: var(--color_text_overide, hsl(0, 0%, 100%)); filter: var(--color_adjustment); } .highlight--warning { background-color: var(--color_background_overide, var(--color_background_warning)); color: var(--color_text_overide, hsl(0, 0%, 0%)); --color_icon: var(--color_text_overide, hsl(0, 0%, 0%)); filter: var(--color_adjustment); } .highlight--focus { background-color: var(--color_background_overide, var(--color_focus)); color: var(--color_text_overide, hsl(0, 0%, 100%)); --color_icon: var(--color_text_overide, hsl(0, 0%, 100%)); filter: var(--color_adjustment); } .highlight--asset { background-color: hsl(215, 100%, 75%); --color_icon: var(--color_text_with_background_dark); color: var(--color_text_with_background_dark); } .highlight--liability { background-color: hsl(35, 100%, 65%); --color_icon: var(--color_text_with_background_dark); color: var(--color_text_with_background_dark); } .highlight--income { background-color: hsl(150, 80%, 70%); --color_icon: var(--color_text_with_background_dark); color: var(--color_text_with_background_dark); } .highlight--expenditure { background-color: hsl(0, 95%, 75%); --color_icon: var(--color_text_with_background_dark); color: var(--color_text_with_background_dark); } .highlight--portfolio_item { background-color: hsl(179, 67%, 28%, 30%); } .highlight--reserve { background-color: hsl(0, 0%, 75%); --color_icon: var(--color_text_with_background_dark); color: var(--color_text_with_background_dark); } /* ====== TEXT ====== */ p { margin: 0; } .ParagraphStandard :is(p, ul, ol) { margin-block-end: calc(var(--def_spacing) * 2) !important; } .TextOperator { font-size: 1.3rem; font-weight: bold; color: var(--color_text_operator, hsl(216, 19%, 35%)); } .--secondary_data { font-size: .8rem; font-weight: 400; } .Unselectable { user-select: none; pointer-events: none; } mark { background-color: transparent; color: inherit; } /* ====== ACCOUNT BALANCE HISTORY DATA ====== */ .account_balance_history__row { justify-items: stretch; gap: var(--def_spacing); padding-block: calc(var(--def_spacing) / 2); } .account_balance_history__revaluations { visibility: var(--account_balance_history_revaluations_visibility, visible); } .account_balance_history__uneditable { display: var(--account_balance_history_uneditable_display, flex); } .account_balance_history__wrapper:has(.account_balance_history__edit_field) { --account_balance_history_revaluations_visibility: hidden; } .account_balance_history__row:has(.account_balance_history__edit_field) { --account_balance_history_uneditable_display: none; } @media only screen and (min-width: 70ch) { .account_balance_history__row:has(.account_balance_history__edit_field) { --account_balance_history_edit_field_date_column: 2; --account_balance_history_edit_field_amount_column: 3; --account_balance_history_edit_menu_rows: 1; } } /* ====== DATE SECTION HEADER ====== */ .section_divider { margin: 0 calc(var(--def_spacing) * 2); padding-top: calc(var(--def_spacing) * 2); border-top: 1px solid var(--color_text_section_divider); color: var(--color_text_section_divider); } .section_divider:first-child { padding-top: var(--def_spacing); border-top: none; } /* ====== TRANSACTION FORM ====== */ .transaction_form--is_multicurrency { --transaction_form_grid_span: 1; --transaction_form_split_amount_display: flex; --transaction_form_currency_display: inline-flex; --transaction_form_balance_icon_display: none; } .transaction_form--balancing_row_is_multicurrency { --transaction_form_balancing_icon_visibility: hidden; } .transaction_form:has(.transaction_form__row:nth-child(3)) { --transaction_form_grid_span: 1; --transaction_form_split_amount_display: flex; --transaction_form_split_note_display: flex; --transaction_form_non_split_element_display: none; } /* ====== CATEGORIZATION FORM ====== */ .categorization_rule_amount_wrapper:has(option:checked[value=""]) { --categorization_amount_input_display: none; } /* ====== TAGS ====== */ .custom_tag { --color_icon_overide: var(--tag_text_color, var(--color_text_with_background)); font-weight: normal; display: flex; align-items: center; text-align: center; border-radius: var(--modified_border_radius, var(--standard_border_radius)); padding: .2rem; padding-inline: .3rem; border: 1px solid var(--tag_border_color_overide, var(--tag_border_color, transparent)); background-color: var(--tag_back_color_overide, var(--tag_back_color, hsl(0, 0%, 49%))); color: var(--tag_text_color, var(--color_text_with_background)); opacity: var(--tag_opacity, .6); font-size: .9rem; } .custom_tag--transaction { --tag_back_color: hsl(220, 90%, 40%); } .custom_tag--budget { --tag_back_color: hsl(21, 89%, 52%); } .custom_tag--beta { --tag_back_color: hsl(21, 89%, 52%); } .custom_tag--synced { --tag_back_color: transparent; --tag_text_color: var(--color_text_info); } .custom_tag--synced_altered { --tag_back_color: hsl(0, 0%, 49%); } .custom_tag--duplicate { --tag_back_color: hsl(271, 43%, 44%); } .custom_tag--uncategorised { --tag_back_color: hsl(271, 43%, 44%); } .custom_tag--archived { --tag_back_color: hsl(0, 0%, 49%); } .custom_tag--new_account { --tag_back_color: hsl(21, 89%, 52%); } .custom_tag--portfolio { --tag_back_color: hsl(179, 67%, 28%); } .custom_tag--commented { --tag_back_color: hsl(180, 58%, 45%); } .custom_tag--not_commented { --tag_back_color: hsl(215, 20%, 35%); } .custom_tag--planned { --tag_back_color: hsl(210, 90%, 55%); } .custom_tag--in_progress { --tag_back_color: hsl(270, 78%, 65%); } .custom_tag--completed { --tag_back_color: hsl(165, 100%, 30%); } .custom_tag--not_reviewed { --tag_opacity: .3; } .custom_tag--declined { --tag_back_color: hsl(0, 70%, 45%); } .custom_tag--reconnect { --tag_back_color: hsl(0, 70%, 45%); } .tag--payee { display: flex; align-items: center; justify-content: center; padding-inline: var(--def_spacing); background-color: var(--color_background_payee_tag, hsl(225, 35%, 97%)); border-radius: var(--standard_border_radius); } .transaction_tags__tag { display: flex; gap: var(--def_spacing); align-items: center; justify-content: center; padding-inline: var(--def_spacing); border: var(--border_tag, 1px solid hsl(0, 0%, 80%)); border-radius: var(--standard_border_radius); box-shadow: var(--tag_box_shadow); } /* ====== DISABLED ====== */ .Disabled { --box_shadow_button: none; --box_shadow_input: none; --button_group_button_border_left: 1px solid var(--color_text_button_disabled, hsl(0, 0%, 100%)); --color_text_button: var(--color_text_button_disabled, hsl(0, 0%, 100%)); --color_background_button_overide: var(--color_background_button_disabled, hsl(0, 0%, 85%)); --color_background_input: var(--color_background_input_disabled); --custom_button_opacity: .5; --input_checkbox_back_color_override: hsl(0, 0%, 60%); --input_bar_display: none; --color_icon: var(--color_text_na); --color_text_overide: var(--color_text_na); color: var(--color_text_na) !important; pointer-events: none; } .Disabled a { --color_icon: var(--color_text_na); color: var(--color_text_na) !important; } /* ====== MULTI SELECT ======= */ .jsSelectAllGroup:has( :where(.multi_select_mode__button, .multi_select_mode__item) :checked) { --multi_select_item_display: flex; --multi_select_mode_button_border_radius: 0; --multi_select_mode_button_bg_color: hsl(180, 58%, 45%); --multi_select_item_icon_display: none; --accounts_subrow_column_adjustment: 1; --category_subrow_column_span: 1; --category_note_column_span: 1 / span 2; --grid_cell_icon_display: block; --grid_cell_budget_padding_inline: var(--def_spacing); } .multi_select_mode__button { --min_width_button: 2.5rem; border-radius: var(--multi_select_mode_button_border_radius, 0 0 0 var(--standard_border_radius)); } .multi_select_mode__item { display: var(--multi_select_item_display, none); } /* ====== DRAGING ITEMS ======= */ .Draggable { --drag_point_display: flex; } .Draggable [draggable], .Draggable [draggable] a { cursor: move; } .DragIcon { display: var(--drag_point_display, none); touch-action: none; /*Prevents scrolling on touch devices */ background-color: var(--bg_color_drag_icon, hsl(20, 90%, 50%)); color: hsl(0, 0%, 100%); --color_icon: hsl(0, 0%, 100%); } .DragCurrent { border-radius: var(--standard_border_radius); box-shadow: 0 0px 14px 0 hsla(230, 23%, 30%, 0.1), 0 0 20px 0 hsl(207, 90%, 54%); --bg_color_drag_icon: hsl(207, 90%, 54%); } .drag_mode--active, .drag_mode--active~.custom_popover { --tooltip_display: none; } .drag_mode--active .drag_mode_item_collapse { display: none !important; } /* ====== IMAGE LOADER ====== */ .ImageLoader { position: absolute; width: 100%; margin-top: var(--def_spacing); } /* ====== LOGIN ====== */ #id_body:has(#id_card_login) #id_login { display: none; } #id_text_sign_up_progress:before { animation-name: sign_up_progress; animation-delay: 1s; animation-duration: 15s; animation-fill-mode: forwards; content: ""; } @keyframes sign_up_progress { 0% { content: "Verifying signup"; } 33% { content: "Creating profile"; } 66% { content: "Creating demo data"; } 100% { content: "Finalizing profile creation"; } } /* ====== METER BAR ====== */ .meter_bar__wrapper { --color_text: hsl(0, 0%, 0%); --color_icon_overide: var(--color_text); z-index: 1; position: relative; color: var(--color_text); background-color: var(--meter_bar_bg_color, transparent); contain: layout style paint; } .meter_bar__wrapper::before { position: absolute; left: 0; content: ''; height: 100%; background-color: var(--meter_bar_used_color, var(--meter_bar_used_color_good)); width: 100%; z-index: -1; transform-origin: left; scale: min(var(--meter_bar_used_size, 0), 1) 1; transition: scale .4s ease-out; } .meter_bar--asset { --meter_bar_bg_color: hsl(205, 100%, 70%); --meter_bar_used_color: hsl(205, 100%, 50%); } .meter_bar--liability { --meter_bar_bg_color: hsl(40, 100%, 80%); --meter_bar_used_color: hsl(40, 100%, 50%); } .meter_bar--good { --meter_bar_used_color: var(--meter_bar_used_color_good); } .meter_bar--warn { --meter_bar_used_color: var(--meter_bar_used_color_warn); } .meter_bar--warn_alt { --meter_bar_used_color: var(--meter_bar_used_color_warn_alt); } .meter_bar--bad { --meter_bar_used_color: var(--meter_bar_used_color_bad); } .meter_bar--worst { --meter_bar_used_color: var(--meter_bar_used_color_worst); } /* ====== SPARKLINE ====== */ .--animate_sparkline { --sparkline_animation_name: animateExpand; } .sparkline__wrapper { --sparkline_height: var(--sparkline_height_override, 2.5rem); position: relative; display: flex; height: var(--sparkline_height); min-width: 5ch; } .sparkline__wrapper:before { --sparkline_bar_margin_modifier: calc(-1 * var(--sparkline_min)); --sparkline_bar_margin: calc((var(--sparkline_height) - 1px) * (var(--sparkline_bar_margin_modifier) / max(var(--sparkline_range), 1))); position: absolute; content: ''; width: 100%; height: 1px; align-self: flex-end; margin-bottom: var(--sparkline_bar_margin); background-color: hsl(215, 20%, 35%); } .sparkline__bar { --sparkline_bar_radius: 20%; --sparkline_bar_margin_modifier: calc(-1 * var(--sparkline_min)); --sparkline_bar_margin: calc(var(--sparkline_height) * (var(--sparkline_bar_margin_modifier) / var(--sparkline_range))); content: ''; background-color: var(--color_background_sparkline_bar, var(--color_text_income)); height: var(--sparkline_bar_height); min-width: 1px; flex-grow: 1; margin-right: 1px; margin-bottom: var(--sparkline_bar_margin); align-self: var(--sparkline_bar_position, flex-end); border-radius: var(--sparkline_bar_radius) var(--sparkline_bar_radius) 0 0; animation: var(--sparkline_animation_name) .5s; animation-delay: calc(var(--sparkline_animation_order) * 5ms); transform-origin: var(--sparkline_animation_origin, bottom); } .sparkline__bar--negative { --sparkline_bar_position: flex-start; --color_background_sparkline_bar: var(--color_text_expenditure); --sparkline_bar_margin_modifier: var(--sparkline_max); --sparkline_animation_origin: top; margin-top: var(--sparkline_bar_margin); margin-bottom: 0; border-radius: 0 0 var(--sparkline_bar_radius) var(--sparkline_bar_radius); } .sparkline__bar--balance_sheet { --color_background_sparkline_bar: var(--color_text_asset); } .sparkline__bar--balance_sheet.sparkline__bar--negative { --color_background_sparkline_bar: var(--color_text_liability); } .sparkline__bar--vertical_line::after { content: ''; position: fixed; top: 0; right: var(--sparkling_vertical_line_position); height: 100%; border-right: 2px dashed var(--color_text_default); } @keyframes animateExpand { from { transform: scaleY(0); } } /* ====== BACKGROUND IMAGE ====== */ .bg_image { background-image: var(--bg_image_url, none); background-repeat: no-repeat; background-size: cover; background-position: center; } /* ====== SPINNER ====== */ .loading__container:has(.loading__loader) .loading__complete { display: none; } .spinner_wrapper { display: flex; height: var(--icon_size); width: var(--icon_size); align-items: center; } .spinner_item, .spinner_wrapper::before, .spinner_wrapper::after { content: ''; background-color: var(--color_icon_overide, var(--color_icon, hsl(0, 0%, 0%))); border-radius: 50%; flex-grow: 1; aspect-ratio: 1; animation: animationSpinner .8s linear infinite; } .spinner_item { animation-delay: .4s; } @keyframes animationSpinner { from { transform: scale(.1); } 50% { transform: scale(1); opacity: .5; } to { transform: scale(.1); } } /* ====== CHROME DATE PICKER ====== */ @media (prefers-color-scheme: dark) { body:not(.theme--dark) input::-webkit-calendar-picker-indicator { filter: invert(1); } } @media (prefers-color-scheme: light) { body.theme--dark input::-webkit-calendar-picker-indicator { filter: invert(1); } } /* ====== UTIL - STICKY ====== */ .u-sticky { --position: sticky; z-index: 3; /* ====== Needed for top level sticky elements ====== */ position: sticky; top: calc(var(--sticky_top, 0px) + var(--sticky_top_adjustment, 0px)); } .u-sticky_main { --sticky_top: -1rem; } .u-sticky_b { --position: sticky; position: sticky; bottom: var(--sticky_position_bottom, 0); } .u-sticky_l { --position: sticky; position: sticky; left: 0; } /* Needed for position sticky bug in Safari */ /* Safari 9+ */ /* https://browserstrangeness.bitbucket.io/css_hacks.html#safari */ /* https://stackoverflow.com/questions/16348489/is-there-a-css-hack-for-safari-only-not-chrome */ /* @supports (-webkit-hyphens:none) { */ /* th { position: initial; } .u-sticky_main th { top: initial; } */ /* } */ /* ====== UTIL - Z-INDEX ====== */ .u-z_1 { z-index: 1; } .u-z_max { z-index: 10000; } /* ====== UTIL - SCOPING ====== */ .u-contain_visibility { content-visibility: auto; contain-intrinsic-size: var(--containment_width, 1px) var(--containment_height, 50rem); } .u-contain_strict { contain: strict; } .u-contain_content { contain: content; } /* ====== UTIL - DISPLAY ====== */ .Hidden, .u-hidden { display: none !important; } @media only screen and (max-width: 35rem) { .u-hidden_narrow { display: none !important; } } /* ====== UTIL - RESIZE, WIDTH, HEIGHT ====== */ .u-resize_auto { resize: auto; } .u-resize_none { resize: none; } .u-width_full { width: 100%; } .u-width_optimal_auto { --content-width-optimal: auto; } .u-width_min_content { width: min-content; } .u-width_fit_content { width: fit-content; } .u-width_fixed1 { width: 3rem; } .u-min_width1, .u-min_width1 input { min-width: 6rem; } .--u-min_width2 { min-width: 20ch; } .u-height_full { height: 100%; } .u-max_height_page { max-height: calc(100vh - var(--height_header) - var(--height_guide) - var(--height_footer) - var(--height_max_reduction, 4rem)); } .u-min_height { min-height: 3rem; } .u-min_height2 { min-height: 10rem; } /* ====== UTIL - SPACING ====== */ .u-spacing_inline { margin: -2px; padding: 2px; } .u-spacing_inline_narrow { margin: -.25rem; padding: .25rem; } /* ====== UTIL - MARGIN ====== */ .u-margin { margin: var(--def_spacing); } .u-margin2 { margin: calc(var(--def_spacing) * 2); } .u-margin_t { margin-top: var(--def_spacing); } .u-margin_t2 { margin-top: calc(var(--def_spacing) * 2); } .u-margin_t_auto { margin-top: auto; } .u-margin_b { margin-bottom: var(--def_spacing); } .u-margin_b2 { margin-bottom: calc(var(--def_spacing) * 2); } .u-margin_l { margin-left: var(--def_spacing); } .u-margin_l_auto { margin-left: auto; } .u-margin_r { margin-right: var(--def_spacing); } .u-margin_r_auto { margin-right: auto; } .u-margin_block_auto { margin-block: auto; } /* ====== UTIL - PADDING ====== */ .Indent { padding-left: 2rem; } .IndentIcon { padding-left: calc(2rem + var(--def_spacing)); } .u-pad, .ContainerPadding { padding: var(--def_spacing); } .u-pad2 { padding: var(--def_spacing2); } .u-pad_inline_half { padding: var(--def_spacing) var(--def_spacing_half); } .u-pad_block_half { padding: calc(var(--def_spacing) * .5) var(--def_spacing); } .u-pad_offset_right { padding: var(--def_spacing); padding-right: calc(var(--def_spacing) * 1.5); } .u-pad_t { padding-top: calc(var(--def_spacing)); } .u-pad_t2 { padding-top: var(--def_spacing2); } .u-pad_b { padding-bottom: calc(var(--def_spacing)); } .u-pad_b2 { padding-bottom: var(--def_spacing2); } .u-pad_l { padding-left: var(--def_spacing); } .u-pad_l_half { padding-left: var(--def_spacing_half); } .u-pad_l2 { padding-left: var(--def_spacing2); } .u-pad_r { padding-right: var(--def_spacing); } .u-pad_r_half { padding-right: var(--def_spacing_half); } .u-pad_r2 { padding-right: var(--def_spacing2); } .u-pad0 { padding: 0 } /* ====== UTIL - BORDER SHAPE ====== */ .u-border_round { border-radius: 50%; } .u-border_rounded { border-radius: var(--standard_border_radius); } .u-border_rounded_t { border-radius: var(--standard_border_radius) var(--standard_border_radius) 0 0; } .u-border_rounded_tl { border-radius: var(--standard_border_radius) 0 0 0; } .u-border_rounded_b { border-radius: 0 0 var(--standard_border_radius) var(--standard_border_radius); } .u-border_rounded_bl { border-radius: 0 0 0 var(--standard_border_radius); } .u-border_rounded_br { border-radius: 0 0 var(--standard_border_radius) 0; } .u-border_rounded_l { border-radius: var(--standard_border_radius) 0 0 var(--standard_border_radius); } .u-border_rounded_r { border-radius: 0 var(--standard_border_radius) var(--standard_border_radius) 0; } .u-border_rounded_n { border-radius: 0; } /* ====== UTIL - BORDER ====== */ .inner_border__item { border-top: var(--default_border_line); border-left: var(--default_border_line); margin-top: -1px; margin-left: -1px; } .u-border { border: var(--default_border_line); } .u-border2 { border: var(--default_border_line2); } .u-border_t, .CardSection:not(:first-child) { --border_top_table_cell: var(--default_border_line); border-top: var(--default_border_line); } .u-border_t2 { border-top: var(--default_border_line_heavy); } .u-border_b { --border_bottom_table_cell: var(--default_border_line); border-bottom: var(--default_border_line); } .u-border_b2 { border-bottom: var(--default_border_line_heavy); } .u-border_left, .CardSectionHorizontal:not(:first-child) { border-left: var(--default_border_line); } .u-border_r { border-right: var(--default_border_line); } /* ====== UTIL - SHADOW ====== */ .u-shadow { box-shadow: var(--def_shadow); } .u-shadow_light { box-shadow: var(--shadow_light, 0 1px 2px 0 hsla(205, 5%, 25%, 0.3)); } /* Safari 9+ */ /* https://browserstrangeness.bitbucket.io/css_hacks.html#safari */ /* https://stackoverflow.com/questions/16348489/is-there-a-css-hack-for-safari-only-not-chrome */ @supports (-webkit-hyphens:none) { .custom_table :where(thead, tbody).u-shadow { filter: var(--def_drop_shadow); } } /* ====== UTIL - WRAP, GROW, SHRINK ====== */ .u-flex_wrap { flex-wrap: wrap; } .u-flex_wrap_r { flex-wrap: wrap-reverse; } .u-flex_grow { flex-grow: 1; } .u-flex_shrink { flex-shrink: 1; } .u-flex_shrink0 { flex-shrink: 0; } .u-txt_wrap_balanced { text-wrap: balance; } .u-txt_ellipsis { overflow: hidden; text-overflow: ellipsis; } .u-white_space_normal { white-space: normal; } .u-white_space_prewrap { white-space: pre-wrap; } .u-white_space_nowrap { white-space: nowrap; } /* ====== UTIL - GAP ALIGN JUSTIFY ====== */ .u-gap { gap: var(--def_spacing); } .u-gap_half { gap: var(--def_spacing_half); } .u-gap2 { gap: var(--def_spacing2); } .u-gap_col { column-gap: var(--def_spacing); } .u-align_start { align-items: flex-start; } .u-align_center { align-items: center; } .u-align_end { align-items: flex-end; } .u-align_stretch { align-items: stretch; } .u-align_self_stretch { align-self: stretch; } .u-justify_start { justify-content: start; } .u-justify_end { justify-content: end; } .u-justify_space_between { justify-content: space-between; } .u-justify_stretch { justify-content: stretch; } .u-txt_align_l { text-align: left; } .u-txt_align_c { text-align: center; } .u-txt_align_r { text-align: right; } /* ====== UTIL - COLOR ====== */ .--clr_bg__inherit { background-color: inherit; } .--clr_bg__body { background-color: var(--color_background_body); } .--clr_bg__default { background-color: var(--color_background_card); } .--clr_bg__nested_row { background-color: var(--color_background_table_row_2, hsl(0, 0%, 96%)) } .--clr_bg__nested_row2 { --bg_color_table_row: var(--color_background_table_row_3, hsl(0, 0%, 93%)); background-color: var(--color_background_table_row_3, hsl(0, 0%, 93%)); } .--clr_bg_txt__header_row { background-color: var(--color_background_table_heading, hsl(225, 35%, 93%)); color: var(--color_text_table_heading, hsl(216, 19%, 35%)); } .--clr_bg__group_row { background-color: var(--color_background_card_group_heading, hsla(210, 15%, 95%, 1)); } .--clr_bg__transparent { background-color: transparent; } .--clr_bg__bar2 { background-color: var(--color_background_card_bottom_bar, hsl(215, 25%, 90%)); } .--clr_bg__alternate:nth-child(even) { background-color: var(--color_background_chart_tooltip_row_odd, hsl(0, 0%, 95%)); } /* Use https://codepen.io/sosuke/pen/Pjoqqp to convert a hex color into a filter for icons */ [class*='TextColor'] { color: var(--color_text_overide, var(--color_text)); --color_icon: var(--color_text); } .TextColorCardHeading { --color_text: var(--color_text_card_heading); } .TextColorDefinedTerm { --color_text: var(--color_text_defined_term); } .TextColorGroup { --color_text: var(--color_text_group); } .TextColorOperator { --color_text: var(--color_text_card_heading); } .TextColorPrimary { --color_text: var(--color_text_primary); } .TextColorInfo { --color_text: var(--color_text_info); } .TextColorInfoImportant { --color_text: var(--color_text_info_important, hsl(280, 100%, 35%)) } .TextColorNA { --color_text: var(--color_text_na); } .TextColorNAHeading { --color_text: var(--color_text_na_heading); } /* Must be below the other options in order to override */ .TextColorWithBackground { --color_text: var(--color_text_with_background); } .TextColorWithLightBackground { --color_icon: var(--color_text_with_background_dark); color: var(--color_text_with_background_dark); } .TextColorWarning { --color_text: var(--color_text_warning); } .TextColorWarningAltenative { --color_text: var(--color_text_warning_alternative); } .TextColorError { --color_text: var(--color_text_error_no_background, var(--color_text_error)); } .TextColorIncome { --color_text: var(--color_text_income); } .TextColorExpenditure { --color_text: var(--color_text_expenditure); } .TextColorAsset { --color_text: var(--color_text_asset); } .TextColorPortfolioItem { --color_text: var(--color_text_asset); } .TextColorLiability { --color_text: var(--color_text_liability); } .TextColorOpeningBalance { --color_text: var(--color_text_opening_balance); } .TextColorPortfolioItemBuy { --color_text: var(--color_text_portfolio_buy); } .TextColorPortfolioItemSell { --color_text: var(--color_text_portfolio_sell); } .TextColorAccount { --color_text: var(--color_text_defined_term); } .TextColorCategory { --color_text: var(--color_text_defined_term); } .TextColorTransaction { --color_text: var(--color_text_defined_term); } .TextColorBudget { --color_text: var(--color_text_defined_term); } .TextColorPositive { --color_text: var(--color_text_positive); } .TextColorPositiveLight { --color_text: var(--color_text_positive_light); } .TextColorNegative { --color_text: var(--color_text_negative); } .TextColorNegativeLight { --color_text: var(--color_text_negative_light); } .TextColorNotification { --color_text: var(--color_text_notification); } .TextColorGuideIndicator { --color_text: var(--color_text_guide_indicator); } .--shadow__nested_row { box-shadow: var(--box_shadow_inset_top), var(--box_shadow_inset_bottom); } .--bg_shadow_cover { box-shadow: 3px 0px var(--color_background_body), -13px 0px var(--color_background_body); } /* ====== UTIL - TEXT STYLE ====== */ .u-txt-size_s { font-size: 1rem; } .u-txt-size_l { font-size: 1.3rem; } .u-txt-size_xl { font-size: 2rem; } .u-txt_weight_s { font-weight: 400; } .u-txt_bold { font-weight: bold; } .u-txt_decoration_line_through { text-decoration: line-through; } .u-txt_decoration_none { text-decoration: none; } /* ====== UTIL - TRANSFORMS ====== */ .Rotate90 { transform: rotate(90deg); } .Rotate180 { transform: rotate(180deg); } /* ====== ANIMATION DISABLED ====== */ .AnimationDisabled * { animation: none !important; } /* ====== ANIMATION FADE ====== */ .AnimateFadeInWrapper> :not(.custom_ripple__circle), .AnimateFadeIn, .AnimateFadeOut { animation: var(--animation_standard_props) animateFade; animation-delay: calc(var(--animation_order) * 50ms); } .AnimateFadeOut { animation-direction: reverse; } @keyframes animateFade { from { opacity: 0; } to { opacity: 1; } } /* ====== ANIMATION TRANSLATIONS ====== */ .AnimationWrapper [style*='--animation-order'], .AnimationWrapper[style*='--animation-order'] { animation: var(--animation_pop_down); animation-delay: calc(var(--animation-order) * 50ms); transform-origin: top; } .AnimateSlideRight { --translate_x_to: 30rem; --translate_y_from: 0; --animation_override: animateTranslateXY .5s ease-in-out; animation: var(--animation_override); } .AnimateShowDownWrapper>*, .AnimateShowDown { --translate_y_from: -3rem; animation: var(--animation_fade_translation); } .AnimateShowLeft { --translate_x_from: -3rem; --translate_y_from: 0; animation: var(--animation_fade_translation); } .AnimateShowRight { --translate_x_from: 3rem; --translate_y_from: 0; animation: var(--animation_fade_translation); } .AnimateShowUp { --translate_y_from: 3rem; animation: var(--animation_fade_translation); } .AnimateHideUp { --translate_y_from: -3rem; animation: var(--animation_fade_translation); animation-direction: reverse; } .AnimateHideDownWrapper>*, .AnimateHideDown { --translate_y_from: 3rem; animation: var(--animation_fade_translation); animation-direction: reverse; } @keyframes animateTranslateXY { from { transform: translate(var(--translate_x_from, 0), var(--translate_y_from, 0)); } to { transform: translate(var(--translate_x_to, 0), var(--translate_y_to, 0)); } } @keyframes animateSlideVertical { from { transform: translateY(var(--translate_y_from, -1rem)) translateX(var(--translate_x_from, 0)); } } /* ====== ANIMATION SCALE ====== */ .AnimationScaleFromLeft { transform-origin: left; animation: animateScaleFromLeft .5s ease-out; } @keyframes animateScaleFromLeft { from { transform: scaleX(0); } } /* ====== ANIMATION ROTATE ====== */ .AnimateRotateIn, .AnimateRotateOut { animation: var(--animation_standard_props) animateRotateIn; } .AnimateRotateOut { animation-name: animateRotateOut; } .AnimateRotateInfinite { animation-name: animateRotate; animation-duration: 2s; animation-iteration-count: infinite; } @keyframes animateRotate { to { transform: rotate(360deg); } } @keyframes animateRotateIn { from { transform: scale(0.6) rotate(-90deg); } } @keyframes animateRotateOut { from { transform: scale(0.6) rotate(90deg); } } /* ====== ANIMATION FLASH ====== */ .AnimateElementAttention { --box_shadow_attention: 0 0 0 4px hsl(190, 100%, 50%), inset 0 0 0 2px hsl(190, 100%, 50%), inset 0 0 0 4px hsl(0, 0%, 100%); box-shadow: var(--box_shadow_attention); border-radius: var(--standard_border_radius); animation: animateElementAttention 2.5s ease-in-out !important; transform-origin: top; z-index: 100 !important; position: relative !important; } @keyframes animateElementAttention { 39% { transform: scale3d(.9, .9, 1); } 40% { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(.97, .97, 1); } 60% { transform: scale3d(1, 1, 1); } 70% { transform: scale3d(.98, .98, 1); } 80% { transform: scale3d(1, 1, 1); box-shadow: var(--box_shadow_attention); } 90% { transform: scale3d(.99, .99, 1); } 100% { transform: scale3d(1, 1, 1); box-shadow: none; } } /* ====== ANIMATION PULSE ====== */ #id_loading_indicator { --animation_duration: 2s; z-index: -1; grid-row: 1; position: absolute; width: 100vw; height: 100%; overflow: hidden; display: flex; justify-content: center; } .Loading #id_loading_indicator::before, .Loading #id_loading_indicator::after { content: ''; background: hsl(215, 20%, 35%); border-radius: 100%; box-shadow: 0 0 0 6rem hsl(0, 0%, 50%); opacity: 0; animation: animatePulse var(--animation_duration) infinite; } .Loading #id_loading_indicator::after { animation-delay: calc(var(--animation_duration) / 2); } @keyframes animatePulse { 0% { opacity: .3; transform: scale(0); } 70% { transform: scale(5); } } /* ====== ANIMATION SHINE ====== */ .AnimateShine { position: relative; overflow: hidden; } .AnimateShine:after { content: ''; position: absolute; top: 0; width: 100%; height: 100%; background: hsla(0, 0%, 100%, 0.3); opacity: 0; transform: skewX(-30deg) translateX(100%); pointer-events: none; animation: animateShine 5s ease-in-out infinite; } @keyframes animateShine { 40% { opacity: 0; transform: skewX(-30deg) translateX(-100%); } 60% { opacity: 1; transform: skewX(-30deg) translateX(110%); } } /* ====== ANIMATION MORE INFO ARROW ====== */ .AnimateArrow { animation: animateArrow 3s ease infinite; } @keyframes animateArrow { 30% { transform: translateX(0%); } 40% { transform: translateX(10%); } 50% { transform: translateX(0%); } 60% { transform: translateX(10%); } 70% { transform: translateX(0%); } } .AnimateOnHoverShrink:hover { transform: scale(1.1); } /* ====== ANIMATION TYPE WRITER ====== */ .AnimateText::after { content: ''; box-sizing: border-box; position: absolute; top: 0; left: 0; height: 100%; width: calc(100% - 4px); background-color: hsl(222, 77%, 90%); border-left: 4px solid var(--color_text_defined_term); opacity: 0; transform: translateX(100%); /* transform-origin: right; */ animation: animateText 3s ease-out; } @keyframes animateText { from { opacity: 1; transform: translateX(0); } 60% { opacity: 1; transform: translateX(100%); } } /* ====== PRINT SETTINGS ====== */ @media print { @page { size: A3 landscape; } table { page-break-inside: avoid; } }