Custom CSS doesn't work since 2.7.0

[sereinity]

I used to customize body's background and the custom CSS isn't loaded in the iframe.

Also, it could be great if the new release is visible in https://github.com/brief-rss/brief/releases with the changelog :heart:

[JesperSjoquist]

Specifically there seems to be a loading race condition. If you make changes to the CSS after Brief is loaded in a tab, then the changes are applied, but if you then reload the Brief tab they're not loaded properly. Repeatable.

[tanriol]

Thank you for diagnosis, fixed in b6631d256725a1df864ba024583cbccfb6056c2f and released as 2.7.1.

[JesperSjoquist]

@tanriol It seems that b6631d2 only partially fixed the issue.

It works if a feed is in a folder, and you look at the feeds in that folder. But once you select one individual feed, it loses the custom CSS again. Go back to the group and it comes back.

[tanriol]

Reopening for now, will take a look tomorrow.

[tanriol]

@JesperSjoquist I cannot reproduce that. Test CSS of body { background-color: blue; } applies to all kinds of views for me. If you have a better way to reproduce this, I'll check it. Closing the issue for now.

[JesperSjoquist]

@tanriol Can't figure out another way to reproduce it, but to rule out any chance of miscommunication, here's some screenshots to illustrate the issue:

Folder view: (works as before)

Individual feed view: (no longer works, only partially applies CSS rules)

[tanriol]

"partially applies CSS rules" - so part of the rules is active, just not every rule? Hm, that sounds strange as there were essentially no changes in the UI and/or CSS between 2.6.1 and 2.7. Is this some public "dark mode" CSS? I could take a look at it specifically.

[sereinity]

I also don't reproduce this.

[JesperSjoquist]

"partially applies CSS rules" - so part of the rules is active, just not every rule? Hm, that sounds strange as there were essentially no changes in the UI and/or CSS between 2.6.1 and 2.7. Is this some public "dark mode" CSS? I could take a look at it specifically.

Nothing official, just something I threw together a couple of years back. I think it was based on some Brief CSS template that existed once?

/** SIDEBAR **/
#sidebar {
    background-color: #4e555ccc !important;
    background-image: url(http://localhost/ios_linen_2.jpg) !important;
    background-blend-mode: difference;
}

#sidebar-top {
    border-bottom-color: #68757c !important;
}

.sidebar-button, tree-item > .title, tree-folder-header > .title, tree-folder-footer > .title {
    color: #fff !important;
}

tree-item:hover:not(.selected), tree-folder:not(.selected) > tree-folder-header:hover {
    border-color: #222 !important;
    background-color: #333 !important;
}

tree-item.selected, tree-folder.selected > tree-folder-header {
    border-color: #376f95 !important;
    background-color: #376f95 !important;
}

/** Edit mode **/
label.title[contenteditable="true"] {

    font-style: italic;
    background: #222 !important;
    cursor: text;

}

#feed-list.organize, #organize-button.organize {
    background-color: #856a56 !important;
}
/** /Edit mode **/

/** /SIDEBAR **/

#sidebar-splitter, #tag-list-splitter {
    border-left: 3px solid #68757c !important;
    border-right: 1px solid #394044 !important;
}

/** READING PANE **/

#feed-view-header.border {
    border-bottom-color: #68757c !important;
}

.multiple-feeds, #main-pane {
    background-color: #454651e6 !important;
    color: #fff !important;
    background-image: url(http://localhost/ios_linen_2.jpg) !important;
    background-blend-mode: difference;
}

#view-title-label {
    background-color: none !important;
    color: #fff !important;
}

#feed-view-header, .content {
    background-color: #111 !important;
    color: #fff !important;
}

.content a {
    color: #52baff;
}

#searchbar {
    color: #eee;
}

.feed-name {
    color: #aaa !important;
}

.title-link {
    font-size: 18px;
    font-family: HelveticaNeue-condensed,sans-serif;
    font-wight:500;
    color: #e9e9e9 !important;
}

.full-container-inner {
    background: linear-gradient(to bottom, rgb(57, 73, 84), rgba(0, 0, 0, 0) 35px);
    border: 1px solid #68757c;
}

.subheader {
    color: #aaa !important;
}

div.full-container-inner div.content p[style="background-color: yellow"] {
    background-color: #376f95 !important;
}

/** /READING PANE **/

.feed-name {
    color: #000000;
    font-size: 14px;
    font-weight: bold;
}

#view-list {
    display: none;
}

.full-container {
    width: 80%;
    flex-basis: 80%;
}

[JesperSjoquist]

I guess posting in a github comment is its own form of rubber ducking ;)

I noticed now I was only targeting .multiple-feeds, #main-pane { with my dark background in the reader pane, apparently that is no longer enough.

I updated it to html, .multiple-feeds, #feed-content, #main-pane { and now everything is back to the way I want it again!

Thanks for taking the time to support us! :)