diff --git a/data/gnome-shell-icons.gresource.xml b/data/gnome-shell-icons.gresource.xml index c1e575c44..a5dd1247b 100644 --- a/data/gnome-shell-icons.gresource.xml +++ b/data/gnome-shell-icons.gresource.xml @@ -14,6 +14,7 @@ scalable/actions/preview-close-symbolic.svg scalable/actions/record-screen-symbolic.svg scalable/actions/screencast-recorded-symbolic.svg + scalable/actions/screencast-stop-symbolic.svg scalable/actions/screenshooter-symbolic.svg scalable/actions/screenshot-ui-area-symbolic.svg scalable/actions/screenshot-ui-display-symbolic.svg @@ -31,7 +32,6 @@ scalable/status/no-notifications-symbolic.svg scalable/status/screen-privacy-disabled-symbolic.svg scalable/status/screen-privacy-symbolic.svg - scalable/status/stop-symbolic.svg diff --git a/data/icons/scalable/actions/screencast-stop-symbolic.svg b/data/icons/scalable/actions/screencast-stop-symbolic.svg new file mode 100644 index 000000000..8ee70a4d2 --- /dev/null +++ b/data/icons/scalable/actions/screencast-stop-symbolic.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/data/icons/scalable/status/stop-symbolic.svg b/data/icons/scalable/status/stop-symbolic.svg deleted file mode 100644 index 256276ac5..000000000 --- a/data/icons/scalable/status/stop-symbolic.svg +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss index 8bb3b4b5d..ecc24d954 100644 --- a/data/theme/gnome-shell-sass/_colors.scss +++ b/data/theme/gnome-shell-sass/_colors.scss @@ -22,8 +22,8 @@ $outer_borders_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg $link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%)); $link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%)); -$warning_color: if($variant == 'light', $yellow_5, $yellow_3); -$error_color: if($variant == 'light', $red_3, $red_4); +$warning_color: if($variant == 'light', $yellow_4, $yellow_3); +$error_color: if($variant == 'light', $red_4, $red_3); $success_color: if($variant == 'light', $green_4, $green_5); $destructive_color: $error_color; diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss index 1aaeb2f4d..87d987867 100644 --- a/data/theme/gnome-shell-sass/_drawing.scss +++ b/data/theme/gnome-shell-sass/_drawing.scss @@ -357,3 +357,87 @@ &:active {@include button(active, $c:$bg);} &:checked {@include button(checked, $c:$bg);} } + +// +// Panel menu/button drawing function +// +// $bg: background color, derived from $panel_fg_color +// $fg: foreground color, also derived from $panel_fg_color +// +// $flat: if true, the button is filled instead of transparent +// $highlighted_child: if true, applies some special overrides for to a +// child element, see _panel.scss for details +// + +@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $flat: true, $highlighted_child: false, $child_class:"") { + + transition-duration: 150ms; + border: 3px solid transparent; + border-radius: 99px; + + font-weight: bold; + background-color: transparent; + color: $fg; + + @if $flat { + box-shadow: none; + + &:active, &:overview, &:focus, &:checked { + box-shadow: inset 0 0 0 100px transparentize($bg, 0.75); + &:hover { + box-shadow: inset 0 0 0 100px transparentize($bg, 0.65); + } + } + + &:hover { + box-shadow: inset 0 0 0 100px transparentize($bg, 0.8); + } + + } @else { + box-shadow: inset 0 0 0 100px transparentize($bg, 0.2); + + &:active, &:overview, &:focus, &:checked { + box-shadow: inset 0 0 0 100px $bg; + &:hover { + box-shadow: inset 0 0 0 100px transparentize($bg, 0.05); + } + } + + &:hover { + box-shadow: inset 0 0 0 100px transparentize($bg, 0.1); + } + } + + // some overrides to style a child element + @if $highlighted_child { + box-shadow: none !important; + + #{$child_class} { + transition-duration: 150ms; + border: 3px solid transparent; + border-radius: 99px; + } + + &:active, &:overview, &:focus, &:checked { + box-shadow: none !important; + + #{$child_class} { + box-shadow: inset 0 0 0 100px transparentize($bg, 0.75); + } + + &:hover { + box-shadow: none !important; + #{$child_class} { + box-shadow: inset 0 0 0 100px transparentize($bg, 0.65); + } + } + } + + &:hover { + box-shadow: none !important; + #{$child_class} { + box-shadow: inset 0 0 0 100px transparentize($bg, 0.8); + } + } + } +} diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss index 650d4fa83..ee91d0d21 100644 --- a/data/theme/gnome-shell-sass/widgets/_panel.scss +++ b/data/theme/gnome-shell-sass/widgets/_panel.scss @@ -23,103 +23,17 @@ $panel_transition_duration: 250ms; // same as the overview transition duration &:overview { background-color: transparent; box-shadow: none; + .panel-button { - color: $panel_system_fg_color !important; + @include panel_button($panel_system_fg_color); } } // panel menus .panel-button { - font-weight: bold; - color: $panel_fg_color; + @include panel_button($panel_fg_color); -natural-hpadding: $base_padding * 2; -minimum-hpadding: $base_padding; - transition-duration: 150ms; - border: 3px solid transparent; - border-radius: 99px; - - &.clock-display { - .clock { - transition-duration: 150ms; - border: 3px solid transparent; - border-radius: 99px; - } - } - - &.screen-recording-indicator { - box-shadow: inset 0 0 0 100px $screenshot_ui_button_red; - } - - &.screen-sharing-indicator { - box-shadow: inset 0 0 0 100px $warning_color; - StBoxLayout { margin: 0 $base_padding; } - } - - &.screen-recording-indicator, - &.screen-sharing-indicator { - StBoxLayout { - spacing: $base_padding; - } - - StIcon { - icon-size: $base_icon_size; - } - } - - &:active, &:overview, &:focus, &:checked { - box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.8); - - // The clock display needs to have the background on .clock because - // we want to exclude the do-not-disturb indicator from the background - &.clock-display { - box-shadow: none; - - .clock { - 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); - } - &.screen-sharing-indicator { - box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.15); - } - } - - &:hover { - box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.85); - &.clock-display { - box-shadow: none; - .clock { - 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); - } - &.screen-sharing-indicator { - box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.1); - } - } - - &:active:hover, &:overview:hover, &:focus:hover, &:checked:hover { - box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.75); - &.clock-display { - box-shadow: none; - .clock { - 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); - } - &.screen-sharing-indicator { - box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.2); - } - } // status area icons .system-status-icon { @@ -142,63 +56,36 @@ $panel_transition_duration: 250ms; // same as the overview transition duration &#panelActivities { -natural-hpadding: $base_padding * 3; } - } - &.unlock-screen, - &.login-screen, - &:overview { - .panel-button { - &:active, &:overview, &:focus, &:checked { - box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.85); - - &.clock-display { - box-shadow: none; - - .clock { - box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.85); - } - } - - &.screen-recording-indicator { - box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.15); - } - &.screen-sharing-indicator { - box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.15); - } + // screen activity indicators + &.screen-recording-indicator, + &.screen-sharing-indicator { + StBoxLayout { + spacing: $base_padding; } - &:hover { - box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.90); - &.clock-display { - box-shadow: none; - .clock { - box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.90); - } - } - - &.screen-recording-indicator { - box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.1); - } - &.screen-sharing-indicator { - box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.1); - } + StIcon { + icon-size: $base_icon_size; } + } - &:active:hover, &:overview:hover, &:focus:hover, &:checked:hover { - box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.8); - &.clock-display { - box-shadow: none; - .clock { - box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.8); - } - } + &.screen-recording-indicator { + @include panel_button($screenshot_ui_button_red, $flat: false); + } - &.screen-recording-indicator { - box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.2); - } - &.screen-sharing-indicator { - box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.2); - } + &.screen-sharing-indicator { + @include panel_button($warning_color, transparentize(black, 0.2), $flat: false); + } + + // clock + &.clock-display { + // The clock display needs to have the background on .clock because + // we want to exclude the do-not-disturb indicator from the background + // see _drawing.scss for override details + @include panel_button($highlighted_child: true, $child_class:".clock"); + + .clock { + // the highlighted child } } } @@ -231,10 +118,8 @@ $panel_transition_duration: 250ms; // same as the overview transition duration // Clock - .clock-display-box { spacing: 2px; - .clock { padding-left: $base_padding * 2; padding-right: $base_padding * 2; diff --git a/js/ui/status/remoteAccess.js b/js/ui/status/remoteAccess.js index 1ed87931a..93980dccc 100644 --- a/js/ui/status/remoteAccess.js +++ b/js/ui/status/remoteAccess.js @@ -83,7 +83,7 @@ var ScreenRecordingIndicator = GObject.registerClass({ }); this._box.add_child(this._label); - this._icon = new St.Icon({ icon_name: 'stop-symbolic' }); + this._icon = new St.Icon({icon_name: 'screencast-stop-symbolic'}); this._box.add_child(this._icon); this.hide(); @@ -150,7 +150,7 @@ var ScreenSharingIndicator = GObject.registerClass({ let icon = new St.Icon({icon_name: 'screen-shared-symbolic'}); this._box.add_child(icon); - icon = new St.Icon({icon_name: 'window-close-symbolic'}); + icon = new St.Icon({icon_name: 'screencast-stop-symbolic'}); this._box.add_child(icon); this._controller = global.backend.get_remote_access_controller();