Refactor: Tooltip CSS

[baruchiro]

• Move CSS variables to global #77
  

  overlay/src/custom-elements/Tooltip.vue

  Lines 252 to 254 in 1c4a8a4

  	// TODO place in global variables
  	$tooltip-width: 300px;
  	$tooltip-height: 250px;

• Customize scrollbars
  

  overlay/src/custom-elements/Tooltip.vue

  Lines 271 to 273 in 1c4a8a4

  	// TODO customize scrollbars
  	box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.3);
  	overflow-x: hidden;

[ETtestim]

@baruchiro can you elaborate what is customizing the scrollbars?
Why move the CSS to global is it going to be used in another component?

[baruchiro]

@jossef

[Darkmift]

Please bear in mind regarding scrollbar customizations:

Customizing scrollbars is possible using CSS, but the level of support and the way it is implemented can vary between browsers. Some browser-specific pseudo-elements and pseudo-classes can be used to style scrollbars.

Here's a brief overview of the scrollbar customization support in major browsers:

Google Chrome, Microsoft Edge (Chromium-based), and Opera:
These browsers support the customization of scrollbars using the non-standard ::-webkit-scrollbar set of pseudo-elements. You can use the following pseudo-elements to style different parts of the scrollbar:
::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer
Firefox:
Starting from version 64, Firefox supports the standard scrollbar-width and scrollbar-color CSS properties. However, it doesn't support the more granular WebKit-based pseudo-elements used by Chrome, Edge, and Opera. You can style the scrollbar using the following properties:
scrollbar-width: It accepts values like 'auto', 'thin', and 'none'.
scrollbar-color: It takes two color values, one for the thumb and another for the track.
Safari:
Safari also supports the non-standard ::-webkit-scrollbar set of pseudo-elements, just like Chrome, Edge, and Opera. However, support for the standard scrollbar-width and scrollbar-color properties is limited.

Internet Explorer:
Internet Explorer doesn't support the customization of scrollbars using the standard scrollbar-width and scrollbar-color properties. It has its own proprietary scrollbar styling properties, but it's important to note that Internet Explorer is now considered outdated, and Microsoft Edge is the recommended browser.

Keep in mind that because scrollbar customization relies on non-standard properties and varies across browsers, it's important to ensure your website or application remains usable even if custom scrollbars aren't fully supported. This may involve testing your design in multiple browsers and providing fallback styles if necessary.

[ETtestim]

At least give credit to Chatgpt.