What happened to the top of the stream layout?

[Sumez | 2,951]

This has been a thing for a few days now, thought it was just some setting on my computer, but it seems to be the stylesheet of the site that somehow just broke this part?

I only use one I set up myself, but it happens on any given stream, such as this:
https://www.videogamesage.com/discover/1/

The options still work, but they are just listed vertically with none of the visual style they used to have 

[Sumez | 2,951]

... nothing?

I took it to myself to compare with another randomly picked Invision community, and as far as I can tell, VGS is simply just lacking every CSS style related to the "cStreamFilter" class...

[Sumez | 2,951]

Since the current administration seems to have no interest in fixing this bug, I copied the missing CSS properties from a working Inivision community. If you have StyleBot or a similar browser plugin, you can add these to VGS and get the layout working again:

.cStreamFilter {
    padding: var(--sp-4) var(--sp-3);
    position: relative;
}

.cStreamFilter > li {
    float: left;
    width: 12.5%;
    position: relative;
}

.cStreamFilter > li > a {
    display: block;
    border-right: 1px solid rgba( var(--theme-text_color), 0.2 );
    padding: 0 var(--sp-2);
}

.cStreamFilter > li > a.cStreamFilter_active {
    background: rgb( var(--theme-area_background_dark) );
    color: #fff;
    margin: calc( var(--sp-2) * -1 ) 0;
    padding: calc( var(--sp-2) );
    border-radius: var(--radius-1);
}

.cStreamFilter > li > a.cStreamFilter_active h3 {
    color: inherit;
}

.cStreamFilter > li:last-child > a {
    border: 0;
}

.cStreamFilter > li > a:after {
    content: '\f107';
    font-family: 'FontAwesome';
    font-size: 15px;
    position: absolute;
    top: 2px;
}

html[dir="ltr"] .cStreamFilter > li > a:after {
    right: 10px;
}

html[dir="rtl"] .cStreamFilter > li > a:after {
    left: 10px;
}

.cStreamFilter h3 {
    font-size: 14.0px;
    color: rgb( var(--theme-text_color) );
}

html[dir="ltr"] .cStreamFilter h3 {
    padding-right: 12px;
}

html[dir="rtl"] .cStreamFilter h3 {
    padding-left: 12px;
}

.cStreamFilter p em {
    opacity: 0.3;
}

.cStreamFilter a {
    color: rgb( var(--theme-text_color) );
}

.cStreamFilter_toggleShown {
    margin-top: 7px;
}

.ipsApp #elStreamUpdateMsg {
    line-height: 24px;
}

.cStreamForm_loading {
    height: 500px;
}

.cStreamForm_loading .ipsAreaBackground_reset {
    height: 100%;
}

.cStreamForm_loading .ipsLoading {
    position: absolute;
    height: 450px;
    width: 100%;
}

.cStreamForm_list > li {
    margin-bottom: 0;
    position: relative;
}

.cStreamForm_list li a.ipsSideMenu_item {
    padding-top: 5px;
    padding-bottom: 5px;
}

html[dir="ltr"] .cStreamForm_list li a.ipsSideMenu_item.cStream_withOptions {
    margin-right: 45px;
}

html[dir="rtl"] .cStreamForm_list li a.ipsSideMenu_item.cStream_withOptions {
    margin-left: 45px;
}

.cStreamForm_list li a.ipsSideMenu_item.ipsSideMenu_itemActive + .cStreamForm_menu, .cStreamForm_list li a.ipsSideMenu_item:not( .ipsSideMenu_itemActive ):hover + .cStreamForm_menu {
    display: block;
    background: rgba( var(--theme-text_color), 0.2 );
}

.cStreamForm_list li a.ipsSideMenu_item.ipsSideMenu_itemActive + .cStreamForm_menu {
    color: #fff;
    background: rgba(255,255,255,0.1);
}

.cStreamForm_list li a.ipsSideMenu_item.ipsSideMenu_itemActive + .cStreamForm_menu.cStreamForm_menuActive {
    background: rgb( var(--theme-area_background) );
}

.cStreamForm_list li:hover a.ipsSideMenu_item:not( .ipsSideMenu_itemActive ) + .cStreamForm_menu {
    opacity: 0.3;
    pointer-events: none;
}

.cStreamForm_menu {
    padding: 5px 10px;
    cursor: pointer;
    position: absolute;
    top: 0;
    display: none;
}

html[dir="ltr"] .cStreamForm_menu {
    right: 0;
}

html[dir="rtl"] .cStreamForm_menu {
    left: 0;
}

#elStreamContentTypes_menu {
    padding-bottom: 0;
}

.cStreamForm_dates, .cStreamForm_authors {
    padding-left: 26px;
}

.ipsApp .cStreamForm_dates input[type="date"] {
    max-width: 100%;
    width: 100%;
}

.cStreamForm_list[data-filterType='type'] .ipsSideMenu_item .cStreamForm_menu + a {
    margin-right: 45px;
}

.cStreamForm_nodes {
    display: block;
}

html[dir="ltr"] .cStreamForm_nodes {
    padding: 5px 0 5px 12px;
    margin: -2px 45px 0 12px;
    border-left: 2px solid rgb( var(--theme-area_background_dark) );
}

html[dir="rtl"] .cStreamForm_nodes {
    padding: 5px 12px 5px 0;
    margin: -2px 12px 0 45px;
    border-right: 2px solid rgb( var(--theme-area_background_dark) );
}

.cStreamForm_nodes .ipsFieldRow {
    width: 100%;
}

.ipsApp .cStreamForm_nodes .ipsFieldRow_label {
    margin: 0;
    padding: 0;
    font-size: 13.0px;
}

 

[Gloves | 11,777]

Coulda pinged me, I just haven't seen the thread. 

[Sumez | 2,951]

My apologies I thought that was what this subforum was for.

It's not like it's anything serious, it just looks pretty bad

[Gloves | 11,777]

Just now, Sumez said:

My apologies I thought that was what this subforum was for.

It's not like it's anything serious, it just looks pretty bad

No it is, you're right. I could stand to like, manually look in here more often. I usually just use the activity stream since I'm on the site basically every waking hour and see most stuff that pops up. I saw this today cuz I have a meeting much earlier than I'm normally awake. 

I'll try to make a habit again of more proactively watching this section so I don't miss stuff. 

[Sumez | 2,951]

10 minutes ago, Gloves said:

I usually just use the activity stream

You'd have seen the error then

[Bearcat-Doug | 5,105]

15 minutes ago, Gloves said:

No it is, you're right. I could stand to like, manually look in here more often. I usually just use the activity stream since I'm on the site basically every waking hour and see most stuff that pops up. I saw this today cuz I have a meeting much earlier than I'm normally awake. 

I'll try to make a habit again of more proactively watching this section so I don't miss stuff. 

I'd like to suggest that you stop missing stuff. 

[Gloves | 11,777]

18 minutes ago, Sumez said:

You'd have seen the error then

I've never seen this issue on desktop or mobile. Seems to only be an issue on the default theme, but I've been using dark mode the last while. 

[Sumez | 2,951]

Hm you're right, doesn't seem to happen in dark mode

Unfortunately the rest of the site looks really bad in dark mode  

[Gloves | 11,777]

9 minutes ago, Sumez said:

Hm you're right, doesn't seem to happen in dark mode

Unfortunately the rest of the site looks really bad in dark mode  

Ever the paragon of positivity lol. 

Yeah I have a new dark mode I'm testing, hence being on that mode. 

At any rate, I'll steal the code you provided and just plop it onto the custom css of the default theme. 

[Sumez | 2,951]

  

6 minutes ago, Gloves said:

Ever the paragon of positivity lol. 

Hey, I think the site looks super good in the default theme

Edited August 31, 2023 by Sumez

[Gloves | 11,777]

1 minute ago, Sumez said:

  

Hey, I think the site looks super good in the default theme

Same! They keep making me test dark mode though! Kids these days. 

[Jeevan | 8,911]

[Link | 2,710]

This appears to be corrected now; from my end the issue is no longer present. 

[Link | 2,710]

Or not.

And I've cleared my cache. @Gloves

Edited September 15, 2023 by Link
tagging the webmaster

[Gloves | 11,777]

1 hour ago, Link said:

Or not.

And I've cleared my cache. @Gloves

This may surprise you, but I forgot to do it. 

[a3quit4s | 4,097]

15 minutes ago, Gloves said:

This may surprise you, but I forgot to do it. 

Just like adding them charms back!