@charset "UTF-8";
/* ==UserStyle==
@name Instagram Full-res+Dark+Right-click
@version 1.3.0
@author cckats
@license MIT
@description Dark theme with many fixes with full res images and enabled right click
@preprocessor default
@namespace https://greasyfork.org/users/661487
==/UserStyle== */
@-moz-document domain("instagram.com") {
/*Instagram skin v2 by cckats */
:root {
--heightper: 95vh
}
/*Embeds*/
.EmbeddedMediaImage {
pointer-events: all;
}
/*images*/
.PdwC2 {
max-width: 90vw!important;
}
.JyscU ._97aPb {
max-height: var(--heightper);
}
.rQDP3 {
max-height: var(--heightper);
}
.pR7Pc {
max-height: var(--heightper);
}
.eLAPa {
max-height: var(--heightper);
}
.FFVAD {
object-fit: contain!important;
max-height: var(--heightper);
}
.zZYga {
overflow: hidden;
}
body > div._2dDPU.CkGkG > div.zZYga > div > article > div._97aPb > div > div > div.eLAPa._23QFA > div.KL4Bh {
padding-bottom: var(--heightper)!important;
}
.DdSX2 {
max-width: 90vw;
}
.HaS-3 {
padding-bottom: 90vh !important;
}
.jdnLC {
max-width: none !important;
}
.zZYga::after,
.zZYga::before {
-webkit-flex-basis: 10px;
-ms-flex-preferred-size: 10px;
flex-basis: 10px;
}
/*right click*/
._9AhH0 {
display: none;
}
/*direct images*/
.ltEKP {
max-width: 95vw!important;
}
.Kj7h1 {
max-width: none;
}
.yJx9G {
padding-top: 2vh;
}
/*video*/
.tWeCl {
max-height: var(--heightper);
object-fit: contain;
}
._8jZFn {
object-fit: contain;
max-height: var(--heightper);
}
body > div._2dDPU.CkGkG > div.zZYga > div > article > div._97aPb > div {
max-height: var(--heightper);
}
.wymO0 {
max-height: var(--heightper);
}
.PyenC,
.fXIG0 {
max-height: var(--heightper);
}
/*right click*/
.PyenC,
.fXIG0 {
height: 135px;
left: 50%;
margin-left: -67px;
margin-top: -67px;
top: 50%;
width: 135px;
z-index: 1;
}
._a3gq ._aagw {
display: none;
}
/*random fixes*/
.aGBdT {
overflow: hidden;
min-height: 15px;
}
body > div.RnEpo.Yx5HN > div > div.Igw0E.IwRSH.eGOV_._4EzTm.IM32b > div.Igw0E.IwRSH.eGOV_._4EzTm.lDRO1.XfCBB.g6RW6 {
padding-top: 116px;
}
.IM32b {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.…0px'><text x='0' y='15' fill='red' font-size='20'>To open images use midle mouse button </text><text x='0' y='40' fill='white' font-size='20'>If you want to continue scrolling with no login i have a </text><text x='0' y='60' fill='white' font-size='20'>seperate skin for that.</text><text x='0' y='85' fill='white' font-size='20'> For more information go to skin's page on stylish</text></svg>");
background-position: 30px 30px;
background-repeat: no-repeat;
}
/*stories*/
.i0EQd {
width: 95%;
}
/* Some dark theme fixes */
/*messenger*/
._a3gq ._ab6-,._a3gq ._aas5,._a3gq ._aas8 {
filter: invert(1);
}
.sp_jY02qVAhKr8 {
filter: invert(1);
}
.S-mcP {
background-color: var(--dark);
border: none;
}
._5Jsao,
._1XyCr {
background-color: var(--dark);
}
.QOqBd {
background-color: var(--dark)!important;
}
#react-root > section > div > div.Igw0E.IwRSH.eGOV_._4EzTm > div > div > div.oNO81 > div.Igw0E.IwRSH.eGOV_._4EzTm.i0EQd {
width: 100%;
}
.frMpI.-sxBV,
#react-root > section > div > div.Igw0E.IwRSH.eGOV_._4EzTm > div > div > div.DPiy6.Igw0E.IwRSH.eGOV_.vwCYk > div.uueGX > div > div.Igw0E.IwRSH.eGOV_._4EzTm {
background-color: var(--darker);
}
#react-root > section > div > div.Igw0E.IwRSH.eGOV_._4EzTm > div > div > div.oNO81 > div.Igw0E.IwRSH.eGOV_._4EzTm.i0EQd > div > div > div > div > div :hover {
background-color: var(--dark)!important;
}
.m7ETg {
color: #fff;
}
._01UL2,
._a3gq ._aatg ._aasw,
._a3gq ._aam1,
._a3gq ._aalm {
background: var(--dark);
}
.uo5MA {
background: #000;
box-shadow: 0 0 5px 1px var(--shadow);
}
.DPiy6 {
background-color: var(--darker)!important;
}
.N9abW,
._6FEQj,
.oNO81,
._a3gq ._aatg ._aasi,
._a3gq ._aalr,
._a3gq ._aalp,
._a3gq ._aall,
._a3gq ._aak3,
._a3gq ._ab8q {
background-color: var(--darker)!important;
}
.t30g8 {
background-color: var(--dark)!important;
}
._lz6s {
background-color: var(--darker)!important;
border: none;
}
.jdnLC {
background-color: var(--dark) !important;
}
.s2MYR {
background-color: var(--dark) !important;
}
/* Some other dark theme fixes */
._a3gq div,
._a3gq span,
._a3gq applet,
._a3gq object,
._a3gq iframe,
._a3gq h1,
._a3gq h2,
._a3gq h3,
._a3gq h4,
._a3gq h5,
._a3gq h6,
._a3gq p,
._a3gq blockquote,
._a3gq pre,
._a3gq a,
._a3gq abbr,
._a3gq acronym,
._a3gq address,
._a3gq big,
._a3gq cite,
._a3gq code,
._a3gq del,
._a3gq dfn,
._a3gq em,
._a3gq img,
._a3gq ins,
._a3gq kbd,
._a3gq q,
._a3gq s,
._a3gq samp,
._a3gq small,
._a3gq strike,
._a3gq strong,
._a3gq sub,
._a3gq sup,
._a3gq tt,
._a3gq var,
._a3gq b,
._a3gq u,
._a3gq i,
._a3gq center,
._a3gq dl,
._a3gq dt,
._a3gq dd,
._a3gq ol,
._a3gq ul,
._a3gq li,
._a3gq fieldset,
._a3gq form,
._a3gq label,
._a3gq legend,
._a3gq table,
._a3gq caption,
._a3gq tbody,
._a3gq tfoot,
._a3gq thead,
._a3gq tr,
._a3gq th,
._a3gq td,
._a3gq article,
._a3gq aside,
._a3gq canvas,
._a3gq details,
._a3gq embed,
._a3gq figure,
._a3gq figcaption,
._a3gq footer,
._a3gq header,
._a3gq hgroup,
._a3gq menu,
._a3gq nav,
._a3gq output,
._a3gq ruby,
._a3gq section,
._a3gq summary,
._a3gq time,
._a3gq mark,
._a3gq audio,
._a3gq video {
border: 0!important;
}
.JyscU .cv3IO,
.JyscU .NvNrm,
._79xir,
.vdqkn,
.CZW53,
._1gNme .cv3IO,
.csxf2 {
background-color: var(--dark);
}
body > div._2dDPU.CkGkG > div.Igw0E.IwRSH.eGOV_._4EzTm.BI4qX.qJPeX.fm1AK.TxciK.yiMZG > button > svg,
body > div._2dDPU.CkGkG > div.Igw0E.IwRSH.eGOV_._4EzTm.BI4qX.qJPeX.fm1AK.TxciK.yiMZG > button > div > svg,
body > div._2dDPU.CkGkG > div.zZYga > div > article > div._97aPb > div > div.pR7Pc > div.Igw0E.IwRSH.eGOV_._4EzTm.O1flK.D8xaz.fm1AK.TxciK.yiMZG > div > div > div > ul > li > div > div > div > span > div > svg {
filter: invert(0.2);
}
.HBUJV,
.LHkGc {
filter: invert(1);
}
.VideM {
background: var(--darker);
border: none;
box-shadow: 0 4px 16px 0 var(--shadow);
}
.eebAO {
color: #fff;
}
._8UZ6e {
background-color: var(--darker);
}
.tHaIX {
background-color: var(--darker)!important;
}
._41KYi {
background: var(--darker);
border: none;
box-shadow: 0 4px 16px 0 var(--shadow);
}
#react-root > section > main > article > div.rgFsT > div > div > div.Igw0E.IwRSH.eGOV_._4EzTm.MGdpg.CIRqI.IY_1_.aGBdT {
min-height: 30px;
}
.gr27e {
background-color: var(--darker) !important;
}
.coreSpriteLoggedOutWordmark,
.coreSpriteMobileNavDirect {
filter: invert(1);
}
.bTref {
color: #9b9b9b;
}
#react-root > section > main > div > div._2z6nI > div.Igw0E.rBNOH.eGOV_._4EzTm > div {
height: 100px;
}
.z4xUb {
z-index: 1000;
}
.ySN3v {
padding-bottom: 100px;
}
#react-root > section > main > div > div._2z6nI > div.Igw0E.rBNOH.eGOV_._4EzTm > div {
overflow: visible;
}
.w5S7h {
bottom: 150px;
}
.e-Ph9 {
background: var(--dark);
border: none;
}
.HaS-3 {
background-color: var(--dark) !important;
background-blend-mode: color-burn;
}
.y1ezF,
.y1ezF .DXJP0,
.y1ezF .DXJP0:visited,
._a3gq ._aacx {
color: var(--light);
}
.PrimaryCTA,
.HoverCard .HoverCardRoot {
background-color: var(--dark);
}
.Feedback {
filter: invert(1);
}
.SvO5t {
background-color: #d9d9d9!important;
}
.JyscU.ePUX4 .UE9AK {
border-left: none!important;
}
.JyscU.ePUX4 .eo2As {
border-left: none!important;
}
._8-yf5 {
filter: invert(1);
}
.s4Iyt {
filter: invert(1);
}
._4l6NB {
background-image: -webkit-gradient(linear, left top, right top, from(rgba(51, 51, 51, .4)), to(var(--darker)));
background-image: -webkit-linear-gradient(left, rgba(51, 51, 51, .4), var(--darker));
background-image: linear-gradient(to right, rgba(51, 51, 51, .4), var(--darker));
}
._5wCQW {
background-color: var(--darkest);
}
.tHaIX {
background-color: var(--darker);
}
.Ba7W5 {
background: #19191900;
-webkit-box-flex: 0;
-webkit-flex: 0 1 600px;
-ms-flex: 0 1 600px;
flex: 0 1 600px;
max-width: 600px;
min-height: 200px;
}
._6xe7A {
background: var(--dark);
}
.KQA-S,
._1MzIy,
._3MPWk,
._8Rm4L,
.zMhqu {
border-radius: 3px;
border: 1px solid #0000;
}
.AcVnq,
.KQA-S,
._1MzIy,
._3MPWk,
._8Rm4L,
.zMhqu {
background-color: var(--dark);
margin-left: -1px;
margin-right: -1px;
}
.jQgLo {
color: #cecece;
}
.KV-D4 {
color: #dadada;
}
.zV_Nj,
.zV_Nj:visited {
color: #adadad;
}
.b2rUF {
border: 1px solid var(--darker);
}
.DPiy6 {
background-color: var(--dark);
}
/*
* Theme : Dark Instagram by Mew
* Version: 1.0.0
* Author : vednoc
* Gitlab: https://gitlab.com/vednoc/dark-instagram
* Discord: https://discord.gg/NpT8PzA
*/
:root {
--ig-primary-background: #333!important;
--ig-primary-text: #fff!important;
--dark: #222222;
--darker: #333333;
--darkest: #121212;
--light: #C1C1C1;
--lighter: #E9E9E9;
--accent: #7289DA;
--shadow: rgba(0, 0, 0, 0.07);
}
body {
color: var(--light) !important;
background-color: var(--dark) !important;
}
/* Remove popups. */
.K2AM_,
.N8xpH {
display: none;
}
/* Icons. */
[class*="glyphsSprite"],
nav [class*="coreSprite"],
header[class*="PRIVATE"] [class*="logo"],
[class*="coreSpriteClose"] {
filter: invert(100%) !important;
}
/* Filled icons. */
[class*="Heart__filled"],
[class*="horizontal__filled"] {
filter: invert(0%) !important;
}
/* Log/sign in. */
.gr27e {
border-color: var(--darker) !important;
}
/* Input elements. */
.gr27e input,
.gr27e .WZdjL > div {
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
/* Footer. */
footer {
background-color: var(--darker) !important;
}
/* Navbar. */
nav > div > div,
header[class*="PRIVATE"] {
/* box-shadow: 0px 0px 8px 0px var(--shadow); */
border-color: var(--darker) !important;
background-color: var(--darker) !important;
}
/* Navbar behind. */
section > nav {
background-color: var(--dark) !important;
}
/* Broken page nav fix. */
header[class*="PRIVATE"] * {
color: var(--light) !important;
}
/* Search. */
nav input,
.Di7vw {
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
/* List. */
nav .drKGC {
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
/* Items. */
nav .drKGC a {
padding: 0px 8px !important;
border-color: transparent !important;
}
nav .drKGC a:hover,
nav .drKGC .JvDyy {
background: var(--darker) !important;
}
nav .drKGC a * {
color: var(--light) !important;
}
/* Main content. */
body,
main {
background-color: var(--dark) !important;
}
/* Add a profile photo. */
main ._nx5in {
box-shadow: 0 4px 16px 0 var(--shadow);
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
/* Posts. */
main * div[style*="flex-direction: column;"] > article,
main .ltEKP .QBXjJ {
box-shadow: 0 4px 16px 0 var(--shadow);
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
/* Usernames. */
a,
a:visited {
transition: 200ms ease-out !important;
color: var(--lighter) !important;
}
/* On event. */
a:hover,
span > a.notranslate:hover {
color: var(--light) !important;
}
/* Accented ones. */
span > a.notranslate {
color: var(--accent) !important;
}
/* Likes. */
.wwxN2,
.zwZPW {
background-color: var(--dark) !important;
}
/* Header. */
._914pk {
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--darker) !important;
}
/* Comment separator. */
.sH9wk,
.UE9AK {
border-color: var(--dark) !important;
background-color: var(--darker) !important;
}
/* Add a comment. */
textarea,
.y9v3U {
color: var(--lighter) !important;
border-color: var(--darker) !important;
background-color: transparent !important;
}
/* Post in lightbox. */
._6oveC {
/* TODO: add shadow/borders */
box-shadow: 0 0 0 2px var(--shadow) !important;
color: var(--light) !important;
background-color: var(--dark) !important;
}
/* Image background. */
.JyscU ._97aPb {
background-color: var(--dark) !important;
}
/* Comment separator. */
.JyscU .UE9AK,
.JyscU .Slqrh {
border-color: var(--darker) !important;
}
/* Video views. */
._9Ytll {
color: var(--light) !important;
}
/* Popup. */
.vJRqr {
border-color: var(--dark) !important;
background-color: var(--dark) !important;
}
/* Carets. */
._690y5 {
border-color: var(--darker) !important;
background-color: var(--darker) !important;
}
.t3fjj {
border-color: var(--dark) transparent transparent !important;
}
/* Activities. */
.vtWDf {
box-shadow: 0 4px 16px 0 var(--shadow) !important;
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
/* Text color. */
time,
.YFq-A *,
.YFq-A {
color: var(--light) !important;
}
.PUHRj::after {
display: none !important;
}
/* Transparent wrapper. */
.vtWDf .Fh4P2 {
background: none !important;
}
/* Caret. */
.hUQsm {
box-shadow: 0 0 5px -1px var(--shadow) !important;
border-color: var(--darker) !important;
background-color: var(--darker) !important;
}
/* Caret color. */
.T5hFd {
border-color: transparent transparent var(--dark) !important;
}
/* Empty/private user profile. */
.jju9v,
._4Kbb_ {
box-shadow: 0 4px 16px 0 var(--shadow);
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
/* Text color. */
._4Kbb_ *,
.-vDIg span,
.mi0fW *,
.d1qwI *,
._2Mpwl * {
color: var(--light) !important;
}
/* Posts/saved. */
.fx7hk {
border-top-color: var(--darker) !important;
}
/* Active. */
@media (min-width: 736px) {
.T-jvg {
border-top-color: var(--accent) !important;
}
}
/* Tagged text color. */
.olKGW,
.ptjOt h2 {
color: var(--light) !important;
}
/* Kill fade in stories. */
.lXJWB {
animation-duration: 0s !important;
}
/* Preload everything! */
.WidCF,
._8VIOK,
.u9F97,
.eLAPa {
background-image: none !important;
background-color: var(--darkest) !important;
}
/* Post header. */
@media (min-width: 640px) {
.KQA-S {
border-color: var(--darker) !important;
background-color: var(--darker) !important;
}
}
/* Avatar. */
.OzqB_ {
background-color: var(--dark) !important;
}
/* Text placeholder. */
.WidCF,
._8VIOK,
.u9F97 {
background-color: var(--dark) !important;
}
/* User profile text color. */
.g47SY,
.zwlfE h1 {
color: var(--lighter);
}
/* Dimmer text. */
.-nal3,
.-vDIg span:nth-child(2) {
color: var(--light) !important;
}
/* Following/followers modal. */
.HYpXt,
.j6cq2 {
background-color: var(--dark) !important;
}
/* Header. */
.t48Bo {
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--darker) !important;
}
/* Unneeded background. */
.YHaCL {
background: none !important;
}
/* Items. */
.NroHT {
border-color: var(--darker) !important;
}
/* Unneeded borders. */
@media (min-width: 736px) {
._1xe_U,
.u_1x6 {
border-radius: 0 !important;
border: none !important;
}
}
/* Buttons. */
button {
color: var(--light) !important;
}
.-fzfL {
transition: 200ms ease-in-out;
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--darker) !important;
}
/* Following. */
.jIbKX,
.m4t9r.jIbKX {
color: var(--lighter) !important;
border-color: var(--accent) !important;
background: var(--accent) !important;
}
/* On event. */
.-fzfL:hover {
background-color: var(--dark) !important;
}
/* User settings modal. */
.pbNvD {
border-radius: .5rem !important;
background-color: var(--dark) !important;
}
/* Buttons. */
.pbNvD button {
transition: 200ms ease !important;
color: var(--light) !important;
border-color: var(--darker) !important;
}
/* On event. */
.pbNvD button:hover {
color: var(--lighter) !important;
background-color: var(--darker) !important;
}
/* Suggested/discover section. */
.NP414,
.t0fbY {
border-color: var(--darker) !important;
background: var(--dark) !important;
}
@media (min-width: 736px) {
.NP414 {
border-color: var(--darker) !important;
box-shadow: 0 4px 16px 0 var(--shadow) !important;
}
}
/* Items. */
.YQf7h {
border-color: var(--darker) !important;
background: var(--darker) !important;
}
/* Settings. */
.BvMHM {
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
/* Sidebar. */
.BvMHM > ul {
border-right-color: var(--darker) !important;
}
/* Active. */
.-HRM-,
.h-aRd:hover {
border-left-color: var(--accent) !important;
}
/* Items on event. */
.BvMHM > ul > li:hover a {
background-color: var(--darker) !important;
}
/* Settings colors. */
.BvMHM form input,
.BvMHM article * {
color: var(--light) !important;
border-color: var(--darker) !important;
}
/* Text color. */
.BvMHM form aside,
.BvMHM h1,
.HoverCardUserName .Username {
color: var(--lighter) !important;
}
/* Checkmarks. */
._9WdVC:checked ~ .D7R7L::before {
border-bottom-color: var(--accent);
border-left-color: var(--accent);
}
/* TODO: mobile support */
/* Mobile navbar/topbar. */
._4pxed,
._sq5zx,
._f4a0g {
box-shadow: 0 0 16px 0 var(--shadow) !important;
background-color: var(--darker) !important;
}
/* Extra stuff. */
._4pxed::before,
._sq5zx::before {
display: none !important;
}
/* Stories. */
._asnzw {
box-shadow: 0 4px 16px 0 var(--shadow) !important;
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
.COOzN hr,
.aD2cN::after {
display: none !important;
}
/* Activities. */
._2l0ao {
background-color: var(--dark) !important;
}
::-webkit-scrollbar {
background: var(--shadow) !important;
}
::-webkit-scrollbar-thumb {
background: var(--darker) !important;
}
}
@-moz-document url-prefix("https://www.instagram.com/p/") {
.Kj7h1 {
max-width: 100%;
padding: 0px 20px;
padding-bottom: 20px;
}
.jLuN9 {
height: 42px;
}
._lz6s {
height: 37px;
}
.MWDvN {
height: 37px;
padding: 0px 20px;
}
.OAXCp {
padding-bottom: var(--heightper)!important;
}
}
/* ==UserStyle==
@name Instagram Full-res+Dark+Right-click
@namespace USO Archive
@author cckats
@description `Combined mew's dark with many fixes with full res images and enabled right click you can find skin that removes login requirement in profiles here: https://userstyles.org/styles/183329/instagram-removed-login-requirementbut with a recent change you can view pictures (without account) with the middle mouse buttonin stories right click is accessible at the right edge of the video. https://userstyles.org/style_screenshots/164671_additional_35276.jpeg?r=1578231516Non-Dark version here: https://userstyles.org/styles/166344/instagram-full-res-right-clickI don't actively use Instagram so report bugs or additions as comments`
@version 20210110.19.20
@license CC0-1.0
@preprocessor uso
==/UserStyle== */
@-moz-document domain("instagram.com") {
/*Instagram skin v2 by cckats */
:root {
--heightper: 95vh
}
/*Embeds*/
.EmbeddedMediaImage {
pointer-events: all;
}
/*images*/
.PdwC2 {
max-width: 90vw!important;
}
.JyscU ._97aPb {
max-height: var(--heightper);
}
.rQDP3 {
max-height: var(--heightper);
}
.pR7Pc {
max-height: var(--heightper);
}
.eLAPa {
max-height: var(--heightper);
}
.FFVAD {
object-fit: contain!important;
max-height: var(--heightper);
}
.zZYga {
overflow: hidden;
}
body > div._2dDPU.CkGkG > div.zZYga > div > article > div._97aPb > div > div > div.eLAPa._23QFA > div.KL4Bh {
padding-bottom: var(--heightper)!important;
}
.DdSX2 {
max-width: 90vw;
}
.HaS-3 {
padding-bottom: 90vh !important;
}
.jdnLC {
max-width: none !important;
}
.zZYga::after,
.zZYga::before {
-webkit-flex-basis: 10px;
-ms-flex-preferred-size: 10px;
flex-basis: 10px;
}
/*right click*/
._9AhH0 {
display: none;
}
/*direct images*/
.ltEKP {
max-width: 95vw!important;
}
.Kj7h1 {
max-width: none;
}
.yJx9G {
padding-top: 2vh;
}
/*video*/
.tWeCl {
max-height: var(--heightper);
object-fit: contain;
}
._8jZFn {
object-fit: contain;
max-height: var(--heightper);
}
body > div._2dDPU.CkGkG > div.zZYga > div > article > div._97aPb > div {
max-height: var(--heightper);
}
.wymO0 {
max-height: var(--heightper);
}
.PyenC,
.fXIG0 {
max-height: var(--heightper);
}
/*right click*/
.PyenC,
.fXIG0 {
height: 135px;
left: 50%;
margin-left: -67px;
margin-top: -67px;
top: 50%;
width: 135px;
z-index: 1;
}
/*random fixes*/
.aGBdT {
overflow: hidden;
min-height: 15px;
}
body > div.RnEpo.Yx5HN > div > div.Igw0E.IwRSH.eGOV_._4EzTm.IM32b > div.Igw0E.IwRSH.eGOV_._4EzTm.lDRO1.XfCBB.g6RW6 {
padding-top: 116px;
}
.IM32b {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.…0px'><text x='0' y='15' fill='red' font-size='20'>To open images use midle mouse button </text><text x='0' y='40' fill='white' font-size='20'>If you want to continue scrolling with no login i have a </text><text x='0' y='60' fill='white' font-size='20'>seperate skin for that.</text><text x='0' y='85' fill='white' font-size='20'> For more information go to skin's page on stylish</text></svg>");
background-position: 30px 30px;
background-repeat: no-repeat;
}
/*stories*/
.i0EQd {
width: 95%;
}
/* Some dark theme fixes */
/*messenger*/
.S-mcP {
background-color: var(--dark);
border: none;
}
._5Jsao,
._1XyCr {
background-color: var(--dark);
}
.QOqBd {
background-color: var(--dark)!important;
}
#react-root > section > div > div.Igw0E.IwRSH.eGOV_._4EzTm > div > div > div.oNO81 > div.Igw0E.IwRSH.eGOV_._4EzTm.i0EQd {
width: 100%;
}
.frMpI.-sxBV,
#react-root > section > div > div.Igw0E.IwRSH.eGOV_._4EzTm > div > div > div.DPiy6.Igw0E.IwRSH.eGOV_.vwCYk > div.uueGX > div > div.Igw0E.IwRSH.eGOV_._4EzTm {
background-color: var(--darker);
}
#react-root > section > div > div.Igw0E.IwRSH.eGOV_._4EzTm > div > div > div.oNO81 > div.Igw0E.IwRSH.eGOV_._4EzTm.i0EQd > div > div > div > div > div :hover {
background-color: var(--dark)!important;
}
.m7ETg {
color: #fff;
}
._01UL2 {
background: var(--dark);
}
.uo5MA {
background: #000;
box-shadow: 0 0 5px 1px var(--shadow);
}
.DPiy6 {
background-color: var(--darker)!important;
}
.N9abW,
._6FEQj,
.oNO81 {
background-color: var(--darker)!important;
}
.t30g8 {
background-color: var(--dark)!important;
}
._lz6s {
background-color: var(--darker)!important;
border: none;
}
.jdnLC {
background-color: var(--dark) !important;
}
.s2MYR {
background-color: var(--dark) !important;
}
/* Some other dark theme fixes */
.JyscU .cv3IO,
.JyscU .NvNrm,
._79xir,
.vdqkn,
.CZW53,
._1gNme .cv3IO,
.csxf2 {
background-color: var(--dark);
}
body > div._2dDPU.CkGkG > div.Igw0E.IwRSH.eGOV_._4EzTm.BI4qX.qJPeX.fm1AK.TxciK.yiMZG > button > svg,
body > div._2dDPU.CkGkG > div.Igw0E.IwRSH.eGOV_._4EzTm.BI4qX.qJPeX.fm1AK.TxciK.yiMZG > button > div > svg,
body > div._2dDPU.CkGkG > div.zZYga > div > article > div._97aPb > div > div.pR7Pc > div.Igw0E.IwRSH.eGOV_._4EzTm.O1flK.D8xaz.fm1AK.TxciK.yiMZG > div > div > div > ul > li > div > div > div > span > div > svg {
filter: invert(0.2);
}
.HBUJV,
.LHkGc {
filter: invert(1);
}
.VideM {
background: var(--darker);
border: none;
box-shadow: 0 4px 16px 0 var(--shadow);
}
.eebAO {
color: #fff;
}
._8UZ6e {
background-color: var(--darker);
}
.tHaIX {
background-color: var(--darker)!important;
}
._41KYi {
background: var(--darker);
border: none;
box-shadow: 0 4px 16px 0 var(--shadow);
}
#react-root > section > main > article > div.rgFsT > div > div > div.Igw0E.IwRSH.eGOV_._4EzTm.MGdpg.CIRqI.IY_1_.aGBdT {
min-height: 30px;
}
.gr27e {
background-color: var(--darker) !important;
}
.coreSpriteLoggedOutWordmark,
.coreSpriteMobileNavDirect {
filter: invert(1);
}
.bTref {
color: #9b9b9b;
}
#react-root > section > main > div > div._2z6nI > div.Igw0E.rBNOH.eGOV_._4EzTm > div {
height: 100px;
}
.z4xUb {
z-index: 1000;
}
.ySN3v {
padding-bottom: 100px;
}
#react-root > section > main > div > div._2z6nI > div.Igw0E.rBNOH.eGOV_._4EzTm > div {
overflow: visible;
}
.w5S7h {
bottom: 150px;
}
.e-Ph9 {
background: var(--dark);
border: none;
}
.HaS-3 {
background-color: var(--dark) !important;
background-blend-mode: color-burn;
}
.y1ezF,
.y1ezF .DXJP0,
.y1ezF .DXJP0:visited {
color: var(--light);
}
.PrimaryCTA,
.HoverCard .HoverCardRoot {
background-color: var(--dark);
}
.Feedback {
filter: invert(1);
}
.SvO5t {
background-color: #d9d9d9!important;
}
.JyscU.ePUX4 .UE9AK {
border-left: none!important;
}
.JyscU.ePUX4 .eo2As {
border-left: none!important;
}
._8-yf5 {
filter: invert(1);
}
.s4Iyt {
filter: invert(1);
}
._4l6NB {
background-image: -webkit-gradient(linear, left top, right top, from(rgba(51, 51, 51, .4)), to(var(--darker)));
background-image: -webkit-linear-gradient(left, rgba(51, 51, 51, .4), var(--darker));
background-image: linear-gradient(to right, rgba(51, 51, 51, .4), var(--darker));
}
._5wCQW {
background-color: var(--darkest);
}
.tHaIX {
background-color: var(--darker);
}
.Ba7W5 {
background: #19191900;
-webkit-box-flex: 0;
-webkit-flex: 0 1 600px;
-ms-flex: 0 1 600px;
flex: 0 1 600px;
max-width: 600px;
min-height: 200px;
}
._6xe7A {
background: var(--dark);
}
.KQA-S,
._1MzIy,
._3MPWk,
._8Rm4L,
.zMhqu {
border-radius: 3px;
border: 1px solid #0000;
}
.AcVnq,
.KQA-S,
._1MzIy,
._3MPWk,
._8Rm4L,
.zMhqu {
background-color: var(--dark);
margin-left: -1px;
margin-right: -1px;
}
.jQgLo {
color: #cecece;
}
.KV-D4 {
color: #dadada;
}
.zV_Nj,
.zV_Nj:visited {
color: #adadad;
}
.b2rUF {
border: 1px solid var(--darker);
}
.DPiy6 {
background-color: var(--dark);
}
/*
* Theme : Dark Instagram by Mew
* Version: 1.0.0
* Author : vednoc
* Gitlab: https://gitlab.com/vednoc/dark-instagram
* Discord: https://discord.gg/NpT8PzA
*/
:root {
--dark: #222222;
--darker: #333333;
--darkest: #121212;
--light: #C1C1C1;
--lighter: #E9E9E9;
--accent: #7289DA;
--shadow: rgba(0, 0, 0, 0.07);
}
body {
color: var(--light) !important;
background-color: var(--dark) !important;
}
/* Remove popups. */
.K2AM_,
.N8xpH {
display: none;
}
/* Icons. */
[class*="glyphsSprite"],
nav [class*="coreSprite"],
header[class*="PRIVATE"] [class*="logo"],
[class*="coreSpriteClose"] {
filter: invert(100%) !important;
}
/* Filled icons. */
[class*="Heart__filled"],
[class*="horizontal__filled"] {
filter: invert(0%) !important;
}
/* Log/sign in. */
.gr27e {
border-color: var(--darker) !important;
}
/* Input elements. */
.gr27e input,
.gr27e .WZdjL > div {
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
/* Footer. */
footer {
background-color: var(--darker) !important;
}
/* Navbar. */
nav > div > div,
header[class*="PRIVATE"] {
/* box-shadow: 0px 0px 8px 0px var(--shadow); */
border-color: var(--darker) !important;
background-color: var(--darker) !important;
}
/* Navbar behind. */
section > nav {
background-color: var(--dark) !important;
}
/* Broken page nav fix. */
header[class*="PRIVATE"] * {
color: var(--light) !important;
}
/* Search. */
nav input,
.Di7vw {
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
/* List. */
nav .drKGC {
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
/* Items. */
nav .drKGC a {
padding: 0px 8px !important;
border-color: transparent !important;
}
nav .drKGC a:hover,
nav .drKGC .JvDyy {
background: var(--darker) !important;
}
nav .drKGC a * {
color: var(--light) !important;
}
/* Main content. */
body,
main {
background-color: var(--dark) !important;
}
/* Add a profile photo. */
main ._nx5in {
box-shadow: 0 4px 16px 0 var(--shadow);
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
/* Posts. */
main * div[style*="flex-direction: column;"] > article,
main .ltEKP .QBXjJ {
box-shadow: 0 4px 16px 0 var(--shadow);
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
/* Usernames. */
a,
a:visited {
transition: 200ms ease-out !important;
color: var(--lighter) !important;
}
/* On event. */
a:hover,
span > a.notranslate:hover {
color: var(--light) !important;
}
/* Accented ones. */
span > a.notranslate {
color: var(--accent) !important;
}
/* Likes. */
.wwxN2,
.zwZPW {
background-color: var(--dark) !important;
}
/* Header. */
._914pk {
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--darker) !important;
}
/* Comment separator. */
.sH9wk,
.UE9AK {
border-color: var(--dark) !important;
background-color: var(--darker) !important;
}
/* Add a comment. */
textarea,
.y9v3U {
color: var(--lighter) !important;
border-color: var(--darker) !important;
background-color: transparent !important;
}
/* Post in lightbox. */
._6oveC {
/* TODO: add shadow/borders */
box-shadow: 0 0 0 2px var(--shadow) !important;
color: var(--light) !important;
background-color: var(--dark) !important;
}
/* Image background. */
.JyscU ._97aPb {
background-color: var(--dark) !important;
}
/* Comment separator. */
.JyscU .UE9AK,
.JyscU .Slqrh {
border-color: var(--darker) !important;
}
/* Video views. */
._9Ytll {
color: var(--light) !important;
}
/* Popup. */
.vJRqr {
border-color: var(--dark) !important;
background-color: var(--dark) !important;
}
/* Carets. */
._690y5 {
border-color: var(--darker) !important;
background-color: var(--darker) !important;
}
.t3fjj {
border-color: var(--dark) transparent transparent !important;
}
/* Activities. */
.vtWDf {
box-shadow: 0 4px 16px 0 var(--shadow) !important;
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
/* Text color. */
time,
.YFq-A *,
.YFq-A {
color: var(--light) !important;
}
.PUHRj::after {
display: none !important;
}
/* Transparent wrapper. */
.vtWDf .Fh4P2 {
background: none !important;
}
/* Caret. */
.hUQsm {
box-shadow: 0 0 5px -1px var(--shadow) !important;
border-color: var(--darker) !important;
background-color: var(--darker) !important;
}
/* Caret color. */
.T5hFd {
border-color: transparent transparent var(--dark) !important;
}
/* Empty/private user profile. */
.jju9v,
._4Kbb_ {
box-shadow: 0 4px 16px 0 var(--shadow);
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
/* Text color. */
._4Kbb_ *,
.-vDIg span,
.mi0fW *,
.d1qwI *,
._2Mpwl * {
color: var(--light) !important;
}
/* Posts/saved. */
.fx7hk {
border-top-color: var(--darker) !important;
}
/* Active. */
@media (min-width: 736px) {
.T-jvg {
border-top-color: var(--accent) !important;
}
}
/* Tagged text color. */
.olKGW,
.ptjOt h2 {
color: var(--light) !important;
}
/* Kill fade in stories. */
.lXJWB {
animation-duration: 0s !important;
}
/* Preload everything! */
.WidCF,
._8VIOK,
.u9F97,
.eLAPa {
background-image: none !important;
background-color: var(--darkest) !important;
}
/* Post header. */
@media (min-width: 640px) {
.KQA-S {
border-color: var(--darker) !important;
background-color: var(--darker) !important;
}
}
/* Avatar. */
.OzqB_ {
background-color: var(--dark) !important;
}
/* Text placeholder. */
.WidCF,
._8VIOK,
.u9F97 {
background-color: var(--dark) !important;
}
/* User profile text color. */
.g47SY,
.zwlfE h1 {
color: var(--lighter);
}
/* Dimmer text. */
.-nal3,
.-vDIg span:nth-child(2) {
color: var(--light) !important;
}
/* Following/followers modal. */
.HYpXt,
.j6cq2 {
background-color: var(--dark) !important;
}
/* Header. */
.t48Bo {
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--darker) !important;
}
/* Unneeded background. */
.YHaCL {
background: none !important;
}
/* Items. */
.NroHT {
border-color: var(--darker) !important;
}
/* Unneeded borders. */
@media (min-width: 736px) {
._1xe_U,
.u_1x6 {
border-radius: 0 !important;
border: none !important;
}
}
/* Buttons. */
button {
color: var(--light) !important;
}
.-fzfL {
transition: 200ms ease-in-out;
color: var(--light) !important;
border-color: var(--darker) !important;
background-color: var(--darker) !important;
}
/* Following. */
.jIbKX,
.m4t9r.jIbKX {
color: var(--lighter) !important;
border-color: var(--accent) !important;
background: var(--accent) !important;
}
/* On event. */
.-fzfL:hover {
background-color: var(--dark) !important;
}
/* User settings modal. */
.pbNvD {
border-radius: .5rem !important;
background-color: var(--dark) !important;
}
/* Buttons. */
.pbNvD button {
transition: 200ms ease !important;
color: var(--light) !important;
border-color: var(--darker) !important;
}
/* On event. */
.pbNvD button:hover {
color: var(--lighter) !important;
background-color: var(--darker) !important;
}
/* Suggested/discover section. */
.NP414,
.t0fbY {
border-color: var(--darker) !important;
background: var(--dark) !important;
}
@media (min-width: 736px) {
.NP414 {
border-color: var(--darker) !important;
box-shadow: 0 4px 16px 0 var(--shadow) !important;
}
}
/* Items. */
.YQf7h {
border-color: var(--darker) !important;
background: var(--darker) !important;
}
/* Settings. */
.BvMHM {
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
/* Sidebar. */
.BvMHM > ul {
border-right-color: var(--darker) !important;
}
/* Active. */
.-HRM-,
.h-aRd:hover {
border-left-color: var(--accent) !important;
}
/* Items on event. */
.BvMHM > ul > li:hover a {
background-color: var(--darker) !important;
}
/* Settings colors. */
.BvMHM form input,
.BvMHM article * {
color: var(--light) !important;
border-color: var(--darker) !important;
}
/* Text color. */
.BvMHM form aside,
.BvMHM h1,
.HoverCardUserName .Username {
color: var(--lighter) !important;
}
/* Checkmarks. */
._9WdVC:checked ~ .D7R7L::before {
border-bottom-color: var(--accent);
border-left-color: var(--accent);
}
/* TODO: mobile support */
/* Mobile navbar/topbar. */
._4pxed,
._sq5zx,
._f4a0g {
box-shadow: 0 0 16px 0 var(--shadow) !important;
background-color: var(--darker) !important;
}
/* Extra stuff. */
._4pxed::before,
._sq5zx::before {
display: none !important;
}
/* Stories. */
._asnzw {
box-shadow: 0 4px 16px 0 var(--shadow) !important;
border-color: var(--darker) !important;
background-color: var(--dark) !important;
}
.COOzN hr,
.aD2cN::after {
display: none !important;
}
/* Activities. */
._2l0ao {
background-color: var(--dark) !important;
}
::-webkit-scrollbar {
background: var(--shadow) !important;
}
::-webkit-scrollbar-thumb {
background: var(--darker) !important;
}
}
@-moz-document url-prefix("https://www.instagram.com/p/") {
.Kj7h1 {
max-width: 100%;
padding: 0px 20px;
padding-bottom: 20px;
}
.jLuN9 {
height: 42px;
}
._lz6s {
height: 37px;
}
.MWDvN {
height: 37px;
padding: 0px 20px;
}
.OAXCp {
padding-bottom: var(--heightper)!important;
}
}
