/* ==UserStyle==
@name Instagram dark and responsive
@version 1.0.2
@description Instagram website is more suitable for wide screens and for our eyes.
@author BreatFR (https://breat.fr)
@namespace https://gitlab.com/breatfr
@homepageURL https://gitlab.com/breatfr/instagram
@supportURL https://discord.gg/Q8KSHzdBxs
@license AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
@preprocessor stylus
@var checkbox darkmode "Dark mode" 1
@var checkbox hidescrollbars "Hide scrollbars" 1
@var checkbox widemode "Wide mode" 1
==/UserStyle== */
/* === Credits ===
Website https://breat.fr
facebook https://www.facebook.com/breatfroff
mastodon https://mastodon.social/@breat_fr
telegram https://t.me/breatfr
vk https://vk.com/breatfroff
X (twitter) https://x.com/breatfroff
=== Credits === */
@-moz-document domain("instagram.com") {
/* ===================================================================================================================================
Version
=================================================================================================================================== */
:root {
--themeversion: 'Theme v1.0.2';
--author: 'by BreatFR';
--link: ' gitlab.com/breatfr/instagram ';
}
.x9f619.xjbqb8w.x78zum5.x168nmei.x13lgxp2.x5pf9jr.xo71vjh.xseo6mj.x1uhb9sk.x1plvlek.xryxfnj.x1c4vz4f.x2lah0s.xdt5ytf.xqjyukv.x1qjc9v5.x1oa3qoh.x1nhvcw1::after {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
content: var(--themeversion) ' · ' var(--author) '\A' url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBoZWlnaHQ9IjIwIiB3aWR0aD0iMjAiIHN0eWxlPSJ0cmFuc2Zvcm06IHNjYWxlWSgtMSk7Ij48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNS4xIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZmlsbD0iI2NiY2JjYiIgZD0iTTMwNyAzNC44Yy0xMS41IDUuMS0xOSAxNi42LTE5IDI5LjJ2NjRIMTc2Qzc4LjggMTI4IDAgMjA2LjggMCAzMDRDMCA0MTcuMyA4MS41IDQ2Ny45IDEwMC4yIDQ3OC4xYzIuNSAxLjQgNS4zIDEuOSA4LjEgMS45YzEwLjkgMCAxOS43LTguOSAxOS43LTE5LjdjMC03LjUtNC4zLTE0LjQtOS44LTE5LjVDMTA4LjggNDMxLjkgOTYgNDE0LjQgOTYgMzg0YzAtNTMgNDMtOTYgOTYtOTZoOTZ2NjRjMCAxMi42IDcuNCAyNC4xIDE5IDI5LjJzMjUgMyAzNC40LTUuNGwxNjAtMTQ0YzYuNy02LjEgMTAuNi0xNC43IDEwLjYtMjMuOHMtMy44LTE3LjctMTAuNi0yMy44bC0xNjAtMTQ0Yy05LjQtOC41LTIyLjktMTAuNi0zNC40LTUuNHoiLz48L3N2Zz4=") var(--link) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBoZWlnaHQ9IjIwIiB3aWR0aD0iMjAiIHRyYW5zZm9ybT0icm90YXRlKDE4MCkiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyNCBGb250aWNvbnMsIEluYy4tLT48cGF0aCBmaWxsPSIjY2JjYmNiIiBkPSJNMzA3IDM0LjhjLTExLjUgNS4xLTE5IDE2LjYtMTkgMjkuMnY2NEgxNzZDNzguOCAxMjggMCAyMDYuOCAwIDMwNEMwIDQxNy4zIDgxLjUgNDY3LjkgMTAwLjIgNDc4LjFjMi41IDEuNCA1LjMgMS45IDguMSAxLjljMTAuOSAwIDE5LjctOC45IDE5LjctMTkuN2MwLTcuNS00LjMtMTQuNC05LjgtMTkuNUMxMDguOCA0MzEuOSA5NiA0MTQuNCA5NiAzODRjMC01MyA0My05NiA5Ni05Nmg5NnY2NGMwIDEyLjYgNy40IDI0LjEgMTkgMjkuMnMyNSAzIDM0LjQtNS40bDE2MC0xNDRjNi43LTYuMSAxMC42LTE0LjcgMTAuNi0yMy44cy0zLjgtMTcuNy0xMC42LTIzLjhsLTE2MC0xNDRjLTkuNC04LjUtMjIuOS0xMC42LTM0LjQtNS40eiIvPjwvc3ZnPg==") ;
display: flex;
flex-direction: column;
font-size: 18px;
left: 7%;
position: absolute;
text-align: center;
top: 62%;
width: max-content;
white-space: pre-line;
}
/* ===================================================================================================================================
Hide scrollbars
=================================================================================================================================== */
if hidescrollbars {
:root ::-webkit-scrollbar {
scrollbar-width: none !important;
-ms-overflow-style: none !important;
-moz-overflow-style: none !important;
-webkit-overflow-style: none !important;
width: 0px !important;
}
::-webkit-scrollbar {
display: none !important;
width: 0px !important;
}
}
/* ===================================================================================================================================
Dark
=================================================================================================================================== */
if darkmode {
/* Splash screen */
#splash-screen {
background: #1e1e1e !important;
color: #cbcbcb !important;
}
.xat24cr,
.x12nagc.x182iqb8.x1pi30zi.x1swvt13,
.x5ur3kl.x13fuv20.x178xt8z.x1roi4f4.x2lah0s.xvs91rp.xl56j7k.x17ydfre.x1n2onr6.x10b6aqq.x1yrsyyn.x1hrcb2b.x1pi30zi,
.x6s0dn4.xrvj5dj.x1o61qjw.x12nagc.x1gslohp,
header section {
background: transparent !important;
}
._aaic,
._aam1,
._abm4,
._ae1j,
.xvbhtw8,
.xyzq4qe,
._aak3,
._aatc ._aasi,
._aest,
._ae48,
._aa61,
._aauy,
._aa62,
._ab8s,
._ad8j ,
._aatg ._aatk._aatn,
._aatk,
._ab8q,
._ae1i,
._ae1k,
.x7r02ix,
._aart,
._aart ._aaru,
._aac4._aac5._aac6._aj3f._ajdu,
.x78zum5.xdt5ytf.x1iyjqo2.x5yr21d.xh8yej3,
.x78zum5.xdt5ytf.x1iyjqo2.xg6iff7,
.x9f619.x1n2onr6.x1ja2u2z,
._ab22,
._aasi,
.xnz67gz,
body,
body._a3wf {
background: #1e1e1e !important;
background-color: #1e1e1e !important;
}
* {
border-color: transparent !important;
}
body,
button,
div,
h1,
h2,
h3,
h4,
h5,
h6,
label,
p,
svg,
textarea,
._aad3,
._aaai,
._ac2a,
._alvs,
._alvs:visited,
._aacx,
._aaoe,
._aaqn,
._acao._acat,
.x5n08af:not(input),
.xqnirrm {
color: #cbcbcb !important;
fill: #cbcbcb !important;
}
a:hover {
color: white !important;
fill: white !important;
}
/* Links */
a,
a:visited,
._aaai,
._aaai:visited,
._aaqn,
._aaqn:visited,
._ap3a._aaco._aacw._aacz._aada._aade,
._aacz:visited,
.x7l2uk3,
.x7l2uk3:visited,
.x9f619.x1n2onr6.x1ja2u2z.x78zum5.xdt5ytf.x193iq5w.xeuugli.x1r8uery.x1iyjqo2.xs83m0k > div > div > div > div:nth-child(4) > div,
.x3nfvp2.x193iq5w > div > a > span > span {
color: rgb(0, 149, 246) !important;
}
/* Loved */
svg.x1lliihq.x1n2onr6.xxk16z8 path {
fill: #fc5776;
stroke: #fc5776;
}
/* Follow */
._ap3a._aaco._aacw._aad6._aade {
color: white !important;
}
/* Followed */
[style="display: inline-block; transform: rotate(180deg);"] > svg,
._ap3a._aaco._aacw._aad6._aade[dir="auto"] {
color: #101010 !important;
fill: #101010 !important;
}
/* Reels */
.xlup9mm.x10ogl3i.x1kky2od > svg,
[style="line-height: var(--base-line-clamp-line-height); --base-line-clamp-line-height: 16px;"] > .x1lliihq.x193iq5w.x6ikm8r.x10wlt62.xlyipyv.xuxw1ft {
color: #1e1e1e !important;
fill: #1e1e1e !important;
}
.x1y1aw1k.x1sxyh0.xwib8y2.xurb0ha > a > div,
.x1y1aw1k.x1sxyh0.xwib8y2.xurb0ha > div > div {
background: #1e1e1e !important;
}
/* Modal after clicking on image/video */
._aatk._aatl._aatm {
border-radius: 16px 0px 0px 16px;
}
._aaqf._aaqh,
._aaqg._aaqh {
background: #1e1e1e !important;
border: 1px solid;
}
._aaqf._aaqh svg,
._aaqg._aaqh svg {
height: 36px;
width: 36px;
}
.x1eu8d0j {
background: #1e1e1e !important;
}
/* Previous/next on menu profile */
._aao_ {
padding-right: 3px;
}
._afxx {
background: url(https://static.cdninstagram.com/rsrc.php/v3/y8/r/ZWR9C7_JdnP.png);
background-position: -294px -226px;
background-repeat: no-repeat;
height: 45px;
width: 45px;
}
._afxy {
background: url(https://static.cdninstagram.com/rsrc.php/v3/y8/r/ZWR9C7_JdnP.png);
background-position: -294px -226px;
background-repeat: no-repeat;
height: 45px;
width: 45px;
}
/* Verified icons */
svg.x1lliihq.x1n2onr6:not(.x1lliihq.x1n2onr6.x5n08af,.x1lliihq.x1n2onr6.xyb1xck,[style="display: flex; flex-direction: column; padding-bottom: 0px; padding-top: 0px; position: relative;"] svg) {
fill: rgb(0, 149, 246) !important;
}
/* Icons on profil's posts */
[style="display: flex; flex-direction: column; padding-bottom: 0px; padding-top: 0px; position: relative;"] svg {
fill: white !important;
}
}
/* ===================================================================================================================================
Wide
=================================================================================================================================== */
if widemode {
.xsdox4t,
.x78zum5.xdt5ytf.x1iyjqo2.xg6iff7,
.x6osk4m.x6osk4m {
overflow-x: hidden;
width: 100% !important;
}
[style*="width: calc(-2px + min"] {
max-width: calc(100vw - 680px) !important;
min-width: 1250px !important;
}
.x6s0dn4.xyzq4qe.x78zum5.xdt5ytf.x2lah0s.xl56j7k.x6ikm8r.x10wlt62.x1n2onr6.x5ur3kl.xopu45v.x1bs97v6.xmo9t06.x1lcm9me.x1yr5g0i.xrt01vj.x10y3i5r.x13fuv20.xu3j5b3.x1q0q8m5.x26u7qi.x178xt8z.xm81vs4.xso031l.xy80clv {
border-radius: 16px !important;
}
[style*="width: calc(-2px + min"] video {
object-fit: cover;
}
.xvbhtw8.xixxii4.x13vifvy.xk3oba8.xh8yej3.x1mcj5oc,
.x78zum5.x1q0g3np.xl56j7k.xh8yej3.x1xy6bms > div:nth-child(1) {
max-width: calc(100% - 670px) !important;
}
.x1fawyso {
margin-left: 16.5%;
max-width: calc(100% - 380px) !important;
}
/* Article content */
.x9f619.xjbqb8w.x78zum5.x168nmei.x13lgxp2.x5pf9jr.xo71vjh.x1uhb9sk.x1plvlek.xryxfnj.x1c4vz4f.x2lah0s.xdt5ytf.xqjyukv.x6s0dn4.x1oa3qoh.x1nhvcw1 > div {
min-width: 100% !important;
}
._aap0 {
width: 100% !important;
}
/* Smiley */
.xu96u03.xm80bdy.x10l6tqk.x13vifvy > div.x1uvtmcs.x4k7w5x.x1h91t0o.x1beo9mf.xaigb6o.x12ejxvf.x3igimt.xarpa2k.xedcshv.x1lytzrv.x1t2pt76.x7ja8zs.x1n2onr6.x1qrby5j.x1jfb8zj > div > div > div > div > div {
background: #101010;
}
/* Article header home page */
.x6s0dn4.x78zum5.x1q0g3np.x1nhvcw1.xh8yej3 > div {
padding: 0 10px;
}
/* Comments home page */
.x1lliihq.x1n2onr6 > .xvbhtw8.x78zum5.xdt5ytf.x5yr21d.x1n2onr6 > div {
padding: 0px;
}
/* Sidebar */
.x3hkoc4 {
padding-left: 0px;
position: fixed;
right: 0px;
width: 319px;
}
._aap0 {
width: calc(100% - 80px);
}
/* Messages */
.x9f619.x1n2onr6.x1ja2u2z.x78zum5.xdt5ytf.x193iq5w.xeuugli.x1r8uery.x1iyjqo2.xs83m0k {
padding-right: 10px;
}
span[style="line-height: var(--base-line-clamp-line-height);--base-line-clamp-line-height: 25px;"] {
line-height: 40px !important;
}
}
/* For instagram ad blocker browser plugin */
#ad-shield {
background: #101010 !important;
color: #cbcbcb !important;
left: 156px;
}
#ad-shield-main {
background: #101010 !important;
color: #cbcbcb !important;
height: auto;
left: 10px;
max-height: 50%;
overflow-y: auto;
padding: 5px 10px;
position: fixed;
top: 70px;
width: 300px;
z-index: 9999;
}
#ad-hid-count,
#ad-hide-username {
background: #1e1e1e !important;
color: #cbcbcb !important;
}
}
