GNOME.org
 

[gnome-shell/wip/snwh/more-papercut-fixes] theme: Simplify some of the screenshot UI

commit 2e354e74852b84401ca8e578967ef6b00cb9c394
Author: Sam Hewitt <sam snwh org>
Date:   Thu Feb 10 10:51:15 2022 -0330

    theme: Simplify some of the screenshot UI
    
    - use more global styles
    - add osd button definitions

 data/theme/gnome-shell-sass/_common.scss           | 18 ++++-
 data/theme/gnome-shell-sass/_drawing.scss          |  7 ++
 data/theme/gnome-shell-sass/widgets/_buttons.scss  |  1 +
 .../gnome-shell-sass/widgets/_screenshot.scss      | 88 +++++++---------------
 .../gnome-shell-sass/widgets/_window-picker.scss   | 12 +--
 data/theme/meson.build                             |  1 -
 6 files changed, 56 insertions(+), 71 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index 8c82789188..fa284ec09b 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -94,7 +94,6 @@ stage {
   border-radius: $base_border_radius - 2px; // 6px
   border-style: solid;
   border-width: 1px;
-  min-height: 22px;
   font-weight: bold;
   padding: $base_padding*.5 $base_padding*4;
 
@@ -102,7 +101,8 @@ stage {
   &:focus { @include button(focus);}
   &:hover { @include button(hover);}
   &:insensitive { @include button(insensitive);}
-  &:active, &:checked { @include button(active);}
+  &:active { @include button(active);}
+  &:checked { @include button(checked);}
 }
 
 // dialogs
@@ -118,13 +118,14 @@ $bubble_button_radius:$base_border_radius*1.25;
 
 %bubble_button {
   padding: $base_padding * 2;
-  font-weight: bold;
+  font-weight: bold !important;
 
   @include button(normal, $c:$bubble_buttons_color);
   &:insensitive { @include button(insensitive, $c:$bubble_buttons_color);}
   &:focus { @include button(focus, $c:$bubble_buttons_color);}
   &:hover { @include button(hover, $c:$bubble_buttons_color);}
   &:active { @include button(active, $c:$bubble_buttons_color);}
+  &:checked { @include button(checked, $c:$bubble_buttons_color);}
   
   &:first-child:ltr {
     border-radius: 0 0 0 $bubble_button_radius; 
@@ -149,6 +150,17 @@ $bubble_button_radius:$base_border_radius*1.25;
   }
 }
 
+// osd buttons {
+%osd_button {
+  font-weight: bold;
+  @include button(normal, $c:$osd_bg_color);
+  &:insensitive { @include button(insensitive, $c:$osd_bg_color);}
+  &:focus { @include button(focus, $c:$osd_bg_color);}
+  &:hover { @include button(hover, $c:$osd_bg_color);}
+  &:active { @include button(active, $c:$osd_bg_color);}
+  &:checked { @include button(checked, $c:$osd_bg_color);}
+}
+
 /* General Typography */
 
 %large_title {
diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index 7e953841eb..4291bb974e 100644
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -160,6 +160,13 @@
     background-color: mix($tc, $c, 2%);
   }
 
+  // checked button
+  @else if $t==checked {
+    color: $tc;
+    background-color: darken(mix($tc, $c, 2%), 5%);
+  }
+
+
   // insensitive button
   @else if $t==insensitive {
     color: transparentize($tc, 0.5);
diff --git a/data/theme/gnome-shell-sass/widgets/_buttons.scss 
b/data/theme/gnome-shell-sass/widgets/_buttons.scss
index 709ac467c7..6a72c07966 100644
--- a/data/theme/gnome-shell-sass/widgets/_buttons.scss
+++ b/data/theme/gnome-shell-sass/widgets/_buttons.scss
@@ -2,4 +2,5 @@
 
 .button {
   @extend %button; // that's it
+  min-height: 22px;
 }
diff --git a/data/theme/gnome-shell-sass/widgets/_screenshot.scss 
b/data/theme/gnome-shell-sass/widgets/_screenshot.scss
index 1f0e217384..4439574e0a 100644
--- a/data/theme/gnome-shell-sass/widgets/_screenshot.scss
+++ b/data/theme/gnome-shell-sass/widgets/_screenshot.scss
@@ -3,73 +3,47 @@
   spacing: $base_padding;
   @extend %caption;
 
-  StIcon {
-    icon-size: 32px;
-  }
+  StIcon { icon-size: $base_icon_size*2;}
 }
 
-$screenshot_ui_panel_padding: 18px;
+$screenshot_ui_panel_padding: $base_padding*3;
 $screenshot_ui_shot_cast_margin: 21px;
-$screenshot_ui_shot_cast_border_radius: 12px;
-$screenshot_ui_panel_border_radius: $screenshot_ui_shot_cast_border_radius + $screenshot_ui_shot_cast_margin;
+$screenshot_ui_panel_border_radius: $modal_radius + $screenshot_ui_shot_cast_margin;
 $screenshot_ui_shot_cast_spacing: 3px;
 
-$screenshot_ui_button_red: #e01b24;
+$screenshot_ui_button_red: $error_color;
 
 .screenshot-ui-panel {
-  background-color: $osd_bg_color;
+  @extend %osd_panel;
   border-radius: $screenshot_ui_panel_border_radius;
   padding: $screenshot_ui_panel_padding;
   // Reduce the bottom padding a little to accommodate the large capture button.
   padding-bottom: $screenshot_ui_panel_padding - 6px;
-  margin-bottom: $base_margin * 8;
+  margin-bottom: 4em;
   spacing: $base_padding * 2;
 }
 
 .screenshot-ui-close-button {
-  background-color: $osd_bg_color;
-  color: $osd_fg_color;
-  border-radius: 99px;
-  padding: 6px;
-  height: 30px;
-  width: 30px;
-  box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.5);
-  margin-top: 8px;
-
+  @extend .window-close; // copy window close button
   &.left { margin-left: 8px; }
   &.right { margin-right: 8px; }
-
-  & StIcon { icon-size: 24px; }
-
-  &:hover {
-    background-color: lighten($osd_bg_color, 15%);
-  }
-
-  &:active {
-    color: transparentize($osd_fg_color, 0.2);
-    background-color: darken($osd_bg_color, 5%);
-  }
 }
 
 .screenshot-ui-type-button {
-  padding: $base_padding * 2 $base_padding * 3;
+  @extend %osd_button;
+  padding: $base_padding * 2 $base_padding * 3 !important;
   border-radius: $screenshot_ui_panel_border_radius - $screenshot_ui_panel_padding;
-  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;
+  border: 4px $osd_fg_color;
   padding: 4px;
 
   .screenshot-ui-capture-button-circle {
-    background-color: white;
+    background-color: $osd_fg_color;
     transition-duration: 200ms;
     &:hover, &:focus { background-color: $hover_bg_color; }
     border-radius: 99px;
@@ -77,13 +51,13 @@ $screenshot_ui_button_red: #e01b24;
 
   &:hover, &:focus {
     .screenshot-ui-capture-button-circle {
-      background-color: darken(white, 15%);
+      background-color: darken($osd_fg_color, 15%);
     }
   }
 
   &:active {
     .screenshot-ui-capture-button-circle {
-      background-color: darken(white, 50%);
+      background-color: darken($osd_fg_color, 50%);
     }
   }
 
@@ -108,7 +82,7 @@ $screenshot_ui_button_red: #e01b24;
 
 .screenshot-ui-shot-cast-container {
   background-color: $hover_bg_color;
-  border-radius: $screenshot_ui_shot_cast_border_radius;
+  border-radius: $modal_radius;
   padding: $screenshot_ui_shot_cast_spacing;
   spacing: $screenshot_ui_shot_cast_spacing;
 
@@ -117,39 +91,31 @@ $screenshot_ui_button_red: #e01b24;
 }
 
 .screenshot-ui-shot-cast-button {
-  padding: $base_padding $base_padding * 1.5;
+  padding: $base_padding $base_padding*2;
   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: $screenshot_ui_shot_cast_border_radius - $screenshot_ui_shot_cast_spacing;
+  border-radius: $modal_radius - $screenshot_ui_shot_cast_spacing;
 
-  StIcon {
-    icon-size: $base_icon_size;
-  }
+  StIcon { icon-size: $base_icon_size; }
 }
 
 .screenshot-ui-show-pointer-button {
-  padding: $base_padding * 2;
+  @extend %osd_button;
   border-radius: 99px;
-  background-color: $hover_bg_color;
-  &:hover, &:focus { background-color: lighten($hover_bg_color, 5%); }
-  &:active { background-color: $active_bg_color; }
-  &:checked { background-color: darken($hover_bg_color, 10%); }
-
-  StIcon {
-    icon-size: $base_icon_size;
-  }
+  padding: $base_padding * 2 !important;
+  StIcon { icon-size: $base_icon_size; }
 }
 
 .screenshot-ui-area-indicator-shade {
-  background-color: rgba(0, 0, 0, .3);
+  background-color: rgba(0,0,0,.3);
 }
 
 .screenshot-ui-area-selector {
   .screenshot-ui-area-indicator-shade {
-    background-color: rgba(0, 0, 0, .5);
+    background-color: rgba(0,0,0,.5);
   }
 
   .screenshot-ui-area-indicator-selection {
@@ -160,7 +126,7 @@ $screenshot_ui_button_red: #e01b24;
 .screenshot-ui-area-selector-handle {
   border-radius: 99px;
   background-color: white;
-  box-shadow: 0 1px 3px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 1px 3px 2px rgba(0,0,0,0.2);
   width: 24px;
   height: 24px;
 }
@@ -182,7 +148,7 @@ $screenshot_ui_button_red: #e01b24;
 
 .screenshot-ui-window-selector-window-border {
   transition-duration: 200ms;
-  border-radius: 18px;
+  border-radius: $modal_radius;
   border: 6px transparent;
 }
 
@@ -215,10 +181,10 @@ $screenshot_ui_button_red: #e01b24;
 
 .screenshot-ui-screen-selector {
   transition-duration: 200ms;
-  background-color: rgba(0, 0, 0, .5);
+  background-color: rgba(0,0,0,.5);
 
-  &:hover { background-color: rgba(0, 0, 0, .3); }
-  &:active { background-color: rgba(0, 0, 0, .7); }
+  &:hover { background-color: rgba(0,0,0,.3); }
+  &:active { background-color: rgba(0,0,0,.7); }
   &:checked {
     background-color: transparent;
     border: 2px white;
diff --git a/data/theme/gnome-shell-sass/widgets/_window-picker.scss 
b/data/theme/gnome-shell-sass/widgets/_window-picker.scss
index e90e3f8e0d..ca73ea22bb 100644
--- a/data/theme/gnome-shell-sass/widgets/_window-picker.scss
+++ b/data/theme/gnome-shell-sass/widgets/_window-picker.scss
@@ -5,8 +5,9 @@ $window_picker_padding: $base_padding * 2; // 12px
 
 $window_thumbnail_label_color: transparentize($osd_bg_color, 0.4);
 
+$window_close_button_color: darken(transparentize($osd_bg_color, .05), 3%);
 $window_close_button_size: 30px;
-$window_close_button_padding: 3px;
+$window_close_button_padding: $base_padding;
 
 // Window picker
 .window-picker {
@@ -24,24 +25,23 @@ $window_close_button_padding: 3px;
 
 // Close button
 .window-close {
-  background-color: $osd_bg_color;
+  background-color: $window_close_button_color;
   color: $osd_fg_color;
   border-radius: $window_close_button_size * 0.5 + $window_close_button_padding * 2;
   padding: $window_close_button_padding;
   height: $window_close_button_size;
   width: $window_close_button_size;
-  box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.5);
   transition-duration: 300ms;
 
-  & StIcon { icon-size: 24px; }
+  & StIcon { icon-size: 24px; } // uses non standard icon size
 
   &:hover {
-    background-color: lighten($osd_bg_color, 15%);
+    background-color: mix($osd_fg_color, $window_close_button_color, 15%);
   }
 
   &:active {
     color: transparentize($osd_fg_color, 0.2);
-    background-color: darken($osd_bg_color, 5%);
+    background-color: darken($window_close_button_color, 5%);
   }
 }
 
diff --git a/data/theme/meson.build b/data/theme/meson.build
index 8467325506..26471b6792 100644
--- a/data/theme/meson.build
+++ b/data/theme/meson.build
@@ -37,7 +37,6 @@ theme_sources = files([
   'gnome-shell-sass/widgets/_slider.scss',
   'gnome-shell-sass/widgets/_switcher-popup.scss',
   'gnome-shell-sass/widgets/_switches.scss',
-  'gnome-shell-sass/widgets/_tiled-previews.scss',
   'gnome-shell-sass/widgets/_window-picker.scss',
   'gnome-shell-sass/widgets/_workspace-switcher.scss',
   'gnome-shell-sass/widgets/_workspace-thumbnails.scss'
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]