Custom CSS doesn't work since 2.7.0
Closed this issue · 10 comments
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 ❤️
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.
Reopening for now, will take a look tomorrow.
@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.
@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)
"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.
I also don't reproduce this.
"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%;
}
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! :)