[gnome-shell-sass] screenshot-ui: Add screenshot/screencast toggle

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

commit 53cb16cc56e7f675a7e2d028cbafc9d12f75b502
Author: Ivan Molodetskikh <yalterz gmail com>
Date:   Mon Aug 16 18:16:11 2021 +0300

    screenshot-ui: Add screenshot/screencast toggle
    
    Currently does nothing. When we're in screencast mode, we hide the
    screenshot preview because screencast doesn't start until the capture
    button is pressed.
    
    The window selection is currently left as is, but it should probably be
    changed to something closer to a real overview, showing windows in
    real-time.
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2103>

 widgets/_screenshot.scss | 44 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
---
diff --git a/widgets/_screenshot.scss b/widgets/_screenshot.scss
index 1d9cd12..5855fbe 100644
--- a/widgets/_screenshot.scss
+++ b/widgets/_screenshot.scss
@@ -8,6 +8,8 @@
   }
 }
 
+$screenshot_ui_button_red: #e01b24;
+
 .screenshot-ui-panel {
   background-color: $osd_bg_color;
   border-radius: 12px + 21px;
@@ -68,6 +70,48 @@
       background-color: darken(white, 50%);
     }
   }
+
+  &:cast {
+    .screenshot-ui-capture-button-circle {
+      background-color: $screenshot_ui_button_red;
+    }
+
+    &:hover, &:focus {
+      .screenshot-ui-capture-button-circle {
+        background-color: darken($screenshot_ui_button_red, 15%);
+      }
+    }
+
+    &:active {
+      .screenshot-ui-capture-button-circle {
+        background-color: darken($screenshot_ui_button_red, 30%);
+      }
+    }
+  }
+}
+
+.screenshot-ui-shot-cast-container {
+  background-color: $hover_bg_color;
+  border-radius: 12px;
+  padding: $base_padding / 2;
+  spacing: $base_padding / 2;
+
+  &:ltr { margin-left: 3px; }
+  &:rtl { margin-right: 3px; }
+}
+
+.screenshot-ui-shot-cast-button {
+  padding: $base_padding $base_padding * 1.5;
+  background-color: transparent;
+  &:hover, &:focus { background-color: lighten($hover_bg_color, 5%); }
+  &:active { background-color: $active_bg_color; }
+  &:checked { background-color: white; color: black; }
+
+  border-radius: 12px - 3px;
+
+  StIcon {
+    icon-size: $base_icon_size;
+  }
 }
 
 .screenshot-ui-show-pointer-button {