/* ==UserStyle== @name Instagram paradisa @namespace github.com/axax-loll/userstyles/ @homepageURL https://github.com/axax-loll/userstyles/tree/main @version 1.0.1 @updateURL https://github.com/axax-loll/userstyles/tree/main/instagram/instagram.user.css @supportURL https://github.com/axax-loll/userstyles/tree/main @description Paradise for Instagram @author azikx @license MIT @preprocessor less @var select darkFlavor "Dark Flavor" ["paradisa:paradisa"] @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ @-moz-document domain('instagram.com') { ._aa4d { #paradisa(@darkFlavor, @accentColor); } #paradisa(@lookup, @accent) { @rosewater: @paradisa[@@lookup][@rosewater]; @flamingo: @paradisa[@@lookup][@flamingo]; @pink: @paradisa[@@lookup][@pink]; @mauve: @paradisa[@@lookup][@mauve]; @red: @paradisa[@@lookup][@red]; @maroon: @paradisa[@@lookup][@maroon]; @peach: @paradisa[@@lookup][@peach]; @yellow: @paradisa[@@lookup][@yellow]; @green: @paradisa[@@lookup][@green]; @teal: @paradisa[@@lookup][@teal]; @sky: @paradisa[@@lookup][@sky]; @sapphire: @paradisa[@@lookup][@sapphire]; @blue: @paradisa[@@lookup][@blue]; @lavender: @paradisa[@@lookup][@lavender]; @text: @paradisa[@@lookup][@text]; @subtext1: @paradisa[@@lookup][@subtext1]; @subtext0: @paradisa[@@lookup][@subtext0]; @overlay2: @paradisa[@@lookup][@overlay2]; @overlay1: @paradisa[@@lookup][@overlay1]; @overlay0: @paradisa[@@lookup][@overlay0]; @surface2: @paradisa[@@lookup][@surface2]; @surface1: @paradisa[@@lookup][@surface1]; @surface0: @paradisa[@@lookup][@surface0]; @base: @paradisa[@@lookup][@base]; @mantle: @paradisa[@@lookup][@mantle]; @crust: @paradisa[@@lookup][@crust]; @accent-color: @paradisa[@@lookup][@@accent]; @text-filter: @paradisa[@@lookup][@text-filter]; @dark-color: if(@lookup = latte, @text, @crust); @light-color: if(@lookup = latte, @crust, @text); color-scheme: if(@lookup = latte, light, dark); ::selection { background-color: fade(@accent-color, 30%); } input, textarea { &::placeholder { color: @subtext0 !important; } } &, .x1qjc9v5, .x9f619, .x78zum5, .xdt5ytf, .x1iyjqo2, .xl56j7k { --web-always-black: #rgbify(@dark-color) []; --ig-primary-icon: #rgbify(@text) []; --web-always-white: #rgbify(@light-color) []; --always-white: #rgbify(@light-color) []; --overlay-alpha-80: fadeout(@dark-color, 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(@red) []; --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) []; --barcelona-logo: #rgbify (@text) []; --ig-bubble-background: #rgbify (@surface1) []; --ig-tertiary-icon: #rgbify (@accent-color) []; --always-dark-overlay: @accent-color; scrollbar-color: @accent-color @crust; } #splash-screen { background-color: @base !important; } /* Sidebar */ .x1xgvd2v { background-color: @crust !important; &[style="transform: translateX(0px);"] { background-color: @mantle !important; } } .x1zvrr1 { background-color: @mantle; } svg[aria-label="Loading..."] { stroke: @text; } /* Story background */ .x5qyhuo { background-color: @base; } /* Story progress bar */ ._ac3p { background-color: @accent-color !important; } /* close friends story things */ .x9bdzbf { color: @mantle !important; } /* 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; } } /* Posts */ ._aggc { background-color: @mantle; border-color: @overlay0 !important; border-radius: var(--modal-border-radius); box-shadow: 0 3px 5px -1px fadeout(@dark-color, 20); box-sizing: border-box; } ._aatc ._aasi, ._ae1i, ._aggc textarea.xvbhtw8 { background-color: @mantle; } /* Icons */ svg[aria-label="Unlike"] { fill: @accent-color; } svg[aria-label="Close"] { color: @text; } svg[aria-label="Verified"] { fill: @accent-color; } /* Share box */ .xzloghq { background-color: @surface0; color: @text !important; &:hover { color: @mantle !important; background-color: @accent-color !important; } } .xk5f4mz { background-color: @mantle; &:hover { background-color: @accent-color; } } .x3nfvp2 { color: @text !important; &:hover { color: @crust; } } /* reel icon */ .xq3z1fi { color: @accent-color !important; } /* Toggle sliders */ .x1r7x56h { background-color: @accent-color; } .x100vrsf { background-color: @surface0; } .x1psfjxj { background-color: @mantle; } span[data-bloks-name="bk.components.TextSpan"] { color: @accent-color !important; } .xs7f9wi { background-color: @mantle !important; } .x1d72o { background-color: @surface0; } /* Log In With Facebook text */ ._ab37 { color: @blue; } /* Excluded: - _9ys7, _9_1f, _9ys8 (verified icon) */ [style*='background-image: url("https://static.cdninstagram.com/rsrc.php/v3/y4/r/ewSyA8IItw_.png")'], ._9zkj, ._a3ds, ._a3dt, ._a3du, ._a3dv, ._a3dw, ._9-b3, ._9znl, ._9z-6, ._a3dx, ._a3dy, ._a3dz, ._a3d-, ._a3d_, ._a3e0, ._9zm4, ._a3e1, ._a3e2, ._a3e3, ._a3e4, ._a3e5, ._a3e6, ._a3e7, ._a3e8, ._a3e9, ._a3ea, ._9_57, ._9_n5, ._9-y3, ._a3eb, ._a3ec, ._a3ed, ._a3ee, ._9zlu, ._9-yp, ._a3ef, ._a3eg, ._9_wm, ._a3eh, ._a3ei, ._9-j_, ._a3ej, ._a3ek, ._9_ij, ._9_d_, ._9_e1, ._9-mm, ._9_cx, ._9zm0, ._9zfi, ._9-ub, ._a3el, ._9-7-, ._9-1a, ._a3em, ._9zrp, ._a3en, ._9zz9, ._a3eo, ._9zmr, ._9-8d, ._9zhi, ._a3ep, ._9zs0, ._9-j-, ._a3eq, ._9zli, ._9_4y, ._9zm2, ._9zfj, ._9zlg, ._a3er, ._9-lv, ._9_ug, ._9_sh, ._9_sj, ._9-k0, ._9z-c, ._9_35, ._9_hh, ._a3es, ._a3et, ._a3eu, ._9-v-, ._9_4d, ._9zlh, ._a3ev, ._a3ew, ._a3ex, ._a3ey, ._9_7m, ._9_fv, ._a3ez, ._9-zf, ._9-zg, ._9-ze, ._a9fa, ._9-zh, ._9-zi, ._9-zj, ._9-zk, ._9-zl, ._9-zm, ._9-zn, ._9-zo, ._9-zp, ._9-zq, ._9-zr, ._9-zs, ._9-zt, ._a3op, ._a3oq, ._9-zu, ._9-zv, ._9-zw, ._9-zx, ._9-zy, ._9-zz, ._9-z-, ._a3or, ._a3ot, ._a3os, ._9zs1, ._9zs2, ._9-z_, ._9--0, ._9--1, ._9--2, ._9--3, ._9--4, ._9--5, ._9--6, ._9--7, ._9--f, ._9--8, ._9--9, ._9--a, ._9--b, ._9--c, ._9--d, ._9--e, ._a3ou, ._9--g, ._9--h, ._9--i, ._9--j, ._9--l, ._9--k, ._9--m, ._9--n, ._9--o, ._9--p, ._9--q, ._a3ov, ._9--s, ._9--r, ._9--t, ._9--u, ._9--v, ._9--x, ._9--y, ._9--w, ._9--z, ._9--_, ._9-_0, ._9-_1, ._9-_2, ._9-_3, ._9---, ._9-_4, ._9-_5, ._9-_6, ._9-_7, ._a3wy, ._9-_8, ._9-_9, ._a3ow, ._9-_a, ._9-_b, ._9-_c, ._9-_d, ._9-_e, ._9-_f, ._9-_g, ._9-_h, ._9-_i, ._9-_j, ._9-_k, ._9-_l, ._9-_m, ._9-_n, ._9-_o, ._a3ox, ._9-_p, ._9-_q, ._a9fb, ._9-_t, ._9-_r, ._9-_s, ._a93g, ._9-_u, ._9-_v, ._a9fc, ._9-_w, ._9-_x, ._9-_y, ._9-_z, ._9-_-, ._9-__, ._9_00, ._a3oy, ._9_01, ._9_02, ._9_03, ._9_04, ._9_05, ._9_08, ._9_09, ._9_07, ._9_06, ._9_0a, ._9_0b, ._9_0c, ._9_0d, ._9_0e, ._9_0f, ._9_0g, ._a93h, ._9_0h, ._9_0i, ._9_0j, ._9_0k, ._aepo, ._9_0l, ._9_0m, ._9_0n, ._9_0o, ._9_0p, ._a3oz, ._a93l, ._9_0r, ._9_0s, ._a7tk, ._9_0q, ._a3o-, ._9_0t, ._9_0v, ._9_0u, ._a9ej, ._9_0w, ._9_0x, ._9_0y, ._9_0z, ._9_0_, ._9_0-, ._9_10, ._9_11, ._9_12, ._9_13, ._9_14, ._9_15, ._a3o_, ._9_18, ._9_19, ._9_1a, ._9_1e, ._9_1b, ._9_1c, ._9_1d, ._9_16, ._9_17, ._a3p0, ._9_1g, ._9_1i, ._9_1h, ._9_1j, ._9_1k, ._9_1l, ._9_1m, ._a9pw { filter: @text-filter; } /* Custom icons */ @instagram_gradient: radial-gradient( circle at 30% 107%, @yellow 0%, @yellow 5%, @peach 45%, @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( '' ); 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( '' ); content: url("data:image/svg+xml,@{svg}"); } /* "All caught up" icon */ img[src="/images/instagram/xig/web/illo-confirm-refresh-light.png"] { @svg: escape( '' ); content: url("data:image/svg+xml,@{svg}"); } [style*='background-image: url("https://static.cdninstagram.com/rsrc.php/v3/y4/r/ewSyA8IItw_.png")'] { /* No photo icon */ &[style*="background-position: 0px -97px"] { filter: none; background: @mauve !important; background: @instagram_gradient !important; mask-image: url("https://static.cdninstagram.com/rsrc.php/v3/y4/r/ewSyA8IItw_.png"); mask-position: 0 -97px; } /* Private page icon */ &[style*="background-position: -49px -97px"] { filter: none; background: @mauve !important; background: @instagram_gradient !important; mask-image: url("https://static.cdninstagram.com/rsrc.php/v3/y4/r/ewSyA8IItw_.png"); mask-position: -49px -97px; } &[style*="background-position: -49px 0px"] { filter: none; background: @mauve !important; background: @instagram_gradient !important; mask-image: url("https://static.cdninstagram.com/rsrc.php/v3/y4/r/ewSyA8IItw_.png"); mask-position: -49px 0; } } /* Post swipe icons */ ._aaqh { background-color: @surface0; } /* Inside primary buttons */ .xzloghq, ._acas:not(._acao) { &, svg { color: @crust; fill: @mantle; } } ._acas:not(._acao):hover { background-color: @surface0 !important; color: @accent-color !important; } /* Secondary buttons */ .x1gjpkn9, ._acat, ._acap { &, a& { &, &:visited { color: @text; } } } /* Profile banner */ div:has(> .x1mu97ne) { background-color: @crust; border-color: @overlay0; box-shadow: 0 10px 35px 2px fadeout(@dark-color, 0.7); } /* Dialog overlay */ .x7r02ix[role="dialog"] { box-shadow: 0 5px 10px 0 fadeout(@dark-color, 0.5); } /* Settings */ ._ab81 { background-color: @mantle; } ._ab85, ._ab6i, ._ab85 .xvbhtw8, ._aav4 { background-color: @crust; } /* Settings saved toast */ ._abmp { color: @text; } /* Bloks */ .wbloks_1[data-bloks-name="bk.components.Collection"] { background-color: @base !important; } div[data-bloks-name="bk.components.Flexbox"], .wbloks_1[data-bloks-name="bk.components.Flexbox"] { /* Radios have left padding */ padding-left: 0 !important; /* The heading */ &[style*="background: rgb(0\, 0\, 0)"], &[style*="background: rgb(255\, 255\, 255)"] { background-color: @base !important; } /* Radios */ &[style*="border-radius: 10.5px"], &[style*="border-radius: 12px"], &[style*="border-radius: 4px"] { /* Selected radio */ &[style*="background: rgb(0\, 149\, 246)"] { background-color: @accent-color !important; } /* Not selected radio */ &[style*="background: rgb(219\, 219\, 219)"], &[style*="background: rgb(38\, 38\, 38)"], &[style*="background: rgb(54\, 54\, 54)"], &[style*="background: rgb(255\, 255\, 255)"] { background-color: @surface0 !important; } } /* That "border" */ &[style*="background: rgb(38\, 38\, 38)"] { display: none; } } span[data-bloks-name="bk.components.TextSpan"], span[data-bloks-name="bk.components.Text"] { &[style*="color: rgb(250\, 250\, 250)"], &[style*="color: rgb(224\, 241\, 255)"], &[style*="color: rgb(0\, 55\, 107)"], &[style*="color: rgb(38\, 38\, 38)"] { color: @text !important; } &[style*="color: rgb(142\, 142\, 142)"] { color: @subtext0 !important; } } /* Map pop-ups */ .leaflet-popup-content-wrapper, .leaflet-popup-tip { background-color: @mantle; box-shadow: 0 5px 15px fadeout(@dark-color, 0.4); * { color: @text !important; } } /* Scrollbar */ ::-webkit-scrollbar { background-color: @crust; } ::-webkit-scrollbar-thumb { background-color: @accent-color; border-radius: 10px; } } } @-moz-document regexp('^.*instagram.com/direct.*') { ._aa4d { #paradisa(@darkFlavor, @accentColor); } #paradisa(@lookup, @accent) { @rosewater: @paradisa[@@lookup][@rosewater]; @flamingo: @paradisa[@@lookup][@flamingo]; @pink: @paradisa[@@lookup][@pink]; @mauve: @paradisa[@@lookup][@mauve]; @red: @paradisa[@@lookup][@red]; @maroon: @paradisa[@@lookup][@maroon]; @peach: @paradisa[@@lookup][@peach]; @yellow: @paradisa[@@lookup][@yellow]; @green: @paradisa[@@lookup][@green]; @teal: @paradisa[@@lookup][@teal]; @sky: @paradisa[@@lookup][@sky]; @sapphire: @paradisa[@@lookup][@sapphire]; @blue: @paradisa[@@lookup][@blue]; @lavender: @paradisa[@@lookup][@lavender]; @text: @paradisa[@@lookup][@text]; @subtext1: @paradisa[@@lookup][@subtext1]; @subtext0: @paradisa[@@lookup][@subtext0]; @overlay2: @paradisa[@@lookup][@overlay2]; @overlay1: @paradisa[@@lookup][@overlay1]; @overlay0: @paradisa[@@lookup][@overlay0]; @surface2: @paradisa[@@lookup][@surface2]; @surface1: @paradisa[@@lookup][@surface1]; @surface0: @paradisa[@@lookup][@surface0]; @base: @paradisa[@@lookup][@base]; @mantle: @paradisa[@@lookup][@mantle]; @crust: @paradisa[@@lookup][@crust]; @accent-color: @paradisa[@@lookup][@@accent]; .x11jlvup { --chat-outgoing-message-bubble-background-color: fade(@blue, 80%); } .x1n2onr6 { --chat-incoming-message-bubble-background-color: @surface0; } /* Chat background */ .xnz67gz { background-color: @base; } /* messages you've sent */ .xyk4ms5 { color: @crust !important; } /* sidebar */ .xvbhtw8 { background-color: @mantle; } .x186z157, .xk50ysn, .xi81zsa { color: @subtext0 !important; } /* New Chat Button */ .xk5f4mz { background-color: @surface0; } /* Chat button */ .x1i10hfl:hover { color: @text; } .x1bvjpef { color: @crust; } .x1bvjpef:hover { color: lighten(@accent-color, 5%); } /* notes */ .xsnw5ke, .x3zg9eu::after { background-color: @surface0 !important; } .x103n6ev, .xzxgvzf { background-image: linear-gradient( -90deg, fade(@surface0, 30%), fade(@surface0, 100%) ); } /* explicit music icon in notes */ .x1cp0k07 { color: @text; } } } #rgbify(@color) { @rgb-raw: red(@color), green(@color), blue(@color); } /* prettier-ignore */ @paradisa: { @paradisa: { @rosewater: #BBB6B6; @flamingo: #A988B0; @pink: #A988B0; @mauve: #A988B0; @red: #B66467; @maroon: #B66467; @peach: #B66467; @yellow: #D9BC8C; @green: #8C977D; @teal: #8AA6A2; @sky: #8AA6A2; @sapphire: #8DA3B9; @blue: #8DA3B9; @lavender: #8DA3B9; @text: #E8E3E3; @subtext1: #BBB6B6; @subtext0: #BBB6B6; @overlay2: #424242; @overlay1: #424242; @overlay0: #424242; @surface2: #2E2E2E; @surface1: #2E2E2E; @surface0: #2E2E2E; @base: #151515; @mantle: #1F1F1F; @crust: #1F1F1F; }; }