Software development, scripting and programming.
fne

2018-05-17 19:11 »

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
result.png (139.38 KiB) Viewed 705 times
step1.png
step1.png (11.45 KiB) Viewed 705 times
step2.png
step2.png (38.59 KiB) Viewed 705 times
step3.png
step3.png (11.39 KiB) Viewed 705 times
step4.png
step4.png (16.6 KiB) Viewed 705 times
step5.png
step5.png (158.74 KiB) Viewed 705 times
step6.png
step6.png (16.88 KiB) Viewed 705 times
step7.png
step7.png (13.02 KiB) Viewed 705 times
step8.png
step8.png (11.53 KiB) Viewed 705 times
step9.png
step9.png (34.17 KiB) Viewed 705 times
step10.png
step10.png (18.41 KiB) Viewed 705 times
result.png
result.png (139.38 KiB) Viewed 705 times
Source code files:
scroll.zip
(5.62 KiB) Downloaded 26 times
__________

This is my own .css file content which will result in scrollbars looking like this:
scrollbar.PNG
scrollbar.PNG (1.14 KiB) Viewed 701 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

2018-05-20 06:29 »

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

2018-05-20 06:33 »

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
scroll.png (985 Bytes) Viewed 683 times

Post Reply