workspace-indicator: Use descendant style selectors

Add a style class to the indicator itself, and only select
descendant elements. This allows using the briefer class names
from the window-list extension without too much risk of conflicts.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell-extensions/-/merge_requests/307>

extensions/workspace-indicator/stylesheet.css

@@ -5,23 +5,23 @@
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
-.panel-workspace-indicator {
+.workspace-indicator .status-label {
   padding: 0 8px;
 }
 
-.panel-workspace-indicator-box {
+.workspace-indicator .workspaces-box {
   padding: 4px 0;
   spacing: 4px;
 }
 
-.panel-workspace-indicator-box .workspace {
+.workspace-indicator .workspace {
   width: 40px;
   border: 2px solid #000;
   border-radius: 2px;
   background-color: #595959;
 }
 
-.panel-workspace-indicator-box .workspace.active {
+.workspace-indicator .workspace.active {
   border-color: #fff;
 }
 

extensions/workspace-indicator/workspaceIndicator.js

@@ -259,6 +259,8 @@ export class WorkspaceIndicator extends PanelMenu.Button {
     constructor() {
         super(0.5, _('Workspace Indicator'));
 
+        this.add_style_class_name('workspace-indicator');
+
         let container = new St.Widget({
             layout_manager: new Clutter.BinLayout(),
             x_expand: true,
@@ -270,7 +272,7 @@ export class WorkspaceIndicator extends PanelMenu.Button {
 
         this._currentWorkspace = workspaceManager.get_active_workspace_index();
         this._statusLabel = new St.Label({
-            style_class: 'panel-workspace-indicator',
+            style_class: 'status-label',
             y_align: Clutter.ActorAlign.CENTER,
             text: this._labelText(),
         });
@@ -278,7 +280,7 @@ export class WorkspaceIndicator extends PanelMenu.Button {
         container.add_child(this._statusLabel);
 
         this._thumbnailsBox = new St.BoxLayout({
-            style_class: 'panel-workspace-indicator-box',
+            style_class: 'workspaces-box',
             y_expand: true,
             reactive: true,
         });