Makes Instagram use its space better by filling the screen on home and profile pages using a grid layout.
目前为
/* ==UserStyle==
@name Instagram widescreen
@namespace legosavant
@version 1.3.1
@description Makes Instagram use its space better by filling the screen on home and profile pages using a grid layout.
@preprocessor stylus
@var checkbox two-row-home 'two row home' 1
==/UserStyle== */
@-moz-document domain("instagram.com") {
/*profile*/
.Nnq7C {
display:inline-flex
}
.ySN3v > div > div, ._2z6nI > article > div > div {
display:block
}
._bz0w { /*huge spacing is stupid*/
margin-right:14px
}
.weEfm {
margin-bottom:14px
}
.Nnq7C:nth-child(odd) {
margin-right:14px
}
@media (min-width:0px) {
.Nnq7C>* { /*width of images*/
width:101px!important;
flex:none
}
}
@media (min-width:850px) {
.v9tJq {
max-width:790px /*width of main profile page*/
}
.Nnq7C>* { /*width of images*/
width:120px!important;
flex:none
}
}
@media (min-width:1150px) {
.v9tJq {
max-width:1090px /*width of main profile page*/
}
.Nnq7C>* { /*width of images*/
width:170px!important;
flex:none
}
.Kj7h1 .Nnq7C>* {
width:120px!important
}
}
@media (min-width:1386px) {
.v9tJq {
max-width:1330px /*width of main profile page*/
}
.Nnq7C>* { /*width of images*/
width:210px!important;
flex:none
}
.Kj7h1 { /*post*/
max-width:1090px
}
.Kj7h1 .Nnq7C>* {
width:170px!important
}
}
@media (min-width:1750px) {
.v9tJq {
max-width:1690px /*width of main profile page*/
}
.Nnq7C>* { /*width of images*/
width:266px!important;
flex:none
}
.Kj7h1 { /*post*/
max-width:1200px
}
.Kj7h1 .Nnq7C>* {
width:188px!important
}
}
@media (min-width:1919px) {
.v9tJq {
max-width:1916px /*width of main profile page*/
}
.Nnq7C>* { /*width of images*/
width:296px!important;
flex:none
}
.Kj7h1 { /*post*/
max-width:1366px
}
.Kj7h1 .Nnq7C>* {
width:216px!important
}
}
@media (min-width:2100px) {
.v9tJq {
max-width:2000px /*width of main profile page*/
}
.Nnq7C>* { /*width of images*/
width:320px!important;
flex:none
}
.Kj7h1 { /*post*/
max-width:1420px
}
}
@media (min-width:2600px) {
.v9tJq {
max-width:2280px /*width of main profile page*/
}
.Nnq7C>* { /*width of images*/
width:360px!important;
flex:none
}
.Kj7h1 { /*post*/
max-width:2000px
}
}
/*igtv and similar*/
.b9_1r {
margin-right:5px
}
.ryi-h {
margin-bottom:5px;
}
._2z6nI > div > div > div[style*="flex-direction: column"] {
display:block
}
.Nnq7C.ryi-h, .Gx7Kn .weEfm ._bz0w {
margin-right:5px
}
.Gx7Kn .weEfm {
margin-right:5px;
margin-bottom:5px
}
.Gx7Kn .weEfm:nth-child(even), .Nnq7C.ryi-h:nth-child(even), ._bz0w:last-child {
margin-right:0!important
}
@media (min-width:850px) {
.Nnq7C .b9_1r, .Gx7Kn .weEfm ._bz0w {
width:94px!important;
}
}
@media (min-width:1150px) {
.Nnq7C .b9_1r, .Gx7Kn .weEfm ._bz0w {
width:131px!important;
}
.-V_eO {
margin-right:5px
}
}
@media (min-width:1386px) {
.Nnq7C .b9_1r, .Gx7Kn .weEfm ._bz0w {
width:161px!important;
}
}
@media (min-width:1750px) {
.Nnq7C .b9_1r, .Gx7Kn .weEfm ._bz0w {
width:206px!important;
}
}
@media (min-width:1919px) {
.Nnq7C .b9_1r, .Gx7Kn .weEfm ._bz0w {
width:226px!important;
}
}
@media (max-width:1150px) {
.-V_eO:nth-child(1) {
margin:50px 0 0;
}
.vrLJa .-V_eO {
margin-left:15%!important
}
.v1Nh3.kIKUG._bz0w .-V_eO {
margin-left:22%
}
.Ln-UN {
display:block;
}
}
/*post*/
.Z666a {
padding-top:0
}
.Z666a div[style^="f"] {
display:block
}
.Z666a .Nnq7C>* {
max-width:268px!important
}
}
@-moz-document url("https://www.instagram.com/"), url-prefix("https://www.instagram.com/home") {
if two-row-home{
/*home*/
.M9sTE:nth-child(odd) {
margin-right:5px
}
.C3uDN {
padding-top:0
}
.YT6rB {
top:48px
}
.COOzN.MnWb5.YT6rB {
right:20px;
left:initial!important
}
@media (max-width:1100px) {
.COOzN {
display:none;
}
._1SP8R {
max-width:800px
}
.C3uDN > div > div > div {
display:block
}
}
@media (min-width:0px) {
.M9sTE { /*image, if you make it small enough itll be 3 per row*/
display: inline-flex;
width:360px
}
.VideM { /*the stories bar*/
width:722px
}
.cGcGK > div > div {
display:block
}
.cGcGK {
max-width:1400px!important;
width:1000px!important
}
.j9XKR {
max-width:1000px!important;
width:100%!important;
}
}
@media (min-width:1320px) {
.M9sTE {
display: inline-flex;
width:460px
}
.VideM {
width:922px
}
.cGcGK > div > div {
display:block
}
.cGcGK {
max-width:1400px!important;
width:1200px!important
}
.j9XKR {
max-width:1200px!important;
width:100%!important;
}
}
@media (min-width:1540px) {
.M9sTE {
display: inline-flex;
width:560px
}
.M9sTE:nth-child(odd) {
margin-right:5px
}
.VideM {
width:1122px
}
.cGcGK > div > div {
display:block
}
.cGcGK {
max-width:1400px!important;
width:1400px!important
}
.j9XKR {
max-width:1400px!important;
width:100%!important;
}
}
}
}