Triangle buttons

[Speravir]

I tried to add code to achieve triangle buttons, but wasn’t successful. I didn’t find out why, but maybe it’s because it highly depends on other settings and I made something wrong regarding these dependencies.

I found the code that I wanted to adapt in CSS Triangle - CSS-Tricks.

One problem there is to respect the scrollbar width, because with the code from CC-Tricks the triangles get a doubled width. Also I wanted to add a stretch factor according to the notice on bottom of the blog entry (I prefer equilateral triangles).

What I did: I added two variables to version 1.0.2 of custom_scrollbars.uc.js according to method 2 (after line 52, but the number is not that important):

var enable_triangle_scrollbar_buttons = true; /* default = false */
var cs_triangle_stretch_factor = 1;

Then I added a new block after line 177 adapting from chrome://global/skin/scrollbars.css:

var triangle_buttons = {
    if(custom_scrollbar_width==false) custom_scrollbar_width_value = 16;
    init: function() {
    var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    @namespace html url("http://www.w3.org/1999/xhtml");\
    scrollbar scrollbarbutton {\
        background-color: transparent !important;\
        background-image: unset !important;\
        border-radius: 0 !important;\
    }\
    scrollbar scrollbarbutton:hover {\
        background-color: rgba(0,0,0, 0.25) !important;\
    }\
    scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {/*up*/\
        height: 0 !important; width: 0 !important;\
        border-left: calc('+custom_scrollbar_width_value+'px / 2) inset transparent !important;\
        border-right: calc('+custom_scrollbar_width_value+'px / 2) inset transparent !important;\
        border-bottom: calc('+cs_triangle_stretch_factor+' * '+custom_scrollbar_width_value+'px) solid '+cs_buttons_color+' !important;\
    }\
    scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]:hover {\
        border-bottom: calc('+cs_triangle_stretch_factor+' * '+custom_scrollbar_width_value+'px solid '+cs_buttons_hover_color+' !important;\
    }\
    scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {/*down*/\
        height: 0 !important; width: 0 !important;\
        border-left: calc('+custom_scrollbar_width_value+'px / 2) inset transparent !important;\
        border-right: calc('+custom_scrollbar_width_value+'px / 2) inset transparent !important;\
        border-top: calc('+cs_triangle_stretch_factor+' * '+custom_scrollbar_width_value+'px) solid '+cs_buttons_color+' !important;\
    }\
    scrollbar[orient="vertical"] > scrollbarbutton[type="increment"]:hover {\
        border-top: calc('+cs_triangle_stretch_factor+' * '+custom_scrollbar_width_value+'px) solid '+cs_buttons_hover_color+' !important;\
    }\
    scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {/*left*/\
        height: 0 !important; width: 0 !important;\
        border-top: calc('+custom_scrollbar_width_value+'px / 2) inset transparent !important;\
        border-bottom: calc('+custom_scrollbar_width_value+'px / 2) inset transparent !important;\
        border-right: calc('+cs_triangle_stretch_factor+' * '+custom_scrollbar_width_value+'px) solid '+cs_buttons_color+' !important;\
    }\
    scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"]:hover {\
        border-right: calc('+cs_triangle_stretch_factor+' * '+custom_scrollbar_width_value+'px) solid '+cs_buttons_hover_color+' !important;\
    }\
    scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {/*right*/\
        height: 0 !important; width: 0 !important;\
        border-top: calc('+custom_scrollbar_width_value+'px / 2) inset transparent !important;\
        border-bottom: calc('+custom_scrollbar_width_value+'px / 2) inset transparent !important;\
        border-left: calc('+cs_triangle_stretch_factor+' * '+custom_scrollbar_width_value+'px) solid '+cs_buttons_color+' !important;\
    }\
    scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"]:hover {\
        border-left: calc('+cs_triangle_stretch_factor+' * '+custom_scrollbar_width_value+'px) solid '+cs_buttons_hover_color+' !important;\
    }\
    '), null, null);
    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);
    }
};

And in the end I converted line 250 and following 251 into:

if(enable_custom_scrollbars==true) {
    custom_scrollbars.init();
    if(hide_scrollbar_buttons==true) scrollbar_buttons.init();
    if(enable_triangle_scrollbar_buttons==true) triangle_buttons.init();
};

I’ve set both hide_scrollbar_buttons and custom_scrollbar_widthto true. But as I said in the beginning I made something wrong or have overseen it, because there is no effect. (or not the expected result).

[Aris-t2]

I think you had the right idea. Some areas have to be handled differently. Scrollbar buttons are not allowed to have "0" widths or heights or they will hide/break the whole scrollbar.

There is also a way to keep button background and have arrows on top, but its not part of the code yet. Atm button colors are used for the arrows. (set cs_buttons_as_arrows to true)

I have added your code (and the previous one) into scrollbars main file. It looks like this now:

EDIT - see new one below this post

[Aris-t2]

OK, here is the full one including buttons + arrow settings (look for cs_arrows_on_buttons):

"use strict";

/* Firefox 57+ userChrome.js tweaks - SCROLLBARS ********************************************** */
/* by Aris (aris-addons@gmx.net)*************************************************************** */
/* Github: https://github.com/aris-t2/customscrollbarsforfx *********************************** */
/* ******************************************************************************************** */

/* ******************************************************************************************** */
/* Custom Scrollbars for Firefox ************************************************************** */
/* version 1.0.3 ****************************************************************************** */
/* ******************************************************************************************** */

/* ***********************************************************************************************

 README

 [!] 'custom_scrollbars.uc.js' belongs into Firefox profiles 'chrome' folder!
 -> finding profile folder: address bar > about:profiles > Root Directory > Open Folder
 -> add file to \chrome\ folder (create one, if needed)

 [!] STARTUP CACHE HAS TO BE DELETED AFTER EVERY CHANGE!
 -> finding 'startupCache' folder: address bar > about:profiles > Local Directory > Open Folder > startupCache
 -> close Firefox
 -> delete 'startupCache' folders content

 ENABLING options > set var to true
 DISABLING options > set var to false
 Modifying appearance > change values
 - color - name: red, blue, transparent / hex code: #33CCFF, #FFF
 - color - rgb(a): rgba(0,0,255,0.8) / hsl(a): hsla(240,100%,50%,0.8)
 - numbers: 1, 2, 3 ... 10, 11, 12 ...
 - opacity: 0.0 to 1.0 e.g. 1.4, 1,75
 - gradients: linear-gradient(direction, color, color, color)
 - gradients example: linear-gradient(to right, blue, #33CCFF, rgba(0,0,255,0.8))

 NOTE
 - This is a tiny collection of scrollbar tweaks, not a port of 'NewScrollbars' add-on!
 - Small scrollbar width values will corrupt some parts of the ui!

*********************************************************************************************** */

// General scrollbar settings
var hide_scrollbars = false; /* default = false */
var hide_scrollbar_buttons = false; /* default = false */
var custom_scrollbar_width = true; /* default = false */
var custom_scrollbar_width_value = 17; /* 10-? // default = 17 (in px) */
var custom_scrollbar_opacity = false; /* default = false */
var custom_opacity_value = "1.0"; /* default = 1.0 */
var enable_floating_scrollbars = false; /* default = false // scrollbars on top of web content */

// Custom scrollbar appearance settings - "cs"
var enable_custom_scrollbars = true;

// - background
var cs_background_color = "#CCCCCC"; /* default = #CCCCCC */
var cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; /* default = none */
var cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; /* default = none */
// - corner
var cs_corner_background_color = "#CCCCCC"; /* default = #CCCCCC */
var cs_corner_background_image = "linear-gradient(45deg,transparent 30%,rgba(255,255,240,0.5) 50%,transparent 70%),linear-gradient(-45deg,transparent 30%,rgba(255,255,240,0.5) 50%,transparent 70%)"; /* default = none */
// - thumb/slider
var cs_thumb_color = "#33CCFF"; /* default = #33CCFF */
var cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; /* default = unset */
var cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; /* default = unset */
var cs_thumb_hover_color = "#66FFFF"; /* default = #66FFFF */
var cs_thumb_hover_image_vertical = cs_thumb_image_vertical; /* default = unset */
var cs_thumb_hover_image_horizontal = cs_thumb_image_horizontal; /* default = unset */
var cs_thumb_roundness = 0; /* default = 0 (in px) */
var cs_thumb_border = 1; /* default = 0 (in px) */
var cs_thumb_border_color = "#33CCFF"; /* default ##33CCFF */
// - buttons
var cs_buttons_color = "#000000"; /* default = #000000 */
var cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; /* default = unset */
var cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; /* default = unset */
var cs_buttons_hover_color = "#000066"; /* default = #000066 */
var cs_buttons_hover_image_vertical = cs_buttons_image_vertical; /* default = unset */
var cs_buttons_hover_image_horizontal = cs_buttons_image_horizontal; /* default = unset */
var cs_buttons_roundness = 0; /* default = 0 (in px) */
// - button arrows
var cs_buttons_as_arrows = false; /* default = false */
var cs_arrows_on_buttons = false; /* default = false */
var cs_arrows_on_buttons_color = "#ff0000"; /* default = #ff0000 */
var cs_arrows_on_buttons_hover_color = "#ffbb00"; /* default = #ffbb00 */

/* ******************************************************************************************** */
/* ******************************************************************************************** */
/* ******************************************************************************************** */

// Scrollbar code

Components.utils.import("resource://gre/modules/Services.jsm");
var ss =  Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);

var custom_scrollbars = {

    init: function() {

    var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
    @namespace html url("http://www.w3.org/1999/xhtml");\
    \
    scrollbar, scrollcorner, scrollbar thumb,\
    scrollbar thumb:hover, scrollbar thumb:active,\
    scrollbar scrollbarbutton, scrollbar scrollbarbutton:hover {\
        -moz-appearance: none !important;\
    }\
    scrollbar {\
        background-color: '+cs_background_color+' !important;\
    }\
    scrollbar[orient="vertical"] {\
        background-image: '+cs_background_image_vertical+' !important;\
    }\
    scrollbar[orient="horizontal"] {\
        background-image: '+cs_background_image_horizontal+' !important;\
    }\
    scrollcorner {\
        background-color: '+cs_corner_background_color+' !important;\
        background-image: '+cs_corner_background_image+' !important;\
    }\
    scrollbar thumb {\
        background-color: '+cs_thumb_color+' !important;\
        border-radius: '+cs_thumb_roundness+'px !important;\
        border: '+cs_thumb_border+'px solid '+cs_thumb_border_color+' !important;\
    }\
    scrollbar thumb[orient="vertical"] {\
        background-image: '+cs_thumb_image_vertical+' !important;\
    }\
    scrollbar thumb[orient="horizontal"] {\
        background-image: '+cs_thumb_image_horizontal+' !important;\
    }\
    scrollbar thumb:hover, scrollbar thumb:active {\
        background-color: '+cs_thumb_hover_color+' !important;\
    }\
    scrollbar thumb[orient="vertical"]:hover, scrollbar thumb[orient="vertical"]:active {\
        background-image: '+cs_thumb_hover_image_vertical+' !important;\
    }\
    scrollbar thumb[orient="horizontal"]:hover, scrollbar thumb[orient="horizontal"]:active {\
        background-image: '+cs_thumb_hover_image_horizontal+' !important;\
    }\
    scrollbar scrollbarbutton {\
        background-color: '+cs_buttons_color+' !important;\
        border-radius: '+cs_buttons_roundness+'px !important;\
    }\
    scrollbar[orient="vertical"] scrollbarbutton {\
        background-image: '+cs_buttons_image_vertical+' !important;\
    }\
    scrollbar[orient="horizontal"] scrollbarbutton {\
        background-image: '+cs_buttons_image_horizontal+' !important;\
    }\
    scrollbar scrollbarbutton:hover {\
        background-color: '+cs_buttons_hover_color+' !important;\
    }\
    scrollbar[orient="vertical"] scrollbarbutton:hover {\
        background-image: '+cs_buttons_hover_image_vertical+' !important;\
    }\
    scrollbar[orient="horizontal"] scrollbarbutton:hover {\
        background-image: '+cs_buttons_hover_image_horizontal+' !important;\
    }\
    '), null, null);

    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

    }
};

var scrollbar_buttons = {

  init: function() {

  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
    @namespace html url("http://www.w3.org/1999/xhtml");\
    \
    scrollbar scrollbarbutton {\
      opacity: 0 !important;\
    }\
    scrollbar[orient="vertical"] scrollbarbutton {\
      min-height: 1px !important;\
      height: 1px !important;\
      max-height: 1px !important;\
    }\
    scrollbar[orient="horizontal"] scrollbarbutton {\
      min-width: 1px !important;\
      width: 1px !important;\
      max-width: 1px !important;\
    }\
    \
  '), null, null);

  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

var scrollbar_width = {

  init: function() {

  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
    @namespace html url("http://www.w3.org/1999/xhtml");\
    \
    scrollbar[orient="vertical"] scrollbarbutton {\
      min-width: 0 !important;\
      width: '+custom_scrollbar_width_value+'px !important;\
      max-width: '+custom_scrollbar_width_value+'px !important;\
    }\
    scrollbar[orient="horizontal"] scrollbarbutton {\
      min-height: 0 !important;\
      height: '+custom_scrollbar_width_value+'px !important;\
      max-height: '+custom_scrollbar_width_value+'px !important;\
    }\
    \
  '), null, null);

  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

var floating_scrollbars = {

  init: function() {

  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
    @namespace html url("http://www.w3.org/1999/xhtml");\
    \
    scrollbar {\
      position: relative !important;\
      z-index: 1000000000 !important;\
    }\
    scrollbar, scrollcorner {\
      background-color: transparent !important; \
      background-image: unset !important; \
    }\
    scrollbar[orient="vertical"] {\
      -moz-margin-start: -'+custom_scrollbar_width_value+'px !important;\
      width: '+custom_scrollbar_width_value+'px !important;\
    }\
    scrollbar[orient="horizontal"] {\
      margin-top: -'+custom_scrollbar_width_value+'px !important;\
      height: '+custom_scrollbar_width_value+'px !important;\
    }\
    \
  '), null, null);

  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

var scrollbar_opacity = {

  init: function() {

  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
    @namespace html url("http://www.w3.org/1999/xhtml");\
    \
    scrollbar {\
      opacity: '+custom_opacity_value+' !important;\
    }\
    \
  '), null, null);

  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

var remove_scrollbars = {

  init: function() {

  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
    @namespace html url("http://www.w3.org/1999/xhtml");\
    \
    scrollbar, scrollcorner {\
      display: none !important;\
      visibility: collapse !important;\
    }\
    \
  '), null, null);

  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

var cs_scrollbars_scrollbar_button_arrows = {

  init: function() {

  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
    @namespace html url("http://www.w3.org/1999/xhtml");\
    \
    scrollbar scrollbarbutton, \
    scrollbar[orient="vertical"] scrollbarbutton,\
    scrollbar[orient="horizontal"] scrollbarbutton, \
    scrollbar[orient="vertical"] scrollbarbutton:hover,\
    scrollbar[orient="horizontal"] scrollbarbutton:hover {\
      background-color: unset !important;\
      background-image: unset !important;\
      border-radius: 0px !important;\
    }\
    scrollbar[orient="vertical"] > scrollbarbutton {\
      min-height: '+(custom_scrollbar_width_value/2)+'px !important;\
      height: '+(custom_scrollbar_width_value/2)+'px !important;\
      max-height: '+(custom_scrollbar_width_value/2)+'px !important;\
      min-width: '+custom_scrollbar_width_value+'px !important;\
      width: '+custom_scrollbar_width_value+'px !important;\
      max-width: '+custom_scrollbar_width_value+'px !important;\
    }\
    scrollbar[orient="horizontal"] > scrollbarbutton {\
      min-width: '+(custom_scrollbar_width_value/2)+'px !important;\
      width: '+(custom_scrollbar_width_value/2)+'px !important;\
      max-width: '+(custom_scrollbar_width_value/2)+'px !important;\
      min-height: '+custom_scrollbar_width_value+'px !important;\
      height: '+custom_scrollbar_width_value+'px !important;\
      max-height: '+custom_scrollbar_width_value+'px !important;\
    }\
    scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {\
      border-left: '+(custom_scrollbar_width_value/2)+'px solid transparent !important;\
      border-right: '+(custom_scrollbar_width_value/2)+'px solid transparent !important;\
      border-bottom: '+(custom_scrollbar_width_value/2)+'px solid '+cs_buttons_color+' !important;\
    }\
    scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]:hover {\
      border-bottom: '+(custom_scrollbar_width_value/2)+'px solid '+cs_buttons_hover_color+' !important;\
    }\
    scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {\
      border-left: '+(custom_scrollbar_width_value/2)+'px solid transparent !important;\
      border-right: '+(custom_scrollbar_width_value/2)+'px solid transparent !important;\
      border-top: '+(custom_scrollbar_width_value/2)+'px solid '+cs_buttons_color+' !important;\
    }\
    scrollbar[orient="vertical"] > scrollbarbutton[type="increment"]:hover {\
      border-top: '+(custom_scrollbar_width_value/2)+'px solid '+cs_buttons_hover_color+' !important;\
    }\
    scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {\
      border-top: '+(custom_scrollbar_width_value/2)+'px solid transparent !important;\
      border-bottom: '+(custom_scrollbar_width_value/2)+'px solid transparent !important;\
      border-right: '+(custom_scrollbar_width_value/2)+'px solid '+cs_buttons_color+' !important;\
    }\
    scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"]:hover {\
      border-right: '+(custom_scrollbar_width_value/2)+'px solid '+cs_buttons_hover_color+' !important;\
    }\
    scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {\
      border-top: '+(custom_scrollbar_width_value/2)+'px solid transparent !important;\
      border-bottom: '+(custom_scrollbar_width_value/2)+'px solid transparent !important;\
      border-left: '+(custom_scrollbar_width_value/2)+'px solid '+cs_buttons_color+' !important;\
    }\
    scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"]:hover {\
      border-left: '+(custom_scrollbar_width_value/2)+'px solid '+cs_buttons_hover_color+' !important;\
    }\
    \
  '), null, null);

  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

var cs_scrollbars_arrows_on_buttons = {

  init: function() {

  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
    @namespace html url("http://www.w3.org/1999/xhtml");\
    \
    scrollbar scrollbarbutton, \
    scrollbar[orient="vertical"] scrollbarbutton,\
    scrollbar[orient="horizontal"] scrollbarbutton, \
    scrollbar[orient="vertical"] scrollbarbutton:hover,\
    scrollbar[orient="horizontal"] scrollbarbutton:hover {\
      border-radius: 0px !important;\
    }\
    \
    scrollbar[orient="vertical"] > scrollbarbutton {\
      min-height: '+(custom_scrollbar_width_value/2)+'px !important;\
      height: '+(custom_scrollbar_width_value/2)+'px !important;\
      max-height: '+(custom_scrollbar_width_value/2)+'px !important;\
      min-width: '+custom_scrollbar_width_value+'px !important;\
      width: '+custom_scrollbar_width_value+'px !important;\
      max-width: '+custom_scrollbar_width_value+'px !important;\
    }\
    scrollbar[orient="horizontal"] > scrollbarbutton {\
      min-width: '+(custom_scrollbar_width_value/2)+'px !important;\
      width: '+(custom_scrollbar_width_value/2)+'px !important;\
      max-width: '+(custom_scrollbar_width_value/2)+'px !important;\
      min-height: '+custom_scrollbar_width_value+'px !important;\
      height: '+custom_scrollbar_width_value+'px !important;\
      max-height: '+custom_scrollbar_width_value+'px !important;\
    }\
    scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {\
      border-left: '+(custom_scrollbar_width_value/2)+'px solid transparent !important;\
      border-right: '+(custom_scrollbar_width_value/2)+'px solid transparent !important;\
      border-bottom: '+(custom_scrollbar_width_value/2)+'px solid '+cs_arrows_on_buttons_color+' !important;\
    }\
    scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]:hover {\
      border-bottom: '+(custom_scrollbar_width_value/2)+'px solid '+cs_arrows_on_buttons_hover_color+' !important;\
    }\
    scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {\
      border-left: '+(custom_scrollbar_width_value/2)+'px solid transparent !important;\
      border-right: '+(custom_scrollbar_width_value/2)+'px solid transparent !important;\
      border-top: '+(custom_scrollbar_width_value/2)+'px solid '+cs_arrows_on_buttons_color+' !important;\
    }\
    scrollbar[orient="vertical"] > scrollbarbutton[type="increment"]:hover {\
      border-top: '+(custom_scrollbar_width_value/2)+'px solid '+cs_arrows_on_buttons_hover_color+' !important;\
    }\
    scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {\
      border-top: '+(custom_scrollbar_width_value/2)+'px solid transparent !important;\
      border-bottom: '+(custom_scrollbar_width_value/2)+'px solid transparent !important;\
      border-right: '+(custom_scrollbar_width_value/2)+'px solid '+cs_arrows_on_buttons_color+' !important;\
    }\
    scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"]:hover {\
      border-right: '+(custom_scrollbar_width_value/2)+'px solid '+cs_arrows_on_buttons_hover_color+' !important;\
    }\
    scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {\
      border-top: '+(custom_scrollbar_width_value/2)+'px solid transparent !important;\
      border-bottom: '+(custom_scrollbar_width_value/2)+'px solid transparent !important;\
      border-left: '+(custom_scrollbar_width_value/2)+'px solid '+cs_arrows_on_buttons_color+' !important;\
    }\
    scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"]:hover {\
      border-left: '+(custom_scrollbar_width_value/2)+'px solid '+cs_arrows_on_buttons_hover_color+' !important;\
    }\
    \
  '), null, null);

  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

// enables settings as set
if(enable_custom_scrollbars==true) custom_scrollbars.init();
if(hide_scrollbar_buttons==true) scrollbar_buttons.init();
if(custom_scrollbar_width==true) scrollbar_width.init();
if(enable_floating_scrollbars==true) floating_scrollbars.init();
if(custom_scrollbar_opacity==true) scrollbar_opacity.init();
if(hide_scrollbars==true) remove_scrollbars.init();
if(cs_buttons_as_arrows==true && hide_scrollbars==false) cs_scrollbars_scrollbar_button_arrows.init();
if(cs_arrows_on_buttons==true && cs_buttons_as_arrows==false && hide_scrollbars==false) cs_scrollbars_arrows_on_buttons.init();

[Aris-t2]

Now online in 1.0.3. (code slightly optimized, results are the same)

[Speravir]

Scrollbar buttons are not allowed to have "0" widths or heights or they will hide/break the whole scrollbar.

Ah, there was the trap. Thank you!

[Speravir]

So, works really nice. Adding a stretch factor seems to be too hard, though. The computation worked on a run in alert, but not when added to the actual code here. Not that it is again an issue with the height/width. On the other hand in Windows the default arrow tip is a rectangular triangle, too.

[Aris-t2]

The arrow effect is cheated with overlapping borders. CSS renders them visually like something we see as arrows. They are not arrow images like default scrollbar buttons offer. Because of that I think we can not resize the arrows without breaking the button and/or scrollbar, but I have not tested something like -moz-border-top-colors: red transparent or -moz-border-top-colors: transparent red. The idea behind this is splitting "triangles" color into two colors of which one is transparent creating a smaller arrow. Using more than two colors could again visually cheat arrow scaling.

[Speravir]

The arrow effect is cheated with overlapping borders.

I know, and the appearance is controlled by the widths of the borders.

This works in a separate html file:

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test CSS arrow</title>
<style type="text/css">
:root {
  --arrow-width: 200px; /*scrollbar width */
  --stretch-factor: 1;
}
div {
  width: 1px;
  height: 1px;

  border-bottom: calc(var(--arrow-width) * var(--stretch-factor)) solid black;
}
#symmetric, #squeezed {
  border-left: calc(var(--arrow-width) / 2) solid transparent;
  border-right: calc(var(--arrow-width) / 2) solid transparent;
}
#asymmetric {
  border-left: calc(var(--arrow-width) * 0.25) solid transparent;
  border-right: calc(var(--arrow-width) * 0.75) solid transparent;
}
</style>
</head>
<body>
<div id="symmetric"></div>
<div id="asymmetric"></div>
<div id="squeezed" style="--stretch-factor: 0.5"></div>
</body>
</html>

Note, that I set height and width to 1px. For both set to arrow-width I do not get an triangle. I cannot estimate what would happen with such small values in the script, but would the arrows still be clickable? In my test yesterday I didn’t change these values, though, instead I tried to add the stretch factor to them, too – by the way in Javascript, not in CSS – and this failed.

To be sure: If it is not possible, then it is nonetheless ok.

[Aris-t2]

I think we can not compare html div tags behavior with Firefox's internal scrollbar buttons. Both are too different, otherwise a width/height of 0 would not break them. I think this is a Firefox 57+ thing. Fx56 and older didn't mind 0 values, if I remember correctly. Sadly we can not set gradients as border color. It would make a few things easier.

To extend your example including what I meant. You can replace the "blue" with "transparent" to get smaller arrows too. Maybe this also works for Fx buttons. Sadly colors are set per pixel this way.

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test CSS arrow</title>
<style type="text/css">
:root {
  --arrow-width: 200px; /*scrollbar width */
  --stretch-factor: 1;
}
div {
  width: 1px;
  height: 1px;
  border-bottom: calc(var(--arrow-width) * var(--stretch-factor)) solid black;

}
#symmetric, #squeezed {
  border-left: calc(var(--arrow-width) / 2) solid transparent;
  border-right: calc(var(--arrow-width) / 2) solid transparent;
}
#asymmetric {
  border-left: calc(var(--arrow-width) * 0.25) solid transparent;
  border-right: calc(var(--arrow-width) * 0.75) solid transparent;
}
</style>
</head>
<body>
<div id="symmetric"></div>
<div id="asymmetric"></div>
<div id="squeezed" style="--stretch-factor: 0.5"></div>
<div id="symmetric" style="border-bottom: 50px solid; -moz-border-bottom-colors: blue blue blue blue blue blue blue blue blue blue blue blue blue blue blue blue red red red red red red red red red red red red red red red red;"></div>
</body>
</html>

[Speravir]

Both are too different, otherwise a width/height of 0 would not break them.

Yes, so it seems.

To extend your example including what I meant.

Oh, even weirder.

How about closing this for now? As I said, it is ok, now, and at least one other person in camp-firefox.de forum is happy, as well.

[Aris-t2]

OK