[fne]

Here is how to make custom scrollbars for Web sites in Vivaldi. This will not customize the Vivaldi gUI but the Web sites you visit. It is very nice and a special fuck you to Microsoft for their completely stupid moronic insane and almost invisible scrollbars in Windows.

Credit: I found the original code at Vivaldi forums in here: https://forum.vivaldi.net/topic/26798/t ... -var-color, a guy called https://forum.vivaldi.net/user/hadden89 made it. I altered it a little tiny bit. Full credit to hadden89.

result.png (139.38 KiB) Viewed 23911 times

step1.png (11.45 KiB) Viewed 23911 times

step2.png (38.59 KiB) Viewed 23911 times

step3.png (11.39 KiB) Viewed 23911 times

step4.png (16.6 KiB) Viewed 23911 times

step5.png (158.74 KiB) Viewed 23911 times

step6.png (16.88 KiB) Viewed 23911 times

step7.png (13.02 KiB) Viewed 23911 times

step8.png (11.53 KiB) Viewed 23911 times

step9.png (34.17 KiB) Viewed 23911 times

step10.png (18.41 KiB) Viewed 23911 times

result.png (139.38 KiB) Viewed 23911 times

Source code files:

scroll.zip

(5.62 KiB) Downloaded 1708 times

__________

This is my own .css file content which will result in scrollbars looking like this:

scrollbar.PNG (1.14 KiB) Viewed 23907 times

Code: Select all

body::-webkit-scrollbar { width:14px !important; }
::-webkit-scrollbar-track {
background:rgba(255,255,255,1) !important;
border-radius:0px !important;
}
::-webkit-scrollbar-thumb {
background-color:#ff4147 !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);
min-height:17px;
border-radius:0px !important;
-webkit-box-shadow:inset 0 0 4px rgba(0,0,0,0.5) !important;
}

[fne]

A small update, it seems that you don't need to alter "browser.html". As long as you install the extension, it will work just fine!

[fne]

Update to my scroll css:

Code: Select all

body::-webkit-scrollbar { width:21px !important; }
::-webkit-scrollbar-track {
background:rgba(255,255,255,1) !important;
border-radius:0px !important;
/*this makes scrollbar lines visible: -webkit-box-shadow:inset 0 0 4px rgba(77,77,77,1) !important;*/
}
::-webkit-scrollbar-thumb {
background-color:#ff4147 !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);
min-height:21px;
border-radius:0px !important;
-webkit-box-shadow:inset 0 0 4px rgba(0,0,0,0) !important;
}

::-webkit-scrollbar-button {
    background-size: 90%;
    width:21px;
    height:21px;
    background-repeat: no-repeat;
    background-position: center; 
	background-color:#000000 !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);
}

scroll.png (985 Bytes) Viewed 23889 times