[gnome-shell-sass] screenshot-ui: Add capturing and screen selection

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

commit 4c7a3f5330668309d96c5aa0e2c6824c093a959a
Author: Ivan Molodetskikh <yalterz gmail com>
Date:   Sat Jan 15 18:23:32 2022 +0300

    screenshot-ui: Add capturing and screen selection
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1954>

 widgets/_screenshot.scss | 49 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)
---
diff --git a/widgets/_screenshot.scss b/widgets/_screenshot.scss
index 5c98fce..1c46146 100644
--- a/widgets/_screenshot.scss
+++ b/widgets/_screenshot.scss
@@ -32,3 +32,52 @@
     icon-size: $base_icon_size * 2;
   }
 }
+
+.screenshot-ui-type-button {
+  padding: $base_padding * 2 $base_padding * 3;
+  border-radius: 12px + 21px - 18px;
+  font-weight: bold;
+  &:hover, &:focus { background-color: $hover_bg_color; }
+  &:active { background-color: $active_bg_color; }
+  &:checked { background-color: $hover_bg_color; }
+  &:insensitive { color: $insensitive_fg_color; }
+}
+
+.screenshot-ui-capture-button {
+  width: 36px;
+  height: 36px;
+  border-radius: 99px;
+  border: 4px white;
+  padding: 4px;
+
+  .screenshot-ui-capture-button-circle {
+    background-color: white;
+    transition-duration: 200ms;
+    &:hover, &:focus { background-color: $hover_bg_color; }
+    border-radius: 99px;
+  }
+
+  &:hover, &:focus {
+    .screenshot-ui-capture-button-circle {
+      background-color: darken(white, 15%);
+    }
+  }
+
+  &:active {
+    .screenshot-ui-capture-button-circle {
+      background-color: darken(white, 50%);
+    }
+  }
+}
+
+.screenshot-ui-screen-selector {
+  transition-duration: 200ms;
+  background-color: rgba(0, 0, 0, .5);
+
+  &:hover { background-color: rgba(0, 0, 0, .3); }
+  &:active { background-color: rgba(0, 0, 0, .7); }
+  &:checked {
+    background-color: transparent;
+    border: 2px white;
+  }
+}