Manage scroll bar width

BangkokBob

It would be good if the setting for the width of the scroll bar (which can be managed in Linux) was observed by Vivaldi. I find it too Vivaldi's scroll bar too narrow and there seems to be no way to adjust it.

BangkokBob

Thanks, I had that unchecked, but still not wide enough (for me). What would be good if Vivaldi followed the selection set up in the OS.

shifte

@bangkokbob
How about this?

::-webkit-scrollbar {
  width: 25px;
  height: 25px;
}
 ::-webkit-scrollbar-track {
   background: linear-gradient(#A16EFF,#FFEEFF);
}
 
::-webkit-scrollbar-thumb {
  background: #A16EFF;
  border-radius:8px;
}

hlehyaric

@gwen-dragon You're definitively right. It's a mere CSS mod but

a link to Guide shall be provided every time someone suggests a user (especially new users) to use/install a mod,
it is necessary to specify to which mod type your code belongs (JS or CSS), here it's CSS.

In this very case, the user should read Guide → Adding Style → Vivaldi 2.6 & above.

shifte

@bangkokbob

1, Install Stylebot.
https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha

2, Stylebot options > Styles > Add a new style

3, 無題.png

I didn't know how to do it without a extension.
If anyone knows, please help.

hlehyaric

@shifte Afaik, if you want to mod websites, you need an extension (Stylus…etc…) or .user.js. I'm not aware of any other way to do it (but I might be wrong).

BangkokBob

@gwen-dragon Thanks for your suggestion. I would like to make the scroll bar wider so that less concentration is needed when doing a web presentation. At present I need to concentrate to pick up the scrollbar, or not, or end up with browser width. Whilst zooming would make the selection easier, it would certainly interrupt the flow of the presentation!
I can see that for many (me included, I'm 71) the ability to manage parts of the UI would have benefits.

BangkokBob

@shifte Thanks for this. With Vivaldi 4, I can visit the Chrome extensions, but I have no ability to download unless I am using Chrome. If using Chrome, I go to the web-store, I can immediately 'Add to Chrome'. With Vivaldi, this selection is not available. I have at the top of the screen an option to sign in, however when attempting to do so, I am told 'This browser or app may not be secure.' So I no longer have access to Chrome extensions

BangkokBob

@juanvase Thanks for that. Now its working. Perhaps I've missed it, perhaps searching for the wrong terms, but it may be worthwhile pinning the Chrome Extension topic somewhere?

dovregubben

I wish for an option to resize the scrollbar width.

//MODEDIT: moved post along with replies to relevant thread

guigirl

@hardow2011 said in When the window is not maximized, only half of the scrollbar is clickable.:

Couldn't find any other reference of it anywhere. Thanks for the suggestion, I''l be reporting the bug

In fact, over recent days, the forum actually has heaps of users posting / complaining about this bug, all apparently in ignorance of others also doing it in different threads [indeed, sometimes even in the same thread ]. Afaik, at least two bug reports have been created, maybe more now with your one, so the Devs will have a fair bit of report duplication through which to sift.

@stardust said in When the window is not maximized, only half of the scrollbar is clickable.:

everyone keep Vivaldi maximized?

Certainly not. Stop with the universe-extrapolation from fairy-cakes.

@dovregubben said in When the window is not maximized, only half of the scrollbar is clickable.:

an option to resize the scrollbar width

Golly, you are grievously Off Topic , but fwiw, here's the CSS i use [obviously you'll want to edit it for your preferred colours & width].

/* Scrollbar [non-Vivaldi (ie, external) pages], 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: 7px !important;
    max-width: 7px !important;
}

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

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

scrollbar thumb[orient="vertical"]:hover {
    background: #aaaaff !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: #aaaaff !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: #aaaaff !important;
    border: none !important;
    opacity: 1 !important;
}

scrollcorner {
    opacity: 0 !important;
}

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

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

body::-webkit-scrollbar {
    width: 7px !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: #aaaaff !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;
}

dovregubben

Sorry for wandering off topic! guigirl, your CSS is far too much, I still want the option in "Settings".

colemanrik

If people are going to move things to a more relevant thread, it would be helpful if a link to it's new home was included.

thanks.

pafflick

@colemanrik This is the relevant thread. The original (less relevant) thread is here.

colemanrik

@pafflick sorry, I took the message to mean this was moved to a more relevant thread (meaning go to that thread to continue) not this had been moved from an irrelevant thread (and that this was the more relevant thread).