From 46edb96dbaf58f0262c84bad7784592dc1bc06f1 Mon Sep 17 00:00:00 2001 From: Gen Date: Thu, 28 Mar 2024 17:06:33 -0700 Subject: [PATCH 01/11] fix(instagram): vars not being overriden + story outline fix --- styles/instagram/catppuccin.user.css | 108 +++++++++++++++++---------- 1 file changed, 68 insertions(+), 40 deletions(-) diff --git a/styles/instagram/catppuccin.user.css b/styles/instagram/catppuccin.user.css index 1f4a2dac38..ff783fd9a1 100644 --- a/styles/instagram/catppuccin.user.css +++ b/styles/instagram/catppuccin.user.css @@ -2,7 +2,7 @@ @name Instagram Catppuccin @namespace github.com/catppuccin/userstyles/styles/instagram @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/instagram -@version 0.2.0 +@version 0.2.1 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/instagram/catppuccin.user.css @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ainstagram @description Soothing pastel theme for Instagram @@ -57,45 +57,52 @@ @dark-color: if(@lookup = latte, @text, @crust); @light-color: if(@lookup = latte, @crust, @text); - --web-always-black: #rgbify(@dark-color) []; - --web-always-white: #rgbify(@light-color) []; - --always-white: #rgbify(@light-color) []; - --overlay-alpha-80: fadeout(@dark-color, 50); - --always-dark-overlay: fadeout(@surface0, 50); - --grey-9: #rgbify(@text) []; - --ig-primary-background: #rgbify(@base) []; - --ig-secondary-background: #rgbify(@surface0) []; - --ig-banner-background: #rgbify(@crust) []; - --ig-highlight-background: #rgbify(@surface0) []; - --ig-elevated-background: #rgbify(@crust) []; - --ig-elevated-highlight-background: #rgbify(@surface0) []; - --ig-hover-overlay: #rgbify(@text) [], 0.1; - --hover-overlay: fadeout(@surface0, 80); - --ig-text-on-color: #rgbify(@crust) []; - --ig-badge: #rgbify(@accent-color) []; - --ig-primary-button: #rgbify(@accent-color) []; - --ig-primary-button-hover: fadeout(@accent-color, 20); - --ig-secondary-button-background: #rgbify(@surface0) []; - --ig-secondary-button-hover: #rgbify(@surface1) []; - --ig-secondary-button: #rgbify(@text) []; - --ig-primary-text: #rgbify(@text) []; - --ig-secondary-text: #rgbify(@subtext0) []; - --ig-tertiary-text: #rgbify(@subtext0) []; - --wbloks-primary-text: @text; - --ig-text-on-media: #rgbify(@text) []; - --ig-separator: #rgbify(@surface0) []; - --chat-admin-text-color: #rgbify (@subtext0) []; - --ig-elevated-separator: #rgbify(@surface0) []; - --post-separator: #rgbify(@overlay0) []; - --ig-stroke: #rgbify(@overlay0) []; - --grey-2: #rgbify(@overlay0) []; - --ig-link: #rgbify(@accent-color) []; - --ig-error-or-destructive: #rgbify(@maroon) []; - --ig-success: #rgbify(@green) []; - --blue-2: #rgbify(@blue) []; - --ig-close-friends-refreshed: #rgbify(@green) []; - --ig-text-input-border-hover-prism: #rgbify(@surface1) []; - scrollbar-color: @accent-color @crust; + .x1qjc9v5, + .x9f619, + .x78zum5, + .xdt5ytf, + .x1iyjqo2, + .xl56j7k { + --web-always-black: #rgbify(@dark-color) []; + --web-always-white: #rgbify(@light-color) []; + --always-white: #rgbify(@light-color) []; + --overlay-alpha-80: fadeout(@dark-color, 50); + --always-dark-overlay: fadeout(@surface0, 50); + --grey-9: #rgbify(@text) []; + --ig-primary-background: #rgbify(@base) []; + --ig-secondary-background: #rgbify(@surface0) []; + --ig-banner-background: #rgbify(@crust) []; + --ig-highlight-background: #rgbify(@surface0) []; + --ig-elevated-background: #rgbify(@crust) []; + --ig-elevated-highlight-background: #rgbify(@surface0) []; + --ig-hover-overlay: #rgbify(@text) [], 0.1; + --hover-overlay: fadeout(@surface0, 80); + --ig-text-on-color: #rgbify(@crust) []; + --ig-badge: #rgbify(@accent-color) []; + --ig-primary-button: #rgbify(@accent-color) []; + --ig-primary-button-hover: fadeout(@accent-color, 20); + --ig-secondary-button-background: #rgbify(@surface0) []; + --ig-secondary-button-hover: #rgbify(@surface1) []; + --ig-secondary-button: #rgbify(@text) []; + --ig-primary-text: #rgbify(@text) []; + --ig-secondary-text: #rgbify(@subtext0) []; + --ig-tertiary-text: #rgbify(@subtext0) []; + --wbloks-primary-text: @text; + --ig-text-on-media: #rgbify(@text) []; + --ig-separator: #rgbify(@surface0) []; + --chat-admin-text-color: #rgbify (@subtext0) []; + --ig-elevated-separator: #rgbify(@surface0) []; + --post-separator: #rgbify(@overlay0) []; + --ig-stroke: #rgbify(@overlay0) []; + --grey-2: #rgbify(@overlay0) []; + --ig-link: #rgbify(@accent-color) []; + --ig-error-or-destructive: #rgbify(@maroon) []; + --ig-success: #rgbify(@green) []; + --blue-2: #rgbify(@blue) []; + --ig-close-friends-refreshed: #rgbify(@green) []; + --ig-text-input-border-hover-prism: #rgbify(@surface1) []; + scrollbar-color: @accent-color @crust; + } //placehoder textcolor .xh8yej3 { @@ -139,6 +146,27 @@ background-color: @mantle; } + /* Story seen / not seen ring */ + button:has(canvas + span > img[alt$="'s profile picture"]) { + canvas { + display: none; + } + + span { + outline-style: solid; + outline-offset: 0.15rem; + } + + &[aria-label^="Story by"][aria-label$="not seen"] span { + outline-color: @mauve; + outline-width: 0.2rem; + } + &[aria-label^="Story by"]:not([aria-label$="not seen"]) span { + outline-color: @surface2; + outline-width: 0.075rem; + } + } + /* Icons */ svg { color: @text; From 89143597974b1e249e4212c13a1421c6a851cf21 Mon Sep 17 00:00:00 2001 From: Gen Date: Thu, 28 Mar 2024 17:09:49 -0700 Subject: [PATCH 02/11] fix(instagram): close icon on the dark wrapper --- styles/instagram/catppuccin.user.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/instagram/catppuccin.user.css b/styles/instagram/catppuccin.user.css index ff783fd9a1..9f6b56a4d9 100644 --- a/styles/instagram/catppuccin.user.css +++ b/styles/instagram/catppuccin.user.css @@ -178,7 +178,7 @@ /* The close icon on the dark wrapper */ svg[aria-label="Close"] { - color: var(--web-always-white); + color: @text; } svg[aria-label="Verified"] { fill: @accent-color; From ed49b8ea15aaa82c083b40b0d8941238c9e7d310 Mon Sep 17 00:00:00 2001 From: Gen Date: Thu, 28 Mar 2024 17:13:18 -0700 Subject: [PATCH 03/11] fix(instagram): send messages + share button --- styles/instagram/catppuccin.user.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/styles/instagram/catppuccin.user.css b/styles/instagram/catppuccin.user.css index 9f6b56a4d9..dd5be7a542 100644 --- a/styles/instagram/catppuccin.user.css +++ b/styles/instagram/catppuccin.user.css @@ -186,10 +186,11 @@ /* Share box */ .xzloghq { - background-color: @blue; + background-color: @surface0; + color: @text !important; &:hover { - color: @mantle; - background-color: @accent-color; + color: @mantle !important; + background-color: @accent-color !important; } } .xk5f4mz { @@ -570,7 +571,7 @@ ._acas:not(._acao) { &, svg { - color: @crust !important; + color: @crust; fill: @mantle; } } From c641334f896e89c3ae469b506d72a8af7adaf859 Mon Sep 17 00:00:00 2001 From: Gen Date: Thu, 28 Mar 2024 17:22:19 -0700 Subject: [PATCH 04/11] fix(insta): make story not seen ring become accent color --- styles/instagram/catppuccin.user.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/instagram/catppuccin.user.css b/styles/instagram/catppuccin.user.css index dd5be7a542..7e85777b2e 100644 --- a/styles/instagram/catppuccin.user.css +++ b/styles/instagram/catppuccin.user.css @@ -158,7 +158,7 @@ } &[aria-label^="Story by"][aria-label$="not seen"] span { - outline-color: @mauve; + outline-color: @accent-color; outline-width: 0.2rem; } &[aria-label^="Story by"]:not([aria-label$="not seen"]) span { From 81d71f72923cac55715005201b1331eb12a9a7aa Mon Sep 17 00:00:00 2001 From: uncenter <47499684+uncenter@users.noreply.github.com> Date: Thu, 28 Mar 2024 21:03:18 -0400 Subject: [PATCH 05/11] refactor(instagram): remove duplication --- styles/instagram/catppuccin.user.css | 23 +---------------------- 1 file changed, 1 insertion(+), 22 deletions(-) diff --git a/styles/instagram/catppuccin.user.css b/styles/instagram/catppuccin.user.css index 4dfb993fa3..b0ba8216a0 100644 --- a/styles/instagram/catppuccin.user.css +++ b/styles/instagram/catppuccin.user.css @@ -144,7 +144,7 @@ } &[aria-label^="Story by"][aria-label$="not seen"] span { - outline-color: @mauve; + outline-color: @accent-color; outline-width: 0.2rem; } &[aria-label^="Story by"]:not([aria-label$="not seen"]) span { @@ -167,27 +167,6 @@ background-color: @mantle; } - /* Story seen / not seen ring */ - button:has(canvas + span > img[alt$="'s profile picture"]) { - canvas { - display: none; - } - - span { - outline-style: solid; - outline-offset: 0.15rem; - } - - &[aria-label^="Story by"][aria-label$="not seen"] span { - outline-color: @accent-color; - outline-width: 0.2rem; - } - &[aria-label^="Story by"]:not([aria-label$="not seen"]) span { - outline-color: @surface2; - outline-width: 0.075rem; - } - } - /* Icons */ svg { color: @text; From 906eb72acf04950a13891193d83363391832e57b Mon Sep 17 00:00:00 2001 From: Gen Date: Thu, 28 Mar 2024 18:06:09 -0700 Subject: [PATCH 06/11] fix(instagram): story background color --- styles/instagram/catppuccin.user.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/styles/instagram/catppuccin.user.css b/styles/instagram/catppuccin.user.css index b0ba8216a0..0da35576c9 100644 --- a/styles/instagram/catppuccin.user.css +++ b/styles/instagram/catppuccin.user.css @@ -127,6 +127,11 @@ stroke: @text; } + /* story background */ + .x5qyhuo { + background-color: @base; + } + /* story progress bar */ ._ac3p { background-color: @accent-color !important; From d5a7e53facbd45fd4ffac9aed9ed994319a2a9f9 Mon Sep 17 00:00:00 2001 From: Gen Date: Thu, 28 Mar 2024 18:19:44 -0700 Subject: [PATCH 07/11] fix(instagram): logo when viewing story --- styles/instagram/catppuccin.user.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/styles/instagram/catppuccin.user.css b/styles/instagram/catppuccin.user.css index 0da35576c9..3f312e0677 100644 --- a/styles/instagram/catppuccin.user.css +++ b/styles/instagram/catppuccin.user.css @@ -525,6 +525,16 @@ @mauve 60%, @blue 90% ); + /* instagram logo */ + [style*="background-image: url(\"https://static.cdninstagram.com/rsrc.php/v3/yU/r/H5Bq7ru-y9E.png\");"] + { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + background-position: -3px -7px !important; + background-size: unset !important; + } /* "All caught up" icon */ img[src="/images/instagram/xig/web/illo-confirm-refresh-light.png"] { @svg: escape( From bb0fcf697fc7f4e8eab13dc4b3401c08e0a28dfb Mon Sep 17 00:00:00 2001 From: Gen Date: Fri, 29 Mar 2024 11:28:58 -0700 Subject: [PATCH 08/11] fix(instagram): 2fa icon color --- styles/instagram/catppuccin.user.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/styles/instagram/catppuccin.user.css b/styles/instagram/catppuccin.user.css index 3f312e0677..3563e6a7e3 100644 --- a/styles/instagram/catppuccin.user.css +++ b/styles/instagram/catppuccin.user.css @@ -535,6 +535,18 @@ background-position: -3px -7px !important; background-size: unset !important; } + /* instagram lock icon */ + [aria-label="Two factor authentication lock icon"] { + @svg: escape( + '' + ); + background: url("data:image/svg+xml,@{svg}") no-repeat !important; + height: 0 !important; + width: 0 !important; + padding-left: 76px !important; + padding-top: 76px !important; + background-size: unset !important; + } /* "All caught up" icon */ img[src="/images/instagram/xig/web/illo-confirm-refresh-light.png"] { @svg: escape( From b63184b5489e504a3aa3f81751e234557986ff89 Mon Sep 17 00:00:00 2001 From: Gen Date: Fri, 29 Mar 2024 11:35:52 -0700 Subject: [PATCH 09/11] fix(insta): checkmark inside checkboxes --- styles/instagram/catppuccin.user.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/styles/instagram/catppuccin.user.css b/styles/instagram/catppuccin.user.css index 3563e6a7e3..d19e87f654 100644 --- a/styles/instagram/catppuccin.user.css +++ b/styles/instagram/catppuccin.user.css @@ -137,6 +137,10 @@ background-color: @accent-color !important; } + /* checkboxes checkmark */ + .x1ttxmnt { + color: @mantle !important; + } /* Story seen / not seen ring */ button:has(canvas + span > img[alt$="'s profile picture"]) { canvas { From fe5093ab8f2a59f7476f47dae1f6b9726aa0277b Mon Sep 17 00:00:00 2001 From: uncenter <47499684+uncenter@users.noreply.github.com> Date: Fri, 29 Mar 2024 14:37:50 -0400 Subject: [PATCH 10/11] refactor(instagram): icba --- styles/instagram/catppuccin.user.css | 50 +++++++++++++--------------- 1 file changed, 24 insertions(+), 26 deletions(-) diff --git a/styles/instagram/catppuccin.user.css b/styles/instagram/catppuccin.user.css index d19e87f654..d9527bac56 100644 --- a/styles/instagram/catppuccin.user.css +++ b/styles/instagram/catppuccin.user.css @@ -57,6 +57,7 @@ @dark-color: if(@lookup = latte, @text, @crust); @light-color: if(@lookup = latte, @crust, @text); + &, .x1qjc9v5, .x9f619, .x78zum5, @@ -68,7 +69,7 @@ --always-white: #rgbify(@light-color) []; --overlay-alpha-80: fadeout(@dark-color, 50); --always-dark-overlay: fadeout(@surface0, 50); - --grey-9: #rgbify(@text) []; + --grey-9: #rgbify(@crust) []; --ig-primary-background: #rgbify(@base) []; --ig-secondary-background: #rgbify(@surface0) []; --ig-banner-background: #rgbify(@crust) []; @@ -101,18 +102,21 @@ --blue-2: #rgbify(@blue) []; --ig-close-friends-refreshed: #rgbify(@green) []; --ig-text-input-border-hover-prism: #rgbify(@surface1) []; + --ig-toggle-outline-prism: #rgbify(@text) []; + --ig-toggle-background-on-prism: #rgbify(@text) []; + --ig-stroke-prism: #rgbify(@crust) []; scrollbar-color: @accent-color @crust; } - - //placehoder textcolor - .xh8yej3 { - color: @subtext0 !important; + + #splash-screen { + background-color: @base !important; } - // Text selection - *::selection { + + ::selection { color: @dark-color; background-color: @accent-color; } + /* Sidebar */ .x1xgvd2v { background-color: @crust !important; @@ -127,20 +131,16 @@ stroke: @text; } - /* story background */ + /* Story background */ .x5qyhuo { background-color: @base; } - /* story progress bar */ + /* Story progress bar */ ._ac3p { background-color: @accent-color !important; } - /* checkboxes checkmark */ - .x1ttxmnt { - color: @mantle !important; - } /* Story seen / not seen ring */ button:has(canvas + span > img[alt$="'s profile picture"]) { canvas { @@ -177,15 +177,9 @@ } /* Icons */ - svg { - color: @text; - fill: @text; - } svg[aria-label="Unlike"] { fill: @accent-color; } - - /* The close icon on the dark wrapper */ svg[aria-label="Close"] { color: @text; } @@ -226,7 +220,7 @@ background-color: @overlay1; } .x1psfjxj { - background-color: @text; + background-color: @mantle; } span[data-bloks-name="bk.components.TextSpan"] { color: @accent-color !important; @@ -529,7 +523,7 @@ @mauve 60%, @blue 90% ); - /* instagram logo */ + /* Instagram text logo */ [style*="background-image: url(\"https://static.cdninstagram.com/rsrc.php/v3/yU/r/H5Bq7ru-y9E.png\");"] { @svg: escape( @@ -539,7 +533,7 @@ background-position: -3px -7px !important; background-size: unset !important; } - /* instagram lock icon */ + /* 2fa lock icon */ [aria-label="Two factor authentication lock icon"] { @svg: escape( '' @@ -637,10 +631,10 @@ } /* Input placeholders */ - ._ac4d::placeholder, - ._aauy::placeholder, - textarea::placeholder { - color: @subtext0; + input, textarea { + &::placeholder { + color: @subtext0 !important; + } } /* Settings */ @@ -653,6 +647,10 @@ ._aav4 { background-color: @crust; } + /* Settings saved toast */ + ._abmp { + color: @text; + } /* Bloks */ .wbloks_1[data-bloks-name="bk.components.Collection"] { From 6727ac1045c10a1f737224f48651cc1ed108af94 Mon Sep 17 00:00:00 2001 From: Gen Date: Fri, 29 Mar 2024 11:40:56 -0700 Subject: [PATCH 11/11] fix(instagram): optimize the lock icon svg --- styles/instagram/catppuccin.user.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/instagram/catppuccin.user.css b/styles/instagram/catppuccin.user.css index d19e87f654..b5354ebd30 100644 --- a/styles/instagram/catppuccin.user.css +++ b/styles/instagram/catppuccin.user.css @@ -542,7 +542,7 @@ /* instagram lock icon */ [aria-label="Two factor authentication lock icon"] { @svg: escape( - '' + '' ); background: url("data:image/svg+xml,@{svg}") no-repeat !important; height: 0 !important;