Skip to content

Instantly share code, notes, and snippets.

@aelxxs
Last active November 28, 2025 22:23
Show Gist options
  • Select an option

  • Save aelxxs/0dce7df7166a612a94f4dbb3e4640e23 to your computer and use it in GitHub Desktop.

Select an option

Save aelxxs/0dce7df7166a612a94f4dbb3e4640e23 to your computer and use it in GitHub Desktop.
Actual Budget Catppuccin Theme
/* ==UserStyle==
@name budget.alexis.lol/budget
@namespace github.com/openstyles/stylus
@version 1.0.0
@description Actual — Catppuccin Theme
@author Alexis Vielma (https://alexis.lol)
@preprocessor stylus
@var select theme "Theme" {
"Mocha": "Mocha",
"Macchiato": "Macchiato",
"Frappe": "Frappe",
"Latte": "Latte",
"Forest": "Forest",
"Dusk": "Dusk",
"Sandstone": "Sandstone",
"Obsidian": "Obsidian",
"Nocturne": "Nocturne",
"Velvet": "Velvet",
"Midnight": "Midnight",
"Ghibli Twilight": "GhibliTwilight"
}
@var select border-radius "Border Radius" {
"Small (0.25rem)": "0.25rem",
"Medium (0.5rem)": "0.5rem",
"Medium Again (0.75rem)": "0.75rem",
"Large (1rem)": "1rem",
"Extra Large (1.5rem)": "1.5rem",
"None (0rem)": "0rem"
}
@var select bgPattern "Background Pattern" {
"Polka Dots": "PolkaDots",
"Diagonal Stripes": "DiagonalStripes",
"None": "None"
}
@var select report-card-color "Report Card Color" {
"Light (Default)": "var(--color-tableBackground)",
"Dark": "var(--ctp-crust)"
}
@var select notes-option "Notes Visibility" {
"Visible (Default)": "block",
"Hidden": "none"
}
@var checkbox improvedSidebarDesign "Improved Sidebar Design" 1
@var checkbox improvedSidebarStates "Pill shaped hover/active states for sidebar" 1
==/UserStyle== */
@-moz-document url-prefix("<YOUR_URL_HERE>") {
if theme=="Mocha" {
:root {
--ctp-rosewater: #f5e0dc;
--ctp-flamingo: #f2cdcd;
--ctp-pink: #f5e0e7;
--ctp-mauve: #cba6f7;
--ctp-red: #f38ba8;
--ctp-maroon: #eba0ac;
--ctp-peach: #fab387;
--ctp-yellow: #f9e2af;
--ctp-green: #a6e3a1;
--ctp-teal: #94e2d5;
--ctp-sky: #89dceb;
--ctp-sapphire: #74c7ec;
--ctp-blue: #89b4fa;
--ctp-lavender: #b4befe;
--ctp-text: #cdd6f4;
--ctp-subtext1: #bac2de;
--ctp-subtext0: #a6adc8;
--ctp-overlay2: #9399b2;
--ctp-overlay1: #7f849c;
--ctp-overlay0: #6c7086;
--ctp-surface2: #585b70;
--ctp-surface1: #45475a;
--ctp-surface0: #313244;
--ctp-base: #1e1e2e;
--ctp-mantle: #181825;
--ctp-crust: #11111b;
}
}
if theme=="Macchiato" {
:root {
--ctp-rosewater: #f4dbd6;
--ctp-flamingo: #f0c6c6;
--ctp-pink: #f5bde6;
--ctp-mauve: #c6a0f6;
--ctp-red: #ed8796;
--ctp-maroon: #ee99a0;
--ctp-peach: #f5a97f;
--ctp-yellow: #eed49f;
--ctp-green: #a6da95;
--ctp-teal: #8bd5ca;
--ctp-sky: #91d7e3;
--ctp-sapphire: #7dc4e4;
--ctp-blue: #8aadf4;
--ctp-lavender: #b7bdf8;
--ctp-text: #cad3f5;
--ctp-subtext1: #b8c0e0;
--ctp-subtext0: #a5adcb;
--ctp-overlay2: #939ab7;
--ctp-overlay1: #8087a2;
--ctp-overlay0: #6e738d;
--ctp-surface2: #5b6078;
--ctp-surface1: #494d64;
--ctp-surface0: #363a4f;
--ctp-base: #24273a;
--ctp-mantle: #1e2030;
--ctp-crust: #181926;
}
}
if theme=="Frappe" {
:root {
--ctp-rosewater: #f2d5cf;
--ctp-flamingo: #eebebe;
--ctp-pink: #f4b8e4;
--ctp-mauve: #ca9ee6;
--ctp-red: #e78284;
--ctp-maroon: #ea999c;
--ctp-peach: #ef9f76;
--ctp-yellow: #e5c890;
--ctp-green: #a6d189;
--ctp-teal: #81c8be;
--ctp-sky: #99d1db;
--ctp-sapphire: #85c1dc;
--ctp-blue: #8caaee;
--ctp-lavender: #babbf1;
--ctp-text: #c6d0f5;
--ctp-subtext1: #b5bfe2;
--ctp-subtext0: #a5adce;
--ctp-overlay2: #949cbb;
--ctp-overlay1: #838ba7;
--ctp-overlay0: #737994;
--ctp-surface2: #626880;
--ctp-surface1: #51576d;
--ctp-surface0: #414559;
--ctp-base: #303446;
--ctp-mantle: #292c3c;
--ctp-crust: #232634;
}
}
if theme=="Latte" {
:root {
--ctp-rosewater: #dc8a78;
--ctp-flamingo: #dd7878;
--ctp-pink: #ea76cb;
--ctp-mauve: #8839ef;
--ctp-red: #d20f39;
--ctp-maroon: #e64553;
--ctp-peach: #fe640b;
--ctp-yellow: #df8e1d;
--ctp-green: #40a02b;
--ctp-teal: #179299;
--ctp-sky: #04a5e5;
--ctp-sapphire: #209fb5;
--ctp-blue: #1e66f5;
--ctp-lavender: #7287fd;
--ctp-text: #4c4f69;
--ctp-subtext1: #5c5f77;
--ctp-subtext0: #6c6f85;
--ctp-overlay2: #7c7f93;
--ctp-overlay1: #8c8fa1;
--ctp-overlay0: #9ca0b0;
--ctp-surface2: #acb0be;
--ctp-surface1: #bcc0cc;
--ctp-surface0: #ccd0da;
--ctp-base: #eff1f5;
--ctp-mantle: #e6e9ef;
--ctp-crust: #dce0e8;
}
}
if theme=="Forest" {
:root {
--ctp-rosewater: #d9f0e3;
--ctp-flamingo: #b9e6c8;
--ctp-pink: #8edbab;
--ctp-mauve: #6ccb88;
--ctp-red: #56bd6f;
--ctp-maroon: #4da462;
--ctp-peach: #42a157;
--ctp-yellow: #66ab4c;
--ctp-green: #4d8a3d;
--ctp-teal: #3f7234;
--ctp-sky: #3b6131;
--ctp-sapphire: #395126;
--ctp-blue: #334522;
--ctp-lavender: #3e5429;
--ctp-text: #d0e8d3;
--ctp-subtext1: #a4c1b1;
--ctp-subtext0: #7f9f8f;
--ctp-overlay2: #5c7567;
--ctp-overlay1: #455848;
--ctp-overlay0: #344031;
--ctp-surface2: #223021;
--ctp-surface1: #172116;
--ctp-surface0: #0f140d;
--ctp-base: #0a0e08;
--ctp-mantle: #070a05;
--ctp-crust: #050602;
}
}
if theme=="Dusk" {
:root {
--ctp-rosewater: #e9d6f3;
--ctp-flamingo: #d8bde3;
--ctp-pink: #caaaef;
--ctp-mauve: #b696eb;
--ctp-red: #a07de2;
--ctp-maroon: #8a6cd7;
--ctp-peach: #977bd9;
--ctp-yellow: #a088df;
--ctp-green: #869dda;
--ctp-teal: #78a7de;
--ctp-sky: #669fe0;
--ctp-sapphire: #5b92df;
--ctp-blue: #517fd9;
--ctp-lavender: #645dcc;
--ctp-text: #cfcfff;
--ctp-subtext1: #b8b8de;
--ctp-subtext0: #a3a3c9;
--ctp-overlay2: #8c8db1;
--ctp-overlay1: #787899;
--ctp-overlay0: #63637f;
--ctp-surface2: #4e4e67;
--ctp-surface1: #424256;
--ctp-surface0: #353545;
--ctp-base: #292934;
--ctp-mantle: #212128;
--ctp-crust: #1a1a1f;
}
}
if theme=="Sandstone" {
:root {
--ctp-rosewater: #f2cdb5;
--ctp-flamingo: #efb7a6;
--ctp-pink: #f1b1c7;
--ctp-mauve: #b48be4;
--ctp-red: #e06558;
--ctp-maroon: #d77967;
--ctp-peach: #f29b5b;
--ctp-yellow: #d8af57;
--ctp-green: #80b37a;
--ctp-teal: #65b3a3;
--ctp-sky: #7abfcd;
--ctp-sapphire: #68a7c5;
--ctp-blue: #6c93ea;
--ctp-lavender: #a49df2;
--ctp-text: #4f4538;
--ctp-subtext1: #61584a;
--ctp-subtext0: #736c5b;
--ctp-overlay2: #857f6e;
--ctp-overlay1: #978f81;
--ctp-overlay0: #a9a195;
--ctp-surface2: #bcb4a7;
--ctp-surface1: #cec8bd;
--ctp-surface0: #cec8bd;
--ctp-base: #f6f2ec;
--ctp-mantle: #ece7e0;
--ctp-crust: #e3ded7;
}
}
if theme=="Obsidian" {
:root {
--ctp-rosewater: #f2d6cf;
--ctp-flamingo: #ebb4b4;
--ctp-pink: #e6b8d6;
--ctp-mauve: #b5a0f0;
--ctp-red: #e06a6a;
--ctp-maroon: #c0616b;
--ctp-peach: #f3a067;
--ctp-yellow: #e2c067;
--ctp-green: #8dc08b;
--ctp-teal: #68b0a9;
--ctp-sky: #7ac8d6;
--ctp-sapphire: #5fa5d4;
--ctp-blue: #6c8cf0;
--ctp-lavender: #a19cf8;
--ctp-text: #d8d8e2;
--ctp-subtext1: #a9a9b6;
--ctp-subtext0: #8a8a94;
--ctp-overlay2: #6c6c76;
--ctp-overlay1: #55555e;
--ctp-overlay0: #404049;
--ctp-surface2: #2f2f37;
--ctp-surface1: #22222a;
--ctp-surface0: #17171d;
--ctp-base: #0f0f14;
--ctp-mantle: #0c0c11;
--ctp-crust: #07070a;
}
}
if theme=="Nocturne" {
:root {
--ctp-rosewater: #d9d9e3;
--ctp-flamingo: #c4c7d4;
--ctp-pink: #b2b6e0;
--ctp-mauve: #8c9ae6;
--ctp-red: #7f8ee1;
--ctp-maroon: #6b7cd2;
--ctp-peach: #7a9be8;
--ctp-yellow: #8cb2eb;
--ctp-green: #9ac5f0;
--ctp-teal: #83bbdf;
--ctp-sky: #6eaadc;
--ctp-sapphire: #5d92d0;
--ctp-blue: #4c7ec6;
--ctp-lavender: #a7b6ff;
--ctp-text: #d8e0f5;
--ctp-subtext1: #b5bdd7;
--ctp-subtext0: #969eb7;
--ctp-overlay2: #7c8399;
--ctp-overlay1: #666c7f;
--ctp-overlay0: #505569;
--ctp-surface2: #3b3f52;
--ctp-surface1: #2e3242;
--ctp-surface0: #222533;
--ctp-base: #161824;
--ctp-mantle: #11131c;
--ctp-crust: #0c0d13;
}
}
if theme=="Velvet" {
:root {
--ctp-rosewater: #f1d0d8;
--ctp-flamingo: #e9a6b2;
--ctp-pink: #e89acb;
--ctp-mauve: #c084f5;
--ctp-red: #d5649a;
--ctp-maroon: #ba5c8e;
--ctp-peach: #e17e95;
--ctp-yellow: #e5b78b;
--ctp-green: #93d5a2;
--ctp-teal: #79c8c6;
--ctp-sky: #86c7dd;
--ctp-sapphire: #7494e8;
--ctp-blue: #8a7cf5;
--ctp-lavender: #b29df9;
--ctp-text: #e4d7f3;
--ctp-subtext1: #c8afd9;
--ctp-subtext0: #a989be;
--ctp-overlay2: #8e6aa5;
--ctp-overlay1: #74568a;
--ctp-overlay0: #5b3f6e;
--ctp-surface2: #442b56;
--ctp-surface1: #352047;
--ctp-surface0: #261736;
--ctp-base: #1b0f28;
--ctp-mantle: #140b1f;
--ctp-crust: #0d0615;
}
}
if theme=="Midnight" {
:root {
--ctp-rosewater: #e8c6c1;
--ctp-flamingo: #e5a9a9;
--ctp-pink: #f1a6d6;
--ctp-mauve: #b28cf0;
--ctp-red: #e26c79;
--ctp-maroon: #d47b8a;
--ctp-peach: #f59e6f;
--ctp-yellow: #e3bf6d;
--ctp-green: #89d19b;
--ctp-teal: #66c8c0;
--ctp-sky: #73d1e0;
--ctp-sapphire: #5fa8df;
--ctp-blue: #6c85f0;
--ctp-lavender: #9a93f8;
--ctp-text: #d5ddf9;
--ctp-subtext1: #b3b9d6;
--ctp-subtext0: #979eb8;
--ctp-overlay2: #7d84a0;
--ctp-overlay1: #666c83;
--ctp-overlay0: #51566b;
--ctp-surface2: #3c4254;
--ctp-surface1: #2e3444;
--ctp-surface0: #232838;
--ctp-base: #171b27;
--ctp-mantle: #121620;
--ctp-crust: #0c0f16;
}
}
else if theme=="GhibliTwilight" {
:root {
--ctp-rosewater: #e8c8b9;
--ctp-flamingo: #d9a8a0;
--ctp-pink: #d3a1b9;
--ctp-mauve: #a39ccf;
--ctp-red: #c06b6b;
--ctp-maroon: #9e6068;
--ctp-peach: #e3ad76;
--ctp-yellow: #d7c47f;
--ctp-green: #8fbf91;
--ctp-teal: #7ab8a2;
--ctp-sky: #89c0cf;
--ctp-sapphire: #6e93b7;
--ctp-blue: #5b7ea2;
--ctp-lavender: #b2a8de;
--ctp-text: #e8e5d9;
--ctp-subtext1: #c9c6b9;
--ctp-subtext0: #a8a597;
--ctp-overlay2: #88857a;
--ctp-overlay1: #706e64;
--ctp-overlay0: #5a584f;
--ctp-surface2: #45443c;
--ctp-surface1: #36352f;
--ctp-surface0: #2a2924;
--ctp-base: #1d1c19;
--ctp-mantle: #171613;
--ctp-crust: #100f0d;
}
}
:root {
--color-budgetCurrentMonth: var(--ctp-crust);
--color-budgetHeaderCurrentMonth: var(--ctp-base);
--color-budgetHeaderOtherMonth: var(--ctp-base);
--color-budgetOtherMonth: var(--ctp-mantle);
--color-buttonBareBackground: transparent;
--color-buttonBareBackgroundActive: rgba(205, 214, 244, 0.1);
--color-buttonBareBackgroundHover: var(--ctp-surface0);
--color-buttonBareDisabledBackground: transparent;
--color-buttonBareDisabledText: var(--ctp-overlay1);
--color-buttonBareText: var(--ctp-subtext1);
--color-buttonBareTextHover: var(--ctp-text);
--color-buttonMenuBackground: transparent;
--color-buttonMenuBackgroundHover: rgba(205, 214, 244, 0.07);
--color-buttonMenuBorder: var(--ctp-surface0);
--color-buttonMenuSelectedBackground: var(--ctp-yellow);
--color-buttonMenuSelectedBackgroundHover: var(--ctp-peach);
--color-buttonMenuSelectedBorder: var(--ctp-yellow);
--color-buttonMenuSelectedText: var(--ctp-crust);
--color-buttonMenuSelectedTextHover: var(--ctp-base);
--color-buttonMenuText: var(--ctp-subtext0);
--color-buttonMenuTextHover: var(--ctp-text);
--color-buttonNormalBackground: var(--ctp-mantle);
--color-buttonNormalBackgroundHover: var(--ctp-crust);
--color-buttonNormalBorder: var(--ctp-surface0);
--color-buttonNormalDisabledBackground: var(--ctp-surface0);
--color-buttonNormalDisabledBorder: var(--ctp-surface2);
--color-buttonNormalDisabledText: var(--ctp-overlay0);
--color-buttonNormalSelectedBackground: var(--ctp-mauve);
--color-buttonNormalSelectedText: var(--ctp-base);
--color-buttonNormalShadow: rgba(0, 0, 0, 0.4);
--color-buttonNormalText: var(--ctp-text);
--color-buttonNormalTextHover: var(--ctp-subtext1);
--color-buttonPrimaryBackground: var(--ctp-lavender);
--color-buttonPrimaryBackgroundHover: var(--ctp-mauve);
--color-buttonPrimaryBorder: var(--ctp-lavender);
--color-buttonPrimaryDisabledBackground: var(--ctp-surface1);
--color-buttonPrimaryDisabledBorder: var(--ctp-surface2);
--color-buttonPrimaryDisabledText: var(--ctp-overlay0);
--color-buttonPrimaryShadow: rgba(0, 0, 0, 0.6);
--color-buttonPrimaryText: var(--ctp-crust);
--color-buttonPrimaryTextHover: var(--ctp-base);
--color-calendarBackground: var(--ctp-base);
--color-calendarCellBackground: var(--ctp-mantle);
--color-calendarItemBackground: var(--ctp-surface0);
--color-calendarItemText: var(--ctp-text);
--color-calendarSelectedBackground: var(--ctp-blue);
--color-calendarText: var(--ctp-text);
--color-cardBackground: var(--ctp-crust);
--color-cardBorder: var(--ctp-lavender);
--color-cardShadow: var(--ctp-crust);
--color-checkboxBackgroundSelected: var(--ctp-green);
--color-checkboxBorderSelected: var(--ctp-green);
--color-checkboxShadowSelected: transparentf;
--color-checkboxText: var(--ctp-crust);
--color-checkboxToggleBackground: var(--ctp-surface0);
--color-checkboxToggleBackgroundSelected: var(--ctp-green);
--color-checkboxToggleDisabled: var(--ctp-overlay0);
--color-errorBackground: var(--ctp-base);
--color-errorBorder: var(--ctp-maroon);
--color-errorText: var(--ctp-red);
--color-errorTextDark: var(--ctp-flamingo);
--color-errorTextDarker: var(--ctp-red);
--color-errorTextMenu: var(--ctp-rosewater);
--color-floatingActionBarBackground: var(--ctp-mauve);
--color-floatingActionBarBorder: var(--ctp-mauve);
--color-floatingActionBarText: var(--ctp-base);
--color-formInputBackground: var(--ctp-surface0);
--color-formInputBackgroundSelected: var(--ctp-surface1);
--color-formInputBackgroundSelection: var(--ctp-blue);
--color-formInputBorder: var(--ctp-surface0);
--color-formInputBorderSelected: var(--ctp-blue);
--color-formInputShadowSelected: transparent;
--color-formInputText: var(--ctp-text);
--color-formInputTextHighlight: var(--ctp-mauve);
--color-formInputTextPlaceholder: var(--ctp-overlay0);
--color-formInputTextPlaceholderSelected: var(--ctp-subtext1);
--color-formInputTextReadOnlySelection: var(--ctp-surface1);
--color-formInputTextSelected: var(--ctp-crust);
--color-formInputTextSelection: var(--ctp-surface0);
--color-formLabelBackground: var(--ctp-surface2);
--color-formLabelText: var(--ctp-lavender);
--color-markdownDark: var(--ctp-mauve);
--color-markdownLight: var(--ctp-lavender);
--color-markdownNormal: var(--ctp-text);
--color-menuAutoCompleteBackground: var(--ctp-base);
--color-menuAutoCompleteBackgroundHover: var(--ctp-surface1);
--color-menuAutoCompleteItemText: var(--ctp-text);
--color-menuAutoCompleteItemTextHover: var(--ctp-text);
--color-menuAutoCompleteText: var(--ctp-subtext0);
--color-menuAutoCompleteTextHeader: var(--ctp-blue);
--color-menuAutoCompleteTextHover: var(--ctp-blue);
--color-menuBackground: var(--ctp-mantle);
--color-menuBorder: var(--ctp-surface0);
--color-menuBorderHover: var(--ctp-blue);
--color-menuItemBackground: var(--ctp-surface0);
--color-menuItemBackgroundHover: var(--ctp-base);
--color-menuItemText: var(--ctp-subtext1);
--color-menuItemTextHeader: var(--ctp-blue);
--color-menuItemTextHover: var(--ctp-text);
--color-menuItemTextSelected: var(--ctp-blue);
--color-menuKeybindingText: var(--ctp-lavender);
--color-mobileAccountShadow: var(--ctp-crust);
--color-mobileAccountText: var(--ctp-blue);
--color-mobileConfigServerViewTheme: var(--ctp-mauve);
--color-mobileHeaderBackground: var(--ctp-base);
--color-mobileHeaderText: var(--ctp-lavender);
--color-mobileHeaderTextHover: rgba(205, 214, 244, 0.07);
--color-mobileHeaderTextSubdued: var(--ctp-subtext0);
--color-mobileNavBackground: var(--ctp-mantle);
--color-mobileNavItem: var(--ctp-text);
--color-mobileNavItemSelected: var(--ctp-lavender);
--color-mobilePageBackground: var(--ctp-base);
--color-mobileTransactionSelected: var(--ctp-lavender);
--color-mobileViewTheme: var(--ctp-base);
--color-modalBackground: var(--ctp-crust);
--color-modalBorder: var(--ctp-surface0);
--color-noteTagBackground: var(--ctp-mauve);
--color-noteTagBackgroundHover: var(--ctp-pink);
--color-noteTagText: var(--ctp-crust);
--color-noticeBackground: var(--ctp-green);
--color-noticeBackgroundDark: var(--ctp-teal);
--color-noticeBackgroundLight: var(--ctp-surface1);
--color-noticeBorder: var(--ctp-green);
--color-noticeText: var(--ctp-text);
--color-noticeTextDark: var(--ctp-base);
--color-noticeTextLight: var(--ctp-green);
--color-noticeTextMenu: var(--ctp-teal);
--color-noticeTextMenuHover: var(--ctp-green);
--color-pageBackground: var(--ctp-crust);
--color-pageBackgroundBottomRight: var(--ctp-surface0);
--color-pageBackgroundLineBottom: var(--ctp-text);
--color-pageBackgroundLineMid: var(--ctp-crust);
--color-pageBackgroundLineTop: var(--ctp-lavender);
--color-pageBackgroundModalActive: var(--ctp-mantle);
--color-pageBackgroundTopLeft: var(--ctp-mantle);
--color-pageText: var(--ctp-text);
--color-pageTextDark: var(--ctp-subtext1);
--color-pageTextLight: var(--ctp-subtext0);
--color-pageTextLink: var(--ctp-blue);
--color-pageTextLinkLight: var(--ctp-sky);
--color-pageTextPositive: var(--ctp-green);
--color-pageTextSubdued: var(--ctp-overlay0);
--color-pillBackground: var(--ctp-mantle);
--color-pillBackgroundLight: var(--ctp-surface0);
--color-pillBackgroundSelected: var(--ctp-mauve);
--color-pillBorder: var(--ctp-surface0);
--color-pillBorderDark: var(--ctp-surface0);
--color-pillBorderSelected: var(--ctp-lavender);
--color-pillText: var(--ctp-subtext1);
--color-pillTextHighlighted: var(--ctp-text);
--color-pillTextSelected: var(--ctp-base);
--color-pillTextSubdued: var(--ctp-overlay0);
--color-reportsBlue: var(--ctp-blue);
--color-reportsGray: var(--ctp-overlay1);
--color-reportsGreen: var(--ctp-green);
--color-reportsInnerLabel: var(--ctp-surface2);
--color-reportsLabel: var(--ctp-text);
--color-reportsRed: var(--ctp-red);
--color-sidebarBackground: var(--ctp-mantle);
--color-sidebarItemAccentSelected: var(--ctp-mauve);
--color-sidebarItemBackgroundFailed: var(--ctp-red);
--color-sidebarItemBackgroundHover: var(--ctp-surface0);
--color-sidebarItemBackgroundPending: var(--ctp-yellow);
--color-sidebarItemBackgroundPositive: var(--ctp-green);
--color-sidebarItemText: var(--ctp-text);
--color-sidebarItemTextSelected: var(--ctp-mauve);
--color-tableBackground: var(--ctp-mantle);
--color-tableBorder: var(--ctp-surface0);
--color-tableBorderHover: var(--ctp-mauve);
--color-tableBorderSelected: var(--ctp-blue);
--color-tableBorderSeparator: var(--ctp-overlay0);
--color-tableHeaderBackground: var(--ctp-base);
--color-tableHeaderText: var(--ctp-subtext0);
--color-tableHeaderSubText: var(--ctp-text);
--color-tableRowBackgroundHighlight: var(--ctp-base);
--color-tableRowBackgroundHighlightText: var(--ctp-text);
--color-tableRowBackgroundHover: var(--ctp-base);
--color-tableRowHeaderBackground: var(--ctp-base);
--color-tableRowHeaderText: var(--ctp-text);
--color-tableText: var(--ctp-text);
--color-tableTextHover: var(--ctp-overlay1);
--color-tableTextInactive: var(--ctp-overlay1);
--color-tableTextLight: var(--ctp-text);
--color-tableTextSelected: var(--ctp-overlay2);
--color-tableTextSubdued: var(--ctp-subtext0);
--color-tooltipBackground: var(--ctp-mantle);
--color-tooltipBorder: var(--ctp-surface0);
--color-tooltipText: var(--ctp-text);
--color-upcomingBackground: var(--ctp-mauve);
--color-upcomingBorder: var(--ctp-surface0);
--color-upcomingText: var(--ctp-mantle);
--color-warningBackground: var(--ctp-base);
--color-warningBorder: var(--ctp-peach);
--color-warningText: var(--ctp-yellow);
--color-warningTextDark: var(--ctp-text);
--color-warningTextLight: var(--ctp-peach);
--border-radius: border-radius;
--border: 1px solid var(--color-tableBorder);
}
[data-testid="notes"] {
display: notes-option !important;
}
* {
overscroll-behavior: none;
}
if bgPattern=="Polka Dots" {
.css-w4guu2,
.css-wmwuaj,
.css-x9hok8,
.css-1g810ry,
.css-1qse97y,
.css-wvg6b8,
.css-1fi0k29,
.css-136pm7h,
.css-kthgus {
background-color: var(--ctp-crust);
background-image: radial-gradient(var(--ctp-surface0) 0.5px, var(--ctp-crust) 0.5px);
background-size: 10px 10px;
}
}
.css-w4guu2,
.css-wmwuaj,
.css-x9hok8,
.css-1g810ry,
.css-1qse97y,
.css-wvg6b8,
.css-1fi0k29,
.css-136pm7h,
.css-kthgus {
if bgPattern=="PolkaDots" {
background-color: var(--ctp-crust);
background-image: radial-gradient(var(--ctp-surface0) 0.5px, var(--ctp-crust) 0.5px);
background-size: 10px 10px;
}
else if bgPattern=="DiagonalStripes" {
background-color: var(--ctp-crust);
background-size: 10px 10px;
background-image: repeating-linear-gradient(45deg, var(--ctp-surface0) 0, var(--ctp-surface0) 1px, var(--ctp-crust) 0, var(--ctp-crust) 50%);
}
else if bgPattern=="None" {
background: none;
}
}
/* select budget */
.css-19un6lv {
box-shadow: none;
border-radius: var(--border-radius);
border: var(--border);
background-color: var(--color-buttonNormalBackground);
}
/* sidebar */
.css-1jm6zlx {
border-right: var(--border);
}
/* sidebar -- floating */
.css-1jm6zlx {
background-color: var(--color-sidebarBackground);
}
.css-udnprb {
border-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
border: var(--border);
}
if improvedSidebarDesign {
/* sidebar -- budget container */
.css-1njw0n7 {
border-bottom: var(--border);
padding-block: 1rem;
padding-inline: 1.5rem;
margin: 0px;
height: clamp(3.25rem, 10vw, 3.85rem);
margin-bottom: 0.75rem;
flex-shrink: 0;
}
/* sidebar -- add account container */
.css-1wlgp5o {
flex-shrink: 0;
padding: 0px;
border-top: var(--border);
}
.css-1uzqvp6 {
margin: 0px;
padding-block: 0.75rem;
padding-inline: 1rem;
}
}
if improvedSidebarStates {
.active {
background-color: var(--color-sidebarItemBackgroundHover);
}
.css-3klntp,
.css-1lwtqiv,
.css-1y6zg9g,
.css-1k2zg4y,
.css-1s4ggjo,
.css-11jfeu7,
.css-e5dykp,
.css-13d5vlg,
.css-1trtw0g,
.css-7iovzr {
font-size: 14px;
border-radius: var(--border-radius);
margin-inline: 0.5rem;
border-left: 0px;
padding-inline: 1rem;
}
.css-1lwtqiv:hover,
.css-1y6zg9g:hover,
.css-1s4ggjo:hover,
.css-e5dykp:hover,
.css-1trtw0g:hover,
.css-7iovzr:hover {
border-radius: var(--border-radius);
}
.css-ri4zoe {
background-color: transparent;
border: 0px;
color: inherit;
padding: 9px 10px 9px 15px;
}
.css-u3p89x {
padding: 9px 10px 9px 15px;
}
.css-u3p89x:hover {
background-color: transparent;
opacity: 0.75;
}
.css-1y6zg9g.active {
background-color: transparent !important;
}
.css-ifjmjt {
left: 10px !important;
}
.css-3klntp, .css-1lwtqiv, .css-1y6zg9g, .css-1k2zg4y, .css-1s4ggjo, .css-11jfeu7, .css-e5dykp, .css-13d5vlg, .css-1trtw0g, .css-7iovzr {
margin-inline: 0.5rem !important;
}
}
/* sidebar -- budget name */
.css-1am57kc {
font-size: 16.5px;
}
/* sidebar -- section title */
.css-hfi7l9 {
border-bottom: 2.5px solid var(--ctp-blue);
padding-bottom: 0.5rem;
}
/* sidebar -- acct title */
.css-15e1mkk {
padding-block: 0.25rem;
}
/* sidebar -- small link */
.css-13d5vlg,
.css-e5dykp {
padding-block: 0.55rem;
}
/* sidebar -- account links */
.css-11jfeu7,
.css-1s4ggjo {
padding-left: 1.75rem;
}
.css-ifjmjt {
left: 8px;
}
/* sidebar -- budget name dropdown arrow */
.css-1am57kc {
margin-right: 0.2rem;
}
/* budget -- month highlighting */
/* current month */
.css-2o5ejk {
align-items: center;
padding: 3px;
width: 35px;
border-radius: min(var(--border-radius), 0.5rem);
border: medium;
font-size: 13px;
background-color: var(--color-buttonBareBackgroundHover);
font-weight: bold;
}
/* highlighted month -- left */
.css-cti7tr,
.css-8rskyq,
.css-kqrp3f,
.css-17to6kw,
.css-1mi3lsa {
padding: 3px;
width: 35px;
border-radius: min(var(--border-radius), 0.5rem) 0px 0px min(var(--border-radius), 0.5rem);
border: medium;
font-size: 13px;
background-color: var(--color-tableBorderHover);
color: var(--color-buttonPrimaryText);
}
/* highlighted month -- middle */
.css-4qeb42,
.css-lj3nyx,
.css-1eb02hy,
.css-evoqxd {
padding: 3px;
width: 35px;
border-radius: 0px;
border: medium;
font-size: 13px;
background-color: var(--color-tableBorderHover);
color: var(--color-buttonPrimaryText);
}
/* highlighted month -- right */
.css-i0tmtm,
.css-jnxqh2,
.css-1ezcl0o,
.css-1skvape,
.css-q5nm5x {
padding: 3px;
width: 35px;
border-radius: 0px min(var(--border-radius), 0.5rem) min(var(--border-radius), 0.5rem) 0px;
border: medium;
font-size: 13px;
background-color: var(--color-tableBorderHover);
color: var(--color-buttonPrimaryText);
}
/* hover over month -- left */
.css-1ugnqh7,
.css-1ihd5su,
.css-10x6adq {
padding: 3px;
width: 35px;
border-radius: min(var(--border-radius), 0.5rem) 0px 0px min(var(--border-radius), 0.5rem);
border: medium;
font-size: 13px;
background-color: var(--color-buttonBareBackgroundHover);
}
/* hover over month -- middle */
.css-1pd5dj,
.css-1xcgr8,
.css-1j355lw {
padding: 3px;
width: 35px;
border-radius: 0px;
border: medium;
font-size: 13px;
background-color: var(--color-buttonBareBackgroundHover);
}
/* hover over month -- right */
.css-1pd5dj,
.css-1jx7wnq,
.css-11ig21n {
padding: 3px;
width: 35px;
border-radius: 0px min(var(--border-radius), 0.5rem) min(var(--border-radius), 0.5rem) 0px;
border: medium;
font-size: 13px;
background-color: var(--color-buttonBareBackgroundHover);
}
.css-rg8rv9 {
top: -18px;
}
/* /budget -- budget cards */
.css-1szeyz4,
.css-1asnaqj {
box-shadow: none;
border-radius: var(--border-radius);
border: var(--border);
}
/* /budget -- budget cards margin */
.css-1gcc5nw {
margin-bottom: 0rem;
}
/* /budget -- table header */
.css-1bgvp0b {
border-radius: var(--border-radius) var(--border-radius) 0px 0px;
border: var(--border);
border-bottom-width: 0px;
box-shadow: none;
background-color: var(--ctp-crust);
}
/* /budget -- table body. */
.css-1e35cxr,
.css-1t7se8i {
box-shadow: none;
border-radius: 0rem 0rem var(--border-radius) var(--border-radius);
border: var(--border);
margin-bottom: 1rem;
}
/* /budget -- table hover */
.css-9r3avc:hover,
.css-1lv865u:hover {
box-shadow: none;
background-color: var(--ctp-surface0);
}
.css-9r3avc,
.css-1lv865u {
border-radius: 0.25rem;
padding-inline: 0.25rem;
flex: 0.865 1 0%;
}
/* /budget -- card padding */
.css-1gbzxai > div > div {
padding-inline: 0.42rem;
}
.css-1gbzxai {
flex: 1 1 0%;
overflow: hidden;
margin-bottom: 0.45rem;
}
/* /budget -- date selection */
.css-1usd1tv {
padding-bottom: 0.45rem;
}
/* /reports -- card */
.css-105xu6l {
display: block;
height: 100%;
overflow: visible;
}
/* reports -- sidebar & header */
.css-ylkow6 {
padding-left: 12px;
}
.css-1m2essh {
margin-left: 20px;
}
.css-bqm9fa {
padding-right: 12px;
}
.css-17nqm2r,
.css-1mkkiaa,
.css-s6nmt0,
.css-o1urms {
height: 100%;
width: 100%;
border: var(--border);
border-radius: var(--border-radius);
box-shadow: none;
}
.recharts-surface {
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
/* /reports -- top border */
.css-tf9rsr {
border-top: var(--border);
}
/* /settings -- card */
.css-htvse6 {
border-radius: var(--border-radius);
border: var(--border);
}
/* /settings -- card gap */
.css-1inkr25 {
gap: 1.25rem;
}
/* table checkmark border */
.css-1n00cfy {
border-bottom: var(--border);
padding-inline: 1rem;
}
/* top navigation */
.css-lcyxda {
padding: 1rem;
padding-block: 1.5rem;
height: clamp(3.25rem, 10vw, 3.85rem);
border-bottom: var(--border);
position: sticky;
background-color: var(--ctp-crust);
}
/* /schedules -- table header */
.css-kfjpij {
border-radius: var(--border-radius) var(--border-radius) 0px 0px;
border-inline: var(--border);
border-top: var(--border);
}
/* /schedules -- table body */
.css-1v84gns:not(:has(.css-12vlum8)) {
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border: var(--border);
border-top-width: 0px;
overflow: hidden;
}
/* /schedules -- pills */
.css-1whggh0,
.css-f0xl0f,
.css-6k1ng3,
.css-1kc57on {
border-radius: var(--border-radius);
}
.css-6k1ng3,
.css-f0xl0f,
.css-1whggh0 {
background-color: var(--color-tableBorder);
}
/* content top padding */
.css-1qse97y,
.css-1g810ry,
.css-x9hok8,
.css-wmwuaj,
.css-w4guu2 {
padding-top: 1.5rem;
}
/* search inputs */
textarea,
.css-1rcej9u,
.css-ic9hwk,
.css-xup3jb,
.css-g8rqad {
color: var(--color-formInputText);
border-radius: var(--border-radius);
border: var(--border);
background-color: var(--ctp-mantle);
padding: 0.35rem;
}
.css-xup3jb,
.css-1rcej9u {
border-color: var(--ctp-blue);
}
/* consistent popups/modals */
[role="tooltip"],
[role="dialog"],
[data-placement]:not(:has([role="dialog"])) {
box-shadow: none;
border-radius: var(--border-radius);
border: var(--border);
overflow: hidden;
}
[data-placement]:has([role="dialog"]) {
border-radius: var(--border-radius);
border-width: 0px;
}
.css-tz2vqy {
border: 0px;
}
.css-1jb61p2 {
margin-top: 0.35rem;
}
/* tables */
.css-eons5 {
border: none;
}
.css-x43rvq,
.css-1ok43ac,
.css-oiw7fa,
.css-19wqxhu,
.css-1iy0uj3,
.css-1hx64bf,
.css-1wo18st,
.css-9493py,
.css-aclsme,
.css-1m0snnq,
.css-1xrj088 {
border-inline: var(--border);
}
.css-x43rvq,
.css-1ok43ac,
.css-1m0snnq,
.css-19wqxhu {
border-bottom: var(--border);
}
.css-1xx9nfp {
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
border: none;
border-bottom: var(--border);
}
.css-1gtw3sc {
background-color: var(--ctp-base);
}
.css-1job1cn,
.css-17gaw25,
.css-8gg4lr {
border-width: 0px;
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}
.css-12vlum8 {
border-bottom: var(--border);
border-inline: var(--border);
background-color: var(--ctp-mantle);
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
[data-testid="transaction-table"] > .css-j7ipk5,
[data-testid="table"] > .css-j7ipk5 {
border-inline: 0px !important;
}
.css-j7ipk5:not(:has(.css-12vlum8)) {
border-bottom: var(--border);
border-inline: var(--border) !important;
background-color: var(--ctp-mantle);
}
/* text color */
.css-70zz4x {
color: var(--ctp-text) !important;
}
.css-ecyk1h {
color: var(--ctp-crust);
}
/* cmd + k command menu */
.css-1nn1iu8 {
border-bottom: var(--border);
}
/* buttons */
.css-myul91,
.css-189odvl,
.css-3uywls {
border-radius: min(var(--border-radius), 0.5rem);
}
/* /payees -- dropdown */
.css-kmyxpd {
padding: 0px;
}
/* bank syncing */
.css-13486lo,
.css-6idhvp,
.css-dzxlm1 {
z-index: 100;
position: relative;
}
/* Relaxed Group rows */
div[data-testid="budget-totals"] + div div[data-testid="row"]:not(:has(div[data-testid="category-name"])) {
height: 2.5rem;
flex: 0 0 2.5rem;
}
/* Relaxed Category rows */
div[data-testid="budget-totals"] + div div[data-testid="row"]:has(div[data-testid="category-name"]) {
height: 1.5rem;
flex: 0 0 1.5rem;
}
/* green balance */
[data-testid="balance"] {
color: var(--color-noticeTextLight);
}
/* red negative balance */
[data-testid="balance"][data-cellname^="-"] {
color: var(--color-errorText);
font-weight: bold;
}
/* bank sync banner */
.css-1vdv159,
.css-8cf5j3 {
z-index: 1000 !important;
position: absolute !important;
}
.error {
color: var(--color-errorText);
}
/* sidebar */
.css-3b1tne {
border: var(--border);
border-radius: var(--border-radius);
}
.css-10iiizv {
border: var(--border);
box-shadow: none;
}
.css-15zy6me {
border-bottom: none;
}
.css-1dvwaht,
.css-nd83lm {
margin: 0.75rem;
border-radius: var(--border-radius);
background-color: var(--color-cardBackground);
box-shadow: none;
border: var(--border);
}
.css-1b0h10j {
margin-top: 1rem;
margin-bottom: 0rem;
}
/* keyboard shortcuts */
.css-yvyj5l,
/* search */
.css-m142m {
/* table */
border-radius: var(--border-radius);
}
/* reports */
.css-1bfuvke {
border-top-left-radius: var(--border-radius);
border-left: var(--border);
border-top: var(--border);
}
.css-v9r713 {
border: var(--border);
}
.css-zhaihp,
.css-g775qt,
.css-tt47xn {
border-radius: var(--border-radius);
border: var(--border);
}
.css-s6nmt0,
.css-o1urms {
width: 100%;
height: 100%;
transition: box-shadow 0.25s;
background-color: report-card-color;
}
/* charts */
.recharts-cartesian-axis-line,
.recharts-cartesian-grid-vertical line,
.recharts-cartesian-grid-horizontal line {
stroke: #a3aac5;
}
.css-16q21s1,
.css-1uqbql0 {
border-bottom-width: 0px;
border-top-width: 0px;
border-inline: var(--border);
}
.recharts-tooltip-wrapper {
border-radius: var(--border-radius);
border: var(--border);
overflow: hidden;
}
.css-e9kbw1 {
border-inline: var(--border);
}
.css-7hr554 code {
background-color: var(--color-markdownLight);
padding: 0.1rem 0.5rem;
border-radius: 0.25rem;
color: var(--ctp-mantle);
}
.css-1oedne5 {
border: var(--border);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment