rename css, fix background color getting applied

css/xterm.css

@@ -179,10 +179,10 @@
 	position: absolute;
 }
 
-.xterm-decoration-scrollbar {
+.xterm-decoration-overview-ruler {
     z-index: 7;
     position: absolute;
     top: 0;
     right: 0;
     width: 50px;
-} 
+}

demo/client.ts

@@ -548,7 +548,9 @@ function addDecoration() {
   const marker = term.addMarker(1);
   const decoration = term.registerDecoration({ marker });
   decoration.onRender((e) => {
-    e.style.backgroundColor = 'red';
+    if (e.classList.value === 'xterm-decoration') {
+      e.style.backgroundColor = 'red';
+    }
   });
 }
 

src/browser/Decorations/OverviewRulerRenderer.ts

@@ -29,7 +29,7 @@ export class OverviewRulerRenderer extends Disposable {
   ) {
     super();
     this._canvas = document.createElement('canvas');
-    this._canvas.classList.add('xterm-decoration-scrollbar');
+    this._canvas.classList.add('xterm-decoration-overview-ruler');
     this._viewportElement.parentElement?.insertBefore(this._canvas, this._viewportElement);
     this._ctx = this._canvas.getContext('2d');
     this._canvas.style.width = `${this._optionsService.options.overviewRulerWidth || ScrollbarConstants.WIDTH}px`;