Skip to content

fix(instagram): specificity & story-related color changes #730

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
GenShibe merged 13 commits into from
Mar 29, 2024
Merged

fix(instagram): specificity & story-related color changes #730

Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
46edb96
fix(instagram): vars not being overriden + story outline fix
GenShibe Mar 29, 2024
8914359
fix(instagram): close icon on the dark wrapper
GenShibe Mar 29, 2024
ed49b8e
fix(instagram): send messages + share button
GenShibe Mar 29, 2024
c641334
fix(insta): make story not seen ring become accent color
GenShibe Mar 29, 2024
013a134
Merge branch 'main' into fix/insta
uncenter Mar 29, 2024
81d71f7
refactor(instagram): remove duplication
uncenter Mar 29, 2024
906eb72
fix(instagram): story background color
GenShibe Mar 29, 2024
d5a7e53
fix(instagram): logo when viewing story
GenShibe Mar 29, 2024
bb0fcf6
fix(instagram): 2fa icon color
GenShibe Mar 29, 2024
b63184b
fix(insta): checkmark inside checkboxes
GenShibe Mar 29, 2024
fe5093a
refactor(instagram): icba
uncenter Mar 29, 2024
6727ac1
fix(instagram): optimize the lock icon svg
GenShibe Mar 29, 2024
4941eb4
Merge branch 'fix/insta' of https://github.com/catppuccin/userstyles …
GenShibe Mar 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
163 changes: 100 additions & 63 deletions styles/instagram/catppuccin.user.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,55 +57,66 @@
@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;

//placehoder textcolor
.xh8yej3 {
color: @subtext0 !important;
&,
.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(@crust) [];
--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) [];
--ig-toggle-outline-prism: #rgbify(@text) [];
--ig-toggle-background-on-prism: #rgbify(@text) [];
--ig-stroke-prism: #rgbify(@crust) [];
scrollbar-color: @accent-color @crust;
}

#splash-screen {
background-color: @base !important;
}
// Text selection
*::selection {

::selection {
color: @dark-color;
background-color: @accent-color;
}

/* Sidebar */
.x1xgvd2v {
background-color: @crust !important;
Expand All @@ -120,7 +131,12 @@
stroke: @text;
}

/* story progress bar */
/* Story background */
.x5qyhuo {
background-color: @base;
}

/* Story progress bar */
._ac3p {
background-color: @accent-color !important;
}
Expand All @@ -137,7 +153,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 {
Expand All @@ -161,28 +177,23 @@
}

/* 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: var(--web-always-white);
color: @text;
}
svg[aria-label="Verified"] {
fill: @accent-color;
}

/* 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 {
Expand All @@ -209,7 +220,7 @@
background-color: @overlay1;
}
.x1psfjxj {
background-color: @text;
background-color: @mantle;
}
span[data-bloks-name="bk.components.TextSpan"] {
color: @accent-color !important;
Expand Down Expand Up @@ -512,6 +523,28 @@
@mauve 60%,
@blue 90%
);
/* Instagram text logo */
[style*="background-image: url(\"https://static.cdninstagram.com/rsrc.php/v3/yU/r/H5Bq7ru-y9E.png\");"]
{
@svg: escape(
'<svg xmlns="http://www.w3.org/2000/svg" width="110" height="39.285" viewBox="0 0 110 39.285"><path fill="@{text}" d="M8.481 6.431C6.358 7.32 4.025 9.83 3.288 12.98c-.934 3.992 2.951 5.68 3.269 5.127.375-.65-.696-.87-.916-2.941-.285-2.675.959-5.665 2.525-6.976.292-.244.277.096.277.723 0 1.122-.062 11.194-.062 13.296 0 2.845-.118 3.742-.329 4.63-.213.9-.558 1.507-.297 1.741.292.262 1.533-.361 2.253-1.365.862-1.203 1.165-2.65 1.219-4.22.066-1.893.063-4.896.066-6.609.002-1.571.026-6.172-.028-8.938-.013-.679-1.894-1.39-2.783-1.018m75.38 13.312c-.068 1.478-.396 2.635-.802 3.45-.786 1.579-2.419 2.068-3.111-.2-.377-1.236-.395-3.302-.123-5.028.276-1.758 1.048-3.086 2.325-2.966 1.261.118 1.85 1.742 1.712 4.744m-21.248 9.173c-.017 2.457-.404 4.611-1.233 5.237-1.176.887-2.757.221-2.43-1.571.289-1.586 1.659-3.207 3.666-5.187 0 0 .004.451-.003 1.52m-.321-9.188c-.072 1.346-.421 2.699-.802 3.464-.786 1.579-2.43 2.071-3.111-.2-.465-1.552-.354-3.562-.123-4.828.299-1.642 1.024-3.167 2.325-3.167 1.265 0 1.89 1.388 1.712 4.73zm-12.307-.021c-.077 1.427-.355 2.619-.802 3.485-.808 1.568-2.407 2.065-3.111-.2-.508-1.634-.336-3.86-.123-5.063.314-1.785 1.099-3.05 2.325-2.93 1.26.123 1.872 1.742 1.712 4.709zm56.401 1.667c-.308 0-.449.318-.564.851-.404 1.858-.827 2.277-1.374 2.277-.611 0-1.159-.92-1.3-2.761-.111-1.448-.094-4.114.048-6.765.029-.544-.121-1.084-1.583-1.615-.629-.229-1.543-.564-1.998.533-1.286 3.103-1.789 5.568-1.907 6.568-.007.052-.069.063-.08-.058-.076-.802-.244-2.258-.265-5.32-.004-.597-.131-1.105-.79-1.521-.428-.27-1.727-.748-2.195-.179-.405.464-.875 1.715-1.362 3.198a270 270 0 0 1-.672 2.02s.006-3.251.01-4.485c.002-.465-.317-.62-.414-.648-.433-.125-1.287-.336-1.649-.336-.447 0-.557.25-.557.614 0 .047-.07 4.28-.07 7.24l.001.418c-.248 1.361-1.049 3.207-1.921 3.207s-1.285-.772-1.285-4.301c0-2.058.062-2.954.092-4.442.018-.858.052-1.516.05-1.665-.007-.459-.799-.69-1.167-.774a3.5 3.5 0 0 0-.944-.106c-.355.02-.607.253-.607.574l.002.499c-.459-.721-1.196-1.221-1.685-1.366-1.321-.393-2.699-.045-3.739 1.41-.826 1.156-1.324 2.465-1.52 4.346-.143 1.375-.097 2.77.158 3.949-.308 1.331-.879 1.876-1.505 1.876-.909 0-1.566-1.483-1.491-4.047.051-1.686.388-2.87.757-4.582.157-.73.03-1.112-.292-1.478-.294-.336-.921-.507-1.821-.296a32 32 0 0 1-2.397.437s.051-.202.092-.558c.218-1.868-1.811-1.716-2.458-1.12-.386.356-.649.777-.749 1.531-.158 1.199.82 1.763.82 1.763-.321 1.469-1.107 3.386-1.918 4.772-.435.743-.767 1.294-1.197 1.879l-.003-.652c-.01-3.087.031-5.515.05-6.391.018-.858.052-1.498.051-1.648-.004-.336-.2-.462-.607-.621a4.4 4.4 0 0 0-1.227-.274c-.558-.044-.893.252-.884.602.002.066.002.471.002.471-.459-.721-1.196-1.221-1.685-1.366-1.321-.392-2.699-.044-3.739 1.41-.826 1.156-1.367 2.778-1.52 4.332-.143 1.448-.117 2.679.078 3.715-.21 1.038-.814 2.123-1.496 2.123-.873 0-1.37-.772-1.37-4.301 0-2.058.062-2.954.092-4.442.018-.858.052-1.516.05-1.665-.007-.459-.799-.69-1.167-.774a3.4 3.4 0 0 0-.975-.103c-.338.025-.574.328-.574.552v.519c-.459-.721-1.196-1.221-1.685-1.366-1.321-.392-2.692-.039-3.739 1.41-.683.945-1.235 1.992-1.52 4.311a14 14 0 0 0-.113 1.884c-.273 1.665-1.475 3.585-2.458 3.585-.575 0-1.124-1.117-1.124-3.497 0-3.17.196-7.684.23-8.119l1.484-.024c.62-.007 1.181.008 2.008-.034.415-.021.813-1.508.386-1.692-.194-.084-1.563-.156-2.107-.168-.457-.01-1.727-.105-1.727-.105s.114-2.996.141-3.312c.022-.264-.319-.399-.515-.482-.476-.201-.902-.298-1.407-.402-.697-.144-1.013-.003-1.076.585-.094.893-.141 3.509-.141 3.509-.512 0-2.259-.1-2.771-.1-.475 0-.989 2.045-.331 2.07.757.03 2.075.055 2.948.081 0 0-.039 4.588-.039 6.005l.001.437c-.481 2.507-2.175 3.861-2.175 3.861.364-1.659-.38-2.904-1.718-3.958a123 123 0 0 0-2.556-1.929s.631-.621 1.19-1.872c.396-.887.414-1.9-.56-2.124-1.608-.37-2.934.811-3.329 2.071-.307.977-.143 1.701.457 2.454q.066.083.141.167c-.363.7-.861 1.641-1.284 2.372-1.171 2.027-2.057 3.632-2.727 3.632-.535 0-.528-1.628-.528-3.153 0-1.315.097-3.29.175-5.336.025-.676-.312-1.063-.88-1.411-.344-.212-1.08-.629-1.506-.629-.638 0-2.477.087-4.215 5.114-.219.634-.649 1.789-.649 1.789l.037-6.046c0-.142-.076-.279-.249-.373-.293-.16-1.075-.484-1.771-.484q-.497 0-.497.461l-.061 9.459c0 .718.019 1.557.09 1.924s.186.665.328.844a.95.95 0 0 0 .576.369c.252.052 1.63.229 1.702-.298.086-.631.089-1.315.813-3.861 1.127-3.966 2.596-5.9 3.287-6.587.121-.12.259-.128.252.069-.03.869-.133 3.042-.204 4.887-.187 4.939.712 5.854 1.995 5.854.982 0 2.367-.976 3.851-3.446a868 868 0 0 0 2.47-4.137c.45.417.955.865 1.46 1.343 1.173 1.112 1.558 2.17 1.302 3.174-.196.767-.931 1.557-2.241.789-.382-.224-.544-.397-.928-.65-.206-.135-.521-.176-.71-.034-.491.37-.77.839-.931 1.421-.156.567.411.866 1 1.127.506.226 1.594.43 2.288.453 2.704.09 4.87-1.306 6.378-4.906.27 3.11 1.419 4.87 3.414 4.87 1.334 0 2.672-1.725 3.257-3.421q.254 1.038.737 1.802c1.538 2.437 4.521 1.912 6.019-.157.463-.639.533-.869.533-.869.219 1.954 1.792 2.636 2.693 2.636 1.009 0 2.05-.476 2.781-2.121a6 6 0 0 0 .281.51c1.538 2.437 4.521 1.912 6.019-.157a10 10 0 0 0 .186-.264l.044 1.284-1.379 1.265c-2.31 2.119-4.066 3.727-4.194 5.599-.166 2.387 1.77 3.275 3.235 3.39 1.555.123 2.888-.736 3.706-1.938.721-1.058 1.191-3.336 1.157-5.586-.013-.901-.036-2.046-.054-3.275a26.4 26.4 0 0 0 2.569-3.529c.917-1.52 1.901-3.561 2.405-5.149 0 0 .855.008 1.767-.053.292-.019.375.041.321.254-.065.259-1.152 4.451-.16 7.245.679 1.912 2.21 2.527 3.117 2.527 1.063 0 2.079-.802 2.623-1.993a4 4 0 0 0 .209.38c1.538 2.437 4.51 1.909 6.019-.157.341-.466.533-.869.533-.869.323 2.022 1.896 2.647 2.796 2.647.938 0 1.828-.385 2.551-2.094.03.752.078 1.368.153 1.562.046.119.312.267.506.34.858.318 1.734.167 2.057.102.224-.045.399-.226.424-.69.063-1.22.024-3.27.394-4.794.621-2.558 1.2-3.549 1.475-4.04.154-.275.328-.32.333-.03.013.59.042 2.319.283 4.644.177 1.709.413 2.72.594 3.04.518.914 1.157.958 1.677.958.331 0 1.024-.091.961-.673-.03-.284.023-2.037.635-4.556.399-1.646 1.066-3.132 1.307-3.675.089-.2.13-.043.129-.012-.051 1.133-.164 4.839.297 6.865.626 2.746 2.435 3.053 3.067 3.053 1.346 0 2.448-1.024 2.818-3.719.089-.649-.043-1.149-.439-1.149"/></svg>'
);
background-image: url("data:image/svg+xml,@{svg}") !important;
background-position: -3px -7px !important;
background-size: unset !important;
}
/* 2fa lock icon */
[aria-label="Two factor authentication lock icon"] {
@svg: escape(
'<svg width="76" height="76" viewBox="0 0 76 76" fill="@{blue}" xmlns="http://www.w3.org/2000/svg"><path d="M38.49.004c-4.62-.066-9.374.71-14.079 2.456C7.41 8.766-2.782 27.015.672 44.969c2.997 15.573 14.442 27.16 29.91 30.28 23.375 4.714 45.416-13.374 45.416-37.271C75.998 16.38 58.508.288 38.49.004m-.503 3.098c3.374 0 6.747.41 9.379 1.231C59.724 8.187 67.739 16.208 71.63 28.616c1.644 5.24 1.645 13.474.002 18.741-3.825 12.263-11.866 20.357-24.019 24.174-6.902 2.169-15.31 1.747-22.419-1.125C5.896 62.611-2.438 40.654 6.89 22.181c4.408-8.729 11.704-14.725 21.717-17.848 2.632-.82 6.006-1.231 9.38-1.231m15.47 1.416.082.04q-.02.04-.037.081a1 1 0 0 0-.045-.12m-.011.872q.015.042.034.08l-.093-.041a.3.3 0 0 0 .059-.039M37.987 21.69c-4.812 0-7.402 2.806-7.404 8.02 0 2.714-.056 2.839-1.26 2.839-1.61 0-3.961 1.21-4.358 2.243-.168.44-.306 3.79-.306 7.446 0 6.398.045 6.692 1.211 7.858l1.212 1.211h21.81l1.212-1.21c1.167-1.167 1.212-1.46 1.212-7.859 0-3.655-.139-7.006-.307-7.446-.397-1.033-2.748-2.243-4.359-2.243-1.203 0-1.259-.125-1.26-2.838 0-5.215-2.59-8.021-7.403-8.021m0 3.208c3.374 0 4.443 1.201 4.443 4.99v2.66h-8.885v-2.66c0-3.789 1.07-4.99 4.442-4.99m.084 10.563c4.69.023 9.362.276 9.745.738.378.455.524 2.583.431 6.294l-.14 5.606-9.904.133c-5.447.073-10.057-.019-10.244-.205-.613-.614-.386-11.284.254-11.924.458-.458 5.167-.665 9.858-.642M38 39.723a1.05 1.05 0 0 0-1.05 1.049 1.05 1.05 0 0 0 .617.957v2.225h.865v-2.225a1.05 1.05 0 0 0 .617-.957 1.05 1.05 0 0 0-1.05-1.05m15.607 30.662a1 1 0 0 0-.084.14.2.2 0 0 0-.068-.072zm-.122.923q.031.056.078.098-.06.028-.123.053c.016-.05.029-.088.045-.151"/></svg>'
);
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(
Expand Down Expand Up @@ -563,7 +596,7 @@
._acas:not(._acao) {
&,
svg {
color: @crust !important;
color: @crust;
fill: @mantle;
}
}
Expand Down Expand Up @@ -598,10 +631,10 @@
}

/* Input placeholders */
._ac4d::placeholder,
._aauy::placeholder,
textarea::placeholder {
color: @subtext0;
input, textarea {
&::placeholder {
color: @subtext0 !important;
}
}

/* Settings */
Expand All @@ -614,6 +647,10 @@
._aav4 {
background-color: @crust;
}
/* Settings saved toast */
._abmp {
color: @text;
}

/* Bloks */
.wbloks_1[data-bloks-name="bk.components.Collection"] {
Expand Down