10-04-2022, 06:27 PM | #1 |
want to learn what I want
Posts: 1,179
Karma: 6426810
Join Date: Sep 2020
Device: Calibre E-book viewer
|
Dark Color Palette - Scrollbar slider CSS
In trying out the Dark Color Palette, I noticed two elements that have low contrast display, in my setting:
Is there some CSS hack I could apply to them? It seems to me both the search dropdown and the scrollbar slider would be more distinguished if they had a lighter color... This is what I would like to customise: https://developer.mozilla.org/en-US/...bkit-scrollbar ::-webkit-scrollbar-thumb — the draggable scrolling handle. |
10-04-2022, 06:55 PM | #2 |
null operator (he/him)
Posts: 20,946
Karma: 27620688
Join Date: Mar 2012
Location: Sydney Australia
Device: none
|
I suspect that's a Qt on Windows issue, Sigil is the same in dark mode. Not sure if its the same on other platforms.
MS Office had the same problem with Dark, which they fixed; so maybe it's a 'generic' issue. BR |
Advert | |
|
10-04-2022, 11:35 PM | #3 |
creator of calibre
Posts: 44,380
Karma: 23766374
Join Date: Oct 2006
Location: Mumbai, India
Device: Various
|
It is a Qt limitation.
|
10-04-2022, 11:45 PM | #4 |
want to learn what I want
Posts: 1,179
Karma: 6426810
Join Date: Sep 2020
Device: Calibre E-book viewer
|
Bummer :\
|
10-06-2022, 03:26 AM | #5 |
want to learn what I want
Posts: 1,179
Karma: 6426810
Join Date: Sep 2020
Device: Calibre E-book viewer
|
What about this:
https://forum.qt.io/topic/59351/qscr...ine-when-moved https://stackoverflow.com/questions/...t-doesnt-apply I recall being able to customise some QT or maybe GTK based program on Windows... though only vaguely. |
Advert | |
|
10-06-2022, 03:41 AM | #6 |
want to learn what I want
Posts: 1,179
Karma: 6426810
Join Date: Sep 2020
Device: Calibre E-book viewer
|
I just saw there's some environment variable called QT_STYLE_OVERRIDE...
You can also set the style for all Qt applications by setting the QT_STYLE_OVERRIDE environment variable. In https://doc.qt.io/qt-6/qapplication.html |
10-06-2022, 03:54 AM | #7 |
creator of calibre
Posts: 44,380
Karma: 23766374
Join Date: Oct 2006
Location: Mumbai, India
Device: Various
|
stylesheets tend to break things, unless used in a very limited way. you are welcome to play with them if you like, you could probably get something hackish that works for you
|
10-06-2022, 04:19 AM | #8 | |
want to learn what I want
Posts: 1,179
Karma: 6426810
Join Date: Sep 2020
Device: Calibre E-book viewer
|
Quote:
I recall vaguely some GTK editor that was very user-friendly as it worked mostly like a wysiwyg editor... But it seems there's no similar Qt alternative. BTW, in Goldendict, for instance, there's a file called qt-style.css. I'm able to style most objects colors in it, except that ::-webkit-scrollbar-thumb thing... Wondering too how that QT_STYLE_OVERRIDE would be useful... |
|
10-06-2022, 04:28 AM | #9 |
creator of calibre
Posts: 44,380
Karma: 23766374
Join Date: Oct 2006
Location: Mumbai, India
Device: Various
|
You do need to run calibre from source, but doing so does nto involve any building. https://manual.calibre-ebook.com/develop.html
Look in gui2/__init__.py where QApplication is constructed and pass it the path to stylesheet with -stylesheet. |
10-06-2022, 06:22 AM | #10 | |
want to learn what I want
Posts: 1,179
Karma: 6426810
Join Date: Sep 2020
Device: Calibre E-book viewer
|
Quote:
feels awesome to run Calibre from source! I'm feeling devilish with my new calibre-dev shortcut, ha. already can see the new "adjust width" item in context menu: But still can't barely see that darn scrollbar handle, as I'll have to figure out that pass it the path to stylesheet with -stylesheet bit. |
|
10-06-2022, 09:01 AM | #11 | |
want to learn what I want
Posts: 1,179
Karma: 6426810
Join Date: Sep 2020
Device: Calibre E-book viewer
|
Quote:
https://doc.qt.io/qt-6/qapplication....tyleSheet-prop Now how/where would I insert the path to a stylesheet in gui2/__init__.py? In trying to guess, I found this in line 1090: Code:
class Application(QApplication): shutdown_signal_received = pyqtSignal() palette_changed = pyqtSignal() def __init__(self, args=(), force_calibre_style=False, override_program_name=None, headless=False, color_prefs=gprefs, windows_app_uid=None): Code:
[...]color_prefs=gprefs, windows_app_uid=None, stylesheet=c:\x.qss): Also, looking in https://doc.qt.io/qt-6/stylesheet-syntax.html I'm not sure if the file should have .qss or .css extension. First thing I'd like to test is using a wildcard as in: Code:
* -webkit-scrollbar-thumb { background-color: blue; /* color of the scroll thumb */ border-radius: 20px; /* roundness of the scroll thumb */ border: 3px solid orange; /* creates padding around scroll thumb */ } |
|
10-06-2022, 10:38 AM | #12 |
creator of calibre
Posts: 44,380
Karma: 23766374
Join Date: Oct 2006
Location: Mumbai, India
Device: Various
|
Just before the call to QApplication.__init__(self, args) you do
args += ['-stylesheet', 'path/to/stylesheet.qss'] |
10-06-2022, 09:50 PM | #13 |
want to learn what I want
Posts: 1,179
Karma: 6426810
Join Date: Sep 2020
Device: Calibre E-book viewer
|
Last edited by Comfy.n; 10-06-2022 at 09:58 PM. |
10-07-2022, 01:39 AM | #14 |
want to learn what I want
Posts: 1,179
Karma: 6426810
Join Date: Sep 2020
Device: Calibre E-book viewer
|
Welp. I managed to make the scrollbar handle more distinctive, but my test.qss does work only when setting Calibre User interface style to System Default, in Look and Feel preferences.
That white on green handle was achieved using this qss styling. (corresponding attached file: test1.qss) Then, after seeing this thread, I merged the previous scrollbar styling with the custom dark theme mentioned. That's almost exactly what I needed to achieve, but some elements in this custom dark theme, like padding and border sizes don't fit Calibre UI as perfectly as the built-in dark color palette. (corresponding attached file: test.qss) If I set Calibre Interface settings in Look and feel to "calibre style", the external qss gets overriden. So I end up in the same situation as before, as seen above. :\ Notes on what I had to to, running Calibre from source: - location of qss file: one level above the /src directory - code placement in gui2/__init__.py: Code:
def __init__(self, args=(), force_calibre_style=False, override_program_name=None, headless=False, color_prefs=gprefs, windows_app_uid=None): if not args: args = sys.argv[:1] args += ['-stylesheet', 'test.qss'] Last edited by Comfy.n; 10-07-2022 at 01:55 AM. |
10-07-2022, 02:13 AM | #15 |
want to learn what I want
Posts: 1,179
Karma: 6426810
Join Date: Sep 2020
Device: Calibre E-book viewer
|
On another note, there's an undesirable styling of the details scrollbar too, when using that test.qss:
it would be nice to have that one styled independently... |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Improve Dark Mode Slider Button Contrast? | LKraus | Calibre | 2 | 04-26-2022 09:26 AM |
CSS line height vs Kobo line spacing slider? | bongoman | Kobo Reader | 2 | 07-12-2020 01:25 PM |
CSS text color should be dark blue. Everywhere. | nkormanik | Calibre | 10 | 05-06-2019 05:29 AM |
Glo dark-yellow color on the screen? | greens | Kobo Reader | 8 | 01-06-2013 09:31 PM |
Classic Nook Book Cover Slider Color | geneticlone | Barnes & Noble NOOK | 3 | 12-31-2009 03:35 PM |