Aris-t2 / Scrollbars

Custom Scrollbars (moved to CustomJSforFx)

https://github.com/Aris-t2/CustomJSforFx

48 stars 4 forks source link

Cannot set background to be theme compatible #5

Open Pizzapops opened 6 years ago

Pizzapops commented 6 years ago

I cannot set scrollbar background-color & background-image to use theme variables: (-toolbar-bgcolor) & (--lwt-header-image). I would like to match the background to the background I use with addonbar_vertical.uc.js

addonbar_v { \

  -moz-appearance: none !important; \
  background-color: var(--toolbar-bgcolor); \
  background-image: var(--lwt-header-image); \
  background-size: 1920px 1024px;  \
  background-clip: padding-box; \
  color: #000000 !important; \
  border-right-style: solid; \
          border-color: black; \
          border-width:1px; \
} \

Method used: M2 Windows 10-64 Firefox 65-2018.11.01

Aris-t2 commented 6 years ago

CSS inside js scripts can not get any variables/definitions from browsers main css documents. It does not work like this.

Pizzapops commented 6 years ago

The three addon bar scripts and the space and separator script in CustomJSforFX have these settings:

2018-11-01_155631

My old brain doesn't understand. Is it because the scrollbar script is in "strict mode"?

Aris-t2 commented 6 years ago

Scrollbar code is neither applied to the DOM (xul, toolbars, buttons [->userChrome.css]) nor webcontent (html sites[->userContent]) and the CSS variables are defined on DOM level in "browser.css" for example.

Mozilla has added some new features so we might be able to style scrollbars through userContent.css after all differently, but I believe this method will not be compatible to custom scrollbar script. See https://github.com/Aris-t2/CustomCSSforFx/issues/160