Webpages scrollbars with var(--color) [Mod/extension hybrid]

luetage

@hadden89 I think it's simple enough. But you could use <code> tags around parts that can be copied to ensure that it works for everyone.

A Former User

Nice extension. But is there any way to don't zoom the scrollbar with the page?

stardepp

This post is deleted!

Hadden89

Guide rewritten and archive updated: now should be far easier to implement this hybrid mod/extension.

Actually, you now will find the instructions and the links for modding in the archive.

I've also removed chromecss.js which stopped work several chromium builds ago.

stardepp

This scrollbar solution works and looks good, but on Youtube full screen, this scrollbar is not hidden.

But if you open an embedded Youtube video in full screen, then the scrollbar is hidden.

How do you always hide the scrollbar?

0_1554264291972_2019-04-03 05_11_32-The Cat Empire - Brighter Than Gold - YouTube - Vivaldi.jpg

Hadden89

@stardepp I'm not sure how to do that or how to prevent scroll zooming.
Guess some css/js function will allow it, but unsure on what have to be used.
I'm also just an user, and not very expert on coding matter.
If I find working solutions, I'll put in the mod

Steffie

@cherylfahling Given that Cheryl's not been around here for a year JOINED 4 APR 2016, 17:03 LAST ONLINE 9 OCT 2019, 07:32 i don't expect she'll reply now, but maybe someone else might have an idea.

Somewhat to my surprise given its age, this CSS does still work in the current Stable V and in Snapshot 3.4.2059.2 / Chrome 86.0.4240.57. When i say "work". it only works for internal Vivaldi pages & panels. All external sites' scrollbars sadly remain the very hard-to-see grey-on-grey.

With the numerous V code changes that have ensued since this CSS originated, does anyone know if there is now a CSS solution for colouring external website scrollbars? I'm not interested in using an extension. Ta.

luetage

@Steffie The original code can only work on internal pages, since it’s a mod. If you don’t wanna run an extension, you have to write a userscript for website scrollbars, which you can install directly in Vivaldi without another 3rd party extension.

cherylfahling

@Steffie said in Webpages scrollbars with var(--color) [Mod/extension hybrid]:

@cherylfahling Given that Cheryl's not been around here for a year JOINED 4 APR 2016, 17:03 LAST ONLINE 9 OCT 2019, 07:32 i don't expect she'll reply now, but maybe someone else might have an idea.

Somewhat to my surprise given its age, this CSS does still work in the current Stable V and in Snapshot 3.4.2059.2 / Chrome 86.0.4240.57. When i say "work". it only works for internal Vivaldi pages & panels. All external sites' scrollbars sadly remain the very hard-to-see grey-on-grey.

With the numerous V code changes that have ensued since this CSS originated, does anyone know if there is now a CSS solution for colouring external website scrollbars? I'm not interested in using an extension. Ta.

I've been to the forums plenty, I just haven't made any comments. Admittedly, I've been using other browsers off and on, but I'm set on Vivaldi again.

I use the Stylus chrome extension for writing and managing user styles, not a user script. Here's what I have for purple variation scrollbars, set to apply to every website. (I like wide scrollbars that I can grab onto.)

/* Scrollbar, adapted from https://userstyles.org/styles/114748/chrome-firefox-opera-scrollbar-custom-colors */
scrollbar *
scrollbar scrollbarbutton {
visibility: collapse !important;
}

scrollbar scrollbarbutton {
display: none !important;
}

scrollbar[orient="vertical"] {
background: #FFF4F8 !important;
-moz-appearance: none !important;
border: none !important;
min-width: 20px !important;
max-width: 20px !important;
}

scrollbar[orient="vertical"]:hover {
-moz-appearance: none !important;
}

scrollbar thumb[orient="vertical"] {
-moz-appearance: none !important;
background: #B8A8C5 !important;
border: none !important;
min-height: 25px !important;
min-width: 20px !important;
max-width: 20px !important;
opacity: 0.87 !important;
}

scrollbar thumb[orient="vertical"]:hover {
background: #B8A8C5 !important;
border: none !important;
opacity: 1 !important;
}

scrollbar[orient="horizontal"] {
-moz-appearance: none !important;
background: #FFF4F8 !important;
background-color: transparent !important;
border: none !important;
min-height: 9px !important;
max-height: 9px !important;
opacity: .75 !important;
}

scrollbar[orient="horizontal"]:hover {
-moz-appearance: none !important;
background-color: transparent !important;
min-height: 9px !important;
max-height: 9px !important;
}

scrollbar thumb[orient="horizontal"] {
background: #B8A8C5 !important;
-moz-appearance: none !important;
border: none !important;
min-height: 25px !important;
max-height: 8px !important;
margin-left: 0 !important;
opacity: 0.87 !important;
}

scrollbar thumb[orient="horizontal"]:hover {
background: #B8A8C5 !important;
border: none !important;
opacity: 1 !important;
}

scrollcorner {
opacity: 0 !important;
}

scrollbar scrollcorner:hover {
background: transparent !important;
}

::-webkit-scrollbar {
width: 20px !important;
}

body::-webkit-scrollbar {
width: 20px !important;
}

::-webkit-scrollbar-track {
background: rgba(255,255,255,0.22) !important;
border: none !important;
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3) !important;
}

body::-webkit-scrollbar-track {
background: #FFF4F8 !important;
}

::-webkit-scrollbar-thumb {
background-color: #B8A8C5 !important;
background-image: -webkit-linear-gradient(294deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255, 255, 255,.2) 75%,transparent 75%,transparent) !important;
min-height: 50px;
border: none !important;
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.5) !important;
}

Steffie

@cherylfahling Well hello there, teehee. I accidentally flushed you out! I wonder why the forum software believed, as i posted earlier via your profile, that you were last here ~a year ago... maybe regardless of browser your visits here had been only logged out?

Your advice has magnificently solved my dilemma, thanks so much. Yes it sounds like i have broken my "promise" to not use an extension for this purpose, but as Stylus is one of my few years-old extensions already anyway, incorporating your solution was entirely pain-free.

And it's purpley to boot -- huzzah!! Ta muchly Cheryl

cherylfahling

@Steffie I think I made myself invisible would be why I hate using any unnecessary extensions too.

I love Stylus too. I'm glad you like the scrollbars! You're very welcome.

I think I also submitted a Pink and Purple theme in the past, if you're interested. This is what I use in my Vivaldi.

Background #fff4f8
Foreground #9438ff
Highlight #f74f9e
Accent #b8a8c5

Apply Accent Color to Window
Corner Rounding Disabled (I'm square :-D)

I also have a Pink and Blue version.

Steffie

@cherylfahling said in Webpages scrollbars with var(--color) [Mod/extension hybrid]:
Ah, invisibility -- i entirely forgot that possibility; yep, that'd sure do it, teehee.

Ta for your colour scheme, which is lovely & now added here. Fwiw, as i slip ever closer to the grave i find myself growing ever darker, hence my current theme is:

B: 120d14
F: ffffff
H: aaaaff
A: 5d5d8c

I also tweaked your scrollbars slightly last night, to 13px & #aaaaff, so they look integrated in my theme [i'm rapt after all those boring grey-on-grey years!].

cherylfahling

@Steffie Nice!

Yeah, I seem to have dark things with my health so often. Maybe that's why I like to look at light and airy on my computer to cheer myself up

I dunno, I've just never gotten with the popular dark themes (yet).

Steffie

@cherylfahling For years my KDE Plasma themes, & browser themes, were all light & lavender/lilac/mauve/puce etc based. I used to consider those who used dark themes as weirdos, haha. Every now & then i would try a dark theme here & there, recoil in horror, & retreat to light. One day however, goodness knows why, the recoil did not occur. So now i'm also a weirdo. I do rigidly impose one mandate on myself though, all my dark themes absolutely must still have prominent purple/lavender tones incorporated in some way. I mean, this is serious business!

cherylfahling

@Steffie I know what you mean about purple . I'm also the same way about pink .

My switch is usually to pink and blue, but that doesn't happen often. And I keep folders full of pink and purple floral images, as well as pink and blue floral images for matching wallpaper. My Mac screensaver is soothing to watch.

My other favorites are white and black, but they don't really count as true colors. (Now, I'm starting to talk about clothing.)

Anyways, fun talking about and comparing colors

Hadden89

The mod could be broken in Vivaldi 3.6 (works in 3.5).
Probably the js have to be updated as it doesn't detect the theme colors anymore... the scroll is just black...or white (in github). I'll check it on what can be done ^^,

Hadden89

@Hadden89 Please update the JS hook for Vivaldi 3.6+.

Tnx Choc