scroll bar confusion

[philja]

Using Sigil 2.3.1 on Linux, W10 and MacBook M2

Working exceptionally on my W10 box doing some extensive editing, I found I was getting erratic behaviour when trying to scroll up and down in the various windows. Eventually, I questioned what I was doing and then found I was being 'mislead' by the scroll bar handles' colours.

On Windows and Linux. the handles we grab on the scroll bar of the Clips, Book Browser and Table Of Contents windows are a light colour but in the Preview window, it is a darker colour. This was leading me to click on the wrong part several times.

On the contrary, the scroll bar handles on all the windows of the MacBook are a nice dark colour which contrasts better with the background than those on Windows or Linux.

It would be good if they were all the same colour on Windows and Linux and preferably dark like on the Mac.

I imagine that it's something I could change with an entry in the Qt CSS if I knew how.

[philja]

Well, in Sigil Linux, I managed to get better visibility of the scroll bar/handles on Clips, Browser, Code View and TOC windows but not the Preview window.

How does one address the Preview window separately?

[KevinH]

On MacOS, all scrollbars inherit their colours from the operating system light/versus dark colour palette.

For dark mode you can see examples of css used to modify the scrollbars on each platform here:

https://github.com/Sigil-Ebook/Sigil...rce_Files/dark

Check out examples of css in win_dark_scrollbar.css, lin_dark_scrollbar.css and mac_dark_scrollbar.css

You can add custom css that Preview loads and even cycle among them.

[philja]

Originally Posted by KevinH

On MacOS, all scrollbars inherit their colours from the operating system light/versus dark colour palette.

For dark mode you can see examples of css used to modify the scrollbars on each platform here:

https://github.com/Sigil-Ebook/Sigil...rce_Files/dark

Check out examples of css in win_dark_scrollbar.css, lin_dark_scrollbar.css and mac_dark_scrollbar.css

You can add custom css that Preview loads and even cycle among them.

Thanks for the steer, Kevin. I've added some lines to my qt_styles.qss to modify the display of the scrollbars and this works for Clips, Browser, Code View and TOC but not for Preview.

I've no use for dark mode on any machine and my MacBook is in light mode and its scroll bars are all fine.

I would just like all the scrollbars in Linux and Windows to have the same logic - a darker button/handle and a lighter scroll bar. Preview is the odd one out on both machines.

I've tried using the code from lin_dark_scrollbar.css. The colors aren't a problem I can easily change them. But do I need to rename the file to get Preview to take it into account when starting Sigil?

[KevinH]

Put a css file called custom_preview_style.css into your Sigil's Preferences folder.
It will be injected into Preview.

You can also create a css file called custom_preview_style_alt.css and use the Preview's cycle CSS Styles icon to swap rapidly between them.

You control it with the cycle icon.

[philja]

Originally Posted by KevinH

Put a css file called custom_preview_style.css into your Sigil's Preferences folder.
It will be injected into Preview.

Thanks, Kevin. I'd been thinking that the CSS needed injecting at a deeper level like qt_styles. But, job done !!

Others may find it gaudy or in poor taste - but I'm happy.

[DiapDealer]

Preview is technically a Chrome browser. That's why the scrollbars need to be styled like you'd style the scrollbars on a web page (rather than Qt's qss). I'll try to see if there's a way to automatically use the current QPalette to match the Qt style.

[DiapDealer]

I'm curious now. You claim to have no use for dark mode on any machine, yet dark mode is the only time on Linux or Windows that we (Sigil) attempt to modify the Preview scrollbars with css. In light mode, we go with whatever Qt decides.

I can confirm, however, that the css we inject into Preview on Linux in dark mode (for the scrollbars) is inappropriate. It's based upon the colors that we used to use for our own hard coded dark mode that we no longer use on Linux. Since we allow Sigil to use the theme that the Linux Desktop is using, we need to find a way for Sigil to use the default system theme colors (for Preview scrollbars) when dark mode is detected.

[philja]

Originally Posted by DiapDealer

I'm curious now. You claim to have no use for dark mode on any machine, yet dark mode is the only time on Linux or Windows that we (Sigil) attempt to modify the Preview scrollbars with css. In light mode, we go with whatever Qt decides.

I can confirm, however, that the css we inject into Preview on Linux in dark mode (for the scrollbars) is inappropriate. It's based upon the colors that we used to use for our own hard coded dark mode that we no longer use on Linux. Since we allow Sigil to use the theme that the Linux Desktop is using, we need to find a way for Sigil to use the default system theme colors (for Preview scrollbars) when dark mode is detected.

I confirm that I never use dark mode on any application if I can avoid it. I don't get on with reading light text on a dark background. I can understand mobile users wishing to save battery life, but I'm mostly on desktops, and my MacBook (being only a year old) has good battery endurance.

My initial grief in this thread was that the cursor handle on Preview in Linux and Windows was darker grey against a lighter grey scroll bar background whereas it was the opposite on all Sigil's other windows. It wasn't the color grey that caused the problem it was the incoherency between the colors of Preview's scrollbar handle and the other windows.

In general, applications on my Linux and Windows boxes seem to have a darker grey scroll handle against a lighter grey background. The contrast is better on Windows than on Linux. Using some of the code suggested by Kevin (lin_dark_scrollbar.css) and changing the colors, I was able to get a scrollbar display that suited me and was coherent across all Sigil's windows in my Linux, Windows and MacBook machines.

So I'm glad I asked.

[DiapDealer]

It should be fairly easy to solve on Windows, but a different story on Linux: where theming isn't just limited to a binary light/dark scenario. I'll first need to identify which of the QPalette color roles are used for the various Qt widget scrollbar pieces to have a good shot at matching them with css. Certainly not the highest priority since users can always do what you did to match them using custom preview css.

[philja]

Originally Posted by DiapDealer

Certainly not the highest priority since users can always do what you did to match them using custom preview css.

Agreed. It's an easy fix from the user POV.

[retiredbiker]

Originally Posted by philja

Thanks, Kevin. I'd been thinking that the CSS needed injecting at a deeper level like qt_styles. But, job done !!

Others may find it gaudy or in poor taste - but I'm happy.

I very much like the look of that! Could you share the .css file that you use, please and thank you?

[philja]

Originally Posted by retiredbiker

I very much like the look of that! Could you share the .css file that you use, please and thank you?

The file I'm using on Linux, Mac and W10: the first line is something posted (by Becky, I think) in another thread some time ago, to correct the display of error messages in Sigil's error box at the top of Preview.

The rest is essentially one of the files referenced by Kevin on github earlier in this thread - (lin_dark_scrollbar.css). I just commented out parts that didn't interest me, changed the values of some width and height parameters and changed the colours. So I don't claim any credit for the code.

It doesn't look like CSS files can be attached so here's a link to Dropbox:

Dropbox link removed - see Turtle91's post next where code is pasted.

[Turtle91]

Originally Posted by philja

It doesn't look like CSS files can be attached so here's a link to Dropbox:

https://www.dropbox.com/scl/fi/r2ij8...=yl4wlwl1&dl=1

You can just post the text and people can copy/paste...like this:

Spoiler:

/* to make correct display in error box */
 html parsererror h3, html parsererror div {white-space: normal;}

/* to change appearance of Preview scroll bar */

::-webkit-scrollbar {
  width: 20px;
  height: 13px;                 /* irrelevant ?  */
  background: #d8d6df;
}

/* button is the bit at top and bottom of the scrollbar */

::-webkit-scrollbar-button {
  background: #ff0000;
  border: 1px solid #595959;
  border-radius: 0px;
}

/* thumb is the handle */

::-webkit-scrollbar-thumb {
  background: #0ea0f2;
  border: 1px solid #595959;
  border-radius: 0px;
}

/*
::-webkit-scrollbar-thumb:hover {
  background: #444444;
}
::-webkit-scrollbar-thumb:active {
  background: #444444;
}                                           */
::-webkit-scrollbar-thumb:vertical {
    min-height: 30px;
}
::-webkit-scrollbar-track {
  background: #d8d6df;
  border: 1px solid #595959;
  border-radius: 0px;
  margin: 1px;
}
/* don't need this'
::-webkit-scrollbar-track:hover {
  background: #3D3D3D;
}
::-webkit-scrollbar-track:active {
  background: #3D3D3D;
}                                           */
::-webkit-scrollbar-corner {
  background: #3D3D3D;
}

::-webkit-scrollbar-button:vertical:start {
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAICAYAAAAvOAWIAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABCSURBVChTY/z//z8DsYAJShMFMBTv2rWrCYShXBSAohiqqBaEsWmAK0ZSCAMYGpgYGRmxKQQDoOfhGkDqaBUaDAwAmVwheiQIB8AAAAAASUVORK5CYII=);
}

::-webkit-scrollbar-button:vertical:end {
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAICAYAAAAvOAWIAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABSSURBVChTY/z//z8DsYAJShMFGEHEzp07m4BULYiNDEC2MjIyNru5udUBaQa4M3bt2oVNA1ghlI1wBlSwGcIDAxSFIIDhQagNMM0ogFahwcAAAC+1IKa195opAAAAAElFTkSuQmCC);
}
/*
::-webkit-scrollbar-button:horizontal:start {
    width: 13px;
    height: 13px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAALCAYAAABCm8wlAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABcSURBVChTbZBREoAgCEShw3Gr+qhTweWoTTEl3owC7o4DsLtThpkp3rf3Tqjq2dO/wcwg7q1KhiyCYahEUPYwMwwicjzhatXH8kOYltFR5IMxIy8XNVM2iU02iG5N7zN/ITcAMQAAAABJRU5ErkJggg==);
}

::-webkit-scrollbar-button:horizontal:end {
    width: 13px;
    height: 13px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAALCAYAAABCm8wlAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABbSURBVChTdZDRDYAwCAXB4dhKP+xUZbnqMxRB6iWEl3AJAR5jEGBmmjmyWafe+2kx4cLNrqpFigIo0lcASVoJiZXQROSw/Ap2Yho+YIDCmTPH8kf94SvwyQrRBYLnM399pEngAAAAAElFTkSuQmCC);
}
*/
::-webkit-scrollbar {display: block;}

[retiredbiker]

Thanks, Philja!