[gnome-shell-sass] panel: Add a screen recording indicator

[Florian Müllner <fmuellner src gnome org>]

commit 0be1ea9934d38a200836cea4f3d33fef5a9cafb0
Author: Ivan Molodetskikh <yalterz gmail com>
Date:   Tue Feb 8 19:18:01 2022 +0300

    panel: Add a screen recording indicator
    
    The indicator shows the recording duration and lets the user stop it on
    click. It is more discoverable than the stop entry in the aggregate
    menu.
    
    The class extends ButtonBox directly rather than Button because Button
    does nothing that it uses, and actually causes issues with its dummy
    menu (its vfunc_hide() throws an "open-state-changed: Error: incorrect
    pop").
    
    The menu-set signal declaration is required by the panel.
    
    The screencast is stopped upon button press in vfunc_event(), which
    matches PanelMenu.Button's input handling.
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2163>

 widgets/_panel.scss | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
---
diff --git a/widgets/_panel.scss b/widgets/_panel.scss
index 7e577e8..feeb1a7 100644
--- a/widgets/_panel.scss
+++ b/widgets/_panel.scss
@@ -38,6 +38,18 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
       }
     }
 
+    &.screen-recording-indicator {
+      box-shadow: inset 0 0 0 100px $screenshot_ui_button_red;
+
+      StBoxLayout {
+        spacing: $base_spacing;
+      }
+
+      StIcon {
+        icon-size: $base_icon_size;
+      }
+    }
+
     &:active, &:overview, &:focus, &:checked {
       box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.8);
 
@@ -50,6 +62,10 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
           box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.8);
         }
       }
+
+      &.screen-recording-indicator {
+        box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.15);
+      }
     }
 
     &:hover {
@@ -60,6 +76,10 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
           box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.85);
         }
       }
+
+      &.screen-recording-indicator {
+        box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.1);
+      }
     }
     
     &:active:hover, &:overview:hover, &:focus:hover, &:checked:hover {
@@ -70,6 +90,10 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
           box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.75);
         }
       }
+
+      &.screen-recording-indicator {
+        box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.2);
+      }
     }
 
     // status area icons
@@ -109,6 +133,10 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
             box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.15);
           }
         }
+
+        &.screen-recording-indicator {
+          box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.15);
+        }
       }
 
       &:hover {
@@ -119,6 +147,10 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
             box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.10);
           }
         }
+
+        &.screen-recording-indicator {
+          box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.1);
+        }
       }
       
       &:active:hover, &:overview:hover, &:focus:hover, &:checked:hover {
@@ -129,6 +161,10 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
             box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.2);
           }
         }
+
+        &.screen-recording-indicator {
+          box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.2);
+        }
       }
     }
   }