forum.syncthing.net - "feed" styling

[imsodin]

• Link to the site: https://forum.syncthing.net

The site is not in the known list (https://github.com/StylishThemes/Discourse-Dark/wiki), but the addon gets activated automatically and works perfectly for the most parts (thanks). Except for the "notification feed":

Thanks for a great style!

[the-j0k3r]

https://github.com/StylishThemes/Discourse-Dark/wiki is old and likely unmaintained list, so take that list with a pinch (bucket) of salt. User contributions are welcome to mantain that list and wiki in general though. :wink: :+1:

Since syncthing IS ALREADY part of the style, I assume you meant to report a bug and not make a feature request, so editing as such.

Expect a fix soon though =) Ill need to create an account which Im not a fan of as I dont use this style

[the-j0k3r]

Heres the problem, because I dont use the style I dont really have notifications to read or duplicate, so this will take a bit longer while I try to find the selectors.

You could help by providing the inspected selectors on browser.

[imsodin]

I have expanded the html until the first bright menu entry, I hope that contains the info you need. Otherwise please tell me what else you would like to see. Unfortunately firefox inspector doesn't seem to allow copying the html, so as a screenshot:

[the-j0k3r]

Unfortunately firefox inspector doesn't seem to allow copying the html

It does!

1. Right click on desired area,
2. on menu select copy
3. copy inner or outer html

However it would be helpful to see the styling being applied.

e.g. something like

[imsodin]

A search for "flash" returns nothing. Filtering styling for color returns on the notifications header, which is correctly dark:

And from the main part that is bright:

(These screenshots make me realize I probably need a userstyle for devtools :) ).

[the-j0k3r]

.flash was an example I used to show you how to get there, hence its started with e.g. and its GitHub only. ;)

You should not filter it by color, as is its showing only styles that are already inline meaning part of style, I want to see the classes properties.

can you see if adding

    .user-menu .quick-access-panel .read {
        background: #111;
    }
    div.menu-links-header.menu-links-row {
        border-color: #444;
    }

does the trick, if not, theres not much in the screenshots that show what is unstyled because maybe the filter you used.

edit: also hover colors if they are an issue and other parts need to be inspected to try get a proper fix which I doubt those two will address.

For your reference the best is to copy the afflicted rules and change the colors.

like (again just an example)

so copy and paste them all you can find in a reply and Ill try again =)

[imsodin]

Firstly: Will this effort only be worth something on forum.syncthing.net or potentially benefit others too? If it's syncthing only, I don't want to use so much of your time, as this will only have very limited users (maybe just me). Please tell me and skip all the rest if that's the case.

That snippet affects all entries except the unreads one (which don't have the .read class) and makes the usernames unreadable: The unread ones don't have a class at all, I can make them affected with the selector .user-menu .quick-access-panel li (without the li it doesn't apply).

Username is a span without class:

<a href="/t/database-migration-1-6-0-rc2/15006/5" title="mentioned" data-auto-route="true"><svg class="fa d-icon d-icon-at svg-icon svg-node" aria-hidden="true"><use xlink:href="#at"></use></svg><div><span>rustycanb</span> <span data-topic-id="15006">Database migration 1.6.0~rc2</span></div></a>

and has these rules

.user-menu .quick-access-panel li span:first-child {
    color: #222;
}

.user-menu .quick-access-panel li a > div {
    overflow-wrap: anywhere;
}

plus stuff inherited from a and body, guess that's not relevant?

[the-j0k3r]

Firstly: Will this effort only be worth something on forum.syncthing.net or potentially benefit others too?

I think other will too, no way of testing without joining other sites

and has these rules

.user-menu .quick-access-panel li span:first-child {
color: #222;
}

.user-menu .quick-access-panel li a > div {
overflow-wrap: anywhere;
}

OK we are looking for the blue background property which is not there, also were only interested in rules that have background, color, border/style/color, things like overflow props ideally we dont want to apply properties that dont exist in default.

plus stuff inherited from a and body, guess that's not relevant?

Not important.

I'll try to find the stylesheet that has these entries and work from there based on the class names you gave, it will be easier to ID which belong here.

Thanks.

[the-j0k3r]

OK can you test these

    .user-menu .quick-access-panel .read {
        background: #111;
    }
    div.menu-links-header .menu-links-row {
        border-color: #444;
    }
    div.menu-links-header .menu-links-row li a.active, div.menu-links-header .menu-links-row li a.active:after {
        border-color: #555;
    }
    .user-menu .quick-access-panel .show-all a:hover {
        color: #ddd;
        background: #282828
    }
    div.menu-links-header a:hover, div.menu-links-header a:focus {
        background-color: #182030;
    }
    .user-menu .quick-access-panel .show-all a {
        color: #ccc;
        background: #222;
    }
    div.menu-links-header .fa, div.menu-links-header a {
        color: #ccc;
    }

[imsodin]

No apparent changes with those. (they seem to be targeting the header though, which is already fine, the body has "wrong" colors - intended?)

That's the div parent of the username/text:

.user-menu .quick-access-panel li a > div {
    overflow: hidden;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

Not sure what else I could show you.

[the-j0k3r]

No apparent changes with those. (they seem to be targeting the header though, which is already fine, the body has "wrong" colors - intended?)

thats odd that based on the rules you showed active in the parts you inspected.

What you showed has no color properties, so I dont want to add properties that dont exist in that rule.

Ill have a look though. If I cant fix it, someone else will have to.

[imsodin]

I must have been blind before (or a day of letting some CSS sink in changed my perception significantly). I know found the following selectors which already had some relevant properties (color, overflow, ...) and provisionally changed them to some somewhat suitable values (I was a bit surprised at the lack of variable use to define the used colours - is this some browser backwards compatibility thing?):

    .user-menu .quick-access-panel .read {
        background: #111;
    }
    .user-menu .quick-access-panel li {
        background: #333;
    }
    .user-menu .quick-access-panel li span:first-child {
        color: #ccc;
    }
    .user-menu .quick-access-panel:hover li span:first-child {
        color: #919191;
    }
    .user-menu .quick-access-panel li a > div {
        color: #0890d0;
    }

[the-j0k3r]

Im having trouble following you.

You must ignore properties like overflow width etc, we're only interested in existing rules that have colors properties.

Ive looked at default stylesheet and its like this for the rules you pasted..

    .user-menu .quick-access-panel li span:first-child {
        color: #ccc;
    }
    .user-menu .quick-access-panel:hover li span:first-child {
        color: #919191;
    }

above rules dont seem to exist in default stylesheet for .user-menu .quick-access-panel li a > div

    .user-menu .quick-access-panel li a > div {
        color: #0890d0;
    }

this selector above has no such color properties.

this is that selector in default stylesheet.

.user-menu .quick-access-panel li a>div{
    overflow:hidden;
    overflow-wrap:anywhere;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical
}
@supports not (overflow-wrap: anywhere){
    .user-menu .quick-access-panel li a>div{
        word-break:break-word
    }
}

We shouldn't be adding color proprieties to those

On all these counts there has to be the correct rules/selectors to address the issue.

Also, in the https://forum.syncthing.net you should have a setting in preferences to enable dark style, perhaps that would suit you better?

[imsodin]

Not sure what the default stylesheet is. In dev console previous color values for all selector were from menu-panel.scss. All have color attributes except the > div, as you noted. I used that because I didn't find any pre-existing selector for that element, but wanted to change it, given it needs to differ from the user name. In stock theme it's blue like a link. Looking again there's a monster rule in the disourse-task css that overrides the link (a) styling:

.title, .alert, #banner, #site-text-logo, .alert.alert-info, .alert.alert-success, .alert.alert-error, .nav-pills > li > a, #topic-title h1 a, .is-highlighted div, .modal .modal-body p, .atom-io-navigation a, .composer-popup a.close, .modal .modal-body label, .topic-list .sortable:hover, .extra-info-wrapper .topic-link, nav.post-controls button.create, .user-menu .notifications li span, .like-button:hover .like-count.d-hover, .badge-wrapper.bullet span.badge-category, .badge-wrapper.bar span.badge-category, .list-controls .category-dropdown-menu .home, .pihole-nav-link-container a, .category-list tbody .category h3 a[href], div.poll li[data-poll-option-id], .badge-category-bg[style*="background-color: #00683"] + span[style*="color: #000000"], .menu-panel a, a.widget-link.show-help, #sp-logo-dropdown a, a.hashtag, a.hashtag:visited, a.hashtag:hover, .category-box-heading a[href], .topic-list th, td, .select-kit .select-kit-row.is-highlighted .top-date-string, .topics .value, .topics .unit {
    color: #ccc !important;
}

So the proper fix would probably be to make this rule not apply here. However I won't even try to dig into this thing...

Also, in the https://forum.syncthing.net you should have a setting in preferences to enable dark style, perhaps that would suit you better?

As I wrote before: If what we do here is specific to forum.syncthing.net, lets stop using our time on this.

By the way that's what it looks like with the rules above:

[the-j0k3r]

We should be using the rules from the default stylesheet,

can you inspect the affected area with all your notifications and copy and post the outer html on your reply.

Also this applies to many boards not just syncthing

thanks.

[imsodin]

<div data-max-width="320" class="menu-panel drop-down" style="top: 100%; height: auto; width: 320px;">
    <div class="panel-body" style="height: 978px;">
      <div class="panel-body-contents clearfix">
        <div class="menu-links-header"><ul class="menu-links-row"><li class="user"><a class="widget-link user-activity-link" href="/u/imsodin" title="imsodin"><svg class="fa d-icon d-icon-user svg-icon svg-node" aria-hidden="true"><use xlink:href="#user"></use></svg> <span class="d-label">imsodin</span></a></li><li class="glyphs"><a class="widget-link user-notifications-link active" href="/u/imsodin/notifications" title="Notifications"><svg class="fa d-icon d-icon-bell svg-icon svg-node" aria-hidden="true"><use xlink:href="#bell"></use></svg> </a><a class="widget-link user-bookmarks-link" href="/u/imsodin/activity/bookmarks" title="Bookmarks"><svg class="fa d-icon d-icon-bookmark svg-icon svg-node" aria-hidden="true"><use xlink:href="#bookmark"></use></svg> </a><a class="widget-link user-pms-link" href="/u/imsodin/messages" title="Messages"><svg class="fa d-icon d-icon-envelope svg-icon svg-node" aria-hidden="true"><use xlink:href="#envelope"></use></svg> </a></li></ul></div><div class="quick-access-panel"><ul><li class="read"><a href="/t/re-unable-to-solve-non-increasing-sequence-detected-error/15020/9" title="new private message" data-auto-route="true"><svg class="fa d-icon d-icon-far-envelope svg-icon svg-node" aria-hidden="true"><use xlink:href="#far-envelope"></use></svg><div><span>SDIT</span> <span data-topic-id="15020">RE: Unable to solve “Non-increasing sequence detected” error</span></div></a></li><li class=""><a href="/t/running-syncthing-on-solaris/15023/3" title="new like" data-auto-route="true"><svg class="fa d-icon d-icon-heart svg-icon svg-node" aria-hidden="true"><use xlink:href="#heart"></use></svg><div><span>calmh</span> <span data-topic-id="15023">Running Syncthing on Solaris</span></div></a></li><li class="read"><a href="/t/folder-marker-missing-how-do-i-bypass/15022/5" title="quoted" data-auto-route="true"><svg class="fa d-icon d-icon-quote-right svg-icon svg-node" aria-hidden="true"><use xlink:href="#quote-right"></use></svg><div><span>Commissar0617</span> <span data-topic-id="15022">folder marker missing, how do i bypass?</span></div></a></li><li class="read"><a href="/t/database-migration-1-6-0-rc2-rc4/15006/13" title="new reply" data-auto-route="true"><svg class="fa d-icon d-icon-reply svg-icon svg-node" aria-hidden="true"><use xlink:href="#reply"></use></svg><div><span>rustycanb</span> <span data-topic-id="15006">Database migration 1.6.0~rc2-rc4</span></div></a></li><li class="read"><a href="/t/unable-to-solve-non-increasing-sequence-detected-error/15019/11" title="new reply" data-auto-route="true"><svg class="fa d-icon d-icon-reply svg-icon svg-node" aria-hidden="true"><use xlink:href="#reply"></use></svg><div><span>SDIT</span> <span data-topic-id="15019">Unable to solve “Non-increasing sequence detected” error</span></div></a></li><li class="read"><a href="/t/repeated-interrupted-system-call-on-multiple-android-devices/14626/29" title="new reply" data-auto-route="true"><svg class="fa d-icon d-icon-reply svg-icon svg-node" aria-hidden="true"><use xlink:href="#reply"></use></svg><div><span>tomasz86</span> <span data-topic-id="14626">Repeated “interrupted system call” on multiple Android devices</span></div></a></li><li class="read"><a href="/t/database-migration-1-6-0-rc2-rc4/15006/5" title="mentioned" data-auto-route="true"><svg class="fa d-icon d-icon-at svg-icon svg-node" aria-hidden="true"><use xlink:href="#at"></use></svg><div><span>rustycanb</span> <span data-topic-id="15006">Database migration 1.6.0~rc2-rc4</span></div></a></li><li class="read"><a href="/t/stuck-as-local-additions-with-long-paths/14932/24" title="new reply" data-auto-route="true"><svg class="fa d-icon d-icon-reply svg-icon svg-node" aria-hidden="true"><use xlink:href="#reply"></use></svg><div><span>DonPedro</span> <span data-topic-id="14932">Stuck as Local Additions with long paths</span></div></a></li><li class="read"><a href="/t/synchronization-of-multiple-devices-using-nas/15001/7" title="new reply" data-auto-route="true"><svg class="fa d-icon d-icon-reply svg-icon svg-node" aria-hidden="true"><use xlink:href="#reply"></use></svg><div><span>pmj</span> <span data-topic-id="15001">Synchronization of multiple devices using NAS</span></div></a></li><li class="read"><a href="/t/thankyou-thankyou-thankyou/15002" title="mentioned" data-auto-route="true"><svg class="fa d-icon d-icon-at svg-icon svg-node" aria-hidden="true"><use xlink:href="#at"></use></svg><div><span>Moisie</span> <span data-topic-id="15002">Thankyou Thankyou Thankyou</span></div></a></li><li class="read"><a href="/t/up-to-date-but-not-syncing/14998/5" title="new reply" data-auto-route="true"><svg class="fa d-icon d-icon-reply svg-icon svg-node" aria-hidden="true"><use xlink:href="#reply"></use></svg><div><span>mohe2015</span> <span data-topic-id="14998">Up to date but not syncing</span></div></a></li><li class="read"><a href="/t/option-to-follow-directory-junctions-symbolic-links/14750/125" title="new like" data-auto-route="true"><svg class="fa d-icon d-icon-heart svg-icon svg-node" aria-hidden="true"><use xlink:href="#heart"></use></svg><div><span>calmh</span> <span data-topic-id="14750">Option to follow directory junctions / symbolic links?</span></div></a></li><li class="read"><a href="/t/problems-when-syncing-from-windows-to-synology-nas/14996/7" title="new reply" data-auto-route="true"><svg class="fa d-icon d-icon-reply svg-icon svg-node" aria-hidden="true"><use xlink:href="#reply"></use></svg><div><span>xarx</span> <span data-topic-id="14996">Problems when syncing from Windows to Synology NAS</span></div></a></li><li class="read"><a href="/t/option-to-follow-directory-junctions-symbolic-links/14750/124" title="mentioned" data-auto-route="true"><svg class="fa d-icon d-icon-at svg-icon svg-node" aria-hidden="true"><use xlink:href="#at"></use></svg><div><span>Catfriend1</span> <span data-topic-id="14750">Option to follow directory junctions / symbolic links?</span></div></a></li><li class="read"><a href="/t/oldest-supported-macos-version/11611/13" title="new like" data-auto-route="true"><svg class="fa d-icon d-icon-heart svg-icon svg-node" aria-hidden="true"><use xlink:href="#heart"></use></svg><div><span>calmh</span> <span data-topic-id="11611">Oldest supported macOS version?</span></div></a></li><li class="read"><a href="/badges/39/empathetic?username=imsodin" title="badge granted" data-auto-route="true"><svg class="fa d-icon d-icon-certificate svg-icon svg-node" aria-hidden="true"><use xlink:href="#certificate"></use></svg><div>Earned 'Empathetic'</div></a></li><li class="read"><a href="/t/oldest-supported-macos-version/11611/8" title="new like" data-auto-route="true"><svg class="fa d-icon d-icon-heart svg-icon svg-node" aria-hidden="true"><use xlink:href="#heart"></use></svg><div><span>Scramblejams</span> <span data-topic-id="11611">Oldest supported macOS version?</span></div></a></li><li><a href="/t/st-1-5-0-constantly-flickering-status/14990/3" title="new like" data-auto-route="true"><svg class="fa d-icon d-icon-heart svg-icon svg-node" aria-hidden="true"><use xlink:href="#heart"></use></svg><div><span>Catfriend1</span> <span data-topic-id="14990">ST 1.5.0 - constantly flickering status</span></div></a></li><li><a href="/t/gui-page-wont-open-locally/14985/2" title="new like" data-auto-route="true"><svg class="fa d-icon d-icon-heart svg-icon svg-node" aria-hidden="true"><use xlink:href="#heart"></use></svg><div><span>Clfa</span> <span data-topic-id="14985">GUI Page won’t open locally</span></div></a></li><li class=""><a class="" href="/t/am-i-crazy-or-is-syncing-to-sd-card-working-in-android-11/14983/7" title="new like" data-auto-route="true"><svg class="fa d-icon d-icon-heart svg-icon svg-node" aria-hidden="true"><use xlink:href="#heart"></use></svg><div><span>Catfriend1</span> <span data-topic-id="14983">Am I crazy or is syncing to SD card working in Android 11?</span></div></a></li><li class="read last show-all"><a class="widget-link" href="/u/imsodin/notifications" title="view all"><svg class="fa d-icon d-icon-chevron-down svg-icon svg-node" aria-hidden="true"><use xlink:href="#chevron-down"></use></svg> <span class="d-label"></span></a></li></ul></div><hr class="bottom-area"><div class="dismiss-link">
    <ul class="menu-links">
      <li>
        <a class="widget-link dismiss" title="Mark all unread notifications as read"><svg class="fa d-icon d-icon-check svg-icon svg-node" aria-hidden="true"><use xlink:href="#check"></use></svg> <span class="d-label">Dismiss</span></a>
      </li>
    </ul>
  </div>
      </div>
    </div>
  </div>

[the-j0k3r]

Thanks that helps a lot =)

[the-j0k3r]

Sorry it took so long, real life hijacked me and will continue to do so heavily.

I pasted the HTML you shared and used it to fix the issues I saw, it possible something was missed but unless I see the whole HTML I cant duplicate as I dont have any such notifications to duplicate, I hope you understand.

See